/* ==========================================================================
   ГОРТЕКС — база: токены, типографика, компоненты, хедер, футер.
   Развитие текущей схемы сайта: тёмный #383838 + золото #f5be6e.
   ========================================================================== */

:root {
  /* Нейтральная шкала. 700 — базовый фон страницы, как на текущем сайте. */
  --c-900: #1d1d1d;
  --c-850: #242424;
  --c-800: #2f2f2f;
  --c-700: #383838;
  --c-600: #434343;
  --c-550: #4d4d4d;
  --c-500: #565656;
  --c-400: #7a7a7a;
  --c-300: #b0b0b0;
  --c-200: #d6d6d6;
  --c-100: #f7f7f7;

  /* Два тёплых цвета, и у каждого своя работа.

     ЗОЛОТО — действие и бренд: кнопки, ссылки, активный чип, подчёркивание
     пункта меню, логотип, цифры. Всё, на что можно нажать, и всё, что надо
     прочитать, — золотое.

     ТЕРРАКОТА — разметка: верхняя линейка карточки, штрих перед
     надзаголовком, квадратные маркеры, акцентные линейки у выносок.
     Ни одной буквы: на полотне страницы контраст 3,75:1 — норма для
     графики (3:1), но не для текста (4,5:1).

     Так брендбук и просит: «цветовая гамма контрастная, прямолинейная,
     тёплая», «акцент смещён на текстовые блоки и контрасты цветовых линий».
     Цвет в системе не чужой — это почти в точности --fuel-diesel (#e0663e),
     которым каталог метит дизельное топливо. */
  --gold: #f5be6e;
  --gold-strong: #e2a24a;
  --gold-deep: #c8862e;
  --gold-dim: rgba(245, 190, 110, 0.14);
  --gold-line: rgba(245, 190, 110, 0.32);

  --accent: #d66140;
  /* Осветлённая терракота на случай, если пояснение понадобится довести
     до 4,5:1. Тот же тон, светлее: на полотне --c-800 даёт 4,6:1.
     Сейчас не используется — владелец выбрал исходный #d66140. */
  --accent-text: #e8916f;
  --accent-dim: rgba(214, 97, 64, 0.14);
  --accent-line: rgba(214, 97, 64, 0.38);

  /* Топливо — из data.js каталога, чтобы каталог и главная не разъезжались. */
  --fuel-diesel: #e0663e;
  --fuel-solid: #f5be6e;
  --fuel-electro: #a98bff;

  /* Подтверждение: галочки «вкл. НДС», успешная отправка формы.
     Единственный зелёный в системе — больше оттенков не заводим. */
  --ok: #4ade80;

  --text: var(--c-100);
  --text-dim: #c9c9c9;
  /* Приглушённый текст — отдельное значение, а не --c-400 (#7a7a7a) из шкалы.
     На #7a7a7a контраст к фону карточки был 3,1:1 при норме 4,5:1 для
     обычного текста: строка «проблема» в сценариях аренды и подписи под
     цифрами читались с трудом, особенно на ноутбуке при дневном свете.
     #a0a0a0 даёт 4,5:1 и на полотне страницы, и на карточке, но остаётся
     заметно тише основного текста — иерархия из трёх уровней сохраняется.
     Шкала --c-400 не тронута: она нужна для рамок и декора, где контраст
     текста ни при чём. */
  --text-mute: #a0a0a0;

  /* ---------- Цвет текста по ролям ----------
     Три значения выше — ступени контраста, они общие. Ниже — роли, и у
     каждой свой цвет, который правится отдельно от соседних:

       --text-lead   подводка под заголовком (.lead): «Разрез настоящей
                     котельной из нашей модели…»
       --text-aside  пояснение справа от заголовка (.head__aside): «Модуль
                     проходит их подряд, на одной площадке…», «Цифры — из
                     действующего прайса…», «Компоновка зависит от мощности…»
       --text-note   мелкая сноска: подпись под кадром, примечание под
                     расчётом, читалка узла

     Зачем роли, если цвет у них всё равно один: поменять пояснение, не тронув
     подводку, иначе нельзя — обе сидели на --text-dim, и правка одной тянула
     вторую. Меняете здесь — меняется на всех страницах сразу. */
  --text-lead: var(--text-dim);
  --text-aside: var(--text-dim);
  --text-note: var(--text-mute);

  --font: "Golos Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Oswald", "Golos Text", "Segoe UI", Arial, sans-serif;

  /* Карточка. Один рецепт на весь сайт: до этого их было четыре —
     --c-600 на --c-500 в каталоге и на главной, --c-700 в развилке,
     --c-800 на --c-500 в карточке модели, --c-800 на --c-600 в аренде.
     Страницы из-за этого выглядели чужими друг другу.
     Направление глубины на сайте одно: чем дальше, тем темнее, —
     поэтому карточка темнее полотна страницы (--c-700). */
  --card-bg: var(--c-800);
  --card-bd: var(--c-600);
  --card-inner: var(--c-850);
  /* панель внутри карточки */

  --radius: 2px;
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 16px 34px rgba(0, 0, 0, 0.45);

  /* Шапка — тоже часть первого экрана. На мониторе 27" её 76px это 8% высоты
     окна, на ноутбуке 15" — уже 11%, и эти проценты раздел отнимает у своего
     содержимого. Поэтому высота шапки считается от высоты окна, как и всё
     остальное на первом экране. Ниже 66px не опускается: при меньшей высоте
     телефон с режимом работы и кнопка КП начинают тесниться. */
  --header-h: clamp(66px, calc(100vh / 12.5), 76px);
  --header-h: clamp(66px, calc(100svh / 12.5), 76px);
  --container: 1240px;
  --gutter: 24px;

  /* ---------- Шкала первого экрана ----------
     Разделы обязаны открываться ровно в окно: шапка раздела плюс следующий
     блок — и ни полоски третьего снизу. На мониторе, по которому всё
     вылизано (окно 950px), так и было, а на ноутбуке — нет: отступы упирались
     в свои нижние пределы и дальше не сжимались, первый экран застревал
     на 736px при доступных 654 и подглядывал снизу.

     Теперь у первого экрана одна общая шкала: единица равна 1px при окне
     950px и уменьшается вместе с окном. Всё, из чего собран экран, считается
     в этих единицах — поэтому на любой диагонали это та же самая раскладка,
     просто снятая в другом масштабе, и прокрутка на всех экранах
     останавливается в одном и том же месте.

     Шкалы две, потому что сжимаются они по-разному. Отступ можно ужать вдвое
     и никто не заметит — текст ужать вдвое нельзя, его перестанут читать.
     Поэтому у кегля своя, пологая прямая: окно теряет 290px — строка теряет
     12% (14px в карточке на мониторе, 12.7px на ноутбуке 15", 12.3px
     на 1366×768). Ниже 0.86 не опускается: 12px — предел, за которым
     описание сценария читать уже неприятно.

     В кегле участвует и ширина окна: при 1360px и уже правая колонка
     становится тесной, и заголовок в 32px в ней уже не стоит. Отступы
     от ширины не зависят — в экран они не влезают именно по высоте.

     Воздух убывает быстрее окна — отсюда вычет 190px, а не простое деление.
     Причина в том, что строка текста сжимается только до предела: ниже
     окна 855px кегль стоит на месте, а окно продолжает уменьшаться, и
     недостающие пиксели взять больше неоткуда, кроме отступов. При окне
     950px формула даёт ровно 1 — то есть то же, что было на мониторе
     до правки, — а при 700px уже 0.67 вместо 0.74.

     Вверх шкалы тоже растут, и потолок у каждой свой. Единица — это
     раскладка для окна 950px, и на мониторе 27" при 100% масштаба (окно
     1330px) она смотрелась островом: блок 814px посреди экрана 1254px,
     440px сверху занимало одно фото. Дело было не в центровке, а в том,
     что раскладка упиралась в потолок, рассчитанный на окно поменьше.
     Поэтому воздух растёт до 1.6, кегль до 1.15, крупный набор до 1.25.
     Выше не пускаем: текст крупнее этого выглядит уже не просторным,
     а набранным для слабовидящих.

     Пара объявлений подряд — обычный запас под старые браузеры: svh считает
     окно без адресной строки, vh — вместе с ней. */
  --fit-space: clamp(0.46px, calc((100vh - 190px) / 760), 1.6px);
  --fit-space: clamp(0.46px, calc((100svh - 190px) / 760), 1.6px);
  --fit-type: clamp(0.86px, min(calc((100vh + 1466px) / 2416), calc(100vw / 1360)), 1.15px);
  --fit-type: clamp(0.86px, min(calc((100svh + 1466px) / 2416), calc(100vw / 1360)), 1.15px);

  /* Третья шкала — для крупного набора: заголовка главной в 56px и года
     в карточке обещания. Она заметно круче остальных, и вот почему.
     Заголовок главной занимает на мониторе четыре строки и четверть первого
     экрана. Отдать ему те же 9%, что подводке, — значит не отдать ничего:
     четыре строки останутся четырьмя. Зато на 46px он складывается в три,
     и экран разом получает полсотни пикселей. Поэтому шкала подобрана так,
     чтобы перелом пришёлся на окно около 810px — там, где высоты начинает
     не хватать по-настоящему. На ноутбуке заголовок выходит 40px: он
     по-прежнему самый крупный на экране, просто больше не съедает его
     целиком. Ниже 0.68 не опускается — 38px это всё ещё заголовок
     страницы, а не подзаголовок секции. */
  --fit-head: clamp(0.68px, calc((100vh - 150px) / 800), 1.25px);
  --fit-head: clamp(0.68px, calc((100svh - 150px) / 800), 1.25px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Акцент карточки. Инлайном подставляется цвет топлива или типа
     (см. cardVars в data.js); значение ниже — запасное. */
  --card-accent: var(--gold);
  --card-accent2: var(--gold);
}

/* ---------- Сброс ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--c-700);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Атрибут hidden должен побеждать. Браузер задаёт ему display:none в своей
   таблице стилей, а любой наш класс с display: grid/flex перебивает её по
   специфичности — так пустая рамка блока модели висела в окне заявки. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

/* Видимый фокус — по сайту много клавиатурной навигации в формах и фильтрах. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Скроллбар, как на текущем сайте ---------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: var(--c-700);
}

::-webkit-scrollbar-track {
  background-color: var(--c-700);
}

::-webkit-scrollbar-thumb {
  background-color: var(--gold);
  border-radius: 10px;
  background-clip: padding-box;
}

@supports (-moz-appearance: none) {

  :root,
  body {
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--c-700);
  }
}

/* ---------- Сетка ----------
   Горизонтальные поля задаются через padding-inline. Если навесить на тот же
   элемент модификатор с шорткатом `padding: X 0 Y`, он затрёт поля и блок
   уедет из общей сетки — модификаторы контейнера обязаны использовать
   padding-block. */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  padding: clamp(56px, 7vw, 104px) 0;
}

.section--tight {
  padding: clamp(40px, 5vw, 68px) 0;
}

.section--alt {
  background: var(--c-850);
}

.section--panel {
  background: var(--c-800);
}

.section--deep {
  background: var(--c-900);
}

/* ---------- Типографика ---------- */
h1,
h2,
h3,
h4 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  line-height: 1.08;
}

h1 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
}

h2 {
  font-size: clamp(1.55rem, 3.1vw, 2.5rem);
}

h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
}

h4 {
  font-size: 1rem;
  letter-spacing: 0.06em;
}

p {
  margin: 0 0 16px;
}

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
}

.lead {
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  color: var(--text-lead);
  max-width: 62ch;
}

.muted {
  color: var(--text-mute);
}

.small {
  font-size: 0.875rem;
}

.nums {
  font-variant-numeric: tabular-nums;
}

.section-head {
  margin-bottom: clamp(28px, 4vw, 48px);
  max-width: 74ch;
}

/* ---------- Кнопки ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--c-500);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

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

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  --btn-bg: var(--gold);
  --btn-fg: var(--c-900);
  --btn-bd: var(--gold);
}

.btn--primary:hover {
  --btn-bg: var(--gold-strong);
  --btn-bd: var(--gold-strong);
}

.btn--ghost {
  --btn-bd: var(--gold);
  --btn-fg: var(--gold);
}

.btn--ghost:hover {
  --btn-bg: var(--gold);
  --btn-fg: var(--c-900);
}

.btn--quiet {
  --btn-bd: var(--c-500);
  --btn-fg: var(--text);
}

.btn--quiet:hover {
  --btn-bd: var(--c-300);
  --btn-bg: rgba(255, 255, 255, 0.04);
}

/* Ссылка, а не кнопка: возврат по шагам мастера — действие второстепенное,
   рамка вокруг него спорила с заголовком шага и налезала на него.
   Модификатор использовался в разметке, но объявлен не был, поэтому
   кнопки «Назад» рисовались как обычные — в рамке и с отступами. */
.btn--text {
  --btn-bd: transparent;
  --btn-fg: var(--text-mute);
  padding: 0;
  margin-bottom: 18px;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

.btn--text:hover {
  --btn-fg: var(--gold);
  transform: none;
}

.btn--text:active {
  transform: none;
}

.btn--lg {
  padding: 17px 34px;
  font-size: 1rem;
}

.btn--sm {
  padding: 9px 16px;
  font-size: 0.8125rem;
}

.btn--block {
  width: 100%;
}

/* Пара кнопок с перехватом акцента. Наводишь на вторую — золото уходит
   к ней, первая гаснет: две золотые кнопки рядом одинаково громкие,
   и выбор перестаёт читаться. То же правило работает на карточке модели
   (.pd-action-buttons) — там оно появилось раньше. */
.btn-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Наведённая кнопка в паре всегда одного цвета. Без этого получалось два
   разных оранжевых: сплошная на наведении темнеет до --gold-strong,
   а контурная заливается базовым --gold, и одно и то же состояние
   выглядело по-разному в зависимости от того, на какую навели. */
.btn-pair .btn--ghost:hover {
  --btn-bg: var(--gold-strong);
  --btn-bd: var(--gold-strong);
  --btn-fg: var(--c-900);
}

.btn-pair:has(.btn--ghost:hover) .btn--primary {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--c-500);
}

.btn-pair:has(.btn--primary:hover) .btn--ghost {
  --btn-bd: var(--c-500);
  --btn-fg: var(--text-mute);
}

/* Текстовая ссылка со стрелкой — базовый переход внутри блоков. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.9375rem;
}

.link-arrow svg {
  transition: transform 0.2s var(--ease);
  flex: none;
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* ---------- Чип фильтра ----------
   Общий кирпич: чипы стоят в фильтрах аренды, в каталоге и переключателем
   ракурса на производстве. Раньше правило лежало отдельно в arenda.css и
   catalog.css — на производстве, где ни того ни другого файла нет, кнопки
   оставались системными: серые прямоугольники поверх тёмного фона. */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--c-500);
  border-radius: var(--radius);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.875rem;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.filter-chip:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--text);
}

.filter-chip.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--c-900);
  font-weight: 600;
}

.filter-chip:disabled {
  opacity: 0.38;
  cursor: default;
}

/* Счётчик в чипе: сколько котельных под этот фильтр. */
.filter-chip__n {
  font-size: 0.75rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-variant-numeric: tabular-nums;
}

.filter-chip.is-active .filter-chip__n {
  background: rgba(0, 0, 0, 0.16);
}

/* ---------- Поля форм ----------
   Живут в базе, а не на главной: те же поля нужны на /kp и /kontakty. */
.field {
  display: grid;
  gap: 7px;
}

.field label {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.field input,
.field select,
.field textarea {
  padding: 13px 14px;
  background: var(--c-800);
  border: 1px solid var(--c-500);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.18s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  outline-offset: 1px;
}

.field textarea {
  resize: vertical;
  min-height: 88px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--text-mute);
  line-height: 1.5;
}

.consent input {
  margin-top: 2px;
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
  flex: none;
}

.consent a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-status {
  font-size: 0.875rem;
}

.form-status.is-ok {
  color: var(--gold);
}

.form-status.is-error {
  color: #ff8f6b;
}

/* ---------- Мелкие детали ---------- */
.tag {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: var(--gold-dim);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--c-900);
  font-weight: 700;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 16px;
}

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

   svh вместо vh: на мобильных vh считается по развёрнутому окну, и низ
   уезжает под адресную строку. min-height, а не height — если содержимое
   выше окна, экран растёт, а не обрезается.

   Правило однажды было удалено вместе со стилями модалок Tilda, и первый
   экран каталога перестал растягиваться — снаружи это выглядело так, будто
   следующая секция подглядывает снизу. */
.intro-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}

/* ---------- Общая часть первого экрана ----------
   Раньше эти правила лежали тремя копиями — в catalog.css, arenda.css
   и proizvodstvo.css, — и копии уже начинали расходиться: порог, на котором
   уходит пояснение справа, был 940 на аренде и 1150 на производстве. Разделы
   должны открываться одинаково, поэтому общая часть — шапка раздела, карточка
   справа, заголовок второго блока — живёт здесь, в одном месте. В файлах
   страниц остаётся только то, чего нет у соседей: сценарии, этапы,
   калькулятор.

   Всё считается в единицах --fit-space и --fit-type (см. :root): кегль и
   воздух уменьшаются вместе с окном, а не ступеньками по брейкпоинтам.
   Коэффициент — это размер при окне 950px, то есть ровно то, что было
   на мониторе до правки.

   Ширина в условии — сетки карточек становятся трёхколоночными с 1024px,
   ниже сценарии и этапы идут в столбец и в один экран не помещаются
   ни при каких отступах. */
@media (min-width: 1024px) {
  /* ---------- Куда уходит лишняя высота ----------
     Окно бывает выше, чем нужно содержимому: на 27" при 100% масштаба под
     первый экран есть 1320px, а собран он из 950. Эти 370px куда-то деть надо,
     и до сих пор каждая страница девала их по-своему: каталог растягивал
     карточку расчёта, аренда и производство делили остаток поровну над сеткой
     и под ней, главная центровала весь блок. В итоге на одном и том же окне
     содержимое кончалось на 162px от нижнего края в каталоге, на 199 в аренде,
     на 220 на производстве и на 296 на главной — при быстром перелистывании
     страницы выглядели по-разному собранными, хотя каждая по отдельности
     стояла ровно.

     Теперь правило одно на весь сайт: низ первого экрана прибит. Содержимое
     кончается на одном и том же расстоянии от сгиба (26 единиц) на любой странице и при
     любой высоте окна, а вся лишняя высота уходит в шапку раздела — она
     растёт, и текст в ней встаёт по центру выросшей полосы. Шапка для этого
     подходит: у неё своё фоновое пятно и нижняя граница, лишний воздух в ней
     читается как широкая полоса, а не как дыра. Дыра получилась бы во втором
     блоке — там пустота повисла бы прямо над заголовком раздела. */
  .intro-screen .page-hero {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: calc(19 * var(--fit-space)) calc(15 * var(--fit-space));
  }

  .intro-screen .page-hero .crumbs {
    margin-bottom: calc(10.5 * var(--fit-space));
    font-size: calc(13 * var(--fit-type));
  }

  .intro-screen .page-hero .eyebrow {
    margin-bottom: calc(14 * var(--fit-space));
    font-size: calc(13 * var(--fit-type));
  }

  .intro-screen .page-hero h1 {
    font-size: calc(32 * var(--fit-type));
    margin-bottom: calc(11.5 * var(--fit-space));
  }

  /* Подводка идёт плотнее обычных 1.55: три строки на первом экране стоят
     рядом с заголовком и читаются как один блок, а не как абзац статьи. */
  .intro-screen .page-hero .lead {
    margin-bottom: 0;
    font-size: calc(18 * var(--fit-type));
    line-height: 1.5;
  }

  /* Кнопки. По горизонтали поля не трогаем — это ширина кнопки, а в неё
     первый экран не упирается; сжимается только высота строки. */
  .intro-screen .hero-split__actions {
    margin-top: calc(17 * var(--fit-space));
  }

  .intro-screen .page-hero .btn--lg {
    padding-block: calc(17 * var(--fit-space));
    font-size: calc(16 * var(--fit-type));
  }

  /* Карточка-факт справа: число парка на аренде, число моделей в каталоге. */
  .intro-screen .stock-card {
    padding: calc(17 * var(--fit-space)) calc(17 * var(--fit-space));
  }

  .intro-screen .stock-card__num {
    font-size: calc(44 * var(--fit-type));
  }

  .intro-screen .stock-card__label {
    margin: calc(10 * var(--fit-space)) 0 calc(11.5 * var(--fit-space));
    font-size: calc(14 * var(--fit-type));
  }

  .intro-screen .stock-card__note {
    font-size: calc(15 * var(--fit-type));
  }

  /* ---------- Второй блок первого экрана ----------
     Забирает всю свободную высоту и центрует содержимое в ней. Класс общий
     у трёх разделов: сценарии аренды, этапы производства, калькулятор
     каталога. Отступ по вертикали перебивает .section — он здесь не по
     содержимому раздела, а по остатку окна. */
  /* Второй блок идёт своей высоты и стоит у нижнего края. 26 единиц под ним —
     тот самый общий отступ до сгиба; меняете его здесь — меняется на всех
     четырёх первых экранах сразу (у главной он продублирован в home.css,
     там свой первый экран без второго блока). */
  .intro-screen__fill {
    flex: none;
    display: flex;
    align-items: center;
    padding-block: calc(25 * var(--fit-space)) calc(26 * var(--fit-space));
  }

  .intro-screen__fill > .container {
    width: 100%;
  }

  .intro-screen__fill .head {
    gap: calc(16 * var(--fit-space)) 40px;
    margin-bottom: calc(15 * var(--fit-space));
  }

  .intro-screen__fill h2 {
    font-size: calc(27 * var(--fit-type));
  }

  .intro-screen__fill .head__aside {
    font-size: calc(16 * var(--fit-type));
  }

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

     Кегль сжимается вместе с окном намеренно: уменьшать текст — единственный
     способ удержать шесть карточек в экране, не выбрасывая их. */
  .intro-screen .tiles,
  .intro-screen .scenarios,
  .intro-screen .steps { gap: calc(10.5 * var(--fit-space)); }

  .intro-screen .tile,
  .intro-screen .scenario,
  .intro-screen .step {
    padding: calc(14 * var(--fit-space)) calc(17 * var(--fit-space));
    gap: calc(6 * var(--fit-space));
  }

  .intro-screen .tile__title,
  .intro-screen .scenario__title,
  .intro-screen .step__title { font-size: calc(15.5 * var(--fit-type)); }

  .intro-screen .tile__text,
  .intro-screen .tile__note,
  .intro-screen .scenario__problem,
  .intro-screen .scenario__solution,
  .intro-screen .step__text,
  .intro-screen .step__note {
    font-size: calc(14 * var(--fit-type));
    line-height: 1.42;
  }

  .intro-screen .tile__note,
  .intro-screen .scenario__solution,
  .intro-screen .step__note {
    margin-top: calc(4 * var(--fit-space));
    padding-top: calc(10.5 * var(--fit-space));
  }
}

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

   Пороги — по высоте окна целиком, вместе с шапкой браузера их примерно
   на 90–120px меньше: 1290 это монитор 27" при 100% масштаба, 920 — он же
   при 125%, 820 — ноутбук 16", 780 — типовой 15", 730 — 14" и старые
   1366×768.

   Верхний порог был 1040 и стал 1290 после того, как шкалы начали расти
   вверх (см. :root). Полоса окон 1041–1280 тогда перестала помещаться:
   доводы карточки и надзаголовок в ней ещё показывались, а кегль и отступы
   были уже крупнее — аренда вылезала на 38px. */
@media (min-width: 1024px) and (max-height: 1290px) {
  .intro-screen .stock-card__facts,
  .intro-screen__fill .head__eyebrow { display: none; }
}

@media (min-width: 1024px) and (max-height: 920px) {
  .intro-screen__fill .head__aside { display: none; }
}

/* Надзаголовок шапки раздела держится дольше всех: он единственный
   на первом экране говорит, куда человек попал, если смотреть не на крошки.
   Уходит последним — когда без него экран уже не собирается. */
@media (min-width: 1024px) and (max-height: 780px) {
  .intro-screen .page-hero .eyebrow { display: none; }
}

/* Окно ниже 690px — это ноутбук 1366×768 и всё, что мельче. Там не хватает
   уже не отступов, а строк: шесть карточек с описаниями просто длиннее окна.
   Последнее, что можно отдать без потери смысла, — размер кнопки и крошек:
   кнопка становится обычной вместо крупной, крошки — на кегль мельче.
   Это не спасает экран целиком, но убирает большую часть выступа. */
@media (min-width: 1024px) and (max-height: 690px) {
  .intro-screen .page-hero .btn--lg {
    padding-block: calc(12 * var(--fit-space));
    font-size: calc(14 * var(--fit-type));
  }

  .intro-screen .page-hero .crumbs {
    margin-bottom: calc(6 * var(--fit-space));
    font-size: calc(12 * var(--fit-type));
  }
}

/* Ниже 620px окна в один экран не влезает уже ничего: там либо резать
   содержание, либо оставить человека с восемью строками текста кеглем 12.
   Ограничение снимаем — страница просто прокручивается, как любая длинная.
   Сжатые отступы остаются: до сути всё равно ближе. */
@media (max-height: 620px) {
  .intro-screen { min-height: 0; }
}

/* ---------- Шапка внутренней страницы ----------
   Один компонент на все разделы, кроме главной: у неё свой большой первый
   экран. Здесь — хлебные крошки, заголовок и подводка. */
.page-hero {
  /* Снимок на подложке теперь есть у КАЖДОЙ шапки — так решено 16.09.2026.
     Кадр приходит переменной --hero-photo; странице, которой свой кадр
     не назначили, достаётся нейтральный default.webp. Раньше это был
     отдельный модификатор .page-hero--photo, и половина страниц осталась
     с пустым тёмным фоном. */
  --hero-photo: url("/assets/img/hero/default.webp");
  position: relative;
  isolation: isolate;
  background: var(--c-850);
  border-bottom: 1px solid var(--c-600);
  padding-block: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 48px);
}

/* Шапка раздела со снимком на подложке.
   ---------------------------------------
   Зачем. Низ первого экрана прибит, и лишнюю высоту окна забирает именно
   шапка раздела (см. README, «Первый экран»). На мониторе 1600×1200 это
   даёт около 295 пикселей пустоты вокруг текста, и чем больше монитор,
   тем её больше. Снимок закрывает эту пустоту, НЕ ДОБАВЛЯЯ НИ ОДНОГО
   ПИКСЕЛЯ ВЫСОТЫ: он лежит фоном в ::before, а не в потоке. Правило
   «раздел ровно в экран» от него не двигается.

   Снимок задаётся страницей инлайном: style="--hero-photo: url(...)".
   Так рецепт один на все разделы, а кадр у каждого свой.

   Поверх снимка две заливки, и обе обязательные:
     * горизонтальная — тёмная слева, где текст, и светлее справа, где
       воздух. Иначе заголовок ложится на детали кадра и теряет контраст;
     * вертикальная — гасит низ в цвет полотна, чтобы шапка не обрывалась
       по линейке, а перетекала в следующий блок.
   Контраст проверен: белый текст на самом светлом месте подложки
   держит норму, поэтому плотность заливки уменьшать нельзя. */
/* Класс остаётся ради разметки, которая его уже использует: правила
   переехали в сам .page-hero, и отдельного оформления ему больше не нужно. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(
      to bottom,
      rgba(36, 36, 36, 0.32) 0%,
      rgba(36, 36, 36, 0.62) 60%,
      var(--c-850) 100%
    ),
    /* На узком экране колонки схлопываются в одну, и текст идёт по всей
       ширине — значит затемнение тоже должно быть ровным по всей ширине.
       Послабление справа появляется ниже, вместе с двумя колонками. */
    linear-gradient(to right, rgba(29, 29, 29, 0.88), rgba(29, 29, 29, 0.88)),
    var(--hero-photo);
  background-size: cover, cover, cover;
  background-position: center, center, center 62%;
  background-repeat: no-repeat;
}

/* Две колонки: слева текст, справа карточка-факт с непрозрачным фоном.
   Под карточкой затемнять нечего — там снимок можно отпустить почти
   вдвое, и раздел перестаёт выглядеть тёмным прямоугольником. */
@media (min-width: 900px) {
  .page-hero::before {
    background-image:
      linear-gradient(
        to bottom,
        rgba(36, 36, 36, 0.32) 0%,
        rgba(36, 36, 36, 0.62) 60%,
        var(--c-850) 100%
      ),
      linear-gradient(
        to right,
        rgba(29, 29, 29, 0.94) 0%,
        rgba(29, 29, 29, 0.86) 40%,
        rgba(29, 29, 29, 0.45) 100%
      ),
      var(--hero-photo);
  }
}

.page-hero h1 {
  margin-bottom: 16px;
}

.page-hero .lead {
  margin: 0;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.8125rem;
  color: var(--text-mute);
}

.crumbs a {
  transition: color 0.16s var(--ease);
}

.crumbs a:hover {
  color: var(--gold);
}

.crumbs span[aria-hidden] {
  color: var(--c-500);
}

.crumbs [aria-current] {
  color: var(--text-dim);
}

/* ==========================================================================
   ХЕДЕР
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--c-800);
  border-bottom: 1px solid var(--c-600);
}

.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  /* Терракота по краям, золото в середине: та самая «контрастная тёплая
     гамма» из брендбука, и первое, что видно на любой странице. */
  background: linear-gradient(90deg, var(--accent), var(--gold) 45%, var(--accent));
}

.header.is-stuck {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--header-h);
  /* Шапка живёт в той же сетке 1240px, что и весь контент, и переполняться
     ей нельзя — иначе появляется горизонтальная прокрутка на всю страницу. */
  max-width: var(--container);
}

.header__inner>* {
  min-width: 0;
}

/* --- Логотип --- */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.logo__img {
  height: 30px;
  width: auto;
}

/* --- Навигация: 5 пунктов, вся глубина — в мега-меню и футере --- */
.nav {
  display: none;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 2px;
  }
}

.nav__item {
  position: relative;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease);
}

.nav__link:hover,
.nav__item.is-open>.nav__link {
  color: var(--gold);
}

.nav__link:hover::after,
.nav__item.is-open>.nav__link::after,
.nav__item.is-current>.nav__link::after {
  transform: scaleX(1);
}

.nav__item.is-current>.nav__link {
  color: var(--gold);
}

.nav__caret {
  transition: transform 0.24s var(--ease);
  flex: none;
}

.nav__item.is-open .nav__caret {
  transform: rotate(180deg);
}

/* --- Мега-меню --- */
.mega {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translate(-50%, -8px);
  min-width: 580px;
  padding: 28px;
  background: var(--c-850);
  border: 1px solid var(--c-600);
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.nav__item.is-open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Крайние пункты меню центрировать нельзя — широкая панель уезжает за край
   экрана. Первый открывается вправо от своего пункта, последний — влево. */
.mega--start {
  left: 0;
  transform: translate(0, -8px);
}

.nav__item.is-open .mega--start {
  transform: translate(0, 0);
}

.mega--end {
  left: auto;
  right: 0;
  transform: translate(0, -8px);
}

.nav__item.is-open .mega--end {
  transform: translate(0, 0);
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 32px;
}


/* Вход в каталог целиком — первой строкой меню, во всю ширину.

   Золотая заливка, которая тут стояла сначала, перевешивала всё меню:
   пункт «Купить БМК» становился заметно тяжелее соседних вкладок, хотя
   это всего лишь ссылка на список. Оставляем ровно столько выделения,
   сколько нужно, чтобы строку было видно первой: тёмная подложка на тон
   темнее панели, золотая засечка слева и золотой заголовок. Заливка,
   как у кнопки, приберегается для действий — «Получить КП» внизу. */
.mega__all {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 20px;
  padding: 11px 14px;
  background: var(--c-900);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  transition: background 0.16s var(--ease);
}

.mega__all:hover {
  background: var(--c-800);
}

.mega__all-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.mega__all-note {
  font-size: 0.8125rem;
  color: var(--text-mute);
}

.mega__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.mega__list a {
  display: block;
  padding: 7px 10px;
  margin-left: -10px;
  font-size: 0.9375rem;
  color: var(--text-dim);
  border-radius: var(--radius);
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}

.mega__list a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.mega__list a span {
  display: block;
  font-size: 0.75rem;
  color: var(--text-mute);
}

.mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-600);
}

.mega__foot p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-mute);
  max-width: 46ch;
}


/* --- Правая группа: мессенджеры, телефон, КП --- */
.header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .header__actions {
    margin-left: 0;
  }
}

.msgr {
  display: none;
  gap: 6px;
}

@media (min-width: 640px) {
  .msgr {
    display: flex;
  }
}

.msgr__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--c-500);
  border-radius: var(--radius);
  color: var(--text-dim);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.msgr__btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-dim);
}

.msgr__btn svg {
  width: 19px;
  height: 19px;
}

/* Знак MAX плотнее самолётика телеграма: он занимает почти весь свой
   квадрат, а плоскость плана — примерно две трети. При одинаковых 19px
   MAX выглядел бы тяжелее соседа, поэтому у него кегль меньше. */
.msgr__btn--max svg {
  width: 17px;
  height: 17px;
}

.header__phone {
  display: none;
}

@media (min-width: 1240px) {
  .header__phone {
    display: block;
    text-align: right;
  }
}

/* Блок прижат вправо, и две его строки должны быть примерно одной ширины,
   иначе нижняя вылезает левее номера и блок выглядит сломанным. Раньше
   подпись была «Пн–Пт, 10:00–19:00 · Контакты» — 177,8 против 138,3
   у номера, и левый край номера приходился на «10:00», а не на «Пн».

   Сошлись не кеглем, а текстом: «Пн–Пт 10–19 · Контакты» — это 137,6,
   то есть на 0,7 пикселя у́же номера. Номер остался прежних 17px и в шапке
   ничего не потяжелело. Поменяете текст подписи — проверьте ширину снова,
   она задана в partials/header.php. */
.header__phone a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.18s var(--ease);
}

.header__phone a:hover {
  color: var(--gold);
}

.header__contacts-link {
  display: block;
  font-family: var(--font) !important;
  font-size: 0.6875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-mute);
  transition: color 0.18s var(--ease);
}

.header__contacts-link:hover,
.header__contacts-link.is-current {
  color: var(--gold);
}

.header__cta {
  display: none;
}

@media (min-width: 1120px) {
  .header__cta {
    display: inline-flex;
  }
}

/* --- Бургер --- */
.burger {
  display: grid;
  place-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--c-500);
  border-radius: var(--radius);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .burger {
    display: none;
  }
}

.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  transition: transform 0.24s var(--ease), opacity 0.18s var(--ease);
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Мобильное меню --- */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  background: var(--c-850);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav__body {
  padding: 8px var(--gutter) 32px;
}

.mobile-nav details {
  border-bottom: 1px solid var(--c-600);
}

.mobile-nav summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 2px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.mobile-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-nav details[open] summary {
  color: var(--gold);
}

.mobile-nav details[open] summary svg {
  transform: rotate(180deg);
}

.mobile-nav summary svg {
  transition: transform 0.2s var(--ease);
  flex: none;
}

.mobile-nav__sub {
  display: grid;
  gap: 2px;
  padding: 0 0 16px 2px;
}

.mobile-nav__sub a {
  padding: 9px 0;
  font-size: 0.9375rem;
  color: var(--text-dim);
}

.mobile-nav__sub a:hover {
  color: var(--gold);
}

.mobile-nav__flat {
  display: block;
  padding: 18px 2px;
  border-bottom: 1px solid var(--c-600);
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mobile-nav__foot {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.mobile-nav__phone {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
}

/* ==========================================================================
   ФУТЕР — карта сайта: меню минималистичное, вся глубина живёт здесь
   ========================================================================== */

.footer {
  background: var(--c-850);
  border-top: 1px solid var(--c-600);
}

.footer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 34px 0;
  border-bottom: 1px solid var(--c-600);
}

.footer__cta h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}

.footer__cta p {
  margin: 6px 0 0;
  color: var(--text-mute);
  font-size: 0.9375rem;
}

.footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__main {
  display: grid;
  gap: 36px 28px;
  padding: 48px 0;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer__main {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .footer__main {
    grid-template-columns: 1.5fr repeat(4, 1fr);
  }
}

.footer__brand .logo__img {
  height: 34px;
}

.footer__tagline {
  margin: 18px 0 0;
  font-size: 0.9375rem;
  color: var(--text-dim);
  max-width: 34ch;
}

.footer__contacts {
  margin-top: 22px;
  display: grid;
  gap: 8px;
}

.footer__phone {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.footer__phone:hover {
  color: var(--gold);
}

.footer__mail {
  color: var(--gold);
  font-size: 1rem;
}

.footer__hours {
  font-size: 0.8125rem;
  color: var(--text-mute);
}

.footer__msgr {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.footer__msgr .msgr__btn {
  width: 42px;
  height: 42px;
}

.footer__col-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer__list a {
  font-size: 0.9375rem;
  color: var(--text-dim);
  transition: color 0.16s var(--ease);
}

.footer__list a:hover {
  color: var(--gold);
}

.footer__legal {
  display: grid;
  gap: 24px 40px;
  padding: 30px 0;
  border-top: 1px solid var(--c-600);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-mute);
}

@media (min-width: 900px) {
  .footer__legal {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footer__legal strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text-dim);
  font-weight: 600;
}

.footer__legal dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
}

.footer__legal dt {
  color: var(--text-mute);
}

.footer__legal dd {
  margin: 0;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.footer__bottom {
  padding: 20px 0 28px;
  background: var(--c-900);
}

.footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-mute);
  line-height: 1.6;
}

.footer__bottom a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__bottom a:hover {
  color: var(--gold);
}

/* ---------- Плашка cookie ---------- */
.cookie {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 80;
  display: none;
  align-items: center;
  gap: 18px;
  width: calc(100% - 32px);
  max-width: 720px;
  padding: 16px 20px;
  background: var(--c-800);
  border: 1px solid var(--c-500);
  border-left: 3px solid var(--gold);
  box-shadow: var(--shadow-lift);
  font-size: 0.8125rem;
  color: var(--text-dim);
}

.cookie.is-visible {
  display: flex;
}

.cookie a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie p {
  margin: 0;
}

/* ===== Кирпичи, общие для всех страниц =====
   Раньше жили в home.css, но их просят и карточка модели, и посадочные
   разделов. Дублировать такое по файлам — верный способ развести стили. */

/* ---------- Общий заголовок секции: текст слева, ссылка справа ---------- */
.head {
  display: grid;
  gap: 16px 40px;
  margin-bottom: clamp(28px, 3.6vw, 44px);
}

@media (min-width: 900px) {
  .head--row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .head--row .head__link,
  .head--row .head__links {
    justify-self: end;
    padding-bottom: 6px;
  }

  /* Пояснение к секции — вровень с заголовком, а не с надзаголовком.
     Надзаголовок вынесен в отдельный ряд на всю ширину (.head__eyebrow),
     поэтому h2 и пояснение оказываются в одном ряду.

     Выравниваем по верхнему краю, а не по базовой линии. Раньше стояло
     baseline: базовые линии сходились, но у заголовка кегль 40px при
     межстрочном 1.08, а у пояснения 18px при 1.55 — верх букв пояснения
     оказывался на 20 пикселей ниже верха заголовка, и правая колонка
     висела, ни к чему не привязанная.

     По верху расхождение — 1,3 пикселя: столько разницы в подъёме от верха
     строки до верха буквы у Oswald 40/1.08 и Golos Text 18/1.55 (замерено
     через actualBoundingBoxAscent, не на глаз).

     Ровно вровень пояснение и заголовок не ставим: на одной высоте они
     спорят за первый взгляд. Полстроки вниз — и порядок чтения очевиден:
     сначала заголовок, потом пояснение. Отступ в em, а не в пикселях,
     поэтому на сжатом первом экране он уезжает вместе с кеглем. */
  .head--row:has(.head__aside) {
    align-items: start;
  }

  .head--row .head__aside {
    align-self: start;
    padding-top: 0.5em;
  }

  /* Ширина колонки с пояснением задана явно, а не по содержимому. С auto
     она получалась разной на каждой странице — на каталоге пояснение
     распускалось на 692px и в две строки, на аренде ужималось до 513px
     и в три, хотя текст там одной длины. Пропорция взята у шапки раздела
     (.hero-split): пояснение встаёт ровно под карточкой-фактом, и правый
     край текста на всей странице один. */
  .head--row:has(.head__aside) {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 16px 56px;
  }

  .head--row .head__aside {
    max-width: none;
  }
}

/* Второй ссылкой в шапке раздела живёт калькулятор: раньше он был седьмой
   карточкой в сетке типов, а типов стало шесть — ряд по три перестал сходиться. */
.head__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
}

.head__text {
  max-width: 68ch;
}

/* Пояснение справа от заголовка. Цвет — своей ролью, а не через .lead:
   иначе его не поправить, не задев все подводки страницы. Правило снаружи
   медиазапроса — на узком экране пояснение встаёт под заголовок, но
   остаётся тем же пояснением. */
.head__aside {
  /* ТЕРРАКОТА ЗДЕСЬ — НАМЕРЕННО. Это единственное место на сайте, где она
     работает буквами, и владелец 17.09.2026 подтвердил, что так и задумано:
     пояснение справа от заголовка — фирменный приём, по нему раздел узнаётся.

     16.09.2026 я поменял её на обычный --text-dim, сославшись на правило
     «терракота только разметка». Это была ошибка: правило написано против
     случайного дрейфа, а не против осознанного приёма. Вернул.

     Что про это надо знать: контраст #d66140 на полотне --c-800 равен
     3,75:1. Для графики норма (3:1), для текста ниже нормы (4,5:1).
     Поэтому терракотой набирается ТОЛЬКО пояснение — короткая фраза
     рядом с заголовком, которую можно не прочитать без потери смысла.
     Ни заголовки, ни основной текст, ни подписи в таблицах так не красим.
     Если понадобится провести по контрасту — есть --accent-text ниже. */
  color: var(--accent);
}

/* Надзаголовок над обеими колонками. Без этого он тянул левую колонку вниз,
   и пояснение справа вставало выше заголовка. */
.head__eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.head h2 {
  margin-bottom: 14px;
}

.head p {
  margin: 0;
}

/* ---------- Кадр в рамке ----------
   Фотография или рендер с подписью: светлая подложка под цвет самого кадра,
   терракотовая линейка сверху и подпись на тёмной полосе снизу. Тот же вид,
   что у ролика сборки на производстве (.prod-video) — там к рамке добавлена
   кнопка проигрывания, поэтому правило у него своё. */
.frame {
  margin: 0;
  position: relative;
  background: #e3e3e3;
  border: 1px solid var(--card-bd);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
}

.frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.frame figcaption {
  padding: 10px 14px;
  background: var(--card-bg);
  border-top: 1px solid var(--card-bd);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-note);
}

/* Рамка под ФОТОГРАФИЮ, а не под рендер. Отличий три, и все обязательные:
   рендеры сняты на белом и вписываются в рамку целиком (contain на светлой
   подложке), а снимок из цеха должен заполнять кадр (cover) — иначе по бокам
   встают светлые поля, которых на фотографии быть не может. Пропорция 16:9:
   в ней подготовлены все снимки со съёмки (tools/prepare_photos.py). */
.frame--photo {
  background: var(--c-900);
}

.frame--photo img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Лента снимков: три кадра в ряд, на узком — один под другим. */
.shots {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) { .shots { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Плитка ----------
   Карточка с номером, заголовком и одним-двумя блоками текста. Один рецепт
   на четыре раздела: сценарии аренды, этапы цеха, схема лизинговой сделки
   и способы доставки.

   До этого рецепт лежал двумя одинаковыми копиями — .scenario в arenda.css
   и .step в proizvodstvo.css, — и совпадали они до пикселя: те же отступы
   24/22, та же рамка, тот же кегль. Третья копия появилась бы в услугах,
   четвёртая в следующем разделе, и через полгода они бы разъехались, как
   уже разъехались четыре рецепта карточек до общей уборки.

   Поэтому здесь три имени на одно правило: .tile — новое и общее,
   .scenario и .step — старые, под ними лежит разметка аренды и
   производства и завязанные на неё правила первого экрана. Сетка
   и элементы — так же.

   Разное осталось одно: наведение. У сценария карточка приподнимается,
   у этапа только светлеет рамка. Плитка ведёт себя как этап: ни та, ни
   другая не ссылка, и приподнимать то, что не нажимается, незачем. */
.tiles,
.scenarios,
.steps {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .tiles,
  .scenarios,
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .tiles,
  .scenarios,
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* Три в ряд — шаг по умолчанию: столько сценариев, этапов и способов
   доставки. Схема из четырёх шагов в такой сетке ломается на 3 + 1,
   поэтому у неё свой модификатор. А там, где в карточке не строка,
   а абзац, четыре колонки по 280px превращают её в столбик из десяти
   строк — для таких блоков есть сетка на два. */
@media (min-width: 1024px) {
  .tiles--4 { grid-template-columns: repeat(4, 1fr); }
  .tiles--2 { grid-template-columns: repeat(2, 1fr); }
}

.tile,
.scenario,
.step {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 24px 22px;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.tile:hover,
.step:hover { border-color: var(--gold-line); }

/* Картинка в плитке — рендер исполнения из каталога. Уходит в край карточки
   и садится на светлую подложку: рендеры сняты на белом, на тёмной карточке
   они висели бы в темноте. Цвет подложки приходит инлайном из CATALOG_TYPES,
   у каждого исполнения он свой — тот же, что в каталоге. */
.tile__media {
  margin: -24px -22px 6px;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: hidden;
  border-bottom: 1px solid var(--card-bd);
  border-radius: var(--radius) var(--radius) 0 0;
}

.tile__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tile__num,
.scenario__num,
.step__num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.tile__title,
.scenario__title,
.step__title { margin: 0; font-size: 1.0625rem; }

.tile__text,
.scenario__problem,
.step__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-mute);
}

/* Вторая половина карточки: у сценария — решение под проблемой, у этапа —
   примечание под описанием, у плитки — уточнение. Отделяется линией. */
.tile__note,
.scenario__solution,
.step__note {
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--card-bd);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Заголовок плитки, который одновременно ссылка. Цвет наследуется —
   золотом он становится только при наведении, как и сама плитка.
   Подчёркивания нет: в сетке из четырёх плиток четыре подчёркнутых
   заголовка читаются как список ссылок, а не как карточки. */
.link-plain {
  color: inherit;
  text-decoration: none;
}

.tile:hover .link-plain { color: var(--gold); }

/* ---------- Ссылка под блоком ----------
   Стрелка-ссылка, которая стоит не в шапке раздела, а под сеткой карточек:
   у абзаца в типографике верхнего отступа нет, и без этого правила ссылка
   прилипала к нижнему ряду плиток. */
.section__after {
  margin: 28px 0 0;
}

/* ---------- Карточка объекта ----------
   Общий кирпич: шесть объектов стоят блоком на главной и полной лентой
   на /cases. Правила лежали в home.css, и странице объектов пришлось бы
   их скопировать — то есть завести пятый рецепт карточки через полгода
   после того, как четыре предыдущих свели в один.

   Разметка карточки одна на оба места и печатается из partials/cases-data.php.
   Раскрытие по наведению и модальное окно на тач-экранах — site.js, он ищет
   .case на любой странице. */
.cases { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cases { grid-template-columns: repeat(3, 1fr); } }

.case {
  position: relative;
  /* Лицо и раскрытая часть лежат в одной ячейке грида друг на друге.
     Так высоту карточки задаёт то из двух, что выше, и раскрытая часть
     не может не поместиться.

     Было: раскрытая часть висела position: absolute и в высоту не
     считалась вовсе, а карточке стояла min-height: 400px «на глаз».
     Пока в кейсах лежала одна строка вроде «Установка оборудования
     в бизнес-центре», этого хватало. С настоящими текстами — перестало:
     карточка обрезала последние строки прямо по букве, у серии из 26
     котельных не было видно даже строки «Регион».

     400px остаются нижней границей, чтобы короткие карточки не съёживались. */
  display: grid;
  grid-template-areas: "stack";
  min-height: 400px;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.case:not(.case--draft) { cursor: pointer; }
.case:not(.case--draft):hover,
.case:not(.case--draft):focus-within { border-color: var(--gold); transform: translateY(-3px); }

.case__face {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}
/* Фото на лице карточки. Пропорция 16:9 — та, в которой сняты и
   подготовлены снимки объектов (assets/img/cases). cover обрезает
   лишнее, если карточка окажется у́же расчётной. */
.case__cover {
  aspect-ratio: 16 / 9;
  margin-bottom: 4px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-700);
}
.case__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case__year { font-family: var(--font-display); font-size: 0.875rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.case__title { margin: 0; font-size: 1rem; }
.case__place { font-size: 0.8125rem; color: var(--text-mute); }

/* Фраза на лице карточки. Высоту карточки задаёт раскрытая сторона, и без
   этой фразы лицо оставалось наполовину пустым. */
.case__summary {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.case__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-500);
}
.case__specs dt { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.case__specs dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.case__hint {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.case__hint::after { content: " →"; }

/* Раскрытая карточка. Накрывает лицевую сторону целиком. */
.case__detail {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--c-800);
  border-left: 3px solid var(--gold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
/* Только там, где наведение вообще существует. На тач-экранах его нет —
   там карточка открывается по тапу в модальном окне (см. site.js). */
@media (hover: hover) and (pointer: fine) {
  .case:hover .case__detail,
  .case:focus-within .case__detail { opacity: 1; visibility: visible; transform: none; }
}

.case__photo {
  flex: none;
  height: 132px;
  display: grid;
  place-items: center;
  background: var(--c-700);
  border: 1px dashed var(--c-500);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Появилось настоящее фото — рамка-заглушка убирается сама. */
.case__photo:has(img) { border-style: solid; border-color: var(--c-500); }
.case__photo img { width: 100%; height: 100%; object-fit: cover; }
.case__photo span {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.case__detail-kicker {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.case__detail-title { margin: 0; font-size: 1.0625rem; }
.case__task { margin: 0; font-size: 0.875rem; color: var(--text-dim); }

.case__rows { margin: auto 0 0; display: grid; gap: 7px; }
.case__rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-600);
}
.case__rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.case__rows dt { font-size: 0.75rem; color: var(--text-mute); }
.case__rows dd {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.case--draft {
  background: transparent;
  border-style: dashed;
  border-color: var(--c-500);
}
.case--draft .case__title,
.case--draft .case__specs dd { color: var(--text-mute); }
.case--draft .tag { opacity: 0.5; }

/* Модальное окно кейса для тач-устройств. */
.case-modal {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text);
}
.case-modal::backdrop { background: rgba(0, 0, 0, 0.7); }
.case-modal__body { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.case-modal .case__photo { height: 190px; }
.case-modal__close {
  align-self: flex-end;
  margin: 12px 12px -8px 0;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--c-500);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.case-modal__close:hover { border-color: var(--gold); color: var(--gold); }
.case-modal .case__detail {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  padding: 0;
  border-left: 0;
  background: none;
}


/* ---------- Карточка новости ----------
   Общий кирпич: лента новостей стоит на главной и хроника производства —
   на странице производства. Раньше стили жили в home.css, и второй странице
   пришлось бы их скопировать.

   Карточка бывает двух видов: ссылкой (ведёт на материал) и раскрывающейся
   (дочитывается на месте). Второй вид появился потому, что отдельных страниц
   новостей ещё нет, а уводить человека в 404 ради двух абзацев — плохой
   размен. Логика раскрытия — в site.js, рядом с аккордеоном вопросов. */
.news {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .news {
    grid-template-columns: repeat(3, 1fr);
  }
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.news-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.news-card__media {
  aspect-ratio: 16 / 10;
  background: var(--c-800);
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  min-height: 0;
  border-bottom: 1px solid var(--c-500);
}

.news-card__media img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Фотография вместо студийного рендера. Рендеры сняты на светлом и должны
   вписываться в карточку целиком (contain на подложке), фотография обязана
   заполнять кадр — иначе по бокам встают поля, которых на снимке быть
   не может. Флаг приходит из данных: 'photo' => true. */
.news-card__media--photo {
  padding: 0;
  background: var(--c-900);
}

.news-card__media--photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* Логотип вместо снимка — у вехи «зарегистрировано ООО» показывать нечего,
   кроме самого знака. Знак лежит на прозрачном фоне и слово в нём набрано
   белым: на светлой подложке рендеров от логотипа осталось бы одно пламя,
   поэтому кадр тёмный. Ширина знака ограничена — растянутый на всю карточку
   он читается как рекламный баннер, а не как веха хроники.
   Флаг приходит из данных: 'logo' => true. */
.news-card__media--logo {
  background: var(--c-900);
}

.news-card__media--logo img {
  width: 62%;
  max-width: 260px;
  height: auto;
}

.news-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.news-card__meta .tag {
  letter-spacing: 0.06em;
}

.news-card__title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.15;
}

.news-card__text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-dim);
}

.news-card__more {
  margin-top: auto;
  padding-top: 14px;
}

/* Вариант-ссылка. Ссылкой сделан заголовок — это и есть название материала,
   а не строчка «подробнее»; невидимая накладка от него растягивается на всю
   карточку, чтобы попадать по ней целиком. Так у ссылки остаётся осмысленное
   имя для скринридера и один элемент в обходе по Tab, а не три. */
.news-card__title a {
  color: inherit;
}

.news-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news-card:hover .news-card__title a {
  color: var(--gold);
}

.news-card:hover .news-card__more {
  color: var(--gold);
}

.news-card:hover .news-card__more svg {
  transform: translateX(4px);
}

.news-card:focus-within {
  border-color: var(--gold);
}

/* Раскрывающегося варианта карточки (.news-card--expand, .news-card__extra,
   .news-card.is-open) здесь больше нет: новости стали хроникой, у события
   появился свой адрес /hronika/<slug>, и разворачивать текст на месте стало
   нечему. Правила висели без единого носителя — вместе с обработчиком
   data-expand в site.js убраны 18.09.2026. */

.news-card__more svg {
  transition: transform 0.2s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .news-card__more svg {
    transition: none;
  }
}

/* ---------- FAQ ----------
   Общий кирпич: блок вопросов стоит и в каталоге, и в аренде, поэтому
   стили здесь, а не в файле одной страницы. Логика раскрытия — в site.js.
   Раскрывается по клику, одновременно открыт один пункт. */
/* ---------- Подсказка «скопировано» ----------
   Всплывает над телефоном или почтой после клика (см. site.js). Живёт
   одна на всю страницу: создаётся при первом копировании и переезжает
   к нужной ссылке. position: fixed — координаты берутся из
   getBoundingClientRect, то есть уже относительно окна.

   z-index выше шапки (60) и куки-полосы (80): телефон живёт в прилипшей
   шапке, и подсказка не должна оказаться под ней. */
.copy-tip {
  position: fixed;
  z-index: 90;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 6px 12px;
  background: var(--gold);
  color: var(--c-900);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.copy-tip.is-on { opacity: 1; }

/* Места сверху не хватило — показываемся под ссылкой (см. site.js). */
.copy-tip.is-below { transform: translate(-50%, 10px); }

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

.faq {
  padding: 70px 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}

.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  transition: border-color 0.2s ease;
}

.faq-item.is-open {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--c-500));
}

.faq-q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  color: var(--text);
  font-weight: 700;
  font-size: 0.98rem;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

/* иконка +, поворачивается в × */
.faq-ic {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-ic::before,
.faq-ic::after {
  content: "";
  position: absolute;
  background: var(--gold);
  border-radius: var(--radius);
}

.faq-ic::before {
  left: 0;
  top: 8px;
  width: 18px;
  height: 2px;
}

.faq-ic::after {
  left: 8px;
  top: 0;
  width: 2px;
  height: 18px;
}

.faq-item.is-open .faq-ic {
  transform: rotate(135deg);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a-inner {
  overflow: hidden;
}

.faq-a-inner p {
  color: var(--text-dim);
  margin: 0;
  padding: 0 20px 20px;
  font-size: 0.92rem;
  line-height: 1.6;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.faq-item.is-open .faq-a-inner p {
  opacity: 1;
}

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

  .faq-ic {
    transition: none;
  }

  .faq-a-inner p {
    transition: none;
  }
}

/* Топливо — компактная строка под каталогом, а не отдельная секция. */
.fuel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--c-600);
}

.fuel-row__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-right: 4px;
}

.fuel-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid var(--c-500);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--text-dim);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.fuel-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--fuel, var(--gold));
}

.fuel-chip:hover {
  border-color: var(--fuel, var(--gold));
  color: var(--text);
}

/* ===== Окно заявки =====
   Живёт в base.css, а не в отдельном файле: подключается из подвала
   и присутствует на каждой странице сайта. */

.lead-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(94vh, 940px);
  padding: 0;
  border: 1px solid var(--c-500);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--c-800);
  color: var(--text);
  overflow: auto;
  box-shadow: var(--shadow-lift);
}

.lead-modal::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.lead-modal__close {
  position: sticky;
  top: 10px;
  float: right;
  margin: 10px 10px 0 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--c-700);
  border: 1px solid var(--c-500);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 0.9375rem;
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.lead-modal__close:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.lead-modal__body {
  padding: clamp(20px, 2.4vw, 28px);
}

.lead-modal__title {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

.lead-modal__lead {
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: 0.9375rem;
}

.lead-modal__form {
  display: grid;
  gap: 14px;
}

/* Окно должно помещаться целиком: прокручивать форму заявки — верный способ
   потерять человека на середине. На низких экранах убираем то, без чего
   форма остаётся понятной: подзаголовок, обещание и надпись «Заявка». */
@media (max-height: 940px) {
  .lead-modal__body {
    padding: 18px 20px 20px;
  }

  .lead-modal__lead {
    margin-bottom: 14px;
  }

  .lead-modal__form {
    gap: 12px;
  }

  .lead-modal .field label {
    font-size: 0.75rem;
  }
}

@media (max-height: 820px) {

  .lead-modal__lead,
  .lead-modal .eyebrow {
    display: none;
  }

  .lead-modal__legal {
    display: none;
  }

  .lead-modal__model {
    padding: 10px 12px;
  }
}

@media (max-height: 700px) {
  .lead-modal__body {
    padding: 14px 16px 16px;
  }

  .lead-modal__form {
    gap: 10px;
  }

  .lead-modal__title {
    font-size: 1.15rem;
    margin-bottom: 12px;
  }

  .lead-modal .field {
    gap: 4px;
  }

  .lead-modal textarea {
    min-height: 60px;
  }

  .lead-modal .btn--lg {
    padding: 13px 24px;
  }
}

/* Две колонки полей с 560px: окно уже (760px), чем страница, и общий
   порог в 900px здесь никогда бы не сработал. */
.lead-modal__row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .lead-modal__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Телефон. Девять полей в одну колонку в экран не помещаются никак —
   сжимать их до нечитаемости хуже, чем прокрутить. Поэтому окно становится
   листом снизу, а кнопка отправки прилипает к низу и видна всегда:
   человек не должен искать её прокруткой. */
@media (max-width: 479px) {
  .lead-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    margin: auto auto 0;
    border-radius: var(--radius) var(--radius) 0 0;
    border-inline: none;
    border-bottom: none;
  }

  .lead-modal__form {
    padding-bottom: 4px;
  }

  .lead-modal__form>button[type="submit"] {
    position: sticky;
    bottom: 0;
    margin-top: 4px;
    box-shadow: 0 -14px 18px -6px var(--c-800);
  }
}

.lead-modal .req {
  color: var(--gold);
}

.lead-modal__model {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 11px 14px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
}

.lead-modal__model-label {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.lead-modal__model strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lead-modal__model-meta {
  font-size: 0.8125rem;
  color: var(--text-dim);
}

.lead-modal__legal {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-mute);
}

.lead-modal__legal a {
  color: var(--gold);
}

/* Ловушка для ботов: уводим из потока, но не через display:none —
   часть спам-скриптов такие поля пропускает намеренно. */
.lead-modal__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Согласие на обработку данных. Осознанное действие, а не строка мелким
   шрифтом под кнопкой: галочку человек ставит сам, и это уходит в CRM
   вместе с текстом, временем и адресом страницы. */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-dim);
  cursor: pointer;
}

.consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.consent a {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-line);
}

.consent a:hover {
  border-bottom-color: var(--gold);
}


/* ===== Курсор-огонёк =====
   Над кнопкой системный курсор прячется, вместо него — логотип, догоняющий
   мышь. Логика в assets/js/cursor.js, скрипт подключён в подвале и работает
   на всех страницах — поэтому и стили живут здесь, а не в файле одной
   страницы. Раньше они лежали в catalog.css и product.css, и на главной,
   аренде и /kp элемент создавался без размеров: огонька просто не было. */
#custom-cursorbotton-open {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
  opacity: 0;
  scale: 0;
  /* Анимируем только появление. Положение задаётся отдельным свойством
     translate и переходом не сглаживается — иначе курсор тянулся бы
     за мышью с задержкой. */
  transition: scale 0.15s ease-out, opacity 0.15s ease-out;
  z-index: 99999;
  background: no-repeat center / contain;
  will-change: translate, scale, opacity;
}

/* Какой логотип показать над элементом. Значение читает cursor.js.
   Держим его в CSS, а не в скрипте: пользовательские свойства меняются
   мгновенно, тогда как фон кнопки едет 0.2 секунды, и вычисленный
   по фону логотип успевал моргнуть не тем цветом.

   По умолчанию золотой — сайт тёмный. Тёмный ставим там, где под курсором
   заведомо светло. */
.btn,
.filter-chip,
.pd-btn-download,
.bmk-calc .chip,
.bmk-calc .seg button,
.calc-buttons .btn {
  --cursor-logo: light;
}

/* Кнопки, которые под курсором золотые: сплошные — всегда, контурные —
   в момент наведения. Огонёк над ними тёмный и таким остаётся: смена цвета
   на основных кнопках не нужна, её просили оставить только на фильтрах. */
.btn--primary,
.btn--ghost,
.pd-btn-main,
.bmk-calc .chip.on,
.bmk-calc .seg button.active,
.pd-btn-calc {
  --cursor-logo: dark;
}

/* Полосы фильтров: выбранный чип золотой, остальные тёмные. Здесь смена
   логотипа и нужна — она показывает, что состояние переключилось. */
.filter-chip.is-active {
  --cursor-logo: dark;
}

/* Системный курсор прячем ровно над теми же элементами, что перечислены
   в BUTTONS у скрипта. Разъедутся списки — над кнопкой окажутся две стрелки
   или ни одной. */
.btn,
.filter-chip,
.pd-btn-main,
.pd-btn-calc,
.pd-btn-download,
.pd-action-buttons a,
.pd-action-buttons button,
.bmk-calc .chip,
.bmk-calc .seg button,
.calc-buttons .btn {
  cursor: none;
}

/* Тач и «поменьше движения»: скрипт там не включается, и курсор надо вернуть. */
@media (hover: none),
(prefers-reduced-motion: reduce) {
  #custom-cursorbotton-open {
    display: none;
  }

  .btn,
  .filter-chip,
  .pd-btn-main,
  .pd-btn-calc,
  .pd-btn-download,
  .pd-action-buttons a,
  .pd-action-buttons button,
  .bmk-calc .chip,
  .bmk-calc .seg button,
  .calc-buttons .btn {
    cursor: pointer;
  }
}


/* ===== Шапка раздела: текст слева, карточка-факт справа =====
   Один приём на все разделы. Текстовая колонка ограничена по читаемости,
   и в контейнере 1240px справа оставалась пустота; заполняем её цифрой,
   которая и есть главный аргумент раздела. */
.hero-split {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .hero-split {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 56px;
  }
}

.stock-card {
  padding: 26px 24px;
  background: var(--card-bg);
  border: 1px solid var(--accent-line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
}

/* Межстрочный 1.15, а не 0.9. Плотный интерлиньяж был рассчитан на цифры
   без выносных элементов — «196», «10–30%», «15». Как только в карточке
   появилось «30 минут», хвост «у» ушёл на 13 пикселей НИЖЕ верхнего края
   подписи, то есть буквально налез на неё: строка в 0.9 кегля просто
   не вмещает нижние выносные. 1.15 плюс отбивка подписи в 24px дают
   между хвостом «у» и подписью 9,8 пикселя вместо минус 13,2 — замерено.
   Любое слово в цифре теперь безопасно, карточка выросла на 10 пикселей. */
.stock-card__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.stock-card__label {
  display: block;
  margin: 24px 0 14px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.stock-card__note {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-dim);
}

/* Доводы под цифрой. Держат шапки разделов одной высоты — без них
   у каталога она была на 207px ниже, чем у аренды, и разделы
   не совпадали при переходе. */
.stock-card__facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--card-bd);
  display: grid;
  gap: 10px;
}

.stock-card__facts li {
  position: relative;
  padding-left: 20px;
  color: var(--text-mute);
  font-size: 0.875rem;
  line-height: 1.45;
}

.stock-card__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  background: var(--accent);
}

.hero-split__actions {
  margin-top: 30px;
}