/* ==========================================================================
   ГранитСтрой — design system
   Palette derived from the materials: moss (land), fired clay, bone, white.
   ========================================================================== */

:root {
    /* Surfaces */
    --white:      #FFFFFF;
    --bone:       #F7F5F1;
    --sand:       #EFE9DE;
    --line:       #E4DDD1;
    --line-soft:  #EFEAE1;

    /* Ink — все пары проверены на контраст WCAG AA (≥4.5:1 для текста) */
    --ink:        #14181A;   /* 17.9:1 на белом */
    --ink-2:      #3C433E;   /* 10.2:1 на белом */
    --muted:      #676B63;   /* 5.4:1 на белом, 5.0:1 на bone */

    /* Акцент — один оранжевый, два оттенка светлоты одного и того же тона
       (было два разных оранжевых — яркий и заметно более тёмный/бурый
       «клэй»; теперь один, просто по-разному затемнённый под задачу).

       --accent — яркий, для кнопок, крупных чисел, активных индикаторов
       и акцента в заголовке. На белом даёт ~3.6:1 (белый текст на нём) —
       это ниже 4.5:1, но соответствует порогу WCAG для крупного/жирного
       текста и графических UI-элементов (3:1). Полностью надёжного 4.5:1
       вместе с визуально «ярким» оранжевым физически не бывает: чем ярче
       цвет, тем он ближе по светлоте к белому. Поэтому яркий тон — только
       на крупных/жирных элементах (кнопки, большие цифры, заголовок).

       --moss / --clay — тот же оттенок, что и accent (тот же hue и та же
       насыщенность), просто темнее — ровно настолько, чтобы держать 4.5:1
       на мелком тексте (лейблы, цены, номера шагов, ссылки). Раньше здесь
       был отдельный более тусклый бурый цвет — теперь это буквально alias
       на --accent-2, чтобы в интерфейсе был один узнаваемый оранжевый,
       а не два похожих. Имена переменных сохранены ради остальной
       разметки на 4 страницах. */
    --accent:     #E8590C;   /* белый текст на нём: 3.6:1 — крупный/жирный текст, кнопки */
    --accent-2:   #C24A0A;   /* hover/done, и он же — мелкий текст: 4.9:1 на белом */

    --moss:       var(--accent-2);   /* alias: тот же тон, что accent, просто темнее */
    --moss-2:     #883407;           /* ещё темнее — тёмный конец градиента/hover */
    --moss-tint:  #FBEDE3;
    --clay:       var(--moss);
    --clay-tint:  #FBF0E7;

    /* Type */
    --font:  'Onest', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Space — spacious marketing scale */
    --s1: 0.5rem;
    --s2: 1rem;
    --s3: 1.5rem;
    --s4: 2.5rem;
    --s5: 4rem;
    --s6: 6rem;
    --s7: 8rem;

    /* Shape */
    --r-sm: 8px;
    --r:    14px;
    --r-lg: 22px;
    --r-pill: 999px;

    --shadow: 0 18px 48px rgba(20, 24, 26, 0.08);
    --shadow-sm: 0 6px 18px rgba(20, 24, 26, 0.06);

    --header-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

/* [hidden] обязан побеждать любые display из компонентов (.btn и т.п.) */
[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid var(--moss);
    outline-offset: 3px;
    border-radius: 3px;
}

::selection { background: var(--moss); color: var(--white); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ink);
    color: var(--white);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Layout primitives ---------- */
.wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.wrap--narrow { max-width: 880px; }

.band { padding: var(--s6) 0; }
.band--bone { background: var(--bone); }
.band--tight { padding: var(--s5) 0; }

/* ---------- Type ---------- */
.display {
    font-size: clamp(2.6rem, 7vw, 5.75rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.h2 {
    font-size: clamp(1.9rem, 4.2vw, 3.25rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.028em;
}

.h3 {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.018em;
}

.h4 {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.lead {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink-2);
}

.muted { color: var(--muted); }
.accent { color: var(--moss); }

/* Monospace utility — technical annotation */
.label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.label--moss { color: var(--moss); }
.label--clay { color: var(--clay); }

.num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Section heading block */
.head { max-width: 760px; margin-bottom: var(--s4); }
.head > .label { display: block; margin-bottom: var(--s2); }
.head > .lead { margin-top: var(--s2); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 52px;
    padding: 0 1.6rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.2s ease;
    will-change: transform;
}

.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-2); }

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--bone); }

.btn--clay { background: var(--accent); color: var(--white); }
.btn--clay:hover { background: var(--accent-2); }

/* 44px — минимальная зона нажатия по WCAG, ниже опускаться нельзя */
.btn--sm { min-height: 44px; padding: 0 1.1rem; font-size: 0.9375rem; }
.btn--block { width: 100%; }

.btn svg { flex-shrink: 0; }

/* ---------- Header ---------- */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease;
}

.header.is-stuck { border-bottom-color: var(--line-soft); }

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--s3);
    height: var(--header-h);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.03em;
    flex-shrink: 0;
    padding: 0.55rem 0;   /* доводит зону нажатия до 44px */
}

.logo__mark { color: var(--moss); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.logo:hover .logo__mark { transform: rotate(-8deg); }

.nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

/* Подчёркивание «дорисовывается» слева направо вместо простой смены
   цвета — приём того же семейства, что и линия-нить у шагов эскроу. */
.nav__link {
    position: relative;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-2);
    transition: color 0.18s ease;
    padding: 0.4rem 0;
    white-space: nowrap;
}
.nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--moss);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__link:hover { color: var(--moss); }
.nav__link:hover::after { transform: scaleX(1); }

/* Кнопка внутри nav нужна только в мобильном меню */
.nav__cta { display: none; }

.header__phone {
    font-family: var(--mono);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.burger {
    display: none;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border-radius: var(--r-sm);
}
.burger span {
    display: block;
    width: 20px; height: 1.5px;
    background: var(--ink);
    position: relative;
    transition: background-color 0.2s ease;
}
.burger span::before,
.burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px; height: 1.5px;
    background: var(--ink);
    transition: transform 0.25s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero + анимация строительства ----------
   Заголовок и анимация объединены в одну секцию: короткий заголовок
   сверху, стройка — центральный визуальный элемент под ним. */
.hero {
    padding: clamp(1.1rem, 3vw, 1.75rem) 0 var(--s4);
    background: var(--white);
}

.hero__top {
    max-width: 620px;
    margin: 0 auto clamp(0.9rem, 2.4vw, 1.4rem);
    text-align: center;
}

/* Заголовок сильно уменьшен и укорочен: одна строка вместо трёх,
   чтобы вместе с кнопками и анимацией уместиться в первый экран. */
.hero__title {
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    margin-bottom: 0.5rem;
}
.hero__title em {
    font-style: normal;
    color: var(--accent);
}

.hero__sub {
    font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 44ch;
    margin: 0 auto;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: clamp(0.85rem, 2vw, 1.25rem);
}

/* Строка с итоговыми цифрами под анимацией — вместо тяжёлых карточек */
.hero__stats { justify-content: center; text-align: center; }
.hero__stats > div { flex: 0 1 210px; }

/* Фирменный водяной знак в hero второстепенных страниц — свой сюжет под
   каждую страницу (метка маршрута / карта с метками / кавычки), очень
   бледный контурный рисунок в углу. Модификатор, а не правка .hero
   целиком: на главной внутри .hero — пинящийся канвас стройки, и
   overflow:hidden на общем контейнере сломал бы его pin. */
.hero--mark { position: relative; overflow: hidden; }
.hero--mark .hero__mark {
    position: absolute;
    top: 50%;
    right: clamp(-30px, 2vw, 40px);
    transform: translateY(-50%);
    width: clamp(170px, 20vw, 280px);
    height: auto;
    color: var(--moss);
    opacity: 0.07;
    pointer-events: none;
}
@media (max-width: 900px) { .hero--mark .hero__mark { display: none; } }

/* ---------- Build sequence (signature) ----------
   Пиннится и скрабится только этот блок (канвас + плашка с этапами под
   ним) — заголовок выше в пин не входит. Пропорция канваса задана через
   aspect-ratio, СОВПАДАЮЩУЮ с реальной пропорцией кадров (1600×1000 = 8:5) —
   поэтому «cover»-масштабирование в main.js ничего не обрезает: форма
   контейнера и форма кадра идентичны. Размер считается от высоты экрана
   (см. .build__canvas-wrap ниже), а не фиксированным max-width, — так
   анимация занимает весь доступный по высоте пин, оставаясь при этом
   в пределах экрана целиком, вместе с плашкой этапов под ней. */
.build__stage {
    position: relative;
    padding: clamp(0.6rem, 1.5vw, 1rem) 0;
}

/* Ширина канваса считается от бюджета высоты экрана (100vh за вычетом
   шапки, места под плашку с этапами и паддингов), переведённого в ширину
   через саму пропорцию 8:5, — а не наоборот. Так картинка сама становится
   настолько большой, насколько позволяет высота экрана, но никогда не
   выталкивает низ плашки за пределы viewport во время пина. Вычитаем
   --header-h — пин теперь стартует не у самого верха окна, а под липкой
   шапкой (см. main.js), иначе бюджет посчитан на весь экран, а верх
   канваса на деле перекрыт шапкой. calc() с умножением vh на коэффициент
   1.6 (= 8/5) и есть перевод «высота бюджета» → «ширина». */
.build__canvas-wrap {
    position: relative;
    width: min(100%, 1040px, max(260px, calc((100vh - var(--header-h) - 16px - 280px) * 1.6)));
    aspect-ratio: 8 / 5;
    margin: 0 auto;
    overflow: hidden;
    /* Собственный фон кадров видео (не белый) — замерено пипеткой по углам
       кадра. Совпадает с ним, чтобы край канваса не давал цветового шва. */
    background: #FBFBFA;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.build__canvas { width: 100%; height: 100%; display: block; }

/* Placeholder shown until real frames are dropped in */
.build__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
    background:
        repeating-linear-gradient(
            45deg,
            var(--bone) 0 12px,
            var(--white) 12px 24px
        );
}

.build__placeholder svg { color: var(--moss); opacity: 0.5; }
.build__placeholder p { max-width: 34ch; font-size: 0.9375rem; color: var(--muted); }
.build__placeholder code {
    font-family: var(--mono);
    font-size: 0.8125rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.35rem 0.6rem;
    color: var(--ink-2);
}

/* Плашка с этапами — отдельная карточка под анимацией, в обычном потоке.
   Раньше лежала стеклом поверх кадра; теперь не перекрывает картинку,
   поэтому фон снова непрозрачный, как у остальных карточек на сайте. */
.build__overlay {
    width: 100%;
    max-width: 1040px;
    margin: clamp(0.7rem, 2vw, 1.1rem) auto 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: clamp(0.8rem, 2vw, 1.1rem) clamp(1rem, 2.5vw, 1.4rem);
}

.build__caption-title {
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.build__caption-text {
    font-size: 0.8125rem;
    color: var(--ink-2);
    margin-top: 0.25rem;
    max-width: 60ch;
    line-height: 1.45;
    /* Фиксируем высоту в 2 строки — описания этапов разной длины
       не должны двигать разметку при переключении по скроллу. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stage rail — 3 колонки × 2 ряда всегда: блок теперь узкий (max 640px),
   шести колонкам в нём тесно независимо от ширины экрана. */
.rail {
    margin-top: clamp(0.6rem, 1.6vw, 0.85rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem 0.5rem;
}

.rail__item {
    padding-top: 0.5rem;
    border-top: 2px solid var(--line);
    transition: border-color 0.35s ease, color 0.35s ease;
}

.rail__item.is-active { border-top-color: var(--accent); }
.rail__item.is-done   { border-top-color: var(--accent-2); }

.rail__n {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--muted);
    transition: color 0.35s ease;
}
.rail__item.is-active .rail__n { color: var(--moss); }

.rail__name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted);
    margin-top: 0.15rem;
    transition: color 0.35s ease;
}
.rail__item.is-active .rail__name { color: var(--ink); }

/* ---------- Bento advantages ---------- */
.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--s2);
}

.tile {
    grid-column: span 6;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s3);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.tile:hover {
    border-color: var(--moss);
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.tile--wide { grid-column: span 12; }

/* Карточка с сильнейшим аргументом (50 лет) выделена тёплой подложкой и
   ярким контуром — не сплошной заливкой. На сплошном ярком фоне обычный
   текст карточки (описание) физически не может держать 4.5:1: чем ярче
   цвет, тем меньше у него контраста с любым текстом, включая белый.
   Крупное число остаётся ярким текстом — для него, как для крупного
   шрифта, достаточно порога 3:1, который яркий акцент проходит. */
.tile--feature {
    grid-column: span 6;
    background: var(--moss-tint);
    border-color: var(--accent);
}
.tile--feature:hover { border-color: var(--accent-2); }
.tile--feature .tile__value,
.tile--feature .tile__icon { color: var(--accent); }

.tile__value {
    font-family: var(--mono);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tile__title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.tile__text { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.6; }

.tile__icon {
    width: 34px; height: 34px;
    color: var(--moss);
}

/* ---------- Counters ---------- */
.counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.counter { background: var(--white); padding: var(--s3) 1.35rem; }

.counter__value {
    font-family: var(--mono);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.counter__label {
    font-size: 0.875rem;
    color: var(--muted);
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* ---------- Cards grid (packages, tech, projects) ---------- */
.grid {
    display: grid;
    gap: var(--s2);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s3);
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    border-color: var(--moss);
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.card--flat:hover { transform: none; box-shadow: none; }

.card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.card__price {
    font-family: var(--mono);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--clay);
    white-space: nowrap;
}

.card__list { margin-top: 1rem; display: grid; gap: 0.5rem; }

.card__list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.card__list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--moss);
}

.card__foot { margin-top: auto; padding-top: var(--s3); }

/* Номер стадии у комплектаций (см. #komplektacii): три карточки — не три
   случайных пакета, а буквально три стадии одной стройки по порядку. */
.card__n {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.6rem;
}

.card--feature { background: var(--moss-tint); border-color: var(--accent); }
.card--feature:hover { border-color: var(--accent-2); }
.card--feature .card__price,
.card--feature .card__n { color: var(--accent); }

/* Material card (technologies) — bento: одна крупная карточка слева
   на две строки, остальные четыре — сеткой 2×2 справа. Тот же приём,
   что и .tile--feature в блоке преимуществ: тёплая подложка + цветной
   контур вместо сплошной заливки (иначе мелкий текст не держит 4.5:1). */
.materials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--s2);
}

.material {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.material:hover { border-color: var(--moss); transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.material__n {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.material__media { display: flex; justify-content: center; margin: 0.5rem 0 0.75rem; }
.material__media img { width: 100%; max-width: 148px; height: auto; }

.material__name { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.material__text { font-size: 0.875rem; color: var(--muted); line-height: 1.5; margin-top: auto; }

.material--feature {
    grid-column: 1;
    grid-row: 1 / span 2;
    background: var(--moss-tint);
    border-color: var(--accent);
    align-items: center;
    text-align: center;
    padding: var(--s4) var(--s3) var(--s3);
}
.material--feature:hover { border-color: var(--accent-2); }
.material--feature .material__n { color: var(--accent); }
.material--feature .material__media img { max-width: 220px; }
.material--feature .material__name { font-size: 1.25rem; }
.material--feature .material__text { max-width: 30ch; margin: auto auto 0; }

/* ---------- Split feature (land selection) ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    align-items: center;
}

.split__media {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bone);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media iframe { width: 100%; height: 100%; border: 0; display: block; }

.media-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.875rem;
}
.media-ph svg { color: var(--moss); opacity: 0.45; }

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
}

.stat__value {
    font-family: var(--mono);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--accent);
}
.stat__label { font-size: 0.875rem; color: var(--muted); margin-top: 0.35rem; }

/* ---------- Escrow steps ----------
   Деньги здесь буквально идут по цепочке: банк → мы → приёмка этапа.
   Поэтому шаги — не три независимые карточки, а одна нить с метками,
   как на схеме процесса, а не как три случайных плюса «почему мы». */
.steps { display: grid; gap: var(--s2); grid-template-columns: repeat(3, 1fr); position: relative; }

.steps::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--line);
}

.step {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: calc(var(--s3) + 10px) var(--s3) var(--s3);
}

.step__n {
    position: absolute;
    top: -16px;
    left: var(--s3);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--white);
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--white);
    margin-bottom: 0;
}
/* На секции с бежевым фоном (band--bone) ободок бейджа должен совпадать
   с фоном секции, а не с белым — иначе вокруг кружка виден чужой квадрат. */
.band--bone .step__n { box-shadow: 0 0 0 4px var(--bone); }

.step__title { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.step__text { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.55; }

/* ---------- Programs table ---------- */
.progs {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--white);
}

.prog {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
    gap: 1rem;
    padding: 1.1rem var(--s3);
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
}
.prog:last-child { border-bottom: none; }
.prog:hover { background: var(--bone); }

.prog__name { font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; }
.prog__cell { font-family: var(--mono); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.prog__rate { color: var(--moss); font-weight: 600; }
.prog__note { font-size: 0.8125rem; color: var(--muted); }

.prog--head {
    background: var(--bone);
    border-bottom: 1px solid var(--line);
}
.prog--head:hover { background: var(--bone); }
.prog--head > * {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Разворачивающаяся часть таблицы программ — скрыта до клика по .progs__toggle */
.progs__more { height: 0; overflow: hidden; }

.progs__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    margin-top: 0.75rem;
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--moss);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.progs__toggle:hover { border-color: var(--moss); background: var(--moss-tint); }

.progs__toggle-icon { transition: transform 0.3s ease; flex-shrink: 0; }
.progs__toggle[aria-expanded="true"] .progs__toggle-icon { transform: rotate(180deg); }

/* ---------- FAQ ----------
   Раньше — голый список с плюсиками, неотличимый от дефолтного
   аккордеона любого конструктора. Левая полоска «дорисовывается» на
   открытом вопросе тем же жестом, что подчёркивание в шапке и линия
   у шагов эскроу — это не третий случайный приём, а один и тот же язык. */
.faq { border-top: 1px solid var(--line); }

.faq__item {
    position: relative;
    padding-left: 1.1rem;
    border-bottom: 1px solid var(--line);
    transition: background-color 0.2s ease;
}
.faq__item::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 2px;
    background: var(--moss);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq__item:has(.faq__q[aria-expanded="true"])::before,
.faq__item:has(.faq__q:hover)::before {
    transform: scaleY(1);
}

.faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: 1.4rem 0;
    text-align: left;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    min-height: 52px;
    transition: color 0.2s ease;
}
.faq__q:hover { color: var(--moss); }

.faq__icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    color: var(--moss);
    transition: transform 0.3s ease;
}
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }

.faq__a {
    overflow: hidden;
    height: 0;
}

.faq__a-inner {
    padding-bottom: 1.4rem;
    max-width: 70ch;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ink-2);
}

/* ---------- Quiz ---------- */
.quiz {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 4vw, var(--s4));
    box-shadow: var(--shadow);
}

.quiz__bar {
    height: 3px;
    background: var(--line);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-bottom: var(--s3);
}
.quiz__bar-fill {
    height: 100%;
    width: 25%;
    background: var(--accent);
    border-radius: var(--r-pill);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* fieldset тянет за собой рамку и отступы браузера по умолчанию — снимаем */
.quiz__step {
    display: none;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.quiz__step.is-active { display: block; }

.quiz__step > legend {
    display: block;
    padding: 0;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.quiz__q {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0.5rem 0 var(--s3);
}

.opts { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.opt {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 52px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.opt:hover { border-color: var(--accent); background: var(--moss-tint); }
/* Тинт + цветной контур вместо сплошной заливки — тот же аргумент,
   что и у .tile--feature: на ярком фоне мелкий текст не держит 4.5:1. */
.opt.is-selected {
    border-color: var(--accent);
    background: var(--moss-tint);
    color: var(--moss);
    font-weight: 600;
}

.quiz__nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--s3);
}

.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }

.field label { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }

.field input {
    min-height: 52px;
    padding: 0 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 1rem;
    font-family: var(--font);
    background: var(--white);
    color: var(--ink);
    transition: border-color 0.2s ease;
}
.field input:focus { border-color: var(--moss); outline: none; box-shadow: 0 0 0 3px var(--moss-tint); }
.field input::placeholder { color: #A8ABA4; }

.field__hint { font-size: 0.8125rem; color: var(--muted); }
.field__error { font-size: 0.8125rem; color: var(--clay); display: none; }
.field.has-error input { border-color: var(--clay); }
.field.has-error .field__error { display: block; }

.consent {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.8125rem;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: var(--s2);
}
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--moss); flex-shrink: 0; }
.consent a { color: var(--moss); text-decoration: underline; text-underline-offset: 2px; }

.quiz__done { display: none; text-align: center; padding: var(--s3) 0; }
.quiz__done.is-active { display: block; }
.quiz__done svg { color: var(--moss); margin: 0 auto 1rem; }

/* ---------- CTA band ----------
   Раньше на сайте было два визуально одинаковых чёрных блока подряд —
   выглядело как один и тот же компонент, вставленный дважды. Теперь
   тёмный (--ink) остаётся за «живым» приглашением на стройку (вечерний,
   приземлённый тон), а расчёт стоимости — тёплый терракотовый (.cta-band
   --accent), ближе к материалу, чем к «корпоративному чёрному».

   Композиция — текст слева, кнопки справа, разделены тонкой линией:
   вместо водяного знака в углу пространство работает по делу, а не
   декоративно. На узких экранах строка переносится и колонки просто
   складываются друг под друга — flex-wrap делает это без медиазапроса. */
.cta-band {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3rem);
    background: var(--ink);
    color: var(--white);
    border-radius: var(--r-lg);
    padding: clamp(2rem, 5vw, var(--s5));
}

.cta-band__body { flex: 1 1 340px; }

.cta-band .h2 { color: var(--white); }
.cta-band__text { color: rgba(255, 255, 255, 0.68); margin-top: var(--s2); max-width: 46ch; }

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.75rem;
    flex: 0 1 auto;
    padding-left: clamp(1.5rem, 4vw, 3rem);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 640px) {
    .cta-band__actions { padding-left: 0; border-left: 0; }
}

.cta-band .btn--ghost {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.28);
}
.cta-band .btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }

.cta-band--accent { background: linear-gradient(135deg, var(--moss) 0%, var(--moss-2) 100%); }
.cta-band--accent .btn--clay { background: var(--white); color: var(--moss-2); }
.cta-band--accent .btn--clay:hover { background: rgba(255, 255, 255, 0.88); }

/* ---------- Footer ---------- */
.footer {
    background: var(--bone);
    padding: var(--s5) 0 var(--s3);
    border-top: 1px solid var(--line);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--s4);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--line);
}

.footer__title {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem;
}

.footer__list { display: grid; gap: 0.6rem; }
.footer__list a { font-size: 0.9375rem; color: var(--ink-2); transition: color 0.18s ease; }
.footer__list a:hover { color: var(--moss); }

.footer__legal {
    padding-top: var(--s3);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem var(--s4);
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--muted);
}

.footer__req { font-family: var(--mono); font-size: 0.75rem; line-height: 1.7; color: var(--muted); }

/* ---------- Служебный баннер (убрать перед публикацией) ---------- */
.notice {
    background: var(--clay-tint);
    border: 1px dashed var(--clay);
    border-radius: var(--r);
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin-bottom: var(--s4);
}
.notice strong { color: var(--clay); }

/* ---------- Отзывы ---------- */
.review {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s3);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review__rating { display: flex; gap: 0.2rem; }
.review__rating svg { width: 17px; height: 17px; fill: var(--clay); }

.review__text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    flex-grow: 1;
}

.review__meta { padding-top: 0.9rem; border-top: 1px solid var(--line-soft); }
.review__author { font-weight: 600; font-size: 0.9375rem; }
.review__src {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.25rem;
    line-height: 1.5;
}

/* ---------- Карта объектов ---------- */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: var(--s3);
}

.legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--ink-2);
}

.legend__dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Три статуса карты должны отличаться визуально — это не брендовый акцент,
   а функциональная легенда, поэтому цвета заданы отдельно от --moss/--clay
   (после унификации акцента в оранжевый оба стали бы одинаковыми). */
.legend__dot--done { background: var(--moss); }
.legend__dot--wip  { background: #3B6E91; }
.legend__dot--expo { background: #D9A521; }

/* Ссылка-обёртка на карту: сама картинка отдаётся Static API в разрешении
   максимум 650×366 (бесплатный лимит без ключа), поэтому ограничиваем
   ширину блока — иначе растянутая на всю .wrap картинка размывается. */
.map-slot__link {
    display: block;
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--r-lg);
    transition: opacity 0.2s ease;
}
.map-slot__link:hover { opacity: 0.92; }

.map-slot {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--white);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.map-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Карточка объекта ---------- */
.object {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.object:hover {
    border-color: var(--moss);
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.object__media {
    aspect-ratio: 4 / 3;
    background: var(--bone);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.object__media img { width: 100%; height: 100%; object-fit: cover; }

.object__body {
    padding: var(--s3);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.specs { display: grid; gap: 0.5rem; margin-top: 0.35rem; }

.spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line-soft);
}
.spec:last-child { border-bottom: none; padding-bottom: 0; }

.spec dt { color: var(--muted); }
.spec dd { font-weight: 500; text-align: right; }

/* ---------- Reveal animation base ----------
   Контент виден по умолчанию. Скрывает его только скрипт — и только после
   того, как убедился, что IntersectionObserver доступен. Если он не
   поддерживается, скрипт отключён или включён режим уменьшенной анимации —
   блоки просто видны. Ровно эта ошибка сейчас обнуляет счётчики на текущем
   сайте: не повторяем.

   .reveal--pending / .reveal--in вместо GSAP ScrollTrigger: раньше позиция
   триггера считалась один раз при загрузке и не переживала более поздний
   pin хиро-секции (он раздвигает документ уже после того, как догрузится
   первый кадр видео). На медленном интернете пользователь успевал
   проскроллить мимо ещё до пина — once:true гас триггер по устаревшим
   координатам, и блок оставался невидимым навсегда. IntersectionObserver
   следит за реальным положением элемента через компоновщик браузера, а не
   за один раз посчитанными пикселями — поэтому не зависит от того, когда
   именно доедет пин, кадры или шрифты. */
.reveal { opacity: 1; }

.reveal--pending {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal--pending.reveal--in {
    opacity: 1;
    transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .split { grid-template-columns: 1fr; gap: var(--s4); }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }

    .materials { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .material--feature { grid-column: 1 / -1; grid-row: auto; }
}

/* Русские подписи в меню длиннее английских — переключаемся на бургер раньше */
@media (max-width: 1120px) {
    .nav { display: none; }
    .header__phone { display: none; }
    .header .btn { display: none; }
    .burger { display: flex; }

    .nav.is-open {
        display: flex;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: var(--s2) 24px var(--s3);
        background: var(--white);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }
    .nav.is-open .nav__link {
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--line-soft);
        font-size: 1rem;
    }
    .nav.is-open .nav__cta { display: block; margin-top: var(--s2); }
    .nav.is-open .nav__cta .btn { display: inline-flex; width: 100%; }

    .counters { grid-template-columns: repeat(2, 1fr); }
    /* Соединяющая линия рассчитана на один ряд из 3 карточек — при переходе
       в один столбец она больше не проходит через центры бейджей, убираем. */
    .steps { grid-template-columns: 1fr; }
    .steps::before { display: none; }

    .prog {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 1rem;
        padding: var(--s2) var(--s3);
    }
    .prog--head { display: none; }
    .prog__note { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    :root { --s6: 4rem; --s5: 3rem; }
    .wrap { padding: 0 20px; }
    .tile, .tile--feature, .tile--wide { grid-column: span 12; }
    .grid--3, .grid--2 { grid-template-columns: 1fr; }
    .materials { grid-template-columns: 1fr; }
    .material--feature { grid-column: 1; }
    .footer__grid { grid-template-columns: 1fr; gap: var(--s3); }
    /* Высоту канваса больше не переопределяем — формула в .build__canvas-wrap
       сама даёт правильную высоту под любую ширину, включая мобильную. */
    .build__overlay { padding: 0.7rem 0.85rem; }
    /* На узком экране описание этапа убираем — карточка под кадром и так
       вписывается в пин по высоте, но лишний текст его удлиняет. */
    .build__caption-text { display: none; }
    .hero__actions .btn { width: 100%; }
    .stat-row { gap: var(--s3); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- No JS fallback ---------- */
.no-js .reveal { opacity: 1; }
.no-js .faq__a { height: auto; }
.no-js .quiz__step { display: block; }
.no-js .progs__more { height: auto; }
.no-js .progs__toggle { display: none; }

/* ---------- Print ---------- */
@media print {
    .header, .quiz, .cta-band, .build { display: none; }
    body { color: #000; background: #fff; }
}