/* ==========================================================================
   PREMIUM SOFA — тихая индустриальная роскошь.

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

   Правила, которые легко нарушить не заметив:
   · латунь — максимум 5% полотна. Волосяная линия, стрелка, номер, одно
     подсвеченное слово. Заливкой кнопки латунь не бывает никогда;
   · длинные кириллические заголовки не набираются капслоком — капслок
     живёт только в мелких подписях (11–13 px) и кнопках;
   · карточка — это не карточка. Фото плюс текст, без рамки, без тени,
     без скругления. Информацию разделяет воздух, а не коробки;
   · размытия в системе нет вообще. Прозрачность — только шапка поверх
     героя и подложка под текстом героя.
   ========================================================================== */

:root{
  /* палитра */
  --ps-ink:#141311; --ps-graphite:#282522; --ps-ivory:#F3F0E9; --ps-bone:#E6DED2;
  --ps-warm-gray:#A69E92; --ps-forest:#26392E; --ps-brass:#B18D46; --ps-paper:#FAF9F6;
  --ps-stone:#6E675D; --ps-bone-deep:#D8CFC0; --ps-brass-deep:#8E6F33; --ps-graphite-800:#1D1B19;

  /* полотна */
  --surface-page:var(--ps-paper); --surface-alt:var(--ps-ivory);
  --surface-sunken:var(--ps-bone); --surface-dark:var(--ps-graphite); --surface-deep:var(--ps-ink);

  /* текст */
  --text-primary:var(--ps-ink); --text-secondary:var(--ps-stone); --text-muted:var(--ps-warm-gray);
  --text-on-dark:var(--ps-ivory); --text-on-dark-muted:var(--ps-warm-gray);

  /* линии и акцент */
  --line:#DCD5C8; --line-strong:var(--ps-bone-deep); --line-on-dark:rgba(243,240,233,.20);
  --accent:var(--ps-brass); --accent-hover:var(--ps-brass-deep);
  --scrim:linear-gradient(180deg,rgba(20,19,17,.46) 0%,rgba(20,19,17,.12) 34%,rgba(20,19,17,.72) 100%);

  /* Шрифты. Cormorant Garamond — выбор фабрики из четырёх антикв,
     показанных на настоящем первом экране: гаральдская антиква, высокий
     контраст, ближе всего к типографике итальянской мебели. Придёт
     веб-лицензия TT Ramillas — меняется только эта строка. */
  --dis:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Golos Text",-apple-system,"Segoe UI",Arial,sans-serif;

  /* Размерный ряд: 390 → 1520. У Cormorant маленькое очко, поэтому кегли
     заметно крупнее, чем у гротеска в том же ряду. */
  --fs-hero:clamp(46px,6.6vw,118px); --fs-h1:clamp(42px,5.4vw,96px);
  --fs-h2:clamp(34px,4vw,70px);      --fs-h3:clamp(25px,2.3vw,37px);
  --fs-lead:clamp(17px,1.35vw,23px); --fs-body:17px; --fs-body-sm:15px;
  --fs-caption:13px; --fs-micro:11.5px;
  /* Кириллица не терпит широкого разрядки: .09em — потолок, дальше слова
     рассыпаются на буквы. */
  --ls-label:.09em;

  /* сетка */
  --content-max:1520px; --gut:clamp(18px,5vw,80px); --gutter:var(--gut);
  --section-y:clamp(56px,9vw,180px); --section-y-tight:clamp(40px,5.5vw,96px);
  /* Шапка живёт в двух состояниях: поверх героя во всю высоту и сжатая,
     когда страница ушла больше чем на 60 px. */
  --header-h:110px; --header-h-condensed:60px;

  /* Движение — медленное и физическое, но не вялое: в августе бюджет
     движения урезали, длительности сократились примерно на четверть. */
  --ease:cubic-bezier(.16,.84,.44,1);
  --dur-micro:180ms; --dur-cross:260ms; --dur-section:480ms; --dur-reveal:560ms;
  --hover-scale:1.02;

  --r:0px; --r-pill:999px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-primary);
  font-family:var(--body);font-size:var(--fs-body);line-height:1.62;font-weight:400;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:color var(--dur-micro) var(--ease)}
img{display:block;max-width:100%}
::selection{background:var(--ps-bone);color:var(--ps-ink)}
/* Фокус видно всегда — единственное место, где латунь обводит целиком. */
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

.wrap{width:100%;max-width:calc(var(--content-max) + var(--gut)*2);margin-inline:auto;
  padding-left:var(--gut);padding-right:var(--gut)}
section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.razdel-tight{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}

h1,h2,h3,h4{font-family:var(--dis);font-weight:400;margin:0;letter-spacing:-.006em;line-height:1.02;text-wrap:pretty}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.14}
/* <em> в заголовках — единственное подсвеченное слово фразы. У Prata курсива
   не было и наклон приходилось снимать; у Cormorant курсив настоящий,
   поэтому подсветка снова делается и цветом, и наклоном. */
h1 em,h2 em,h3 em{font-style:italic;color:var(--accent)}
p{margin:0 0 16px;text-wrap:pretty}

/* Надпись над заголовком. Капслок здесь уместен: строка короткая. */
.cap{display:inline-block;font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-secondary)}
.cap b{font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums;margin-right:10px}

/* Шапка секции: заголовок слева, ссылка справа, между ними волосяная линия. */
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(28px,3.6vw,64px)}
.sh .lid{margin:18px 0 0;max-width:52ch;font-size:var(--fs-lead);line-height:1.45;color:var(--text-secondary)}
.sh>div:first-child{max-width:none}

/* Ссылка-стрелка. Стрелка уезжает на 6 px — весь «микроинтерфейс» системы. */
.go{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:var(--fs-body-sm);
  font-weight:500;color:var(--text-primary);border-bottom:1px solid var(--line-strong);padding-bottom:4px}
.go::after{content:"→";transition:transform var(--dur-micro) var(--ease)}
.go:hover{color:var(--accent-hover);border-bottom-color:var(--accent)}
.go:hover::after{transform:translateX(6px)}
.go.na-tyomnom{color:var(--text-on-dark);border-bottom-color:var(--line-on-dark)}
.go.na-tyomnom:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* Плашка под фото. Пока картинка грузится, видно кость, а не дыру. */
.ph{position:relative;overflow:hidden;background:var(--surface-sunken)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.dark{background:var(--surface-dark)}
/* Чертежи — белая линия на прозрачном. На светлом их попросту не видно,
   поэтому подложка у них всегда графит. */
.ph.chertyozh{background:var(--surface-dark)}
.ph.chertyozh img{object-fit:contain;padding:clamp(14px,2vw,28px)}

/* ------------------------------------------------------------------ кнопки */
/* Заливка — чернила, наведение — графит. Латунь заливкой не бывает. */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:500;
  font-size:var(--fs-micro);letter-spacing:var(--ls-label);text-transform:uppercase;
  padding:17px 30px;background:var(--ps-ink);color:var(--ps-paper);border:1px solid var(--ps-ink);
  cursor:pointer;border-radius:var(--r);transition:background var(--dur-micro) var(--ease),
  border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}
.btn s{text-decoration:none}
.btn:hover{background:var(--ps-graphite);border-color:var(--ps-graphite);color:var(--ps-paper)}
/* Нажатие меняет только цвет: в системе ничего не сжимается. */
.btn:active{background:var(--ps-graphite-800)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:var(--ps-bone);border-color:var(--ps-bone);color:var(--ps-ink)}
.btn.light{background:var(--ps-paper);color:var(--ps-ink);border-color:var(--ps-paper)}
.btn.light:hover{background:var(--ps-bone);border-color:var(--ps-bone);color:var(--ps-ink)}
.acts{display:flex;gap:clamp(14px,2vw,28px);flex-wrap:wrap;align-items:center;margin-top:26px}

/* ------------------------------------------------------------------ шапка */
header{position:fixed;top:0;left:0;right:0;z-index:100;color:var(--ps-paper);
  transition:transform var(--dur-section) var(--ease),background var(--dur-section) var(--ease),
             color var(--dur-section) var(--ease),border-color var(--dur-section) var(--ease)}
header.hide{transform:translateY(-100%)}
/* Прилипшая шапка — плотная бумага, а не матовое стекло: размытий в системе нет. */
header.stuck{background:var(--surface-page);border-bottom:1px solid var(--line);color:var(--text-primary)}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;height:42px;
  font-size:var(--fs-caption);border-bottom:1px solid var(--line-on-dark);overflow:hidden;
  transition:border-color var(--dur-section) var(--ease),height var(--dur-section) var(--ease),
             opacity var(--dur-section) var(--ease)}
header.stuck .top{border-color:var(--line)}
/* Сжатое состояние: верхняя строка убирается, шапка садится
   с --header-h до --header-h-condensed. */
header.stuck .top{height:0;opacity:0;border-bottom-color:transparent}
header.stuck .nav{height:var(--header-h-condensed)}
.top .l,.top .r{display:flex;gap:24px;align-items:center}
.top a:hover,.city:hover{color:var(--accent)}
.city{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;border:0;color:inherit;
  font-family:var(--body);font-size:var(--fs-caption);font-weight:400;padding:0;transition:color var(--dur-micro) var(--ease)}
.city u{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px;
  transition:height var(--dur-section) var(--ease)}
/* Знак фабрики. В самом файле он золотой (#d1bd50) — это наследие старой
   палитры; в систему он входит тонированным в латунь. Тонируем маской,
   а не фильтром: маска красит знак в один системный цвет и на тёмном
   полотне, и на светлом, и перекрашивать его на прилипшей шапке
   больше не нужно. Путь внутри маски считается от style.css, поэтому
   вложенность страницы на него не влияет. */
.logo{display:flex;align-items:center}
.logo i{display:block;width:145px;height:41px;background-color:var(--accent);
  -webkit-mask:url(img/logo.svg) no-repeat center/contain;
          mask:url(img/logo.svg) no-repeat center/contain;
  transition:width var(--dur-section) var(--ease),height var(--dur-section) var(--ease)}
header.stuck .logo i{width:113px;height:32px}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{font-size:var(--fs-body-sm);padding-bottom:4px;border-bottom:1px solid transparent;
  transition:border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}
.nav ul a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Пока шапка лежит поверх героя, залитая кнопка тонет в фотографии —
   там она контурная. Прилипнув на бумагу, возвращается к чернилам. */
header:not(.stuck) .nav .btn{background:transparent;border-color:currentColor;color:inherit}
header:not(.stuck) .nav .btn:hover{background:var(--ps-paper);border-color:var(--ps-paper);color:var(--ps-ink)}

/* Гамбургер нарисован границами, а не иконкой: своего набора иконок у фабрики нет. */
.burger{display:none;width:34px;height:22px;padding:0;background:none;border:0;cursor:pointer;position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform var(--dur-micro) var(--ease)}
.burger::before{top:6px}
.burger::after{bottom:6px}
.burger.on::before{transform:translateY(4px) rotate(45deg)}
.burger.on::after{transform:translateY(-5px) rotate(-45deg)}

/* выдвижное меню телефона */
.drawer{position:fixed;inset:0;z-index:99;background:var(--surface-page);color:var(--text-primary);
  padding:calc(var(--header-h) + 16px) var(--gut) 40px;display:flex;flex-direction:column;gap:6px;
  opacity:0;visibility:hidden;transition:opacity var(--dur-micro) var(--ease),visibility var(--dur-micro)}
.drawer.on{opacity:1;visibility:visible}
.drawer a{font-family:var(--dis);font-size:clamp(24px,7vw,34px);padding:14px 0;border-bottom:1px solid var(--line)}
.drawer .cap{margin-top:24px}
@media (min-width:761px){.drawer{display:none}}

/* ------------------------------------------------------------------ герой */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--ps-paper);overflow:hidden;padding-top:calc(var(--header-h) + 24px);
  padding-bottom:clamp(48px,6vw,110px)}
.hero-kadry{position:absolute;inset:0;z-index:-2;background:var(--ps-ink)}
/* Кадры лежат стопкой и перетекают друг в друга. Подписи не меняются:
   у первого экрана одно сообщение, а не четыре коммерческих предложения. */
.hero-kadr{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero-kadr.on{opacity:1}
.hero-kadr img,.hero-kadr video{width:100%;height:100%;object-fit:cover}
/* Единственный градиент системы — подложка под текстом героя.
   Градиент концепта с почти прозрачной серединой (.06) здесь не годится:
   у наших кадров светлый центр, и на нём терялись и меню, и заголовок. */
.hero-kadry::after{content:"";position:absolute;inset:0;z-index:2;background:var(--scrim)}
.hero-tekst{position:relative;max-width:min(820px,100%);display:flex;flex-direction:column;
  gap:clamp(18px,2vw,30px)}
.hero .cap{color:var(--ps-bone)}
.hero h1{font-size:var(--fs-hero);line-height:.94;letter-spacing:-.008em;color:var(--ps-paper);max-width:15ch}
/* Капслок разрешён только латинице — на длинной кириллице он запрещён. */
.latinicey{text-transform:uppercase}
.hero p{margin:0;max-width:46ch;font-size:var(--fs-lead);line-height:1.45;color:rgba(250,249,246,.86)}
.hero .acts{margin-top:6px}
.hero .btn.ghost{color:var(--ps-paper)}
.hero .btn.ghost:hover{color:var(--ps-ink)}
/* Ссылка-стрелка по умолчанию набрана чернилами: на фотографии героя она
   пропадала. Здесь она всегда светлая. */
.hero .go{color:var(--ps-paper);border-bottom-color:rgba(250,249,246,.4)}
.hero .go:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Счётчик кадров — тонкая линия, а не пульт с кнопками. */
.hero-schyot{position:relative;display:flex;align-items:center;gap:14px;margin-top:clamp(28px,4vw,56px);
  font-size:var(--fs-micro);letter-spacing:var(--ls-label);color:var(--ps-warm-gray);
  font-variant-numeric:tabular-nums}
.hero-schyot b{font-weight:500;color:var(--ps-paper)}
.hero-polosy{display:flex;gap:6px}
.hero-polosa{width:34px;height:1px;background:rgba(243,240,233,.3);position:relative;overflow:hidden}
.hero-polosa i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
.hero-polosa.on i{animation:polosa 7s linear forwards}
@keyframes polosa{to{transform:scaleX(1)}}

/* ------------------------------------------------------ 01 · коллекции */
/* Сетка со сдвигами: колонки разной ширины и высоты читаются как разворот
   журнала, а не как каталожная плитка. Скролл при этом обычный —
   горизонтального перехвата в системе нет. */
.kollekcii{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,56px)}
.kol{display:block}
.kol:nth-child(1){grid-column:1/span 5}
.kol:nth-child(2){grid-column:7/span 6;margin-top:clamp(40px,6vw,120px)}
.kol:nth-child(3){grid-column:1/span 4}
.kol:nth-child(4){grid-column:6/span 4;margin-top:clamp(24px,4vw,72px)}
.kol .ph{width:100%;margin-bottom:20px}
.kol:nth-child(1) .ph,.kol:nth-child(3) .ph{aspect-ratio:3/4}
.kol:nth-child(2) .ph,.kol:nth-child(4) .ph{aspect-ratio:4/3}
.kol .ph img{transition:transform var(--dur-reveal) var(--ease)}
.kol:hover .ph img{transform:scale(var(--hover-scale))}
.kol h3{margin:0 0 10px}
.kol p{margin:0 0 16px;font-size:var(--fs-body-sm);line-height:1.6;color:var(--text-secondary);max-width:40ch}

/* ------------------------------------------------------ 02 · модель */
.split{display:grid;gap:clamp(28px,4vw,80px);align-items:start}
.split.s84{grid-template-columns:8fr 4fr}
.split.s57{grid-template-columns:5fr 7fr}
.split.s66{grid-template-columns:1fr 1fr}
.split>.ph{width:100%}
.stolbik{display:flex;flex-direction:column;gap:clamp(18px,2vw,32px)}
.stolbik p{margin:0;color:var(--text-secondary);line-height:1.62}
.model-imya{font-family:var(--dis);font-size:clamp(34px,3.4vw,58px);line-height:1.02;margin:0}

/* Подпись к чертежу: номер, название слоя, одна латунная строка на фигуру. */
.vynoski{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.vynoski li{display:flex;gap:14px;align-items:baseline;font-size:var(--fs-caption);
  letter-spacing:.02em;color:var(--text-secondary)}
.vynoski li i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:22px}
.vynoski li.klyuch{color:var(--accent)}
.na-tyomnom .vynoski li{color:var(--text-on-dark-muted)}
.na-tyomnom .vynoski li.klyuch{color:var(--accent)}
/* Подпись под чертежом — что именно на нём изображено. */
.figura{margin:0;display:flex;flex-direction:column;gap:14px}
.figura figcaption{font-size:var(--fs-caption);letter-spacing:.02em;color:var(--text-muted)}
.tyomnaya .figura figcaption,.glubokaya .figura figcaption{color:var(--ps-warm-gray)}

/* ------------------------------------------------------ 03 · конструкция */
.tyomnaya{background:var(--surface-dark);color:var(--text-on-dark)}
.tyomnaya h2,.tyomnaya h3{color:var(--text-on-dark)}
.tyomnaya p{color:var(--text-on-dark-muted)}
.tyomnaya .cap{color:var(--ps-warm-gray)}
.glubokaya{background:var(--surface-deep);color:var(--text-on-dark)}
.glubokaya h2,.glubokaya h3{color:var(--text-on-dark)}
.glubokaya p{color:var(--text-on-dark-muted)}
.glubokaya .cap{color:var(--ps-warm-gray)}
.svetlaya{background:var(--surface-alt)}
.utoplennaya{background:var(--surface-sunken)}

/* ------------------------------------------------------ 04 · хиты */
/* Фильтр — единственное место, где в системе живут «пилюли». */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{font-family:var(--body);font-weight:500;font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  text-transform:uppercase;padding:11px 20px;border:1px solid var(--line-strong);background:none;
  cursor:pointer;color:var(--text-secondary);border-radius:var(--r-pill);
  transition:background var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
.tab:hover{background:var(--surface-alt);color:var(--text-primary)}
.tab.on{background:var(--ps-ink);border-color:var(--ps-ink);color:var(--ps-paper)}
.hits{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.4vw,44px);align-items:start}
/* Карточка без карточки: фото, имя модели, строка характеристики. */
.hit{display:block}
.hit.off{display:none}
.hit .ph{aspect-ratio:4/3;width:100%}
.hit .ph img{transition:transform var(--dur-reveal) var(--ease),opacity var(--dur-cross) var(--ease)}
.hit:hover .ph img{transform:scale(var(--hover-scale))}
/* Название коллекции стоит подписью под фото, а не плашкой поверх него:
   плашка закрывает товар и превращает витрину в маркетплейс. */
.hit .kol-podpis{display:block;font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted);margin:18px 0 8px}
.hit h3{font-size:clamp(21px,1.8vw,28px);margin:18px 0 6px}
.hit .kol-podpis+h3{margin-top:0}
.hit>span{font-size:var(--fs-body-sm);color:var(--text-secondary)}
.hit:hover h3{color:var(--accent-hover)}

/* ------------------------------------------------------ 05 · фабрика */
/* Метрики — доказательство, поэтому это строка цифр на линейке, а не плитки. */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,44px);
  border-top:1px solid var(--line);padding-top:clamp(24px,3vw,44px);margin-top:clamp(36px,5vw,80px)}
.num b{display:block;font-family:var(--dis);font-weight:400;font-size:clamp(38px,4.4vw,72px);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.num span{display:block;margin-top:12px;font-size:var(--fs-caption);color:var(--text-secondary);
  line-height:1.45;max-width:20ch}
.tyomnaya .nums,.glubokaya .nums{border-top-color:var(--line-on-dark)}
.tyomnaya .num span,.glubokaya .num span{color:var(--text-on-dark-muted)}

/* ------------------------------------------------------ 06 · ткани */
.fabrics{display:flex;gap:clamp(16px,2vw,36px);flex-wrap:wrap}
.sw{width:clamp(88px,10vw,132px);display:block;text-align:left;padding:0;border:0;background:none;
  cursor:pointer;font-family:var(--body);color:inherit}
.sw i{display:block;aspect-ratio:1;width:100%;position:relative;overflow:hidden;
  outline:1px solid transparent;outline-offset:4px;transition:outline-color var(--dur-micro) var(--ease)}
.sw i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sw:hover i{outline-color:var(--line-strong)}
.sw.on i{outline-color:var(--ps-ink)}
.sw b{display:block;margin-top:12px;font-size:var(--fs-caption);font-weight:500;letter-spacing:.01em}
.sw span{display:block;margin-top:3px;font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted)}
.smetka{font-size:var(--fs-caption);color:var(--text-muted);max-width:56ch;margin:0}

/* ------------------------------------------------------ 07 · отзывы */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px)}
.q{display:flex;flex-direction:column;gap:22px}
.q p{font-family:var(--dis);font-size:clamp(20px,1.9vw,29px);line-height:1.28;letter-spacing:-.01em;
  margin:0;color:var(--text-primary)}
.q .who{font-size:var(--fs-caption);color:var(--text-secondary);
  border-top:1px solid var(--line);padding-top:16px}
.q .who b{display:block;font-weight:500;color:var(--text-primary);font-size:var(--fs-body-sm);margin-bottom:4px}
/* Звёзды — единственная картинка-иконка на сайте, она у фабрики своя. */
.q .zvyozdy{color:var(--accent);letter-spacing:.16em;font-size:12px}

/* ------------------------------------------------------ 08 · профессионалам */
.marshruty{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-on-dark)}
.marshrut{padding:clamp(28px,3vw,56px) clamp(24px,3vw,52px) clamp(28px,3vw,56px) 0;
  display:flex;flex-direction:column;gap:20px}
.marshrut+.marshrut{border-left:1px solid var(--line-on-dark);padding-left:clamp(24px,3vw,52px)}
.marshrut p{margin:0;max-width:44ch;font-size:var(--fs-body-sm)}
.marshrut .go,.marshrut .btn{margin-top:auto;align-self:flex-start}
/* Рациональный довод стоит один раз и внизу страницы. */
.dovod{margin-top:clamp(32px,4vw,64px);padding-top:clamp(20px,2.4vw,32px);
  border-top:1px solid var(--line-on-dark);font-size:var(--fs-body-sm);color:var(--text-on-dark-muted);
  max-width:88ch}
.dovod a{color:var(--text-on-dark);border-bottom:1px solid var(--line-on-dark);padding-bottom:2px}
.dovod a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ------------------------------------------------------ 09 · салоны */
.cities{display:grid;grid-template-columns:repeat(3,1fr);gap:2px clamp(20px,3vw,44px);
  border-top:1px solid var(--line);padding-top:22px}
.cities a{display:block;padding:9px 0;font-size:var(--fs-body-sm);color:var(--text-secondary);
  transition:color var(--dur-micro) var(--ease),padding-left var(--dur-micro) var(--ease)}
.cities a:hover{color:var(--text-primary);padding-left:6px}
.cities a.now{color:var(--text-primary)}
.cities a.now::after{content:" · вы здесь";color:var(--text-muted);font-size:var(--fs-caption)}

/* ------------------------------------------------------ 10 · журнал */
/* На главной новости — строки на линейках: это указатель на раздел,
   а не витрина. Фотографии живут на самой странице новостей. */
.zhurnal{border-top:1px solid var(--line)}
.zapis{display:flex;justify-content:space-between;align-items:baseline;gap:clamp(20px,4vw,64px);
  padding:22px 0;border-bottom:1px solid var(--line)}
.zapis span{font-size:var(--fs-body);line-height:1.5;max-width:64ch}
.zapis:hover span{color:var(--accent-hover)}
.zapis time{font-size:var(--fs-caption);color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Страница новостей — сетка с фотографиями. Отдельных страниц у записей
   нет, поэтому это не ссылки: ни увеличения кадра, ни подсветки заголовка
   по наведению — не обещаем нажатия там, где его нет. */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.4vw,44px);align-items:start}
.post .ph{aspect-ratio:16/10;width:100%;margin-bottom:16px}
.post .cap{display:block;font-variant-numeric:tabular-nums}
.post h3{font-size:clamp(18px,1.5vw,22px);line-height:1.24;margin:10px 0 0}

/* ------------------------------------------------------------------ подвал */
footer{background:var(--surface-deep);color:var(--text-on-dark-muted);
  padding:clamp(48px,6vw,88px) 0 110px;border-top:1px solid var(--line-on-dark)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,56px)}
/* В подвале знак крупный — это единственное место, где он работает
   не подписью, а лого-блоком. */
.znak{display:block;width:clamp(190px,20vw,304px);aspect-ratio:151.76/43.37;
  background-color:var(--accent);margin:0 0 22px;
  -webkit-mask:url(img/logo.svg) no-repeat left center/contain;
          mask:url(img/logo.svg) no-repeat left center/contain}
footer h4{font-family:var(--body);font-weight:500;font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--ps-warm-gray);margin:0 0 18px}
footer p{font-size:var(--fs-body-sm);line-height:1.6}
footer ul{margin:0;padding:0}
footer li{list-style:none;margin-bottom:11px;font-size:var(--fs-body-sm)}
footer a{color:var(--ps-ivory)}
footer a:hover{color:var(--accent)}
.legal{margin-top:clamp(32px,4vw,56px);padding-top:22px;border-top:1px solid var(--line-on-dark);
  font-size:var(--fs-caption);display:flex;gap:24px;flex-wrap:wrap;color:var(--ps-warm-gray)}

/* нижняя панель телефона */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:98;display:none;background:var(--surface-page);
  border-top:1px solid var(--line)}
.bar a,.bar button{flex:1;text-align:center;padding:17px 8px;font-size:var(--fs-body-sm);
  background:none;border:0;border-left:1px solid var(--line);font-family:var(--body);color:inherit;cursor:pointer}
.bar a:first-child{border-left:0}
.bar .p{background:var(--ps-ink);color:var(--ps-paper)}

/* заглушка виджета */
.vidzhet{position:fixed;right:clamp(14px,1.8vw,26px);bottom:clamp(14px,1.6vw,26px);z-index:97;
  width:52px;height:52px;background:var(--surface-deep);color:var(--ps-ivory);display:grid;place-items:center}
.vidzhet svg{width:22px;height:22px}
/* Подпись объясняет, почему кнопка не отвечает: без неё это выглядит поломкой. */
.vidzhet span{position:absolute;right:calc(100% + 12px);white-space:nowrap;font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);text-transform:uppercase;background:var(--surface-deep);
  color:var(--ps-warm-gray);padding:9px 14px;opacity:0;transform:translateX(8px);
  transition:opacity var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease)}
.vidzhet:hover span{opacity:1;transform:none}

/* ------------------------------------------------------------------ модалка */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(20,19,17,.72);opacity:0;pointer-events:none;transition:opacity var(--dur-micro) var(--ease)}
.modal.on{opacity:1;pointer-events:auto}
.modal-in{background:var(--surface-page);padding:clamp(24px,3.4vw,52px);width:min(560px,100%);
  max-height:90svh;overflow:auto;transform:translateY(14px);transition:transform var(--dur-section) var(--ease)}
.modal.on .modal-in{transform:none}
.modal.wide .modal-in{width:min(780px,100%)}
.modal h3{margin:0 0 10px}
.modal .lead{font-size:var(--fs-body-sm);color:var(--text-secondary);margin:0 0 26px;line-height:1.55}
.f{margin-bottom:16px}
.f label{display:block;font-size:var(--fs-micro);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:9px}
.f input,.f select,.f textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-strong);
  padding:12px 0;font-family:var(--body);font-size:var(--fs-body);color:var(--text-primary);border-radius:0}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--accent)}
.f textarea{resize:vertical;min-height:76px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-caption);color:var(--text-secondary);
  line-height:1.5;margin:22px 0 24px}
.consent a{border-bottom:1px solid var(--line-strong)}
.modal .btn{width:100%}
.modal .alt{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-body-sm);
  color:var(--text-secondary);display:flex;gap:18px;flex-wrap:wrap}
.modal .alt a{border-bottom:1px solid var(--line-strong)}
.mclose{position:absolute;top:20px;right:24px;background:none;border:0;color:var(--ps-paper);font-size:26px;
  cursor:pointer;line-height:1}
.ok{padding:16px 0}
.ok b{font-family:var(--dis);font-weight:400;font-size:var(--fs-h3);display:block;margin-bottom:12px}
.ok span{font-size:var(--fs-body-sm);color:var(--text-secondary);line-height:1.55}
.citylist{columns:3;column-gap:28px;margin-top:8px}
.citylist a{display:block;break-inside:avoid;padding:10px 0;font-size:var(--fs-body-sm);border-bottom:1px solid var(--line)}
.citylist a:hover{color:var(--accent-hover)}

/* Проявление на прокрутке: сдвиг небольшой, длительность крупная. */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}

/* ======================= внутренние страницы ======================= */
/* Шапка раздела — тёмное полотно во весь верх, как первый экран главной,
   но без кадров: иначе внутренние страницы читались бы как черновики. */
.razdel-shapka{background:var(--surface-dark);color:var(--text-on-dark);
  padding-top:clamp(var(--header-h),11vw,180px);padding-bottom:clamp(40px,4.4vw,72px);
  margin-bottom:clamp(32px,4vw,72px)}
.razdel-shapka .cap{margin-bottom:20px;color:var(--ps-warm-gray)}
.razdel-shapka .cap a{border-bottom:1px solid var(--line-on-dark)}
.razdel-shapka .lid{margin-top:clamp(20px,2.4vw,30px);max-width:52ch;font-size:var(--fs-lead);
  line-height:1.45;color:var(--text-on-dark-muted)}
/* Тот же заголовок стоит и на тёмном полотне раздела, и на светлом верху
   карточки модели: цвет задаёт полотно, а не сам заголовок. */
.zag-razdela{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.006em;margin:0}
.razdel-shapka .zag-razdela{color:var(--ps-paper)}
main>section:first-child.razdel-shapka{margin-top:0}
.tekst{font-size:var(--fs-body);line-height:1.62;color:var(--text-secondary);max-width:56ch;margin:0 0 18px}
.razdel{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}
/* Вводная секция, за которой сразу идёт содержимое: свой нижний отступ она
   складывала с верхним отступом следующей секции, и между ними зияла
   четверть экрана. */
.vvedenie{padding-bottom:0}

/* карточка модели */
/* Верхний отступ считает .model-verh — он один знает про высоту шапки.
   Своё padding-top секции здесь только складывалось с ним в три сотни
   пустых пикселей. */
.model{padding-top:0;padding-bottom:clamp(24px,3vw,40px)}
.model-verh{padding-top:calc(var(--header-h) + clamp(24px,4vw,60px))}
.model-verh .cap{margin-bottom:18px}
.model-verh .cap a{border-bottom:1px solid var(--line)}
.model-verh .lid{margin-top:22px;max-width:52ch;font-size:var(--fs-lead);line-height:1.45;color:var(--text-secondary)}
.model-kadry{margin-top:clamp(28px,3.4vw,48px)}
.model-glavnyy{aspect-ratio:16/10;width:100%}
/* Миниатюры — строкой, а не сеткой в четыре колонки: у одних моделей
   кадр всего один, у других четыре, и сетка рвалась пустотами. */
.model-mini-ryad{display:flex;gap:clamp(10px,1.4vw,18px);margin-top:clamp(10px,1.4vw,18px);
  flex-wrap:wrap}
.model-mini{padding:0;border:0;background:none;cursor:pointer;
  width:clamp(88px,11vw,168px);flex:0 0 auto}
.model-mini .ph{display:block;aspect-ratio:4/3;width:100%;transition:opacity var(--dur-cross) var(--ease)}
.model-mini:not(.on) .ph{opacity:.45}
.model-mini:hover .ph{opacity:1}
/* Когда описания нет вовсе, страница говорит об этом прямо. */
.net-opisaniya{color:var(--text-secondary)}
.net-opisaniya a{border-bottom:1px solid var(--line-strong)}
.model-tekst{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,80px);align-items:start}
.model-opis p{font-size:var(--fs-body);line-height:1.62;color:var(--text-secondary);margin:0 0 16px}
/* Свойства — строки на линейках, а не сетка коробок. */
.model-svojstva{border-top:1px solid var(--line)}
.model-svojstva>div{padding:18px 0;border-bottom:1px solid var(--line)}
.model-svojstva b{display:block;font-family:var(--body);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.model-svojstva span{font-size:var(--fs-body-sm);line-height:1.55;color:var(--text-primary)}
.model-svojstva a{border-bottom:1px solid var(--line-strong)}
.model-shemy{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
/* Чертёж белой линией живёт на графите — на белом его не видно вовсе. */
.model-shema{aspect-ratio:4/3;width:100%;background:var(--surface-dark)}
.model-shema img{object-fit:contain;padding:clamp(10px,1.6vw,22px)}
.model-shemy .figura figcaption{display:flex;gap:12px}
.model-shemy .figura figcaption i{font-style:normal;font-variant-numeric:tabular-nums;
  color:var(--text-muted)}

/* каталог: коллекция вперёд */
/* Фильтр не прилипает: в системе фиксируется только шапка сайта. Прилипший
   он вдобавок наезжал на логотип — оба хотели верхний край экрана. */
.filtr{padding-bottom:0}
.filtr .sh{margin-bottom:0;align-items:center}
.filtr .cap b{color:var(--text-primary);margin-right:6px}

.kollekciya[hidden]{display:none}
/* Межтитул: номер, название, строка о линии — и счёт моделей крупно
   справа. Он же служит тихой паузой между плотными блоками плиток. */
.mezhtitul{display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(24px,4vw,64px);border-top:1px solid var(--line);
  padding-top:clamp(20px,2.4vw,32px);margin-bottom:clamp(28px,3.4vw,56px)}
.mezhtitul .opisanie{font-family:var(--dis);font-size:var(--fs-h3);line-height:1.14;
  letter-spacing:-.006em;margin:14px 0 0;max-width:26ch}
.mezhtitul .smetka{margin-top:16px;max-width:46ch}
.mezhtitul .schyot{font-family:var(--dis);font-size:clamp(30px,3.2vw,52px);line-height:1;
  letter-spacing:-.03em;color:var(--text-muted);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.mezhtitul .schyot i{display:block;font-family:var(--body);font-style:normal;
  font-size:var(--fs-micro);letter-spacing:var(--ls-label);text-transform:uppercase;margin-top:10px}
/* Модель без своей страницы ведёт на форму — подпись под ней тише. */
.hit.gotovitsya>span{color:var(--text-muted)}

/* ткани */
.tkani{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px)}
.tkan .ph{aspect-ratio:3/4;width:100%}
/* Коллекция в двух цветах — второй кадр проявляется по наведению. */
.tkan .ph .vtoroy{opacity:0;transition:opacity var(--dur-cross) var(--ease)}
.tkan:hover .ph .vtoroy{opacity:1}
.tkan .kol-podpis{display:block;font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted);margin:16px 0 6px}
.tkan h3{font-size:clamp(18px,1.5vw,22px);margin:0}
.tkan .cveta{display:block;margin-top:6px;font-size:var(--fs-caption);color:var(--text-secondary)}

/* Ролики фабрики про испытания: это не коллекции обивки, и стоят они
   отдельным блоком. Кадры сняты для вертикального видео и обрезаны
   по-разному, поэтому им дана своя пропорция. */
.proverki{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px)}
.proverka{margin:0}
.proverka .ph{aspect-ratio:4/3;width:100%;background:var(--surface-deep)}
.proverka figcaption{margin-top:14px;font-size:var(--fs-body-sm);line-height:1.45;
  color:var(--text-on-dark-muted)}

/* салоны по регионам */
.regiony{columns:2;column-gap:clamp(28px,4vw,72px)}
.region{break-inside:avoid;margin-bottom:clamp(26px,3vw,44px)}
.region h3{font-size:clamp(19px,2vw,26px);margin:0 0 14px;padding-bottom:12px;
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:baseline;gap:16px}
/* Счёт адресов в регионе — цифрой у правого края, а не словом в строке. */
.region h3 i{font-family:var(--body);font-style:normal;font-size:var(--fs-caption);
  color:var(--text-muted);font-variant-numeric:tabular-nums}
.region ul{margin:0;padding:0;list-style:none}
.region li{font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-secondary);padding:10px 0;
  border-bottom:1px solid var(--line)}

/* оценка на странице отзывов */
.ocenka{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,80px);align-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(28px,3.4vw,52px) 0}
.ocenka-ball b{display:block;font-family:var(--dis);font-weight:400;font-size:clamp(56px,8vw,116px);
  line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ocenka-ball span{display:block;margin-top:12px;font-size:var(--fs-caption);color:var(--text-secondary)}
.ocenka-razbivka{display:grid;gap:10px}
.ocenka-stroka{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:baseline;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.ocenka-stroka b{font-weight:500;font-size:var(--fs-body-sm);font-variant-numeric:tabular-nums}
.ocenka-stroka span{font-size:var(--fs-body-sm)}
.ocenka-stroka i{font-style:normal;font-size:var(--fs-caption);color:var(--text-muted)}
/* На странице отзывов цитаты идут списком в одну колонку. */
.quotes.lentoy{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.quotes.lentoy .q{padding:clamp(24px,3vw,44px) 0;border-bottom:1px solid var(--line)}
.quotes.lentoy .q p{max-width:70ch}
.quotes.lentoy .q .who{border-top:0;padding-top:0}

/* награды */
/* Четыре колонки, а не шесть: в шести диплом становился рамкой размером
   с ноготь, и прочесть в нём было нечего. */
.nagrady{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(24px,3vw,40px)}
.nagrada{display:block}
.nagrada .ph{aspect-ratio:3/4;width:100%;background:var(--surface-alt)}
.nagrada img{object-fit:contain;padding:clamp(8px,1.2vw,16px);
  transition:transform var(--dur-reveal) var(--ease)}
.nagrada:hover img{transform:scale(var(--hover-scale))}

/* Наследственная строка фабрики. Она ставится один раз на весь сайт —
   здесь, на странице производства. */
.deviz{font-family:var(--dis);font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.006em;
  color:var(--ps-paper);margin:0;max-width:20ch}

/* производство: две колонки */
.prod-cols{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,72px);align-items:center}
.prod-cols .ph{aspect-ratio:4/3;width:100%}

/* Плитки-доводы: тоже без коробок — заголовок, текст и линейка сверху. */
.plitki{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,52px)}
.plitka{border-top:1px solid var(--line);padding-top:20px}
.plitka b{display:block;font-family:var(--dis);font-weight:400;font-size:var(--fs-h3);
  line-height:1.14;letter-spacing:-.006em;margin-bottom:12px}
.plitka span{display:block;font-size:var(--fs-body-sm);line-height:1.55;color:var(--text-secondary)}

/* шаги сотрудничества */
.shagi{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px)}
.shag{border-top:1px solid var(--line);padding-top:20px}
/* Нумерация 01/02/03 заменяет пояснительные иконки: своего набора у фабрики нет. */
.shag .cap{color:var(--accent);font-variant-numeric:tabular-nums}
.shag b{display:block;font-family:var(--dis);font-weight:400;font-size:var(--fs-h3);
  line-height:1.14;letter-spacing:-.006em;margin:14px 0 12px}
.shag p{margin:0;font-size:var(--fs-body-sm);line-height:1.55;color:var(--text-secondary)}

/* контакты */
.svyaz{border-top:1px solid var(--line)}
.svyaz-stroka{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:20px;align-items:baseline;
  padding:clamp(18px,2.2vw,28px) 0;border-bottom:1px solid var(--line)}
.svyaz-stroka a,.svyaz-stroka>span:last-child{font-family:var(--dis);font-size:clamp(19px,2.2vw,30px);
  letter-spacing:-.006em}
.svyaz-stroka a:hover{color:var(--accent-hover)}

/* «скоро» */
.skoro{padding-top:calc(var(--header-h) + clamp(40px,8vw,120px));padding-bottom:clamp(64px,9vw,140px);min-height:70svh}
.skoro .lid{margin:clamp(20px,2.4vw,30px) 0 0;max-width:48ch;font-size:var(--fs-lead);line-height:1.45;color:var(--text-secondary)}

/* Общий блок заявки внизу страниц. Полотно тёмное, кнопка светлая. */
.final{background:var(--surface-deep);color:var(--text-on-dark);
  padding:clamp(40px,7vw,120px) clamp(24px,4vw,80px)}
.final h2{max-width:18ch;margin:0;color:var(--ps-paper)}
.final p{color:var(--text-on-dark-muted);margin:24px 0 0;max-width:48ch;font-size:var(--fs-lead);line-height:1.45}
.final .acts{margin-top:34px}
.final .btn.ghost{color:var(--ps-paper)}
.final .btn.ghost:hover{color:var(--ps-ink)}

/* ------------------------------------------------------------------ адаптив */
@media (max-width:1100px){
  .kollekcii{grid-template-columns:repeat(8,1fr)}
  .kol:nth-child(1){grid-column:1/span 4}
  .kol:nth-child(2){grid-column:5/span 4}
  .kol:nth-child(3){grid-column:1/span 4}
  .kol:nth-child(4){grid-column:5/span 4}
  .hits{grid-template-columns:1fr 1fr}
  .split.s84,.split.s57,.split.s66,
  .prod-cols,.model-tekst,.fgrid{grid-template-columns:1fr}
  .nums,.shagi,.plitki{grid-template-columns:1fr 1fr;gap:28px}
  .news{grid-template-columns:1fr 1fr}
  .cities{grid-template-columns:1fr 1fr}
  .tkani,.nagrady{grid-template-columns:repeat(3,1fr)}
  .model-shemy{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr;gap:44px}
}
/* Шапка — одна строка без переносов. Сначала из неё уходит телефон,
   потом город: иначе на узком ноутбуке строка распирала окно и появлялась
   горизонтальная прокрутка. На телефоне строка своя и умещается, поэтому
   правила действуют только до мобильной раскладки — иначе верх остался бы
   вовсе пустым. */
@media (max-width:1180px) and (min-width:761px){.top .r a[href^="tel:"]{display:none}}
@media (max-width:980px) and (min-width:761px){.top .r .city{display:none}}

@media (max-width:760px){
  :root{--header-h:98px;--fs-body:16px}
  .logo i{width:117px;height:33px}
  .nav ul,.top .l,.nav .btn{display:none}
  .burger{display:block}
  .bar{display:flex}
  .kollekcii{grid-template-columns:1fr;gap:44px}
  .kol:nth-child(n){grid-column:auto;margin-top:0}
  .kol .ph{aspect-ratio:4/3!important}
  .hits{grid-template-columns:1fr}
  .marshruty{grid-template-columns:1fr}
  .marshrut+.marshrut{border-left:0;padding-left:0;border-top:1px solid var(--line-on-dark)}
  .cities{grid-template-columns:1fr 1fr}
  .citylist{columns:2}
  .tkani{grid-template-columns:1fr 1fr}
  .nagrady{grid-template-columns:repeat(3,1fr)}
  .regiony{columns:1}
  .ocenka{grid-template-columns:1fr;gap:22px}
  .shagi,.plitki,.news{grid-template-columns:1fr}
  .model-shemy{grid-template-columns:1fr}
  .model-kadry{grid-template-columns:repeat(3,1fr)}
  .svyaz-stroka{grid-template-columns:1fr;gap:6px}
  .zapis{flex-direction:column;gap:8px}
  /* Нижняя панель занимает низ экрана — герой и виджет поднимаем над ней. */
  .hero{padding-bottom:calc(56px + 32px)}
  .vidzhet{bottom:calc(56px + 14px);width:48px;height:48px}
  .vidzhet span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .hero-polosa i{transform:scaleX(1)}
}

/* Шапка написана белым — она рассчитана на тёмный первый экран. Там, где
   верх светлый, её надо перекрасить, иначе меню растворяется в фоне.
   Флаг ставит sborka.py по маркеру verh-tyomnyy, руками его не выставлять.
   Раскрытое меню телефона — тоже светлое полотно: знак и телефон в шапке
   поверх него пропадали. */
body.verh-svetlyy header:not(.stuck),
body.menyu header:not(.stuck){color:var(--text-primary)}
body.verh-svetlyy header:not(.stuck) .top,
body.menyu header:not(.stuck) .top{border-color:var(--line)}
/* Перекрашивать знак больше нечем и незачем: маска красит его в латунь
   одинаково на тёмном полотне и на светлом. */

/* ==========================================================================
   СЛОЙ ДВИЖЕНИЯ И ИНТЕРАКТИВА
   Перенос примитивов из ui_kits/website/motion.jsx концепта. Поведение
   и разметка воспроизведены, код — нет: стек здесь не React.
   Тайминги берутся только из токенов вверху файла.
   ========================================================================== */

/* Появление: подъём 18 px и проявление. Задержку ставит JS из data-reveal. */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
[data-reveal].vidno{opacity:1;transform:none}

/* Заголовок строками из-под обрезки. 820 мс и шаг 90 мс — собственные
   значения примитива, в токенах их нет. По буквам не анимируем никогда. */
.stroka-obrez{display:block;overflow:hidden;padding-bottom:.04em}
.stroka-vnutr{display:block;transform:translateY(104%);transition:transform 820ms var(--ease)}
[data-stroki].vidno .stroka-vnutr{transform:none}

/* Один наезд на страницу: 1.00 → 1.04 за 26 секунд, линейно. Примитив
   перенесён и работает, но на главной сейчас не используется: первый экран
   вернули к четырём перетекающим кадрам, а наезд рассчитан на один кадр. */
[data-ken]{transform:scale(1);transition:transform 26s linear}
[data-ken].naezd{transform:scale(1.04)}

/* ------------------------------------------------------------------ рельс */
.rels{display:flex;flex-direction:column;gap:24px}
.rels-lenta{display:flex;gap:clamp(20px,2.4vw,44px);overflow-x:auto;
  scroll-snap-type:x proximity;cursor:grab;padding-bottom:4px}
.rels-lenta.tyanut{cursor:grabbing}
/* Скроллбар прячем — положение показывает латунная линия прогресса. */
.ps-rail{scrollbar-width:none;-ms-overflow-style:none}
.ps-rail::-webkit-scrollbar{display:none}
.rels-lenta>*{flex:0 0 auto;scroll-snap-align:start}
.rels-niz{display:flex;align-items:center;gap:24px}
.rels-progress{position:relative;flex:1;height:1px;background:var(--line)}
.rels-progress i{position:absolute;left:0;top:0;height:1px;width:8%;background:var(--accent);
  transition:width var(--dur-micro) var(--ease)}
.rels-podpis{font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted)}
.rels-knopki{display:flex;gap:8px}
.rels-knopka{width:38px;height:38px;border:1px solid var(--line-strong);background:transparent;
  cursor:pointer;color:var(--text-primary);font-size:14px;line-height:1;border-radius:0;
  transition:background-color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
.rels-knopka:hover{background:var(--ps-bone);border-color:var(--ps-ink)}

/* -------------------------------------------------- сравнение фото/чертёж */
.sravnenie{position:relative;overflow:hidden;background:var(--ps-graphite);touch-action:none;
  aspect-ratio:16/10}
.sravnenie>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sravn-pravaya{position:absolute;inset:0;background:var(--ps-graphite)}
/* Чертежи фабрики нарисованы светлой линией на прозрачном — на графите они
   читаются как есть. Инверсия, описанная для чёрных линий, сделала бы их
   чёрными на тёмном, то есть невидимыми. */
.sravn-pravaya img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:clamp(16px,3vw,48px);opacity:.92}
.sravn-liniya{position:absolute;top:0;bottom:0;width:1px;background:rgba(243,240,233,.86)}
.sravn-metka{position:absolute;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border:1px solid rgba(243,240,233,.72);background:rgba(20,19,17,.34);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  cursor:ew-resize;display:grid;place-items:center;color:var(--ps-paper);
  font-size:12px;letter-spacing:.06em;border-radius:0;padding:0}
.sravn-podpis{position:absolute;bottom:14px;font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(243,240,233,.78)}
.sravn-podpis.sleva{left:16px}
.sravn-podpis.sprava{right:16px}

/* --------------------------------------------------------- слои наполнения */
.sloi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(20px,3vw,52px);align-items:stretch}
.sloi-polosy{display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:clamp(12px,2vw,28px) 0}
/* Высоты полос — пропорции настоящих слоёв, не декоративный ряд. */
.sloi-polosa{position:relative;border:1px solid var(--line-on-dark);background:transparent;
  transition:border-color var(--dur-micro) var(--ease),background-color var(--dur-micro) var(--ease)}
.sloi-polosa.on{border-color:var(--accent);background:rgba(177,141,70,.14)}
.sloi-polosa b,.sloi-polosa i{position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--body);font-weight:400;font-style:normal;font-size:var(--fs-micro);
  color:var(--text-on-dark-muted);transition:color var(--dur-micro) var(--ease)}
.sloi-polosa b{left:10px;letter-spacing:.04em;white-space:nowrap}
.sloi-polosa i{right:10px;font-variant-numeric:tabular-nums}
.sloi-polosa.on b,.sloi-polosa.on i{color:var(--accent)}
.sloi-spisok{display:flex;flex-direction:column;gap:16px;
  border-left:1px solid var(--line-on-dark);padding-left:clamp(16px,2vw,36px)}
.sloi-knopka{text-align:left;background:none;border:0;border-bottom:1px solid var(--line-on-dark);
  padding:12px 0;cursor:pointer;display:flex;flex-direction:column;gap:4px;border-radius:0}
.sloi-knopka .nomer{font-family:var(--body);font-size:var(--fs-micro);color:var(--accent);
  font-variant-numeric:tabular-nums;opacity:.55;transition:opacity var(--dur-micro) var(--ease)}
.sloi-knopka.on .nomer{opacity:1}
.sloi-knopka .imya{font-family:var(--dis);font-size:clamp(19px,1.5vw,25px);
  color:var(--text-on-dark-muted);transition:color var(--dur-micro) var(--ease)}
.sloi-knopka.on .imya{color:var(--text-on-dark)}
.sloi-knopka .verh{display:flex;align-items:baseline;gap:10px}
.sloi-knopka .tekst{font-size:var(--fs-body-sm);line-height:1.62;color:var(--text-on-dark-muted);
  max-width:52ch;max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--dur-section) var(--ease),opacity var(--dur-micro) var(--ease)}
.sloi-knopka.on .tekst{max-height:6em;opacity:1}

@media (max-width:760px){
  .sloi{grid-template-columns:1fr;gap:24px}
  .sloi-spisok{border-left:0;padding-left:0;border-top:1px solid var(--line-on-dark);padding-top:16px}
  .sravnenie{aspect-ratio:4/3}
}

/* ------------------------------------------------- блоки концепта на главной */
/* Мастхед из концепта («PREMIUM SOFA» во всю ширину под первым экраном)
   снят: на реальном окне он занимал треть высоты, забивал заголовок
   и выдавливал кнопки в середину кадра. Первый экран оставлен прежним —
   четыре кадра под одной подписью. */

/* Тихая пауза перед коллекциями: один крупный абзац засечками. */
.pauza{margin:0;font-family:var(--dis);font-size:clamp(26px,2.5vw,40px);line-height:1.16;
  letter-spacing:-.006em;max-width:34ch;text-wrap:pretty}

/* Композиции концепта. s48 — узкая липкая колонка плюс широкое сравнение. */
.split.s48{grid-template-columns:4fr 8fr}
.split.s75{grid-template-columns:7fr 5fr}
.lipkaya{position:sticky;top:calc(var(--header-h-condensed) + 40px);align-self:start}

/* Характеристики строками на линейках — без коробок. */
.svojstva-stroki{display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--line);padding-top:16px}
.svojstva-stroki span{display:flex;justify-content:space-between;gap:24px;font-size:var(--fs-body-sm)}
.svojstva-stroki i{font-style:normal;color:var(--text-muted)}
.svojstva-stroki b{font-weight:400;font-variant-numeric:tabular-nums}

/* Подмена кадра на карточке товара по наведению. */
.hit .ph .vtoroy{opacity:0;transition:opacity var(--dur-cross) var(--ease)}
.hit:hover .ph .vtoroy{opacity:1}
/* Ширины карточек рельса чередуются вслед за пропорциями. */
.rels-lenta .hit.uz{width:clamp(260px,26vw,380px)}
.rels-lenta .hit.shir{width:clamp(300px,32vw,470px)}

/* Галерея интерьеров: крупный кадр плюс два поменьше. */
.interyery{display:grid;grid-template-columns:7fr 5fr;gap:clamp(20px,2.4vw,40px)}
.interyery figure{margin:0;display:flex;flex-direction:column;gap:12px}
.interyery-stolbik{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,40px)}

/* Выбор ткани: образец меняет большую плашку за --dur-cross. */
.tkan-plashka{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-dark)}
.tkan-plashka img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--dur-cross) var(--ease)}
.tkan-plashka img.on{opacity:1}
/* Два уголка волосяными линиями — рамка образца, как в концепте. */
.tkan-ugolok{position:absolute;background:rgba(250,249,246,.34)}
.tkan-ugolok-g{left:18px;top:18px;right:18px;height:1px}
.tkan-ugolok-v{left:18px;top:18px;bottom:18px;width:1px}
.tkan-vid{position:absolute;left:26px;top:26px;font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(250,249,246,.72)}
.tkan-imya{position:absolute;left:26px;bottom:24px;font-family:var(--dis);
  font-size:clamp(30px,3.4vw,54px);color:var(--ps-paper);letter-spacing:-.006em}
.tkan-vse{border-top:1px solid var(--line);padding-top:16px}
/* Образец теперь кнопка, а не ссылка: он выбирает, а не уводит. */
button.sw{font-family:var(--body);text-align:left;padding:0;border:0;background:none;cursor:pointer}
.sw.on i{outline-color:var(--ps-ink)}
.sw.on b{color:var(--accent-hover)}

@media (max-width:1100px){
  .split.s48{grid-template-columns:1fr}
  .lipkaya{position:static}
  .interyery{grid-template-columns:1fr}
}
@media (max-width:760px){
  .znak-masthead{max-width:100%}
  .masthead-podpisi{flex-direction:column;gap:6px}
}