/* Lito — стили страницы.
 *
 * Собрано из согласованного превью макета 2 «Витрина»: preview/assets/base.css
 * плюс стили блоков, которые на странице есть. Порядок тот же, в котором их
 * подключала сборка превью (scripts/build-preview.py): основа, затем блоки
 * сверху вниз по странице. Дальше правится здесь — preview/ остался снимком
 * того, что принял заказчик, и больше не трогается.
 *
 * Оформление выбрано 08.10.2026 и зашито в токены: Montserrat, зелёный акцент
 * с логотипа, узор на тёмных блоках, текстовый масштаб ужат на 6% (--type).
 * Панель подбора и проигравшие варианты — в коммите 3db3b3d.
 *
 * Адаптив у этой страницы — медиазапросами (1280/1000/900/860/760/560),
 * а НЕ тремя холстами каркаса: макет согласован в таком виде, и переводить
 * две с половиной тысячи строк на var(--k) значило бы пересобрать вёрстку,
 * которую заказчик уже принял. Инлайн-скрипт холстов из каркаса в layout.php
 * поэтому не выводится.
 *
 * 1rem = 10px. Все размеры в rem, цвета — только из токенов :root.
 */

/* =========================================================== основа: токены, типографика, сетка, общие компоненты === */

/* Lito — основа для всех макетов превью.
   Токены, типографика, сетка и общие компоненты. Блоки добавляют своё поверх
   и ничего отсюда не переопределяют.

   1rem = 10px. Все размеры в rem.

   Палитра построена от логотипа: фирменный зелёный снят с него пипеткой,
   #55ac32. В разметке цветов быть не должно — всё отсюда.

   Оформление выбрано 08.10.2026: Montserrat, зелёный акцент, узор на тёмных
   блоках. Панель подбора и проигравшие варианты удалены — они в коммите
   3db3b3d, если понадобится вернуться к сравнению. */

/* Montserrat выбран заказчиком 08.10.2026. Вариативный: один файл на всю
   вилку 100–900. Урезан до латиницы, кириллицы и той типографики, которой
   набрана страница, — 38 кб вместо 672. Лицензия OFL, коммерческое
   использование разрешено.
   Jost проигран и удалён; если понадобится вернуть — коммит 3db3b3d. */
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* бумага: тёплый не-белый, чтобы фото на белом фоне читались как объекты */
    --paper:      #fbf9f5;
    --paper-2:    #ffffff;
    --paper-3:    #f2eee6;   /* чередование секций, подложки */
    --paper-4:    #16150f;   /* тёмная секция */

    --ink:        #16150f;
    --ink-2:      #4d493f;
    /* Приглушённый текст: подписи, надзаголовки, мелкие пояснения.
       Было #807a6d — 4.06:1 на основном фоне и 3.69:1 на бежевой подложке,
       то есть ниже порога 4.5:1, который требует наш же SPEC. Приглушённым
       набрано немало текста на странице, так что мимо правила проходил
       не один блок, а почти каждый. Тот же оттенок, затемнённый на 12%:
       5.03 / 5.28 / 4.57:1 на трёх светлых фонах. */
    --ink-3:      #716b60;
    --ink-on-dark:#f2eee6;
    /* приглушённый текст и волосяные линии на тёмной секции: на --paper-4
       оттенки берутся прозрачностью, а не отдельными непрозрачными цветами —
       иначе их пришлось бы пересчитывать при каждой смене фона */
    --ink-on-dark-2: rgba(242, 238, 230, .68);
    --line-on-dark:  rgba(255, 255, 255, .14);

    --line:       #e4ded1;
    --line-2:     #cfc7b6;

    /* Фирменный зелёный с логотипа. Светлый и звонкий: на кнопке под белым
       текстом даёт контраст 2.9:1, то есть для текста не годится. Поэтому
       он работает графикой — логотип, цифры, акцентные линии. */
    --brand:      #55ac32;

    /* Кнопки — тот же цвет, уведённый в глубину: белый текст даёт 5.6:1,
       норма выдержана, и родство с логотипом видно сразу. */
    --accent:     #37761f;
    --accent-2:   #2b5c18;
    --accent-ink: #ffffff;

    /* Тёплое дерево. Осталось за одним: акценты на тёмной секции, где
       зелёный с логотипа соседствует с зеленью принтов на фасадах. */
    --wood:       #b5884f;

    /* коричневым помечено то, чего у нас пока нет от заказчика */
    --warn:       #8a4b2a;
    --warn-bg:    #f6efe7;

    --r-s: 0.6rem;
    --r-m: 1.2rem;
    --r-l: 2rem;

    --shadow: 0 0.2rem 1.2rem rgba(22, 21, 15, .06);
    --shadow-2: 0 1.2rem 4rem rgba(22, 21, 15, .14);

    --head-h: 7.2rem;

    --ease: cubic-bezier(.22, .61, .36, 1);

    --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;

    /* У Montserrat широкие знаки и крупная строчная: на одном и том же кегле
       он занимает заметно больше места, чем системный, которым набирался
       макет. Весь текстовый масштаб ужат на 6% — размеры шрифта, но не
       отступы: сжимать заодно и воздух значило бы менять раскладку,
       а её заказчик принял. */
    --type: .94;

    /* Цвет акцентного слова в заголовке. Красится одно слово, несущее смысл,
       а не весь заголовок. Значения подобраны так, чтобы каждое держало
       контраст и на трёх светлых фонах, и на тёмной секции: ни один вариант
       не опускается ниже 3:1, порога для крупного жирного текста.
       Выбран зелёный — он от логотипа (08.10.2026). Золотой #9a6f33
       и красный #d03a2c проиграли; вернуть — коммит 3db3b3d. */
    --hl: #419026;

    --head-weight: 800;

    /* Подложка тёмной секции: тонкая сетка плюс мягкое свечение в фирменном
       зелёном. Сетка — намёк на чертёж корпуса, свечение даёт глубину,
       чтобы плоскость не выглядела залитой краской. Рисуется градиентами,
       без единого файла.
       Вариант с репродукцией на фасаде проигран; вернуть — коммит 3db3b3d. */
    --dark-layer:
        radial-gradient(60rem 40rem at 85% 0%, rgba(85,172,50,.16), transparent 70%),
        radial-gradient(50rem 36rem at 5% 100%, rgba(255,255,255,.05), transparent 70%),
        linear-gradient(rgba(255,255,255,.035) .1rem, transparent .1rem),
        linear-gradient(90deg, rgba(255,255,255,.035) .1rem, transparent .1rem);
    --dark-size: auto, auto, 4.8rem 4.8rem, 4.8rem 4.8rem;
    /* Свечения не повторяются, сетка повторяется — иначе она была бы
       одной полоской в углу. */
    --dark-repeat: no-repeat, no-repeat, repeat, repeat;
}

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

html {
    font-size: 62.5%;          /* 1rem = 10px */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: calc(1.7rem * var(--type));
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

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

/* Без этого модалка каталога и просмотр фото видны всегда. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
    margin: 0;
    color: var(--ink);
    font-weight: var(--head-weight);
    letter-spacing: -0.02em;
    line-height: 1.12;
    text-wrap: balance;
}

h1 { font-size: calc(5.6rem * var(--type)); }
h2 { font-size: calc(3.8rem * var(--type)); }
h3 { font-size: calc(2.2rem * var(--type)); letter-spacing: -0.01em; line-height: 1.28; }
h4 { font-size: calc(1.8rem * var(--type)); letter-spacing: 0; line-height: 1.35; }

p { margin: 0 0 1.6rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

b, strong { color: var(--ink); font-weight: 600; }

ul, ol { margin: 0 0 1.6rem; padding-left: 2.2rem; }
li { margin-bottom: 0.8rem; }

/* ----------------------------------------------------------------- сетка */

.container {
    width: 100%;
    max-width: 128rem;
    margin: 0 auto;
    padding: 0 2.4rem;
}
.container--narrow { max-width: 86rem; }

.section { padding: 9.6rem 0; }
.section--tight { padding: 6.4rem 0; }
.section--alt { background: var(--paper-3); }
.section--white { background: var(--paper-2); }
/* Тёмная секция. Сплошная заливка читается плоско, поэтому поверх неё
   кладётся слой-подложка --dark-layer. Разметку блоков она не трогает —
   только фон.
   Слой лежит под содержимым и не ловит события. */
.section--dark {
    position: relative;
    isolation: isolate;
    background: var(--paper-4);
    color: var(--ink-on-dark);
}
.section--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--dark-layer);
    background-size: var(--dark-size, auto);
    background-position: var(--dark-pos, center);
    background-repeat: var(--dark-repeat, no-repeat);
    opacity: var(--dark-opacity, 1);
    mix-blend-mode: var(--dark-blend, normal);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--dark b, .section--dark strong { color: #fff; }

/* Шапка фиксированная всегда: переключение absolute/fixed по скроллу
   «отрывает» её на iOS. Первая секция страницы отступает на её высоту. */
.section--first { padding-top: calc(var(--head-h) + 6.4rem); }

.grid { display: grid; gap: 2.4rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------- типографика */

.eyebrow {
    display: block;
    margin-bottom: 1.6rem;
    font-size: calc(1.3rem * var(--type));
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.section--dark .eyebrow { color: var(--wood); }

.lead {
    font-size: calc(2rem * var(--type));
    line-height: 1.5;
    color: var(--ink-2);
}
.section--dark .lead { color: var(--ink-on-dark); }

.small { font-size: calc(1.4rem * var(--type)); line-height: 1.5; color: var(--ink-3); }

.head { max-width: 72rem; margin-bottom: 4.8rem; }
.head p { margin-top: 1.6rem; }

/* ----------------------------------------------------------- компоненты */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.6rem 3.2rem;
    border: 0.1rem solid transparent;
    border-radius: var(--r-s);
    font: inherit;
    font-size: calc(1.6rem * var(--type));
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease),
                border-color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(0.1rem); }

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

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }

.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.section--dark .btn--ghost:hover { border-color: #fff; }

.btn--sm { padding: 1.1rem 2rem; font-size: 1.4rem; }

.btns { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }

.card {
    background: var(--paper-2);
    border: 0.1rem solid var(--line);
    border-radius: var(--r-m);
    padding: 3.2rem;
}
.section--white .card { background: var(--paper); }
.section--dark .card {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.12);
}

/* Крупная цифра-факт: год, площадь, количество позиций. */
.stat { }
.stat__n {
    display: block;
    font-size: 4.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.section--dark .stat__n { color: var(--wood); }
.stat__l { display: block; margin-top: 0.8rem; font-size: 1.5rem; color: var(--ink-3); }
.section--dark .stat__l { color: rgba(242,238,230,.7); }

/* Чего у нас пока нет от заказчика. В превью видно намеренно:
   на боевой странице такого остаться не должно. */
.need {
    display: block;
    margin-top: 1.2rem;
    padding: 1rem 1.4rem;
    border-left: 0.3rem solid var(--warn);
    border-radius: 0 var(--r-s) var(--r-s) 0;
    background: var(--warn-bg);
    color: var(--warn);
    font-size: 1.4rem;
    font-style: normal;
    line-height: 1.45;
}
.need::before { content: "нужно от заказчика: "; font-weight: 600; }
.section--dark .need { background: rgba(181,136,79,.14); color: #d9ac72; }

/* Появление при прокрутке. Класс несёт ТОЛЬКО прозрачность и сдвиг:
   любое оформление здесь разъедется по всем блокам сразу. */
.reveal {
    opacity: 0;
    transform: translateY(1.6rem);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* Акцентное слово в заголовке. Красится одно слово, несущее основную
   смысловую нагрузку, а не весь заголовок: выделенный целиком заголовок
   перестаёт выделять. Тег <b>, а не <span>: слово действительно несёт
   больший вес, и разметка это говорит. */
.hl { color: var(--hl); font-weight: inherit; }

/* Для скринридеров. */
.vh {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- адаптив */

@media (max-width: 1000px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    h1 { font-size: calc(4.4rem * var(--type)); }
    h2 { font-size: calc(3.2rem * var(--type)); }
}

@media (max-width: 760px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .section { padding: 6.4rem 0; }
    .section--tight { padding: 4.8rem 0; }
    .section--first { padding-top: calc(var(--head-h) + 3.2rem); }
    .head { margin-bottom: 3.2rem; }
}

@media (max-width: 560px) {
    .container { padding: 0 1.6rem; }
    h1 { font-size: calc(3.4rem * var(--type)); }
    h2 { font-size: calc(2.6rem * var(--type)); }
    h3 { font-size: calc(2rem * var(--type)); }
    body { font-size: calc(1.6rem * var(--type)); }
    .lead { font-size: calc(1.8rem * var(--type)); }
    .card { padding: 2.4rem; }
    .btn { padding: 1.4rem 2.4rem; }
    .btns .btn { width: 100%; }
    .stat__n { font-size: 3.6rem; }
}

/* =========================================================== шапка === */

/* blocks/header.css — шапка.
   Все селекторы начинаются с .b-header. Цветов и px в объявлениях нет:
   только var(--…) и rem. px остались лишь в точках адаптива, как в base.css. */

.b-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 90;
    display: flex;
    align-items: center;
    height: var(--head-h);
    background: transparent;
    transition: background .25s var(--ease), box-shadow .25s var(--ease);
}

/* Прокрутили вниз — появляется фон и тонкая нижняя линия.
   Линия внутренней тенью, чтобы не сдвигать содержимое шапки на 0.1rem. */
.b-header.is-scrolled {
    background: var(--paper);
    box-shadow: inset 0 -0.1rem 0 var(--line), var(--shadow);
}

.b-header__inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 3.2rem;
}

/* ------------------------------------------------------------------ логотип */

.b-header__logo {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    text-decoration: none;
    line-height: 1;
}
/* Логотип картинкой. Высоту задаём мы, ширину считает браузер по пропорции
   исходника — 560x280, то есть ровно 2:1. Файл отдаём вдвое крупнее показа:
   на плотных экранах рукописный контур иначе мылится.

   align-self обязателен. Родитель — колоночный флекс, align-items у него
   по умолчанию stretch, и картинку растягивало на всю ширину колонки:
   вместо 56x28 выходило 183x28, знак расплывался вшестеро. width: auto
   не спасает — он считается уже от растянутой ширины. */
.b-header__mark {
    display: block;
    align-self: flex-start;
    height: 4rem;
    width: auto;
    aspect-ratio: 2 / 1;
}
.b-header__tag {
    margin-top: 0.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
}

/* --------------------------------------------------------------------- меню */

.b-header__nav {
    display: flex;
    align-items: center;
    gap: 2.8rem;
    margin-left: auto;
}

.b-header__link {
    position: relative;
    padding: 0.6rem 0;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s var(--ease);
}
.b-header__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0.1rem;
    background: var(--accent);
    transition: width .2s var(--ease);
}
.b-header__link:hover { color: var(--ink); }
.b-header__link:hover::after { width: 100%; }

/* -------------------------------------------------------- телефон и кнопка */

.b-header__side {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-left: auto;
}

.b-header__phone {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
.b-header__phone:hover { color: var(--accent); }

.b-header__cta { flex: 0 0 auto; white-space: nowrap; }

/* ------------------------------------------------------------------- бургер */

.b-header__burger {
    display: none;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-s);
    background: transparent;
    cursor: pointer;
}
.b-header__burger-line {
    width: 2.2rem;
    height: 0.2rem;
    border-radius: 0.1rem;
    background: var(--ink);
    transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.b-header.is-menu-open .b-header__burger-line:nth-child(1) {
    transform: translateY(0.7rem) rotate(45deg);
}
.b-header.is-menu-open .b-header__burger-line:nth-child(2) { opacity: 0; }
.b-header.is-menu-open .b-header__burger-line:nth-child(3) {
    transform: translateY(-0.7rem) rotate(-45deg);
}

/* --------------------------------------------------- затемнение и панель */

.b-header__scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    /* visibility переключаем нулевой длительностью: открытие — сразу,
       закрытие — после того, как доедет прозрачность. На дискретную
       интерполяцию visibility полагаться нельзя. */
    transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.b-header.is-menu-open .b-header__scrim {
    opacity: .5;
    visibility: visible;
    transition: opacity .25s var(--ease), visibility 0s linear 0s;
}

.b-header__panel {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    flex-direction: column;
    gap: 2.4rem;
    width: min(34rem, 86vw);
    padding: calc(var(--head-h) + 2.4rem) 2.4rem
             calc(3.2rem + env(safe-area-inset-bottom, 0rem));
    overflow-y: auto;
    background: var(--paper-2);
    box-shadow: var(--shadow-2);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
}
.b-header.is-menu-open .b-header__panel {
    transform: none;
    visibility: visible;
    transition: transform .3s var(--ease), visibility 0s linear 0s;
}

.b-header__panel-nav { display: flex; flex-direction: column; }

.b-header__panel-link {
    padding: 1.4rem 0;
    border-bottom: 0.1rem solid var(--line);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}
.b-header__panel-link:hover { color: var(--accent); }

.b-header__panel-foot {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: auto;
}
.b-header__panel-cta { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .b-header,
    .b-header__link::after,
    .b-header__burger-line,
    .b-header__scrim,
    .b-header__panel { transition: none; }
}

/* ------------------------------------------------------------------ адаптив */

@media (max-width: 1280px) {
    .b-header__inner { gap: 2.4rem; }
    .b-header__nav { gap: 2.2rem; }
}

@media (max-width: 1000px) {
    .b-header__nav { gap: 1.8rem; }
    .b-header__link { font-size: 1.4rem; }
    .b-header__phone { display: none; }
}

@media (max-width: 900px) {
    .b-header__nav { display: none; }
    .b-header__burger { display: flex; }
    .b-header__scrim { display: block; }
    .b-header__panel { display: flex; }
}

@media (max-width: 560px) {
    /* На узком экране кнопка живёт в выезжающей панели — иначе шапка не влезает. */
    .b-header__cta { display: none; }
    .b-header__inner { gap: 1.6rem; }
    .b-header__mark { height: 3.4rem; }
    .b-header__tag { letter-spacing: 0.1em; }
}

/* Пометка «нужно от заказчика» в шапке.
   Базовая .need — блочная плашка с подложкой и рубцом слева: в полосе шапки
   она превращалась в бежевый прямоугольник рядом с кнопкой и становилась
   самым заметным элементом первого экрана. Заказчик должен первым делом
   видеть оффер, а не наш список недостающего. Здесь она сжимается
   до строчной подписи — читается, но не кричит. */
.b-header .need,
.b-header__panel .need {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.4rem;
    line-height: 1.3;
}
.b-header .need::before,
.b-header__panel .need::before { content: "нет: "; }

/* =========================================================== первый экран === */

/* blocks/hero.css — первые экраны всех четырёх макетов.
   Один файл на b-hero--1 … b-hero--4: общая типографика и фото-рамки здесь,
   композиция — в блоке каждого макета ниже.

   Все селекторы начинаются с .b-hero. Цветов нет — только var(--…).
   Размеры в rem; px остались лишь в точках адаптива, как в base.css.
   100vh не используется: полный экран — svh с запасной строкой выше. */

/* --------------------------------------------------------------- общее */

.b-hero {
    display: grid;
    align-content: center;
    min-height: 82vh;
    min-height: 82svh;
}

/* Подложка первого экрана светлая всегда: шапка поверх hero идёт
   с тёмным текстом, инверсии под тёмный hero в проекте нет. */
.b-hero--1, .b-hero--2, .b-hero--3, .b-hero--4 { background: var(--paper); }

.b-hero__h1 { margin: 0; }

.b-hero__lead { margin: 2.4rem 0 0; max-width: 58rem; }

.b-hero__btns { margin-top: 3.2rem; }

/* Фото: контейнеру задан aspect-ratio, картинке — cover,
   чтобы раскладка не прыгала при загрузке. */
.b-hero__shot,
.b-hero__tile,
.b-hero__band,
.b-hero__mini {
    margin: 0;
    overflow: hidden;
    background: var(--paper-3);
}
.b-hero__shot,
.b-hero__band,
.b-hero__mini { border-radius: var(--r-l); box-shadow: var(--shadow); }
.b-hero__tile { border-radius: var(--r-m); }

.b-hero__shot img,
.b-hero__tile img,
.b-hero__band img,
.b-hero__mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------- макет 1 «Ответственность»: текст ведущий */

.b-hero--1 .b-hero__row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 6.4rem;
    align-items: center;
}
.b-hero--1 .b-hero__h1 { font-size: 6.4rem; }
.b-hero--1 .b-hero__lead { max-width: 60rem; }
.b-hero--1 .b-hero__facts {
    margin: 2.4rem 0 0;
    font-weight: 500;
    color: var(--ink-2);
}
.b-hero--1 .b-hero__shot { aspect-ratio: 3 / 4; }

/* ----------------------------------------- макет 2 «Витрина»: решают фотографии */

.b-hero--2 .b-hero__row {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 5.6rem;
    align-items: center;
}
.b-hero--2 .b-hero__h1 { font-size: 4.4rem; }
.b-hero--2 .b-hero__lead { max-width: 46rem; font-size: 1.8rem; }
.b-hero--2 .b-hero__collage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}
.b-hero--2 .b-hero__tile--tall { aspect-ratio: 3 / 4; }
.b-hero--2 .b-hero__tile--wide { aspect-ratio: 1 / 1; }

/* ---------------------- макет 3 «Строго по брифу»: центр и широкое фото под ним */

.b-hero--3 .b-hero__center {
    max-width: 84rem;
    margin: 0 auto;
    text-align: center;
}
.b-hero--3 .b-hero__lead { margin-left: auto; margin-right: auto; max-width: 66rem; }
.b-hero--3 .b-hero__btns { justify-content: center; }
.b-hero--3 .b-hero__band {
    margin-top: 6.4rem;
    aspect-ratio: 16 / 9;
}
/* Снимок квадратный, изделие стоит в нижней части кадра —
   при широком кадрировании прижимаем картинку к низу, иначе видно только стену. */
.b-hero--3 .b-hero__band img { object-position: 50% 100%; }

/* ------------------------------- макет 4 «Путь селлера»: текст и схема из шагов */

.b-hero--4 .b-hero__row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    gap: 4.8rem;
    align-items: center;
}
.b-hero--4 .b-hero__h1 { font-size: 5rem; }
.b-hero--4 .b-hero__mini {
    width: 100%;
    max-width: 26rem;
    justify-self: end;
    aspect-ratio: 3 / 4;
}

.b-hero__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3.2rem 2.4rem;
    margin: 6.4rem 0 0;
    padding: 0;
    list-style: none;
}
/* Линейка и точка живут на самом шаге, а не на списке: иначе при переходе
   в две колонки и в одну точки повисают в межстрочном промежутке. */
.b-hero__step {
    position: relative;
    margin: 0;
    padding-top: 2.4rem;
    border-top: 0.1rem solid var(--line);
}
.b-hero__step::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 0;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--wood);
}
.b-hero__step-n {
    display: block;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--accent);
}
.b-hero__step-t {
    display: block;
    margin-top: 0.8rem;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--ink-2);
}

/* ------------------------------------------------------------------ адаптив */

@media (max-width: 1280px) {
    .b-hero--1 .b-hero__row { gap: 4.8rem; }
    .b-hero--1 .b-hero__h1 { font-size: 5.6rem; }
    .b-hero--2 .b-hero__row { gap: 4rem; }
    .b-hero--4 .b-hero__h1 { font-size: 4.6rem; }
}

@media (max-width: 1000px) {
    .b-hero { min-height: 0; }
    .b-hero--1 .b-hero__row { gap: 4rem; }
    .b-hero--1 .b-hero__h1 { font-size: 4.6rem; }
    .b-hero--2 .b-hero__row { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
    .b-hero--2 .b-hero__lead { max-width: 60rem; }
    .b-hero--4 .b-hero__row { gap: 3.2rem; }
    .b-hero--4 .b-hero__h1 { font-size: 3.8rem; }
    .b-hero--4 .b-hero__mini { max-width: 20rem; }
    .b-hero__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .b-hero--1 .b-hero__row { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
    .b-hero--1 .b-hero__shot { aspect-ratio: 4 / 3; }
    .b-hero--2 .b-hero__collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b-hero--3 .b-hero__band { margin-top: 4rem; aspect-ratio: 4 / 3; }
    .b-hero--4 .b-hero__row { grid-template-columns: minmax(0, 1fr); }
    .b-hero--4 .b-hero__mini { justify-self: start; max-width: 22rem; }
    .b-hero__steps { margin-top: 4rem; }
}

@media (max-width: 560px) {
    .b-hero--1 .b-hero__h1 { font-size: 3.6rem; }
    .b-hero--2 .b-hero__h1 { font-size: 3.2rem; }
    .b-hero--4 .b-hero__h1 { font-size: 3.2rem; }
    .b-hero__lead { margin-top: 2rem; }
    .b-hero__btns { margin-top: 2.4rem; }
    .b-hero--2 .b-hero__collage { gap: 0.8rem; }
    .b-hero--2 .b-hero__lead { font-size: 1.7rem; }
    .b-hero__steps { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
    .b-hero__step-n { font-size: 2.8rem; }
}

/* =========================================================== фабрика в цифрах === */

/* Блок «Фабрика в цифрах» — цифровая полоса между первым экраном и каталогом.

   РАСКЛАДКА. Две группы по три цифры, каждая группа — отдельный <ul>:
     1280+   группы одна под другой, внутри группы 3 колонки  → сетка 3×2,
             ряд = смысловая группа;
     561…1000  группы встают рядом, внутри группы одна колонка → сетка 2×3,
             колонка = смысловая группа (так группировка видна даже лучше);
     ≤560    одна колонка на все шесть, группы разделены полосой --brand.
   Группа из трёх не делится на две колонки без сироты, поэтому на телефоне
   столбец, а не 2×3 — целостность группы важнее экономии высоты.

   РАЗНАЯ ДЛИНА ЗНАЧЕНИЙ («4,9» против «до 3 дней») собрана четырьмя приёмами:
     1) значения выровнены по левому краю колонки, а не по центру — рваным
        выглядит только правый край, который ничего не держит;
     2) .b-facts__n в nowrap: значение всегда одна строка, поэтому подписи
        во всём ряду начинаются на одной линии;
     3) слова-единицы («лет», «дней», «до») уведены в кегль 1.8rem: крупной
        массой остаются только разряды — 8 / 4 000 / 3 / 1–2 / 7–10 / 4,9,
        и разброс ширин падает примерно вдвое;
     4) tabular-nums: цифры одной ширины, 4 000 и 7–10 стоят как в таблице.
   Полоса --brand над группой работает линейкой, от которой считается ряд.

   Цвета — только токены base.css. Локальных подмен цвета здесь нет:
   низкий контраст --ink-3 был общей бедой страницы, а не этого блока,
   и вылечен в base.css (07.10.2026) — токен затемнён до #716b60.
   Картинок и иконок в блоке нет: блок про числа. */

/* ФОН БЛОКА — РЕПРОДУКЦИЯ, А НЕ СЕТКА (решение заказчика 08.10.2026).

   На тёмных секциях страницы лежит общая подложка --dark-layer: тонкая сетка
   плюс мягкое свечение. Здесь она подменяется картиной с фасада шкафа-картины —
   настоящей репродукцией из каталога, той же, что на снимках изделия. Блок
   цифр единственный, кому это положено: он стоит между двумя фото-блоками
   и держится контрастом, а у «Кто отвечает за брак» и у подвала подложка
   остаётся прежней.

   Поверх картины — затемняющий градиент под углом: слева, где текст, почти
   глухой, справа отпускает, и картину видно. Через mix-blend-mode это
   не делается: на почти чёрной секции и luminosity, и soft-light гасят
   картинку до неразличимости — проверено на подборе оформления (3db3b3d).

   Ван Гог, авторские права истекли: это та же репродукция, которую фабрика
   печатает на фасаде, и прав на публикацию она не требует. */
.b-facts.section--dark {
    --dark-layer:
        linear-gradient(100deg,
            rgba(22,21,15,.97) 0%,
            rgba(22,21,15,.95) 38%,
            rgba(22,21,15,.89) 70%,
            rgba(22,21,15,.84) 100%),
        url("../catalog/shkafy-kartiny/shkaf-kartina/shkaf-kartina-votan/26.jpg");
    --dark-size: auto, cover;
    --dark-pos: center, center;
    --dark-repeat: no-repeat, no-repeat;
}

/* ------------------------------------------------------------ заголовок */

/* --------------------------------------------------------------- цифры */

.b-facts__groups {
    display: grid;
    gap: 5.6rem;
}

.b-facts__group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
    margin: 0;
    padding: 2.4rem 0 0;
    list-style: none;
    border-top: 0.3rem solid var(--brand);
}

/* Вторая группа приходит следом за первой, а не вместе с ней: так видно,
   что это две полосы, а не шесть случайных чисел. Свойства .reveal
   (прозрачность и сдвиг) не трогаем, только задержка. */
.b-facts__group--second { transition-delay: .12s; }

.b-facts__item {
    margin: 0;
    min-width: 0;
}

.b-facts__n {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.b-facts__u {
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0;
}

.b-facts.section--dark .b-facts__label { color: var(--ink-on-dark); }

/* ----------------------------------------------------------------- вывод */

.b-facts__note {
    max-width: 68rem;
    margin-top: 5.6rem;
    padding-left: 2.4rem;
    border-left: 0.3rem solid var(--brand);
}

/* --------------------------------------------------------------- адаптив */

/* Планшет: группы рядом, каждая — колонка из трёх. Сетка 2×3.
   Строки заданы внешней сеткой, группы подхватывают их через subgrid: цифры
   в левой и правой колонке стоят на одной линии, даже если подпись в одной
   из них стала на строку длиннее. Браузер без subgrid просто считает строки
   по содержимому — сейчас это даёт тот же результат, проверено до 1000px. */
@media (max-width: 1000px) and (min-width: 561px) {
    .b-facts__groups {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 2.8rem 3.2rem;
    }
    .b-facts__group {
        grid-template-columns: 1fr;
        grid-row: span 3;
        grid-template-rows: subgrid;
        gap: 2.8rem;
    }
}

@media (max-width: 1000px) {
    .b-facts__note { margin-top: 4.8rem; }
}

/* Отбивы группы задаёт блок планшета (там они общие для обеих осей из-за
   subgrid), поэтому здесь только вывод под цифрами. */
@media (max-width: 760px) {
    .b-facts__note { margin-top: 4rem; }
}

/* Телефон: один столбец, цифра над подписью. */
@media (max-width: 560px) {
    .b-facts__groups { gap: 3.2rem; }
    .b-facts__group {
        grid-template-columns: 1fr;
        gap: 2.4rem;
        padding-top: 2rem;
        border-top-width: 0.2rem;
    }
    .b-facts__u { font-size: 1.6rem; }
    .b-facts__note {
        margin-top: 3.2rem;
        padding-left: 1.6rem;
        border-left-width: 0.2rem;
    }
}

/* ------------------------------------- крупные цифры по центру (07.10.2026)

   Заказчик попросил увеличить значения в 2,2–2,6 раза и выровнять содержимое
   плитки по центру. Базовый .stat__n — 4.4rem, отсюда вилка 9.7–11.4rem;
   берём clamp, чтобы на узком экране цифра не выдавливала подпись.

   Выравнивание по центру отменяет приём, которым значения разной длины
   держались в ряд (общий левый край). Поэтому ряд теперь держит не край,
   а одинаковая высота строки значения: nowrap и tabular-nums остаются,
   а подписи получают min-height, чтобы однострочная и двухстрочная
   подписи не сдвигали соседей по вертикали. */

.b-facts__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.b-facts__item .stat__n {
    font-size: clamp(5.6rem, 7vw, 11.4rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

/* Слова-единицы остаются мельче разрядов — иначе «до 3 дней» снова станет
   втрое шире «4,9». Но вместе с цифрой они тоже подросли. */
.b-facts__u {
    font-size: clamp(1.8rem, 1.9vw, 2.8rem);
}

.b-facts__label {
    margin-top: 1.6rem;
    max-width: 26rem;
}

/* Линия группы на всю ширину ряда, цифры под ней по центру своих ячеек. */
.b-facts__group { align-items: start; }

@media (max-width: 560px) {
    .b-facts__item .stat__n { font-size: 6.4rem; }
    .b-facts__u { font-size: 1.8rem; }
    .b-facts__label { margin-top: 1.2rem; }
}

/* =========================================================== каталог: плитка, фильтр, модалка модели === */

/* Блок каталога. Префикс .b-catalog, цвета только токенами, размеры только в rem.
   Проверен на фонах: .section (paper), .section--alt, .section--white.

   Плитка — по моделям: пятнадцать крупных карточек вместо ста шестидесяти одной
   мелкой. Исполнения переехали в модалку, в переключатель.

   Про прокрутку: горизонтально скроллятся только фильтр, лента миниатюр
   и (на телефоне) переключатель исполнений — все три overflow-x: auto
   вместе с overflow-y: hidden. `overflow: visible` нигде нет, поэтому ширину
   документа ничего не выносит.

   Фирменный зелёный --brand работает только графикой: на белом он даёт 2.9:1,
   для текста не годится. Им помечено выбранное и акцентные линии. */

/* --------------------------------------------------------------- фильтр */

/* Отрицательные отступы — запас под рамку фокуса, внутрь паддинга .container,
   поэтому документ не расширяют. Прокрутка появляется только на узких экранах. */
.b-catalog__filter {
    margin: -0.4rem -0.4rem 2.8rem;
    padding: 0.4rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.b-catalog__filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.b-catalog__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 1rem 1.8rem;
    border: 0.1rem solid var(--line-2);
    border-radius: 10rem;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease),
                border-color .2s var(--ease);
}

.b-catalog__chip:hover { border-color: var(--ink); color: var(--ink); }

.b-catalog__chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* Число моделей в категории. Счётчик, а не часть названия: гасим,
   чтобы он не читался как второе слово в подписи кнопки. */
.b-catalog__chip-n {
    font-size: 1.2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: .55;
}

.b-catalog__chip:focus-visible,
.b-catalog__card:focus-visible,
.b-catalog__close:focus-visible,
.b-catalog__nav:focus-visible,
.b-catalog__item:focus-visible,
.b-catalog__thumb:focus-visible {
    outline: 0.2rem solid var(--accent);
    outline-offset: 0.2rem;
}

/* ---------------------------------------------------------------- плитка */

/* minmax(34rem) держит ровно три колонки на 1280 и две на планшете:
   при внутренней ширине контейнера 123.2rem влезает три по 39.5rem,
   при 95.2rem — две. */
/* Колонки заданы числом, а не auto-fill. При auto-fill ширина карточки диктует
   число колонок, и на 1000px оставалось две — блок там выходил 6 609px, вдвое
   выше, чем на 1280. Требование «две колонки на планшете» было моей догадкой,
   а не словами заказчика; пятнадцати карточкам тесно от неё, а не удобно. */
.b-catalog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
}

/* Три колонки держатся до 860px: при меньшей ширине карточка становится уже
   25rem, и название модели с артикулом начинают переноситься в три строки. */
@media (max-width: 860px) {
    .b-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.b-catalog__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    border: 0.1rem solid var(--line);
    border-radius: var(--r-m);
    background: var(--paper-2);
    color: inherit;
    font: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
                transform .2s var(--ease);
}

.b-catalog__card:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow);
    transform: translateY(-0.2rem);
}

/* Фото приводится к одному соотношению: в данных есть и 900x1200, и 900x900.
   4/5 вместо 3/4 — у вертикального исходника срезается меньше семи процентов
   по высоте, зато пятнадцать карточек складываются в заметно короткий блок. */
.b-catalog__shot {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--paper-3);
    overflow: hidden;
}

.b-catalog__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ease);
}

.b-catalog__card:hover .b-catalog__shot img { transform: scale(1.03); }

.b-catalog__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1.6rem 1.8rem 1.8rem;
}

.b-catalog__name {
    display: block;
    color: var(--ink);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* Артикула нет у трёх моделей — там этого элемента просто нет. */
.b-catalog__code {
    display: block;
    color: var(--ink-3);
    font-size: 1.3rem;
    line-height: 1.3;
}

/* Главная цифра карточки: сколько исполнений прячется внутри. */
.b-catalog__count {
    display: block;
    margin-top: 0.6rem;
    padding-left: 1rem;
    border-left: 0.3rem solid var(--brand);
    color: var(--ink);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ------------------------------------------------- образцы исполнений

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

.b-catalog__sw-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.b-catalog__sw,
.b-catalog__sw-more {
    flex: 0 0 auto;
    padding: 0.3rem 0.8rem;
    border: 0.1rem solid var(--line);
    border-radius: 10rem;
    background: var(--paper-3);
    color: var(--ink-2);
    font-size: 1.2rem;
    line-height: 1.4;
    white-space: nowrap;
}

.b-catalog__sw-more {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.b-catalog__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 4rem 0;
    color: var(--ink-3);
    text-align: center;
}

/* ------------------------------------------------------------ низ секции */

.b-catalog__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem 2.4rem;
    margin-top: 3.2rem;
    padding-top: 2.8rem;
    border-top: 0.1rem solid var(--line);
}

.b-catalog__note {
    margin: 0;
    max-width: 52rem;
    color: var(--ink-3);
    font-size: 1.5rem;
}

/* --------------------------------------------------------------- модалка */

.b-catalog__modal {
    position: fixed;
    inset: 0;
    /* Выше шапки, у которой 90. Раньше тут тоже стояло 90, и модалка
       оказывалась сверху только потому, что лежит ниже по DOM: любая
       перестановка блоков — и фиксированная шапка рисовалась бы поверх
       открытого диалога. Уровни разведены явно: панель превью 40,
       шапка 90, модалка 120. */
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.4rem;
}

.b-catalog__overlay {
    position: absolute;
    inset: 0;
    background: var(--paper-4);
    opacity: .72;
    cursor: pointer;
}

.b-catalog__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    width: 100%;
    max-width: 112rem;
    height: min(82rem, calc(100vh - 4.8rem));
    height: min(82rem, calc(100svh - 4.8rem));
    border-radius: var(--r-l);
    background: var(--paper-2);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.b-catalog__close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    border: 0.1rem solid var(--line);
    border-radius: 10rem;
    background: var(--paper-2);
    color: var(--ink);
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}

.b-catalog__close:hover { border-color: var(--ink); background: var(--paper-3); }
.b-catalog__close svg { width: 2rem; height: 2rem; }

/* ---------------------------------------------------------------- галерея */

.b-catalog__gallery {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--paper-3);
    overflow: hidden;
}

.b-catalog__stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 2rem;
}

/* Размер задан рамкой сцены, а не самой картинкой: иначе до загрузки фото
   у <img> нулевой бокс и содержимое модалки прыгает. object-fit: contain
   не даёт обрезать ни вертикальные 900x1200, ни квадратные 900x900. */
.b-catalog__photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.b-catalog__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    border: 0.1rem solid var(--line);
    border-radius: 10rem;
    background: var(--paper-2);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

.b-catalog__nav:hover { border-color: var(--ink); }
.b-catalog__nav svg { width: 2.2rem; height: 2.2rem; }
.b-catalog__nav--prev { left: 1.2rem; }
.b-catalog__nav--next { right: 1.2rem; }

.b-catalog__counter {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.4rem 1.2rem;
    border-radius: 10rem;
    background: var(--paper-2);
    color: var(--ink-3);
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.b-catalog__thumbs {
    flex: 0 0 auto;
    display: flex;
    gap: 0.8rem;
    padding: 1.2rem;
    border-top: 0.1rem solid var(--line);
    background: var(--paper-2);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.b-catalog__thumb {
    flex: 0 0 auto;
    width: 5.4rem;
    height: 7.2rem;
    padding: 0;
    border: 0.2rem solid transparent;
    border-radius: var(--r-s);
    background: var(--paper-3);
    cursor: pointer;
    overflow: hidden;
}

.b-catalog__thumb img { width: 100%; height: 100%; object-fit: cover; }
.b-catalog__thumb:hover { border-color: var(--line-2); }
.b-catalog__thumb.is-on { border-color: var(--brand); }

/* ------------------------------------------------------- правая колонка */

.b-catalog__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 0;
    padding: 4rem 3.2rem 3.2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.b-catalog__dcode {
    margin: 0.8rem 0 0;
    color: var(--ink-3);
    font-size: 1.5rem;
}

/* --------------------------------------------- переключатель исполнений

   От двух до тридцати двух кнопок. Своя прокрутка с ограничением высоты:
   без неё тридцать две миниатюры уводят описание и кнопки на три экрана
   вниз, и до «Запросить условия» никто не доходит. */

.b-catalog__picker {
    width: 100%;
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: 0.1rem solid var(--line);
}

.b-catalog__picker-h {
    margin: 0 0 1.2rem;
    color: var(--ink);
    font-size: 1.5rem;
    font-weight: 600;
}

.b-catalog__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr));
    gap: 1rem 0.8rem;
    /* 0.4rem — запас под рамку фокуса внутри прокручиваемой области. */
    max-height: 26rem;
    padding: 0.4rem;
    margin: -0.4rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.b-catalog__item {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.b-catalog__item-shot {
    display: block;
    aspect-ratio: 1 / 1;
    border: 0.2rem solid transparent;
    border-radius: var(--r-s);
    background: var(--paper-3);
    overflow: hidden;
    transition: border-color .2s var(--ease);
}

.b-catalog__item-shot img { width: 100%; height: 100%; object-fit: cover; }
.b-catalog__item:hover .b-catalog__item-shot { border-color: var(--line-2); }
.b-catalog__item.is-on .b-catalog__item-shot { border-color: var(--brand); }

.b-catalog__item-l {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 0.4rem;
    color: var(--ink-3);
    font-size: 1.2rem;
    line-height: 1.25;
    overflow: hidden;
}

.b-catalog__item.is-on .b-catalog__item-l { color: var(--ink); font-weight: 600; }

/* Название выбранного исполнения. */
.b-catalog__current {
    width: 100%;
    margin: 1.6rem 0 0;
    color: var(--ink);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.35;
}

.b-catalog__specs {
    width: 100%;
    margin: 1.6rem 0 0;
    padding: 0;
}

.b-catalog__spec {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0.8rem 1.6rem;
    padding: 1rem 0;
    border-bottom: 0.1rem solid var(--line);
    font-size: 1.5rem;
}

.b-catalog__spec dt { margin: 0; color: var(--ink-3); }
.b-catalog__spec dd { margin: 0; color: var(--ink); font-weight: 600; }

.b-catalog__lead {
    margin: 2.4rem 0 0;
    color: var(--ink-2);
    font-size: 1.6rem;
    line-height: 1.55;
}

.b-catalog__actions { margin-top: 2.8rem; }
.b-catalog__need { width: 100%; }

/* --------------------------------------------------------------- адаптив */

@media (max-width: 1000px) {
    /* Явные строки: галерея по содержимому, описание — остаток с своей
       прокруткой. Без этого лента миниатюр наезжает на правую колонку. */
    .b-catalog__dialog {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }
    .b-catalog__stage {
        flex: 0 0 auto;
        height: 38vh;
        height: 38svh;
        min-height: 22rem;
        padding: 1.6rem;
    }
    .b-catalog__info { padding: 2.8rem 2.4rem; }
    .b-catalog__spec { grid-template-columns: 9.5rem minmax(0, 1fr); }
}

@media (max-width: 760px) {
    /* На узком экране фильтр — лента с горизонтальной прокруткой.
       Прокручивается только она: у страницы горизонтальной прокрутки нет. */
    .b-catalog__filter-row { flex-wrap: nowrap; min-width: max-content; }

    /* Подсказка, что лента листается. Без неё из десяти кнопок видно две
       с половиной, край обрезан ровно по границе экрана — и это читается
       не как прокрутка, а как сломанная вёрстка. Маска гасит правый край,
       пока лента не домотана до конца: animation-timeline привязывает её
       к позиции прокрутки, а не ко времени.
       В градиенте маски важна только альфа, поэтому непрозрачная половина
       взята токеном: цветов-литералов в файле нет. */
    .b-catalog__filter {
        mask-image: linear-gradient(to right, var(--ink) calc(100% - 4rem), transparent);
        animation: b-catalog-fade linear;
        animation-timeline: scroll(self inline);
    }
}

/* Маска снимается к концу прокрутки: домотали — край больше не прячем. */
@keyframes b-catalog-fade {
    from { mask-image: linear-gradient(to right, var(--ink) calc(100% - 4rem), transparent); }
    to   { mask-image: linear-gradient(to right, var(--ink) 100%, var(--ink)); }
}

@media (max-width: 760px) {
    .b-catalog__modal { padding: 0; }
    .b-catalog__dialog {
        height: 100vh;
        height: 100svh;
        max-width: none;
        border-radius: 0;
    }
    /* Переключатель исполнений на телефоне — лента в одну строку: сетка
       в полэкрана высотой внутри уже прокручиваемой колонки ловит пальцем
       не тот скролл. */
    .b-catalog__items {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 7.4rem;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .b-catalog__foot { margin-top: 2.4rem; padding-top: 2rem; }
}

@media (max-width: 560px) {
    /* Две колонки, а не одна: пятнадцать карточек в один столбец — это снова
       девять тысяч пикселей, то есть ровно то, от чего уходили. */
    .b-catalog__grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .b-catalog__body { padding: 1.2rem 1.2rem 1.4rem; gap: 0.2rem; }
    .b-catalog__name { font-size: 1.6rem; }
    .b-catalog__code { font-size: 1.2rem; }
    .b-catalog__count { margin-top: 0.4rem; padding-left: 0.8rem; font-size: 1.4rem; }
    .b-catalog__sw-row { gap: 0.4rem; margin-top: 0.8rem; }
    .b-catalog__sw,
    .b-catalog__sw-more { padding: 0.2rem 0.6rem; font-size: 1.1rem; }
    .b-catalog__nav { width: 3.8rem; height: 3.8rem; }
    .b-catalog__nav--prev { left: 0.8rem; }
    .b-catalog__nav--next { right: 0.8rem; }
    .b-catalog__spec { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.9rem 0; }
    .b-catalog__foot .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .b-catalog__card,
    .b-catalog__chip,
    .b-catalog__close,
    .b-catalog__item-shot,
    .b-catalog__nav { transition: none; }
    .b-catalog__card:hover { transform: none; }
    .b-catalog__shot img,
    .b-catalog__card:hover .b-catalog__shot img { transition: none; transform: none; }
}

/* Контейнер категории внутри плитки. Нужен он только редактору: списком
   моделей владеет своя категория, значит и data-list должен стоять внутри
   неё. Из раскладки контейнер при этом обязан исчезнуть — иначе каждая
   категория занимает одну клетку сетки, и вместо трёх колонок карточек
   получается столбец блоков. display: contents отдаёт карточки напрямую
   .b-catalog__grid: ряды снова идут сплошняком, через границы категорий. */
.b-catalog__group { display: contents; }

/* Скрытая категория в режиме правки. Общее правило редактора приглушает
   элемент с data-hidden, но контейнер категории из раскладки выключен
   (display: contents), и приглушать в нём нечего — гасим сами карточки.
   Вешать data-hidden на карточку нельзя: панель тогда предложит «Показать»
   для модели, которая не скрыта, и отправит неверное действие. */
body.is-edit .b-catalog__group[data-hidden] > .b-catalog__card { opacity: .45; }

/* =========================================================== выгоды === */

/* b-benefits — три равные карточки выгод, на узком экране в столбец.
   Номер карточки — счётчик CSS (decimal-leading-zero) на .card,
   чтобы в разметке не появлялось текста, которого нет в CONTENT.md.

   Номер набран 2rem/700: на этом размере он проходит как крупный текст,
   и контраста --ink-3 (4.3:1) достаточно и на светлой, и на тёмной секции.

   Проверено на фонах: section (базовый), section--white, section--alt, section--dark.
   Подложку карточки и её тёмный вариант даёт компонент .card из base.css,
   здесь только раскладка и номер. */

.b-benefits__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: b-benefits;
}

.b-benefits__item {
    margin: 0;
    counter-increment: b-benefits;
}

.b-benefits__item::before {
    content: counter(b-benefits, decimal-leading-zero);
    display: inline-block;
    margin-bottom: 2rem;
    padding-bottom: 0.6rem;
    border-bottom: 0.2rem solid var(--wood);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--ink-3);
}

.b-benefits__title { margin-bottom: 1.2rem; }

.b-benefits__text { margin: 0; }

@media (max-width: 1000px) {
    .b-benefits__list { gap: 1.6rem; }
    .b-benefits__item::before { margin-bottom: 1.6rem; }
}

@media (max-width: 760px) {
    .b-benefits__list { grid-template-columns: 1fr; }
}

/* =========================================================== почему нам можно верить === */

/* b-why — четыре причины доверия, раскладка 2×2 крупными карточками.
   Ритм намеренно не такой, как у benefits: карточек меньше в ряду, они шире,
   а внутри карточки — своя сетка «крупный номер | текст», поэтому два ряда
   одинаковых плашек подряд не читаются как монотонность.

   Проверено на фонах: section (базовый), section--white, section--alt, section--dark.
   Номер сертификата — .b-why__cert на <strong>: цвет текста берётся из base.css
   (светлая секция — --ink, тёмная — белый), здесь только вес и подчёркивание. */

.b-why__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Нумерации здесь намеренно нет, хотя раньше была.
   Во-первых, на одной странице и так три разных способа нумеровать:
   кружки с линией в шагах, «01/02/03» в выгодах и номера здесь — глаз
   цепляется за разнобой раньше, чем за содержание.
   Во-вторых, выгоды и «почему мы» стоят встык, и на телефоне обе сетки
   схлопываются в одну колонку: подряд шли семь почти одинаковых
   пронумерованных карточек, два блока сливались в один длинный список.
   Здесь порядок аргументов ничего не значит — это набор, а не последовательность,
   поэтому номера ему и не нужны. Нумерация осталась там, где она несёт смысл:
   в выгодах (список доводов) и в шагах (сценарий). */
.b-why__item {
    margin: 0;
    padding: 4rem;
}

/* Полоса сверху вместо номера: отделяет карточки друг от друга в столбце
   на телефоне, не добавляя четвёртого вида нумерации. */
.b-why__title {
    margin-bottom: 1.2rem;
    padding-top: 1.6rem;
    border-top: 0.2rem solid var(--wood);
}

.b-why__text { margin: 0; }

.b-why__cert {
    border-bottom: 0.2rem solid var(--wood);
    font-weight: 700;
}

@media (max-width: 1000px) {
    .b-why__list { gap: 1.6rem; }
    .b-why__item { padding: 3.2rem; }
}

@media (max-width: 760px) {
    .b-why__list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .b-why__item { padding: 2.4rem; }
}

/* Ссылка на видеосхемы сборки. Стоит именно в этой карточке, потому что
   доказывает её же тезис: сборка простая, а если нет — покупатель идёт
   к видео, а не к продавцу. Стрелка помечает уход со страницы. */
.b-why__out {
    display: inline-block;
    margin-top: 1.6rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 0.1rem solid currentColor;
}
.b-why__out::after { content: " ↗"; border: 0; }
.b-why__out:hover { color: var(--accent-2); }
.b-why.section--dark .b-why__out { color: var(--brand); }

/* =========================================================== кто отвечает за брак === */

/* b-quality — разворот-сравнение «Как обычно» / «Как у нас».
   Главный блок страницы, поэтому не карточка в ряду, а две широкие колонки
   со стрелкой-переходом между ними.

   Проверено на фонах: section (базовый), section--white, section--alt, section--dark.
   Левая колонка приглушена структурой (нет подложки, только рубец слева),
   правая — залитая акцентом плашка: противопоставление держится на разнице
   «пусто / залито», а не на цвете текста, поэтому работает на любом фоне.
   Цвета текста внутри левой колонки намеренно не задаются — наследуются
   от секции (светлая: --ink-2, тёмная: --ink-on-dark). */

.b-quality__head { max-width: 78rem; }

.b-quality__compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 2.4rem;
}

.b-quality__col {
    padding: 4rem;
    border-radius: var(--r-l);
}

/* «Как обычно»: приглушённая колонка */
.b-quality__col--usual {
    padding-left: 3.6rem;
    border-left: 0.3rem solid var(--line-2);
    border-radius: 0 var(--r-l) var(--r-l) 0;
}
.b-quality__col--usual .b-quality__title { color: var(--ink-3); }

/* «Как у нас»: акцентная плашка. Тёплый рубец сверху нужен для тёмной
   секции — на ней зелёная плашка одна бы читалась слабее. */
.b-quality__col--ours {
    position: relative;
    overflow: hidden;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-2);
}
.b-quality__col--ours::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.5rem;
    background: var(--wood);
}
.b-quality__col--ours .b-quality__title,
.b-quality__col--ours .b-quality__text { color: var(--accent-ink); }

.b-quality__title { margin-bottom: 1.6rem; }

.b-quality__text {
    margin: 0;
    font-size: 1.9rem;
    line-height: 1.55;
}

.b-quality__arrow {
    align-self: center;
    width: 4.8rem;
    color: var(--wood);
}
.b-quality__arrow svg {
    width: 100%;
    height: auto;
}

.b-quality__note {
    max-width: 86rem;
    margin-top: 3.2rem;
}

@media (max-width: 1000px) {
    .b-quality__compare { gap: 1.6rem; }
    .b-quality__col { padding: 3.2rem; }
    .b-quality__col--usual { padding-left: 2.8rem; }
    .b-quality__text { font-size: 1.8rem; }
    .b-quality__arrow { width: 3.6rem; }
}

@media (max-width: 760px) {
    .b-quality__compare { grid-template-columns: 1fr; }
    .b-quality__arrow {
        justify-self: center;
        transform: rotate(90deg);
    }
}

@media (max-width: 560px) {
    .b-quality__col { padding: 2.4rem; }
    .b-quality__col--usual { padding-left: 2rem; }
    .b-quality__text { font-size: 1.7rem; }
    .b-quality__note { margin-top: 2.4rem; }
}

/* Сроки по рекламациям. Стоят под сравнением и работают его итогом:
   левая колонка описывает проблему, правая — кто её берёт, а эти две цифры
   говорят «за сколько». Без них блок остаётся обещанием. */
.b-quality__terms {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 6.4rem;
    margin: 4rem 0 0;
    padding: 2.4rem 0 0;
    border-top: 0.1rem solid var(--line);
}
.b-quality.section--dark .b-quality__terms { border-top-color: var(--line-on-dark); }

.b-quality__term { margin: 0; }

.b-quality__term-n {
    display: block;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--accent);
}
.b-quality.section--dark .b-quality__term-n { color: var(--brand); }

.b-quality__term-l {
    display: block;
    margin: 0.8rem 0 0;
    font-size: 1.5rem;
    color: var(--ink-3);
}
.b-quality.section--dark .b-quality__term-l { color: var(--ink-on-dark-2); }

@media (max-width: 560px) {
    .b-quality__terms { gap: 2.4rem 3.2rem; margin-top: 3.2rem; }
    .b-quality__term-n { font-size: 3rem; }
}

/* =========================================================== отзывы === */

/* Блок отзывов — каркас без настоящих данных.
   Раскладка: шапка .head, строка агрегата (.need), сетка из четырёх карточек
   (base .grid.grid-4 — 4 / 2 / 1 колонки), под ней строка со ссылками (.need).
   Карточка: верхняя строка «название площадки + пять контурных звёзд»,
   тело-заготовка фиксированной высоты, подпись прижата к низу.
   Фоны: проверен на section--alt, section--white, section--dark.
   Цвета — только токены base.css, размеры — rem. */

/* ------------------------------------------------------------ строка агрегата */

.b-reviews__aggregate {
    max-width: 72rem;
    margin-bottom: 3.2rem;
}

/* ------------------------------------------------------------------ карточка */

.b-reviews__card {
    display: flex;
    flex-direction: column;
}

/* Название площадки и звёзды — в столбец, а не в строку.
   В строку они не помещались: «Яндекс Маркет» длиннее «Ozon», звёзды
   переносились на вторую строку только в этой карточке, её шапка
   становилась выше соседних, и ряд из четырёх переставал читаться рядом.
   Столбец даёт одинаковую высоту шапки при любой длине названия. */
.b-reviews__top {
    display: grid;
    gap: 0.8rem;
    justify-items: start;
    padding-bottom: 1.6rem;
    border-bottom: 0.1rem solid var(--line);
}
.b-reviews.section--dark .b-reviews__top { border-bottom-color: var(--ink-3); }

.b-reviews__platform {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--ink);
}
.b-reviews.section--dark .b-reviews__platform { color: var(--ink-on-dark); }

/* Звёзды контурные: рейтинга у нас нет, закрашивать нечем.
   Цвет — currentColor у svg, задаётся здесь на контейнере. */
.b-reviews__stars {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    color: var(--line-2);
}
.b-reviews__star {
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
}

/* Заготовка занимает место будущего отзыва, но не больше, чем нужно.
   Было 12rem: карточки растягивались по высоте ряда, под пометкой
   оставалась пустая полоса в палец шириной, и блок читался как дырка
   на странице. Теперь высоту задаёт содержимое, а ряд выравнивает сетка. */
.b-reviews__body {
    flex: 1 1 auto;
    margin-top: 1.6rem;
}

.b-reviews__by { margin-top: 1.6rem; }

/* --------------------------------------------------------- ссылки под блоком */

.b-reviews__links {
    max-width: 72rem;
    margin-top: 3.2rem;
}

/* ------------------------------------------------------------------- адаптив */

@media (max-width: 760px) {
    .b-reviews__aggregate { margin-bottom: 2.4rem; }
    .b-reviews__links { margin-top: 2.4rem; }
}

@media (max-width: 560px) {
    .b-reviews__star { width: 1.5rem; height: 1.5rem; }
}

/* Оценка 4,9. Стоит над карточками и работает за них, пока текстов отзывов нет:
   это единственная проверяемая величина в блоке. */
.b-reviews__score {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    margin: 0 0 1.2rem;
    flex-wrap: wrap;
}
.b-reviews__score-n {
    font-size: 4.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--accent);
}
.b-reviews.section--dark .b-reviews__score-n { color: var(--brand); }
.b-reviews__score-l {
    font-size: 1.6rem;
    color: var(--ink-3);
}
.b-reviews.section--dark .b-reviews__score-l { color: var(--ink-on-dark-2); }

/* Ссылки на магазины: подпись и кнопки в одну строку, с переносом на узких. */
.b-reviews__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 3.2rem;
}
.b-reviews__links-l {
    font-size: calc(1.5rem * var(--type));
    color: var(--ink-3);
}

/* =========================================================== контакты, карта, форма === */

/* Блок контактов: способы связи, место под карту и форма заявки.
   Целевое действие страницы, поэтому форма — отдельная панель, а не хвост секции.

   Фоны: проверено на .section (--paper), .section--alt, .section--white.
   На .section--dark не рассчитан (подписи на --ink-3 теряют контраст).

   Единицы: только rem (1rem = 10px). px нет ни в одном свойстве.
   Точки перелома заданы в em, потому что медиазапрос считает единицы от
   начальных 16px и font-size: 62.5% на него не влияет: 62.5em = 1000px,
   47.5em = 760px, 35em = 560px — те же точки, что в base.css.

   Цвета — только токены base.css. */

/* ------------------------------------------------------------- раскладка */

.b-contacts__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 4.8rem;
    align-items: start;
}

.b-contacts__side,
.b-contacts__panel {
    min-width: 0;
}

/* ----------------------------------------------------- колонка контактов */

.b-contacts__list {
    margin: 0 0 3.2rem;
    padding: 0;
    list-style: none;
}

.b-contacts__item {
    margin: 0;
    padding: 2rem 0;
    border-top: 0.1rem solid var(--line);
}
.b-contacts__item:first-child { border-top: 0; padding-top: 0; }
.b-contacts__item:last-child { padding-bottom: 0; }

.b-contacts__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.b-contacts__msgs { margin-top: 1.2rem; }

/* Кнопки видны как кнопки, но ссылок за ними ещё нет. */
.b-contacts__msg:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.b-contacts__msg:disabled:hover { border-color: var(--line-2); }

/* --------------------------------------------------------- место под карту */

.b-contacts__map { margin: 0; }

/* Пропорции и радиус те же, что займёт настоящая карта.
   Сетка-подложка рисуется токенами: это место под карту, а не ошибка. */
.b-contacts__map-plate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    aspect-ratio: 16 / 10;
    padding: 2.4rem;
    border: 0.1rem solid var(--line-2);
    border-radius: var(--r-m);
    background-color: var(--paper-3);
    background-image:
        repeating-linear-gradient(to right, var(--line) 0 0.1rem, transparent 0.1rem 4.8rem),
        repeating-linear-gradient(to bottom, var(--line) 0 0.1rem, transparent 0.1rem 4.8rem);
    background-position: center center;
    text-align: center;
}

.b-contacts__map-pin {
    width: 3.6rem;
    height: 3.6rem;
    color: var(--accent);
}

.b-contacts__map-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-2);
}

.b-contacts__map-cap { margin: 0; }

/* ------------------------------------------------------------------ форма */

.b-contacts__panel {
    box-shadow: var(--shadow);
}

.b-contacts__row { margin-bottom: 2rem; }
.b-contacts__row:last-of-type { margin-bottom: 2.4rem; }

.b-contacts__flabel {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.b-contacts__req { color: var(--warn); }

.b-contacts__field {
    display: block;
    width: 100%;
    max-width: 100%;   /* select с appearance: none не должен распирать колонку */
    margin: 0;
    padding: 1.4rem 1.6rem;
    font: inherit;
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--ink);
    background: var(--paper-2);
    border: 0.1rem solid var(--line-2);
    border-radius: var(--r-s);
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}

.b-contacts__field:hover { border-color: var(--ink-3); }
.b-contacts__field:focus { border-color: var(--accent); outline: none; }

/* Целевое действие страницы: кольцо фокуса должно быть заметным. */
.b-contacts__field:focus-visible,
.b-contacts__send:focus-visible,
.b-contacts__msg:focus-visible,
.b-contacts__done:focus-visible {
    outline: 0.3rem solid var(--accent);
    outline-offset: 0.2rem;
    border-color: var(--accent);
}

.b-contacts__field[aria-invalid="true"] {
    border-color: var(--warn);
    background: var(--warn-bg);
}

.b-contacts__area {
    min-height: 11rem;
    resize: vertical;
}

/* Свой шеврон вместо браузерной стрелки: appearance снят у поля. */
.b-contacts__selectwrap {
    position: relative;
    display: block;
}
.b-contacts__select { padding-right: 4.4rem; cursor: pointer; }
.b-contacts__selectwrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.8rem;
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.6rem;
    border-right: 0.2rem solid var(--ink-3);
    border-bottom: 0.2rem solid var(--ink-3);
    transform: rotate(45deg);
    pointer-events: none;
}

.b-contacts__hint {
    display: block;
    margin-top: 0.6rem;
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--ink-3);
}

.b-contacts__err {
    display: block;
    margin-top: 0.6rem;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--warn);
}
.b-contacts__err:empty { display: none; }

/* Ловушка для роботов. display: none не годится: часть ботов пропускает поля,
   которых «нет», — поле должно существовать и быть заполнимым, просто человек
   до него не доберётся. Уводим за левый край (горизонтальной прокрутки
   отрицательный left не создаёт), гасим прозрачностью и отбираем указатель;
   от клавиатуры его уже закрывает tabindex="-1" в разметке. */
.b-contacts__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.b-contacts__submit { margin-bottom: 1.6rem; }
.b-contacts__send { width: 100%; }

.b-contacts__legal { margin-bottom: 0; }

/* --------------------------------------------------------- «спасибо» */

.b-contacts__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    padding: 4rem 0;
    text-align: center;
}
.b-contacts__done-ic {
    width: 4.8rem;
    height: 4.8rem;
    color: var(--accent);
}
.b-contacts__done-txt {
    max-width: 38rem;
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.45;
    color: var(--ink);
}

/* ---------------------------------------------------------------- адаптив */

@media (max-width: 62.5em) {
    .b-contacts__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3.2rem;
    }
}

/* Столбец. Форма идёт первой: это целевое действие, а контакты и карта —
   альтернативный путь, из-за которого форму пришлось бы искать прокруткой.
   Переставлен только показ: фокусируемых элементов в левой колонке нет
   (кнопки мессенджеров отключены), порядок обхода с клавиатуры не ломается. */
@media (max-width: 47.5em) {
    .b-contacts__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 4rem;
    }
    .b-contacts__panel { order: -1; }
}

@media (max-width: 35em) {
    .b-contacts__map-plate { aspect-ratio: 4 / 3; }
    .b-contacts__done { padding: 3.2rem 0; }
    .b-contacts__done-txt { font-size: 1.7rem; }
}

/* Настоящие контакты вместо пометок (07.10.2026). */
.b-contacts__value {
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
}
.b-contacts__value[href]:hover { color: var(--accent); }
.b-contacts__value--addr { font-weight: 500; }

.b-contacts__hint {
    display: block;
    margin-top: 0.8rem;
    font-size: 1.4rem;
    color: var(--ink-3);
}

/* Кнопка «Показать карту» внутри плашки. */
.b-contacts__map-btn { margin-top: 1.6rem; }

/* Карта занимает ровно то место, что и плашка до неё: подменяется без прыжка. */
.b-contacts__map-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 0.1rem solid var(--line-2);
    border-radius: var(--r-m);
}
@media (max-width: 560px) {
    .b-contacts__map-frame { aspect-ratio: 4 / 3; }
}

/* =========================================================== подвал === */

/* blocks/footer.css — подвал. Только на section--dark.
   Все селекторы начинаются с .b-footer. Цветов нет — только var(--…);
   размеры в rem, px остались лишь в точках адаптива. */

.b-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
    gap: 4.8rem;
    align-items: start;
    padding-bottom: 4.8rem;
    border-bottom: 0.1rem solid var(--ink-3);
}

.b-footer__brand { display: flex; flex-direction: column; }
.b-footer__name {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink-on-dark);
}
.b-footer__sub {
    margin-top: 1rem;
    max-width: 28rem;
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--line-2);
}

.b-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.b-footer__link {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ink-on-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s var(--ease);
}
.b-footer__link:hover { color: var(--wood); }

.b-footer__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    min-width: 0;
    max-width: 32rem;
}
.b-footer__phone { width: 100%; font-size: 1.5rem; }
.b-footer__cta { white-space: nowrap; }

.b-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.2rem;
    padding-top: 3.2rem;
}
.b-footer__legal {
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--line-2);
}
.b-footer__dot { font-size: 1.3rem; color: var(--ink-3); }

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

/* ------------------------------------------------------------------ адаптив */

@media (max-width: 1000px) {
    .b-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 4rem; }
    .b-footer__side { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .b-footer__top {
        grid-template-columns: minmax(0, 1fr);
        gap: 3.2rem;
        padding-bottom: 3.2rem;
    }
    .b-footer__side { grid-column: auto; max-width: none; }
    .b-footer__nav { gap: 1rem; }
    .b-footer__bottom { padding-top: 2.4rem; }
}

@media (max-width: 560px) {
    .b-footer__name { font-size: 2.4rem; }
    .b-footer__cta { width: 100%; }
    .b-footer__bottom { gap: 0.8rem; }
    .b-footer__dot { display: none; }
}

/* То же, что в шапке: в подвале плашка .need стояла над кнопкой и была шире
   неё, перетягивая внимание с контактов на наш список недостающего. */
.b-footer .need {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.4rem;
    line-height: 1.3;
}
.b-footer .need::before { content: "нет: "; }

/* Логотип в подвале — белая версия того же файла: подвал тёмный всегда. */
/* То же, что в шапке: колоночный флекс растягивал знак на всю ширину
   колонки подвала — 734x32 вместо 64x32. */
.b-footer__mark {
    display: block;
    align-self: flex-start;
    height: 4.8rem;
    width: auto;
    aspect-ratio: 2 / 1;
}

.b-footer__addr {
    margin-top: 0.8rem;
    font-style: normal;
    font-size: 1.4rem;
    line-height: 1.45;
    color: var(--ink-on-dark-2);
}

.b-footer__mail,
.b-footer__phone {
    display: block;
    color: inherit;
    text-decoration: none;
}
.b-footer__mail:hover,
.b-footer__phone:hover { color: var(--brand); }

.b-footer__hours {
    display: block;
    margin-top: 0.4rem;
    font-size: 1.4rem;
    color: var(--ink-on-dark-2);
}

/* Внешняя ссылка в меню подвала помечена стрелкой: уводит с сайта. */
.b-footer__link--out::after {
    content: " ↗";
    font-size: 0.9em;
    color: var(--brand);
}


/* ============================================================ страница документа === */

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

.container--narrow { max-width: 82rem; }

.b-doc__h1 {
    font-size: calc(3.6rem * var(--type));
    line-height: 1.15;
    margin: 0;
}
.b-doc__meta {
    margin: 1.2rem 0 0;
    font-size: calc(1.4rem * var(--type));
    color: var(--ink-3);
}
.b-doc__body {
    margin-top: 3.2rem;
    font-size: calc(1.6rem * var(--type));
    line-height: 1.7;
}
.b-doc__body p { margin: 0 0 1.6rem; }
.b-doc__body p + p strong:only-child { display: inline-block; margin-top: 1.6rem; }
.b-doc__body ul {
    margin: 0 0 1.6rem;
    padding-left: 2.2rem;
}
.b-doc__body li { margin-bottom: 0.6rem; }
.b-doc__body strong { color: var(--ink); }
.b-doc__back { margin-top: 4rem; }

@media (max-width: 560px) {
    .b-doc__h1 { font-size: calc(2.8rem * var(--type)); }
}

/* ------------------------------------------------- режим правки (CMS) ----- */

/* Шапка фиксированная, поэтому padding-top у body (его ставит admin.css)
   её не сдвигает: без этого правила она легла бы поверх служебной полосы.
   В каркасе то же правило написано для класса .header — здесь шапка
   называется .b-header, и общего правила на оба имени не бывает. */
body.is-edit .b-header { top: var(--a-bar-h, 44px); }

/* Пустое поле в режиме правки надо хотя бы увидеть, чтобы в него попасть
   курсором: строка без текста имеет нулевую ширину. */
body.is-edit [data-path]:empty {
    display: inline-block;
    min-width: 6rem;
    min-height: 1.2em;
    outline: 0.1rem dashed var(--line-2);
}