/* =========================================================================
   Юрмаркет — тема WordPress. Боевые стили, перенесены из Макеты-v6-Основа/styles.css
   1:1 (ни один селектор и ни одно значение не изменены).

   Отличия от макета — только два блока, помеченные ниже:
     1. @font-face — самохостинг Onest и Inter (в макете были Google Fonts).
     2. «Добавления под WordPress» в самом конце файла (чекбокс согласия,
        сообщения форм, скрытие карточек фильтром, отступ под админ-бар).
   ========================================================================= */

/* ------------------------------------------------- 0. Шрифты (самохостинг) */
/* Onest и Inter — переменные шрифты (ось wght 100–900), один файл на семейство.
   Subset: latin + latin-ext + cyrillic + ₽ (U+20BD) и № (U+2116).
   Лицензия OFL — рядом в assets/fonts/*-OFL.txt. */
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-cyr-lat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2010-2027, U+2030,
                 U+2032-2033, U+2039-203A, U+2044, U+20AC, U+20BD, U+2116, U+2122,
                 U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-cyr-lat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2010-2027, U+2030,
                 U+2032-2033, U+2039-203A, U+2044, U+20AC, U+20BD, U+2116, U+2122,
                 U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   ЮрАдрес Маркет — макеты V2 (живая/современная версия).
   База токенов и компонентов — из V1 (Дизайн-система §13, §4–§10),
   поверх — слой «оживления»: reveal-варианты со stagger, scroll-параллакс,
   timeline этапов, glass-шапка, shine-hover, крупная типографика, разделители.
   Всё движение — scroll/hover/one-shot; полностью гасится prefers-reduced-motion.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. Токены */
:root {
  /* Цвета: navy */
  --c-navy:        #243B54;
  --c-navy-900:    #0F324F;
  --c-navy-700:    #2B4561;
  --c-navy-600:    #365270;

  /* Цвета: золото (акцент) */
  --c-gold:        #C69E7E;
  --c-gold-600:    #C29774;
  /* gold-700 — рабочий цвет ТЕКСТА по золоту (надзаголовки, цифры плиток, ИФНС
     в карточках). Был #A87B57 — 3,7:1 на белом, ниже AA. Затемнён по той же
     оси до 5,3:1 на белом и 4,9:1 на --c-bg-subtle. На navy этот оттенок не
     годится (2,2:1) — там текст идёт в --c-gold-300, см. .section--navy ниже. */
  --c-gold-700:    #8A6340;
  --c-gold-400:    #D4AE8E;
  --c-gold-300:    #DBB899;

  /* Нейтраль / текст */
  --c-white:       #FFFFFF;
  --c-text:        #333333;
  --c-text-muted:  #5D6B7E;      /* чуть темнее V1 (#667085) — контраст AA на светло-сером */
  --c-bg-subtle:   #F5F6F8;
  --c-bg-warm:     #F7F3EE;      /* тёплая песочная подложка (дозированно) */
  --c-border:      #E7E9ED;
  --c-border-field:#D6DAE0;

  /* Статусы */
  --c-success:     #2E7D5B;
  --c-error:       #C0392B;

  /* Overlay на фото */
  --overlay-navy-soft: rgba(36,59,84,.15);
  --overlay-navy-text: rgba(36,59,84,.55);

  /* Шрифты */
  --font-head: "Onest","Golos Text",system-ui,sans-serif;
  --font-body: "Inter","PT Root UI",system-ui,sans-serif;

  /* Размеры (desktop) */
  /* Плавная шкала (перенесена из V5): заголовки крупнее и лучше сканируются,
     размеры тянутся по ширине экрана — отдельные правки под брейкпоинты не нужны */
  --fs-display: clamp(40px, 5.6vw, 74px);
  --fs-h1: clamp(34px, 4.6vw, 60px);
  --fs-h2: clamp(26px, 3.2vw, 42px);
  --fs-h3: clamp(20px, 1.9vw, 26px);
  --fs-h4: clamp(17px, 1.3vw, 20px);
  --fs-h5: 17px;
  --fs-body-l: 18px; --fs-body: 17px; --fs-body-s: 15px; --fs-caption: 13px;
  --lh-tight: 1.06; --lh-head: 1.3; --lh-body: 1.6;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;

  /* Ритм / spacing (base 8) */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-12: 96px; --sp-15: 120px;
  --container: 1200px; --container-wide: 1280px;
  --gutter: 24px; --pad-x-mobile: 24px;
  --text-measure: 680px;

  /* Радиусы */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Тени (глубина) */
  --sh-card:      0 4px 20px rgba(36,59,84,.06);
  --sh-card-hover:0 18px 44px rgba(36,59,84,.14);
  --sh-float:     0 24px 60px rgba(15,50,79,.22);
  --sh-header:    0 6px 24px rgba(36,59,84,.08);
  /* Индикатор фокуса: двойное кольцо белое + тёмное. Одноцветное кольцо не может
     дать 3:1 одновременно и с тёмной кнопкой, и со светлым фоном страницы —
     пара «белое/navy» даёт нужный контраст на любом соседнем цвете (WCAG 2.2,
     2.4.11). Было rgba(36,59,84,.18) — 1,4:1, видно еле-еле. */
  --ring-focus:   0 0 0 2px #FFFFFF, 0 0 0 4px rgba(36,59,84,.85);
  --ring-focus-accent: 0 0 0 2px #FFFFFF, 0 0 0 4px #8A6340;

  /* Анимация */
  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);      /* «дорогой» expo-out */
  --ease-inout: cubic-bezier(0.65,0,0.35,1);
  --dur-1: 200ms; --dur-2: 350ms; --dur-3: 520ms; --dur-4: 680ms;
  --dur-hover: 240ms; --dur-reveal: 640ms; --dur-accordion: 320ms;

  /* Параллакс/движение (JS выставляет значения) */
  --parallax-scroll: 0;
}

@media (max-width: 1023px) {
}
@media (max-width: 767px) {
  :root {
    --fs-body-l: 17px; --fs-body: 16px; --fs-body-s: 14px; --fs-caption: 12px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-hover: 0ms; --dur-reveal: 0ms; --dur-accordion: 0ms; --dur-1:0ms; --dur-2:0ms; --dur-3:0ms; --dur-4:0ms; }
}

/* ---------------------------------------------------------------- 2. База */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--c-navy); margin: 0; }
h1 { font-size: var(--fs-h1); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 1.08; font-weight: 600; letter-spacing: -.028em; text-wrap: balance; }
h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
h4 { font-size: var(--fs-h4); line-height: 1.35; font-weight: 600; }
h5 { font-size: var(--fs-h5); line-height: 1.4; font-weight: 600; }

/*
 * Вид заголовка отдельно от его уровня.
 *
 * Уровень тега задаёт структуру документа (h1 → h2 → h3, без пропусков — иначе
 * скринридер теряет оглавление страницы, а аудит доступности падает на
 * heading-order), а размер и начертание — вот эти классы. Так заголовок можно
 * поднять или опустить по иерархии, ничего не изменив внешне: <h3 class="h4">
 * выглядит ровно как прежний <h4>.
 *
 * Свойства, которые задаёт тег, класс перекрывает целиком (letter-spacing,
 * text-wrap) — иначе h2 с классом .h5 унаследовал бы разрядку и балансировку
 * строк от тега и выглядел бы не так, как исходный h5.
 */
.h2 { font-size: var(--fs-h2); line-height: 1.08; font-weight: 600; letter-spacing: -.028em; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); line-height: 1.2;  font-weight: 600; letter-spacing: -.02em;  text-wrap: initial; }
.h4 { font-size: var(--fs-h4); line-height: 1.35; font-weight: 600; letter-spacing: normal;  text-wrap: initial; }
.h5 { font-size: var(--fs-h5); line-height: 1.4;  font-weight: 600; letter-spacing: normal;  text-wrap: initial; }
p  { margin: 0 0 var(--sp-2); }
a  { color: var(--c-navy); text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }
::selection { background: rgba(198,158,126,.28); color: var(--c-navy-900); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 767px) { .container { padding: 0 var(--pad-x-mobile); } }

.overline {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-2);
}
/* Золотой хайрлайн у оверлайна — растёт при появлении */
.overline::before {
  content: ""; width: 28px; height: 2px; background: var(--c-gold);
  transform: scaleX(.4); transform-origin: left; border-radius: 2px;
  transition: transform var(--dur-3) var(--ease-out) 120ms;
}
.reveal.is-in .overline::before, .is-in .overline::before { transform: scaleX(1); }
.overline--gold { color: var(--c-gold-700); }
.overline--center { justify-content: center; }
.section__head--center .overline { justify-content: center; }

.lead { font-size: var(--fs-body-l); color: var(--c-text); max-width: var(--text-measure); line-height: 1.62; }
.muted { color: var(--c-text-muted); }
.measure { max-width: var(--text-measure); }
.ph { color: var(--c-text-muted); font-style: normal; }

/* ---------------------------------------------------------------- 3. Секции + разделители */
.section { padding: var(--sp-12) 0; position: relative; }
[id] { scroll-margin-top: 96px; }
.section--subtle { background: var(--c-bg-subtle); }
.section--warm { background: var(--c-bg-warm); }
.section--navy { background: var(--c-navy); color: rgba(255,255,255,.85); position: relative; overflow: hidden; }
.section--navy h2, .section--navy h3, .section--navy h4, .section--navy h5 { color: #fff; }
.section--tight { padding: var(--sp-8) 0; }
.section--flush-top { padding-top: 0; }
@media (max-width: 767px) { .section { padding: var(--sp-8) 0; } .section--tight { padding: var(--sp-6) 0; } }

.section__head { max-width: 780px; margin-bottom: var(--sp-6); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head p { margin-top: var(--sp-2); margin-bottom: 0; }
.section__head--wide { max-width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); flex-wrap: wrap; }
.section__head--wide > div { max-width: 720px; }

/* Индекс секции: «01 —» крупно и тонко */
.section-index {
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: var(--c-gold-700); letter-spacing: .04em; margin-bottom: 12px;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.section-index b { font-size: 15px; }
.section-index::after { content: ""; }

/* Ghost-подложка крупным числом за блоком */
.ghost-num {
  position: absolute; font-family: var(--font-head); font-weight: 800;
  color: rgba(36,59,84,.04); line-height: .8; pointer-events: none; z-index: 0;
  letter-spacing: -.04em; user-select: none;
}
.section--navy .ghost-num { color: rgba(255,255,255,.045); }
/* Надзаголовок секции на navy: тёмное золото по тёмному фону нечитаемо (2,2:1),
   поэтому здесь светлый оттенок — 6,2:1. Тот же приём, что у .statement--navy em.
   Секция .final (финальная форма) тоже на navy, поэтому идёт в том же правиле. */
.section--navy .section-index,
.final .section-index { color: var(--c-gold-300); }

/* Мягкий SVG-разделитель между секциями (насыпь глубины) */
.divider { position: relative; height: 0; line-height: 0; }
.divider svg { display: block; width: 100%; height: 64px; }
@media (max-width:767px){ .divider svg { height: 40px; } }

/* Крупная типографика-акцент (pull statement), разбивает «полотно текста» */
.statement { padding: var(--sp-12) 0; }
.statement__inner { max-width: 940px; margin: 0 auto; text-align: center; position: relative; }
.statement h2 {
  font-size: var(--fs-display); line-height: 1.08; letter-spacing: -.025em;
  font-weight: 800; color: var(--c-navy);
}
.statement--navy h2 { color: #fff; }
.statement em { font-style: normal; color: var(--c-gold-700); }
.statement--navy em { color: var(--c-gold-300); }
.statement p { margin-top: var(--sp-3); color: var(--c-text-muted); font-size: var(--fs-body-l); }
.statement--navy p { color: rgba(255,255,255,.72); }
.statement__mark { color: var(--c-gold); display: inline-flex; margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------- 4. Кнопки */
/* white-space: normal вместо nowrap — против срезов подписей.
   Кнопка обязана скрывать переполнение (overflow: hidden держит блик ::after
   внутри скругления), поэтому при nowrap подпись, не помещающаяся в ширину
   кнопки, молча обрезалась: 20 случаев на ≤414 px, худший срез — 48 px
   у «Подобрать адрес под регистрацию». Резать было нечему только там, где
   ширина кнопки свободна.
   Перенос это лечит разом и не меняет вид там, где всё и так помещалось:
   кнопка с автоширины по-прежнему растягивается по max-content и остаётся
   в одну строку. Перенос включается ровно в тех случаях, где раньше был срез.
   line-height 1.25 нужен, чтобы вторая строка не слипалась с первой;
   вертикальные отступы уменьшены на 1 px (16 → 15), поэтому высота
   однострочной кнопки осталась прежней — 50 px по замеру. Так же уменьшены
   отступы у --lg (18 → 17) и --ghost (10 → 8): у ghost замер даёт те же 34 px
   до и после, --lg в шаблонах не используется — правка там профилактическая. */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.25;
  padding: 15px 30px; min-height: 50px;
  border: none; border-radius: var(--r-pill); cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
  text-align: center; white-space: normal; isolation: isolate;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* Shine — тонкий блик по диагонали при hover (transform, не мигание) */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform var(--dur-4) var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn--primary { background: var(--c-navy); color: #fff; }
.btn--primary:hover { background: var(--c-navy-900); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,50,79,.24); }
.btn--accent { background: var(--c-gold); color: var(--c-navy); }
.btn--accent:hover { background: var(--c-gold-600); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(168,123,87,.32); }
.btn--accent:focus-visible { box-shadow: var(--ring-focus-accent); }
.btn--secondary { background: transparent; color: var(--c-navy); box-shadow: inset 0 0 0 1.5px var(--c-navy); }
.btn--secondary:hover { background: rgba(36,59,84,.06); transform: translateY(-2px); }
.btn--secondary::after { display: none; }
.btn--ghost { background: transparent; color: var(--c-navy); padding: 8px 4px; min-height: 0; overflow: visible; }
.btn--ghost::after { display: none; }
.btn--ghost:hover { color: var(--c-gold-700); }
.btn--on-navy { background: var(--c-gold); color: var(--c-navy); }
.btn--on-navy:hover { background: var(--c-gold-600); transform: translateY(-2px); }
.btn--outline-navy { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.btn--outline-navy:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.btn--block { width: 100%; }
.btn--lg { min-height: 56px; padding: 17px 34px; font-size: 17px; }
.btn__arrow { transition: transform var(--dur-hover) var(--ease-out); }
.btn:hover .btn__arrow, .btn--ghost:hover .btn__arrow { transform: translateX(4px); }
/* На мобильных кнопка занимает всю ширину колонки, и подписи упираются в неё
   чаще всего. Горизонтальные отступы ужимаем с 30 до 22 px: этого хватает,
   чтобы большинство длинных подписей осталось в одну строку и переносились
   только действительно длинные. От среза защищает не отступ, а white-space
   выше — здесь мы экономим только строки. */
@media (max-width: 767px) {
  .btn { width: 100%; padding-left: 22px; padding-right: 22px; }
  .btn--lg { padding-left: 26px; padding-right: 26px; }
  .btn--ghost { padding-left: 4px; padding-right: 4px; }
  .btn--ghost, .btn--inline { width: auto; }
}

/* Круглая кнопка-стрелка — сквозной навигационный знак (перенесён из V5) */
.arrow-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--c-navy); color: #fff; text-decoration: none;
  transition: background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease-out);
}
.arrow-btn svg { transition: transform var(--dur-hover) var(--ease-out); }
.arrow-btn:hover { background: var(--c-navy-900); transform: translateY(-2px); }
.arrow-btn:hover svg { transform: translate(2px, -2px); }
.arrow-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.arrow-btn--gold { background: var(--c-gold); color: var(--c-navy); }
.arrow-btn--gold:hover { background: var(--c-gold-600); }

/* ---------------------------------------------------------------- 5. Хедер (glass) */
/* Слот, куда скрипт вставляет шапку, не должен ограничивать её собой:
   sticky живёт только в пределах родителя, а слот высотой ровно с шапку —
   поэтому она уезжала вверх при прокрутке. display:contents убирает обёртку
   из раскладки, и шапка липнет по всей длине страницы. */
#header-slot { display: contents; }
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header { background: #fff; }
}
.header.is-scrolled { box-shadow: var(--sh-header); border-bottom-color: var(--c-border); background: rgba(255,255,255,.94); }
.header__inner {
  height: 82px; display: flex; align-items: center; gap: var(--sp-3);
  transition: height var(--dur-hover) var(--ease);
}
.header.is-scrolled .header__inner { height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.logo__icon { width: 36px; height: 36px; flex-shrink: 0; transition: transform var(--dur-3) var(--ease-out); }
.logo:hover .logo__icon { transform: rotate(-4deg) scale(1.04); }
.logo__text { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; }
.logo__name { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.15; color: var(--c-navy); letter-spacing: -.01em; }
.logo__slogan { font-size: 10px; line-height: 1.2; letter-spacing: .04em; color: var(--c-text-muted); text-transform: uppercase; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 14px; margin-left: var(--sp-2); }
.nav a { font-size: 14.5px; color: var(--c-navy); padding: 6px 0; position: relative; white-space: nowrap; }
.nav a:hover { color: var(--c-navy-900); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--c-gold); transition: right var(--dur-2) var(--ease-out);
}
.nav a:hover::after, .nav a.is-active::after { right: 0; }
.header__spacer { flex: 1; }
.header__contacts { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Иконки мессенджеров в шапке съедали ~100 px и выталкивали кнопку заявки
   за правый край сетки. Связь через мессенджер и так на виду: плавающая
   кнопка в углу экрана и строка под каждой формой. */
.header__contacts .msgr { display: none; }
.header__phone { font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--c-navy); white-space: nowrap; }
.msgr {
  width: 42px; height: 42px; border-radius: var(--r-pill); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border); color: var(--c-navy);
  transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease-out);
}
.msgr:hover { border-color: var(--c-gold-400); background: var(--c-bg-subtle); transform: translateY(-2px); }
/* flex-shrink: 0 обязателен. Логотип рядом сжиматься запрещено (.logo), а слоган
   в нём — nowrap на 221 px, поэтому весь дефицит ширины флексбокс забирал у
   бургера: на 360 px кнопка ужималась до 20 px, а иконка внутри — до нуля.
   Меню оставалось на месте, но открыть его было нечем — пустое место в углу. */
.burger {
  display: none; width: 44px; height: 44px; flex-shrink: 0; border: none; background: transparent;
  cursor: pointer; padding: 10px; color: var(--c-navy);
}

/* Бургер — только телефон и планшет-портрет. Раньше порог стоял на 1279 px,
   и на 1024–1279 шапка оставалась вообще без кнопки заявки — только логотип
   и три полоски. Кнопка на этих ширинах помещается, место под неё ниже. */
@media (max-width: 1023px) {
  .nav, .header__contacts { display: none; }
  .header__inner { gap: var(--sp-2); }
  .burger { display: inline-flex; }
}

/* Логотип со слоганом (36 + 11 + 221 px) и бургер вместе оставляют на 360 px
   запас в 4 px — этого мало, шрифт на реальном устройстве может отрисоваться
   шире, и тогда вместо среза появится горизонтальная прокрутка. Слоган на
   узких экранах убираем: приём для темы не новый — так же он скрыт на
   1024–1279 px, и в подвале слоган остаётся на всех ширинах. */
@media (max-width: 479px) {
  .logo__slogan { display: none; }
}

/* Мобильное меню-оверлей */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: #fff;
  display: none; flex-direction: column; padding: 24px;
}
.mobile-menu.is-open { display: flex; animation: mm-in var(--dur-2) var(--ease-out); }
@keyframes mm-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.mobile-menu__close { border: none; background: transparent; font-size: 28px; cursor: pointer; color: var(--c-navy); width: 44px; height: 44px; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu nav a { font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--c-border); color: var(--c-navy); }
.mobile-menu__cta { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; }

/* Верхний прогресс-хайрлайн скролла */
.scroll-progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 70;
  transform: scaleX(var(--scroll-p, 0)); transform-origin: left;
  background: linear-gradient(90deg, var(--c-gold-700), var(--c-gold-300));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ---------------------------------------------------------------- 6. Hero (V2, слоистый + параллакс) */
.hero {
  background: var(--c-navy);
  background-image:
    radial-gradient(1100px 520px at 78% -10%, rgba(198,158,126,.16), transparent 60%),
    radial-gradient(760px 520px at 8% 108%, rgba(54,82,112,.55), transparent 60%);
  color: #fff; padding: var(--sp-15) 0 var(--sp-12); position: relative; overflow: hidden;
  isolation: isolate;
}
.hero .container { position: relative; z-index: 1; }
.hero--compact { padding: var(--sp-8) 0; }
/* Параллакс-слои: тонкая сетка + мягкие световые пятна + колонна-мотив */
.hero__layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__grid-lines {
  position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 70% 20%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 70% 20%, #000, transparent 72%);
  transform: translate3d(0, calc(var(--parallax-scroll) * .04px), 0);
}
.hero__glow {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,158,126,.22), transparent 62%);
  right: -120px; top: -80px; filter: blur(4px);
  transform: translate3d(0, calc(var(--parallax-scroll) * -.06px), 0);
}
.hero__glow--2 {
  left: -180px; bottom: -220px; top: auto; right: auto; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(54,82,112,.55), transparent 60%);
  transform: translate3d(0, calc(var(--parallax-scroll) * .05px), 0);
}
/* Колонна/портик-мотив как «печать» бренда, тонкой линией */
.hero__column {
  position: absolute; right: 4%; bottom: -40px; width: 340px; height: 420px; opacity: .12;
  color: var(--c-gold-300);
  transform: translate3d(0, calc(var(--parallax-scroll) * -.08px), 0);
}
@media (max-width: 1023px){ .hero__column { display: none; } }

.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--sp-8); align-items: center; position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero__kickers { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: var(--sp-3) 0; }
.kicker {
  font-size: 14px; font-weight: 500; color: #fff; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14); padding: 7px 14px; border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.kicker:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.kicker--gold { border-color: var(--c-gold); color: var(--c-gold-300); background: rgba(198,158,126,.1); }
.hero__text { color: rgba(255,255,255,.84); font-size: var(--fs-body-l); max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-4); }
.hero__bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.14); }
.hero__bullets li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body-s); color: rgba(255,255,255,.84); }
.hero__bullets svg { flex-shrink: 0; color: var(--c-gold); margin-top: 2px; }

@media (max-width: 1023px) { .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); } .hero { padding: var(--sp-12) 0 var(--sp-8); } }
@media (max-width: 767px) { .hero__bullets { grid-template-columns: 1fr; } .hero__actions .btn { width: 100%; } }

/* Одноразовая entrance-анимация hero (по загрузке, не циклическая) */
.hero-in > * { opacity: 0; transform: translateY(16px); animation: heroRise var(--dur-4) var(--ease-out) forwards; }
.hero-in > *:nth-child(1) { animation-delay: .05s; }
.hero-in > *:nth-child(2) { animation-delay: .13s; }
.hero-in > *:nth-child(3) { animation-delay: .21s; }
.hero-in > *:nth-child(4) { animation-delay: .29s; }
.hero-in > *:nth-child(5) { animation-delay: .37s; }
.hero-in > *:nth-child(6) { animation-delay: .45s; }
@keyframes heroRise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-in > * { opacity: 1; transform: none; animation: none; } }

/* Карточка формы (hero + финал) */
.form-card {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-float);
  padding: var(--sp-4); color: var(--c-text); position: relative; z-index: 1;
  border: 1px solid rgba(255,255,255,.6);
}
.form-card::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px;
  background: linear-gradient(var(--c-gold-300), var(--c-gold-700)); border-radius: 0 3px 3px 0;
}
.form-card .h3 { margin-bottom: var(--sp-1); }
.form-card__sub { font-size: var(--fs-body-s); color: var(--c-text-muted); margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------- 7. Формы */
.field { margin-bottom: var(--sp-2); }
.field > label { display: block; font-size: 14px; font-weight: 600; color: var(--c-navy); margin-bottom: var(--sp-1); }
.input, .select select {
  width: 100%; height: 52px; padding: 0 16px; font-family: var(--font-body); font-size: 16px; color: var(--c-text);
  background: #fff; border: 1px solid var(--c-border-field); border-radius: var(--r-sm);
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.input::placeholder { color: var(--c-text-muted); }
.input:focus, .select select:focus { outline: none; border-color: var(--c-navy); box-shadow: var(--ring-focus); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px; pointer-events: none;
  border-right: 2px solid var(--c-navy); border-bottom: 2px solid var(--c-navy);
  transform: translateY(-70%) rotate(45deg);
}
.form-hint { font-size: var(--fs-caption); color: var(--c-text-muted); margin-top: var(--sp-2); }
.form-consent { font-size: var(--fs-caption); color: var(--c-text-muted); margin-top: var(--sp-2); }
.form-consent a { color: var(--c-navy); text-decoration: underline; text-underline-offset: 2px; }
.msgr-row { display: flex; gap: 10px; margin-top: var(--sp-2); }
.msgr-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--c-border); font-size: 15px; font-weight: 600; color: var(--c-navy); background: #fff;
  transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease-out);
}
.msgr-btn:hover { border-color: var(--c-gold-400); background: var(--c-bg-subtle); transform: translateY(-2px); }
/* Мессенджеры. Кнопка — белая «пилюля», брендовый цвет работает как цвет текста
   и иконки. Фирменные #128C7E и #2AABEE на белом дают 4,1:1 и 2,6:1 — ниже AA,
   причём Telegram хуже всех на сайте. Инвертировать (брендовый фон + белый текст)
   не стали: те же оттенки требуют такого же затемнения, а две цветные плашки
   начинают спорить с золотой кнопкой-CTA. Поэтому затемнена только «краска»:
   оттенок узнаваем, контраст 5,2:1 (WhatsApp) и 5,2:1 (Telegram) на белом
   и 4,8:1 на фоне ховера --c-bg-subtle. */
.msgr-btn--wa { color: #0F7A6C; }
.msgr-btn--tg { color: #17749B; }
/* Макс: фирменный сине-фиолетовый, затемнён по тому же принципу — 7,6:1 на белом
   и 7,0:1 на фоне ховера (у соседей 5,2:1). Третья кнопка в ряду на узких
   экранах уже не помещается — ряд переносится по строкам, правило ниже. */
.msgr-btn--max { color: #4B3FBF; }
/* Три кнопки в строку помещаются с 560 px (замер: сумма кнопок с зазорами
   371–393 px). Уже — перенос по строкам: на 360 px ряд шириной 231 px берёт
   две строки, на 320 px — три. Без wrap ряд выдавливал бы карточку формы
   за экран. Растягивать кнопки на всю ширину не стали — рядом уже стоит
   кнопка отправки во всю ширину, второй такой же столбец спорил бы с ней
   за главное действие. */
.msgr-row { flex-wrap: wrap; }

/* ---------------------------------------------------------------- 8. Плашка постоплаты */
.postpay {
  background: var(--c-navy);
  background-image: radial-gradient(600px 300px at 100% 0%, rgba(198,158,126,.12), transparent 60%);
  color: #fff; border-radius: var(--r-xl); padding: var(--sp-6);
  position: relative; overflow: hidden; box-shadow: var(--sh-card-hover);
}
.postpay::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--c-gold-300), var(--c-gold-700)); }
.postpay__head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-4); }
.postpay__head h2, .postpay__head h3 { color: #fff; }
.postpay__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.postpay__item { position: relative; padding-left: 18px; }
.postpay__item::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); }
.postpay__item .h4 { color: var(--c-gold-300); margin-bottom: var(--sp-1); font-size: var(--fs-h5); }
.postpay__item p { color: rgba(255,255,255,.84); font-size: var(--fs-body-s); margin: 0; }
.postpay__note {
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.84); font-size: var(--fs-body-s);
}
.postpay__note svg { color: var(--c-gold); flex-shrink: 0; margin-top: 2px; }
/* Кнопка внутри плашки. Отступ 32px — тот же шаг, что у «постоплата → нижняя
   строка»: кнопка не липнет к тексту и не ломает вертикальный ритм плашки. */
.postpay__cta { margin-top: var(--sp-4); }
@media (max-width: 767px) { .postpay { padding: var(--sp-4); } .postpay__grid { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* Узкая полоса (банк / пролонгация) */
.stripe {
  display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4);
  border: 1px solid var(--c-border); border-radius: var(--r-lg); background: #fff;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.stripe:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); border-color: var(--c-gold-400); }
.stripe__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--c-bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--c-navy); }
.stripe .h4 { margin-bottom: 4px; }
.stripe p { margin: 0; font-size: var(--fs-body-s); }
.stripe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 767px) { .stripe-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 9. Карточки-доказательства / услуги */
.tiles { display: grid; gap: var(--gutter); }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tiles--4 { grid-template-columns: repeat(4, 1fr); }
.tile {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
/* Прорисовка золотой линии сверху при hover */
.tile::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--c-gold-700), var(--c-gold-300));
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); border-color: transparent; }
.tile:hover::before { transform: scaleX(1); }
.tile__icon { width: 44px; height: 44px; color: var(--c-navy); margin-bottom: var(--sp-2); transition: transform var(--dur-3) var(--ease-out); }
.tile:hover .tile__icon, .tile:hover .ico--lg { transform: translateY(-2px) scale(1.06); }
.tile .h4 { margin-bottom: var(--sp-1); }
.tile p { margin: 0; font-size: var(--fs-body-s); color: var(--c-text); }
.tile--accent { border-color: var(--c-gold-400); border-width: 1.5px; }
.tile--accent .tile__icon { color: var(--c-gold-700); }
.tile__corner { position: absolute; top: 0; right: 0; background: var(--c-gold); color: var(--c-navy); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 0 var(--r-lg) 0 var(--r-md); }
.tile--link { cursor: pointer; }
.tile__num {
  font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--c-gold-700);
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1.5px solid var(--c-gold-400); border-radius: var(--r-pill); margin-bottom: var(--sp-2);
}

.facts-row {
  display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-subtle); border-radius: var(--r-md); font-size: var(--fs-body-s); color: var(--c-text);
  border: 1px solid var(--c-border);
}
.facts-row span { display: inline-flex; align-items: center; gap: 8px; }
.facts-row svg { color: var(--c-success); flex-shrink: 0; }

@media (max-width: 1023px) { .tiles--3 { grid-template-columns: 1fr; } .tiles--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .tiles--4 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- 10. Каталог */
.catalog__lead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.catalog__lead .section__head { margin-bottom: 0; }

/* Фильтр (sticky на десктопе) */
.filter {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: var(--sp-3);
  background: var(--c-navy); border: none; border-radius: var(--r-lg); margin-bottom: var(--sp-3);
  box-shadow: var(--sh-card);
}
/* Липнет вплотную к шапке: к моменту прилипания страница уже прокручена,
   а значит шапка сжата до 66 px. Раньше здесь было 82 px — между шапкой и
   фильтром оставался просвет, сквозь который лезли карточки. */
.filter--sticky {
  position: sticky; top: 66px; z-index: 20;
  transition: padding var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
              border-radius var(--dur-2) var(--ease);
}
/* Прилип — уходит в компактный режим, чтобы не резать экран поперёк:
   подписи полей убираем (их роль берут на себя «Все округа» / «Все ИФНС») */
.filter--sticky.is-stuck {
  padding: 10px 14px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 14px 30px rgba(15,50,79,.26);
}
.filter--sticky.is-stuck .filter__field > label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.filter--sticky.is-stuck .filter__field .select select { height: 42px; }
.filter--sticky.is-stuck .filter__reset { padding: 10px 18px; }
@media (prefers-reduced-motion: reduce) { .filter--sticky { transition: none; } }
.filter__field { flex: 1 1 180px; min-width: 150px; }
.filter__field > label {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 7px;
}
.filter__field .select select { height: 48px; background: #fff; }
.filter__actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.filter__reset {
  background: transparent; border: 1px solid rgba(255,255,255,.28); color: #fff; cursor: pointer;
  font-size: 14px; padding: 13px 22px; border-radius: var(--r-pill);
  transition: background var(--dur-hover) var(--ease);
}
.filter__reset:hover { background: rgba(255,255,255,.12); }
.filter__count { font-size: var(--fs-body-s); color: var(--c-text-muted); margin-bottom: var(--sp-3); }
.filter__count b { color: var(--c-navy); }

@media (max-width: 767px) {
  .filter { flex-direction: column; align-items: stretch; }
  .filter--sticky { position: static; }
  .filter__field { flex: 1 1 auto; }
}

/* Плейсхолдер фото (используется в блоке «Кто мы») */
.addr-card__ph {
  display: grid; place-content: center; gap: 8px; text-align: center;
  aspect-ratio: 4 / 3; padding: 16px; border-radius: var(--r-lg);
  background: var(--c-navy-700); color: rgba(255,255,255,.75);
  font-size: var(--fs-caption); line-height: 1.5; letter-spacing: .02em;
}
.addr-card__ph svg { margin: 0 auto 8px; color: rgba(255,255,255,.55); }

/* Посыл «показываем не все» */
.not-all {
  position: relative; overflow: hidden;
  margin-top: var(--sp-6); padding: var(--sp-6); border-radius: var(--r-xl);
  background: var(--c-navy);
  background-image: radial-gradient(600px 300px at 90% 120%, rgba(198,158,126,.14), transparent 60%);
  color: #fff; display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap;
}
.not-all__text { flex: 1 1 420px; position: relative; z-index: 1; }
.not-all h3 { color: #fff; margin-bottom: var(--sp-1); }
.not-all p { color: rgba(255,255,255,.84); margin: 0; }
.not-all__cta { flex-shrink: 0; position: relative; z-index: 1; }
/* На мобильных блок переносит CTA на свою строку, но flex-shrink: 0 у обёртки
   оставлял ей ширину по max-content подписи (до 324 px) при внутренней ширине
   блока 229 px — кнопка уезжала под `overflow: hidden` блока и обрезалась
   на 61/47/10 px (360/375/414). width: 100% у самой кнопки не помогал: он
   считается от обёртки, которой запрещено сжиматься. Отдаём обёртке всю строку
   и разрешаем сжатие — тогда 100 % считается от ширины блока. */
@media (max-width: 767px) {
  .not-all { padding: var(--sp-4); gap: var(--sp-3); }
  .not-all__cta { flex: 1 1 100%; min-width: 0; }
  .not-all__cta .btn { width: 100%; }
}

/* Подборки-сегменты (навигатор) */
/* auto-fit, а не фиксированные 5 колонок: число подборок зависит от того,
   по каким сегментам есть данные для фильтра — сетка не должна ломаться. */
.segments { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gutter); }
@media (max-width: 1023px) { .segments { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .segments { grid-template-columns: 1fr; } }
.segment {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.segment::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--c-gold-700), var(--c-gold-300));
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out);
}
.segment:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); border-color: transparent; }
.segment:hover::before { transform: scaleX(1); }
.segment__icon { width: 38px; height: 38px; color: var(--c-navy); transition: transform var(--dur-3) var(--ease-out); }
.segment:hover .segment__icon, .segment:hover .ico--lg { transform: translateY(-2px) scale(1.06); }
.segment--accent { border-color: var(--c-gold-400); border-width: 1.5px; }
.segment--accent .segment__icon { color: var(--c-gold-700); }
.segment .h4 { font-size: var(--fs-h5); }
.segment p { margin: 0; font-size: var(--fs-caption); color: var(--c-text-muted); flex: 1; }

/* --------------------------------------------------------------- 11. Квиз */
.quiz { max-width: 660px; margin: 0 auto; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-card-hover); overflow: hidden; border: 1px solid var(--c-border); }
.quiz__progress { height: 6px; background: var(--c-border); }
.quiz__bar { height: 100%; width: 20%; background: linear-gradient(90deg, var(--c-navy-600), var(--c-navy)); transition: width var(--dur-3) var(--ease-out); }
.quiz__inner { padding: var(--sp-6); }
.quiz__step-label { font-size: var(--fs-caption); color: var(--c-text-muted); margin-bottom: var(--sp-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.quiz__q { margin-bottom: var(--sp-4); }
.quiz__options { display: grid; gap: 12px; }
.quiz__options--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .quiz__options--2 { grid-template-columns: 1fr; } }
.quiz-opt {
  display: flex; align-items: center; gap: 12px; padding: 16px; min-height: 58px;
  border: 1px solid var(--c-border-field); border-radius: var(--r-md); background: #fff; cursor: pointer;
  font-size: 16px; color: var(--c-text); text-align: left;
  transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease-out);
}
.quiz-opt:hover { border-color: var(--c-navy-600); transform: translateY(-1px); }
.quiz-opt.is-selected { border-color: var(--c-navy); background: rgba(36,59,84,.04); }
.quiz-opt__check { width: 22px; height: 22px; border-radius: var(--r-pill); border: 2px solid var(--c-border-field); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--c-gold-700); transition: border-color var(--dur-hover) var(--ease); }
.quiz-opt__check .ico { opacity: 0; transform: scale(.5); transition: opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease-out); }
.quiz-opt.is-selected .quiz-opt__check { border-color: var(--c-gold); }
.quiz-opt.is-selected .quiz-opt__check .ico { opacity: 1; transform: scale(1); }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: var(--sp-4); }
.quiz__final { text-align: center; }
.quiz__final .field { text-align: left; }
.quiz__hidden { display: none; }
/* Финальная подпись кнопки для варианта без JS. С JS её место занимает
   .quiz__lbl-js, а сам текст перезаписывает show() в app.js. Раскрывается
   в <noscript>-стилях из template-parts/forms/quiz.php. */
.quiz__lbl-nojs { display: none; }
/* Переход шагов квиза */
.quiz__step { animation: quizIn var(--dur-3) var(--ease-out); }
@keyframes quizIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.quiz__step.quiz__step--back { animation-name: quizInBack; }
@keyframes quizInBack { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quiz__step { animation: none; } }
.quiz__final-mark { color: var(--c-success); margin: 0 auto var(--sp-2); display: inline-flex; }
.quiz__final-mark svg { animation: pop var(--dur-4) var(--ease-out); }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 767px) { .quiz__inner { padding: var(--sp-4); } }

/* --------------------------------------------------------------- 12. Этапы (timeline) */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter); position: relative; }
/* Линия таймлайна с заливкой по скроллу */
.steps__track {
  position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: var(--c-border);
  z-index: 0;
}
.steps__track::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--c-gold-700), var(--c-gold-300));
  transform: scaleX(var(--steps-p, 0)); transform-origin: left; transition: transform var(--dur-4) var(--ease-out);
}
.step { position: relative; z-index: 1; }
.step__num {
  width: 46px; height: 46px; border-radius: var(--r-pill); background: var(--c-navy); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3);
  box-shadow: 0 0 0 6px #fff; transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease);
}
.section--subtle .step__num { box-shadow: 0 0 0 6px var(--c-bg-subtle); }
.step:hover .step__num { transform: translateY(-3px) scale(1.05); }
.step:last-child .step__num { background: var(--c-gold); color: var(--c-navy); }
.step .h4 { font-size: var(--fs-h5); margin-bottom: 6px; }
.step p { margin: 0; font-size: var(--fs-body-s); color: var(--c-text); }
@media (max-width: 1023px) { .steps { grid-template-columns: 1fr 1fr; } .steps__track { display: none; } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- 13. Сравнение */
.compare-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.compare th, .compare td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--c-border); font-size: var(--fs-body-s); vertical-align: top; }
.compare thead th { background: var(--c-navy); color: #fff; font-family: var(--font-head); font-weight: 600; }
.compare thead th:last-child { background: var(--c-navy-900); }
.compare td:first-child { font-weight: 600; color: var(--c-navy); }
.compare td:last-child { color: var(--c-navy); }
.compare tbody tr { transition: background var(--dur-hover) var(--ease); }
.compare tbody tr:hover { background: var(--c-bg-warm); }
.compare tr:last-child td { border-bottom: none; }
.compare--2col th, .compare--2col td { width: 50%; }
.compare-wrap { overflow-x: auto; border-radius: var(--r-md); box-shadow: var(--sh-card); }
@media (max-width: 620px) { .compare { min-width: 520px; } }

.checklist { display: grid; gap: 12px; margin-top: var(--sp-4); }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist__n { flex-shrink: 0; width: 27px; height: 27px; border-radius: var(--r-pill); background: rgba(192,57,43,.1); color: var(--c-error); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Sticky-рейл для 2-колоночных «текст + карточки» блоков */
.rail { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-8); align-items: start; }
.rail__sticky { position: sticky; top: 110px; }
@media (max-width: 1023px) { .rail { grid-template-columns: 1fr; gap: var(--sp-5); } .rail__sticky { position: static; } }

/* --------------------------------------------------------------- 14. Документы */
/* minmax(0,1fr) обязателен: без него колонка не сжимается уже своего содержимого
   и длинная строка («Гарантийное письмо собственника») распирает страницу вбок */
.docs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
@media (max-width: 767px) { .docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* на телефоне в колонке остаётся ~50 px под текст — переводим в один столбец */
@media (max-width: 620px) { .docs-grid { grid-template-columns: minmax(0, 1fr); } }
.doc span { min-width: 0; overflow-wrap: anywhere; }
.doc {
  display: flex; gap: 12px; align-items: center; padding: var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.doc:hover { transform: translateY(-2px); box-shadow: var(--sh-card); border-color: var(--c-gold-400); }
.doc__icon { display: inline-flex; flex-shrink: 0; width: 40px; height: 48px; color: var(--c-navy); }
.doc span { font-size: var(--fs-body-s); }

/* --------------------------------------------------------------- 15. Цены */
/* Обёртка со скроллом — та же схема, что у .compare-wrap. Страховка: минимальная
   ширина таблицы (самое длинное слово в первой колонке + цена во второй) при
   360 px оказывалась на 2 px больше колонки контейнера и распирала страницу.
   Ниже, в медиазапросе на 440 px, таблица ужимается так, что вписывается и
   внутренний скролл не появляется — обёртка держит случай будущих длинных строк. */
.price-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-card); }
.price-table th, .price-table td { padding: 18px 24px; text-align: left; border-bottom: 1px solid var(--c-border); }
.price-table thead th { background: var(--c-bg-subtle); font-family: var(--font-head); color: var(--c-navy); font-size: var(--fs-body-s); }
.price-table tbody tr { transition: background var(--dur-hover) var(--ease); }
.price-table tbody tr:hover { background: var(--c-bg-warm); }
.price-table td:last-child { font-family: var(--font-head); font-weight: 600; color: var(--c-navy); white-space: nowrap; }
.price-table tr:last-child td { border-bottom: none; }
.price-note { font-size: var(--fs-body-s); color: var(--c-text-muted); margin-top: var(--sp-3); }
@media (max-width: 620px) { .price-table th, .price-table td { padding: 14px 16px; font-size: var(--fs-body-s); } }

/* --------------------------------------------------------------- 16. Цифры */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); text-align: center; position: relative; z-index: 1; }
.stat { padding: var(--sp-2) var(--sp-1); }
.stat__num { font-family: var(--font-head); font-weight: 700; font-size: 48px; line-height: 1; color: #fff; letter-spacing: -.02em; }
.stat--gold .stat__num { background: linear-gradient(180deg, var(--c-gold-300), var(--c-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { font-size: var(--fs-body-s); color: rgba(255,255,255,.72); margin-top: 10px; }
@media (max-width: 767px) { .stats { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .stat__num { font-size: 34px; } }

/* --------------------------------------------------------------- 17. Отзывы */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 1023px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .reviews { grid-template-columns: 1fr; } }
.review {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 12px; position: relative;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
.review__quote { position: absolute; top: 16px; right: 20px; font-family: var(--font-head); font-size: 56px; line-height: 1; color: rgba(198,158,126,.24); font-weight: 800; }
.review__top { display: flex; align-items: center; gap: 12px; }
.review__ava { width: 46px; height: 46px; border-radius: var(--r-pill); background: var(--c-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; }
.review__name { font-weight: 600; color: var(--c-navy); font-size: var(--fs-body-s); }
.review__role { font-size: var(--fs-caption); color: var(--c-text-muted); }
.stars { display: inline-flex; gap: 2px; color: var(--c-gold); }
.review__text { margin: 0; font-size: var(--fs-body-s); }
.review__src { font-size: var(--fs-caption); color: var(--c-navy); display: inline-flex; align-items: center; gap: 6px; }
/* Подчёркивание по ховеру — только когда источник действительно ссылка.
   Пока отзывы плейсхолдеры, это <span>: намекать на клик нельзя. */
a.review__src:hover { text-decoration: underline; text-decoration-color: var(--c-gold); text-underline-offset: 3px; }

.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: var(--sp-4); }
@media (max-width: 767px) { .cases { grid-template-columns: 1fr; } }
/* Одиночный кейс на посадочной: в сетке из трёх колонок он занял бы треть ширины
   и снова повис бы плашкой сбоку — ровно то, что в этой раскладке исправляли. */
.cases--single { grid-template-columns: 1fr; }
.case {
  padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--c-gold); background: var(--c-bg-subtle);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease);
}
.case:hover { transform: translateX(3px); box-shadow: var(--sh-card); }
.case .h4 { font-size: var(--fs-h5); margin-bottom: 6px; }
.case p { margin: 0; font-size: var(--fs-body-s); color: var(--c-text-muted); }

/* --------------------------------------------------------------- 18. Кто мы */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.about__media { aspect-ratio: 4 / 3; background: var(--c-navy-700); border-radius: var(--r-xl); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--sh-card-hover); }
.about__media::after { content: ""; position: absolute; inset: 0; background: var(--overlay-navy-soft); }
.about__media .addr-card__ph { color: rgba(255,255,255,.72); }
.about__bullets { display: grid; gap: 10px; margin-top: var(--sp-3); }
.about__bullets li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body-s); }
.about__bullets svg { color: var(--c-success); flex-shrink: 0; margin-top: 3px; }
@media (max-width: 767px) { .about { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* --------------------------------------------------------------- 19. FAQ */
.faq { max-width: 840px; margin: 0 auto; }
.faq__item {
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; margin-bottom: 12px;
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.faq__item.is-open { border-color: var(--c-gold-400); box-shadow: var(--sh-card); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 22px; background: transparent; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h5); color: var(--c-navy);
}
.faq__q svg { flex-shrink: 0; color: var(--c-gold-700); transition: transform var(--dur-accordion) var(--ease-out); }
.faq__item.is-open .faq__q svg { transform: rotate(180deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height var(--dur-accordion) var(--ease-inout); }
.faq__a-inner { padding: 0 22px 20px; color: var(--c-text); font-size: var(--fs-body); }
/* Кнопка под аккордеоном: по центру той же колонки 840 px, отступ 40 px —
   аккордеон читается списком, кнопка не приклеивается к последнему вопросу. */
.faq__cta { max-width: 840px; margin: var(--sp-5) auto 0; text-align: center; }

/* --------------------------------------------------------------- 20. Финал-CTA */
.final { background: var(--c-navy); color: #fff; position: relative; overflow: hidden; }
.final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 360px at 12% -10%, rgba(198,158,126,.14), transparent 60%),
             radial-gradient(600px 400px at 100% 120%, rgba(54,82,112,.5), transparent 60%);
}
.final__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; position: relative; z-index: 1; }
.final h2 { color: #fff; }
.final__text { color: rgba(255,255,255,.84); }
.final__guarantee { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: var(--sp-3); }
.final__guarantee span { display: inline-flex; gap: 8px; align-items: center; font-size: var(--fs-body-s); color: rgba(255,255,255,.84); }
.final__guarantee svg { color: var(--c-gold); flex-shrink: 0; }
@media (max-width: 1023px) { .final__grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* --------------------------------------------------------------- 21. Подвал */
.footer { background: var(--c-navy); color: rgba(255,255,255,.7); padding: var(--sp-8) 0 var(--sp-4); position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,158,126,.5), transparent); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid rgba(255,255,255,.12); position: relative; z-index: 1; }
.footer__brand .logo__name { color: #fff; }
.footer__brand .logo__slogan { color: var(--c-gold-300); }
.footer__brand p { margin-top: var(--sp-3); font-size: var(--fs-body-s); color: rgba(255,255,255,.62); max-width: 280px; }
.footer__col .h5 { color: #fff; font-size: 14px; margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-body); }
.footer__col ul { display: grid; gap: 10px; }
.footer__col a { color: rgba(255,255,255,.7); font-size: var(--fs-body-s); transition: color var(--dur-hover) var(--ease); }
.footer__col a:hover { color: var(--c-gold-300); }
.footer__bottom { padding-top: var(--sp-4); display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-caption); color: rgba(255,255,255,.55); position: relative; z-index: 1; }
@media (max-width: 1023px) { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }
@media (max-width: 620px) { .footer__top { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- 22. Sticky-CTA */
.sticky-cta { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.sticky-cta__msgr {
  width: 58px; height: 58px; border-radius: var(--r-pill); background: var(--c-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-float);
  transition: transform var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease);
}
.sticky-cta__msgr::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(198,158,126,.5);
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.sticky-cta__msgr:hover { background: var(--c-navy-900); transform: translateY(-3px) scale(1.05); }
.sticky-cta__msgr:hover::after { opacity: 1; }
.sticky-bar { display: none; }
@media (max-width: 767px) {
  .sticky-cta__msgr { width: 52px; height: 52px; }
  .sticky-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: block;
    background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--c-border); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 18px rgba(36,59,84,.1);
  }
  .sticky-bar .btn { width: 100%; }
  .sticky-cta { bottom: 84px; }
  body { padding-bottom: 72px; }
}

/* Плашка недостоверности (сквозная) */
.alert-strip { background: #FCEEEC; border: 1px solid rgba(192,57,43,.25); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; justify-content: space-between; }
.alert-strip__text { display: flex; gap: 12px; align-items: center; font-size: var(--fs-body-s); color: var(--c-text); }
.alert-strip svg { color: var(--c-error); flex-shrink: 0; }
.alert-strip__pulse { position: relative; }

/* --------------------------------------------------------------- 23. Reveal-система V2 */
/* База: fade-up */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* Варианты направлений/эффектов */
.reveal--left { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--scale { transform: scale(.94); }
.reveal--up-lg { transform: translateY(40px); }
.reveal--clip { clip-path: inset(0 100% 0 0); transform: none; opacity: 1; transition: clip-path var(--dur-4) var(--ease-out) var(--reveal-delay, 0ms); }
.reveal--clip.is-in { clip-path: inset(0 0 0 0); }
.reveal--fade { transform: none; }
.reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--left, .reveal--right, .reveal--scale, .reveal--up-lg, .reveal--clip { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* Иконки (инъектор <i data-icon>) */
.ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: none; line-height: 0; }
.ico--lg { display: flex; margin-bottom: var(--sp-2); color: var(--c-navy); transition: transform var(--dur-3) var(--ease-out); }
.tile--accent .ico--lg, .segment--accent .ico--lg { color: var(--c-gold-700); }

/* Утилиты */
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.center { text-align: center; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
@media (max-width: 767px) { .grid-2 { grid-template-columns: 1fr; gap: var(--sp-4); } }
.pos-rel { position: relative; }
.z1 { position: relative; z-index: 1; }

/* =========================================================================
   СЛОЙ ВЗАИМОДЕЙСТВИЯ: переходы между страницами, 3D-тилт, магнитные CTA,
   spotlight, глубина от указателя. Прелоадер и курсор-глоу убраны в V6.
   Всё gated: pointer:fine + !prefers-reduced-motion. transform/opacity.
   ========================================================================= */

/* --- Переход между страницами (навигационная шторка) --- */
.page-exit {
  position: fixed; inset: 0; z-index: 9998; background: #0F324F;
  transform: translateY(100%); will-change: transform;
  display: flex; align-items: center; justify-content: center;
}
.page-exit.is-on { transform: translateY(0); transition: transform .43s var(--ease-out); }
.page-exit__mark { width: 54px; height: 54px; opacity: 0; transform: scale(.85); }
.page-exit__mark svg { width: 100%; height: 100%; display: block; }
.page-exit.is-on .page-exit__mark { opacity: 1; transform: none; transition: opacity .3s ease .1s, transform .34s var(--ease-out) .1s; }

/* --- 3D-тилт (hero-форма, карточки адреса) --- */
.fx-tilt { transform-style: preserve-3d; }
.fx-tilt.is-tilting {
  transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px) !important;
  transition: transform .12s var(--ease-out) !important;
}

/* --- Магнитные акцентные CTA --- */
.fx-magnet { transition: transform .3s var(--ease-out); }
.fx-magnet.is-magnet { transform: translate(var(--mx,0), var(--my,0)); transition: transform .12s var(--ease-out); }

/* --- Spotlight-подсветка карточек за курсором --- */
.fx-spot.is-spot { background-image: radial-gradient(240px circle at var(--sx,50%) var(--sy,50%), rgba(198,158,126,.13), transparent 58%); }

/* --- Глубина hero от указателя --- */
/* JS ставит transform слоёв напрямую при pointermove (без transition, чтобы
   не смазывать покадровый скролл-параллакс). Сброс — на pointerleave. */

@media (prefers-reduced-motion: reduce) {
  .page-exit { display: none !important; }
  .fx-tilt.is-tilting, .fx-magnet.is-magnet { transform: none !important; }
}

/* --- Правки адаптива (V6) ------------------------------------------------ */
@media (max-width: 767px) {
  /* горизонтальные сдвиги при появлении на мобильном давали лишнюю прокрутку */
  .reveal--left, .reveal--right { transform: translateY(20px); }
  /* таблицы читаются прокруткой внутри блока, страница вбок не едет */
  .compare-wrap .compare { min-width: 460px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Правки раскладки (V6, найдены при финальной проверке) --------------- */

/* Шапка: на узких десктопах (≈1024–1366) меню и блок контактов вместе
   не помещались и вылезали за правый край — уплотняем и убираем мессенджеры */
@media (max-width: 1366px) {
  .header__contacts .btn { padding: 14px 20px; font-size: 15px; }
}
/* 1024–1279: меню и кнопка «Подобрать адрес» остаются в шапке. Место под них
   освобождает слоган логотипа — он никуда не девается, просто показывается
   с 1280 px и живёт в подвале. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .logo__slogan { display: none; }
  .nav { gap: 12px; }
  .nav a { font-size: 14px; }
  .header__contacts .btn { padding: 13px 18px; font-size: 14.5px; }
}
/* 768–1023 (планшет): в шапку возвращается кнопка заявки. Липкая полоса снизу
   включается только до 767 px, а шапка на этих ширинах отдавала CTA бургеру —
   человек листал страницу и сквозного призыва не видел вообще. Возвращаем кнопку
   в шапку, а не расширяем липкую полосу: полоса — ещё один фиксированный слой
   поверх контента (плюс сдвиг плавающей кнопки мессенджера и padding-bottom
   у body), а в шапке место есть — навигация и иконки мессенджеров остаются
   скрытыми, рядом с кнопкой только логотип и бургер (≈500 из 704 px на 768).
   Диапазон 1024–1366 не затрагивается: он настроен правилами выше. */
@media (min-width: 768px) and (max-width: 1023px) {
  .header__contacts { display: flex; }
  .header__contacts .btn { padding: 13px 18px; font-size: 15px; }
}

/* Две колонки при 768–1023 давали слишком узкие ячейки: таблица цен
   не вмещалась в свою половину. Переводим блок в одну колонку раньше */
@media (max-width: 1023px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Таблица цен: на узких экранах ужимаем внутренние отступы */
@media (max-width: 767px) {
  .price-table th, .price-table td { padding: 14px 16px; }
  .price-table td:last-child { font-size: var(--fs-body-s); }
}
/* 360–440 px: отступы ещё уже, а цена получает право переноса. Именно nowrap
   на второй колонке задирал минимальную ширину таблицы выше ширины контейнера
   (2 px переполнения на 360 px). Читаемость не страдает: «от 18 000 ₽ / 11 мес»
   переносится по пробелу, а не внутри суммы. */
@media (max-width: 440px) {
  .price-table th, .price-table td { padding: 12px 12px; }
  .price-table td:last-child { white-space: normal; }
}

/* Колонка сетки по умолчанию не сжимается уже своего содержимого (min-width: auto),
   поэтому длинная строка внутри неё распирает страницу вбок. Разрешаем сжатие
   всем ячейкам сеток разом — это профилактика той же ошибки в новых блоках. */
.hero__grid > *, .hero__bullets > *, .postpay__grid > *, .stripe-grid > *,
.tiles > *, .segments > *, .steps > *, .rail > *, .stats > *,
.reviews > *, .cases > *, .about > *, .final__grid > *, .footer__top > *,
.docs-grid > *, .quiz__options > *, .grid-2 > * { min-width: 0; }

/* =========================================================================
   КАРТОЧКА АДРЕСА (сетка, как раньше) — фото прямоугольником, клик → галерея
   ========================================================================= */
.ad {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  box-shadow: var(--sh-card); overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.ad:hover { transform: translateY(-5px); box-shadow: var(--sh-card-hover); border-color: transparent; }

/* Фото — широкий прямоугольник, кликается и открывает галерею */
.ad__media {
  /* пропорцию держит сама кнопка: <button> не тянется по высоте картинки */
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
  padding: 0; border: none; cursor: pointer; overflow: hidden; background: var(--c-bg-subtle);
}
.ad__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-4) var(--ease-out);
}
.ad__media:hover .ad__photo { transform: scale(1.05); }
.ad__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,50,79,.55), transparent 45%);
  opacity: .9; transition: opacity var(--dur-2) var(--ease);
}
.ad__media:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(198,158,126,.85); }
.ad__tag {
  position: absolute; z-index: 2; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.93); color: var(--c-navy);
  font-size: 12px; font-weight: 600; backdrop-filter: blur(4px);
}
.ad__tag svg { width: 13px; height: 13px; color: var(--c-gold-700); }
/* Подписи «N фото» на обложке карточки больше нет (решение владельца 2026-07-26):
   белый текст поверх произвольного снимка давал контраст 1,00–2,14:1 и не сообщал
   ничего полезного. Стили .ad__zoom удалены вместе с разметкой; галерея открывается
   кликом по самой обложке (.ad__media — role="button" + aria-label). */

/* Тело карточки */
.ad__body { display: flex; flex-direction: column; gap: 12px; padding: var(--sp-3); flex: 1; }
.ad__geo {
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-gold-700);
}
.ad__addr {
  font-family: var(--font-head); font-size: var(--fs-h5); font-weight: 600;
  line-height: 1.3; letter-spacing: -.01em; color: var(--c-navy); margin: 0;
}
.ad__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 11px;
  font-size: 12.5px; font-weight: 600; border-radius: var(--r-pill);
  color: var(--c-navy); background: rgba(36,59,84,.06);
}
.chip svg { width: 14px; height: 14px; opacity: .8; }

.ad__price { background: var(--c-bg-subtle); border-radius: var(--r-md); padding: 14px 16px; }
.ad__price-head {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-muted); margin-bottom: 8px;
}
.price-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  padding: 6px 0; font-size: 12.5px; line-height: 1.3; color: var(--c-text-muted);
  border-bottom: 1px solid rgba(36,59,84,.07);
}
.price-row:last-child { border-bottom: none; padding-bottom: 0; }
.price-row b {
  font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--c-navy);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ad__attrs { font-size: var(--fs-caption); color: var(--c-text-muted); margin: 0; }
.ad__cta { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.ad__cta .btn { flex: 1; }
.ad__cta .arrow-btn { width: 44px; height: 44px; flex: none; }

/* Сетка карточек и лента */
.ad-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
@media (max-width: 1100px) { .ad-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .ad-list { grid-template-columns: minmax(0, 1fr); } }

.adrail { position: relative; }
.adrail__viewport {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; padding: 6px 0 10px; cursor: grab;
}
.adrail__viewport::-webkit-scrollbar { display: none; }
.adrail__viewport.is-drag { cursor: grabbing; scroll-snap-type: none; }
.adrail__track { display: flex; gap: var(--gutter); width: max-content; }
.adrail__track > .ad { flex: 0 0 min(390px, 82vw); scroll-snap-align: start; }
.adrail__bar { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.adrail__progress { flex: 1; height: 3px; background: var(--c-border); border-radius: 3px; overflow: hidden; }
.adrail__progress i {
  display: block; height: 100%; width: 20%; border-radius: 3px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-navy));
  transition: transform .12s linear, width .12s linear;
}
.adrail__nav { display: flex; gap: 10px; }
.adrail__hint { font-size: var(--fs-caption); color: var(--c-text-muted); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.adrail__btn {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--c-border); border-radius: 50%; background: #fff; color: var(--c-navy);
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.adrail__btn:hover { background: var(--c-navy); color: #fff; border-color: transparent; transform: translateY(-2px); }
.adrail__btn[disabled] { opacity: .35; cursor: default; transform: none; background: #fff; color: var(--c-navy); }
.adrail__btn--prev svg { transform: rotate(90deg); }
.adrail__btn--next svg { transform: rotate(-90deg); }
@media (max-width: 767px) { .adrail__hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ad:hover { transform: none; }
  .ad__media:hover .ad__photo { transform: none; }
  .adrail__viewport { scroll-behavior: auto; }
}

/* Заголовок карточки — ссылка на страницу адреса. Цвет и вес наследуются от
   .ad__addr: подчёркивание появляется только при наведении, иначе сетка из 24
   подчёркнутых заголовков читается как список ссылок, а не как каталог. */
.ad__addr a { color: inherit; text-decoration: none; }
.ad__addr a:hover { color: var(--c-gold-700); text-decoration: underline; text-underline-offset: 3px; }
.ad__addr a:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 4px; }

/* --------------------------------------------- 10a. Страница адреса (single) */
/* Хлебные крошки. Есть только здесь: остальные страницы лежат в корне сайта,
   там путь из двух уровней и визуальный блок ему не нужен (BreadcrumbList в
   разметке при этом стоит на всех). Фон крошек — тёмный hero, поэтому цвета
   те же, что у .hero__text: контраст на navy проверен. */
.crumbs {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: var(--sp-3); font-size: var(--fs-caption); line-height: 1.4;
  color: rgba(255,255,255,.84);
}
.crumbs a { color: rgba(255,255,255,.84); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 4px; }
.crumbs__sep { color: rgba(255,255,255,.45); }
.crumbs [aria-current="page"] { color: #fff; font-weight: var(--fw-semi); }

.adr__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--sp-6); align-items: start; }

/* Главное фото. Пропорция 16/10 — та же, что у карточек каталога, поэтому
   снимок не перекадрируется между каталогом и страницей. */
.adr__shot {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
  overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--c-border);
  background: var(--c-bg-subtle); cursor: pointer; box-shadow: var(--sh-card);
}
.adr__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-2) var(--ease-out); }
.adr__shot:hover img { transform: scale(1.03); }
.adr__shot:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(198,158,126,.85); }
.adr__zoom {
  position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: var(--fw-semi);
  color: var(--c-navy); background: rgba(255,255,255,.94);
  box-shadow: 0 4px 14px rgba(36,59,84,.18);
}
.adr__zoom svg { width: 16px; height: 16px; }

.adr__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; margin-top: 12px; }
.adr__thumb {
  padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-sm);
  overflow: hidden; background: var(--c-bg-subtle); cursor: pointer; aspect-ratio: 16 / 10;
  transition: border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.adr__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adr__thumb:hover { border-color: var(--c-gold); transform: translateY(-2px); }
.adr__thumb:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.adr__side { display: flex; flex-direction: column; gap: var(--sp-3); }
.adr__side > h2 { margin: 0; }

/* Данные объекта. Пустое поле не выводится вовсе — прочерков и «уточняется»
   в этой таблице быть не должно (правило проекта: нет данных — не пишем). */
.adr__facts { margin: 0; display: grid; gap: 0; }
.adr__fact {
  display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr); gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--c-border);
}
.adr__fact:first-child { padding-top: 0; }
.adr__fact:last-child { border-bottom: none; }
.adr__fact dt { font-size: var(--fs-body-s); color: var(--c-text-muted); }
.adr__fact dd { margin: 0; font-size: var(--fs-body-s); font-weight: var(--fw-semi); color: var(--c-navy); }

.adr__price { background: var(--c-bg-subtle); border-radius: var(--r-md); padding: 18px 20px; }
.adr__price-head {
  font-family: var(--font-body); font-size: 11.5px; font-weight: var(--fw-semi);
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); margin: 0 0 10px;
}
.adr__price .price-row { font-size: var(--fs-body-s); }
.adr__price .price-row b { font-size: 15px; }
.adr__price-note { margin: 12px 0 0; font-size: var(--fs-caption); color: var(--c-text-muted); }

.adr__marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.adr__marks li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body-s); color: var(--c-text); }
.adr__marks svg { flex: none; width: 17px; height: 17px; color: var(--c-gold-700); margin-top: 2px; }

.adr__more { margin: var(--sp-4) 0 0; }

.adr__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.adr__link {
  display: flex; gap: 14px; align-items: flex-start; padding: 20px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  color: var(--c-text); text-decoration: none; box-shadow: var(--sh-card);
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.adr__link:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); border-color: transparent; }
.adr__link:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.adr__link svg { flex: none; color: var(--c-gold-700); margin-top: 2px; }
.adr__link span { display: block; font-size: var(--fs-body-s); color: var(--c-text-muted); }
.adr__link b { display: block; margin-bottom: 4px; font-family: var(--font-head); font-size: var(--fs-h5); color: var(--c-navy); }

@media (max-width: 1023px) {
  .adr__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .adr__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .adr__links { grid-template-columns: minmax(0, 1fr); }
  .adr__thumbs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .adr__shot:hover img, .adr__thumb:hover, .adr__link:hover { transform: none; }
}

/* ---------- Полноэкранная галерея ------------------------------------- */
.lb {
  position: fixed; inset: 0; z-index: 9990;
  display: none; align-items: center; justify-content: center;
}
.lb.is-open { display: flex; }
.lb__backdrop { position: absolute; inset: 0; background: rgba(9,22,36,.92); backdrop-filter: blur(6px); }
.lb__stage {
  position: relative; z-index: 1;
  width: min(1180px, 94vw); max-height: 92vh;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  animation: lbIn .32s var(--ease-out) both;
}
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lb__figure { grid-column: 2; grid-row: 1; margin: 0; display: flex; justify-content: center; min-height: 0; }
.lb__img {
  max-width: 100%; max-height: min(74vh, 760px); object-fit: contain;
  border-radius: var(--r-md); box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.lb__nav {
  grid-row: 1; width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.08);
  color: #fff; transition: background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.lb__nav:hover { background: rgba(255,255,255,.2); transform: scale(1.06); }
.lb__nav--prev { grid-column: 1; }
.lb__nav--prev svg { transform: rotate(90deg); }
.lb__nav--next { grid-column: 3; }
.lb__nav--next svg { transform: rotate(-90deg); }
.lb__close {
  position: absolute; top: -6px; right: -6px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff;
  font-size: 26px; line-height: 1; transition: background var(--dur-hover) var(--ease);
}
.lb__close:hover { background: rgba(255,255,255,.24); }
.lb__bottom { grid-column: 1 / -1; grid-row: 2; display: grid; justify-items: center; gap: 10px; }
.lb__counter {
  font-family: var(--font-head); font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8);
  letter-spacing: .04em;
}
.lb__thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lb__thumb {
  width: 78px; height: 58px; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid transparent; border-radius: var(--r-sm); background: none;
  opacity: .55; transition: opacity var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb__thumb:hover { opacity: .9; }
.lb__thumb.is-on { opacity: 1; border-color: var(--c-gold); }
.lb__nav:focus-visible, .lb__close:focus-visible, .lb__thumb:focus-visible {
  outline: 2px solid var(--c-gold); outline-offset: 2px;
}
@media (max-width: 767px) {
  .lb__stage { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lb__figure { grid-column: 1; }
  .lb__nav { position: absolute; top: 42%; grid-column: auto; width: 44px; height: 44px; }
  .lb__nav--prev { left: 2px; }
  .lb__nav--next { right: 2px; }
  .lb__bottom { grid-column: 1; }
  .lb__thumbs { display: none; }
  .lb__img { max-height: 62vh; }
  .lb__close { top: -46px; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lb__stage { animation: none; }
  .ad__media:hover .ad__photo { transform: none; }
}

/* =========================================================================
   КАРТА МОСКВЫ (блок «Кто мы»). Доказательство охвата: работаем во всех
   округах, со всеми инспекциями. SVG + CSS, без библиотек.
   Правится здесь: цвета, наклон, высоты слоёв, тайминги — всё переменными
   в .ym-map ниже. Геометрия — в разметке партиала.
   Пять слоёв, разведённых по высоте: стенка → плита с округами → каркас
   магистралей и вода → подписи → маркеры.
   Движение только на transform/opacity, запуск — общим reveal-наблюдателем.
   ========================================================================= */
.ym-map {
  /* --- что можно править без разработчика ------------------------------- */
  --map-tilt: 20deg;          /* наклон плиты «в стол» */
  --map-twist: -3deg;         /* доворот плиты в плоскости экрана */
  --map-yaw: 5deg;            /* доворот вокруг вертикали — даёт перспективу */
  --map-thick: 12px;          /* глубина боковой стенки */
  --map-net: 7px;             /* высота слоя магистралей и воды */
  --map-text: 15px;           /* высота слоя подписей */
  --map-lift: 32px;           /* высота парения маркеров над плитой */
  --map-hair: 1;              /* множитель толщины тонких линий */
  --map-step: 62ms;           /* шаг каскада округов */
  --map-pin-step: 18ms;       /* шаг каскада маркеров */
  --map-pulse: 4.2s;          /* период пульсации маркеров */

  --map-plate: #10263A;       /* подложка: видна в швах между округами */
  --map-wall-top: #1B3549;    /* верх боковой стенки */
  --map-wall-bot: #050D18;    /* низ боковой стенки */
  --map-o1: #24405B;          /* округа: три тона navy */
  --map-o2: #305573;
  --map-o3: #1C3549;
  --map-core: #3E6589;        /* ЦАО */
  --map-far: #16293C;         /* ТиНАО и Зеленоград — тоном ниже */
  --map-seam: rgba(6,18,32,.42);       /* шов между округами */
  --map-bevel: rgba(214,232,248,.07);  /* фаска по кромке округа */
  --map-mkad: rgba(198,158,126,.85);   /* кольцо МКАД */
  --map-ttk: rgba(219,184,153,.3);     /* ТТК */
  --map-sad: rgba(219,184,153,.55);    /* Садовое */
  --map-road: rgba(176,206,234,.2);    /* радиальные магистрали */
  --map-water: #8FC2E8;                /* Москва-река и Яуза */
  --map-trench: rgba(4,14,26,.4);      /* русло под водой */
  --map-pin: #D9B08D;                  /* маркеры адресов */
  --map-pin-deep: #A8764F;
  --map-label: rgba(255,255,255,.88);  /* подписи округов */
  margin: 0;
  position: relative;
}

/* Скрытый контейнер общих контуров и градиентов: на него ссылаются все слои.
   Не display:none — иначе ссылки на градиенты перестают разрешаться. */
.ym-map__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* запас снизу — наклонённая плита не должна наезжать на подпись */
.ym-map__stage { position: relative; perspective: 1000px; perspective-origin: 50% 38%; padding-bottom: 4%; }
.ym-map__deck {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(38deg) rotateY(var(--map-yaw)) rotateZ(var(--map-twist)) scale(.93);
  opacity: 0;
  transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out);
  will-change: transform;
}
.ym-map.is-in .ym-map__deck {
  transform: rotateX(var(--map-tilt)) rotateY(var(--map-yaw)) rotateZ(var(--map-twist));
  opacity: 1;
}

/* Тени «на полу»: широкая рассеянная + узкая контактная. Градиенты, не
   filter: blur — при наклоне за курсором это на порядок дешевле. */
.ym-map__shadow,
.ym-map__contact {
  position: absolute; pointer-events: none; opacity: 0;
  transition: opacity var(--dur-4) var(--ease-out) 140ms;
}
.ym-map__shadow {
  left: -2%; right: -2%; bottom: -1%; height: 46%;
  background: radial-gradient(50% 50% at 47% 58%, rgba(11,30,50,.28), rgba(11,30,50,0) 72%);
  transform: translateZ(-64px);
}
.ym-map__contact {
  left: 14%; right: 18%; bottom: 9%; height: 15%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(6,18,32,.42), rgba(6,18,32,0) 70%);
  transform: translateZ(-18px);
}
.ym-map.is-in .ym-map__shadow,
.ym-map.is-in .ym-map__contact { opacity: 1; }

/* Порядок слоёв задан z-index, а не только координатой Z: без 3D-контекста
   (prefers-reduced-motion) абсолютный слой иначе перекрывает карту.
   Слой --base остаётся в потоке и задаёт высоту блока. */
.ym-map__layer { display: block; width: 100%; height: auto; position: absolute; inset: 0; }
.ym-map__layer--base { position: relative; z-index: 2; }
.ym-map__layer--wall { z-index: 1; transform: translateZ(calc(-1 * var(--map-thick))); }
.ym-map__layer--net { z-index: 3; transform: translateZ(var(--map-net)); }
.ym-map__layer--labels { z-index: 4; transform: translateZ(var(--map-text)); }
.ym-map__layer--pins { z-index: 5; transform: translateZ(var(--map-lift)); }

/* --- плита, боковая стенка, округа --------------------------------------- */
.ym-map__wall { fill: url(#ymWall); }
.ym-w0 { stop-color: var(--map-wall-top); }
.ym-w1 { stop-color: var(--map-wall-bot); }
.ym-map__plate { fill: var(--map-plate); }

.ym-okrug {
  fill: var(--map-o1); stroke: var(--map-seam); stroke-width: .6;
  opacity: 0; transform: translateY(8px) scale(.995);
  transform-box: fill-box; transform-origin: 50% 50%;
}
.ym-okrug--t2 { fill: var(--map-o2); }
.ym-okrug--t3 { fill: var(--map-o3); }
.ym-okrug--core { fill: var(--map-core); }
.ym-okrug--far { fill: var(--map-far); }
.ym-map.is-in .ym-okrug {
  animation: ym-map-okrug var(--dur-4) var(--ease-out) forwards;
  animation-delay: calc(var(--i) * var(--map-step));
}
@keyframes ym-map-okrug {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

/* Фаска: светлая нить по кромке каждого округа — плитки читаются как гранёные */
.ym-map__bevel { fill: none; stroke: var(--map-bevel); stroke-width: 1; opacity: 0; }
.ym-map.is-in .ym-map__bevel { animation: ym-map-fade var(--dur-3) var(--ease-out) 520ms forwards; }
/* Подсветка и глубина по поверхности плиты (свет слева сверху) */
.ym-map__lit { opacity: 0; }
.ym-map.is-in .ym-map__lit { animation: ym-map-fade var(--dur-4) var(--ease-out) 180ms forwards; }
.ym-l0 { stop-color: #AFD2EE; stop-opacity: .18; }
.ym-l1 { stop-color: #AFD2EE; stop-opacity: .05; }
.ym-l2 { stop-color: #AFD2EE; stop-opacity: 0; }
.ym-d0 { stop-color: #04101C; stop-opacity: 0; }
.ym-d1 { stop-color: #04101C; stop-opacity: .1; }
.ym-d2 { stop-color: #04101C; stop-opacity: .26; }
/* Подсветка по кромке плиты: тёплый свет слева сверху, тень справа снизу */
.ym-map__rim { fill: none; stroke: url(#ymRim); stroke-width: 1.8; opacity: 0; }
.ym-map.is-in .ym-map__rim { animation: ym-map-fade var(--dur-4) var(--ease-out) 260ms forwards; }
.ym-r0 { stop-color: #E4EFFA; stop-opacity: .5; }
.ym-r1 { stop-color: #A9C2D8; stop-opacity: .16; }
.ym-r2 { stop-color: #040C15; stop-opacity: .45; }

/* Золотая волна: те же формы поверх, анимируется только прозрачность */
.ym-map__flash use { fill: var(--map-pin); opacity: 0; }
.ym-map.is-in .ym-map__flash use {
  animation: ym-map-flash 900ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * var(--map-step) + 60ms);
}
@keyframes ym-map-flash { 0% { opacity: 0; } 35% { opacity: .28; } 100% { opacity: 0; } }

/* --- вода: Москва-река с излучинами и Яуза ------------------------------- */
/* Русло — тёмная «канава» под водой, вода — светлая полоса поверх: река
   читается как врезанная в плиту, а не как светящийся шнур. */
.ym-map__water path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ym-map__riverbed { stroke: var(--map-trench); stroke-width: 9; }
.ym-map__river { stroke: var(--map-water); stroke-opacity: .78; stroke-width: 4; }
.ym-map__tributary { stroke: var(--map-water); stroke-opacity: .46; stroke-width: calc(var(--map-hair) * 1.9); }
.ym-map__water { opacity: 0; transform: scale(.985); transform-box: fill-box; transform-origin: 50% 50%; }
.ym-map.is-in .ym-map__water { animation: ym-map-grow var(--dur-4) var(--ease-out) 520ms forwards; }

/* --- радиально-кольцевой каркас ----------------------------------------- */
.ym-map__radials path { fill: none; stroke: var(--map-road); stroke-width: calc(var(--map-hair) * 1.4); stroke-linecap: round; }
.ym-map__radials { opacity: 0; transform: scale(.97); transform-box: fill-box; transform-origin: 50% 50%; }
.ym-map.is-in .ym-map__radials { animation: ym-map-grow var(--dur-4) var(--ease-out) 640ms forwards; }
@keyframes ym-map-grow { from { opacity: 0; } to { opacity: 1; transform: none; } }

.ym-map__ring { fill: none; opacity: 0; }
.ym-map__ring--ttk { stroke: var(--map-ttk); stroke-width: calc(var(--map-hair) * 1.6); }
.ym-map__ring--sad { stroke: var(--map-sad); stroke-width: calc(var(--map-hair) * 1.5); }
.ym-map.is-in .ym-map__ring { animation: ym-map-fade var(--dur-3) var(--ease-out) 700ms forwards; }
@keyframes ym-map-fade { to { opacity: 1; } }

.ym-map__mkad {
  fill: none; stroke: var(--map-mkad); stroke-width: calc(var(--map-hair) * 2.4);
  stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
}
.ym-map.is-in .ym-map__mkad { animation: ym-map-draw 1150ms var(--ease-inout) 240ms forwards; }
@keyframes ym-map-draw { to { stroke-dashoffset: 0; } }

/* --- подписи округов ----------------------------------------------------- */
.ym-map__labels text {
  fill: var(--map-label); font-family: var(--font-head); font-size: 19px;
  font-weight: var(--fw-med); letter-spacing: .04em; text-anchor: middle;
  opacity: 0; paint-order: stroke; stroke: rgba(6,18,32,.5); stroke-width: 3.4;
}
/* подписи внутри города — светлые по navy, вне города (Зеленоград) — тёмные по белому */
.ym-map__labels text.ym-map__label--core { font-size: 20px; fill: #fff; }
.ym-map__labels text.ym-map__label--out { font-size: 15px; fill: rgba(36,59,84,.92); stroke: none; }
.ym-map.is-in .ym-map__labels text { animation: ym-map-fade var(--dur-3) var(--ease-out) 880ms forwards; }

/* --- маркеры адресов: бусина с блеском и парной тенью -------------------- */
.ym-map__pinsh use { fill: rgba(5,15,27,.3); opacity: 0; }
.ym-map.is-in .ym-map__pinsh use { animation: ym-map-fade var(--dur-3) var(--ease-out) 960ms forwards; }

.ym-bead { fill: url(#ymBead); stroke: var(--map-pin-deep); stroke-width: .6; stroke-opacity: .55; }
.ym-spark { fill: #FFF6ED; fill-opacity: .62; }
.ym-b0 { stop-color: #F2D6B9; }
.ym-b1 { stop-color: var(--map-pin-deep); }

.ym-map__dots .ym-dot {
  opacity: 0; transform: scale(.2);
  transform-box: fill-box; transform-origin: 50% 50%;
}
.ym-map.is-in .ym-map__dots .ym-dot {
  animation: ym-map-pin var(--dur-3) var(--ease-out) forwards;
  animation-delay: calc(1s + var(--i) * var(--map-pin-step));
}
@keyframes ym-map-pin {
  from { opacity: 0; transform: scale(.2); }
  60%  { opacity: 1; transform: scale(1.3); }
  to   { opacity: 1; transform: none; }
}

/* Пульс — расходящееся золотое кольцо, а не заливка: читается как «радар» */
.ym-halo {
  fill: none; stroke: var(--map-pin); stroke-width: 1.6;
  opacity: 0; transform: scale(.32);
  transform-box: fill-box; transform-origin: 50% 50%;
}
/* Пульсация идёт, только пока блок в кадре (класс снимается наблюдателем) */
.ym-map.is-live .ym-halo {
  animation: ym-map-halo var(--map-pulse) var(--ease-out) infinite;
  animation-delay: calc(var(--i) * 137ms);
}
@keyframes ym-map-halo {
  0%   { opacity: 0; transform: scale(.32); }
  12%  { opacity: .7; }
  52%  { opacity: 0; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* Блик, один раз прокатывающийся по городу. Обрезка — на группе-обёртке,
   двигается прямоугольник внутри: иначе clip уехал бы вместе с ним. */
.ym-map__sheen { opacity: 0; }
.ym-map.is-in .ym-map__sheen { animation: ym-map-sheen 1500ms var(--ease-inout) 720ms forwards; }
@keyframes ym-map-sheen {
  0%   { opacity: 0; transform: translateX(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(820px); }
}
.ym-s0 { stop-color: var(--map-pin); stop-opacity: 0; }
.ym-s1 { stop-color: var(--map-pin); stop-opacity: .4; }

/* --- подпись под картой (текстовый эквивалент графики) ------------------- */
.ym-map__cap {
  margin: var(--sp-3) 0 0; font-size: var(--fs-body-s); line-height: 1.5;
  color: var(--c-text-muted); max-width: 46ch;
}
.ym-map__cap b { color: var(--c-navy); font-weight: var(--fw-semi); }

/* --- наклон за курсором: тот же bindTilt, что у карточек ----------------- */
.ym-map .ym-map__deck.fx-tilt.is-tilting {
  transform: rotateX(calc(var(--map-tilt) + var(--rx, 0deg))) rotateY(calc(var(--map-yaw) + var(--ry, 0deg))) rotateZ(var(--map-twist)) !important;
  transition: transform 140ms var(--ease-out) !important;
}

/* --- адаптив: на узких экранах карта смотрит прямее --------------------- */
@media (max-width: 1023px) {
  .ym-map { --map-tilt: 12deg; --map-yaw: 3deg; --map-lift: 20px; --map-thick: 8px;
            --map-net: 5px; --map-text: 10px; --map-hair: 1.25; }
  /* В половине планшетной ширины подписи округов становятся нечитаемыми,
     поэтому блок «Кто мы» переводим в одну колонку раньше базовых 767 px.
     Карта при этом не растягивается на всю ширину — ей хватает 560 px. */
  .about { grid-template-columns: minmax(0, 1fr); }
  .ym-map { max-width: 540px; margin-inline: auto; }
  .ym-map__labels text { font-size: 21px; }
}
@media (max-width: 767px) {
  .ym-map { --map-tilt: 0deg; --map-twist: 0deg; --map-yaw: 0deg; --map-lift: 12px;
            --map-thick: 5px; --map-net: 3px; --map-text: 6px; --map-hair: 1.6; }
  /* карта здесь мельче — подписи поднимаем, чтобы остались читаемыми */
  .ym-map__labels text { font-size: 24px; stroke-width: 4; }
  .ym-map__labels text.ym-map__label--core { font-size: 25px; }
  .ym-map__labels text.ym-map__label--out { font-size: 19px; }
  .ym-map__cap { max-width: none; }
}

/* --- уважение к prefers-reduced-motion: карта видна, движения нет -------- */
@media (prefers-reduced-motion: reduce) {
  .ym-map { --map-tilt: 0deg; --map-twist: 0deg; --map-yaw: 0deg;
            --map-lift: 0px; --map-thick: 0px; --map-net: 0px; --map-text: 0px; }
  .ym-map__deck { transform: none !important; opacity: 1 !important; transition: none !important; }
  .ym-map .ym-map__deck.fx-tilt.is-tilting { transform: none !important; }
  .ym-map__shadow, .ym-map__contact { opacity: 1; }
  .ym-map .ym-okrug,
  .ym-map .ym-map__bevel,
  .ym-map .ym-map__lit,
  .ym-map .ym-map__rim,
  .ym-map .ym-map__water,
  .ym-map .ym-map__radials,
  .ym-map .ym-map__ring,
  .ym-map .ym-map__labels text,
  .ym-map .ym-map__pinsh use,
  .ym-map .ym-map__dots .ym-dot {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .ym-map .ym-map__mkad { stroke-dashoffset: 0 !important; animation: none !important; }
  .ym-map__flash, .ym-map__halos, .ym-map__sheenwrap { display: none !important; }
}

/* =========================================================================
   ДОБАВЛЕНИЯ ПОД WORDPRESS (в макете этого не было)
   Ничего из макета выше не переопределяется, только новые селекторы.
   ========================================================================= */

/* --- Служебное: доступность, ловушка для спама --- */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-navy); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }
.ym-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

/* --- Чекбокс согласия на обработку ПДн (требование: явное согласие) --- */
.form-consent--check {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: var(--fs-caption); line-height: 1.5; color: var(--c-text-muted);
  margin: 14px 0 0; cursor: pointer;
}
.form-consent--check input[type="checkbox"] {
  flex: none; width: 16px; height: 16px; margin: 1px 0 0;
  accent-color: var(--c-gold-700); cursor: pointer;
}
.form-consent--check a { color: inherit; text-decoration: underline; }
.form-card--navy .form-consent--check,
.final .form-consent--check { color: var(--c-text-muted); }

/* --- Короткая модальная форма (второстепенные CTA) -----------------------
   Ванильная модалка без библиотек. Токены и компоненты — из дизайн-системы:
   навы/золото, кнопка-пилюля btn--accent, радиус --r-lg, тень --sh-float,
   поля .input и .field как в form-card. Новых цветов не появилось.
   Открытое состояние — класс is-open, ставит его JS.
   Центрирование: обёртка .ym-modal__scroll с min-height: 100% и align-items:
   center. Когда диалог выше экрана (блок согласия на низком мобильном), обёртка
   растёт и прокручивается сам оверлей — верх диалога не срезается. Вариант
   «флекс + margin: auto» этого не даёт: во флексе свободное место может стать
   отрицательным, и верх уезжает за край (замерено: −19 px на 375×600). */
.ym-modal {
  position: fixed; inset: 0; z-index: 9995;
  display: none; overflow-y: auto; overscroll-behavior: contain;
}
.ym-modal.is-open { display: block; }
.ym-modal__backdrop {
  position: fixed; inset: 0; background: rgba(9,22,36,.72); backdrop-filter: blur(4px);
}
.ym-modal__scroll {
  position: relative; z-index: 1; min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-2);
}
.ym-modal__dialog {
  position: relative;
  width: min(440px, 100%);
  background: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: var(--r-lg);
  box-shadow: var(--sh-float); padding: var(--sp-4);
  animation: ymModalIn var(--dur-2) var(--ease-out) both;
}
/* Золотая полоса слева — та же деталь, что у карточки формы. */
.ym-modal__dialog::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px;
  background: linear-gradient(var(--c-gold-300), var(--c-gold-700)); border-radius: 0 3px 3px 0;
}
@keyframes ymModalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.ym-modal__dialog:focus { outline: none; }
.ym-modal__dialog:focus-visible { outline: none; box-shadow: var(--sh-float), var(--ring-focus); }
.ym-modal__dialog h3 { margin: 0 44px var(--sp-1) 0; }
.ym-modal__sub { font-size: var(--fs-body-s); color: var(--c-text-muted); margin: 0 0 var(--sp-3); }
.ym-modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--c-border); border-radius: 50%; background: #fff; color: var(--c-navy);
  font-size: 24px; line-height: 1;
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.ym-modal__close:hover { background: var(--c-bg-subtle); border-color: var(--c-gold-400); }
.ym-modal__close:focus-visible { outline: none; box-shadow: var(--ring-focus); }
@media (max-width: 480px) {
  .ym-modal__scroll { padding: var(--sp-2) 12px; }
  .ym-modal__dialog { padding: var(--sp-3); }
  .ym-modal__dialog::before { top: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ym-modal__dialog { animation: none; }
}

/* --- Сообщения формы --- */
.form-msg {
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-md);
  font-size: var(--fs-body-s); line-height: 1.5;
}
.form-msg--ok { background: rgba(46,125,91,.1); border: 1px solid rgba(46,125,91,.28); color: #23684c; }
.form-msg--err { background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.28); color: var(--c-error); }
.form-sent .form-msg--ok { display: block; }

/* --- Фильтр каталога скрывает карточки, а не перерисовывает сетку --- */
.ad[hidden], .ad-list [hidden], .adrail__track [hidden] { display: none !important; }

/* --- Пустой результат фильтра --- */
.catalog-empty { margin: 0 0 var(--sp-4); }
.catalog-empty a { text-decoration: underline; }

/* --- Отступ под админ-бар WordPress (виден только редактору) --- */
.admin-bar .header { top: 32px; }
.admin-bar .filter--sticky { top: 98px; }
@media (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}

/* --- Базовая типографика для страниц на редакторе (политика ПДн, блог) --- */
.entry-content { max-width: 76ch; }
.entry-content > * + * { margin-top: var(--sp-2); }
.entry-content h2 { font-size: var(--fs-h3); margin-top: var(--sp-5); }
.entry-content h3 { font-size: var(--fs-h4); margin-top: var(--sp-4); }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
/* Глобальный сброс убирает маркеры у ul — для текстовых страниц возвращаем. */
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: 6px; }
.entry-content a { color: var(--c-navy); text-decoration: underline; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content td, .entry-content th { border: 1px solid var(--c-border); padding: 10px 12px; }