/* =====================================================================
   ЦСК — военно-деловая дизайн-система v3
   Олива · хаки · песок · сигнальный оранжевый.
   Типографика: Oswald (плакат/заголовки) · Saira Stencil One (дисплей) · IBM Plex Sans (текст) · IBM Plex Mono (данные)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Saira+Stencil+One&display=swap');

/* ---------- Военный display-шрифт для hero H1 (локально, кириллица + латиница) ---------- */
@font-face {
  font-family: 'Russo One';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/russo-one-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Russo One';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/russo-one-lat.woff2') format('woff2');
  unicode-range: U+0020-007F, U+00A0-00FF, U+2000-206F, U+20A0-20CF, U+2100-214F;
}

/* ---------- Токены ---------- */
:root {
  /* палитра «Хвоя»: белый фон · графитный текст · чистый зелёный акцент */
  --olive:    #16221A;     /* тёмная хвоя — тёмная база (hero/cta/footer/кнопки) */
  --olive-d:  #0F1712;     /* глубже */
  --olive-2:  #24332A;
  --olive-3:  #8FA89A;     /* приглушённый текст на тёмном */
  --khaki:    #2A7A55;     /* светлая хвоя (alias вторичного) */
  --khaki-2:  #5FA882;     /* светло-зелёный на тёмном */
  --sand:     #ffffff;     /* фон — ЧИСТО-БЕЛЫЙ */
  --sand-2:   #F3F6F4;     /* карточки / альт-секции */
  --sand-3:   #E9EDEB;
  --ink:      #181C18;     /* основной текст */
  --ink-soft: #4F5A52;     /* вторичный текст */
  --ink-faint:#8A938C;
  --signal:   #2A7A55;     /* ПЕРВИЧНЫЙ акцент — ХВОЯ, ярче (кнопки/CTA/ссылки/кикеры) */
  --signal-2: #46C68B;     /* яркий акцент на тёмном (hero <em>, CTA) */
  --signal-d: #16462F;     /* темнее */
  --bronze:   #2A7A55;     /* вторичный = та же хвоя (связно) */
  --bronze-l: #46C68B;
  --bronze-d: #16462F;
  --rust:     #C03B3B;     /* красный — только ошибки/обязательное (статус) */
  --line:     #E2E7E3;     /* светлые рамки */
  --line-2:   #CDD5CE;
  --light:    #EAF1EC;     /* текст на тёмном */
  --light-2:  #B8C7BD;
  --light-3:  #7E8C84;

  --stencil: 'Oswald', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Saira Stencil One', 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --grunge:  'Russo One', 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --sans:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;

  --wrap: 1200px;
  --mast-h: 66px;
  --r: 4px;               /* ровнее, 2–8px */
  --sec-y: clamp(3.5rem, 9vw, 7rem);   /* МНОГО воздуха */
  --t-fast: .16s ease;
  --t: .3s cubic-bezier(.2,.7,.2,1);
}

/* ---------- Сброс / база ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition:none!important;animation:none!important;} }
body {
  margin: 0; width: 100%; overflow-wrap: break-word;
  font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: rgba(42,122,85,.18); color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--stencil); font-weight: 600; line-height: 1.04; margin: 0; letter-spacing: .03em; }
p { margin: 0 0 1rem; }

/* ---------- Примитивы ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 5vw, 36px); }

.kicker {
  font-family: var(--mono); font-size: .66rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--signal-d);
  display: inline-flex; align-items: center; gap: .55rem;
}
.kicker::before { content: "❯❯"; color: var(--signal); letter-spacing: -.05em; opacity: .9; }
.kicker--light { color: var(--khaki-2); }
.kicker--light::before { color: var(--signal-2); }

.lede { font-size: clamp(1rem, 2.5vw, 1.18rem); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.note { font-size: .82rem; color: var(--ink-faint); line-height: 1.5; }

/* внутренняя рамка-«бланк» для панелей */
.plate { position: relative; }
.plate::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--line-2); opacity: .45; pointer-events: none; }

/* ---------- Кнопки ---------- */
.btn {
  --bg: var(--olive-d); --fg: var(--light); --bd: var(--olive-d);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .85rem 1.4rem; font-family: var(--stencil); font-weight: 500; font-size: .92rem;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  color: var(--fg); background: var(--bg); border: 1.5px solid var(--bd); border-radius: var(--r);
  cursor: pointer; transition: var(--t-fast); -webkit-tap-highlight-color: transparent; text-align: center;
  position: relative;
}
.btn:hover { transform: translateY(-1px); }
.btn--accent { --bg: var(--signal); --fg: #fff; --bd: var(--signal); }
.btn--accent:hover { --bg: var(--signal-d); --fg: #fff; --bd: var(--signal-d); }
.btn--ghost { --bg: transparent; --fg: var(--light); --bd: rgba(232,225,204,.45); }
.btn--ghost:hover { --bd: var(--signal-2); --fg: #fff; }
.btn--ink-ghost { --bg: transparent; --fg: var(--olive-d); --bd: var(--line-2); }
.btn--ink-ghost:hover { --bd: var(--olive-d); --bg: var(--olive-d); --fg: var(--light); }
.max-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 54px; padding: .9rem 1.5rem; border-radius: var(--r); font-family: var(--stencil); font-weight: 500; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1; color: #fff; text-decoration: none; background: var(--olive-2); border: 1px solid rgba(232,225,204,.28); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.max-button:hover { background: #2c3c32; border-color: rgba(232,225,204,.5); transform: translateY(-1px); }
.max-button:active { transform: scale(.97); }
.max-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31,90,61,.45); }
.max-button__icon { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; }
.max-button__icon img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.max-button__icon i { font-size: 1.4rem; line-height: 1; }
.max-button__text { display: inline; }
.max-button__label { display: none; }
.max-button__title { font-size: 1rem; font-weight: 700; color: #fff; }
.max-button__arrow { display: none; }

/* ============================================================
   Mobile hardening + липкий CTA-бар
   ============================================================ */
html { scroll-padding-top: 84px; overflow-x: hidden; max-width: 100%; }

/* HERO ФОН — авто-загрузка, если файл лежит в /assets/img/.
   (для тёмной «оливовой» темы: тёмный скрим, светлый текст) */
body[data-source="yandex"] .hero__pat { background: linear-gradient(105deg, rgba(18,22,14,.80) 0%, rgba(18,22,14,.34) 52%, rgba(18,22,14,.04) 100%), url("../img/hero-yandex.jpg") center/cover no-repeat; }
body[data-source="facebook"] .hero__pat { background: linear-gradient(105deg, rgba(18,22,14,.78) 0%, rgba(18,22,14,.32) 52%, rgba(18,22,14,.04) 100%), url("../img/hero-facebook.jpg") center/cover no-repeat; }

/* уникальные hero по лендингам (переопределяют общий data-source) */
body[data-page="yandex-napravleniya"] .hero__pat { background: linear-gradient(105deg, rgba(18,22,14,.80) 0%, rgba(18,22,14,.34) 52%, rgba(18,22,14,.04) 100%), url("../img/hero-napravleniya.jpeg") center/cover no-repeat; }
body[data-page="yandex-konsultaciya"] .hero__pat { background: linear-gradient(105deg, rgba(18,22,14,.80) 0%, rgba(18,22,14,.34) 52%, rgba(18,22,14,.04) 100%), url("../img/hero-konsultaciya.jpeg") center/cover no-repeat; }
body[data-page="fb-rf-abroad"] .hero__pat { background: linear-gradient(105deg, rgba(18,22,14,.80) 0%, rgba(18,22,14,.34) 52%, rgba(18,22,14,.04) 100%), url("../img/hero-fb-rf-abroad.jpeg") center/cover no-repeat; }
body[data-page="fb-abroad"] .hero__pat { background: linear-gradient(105deg, rgba(18,22,14,.80) 0%, rgba(18,22,14,.34) 52%, rgba(18,22,14,.04) 100%), url("../img/hero-fb-abroad.jpeg") center/cover no-repeat; }
body[data-page="fb-konsultaciya"] .hero__pat { background: linear-gradient(105deg, rgba(18,22,14,.80) 0%, rgba(18,22,14,.34) 52%, rgba(18,22,14,.04) 100%), url("../img/hero-facebook.jpeg") center/cover no-repeat; }

@media (max-width: 680px) {
  .sec { padding-top: clamp(1.9rem, 7vw, 2.4rem); padding-bottom: clamp(1.9rem, 7vw, 2.4rem); }
  .sec__head { margin-bottom: 1.15rem; padding-bottom: .85rem; }
  .hero__row { padding-top: clamp(2rem, 9vw, 3rem); padding-bottom: clamp(2rem, 7vw, 2.8rem); gap: 1.4rem; }
  .hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.4rem); }
  .hero__lead { font-size: 1rem; margin-top: 1rem; }
  .hero__acts { margin-top: 1.4rem; }
  .quotes .quote:nth-child(n+4) { display: none; }
  .faq__item:nth-child(n+9) { display: none; }
}

@media (max-width: 560px) {
  .hero__acts { flex-direction: column; align-items: stretch; }
  .hero__acts .btn, .hero__acts .max-button { width: 100%; }
  .max-button { width: 100%; min-width: 0; height: 58px; }
}

/* липкий мобильный CTA — плавающий glass-бар: пилюля «Консультация» + кружок MAX */
.mobile-cta {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 55; display: none; align-items: center; gap: 10px; padding: 10px;
  border-radius: 24px;
  background: rgba(255,255,255,.80);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 14px 36px rgba(20,25,15,.20), 0 2px 6px rgba(20,25,15,.08);
}
.mobile-cta .btn { flex: 1 1 0; min-width: 0; min-height: 52px; border-radius: 15px; }
.mobile-cta .max-button {
  flex: 0 0 auto; width: 52px; height: 52px; min-width: 52px; min-height: 52px;
  padding: 0; border-radius: 50%; gap: 0; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.mobile-cta .max-button__text { display: none; }
.mobile-cta .max-button__icon { width: 26px; height: 26px; }
.mobile-cta .max-button__icon img { width: 26px; height: 26px; }
.mobile-cta .max-button__icon i { font-size: 1.55rem; }
@media (max-width: 920px) {
  .mobile-cta { display: flex; }
  .foot { padding-bottom: calc(1.5rem + 92px + env(safe-area-inset-bottom, 0px)); }
}
body.no-scroll .mobile-cta { display: none; }

@media (max-width: 360px) {
  .hero h1 { font-size: 1.7rem; }
  .hero__acts .btn { font-size: .86rem; }
  .sec__title { font-size: 1.45rem; }
  .dir__name { font-size: 1rem; }
  .rate__v { font-size: 1.2rem; }
}
@media (max-width: 320px) {
  body { font-size: 15px; }
  .wrap { padding: 0 11px; }
  .hero h1 { font-size: 1.55rem; }
  .max-button { height: 54px; }
  .mobile-cta .max-button { width: 48px; min-width: 48px; height: 48px; }
}
@media (max-width: 280px) {
  .wrap { padding: 0 9px; }
  .hero h1 { font-size: 1.4rem; }
  .fact .v { font-size: 1.2rem; }
}

/* ============ Mobile readability — спокойная типографика на телефоне ============ */
@media (max-width: 680px) {
  .hero h1, .sec__title, .cta h2, .popup__title { text-transform: none; letter-spacing: 0; line-height: 1.16; }
  .hero h1 em { display: block; }
  .sec__num { display: none; }
  .sec__top { gap: 0; }
  .sec__intro { font-size: .9rem; }
  .grain { opacity: .03; }
  .hero__k { letter-spacing: .14em; }
  .dir__tag { display: none; }
  .dir__row { grid-template-columns: 2rem 1fr; }
  .fact { padding: .9rem .55rem; }
  .fact .v { font-size: clamp(1.05rem, 6vw, 1.4rem); }
  .hero__acts > *, .m-row > *, .mobile-cta > * { min-width: 0; }
  .max-button, .fact, .rate__v, .dir__main { max-width: 100%; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
}
.btn--lg { padding: 1.05rem 1.8rem; font-size: 1rem; }
.btn--sm { padding: .55rem .9rem; font-size: .78rem; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; }
.btn i { font-size: 1.05em; line-height: 1; }

/* ---------- Мэстхэд ---------- */
.mast { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.85); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .3s ease, background .3s ease, border-color .3s ease; }
.mast.is-scrolled { background: rgba(255,255,255,.96); box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 10px 30px rgba(20,25,15,.07); }
.mast__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--mast-h); }

.lockup { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.lockup__mark { width: 30px; height: auto; flex: none; }
.lockup__txt { min-width: 0; line-height: 1; }
.lockup__name { font-family: var(--stencil); font-weight: 500; font-size: clamp(.78rem, 2.1vw, .94rem); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: var(--olive-d); }
.lockup__sub { display: block; font-family: var(--mono); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--olive-3); margin-top: 4px; }
@media (max-width: 999px) { .lockup__name { display: none; } }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: .15rem; }
.nav a { position: relative; display: inline-block; padding: .5rem .5rem; font-family: var(--stencil); font-weight: 500; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--olive); }
.nav a::after { content: ""; position: absolute; left: .65rem; right: .65rem; bottom: .3rem; height: 2px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: var(--t-fast); }
.nav a:hover, .nav a.is-active { color: var(--olive-d); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.mast__right { display: flex; align-items: center; gap: .6rem; }
.mast__phone { display: none; font-family: var(--mono); font-size: .82rem; color: var(--olive-d); }
.mast__phone:hover { color: var(--signal-d); }
.mast__cta { display: none; align-items: center; gap: .5em; padding: .62rem 1.05rem; font-family: var(--stencil); font-weight: 500; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--olive-d); background: transparent; border: 1.5px solid var(--line-2); border-radius: 2px; cursor: pointer; transition: var(--t-fast); -webkit-tap-highlight-color: transparent; }
.mast__cta:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.mast__cta i { font-size: .85em; transition: transform var(--t-fast); }
.mast__cta:hover i { transform: translateX(3px); }

.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: var(--olive-d); transition: var(--t-fast); margin: 0 auto; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Полноэкранное меню */
.overlay { position: fixed; inset: 0; z-index: 70; background: var(--olive-d); color: var(--light); transform: translateY(-100%); transition: transform var(--t); display: flex; flex-direction: column; overflow-y: auto; }
.overlay::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(232,225,204,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(232,225,204,.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.overlay.is-open { transform: none; }
.overlay__head { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--mast-h); padding: 0 clamp(14px,4vw,36px); border-bottom: 1px solid rgba(232,225,204,.14); }
.overlay__close { width: 44px; height: 44px; background: none; border: 0; color: var(--light); cursor: pointer; font-size: 1.8rem; line-height: 1; }
.overlay__nav { position: relative; flex: 1; padding: clamp(1.5rem,6vw,3rem) clamp(14px,4vw,36px); display: flex; flex-direction: column; gap: .1rem; }
.overlay__nav a { font-family: var(--stencil); font-weight: 500; font-size: clamp(1.7rem, 9vw, 2.8rem); letter-spacing: .03em; text-transform: uppercase; padding: .4rem 0; color: var(--light); border-bottom: 1px solid rgba(232,225,204,.12); display: flex; align-items: baseline; gap: 1rem; }
.overlay__nav a .n { font-family: var(--mono); font-size: .8rem; color: var(--signal-2); letter-spacing: .05em; }
.overlay__nav a:hover { color: var(--signal-2); }
.overlay__foot { position: relative; padding: 1.5rem clamp(14px,4vw,36px) 2.5rem; display: grid; gap: 1rem; }

@media (min-width: 920px) {
  :root { --mast-h: 72px; }
  .lockup__mark { width: 34px; }
  .nav { display: block; margin-left: auto; }
  .mast__phone { display: inline-flex; align-items: center; gap: .4rem; }
  .mast__cta { display: inline-flex; }
  .burger { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--olive); color: var(--light); overflow: hidden; }
.hero__pat { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(900px 480px at 80% -10%, rgba(31,90,61,.18), transparent 58%),
    linear-gradient(165deg, var(--olive-d) 0%, var(--olive) 55%, var(--olive-2) 100%); }
.hero__pat::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(232,225,204,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(232,225,204,.05) 1px, transparent 1px); background-size: 46px 46px; }
.hero__row { position: relative; z-index: 1; display: grid; gap: clamp(2rem,6vw,3.5rem); padding: clamp(2.75rem,9vw,6rem) 0 clamp(2.5rem,7vw,4.5rem); }
.hero__k { color: var(--bronze-l); }
.hero h1 {
  font-family: var(--grunge, var(--stencil));
  font-size: clamp(2.1rem, 7vw, 4rem); line-height: 1.0;
  text-transform: uppercase; font-weight: 700; letter-spacing: .01em;
  color: var(--light);
}
.hero h1 em { font-style: normal; color: var(--signal-2); }
.hero__lead { color: #e6e0cd; max-width: 44ch; margin-top: 1.3rem; font-size: clamp(1rem,2.6vw,1.18rem); }
.hero__acts { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1.8rem; }
.hero__note { font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--light-3); margin-top: 1.2rem; max-width: 50ch; }

/* Досье-карточка */
.dossier { background: rgba(20,25,15,.5); border: 1px solid rgba(232,225,204,.18); padding: clamp(1.3rem,4vw,1.9rem); position: relative; }
.dossier::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(232,225,204,.14); pointer-events: none; }
.dossier > * { position: relative; }
.dossier__lbl { font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--signal-2); padding-bottom: .9rem; border-bottom: 1px solid rgba(232,225,204,.18); margin-bottom: .3rem; }
.dossier__grid { display: grid; grid-template-columns: 1fr 1fr; margin: .6rem 0 0; }
.dcell { padding: clamp(.85rem,2.5vw,1.05rem) .5rem; border-bottom: 1px solid rgba(232,225,204,.14); border-right: 1px solid rgba(232,225,204,.14); }
.dcell:nth-child(2n) { border-right: 0; }
.dcell:nth-last-child(-n+2) { border-bottom: 0; }
.dcell__l { display: block; font-family: var(--mono); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--khaki-2); }
.dcell__v { display: block; margin-top: .45rem; font-family: var(--stencil); font-weight: 600; font-size: clamp(1.05rem,3vw,1.2rem); letter-spacing: .03em; text-transform: uppercase; color: var(--light); line-height: 1; }
.dossier__cta { margin-top: 1.25rem; }

@media (min-width: 940px) {
  .hero__row { align-items: center; }
  .hero__row > div { max-width: 760px; }
}

/* декоративные уголки убраны — военный минимализм */

/* галерея направлений — крупные кадры-стиллы */
.dir__gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin-bottom: 2rem; }
.dir__shot { position: relative; margin: 0; border: 1px solid var(--line-2); overflow: hidden; aspect-ratio: 4/3; background: var(--olive-d); }
.dir__shot img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.86) contrast(1.05) brightness(.96) sepia(.08); transition: transform .5s ease, filter .4s ease; }
.dir__shot:hover img { transform: scale(1.06); filter: saturate(.95) contrast(1.05) brightness(1.02) sepia(.05); }
.dir__shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .8rem; font-family: var(--stencil); font-weight: 500; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: linear-gradient(0deg, rgba(18,22,14,.92), transparent 75%); }
@media (max-width: 760px) { .dir__gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .dir__gallery { grid-template-columns: repeat(2, 1fr); gap: .5rem; } .dir__shot figcaption { font-size: .7rem; padding: .55rem .6rem; } }

/* блок «О центре» */
.about { padding-top: clamp(2.5rem, 7vw, 4.5rem); padding-bottom: clamp(2.5rem, 7vw, 4.5rem); }
.about .kicker { color: var(--signal-d); }
.about__row { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.8rem); align-items: center; }
.about__title { font-family: var(--stencil); font-size: clamp(1.6rem, 5vw, 2.5rem); text-transform: uppercase; font-weight: 600; margin: .7rem 0 1rem; color: var(--ink); }
.about__lead { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 46ch; }
.about__list { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .6rem; }
.about__list li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); font-size: .95rem; }
.about__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; background: var(--signal-d); }
.about__main { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; border: 1px solid var(--line-2); }
.about__strip { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.about__shot { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--line-2); background: var(--olive-d); }
.about__shot img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92); }
.about__shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .65rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(0deg, rgba(18,22,14,.85), transparent); }
@media (min-width: 760px) { .about__row { grid-template-columns: 1.05fr 1fr; } }
@media (max-width: 560px) { .about__strip { grid-template-columns: 1fr; } }

/* ============================================================
   Чисто-военная подача: светлые карточки на белом, фото — единый лёгкий грейд
   ============================================================ */
/* единый лёгкий грейд на контентные фото — приглушённо, без разнобоя */
.dir__shot img,
.about__main,
.about__shot img { filter: saturate(.9) contrast(1.03); }
.dir__shot:hover img,
.about__shot:hover img { filter: saturate(1) contrast(1.04); }

/* фото-блоки — корректные соотношения (без обрезки 4:3), аккуратное скругление */
.dir__shot { border-radius: var(--r); border-color: var(--line); }
.about__main { aspect-ratio: 4/3; border: 1px solid var(--line); border-radius: var(--r); }
.about__shot { aspect-ratio: 4/3; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }

/* ---------- Факты: дата-пластина ---------- */
.facts { background: var(--sand-2); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts__row { display: grid; grid-template-columns: repeat(2, 1fr); }
.fact { padding: clamp(1.3rem,3.5vw,1.9rem) clamp(1rem,3vw,1.5rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.fact:nth-child(2n) { border-right: 0; }
.fact .v { font-family: var(--stencil); font-weight: 600; font-size: clamp(1.5rem,5.5vw,2.3rem); font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1.05; color: var(--olive); }
.fact .l { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: .5rem; }
@media (min-width: 760px) {
  .facts__row { grid-template-columns: repeat(4, 1fr); }
  .fact { border-bottom: 0; }
  .fact:nth-child(2n) { border-right: 1px solid var(--line); }
  .fact:last-child { border-right: 0; }
}

/* ---------- Секции ---------- */
.sec { padding: var(--sec-y) 0; }
.sec--alt { background: var(--sand-2); }
.sec--dark { background: var(--olive-d); color: var(--light); }
.sec--dark .sec__title, .sec--dark h3 { color: #fff; }
.sec--dark .sec__head { border-color: rgba(232,225,204,.16); }
.sec--dark .sec__intro { color: var(--light-2); }
.sec--dark .note { color: var(--light-3); }
.sec--dark .def__k { color: var(--khaki-2); }
.sec--dark .def__v small { color: var(--light-2); }

.sec__head { display: grid; grid-template-columns: 1fr; gap: .8rem; padding-bottom: 1.1rem; margin-bottom: clamp(1.5rem,4vw,2.6rem); border-bottom: 1px solid var(--line-2); }
.sec__top { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.sec__num { font-family: var(--mono); font-size: .78rem; color: var(--signal-d); letter-spacing: .04em; }
.sec__title { font-size: clamp(1.6rem, 5vw, 2.5rem); text-transform: uppercase; font-weight: 600; }
.sec__intro { color: var(--ink-soft); font-size: .92rem; max-width: 46ch; }
@media (min-width: 820px) {
  .sec__head { grid-template-columns: auto 1fr auto; align-items: end; }
  .sec__intro { text-align: right; margin-left: auto; }
}

/* ---------- Условия: def-сетка ---------- */
.def { border-top: 1px solid var(--line-2); }
.def__row { display: grid; grid-template-columns: 1fr; gap: .3rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.def__k { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--olive-3); }
.def__v { font-family: var(--stencil); font-weight: 500; font-size: 1.08rem; letter-spacing: .02em; line-height: 1.3; text-transform: none; }
.def__v small { display: block; font-family: var(--sans); font-weight: 400; font-size: .83rem; color: var(--ink-soft); margin-top: .15rem; letter-spacing: 0; }
@media (min-width: 760px) {
  .def { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem,4vw,3rem); }
  .def__row { grid-template-columns: 8.5rem 1fr; align-items: baseline; gap: 1rem; }
}

/* ---------- Направления: индекс-список ---------- */
.dir { border-top: 2px solid var(--olive-d); }
.dir__row { position: relative; display: grid; grid-template-columns: 2.4rem 1fr auto; gap: clamp(.7rem,3vw,1.4rem); align-items: baseline; padding: clamp(.95rem,3vw,1.2rem) 0; border-bottom: 1px solid var(--line); transition: var(--t-fast); }
.dir__row::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 3px; background: var(--signal); transform: scaleY(0); transform-origin: top; transition: var(--t); }
.dir__row:hover::before { transform: scaleY(1); }
.dir__row:hover .dir__name { color: var(--signal-d); }
.dir__num { font-family: var(--mono); font-size: .8rem; color: var(--olive-3); font-variant-numeric: tabular-nums; }
.dir__main { min-width: 0; }
.dir__name { font-family: var(--stencil); font-weight: 600; font-size: clamp(1.05rem,3vw,1.25rem); letter-spacing: .03em; text-transform: uppercase; transition: var(--t-fast); }
.dir__desc { display: block; font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); margin-top: .15rem; letter-spacing: 0; text-transform: none; }
.dir__tag { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--olive-3); text-align: right; white-space: nowrap; align-self: start; padding-top: .3rem; border: 1px solid var(--line-2); padding: .25rem .5rem; }
.dir__more { display: flex; justify-content: center; margin-top: clamp(1.3rem,4vw,2rem); }
.dir-extra { display: none; }
/* display:block вместо display:contents — надёжнее на мобиле:
   последний ряд больше не «сьезжает», корректно работает и в гриде, и в блоке */
.dir-extra.is-open { display: block; }
@media (min-width: 760px) {
  .dir { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem,4vw,3rem); }
}

/* ---------- Выплаты: rate-table ---------- */
.rate { border-top: 2px solid var(--olive-d); }
.rate__row { display: grid; grid-template-columns: 1fr; gap: .3rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rate__v { font-family: var(--stencil); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: clamp(1.35rem,5vw,1.9rem); text-transform: uppercase; }
.rate__row.is-lead .rate__v { font-size: clamp(1.9rem,7vw,2.8rem); color: var(--signal-d); }
.rate__l { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); max-width: 42ch; }
.rate__row.is-lead .rate__l { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: .64rem; color: var(--olive-3); }
@media (min-width: 760px) {
  .rate__row { grid-template-columns: 1fr auto; gap: 1.2rem; }
  .rate__l { text-align: right; }
}

/* ---------- Этапы: таймлайн ---------- */
.tl { position: relative; display: grid; gap: clamp(1.2rem,4vw,1rem); grid-template-columns: 1fr; }
.tl__step { position: relative; }
.tl__node { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--sand); border: 2px solid var(--olive); display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: .82rem; color: var(--olive-d); position: relative; z-index: 1; margin-bottom: .9rem; }
.tl__step h3 { font-size: 1.1rem; margin-bottom: .25rem; text-transform: uppercase; }
.tl__step p { color: var(--ink-soft); font-size: .88rem; margin: 0; max-width: 38ch; }
@media (min-width: 860px) {
  .tl { grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,3vw,2rem); }
  .tl::before { content: ""; position: absolute; top: 1.25rem; left: 0; right: 0; height: 2px; background: var(--line-2); }
  .tl__node { margin-bottom: 1.2rem; }
}

/* ---------- Отзывы ---------- */
.quotes { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.quote { display: flex; gap: .9rem; align-items: flex-start; padding: 1.3rem 0; border-top: 1px solid var(--line); }
.quote:last-child { border-bottom: 1px solid var(--line); }
/* кружок-силуэт: нейтральная заглушка фото (отзывы обезличенные) */
.quote__ava { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sand-2); border: 1px solid var(--line); color: var(--olive-3); overflow: hidden; }
.quote__ava i { font-size: 1.05rem; line-height: 1; }
.quotes .quote:nth-child(2n) .quote__ava { background: var(--sand-3); }
.quote__body { min-width: 0; flex: 1 1 auto; }
.quote__txt { font-family: var(--sans); font-size: clamp(1.02rem,2.6vw,1.2rem); line-height: 1.5; color: var(--ink); margin: 0; }
.quote__txt::before { content: "«"; color: var(--signal-d); font-family: var(--stencil); font-weight: 700; }
.quote__txt::after { content: "»"; color: var(--signal-d); font-family: var(--stencil); font-weight: 700; }
.quote__by { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-top: .7rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.quote__by b { color: var(--olive-d); font-family: var(--stencil); font-weight: 600; letter-spacing: .05em; }
.quote__play { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--signal-d); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@media (min-width: 900px) {
  .quotes { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .quote--feat { grid-column: 1 / -1; }
  .quote--feat .quote__txt { font-size: clamp(1.3rem,3.2vw,1.7rem); }
  .quote--feat .quote__ava { width: 52px; height: 52px; }
  .quote--feat .quote__ava i { font-size: 1.25rem; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 1140px; margin: 0 auto; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 920px) { .faq { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } }
.faq__item { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--line-2); transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
.faq__item:hover { border-left-color: var(--khaki); }
.faq__item.is-open { border-left-color: var(--signal); background: #fafafa; box-shadow: 0 8px 22px rgba(20,25,15,.07); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: clamp(1rem,3vw,1.2rem) clamp(.8rem,2vw,1.1rem); display: grid; grid-template-columns: 2.1rem 1fr 1rem; gap: clamp(.5rem,2vw,.8rem); align-items: center; font-family: var(--stencil); font-weight: 500; font-size: clamp(.98rem,2.2vw,1.08rem); letter-spacing: .01em; color: var(--olive-d); line-height: 1.25; }
.faq__q .n { font-family: var(--mono); font-size: .7rem; color: var(--olive-3); font-variant-numeric: tabular-nums; }
.faq__q .i { justify-self: end; width: 9px; height: 9px; border-right: 2px solid var(--olive-3); border-bottom: 2px solid var(--olive-3); transform: rotate(45deg); transition: transform var(--t), border-color var(--t); }
.faq__item.is-open .faq__q { color: var(--signal-d); }
.faq__item.is-open .faq__q .i { transform: rotate(-135deg); border-color: var(--signal); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--t); }
.faq__a-in { padding: 0 clamp(.8rem,2vw,1.1rem) clamp(1rem,3vw,1.3rem) calc(2.1rem + clamp(.5rem,2vw,.8rem) + clamp(.8rem,2vw,1.1rem)); color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }

/* ---------- CTA ---------- */
.cta { background: linear-gradient(105deg, rgba(18,22,14,.86) 0%, rgba(18,22,14,.54) 52%, rgba(18,22,14,.30) 100%), url("../img/cta-bg.jpeg") center/cover no-repeat; background-color: var(--olive); color: var(--light); position: relative; overflow: hidden; border-top: 1px solid rgba(31,90,61,.4); }
.cta::before { content: ""; position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(rgba(232,225,204,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(232,225,204,.04) 1px, transparent 1px); background-size: 44px 44px; }
.cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(820px 380px at 14% 0%, rgba(31,90,61,.18), transparent 55%); }
.cta__row { position: relative; display: grid; gap: 1.6rem; padding: clamp(2.5rem,7vw,4.5rem) 0; grid-template-columns: 1fr; align-items: end; }
.cta h2 { font-size: clamp(1.7rem,5vw,2.9rem); max-width: 22ch; text-transform: uppercase; }
.cta h2 em { font-style: normal; color: var(--signal-2); }
.cta__lead { color: #cbc4ad; max-width: 52ch; margin-top: 1rem; }
.cta__acts { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (min-width: 880px) {
  .cta__row { grid-template-columns: 1.5fr .5fr; }
  .cta__acts { flex-direction: column; align-items: stretch; }
}

/* ---------- Футер ---------- */
.foot { background: var(--olive-d); color: var(--light-2); padding: clamp(2.5rem,6vw,4rem) 0 1.5rem; border-top: 3px solid var(--signal); }
.foot__top { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.foot__brand { max-width: 42ch; }
.foot__brand .lockup__name { color: #fff; }
.foot__brand p { color: var(--light-3); font-size: .85rem; margin-top: 1rem; }
.foot__col h4 { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--signal-2); margin-bottom: .9rem; }
.foot__col ul { display: grid; gap: .55rem; }
.foot__col a { font-size: .86rem; color: var(--light-2); }
.foot__col a:hover { color: var(--signal-2); }
.foot__disc { margin-top: clamp(1.8rem,5vw,2.5rem); padding-top: 1.2rem; border-top: 1px solid rgba(232,225,204,.12); font-size: .76rem; color: var(--light-3); line-height: 1.55; }
.foot__bot { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; margin-top: 1rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--light-3); }
@media (min-width: 820px) { .foot__top { grid-template-columns: 1.6fr 1fr 1fr; } }

/* ---------- Попап + форма ---------- */
.popup { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(15,18,8,.66); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); }
.popup.is-open { opacity: 1; visibility: visible; }
.popup__panel { position: relative; width: 100%; max-width: 470px; max-height: 92vh; overflow-y: auto; background: var(--sand); border: 1px solid var(--line-2); padding: clamp(1.5rem,5vw,2.2rem); transform: translateY(10px) scale(.99); transition: transform var(--t); box-shadow: 0 30px 80px rgba(15,18,8,.42), 0 8px 24px rgba(15,18,8,.18); }
.popup__panel::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--signal); }
.popup__panel::after { content: none; }
.popup__panel > * { position: relative; }
.popup__close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: var(--olive-d); font-size: 1.5rem; line-height: 1; z-index: 2; border-radius: 2px; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.popup__close:hover { background: rgba(20,25,15,.07); color: var(--signal-d); }
.popup__close:active { transform: scale(.92); }
.popup__k { margin-bottom: .6rem; }
.popup__title { font-family: var(--stencil); font-weight: 600; font-size: clamp(1.3rem,4vw,1.65rem); text-transform: uppercase; line-height: 1.1; margin-bottom: .4rem; }
.popup__sub { color: var(--ink-soft); font-size: .88rem; margin-bottom: 1.5rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }

/* ---------- Форма — карточки-поля в стиле «брифинг» ---------- */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .42rem; }
.field > label:not(.consent) {
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--olive-2);
}
.field > label .req { color: var(--signal-d); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; line-height: 1.4; color: var(--ink);
  background: #fdfaf1;
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: .85rem .9rem; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--khaki); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--signal); background: #fff; box-shadow: 0 0 0 3px rgba(31,90,61,.16);
}
.field textarea { resize: vertical; min-height: 90px; }
.field select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2320251a' fill='none' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.3rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); font-size: .92rem; }
.field--err input, .field--err select, .field--err textarea { border-color: var(--rust); background: rgba(192,59,59,.05); }
.field--err input:focus, .field--err select:focus, .field--err textarea:focus { box-shadow: 0 0 0 3px rgba(192,59,59,.16); }
.field__error { font-family: var(--mono); font-size: .62rem; letter-spacing: .03em; color: var(--rust); display: none; }
.field--err .field__error { display: block; }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .78rem; color: var(--ink-soft); line-height: 1.45; }
.consent input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--signal); cursor: pointer; }
.consent a { color: var(--signal-d); border-bottom: 1px solid currentColor; }
@media (max-width: 480px) { .form__row { grid-template-columns: 1fr; } }
.m-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.m-row::before { content: "или напишите в мессенджер"; flex: 1 1 100%; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .1rem; }
.m-row .btn { flex: 1; min-width: 120px; }
.m-max, .m-tg, .m-wa { --bg: transparent; --fg: var(--olive-d); --bd: var(--line-2); }
.m-max:hover, .m-tg:hover, .m-wa:hover { --bg: var(--olive-d); --fg: var(--light); --bd: var(--olive-d); }
.form__ok { text-align: left; }
.form__ok svg { width: 40px; height: 40px; color: var(--olive); }
.form__ok h3 { margin: .8rem 0 .3rem; }
.form__ok p { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.form-note { font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); text-align: center; }

/* ---------- Утилиты ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-scroll { overflow: hidden; }

/* ---------- Микро-экраны ---------- */
@media (max-width: 360px) {
  :root { --mast-h: 60px; }
  .lockup__sub { display: none; }
  .lockup__name { font-size: .82rem; }
  .hero__acts .btn { width: 100%; }
  .facts__row { grid-template-columns: 1fr; }
  .fact { border-right: 0; }
  .fact:nth-child(2n) { border-right: 0; }
  .dir__row { grid-template-columns: 1.8rem 1fr; }
  .dir__tag { grid-column: 2; text-align: left; justify-self: start; }
  .faq__q { grid-template-columns: 1.8rem 1fr 1.2rem; }
}
@media (max-width: 300px) {
  .wrap { padding: 0 9px; }
  .lockup__name { font-size: .74rem; }
  .btn { padding: .7rem .9rem; font-size: .78rem; letter-spacing: .03em; }
  body { font-size: 15px; }
}

/* ============================================================
   2026 dynamics — grain · reveal · count · ticker · micro-IO
   ============================================================ */
/* film grain (global, very subtle) */
.grain { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* scroll reveal (скрытие только когда JS включён — иначе контент виден) */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* hero load */
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
html.js .hero__row > * { opacity: 0; animation: riseIn .85s cubic-bezier(.2,.7,.2,1) forwards; }
html.js .hero__row > *:nth-child(2) { animation-delay: .16s; }

/* button micro-interaction */
.btn { overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-130%); transition: transform .65s ease; pointer-events: none; }
.btn:hover::after { transform: translateX(130%); }
.btn svg, .btn i { transition: transform var(--t-fast); }
.btn:hover svg, .btn:hover i { transform: translateX(3px); }

/* kinetic ticker */
.ticker { background: var(--olive-d); color: var(--khaki-2); overflow: hidden; border-top: 1px solid rgba(31,90,61,.3); border-bottom: 1px solid rgba(0,0,0,.25); }
.ticker__track { display: flex; width: max-content; animation: tick 34s linear infinite; }
.ticker__item { display: inline-flex; align-items: center; font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.ticker__item span { padding: .75rem 1.5rem; }
.ticker__item::after { content: "❯"; color: var(--signal-2); }
@keyframes tick { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  html.js .hero__row > * { animation: none !important; opacity: 1 !important; }
  .ticker__track { animation: none !important; }
  .btn::after { display: none; }
}

/* Font Awesome — sizing в контексте */
.mast__phone i { font-size: .85rem; color: var(--accent); }
.quote__play i { font-size: .8rem; }
.form__ok i { font-size: 42px; color: var(--olive); }

/* ============================================================
   МОБАЙЛ — стильный кинематографичный интерфейс
   Возвращает трафаретную идентичность на телефон + тактильный фидбек
   ============================================================ */

/* убираем серую вспышку тапа на iOS — чистый кастомный фидбек */
body { -webkit-tap-highlight-color: transparent; }

/* чёлка/SAFE-AREA: мястхэд не уезжает под вырез, якоря не прячутся */
.mast { padding-top: env(safe-area-inset-top); }
html { scroll-padding-top: calc(84px + env(safe-area-inset-top)); }

/* --- Возвращаем заголовкам трафаретный военный характер на телефоне
      (readability-блок выше flattening отключал — но Oswald-uppercase
      читается отлично и даёт тот самый «кино как в hero») --- */
@media (max-width: 680px) {
  .hero h1 { text-transform: uppercase; letter-spacing: .012em; line-height: 1.04; }
  .hero__row { gap: 1.15rem; }
  .hero__k { letter-spacing: .16em; }
  .hero__lead { line-height: 1.5; }

  .sec { padding-top: clamp(2.2rem, 9vw, 3rem); padding-bottom: clamp(2.2rem, 9vw, 3rem); }
  .sec__head { margin-bottom: 1.5rem; padding-bottom: 1rem; }
  .sec__title { text-transform: uppercase; letter-spacing: .03em; line-height: 1.06; }
  .cta h2 { text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }

  /* карточки — тонкое объёмное дыхание */
  .faq__item { box-shadow: 0 2px 10px rgba(20,25,15,.05); }
  .quote { padding: 1.5rem 0; }
  .quote__txt { line-height: 1.45; }
}

/* --- Тактильный отклик на тап (ощущение «премиум-приложения») --- */
.btn:active, .max-button:active, .mast__cta:active { transform: scale(.97); transition-duration: .08s; }
.dir__row:active { background: rgba(31,90,61,.07); }
.dir__shot:active img { transform: scale(1.02); }
.faq__item:active { border-left-color: var(--signal); }
.tl__step:active .tl__node { transform: scale(.93); }
.overlay__nav a:active { color: var(--signal-2); background: rgba(31,90,61,.08); }
.lockup:active { opacity: .7; }

/* мобильный CTA-бар — итоговая стилизация задана в основном блоке .mobile-cta выше
   (плавающий glass-бар: зелёная пилюля «Консультация» + тёмный кружок MAX с белым лого) */

/* ============================================================
   Mobile fix-pack 2026-07
   Контраст · ровная вёрстка «Направлений» · читаемость на телефоне
   ============================================================ */
@media (max-width: 760px) {
  /* приглушённые метки (#8FA89A) «сливались» с белым фоном на мобиле — затемняем */
  .lockup__sub, .dir__num, .dir__tag, .def__k, .fact .l,
  .faq__q .n, .sec__num, .foot__bot { color: var(--ink-soft); }
  .faq__q .i { border-color: var(--ink-faint); }
  .rate__row.is-lead .rate__l { color: var(--olive); }

  /* подзаголовки и примечания hero/cta читаются поверх тёмного фото */
  .hero__lead  { color: var(--light); }
  .hero__note  { color: var(--light-2); }
  .cta__lead   { color: var(--light-2); }

  /* «Направления»: ровный список, длинные названия не вылезают за край */
  .dir__row { align-items: baseline; gap: .7rem 1rem; }
  .dir__name, .rate__v { overflow-wrap: anywhere; }
  .dir__more { margin-top: 1.4rem; }
  .dir__more .btn { width: 100%; }

  /* отзывы: аватары и текст компактнее на телефоне */
  .quote { gap: .75rem; padding: 1.15rem 0; }
  .quote__ava { width: 40px; height: 40px; }
  .quote__txt { font-size: 1rem; }
  .quote--feat .quote__txt { font-size: 1.12rem; }
}
@media (max-width: 380px) {
  .quote__ava { width: 36px; height: 36px; }
  .quote__ava i { font-size: .92rem; }
}

/* ============================================================
   Hero legibility — текст читается поверх фото на любой ширине
   ============================================================ */
/* плотный тёмный scrim поверх hero-фото (поверх фото, под текстом):
   сильнее сверху (h1/лид) и снизу (кнопки), чуть мягче в центре */
.hero__pat::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,10,5,.68) 0%, rgba(6,10,5,.50) 50%, rgba(6,10,5,.76) 100%);
}
/* кикер и шевроны — светлые, читаются на тёмном */
.hero__k { color: var(--light); }
.hero__k::before { color: var(--khaki-2); }
/* подложка под текстом: чёткая у краёв + мягкий ореол — видна на любом фоне */
.hero h1, .hero__lead, .hero__note, .hero__k {
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 20px rgba(0,0,0,.5);
}

/* ============================================================
   Облегчённая типографика + мобильные «плюшки» (2026-07)
   ============================================================ */
/* стройнее: тяжёлый Russo One → Oswald, веса 600/700 → 500/600 */
h1, h2, h3, h4,
.sec__title, .about__title, .dir__name, .rate__v,
.fact .v, .dcell__v, .quote__by b, .popup__title { font-weight: 500; }
.hero h1 { font-family: var(--stencil); font-weight: 600; }
.max-button__title { font-weight: 600; }

/* 1) Полоса прогресса чтения — тонкая акцентная линия под шапкой */
.scroll-progress {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--mast-h, 66px));
  left: 0; right: 0; height: 3px; z-index: 58;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, var(--signal), var(--signal-2));
}

/* 2) Кнопка «наверх» — всплывает после прокрутки */
.to-top {
  position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 54; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--olive-d); color: #fff; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 22px rgba(15,18,8,.28);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  -webkit-tap-highlight-color: transparent;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:active { transform: scale(.92); }
.to-top i { font-size: 1rem; }
@media (max-width: 920px) {
  .to-top { right: 14px; width: 42px; height: 42px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* 3) Мягкое появление контентных фото при загрузке */
img.lazy-fade { opacity: 0; transition: opacity .6s ease; }
img.lazy-fade.is-loaded { opacity: 1; }

/* ============================================================
   Mobile «Fable 5» — премиальная мобильная подача:
   один уверенный зелёный акцент · воздух · стекло · деликатные тени.
   Ограничения учтены: секции во всю ширину (фото не ужимаются),
   glass mobile-cta сохранён, облегчённый шрифт сохранён.
   ============================================================ */
@media (max-width: 920px) {
  /* воздух и кинематографичный ритм между секциями */
  .sec { padding-top: clamp(2.4rem, 9vw, 3.1rem); padding-bottom: clamp(2.4rem, 9vw, 3.1rem); }
  .sec__head { margin-bottom: 1.5rem; padding-bottom: 1rem; }

  /* hero: кикер — стеклянная пилюля (glassmorphism) */
  .hero__k {
    padding: .42rem .85rem; border-radius: 999px;
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  /* hero: главная кнопка — премиум-тень, ощущение объёма */
  .hero__acts .btn--accent { box-shadow: 0 12px 28px rgba(31,90,61,.30); }

  /* факты — акцентная зелёная линия сверху, просторнее */
  .facts { border-top: 2px solid var(--signal); }
  .fact { padding-top: clamp(1.15rem, 4vw, 1.5rem); padding-bottom: clamp(1.15rem, 4vw, 1.5rem); }

  /* направления — номер в акцентном цвете */
  .dir__num { color: var(--signal); font-weight: 600; }

  /* отзывы — тонкое акцентное кольцо у аватара */
  .quote__ava { box-shadow: 0 0 0 2px rgba(42,122,85,.18); }
}

/* ============================================================
   Mobile — мягкий скруглённый «чистый» интерфейс (2026-07)
   Тактильная зона (карточки · заявка/форма · модалка · кнопки)
   становится приятнее на ощупь. Только телефон — десктоп хранит
   строгую трафаретную подачу (4px).
   Ограничения соблюдены: glass mobile-cta и полная ширина секций
   не затрагиваются; облегчённый шрифт сохранён; один зелёный акцент.
   ============================================================ */
@media (max-width: 920px) {
  /* один токен — и сразу мягче все, кто читает var(--r):
     кнопки · поля заявки · MAX-кнопка · контентные фото */
  :root { --r: 12px; }

  /* кнопки в шапке — плавнее (были 2px) */
  .mast__cta { border-radius: 10px; }

  /* FAQ — мягкие карточки вместо острых углов, деликатная тень при открытии */
  .faq__item { border-radius: 16px; }
  .faq__item.is-open { box-shadow: 0 12px 28px rgba(20,25,15,.10); }

  /* отзывы — аккуратные карточки на белом вместо линий-разделителей */
  .quote {
    padding: 1.15rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(20,25,15,.04);
  }

  /* модалка заявки — дружелюбный «лист» (была без скругления),
     верхняя акцентная полоса повторяет изгиб, крестик — круглая */
  .popup__panel { border-radius: 22px; }
  .popup__panel::before { border-radius: 22px 22px 0 0; }
  .popup__close { border-radius: 50%; }
  .popup__close:hover { background: rgba(31,90,61,.10); color: var(--signal-d); }
}

/* ============================================================
   Видеоотзывы — реальные материалы кандидатов + видео-модалка
   ============================================================ */
.quotes .vreviews { grid-column: 1 / -1; }
.vreviews { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 0 0 1.5rem; }
.vreview {
  position: relative; display: block; overflow: hidden; border-radius: var(--r);
  aspect-ratio: 4/3; background: var(--olive-d); border: 1px solid var(--line); cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast); -webkit-tap-highlight-color: transparent;
}
.vreview img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92); transition: transform .5s ease; }
.vreview:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,18,8,.18); }
.vreview:hover img { transform: scale(1.05); }
.vreview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,22,14,.55), transparent 55%); pointer-events: none; }
.vreview__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(42,122,85,.92); color: #fff; border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: transform var(--t-fast), background var(--t-fast);
}
.vreview:hover .vreview__play { transform: translate(-50%,-50%) scale(1.08); background: var(--signal); }
.vreview__play i { font-size: 1.2rem; margin-left: .14em; }
.vreview__cap {
  position: absolute; left: .75rem; bottom: .55rem; z-index: 2;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
@media (max-width: 460px) { .vreviews { grid-template-columns: 1fr; } .vreview { aspect-ratio: 16/10; } }

/* видео-модалка */
.vmodal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; background: rgba(6,10,5,.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); }
.vmodal.is-open { opacity: 1; visibility: visible; }
.vmodal__card { position: relative; width: 100%; max-width: 720px; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: scale(.98); transition: transform var(--t); }
.vmodal.is-open .vmodal__card { transform: none; }
.vmodal__card video { display: block; width: 100%; max-height: 82vh; background: #000; }
.vmodal__close { position: absolute; top: 8px; right: 8px; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background var(--t-fast); }
.vmodal__close:hover { background: rgba(0,0,0,.82); }
@media (prefers-reduced-motion: reduce) { .vreview, .vreview img, .vmodal__card { transition: none !important; } }

/* ============================================================
   Галерея фото кандидатов (реальные материалы)
   ============================================================ */
.quotes .cgallery { grid-column: 1 / -1; }
.cgallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 0 0 1.5rem; }
.cgallery__item { margin: 0; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); aspect-ratio: 4/3; background: var(--olive-d); }
.cgallery__item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transition: transform .5s ease; }
.cgallery__item:hover img { transform: scale(1.05); }
@media (max-width: 560px) { .cgallery { grid-template-columns: 1fr 1fr; } .cgallery__item:last-child { grid-column: 1 / -1; } }
@media (max-width: 380px) { .cgallery { grid-template-columns: 1fr; } .cgallery__item:last-child { grid-column: auto; } }