/* ─── Fira Sans со своего сервера ───
   ⚠️ Шрифт сменён 07.08.2026: в Lato НЕТ КИРИЛЛИЦЫ (Google отдаёт только latin
   и latin-ext), поэтому весь русский текст рисовался системным шрифтом и сайт
   выглядел по-разному на Windows, Mac и Android. Fira Sans покрывает и латиницу,
   и кириллицу — теперь весь сайт одним шрифтом, одинаково у всех.
   ⚠️ Он на 10%% уже Lato в заголовках и чуть ниже ростом строчных: если текст
   покажется мелким, поднимать bazovyy размер в body, а не менять шрифт обратно. */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/fira-sans-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/fira-sans-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/fira-sans-700-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/fira-sans-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/fira-sans-900-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/fira-sans-900-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

*{box-sizing:border-box;margin:0;padding:0}
/* ⚠️ Браузерное `[hidden]{display:none}` слабее любого правила с классом:
   у блоков с `display:grid`/`flex` атрибут hidden просто не работает, и скрытое
   через JS остаётся на экране (так «спасибо» показывалось поверх формы). */
[hidden]{display:none!important}
/* ⚠️⚠️ ТЁМНАЯ ТЕМА (вариант 13, 27.08.2026).
   Заказчику зашёл пробник «Кинолента», и он попросил перевести на этот стиль
   ВЕСЬ сайт. Палитра перевёрнута прямо здесь, в переменных, — сами правила
   ниже не трогали: они и так берут цвета отсюда, и любая правка «по месту»
   разъехалась бы с остальными.

   Что с чем поменялось местами:
     --paper / --white  были светлыми полосами  → стали тёмными
     --ink-d            был тёмными чернилами   → стал светлым
     --soft-d           был приглушённым тёмным → стал приглушённым светлым
     --line-l           была тёмная линия       → стала светлая

   ⚠️ Имена переменных СОХРАНЕНЫ, хотя теперь и врут по смыслу («paper» уже
   не бумага). Переименовать — значит тронуть 900 строк темы и весь генератор
   ради косметики; риск не окупается. Здесь это оговорено, чтобы следующий
   не гадал, почему «белая» полоса тёмная.
   ⚠️ Оранжевый акцент НЕ меняли: на тёмном он читается даже лучше. */
:root{
  --slate:#141c26; --slate-d:#0e151e; --slate-dd:#080d14;
  --paper:#0b111a; --white:#0f1720;
  --ink:#eef1f3; --ink-d:#e6edf4;
  --soft:rgba(238,241,243,.62); --soft-d:rgba(214,226,238,.66);
  --line-l:rgba(226,236,246,.14); --line-d:rgba(238,241,243,.16);
  --accent:#ff6a13; --accent-2:#e85c0c;
  /* Трубка для узкой шапки. Картинкой не делаем: файл — это ещё один запрос
     и ещё один путь, который может отвалиться при переносе. */
  --ic-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
  /* Лупа — тем же способом, что и трубка выше: маска из data-URI, чтобы значок
     красился currentColor и не тянул за собой отдельный файл. */
  --ic-find:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3a7.5 7.5 0 0 1 5.92 12.11l4.29 4.28a1 1 0 0 1-1.42 1.42l-4.28-4.29A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z'/%3E%3C/svg%3E");
  --f:"Fira Sans",system-ui,-apple-system,sans-serif;
  --shell:clamp(1.2rem,5vw,5rem);
  --e:cubic-bezier(.22,.61,.36,1);
}
html{scroll-behavior:smooth}
body{font-family:var(--f);font-size:17px;line-height:1.6;background:var(--paper);
  color:var(--ink-d);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
/* ⚠️ Именно `clip`, а не `hidden`. `overflow-x:hidden` на body делает его
   контейнером прокрутки, и любой `position:sticky` внутри страницы перестаёт
   работать — прилипающий снимок на карточке товара просто уезжал вверх.
   `clip` так же отсекает вылезающее вбок, но контейнера прокрутки не создаёт.
   Две строки подряд — запасной вариант: браузеры до Safari 16 про `clip`
   не знают и возьмут `hidden`; там снимок просто не будет липнуть. */
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.shell{width:min(1340px,100% - var(--shell)*2);margin-inline:auto}
.prog{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);z-index:99;
  transform:scaleX(0);transform-origin:0 50%}

/* ── тёмные / светлые полосы ── */
.band{padding:clamp(4rem,9vw,8rem) 0;position:relative}
.band--dark{background:var(--slate);color:var(--ink)}
.band--darker{background:var(--slate-d);color:var(--ink)}
/* ⚠️ У светлой (теперь основной тёмной) полосы фон СНЯТ намеренно: ровно
   такой же тон уже даёт body, а прозрачная полоса пропускает сквозь себя
   слой искр, который лежит под содержимым. Со своим фоном она перекрывала
   бы искры, и декоративный слой не был бы виден нигде. */
.band--light{background:transparent}
.band--white{background:var(--white)}
/* полосы обязаны лежать НАД слоем искр, иначе он рисуется поверх текста */
.band{z-index:1}

/* ⚠️ Шапка вынута из потока и лежит поверх. Там, где первым идёт
   полноэкранное медиа (баннер, фотошапка, карта, плитка цвета), оно
   само уходит под неё — это и нужно. На остальных страницах контент
   без отступа залез бы под шапку, поэтому отступ даём адресно. */
body:not(:has(.hero)):not(:has(.shapka)):not(:has(.geo)):not(:has(.ralp)) main{
  padding-top:var(--hdr,73px)}

/* ═══════════ ГЛАВНАЯ: КИНОЛЕНТА ═══════════
   Секция залипает на весь экран, а прокрутка листает главы: кадр меняется
   наездом камеры, справа считаются номера, снизу идёт полоса хода.
   Сделано по пробнику, который выбрал заказчик 27.08.2026. */
.ki{position:relative}
.ki__ek{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;background:#05080d}
.ki__k{grid-area:1/1;opacity:0}
.ki__k img{width:100%;height:100vh;object-fit:cover;transform:scale(1.08)}
/* ⚠️ Затемнение СИЛЬНОЕ слева и слабое справа: текст живёт слева, и без
   такого перекоса он тонет на светлых участках кадра. */
.ki__k::after{content:"";position:absolute;inset:0;
  background:linear-gradient(88deg,rgba(5,8,13,.96),rgba(5,8,13,.42) 68%,rgba(5,8,13,.14))}
/* ⚠️ Искры ПОВЕРХ кадра, но ПОД текстом: иначе точки садятся на буквы
   и заголовок начинает рябить. */
.ki__iskry{grid-area:1/1;position:relative;z-index:1;width:100%;height:100%;
  pointer-events:none}
/* ⚠️ Все главы лежат в ОДНОЙ ячейке грида друг на друге, и последняя —
   невидимая — перехватывала клики: кнопки не работали вовсе.
   Поэтому события выключены у всех, а включаются только у той главы,
   которую скрипт пометил активной. */
.ki__t{grid-area:1/1;position:relative;z-index:2;align-self:center;
  padding:0 clamp(1.4rem,8vw,8rem);max-width:48ch;opacity:0;pointer-events:none}
.ki__t.est{pointer-events:auto}
.ki__ru{color:var(--accent);font:700 .74rem/1 var(--f);letter-spacing:.24em;
  text-transform:uppercase}
.ki__zg{font:900 clamp(1.8rem,4.2vw,3.6rem)/1.02 var(--f);margin:.85rem 0 .8rem;
  color:var(--ink)}
.ki__ld{font:400 clamp(.95rem,1.25vw,1.12rem)/1.55 var(--f);color:#9fb0c2}
.ki__cf{display:flex;align-items:baseline;gap:.7rem;margin-top:1.5rem}
.ki__cifra{font:900 clamp(2rem,4vw,3.2rem)/1 var(--f);color:#7fb2ff}
.ki__pod2{font:400 .82rem/1.3 var(--f);color:#8ea3b8}
.ki__go{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  font:900 .92rem/1 var(--f);color:#1b1005;background:var(--accent);
  padding:.85rem 1.5rem;border-radius:99px;transition:transform .3s var(--e),background .3s}
.ki__go:hover{background:#ff8038;transform:translateX(4px)}
.ki__go i{font-style:normal}
.ki__n{position:absolute;right:clamp(1rem,5vw,4rem);top:50%;transform:translateY(-50%);
  z-index:3;display:grid;gap:.85rem;font:800 .86rem/1 var(--f)}
.ki__n i{font-style:normal;color:rgba(238,241,243,.26);transition:.35s;text-align:right}
.ki__n i.est{color:var(--accent);transform:scale(1.35);transform-origin:right}
.ki__hod{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);width:0;z-index:4}
/* ⚠️ Подпись стояла СЛЕВА ВНИЗУ и налезала на кнопку главы, которая
   там же. Уводим её вправо, к столбику номеров, — там пусто.
   ⚠️ Но в правом нижнем углу висит ещё и кнопка «наверх» (.up: 46 px плюс
   отступ 1.4rem), и подпись налезла уже на неё. Резервируем под кнопку
   место: ширина кнопки + её отступ + зазор. Считать надо от ФАКТИЧЕСКИХ
   чисел .up — если поменяется её размер, поменять и здесь. */
.ki__listayte{position:absolute;right:calc(clamp(1rem,5vw,4rem) + 46px + 1.4rem);
  bottom:2.2rem;z-index:3;
  font:600 .66rem/1 var(--f);letter-spacing:.24em;color:#8ea3b8;text-transform:uppercase}
@media(max-width:820px){.ki__listayte{right:auto;left:clamp(1.4rem,8vw,8rem);bottom:1rem}}
@media(max-width:820px){.ki__n{display:none}.ki__t{max-width:none}}
/* ⚠️ При отключённой анимации листать нечем: показываем первую главу
   и первый кадр статично, иначе экран остаётся пустым. */
@media(prefers-reduced-motion:reduce){
  .ki{height:auto !important}
  .ki__ek{position:static;height:auto;padding:14vh 0}
  .ki__k,.ki__t{opacity:1}
  .ki__k:not(:first-of-type),.ki__t:not(:first-of-type),
  .ki__n,.ki__hod,.ki__iskry{display:none}
  .ki__k img{height:52vh}
}

/* ── искры: живой слой на всю страницу ─────────────────────────────────
   Тот же приём, что в пробнике «Кинолента», который заказчик выбрал:
   редкие тёплые точки медленно тянутся снизу вверх и гаснут к верху.
   ⚠️ Холст ЗАКРЕПЛЁН (fixed) и один на страницу: по холсту на секцию —
   это десяток анимаций разом, и прокрутка начинает спотыкаться.
   ⚠️ z-index 0 — под содержимым: поверх текста точки читаются грязью. */
.iskry{position:fixed;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.55}
@media(prefers-reduced-motion:reduce){.iskry{display:none}}
.band--dark .lead,.band--darker .lead{color:var(--soft)}
.band--light .lead,.band--white .lead{color:var(--soft-d)}

/* ── шапка ── */
/* ⚠️ Фон шапки задаёт сезон (hero.js ставит --hdr-bg от верхней остановки неба):
   постоянная тёмная плашка режет светлое nebo зимой и летом. Запасное значение —
   для внутренних страниц, где сезонного движка нет. */
.hdr{position:sticky;top:0;z-index:60;
  border-bottom:1px solid transparent;transition:padding .4s var(--e),border-color .4s var(--e)}
.hdr.small{border-bottom-color:var(--line-d)}
/* ⚠️ Заливка и размытие уехали в ПСЕВДОЭЛЕМЕНТ. Так их непрозрачность можно
   вести отдельно от содержимого шапки — само меню, логотип и телефон гаснуть
   не должны. Трогать `--hdr-bg` нельзя: его каждый кадр пересчитывает сезонный
   движок под цвет неба. */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--hdr-bg,rgba(73,85,95,.92));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}

/* ── прозрачная шапка ──────────────────────────────────────────────────
   Вверху страницы шапка растворена, при прокрутке заливка набирается
   ПЛАВНО за первые 220 px (переменную `--hdr-vid` ведёт site.js).
   ⚠️ Включаем это ТОЛЬКО там, где под шапкой заведомо тёмный слой:
   первый экран с 3D-сценой либо фотошапка раздела. На карточках товара
   и статьях сразу под шапкой светлая полоса — там прозрачная шапка
   со светлым текстом была бы нечитаема.
   ⚠️ Условие даёт сам CSS через :has() — иначе пришлось бы протаскивать
   флаг в 17 мест генератора. Старый браузер правило просто пропустит
   и покажет обычную шапку: откат безопасный. */
/* ⚠️ В прозрачном режиме шапка вынимается из потока и ЛОЖИТСЯ ПОВЕРХ медиа.
   Замер показал, зачем: при `sticky` первый экран начинался ровно под шапкой
   (низ шапки 73 px = верх сцены), и сквозь «прозрачную» шапку был виден
   не кадр, а светлый фон страницы — то есть пустота. Эффекта не было вовсе. */
.hdr{position:fixed;left:0;right:0;top:0}
.hdr::before{opacity:var(--hdr-vid,0)}

/* ⚠️ Вуаль. Замер верхней полосы кадров показал: у 8 шапок из 16 верх
   светлый (у рустовочных 221 из 255 — почти белый). Без затенения светлый
   текст шапки на них тонет. Вуаль мягкая, градиентом в ничто — читается
   как затенение кадра, а не как плашка, — и гаснет ровно по мере того,
   как проявляется настоящая заливка. */
.hdr::after{content:"";position:absolute;inset:0;z-index:-2;
  pointer-events:none;opacity:calc(1 - var(--hdr-vid,0));
  background:linear-gradient(180deg,rgba(8,13,19,.58),rgba(8,13,19,.22) 62%,rgba(8,13,19,0))}
.hdr{text-shadow:0 1px 14px rgba(0,0,0,calc(.5 - var(--hdr-vid,0) * .5))}
/* ⚠️ Черта под шапкой тоже набирается вместе с заливкой: иначе она
   вспыхивала на 60-м пикселе поперёк ещё прозрачной шапки. */
.hdr.small{
  border-bottom-color:rgba(255,255,255,calc(var(--hdr-vid,0) * .16))}
.hdr__in{display:flex;align-items:center;gap:1.8rem;padding:1.05rem 0;transition:padding .4s var(--e)}
.hdr.small .hdr__in{padding:.58rem 0}
.hdr__logo{display:flex;align-items:center;gap:.55rem;font-weight:900;color:var(--ink);font-size:1.02rem}
.hdr__logo b{width:10px;height:10px;background:var(--accent);border-radius:2px;transform:rotate(45deg)}
.nav{display:flex;gap:1.7rem;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--soft);font-size:.88rem;font-weight:700;position:relative;padding:.2rem 0;
  transition:color .3s var(--e)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--e)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
/* ─── телефон в шапке: главный номер, по клику — остальные линии ───
   Раньше три номера стояли в строку через запятую: позвонить можно было только
   по первому, остальные читались как продолжение текста. */
.tel{position:relative;flex:none}
.hdr__tel{display:inline-flex;align-items:center;gap:.55rem;font:inherit;cursor:pointer;
  color:var(--ink);font-size:.86rem;font-weight:900;border:1.5px solid var(--line-d);
  background:none;padding:.44rem .95rem;border-radius:99px;
  transition:background .35s var(--e),border-color .35s var(--e),color .35s var(--e)}
.hdr__tel:hover,.tel--on .hdr__tel{background:var(--accent);border-color:var(--accent);color:#1b1005}
/* галочка вниз — та же фигура, что и стрелки в карточках: уголок из двух границ */
.hdr__tel s{width:6px;height:6px;flex:none;text-decoration:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--e)}
.tel--on .hdr__tel s{transform:translateY(1px) rotate(225deg)}
.tel__drop{position:absolute;top:calc(100% + .6rem);right:0;min-width:232px;z-index:5;
  background:var(--white);border-radius:13px;padding:.4rem;display:grid;gap:.1rem;
  box-shadow:0 26px 54px -24px rgba(20,26,32,.6);
  opacity:0;visibility:hidden;transform:translateY(-9px);
  transition:opacity .32s var(--e),transform .32s var(--e),visibility .32s}
.tel--on .tel__drop{opacity:1;visibility:visible;transform:none}
.tel__drop a{display:flex;align-items:center;gap:.6rem;padding:.58rem .8rem;border-radius:10px;
  color:var(--ink-d);font-size:.95rem;font-weight:700;white-space:nowrap;
  transition:background .25s,color .25s}
.tel__drop a i{width:8px;height:8px;flex:none;background:var(--accent);border-radius:2px;
  transform:rotate(45deg);font-style:normal;transition:transform .3s var(--e)}
.tel__drop a:hover{background:rgba(255,106,19,.1);color:var(--accent)}
.tel__drop a:hover i{transform:rotate(135deg)}
/* ссылка на карту отгрузок — правее телефона */
.hdr__geo{display:inline-flex;align-items:center;gap:.5rem;flex:none;color:var(--ink);
  font-size:.86rem;font-weight:900;padding:.44rem .2rem;transition:color .3s}
.hdr__geo i{width:8px;height:8px;flex:none;background:var(--accent);border-radius:2px;
  transform:rotate(45deg);font-style:normal;transition:transform .35s var(--e)}
.hdr__geo:hover{color:var(--accent)}
.hdr__geo:hover i{transform:rotate(135deg)}
/* ⚠️ В бургер-меню тот же пункт отдельной ссылкой: перенести узел из шапки
   в меню средствами CSS нельзя, поэтому он выводится дважды и лишний прячется. */
.nav .nav__geo{display:none}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:1.45rem;cursor:pointer}

/* ── типографика ── */
.ttl{font-weight:900;letter-spacing:-.03em;line-height:1.04}
.ttl--xl{font-size:clamp(2.4rem,6vw,5rem)}
.ttl--l{font-size:clamp(1.8rem,3.6vw,3rem)}
.ttl--m{font-size:clamp(1.3rem,2vw,1.8rem)}
.lead{font-size:clamp(1rem,1.3vw,1.12rem);max-width:60ch}
.eyebrow{font-size:.72rem;font-weight:900;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem;display:block}
.mask{overflow:hidden;display:block}
.mask>span{display:block}

/* ── крошки ── */
.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.82rem;color:var(--soft);padding:1.6rem 0;
  background:var(--slate)}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-current]{color:var(--ink)}
.crumbs i{font-style:normal;opacity:.4}

/* ── разворот: текст + фото ── */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.split--rev>*:first-child{order:2}
.shot{overflow:hidden;border-radius:20px;background:var(--slate-d);position:relative}
.shot img{width:100%;height:112%;object-fit:cover;will-change:transform}
.shot--tall{aspect-ratio:4/5}
.shot--wide{aspect-ratio:16/10}
.shot--full{aspect-ratio:21/9}

/* ── галерея объектов ── */
/* ⚠️ Отдельный класс, а НЕ `.shot`: требование заказчика — кадры не кликаются
   и не увеличиваются. У `.shot` картинка нарочно выше рамки (112%) и ездит
   параллаксом при прокрутке — здесь этого быть не должно, показ ровно
   в размер клетки. `pointer-events:none` снимает и перетаскивание, и
   контекстное меню поверх снимка. */
.galob{display:grid;gap:1.4rem;margin-top:2.4rem;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.galob__k{margin:0;overflow:hidden;border-radius:20px;background:var(--slate-d);
  aspect-ratio:16/10}
.galob__k img{width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;user-select:none;-webkit-user-drag:none}

/* ── карточки ── */
.grid{display:grid;gap:1.4rem}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}
.card{background:var(--white);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  color:var(--ink-d);border:1px solid var(--line-l);
  transition:transform .45s var(--e),box-shadow .45s var(--e)}
.card:hover{transform:translateY(-7px);box-shadow:0 24px 54px -28px rgba(20,26,32,.5)}
.card__ph{aspect-ratio:4/3;background:var(--paper);overflow:hidden}
.card__ph img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--e)}
.card:hover .card__ph img{transform:scale(1.07)}
/* Карточка раздела перебирает узлы, которые лежат внутри него.
   ⚠️ Кадры сложены друг на друга через position:absolute, а не
   переключаются сменой src: подмена адреса даёт мигание белым, пока
   грузится следующий файл. Здесь все кадры уже в DOM, меняется только
   прозрачность. */
.card__ph--slide{position:relative}
.card__ph--slide img{position:absolute;inset:0;opacity:0;
  transition:opacity .6s var(--e),transform .85s var(--e)}
.card__ph--slide img.on{opacity:1}
/* ⚠️ Без js первый кадр обязан быть виден: иначе на карточке пустая
   плашка — все кадры прозрачны, а класс «on» проставляет скрипт. */
html:not(.js) .card__ph--slide img:first-child{opacity:1}
@media(prefers-reduced-motion:reduce){
  .card__ph--slide img{transition:none}
}
.card__b{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card__t{font-weight:900;font-size:1.02rem;line-height:1.28}
.card__d{color:var(--soft-d);font-size:.87rem;flex:1}
.card__go{color:var(--accent);font-weight:900;font-size:.86rem;display:inline-flex;gap:.4rem}
.card__go i{font-style:normal;transition:transform .38s var(--e)}
.card:hover .card__go i{transform:translateX(6px)}
.tag{display:inline-block;font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:rgba(255,106,19,.12);border-radius:99px;padding:.24rem .66rem}

/* ── цифры ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:2rem}
.stat__n{font-size:clamp(2.4rem,5vw,4rem);font-weight:900;letter-spacing:-.04em;line-height:1;
  color:var(--accent)}
.stat__l{font-size:.9rem;margin-top:.5rem;color:var(--soft)}
.band--light .stat__l,.band--white .stat__l{color:var(--soft-d)}

/* ── лента объектов ── */
.rail{display:flex;gap:1.2rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-d);border-radius:99px}
.rail>*{flex:0 0 clamp(260px,32vw,420px);scroll-snap-align:start}

/* ── кнопки ── */
/* ⚠️ Текст на оранжевой кнопке ТЁМНЫЙ, а не белый. Замер по WCAG: белый
   на `#ff6a13` даёт контраст 2,87 при норме 4,5 — надпись мылит, и это
   тянулось ещё со светлой темы. Тёмно-коричневый `#1b1005` того же
   семейства, что и сам оранжевый, даёт около 6 и выглядит собранным,
   а не «чёрный текст на кнопке». */
/* ⚠️ `border:0` и `appearance:none` обязательны: у <button> своя рамка
   «под металл» от браузера, и на кнопке отправки формы она вылезала
   серым ободком вокруг оранжевой заливки. На ссылках этого не видно,
   поэтому беда всплыла только в окне запроса. */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:#1b1005;font-weight:900;
  border:0;appearance:none;-webkit-appearance:none;font-family:inherit;cursor:pointer;
  font-size:.94rem;padding:.9rem 1.7rem;border-radius:99px;position:relative;overflow:hidden;
  transition:transform .35s var(--e),box-shadow .35s var(--e)}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(0,0,0,.45)}
.btn--line{background:transparent;border:1.5px solid var(--line-d);color:var(--ink)}
.band--light .btn--line,.band--white .btn--line{border-color:var(--line-l);color:var(--ink-d)}
.btn--line:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}

/* ── карточка товара ── */
.prod{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.4rem);
  align-items:start}
/* ⚠️ Пропорция плашки — 3:2, ровно как у съёмки продукции (6240×4160). Раньше
   стояло 4/3, и у каждого снимка сверху и снизу оставались белые поля: кадр
   выглядел мелким, а пустоты казалось много. Пропорцию задаём жёстко, а не по
   картинке: в выгрузке старого сайта фото от квадрата до 6:1, и «высота по
   содержимому» разорвала бы сетку. Квадратные кадры сеток впишутся с полями
   по бокам — это единственные две карточки. */
.gal__main{background:var(--white);border-radius:18px;overflow:hidden;aspect-ratio:3/2;
  border:1px solid var(--line-l)}
.gal__main img{width:100%;height:100%;object-fit:contain}
/* ⚠️ Описание товара заметно длиннее снимка, и колонка с фото упиралась в пустоту
   почти на пол-экрана. Снимок «прилипает» и держится в кадре, пока читают текст.
   Только на широких экранах: ниже 900 колонка одна, липнуть незачем.
   ⚠️ Липнет НЕ сама колонка .gal: это элемент грида, и при `align-items:start`
   её высота равна содержимому — sticky внутри такого элемента не имеет запаса
   хода и не срабатывает вовсе. Колонку растягиваем на всю высоту строки
   (`align-self:stretch`), а прилипает обёртка .gal__in внутри неё.
   ⚠️ Прилипает именно .gal__in — снимок ВМЕСТЕ с миниатюрами. Когда липла одна
   плашка .gal__main, миниатюры оставались в потоке, уезжали вверх при прокрутке
   и скрывались под ней: sticky-элемент рисуется поверх обычного содержимого. */
@media(min-width:901px){
  .prod>.gal{align-self:stretch}
  .gal__in{position:sticky;top:calc(var(--hdr,72px) + 1.4rem)}
}
/* Блок «Монтаж» в карточке товара: ссылка на инструкцию своей группы.
   ⚠️ minmax(min(280px,100%),…) — колонка обязана сжиматься на телефоне,
   иначе распирает страницу вбок. */
.mont{display:grid;grid-template-columns:minmax(min(280px,100%),.9fr) 1.1fr;
  gap:1.4rem;align-items:center}
.mont__pic{display:block;border-radius:12px;overflow:hidden;
  background:var(--band-l,#eef2f4);border:1px solid var(--line-l)}
.mont__pic img{display:block;width:100%;height:auto}
.mont__b h2{margin:.15rem 0 .5rem}
.mont__b p{margin-bottom:.9rem;max-width:52ch}
@media(max-width:820px){.mont{grid-template-columns:1fr}}
.gal__thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(72px,100%),1fr));gap:.5rem;margin-top:.6rem}
.gal__thumbs button{padding:0;border:1px solid var(--line-l);border-radius:10px;overflow:hidden;
  background:var(--white);cursor:pointer;aspect-ratio:1;transition:border-color .3s,transform .3s var(--e)}
.gal__thumbs button:hover{transform:translateY(-3px)}
.gal__thumbs button[aria-selected="true"]{border-color:var(--accent)}
/* ⚠️ `contain`, а не `cover`: в галерее рядом с фотографией товара бывает логотип
   завода-изготовителя, а он широкий — при обрезке по квадрату от «ТАТНЕФТЬ»
   оставалось «TATNEF». Фото продукции при вписывании теряет немного, но узнаётся. */
.gal__thumbs img{width:100%;height:100%;object-fit:contain;padding:3px}
.specs{width:100%;border-collapse:collapse;margin:1.4rem 0 1.6rem;font-size:.93rem}
.specs td,.specs th{border-bottom:1px solid var(--line-l);padding:.76rem .6rem;text-align:left;vertical-align:top}
.specs th{font-weight:900;font-size:.76rem;text-transform:uppercase;letter-spacing:.09em}
.specs tbody tr:hover{background:rgba(255,106,19,.06)}
.tblwrap{overflow-x:auto}
.prose p{color:var(--soft-d);margin:.9rem 0}
.band--dark .prose p{color:var(--soft)}
/* ⚠️ Подзаголовок внутри статьи. Раньше в выгрузке заголовков разделов не было
   вовсе — весь текст шёл сплошными абзацами; появились они с переписанными
   статьями и в «Сложных узлах», где заголовки лежали в paras как обычные абзацы. */
/* ⚠️ Цвет — var(--ink-d), ТЁМНЫЙ. `--ink` (#eef1f3) здесь ловушка: он для текста
   на тёмных полосах, а статьи лежат на band--white — заголовки вышли почти белыми
   на белом и читались только по месту, которое они занимают. */
.prose h2{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:900;line-height:1.2;
          letter-spacing:-.01em;margin:2.2rem 0 .2rem;color:var(--ink-d)}
.band--dark .prose h2,.band--darker .prose h2{color:var(--ink)}
.prose h2:first-child{margin-top:0}
/* Подзаголовок внутри раздела: в длинных статьях есть пункты вида «2.1»,
   и если рисовать их наравне с разделами, структура становится плоской. */
.prose h3{font-size:clamp(1rem,1.5vw,1.12rem);font-weight:900;line-height:1.3;
          margin:1.5rem 0 .1rem;color:var(--ink-d)}
.band--dark .prose h3,.band--darker .prose h3{color:var(--ink)}
.prose .lst{margin:1rem 0 1.2rem}
.prose .tblwrap{margin:1.4rem 0}

/* ─── разворот статьи: текст слева, снимок справа ───
   Раньше снимок стоял во всю ширину над текстом и уезжал с первым же прокрутом,
   а текст читался узкой колонкой по левому краю — правая половина экрана пустая.
   Теперь снимок держится сбоку, пока листается текст.
   ⚠️⚠️ Три условия, без любого из которых `sticky` молча не работает (проверено
   на карточке товара и повторено здесь):
   (1) У КОНТЕЙНЕРА НЕТ `align-items:start` — иначе высота колонки равна снимку,
       и ходу вниз просто нет. Нужна растяжка (значение по умолчанию `stretch`).
   (2) Липнет ОБЁРТКА ВНУТРИ колонки, а не сама колонка грида.
   (3) Ни на колонке, ни выше по дереву НЕТ `data-fade`: анимация появления
       оставляет `transform: matrix(1,0,0,1,0,0)`, а любой transform у предка
       отключает sticky у потомка. Поэтому `data-fade` висит на тексте. */
.art{display:grid;gap:clamp(1.6rem,3.5vw,3.2rem);
     grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);margin-top:1.6rem}
.art__txt{min-width:0}
.art__txt .prose,.art__txt .toc{max-width:none}
.art__txt .toc{margin-top:0}
.art__media{min-width:0}
.art__pic{position:sticky;top:96px;height:min(74vh,640px);border-radius:20px;
  overflow:hidden;background:var(--paper);border:1px solid var(--line-l)}
.art__pic img{width:100%;height:100%;object-fit:cover;display:block}
/* ⚠️ На узком экране колонки нет — снимок поднимаем НАД текстом (в разметке он
   идёт вторым): иначе картинка к статье оказывается в самом низу, после всего
   текста, и её никто не увидит. Липкость там не нужна и только мешает. */
@media(max-width:900px){
  .art{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .art__media{order:-1}
  .art__pic{position:static;height:auto;aspect-ratio:16/10}
}

/* ─── оглавление статьи ───
   ⚠️ В выгрузке оно лежало одной строкой, слепленной с первым абзацем текста.
   Разбираем на пункты в generate.py, здесь только показываем. Ссылок нет:
   в статьях выгрузки нет заголовков, цеплять якорь не к чему. */
.toc{max-width:78ch;margin:2rem 0;padding:1.3rem 1.6rem;border-left:3px solid var(--orange);
     background:rgba(73,85,95,.05);border-radius:0 10px 10px 0}
.toc__h{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);
        font-weight:900;margin-bottom:.7rem}
.toc__l{list-style:none;margin:0;padding:0;columns:2;column-gap:2.2rem}
.toc__l li{break-inside:avoid;font-size:.9rem;line-height:1.45;color:var(--soft-d);margin:.3rem 0}
.toc__l li span{color:var(--orange);font-weight:700;margin-right:.5em}
@media(max-width:760px){.toc__l{columns:1}.toc{padding:1.1rem 1.2rem}}

/* ── подвал ── */
.ftr{background:var(--slate-dd);color:var(--ink);padding:3.4rem 0 1.4rem}
.ftr__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:2.2rem}
.ftr h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:.9rem}
.ftr a{display:block;color:var(--soft);font-size:.9rem;padding:.22rem 0;
  transition:color .3s,transform .32s var(--e)}
.ftr a:hover{color:var(--accent);transform:translateX(5px)}
.ftr__bot{border-top:1px solid var(--line-d);margin-top:2.4rem;padding-top:1.2rem;color:var(--soft);
  font-size:.8rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

.up{position:fixed;right:1.4rem;bottom:1.4rem;width:46px;height:46px;border-radius:13px;
  border:1px solid var(--line-d);background:var(--slate-d);color:var(--ink);cursor:pointer;display:grid;
  place-items:center;opacity:0;pointer-events:none;z-index:70;transition:opacity .35s,transform .35s var(--e)}
.up.on{opacity:1;pointer-events:auto}
.up:hover{transform:translateY(-4px);border-color:var(--accent);color:var(--accent)}

.js [data-fade],.js .card{opacity:0}
.js .mask>span{transform:translateY(110%)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .js [data-fade],.js .card{opacity:1}
  .js .mask>span{transform:none}
}
@media(max-width:900px){
  /* ⚠️ Именно minmax(0,1fr), а не 1fr: у колонки грида минимум по умолчанию
     равен содержимому, и широкое фото товара не даёт ей сжаться — галерея
     распирает страницу шире экрана. */
  .prod{grid-template-columns:minmax(0,1fr)}
  .gal,.gal__main,.gal__thumbs{min-width:0;max-width:100%}
  .split--rev>*:first-child{order:0}
}
/* ── шапка уходит в бургер РАНЬШЕ остальной вёрстки: на 1080, а не на 900 ──
   ⚠️ Порог поднят 19.08.2026 по замеру. Пунктов меню шесть, плюс лупа поиска,
   плашка с номером, «Карта отгрузок» и «RAL» — на 920 px всё это не влезало
   в строку, меню переносилось и шапка вырастала с 70 до 105 px. Проверено
   выключением элементов по одному: в одиночку не виноват никто, места не хватает
   всем вместе, и полоса 901–1080 была сломана ещё до добавления поиска и RAL.
   Порог 1080 посчитан замером: горизонтальной шапке нужно 931 px, а полоса
   `.shell` отдаёт ширину минус 2×5vw — впритык сходится лишь с ~1060, поэтому
   берём с запасом.
   ⚠️ Разметка страниц (карточка товара, статья, контакты) остаётся на 900 —
   там 901–1080 верстается нормально, и трогать её незачем. */
@media(max-width:1080px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--slate-d);
    flex-direction:column;padding:1.1rem var(--shell);gap:.4rem;border-bottom:1px solid var(--line-d)}
  .nav.open{display:flex}
  /* ⚠️ Телефон остаётся и на телефоне: раньше он тут скрывался, и позвонить
     из шапки было нельзя именно там, где звонят чаще всего. Место освобождаем
     сжатием плашки и промежутков, а не пряча номер. */
  .hdr__in{gap:.6rem}
  .burger{display:block;order:3;margin-left:.2rem}
  .tel{margin-left:auto}
  .hdr__geo{display:none}          /* в шапке места нет — пункты живут в меню */
  .nav .nav__geo{display:block;color:var(--accent)}
  .hdr__tel{font-size:.8rem;padding:.38rem .72rem;gap:.42rem;letter-spacing:-.01em}
  /* Автополе у лупы снимаем: вправо всё двигает уже плашка с номером, а два
     автополя поделили бы свободное место пополам и лупа повисла бы посередине. */
  .hdr__find{margin-left:0}
  .nav{margin-left:0}
}
/* ⚠️ Порог 370 px посчитан замером, а не на глаз: логотип + плашка с номером +
   бургер требуют 297 px, на 390 остаётся запас 39. Номер прячем в трубку только
   там, где он реально не влезает (320–360 px), — список линий тот же. */
@media(max-width:370px){
  .hdr__tel{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;
    font-size:0;gap:0}
  .hdr__tel::before{content:'';width:15px;height:15px;flex:none;background:currentColor;
    -webkit-mask:var(--ic-tel) center/contain no-repeat;mask:var(--ic-tel) center/contain no-repeat}
  .hdr__tel s{display:none}
  .tel__drop{min-width:214px}
}

/* ─── карточка товара: ключевые характеристики в шапке ───
   ⚠️ Не переиспользовать .req от реквизитов: там значение выключено вправо,
   а у товара значения длинные и такое выключение рвёт их в лесенку. */
.kv{display:grid;gap:.1rem;margin-top:1.4rem}
.kv div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.4rem 1.2rem;
  padding:.62rem 0;border-top:1px solid var(--line-l)}
.kv span{color:var(--soft-d);font-size:.9rem}
.kv b{font-weight:700}
@media(max-width:560px){.kv div{grid-template-columns:1fr;gap:.15rem}}

/* ─── страница «Компания» ─── */
.fx{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:1.1rem;margin-top:clamp(1.8rem,3vw,2.6rem)}
.fx__i{background:var(--white);border:1px solid var(--line-l);border-radius:18px;
  padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.band--dark .fx__i,.band--darker .fx__i{background:rgba(255,255,255,.05);border-color:var(--line-d)}
.fx__n{font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.fx__t{font-weight:900;font-size:1.06rem;line-height:1.3}
.fx__d{color:var(--soft-d);font-size:.94rem;line-height:1.55}
.band--dark .fx__d,.band--darker .fx__d{color:var(--soft)}

.lst{list-style:none;display:grid;gap:.7rem;margin-top:1.4rem}
.lst li{position:relative;padding-left:1.6rem;line-height:1.55}
.lst li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  background:var(--accent);border-radius:2px;transform:rotate(45deg)}
.lst--num{counter-reset:l}
.lst--num li{counter-increment:l;padding-left:2.4rem}
.lst--num li::before{content:counter(l);width:auto;height:auto;background:none;transform:none;
  top:0;font-weight:900;font-size:.86rem;color:var(--accent);
  border:1px solid var(--accent);border-radius:8px;padding:.05rem .45rem;line-height:1.5}

/* ⚠️ Лента истории вертикальная и на телефоне, и на мониторе: горизонтальная
   на узком экране превращается в боковую прокрутку, которую никто не находит. */
.tl{margin-top:clamp(1.8rem,3vw,2.6rem);display:grid;gap:0;position:relative}
/* ⚠️ Первая колонка НЕ фиксированные 96px: в ленте бывают не только годы,
   но и подписи вроде «Самовывоз» — они не переносятся и налезают на заголовок.
   `auto` растягивает колонку по самой длинной подписи и держит выравнивание. */
.tl__i{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:1.4rem;
  padding:1.15rem 0;border-top:1px solid var(--line-l)}
.band--dark .tl__i,.band--darker .tl__i{border-color:var(--line-d)}
.tl__i:first-child{border-top:0}
.tl__y{font-weight:900;font-size:clamp(1.1rem,1.4vw,1.5rem);line-height:1.15;
  color:var(--accent);letter-spacing:-.02em}
.tl__t{font-weight:900;margin-bottom:.3rem}
.tl__d{color:var(--soft-d);font-size:.95rem;line-height:1.55}
.band--dark .tl__d,.band--darker .tl__d{color:var(--soft)}
@media(max-width:600px){
  .tl__i{grid-template-columns:1fr;gap:.35rem}
  .tl__y{font-size:1.2rem}
}

.motto{margin-top:clamp(1.8rem,3vw,2.4rem);padding:1.6rem 1.8rem;border-radius:18px;
  background:var(--white);border:1px solid var(--line-l);border-left:4px solid var(--accent);
  font-size:clamp(1.1rem,2vw,1.35rem);font-weight:900;line-height:1.4}
.band--dark .motto,.band--darker .motto{background:rgba(255,255,255,.05);border-color:var(--line-d);
  border-left-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.chips span{border:1px solid var(--line-l);border-radius:99px;padding:.42rem .9rem;
  font-size:.86rem;font-weight:700;background:var(--white)}
.band--dark .chips span,.band--darker .chips span{background:rgba(255,255,255,.05);
  border-color:var(--line-d)}

/* ─── партнёры ─── */
.prt{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));
  gap:.9rem;margin-top:clamp(1.8rem,3vw,2.6rem)}
.prt__i{background:var(--white);border:1px solid var(--line-l);border-radius:14px;
  aspect-ratio:16/9;display:grid;place-items:center;padding:1rem;
  transition:border-color .35s var(--e),transform .35s var(--e),box-shadow .35s var(--e)}
.prt__i img{max-width:100%;max-height:100%;width:auto;height:auto;
  /* ⚠️ Логотипы разношёрстные: приглушаем до серого, иначе полоса пестрит
     и перебивает наш единственный акцент. Цвет возвращаем при наведении. */
  filter:grayscale(1) contrast(.92);opacity:.72;transition:filter .35s var(--e),opacity .35s var(--e)}
.prt__i:hover{border-color:var(--accent);transform:translateY(-4px);
  box-shadow:0 18px 40px -26px rgba(20,26,32,.5)}
.prt__i:hover img{filter:none;opacity:1}
@media(hover:none){.prt__i img{filter:none;opacity:.92}}

/* ─── контакты ─── */
.cnt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.6rem);
  align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.cnt__block{border-top:1px solid var(--line-l);padding:1.15rem 0}
.cnt__block:first-child{border-top:0;padding-top:0}
.cnt__lbl{font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.5rem}
.cnt__val{font-size:1.02rem;line-height:1.6}
.cnt__val b{font-weight:900}
.cnt__val a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(20,26,32,.22);
  transition:color .3s,border-color .3s}
.cnt__val a:hover{color:var(--accent);border-color:var(--accent)}
.cnt__city{display:inline-flex;align-items:center;gap:.5rem;font-weight:900;margin-bottom:.55rem}
.cnt__city i{width:9px;height:9px;background:var(--accent);border-radius:2px;transform:rotate(45deg);
  font-style:normal;flex:none}
.req{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:.55rem 1.6rem;font-size:.93rem;line-height:1.5}
.req div{display:flex;gap:.5rem;justify-content:space-between;border-bottom:1px dashed var(--line-l);
  padding-bottom:.4rem}
.req span{color:var(--soft-d);flex:none}
.req b{font-weight:700;text-align:right;word-break:break-word}
.map{border-radius:20px;overflow:hidden;border:1px solid var(--line-l);background:var(--white);
  aspect-ratio:4/3;position:relative}
.map iframe{width:100%;height:100%;border:0;display:block}
/* ⚠️ Карта грузится ПО КЛИКУ. Виджет Яндекса ставит свои cookies сразу при
   загрузке страницы — до этого посетитель ничего не выбирал. Заглушка снимает
   вопрос и заодно убирает с «Контактов» тяжёлый сторонний фрейм. */
.map--off{display:grid;place-items:center;padding:1.6rem;text-align:center}
.map__t{font-weight:900;font-size:1.05rem}
.map__d{color:var(--soft-d);font-size:.92rem;margin:.5rem 0 1rem;max-width:34ch;line-height:1.5}

/* ─── полоска про cookies ─── */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--slate-dd);
    color:var(--ink);padding:.9rem clamp(1rem,4vw,2rem);display:none;
    box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.ck--on{display:block}
.ck__in{max-width:1200px;margin:0 auto;display:flex;gap:1rem 1.6rem;align-items:center;
        flex-wrap:wrap;justify-content:space-between}
.ck__t{font-size:.92rem;line-height:1.5;max-width:76ch;color:var(--soft)}
.ck__t a{color:var(--accent);text-decoration:underline}
.ck .btn{padding:.6rem 1.4rem;font-size:.86rem}
@media(max-width:620px){.ck__in{justify-content:stretch}.ck .btn{width:100%}}
.frm{margin-top:1.6rem;display:grid;gap:.7rem}
.frm input,.frm textarea{width:100%;font:inherit;font-size:.98rem;color:var(--ink-d);
  background:var(--white);border:1px solid var(--line-l);border-radius:13px;padding:.85rem 1rem;
  transition:border-color .3s,box-shadow .3s}
.frm textarea{min-height:104px;resize:vertical}
.frm input:focus,.frm textarea:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,106,19,.14)}
.frm__agree{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;color:var(--soft-d);
  line-height:1.45}
/* ⚠️ Флажок согласия рисуем САМИ. Нативный квадратик остаётся с острыми
   углами при любом `accent-color` — скруглить его иначе нельзя, — и рядом
   с полями и фишками на 13px он выбивался: заказчик поймал это сразу.
   ⚠️ `appearance:none` обязателен, иначе браузер продолжит рисовать свой
   поверх нашего. Проверку `required` это не ломает: браузер по-прежнему
   не даст отправить форму и покажет подсказку у этого же элемента. */
/* ⚠️ `padding:0` и `box-sizing` обязательны: общее правило `.frm input`
   задаёт полям отступы, и флажок раздувался в прямоугольник 34×29
   вместо квадрата. Ловится только замером — на глаз читается как «чуть
   крупнее нужного». */
.frm__agree input{appearance:none;-webkit-appearance:none;box-sizing:border-box;
  width:20px;height:20px;min-width:20px;padding:0;flex:none;margin-top:.05rem;
  cursor:pointer;
  border:1.5px solid var(--line-l);border-radius:6px;background:transparent;
  display:grid;place-content:center;
  transition:border-color .25s var(--e),background .25s var(--e)}
.frm__agree input:hover{border-color:var(--accent)}
/* галочку рисуем псевдоэлементом: символ в разных шрифтах разной ширины
   и прыгает, а две линии всегда лежат одинаково */
.frm__agree input::before{content:"";width:11px;height:6px;
  border-left:2px solid #1b1005;border-bottom:2px solid #1b1005;
  transform:rotate(-45deg) translate(1px,-1px) scale(.4);
  opacity:0;transition:opacity .2s var(--e),transform .2s var(--e)}
.frm__agree input:checked{background:var(--accent);border-color:var(--accent)}
.frm__agree input:checked::before{opacity:1;
  transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.frm__agree input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.frm__note{font-size:.82rem;color:var(--soft-d)}
@media(max-width:900px){
  .cnt{grid-template-columns:minmax(0,1fr)}
  .map{aspect-ratio:1}
}

/* ─── страница «Карта отгрузок» ───
   Сцена во весь первый экран, текст поверх неё. ⚠️ Высоту считаем от dvh минус
   шапка: она липкая, и при чистых 100dvh нижняя строка кадра всегда пряталась
   под цифрами. */
/* ⚠️ Цвет текста задаём ЯВНО. Заголовки берут `--ink-d` (тёмный) — он верен для
   светлых полос, а здесь фон тёмный, и заголовок получался тёмным по тёмному:
   на экране от него оставался еле различимый рельеф. Та же ловушка уже была
   с заголовками внутри статей.
   ⚠️ Высота = экран МИНУС ШАПКА, и это не «запас на всякий случай». Шапка
   липкая, но место в потоке занимает, поэтому секция начинается под ней: при
   чистых 100dvh её низ уезжал за обрез ровно на высоту шапки и нижняя строка
   с цифрами обрезалась. А когда вычитали ещё и хлебные крошки (их тут нет),
   снизу наоборот выглядывала белая полоса следующего блока. Ровно шапка —
   и секция кончается точно на сгибе. */
/* ⚠️ Высота — ВЕСЬ экран: шапка вынута из потока и лежит поверх сцены,
   поэтому вычитать её высоту больше не нужно — иначе снизу оставалась
   полоса. `svh` вместо `dvh`: на телефоне `dvh` меняется при скрытии
   панели браузера, и карта дёргалась бы прямо во время осмотра. */
.geo{position:relative;height:100vh;height:100svh;min-height:540px;
  background:var(--slate-dd);color:var(--ink)}
.geo .ttl,.geo h1{color:var(--ink)}
.geo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.geo__over{position:absolute;inset:0;pointer-events:none;display:grid;
  grid-template-rows:auto 1fr auto;padding:clamp(1.2rem,4vw,3rem)}
.geo__head{max-width:56ch}
.geo__lead{font-size:clamp(.98rem,1.5vw,1.15rem);line-height:1.55;color:var(--soft);
  max-width:52ch;margin-top:.8rem}
.geo__bot{display:flex;gap:1.2rem 2.6rem;align-items:flex-end;flex-wrap:wrap;
  justify-content:space-between}
.geo__nums{display:flex;gap:2.2rem;flex-wrap:wrap}
.geo__num b{display:block;font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:900;
  line-height:1;letter-spacing:-.02em;color:var(--ink)}
.geo__num span{font-size:.8rem;color:var(--soft);letter-spacing:.04em}
.geo__leg{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.86rem;color:var(--soft)}
.geo__leg i{width:10px;height:10px;border-radius:2px;display:inline-block;
  transform:rotate(45deg);margin-right:.5rem;vertical-align:middle}
#geo-tip{position:absolute;left:50%;top:calc(50% + 4rem);transform:translateX(-50%);
  background:rgba(24,29,34,.82);border:1px solid var(--line-d);border-radius:99px;
  padding:.5rem 1.2rem;font-weight:900;font-size:.95rem;color:var(--ink);
  opacity:0;transition:opacity .25s var(--e);pointer-events:none}
#geo-tip.on{opacity:1}
@media(max-width:760px){
  /* ⚠️ Не во весь экран: карта России на портрете занимает полосу примерно
     в треть высоты, и при полноэкранной секции под ней зияло пустое поле. */
  /* ⚠️ Мобильное правило: вычет высоты шапки убран и здесь — она вышла
     из потока, а карта должна занимать весь экран. */
  .geo{height:100vh;height:100svh;min-height:500px}   /* 62 — высота шапки на телефоне */
  .geo__over{padding:1rem}
  .geo__lead{font-size:.9rem;line-height:1.45;max-width:38ch}
  .geo__bot{gap:.7rem 1.2rem;align-items:center}
  .geo__nums{gap:1.1rem}
  .geo__num b{font-size:1.5rem}
  .geo__num span{font-size:.7rem}
  .geo__leg{gap:.6rem;font-size:.76rem;width:100%}
}
@media(max-width:760px) and (max-height:700px){ .geo__lead{display:none} }

/* ─── всплывающее окно «Запросить прайс» ───
   Нативный <dialog>: подложка, перехват фокуса и закрытие по Esc достаются
   от браузера, своего кода почти не нужно. Разворот «тёмная колонка + белая
   форма» повторяет чередование полос на странице. */
/* ⚠️ `margin:auto` обязателен и задан ЯВНО: браузер центрирует <dialog> именно
   им, а общий сброс `*{margin:0}` в начале темы это центрирование убивает —
   окно уезжает в левый верхний угол. */
.mdl{border:0;padding:0;background:transparent;color:var(--ink-d);margin:auto;
  width:min(940px,calc(100vw - 1.6rem));max-width:none;
  max-height:calc(100dvh - 3rem);overflow:visible}
.mdl::backdrop{background:rgba(24,29,34,.64);backdrop-filter:blur(3px)}
/* ⚠️ `grid-template-rows:minmax(0,1fr)` — без него строка грида равна ВЫСОТЕ
   СОДЕРЖИМОГО (у неё min-height:auto), max-height коробки её не ужимает,
   и низ формы вместе с кнопкой «Отправить» просто отрезается overflow:hidden.
   Та же ловушка, что и с `1fr` по горизонтали, только по вертикали. */
.mdl__box{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  grid-template-rows:minmax(0,1fr);
  background:var(--white);border-radius:20px;overflow:hidden;position:relative;
  max-height:calc(100dvh - 3rem);box-shadow:0 40px 90px -30px rgba(20,26,32,.6)}
.mdl__x{position:absolute;top:.7rem;right:.85rem;z-index:2;width:38px;height:38px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(47,54,61,.06);color:var(--ink-d);font-size:1.4rem;line-height:1;
  font-family:inherit;transition:background .3s,color .3s,transform .3s var(--e)}
.mdl__x:hover{background:var(--accent);color:#1b1005;transform:rotate(90deg)}

/* левая колонка */
.mdl__side{background:var(--slate);color:var(--ink);padding:clamp(1.4rem,3vw,2.1rem);
  display:flex;flex-direction:column;gap:.85rem;min-height:0;overflow-y:auto}
.mdl__ttl{font-size:clamp(1.5rem,3vw,1.95rem);font-weight:900;line-height:1.05;
  letter-spacing:-.02em}
.mdl__d{font-size:.94rem;line-height:1.55;color:var(--soft)}
.mdl__pts{list-style:none;display:grid;gap:.55rem;margin-top:.2rem}
.mdl__pts li{position:relative;padding-left:1.3rem;font-size:.9rem;line-height:1.45;
  color:var(--soft)}
.mdl__pts li::before{content:'';position:absolute;left:0;top:.48em;width:8px;height:8px;
  background:var(--accent);border-radius:2px;transform:rotate(45deg)}
.mdl__cont{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line-d);
  display:grid;gap:.3rem;font-size:.93rem;font-weight:700}
.mdl__cont a{color:var(--ink);text-decoration:none;transition:color .3s}
.mdl__cont a:hover{color:var(--accent)}

/* правая колонка — форма */
.mdl__frm{padding:clamp(1.4rem,3vw,2.1rem);overflow-y:auto;display:grid;
  gap:.8rem;align-content:start;margin-top:0;min-height:0}
/* ⚠️ Системная полоса прокрутки в окне широкая и белая — на тёмной форме
   она читается вторым столбцом. Заменяем тонкой оранжевой чертой по фону
   формы: дорожка прозрачная, ползунок в 4 px.
   `scrollbar-width`/`scrollbar-color` — для Firefox, `::-webkit-scrollbar` —
   для Chrome и Safari; нужны ОБА, они не заменяют друг друга. */
/* ⚠️ Порядок важен: если задать `scrollbar-width`, Chrome БРОСАЕТ вебкитовые
   правила и рисует свою «тонкую» полосу в 10 px вместо наших 4. Поэтому
   `scrollbar-width` отдаём только Firefox.
   ⚠️⚠️ Опознавать Firefox через `@supports not selector(::-webkit-scrollbar)`
   НЕЛЬЗЯ: он этот селектор ПАРСИТ и отвечает «поддерживаю» (проверено живым
   Firefox 153 — `CSS.supports('selector(::-webkit-scrollbar)')` = true),
   хотя стилизовать полосу так не умеет. Условие не срабатывало, и Firefox
   оставался с обычной системной полосой. Опознаём его по `-moz-appearance`:
   это свойство есть только у него. */
@supports (-moz-appearance: none){
  .mdl__frm{scrollbar-width:thin;scrollbar-color:rgba(255,106,19,.55) transparent}
}
.mdl__frm::-webkit-scrollbar{width:4px}
.mdl__frm::-webkit-scrollbar-track{background:transparent}
.mdl__frm::-webkit-scrollbar-thumb{background:rgba(255,106,19,.5);border-radius:99px}
.mdl__frm::-webkit-scrollbar-thumb:hover{background:rgba(255,106,19,.8)}
/* Низ формы не должен уезжать за край при прокрутке полей: на невысоком экране
   форма пролистывается, а кнопка обязана быть на виду.
   ⚠️ Согласие на обработку ПД липнет ВМЕСТЕ с кнопкой: если оставить его
   в потоке, липкая кнопка встаёт поверх него, галка оказывается закрыта,
   а браузер отказывается отправлять форму, ругаясь на невидимое поле. */
.mdl__foot{position:sticky;bottom:calc(clamp(1.4rem,3vw,2.1rem) * -1);
  background:var(--white);display:grid;gap:.7rem;
  padding:.8rem 0 clamp(1.4rem,3vw,2.1rem);
  box-shadow:0 -16px 20px -12px rgba(255,255,255,.98)}
.mdl__lead{font-size:.92rem;color:var(--soft-d);line-height:1.5}
.mdl__row{display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fit,minmax(min(185px,100%),1fr))}
.mdl__f{display:grid;gap:.32rem;min-width:0}
.mdl__f>span{font-size:.72rem;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--soft-d)}
.mdl__f em{font-style:normal;color:var(--accent)}
.mdl__frm textarea{min-height:78px}

/* «кто запрашивает» — переключатель плашками */
.mdl__who{border:0;display:grid;gap:.45rem}
.mdl__who>span{font-size:.72rem;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--soft-d)}
/* ⚠️ В окне запроса кнопка НЕ капсула. Все поля и фишки скруглены на 13px,
   а кнопка с радиусом 99px выбивалась из ряда — заказчик поймал это сразу:
   «все графы со скруглением, а эта нижняя выбивается из-за её углов». */
.mdl .btn,.mdl__frm .btn{border-radius:13px}
.mdl__chips{display:flex;gap:.5rem;flex-wrap:wrap}
.mdl__chips input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mdl__chips label{border:1.5px solid var(--line-l);border-radius:13px;
  padding:.5rem 1rem;font-size:.88rem;font-weight:700;cursor:pointer;
  transition:border-color .3s,color .3s,background .3s}
.mdl__chips label:hover{border-color:var(--accent)}
.mdl__chips input:checked+label{border-color:var(--accent);color:var(--accent);
  background:rgba(255,106,19,.08)}
.mdl__chips input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}

/* «спасибо» на месте формы */
.mdl__ok{padding:clamp(2rem,5vw,3rem);display:grid;gap:.9rem;place-content:center;
  text-align:center;justify-items:center}
.mdl__ok i{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,106,19,.12);color:var(--accent);font-style:normal;font-size:1.7rem}
.mdl__ok p{font-size:.95rem;color:var(--soft-d);line-height:1.55;max-width:38ch}

.mdl[open]{animation:mdlIn .4s var(--e) both}
.mdl[open]::backdrop{animation:mdlFade .4s both}
@keyframes mdlIn{from{opacity:0;transform:translateY(16px) scale(.985)}}
@keyframes mdlFade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .mdl[open],.mdl[open]::backdrop{animation:none}
  .mdl__x:hover{transform:none}
}
/* ⚠️ На телефоне окно занимает экран целиком: при клавиатуре и десятке полей
   «карточка по центру» превращается в щель высотой в три строки. */
@media(max-width:760px){
  .mdl{width:100vw;max-height:100dvh;margin:0}
  .mdl__box{grid-template-columns:minmax(0,1fr);border-radius:0;max-height:100dvh;
    height:100dvh;grid-template-rows:auto minmax(0,1fr)}
  .mdl__side{padding:1.15rem 1.2rem;gap:.5rem}
  .mdl__pts,.mdl__cont{display:none}
  .mdl__d{font-size:.88rem}
}

/* ═══════════════ ПОИСК ПО САЙТУ ═══════════════
   В шапке только значок — строки в покое нет (требование заказчика). По нажатию
   из-под шапки выезжает полоса с полем, по Enter открывается окно с находками,
   собранное из того же разворота, что и запрос прайса. */

/* ── значок в шапке ──
   ⚠️ `margin-left:auto` переезжает СЮДА с `.nav`: свободное место забирает первый
   элемент с автополем, и значок встаёт вплотную слева от «Продукции» — ровно там,
   где его и просили. Оставь автополе у меню — значок прилип бы к логотипу. */
.hdr__find{margin-left:auto;flex:none;width:34px;height:34px;padding:0;border:0;
  background:none;color:var(--soft);cursor:pointer;display:grid;place-items:center;
  border-radius:50%;transition:color .3s var(--e),background .3s var(--e)}
.nav{margin-left:1.7rem}
.hdr__find::before{content:'';width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--ic-find) center/contain no-repeat;
  mask:var(--ic-find) center/contain no-repeat;
  transition:transform .35s var(--e)}
.hdr__find:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.hdr__find[aria-expanded="true"]{color:#fff;background:var(--accent)}
.hdr__find:hover::before{transform:scale(1.08)}

/* ── выезжающая полоса ──
   ⚠️ Высота едет через `grid-template-rows:0fr → 1fr`, а не через max-height
   с выдуманным числом: полоса сама знает свою высоту, и при смене шрифта или
   размера поля ничего не надо подгонять руками.
   ⚠️ Клетке грида обязателен `min-height:0` — иначе её минимум равен содержимому,
   трек в 0fr не сожмётся и полоса будет видна всегда. Та же ловушка, что
   с `minmax(0,1fr)` у карточки товара и у формы в окне запроса. */
/* ⚠️ НИКАКОЙ `border-top` у полосы. Даже прозрачная рамка занимает место:
   в закрытом виде полоса выходила высотой 1 px, и её тёмный фон красился
   под рамкой — между шапкой и первым экраном главной шла тёмная черта,
   будто блок торчит. Разделитель в раскрытом виде даём тенью внутрь:
   она рисуется поверх и в высоту не идёт, поэтому закрытая полоса — ровно 0. */
/* ⚠️ Своей заливки у полосы поиска НЕТ. Она лежит ВНУТРИ шапки, а фон шапки
   рисует `.hdr::before` во всю её высоту — включая раскрытую полосу. Пока
   у полосы был собственный непрозрачный `--slate-d`, она перекрывала этот
   фон и на прозрачной шапке выглядела чужой плашкой: шапка растворена,
   а под ней вдруг сплошная тёмная лента. */
.find{display:grid;grid-template-rows:0fr;background:transparent;
  transition:grid-template-rows .42s var(--e),box-shadow .42s var(--e)}
/* ⚠️ Разделительная черта тоже набирается вместе с заливкой шапки: на
   растворённой шапке сплошная линия поперёк читается обрывком. */
.find--on{grid-template-rows:1fr;
  box-shadow:inset 0 1px 0 rgba(238,241,243,calc(var(--hdr-vid,1) * .16))}
.find__in{min-height:0;overflow:hidden;display:flex;gap:.6rem;align-items:center}
.find__in>*{margin-block:.85rem}
.find__i{flex:1;min-width:0;font:inherit;font-size:1.02rem;font-weight:700;
  color:var(--ink);background:rgba(255,255,255,.06);border:1.5px solid var(--line-d);
  border-radius:13px;padding:.78rem 1.1rem;
  transition:border-color .3s,box-shadow .3s,background .3s}
.find__i::placeholder{color:var(--soft);font-weight:400}
.find__i:focus{outline:0;border-color:var(--accent);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(255,106,19,.16)}
.find__go{flex:none}
.find__x{flex:none;width:38px;height:38px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.06);color:var(--soft);font:inherit;font-size:1.4rem;
  line-height:1;cursor:pointer;transition:background .3s,color .3s,transform .3s var(--e)}
.find__x:hover{background:var(--accent);color:#fff;transform:rotate(90deg)}
@media(max-width:900px){
  /* Автополе у лупы снимается выше, в блоке шапки на 1000. Здесь — только
     сама полоса поиска: на узком экране кнопке места нет, Enter и так ищет. */
  .find__go{display:none}
  .find__i{font-size:1rem;padding:.68rem .9rem}
}

/* ── окно находок ──
   Правая колонка вместо формы — список. Разворот, тени и поведение достаются
   от `.mdl`, поэтому окно поиска и окно прайса выглядят одним семейством. */
/* ⚠️ Верхнее поле больше обычного: крестик окна висит в правом верхнем углу
   поверх содержимого, и первая находка уезжала под него. У окна запроса этой
   беды нет — там сверху абзац-пояснение, а не кликабельная карточка. */
.mdl--find .mdl__frm{padding-top:3rem}
.find__res{display:grid;gap:.5rem;align-content:start}
.find__r{display:grid;gap:.22rem;padding:.8rem 1rem;border-radius:13px;
  border:1px solid var(--line-l);color:var(--ink-d);
  transition:border-color .3s,background .3s,transform .35s var(--e)}
.find__r:hover{border-color:var(--accent);background:rgba(255,106,19,.05);
  transform:translateX(4px)}
.find__r em{font-style:normal;font-size:.68rem;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent)}
.find__r b{font-weight:900;font-size:1rem;line-height:1.3}
.find__r i{font-style:normal;font-size:.87rem;color:var(--soft-d);line-height:1.5}
.find__r mark{background:rgba(255,106,19,.24);color:inherit;border-radius:3px;
  padding:0 .14em}
.find__none,.find__wait{font-size:.95rem;color:var(--soft-d);line-height:1.6;
  padding:.6rem .2rem}
.find__none b{color:var(--ink-d)}

/* ── шапка на промежуточных ширинах ──
   ⚠️ Между бургером (900) и просторным десктопом образовалась мёртвая зона.
   Замер на 1180: пунктов меню шесть, плюс лупа поиска, плашка с номером,
   «Карта отгрузок» и «RAL» — меню не влезало и уезжало на ВТОРУЮ строку,
   шапка вырастала с 73 до 120 px. Проверено выключением по одному: в одиночку
   не виноват никто — не хватает места всем вместе.
   Лечим сжатием промежутков и кегля, а не пряча пункты: прятать в этой полосе
   ширин некуда — бургер тут ещё не включён. */
@media(min-width:1081px) and (max-width:1340px){
  .hdr__in{gap:1rem}
  .nav{gap:1rem;margin-left:1rem}
  .nav a{font-size:.82rem}
  .hdr__geo{font-size:.8rem;gap:.38rem}
  .hdr__tel{font-size:.8rem;padding:.4rem .8rem}
  .hdr__find{width:30px;height:30px}
}

/* ═══════════════ ЦВЕТА RAL ═══════════════ */

/* ── палитра ──
   Плитка = сам цвет плюс номер и название. ⚠️ Цвет приходит из разметки
   переменной `--ral`: он у каждой плитки свой, 216 правил в теме не напишешь. */
/* ⚠️ Девять групп идут подряд, и на полном отступе полосы между ними зияло
   по четверти экрана пустоты. Здесь полосы не чередуют светлое и тёмное,
   а образуют один длинный список — отступ им нужен вдвое меньше обычного. */
.band--ral{padding:clamp(2.2rem,4.5vw,3.6rem) 0}
.ral{display:grid;gap:.9rem;margin-top:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr))}
.ral__i{display:grid;gap:.1rem;color:var(--ink-d);
  transition:transform .35s var(--e)}
.ral__s{display:block;height:96px;border-radius:13px;background:var(--ral);
  /* ⚠️ Рамка обязательна: RAL 9003/9010/9016 почти белые и на белой полосе
     без неё плитка исчезает — остаётся висящая в воздухе подпись. */
  border:1px solid var(--line-l);
  box-shadow:0 10px 26px -18px rgba(20,26,32,.7);
  transition:box-shadow .4s var(--e),border-color .35s var(--e)}
.ral__i b{font-weight:900;font-size:.9rem;margin-top:.55rem}
.ral__i i{font-style:normal;font-size:.82rem;color:var(--soft-d);line-height:1.35}
.ral__i:hover{transform:translateY(-4px)}
.ral__i:hover .ral__s{box-shadow:0 20px 40px -20px rgba(20,26,32,.75);
  border-color:var(--accent)}
.ral__i:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
@media(max-width:520px){
  .ral{gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(min(132px,100%),1fr))}
  .ral__s{height:74px}
}

/* ── страница одного цвета ──
   Цвет занимает экран целиком. ⚠️ Высота = dvh МИНУС ШАПКА: она липкая, но место
   в потоке занимает, и при чистых 100dvh низ уезжал бы под обрез — та же поправка,
   что на странице карты отгрузок.
   ⚠️ Цвет чернил считает ГЕНЕРАТОР по яркости фона и присылает в `--ink`: на жёлтой
   сере (RAL 1016) белый текст не читается, на ночном синем — чёрный. Переменные
   `--ink`/`--soft` здесь намеренно переопределяют тему в пределах секции. */
/* ⚠️ Заливка цветом идёт ПОД шапку на весь экран (в этом весь смысл страницы),
   а содержимое опускается ниже неё: без вычета строка «Все цвета RAL»
   вставала впритык под логотип и читалась продолжением шапки.
   `box-sizing:border-box` из сброса — поэтому отступ съедает `min-height`,
   а не добавляется к нему, и лишней прокрутки не появляется. */
.ralp{background:var(--ral);color:var(--ink);min-height:100vh;min-height:100svh;
  display:grid;padding:calc(var(--hdr,73px) + clamp(1.2rem,3vw,2.4rem)) 0
    clamp(1.2rem,3vw,2.4rem)}
.ralp__in{display:grid;grid-template-rows:auto 1fr auto;gap:1.4rem;width:min(1340px,100% - var(--shell)*2)}
.ralp__top{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;font-size:.86rem;font-weight:900}
.ralp__back{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);
  transition:opacity .3s}
.ralp__back i{width:8px;height:8px;flex:none;border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);
  transition:transform .35s var(--e)}
.ralp__back:hover{opacity:.72}
.ralp__back:hover i{transform:rotate(45deg) translate(-2px,2px)}
.ralp__grp{letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:var(--soft)}
.ralp__mid{align-self:center;max-width:64ch}
.ralp__n{font-weight:900;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(3rem,11vw,8.5rem)}
.ralp__t{font-size:clamp(1.2rem,3vw,2rem);font-weight:900;line-height:1.15;
  letter-spacing:-.02em;margin-top:.3rem}
.ralp__kv{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:1.6rem}
.ralp__kv dt{font-size:.7rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  color:var(--soft)}
.ralp__kv dd{font-size:1.05rem;font-weight:900;margin-top:.2rem;
  font-variant-numeric:tabular-nums}
.ralp__note{margin-top:1.4rem;font-size:.88rem;line-height:1.55;color:var(--soft);
  max-width:52ch}
/* ⚠️ Кнопка на цветном фоне: фирменный оранжевый на оранжевых и красных RAL
   сливается со стеной. Поэтому здесь она берёт чернила страницы — тёмная
   на светлом цвете, светлая на тёмном, и читается всегда. */
.ralp .btn{background:var(--ink);color:var(--ral);background-image:none}
.ralp .btn:hover{box-shadow:0 16px 34px -16px rgba(0,0,0,.5)}
.ralp__nav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--edge);padding-top:1rem}
.ralp__nav a{display:inline-flex;align-items:center;gap:.7rem;color:var(--ink);
  font-size:.86rem;font-weight:900;transition:opacity .3s}
.ralp__nav a:hover{opacity:.72}
.ralp__nav b{display:block;font-weight:400;font-size:.8rem;color:var(--soft);
  max-width:22ch}
.ralp__nav i{font-style:normal;font-size:1.1rem}
@media(max-width:760px){
  .ralp{min-height:100svh}   /* 62 — высота шапки на телефоне */
  .ralp__kv{gap:1.4rem}
  .ralp__nav b{display:none}
}

/* ═══════════ ОФОРМЛЕНИЕ РАЗДЕЛОВ КАРТИНКАМИ (вариант 12) ═══════════
   Схема «Б», выбранная заказчиком 26.08.2026: широкая фотошапка над
   заголовком + разворот «текст слева / кадр справа», стороны которого
   чередуются от раздела к разделу. */

/* ⚠️ Низ шапки гасится МАСКОЙ, а не градиентом в тон фона. Градиент дал бы
   видимый шов: фон страницы не однотонный, поверх него лежат полосы.
   Ровно эти грабли уже ловили на шапках разделов портала. */
/* ⚠️ Высота фотошапки — прежняя, НЕ во весь экран. Растягивать её не нужно:
   заказчик 27.08.2026 поправил — на весь экран тянутся только те блоки,
   которые и так его занимали (баннер, карта, плитка цвета RAL). Там вычет
   высоты шапки убран, чтобы после её выхода из потока снизу не оставалась
   светлая полоса. Фотошапка раздела к таким блокам не относится.
   ⚠️ Низ гасится МАСКОЙ, а не градиентом в тон: фон страницы не однотонный,
   и градиент дал бы видимый шов. */
.shapka{position:relative;margin-bottom:clamp(-4.5rem,-6vw,-2.6rem)}
.shapka img{display:block;width:100%;height:clamp(200px,30vw,420px);
  object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 52%,transparent 96%)}
/* Первая полоса наезжает на картинку — верхний отступ ей уже не нужен. */
.shapka + .band{padding-top:0}

/* Разворот: текст и кадр. ⚠️ `minmax(min(360px,100%),…)` обязателен —
   колонка с зашитым минимумом не сжимается и тянет страницу вбок. */
.razv{display:grid;align-items:center;
  grid-template-columns:1fr minmax(min(360px,100%),.82fr);
  gap:clamp(1.8rem,4vw,3.6rem)}
.razv__ph{margin:0}
.razv__ph img{display:block;width:100%;height:auto;border-radius:14px}
/* Чередование сторон: у чётных разделов кадр слева. Меняем ПОРЯДОК, а не
   направление — при `direction:rtl` перевернулся бы и текст внутри. */
.razv--zerkalo .razv__ph{order:-1}
@media(max-width:900px){
  .razv{grid-template-columns:minmax(0,1fr)}
  .razv--zerkalo .razv__ph{order:0}   /* на телефоне кадр всегда под текстом */
}