/* Собрано автоматически из слоёв. Не редактируйте этот файл —
 * правьте 01-tokens.css … 05-pages.css и запускайте tools/build-css.sh
 * Сборка: 2026-09-04 17:05 */

/* ==========================================================================
   ШРИФТЫ — сгенерировано tools/fetch-fonts.sh, НЕ РЕДАКТИРОВАТЬ РУКАМИ
   Правки вносите в скрипт и перегенерируйте.

   На каждое начертание приходится два файла: кириллический и латинский
   поднаборы. Браузер скачивает только те, символы которых встретились
   на странице, — за это отвечает unicode-range.

   font-display: swap — текст показывается системным шрифтом сразу
   и подменяется, когда загрузится свой. Вариант block дал бы невидимый
   текст на несколько секунд: хуже и для пользователя, и для метрики.
   ========================================================================== */

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-500-cyrillic.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-500-latin.woff2') format('woff2');
  font-weight: 500;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-600-cyrillic.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-600-latin.woff2') format('woff2');
  font-weight: 600;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-700-cyrillic.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-700-latin.woff2') format('woff2');
  font-weight: 700;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest-400-cyrillic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest-400-latin.woff2') format('woff2');
  font-weight: 400;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest-500-cyrillic.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest-500-latin.woff2') format('woff2');
  font-weight: 500;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-400-cyrillic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-500-cyrillic.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 500;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ «Точка Опоры»
   Источник истины: README хендоффа, раздел Design Tokens.
   Значения перенесены буква в букву. Менять их можно только вместе
   с дизайн-системой — иначе разъедется вся вёрстка.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     ЦВЕТА
     Палитра намеренно короткая: две светлые плоскости, две тёмные,
     один акцент. Правило дизайн-системы: не больше двух фоновых цветов
     на страницу, латунь никогда не заливает большие плоскости.
     ---------------------------------------------------------------------- */
  --c-graphite:        #1C2024;   /* тёмная база: шапка, футер, тёмные секции, текст на светлом */
  --c-graphite-deep:   #14171A;   /* секция «Склон — не препятствие» */
  --c-graphite-light:  #2E3439;   /* подложка hero до загрузки фото */
  --c-parchment:       #F2EFEA;   /* основной светлый фон, текст на тёмном */
  --c-sand:            #D9D2C7;   /* второй светлый фон: чередование секций */
  --c-brass:           #B8873F;   /* единственный акцент */
  --c-brass-dark:      #A2762F;   /* оставлен для совместимости, новых применений не заводить */
  --c-brass-light:     #C99B57;   /* ховер основной кнопки: светлее базовой латуни */
  --c-brass-link:      #745528;   /* ссылки и акцент на светлом фоне */
  --c-brass-on-pine:   #F0BE76;   /* акцент на хвойно-морском фоне */

  /* Почему три оттенка вместо одного.
     Контраст считается к фону, а фонов у нас четыре. Прежняя #A2762F давала
     на пергаменте 3.54 при норме WCAG AA 4.5 — то есть каждая ссылка в тексте
     на всём сайте не проходила по доступности. На песке было ещё хуже.
     #745528 даёт 5.96 на пергаменте и 4.55 на песке — проходит на обоих.
     Латунь на хвойном фоне инвестиционного блока давала 2.43; #F0BE76 — 4.56.
     Ховер кнопки раньше ЗАтемнял фон, и подпись графитом переставала
     проходить (4.03); теперь фон осветляется, контраст растёт до 6.4. */
  --c-pine:            #2F5A52;   /* вторая тема — только инвестиционный контур */
  --c-brick:           #9B3B2F;   /* ошибка */
  --c-brick-bright:    #C0442E;   /* запретительные пометки */

  /* Прозрачности вместо новых цветов — так палитра не расползается.
     Текст на СВЕТЛОМ фоне: */
  --c-on-light-2:      rgba(28, 32, 36, 0.7);    /* второй уровень */
  --c-on-light-3:      rgba(28, 32, 36, 0.67);   /* третий уровень; 0.56 не проходило AA на песке */
  --c-border-light:    rgba(28, 32, 36, 0.12);
  --c-border-light-2:  rgba(28, 32, 36, 0.2);    /* усиленная граница */

  /* Текст на ТЁМНОМ фоне: */
  --c-on-dark-2:       rgba(242, 239, 234, 0.8);
  --c-on-dark-3:       rgba(242, 239, 234, 0.56);
  --c-on-dark-4:       rgba(242, 239, 234, 0.5);   /* было 0.4 — 3.45 на графите, ниже AA */
  --c-on-pine-4:       rgba(242, 239, 234, 0.74);  /* хвойный фон светлее графита, нужна большая доля */
  --c-border-dark:     rgba(242, 239, 234, 0.14);
  --c-border-pine:     rgba(242, 239, 234, 0.2); /* граница на хвойно-морском */

  /* Акцент с прозрачностью — подложки и ховер-границы карточек */
  --c-brass-a40:       rgba(184, 135, 63, 0.4);
  --c-brass-a12:       rgba(184, 135, 63, 0.12);

  /* ----------------------------------------------------------------------
     ТИПОГРАФИКА
     Три гарнитуры, самохостинг (см. 02-base.css, блок @font-face).
     ---------------------------------------------------------------------- */
  --f-display: 'Unbounded', system-ui, sans-serif;       /* заголовки, крупные цифры */
  --f-text:    'Onest', system-ui, -apple-system, sans-serif; /* весь текст, кнопки, поля */
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;     /* эйбрау, ТТХ, цифры, метки */

  /* Шкала. Адаптив через clamp: размер тянется от мобильного к десктопу
     без брейкпоинтов — меньше правил и нет скачков на промежуточных ширинах. */
  --fs-display: clamp(38px, 5.2vw, 72px);
  --fs-h1:      clamp(30px, 4.2vw, 56px);
  --fs-h2:      clamp(26px, 3.2vw, 40px);
  --fs-h3:      clamp(21px, 2.4vw, 28px);
  --fs-h4:      clamp(17px, 1.5vw, 21px);
  --fs-h5:      clamp(15px, 1.15vw, 17px);
  --fs-lead:    20px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-mono-l:  20px;
  --fs-mono-m:  14px;
  --fs-mono-s:  12px;

  /* Интерлиньяж задан отдельно: у заголовков он плотный, у текста — воздушный */
  --lh-display: 1.06;
  --lh-h1:      1.08;
  --lh-h2:      1.15;
  --lh-h3:      1.2;
  --lh-h4:      1.34;
  --lh-h5:      1.3;
  --lh-lead:    32px;
  --lh-body:    28px;
  --lh-small:   24px;
  --lh-mono-m:  20px;
  --lh-mono-s:  16px;

  /* Трекинг. Отрицательный у крупных заголовков — иначе Unbounded
     на больших кеглях выглядит разреженным. */
  --ls-display: -0.03em;
  --ls-h1:      -0.02em;
  --ls-h2:      -0.02em;
  --ls-h3:      -0.01em;
  --ls-mono-m:  0.04em;
  --ls-mono-s:  0.06em;

  /* ----------------------------------------------------------------------
     СЕТКА И РИТМ
     ---------------------------------------------------------------------- */
  --container:      1360px;  /* максимальная ширина контента */
  --gutter:         32px;    /* внешние поля контейнера */
  --grid-gap:       24px;    /* стандартный разрыв 12-колоночной сетки */
  --grid-gap-lg:    64px;    /* крупный разрыв между смысловыми блоками */

  /* Вертикальный шаг между секциями. Ровно три значения — редакция
     макетов от 13.08.2026 («Ревизия отступов» в README хендоффа).
     Больше 160px не применяется НИГДЕ: если между секциями просится
     больше, проблема в высоте колонок, а не в отступе.

     Внешние margin-top между секциями запрещены — они складываются
     с паддингами и дают двойной воздух. Только padding внутри секции. */
  --space-section-dense: 96px;   /* плотные секции, продолжение начатой темы */
  --space-section: 128px;        /* значение по умолчанию */
  --space-section-wide: 160px;   /* смена темы, ключевые CTA */

  /* Отступ для липкой заголовочной колонки: высота шапки плюс запас.
     Тем же значением задан scroll-padding-top в 02-base.css — они
     обязаны совпадать, иначе якорь уедет под шапку. */
  --sticky-top: 96px;

  /* Внутренние отступы — шкала кратна 4px */
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* ----------------------------------------------------------------------
     РАДИУСЫ, ТЕНИ, ГРАНИЦЫ
     Карточки и секции — с прямыми углами. Скругление только у элементов
     управления, и то минимальное: 2px.
     ---------------------------------------------------------------------- */
  --radius:        2px;
  --shadow-hover:  0 12px 32px rgba(28, 32, 36, 0.12);
  --border-w:      1px;

  /* ----------------------------------------------------------------------
     РАЗМЕРЫ ЭЛЕМЕНТОВ УПРАВЛЕНИЯ
     ---------------------------------------------------------------------- */
  --btn-h:         56px;   /* стандартная кнопка */
  --btn-h-header:  48px;   /* кнопка в шапке */
  --btn-h-compact: 44px;   /* компактная: фильтры, шаги квиза */
  --btn-px:        32px;   /* горизонтальные поля кнопки */
  --field-h:       56px;   /* поле ввода */
  --checkbox:      20px;

  /* ----------------------------------------------------------------------
     ДВИЖЕНИЕ
     Три длительности, каждая под свой класс изменений.
     ---------------------------------------------------------------------- */
  --t-color:  150ms;                    /* фон и граница: кнопки, чипы */
  --t-card:   200ms ease-out;           /* ховер карточки */
  --t-panel:  300ms ease-in-out;        /* аккордеон, прогресс квиза, поворот «+» */

  /* ----------------------------------------------------------------------
     СЛОИ
     Единая шкала, чтобы не появлялось z-index: 99999.
     ---------------------------------------------------------------------- */
  --z-isoline: 0;    /* декоративные изолинии — под контентом */
  --z-content: 1;
  --z-header:  20;   /* липкая шапка */
  --z-overlay: 50;   /* мобильное меню */
  --z-lightbox: 100;
}

/* ==========================================================================
   ТЕМЫ СЕКЦИЙ
   Вместо того чтобы в каждой секции руками писать цвет фона и три цвета
   текста, секция получает класс темы, а компоненты внутри читают
   семантические переменные. Один и тот же чанк карточки одинаково корректно
   выглядит и на пергаменте, и на графите, и на хвойно-морском.
   ========================================================================== */

/* Светлая — основная */
.t-light {
  --bg:        var(--c-parchment);
  --fg:        var(--c-graphite);
  --fg-2:      var(--c-on-light-2);
  --fg-3:      var(--c-on-light-3);
  --border:    var(--c-border-light);
  --border-2:  var(--c-border-light-2);
  --accent:    var(--c-brass-link);   /* на светлом фоне нужна сильно тёмная латунь: см. комментарий к токенам */
}

/* Песочная — для чередования светлых секций подряд */
.t-sand {
  --bg:        var(--c-sand);
  --fg:        var(--c-graphite);
  --fg-2:      var(--c-on-light-2);
  --fg-3:      var(--c-on-light-3);
  --border:    var(--c-border-light);
  --border-2:  var(--c-border-light-2);
  --accent:    var(--c-brass-link);
}

/* Тёмная.
   Список селекторов, а не один класс: hero, шапка, футер и hero страницы
   стиля задают свой фон сами, но компонентам внутри них нужны те же
   переменные. Без этого кнопка-призрак в hero берёт границу из светлой
   темы — тёмное на тёмном, то есть невидимое. Проверено на макете. */
.t-dark,
.hero,
.style-hero,
.site-header,
.site-footer {
  --bg:        var(--c-graphite);
  --fg:        var(--c-parchment);
  --fg-2:      var(--c-on-dark-2);
  --fg-3:      var(--c-on-dark-3);
  --fg-4:      var(--c-on-dark-4);
  --border:    var(--c-border-dark);
  --border-2:  var(--c-border-dark);
  --accent:    var(--c-brass);
}

/* Тёмная глубокая — только секция «Склон — не препятствие» */
.t-deep {
  --bg:        var(--c-graphite-deep);
  --fg:        var(--c-parchment);
  --fg-2:      var(--c-on-dark-2);
  --fg-3:      var(--c-on-dark-3);
  --fg-4:      var(--c-on-dark-4);
  --border:    var(--c-border-dark);
  --border-2:  var(--c-border-dark);
  --accent:    var(--c-brass);
}

/* Хвойно-морская — ТОЛЬКО инвестиционный контур.
   Дизайн-система прямо запрещает использовать её где-либо ещё:
   этот цвет — маркер того, что пользователь в разделе для инвесторов. */
.t-pine {
  --bg:        var(--c-pine);
  --fg:        var(--c-parchment);
  --fg-2:      var(--c-on-dark-2);
  --fg-3:      var(--c-on-dark-3);
  --fg-4:      var(--c-on-pine-4);
  --border:    var(--c-border-pine);
  --border-2:  var(--c-border-pine);
  --accent:    var(--c-brass-on-pine);
}

/* Тема применяет свои цвета к секции */
.t-light, .t-sand, .t-dark, .t-deep, .t-pine {
  background-color: var(--bg);
  color: var(--fg);
}

/* ==========================================================================
   БАЗА: шрифты, сброс, типографика, контейнер, сетка
   ========================================================================== */

/* --------------------------------------------------------------------------
   ШРИФТЫ
   Объявления @font-face вынесены в 00-fonts.css — он генерируется
   скриптом tools/fetch-fonts.sh вместе с самими файлами шрифтов.
   Руками этот файл не правится: перезапустите скрипт и пересоберите CSS.

   Почему самохостинг, а не Google Fonts: лишнее соединение к чужому
   домену на критическом пути рендеринга бьёт по LCP, CDN нестабильно
   доступен из РФ, а запрос к нему передаёт IP пользователя за рубеж.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   СБРОС
   Минимальный и осмысленный — не normalize целиком, а только то,
   что реально мешает.
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Атрибут hidden обязан скрывать элемент всегда.
   В браузерном стиле он задан как display: none, но ЛЮБОЕ авторское
   правило с display перебивает его по специфичности: кнопка с
   display: inline-flex остаётся видимой, даже когда JS выставил hidden.
   Из-за этого не скрывались «Сбросить фильтры» и «Далее» на последнем
   шаге квиза — проверено в мобильном виде. */
[hidden] {
  display: none !important;
}

html {
  /* Плавная прокрутка к якорям FAQ и секций. Отключается ниже при
     prefers-reduced-motion */
  scroll-behavior: smooth;
  /* Отступ при скролле к якорю: липкая шапка не должна накрывать заголовок.
     Значение совпадает с --sticky-top; на мобильном шапка ниже, поэтому
     ниже по файлу оно уменьшается. */
  scroll-padding-top: var(--sticky-top);
  /* Отключаем автоувеличение шрифта в мобильном Safari при повороте экрана */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--c-parchment);
  color: var(--c-graphite);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* Сглаживание: без него Onest на macOS выглядит жирнее задуманного */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Горизонтальная прокрутка не нужна никогда: если она появилась —
     это баг вёрстки, и его надо чинить, а не прятать overflow: hidden,
     который заодно ломает position: sticky */
  overflow-x: clip;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
}

/* Изображения контента: соотношение сторон задаётся атрибутами width/height
   в разметке, чтобы браузер зарезервировал место до загрузки.
   Это и есть защита от CLS — не «оптимизация», а обязательное требование. */
img {
  height: auto;
}

/* Картинки из toPicture приходят с width/height 768×512 (первый кадр
   srcset) — это резерв места под CLS, а не желаемая ширина. Без этого
   правила фото хиро объекта или статьи стояло 768 px в контейнере 1360
   и справа оставалась пустота. Растягиваем на бокс; пропорцию держат
   атрибуты и height: auto. */
picture > img { width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Убираем стандартные отступы у списков, которые используются как разметка */
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   ТИПОГРАФИКА
   Классы, а не только теги: заголовочный уровень в разметке определяется
   структурой документа (h1 → h2 → h3 без пропусков, это требование
   доступности и SEO), а визуальный размер — классом.
   -------------------------------------------------------------------------- */

/* Заголовки не переносятся внутри слова — требование дизайн-системы.
   «Строи-
    тельство» в макете недопустимо. */
h1, h2, h3, h4, h5,
.t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5 {
  margin: 0;
  font-family: var(--f-display);
  overflow-wrap: normal;
  hyphens: none;
  /* pretty, а не balance: balance выравнивает длину строк, но
     оставляет висячие слова на последней строке. pretty борется именно
     с ними — это требование новой редакции макетов. */
  text-wrap: pretty;
}

.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 700;
}

h1, .t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: 600;
}

h2, .t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: 600;
}

h3, .t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: 600;
}

h4, .t-h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 600;
}

h5, .t-h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: 600;
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 400;
}

.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.t-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* Моноширинные стили: эйбрау секций, ТТХ, цифры, крошки, служебные подписи.
   Именно они дают дизайну «инженерный» характер — это не декор,
   а смысловая метка. */
.t-mono-l {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-l);
  font-weight: 500;
}

.t-mono-m {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-m);
  line-height: var(--lh-mono-m);
  letter-spacing: var(--ls-mono-m);
  text-transform: uppercase;
  font-weight: 400;
}

.t-mono-s {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-s);
  line-height: var(--lh-mono-s);
  letter-spacing: var(--ls-mono-s);
  text-transform: uppercase;
  font-weight: 400;
}

/* Цветовые модификаторы текста — работают в любой теме */
.t-accent { color: var(--accent, var(--c-brass-link)); }
.t-muted  { color: var(--fg-2, var(--c-on-light-2)); }
.t-faint  { color: var(--fg-3, var(--c-on-light-3)); }

p { margin: 0 0 var(--space-16); }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   ССЫЛКИ
   -------------------------------------------------------------------------- */

a {
  color: var(--accent, var(--c-brass-link));
  text-decoration: none;
  border-bottom: 1px solid var(--c-brass-a40);
  transition: border-color var(--t-color), color var(--t-color);
}

a:hover {
  border-bottom-color: currentColor;
}

/* Служебные ссылки без подчёркивания: навигация, карточки, логотип */
a.is-plain,
a.is-plain:hover {
  border-bottom: 0;
  color: inherit;
}

/* --------------------------------------------------------------------------
   ФОКУС
   :focus-visible, а не :focus — рамка появляется при навигации с клавиатуры
   и не появляется при клике мышью. Убирать её нельзя: без видимого фокуса
   сайт непроходим с клавиатуры, это прямое нарушение требований
   доступности из хендоффа.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   КОНТЕЙНЕР И СЕТКА
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 12 колонок. Асимметрия обязательна по дизайн-системе: заголовочная
   колонка обычно 1/6, текст-компаньон уходит вправо. Классы ниже
   описывают именно эти типовые раскладки, а не абстрактную сетку. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

.grid--wide { gap: var(--grid-gap-lg) var(--grid-gap); }

/* Типовые позиции колонок */
.col-1-5  { grid-column: 1 / span 5; }
.col-1-6  { grid-column: 1 / span 6; }
.col-1-7  { grid-column: 1 / span 7; }
.col-2-6  { grid-column: 2 / span 6; }
.col-3-8  { grid-column: 3 / span 8; }
.col-7-6  { grid-column: 7 / span 6; }
.col-8-5  { grid-column: 8 / span 5; }
.col-9-4  { grid-column: 9 / span 4; }
.col-full { grid-column: 1 / -1; }

/* Карточные сетки. Минимальная ширина колонки подбирается под плотность
   блока: 170px у ленты этапов, 300px у наборов из 6–8 карточек (иначе
   последний ряд остаётся с «сиротой»), 330px у крупных карточек объектов.
   Значения — из макетов, не произвольные. */
.cards        { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cards--170   { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cards--220   { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cards--250   { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cards--330   { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

/* auto-fill вместо auto-fit: пустые колонки сохраняются, и один элемент
   не растягивается на весь контейнер. Нужен планировкам: одноэтажный
   проект с единственным планом иначе получал чертёж шириной 1200 px
   и высотой в полтора экрана. */
.cards--fill  { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

/* Пять равных карточек в ряд там, где их ровно пять (факторы цены):
   в auto-fit при контейнере 1360 вставало четыре, пятая уходила одна
   в следующий ряд. */
@media (min-width: 1200px) {
  .cards--five { grid-template-columns: repeat(5, 1fr); }
}

/* Сирота в сетке объектов. Когда карточек 3n+1, последняя стоит одна
   в ряду. Вместо этого первая карточка растягивается на две колонки
   и становится «главным объектом» — остальные 3n заполняют ряды целиком.
   Только при трёх колонках (от 1100 px) и только пока фильтр ничего
   не спрятал: скрытые карточки остаются в DOM и сбили бы счёт. */
@media (min-width: 1100px) {
  .cards--330:not(:has([hidden])) > :first-child:nth-last-child(3n + 1) {
    grid-column: span 2;
  }
}

/* Модификаторы разрыва между рядами. В наборах, где карточки переносятся
   на вторую строку, ряды разводятся на 48px — иначе подпись верхней
   карточки слипается с изображением нижней. */
.cards--rows      { gap: var(--space-48) var(--grid-gap); }
.cards--rows-wide { gap: var(--space-48) var(--space-32); }

/* --------------------------------------------------------------------------
   СЕКЦИИ
   Вертикальный ритм 96 / 128 / 160. Три значения, других быть не должно.
   Отступы задаются ТОЛЬКО паддингом секции: внешний margin-top между
   секциями складывается с паддингом соседа и даёт двойной воздух.
   -------------------------------------------------------------------------- */

.section        { padding-block: var(--space-section); }
.section--dense { padding-block: var(--space-section-dense); }
.section--wide  { padding-block: var(--space-section-wide); }
.section--flush { padding-block: 0; }

/* Заголовочный блок секции: эйбрау + заголовок слева, текст-компаньон справа.
   Колонки выравниваются по ВЕРХНЕЙ линии. Прежнее выравнивание по нижней
   кромке добавляло пустоту сверху у более короткой колонки — именно это
   и правила ревизия отступов. */
.section-head {
  display: flex;
  align-items: flex-start;
  gap: var(--grid-gap-lg);
  margin-bottom: var(--space-64);
}

/* Там, где в макете отступ до контента 48px, а не 64px */
.section-head--tight { margin-bottom: var(--space-48); }

/* --------------------------------------------------------------------------
   ДВУХКОЛОНОЧНАЯ СЕКЦИЯ С ЛИПКИМ ЗАГОЛОВКОМ
   Заголовок слева (колонки 1–5), длинный список или таблица справа (6–12).
   Заголовочная колонка прилипает к верху и остаётся в кадре, пока
   пользователь читает список.

   Это не украшение: в секциях с восемью пунктами FAQ заголовок иначе
   уезжает вверх, и человек, дочитав до пятого вопроса, уже не помнит,
   в каком он разделе. Плюс так убирается пустое поле слева, из-за
   которого в первой редакции макетов и появлялся лишний воздух.

   Работает только при align-items: start у грида — иначе колонка
   растягивается на всю высоту и прилипать ей некуда.
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-48) var(--grid-gap);
  align-items: start;
}
.split--roomy { gap: var(--space-64) var(--grid-gap); }

.split__aside {
  grid-column: 1 / span 5;
  position: sticky;
  top: var(--sticky-top);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.split__main { grid-column: 6 / span 7; }

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .split__aside {
    grid-column: 1 / -1;
    /* На узком экране липкий заголовок съедал бы половину экрана */
    position: static;
  }
  .split__main { grid-column: 1 / -1; }
}

/* Шапка секции — флекс, а не 12-колоночная сетка. В сетке заголовок
   занимал колонки 1–6, текст-компаньон — 8–12, и при коротком заголовке
   («До работ», «Планировка») левая половина стояла пустой, а глаз прыгал
   на 800 px вправо к тексту. Теперь текст идёт вплотную за заголовком
   с одним крупным зазором. Пределы ширины повторяют прежние колонки:
   заголовок не шире половины, текст — не шире пяти колонок (526 px
   при контейнере 1360), чтобы длинные заголовки ложились как раньше. */
.section-head__title {
  flex: 0 1 auto;
  max-width: calc(50% - var(--grid-gap-lg) / 2);
}
.section-head__aside {
  flex: 0 1 auto;
  max-width: 526px;
  color: var(--fg-2);
}
.section-head__brow {
  display: block;
  margin-bottom: var(--space-16);
  color: var(--accent);
}

/* ВЫРАВНИВАНИЕ ПРАВОЙ КОЛОНКИ ПО ЗАГОЛОВКУ

   Сетка выровнена по верху (align-items: start), поэтому правая колонка
   начиналась вровень с надписью-эйбрау, а не с самим заголовком. Кнопка
   «Все направления» и пояснительный текст висели ВЫШЕ h2 — читалось так,
   будто они относятся к предыдущей секции.

   Выравнивание по нижней кромке здесь не годится: у секций, где заголовок
   в четыре строки, а справа одна кнопка, снизу образуется провал.

   Поэтому сдвигаем правую колонку ровно на высоту эйбрау вместе с его
   отступом. Значения берутся из тех же токенов, что и сам эйбрау, — поменяется
   типографика, сдвиг поедет следом.

   Условие :has() важно: у секций без эйбрау («Работы по этой услуге»)
   сдвигать нечего, и правая колонка остаётся на месте. */
.section-head__title:has(.section-head__brow) ~ .section-head__aside {
  margin-top: calc(var(--lh-mono-s) + var(--space-16));
}

@media (max-width: 1024px) {
  /* На узком экране колонки идут друг под другом, и сдвиг превращается
     в лишний отступ между заголовком и текстом. */
  .section-head__title:has(.section-head__brow) ~ .section-head__aside {
    margin-top: 0;
  }
}

/* ОДИНОКАЯ КНОПКА В ПРАВОЙ КОЛОНКЕ

   Правая колонка заголовка занимает 8–12. Для абзаца-компаньона это верно:
   текст читается от левой кромки колонки. Но когда в колонке только кнопка,
   она вставала на колонку 8 — а текстовая колонка контента ниже начинается
   с девятой. Кнопка «Все объекты» и кнопка «Смотреть объект» под ней
   оказывались на разных вертикалях, со сдвигом в одну колонку: глаз читает
   это как съехавшую вёрстку.

   Сдвигаем колонку на 9 — кнопка встаёт ровно над кнопкой карточки и над
   всей правой колонкой: надзаголовком, заголовком, описанием.

   Прижимать к правому краю нельзя: тогда кнопка уходит на край контейнера
   и снова висит сама по себе, ни с чем не выровненная.

   Условие :only-child важно — колонки, где есть пояснительный текст,
   остаются на восьмой колонке и не двигаются. */
.section-head__aside:has(> .btn:only-child),
.section-head__aside:has(> a:only-child) {
  /* Во флексе «колонка 9» — это блок шириной в четыре колонки сетки,
     прижатый к правому краю: 4 колонки + 3 зазора = треть ширины минус
     две трети зазора. Кнопка внутри стоит по левому краю блока. */
  flex: 0 0 calc(100% / 3 - var(--grid-gap) * 2 / 3);
  max-width: none;
  margin-left: auto;
}

@media (max-width: 1024px) {
  /* Колонки идут друг под другом — кнопка начинается там же, где заголовок. */
  .section-head__aside:has(> .btn:only-child),
  .section-head__aside:has(> a:only-child) {
    flex: none;
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   СЛУЖЕБНОЕ
   -------------------------------------------------------------------------- */

/* Текст только для скринридеров: подписи к иконкам, пояснения к формам.
   Не display:none — тот убирает элемент и из озвучки тоже. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ссылка «к содержимому» — первый элемент страницы, виден только при
   фокусе с клавиатуры. Позволяет не прокликивать всё меню каждый раз. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-16);
  z-index: var(--z-lightbox);
  padding: var(--space-12) var(--space-24);
  background: var(--c-brass);
  color: var(--c-graphite);
  border: 0;
}
.skip-link:focus {
  top: var(--space-16);
}

/* --------------------------------------------------------------------------
   АДАПТИВ
   Брейкпоинты дизайн-системы: 1440 / 1024 / 768 / 375.
   Подход mobile-first здесь не применяется намеренно: макет спроектирован
   от десктопа, и переписывание «снизу вверх» дало бы больше кода,
   а не меньше.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --gutter: 24px;
    --space-section-dense: 72px;
    --space-section: 96px;
    --space-section-wide: 112px;
    --grid-gap-lg: 40px;
  }

  /* Сетка складывается в 6 колонок */
  .grid { grid-template-columns: repeat(6, 1fr); }
  .col-1-5, .col-1-6, .col-1-7, .col-2-6, .col-3-8, .col-7-6, .col-8-5, .col-9-4 {
    grid-column: 1 / -1;
  }

  .section-head { margin-bottom: var(--space-40); flex-direction: column; gap: var(--space-24); }
  .section-head__title,
  .section-head__aside { max-width: none; }
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --space-section-dense: 56px;
    --space-section: 64px;
    --space-section-wide: 80px;
    /* Шапка на мобильном ниже (61px вместо 73px) — якорям не нужен
       отступ под десктопную высоту */
    --sticky-top: 72px;
    --grid-gap: 16px;
  }

  .grid { grid-template-columns: repeat(4, 1fr); }
  .cards--170,
  .cards--200 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 375px) {
  :root { --gutter: 16px; }
}

/* --------------------------------------------------------------------------
   ОГРАНИЧЕНИЕ АНИМАЦИЙ
   Пользователь мог включить это в системе из-за вестибулярных нарушений —
   для него движение на сайте буквально вызывает тошноту. Требование
   дизайн-системы: все переходы сводятся к 1мс.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   ПЕЧАТЬ
   Смету и карточку объекта клиенты печатают — не оставляем им
   тёмные заливки на весь лист.
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .quiz, .lightbox, .btn { display: none !important; }
  .t-dark, .t-deep, .t-pine {
    background: #fff !important;
    color: #000 !important;
  }
  .section { padding-block: 16px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ==========================================================================
   КОМПОНЕНТЫ
   Каждый компонент читает цвета из переменных темы (--fg, --border, --accent),
   поэтому один и тот же чанк работает на любом фоне без вариантов-дубликатов.
   ========================================================================== */

/* --------------------------------------------------------------------------
   КНОПКИ
   Три вида по убыванию силы призыва: латунная → контурная сплошная →
   контурная слабая. На экране их не должно быть больше трёх — иначе
   пользователь не понимает, чего от него хотят.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  min-height: var(--btn-h);
  padding-inline: var(--btn-px);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-color), border-color var(--t-color), color var(--t-color);
  /* Кнопка-ссылка не должна получать подчёркивание из базовых стилей */
  border-bottom-width: var(--border-w);
}

/* Основная: латунь. Текст графитовый — по контрасту это единственный
   читаемый вариант на латуни (белый даёт 2.4:1, это провал по AA). */
.btn--primary {
  background-color: var(--c-brass);
  color: var(--c-graphite);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  /* Осветляем, а не затемняем: подпись на кнопке графитовая, и на тёмной
     латуни она переставала проходить по контрасту. */
  background-color: var(--c-brass-light);
  color: var(--c-graphite);
}

/* Контурная сплошная: граница цветом текста темы */
.btn--outline {
  background-color: transparent;
  border-color: currentColor;
  color: var(--fg);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  /* Подложка 8% — заметно, но не превращает кнопку в основную */
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* Контурная слабая: третий по приоритету призыв. Граница приглушена,
   чтобы визуальная иерархия читалась с одного взгляда. */
.btn--ghost {
  background-color: transparent;
  border-color: var(--fg-4, var(--c-border-light-2));
  color: var(--fg);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: currentColor;
  background-color: color-mix(in srgb, currentColor 6%, transparent);
}

/* Размеры */
.btn--header  { min-height: var(--btn-h-header); padding-inline: var(--space-24); }
.btn--compact { min-height: var(--btn-h-compact); padding-inline: var(--space-20); font-size: var(--fs-small); }
.btn--block   { display: flex; width: 100%; }

/* Стрелка в кнопке. Отдельным элементом, а не символом в тексте:
   символ ломает вертикальное выравнивание и озвучивается скринридером. */
.btn__arrow {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  transition: transform var(--t-color);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
}

/* Группа кнопок в hero */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

/* --------------------------------------------------------------------------
   ПОЛЯ ВВОДА
   Без рамки, только нижняя граница — так поле не спорит с прямоугольной
   геометрией макета. На фокусе граница удваивается и красится латунью.
   -------------------------------------------------------------------------- */

.field {
  display: block;
  margin-bottom: var(--space-24);
}

.field__label {
  display: block;
  margin-bottom: var(--space-8);
  color: var(--fg-3);
}

.field__input,
.field__textarea,
.field__select {
  width: 100%;
  min-height: var(--field-h);
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: var(--border-w) solid var(--border-2);
  border-radius: 0;
  color: var(--fg);
  font-size: var(--fs-body);
  transition: border-color var(--t-color);
  /* Убираем внутреннюю тень полей в iOS Safari */
  appearance: none;
}

.field__textarea {
  min-height: 120px;
  padding-block: var(--space-16);
  resize: vertical;
  line-height: var(--lh-body);
}

.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  outline: none;                 /* заменяем видимым состоянием ниже */
  border-bottom-width: 2px;
  border-bottom-color: var(--c-brass);
  /* Компенсируем прирост границы, чтобы поле не «прыгало» на 1px */
  margin-bottom: -1px;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--fg-3);
}

/* Ошибка валидации */
.field--error .field__input,
.field--error .field__textarea {
  border-bottom-color: var(--c-brick-bright);
}
.field__error {
  display: block;
  margin-top: var(--space-8);
  color: var(--c-brick-bright);
  font-size: var(--fs-small);
}

/* Чекбокс согласия на обработку персональных данных.
   Без него форму отправлять нельзя — требование 152-ФЗ. */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  cursor: pointer;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-2);
}
.checkbox input {
  flex: 0 0 auto;
  width: var(--checkbox);
  height: var(--checkbox);
  margin: 2px 0 0;
  accent-color: var(--c-brass);
  cursor: pointer;
}

/* Ловушка для ботов. Поле скрыто от людей и невидимо для скринридеров,
   но бот его заполняет — и заявка отбрасывается на сервере.
   Дешевле и приятнее капчи: живой человек ничего не замечает. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   КАРТОЧКИ
   Прямые углы, тень только на ховере. Подъём на 4px и латунная нижняя
   граница — единый язык для всех карточек сайта: стили, объекты, услуги.
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-bottom: var(--border-w) solid var(--border);
  transition: transform var(--t-card), box-shadow var(--t-card), border-color var(--t-card);
}

/* Карточка-ссылка: кликабельна вся площадь, но в разметке ссылка одна —
   на заголовке. Псевдоэлемент растягивается на карточку. Так скринридер
   читает одну осмысленную ссылку вместо трёх («картинка», «заголовок», «цена»). */
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-bottom-color: var(--c-brass-a40);
}

/* Внутри тёмных секций тень не видна — усиливаем границу */
.t-dark .card:hover,
.t-deep .card:hover,
.t-pine .card:hover {
  box-shadow: none;
  border-bottom-color: var(--c-brass);
}

.card__media {
  position: relative;
  margin-bottom: var(--space-20);
  overflow: hidden;
  background-color: var(--c-graphite-light); /* подложка до загрузки фото */
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-card);
}
.card:hover .card__media img { transform: scale(1.03); }

/* Пропорции медиа задаются классом, а не инлайном: так значение
   одинаково во всех карточках и не размножается по шаблонам */
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-3-4  { aspect-ratio: 3 / 4; }
.ratio-21-9 { aspect-ratio: 21 / 9; }
.ratio-1-1  { aspect-ratio: 1 / 1; }

/* Эйбрау карточки: геолокация объекта, рубрика статьи */
.card__brow {
  display: block;
  margin-bottom: var(--space-8);
  color: var(--fg-3);
}

.card__title { margin-bottom: var(--space-8); }
.card__text  { color: var(--fg-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.card__price { margin-top: auto; padding-top: var(--space-16); color: var(--accent); }

/* Строка ТТХ под карточкой объекта: «320 м² · 2 этажа · монолит · уклон 18°» */
.card__specs {
  margin-top: var(--space-12);
  color: var(--fg-3);
}

/* --------------------------------------------------------------------------
   ЭТАПЫ РАБОТ (лента «Полный цикл»)
   Восемь блоков с номером, названием и описанием. Верхняя граница
   у первого — латунная: она задаёт точку отсчёта.
   -------------------------------------------------------------------------- */

.step {
  /* 20px — значение из макета, не из шкалы отступов: лента этапов
     набрана плотнее остальных блоков */
  padding-top: var(--space-20);
  border-top: var(--border-w) solid var(--border);
}
.step:first-child { border-top-color: var(--c-brass); }
.step__num   { display: block; margin-bottom: var(--space-12); color: var(--accent); }
.step__title { margin-bottom: var(--space-8); }
.step__text  { color: var(--fg-2); font-size: var(--fs-small); line-height: var(--lh-small); }

/* --------------------------------------------------------------------------
   АККОРДЕОН (FAQ)
   Открыт один пункт за раз; повторный клик закрывает всё.
   Реализован на <button aria-expanded> — это единственный вариант,
   который корректно озвучивается и проходится с клавиатуры.
   -------------------------------------------------------------------------- */

.accordion { border-top: var(--border-w) solid var(--border); }

.accordion__item { border-bottom: var(--border-w) solid var(--border); }

.accordion__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
  padding: var(--space-24) 0;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-h4);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-color);
}
.accordion__trigger:hover { color: var(--accent); }

/* «Плюс» поворачивается на 45° и становится «крестом» */
.accordion__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  transition: transform var(--t-panel);
}
.accordion__trigger[aria-expanded='true'] .accordion__icon {
  transform: rotate(45deg);
}

/* Панель раскрывается через grid-template-rows: 0fr → 1fr.
   Это единственный способ анимировать высоту «по содержимому» без JS-замеров
   и без max-height, подобранного на глаз. */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-panel);
}
.accordion__panel[data-open='true'] { grid-template-rows: 1fr; }

.accordion__inner {
  overflow: hidden;
  color: var(--fg-2);
}
.accordion__panel[data-open='true'] .accordion__inner {
  padding-bottom: var(--space-24);
}

/* Ширина ответа ограничена: строка длиной во весь экран нечитаема */
.accordion__inner > * { max-width: 68ch; }

/* --------------------------------------------------------------------------
   ЧИПЫ И ФИЛЬТРЫ
   -------------------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  /* 44 пикселя — минимальный размер цели касания по WCAG 2.5.5. Чипы это
     фильтры каталога и стилей, то есть основное действие на телефоне. */
  min-height: 44px;
  padding-inline: var(--space-16);
  background: transparent;
  border: var(--border-w) solid var(--border-2);
  border-radius: var(--radius);
  color: var(--fg-2);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background-color var(--t-color), border-color var(--t-color), color var(--t-color);
}
.chip:hover { border-color: currentColor; color: var(--fg); }

.chip[aria-pressed='true'],
.chip.is-active {
  background-color: var(--c-brass);
  border-color: var(--c-brass);
  color: var(--c-graphite);
}

/* Крестик снятия фильтра */
.chip__remove {
  display: inline-flex;
  width: 16px;
  height: 16px;
  opacity: 0.6;
}
.chip:hover .chip__remove { opacity: 1; }

/* Счётчик найденного */
.filter-count { color: var(--fg-3); }

/* --------------------------------------------------------------------------
   ХЛЕБНЫЕ КРОШКИ
   Моноширинные и приглушённые: это служебная навигация, она не должна
   спорить с заголовком страницы.
   -------------------------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
  color: var(--fg-3);
}
.crumbs a { color: inherit; border-bottom: 0; }
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { color: var(--c-brass); }

/* --------------------------------------------------------------------------
   ТАБЛИЦА ТТХ
   Технические характеристики: тип стены, бетон, армирование, уклон.
   Моноширинный шрифт здесь обязателен — цифры должны выстраиваться
   в колонку по разрядам.
   -------------------------------------------------------------------------- */

.specs {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-m);
}
.specs th,
.specs td {
  padding: var(--space-16) 0;
  border-bottom: var(--border-w) solid var(--border);
  text-align: left;
  vertical-align: top;
}
.specs th {
  width: 40%;
  color: var(--fg-3);
  font-weight: 400;
  letter-spacing: var(--ls-mono-m);
  text-transform: uppercase;
}
.specs td {
  color: var(--fg);
  /* Табличные цифры: разряды выравниваются по вертикали */
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   ТАБЛИЦА ДАННЫХ
   Три и больше колонок: сценарии доходности, этапы финансирования.
   В отличие от .specs здесь есть шапка, и первая ячейка строки — заголовок
   строки: так скринридер объявляет, к какому сценарию относится число.
   -------------------------------------------------------------------------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-m);
}
.data-table caption {
  margin-bottom: var(--space-16);
  color: var(--fg-3);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--ls-mono-s);
  text-transform: uppercase;
  text-align: left;
}
.data-table th,
.data-table td {
  padding: var(--space-16) var(--space-16) var(--space-16) 0;
  border-bottom: var(--border-w) solid var(--border);
  text-align: left;
  vertical-align: baseline;
}
.data-table thead th {
  color: var(--fg-3);
  font-weight: 400;
  font-size: var(--fs-mono-s);
  letter-spacing: var(--ls-mono-s);
  text-transform: uppercase;
}
.data-table tbody th {
  color: var(--fg-2);
  font-weight: 400;
}
.data-table td {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
/* Последняя строка без разделителя: линия в воздухе под таблицей
   выглядит как оборванная вёрстка */
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }

/* На узком экране числовые колонки прижимаем вправо: так разряды
   сравниваются глазом даже без выравнивания по ширине */
@media (max-width: 640px) {
  .data-table { font-size: var(--fs-mono-s); }
  .data-table th, .data-table td { padding-right: var(--space-8); }
  .data-table td { text-align: right; }
}

/* --------------------------------------------------------------------------
   ИЗОЛИНИИ
   Три режима из дизайн-системы. Все — inline SVG с aria-hidden,
   потому что смысла не несут, а скринридеру мешают.
   -------------------------------------------------------------------------- */

/* Режим 1: декоративный разделитель между секциями с отметкой высоты */
.isoline-divider {
  position: relative;
  height: 80px;
  overflow: hidden;
}
.isoline-divider svg { width: 100%; height: 100%; }
.isoline-divider__mark {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-16);
  color: var(--fg-3);
}

/* Режим 2: фоновый слой тёмных секций. Несколько кривых с разной
   прозрачностью 0.07–0.18 — они создают ощущение рельефа без фотографии. */
.isoline-bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-isoline);
  pointer-events: none;
  overflow: hidden;
}
.isoline-bg svg { width: 100%; height: 100%; }
.isoline-bg path { fill: none; stroke: var(--c-brass); }

/* Режим 3: акцентная линия под активным элементом */
.isoline-accent {
  position: relative;
}
.isoline-accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--c-brass);
}

/* Контент поверх фоновых изолиний */
.has-isolines { position: relative; }
.has-isolines > .container { position: relative; z-index: var(--z-content); }

/* --------------------------------------------------------------------------
   МЕТРИКИ (карточки цифр в инвест-блоке)
   -------------------------------------------------------------------------- */

.metric {
  padding: var(--space-32);
  border: var(--border-w) solid var(--border);
}
.metric__value {
  display: block;
  margin-bottom: var(--space-8);
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-h2);
  font-variant-numeric: tabular-nums;
}
.metric__label { color: var(--fg-2); font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   ОБЯЗАТЕЛЬСТВА (сетка 2×2 с иконками)
   -------------------------------------------------------------------------- */

.promise { display: flex; gap: var(--space-20); }
.promise__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--accent);
  /* Штрих 1.5px — единая толщина всех иконок сайта */
  stroke-width: 1.5;
}
.promise__title { margin-bottom: var(--space-8); }
.promise__text  { color: var(--fg-2); font-size: var(--fs-small); line-height: var(--lh-small); }

/* --------------------------------------------------------------------------
   КВИЗ
   -------------------------------------------------------------------------- */

.quiz__progress {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-32);
}
.quiz__segment {
  flex: 1;
  height: 2px;
  background-color: var(--border);
  transition: background-color var(--t-panel);
}
.quiz__segment.is-done { background-color: var(--c-brass); }

.quiz__counter { color: var(--fg-3); margin-bottom: var(--space-16); }

/* Варианты ответа — плитки. role="radio" в разметке, поэтому
   выбранное состояние читается через aria-checked. */
.quiz__options {
  display: grid;
  gap: var(--space-16);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.quiz__option {
  /* Внутри кнопки два span: название варианта и пояснение. Кнопка по
     умолчанию inline-block, span'ы — строчные, и они склеивались в одну
     строку: «Жилой домДля постоянного проживания». Разносим по вертикали. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);

  padding: var(--space-24);
  background: transparent;
  border: var(--border-w) solid var(--border-2);
  border-radius: var(--radius);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-color), border-color var(--t-color);
}
.quiz__option:hover { border-color: var(--c-brass); }
.quiz__option[aria-checked='true'] {
  border-color: var(--c-brass);
  background-color: var(--c-brass-a12);
}

/* Выход из квиза. Двенадцать шагов на тёмном фоне без единого выхода —
   ловушка: единственным способом уйти остаётся кнопка «назад» в браузере,
   а на телефоне — жест смахивания. Ставим явный выход у прогресса. */
.quiz__close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  padding-inline: var(--space-12);
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--fg-3);
  font-size: var(--fs-small);
  cursor: pointer;
  border-bottom: 0;
}
.quiz__close:hover { color: var(--fg); }
.quiz__head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.quiz__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

/* --------------------------------------------------------------------------
   КАЛЬКУЛЯТОР
   -------------------------------------------------------------------------- */

.calc { display: grid; gap: var(--space-32); grid-template-columns: 1fr 1fr; }

.calc__control { margin-bottom: var(--space-24); }
.calc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-8);
}
.calc__value { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* Ползунок. Оформляем оба движка — WebKit и Firefox используют разные
   псевдоэлементы, общего стандарта до сих пор нет.

   Высота САМОГО элемента — 44px, а видимая дорожка внутри него — 2px.
   Раньше высота элемента равнялась высоте дорожки, и на телефоне
   в него было невозможно попасть пальцем: два пикселя. Визуально
   ничего не изменилось, площадь нажатия выросла в 22 раза. */
.calc__range {
  width: 100%;
  height: 44px;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.calc__range::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--border-2);
}
.calc__range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  /* Центрируем бегунок по дорожке: половина его высоты минус половина
     высоты дорожки */
  margin-top: -9px;
  background: var(--c-brass);
  border-radius: var(--radius);
  cursor: pointer;
}

.calc__range::-moz-range-track {
  height: 2px;
  background: var(--border-2);
}
.calc__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--c-brass);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.calc__result {
  padding: var(--space-32);
  border: var(--border-w) solid var(--border);
}
.calc__total {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.calc__note { margin-top: var(--space-16); color: var(--fg-3); font-size: var(--fs-small); }

@media (max-width: 768px) {
  .calc { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   ЛАЙТБОКС
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: none;
  place-items: center;
  padding: var(--space-32);
  background: rgba(20, 23, 26, 0.94);
}
.lightbox[open] { display: grid; }
.lightbox img { max-width: 100%; max-height: 84vh; object-fit: contain; }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: var(--border-w) solid var(--c-border-dark);
  color: var(--c-parchment);
  cursor: pointer;
  transition: border-color var(--t-color);
}
.lightbox__close:hover,
.lightbox__nav:hover { border-color: var(--c-brass); }

.lightbox__close { top: var(--space-24); right: var(--space-24); }
.lightbox__nav--prev { left: var(--space-24); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--space-24); top: 50%; transform: translateY(-50%); }

.lightbox__caption {
  position: absolute;
  bottom: var(--space-24);
  left: 50%;
  transform: translateX(-50%);
  color: var(--c-on-dark-3);
}

/* --------------------------------------------------------------------------
   СОСТОЯНИЯ ОТПРАВКИ ФОРМ
   -------------------------------------------------------------------------- */

.form-state { display: none; padding: var(--space-32); border: var(--border-w) solid var(--border); }
.form-state.is-visible { display: block; }
.form-state--success { border-color: var(--c-brass); }
.form-state--error   { border-color: var(--c-brick-bright); color: var(--c-brick-bright); }

/* Индикатор отправки: точка, пульсирующая прозрачностью. Спиннер с
   вращением при prefers-reduced-motion пришлось бы отключать, а этот
   индикатор просто замирает. */
.form-state--pending::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--space-12);
  background: var(--c-brass);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ==========================================================================
   ПАНЕЛЬ ЗВОНКА (мобильная)
   Разметка — чанк ui.call-bar, поведение — модуль callbar.js.

   На десктопе не показывается вовсе: там телефон есть в шапке и в подвале,
   а полоса поверх макета мешала бы читать.
   ========================================================================== */

.call-bar { display: none; }

@media (max-width: 768px) {
  .call-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;

    gap: var(--space-8);
    padding: var(--space-12);
    /* Отступ под системную полосу жестов на айфонах без кнопки «домой»:
       без него нижний край кнопки оказывается под ней и не нажимается. */
    padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));

    background: var(--c-graphite);
    border-top: 1px solid var(--c-border-dark);

    /* Появление снизу. Плавность отключается для тех, кто просил
       уменьшить анимацию в системе. */
    transform: translateY(100%);
    transition: transform 240ms ease;
  }
  /* Спрятана и показана — одной трансформацией, без display и без атрибута
     hidden. С hidden получалась борьба со стилями браузера: тот считает
     элемент скрытым, а мы поверх возвращаем display — правило выигрывает
     не везде, и панель просто не появлялась. */
  .call-bar[data-visible] { transform: translateY(0); }

  .call-bar__main {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-height: 52px;
    border: 0;
    border-radius: var(--radius);
    background: var(--c-brass);
    color: var(--c-graphite);
    font-size: var(--fs-body);
    font-weight: 600;
  }
  .call-bar__main:hover,
  .call-bar__main:focus-visible { background: var(--c-brass-light); }

  .call-bar__alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-height: 52px;
    border: 1px solid var(--c-border-dark);
    border-radius: var(--radius);
    background: transparent;
    color: var(--c-parchment);
  }
  .call-bar__alt:hover,
  .call-bar__alt:focus-visible { border-color: var(--c-brass); }

  /* Мессенджеры внутри панели звонка. Ряд приходит общим чанком, но здесь
     у него свой ритм: кнопки квадратные и вровень с «Позвонить», иначе
     круглые сорок четыре смотрятся мелкими марками рядом с полосой в 52.

     48, а не 52: при трёх заполненных мессенджерах на экране 375 точек
     кнопке «Позвонить» иначе остаётся полоска, в которую не влезает слово. */
  .call-bar .messengers { flex: 0 0 auto; gap: var(--space-8); }
  .call-bar .messengers__btn {
    width: 48px;
    height: 52px;
    border-radius: var(--radius);
    border-color: var(--c-border-dark);
    color: var(--c-parchment);
  }

  /* Место под панель, чтобы она не закрывала конец страницы навсегда. */
  body:has(.call-bar) { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .call-bar { transition: none; }
}

/* Пометка «в работе» на карточке объекта. Латунью и капителью — как эйбрау,
   но отдельной строкой: это статус, а не часть названия. */
.card__status {
  display: inline-block;
  /* Карточка — флекс-колонка, и её дети по умолчанию тянутся на всю ширину.
     inline-block этого не отменяет: растягивает не сам элемент, а align-items
     родителя. Без align-self метка превращалась в полосу во всю карточку
     и читалась как заголовок раздела, а не как маленькая пометка. */
  align-self: flex-start;
  width: fit-content;
  margin-top: var(--space-8);
  padding: 2px var(--space-8);
  border: 1px solid var(--c-brass-a40);
  border-radius: var(--radius);
  color: var(--accent);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   МЕССЕНДЖЕРЫ
   Ряд круглых кнопок: Telegram, WhatsApp, MAX. Разметка — чанк ui.messengers,
   один на подвал, страницу контактов и панель звонка.

   Размер 44 пикселя — не произвольное число, а нижняя граница по WCAG 2.5.5
   для цели касания. Круглым кнопкам это особенно важно: у круга площадь
   меньше квадрата с той же стороной, и «почти попал» случается чаще.
   -------------------------------------------------------------------------- */

.messengers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
}

/* Контейнер без единой кнопки прячем целиком. Настройки мессенджеров могут
   быть не заполнены, и тогда от блока остаются только отступы — полоса
   пустоты, читающаяся как незагрузившийся элемент.

   :empty здесь не годится: между тегами есть пробелы и переводы строк,
   для браузера это текстовые узлы, и элемент пустым не считается. */
.messengers:not(:has(a)) { display: none; }

.messengers__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--bd);
  border-radius: 50%;
  color: var(--fg-2);
  background: transparent;
  transition: color var(--t-color), border-color var(--t-color), background-color var(--t-color);
}

.messengers__btn svg { width: 22px; height: 22px; }

/* Подпись рядом с иконкой не выводится: ряд из трёх названий занимает
   строку целиком и в подвале, и в панели звонка. Но в разметке она есть
   и доступна скринридеру вместе с aria-label — по значку мессенджер
   узнаётся глазами, голосом же его надо назвать. */
.messengers__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Фирменные цвета — только на наведении и фокусе. В покое кнопки держат
   единый вид страницы: три разноцветных кружка в подвале строительной
   компании выглядят как чужой виджет, приклеенный поверх макета. */
.messengers__btn:hover,
.messengers__btn:focus-visible {
  color: #fff;
  border-color: transparent;
}
.messengers__btn--tg:hover,  .messengers__btn--tg:focus-visible  { background: #2AABEE; }
.messengers__btn--wa:hover,  .messengers__btn--wa:focus-visible  { background: #25D366; }
/* Перелив MAX — цветами из брендбука go.max.ru/brandbook:
   #00BFFF «Голубая комета» → #471AFF «Синий гигант» → #9500FF
   «Пурпурная туманность». Плоская заливка одним из них делает кнопку
   похожей то на Telegram, то на чужой мессенджер: узнаётся именно переход.

   Направление 120deg повторяет значок приложения — голубое слева внизу,
   пурпурное справа вверху. */
.messengers__btn--max:hover,
.messengers__btn--max:focus-visible {
  background: linear-gradient(120deg, #00BFFF 0%, #471AFF 52%, #9500FF 100%);
}



/* Крупный вариант — страница контактов, где это основной способ связи */
.messengers--large { gap: var(--space-16); }
.messengers--large .messengers__btn { width: 56px; height: 56px; }
.messengers--large .messengers__btn svg { width: 26px; height: 26px; }

/* Тёмный фон: подвал и панель звонка */
.messengers--dark .messengers__btn {
  border-color: var(--c-on-dark-4, rgba(242, 239, 234, .5));
  color: rgba(242, 239, 234, .86);
}


/* ==========================================================================
   КАРКАС СТРАНИЦЫ: шапка, hero, футер
   ========================================================================== */

/* --------------------------------------------------------------------------
   ШАПКА
   Липкая, тёмная, с нижней границей. z-index 20 — выше контента,
   но ниже лайтбокса и мобильного меню.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--c-graphite);
  border-bottom: var(--border-w) solid var(--c-border-dark);
  color: var(--c-parchment);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16) var(--space-24);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-12) var(--gutter);
}

.site-header__logo {
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-parchment);
  white-space: nowrap;
  border-bottom: 0;
}

/* Навигация занимает свободное место, но умеет сжиматься:
   flex: 1 1 240px + min-width: 0 — та пара, без которой длинные пункты
   выдавливают телефон за край экрана. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-20);
  flex: 1 1 240px;
  min-width: 0;
  font-size: var(--fs-small);
}
.site-nav a {
  color: var(--c-parchment);
  border-bottom: 0;
  white-space: nowrap;
  transition: color var(--t-color);
}
.site-nav a:hover { color: var(--c-brass); }

/* Активный пункт подчёркнут акцентной изолинией */
.site-nav a[aria-current='page'] {
  position: relative;
  color: var(--c-brass);
}
.site-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--c-brass);
}

/* На страницах инвестиционного контура активный пункт хвойно-морской —
   визуальный маркер второй темы. Хвойно-морской на графите даёт низкий
   контраст, поэтому подчёркивание, а не цвет текста. */
.site-header--invest .site-nav a[aria-current='page'] { color: var(--c-parchment); }
.site-header--invest .site-nav a[aria-current='page']::after { background: var(--c-pine); }

.site-header__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.site-header__phone {
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--c-parchment);
  border-bottom: 0;
}
.site-header__note { color: var(--c-on-dark-3); }

/* Кнопка мобильного меню — видна только на узких экранах */
.site-header__burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: var(--border-w) solid var(--c-border-dark);
  border-radius: var(--radius);
  color: var(--c-parchment);
  cursor: pointer;
}

@media (max-width: 1024px) {
  .site-header__burger { display: grid; place-items: center; order: 3; }
  .site-header__inner  { flex-wrap: nowrap; }

  /* Меню уезжает в оверлей. Скрываем через display, а не visibility:
     скрытые ссылки не должны получать фокус с клавиатуры. */
  .site-nav {
    display: none;
    position: fixed;
    inset: 64px 0 0;
    z-index: var(--z-overlay);
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-32) var(--gutter);
    background-color: var(--c-graphite);
    font-size: var(--fs-h4);
    overflow-y: auto;
  }
  .site-nav[data-open='true'] { display: flex; }
  .site-nav a { padding-block: var(--space-12); }

  /* Подпись «заявки круглосуточно» на узком экране не помещается,
     но САМ ТЕЛЕФОН остаётся: на сайте строительной компании звонок —
     главное действие, и прятать его в меню нельзя. */
  .site-header__note { display: none; }
  .site-header__contact { flex-direction: row; align-items: center; }
}

@media (max-width: 768px) {
  .site-header__inner { padding-block: var(--space-8); gap: var(--space-12); }
  .site-header .btn--header { display: none; } /* призыв — в hero, телефон важнее */

  /* Телефон превращается в компактную кнопку с площадью нажатия 44px */
  .site-header__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: var(--space-12);
    margin-left: auto;
    border: var(--border-w) solid var(--c-border-dark);
    border-radius: var(--radius);
    font-size: var(--fs-small);
  }
}

/* На самых узких экранах номер целиком не влезает рядом с логотипом —
   показываем иконку трубки. Ссылка остаётся той же, только подпись
   уходит в aria-label разметки. */
@media (max-width: 420px) {
  .site-header__phone {
    font-size: 0;            /* прячем текст, оставляя элемент кликабельным */
    width: 44px;
    padding-inline: 0;
  }
  .site-header__phone::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: currentColor;
    /* Иконка трубки маской: SVG в CSS не требует лишнего запроса */
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M5 3h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A16 16 0 013 5a2 2 0 012-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* --------------------------------------------------------------------------
   HERO
   Тёмный, min-height 720px, контент прижат к низу. Фон — изолинии
   и градиент затемнения поверх фотографии.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  /* Контент прижат к низу — так в макете. При центрировании короткий
     заголовок «повисает» в середине тёмного поля. */
  align-items: flex-end;
  /* 720 — значение из макета. Фактическая высота получается больше
     за счёт контента и вертикальных полей. */
  min-height: 720px;
  /* Вертикальные поля живут на .container: если продублировать их здесь,
     они сложатся и hero вырастет против макета */
  background-color: var(--c-graphite);
  color: var(--c-parchment);
  overflow: hidden;
}

/* Подложка на время загрузки фото — графит светлее.
   Без неё в момент между отрисовкой блока и загрузкой картинки
   виден провал в чёрный. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--c-graphite-light);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Градиент затемнения: без него текст на светлой части фотографии
   не проходит по контрасту. Значения подобраны так, чтобы низ
   (где кнопки) был темнее верха. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(28, 32, 36, 0.72) 0%,
    rgba(28, 32, 36, 0.82) 55%,
    rgba(28, 32, 36, 0.94) 100%
  );
}

/* Ритм внутри hero задан одним gap, а не отступами у каждого блока —
   так в макете. Разница не косметическая: при добавлении или удалении
   блока (например, строки преимуществ) расстояния не нужно
   пересчитывать вручную.
   Поля 128 сверху / 120 снизу — значения из макета. */
.hero .container {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding-block: var(--space-section) 120px;
}

.hero__brow  { display: block; color: var(--c-on-dark-3); }
.hero__title { max-width: 24ch; }
.hero__lead  { max-width: 56ch; color: rgba(242, 239, 234, 0.86); }

/* Строка преимуществ с латунными точками-разделителями.
   Разделитель — псевдоэлемент, а не символ в тексте: скринридер
   не станет читать «точка» между пунктами. */
.hero__usp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-24);
  /* 0.7, а не стандартная прозрачность второго уровня 0.8 — значение
     из макета: строка преимуществ намеренно чуть тише лида */
  color: rgba(242, 239, 234, 0.7);
}
.hero__usp li { display: flex; align-items: center; gap: var(--space-24); }

/* Разделитель — круглая точка латунью, как «·» в макете.
   Псевдоэлемент, а не символ в тексте: символ скринридер читает вслух
   («точка») между каждой парой пунктов. */
.hero__usp li:not(:last-child)::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-brass);
}

@media (max-width: 1024px) {
  .hero { min-height: 620px; }
  .hero .container { padding-block: 112px 80px; }
  .hero__title { max-width: none; }
}

@media (max-width: 768px) {
  .hero { min-height: 520px; }
  .hero .container { padding-block: 48px 40px; gap: var(--space-24); }
  .btn-row .btn { width: 100%; }

  /* Строка преимуществ переносится на три строки, и точка-разделитель
     оказывается висящей в конце каждой из них — выглядит как опечатка.
     На узком экране разворачиваем список в две колонки без разделителей. */
  .hero__usp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-16);
    font-size: var(--fs-mono-s);
  }
  .hero__usp li { gap: 0; }
  .hero__usp li:not(:last-child)::after { display: none; }
}

@media (max-width: 420px) {
  .hero__usp { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   СЕКЦИЯ СО СЛОЖНЫМ РЕЛЬЕФОМ
   Контент прижат к низу — приём из макета: смотрится как вид на склон.
   -------------------------------------------------------------------------- */

/* Секция «Склон — не препятствие».
   Фиксированной высоты больше нет: в первой редакции min-height 820px
   при коротком контенте давал пустое поле снизу. Высоту определяет
   содержимое плюс симметричные 128px, колонки выровнены по верхней линии. */
.slope {
  position: relative;
  display: flex;
  padding-block: var(--space-section);
  overflow: hidden;
}

/* Разрыв колонок в этой секции: 48px между рядами, 64px между колонками.

   Выравнивание по центру, а не по верху. Левая колонка — заголовок, абзац
   и кнопка — почти на 370 точек короче панели со списком из четырёх пунктов.
   При выравнивании по верху вся разница собиралась внизу слева и читалась
   как забытый угол, а не как воздух.

   Прижать кнопку к низу нельзя: провал переезжает в середину колонки, между
   абзацем и кнопкой, и выглядит хуже — связь «текст → действие» рвётся. */
.slope .grid { gap: var(--space-48) var(--grid-gap-lg); align-items: center; }

/* На узких экранах колонки идут друг под другом — центрировать нечего,
   и растягивание по высоте даёт более предсказуемые отступы. */
@media (max-width: 1024px) {
  .slope .grid { align-items: stretch; }
}

/* Полупрозрачная карточка поверх изолиний */
.slope__panel {
  padding: var(--space-40);
  background: rgba(20, 23, 26, 0.72);
  /* blur держим маленьким: на слабых мобильных фильтр дорогой */
  backdrop-filter: blur(2px);
  border: var(--border-w) solid var(--c-border-dark);
}
/* Пункты списка: номер, название, пояснение. Отступ 20px и разделитель
   снизу — значения из макета. */
.slope__list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: var(--space-20);
  border-bottom: var(--border-w) solid var(--c-border-dark);
  color: var(--c-on-dark-2);
}
.slope__list li:last-child { border-bottom: 0; }
.slope__num { color: var(--c-brass); }
.slope__list strong { color: var(--c-parchment); font-weight: 500; }

@media (max-width: 1024px) {
  .slope__panel { padding: var(--space-24); }
}

/* --------------------------------------------------------------------------
   ФУТЕР
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--c-graphite);
  color: var(--c-parchment);
  padding-block: var(--space-64) var(--space-32);
}

.site-footer__grid {
  display: grid;
  gap: var(--grid-gap-lg) var(--grid-gap);
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  padding-bottom: var(--space-48);
  border-bottom: var(--border-w) solid var(--c-border-dark);
}

.site-footer__logo {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-parchment);
  border-bottom: 0;
}
.site-footer__slogan { margin-top: var(--space-16); color: var(--c-on-dark-3); max-width: 32ch; }

.site-footer__title { margin-bottom: var(--space-16); color: var(--c-on-dark-4); }
.site-footer__list li { margin-bottom: var(--space-12); }
.site-footer__list a { color: var(--c-on-dark-2); border-bottom: 0; transition: color var(--t-color); }
.site-footer__list a:hover { color: var(--c-brass); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-16);
  padding-top: var(--space-32);
  color: var(--c-on-dark-4);
}

@media (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-32); }

  /* Ссылки в футере — это 19px текста: попасть пальцем трудно, соседние
     пункты ловятся случайно. Разводим их до 44px по высоте. */
  .site-footer__list li { margin-bottom: 0; }
  .site-footer__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   КОМПОНЕНТЫ ВНУТРЕННИХ СТРАНИЦ
   Всё, что не встречается на главной: hero стилей, уровни готовности,
   факторы сметы, таблица сметы, галереи, фильтры, статья с оглавлением.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO 21:9 (страницы стиля и «О компании»)
   Фотография во всю ширину, текст прижат к низу поверх затемнения.
   -------------------------------------------------------------------------- */

.style-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  padding-block: var(--space-64);
  overflow: hidden;
  background-color: var(--c-graphite);
}
.style-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--c-graphite-light);
}
.style-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.style-hero .container { position: relative; z-index: var(--z-content); }

@media (max-width: 768px) {
  .style-hero { min-height: 380px; }
}

/* Хиро объекта: тот же style-hero, но выше и с размытым кадром.
   Blur на самой картинке, scale прячет размытую кромку по периметру.
   Затемнение мягче, чем на главной: под блюром фото уже не спорит
   с текстом, а совсем тёмная подложка убивала бы цвет интерьера. */
.style-hero--blur { min-height: 640px; }
.style-hero--blur .style-hero__media img {
  filter: blur(10px) saturate(1.05);
  transform: scale(1.08);
}
.hero__scrim--soft {
  background: linear-gradient(
    180deg,
    rgba(28, 32, 36, 0.28) 0%,
    rgba(28, 32, 36, 0.48) 50%,
    rgba(28, 32, 36, 0.86) 100%
  );
}
@media (max-width: 768px) {
  .style-hero--blur { min-height: 480px; }
}

/* --------------------------------------------------------------------------
   БЛОК «НЕ ВХОДИТ В СТОИМОСТЬ»
   Не мелкий шрифт внизу, а полноценная врезка: скрытые доплаты —
   главная претензия рынка к подрядчикам, и честный список закрывает
   возражение раньше, чем оно возникнет.
   -------------------------------------------------------------------------- */

.note-block {
  padding: var(--space-32);
  background-color: color-mix(in srgb, var(--c-brass) 8%, transparent);
  border-left: 2px solid var(--c-brass);
}

/* --------------------------------------------------------------------------
   ЛИПКАЯ КАРТОЧКА РАСЧЁТА
   Стоит справа от длинного текста лендинга (колонки 9–12). Текст читаемой
   ширины занимает семь колонок, и на широком экране справа оставалось
   40% пустоты через шесть разделов подряд. Карточка заполняет это место
   и держит точку входа в форму на каждом экране чтения. На узком экране
   прячется: там колонки идут друг под другом, а форма и CTA есть выше
   и ниже.
   -------------------------------------------------------------------------- */

.side-card {
  position: sticky;
  top: var(--sticky-top);
  padding: var(--space-32);
  border: 1px solid var(--border);
  background-color: color-mix(in srgb, var(--c-brass) 6%, transparent);
}
.side-card__list {
  margin: var(--space-20) 0 var(--space-24);
  padding: 0;
  list-style: none;
}
.side-card__list li + li {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}
.side-card .btn { width: 100%; }

@media (max-width: 1024px) {
  /* Прячем колонку целиком, а не карточку: пустая ячейка сетки
     оставляла в столбике лишний ряд с зазором 40 px под текстом. */
  .side-card-col { display: none; }
}

/* --------------------------------------------------------------------------
   ТЕКСТ ИЗ РЕДАКТОРА
   Содержимое, которое приходит из визуального редактора: заголовки,
   абзацы, списки, цитаты, картинки. Стилизуем по тегам — редактор
   не будет расставлять классы, и требовать этого от него бессмысленно.
   -------------------------------------------------------------------------- */

.rich-text > * + * { margin-top: var(--space-24); }

.rich-text h2 {
  margin-top: var(--space-48);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
/* Первому элементу текста верхний отступ не нужен: его даёт паддинг
   секции. Без этого правила h2 в начале текста добавлял 48 px к
   разрыву между секциями — на мобильном получалась дыра в 170 px. */
.rich-text > :first-child { margin-top: 0; }
.rich-text h3 {
  margin-top: var(--space-40);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

.rich-text p { color: var(--fg-2); }

.rich-text ul,
.rich-text ol {
  padding-left: var(--space-24);
  color: var(--fg-2);
}
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li + li { margin-top: var(--space-8); }
.rich-text li::marker { color: var(--c-brass); }

/* Цитата: левая граница латунью 2px, как в макете статьи */
.rich-text blockquote {
  margin: var(--space-32) 0;
  padding-left: var(--space-24);
  border-left: 2px solid var(--c-brass);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg);
}

.rich-text img,
.rich-text picture { margin-block: var(--space-32); }

.rich-text table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.rich-text th,
.rich-text td {
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

/* Списки состава работ: те же стили, но без верхнего отступа —
   они идут сразу под заголовком секции */
.rich-list ul { padding-left: var(--space-24); list-style: disc; color: var(--fg-2); }
.rich-list li + li { margin-top: var(--space-12); }
.rich-list li::marker { color: var(--c-brass); }

/* Список работ в две колонки на всю ширину сетки. В одной колонке
   на семь клеток он оставлял правую половину экрана пустой. */
@media (min-width: 1024px) {
  .rich-list--cols ul {
    column-count: 2;
    column-gap: var(--grid-gap-lg);
  }
  .rich-list--cols li { break-inside: avoid; }
  .rich-list--cols li + li { margin-top: 0; }
  .rich-list--cols li { padding-bottom: var(--space-12); }
}

/* --------------------------------------------------------------------------
   УРОВНИ ГОТОВНОСТИ
   -------------------------------------------------------------------------- */

.level {
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
  border: 1px solid var(--border);
}
/* Рекомендуемый уровень — единственная подсветка в блоке.
   Она работает именно потому, что одна. */
.level--featured { border-color: var(--c-brass); }

.level__price {
  margin: var(--space-12) 0 var(--space-24);
  color: var(--accent);
}
.level__list { color: var(--fg-2); }
.level__list li {
  padding-block: var(--space-8);
  border-top: 1px solid var(--border);
}
.level__list li:first-child { border-top: 0; }

/* --------------------------------------------------------------------------
   ФАКТОРЫ, ДВИГАЮЩИЕ СМЕТУ
   -------------------------------------------------------------------------- */

.factor {
  padding-top: var(--space-20);
  border-top: 1px solid var(--border);
}
.factor--accent { border-top-color: var(--c-brass); }
.factor--accent .factor__value { color: var(--accent); }

.factor__value { display: block; margin-bottom: var(--space-12); font-variant-numeric: tabular-nums; }
.factor__title { margin-bottom: var(--space-8); }
.factor__text  { color: var(--fg-2); }

/* --------------------------------------------------------------------------
   ТАБЛИЦА СМЕТЫ
   Пропорции колонок из макета: 40px | 1fr | 120–180px | 72–100px.
   -------------------------------------------------------------------------- */

/* Обёртка со своей прокруткой: на узком экране таблица не должна
   растягивать страницу и включать горизонтальный скролл всему документу */
.estimate-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.estimate {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.estimate th,
.estimate td {
  padding: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.estimate thead th {
  color: var(--fg-3);
  font-weight: 400;
  white-space: nowrap;
}
.estimate td:first-child { width: 40px; color: var(--fg-3); }

/* Числовые колонки: моноширинный, выравнивание по правому краю,
   табличные цифры — чтобы разряды выстроились по вертикали */
.estimate__num {
  width: 140px;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  white-space: nowrap;
}
.estimate th.estimate__num:last-child,
.estimate td.estimate__num:last-child { width: 88px; }

/* Четыре крупнейшие статьи — латунью. Они дают две трети суммы,
   и именно на них смотрят при оптимизации бюджета. */
.estimate__row--major td { color: var(--accent); }
.estimate__row--major td:nth-child(2) { color: var(--fg); }

.estimate tfoot td {
  border-top: 1px solid var(--border-2);
  border-bottom: 0;
  font-size: var(--fs-body);
}

/* --------------------------------------------------------------------------
   ВИТРИНА СТИЛЕЙ
   -------------------------------------------------------------------------- */

/* Колонка «как читать этот раздел»: пояснения к цифрам в карточках */
.legend {
  margin-top: var(--space-20);
  padding-top: var(--space-16);
  border-top: 1px solid var(--border);
  color: var(--fg-2);
}
.legend li + li { margin-top: var(--space-12); }

/* Строки характеристик в карточке стиля */
.card__specs-rows {
  margin: var(--space-12) 0 0;
  padding-top: var(--space-12);
  border-top: 1px solid var(--border);
}
.card__spec {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: 6px;
}
.card__spec dd { margin: 0; }

/* «Смотреть направление →» — визуальная метка, а не отдельная ссылка:
   кликабельна вся карточка, вторая ссылка только мешала бы скринридеру */
.card__more {
  margin-top: var(--space-12);
  color: var(--accent);
}

/* Восьмая ячейка витрины — призыв на песке */
.style-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-32);
  background-color: var(--c-sand);
}

/* --------------------------------------------------------------------------
   ТАБЛИЦА СРАВНЕНИЯ НАПРАВЛЕНИЙ
   Не <table>, а сетка: здесь нет заголовков строк, только четыре колонки
   с однотипными значениями, и на мобильном они должны складываться
   иначе, чем ячейки таблицы.
   -------------------------------------------------------------------------- */

.compare__head,
.compare__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(90px, 110px) minmax(110px, 140px) minmax(120px, 160px);
  gap: var(--space-24);
  align-items: baseline;
}
.compare__head {
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--border);
  color: var(--fg-3);
}
.compare__row {
  padding-block: 18px;
  border-bottom: 1px solid var(--border);
}
.compare__row:last-child { border-bottom: 0; }
.compare__num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  /* На узком экране четыре колонки не помещаются: заголовок занимает
     всю ширину, цифры выстраиваются под ним в три колонки */
  .compare__head { display: none; }
  .compare__row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
  .compare__row > *:first-child { grid-column: 1 / -1; }
  .compare__num { text-align: left; }
}

/* --------------------------------------------------------------------------
   НУМЕРОВАННЫЙ СПИСОК С КРУПНЫМИ НОМЕРАМИ
   «Как выбирать» на витрине стилей.
   -------------------------------------------------------------------------- */

.steps-list__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-24);
  padding-block: var(--space-24);
  border-top: 1px solid var(--border);
}
.steps-list__item:last-child { border-bottom: 1px solid var(--border); }
.steps-list__num { color: var(--fg-3); }
/* Первый шаг — латунью: с него начинается порядок действий */
.steps-list__item:first-child .steps-list__num { color: var(--accent); }
.steps-list__item p { margin-top: 6px; }

@media (max-width: 768px) {
  .steps-list__item { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-16); }
}

/* --------------------------------------------------------------------------
   ПРИЗНАКИ СТИЛЯ — карточки с верхней границей
   -------------------------------------------------------------------------- */

.spec-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-32);
}
.spec-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-16);
  border-top: 1px solid var(--border);
}
.spec-card__text { color: var(--fg-2); }

/* --------------------------------------------------------------------------
   КОНСТРУКТИВ — строки «метка … значение»
   Значение крупным моношрифтом справа: так пара читается как строка
   спецификации, а не как обычный текст.
   -------------------------------------------------------------------------- */

.spec-rows { margin: 0; }
.spec-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8) var(--space-24);
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--border);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row__key { color: var(--fg-3); }
.spec-row__value { margin: 0; color: var(--fg); text-align: right; }

/* --------------------------------------------------------------------------
   CTA БЕЗ ФОРМЫ (страница стиля)
   -------------------------------------------------------------------------- */

.cta-split {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-48);
}
.cta-split__text { flex: 1 1 420px; max-width: 52ch; }

/* --------------------------------------------------------------------------
   ГАЛЕРЕИ
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.gallery--square { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gallery--docs   { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Галерея стиля: крупный кадр на две колонки плюс вертикальный рядом,
   ниже ряд из четырёх. Раскладка из макета. */
.gallery--feature { grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }
.gallery--feature > *:first-child { grid-column: span 2; }
.gallery--quad    { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-16); }

@media (max-width: 768px) {
  .gallery--feature { grid-template-columns: 1fr; }
  .gallery--feature > *:first-child { grid-column: auto; }
}

/* Кадр — кнопка: сбрасываем всё, что браузер добавляет кнопкам */
.gallery__item {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-card);
}
.gallery__item:hover img { transform: scale(1.03); }

/* --------------------------------------------------------------------------
   ПАНЕЛЬ ФИЛЬТРОВ
   -------------------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-24) var(--space-40);
  padding-block: var(--space-32);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.filters__group { display: flex; flex-direction: column; gap: var(--space-12); }
.filters__label { color: var(--fg-3); }
.filters__meta {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-left: auto;
  align-self: center;
}

/* Пустая выдача */
.empty-state {
  padding: var(--space-64) 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   ЛЕНТА-ХРОНОЛОГИЯ («О компании»)
   -------------------------------------------------------------------------- */

.timeline { display: grid; gap: 0; }
.timeline__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-32);
  padding-block: var(--space-24);
  border-top: 1px solid var(--border);
}
.timeline__item:last-child { border-bottom: 1px solid var(--border); }
.timeline__year { color: var(--accent); }

@media (max-width: 768px) {
  .timeline__item { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* --------------------------------------------------------------------------
   ОТЗЫВЫ
   -------------------------------------------------------------------------- */

.review {
  margin: 0;
  padding: var(--space-32);
  border: 1px solid var(--border);
}
.review__text {
  margin: 0 0 var(--space-24);
  color: var(--fg);
  /* Кавычки-ёлочки добавляем средствами CSS: в тексте отзыва их
     может не быть, а верстать кавычки руками редактор не обязан */
  quotes: '«' '»';
}
.review__text::before { content: open-quote; }
.review__text::after  { content: close-quote; }
.review__author { color: var(--fg-3); }

/* --------------------------------------------------------------------------
   КАРТА НА СТРАНИЦЕ КОНТАКТОВ
   Статичная картинка со ссылкой вместо iframe: встроенные карты тянут
   около мегабайта скриптов и ставят сторонние куки на каждый заход,
   хотя маршрут строят единицы.
   -------------------------------------------------------------------------- */

.map-link {
  position: relative;
  display: block;
  overflow: hidden;
}
.map-link__hint {
  position: absolute;
  left: var(--space-16);
  bottom: var(--space-16);
  padding: var(--space-8) var(--space-16);
  background: var(--c-graphite);
  color: var(--c-parchment);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   СТАТЬЯ: ОГЛАВЛЕНИЕ И КОЛОНКИ
   Раскладка из макета: оглавление 3 из 12 колонок, текст 5–11.
   -------------------------------------------------------------------------- */

.col-toc     { grid-column: 1 / span 3; }
.col-article { grid-column: 5 / span 7; }

.toc {
  position: sticky;
  /* Липкая шапка 72px + воздух */
  top: 96px;
}
.toc__title { margin-bottom: var(--space-16); color: var(--fg-3); }
.toc__list { border-left: 1px solid var(--border); }
.toc__item a {
  display: block;
  padding: var(--space-8) 0 var(--space-8) var(--space-16);
  margin-left: -1px;
  border: 0;
  border-left: 1px solid transparent;
  color: var(--fg-2);
  transition: color var(--t-color), border-color var(--t-color);
}
.toc__item a:hover { color: var(--fg); }

/* Активный пункт — латунью, с линией слева. Класс ставит модуль toc.js */
.toc__item a.is-active {
  color: var(--accent);
  border-left-color: var(--c-brass);
}

/* Вложенные заголовки h3 — с дополнительным отступом */
.toc__item--h3 a { padding-left: var(--space-32); font-size: var(--fs-mono-s); }

/* Врезка-CTA внутри статьи */
.inset-cta {
  margin-top: var(--space-48);
  padding: var(--space-32);
  background-color: var(--c-sand);
}

@media (max-width: 1024px) {
  .col-toc, .col-article { grid-column: 1 / -1; }

  /* На мобильном липкое оглавление заняло бы весь экран.
     Показываем его обычным блоком в начале статьи. */
  .toc {
    position: static;
    padding-bottom: var(--space-32);
    margin-bottom: var(--space-32);
    border-bottom: 1px solid var(--border);
  }
}

/* --------------------------------------------------------------------------
   ПОСТРАНИЧНАЯ НАВИГАЦИЯ
   -------------------------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: center;
}

/* --------------------------------------------------------------------------
   КВИЗ: ВЕРТИКАЛЬНЫЙ СПИСОК ШАГОВ
   Состояния переключает quiz.js.
   -------------------------------------------------------------------------- */

.quiz-nav { counter-reset: quiz-step; }
.quiz-nav__item {
  counter-increment: quiz-step;
  padding-block: var(--space-8);
  color: var(--fg-4, var(--c-on-dark-4));
  transition: color var(--t-color);
}
/* Номер шага моноширинным — как все служебные цифры на сайте */
.quiz-nav__item::before {
  content: counter(quiz-step, decimal-leading-zero) '  ';
  font-family: var(--f-mono);
  font-size: var(--fs-mono-s);
}
/* Отвеченные шаги ярче невыполненных, но тусклее текущего */
.quiz-nav__item.is-done    { color: rgba(242, 239, 234, 0.86); }
.quiz-nav__item.is-current { color: var(--c-brass); }

/* На телефоне колонки складываются друг под друга, и этот список из
   двенадцати строк вклинивается между заголовком и первым вопросом —
   почти целый экран прокрутки до того, как человек увидит, что от него
   хотят. Полезной работы он там не делает: где ты находишься, показывают
   полоса прогресса и счётчик «шаг 1 из 12» прямо над вопросом.

   На широком экране список остаётся: там он стоит сбоку, ничему не мешает
   и показывает, что вопросы конечны. */
@media (max-width: 1024px) {
  .quiz-nav { display: none; }
}

/* --------------------------------------------------------------------------
   ЧИПЫ-ССЫЛКИ (услуги на объекте)
   -------------------------------------------------------------------------- */

.services-chips { margin-top: var(--space-40); }
a.chip { text-decoration: none; }

/* --------------------------------------------------------------------------
   ФОРМА ЗАЯВКИ
   -------------------------------------------------------------------------- */

.lead-form { max-width: 520px; }

/* Плитка-переключатель на основе radio: сам input скрыт, состояние
   читается через :has() у обёртки. Без :has() пришлось бы вешать
   класс скриптом — и форма перестала бы работать без JS. */
.quiz__option:has(input:checked) {
  border-color: var(--c-brass);
  background-color: var(--c-brass-a12);
}
.quiz__option:has(input:focus-visible) {
  outline: 2px solid var(--c-brass);
  outline-offset: 2px;
}


/* ==========================================================================
   МОБИЛЬНЫЕ ПРАВКИ
   Собраны в конце файла, а не размазаны по компонентам: так видно весь
   объём отличий мобильной версии и понятно, что именно проверять
   на телефоне после правок.
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Площадь нажатия ---------------------------------------------------
     Минимум 44px — это не «рекомендация Apple», а порог, ниже которого
     промахи становятся систематическими: подушечка пальца накрывает
     примерно 45–57px, и пользователь не видит, куда именно попал. */
  .chip {
    min-height: 44px;
  }

  /* Логотип, телефон в футере и хлебные крошки — тоже ссылки, и по ним
     промахиваются ровно так же, как по чипам. Высота строки 20–28px
     под палец мала.

     Заголовки карточек в этот список не входят намеренно: карточка
     кликабельна целиком через псевдоэлемент .card__link::after,
     то есть площадь нажатия равна площади карточки. Инлайновые ссылки
     внутри текста (например, «объект» в подписи отзыва) тоже остаются
     как есть — растянуть их по высоте значит разорвать строку. */
  .site-header__logo,
  .site-footer address a,
  .crumbs a,
  .crumbs span[aria-current] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Разделители «/» — обычные span без своей высоты. В flex-контейнере
     они растягиваются и текст уезжает к верхней кромке, пока ссылки
     рядом занимают 44px. Центрируем по вертикали. */
  .crumbs {
    gap: 0 var(--space-8);
    align-items: center;
  }

  /* --- Таблица сметы -----------------------------------------------------
     На узком экране таблица уезжала вправо: пользователь видел названия
     этапов, но не видел ни сумм, ни долей — то есть ровно то, ради чего
     таблицу и открывают. Убираем минимальную ширину, прячем колонку
     с номером (она декоративная) и сжимаем шрифт: три оставшиеся
     колонки помещаются в 375px. */
  .estimate {
    min-width: 0;
    font-size: 13px;
  }
  .estimate th,
  .estimate td {
    padding: var(--space-12) var(--space-8);
  }
  /* Номер этапа — служебная колонка, на мобильном не нужна */
  .estimate thead th:first-child,
  .estimate tbody td:first-child,
  .estimate tfoot td:first-child {
    display: none;
  }
  .estimate__num {
    width: auto;
    min-width: 84px;
  }
  .estimate th.estimate__num:last-child,
  .estimate td.estimate__num:last-child {
    width: auto;
    min-width: 44px;
  }

  /* --- Галереи -----------------------------------------------------------
     Квадратные кадры при минимуме 200px схлопывались в одну колонку —
     галерея из восьми фотографий превращалась в восемь экранов прокрутки. */
  .gallery--square { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .gallery--docs   { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .gallery         { gap: var(--space-12); }

  /* --- Лайтбокс ----------------------------------------------------------
     Стрелки по бокам на узком экране налезали на фотографию.
     Убираем их: листание пальцем работает (свайпы в lightbox.js),
     а кнопка закрытия остаётся. */
  .lightbox__nav { display: none; }
  .lightbox { padding: var(--space-16); }
  .lightbox__close { top: var(--space-12); right: var(--space-12); }

  /* --- Панель фильтров ---------------------------------------------------
     Счётчик и «сбросить» уезжали в правый край отдельной строкой —
     на мобильном ставим их в общий поток. */
  .filters__meta { margin-left: 0; }

  /* --- Врезка в статье ---------------------------------------------------
     32px внутренних полей на 375px оставляют 279px под текст. */
  .inset-cta { padding: var(--space-20); }
  .note-block { padding: var(--space-20); }
  .metric { padding: var(--space-20); }
  .level { padding: var(--space-20); }
  .review { padding: var(--space-20); }
  .calc__result { padding: var(--space-20); }
}

/* ==========================================================================
   ОБЪЕКТ-КЕЙС СО СМЕТОЙ (шаблон project-case)
   Один в один по макету «Объект - квартира 31 м².dc.html» (04.09.2026).
   Разметка секций — в шаблоне; здесь то, чего нет в общих компонентах.
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#zayavka, #smeta { scroll-margin-top: 88px; }

/* 01. Hero: 40px сверху, кадр 16:9 прижат к низу секции */
.case-hero-section { padding: 40px 0 0; }
.case-hero { align-items: start; margin-top: var(--space-40); }
.case-hero__text { display: flex; flex-direction: column; gap: var(--space-24); }
.case-hero__text h1, .case-hero__text p { margin: 0; }
.case-hero__text .btn-row { margin: 0; }
.case-hero-media { margin-top: var(--space-40); }
.case-hero-media picture { aspect-ratio: 16 / 9; overflow: hidden; }
.case-hero-media img { height: 100%; object-fit: cover; }

.case-badges { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.case-badge {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--c-border-light-2);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}
.case-badge--accent { border-color: var(--c-brass); background-color: var(--c-brass-a12); color: var(--c-brass-link); }
.t-dark .case-badge { border-color: var(--c-border-dark); color: var(--c-parchment); }

/* Панель «объект в цифрах» */
.case-numbers {
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
  background-color: var(--c-graphite);
  color: var(--c-parchment);
}
.case-numbers__brow { padding-bottom: var(--space-20); color: var(--c-on-dark-3); }
.case-numbers__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-16) 0;
  border-top: 1px solid var(--c-border-dark);
}
.case-numbers__row--last { border-bottom: 1px solid var(--c-border-dark); }
.case-numbers__row .t-mono-s { color: var(--c-on-dark-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.case-numbers__big { font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -0.02em; }
.case-numbers__mid { font-family: var(--f-display); font-weight: 600; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.01em; }
.case-numbers__foot { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-24); color: var(--c-on-dark-2); }
.case-numbers__tel { font-weight: 500; font-size: 17px; color: var(--c-brass); border-bottom: 1px solid var(--c-brass-a40); align-self: flex-start; }

/* 02. Слайдер сравнения */
.case-compare {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--c-graphite-light);
  user-select: none;
}
.case-compare__layer { position: absolute; inset: 0; }
.case-compare__layer picture, .case-compare__layer img { width: 100%; height: 100%; object-fit: cover; }
.case-compare__layer--after { clip-path: inset(0 0 0 var(--split)); }
.case-compare__line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; background: var(--c-brass); pointer-events: none; }
.case-compare__knob {
  position: absolute; top: 50%; left: var(--split);
  transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-brass); color: var(--c-graphite);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 16px;
  pointer-events: none;
}
.case-compare__tag {
  position: absolute; top: 16px;
  padding: 8px 12px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  pointer-events: none;
}
.case-compare__tag--before { left: 16px; background: rgba(20, 23, 26, 0.72); color: var(--c-parchment); }
.case-compare__tag--after { right: 16px; background: rgba(184, 135, 63, 0.9); color: var(--c-graphite); }
.case-compare__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.case-compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; cursor: ew-resize; }
.case-compare__range::-moz-range-thumb { width: 44px; height: 400px; border: 0; background: transparent; cursor: ew-resize; }
.case-compare__range:focus-visible { opacity: 0.01; outline: 0; }
.case-compare:has(.case-compare__range:focus-visible) { outline: 2px solid var(--c-brass); outline-offset: 2px; }

/* Пары «до → после» под слайдером */
.case-pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-48) var(--grid-gap);
  margin-top: var(--space-40);
}
.case-pair { margin: 0; }
.case-pair__media { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.case-pair figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-12); letter-spacing: 0.08em; text-transform: uppercase; }
.case-pair p { margin-top: var(--space-8); }

/* 03. Разбор */
.case-story { display: flex; flex-direction: column; gap: var(--space-32); }
.case-story__block { display: flex; flex-direction: column; gap: var(--space-16); }
.case-story__block--line { border-top: 1px solid var(--c-border-light); padding-top: var(--space-32); }
.case-story .t-mono-s.t-faint { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.case-stage { display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--c-brass); padding: 4px 0 4px 20px; }
.case-stage__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.3; }
.case-specs { margin: 0; display: flex; flex-direction: column; }
.case-specs > div {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 14px 0; border-top: 1px solid var(--c-border-light);
}
.case-specs > div:last-child { border-bottom: 1px solid var(--c-border-light); }
.case-specs dt { text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3); }
.case-specs dd { margin: 0; font-family: var(--f-mono); font-weight: 500; font-size: 20px; text-align: right; }
.case-specs__accent dt, .case-specs__accent dd { color: var(--c-brass-link); }
.case-services { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.case-services .t-mono-s { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }

/* 04. Галерея: ряды как в макете */
.case-gallery { display: flex; flex-direction: column; gap: var(--space-32); }
.case-gallery__head { display: flex; flex-wrap: wrap; gap: var(--space-24); justify-content: space-between; align-items: flex-end; }
.case-gallery__head h2 { margin: 0; }
.case-gallery__head .section-head__brow { margin-bottom: var(--space-16); }
.case-gallery__lead { grid-template-columns: 2fr 1fr; gap: var(--space-16); }
.case-gallery__four { grid-template-columns: repeat(4, 1fr); gap: var(--space-16); }
.case-gallery__wide { grid-template-columns: 1fr 2fr; gap: var(--space-16); align-items: start; }
.case-gallery__sub { display: flex; flex-direction: column; gap: var(--space-16); }
.case-gallery__sub .t-mono-s { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.case-more { font-weight: 500; font-size: 17px; }

/* 05. Смета */
.case-estimate-head { margin-bottom: var(--space-40); }
.case-estimate-head h2 { margin-top: var(--space-16); }
.case-price-box { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-32); background-color: var(--c-sand); }
.case-price-box > div { display: flex; flex-direction: column; gap: 4px; }
.case-price-box__num { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -0.02em; }
.case-price-box .btn { align-self: flex-start; }
.case-price-box p { margin: 0; }

.case-estimate { width: 100%; border-collapse: collapse; }
.case-estimate th, .case-estimate td { padding: 18px 12px 18px 0; border-bottom: 1px solid var(--c-border-light); text-align: left; vertical-align: middle; }
.case-estimate thead th { padding: 0 12px 12px 0; font-weight: 400; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.case-estimate td:first-child { width: 40px; color: var(--fg-3); }
.case-estimate td:nth-child(2) { font-size: 17px; line-height: 28px; }
.case-estimate__num { text-align: right !important; font-family: var(--f-mono); font-weight: 500; font-size: 20px; white-space: nowrap; width: 150px; }
.case-estimate td:last-child { width: 180px; padding-left: 24px; white-space: nowrap; }
.case-estimate td:last-child > * { vertical-align: middle; }
.case-estimate__bar { display: inline-block; width: 90px; height: 6px; margin-right: 10px; background: rgba(28, 32, 36, 0.12); position: relative; vertical-align: middle; }
.case-estimate__bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--share, 0%); background: rgba(28, 32, 36, 0.4); }
.case-estimate__bar--major::after { background: var(--c-brass); }
.case-estimate td:last-child .t-mono-s { color: var(--fg-2); }
.case-estimate__total td { padding-top: 24px; }
.case-estimate__total td:nth-child(2) { font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.34; }
.case-estimate__total .case-estimate__num { font-size: clamp(21px, 2.4vw, 28px); }
.case-estimate__m2 td { border-bottom: 0; }
.case-estimate__m2 td:nth-child(2) { font-family: var(--f-display); font-weight: 600; font-size: clamp(15px, 1.15vw, 17px); }

/* 06. Что видно */
.case-points { list-style: none; margin: 0; padding: 0; }
.case-points li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-24); padding: var(--space-24) 0; border-top: 1px solid var(--c-border-dark); font-size: 17px; line-height: 28px; color: rgba(242, 239, 234, 0.86); }
.case-points li:last-child { border-bottom: 1px solid var(--c-border-dark); }
.case-points__num { font-family: var(--f-mono); font-weight: 500; font-size: 20px; color: var(--c-on-dark-3); }
.case-points__cta { display: flex; flex-wrap: wrap; gap: var(--space-24); align-items: center; justify-content: space-between; padding-top: var(--space-32); }
.case-points__cta p { margin: 0; }

/* 07. Форма */
.case-lead { display: flex; flex-direction: column; gap: var(--space-24); }
.case-lead h2, .case-lead p { margin: 0; }
.case-lead .t-mono-s.t-faint { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.case-lead__block { display: flex; flex-direction: column; gap: var(--space-12); border-top: 1px solid var(--c-border-light); padding-top: var(--space-24); }
.case-lead__step { display: flex; gap: var(--space-16); align-items: baseline; }
.case-lead__contacts { flex-direction: row; flex-wrap: wrap; align-items: center; }
.case-lead__tel { font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); }
.case-lead__msg { display: flex; gap: var(--space-8); }
.case-form { padding: var(--space-40); background-color: var(--c-graphite); color: var(--c-parchment); }

.area-pick { border: 0; padding: 0; margin: 0 0 var(--space-24); min-width: 0; }
.area-pick legend { padding: 0; margin-bottom: var(--space-12); }
.area-pick__row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.area-pick__opt { position: relative; display: block; cursor: pointer; }
.area-pick__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.area-pick__opt span {
  display: block; height: 44px; padding: 0 16px; line-height: 42px;
  border: 1px solid rgba(242, 239, 234, 0.3); border-radius: var(--radius);
  font-size: 15px; color: var(--c-parchment);
  transition: border-color 0.15s, background-color 0.15s;
}
.area-pick__opt input:checked + span { border-color: var(--c-brass); background-color: var(--c-brass-a12); }
.area-pick__opt input:focus-visible + span { outline: 2px solid var(--c-brass); outline-offset: 2px; }

/* Фиксированная панель */
.case-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background-color: var(--c-graphite); color: var(--c-parchment); border-top: 1px solid var(--c-brass-a40); }
.case-bar__inner { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding-block: var(--space-12); }
.case-bar__left { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; }
.case-bar__price { font-family: var(--f-mono); font-weight: 500; font-size: 20px; }
.case-bar__note { color: var(--c-on-dark-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.case-bar__right { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.case-bar__tel { font-weight: 500; font-size: 17px; color: var(--c-parchment); white-space: nowrap; }
.page-case .site-footer { padding-bottom: 160px; }

@media (max-width: 1024px) {
  .case-gallery__four { grid-template-columns: repeat(2, 1fr); }
  .case-estimate td:nth-child(2) { font-size: 15px; line-height: 24px; }
}
@media (max-width: 820px) {
  .case-bar__note, .case-bar__tel { display: none; }
  .case-pairs, .case-gallery__lead, .case-gallery__wide { grid-template-columns: 1fr; }
  .case-numbers { padding: var(--space-24); }
  .case-form { padding: var(--space-24); }
  .case-estimate td:last-child { width: auto; padding-left: 12px; }
  .case-estimate__bar { width: 48px; }
  .case-estimate__num { width: auto; font-size: 16px; }
}
@media (max-width: 480px) {
  .case-gallery__four { grid-template-columns: 1fr; }
  .case-estimate thead { display: none; }
  .case-estimate td:first-child { display: none; }
}