/* Hallmark · macrostructure: Photographic · nav: N5 floating pill · footer: Ft5 statement
 * genre: editorial · theme: custom «Мастерская» · mode: persuade
 * vibe: «тёплое дерево, строгая типографика, свет и темнота»
 * paper oklch(97.4% 0.011 78) · accent oklch(58% 0.145 55) warm
 * axes: multi-band (5 палитр: 97 / 97 / 36 / 15 / 12 %) · serif+grotesk · warm accent
 * enrichment: три скролл-скраб ролика, разнесённые по странице + срез дерева
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 *
 * ИП НИКОЛАЕВ — корпусная мебель на заказ
 * ==========================================================================
 * Страница идёт полосами, и каждая полоса живёт в своей палитре. Цвета и
 * шрифты приходят из tokens.css через `data-mode` на полосе — здесь нет ни
 * одного сырого oklch() и ни одного font-family со строкой. Поменять
 * палитру полосы = поменять один атрибут в разметке.
 *
 * Три ролика стоят не подряд в начале, а разнесены по странице: первый
 * открывает сайт, второй идёт после направлений, третий — после процесса.
 * Каждый ролик самостоятелен: своя секция, свой липкий экран, своя
 * раскадровка. Скрипт про соседей ничего не знает.
 * ========================================================================== */

/* ============================ БАЗА ============================ */

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

/* display:flex/grid у оверлеев перебивает атрибут hidden — без этого
   невидимые слои меню и лайтбокса перехватывают клики по всей странице */
[hidden]{display:none !important}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--space-3xl) + 1rem);
  -webkit-text-size-adjust:100%;
  /* clip, а не hidden: hidden создаёт новый контейнер прокрутки и ломает
     position:sticky и position:fixed у потомков */
  overflow-x:clip;
  background:var(--surface);
}

body{
  margin:0;
  overflow-x:clip;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-md);
  line-height:1.62;
  font-weight:400;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* под меню и лайтбоксом страница не должна ехать позади оверлея */
body.is-locked{overflow:hidden}

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

h1,h2,h3,h4{
  margin:0;
  font-weight:600;
  /* длинное слово в дисплейном кегле рвём внутри слова, а не за край экрана */
  overflow-wrap:anywhere;
  min-width:0;
}
p{margin:0}
ul,ol,dl,dd{margin:0; padding:0}
li{list-style:none}

/* дисплейный набор всегда прямой: наклон в заголовке — самый узнаваемый
   след генератора, эмфазу несут вес, цвет и подчёркивание */
h1,h2,h3,.display,.reel__title{font-style:normal}

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

/* кольцо фокуса появляется мгновенно — никаких transition на outline */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}

::selection{background:var(--accent-soft); color:var(--ink)}

.skip{
  position:fixed; top:var(--space-sm); left:var(--space-sm);
  z-index:var(--z-modal);
  padding:var(--space-sm) var(--space-md);
  background:var(--btn-bg); color:var(--btn-fg);
  border-radius:var(--radius-md);
  transform:translateY(-200%);
  transition:transform var(--dur-short) var(--ease-out);
}
.skip:focus-visible{transform:none}

/* текст только для экранных читалок */
.vh{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* плёночное зерно: фиксированный слой, не трогает прокрутку */
.grain{
  position:fixed; inset:0;
  z-index:var(--z-grain);
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
}

/* ============================ ПРИМИТИВЫ ============================ */

.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.shell--narrow{max-width:940px}

/* Полоса — единица страницы. Ритм намеренно неровный: каждая дышит
   по-своему, иначе одинаковый отступ превращает страницу в список. */
.band{
  position:relative;
  isolation:isolate;
  background:var(--surface);
  color:var(--ink);
  padding-block:var(--space-4xl);
}
.band--open {padding-block:calc(var(--space-4xl) + var(--space-2xl)) var(--space-4xl)}
.band--tight{padding-block:var(--space-3xl)}
.band--tall {padding-block:calc(var(--space-4xl) + var(--space-3xl))}

/* полноэкранная подложка из текстуры: лежит под содержимым полосы и
   растворяется к краям, чтобы стык полос не читался прямоугольником */
.band__field{
  position:absolute; inset:0;
  z-index:-3;
  background-size:cover;
  background-position:center;
  opacity:var(--field-o,.5);
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0, #000 var(--photo-fade), #000 calc(100% - var(--photo-fade)), transparent 100%);
          mask-image:linear-gradient(to bottom,
    transparent 0, #000 var(--photo-fade), #000 calc(100% - var(--photo-fade)), transparent 100%);
  pointer-events:none;
}

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

   Две маски, пересечение. Первая (--ring-shape) задаёт силуэт — где
   именно срез растворяется в полосе. Вторая гасит его сверху и снизу на
   --photo-fade высоты: фотография обязана таять вместе с палитрой. Без
   неё снимок обрывался прямой линией ровно там, где фон уже плавно
   перетекал в соседний, и стык выдавал себя именно на фотографии. */
.band__ring{
  position:absolute;
  z-index:-2;
  pointer-events:none;
  background-size:cover;
  background-repeat:no-repeat;
  --ring-fade:linear-gradient(to bottom,
    transparent 0,
    #000 var(--photo-fade),
    #000 calc(100% - var(--photo-fade)),
    transparent 100%);
  -webkit-mask-image:var(--ring-shape), var(--ring-fade);
          mask-image:var(--ring-shape), var(--ring-fade);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}

/* ---------- ШОВ МЕЖДУ ПАЛИТРАМИ ----------
   Полосы стоят встык, и на стыке двух палитр была линия: одна заливка
   обрывалась, другая начиналась. Шов растворяет предыдущую палитру в
   текущей, поэтому переход читается как смена света в комнате.

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

   Градиент к `transparent` браузер считает с premultiplied alpha,
   поэтому на полпути он не сереет — промежуточный тон остаётся тёплым.

   Цвет предыдущей полосы подставляет скрипт (--seam-prev): держать его в
   разметке значило бы дублировать порядок секций в двух местах.        */
.band::before,
.footer::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:var(--seam-h);
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    var(--seam-prev, transparent) 0%,
    color-mix(in oklab, var(--seam-prev, transparent) 95%, transparent) 11%,
    color-mix(in oklab, var(--seam-prev, transparent) 84%, transparent) 23%,
    color-mix(in oklab, var(--seam-prev, transparent) 66%, transparent) 36%,
    color-mix(in oklab, var(--seam-prev, transparent) 45%, transparent) 50%,
    color-mix(in oklab, var(--seam-prev, transparent) 27%, transparent) 63%,
    color-mix(in oklab, var(--seam-prev, transparent) 14%, transparent) 75%,
    color-mix(in oklab, var(--seam-prev, transparent) 6%, transparent) 86%,
    color-mix(in oklab, var(--seam-prev, transparent) 2%, transparent) 94%,
    transparent 100%);
}
/* Дизеринг шва. Длинный пологий градиент в 8 битах на канал неизбежно
   идёт ступенями: соседние полосы пикселей отличаются на единицу, и глаз
   ловит их как линии поперёк перехода. Тонкий шум разбивает ступень —
   тот же приём, что в печати называется растрированием. Шум лежит только
   в зоне шва и гаснет вместе с ним. */
.band::after,
.footer::after{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:var(--seam-h);
  z-index:-1;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23d)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}
.band[data-seam-after-reel]::after{content:none}
.reel::after{content:none}

/* Полоса сразу после ролика шов НЕ рисует. Плёнка уже растворилась в её
   палитре своим нижним швом, и если полоса поверх этого выложит цвет
   ролика, на стыке встанут две разные заливки подряд — ровно та полоса
   чужого цвета, которой быть не должно. Ведёт это скрипт: он знает
   порядок секций. */
.band[data-seam-after-reel]::before{content:none}

/* у ролика шов свой: он живёт на липком экране и гаснет по ходу
   раскадровки, а не висит на всю высоту секции */
.reel::before{content:none}

/* --- микроподпись над заголовком ---
   Стоит стопкой НАД заголовком, в той же колонке. Подпись слева и
   заголовок справа двумя колонками — самый узнаваемый шаблонный приём,
   и он здесь не используется нигде. */
.eyebrow{
  display:flex; align-items:center; gap:var(--space-sm);
  margin-bottom:var(--space-md);
  font-family:var(--font-body);
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow::before{
  content:"";
  width:clamp(22px,4vw,46px); height:var(--rule-hair);
  background:var(--rule-strong);
  flex:none;
}

.display{
  font-family:var(--font-display);
  font-size:var(--text-display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--display-ink);
  text-wrap:balance;
}
/* На тёмной полосе та же антиква набирается плотнее: поверх кадра и на
   глубоком фоне тонкий штрих высокого контраста теряется, а прибавка
   веса возвращает букве тело, не трогая рисунок. */
[data-mode="ink"]   .display,
[data-mode="ember"] .display,
[data-mode="clay"]  .display{font-weight:700; letter-spacing:-.012em; line-height:1.02}

.display--narrow{max-width:16ch}

.prose p{
  margin-bottom:var(--space-md);
  max-width:60ch;
  color:var(--ink-2);
  text-wrap:pretty;
}
.prose p:last-child{margin-bottom:0}

/* Заголовок и подводка стоят в одной колонке, друг под другом. */
.lede{
  max-width:var(--maxw);
  margin-bottom:var(--space-2xl);
}
.lede .display{max-width:22ch}
.lede__note{
  margin-top:var(--space-lg);
  max-width:56ch;
  color:var(--ink-2);
  text-wrap:pretty;
}
.lede--narrow .display{max-width:18ch}

/* --- выделенное слово ---
   Одно слово на полосу, не больше: акцент, который стоит в каждой
   строке, перестаёт быть акцентом. Наклона нет ни в одном варианте —
   курсив в заголовке читается как сбой, а не как ударение. */
.mark{color:var(--accent-ink)}
/* второй вариант — подчёркивание, нарисованное под строкой.
   Не text-decoration: та лепится к базовой линии и на антикве
   дисплейного кегля режет выносные. */
.mark--rule{
  color:inherit;
  background-image:linear-gradient(var(--accent), var(--accent));
  background-repeat:no-repeat;
  background-size:100% .075em;
  background-position:0 95%;
  padding-bottom:.06em;
}

.rule{
  height:var(--rule-hair);
  background:var(--rule);
  border:0; margin:0;
}

/* ============================ КНОПКИ И ССЫЛКИ ============================ */

.btn{
  --pad-y:0.875rem;
  --pad-x:1.375rem;
  position:relative;
  display:inline-flex; align-items:center; gap:var(--space-sm);
  /* ни одна кликабельная подпись не переносится на вторую строку */
  white-space:nowrap;
  padding:var(--pad-y) calc(var(--pad-x) + 2.4rem) var(--pad-y) var(--pad-x);
  min-height:44px;
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:.02em;
  border-radius:var(--radius-pill);
  border:var(--rule-hair) solid transparent;
  transition:background-color var(--dur-short) var(--ease-out),
             color var(--dur-short) var(--ease-out),
             border-color var(--dur-short) var(--ease-out),
             transform var(--dur-micro) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed; transform:none}

/* стрелка живёт в собственном круге, заподлицо с внутренним отступом */
.btn__dot{
  position:absolute;
  right:calc(var(--pad-x) - 0.6rem);
  width:1.9rem; height:1.9rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--btn-dot, transparent);
  transition:transform var(--dur-short) var(--ease-out);
}
.btn__dot svg{width:15px; height:15px}
.btn:hover .btn__dot{transform:translateX(3px)}

.btn--solid{
  background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bd);
  --btn-dot:var(--accent-soft);
}
.btn--solid:hover{filter:brightness(1.08)}
/* На тёмной полосе сплошная кнопка сама светлая, и тень ей не поможет —
   высоту даёт янтарный ореол вокруг, тот же, что у снимков. */
[data-mode="ink"]   .btn--solid:hover,
[data-mode="ember"] .btn--solid:hover,
[data-mode="clay"]  .btn--solid:hover{
  box-shadow:
    0 0 0 var(--rule-hair) color-mix(in oklab, var(--accent) 45%, transparent),
    0 16px 44px -20px color-mix(in oklab, var(--accent) 72%, transparent);
}

.btn--outline{
  background:transparent; color:var(--ink);
  border-color:var(--field);
}
.btn--outline:hover{border-color:var(--ink); background:var(--surface-2)}

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

   Первое действие держит тонкая янтарная обводка и мягкое свечение
   вокруг: его видно на любом кадре, потому что светится сам воздух возле
   кнопки, а не подложка под ней. Второе — просто подпись со стрелкой и
   линией под ней; разница в весе делает иерархию без второй заливки. */
.btn--lume{
  background:transparent;
  color:var(--display-ink);
  border-color:color-mix(in oklab, var(--accent) 58%, transparent);
  box-shadow:
    0 0 26px -6px color-mix(in oklab, var(--accent) 42%, transparent),
    0 0 64px -12px color-mix(in oklab, var(--accent) 34%, transparent);
  --btn-dot:color-mix(in oklab, var(--accent) 26%, transparent);
  transition:background-color var(--dur-short) var(--ease-out),
             color var(--dur-short) var(--ease-out),
             border-color var(--dur-short) var(--ease-out),
             box-shadow var(--dur-long) var(--ease-out),
             transform var(--dur-micro) var(--ease-out);
}
.btn--lume:hover{
  border-color:var(--accent);
  box-shadow:
    0 0 34px -4px color-mix(in oklab, var(--accent) 62%, transparent),
    0 0 90px -10px color-mix(in oklab, var(--accent) 48%, transparent);
  --btn-dot:color-mix(in oklab, var(--accent) 40%, transparent);
}

.btn--ghost{
  --pad-x:0rem;
  background:transparent;
  border-color:transparent;
  color:var(--display-ink);
  --btn-dot:transparent;
}
.btn--ghost .btn__dot{
  border:var(--rule-hair) solid color-mix(in oklab, var(--display-ink) 32%, transparent);
  transition:border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
/* линия идёт только под подписью и не залезает под стрелку */
.btn--ghost::after{
  content:"";
  position:absolute; left:0; right:2.9rem; bottom:10px;
  height:var(--rule-hair);
  background:color-mix(in oklab, var(--display-ink) 34%, transparent);
  transition:background-color var(--dur-short) var(--ease-out);
}
.btn--ghost:hover{color:var(--display-ink)}
.btn--ghost:hover::after{background:var(--accent)}
.btn--ghost:hover .btn__dot{border-color:var(--accent)}

/* «Смотреть работы» — белый овал. Галерея теперь открывается только
   отсюда, поэтому кнопку должно быть видно сразу, но рядом с янтарной
   «Обсудить проект» она не спорит за главное действие: обводка светлая,
   а не цветная, заливка — едва заметное матовое стекло, свечения нет до
   наведения. */
.btn--ring{
  background:color-mix(in oklab, var(--display-ink) 7%, transparent);
  color:var(--display-ink);
  border:1.5px solid color-mix(in oklab, var(--display-ink) 82%, transparent);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  --btn-dot:color-mix(in oklab, var(--display-ink) 16%, transparent);
  transition:background-color var(--dur-short) var(--ease-out),
             border-color var(--dur-short) var(--ease-out),
             box-shadow var(--dur-long) var(--ease-out),
             transform var(--dur-micro) var(--ease-out);
}
.btn--ring:hover{
  background:color-mix(in oklab, var(--display-ink) 15%, transparent);
  border-color:var(--display-ink);
  box-shadow:0 0 34px -8px color-mix(in oklab, var(--display-ink) 45%, transparent);
  --btn-dot:color-mix(in oklab, var(--display-ink) 26%, transparent);
}

.btn--sm{--pad-y:0.625rem; --pad-x:1.05rem; font-size:var(--text-xs)}
.btn--block{width:100%; justify-content:flex-start}

/* типографическая ссылка со стрелкой — голос всех вторичных действий */
.link{
  display:inline-flex; align-items:center; gap:var(--space-xs);
  white-space:nowrap;
  min-height:44px;
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--accent-ink);
  border-bottom:var(--rule-hair) solid color-mix(in oklab, var(--accent-ink) 38%, transparent);
  align-self:flex-start;
  transition:color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.link svg{width:16px; height:16px; transition:transform var(--dur-short) var(--ease-out)}
.link:hover{color:var(--ink); border-color:var(--ink)}
.link:hover svg{transform:translateX(3px)}

/* ============================ ВЕРХНЯЯ ПАНЕЛЬ ============================
   N5 «край в край»: марка слева, разделы в разрядку по центру, действие
   справа. Ни одной плашки — только текст на полосе. Панель не приклеена
   к краю экрана и не отделена от страницы подложкой: она берёт палитру у
   той полосы, которая сейчас под ней, и читается как её часть.

   Палитру подставляет скрипт через data-mode. Поэтому над кадром панель
   светлая, над бумагой — тёмная, и отдельного «тёмного варианта» здесь
   нет ни одной строки.

   Читаемость без плашки держит направленный полог сверху: он темнит (или
   высветляет) ровно ту полосу, где стоит панель, и повторяет цвет самой
   полосы — на бумаге он не виден вовсе. */

.topbar{
  position:fixed;
  top:0;
  left:0; right:0;
  z-index:var(--z-sticky);
  /* Три колонки: марка | разделы | правый блок. Крайние колонки равны,
     пока хватает места, — тогда разделы стоят ровно по центру СТРАНИЦЫ,
     а не по центру промежутка между маркой и правым блоком (правый блок
     вдвое шире марки, и разделы съезжали влево на ~170 px). Когда места
     не хватает, правый блок не сжимается ниже своей ширины, а разделы
     встают как можно ближе к центру, не наезжая на него. */
  display:grid;
  grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);
  align-items:center; gap:clamp(16px,2.4vw,48px);
  padding:clamp(14px,2vh,26px) var(--gut);
  color:var(--ink);
  transition:color var(--dur-long) var(--ease-out),
             transform var(--dur-short) var(--ease-out),
             opacity var(--dur-short) var(--ease-out);
}
/* полог лежит ПОД содержимым панели и не ловит нажатия */
.topbar::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:calc(100% + clamp(40px,7vh,90px));
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in oklab, var(--surface) 78%, transparent) 0,
    color-mix(in oklab, var(--surface) 44%, transparent) 46%,
    transparent 100%);
  transition:background var(--dur-long) var(--ease-out);
}
.topbar.is-hidden{transform:translateY(-100%); opacity:0; pointer-events:none}

.brand{
  display:flex; align-items:center; gap:0.7rem;
  flex:none;
  justify-self:start;   /* в сетке панели не растягиваться на всю колонку */
  min-height:44px;
}
/* Логотип «ЛЕОР мебель» — маска, а не картинка: форма из
   assets/css/logo.css, цвет — из палитры полосы. На тёмном кадре знак
   светлый, на бумаге — тёмный; кольца среза в «О» — прорези. */
.logo{
  display:block;
  aspect-ratio:var(--logo-ratio);
  background-color:currentColor;
  -webkit-mask:var(--logo-mask) center / contain no-repeat;
          mask:var(--logo-mask) center / contain no-repeat;
  transition:background-color var(--dur-long) var(--ease-out);
}
/* Логотип в панели крупный (110 px), но панель от этого не растёт:
   отрицательные поля сверху и снизу. Выравнивается по строке разделов
   середина слова «ЛЕОР» (45% высоты знака), а не середина всего знака —
   иначе «ЛЕОР» вставало бы выше разделов. Отсюда сдвиг на 5% вниз. */
.brand__logo{
  height:110px;
  margin-block:-30px;
  transform:translateY(5%);
  color:var(--display-ink);
}

/* Разделы: разрядка вместо подложки. Прописные с широким трекингом
   держат строку на любом кадре — у них нет нижних выносных, которые
   первыми теряются на пёстром фоне. */
/* Разделов шесть, и на ноутбучных ширинах строка перестала помещаться:
   замер давал 1256 px при экране 1280. Разрядка и промежутки поджаты до
   значений, при которых на 1280 остаётся около сотни пикселей воздуха —
   меньше нельзя, строка начинает выглядеть тесной. */
.topbar__nav{
  display:flex; align-items:center;
  gap:clamp(14px,2.1vw,38px);
}
.topbar__nav a{
  position:relative;
  display:inline-flex; align-items:center;
  white-space:nowrap;
  min-height:44px;
  font-size:var(--text-xs);
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-2);
  transition:color var(--dur-short) var(--ease-out);
}
/* штрих растягивается transform-ом, а не шириной: анимация ширины
   заставляла бы браузер пересчитывать раскладку каждый кадр */
.topbar__nav a::after,
.topbar__cta::after{
  content:"";
  position:absolute; left:0; right:0; bottom:11px;
  height:var(--rule-hair);
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-short) var(--ease-out);
}
.topbar__nav a:hover,
.topbar__nav a.is-here{color:var(--ink)}
.topbar__nav a:hover::after,
.topbar__nav a.is-here::after{transform:scaleX(1)}
.topbar__nav a.is-here{color:var(--accent-ink)}

.topbar__end{
  display:flex; align-items:center; gap:clamp(16px,2vw,32px);
  flex:none;
  justify-self:end;
}
.topbar__tel{
  display:inline-flex; align-items:center;
  min-height:44px;
  white-space:nowrap;
  font-size:var(--text-sm);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--ink-2);
  transition:color var(--dur-short) var(--ease-out);
}
.topbar__tel:hover{color:var(--ink)}

/* действие тоже без плашки: тот же кегль и та же разрядка, что у
   разделов, но акцентным цветом и со стрелкой */
.topbar__cta{
  position:relative;
  display:inline-flex; align-items:center; gap:0.55rem;
  white-space:nowrap;
  min-height:44px;
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--accent-ink);
  transition:color var(--dur-short) var(--ease-out);
}
.topbar__cta svg{width:15px; height:15px; transition:transform var(--dur-short) var(--ease-out)}
.topbar__cta:hover{color:var(--ink)}
.topbar__cta:hover::after{transform:scaleX(1)}
.topbar__cta:hover svg{transform:translateX(3px)}

.burger{
  display:none;
  width:44px; height:44px;
  place-content:center;
}
/* три полоски — привычный знак меню; шаг 6 px = толщина 2 + просвет 4 */
.burger span{
  display:block;
  width:24px; height:2px;
  border-radius:1px;
  background:currentColor;
  transition:transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) linear;
}
.burger span + span{margin-top:5px}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* «Наши работы» — овал в обводке на любом экране, как «Смотреть работы»
   на первом экране, но в палитре панели: над кадром светлый, над бумагой
   тёмный. Выделен намеренно — галерея главное, что ищут на сайте. */
.topbar__works{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 1.05rem;
  border-radius:999px;
  border:1.5px solid color-mix(in oklab, var(--ink) 78%, transparent);
  background:color-mix(in oklab, var(--ink) 7%, transparent);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  white-space:nowrap;
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink);
  transition:background-color var(--dur-short) var(--ease-out),
             border-color var(--dur-short) var(--ease-out),
             color var(--dur-long) var(--ease-out);
}
.topbar__works:hover{
  background:color-mix(in oklab, var(--ink) 15%, transparent);
  border-color:var(--ink);
}

/* ============================ БОКОВОЙ УКАЗАТЕЛЬ ============================ */

.rail{
  position:fixed;
  right:calc(var(--gut) * .55);
  top:50%;
  transform:translateY(-50%);
  z-index:var(--z-rail);
  display:flex; flex-direction:column; gap:var(--space-sm);
  align-items:flex-end;
  color:var(--ink);
  opacity:0;
  pointer-events:none;
  transition:color var(--dur-long) var(--ease-out),
             opacity var(--dur-long) var(--ease-out);
}
.rail.is-shown{opacity:1; pointer-events:auto}
.rail a{
  display:flex; align-items:center; justify-content:flex-end; gap:var(--space-sm);
  min-height:22px;
  font-size:var(--text-xs);
  font-weight:500;
  letter-spacing:.06em;
  color:var(--ink-3);
  transition:color var(--dur-short) var(--ease-out);
}
.rail a span{
  opacity:0;
  transform:translateX(6px);
  transition:opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
/* штрих растягивается transform-ом, а не шириной: анимация ширины
   заставляет браузер пересчитывать раскладку каждый кадр */
.rail a i{
  display:block;
  width:26px; height:var(--rule-hair);
  background:currentColor;
  transform:scaleX(.42);
  transform-origin:right;
  transition:transform var(--dur-short) var(--ease-out);
}
.rail a:hover,.rail a.is-here{color:var(--ink)}
.rail a:hover span,.rail a.is-here span{opacity:1; transform:none}
.rail a:hover i,.rail a.is-here i{transform:scaleX(1)}
.rail a.is-here{color:var(--accent-ink)}

/* ============================ МЕНЮ ============================ */

.menu{
  position:fixed; inset:0;
  z-index:var(--z-menu);
  display:flex; flex-direction:column; justify-content:center;
  gap:var(--space-xl);
  padding:var(--space-4xl) var(--gut) var(--space-2xl);
  background:var(--surface);
  color:var(--ink);
  opacity:0;
  transition:opacity var(--dur-short) var(--ease-out);
}
.menu.is-open{opacity:1}
/* крестик в правом верхнем углу, там же, где бургер в панели. Видимый
   кружок — 34 px, а площадка нажатия — 44 px: её добирают поля кнопки. */
.menu__close{
  position:absolute;
  top:clamp(14px,2vh,26px);
  right:calc(var(--gut) - 5px);
  z-index:1;
  display:grid; place-items:center;
  width:44px; height:44px;
  padding:5px;
  color:var(--ink);
  background:none;
  border:0;
  cursor:pointer;
}
.menu__close::before{
  content:"";
  position:absolute; inset:5px;
  border-radius:50%;
  border:var(--rule-hair) solid var(--rule-strong);
  transition:background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.menu__close:hover::before{background:var(--surface-2); border-color:var(--ink-3)}
.menu__close svg{position:relative; width:16px; height:16px}
.menu__list{display:flex; flex-direction:column; gap:var(--space-xs)}
.menu__list a{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,1.2rem + 3.4vw,3rem);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--display-ink);
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
}
.menu.is-open .menu__list a{opacity:1; transform:none}
.menu__list a:hover{color:var(--accent-ink)}
.menu__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-md) var(--space-xl);
  padding-top:var(--space-lg);
  border-top:var(--rule-hair) solid var(--rule);
  font-size:var(--text-sm);
  color:var(--ink-2);
}
.menu__foot a{min-height:44px; display:inline-flex; align-items:center}

/* ============================ РОЛИК ============================
   Обычная высокая секция В ПОТОКЕ страницы: внутри липкий экран, а
   положение кадра считается прямо из позиции прокрутки. Страница нигде
   не запирается, колесо нигде не перехватывается, секцию можно
   пролистнуть одним махом или клавишей End.

   Ролик перематывается ПО МЕСТУ ПРОКРУТКИ (currentTime), а не играет
   сам по себе. Поэтому назад он идёт так же гладко, как вперёд, и
   обратная дорожка на каждый ролик не нужна. Это возможно только на
   пересборке `-scrub.mp4`: в исходниках один ключевой кадр на весь клип,
   и каждая перемотка декодировала бы с начала. */

/* без скрипта и при «уменьшить движение» ролик не показывается вовсе —
   на его месте остаётся обычный герой (section#hero) */
.reel{display:none}
.reel.is-ready{
  display:block;
  position:relative;
  height:calc(100svh * var(--reel-len, 2.5));
  background:var(--surface);
}
html.has-reels .hero{display:none}

.reel__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:clip;
  z-index:var(--z-reel);
  background:var(--surface);
}

.reel__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* ни фильтров, ни вуали на весь кадр: краски и чёткость — как в исходнике */
}

/* Читаемость держит направленный полог снизу, а не ореол у каждой буквы:
   плотная тень вокруг глифа на тёмном фоне читается как грязное свечение
   и выдаёт генератор. Полог темнит ровно ту четверть кадра, где стоит
   текст, и не трогает остальное изображение. */
.reel__veil{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(to top,
      color-mix(in oklab, var(--surface) 86%, transparent) 0,
      color-mix(in oklab, var(--surface) 52%, transparent) 26%,
      transparent 62%),
    linear-gradient(to right,
      color-mix(in oklab, var(--surface) 58%, transparent) 0,
      transparent 58%);
}

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

   Нижний шов должен дойти до полной плотности ЗАРАНЕЕ, а не к самому
   концу: липкий экран открепляется на последнем пикселе секции, и если
   шов к этому моменту ещё набирает силу, стык видно. Поэтому он выходит
   на полную к 0.92 раскадровки и держится до конца. */
.reel__seam{
  position:absolute; left:0; right:0;
  height:58vh;
  z-index:2;
  opacity:0;
  pointer-events:none;
}
.reel__seam--in{
  top:0;
  background:linear-gradient(to bottom,
    var(--seam-prev, transparent) 0%,
    color-mix(in oklab, var(--seam-prev, transparent) 92%, transparent) 14%,
    color-mix(in oklab, var(--seam-prev, transparent) 72%, transparent) 30%,
    color-mix(in oklab, var(--seam-prev, transparent) 46%, transparent) 48%,
    color-mix(in oklab, var(--seam-prev, transparent) 24%, transparent) 66%,
    color-mix(in oklab, var(--seam-prev, transparent) 9%, transparent) 82%,
    transparent 100%);
}
.reel__seam--out{
  bottom:0;
  background:linear-gradient(to top,
    var(--seam-next, transparent) 0%,
    color-mix(in oklab, var(--seam-next, transparent) 92%, transparent) 14%,
    color-mix(in oklab, var(--seam-next, transparent) 72%, transparent) 30%,
    color-mix(in oklab, var(--seam-next, transparent) 46%, transparent) 48%,
    color-mix(in oklab, var(--seam-next, transparent) 24%, transparent) 66%,
    color-mix(in oklab, var(--seam-next, transparent) 9%, transparent) 82%,
    transparent 100%);
}

/* Подпись прижата к низу кадра, но верх у неё ограничен (--cap-top —
   под панелью). Раньше было только bottom: на невысоком экране телефона
   (видимая высота 560–700 px, когда открыта адресная строка) высокая
   подпись — заголовок, текст и форма — уходила вверх за край, и первые
   слова «Геометрия квартиры» было не прочесть. Теперь это колонка между
   top и bottom: margin-top:auto у первого ребёнка прижимает содержимое
   вниз, а если оно не влезает, авто-отступ схлопывается в ноль и
   заголовок остаётся у верхней границы, а не за ней. */
.reel__cap{
  position:absolute;
  left:50%;
  top:var(--cap-top, clamp(96px,13vh,140px));
  bottom:clamp(104px,17vh,190px);
  display:flex; flex-direction:column;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--maxw);
  padding-inline:var(--gut);
  opacity:0;
  pointer-events:none;
  z-index:3;
}
.reel__cap > :first-child{margin-top:auto}
/* кликабельно только то, что сейчас на экране — иначе невидимые кнопки
   соседнего состояния перехватывают нажатия */
.reel__cap.is-live{pointer-events:auto}

/* надстрочник: тот же служебный голос, что у разделов в панели */
.reel__kicker{
  margin:0 0 clamp(14px,2vh,24px);
  font-family:var(--font-sans);
  font-size:var(--text-xs);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  /* На телефоне строка переносится и попадает выше полога, на светлый
     участок кадра. Поэтому не вторичный цвет, а основной, и тень плотнее
     — но тугая, со смещением, а не облако вокруг букв. */
  color:var(--ink);
  text-shadow:0 1px 3px color-mix(in oklab, var(--surface) 82%, transparent),
              0 2px 14px color-mix(in oklab, var(--surface) 62%, transparent);
}

.reel__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--text-hero);
  line-height:1.06;
  letter-spacing:-.012em;
  text-wrap:balance;
  color:var(--display-ink);
  /* мягкая тень со смещением, а не ореол: держит букву на светлом
     участке кадра и не рисует вокруг неё облако */
  text-shadow:0 2px 14px color-mix(in oklab, var(--surface) 62%, transparent);
}
.reel__title span{display:block}

.reel__lead{
  margin:clamp(18px,2.4vh,30px) 0 0;
  max-width:46ch;
  font-size:var(--text-md);
  /* на светлом участке кадра тонкий штрих распадается раньше, чем
     перестаёт хватать полога: плотность набора решает больше */
  font-weight:500;
  line-height:1.6;
  color:var(--ink);
  text-wrap:pretty;
  text-shadow:0 1px 10px color-mix(in oklab, var(--surface) 70%, transparent);
}

.reel__actions{
  display:flex; flex-wrap:wrap; gap:var(--space-sm);
  margin-top:clamp(24px,3.4vh,40px);
}
/* на кадре высоту даёт светлота самой кнопки, а не тень: тёплая тень
   поверх тёмного превращается в цветной ореол */
.reel .btn,.hero .btn{box-shadow:none}

/* ---------- подсказка ----------
   Кнопки «пропустить» нет: пропускать нечего, секция листается обычной
   прокруткой и проматывается одним махом или клавишей End. */
.reel__hint{
  position:absolute;
  left:50%; bottom:clamp(24px,4vh,42px);
  transform:translateX(-50%);
  z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  margin:0;
  font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2);
  pointer-events:none;
  transition:opacity var(--dur-short) var(--ease-out);
}
.reel__hint i{
  width:1px; height:32px;
  background:linear-gradient(to bottom, currentColor, transparent);
  animation:reel-hint 2.4s var(--ease-in-out) infinite;
}
@keyframes reel-hint{
  0%,100%{transform:scaleY(.4); transform-origin:top; opacity:.35}
  50%    {transform:scaleY(1);  transform-origin:top; opacity:1}
}

/* ============================ ГЕРОЙ (запасной) ============================
   Работает, когда ролик не запускается: без JS, при «уменьшить движение»,
   при печати и для поисковиков. */

.hero{
  position:relative;
  display:flex; align-items:flex-end;
  min-height:100svh;
  padding-block:var(--space-4xl) var(--space-3xl);
  overflow:clip;
  background:var(--surface);
}
.hero__shot{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:
    linear-gradient(to top,
      color-mix(in oklab, var(--surface) 86%, transparent) 0,
      color-mix(in oklab, var(--surface) 50%, transparent) 26%,
      transparent 62%),
    linear-gradient(to right,
      color-mix(in oklab, var(--surface) 58%, transparent) 0,
      transparent 58%);
}
.hero__inner{position:relative}
.hero__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--text-hero);
  line-height:1.06;
  letter-spacing:-.012em;
  color:var(--display-ink);
  text-wrap:balance;
}
.hero__title span{display:block}
.hero__lead{
  margin-top:var(--space-lg);
  max-width:46ch;
  font-weight:500;
  color:var(--ink);
  text-wrap:pretty;
}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-top:var(--space-xl)}

/* ============================ МАНИФЕСТ ============================
   Первая полоса после ролика. Кадр кончился — остался материал: срез
   выходит из правого края и уводит взгляд обратно в текст. */

.manifest{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,6vw,110px);
  align-items:center;
}
.manifest__say .display{max-width:15ch}
.manifest__prose{margin-top:var(--space-xl)}
.manifest__spec{
  margin-top:var(--space-xl);
  padding-top:var(--space-lg);
  border-top:var(--rule-hair) solid var(--rule);
  max-width:46ch;
  font-size:var(--text-lg);
  line-height:1.5;
  color:var(--ink);
  text-wrap:pretty;
}

/* ---------- СВЕЧЕНИЕ ПОД КУРСОРОМ ----------
   Тот же приём, что у плиты на этой полосе, только по буквам: под
   курсором текст разгорается, дальше остаётся обычным.

   Свет идёт заливкой по глифам (background-clip:text), а не вторым
   слоем с копией текста: копия в ::after читалась бы экранным диктором
   второй раз. По умолчанию круг уведён за пределы строки, поэтому без
   наведения слово выглядит как обычный текст. */
/* Тонкая линия под фразой — единственная подсказка, что на неё стоит
   навести. Без неё в покое слово ничем не отличается от соседних, и про
   свечение никто не узнаёт. */
.lume{
  color:var(--accent-ink);
  box-shadow:inset 0 -1px 0 color-mix(in oklab, var(--accent) 34%, transparent);
  transition:box-shadow var(--dur-short) var(--ease-out);
}
.lume.is-lit{box-shadow:inset 0 -1px 0 color-mix(in oklab, var(--accent) 80%, transparent)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .lume{
    background-image:radial-gradient(
      circle var(--lume-r, 150px) at var(--lume-x, -999px) var(--lume-y, 50%),
      var(--accent) 0%,
      color-mix(in oklab, var(--accent) 60%, var(--ink)) 42%,
      var(--ink) 100%);
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    transition:filter var(--dur-short) var(--ease-out);
  }
  /* тень рисуется по самим глифам, поэтому drop-shadow, а не text-shadow:
     text-shadow у прозрачного текста нечего подсвечивать */
  .lume.is-lit{filter:drop-shadow(0 0 16px color-mix(in oklab, var(--accent) 48%, transparent))}
}
/* без указателя вести свет нечем — слово просто акцентное */
@media (hover:none){
  .lume{background-image:none; color:var(--accent-ink)}
}
.manifest__prose p{font-size:var(--text-lg); line-height:1.58; max-width:44ch}

/* ---------- ФОНАРЬ ----------
   Плита лежит крупно и уходит за правый край: видно кусок материала, а не
   каталожный снимок предмета — по нему не прочитать, откуда кадр.

   Кадр ОДИН. Заказчик прислал два состояния, погашенное и разгоревшееся,
   но их силуэты совпадают лишь на 0.87 IoU: при проходе света по краю
   была бы видна кайма. Поэтому разгоревшееся состояние делается из того
   же файла фильтром — совпадение пиксель в пиксель гарантировано, и
   браузер тянет одну картинку вместо двух.

   Верхний слой открыт круглой маской под курсором: двигаешь мышь — свет
   идёт по смоле. Меняется только mask-position, ни один пиксель не
   перерисовывается заново.                                             */
.torch{
  position:absolute;
  z-index:-2;
  pointer-events:none;
  right:calc(var(--gut) * -4);
  /* Коробка совпадает с полосой по вертикали. Раньше она выступала на
     16 % вверх и вниз, и `overflow:clip` резал плиту ровно там, где её
     маска ещё держала около половины непрозрачности — поперёк перехода
     шла прямая линия. Теперь гаснуть маске некуда деваться: края
     коробки и есть края полосы. */
  top:0;
  height:100%;
  width:min(56vw,880px);
  --torch-r:clamp(300px,36vw,540px);
  /* Две маски, пересечение — как у срезов. Силуэт растворяет края
     коробки (object-fit:cover режет плиту прямой линией), а вертикальная
     гасит её сверху и снизу в зонах шва: плита обязана таять вместе с
     палитрой полосы, а не обрываться поперёк перехода. */
  -webkit-mask-image:
    radial-gradient(78% 66% at 52% 50%, #000 46%, transparent 94%),
    linear-gradient(to bottom, transparent 0, #000 var(--photo-fade), #000 calc(100% - var(--photo-fade)), transparent 100%);
  mask-image:
    radial-gradient(78% 66% at 52% 50%, #000 46%, transparent 94%),
    linear-gradient(to bottom, transparent 0, #000 var(--photo-fade), #000 calc(100% - var(--photo-fade)), transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.torch__slab,
.torch__lit{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:44% 50%;
}
.torch__slab{opacity:.92}
.torch__lit{
  /* замер по исходным кадрам: разгоревшийся ярче погашенного в 1.85 раза */
  filter:brightness(1.85) saturate(1.18) contrast(1.02);
  opacity:0;
  -webkit-mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 46%, transparent 72%);
          mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 46%, transparent 72%);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:var(--torch-r) var(--torch-r);
          mask-size:var(--torch-r) var(--torch-r);
  -webkit-mask-position:var(--torch-x, 50%) var(--torch-y, 40%);
          mask-position:var(--torch-x, 50%) var(--torch-y, 40%);
  transition:opacity var(--dur-long) var(--ease-out);
}
.torch.is-lit .torch__lit{opacity:1}

/* Без указателя (телефон, планшет) вести фонарь нечем. Там плита просто
   горит вполсилы по центру: эффекта «веду свет рукой» нет, но полоса не
   остаётся тусклой заглушкой. */
@media (hover:none){
  .torch__lit{
    opacity:.8;
    -webkit-mask-size:150% 150%;
            mask-size:150% 150%;
    -webkit-mask-position:50% 34%;
            mask-position:50% 34%;
  }
}

/* ============================ ПОДХОД ============================ */

.craft{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,5vw,88px);
  align-items:start;
}
.craft__say{display:flex; flex-direction:column; gap:var(--space-lg); align-items:flex-start}
.craft__say .display{max-width:13ch}
.craft__prose p{font-size:var(--text-lg); line-height:1.6}

/* Портрет встаёт по верхней линии текста. Раньше он был опущен на целый
   отступ — задумывался как единственный намеренный разрыв сетки, но
   читался просто как съехавшая картинка. */
.craft__shot{margin:0; margin-top:.35em}
.craft__shot img{
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-photo);
}

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

.figures{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-lg) clamp(20px,4vw,64px);
  margin-top:var(--space-4xl);
  padding-top:var(--space-xl);
  border-top:var(--rule-hair) solid var(--rule);
}
.figure{display:flex; flex-direction:column; gap:var(--space-2xs)}
.figure dd{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.1rem,1rem + 2.6vw,3.4rem);
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--display-ink);
}
.figure dt{
  font-size:var(--text-sm);
  line-height:1.45;
  color:var(--ink-3);
  max-width:20ch;
}

/* ============================ НАПРАВЛЕНИЯ ============================
   12 колонок; ряды закрываются целиком (7+5, затем 4+4+4), поэтому
   подписи всегда стоят на своей линии. Без рамок и плашек: снимок лежит
   прямо на полосе, текст — под ним. Карточка внутри карточки здесь не
   появляется ни разу. */

.cards{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--space-2xl) var(--space-xl);
}
.card{display:flex; flex-direction:column}
.card--w7{grid-column:span 7}
.card--w5{grid-column:span 5}
.card--w4{grid-column:span 4}

.card__shot{
  margin:0 0 var(--space-lg);
  overflow:hidden;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-photo);
  transition:box-shadow var(--dur-long) var(--ease-out);
}
/* тёплый ореол при наведении: свет того же янтаря, что и в акценте,
   а не абстрактное свечение «как у всех» */
.card:hover .card__shot{
  box-shadow:
    var(--shadow-photo),
    0 0 0 var(--rule-hair) color-mix(in oklab, var(--accent) 52%, transparent),
    0 26px 70px -32px color-mix(in oklab, var(--accent) 62%, transparent);
}
.card__shot img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform var(--dur-long) var(--ease-out);
}
.card__shot--sq img{aspect-ratio:1/1}
.card:hover .card__shot img{transform:scale(1.035)}

.card h3{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--display-ink);
}
[data-mode="clay"] .card h3{font-weight:700; letter-spacing:-.01em}
.card p{
  margin-top:var(--space-sm);
  max-width:38ch;
  font-size:var(--text-base);
  color:var(--ink-2);
  text-wrap:pretty;
}

/* ---------- эксклюзивное направление ----------
   Стоит отдельно от пяти карточек: ниже, по центру и крупнее, с золотой
   подписью между двумя тонкими линиями. Двойной снимок — широкий и
   высокий — повторяет язык карточек выше (7+5), но собран к центру.
   Нажимается весь блок: кнопка в заголовке растянута на него через
   ::after, поэтому клик по снимку тоже открывает окно. */
.exclusive{
  max-width:1060px;
  margin:var(--space-4xl) auto 0;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
/* нажимается только карточка: «Описание» и призыв под ней — свои кнопки */
.exclusive__card{
  position:relative;
  width:100%;
  display:flex; flex-direction:column; align-items:center;
}
.exclusive__eyebrow{
  display:flex; align-items:center; gap:var(--space-md);
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent-ink);
}
.exclusive__eyebrow::before,
.exclusive__eyebrow::after{
  content:"";
  width:clamp(28px,7vw,84px); height:var(--rule-hair);
  background:linear-gradient(to right, transparent, var(--accent));
}
.exclusive__eyebrow::after{background:linear-gradient(to left, transparent, var(--accent))}

.exclusive__title{
  margin-top:var(--space-md);
  font-family:var(--font-display);
  font-size:var(--text-display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--display-ink);
}
.exclusive__open{
  font:inherit; letter-spacing:inherit; color:inherit;
  background:none; border:0; padding:0;
  cursor:pointer;
  transition:text-shadow var(--dur-long) var(--ease-out);
}
.exclusive__open::after{
  content:"";
  position:absolute; inset:calc(var(--space-lg) * -1);
  z-index:2;
  border-radius:var(--radius-lg);
}
.exclusive__open:focus-visible{outline:none}
.exclusive__open:focus-visible::after{outline:2px solid var(--focus); outline-offset:0}
.exclusive__card:hover .exclusive__open{
  text-shadow:0 0 38px color-mix(in oklab, var(--accent) 55%, transparent);
}

.exclusive__lead{
  margin-top:var(--space-md);
  max-width:46ch;
  font-size:var(--text-md);
  color:var(--ink-2);
  text-wrap:balance;
}

.exclusive__shots{
  width:100%;
  margin-top:var(--space-2xl);
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:var(--space-lg);
  align-items:end;
}
.exclusive__shot{
  margin:0;
  overflow:hidden;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-photo);
  transition:box-shadow var(--dur-long) var(--ease-out);
}
.exclusive__shot img{
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  transition:transform var(--dur-long) var(--ease-out);
}
.exclusive__shot--tall img{aspect-ratio:3/4}
.exclusive__card:hover .exclusive__shot{
  box-shadow:
    var(--shadow-photo),
    0 0 0 var(--rule-hair) color-mix(in oklab, var(--accent) 52%, transparent),
    0 26px 70px -32px color-mix(in oklab, var(--accent) 62%, transparent);
}
.exclusive__card:hover .exclusive__shot img{transform:scale(1.035)}

/* подпись-кнопка под снимками — только вид: нажимается весь блок */
.exclusive__cta{margin-top:var(--space-xl); cursor:pointer}
.exclusive__card:hover .exclusive__cta{
  border-color:var(--accent);
  box-shadow:
    0 0 34px -4px color-mix(in oklab, var(--accent) 62%, transparent),
    0 0 90px -10px color-mix(in oklab, var(--accent) 48%, transparent);
  --btn-dot:color-mix(in oklab, var(--accent) 40%, transparent);
}
.exclusive__card:hover .exclusive__cta .btn__dot{transform:translateX(3px)}

/* «Описание» — тихая подпись со стрелкой под главной кнопкой */
.exclusive__more{margin-top:var(--space-md)}

/* ---------- призыв «Обсудите дизайн-проект…» ----------
   Самая яркая надпись на полосе: заливка из пяти палитр сайта медленно
   переливается, вокруг — тёплый ореол. Рядом «Заказать стол»: в покое
   золотая обводка, при наведении кнопка заливается тем же градиентом,
   по ней проходит блик, ореол разгорается. */
.lead{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
  gap:var(--space-lg) clamp(24px,4vw,56px);
  text-align:left;
}
.lead--band{
  width:100%;
  margin-top:var(--space-2xl);
  padding-top:var(--space-2xl);
  border-top:var(--rule-hair) solid transparent;
  border-image:linear-gradient(to right, transparent, color-mix(in oklab, var(--accent) 60%, transparent), transparent) 1;
}
.lead__say{
  max-width:20ch;
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--accent-ink);
  text-wrap:balance;
}
.lead__accent{font-style:italic}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .lead__say{
    /* Свои цвета, а не пять палитр сайта: те все тёплые и близкие, и
       надпись читалась бы одним рыжим. Здесь разброс шире — светлое
       золото, янтарь, медь с розовым отливом, мёд. Самый тёмный цвет
       (медь, L 72%) даёт на глине 4.3:1, на чёрном окне — 7.6:1; для
       крупного текста нужно 3:1. */
    background-image:linear-gradient(100deg,
      oklch(90% 0.090 92) 0%,  oklch(80% 0.150 68) 16%, oklch(72% 0.150 34) 32%,
      oklch(86% 0.120 84) 48%, oklch(75% 0.120 16) 64%, oklch(82% 0.150 60) 80%,
      oklch(90% 0.090 92) 100%);
    background-size:260% 100%;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    filter:drop-shadow(0 0 22px color-mix(in oklab, var(--accent) 34%, transparent));
    animation:lead-flow 14s ease-in-out infinite alternate;
  }
}
@keyframes lead-flow{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}

.btn--order{
  isolation:isolate;
  overflow:hidden;
  color:var(--display-ink);
  background:transparent;
  border-color:color-mix(in oklab, var(--swatch-4) 70%, transparent);
  box-shadow:
    0 0 26px -6px color-mix(in oklab, var(--accent) 45%, transparent),
    0 0 70px -14px color-mix(in oklab, var(--swatch-5) 38%, transparent);
  --btn-dot:color-mix(in oklab, var(--accent) 26%, transparent);
  transition:color var(--dur-short) var(--ease-out),
             border-color var(--dur-short) var(--ease-out),
             box-shadow var(--dur-long) var(--ease-out),
             transform var(--dur-short) var(--ease-out);
}
/* заливка въезжает слева */
.btn--order::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(100deg, var(--swatch-4), var(--swatch-2) 40%, var(--swatch-5) 75%, var(--swatch-1));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .55s var(--ease-out);
}
/* блик проходит поверх заливки */
.btn--order::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-70%;
  width:45%;
  z-index:-1;
  background:linear-gradient(100deg, transparent, oklch(100% 0 0 / .5), transparent);
  transform:skewX(-22deg);
  transition:left .9s var(--ease-out) .08s;
}
.btn--order:hover,
.btn--order:focus-visible{
  color:oklch(19% 0.03 50);
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:
    0 0 42px -4px color-mix(in oklab, var(--accent) 72%, transparent),
    0 20px 60px -18px color-mix(in oklab, var(--swatch-5) 80%, transparent);
  --btn-dot:oklch(19% 0.03 50 / .14);
}
.btn--order:hover::before,
.btn--order:focus-visible::before{transform:scaleX(1)}
.btn--order:hover::after,
.btn--order:focus-visible::after{left:135%}
.btn--order:hover .btn__dot{transform:translateX(4px)}
.btn--order:active{transform:translateY(0)}

/* ============================ СТИЛИ ============================
   Полоса о том, что мастерская работает и в минимализме, и в историческом
   максимализме. Поэтому она единственная, где набор сам показывает
   предмет разговора: «стилях» набрано золотом со свечением, «палитрах» —
   заливкой из пяти палитр сайта. Гарнитура у всей фразы одна: смена
   гарнитуры внутри строки ломала набор, а не показывала мысль.

   Больше одного такого заголовка на странице быть не должно: приём
   работает ровно потому, что встречается один раз. */

.styles__line{position:relative}
/* свет за фразой: золото полосы, собранное в мягкое пятно */
.styles__line::before{
  content:"";
  position:absolute;
  inset:-45% -12% -45% -10%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(52% 50% at 38% 50%,
    color-mix(in oklab, var(--accent) 20%, transparent) 0,
    color-mix(in oklab, var(--accent) 8%, transparent) 46%,
    transparent 78%);
}

.styles__word{white-space:nowrap}

/* антиква полосы, золотом и со свечением у самой буквы */
.styles__word--serif{
  color:var(--accent-ink);
  text-shadow:0 0 34px color-mix(in oklab, var(--accent) 52%, transparent);
}

/* Заливка словом «палитрах» — пять акцентов пяти палитр сайта.
   Без поддержки background-clip буква осталась бы прозрачной, поэтому
   цвет задан обычным способом, а заливка включается только там, где
   она действительно работает. */
.styles__word--palette{color:var(--accent-ink)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .styles__word--palette{
    background-image:linear-gradient(96deg,
      var(--swatch-1) 0%, var(--swatch-2) 26%, var(--swatch-3) 50%,
      var(--swatch-4) 74%, var(--swatch-5) 100%);
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
  }
}

.styles__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,88px);
  margin-top:var(--space-2xl);
  padding-top:var(--space-xl);
  border-top:var(--rule-hair) solid var(--rule);
}
.styles__col h3{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.012em;
  color:var(--display-ink);
}
/* перечень направлений — служебный слой, поэтому гротеск и разрядка */
.styles__set{
  margin-top:var(--space-sm);
  font-family:var(--font-sans);
  font-size:var(--text-sm);
  font-weight:500;
  letter-spacing:.06em;
  color:var(--accent-ink);
}
.styles__col p + p{margin-top:var(--space-md); color:var(--ink-2); max-width:44ch; text-wrap:pretty}

.styles__proof{
  margin-top:var(--space-2xl);
  padding-left:var(--space-lg);
  border-left:2px solid var(--accent);
  max-width:56ch;
  font-size:var(--text-lg);
  line-height:1.5;
  color:var(--ink);
  text-wrap:pretty;
}

/* ============================ В ЦИФРАХ ============================
   Полоса углей: свет идёт из материала. Срез выходит слева, цифры
   стоят справа крупной сеткой. */

.tally{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
/* 13ch в этой колонке давали по одному слову в строке — заголовок
   рассыпался лесенкой на пять строк вместо трёх */
.tally__say{position:relative}
.tally__say .display{max-width:16ch}
/* Срез крупный, и его светлая часть выходит под заголовок. Вместо того
   чтобы гонять кадр по полосе, кладём под текст мягкое затемнение в цвет
   самой полосы: оно читается как виньетка от света, а не как плашка, и
   держит контраст, куда бы срез ни попал при другой ширине экрана. */
.tally__say::before{
  content:"";
  position:absolute;
  inset:-24% -16% -24% -34%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(58% 54% at 44% 50%,
    color-mix(in oklab, var(--surface) 90%, transparent) 0,
    color-mix(in oklab, var(--surface) 62%, transparent) 46%,
    color-mix(in oklab, var(--surface) 24%, transparent) 72%,
    transparent 88%);
}

.tally__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-xl) clamp(24px,4vw,72px);
}
.tally__cell{
  display:flex; flex-direction:column; gap:var(--space-xs);
  padding-top:var(--space-lg);
  border-top:var(--rule-hair) solid var(--rule-strong);
}
.tally__cell dd{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.6rem,1.4rem + 3.6vw,4.6rem);
  line-height:.96;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--accent);
}
.tally__cell dt{
  font-size:var(--text-sm);
  line-height:1.45;
  color:var(--ink-2);
  max-width:22ch;
}

/* Срез уходит в нижний левый угол, а не встаёт за заголовок: белая
   надпись поверх освещённой части дерева теряет контраст ровно там, где
   кольца самые светлые. Внизу он держит ту же полосу, но текста под ним
   нет. */
/* Срез крупнее, но целиком внутри полосы и растворён со всех сторон.
   Раньше он упирался в нижний край, и на стыке с бумагой его срезало
   прямой линией — самое заметное место на всей странице. */
.band--tally .band__ring{
  left:calc(var(--gut) * -3);
  bottom:2%;
  width:min(56vw,720px);
  height:min(64vw,840px);
  background-image:url("../photos/texture/ring-ember.jpg");
  background-position:right top;
  --ring-shape:radial-gradient(78% 74% at 30% 46%, #000 30%, transparent 90%);
}

/* ============================ ПРОЦЕСС ============================
   Порядок здесь несёт смысл — этапы идут строго друг за другом, поэтому
   нумерация заслужена. Вертикальная линия связывает шаги. */

.steps{
  display:grid;
  gap:0;
  border-top:var(--rule-hair) solid var(--rule);
}
.step{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,88px) minmax(0,5fr) minmax(0,6fr);
  gap:var(--space-lg) clamp(20px,3vw,56px);
  align-items:start;
  padding-block:var(--space-xl);
  border-bottom:var(--rule-hair) solid var(--rule);
  transition:background-color var(--dur-short) var(--ease-out);
}
.step:hover{background:var(--surface-2)}
/* штрих растёт сверху вниз — по направлению самого списка */
.step::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:2px;
  background:var(--accent);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform var(--dur-short) var(--ease-out);
}
.step:hover::before{transform:scaleY(1)}
.step__no{
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.12em;
  color:var(--accent-ink);
  padding-top:.35rem;
}
.step h3{
  font-family:var(--font-sans);
  font-size:var(--text-xl);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.022em;
  color:var(--display-ink);
}
.step p{
  color:var(--ink-2);
  max-width:52ch;
  text-wrap:pretty;
}

/* ============================ СПЕЦИФИКАЦИЯ ============================
   Спецификация строками, а не сетка иконок: слева — что именно вы
   получаете, справа — что за этим стоит. */

.spec{
  display:grid;
  border-top:var(--rule-hair) solid var(--rule);
}
.spec__row{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:var(--space-md) clamp(20px,4vw,72px);
  padding-block:var(--space-xl);
  border-bottom:var(--rule-hair) solid var(--rule);
}
.spec__row dt{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--display-ink);
}
.spec__row dd{color:var(--ink-2); max-width:58ch; text-wrap:pretty}

/* ============================ ВОПРОСЫ ============================ */

.faq{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(28px,5vw,88px);
  align-items:start;
}
.faq__say{position:sticky; top:calc(var(--space-3xl) + 1rem)}
/* в узкой колонке дисплейный кегль не даёт уложить заголовок — шаг вниз */
.faq__say .display{font-size:var(--text-3xl); max-width:12ch}

.acc{border-top:var(--rule-hair) solid var(--rule)}
.acc__item{border-bottom:var(--rule-hair) solid var(--rule)}
.acc__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-lg);
  width:100%;
  padding-block:var(--space-lg);
  text-align:left;
  font-family:var(--font-sans);
  font-size:var(--text-lg);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.012em;
  color:var(--display-ink);
  transition:color var(--dur-short) var(--ease-out);
}
.acc__head:hover{color:var(--accent-ink)}
.acc__head em{
  position:relative;
  flex:none;
  width:22px; height:22px;
  margin-top:.28rem;
  transition:transform var(--dur-short) var(--ease-out);
}
.acc__head em::before,.acc__head em::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:14px; height:1.5px;
  margin:-0.75px 0 0 -7px;
  background:currentColor;
}
/* вертикальный штрих гаснет — значит крутить надо на 180°, иначе на
   половине поворота видно, как он исчезает */
.acc__head em::after{transform:rotate(90deg); transition:opacity var(--dur-micro) linear}
.acc__item.is-open .acc__head em{transform:rotate(180deg)}
.acc__item.is-open .acc__head em::after{opacity:0}

.acc__body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-long) var(--ease-in-out);
}
.acc__item.is-open .acc__body{grid-template-rows:1fr}
.acc__body > div{overflow:hidden}
.acc__body p{
  padding-bottom:var(--space-lg);
  max-width:62ch;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* Ответы лежат прямо на срезе: на широком экране правая треть строк
   приходится на тёмные годовые кольца, и вторичный серо-коричневый
   (--ink-2) на них сливался. Поэтому здесь ответ набран основным тёмным
   цветом полосы и чуть плотнее, а под буквами — кремовое свечение цвета
   самой полосы (--surface): на бумаге его не видно, на кольцах оно
   отделяет строку от древесины, как полог под панелью над кадром.
   Тот же ореол — у вопросов, которые тоже заходят на срез. */
.band--faq .acc__body p{
  color:var(--ink);
  font-weight:500;
  text-shadow:
    0 0 1px var(--surface),
    0 0 .35em var(--surface),
    0 0 .8em var(--surface),
    0 0 1.4em color-mix(in oklab, var(--surface) 80%, transparent);
}
.band--faq .acc__head{
  text-shadow:
    0 0 .35em var(--surface),
    0 0 .9em var(--surface);
}
/* «+/−» в 1.5 px на кольцах терялся и с ореолом, поэтому знак стоит в
   кремовом кружке — как крестик окон (.sheet__close), только мельче */
.band--faq .acc__head em{
  width:30px; height:30px;
  margin-top:-.05rem;
  border-radius:50%;
  background:color-mix(in oklab, var(--surface) 88%, transparent);
  border:var(--rule-hair) solid var(--rule-strong);
}
.band--faq .acc__head em::before,
.band--faq .acc__head em::after{width:12px; margin-left:-6px}

.band--faq .band__ring{
  right:calc(var(--gut) * -1.8);
  bottom:3%;
  width:min(48vw,610px);
  height:min(58vw,720px);
  background-image:url("../photos/texture/ring-cream.jpg");
  background-position:left top;
  --ring-shape:radial-gradient(78% 78% at 68% 62%, #000 28%, transparent 88%);
}

/* ============================ ЗАЯВКА ============================ */

.ask{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,5vw,88px);
  align-items:start;
}
.ask__say .display{max-width:13ch}
.ask__say p{margin-top:var(--space-lg); max-width:48ch; color:var(--ink-2); text-wrap:pretty}
.ask__list{
  margin-top:var(--space-xl);
  display:flex; flex-direction:column; gap:var(--space-sm);
}
.ask__list li{
  display:flex; align-items:flex-start; gap:var(--space-sm);
  font-size:var(--text-sm);
  color:var(--ink-2);
}
.ask__list li::before{
  content:"";
  flex:none;
  width:16px; height:var(--rule-hair);
  margin-top:.72rem;
  background:var(--accent);
}

/* ============================ ЗАЯВКИ ============================
   Заявок пять, и все разные: лента в «Направлениях», седьмой шаг в
   «Процессе», большая карточка внизу, окно и стеклянная плашка на первом
   ролике. Общее у всех — поля, три мессенджера (значки из шапки),
   «или позвоните» с номером и согласие с политикой. Разное — компоновка,
   размер, подача и слоган. Цвета — из палитры полосы, поэтому на тёмном
   кнопки белые, на светлом — тёмные. */

.form{display:grid; gap:var(--space-md)}
.form__fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-md);
}
.field{position:relative}
.field--wide{grid-column:1 / -1}
.field input{
  width:100%;
  min-height:56px;
  padding:1.5rem 0.9rem 0.5rem;
  font:inherit;
  font-size:var(--text-base);
  color:var(--ink);
  background:var(--surface);
  border:var(--rule-hair) solid var(--field);
  border-radius:var(--radius-md);
  appearance:none;
  transition:border-color var(--dur-short) var(--ease-out);
}
.field input:hover{border-color:var(--ink-3)}
.field input:focus{border-color:var(--accent-ink)}
.field label{
  position:absolute;
  left:0.95rem; top:1.05rem;
  font-size:var(--text-base);
  color:var(--ink-3);
  pointer-events:none;
  transition:transform var(--dur-short) var(--ease-out), font-size var(--dur-short) var(--ease-out);
  transform-origin:left top;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  transform:translateY(-.72rem) scale(.78);
}

.form__go{display:grid; gap:var(--space-md); justify-items:center; text-align:center}
.form__send-wrap{display:grid; gap:var(--space-sm); justify-items:center}
.form__call-wrap{display:grid; justify-items:center}
/* подписи — основным шрифтом, мелко и приглушённо: главное — кнопки и номер */
.form__send,
.form__call{
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-weight:400;
  color:var(--ink-2);
  text-wrap:balance;
}
.form__msgr{display:flex; justify-content:center; gap:var(--space-md)}
.msgr{
  --size:60px;
  position:relative;
  display:grid; place-items:center;
  width:var(--size); height:var(--size);
  flex:none;
  border-radius:50%;
  color:var(--display-ink);
  background:color-mix(in oklab, var(--display-ink) 7%, transparent);
  border:1.5px solid color-mix(in oklab, var(--display-ink) 58%, transparent);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  transition:background-color var(--dur-short) var(--ease-out),
             border-color var(--dur-short) var(--ease-out),
             box-shadow var(--dur-long) var(--ease-out),
             transform var(--dur-short) var(--ease-out);
}
.msgr svg{width:calc(var(--size) * .42); height:calc(var(--size) * .42)}
.msgr:hover,
.msgr:focus-visible{
  background:color-mix(in oklab, var(--display-ink) 15%, transparent);
  border-color:var(--display-ink);
  box-shadow:0 0 32px -6px color-mix(in oklab, var(--display-ink) 45%, transparent);
  transform:translateY(-2px);
}
.msgr__name{display:none}
.form__tel{
  padding-block:.1rem;
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--display-ink);
  white-space:nowrap;
  transition:color var(--dur-short) var(--ease-out);
}
.form__tel:hover{color:var(--accent-ink)}
.form__privacy{
  justify-self:center;
  max-width:46ch;
  text-align:center;
  font-size:var(--text-xs);
  line-height:1.5;
  color:var(--ink-3);
  text-wrap:balance;
}
.form__policy{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:color-mix(in oklab, currentColor 50%, transparent);
  transition:color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out);
}
.form__policy:hover{color:var(--accent-ink); text-decoration-color:currentColor}
.form__status{
  text-align:center;
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--accent-ink);
}
.form__status:empty{display:none}

/* ---------- 1. «Направления»: лента в двойной рамке ----------
   Самая широкая заявка. Заголовок по центру над ней, поля в один ряд,
   ниже в одну строку — мессенджеры слева, номер справа. Двойная тонкая
   рамка (обводка и вторая, внутренняя) — от ар-деко соседнего блока
   «Эксклюзивное направление». Углы почти прямые: это не карточка-плашка. */
.form--ribbon{
  position:relative;
  gap:var(--space-lg);
  padding:clamp(26px,3.4vw,48px) clamp(22px,3.6vw,56px);
  background:color-mix(in oklab, var(--surface-2) 70%, transparent);
  border:var(--rule-hair) solid color-mix(in oklab, var(--accent) 50%, transparent);
  border-radius:4px;
  outline:var(--rule-hair) solid color-mix(in oklab, var(--accent) 24%, transparent);
  outline-offset:-10px;
}
.form--ribbon .form__fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr)}
.form--ribbon .field--wide{grid-column:auto}
.form--ribbon .form__go{
  grid-template-columns:auto auto;
  justify-content:space-between;
  align-items:center;
  text-align:left;
  padding-top:var(--space-md);
  border-top:var(--rule-hair) solid var(--rule);
}
.form--ribbon .form__send-wrap{display:flex; align-items:center; gap:var(--space-lg)}
.form--ribbon .form__send{max-width:19ch}
.form--ribbon .msgr{--size:48px}
.form--ribbon .form__call-wrap{justify-items:end; text-align:right}

/* двойной класс: общее правило .ask-strip ниже по файлу задаёт две колонки */
.ask-strip.ask-strip--ribbon{grid-template-columns:1fr; justify-items:center; text-align:center}
.ask-strip--ribbon .ask-strip__say{display:flex; flex-direction:column; align-items:center}
.ask-strip--ribbon .eyebrow::after{
  content:""; width:clamp(22px,4vw,46px); height:var(--rule-hair); background:var(--rule-strong);
}
.ask-strip--ribbon .ask-strip__title{font-size:var(--text-3xl)}
.ask-strip--ribbon .form{width:100%; max-width:1080px; margin-top:var(--space-sm)}

/* ---------- 2. «Процесс»: седьмой шаг ----------
   Продолжает нумерацию этапов: крупная «07», подпись «Ваш шаг». Поля без
   рамок — только линия снизу, как строки в бланке; карточки нет. */
.ask-strip__no{
  display:block;
  margin-bottom:var(--space-xs);
  font-family:var(--font-display);
  font-size:clamp(4rem,2.6rem + 4vw,6.6rem);
  font-weight:600;
  line-height:.9;
  letter-spacing:-.03em;
  color:transparent;
  -webkit-text-stroke:1.2px var(--accent-ink);
}
.ask-strip--step .ask-strip__no + .eyebrow{margin-top:var(--space-md)}
.form--line{gap:var(--space-lg)}
.form--line .form__fields{gap:var(--space-sm) var(--space-xl)}
.form--line .field input{
  padding-inline:0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule-strong);
  border-radius:0;
}
.form--line .field input:focus{border-bottom-color:var(--accent-ink)}
.form--line .field label{left:0}
.form--line .form__go{
  grid-template-columns:auto auto;
  justify-content:start;
  align-items:end;
  gap:var(--space-xl) clamp(28px,4vw,64px);
  text-align:left;
}
.form--line .form__send-wrap,
.form--line .form__call-wrap{justify-items:start}
.form--line .msgr{--size:52px}
.form--line .form__msgr{justify-content:flex-start}
.form--line .form__privacy{justify-self:start; text-align:left}

/* ---------- 3. Нижняя заявка: главная карточка ----------
   Самая крупная: янтарное свечение по краю, мессенджеры крупнее и
   подписаны, номер — заголовочным кеглем. */
.form--hero{
  gap:var(--space-lg);
  padding:clamp(26px,3.6vw,54px);
  background:var(--surface-2);
  border:var(--rule-hair) solid color-mix(in oklab, var(--accent) 46%, transparent);
  border-radius:var(--radius-lg);
  box-shadow:
    var(--shadow-panel),
    0 40px 120px -60px color-mix(in oklab, var(--accent) 60%, transparent);
}
.form--hero .msgr{--size:68px; margin-bottom:1.6rem}
.form--hero .form__msgr{gap:var(--space-xl)}
.form--hero .msgr__name{
  display:block;
  position:absolute; top:calc(100% + .55rem); left:50%;
  transform:translateX(-50%);
  font-size:var(--text-xs);
  letter-spacing:.06em;
  color:var(--ink-2);
  white-space:nowrap;
}
.form--hero .form__tel{font-size:var(--text-2xl)}

/* ---------- 4. Окно-заявка ----------
   Окно и есть карточка, поэтому у формы своей нет. Всё по центру и в одну
   колонку — это единственная заявка, которую читают сверху вниз. */
.form--modal .form__fields{grid-template-columns:1fr}
.sheet__head--center{text-align:center}
.sheet__head--center .sheet__say{justify-self:center; display:flex; flex-direction:column; align-items:center}
.sheet__head--center .sheet__note{margin-inline:auto}

/* ---------- 5. Лид-магнит на первом ролике ----------
   Стекло поверх кадра: размытая подложка, светлая обводка, всё в одну
   компактную плашку — кадр не закрывается. Слоган набран заголовочным
   шрифтом прямо в плашке. */
.form--glass{
  max-width:640px;
  margin-top:clamp(18px,2.6vh,30px);
  gap:var(--space-sm) var(--space-md);
  padding:clamp(16px,2vw,24px) clamp(18px,2.2vw,28px);
  background:color-mix(in oklab, var(--surface) 38%, transparent);
  border:1px solid color-mix(in oklab, var(--display-ink) 24%, transparent);
  border-radius:22px;
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
          backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 30px 70px -40px color-mix(in oklab, var(--surface) 90%, transparent);
}
.form__hook{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:600;
  line-height:1.2;
  color:var(--display-ink);
  text-wrap:balance;
}
.form--glass .field input{
  min-height:48px;
  padding-top:1.25rem;
  background:color-mix(in oklab, var(--surface) 45%, transparent);
  border-color:color-mix(in oklab, var(--display-ink) 30%, transparent);
}
.form--glass .field label{top:.8rem}
.form--glass .field input:focus + label,
.form--glass .field input:not(:placeholder-shown) + label{transform:translateY(-.6rem) scale(.78)}
.form--glass .form__go{
  grid-template-columns:auto auto;
  justify-content:space-between;
  align-items:center;
  text-align:left;
}
.form--glass .form__send-wrap{display:flex; align-items:center; gap:var(--space-md)}
.form--glass .form__send{max-width:16ch; font-size:var(--text-xs); line-height:1.4}
.form--glass .msgr{--size:44px}
.form--glass .form__msgr{gap:var(--space-sm)}
.form--glass .form__call-wrap{justify-items:end; text-align:right}
.form--glass .form__call{font-size:var(--text-xs)}
.form--glass .form__tel{font-size:var(--text-lg)}
.form--glass .form__privacy{justify-self:start; text-align:left; max-width:none}

/* ============================ ФУТЕР ============================
   Ft5 «Заявление»: одна фраза держит полосу, контакты идут строкой под
   ней. Не карта сайта из четырёх колонок. */

/* position и isolation обязательны, как у полос: без них шов (::before)
   считался от начала страницы, а не от футера, и на стыке с заявкой
   цвет менялся за один пиксель. */
.footer{
  position:relative;
  isolation:isolate;
  background:var(--surface);
  color:var(--ink);
  padding-block:var(--space-4xl) var(--space-2xl);
}
.footer__mark{display:flex; color:var(--display-ink)}
.footer__logo{height:clamp(64px,7vw,92px)}
.footer__say{
  margin-top:var(--space-xl);
  max-width:22ch;
  font-family:var(--font-display);
  font-size:clamp(1.8rem,1rem + 3vw,3.4rem);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.012em;
  color:var(--display-ink);
  text-wrap:balance;
}
.footer__act{margin-top:var(--space-xl)}

.footer__meta{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-lg) var(--space-xl);
  margin-top:var(--space-4xl);
  padding-top:var(--space-xl);
  border-top:var(--rule-hair) solid var(--rule);
  font-size:var(--text-sm);
}
.footer__cell{display:flex; flex-direction:column; gap:var(--space-2xs)}

/* Никакого флекса на пунктах футера. Пункт копирайта — это текст с
   вложенным <span> для года, а флекс-контейнер делает из текстовых узлов
   и вложенного тега отдельные элементы и схлопывает пробелы между ними:
   в строке слипалось «©2026ИП Николаев». Высоту зоны нажатия даёт
   padding, а не min-height с выравниванием по центру. */
.footer__cell > a,
.footer__cell > span{
  display:block;
  padding-block:.28rem;
  color:var(--ink-2);
}
.footer__cell > a{
  white-space:nowrap;
  padding-block:.5rem;
  transition:color var(--dur-short) var(--ease-out);
}
.footer__cell > a:hover{color:var(--ink)}
/* телефон и почта копируются по нажатию: «Скопировано» появляется справа
   от текста и гаснет. Ширина по тексту, чтобы надпись встала вплотную. */
.footer__cell > a[data-copy]{position:relative; width:fit-content; cursor:copy}
.footer__cell > a[data-copy]::after{
  content:"Скопировано";
  position:absolute; left:calc(100% + .7rem); top:50%;
  transform:translateY(-50%);
  font-size:var(--text-xs);
  letter-spacing:.06em;
  color:var(--accent-ink);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-short) var(--ease-out);
}
.footer__cell > a[data-copy].is-copied::after{opacity:1}
/* ссылка без адреса — не ссылка: показываем как ожидающий пункт,
   а не как href="#", который читается как сломанный сайт */
.is-pending{color:var(--ink-3); cursor:default}
.footer__cell > .footer__fine{
  margin-top:var(--space-xs);
  font-size:var(--text-xs);
  line-height:1.5;
  color:var(--ink-3);
}

/* ============================ ЗНАЧКИ МЕССЕНДЖЕРОВ ============================
   Линейные, той же толщиной штриха, что и марка в панели: 1.4. Цвет —
   из палитры полосы, поэтому один набор работает и на кадре, и на бумаге.
   Наверху (панель, меню, окно галереи) значки ведут на страницы в
   соцсетях, внизу (футер, заявка) — в чат с владельцем. */
.soc{display:flex; align-items:center; gap:var(--space-xs)}
.soc__item{
  display:grid; place-items:center;
  width:34px; height:34px;
  flex:none;
  border-radius:var(--radius-pill);
  color:var(--ink-2);
  transition:color var(--dur-short) var(--ease-out),
             background-color var(--dur-short) var(--ease-out),
             box-shadow var(--dur-long) var(--ease-out);
}
.soc__item svg{width:19px; height:19px}
a.soc__item:hover{
  color:var(--accent);
  background:color-mix(in oklab, var(--accent) 10%, transparent);
  box-shadow:0 0 22px -6px color-mix(in oklab, var(--accent) 50%, transparent);
}
.soc--bar .soc__item{width:30px; height:30px}
.soc--bar .soc__item svg{width:17px; height:17px}

/* ============================ ОКНО С РАБОТАМИ ============================
   Одна галерея на весь сайт: сорок восемь кадров, сгруппированных по смыслу.
   Панель прокручивается сама (overscroll-behavior:contain), поэтому
   страница под ней не едет, когда сетка кончилась. */

.sheet{
  position:fixed; inset:0;
  z-index:var(--z-sheet);
  display:flex; justify-content:center;
  padding:clamp(12px,3vw,48px);
  background:color-mix(in oklab, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  opacity:0;
  transition:opacity var(--dur-short) var(--ease-out);
}
.sheet.is-open{opacity:1}

.sheet__panel{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(20px,3vw,40px);
  background:var(--surface);
  border:var(--rule-hair) solid var(--rule);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-panel);
}

.sheet__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:var(--space-md) var(--space-lg);
  align-items:start;
  padding-bottom:var(--space-lg);
  border-bottom:var(--rule-hair) solid var(--rule);
  margin-bottom:var(--space-xl);
}
.sheet__title{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.012em;
  color:var(--display-ink);
}
.sheet__note{
  margin-top:var(--space-sm);
  max-width:52ch;
  font-size:var(--text-sm);
  color:var(--ink-2);
  text-wrap:pretty;
}
.sheet__close{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  color:var(--ink);
  background:var(--surface-2);
  border:var(--rule-hair) solid var(--rule);
  transition:background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.sheet__close:hover{background:var(--surface-3); border-color:var(--rule-strong)}
.sheet__close svg{width:19px; height:19px}

.sheet__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-xl) var(--space-lg);
}
.tile{margin:0; display:flex; flex-direction:column}
.tile[hidden]{display:none !important}
.tile button{
  display:block; width:100%;
  overflow:hidden;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-photo);
  cursor:zoom-in;
  transition:box-shadow var(--dur-long) var(--ease-out);
}
  /* height:auto обязателен. Атрибуты width/height у <img> браузер
     отображает в CSS-свойства как презентационную подсказку, и заданная
     ими высота перебивает aspect-ratio: снимок вставал в высоту из
     разметки, а не в пропорцию из стилей. Замер: в сетке окна кадр
     1400×1045 давал 394 px, а 1045×1400 — 523 px при одинаковой ширине
     колонки. */
.tile img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform var(--dur-long) var(--ease-out);
}
.tile button:hover{
  box-shadow:
    var(--shadow-photo),
    0 0 0 var(--rule-hair) color-mix(in oklab, var(--accent) 52%, transparent),
    0 26px 70px -32px color-mix(in oklab, var(--accent) 62%, transparent);
}
.tile button:hover img{transform:scale(1.035)}
.tile figcaption{
  margin-top:var(--space-sm);
  font-size:var(--text-sm);
  color:var(--ink-3);
  text-wrap:pretty;
}

/* ---------- окно умной мебели ----------
   Шапка без значков соцсетей, над заголовком — золотая подпись, под ним
   название текущего вида. Столов четыре — сетка в две колонки, кадры
   крупные. Производство снято на телефон вертикально, поэтому там четыре
   колонки и вертикальный кадр 3:4: в горизонтальной рамке от каждого
   снимка осталась бы половина. Кадров четырнадцать, один из них
   двойной — пятнадцать ячеек: пять колонок на широком экране и три на
   планшете закрывают все ряды. */
.sheet__head--solo{grid-template-columns:minmax(0,1fr) auto}
.sheet__kicker{
  margin-bottom:var(--space-xs);
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent-ink);
}
.sheet__view-name{
  margin-top:var(--space-sm);
  font-size:var(--text-sm);
  letter-spacing:.04em;
  color:var(--ink-2);
}
.sheet__view{animation:sheet-view var(--dur-long) var(--ease-out)}
@keyframes sheet-view{
  from{opacity:0; transform:translateY(12px)}
}
.sheet__grid--pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.sheet__grid--tall{
  --cols:5;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  container-type:inline-size;
  /* широкий кадр не оставляет дыру, если не влез в конец ряда */
  grid-auto-flow:dense;
}
.sheet__grid--tall .tile img{aspect-ratio:3/4}
/* Единственный горизонтальный кадр занимает две колонки. Высота у него
   та же, что у вертикальных соседей 3:4, — считается от ширины одной
   колонки (cqw — ширина сетки). Растягивать его по высоте ряда нельзя:
   у соседей подпись в две строки, у него в одну, и низ кадра уехал бы. */
.sheet__grid--tall .tile--wide{grid-column:span 2}
.sheet__grid--tall .tile--wide button{
  position:relative;
  height:calc((100cqw - (var(--cols) - 1) * var(--space-lg)) / var(--cols) * 4 / 3);
}
.sheet__grid--tall .tile--wide img{
  position:absolute; inset:0;
  height:100%;
  aspect-ratio:auto;
}
/* ролик в сетке: заставка и знак воспроизведения в янтарном круге */
.tile--video button{position:relative}
.tile__play{
  position:absolute; left:50%; top:50%;
  width:3.4rem; height:3.4rem;
  margin:-1.7rem 0 0 -1.7rem;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--display-ink);
  background:color-mix(in oklab, var(--surface) 55%, transparent);
  border:var(--rule-hair) solid color-mix(in oklab, var(--accent) 70%, transparent);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  box-shadow:0 0 30px -6px color-mix(in oklab, var(--accent) 55%, transparent);
  transition:transform var(--dur-short) var(--ease-out), box-shadow var(--dur-long) var(--ease-out);
  pointer-events:none;
}
.tile__play svg{width:1.3rem; height:1.3rem; margin-left:2px}
.tile--video button:hover .tile__play{
  transform:scale(1.08);
  box-shadow:0 0 44px -4px color-mix(in oklab, var(--accent) 75%, transparent);
}
.tile--video button{cursor:pointer}
.sheet__foot{
  display:flex; justify-content:center;
  margin-top:var(--space-2xl);
  padding-top:var(--space-xl);
  border-top:var(--rule-hair) solid var(--rule);
}

/* ---------- окно «Описание» ----------
   Панель уже галереи: это текст, и строка не должна тянуться на весь экран.
   Модули — пронумерованный список в две колонки, номера золотом. */
.sheet__panel--read{max-width:1040px}
.about__intro{
  max-width:60ch;
  font-family:var(--font-display);
  font-size:var(--text-lg);
  line-height:1.45;
  color:var(--display-ink);
  text-wrap:pretty;
}
.about__part{margin-top:var(--space-2xl)}
.about__h{
  display:flex; align-items:center; gap:var(--space-sm);
  margin-bottom:var(--space-lg);
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent-ink);
}
.about__h::after{
  content:""; flex:1;
  height:var(--rule-hair);
  background:linear-gradient(to right, color-mix(in oklab, var(--accent) 50%, transparent), transparent);
}
.about__list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-xl) clamp(24px,4vw,56px);
}
.about__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-md);
  padding-top:var(--space-md);
  border-top:var(--rule-hair) solid var(--rule);
}
.about__n{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  line-height:1.2;
  color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.about__item h4{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:600;
  line-height:1.2;
  color:var(--display-ink);
}
.about__item p{
  margin-top:var(--space-xs);
  font-size:var(--text-sm);
  line-height:1.6;
  color:var(--ink-2);
  text-wrap:pretty;
}
.about__can{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-sm);
  max-width:70ch;
}
.about__can li{
  position:relative;
  padding-left:1.6rem;
  color:var(--ink);
  line-height:1.55;
}
.about__can li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:.55rem; height:.55rem;
  transform:rotate(45deg);
  border:var(--rule-hair) solid var(--accent);
}
.sheet__foot--lead{margin-top:var(--space-2xl)}

/* ---------- заявки по странице ----------
   Полоса-заявка в «Направлениях» и «Процессе»: слева — зачем, справа —
   короткая форма (имя, телефон, кнопка). Тонкая линия сверху отделяет
   её от содержания полосы: это действие, а не ещё одна карточка. */
.ask-strip{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--space-xl) clamp(32px,5vw,88px);
  align-items:center;
  margin-top:var(--space-3xl);
  padding-top:var(--space-2xl);
  border-top:var(--rule-hair) solid var(--rule);
}
.ask-strip__title{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.012em;
  color:var(--display-ink);
  text-wrap:balance;
}
.ask-strip__say p:not(.eyebrow){margin-top:var(--space-md); max-width:40ch; color:var(--ink-2); text-wrap:pretty}
.ask-strip .eyebrow{margin-bottom:var(--space-sm)}
/* Заявки по странице чередуются сторонами: «Направления» — текст слева,
   «Процесс» — справа, нижняя заявка — снова слева. Одинаковые блоки
   подряд читались бы как шаблон. */
.ask-strip--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ask-strip--flip .ask-strip__say{order:2}

/* кнопка заявки в шапке галереи */
.sheet__cta{margin-top:var(--space-md)}

/* окно-заявка: панель уже, как у формы на странице */
.sheet__panel--ask{max-width:640px}


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

.lb{
  position:fixed; inset:0;
  /* выше окна с работами: из окна снимок открывается крупно */
  z-index:var(--z-modal);
  display:grid; place-items:center;
  padding:clamp(20px,5vw,72px);
  background:color-mix(in oklab, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity var(--dur-short) var(--ease-out);
}
.lb.is-open{opacity:1}
.lb__stage{
  margin:0;
  display:flex; flex-direction:column; gap:var(--space-lg);
  align-items:center;
}
.lb__stage img,
.lb__stage video{
  max-width:100%;
  max-height:76dvh;
  width:auto;
  object-fit:contain;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-panel);
}
.lb__stage [hidden]{display:none}
.lb__stage video{background:var(--surface-2)}
.lb__stage figcaption{
  font-size:var(--text-sm);
  color:var(--ink-2);
  text-align:center;
  max-width:52ch;
}
.lb__close,.lb__nav{
  position:absolute;
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:50%;
  color:var(--ink);
  background:var(--surface-2);
  border:var(--rule-hair) solid var(--rule);
  transition:background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.lb__close:hover,.lb__nav:hover{background:var(--surface-3); border-color:var(--rule-strong)}
.lb__close{top:clamp(16px,3vw,32px); right:clamp(16px,3vw,32px)}
.lb__close svg,.lb__nav svg{width:19px; height:19px}
.lb__nav{top:50%; margin-top:-24px}
.lb__nav--prev{left:clamp(12px,2.5vw,32px)}
.lb__nav--next{right:clamp(12px,2.5vw,32px)}

/* ============================ ПОЯВЛЕНИЕ ============================
   Один поставленный вход на полосу, а не одинаковый фейд на каждом
   элементе страницы. Внутри полосы лесенку держит --i. */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 820ms var(--ease-out), transform 820ms var(--ease-out);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.reveal.is-in{opacity:1; transform:none}

/* ============================ СТРАНИЦА ДОКУМЕНТА ============================
   policy/index.html — длинный юридический текст. Своя простая раскладка:
   узкая колонка для чтения, марка и «На главную» сверху, без роликов и
   панели главной. Палитра — paper (body[data-mode]). */

.doc-page{min-height:100svh; display:flex; flex-direction:column}
.doc-bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
  padding:clamp(14px,2vh,26px) var(--gut);
  border-bottom:var(--rule-hair) solid var(--rule);
}
.doc-bar__back{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px;
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-2);
  transition:color var(--dur-short) var(--ease-out);
}
.doc-bar__back svg{width:15px; height:15px; transition:transform var(--dur-short) var(--ease-out)}
.doc-bar__back:hover{color:var(--accent-ink)}
.doc-bar__back:hover svg{transform:translateX(-3px)}

.doc{flex:1; padding:var(--space-3xl) var(--gut) var(--space-4xl)}
.doc__shell{max-width:72ch; margin-inline:auto}
.doc__title{
  margin-top:var(--space-sm);
  font-family:var(--font-display);
  font-size:clamp(2rem,1.3rem + 3vw,3.4rem);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--display-ink);
}
.doc__toc{
  margin-top:var(--space-xl);
  padding:var(--space-md) var(--space-lg);
  border:var(--rule-hair) solid var(--rule);
  border-radius:var(--radius-md);
  background:var(--surface-2);
}
/* номера вписаны в пункты: общий сброс снимает маркеры списков */
.doc__toc ol{margin:0; padding:0; list-style:none; columns:2 18rem; column-gap:var(--space-xl)}
.doc__toc li{padding-block:.15rem; padding-left:1.7em; text-indent:-1.7em; break-inside:avoid; line-height:1.45; font-size:var(--text-sm)}
.doc__toc .doc__num{display:inline-block; min-width:1.7em; text-indent:0; font-weight:500}
.doc__toc a{color:var(--ink-2); font-size:var(--text-sm)}
.doc__toc a:hover{color:var(--accent-ink)}

.doc__text{margin-top:var(--space-2xl); color:var(--ink)}
.doc__text h2{
  margin-top:var(--space-2xl);
  margin-bottom:var(--space-sm);
  scroll-margin-top:var(--space-lg);
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:600;
  line-height:1.25;
  color:var(--display-ink);
}
.doc__text h2:first-child{margin-top:0}
.doc__text p,.doc__text li{text-wrap:pretty}
.doc__text p{margin-block:.65em}
/* общий сброс снимает маркеры списков — тире ставим сами, как в docx */
.doc__text ul{margin:.4em 0 .9em; padding-left:1.4em; list-style:none}
.doc__text li{position:relative; margin-block:.35em}
.doc__text li::before{content:"—"; position:absolute; left:-1.4em; color:var(--ink-3)}
.doc__num{font-variant-numeric:tabular-nums; font-weight:600; color:var(--accent-ink)}
.doc__text a{
  color:var(--accent-ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  overflow-wrap:anywhere;
}
.doc__table{
  margin:var(--space-md) 0;
  border-top:var(--rule-hair) solid var(--rule);
}
.doc__table > div{
  display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:var(--space-md);
  padding-block:var(--space-sm);
  border-bottom:var(--rule-hair) solid var(--rule);
}
.doc__table dt{font-weight:600; color:var(--ink-2)}
.doc__table dd{margin:0}

.doc-foot{
  display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-xl);
  padding:var(--space-lg) var(--gut);
  border-top:var(--rule-hair) solid var(--rule);
  font-size:var(--text-sm);
  color:var(--ink-3);
}
.doc-foot a{color:var(--ink-2)}
.doc-foot a:hover{color:var(--accent-ink)}

@media (max-width:620px){
  .doc__table > div{grid-template-columns:1fr; gap:var(--space-2xs)}
  .doc-bar .brand__logo{height:76px; margin-block:-16px}
}

/* ============================ АДАПТИВ ============================ */

@media (max-width:1180px){
  .rail{display:none}

  /* Замер: марка + пилюля из пяти разделов + номер + кнопка просят
     ~1070 px. Ниже этой ширины первым уходит номер — он продублирован
     в меню и в футере, а пилюля и кнопка не дублируются нигде. */
  .topbar__tel{display:none}
  .manifest{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .craft{grid-template-columns:minmax(0,6fr) minmax(0,4fr)}
  .tally{grid-template-columns:1fr; gap:var(--space-2xl)}
  .step{grid-template-columns:minmax(0,64px) minmax(0,5fr) minmax(0,6fr)}
}

/* Разрядка сделала строку разделов шире пилюли, которая была раньше:
   замер даёт 949 px при экране 961 — двенадцать пикселей воздуха, то есть
   впритык. Поэтому строка уходит в полноэкранное меню раньше самой
   вёрстки, отдельным порогом, а не вместе с сеткой секций.
   С крупным логотипом и шестым разделом «Наши работы» строке нужно
   1214 px — порог поднят до 1220. */
@media (max-width:1220px){
  .topbar__nav{display:none}
  .topbar__cta{display:none}
  .burger{display:grid}
  /* без строки разделов колонки не нужны: марка слева, блок справа */
  .topbar{display:flex}
  .topbar__end{margin-left:auto}
}

@media (max-width:960px){
  :root{--space-4xl:6.5rem; --space-3xl:4.5rem}

  /* срез и плиту уводим за край и гасим: на планшете колонка текста
     разворачивается во всю ширину и наезжает на них */
  .band__ring{opacity:.5}
  .torch{
    right:calc(var(--gut) * -3);
    width:min(60vw,330px);
    height:min(90vw,495px);
  }
  .torch__slab{opacity:.5}
  .band--manifest .band__ring{width:min(62vw,420px); right:-18vw}
  .band--tally .band__ring{width:min(58vw,400px); left:-22vw}
  .band--faq .band__ring{width:min(54vw,360px); height:min(62vw,420px); right:-16vw}

  .manifest{grid-template-columns:1fr; gap:var(--space-xl)}

  .craft{grid-template-columns:1fr; gap:var(--space-xl)}
  .craft__shot{margin-top:0; max-width:460px}
  .craft__shot img{aspect-ratio:4/3}

  .figures{grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:var(--space-3xl)}

  .lede .display{max-width:18ch}

  .cards{gap:var(--space-xl) var(--space-lg)}
  .card--w7,.card--w5{grid-column:span 12}
  .card--w4{grid-column:span 6}

  .styles__grid{grid-template-columns:1fr; gap:var(--space-xl)}
  .tally__grid{gap:var(--space-lg) var(--space-xl)}

  .step{grid-template-columns:minmax(0,56px) minmax(0,1fr); gap:var(--space-sm) var(--space-md)}
  .step p{grid-column:2}


  .sheet__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sheet__grid--tall{--cols:3; grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
  .exclusive{margin-top:var(--space-3xl)}
  .sheet__head{grid-template-columns:minmax(0,1fr) auto}
  .sheet__head .soc{grid-column:1 / -1; order:3}

  .spec__row{grid-template-columns:1fr; gap:var(--space-2xs)}

  .faq{grid-template-columns:1fr; gap:var(--space-xl)}
  .faq__say{position:static}

  .ask{grid-template-columns:1fr; gap:var(--space-xl)}

  .footer__meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ask-strip,.ask-strip--flip{grid-template-columns:1fr}
  /* в одну колонку текст всегда над формой */
  .ask-strip--flip .ask-strip__say{order:0}
  .footer__say{max-width:none}
}

@media (max-width:620px){
  :root{--gut:20px; --space-4xl:5rem; --space-3xl:3.5rem; --space-2xl:3rem}

  .topbar{top:8px}
  .brand__logo{height:76px; margin-block:-16px}
  /* Замер: с тремя значками панели нужно 351 px при экране 320 — не
     влезает. На телефоне они живут в полноэкранном меню и в футере. */
  .soc--bar{display:none}
  /* «Наши работы» и бургер на узком экране: замер на 320 px — с полным
     овалом бургер уходил за край на ~25 px. Поджаты разрядка, поля и
     промежутки; ниже 360 px ещё и логотип. */
  .topbar__end{gap:10px}
  .topbar__works{min-height:36px; padding:0 .8rem; letter-spacing:.05em}

  .cards{grid-template-columns:1fr}
  .card--w4,.card--w5,.card--w7{grid-column:span 1}
  .card__shot img,.card__shot--sq img{aspect-ratio:4/3}

  .tally__grid{grid-template-columns:1fr}


  /* на телефоне срез уходит почти целиком за край: колонка текста здесь
     во всю ширину, и кольца проходили бы прямо по строкам */
  .band__ring{opacity:.32}
  .band--manifest .band__ring{right:-34vw; width:min(74vw,320px)}
  .torch{right:-48vw; width:min(76vw,300px); height:min(114vw,450px)}
  .torch__slab{opacity:.42}
  .band--tally .band__ring{left:-36vw; width:min(76vw,330px)}
  .band--faq .band__ring{right:-30vw; width:min(66vw,290px); bottom:-16%}

  .sheet__grid{grid-template-columns:1fr}
  .sheet__grid--tall{--cols:2; grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
  .sheet__grid--tall .tile--wide{grid-column:auto}
  .exclusive{margin-top:var(--space-2xl)}
  .exclusive__shots{gap:var(--space-sm); margin-top:var(--space-xl)}
  /* подпись над заголовком — в одну строку: разрядка и линии короче */
  .exclusive__eyebrow{gap:var(--space-sm); letter-spacing:.2em}
  .about__list{grid-template-columns:1fr}
  .lead{flex-direction:column; text-align:center}
  .lead--band{margin-top:var(--space-2xl); padding-top:var(--space-xl)}
  .exclusive__eyebrow::before,.exclusive__eyebrow::after{width:18px}
  .sheet__panel{padding:var(--space-lg) var(--space-md)}

  .form__fields,
  .form--ribbon .form__fields{grid-template-columns:1fr}
  .form--ribbon .form__go,
  .form--line .form__go{grid-template-columns:1fr; justify-items:center; text-align:center}
  .form--ribbon .form__send-wrap{flex-direction:column; gap:var(--space-sm)}
  .form--ribbon .form__send{max-width:none}
  .form--ribbon .form__call-wrap,
  .form--line .form__send-wrap,
  .form--line .form__call-wrap{justify-items:center; text-align:center}
  .form--line .form__msgr{justify-content:center}
  .form--line .form__privacy{justify-self:center; text-align:center}
  .form--hero{padding:var(--space-lg)}
  .form--hero .msgr{--size:60px}
  .form--hero .form__msgr{gap:var(--space-lg)}
  /* на ролике плашка компактнее: имя и телефон в ряд, остальное столбиком */
  .form--glass .form__fields{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm)}
  .form--glass .form__go{grid-template-columns:1fr; justify-items:start; gap:var(--space-sm)}
  .form--glass .form__call-wrap{justify-items:start; text-align:left; display:flex; align-items:baseline; gap:var(--space-sm)}
  .form--glass .form__send{max-width:12ch}
  .footer__meta{grid-template-columns:1fr; gap:var(--space-lg)}
  .footer__cell > a{padding-block:.75rem}

  .reel__cap{--cap-top:84px; bottom:clamp(96px,15vh,150px)}
  .reel__lead{font-size:var(--text-base); max-width:32ch}

  /* на телефоне стрелки уводим под кадр — по бокам они наезжают на фото */
  .lb{padding:14px}
  .lb__stage img{max-height:62dvh}
  .lb__nav{width:46px; height:46px; top:auto; bottom:clamp(16px,5vw,32px); margin-top:0}
  .lb__nav--prev{left:calc(50% - 58px)}
  .lb__nav--next{right:calc(50% - 58px)}
}

/* ============================ ДОСТУПНОСТЬ ============================ */

/* Невысокий экран телефона: видимая высота с открытой адресной строкой
   бывает 560–700 px, а подпись первого ролика с формой записи на замер
   просила ~620 px. Ужимаем её, чтобы целиком вставала между панелью и
   подсказкой «Листайте»: мельче заголовок и текст, надпись у мессенджеров
   в две строки вместо пяти, плотнее форма. Ниже 640 px уходит поясняющая
   строка под заголовком — заголовок и форма важнее. Узкие телефоны
   (до 380 px) ужимаем при любой высоте: там текст переносится чаще. */
@media (max-width:620px) and (max-height:760px), (max-width:380px){
  /* низ — над подсказкой «Листайте» (она занимает нижние ~85 px) */
  .reel__cap{bottom:clamp(96px,14vh,110px)}
  .reel__title{font-size:clamp(1.75rem,7.4vw,2.15rem)}
  .reel__kicker{margin-bottom:10px}
  .reel__lead{margin-top:10px; font-size:var(--text-sm); line-height:1.45}
  .reel__actions{margin-top:18px}
  .form--glass{margin-top:12px; padding:12px 14px; gap:10px}
  .form--glass .form__hook{font-size:var(--text-md); line-height:1.15}
  .form--glass .field input{min-height:44px}
  .form--glass .form__send{max-width:none; flex:1}
  .form--glass .form__send-wrap{gap:var(--space-sm)}
  .form--glass .msgr{--size:40px}
  .form--glass .form__go{gap:8px}
  .form--glass .form__privacy{font-size:11px; line-height:1.35}
}
@media (max-width:620px) and (max-height:640px), (max-width:340px) and (max-height:700px){
  .reel__cap .reel__lead{display:none}
}
/* совсем низкий экран (старые телефоны в 320 px, видимая высота ~600 и
   меньше): подсказка «Листайте» уступает место форме — иначе низ формы
   ложится на неё */
@media (max-width:620px) and (max-height:620px){
  .reel__hint{display:none}
  .reel__cap{bottom:20px}
}

@media (max-width:360px){
  .brand__logo{height:62px; margin-block:-10px}
  .topbar{gap:10px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lead__say{animation:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:150ms !important;
  }
  .reveal{opacity:1; transform:none; transition:none}
  /* ролики не запускаем вовсе — остаётся обычный герой */
  .reel{display:none !important}
  html.has-reels .hero{display:flex}
}

@media print{
  .topbar,.rail,.menu,.lb,.sheet,.reel,.grain,.skip,.band__ring,.band__field,.torch{display:none !important}
  html.has-reels .hero{display:flex}
  body{background:#fff; color:#000}
  .band{padding-block:2rem}
}