/* ============================================================
   BLACK DUCK — главная страница. Новая архитектура.
   Figma: страница «Блекдак для Ани», узел 6735:367, эталон 1440px.

   Здесь НЕТ глобального масштабирования: страница не увеличивается
   и не уменьшается целиком. На 1440 геометрия совпадает с макетом,
   на других ширинах компоненты перестраиваются.
   ============================================================ */

/* ---------- 1. ТОКЕНЫ ---------- */
:root{
  /* кадр Figma (эталон 1440) и контейнер содержимого: 1440 - 60 - 60 = 1320 */
  --frame-max: 1440px;
  /* Горизонтальная единица кадра — см. CQ() в figma/gen_flow.py.
     Ниже 1440 это настоящая контейнерная единица (вёрстка текучая),
     выше 1440 — сотая доля кадра: там масштабирует zoom корня, а WebKit
     домножает cqw на этот же zoom и всё растягивает по горизонтали. */
  --cq: 1cqw;
  /* Единица «процент ширины окна» С ПОЛОМ. Главная написана на vw: кегли,
     ширины колонок, отступы. body{min-width} их не держит — vw считается от
     ОКНА, а не от страницы, поэтому при зуме страница оставалась шириной
     1440, а кегли и колонки продолжали ужиматься за окном: подписи метрик
     переносились по одному слову, и всё это ещё и ехало вбок (снимок
     заказчика 14.09). Ниже 1440 единица замирает на макетном значении. */
  --vw1: max(1vw, 14.4px);
  --content-max: 1320px;
  --page-gutter: clamp(20px, calc(4.1667 * var(--vw1)), 60px);

  /* шапка: 10 (padding-top) + 39 (высота кнопок/меню) + 10 (padding-bottom) = 59 */
  --header-height: 59px;
  /* вертикальный отступ между секциями главной (showreel/services/portfolio/diff) */
  --section-space: 101.6px;
  /* зазор мозаики hero (3 колонки по 202 с зазором 12 = 630) */
  --grid-gap: 12px;
  /* зазор между карточками (карусель услуг .services__track) */
  --card-gap: 12px;
  /* гуттер мобильной раскладки (переходный режим 1024–1440, макета <1024 нет) */
  --mobile-gutter: 20px;

  /* цвета — из макета */
  --c-black:  #000000;
  --c-ink:    #0D1E1D;
  --c-white:  #FFFFFF;
  --c-paper:  #FBFCFC;
  --c-sand:   #E7E3D5;
  --c-yellow: #F8D613;
  --c-lime:   #8DC73E;
  --c-coal:   #1C1C1A;

  /* скругления — из макета */
  --r-sm: 10px;
  --r-pill: 20px;
  --r-lg: 40px;

  /* шрифты */
  --f-sans: Inter, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Cormorant Infant', Cormorant, Georgia, serif;
  /* В макете два разных семейства: Cormorant Infant и обычный Cormorant.
     Второй нужен отдельно — у него старостильные цифры с выносами,
     подмена Infant'ом сразу видна (замечание 11.09 по цифрам шагов). */
  --f-serif-c: Cormorant, 'Cormorant Infant', Georgia, serif;

  /* типографика: на 1440 равна макету, ниже — плавно уменьшается */
  --fs-display: clamp(30px, calc(3.403 * var(--vw1)), 49px);   /* 49 на 1440 */
  --fs-display-serif: clamp(38px, calc(4.444 * var(--vw1)), 64px);
  --fs-h2:      clamp(28px, calc(3.056 * var(--vw1)), 44px);
  --fs-h3:      clamp(20px, calc(1.736 * var(--vw1)), 25px);
  --fs-body-lg: clamp(13px, calc(1.042 * var(--vw1)), 15px);
  --fs-body:    12px;
  --fs-nav:     10px;
  --fs-label:   11px;

  /* вертикальный ритм */
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 24px;
  --sp-lg: 48px;
  --sp-xl: 80px;
}

/* Выше 1440 кадр ровно --frame-max, и всё масштабирование делает zoom корня.
   Контейнерная единица там не только не нужна, но и вредна: WebKit домножает
   её на тот же zoom и растягивает вёрстку по горизонтали.
   Сотая доля кадра даёт одно и то же в обоих движках.
   Правило живёт здесь, а не в pages.css — тот перегенерируется компилятором. */
html.is-wide{--cq:calc(var(--frame-max) / 100)}

/* Пол по ширине: ниже него страница не сжимается, появляется горизонтальная
   прокрутка. Причина — в самой архитектуре: ниже 1440 горизонталь текучая
   (доли кадра), а ВЕРТИКАЛЬ задана в px. Пока сжатие невелико, это незаметно,
   но ещё в фазе 1 (08.09) было замерено, что ниже 1036.8 px начинаются
   наезды: текст съёживается, а высоты, кружки и отступы остаются макетными.
   Зум браузера уменьшает CSS-ширину окна и загоняет страницу ровно туда —
   отсюда «всё корявое при масштабировании» (жалоба 14.09).

   Порог = 1440, ровно эталон макета. Любое сжатие ниже 1440 идёт ТОЛЬКО по
   горизонтали (высоты, отступы и кружки остаются макетными), и расхождение
   растёт: 11% на 1280, 29% на 1024. Крупным цифрам метрик хватает и 11% —
   они налезают друг на друга (снимок заказчика 14.09). Поэтому не сжимаем
   вовсе: при зуме страница просто прокручивается вбок и остаётся точно
   такой, как в макете. Настоящее лечение узких ширин — отдельный макет,
   он по директиве 08.09 ждёт дизайнера.
   Прокрутка вбок честнее искажения: композиция остаётся макетной, человек
   просто двигает страницу. Настоящее лечение — отдельный узкий макет,
   он по директиве ждёт дизайнера. */
body{min-width:1440px}

/* ---------- 2. СБРОС ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--c-black);
  color:var(--c-white);
  font-family:var(--f-sans);
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* overflow-x:hidden убран 14.09: он резал прокрутку вбок, и ниже порога
     min-width страница просто обрезалась — уехавшее было не достать.
     Страховка тут и не нужна: отсутствие переполнения в 1280..2560 проверяет
     кросс-браузерный харнесс на каждом прогоне. */
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}

/* ---------- 3. КОНТЕЙНЕР ---------- */
/* Модель A: содержимое внутри общей сетки 1320. */
.container{
  width:min(calc(100% - var(--page-gutter) * 2), var(--content-max));
  margin-inline:auto;
}
/* Модель B: фон во всю ширину окна, содержимое внутри контейнера. */
/* flow-root обязателен: у первого потомка секции стоит отрицательный
   margin-top (обрезка верхнего выноса), и без нового контекста форматирования
   он схлопывался наружу — секции наезжали друг на друга на 4px. */
.section{position:relative;width:100%;display:flow-root}
/* Модель C: композиция намеренно выходит за границы секции. */
.section--clip{overflow:hidden}

/* ---------- 4. ОБРЕЗКА ВЕРХНЕГО ВЫНОСА ----------
   Figma меряет текстовую рамку по верху ЗАГЛАВНЫХ букв (leadingTrim=CAP_HEIGHT),
   браузер — по верху строки. Разница = половина интерлиньяжа плюс расстояние
   от верха выносного элемента до верха заглавной.

   Константа --cap-gap ЗАВИСИТ ОТ ГАРНИТУРЫ и ставится на конкретный элемент,
   а не глобально: для Inter это 0.2418em (ascender 0.9688 − capHeight 0.7270).
   У другой гарнитуры будет другое число — проверять по метрикам шрифта,
   а не переносить это значение вслепую. */
.cap{margin-top:calc(-1em * (var(--cap-gap,0) + (var(--lh,1) - 1) / 2))}
.cap--inter{--cap-gap:0.2418}

/* ---------- 5. ДОСТУПНОСТЬ ---------- */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--c-yellow);
  outline-offset:3px;
  border-radius:4px;
}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap
}

/* ============================================================
   5. ЛЕНТЫ (TYPE A — горизонтальная, TYPE B — вертикальная)

   Движение — только transform, без JS. Зазор лежит НА ЭЛЕМЕНТЕ, а не на
   дорожке: тогда дорожка состоит ровно из двух одинаковых наборов, и сдвиг
   на -50% — это ровно один набор. Цикл бесшовный при любой ширине окна,
   и resize его не сбрасывает: дистанция задана в процентах, а не в пикселях.
   Длительность считается от скорости в px/сек на эталоне 1440 — все ленты
   едут визуально согласованно.
   ============================================================ */
.marq{position:relative;overflow:hidden}
.marq__track{display:flex;width:max-content;will-change:transform}
.marq__set{display:flex;flex:0 0 auto}
.marq__set>*{flex:0 0 auto}

/* горизонтальная */
.marq--x .marq__track{flex-direction:row;animation:marq-x var(--dur) linear infinite}
.marq--x .marq__set{flex-direction:row;align-items:center}
.marq--x .marq__set>*{margin-right:var(--gap)}
.marq--x[data-dir="right"] .marq__track{animation-direction:reverse}
@keyframes marq-x{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* края растворяются: жёсткой линии обрезания быть не должно */
/* Растворение краёв у горизонтальных лент НЕ добавляем: на страницах услуг
   оно нарисовано в самом макете отдельными прямоугольниками (например
   6735:1857/1858) и выводится как обычные блоки. Наша маска давала второе,
   лишнее размытие. */

/* вертикальная */
.marq--y{height:100%}
.marq--y .marq__track{flex-direction:column;width:100%;
  /* задержка отрицательная: лента стартует не с нуля, а с той фазы,
     на которой композиция совпадает с макетом */
  animation:marq-y var(--dur) linear var(--delay,0s) infinite}
.marq--y .marq__set{flex-direction:column;width:100%}
.marq--y .marq__set>*{margin-bottom:var(--gap)}
.marq--y[data-dir="down"] .marq__track{animation-direction:reverse}
@keyframes marq-y{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-50%,0)}
}
/* Затухание по краям — только там, где оно есть в макете. У мозаики HERO
   его нет: плитки обрезаются кадром, а затемняют их два градиента из макета. */
.marq--y.marq--fade{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}

@media (prefers-reduced-motion:reduce){
  .marq__track{animation:none !important}
}

/* ============================================================
   6. ШАПКА
   ============================================================ */
.topbar{position:fixed;top:0;left:0;right:0;min-width:1440px;z-index:60;   /* fixed меряется от ОКНА, а не от body: без пола шапка ужималась ниже 1440, пока страница держала 1440 */color:var(--c-white);background:transparent;
  transition:transform .25s ease}
/* «Стекло» при прокрутке — тот же вид, что был принят раньше: полупрозрачная
   чёрная полоса в высоту шапки с размытием, страница сквозь неё просвечивает.
   Вынесено отдельным слоем, чтобы плавно проявляться: вверху страницы подложки
   нет ни на одной странице (в макете затемнение рисует сам кадр). */
.topbar::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-color:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
  opacity:1;transition:opacity .3s ease}
.topbar.is-top::before{opacity:0}
.topbar.is-light{color:var(--c-black)}
.topbar.is-hidden{transform:translateY(-100%)}
.topbar.is-light .nav__logo img,.topbar.is-light .nav__chev{filter:invert(1)}
.topbar.is-light .btn--ghost{color:var(--c-black)}
.qa-freeze .topbar{position:absolute}   /* для съёмки сверки: шапка в потоке страницы */
/* высота шапки = токен --header-height (59px = 10 + 39 + 10): паддинги считаются
   от токена, min-height кнопок/меню (39px) — независимая величина макета */
.nav{position:relative;z-index:20;padding-top:calc((var(--header-height) - 39px) / 2);padding-bottom:calc((var(--header-height) - 39px) / 2)}
.nav__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  min-height:39px;
}
.nav__logo{justify-self:start;display:block}
.nav__logo img{width:174px;height:18px}
.nav__menu{
  justify-self:center;margin-left:4px;   /* в макете центр меню на 722, а не 720 */
  display:flex;align-items:center;gap:25px;
  font-size:var(--fs-nav);font-weight:400;
}
.nav__link{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer}
.nav__chev{width:7px;height:4px}
.nav__actions{justify-self:end;display:flex;align-items:center;gap:9px}
.nav__actions .btn{padding:0}
.nav__actions .btn--yellow{width:91px}
.nav__actions .btn--ghost{width:69px}

/* кнопки */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:39px;padding-inline:14px;border-radius:var(--r-pill);
  font-size:var(--fs-body);line-height:1;white-space:nowrap;cursor:pointer;
  transition:opacity .18s ease, background-color .18s ease;
}
.btn:hover{opacity:.88}
.btn--yellow{background:var(--c-yellow);color:var(--c-black);font-weight:600}
.btn--ghost{border:1px solid currentColor;color:var(--c-white);font-weight:500}
.btn--dark{background:var(--c-black);color:var(--c-white);font-weight:600}
.btn--outline{border:1px solid var(--c-black);color:var(--c-black);background:transparent;font-weight:700}


/* ---------- утка на первом экране (главная) ----------
   Сцена собрана из ТРЁХ коротких дублей по 2.4 с: дышит, моргает, дышит,
   смотрит в сторону. Короткие дубли — принципиально: на восьмисекундных
   модель теряла анатомию (лапы размножались с 40-го кадра), на двух с
   половиной держит идеально — 216 кадров подряд с двумя чистыми лапами.

   20 кадров в секунду: на экране 60 Гц это ровно три кадра развёртки на
   каждый, выдержка идеально ровная. Для спокойного дыхания этого хватает.

   Уход вправо — сдвигом с растворением, а не шагом: модель проход не
   отрабатывает (в дубле с уходом смещение вышло ровно 0 px), а у стоящей
   утки нет цикла шага, поэтому «поехавшая» вбок фигура выглядела бы
   скользящей. Вся история разбора — в qa/PHASE2-ARCH.md.

   Место — просвет между заголовком и мозаикой: слева утка перекрывала текст. */
/* Утка идёт по первому экрану: выходит из-за левого края и прячется за правым.

   Проезд задаётся не «на глаз», а скоростью походки из самого клипа. Скорость
   померена оптическим потоком по нижней полосе кадра (утка шагает на месте,
   поэтому опорная подошва уезжает назад ровно со скоростью корпуса):
   11.09 px на кадр при высоте кадра 967, разброс по кадрам 9..13. За петлю в
   69 кадров это 765 px, то есть 0.791 высоты кадра за 2.277 с.

   Отсюда скорость 0.347 высоты в секунду, и длительность проезда считает JS
   под ширину окна — иначе на широком мониторе нога поедет по полу.
   Проценты и vw тут не годятся: выше 1440 у корня свой zoom, а transform
   задаётся в неотмасштабированных px — смешивать системы нельзя. */
.duck-scene{position:absolute;left:0;bottom:0;z-index:20;pointer-events:none;
  transform:translate3d(-110%,0,0);
  animation:duck-cross var(--ход,12s) linear forwards}
/* Утка мельче: 380 против 520. Две причины сразу. Файл 560 px высотой — при
   показе в 520 браузер почти не уменьшал, и всё дрожание генерации шло на
   экран как есть; при 380 он уменьшает в 1.5 раза, а уменьшение усредняет
   некоррелированный шум (замер: 24.2% при 880, 16.3% при 440). И на ретине
   380 CSS-px = 760 точек против 560 в файле — запас, а не растяжение. */
.duck-scene__fig{display:block;width:auto;height:min(34vh,380px)}
@keyframes duck-cross{
  from{transform:translate3d(-110%,0,0)}
  to  {transform:translate3d(var(--конец,1600px),0,0)}
}
/* --f объявлен типизированным: браузер знает, что это число, и обязан
   перерисовать градиент при каждой смене. Без объявления это просто строка,
   и перерисовка остаётся на усмотрение движка. Страховка на чужие сборки
   Safari: у коллеги заливка не шла именно в Safari на внешнем мониторе,
   хотя на такой же связке здесь считается и рисуется верно (замер 14.09). */
@property --f{syntax:'<number>';inherits:true;initial-value:0}

/* Кружок шага: кольцо рисует ВЕКТОР, вложенный скриптом.

   Рамку бокса гасим — ниже 1440 бокс сжимается по ширине при макетной высоте,
   и рамка становится вертикальным овалом. Вектор растянут по боксу, но обводка
   не масштабируется (vector-effect), поэтому кольцо круглое на любой ширине.

   Ни маски, ни clip-path в CSS: обе уже подводили в этом проекте на чужих
   сборках, а цена отказа — кружки исчезают целиком. */
.gf-step{position:relative;z-index:3;border-color:transparent !important}
/* .gf-ring: кольцо шагов рисует js/main.js обычными блоками (inline-стили), 16.09.
   SVG-вариант убран — под zoom корня в Safari 18 обрез не применялся. */
/* Линия рельса тоже поверх статики из макета. */
.gf-step ~ .gf-line, .gf-line.gf-rail{position:relative;z-index:2}

@media (prefers-reduced-motion:reduce){ .duck-scene{display:none} }

/* ============================================================
   7. HERO (Figma 6735:414, эталон 1440x723)
   Модель C: мозаика намеренно выходит за границы секции сверху и снизу,
   секция её обрезает. Absolute здесь только у мозаики и у затемнений —
   это часть композиции, а не способ разложить страницу.
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  background:var(--c-black);
  /* макет 723; на высоком окне первый экран тянется до низа окна, чтобы под ним
     не выглядывала светлая секция (замечание заказчика). Содержимое остаётся
     на своих отступах от верха, мозаика и затемнения продолжаются вниз.
     Шире 1920 (js/main.js, §50): документ масштабируется, 100svh считается от
     немасштабированного окна и hero становится выше видимой области — тогда
     JS выставляет --hero-min = высота окна / масштаб, и она используется
     вместо svh. Без масштаба переменная не задаётся → работает 100svh.
     ВАЖНО: пол 723px применяется ТОЛЬКО к запасному 100svh — если его
     применить и к --hero-min, при масштабе k>1.49 (окно шире ~2870px)
     723px (незумленных) после масштабирования снова превышают высоту
     окна — повторяется дефект 133% (проверено 10.09, 3840: 1446px вместо
     1080). --hero-min уже сам по себе точно равен высоте окна/масштаб —
     пол ему не нужен. */
  min-height:var(--hero-min, max(723px, 100svh));
}
.hero__inner{position:relative;z-index:10}
.hero__content{padding-top:calc(clamp(80px, calc(15.514 * var(--vw1)), 223.4px) + 49px);padding-bottom:64px}   /* +49: шапка вынесена из потока */
.hero__title{
  --lh:1.2857;
  max-width:444px;
  font-weight:400;font-size:var(--fs-display);
  /* Интерлиньяж ДЛИНОЙ, а не множителем: длина наследуется как есть, поэтому
     курсивная вставка 64px не раздувает строку. У множителя она считалась бы
     от своего кегля и строка вырастала со 63 до 82px. */
  line-height:calc(var(--fs-display) * 1.2857);   /* 63 при 49 */
  color:var(--c-yellow);
  letter-spacing:-.01em;
}
.hero__title em{
  font-family:var(--f-serif);font-style:italic;font-weight:500;
  font-size:var(--fs-display-serif);
}
.hero__lead{
  --lh:1.6667;
  max-width:393px;margin-top:12.7px;
  font-weight:500;font-size:var(--fs-body);line-height:1.667;color:var(--c-white);
}
.hero__cta{display:flex;gap:10px;margin-top:24.2px}

/* мозаика: 3 колонки по 202 с зазором 12 = 630 */
.hero__media{
  position:absolute;top:0;bottom:0;
  /* .hero не имеет .container — right считается от края ОКНА; выше 1440 нужно
     держать мозаику у края КАДРА (Figma 1440), иначе она уезжает вслед за окном. */
  right:max(calc(var(--page-gutter) - 30px), calc((100% - var(--frame-max)) / 2 + 30px));
  width:clamp(320px, calc(43.75 * var(--vw1)), 630px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);
  pointer-events:none;
}
.hero__col{position:relative;overflow:hidden}
.tile{position:relative;flex:0 0 auto;border-radius:var(--r-sm);overflow:hidden}   /* бейдж логотипа задан в % от плитки — работает в любом браузере */
.tile>img,.tile>video{display:block;width:100%;height:100%;object-fit:cover}
/* Логотип-бейдж поверх плитки. Селектор с тем же весом, что и .tile>img,
   и объявлен ниже: иначе картинка растягивалась во всю плитку.
   Размер и положение КАЖДОГО бейджа приходят из макета инлайном: они разные
   (61x20, 41x52, 31x36, 117x15...). Общей высоты здесь быть не должно —
   она делала все бейджи одинаковыми. */
.tile>video{position:relative;z-index:0}   /* видео — нижний слой плитки */
.tile>img.tile__logo{position:absolute;object-fit:contain;z-index:2;-webkit-transform:translateZ(0);transform:translateZ(0)}   /* бейдж всегда поверх видео: собственный слой, иначе на части машин видео перекрывает его до первого кадра */
/* затемнения сверху и снизу — из макета (Rectangle 21 и Rectangle 20) */
.hero__fade{position:absolute;left:0;right:0;height:128px;pointer-events:none;z-index:5}
.hero__fade--top{top:0;background:linear-gradient(180deg,var(--c-black) 0%,rgba(0,0,0,0) 100%)}
.hero__fade--bottom{bottom:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,var(--c-black) 100%)}
/* Направление нижнего градиента взято ИЗ РЕНДЕРА Figma, а не из данных API:
   в данных обе заливки описаны одинаково (чёрный сверху -> прозрачный снизу),
   но на отрисованном кадре низ кадра ТЕМНЕЕТ книзу — средняя яркость мозаики
   72.7 на y=595 против 9.4 на y=722. С исходным направлением получалась
   тёмная полоса поперёк мозаики на отметке 595. */

/* ============================================================
   8. БРЕНДЫ (Figma 6735:879, две независимые строки)
   ============================================================ */
.brands{background:var(--c-paper);color:var(--c-black);padding-top:96.4px}
.brands__title{
  text-align:center;font-weight:400;font-size:17px;line-height:1.176;
  color:var(--c-black);
}
.brands__rows{margin-top:60.6px;display:flex;flex-direction:column;gap:45px}
.brands__row{--gap:70px}
/* стартовая фаза лент: в макете первая строка начинается с x=49, вторая с x=84 */
.brands__row:nth-child(1) .marq__track{margin-left:49px}
.brands__row:nth-child(2) .marq__track{margin-left:84px}
/* боковые затухания из макета (Rectangle 182/183): 240px, непрозрачный #FBFBFB до 27%, далее в прозрачное */
.brands__rows{position:relative}
.brands__rows::before,.brands__rows::after{content:'';position:absolute;top:0;bottom:0;width:240px;z-index:2;pointer-events:none}
.brands__rows::before{left:0;background:linear-gradient(90deg,#FBFBFB 27%,rgba(251,251,251,0) 100%)}
.brands__rows::after{right:0;background:linear-gradient(270deg,#FBFBFB 27%,rgba(251,251,251,0) 100%)}
/* Размер каждого логотипа задан в разметке из макета: в первой строке
   девять логотипов по 20px и два по 24px. Общей высоты у строки быть
   не должно — она делала все логотипы одинаковыми. */
.brands__row img{flex:0 0 auto}

/* ============================================================
   9. МЕТРИКИ (Figma 6735:1385, эталон 1440x741)
   Это типографическая композиция, а не карточки: две колонки по 630
   с зазором 60, в каждой два блока «описание слева + число справа»
   и линия под ними. Никаких боксов, скруглений и заливок.
   ============================================================ */
.metrics{background:var(--c-black);color:var(--c-paper);padding:151.6px 0 100px}
.metrics__eyebrow{
  --lh:1.25;                      /* 15/12 */
  text-align:center;font-weight:400;font-size:12px;line-height:1.25;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--c-paper);
}
.metrics__title{
  --lh:1.2;                       /* 60/50 */
  max-width:826px;margin:10.2px auto 0;
  text-align:center;font-weight:400;font-size:clamp(30px,calc(3.472 * var(--vw1)),50px);
  line-height:calc(clamp(30px,calc(3.472 * var(--vw1)),50px) * 1.2);
  letter-spacing:0;color:var(--c-paper);   /* в макете у строк заголовка letterSpacing 0 (переопределение) */
}
.metrics__title em{
  font-family:var(--f-serif);font-style:italic;font-weight:500;
  font-size:clamp(39px,calc(4.514 * var(--vw1)),65px);line-height:.75em;
}
/* сетка 2x2: колонки 630, зазор 60 = 1320 */
.metrics__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:60px;row-gap:71.6px;margin-top:70.2px;
}
.metric{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:30px;border-bottom:1px solid #696755;
}
.metric__text{
  --lh:1.6667;                    /* 20/12 */
  max-width:375px;font-weight:500;font-size:12px;line-height:1.6667;
  color:rgba(255,255,255,.65);margin-bottom:-6.7px;   /* в Figma заливка белая с прозрачностью 0.65 */
}
.metric__num{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(56px,calc(6.25 * var(--vw1)),90px);line-height:1;
  letter-spacing:-1.8px;color:var(--c-paper);white-space:nowrap;margin-bottom:-17.6px;
  padding-right:1.8px;   /* хвостовой letter-spacing последнего знака: иначе чернила на 2px правее макета */
}

/* ---------- общие элементы секций ---------- */
.eyebrow{--lh:1.25;font-weight:400;font-size:12px;line-height:1.25;
  letter-spacing:1.2px;text-transform:uppercase}
.h2{--lh:1.2;font-weight:400;font-size:clamp(30px,calc(3.472 * var(--vw1)),50px);
  line-height:calc(clamp(30px,calc(3.472 * var(--vw1)),50px) * 1.2)}
.h2 em{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(39px,calc(4.514 * var(--vw1)),65px);line-height:.75em}
/* в макете это семейство Cormorant (не Infant) и своя высота строки 65 */
.em--cormorant{font-family:Cormorant,var(--f-serif)}

/* ============================================================
   10. SHOWREEL (Figma 6735:1404, 1440x1040)
   ============================================================ */
.showreel{background:var(--c-paper);color:var(--c-black);padding:var(--section-space) 0 50px}
.showreel .eyebrow{text-align:center}
.showreel__title{max-width:826px;margin:9.2px auto 0;text-align:center}
.player{
  position:relative;margin-top:67.6px;aspect-ratio:1320 / 681;
  background:#1E1E1E;border-radius:var(--r-sm);overflow:hidden;
  display:block;width:100%;cursor:pointer;border:0;
}
.player__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:122px;height:79px;border-radius:2px;background:var(--c-yellow);
  display:grid;place-items:center;transition:transform .2s ease;
}
.player:hover .player__play{transform:translate(-50%,-50%) scale(1.06)}
.player__play svg{width:26px;height:34px;fill:var(--c-paper)}
.player__sound{
  position:absolute;right:15px;top:15px;width:55px;height:55px;
  border-radius:50%;background:#3C3C34;display:grid;place-items:center;
  border:0;cursor:pointer;
}
.player__sound img{width:23px;height:23px}

/* ============================================================
   11. УСЛУГИ (Figma 6735:1450, 1440x934)
   Модель B: полоса намеренно выходит за края окна. Крайние карточки
   обрезаны по замыслу — в контейнер 1320 её зажимать нельзя.
   ============================================================ */
.services{background:var(--c-paper);color:var(--c-black);padding:var(--section-space) 0 50px}

.services__title{max-width:630px;margin-top:9.2px}
.services__viewport{margin-top:57.6px;overflow:hidden;width:100%}
.services__track{
  display:flex;gap:var(--card-gap);
  /* первая карточка в макете начинается на 78px левее края кадра 1440 */
  /* calc(100 * var(--vw1)) НЕ учитывает zoom корня (выше 1440): на 1920 отступ становился +162px
     вместо -78px, слева появлялась пустая полоса и круг «не замыкался».
     100% — ширина области в тех же единицах раскладки, что и transform. */
  margin-left:calc((100% - var(--frame-max)) / 2 - 78px);
  cursor:grab;user-select:none;
  touch-action:pan-y;   /* горизонтальный жест — наш, вертикальная прокрутка страницы остаётся системной */
}
.services__track.dragging{cursor:grabbing}
.service-card{
  position:relative;flex:0 0 390px;aspect-ratio:390 / 585;
  border-radius:var(--r-sm);overflow:hidden;display:block;color:var(--c-paper);
  -webkit-user-drag:none;
}
/* Содержимое карточки не получает указатель: иначе браузер начинает СВОЁ
   перетаскивание картинки (лента не едет, а клик срывается). Цель события —
   всегда сама ссылка. */
.service-card>*{pointer-events:none;-webkit-user-drag:none}
.service-card img{width:100%;height:100%;object-fit:cover}
.service-card__title{
  position:absolute;left:7px;top:30px;width:376px;text-align:center;
  font-weight:400;font-size:34px;line-height:43px;color:var(--c-paper);   /* высота строки 43 из макета */
}
.service-card__title em{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:49px}
.service-card::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0);
  transition:background .2s ease}
.service-card:hover::after{background:rgba(0,0,0,.12)}
/* макет: у карточки «Presentation design» сверху затемнение 147px (Rectangle 2531, чёрный 25%→0) */
.service-card--shade::before{content:'';position:absolute;left:0;right:0;top:0;height:147px;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%);pointer-events:none}
.service-card__title{z-index:2}

/* ============================================================
   12. PORTFOLIO (Figma 6735:1560, 1440x1847)
   Модель A: сетка 4 колонки внутри 1320, широкие карточки span 2.
   ============================================================ */
.portfolio{background:var(--c-paper);color:var(--c-black);padding:var(--section-space) 0 25.8px}

.portfolio__head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
/* кнопка в макете: 130x38, кегль 10/700, правый край на 169px левее контейнера */
.portfolio__head .btn{margin-top:30.4px;margin-right:169px;height:38px;width:130px;padding:0;font-size:10px;font-weight:700}
.portfolio__title{max-width:691px;margin-top:13.4px}
.portfolio__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:17.33px;row-gap:22.9px;margin-top:58.4px;
}
.project{display:block;color:inherit}
.project--wide{grid-column:span 2}
.project__media{aspect-ratio:317 / 297;border-radius:var(--r-sm);overflow:hidden}
.project--wide .project__media{aspect-ratio:652 / 297}
.project__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.project:hover .project__media img{transform:scale(1.03)}
.project__name{--lh:2.12;margin-top:19.4px;font-family:var(--f-serif);font-style:italic;
  font-weight:500;font-size:25px;line-height:1.1;color:var(--c-black)}
.project__meta{--lh:2;margin-top:-1.8px;font-weight:300;font-size:10px;
  line-height:2;color:var(--c-black)}

/* ============================================================
   13. ОТЛИЧИЯ (Figma 6735:1602, 1440x620)
   ============================================================ */
.diff{background:var(--c-paper);color:var(--c-black);padding:var(--section-space) 0 144.3px}
.diff .eyebrow{text-align:center}
.diff__title{max-width:826px;margin:16.35px auto 0;text-align:center;
  font-size:clamp(32px,calc(3.472 * var(--vw1)),50px);line-height:calc(clamp(32px,calc(3.472 * var(--vw1)),50px) * 1.06)}
/* колонки не равные: в макете области 455 / 512 / 353 */
.diff__grid{display:grid;grid-template-columns:455fr 512fr 353fr;margin-top:112px}
.diff__col{max-width:var(--w)}
.diff__icon{width:61px;height:61px;object-fit:contain}
.diff__label{--lh:1.25;margin-top:27.2px;font-weight:400;font-size:12px;
  line-height:1.25;letter-spacing:1.2px;text-transform:uppercase}
.diff__name{--lh:2.208;margin-top:5.5px;font-weight:400;font-size:24px;line-height:1.25}
.diff__text{--lh:1.6667;margin-top:3px;font-weight:500;font-size:12px;line-height:1.6667;color:rgba(0,0,0,.65)}   /* в Figma чёрный с прозрачностью 0.65 */

/* ============================================================
   14. КОМАНДА (Figma 6735:1636, 1440x690)
   Модель: слева контент на светло-жёлтом, справа фото на всю высоту.
   ============================================================ */
.team{background:#FFF2A5;color:var(--c-ink);position:relative;overflow:hidden}
/* шире холста 1440 (после предела zoom) секция центрируется, фото уходит в правый край окна */
.team__inner{display:grid;grid-template-columns:610fr 830fr;min-height:690px;max-width:var(--frame-max);margin-inline:auto}
.team__media{margin-right:min(0px, calc((var(--frame-max) - calc(100 * var(--vw1))) / 2))}
/* в макете колонка 490, ширина текстов задана на элементах (474/450) — без правого отступа, иначе заголовок переносится в три строки */
.team__content{padding:71.6px 0 0 0;max-width:490px}
.team__label{--lh:1.6667;font-weight:400;font-size:12px;line-height:1.6667;
  letter-spacing:1.2px;text-transform:uppercase;padding-bottom:8.3px;
  border-bottom:1px solid currentColor}
.team__title{--lh:1.06;margin-top:30.6px;max-width:474px;font-weight:400;
  font-size:clamp(34px,calc(3.472 * var(--vw1)),50px);line-height:calc(clamp(34px,calc(3.472 * var(--vw1)),50px) * 1.06)}
.team__title em{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(44px,calc(4.514 * var(--vw1)),65px);line-height:.75em}
.team__text{--lh:1.304;margin-top:75.6px;max-width:474px;font-weight:400;
  font-size:clamp(17px,calc(1.597 * var(--vw1)),23px);line-height:1.304}
/* второй абзац: зазор 10px (в макете пустая строка высотой 10) */
.team__text.team__text--2{margin-top:10px}
.team__note{--lh:1.6667;margin-top:23.1px;max-width:450px;font-weight:500;
  font-size:12px;line-height:1.6667}
.team__cta{margin-top:24.3px}
.team__media{position:relative}
.team__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============================================================
   15. ФУТЕР (Figma 6735:6724, 1440x862)
   Модель B: фон во всю ширину, содержимое в контейнере.
   ============================================================ */
.footer{position:relative;background:var(--c-black);color:#F6F8F0;overflow:hidden;
  min-height:862px;display:flex;flex-direction:column}
.footer__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Живой огонёк поплавка поверх фотографии футера (перенесено из старой версии
   сайта 11.09: в макете этого нет, но эффект был согласован и нравился). */
.duck-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
.footer__inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column}
.footer__cta{text-align:center;padding-top:106.2px}
.footer__cta h2{--lh:1.2727;max-width:700px;margin-inline:auto;font-weight:400;
  font-size:clamp(36px,calc(3.819 * var(--vw1)),55px);line-height:calc(clamp(36px,calc(3.819 * var(--vw1)),55px) * 1.2727);color:#F6F8F0}
.footer__cta h2 em{font-family:Cormorant,var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(46px,calc(4.861 * var(--vw1)),70px);line-height:.75em}
.footer__cta .btn{margin-top:19.65px}
.footer__nav{display:grid;grid-template-columns:630fr 630fr;column-gap:60px;margin-top:110px}
.footer__group{border-top:1px solid #696755;padding-top:14.5px}
.footer__h{--lh:1.3333;font-weight:500;font-size:15px;line-height:20px;letter-spacing:-.3px;
  color:#FFFFFF;margin-bottom:48.7px}
.footer__cols{display:flex}
.footer__col--1{width:207px;margin-left:1px}
.footer__col--2{width:252px}
/* колонка — flex, чтобы margin заголовка и ссылки не схлопывались */
.footer__col{display:flex;flex-direction:column;align-items:flex-start}
.footer__col h4{font-weight:400;font-size:14px;line-height:20px;letter-spacing:-.28px;color:#FFFFFF;margin:0}
.footer__col .footer__h4--gap{margin-top:34.75px}
.footer__col a:first-of-type{margin-top:8.25px}
/* в макете первые две колонки на 1px ниже остальных */
.footer__col--1 a:first-of-type,.footer__col--2 a:first-of-type{margin-top:9.25px}
.footer__col .footer__h4--gap+a{margin-top:7.25px}
.footer__col a{display:block;margin-top:7px;font-weight:400;font-size:12px;line-height:20px;
  letter-spacing:-.6px;color:#FFFFFF;opacity:.65;transition:opacity .18s ease}
.footer__col a:hover{opacity:1}
/* нижний ряд: логотип+копирайт слева, ссылки по центру, соцсети справа — верх ряда на 780 */
.footer__bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  margin-top:auto;padding-bottom:35px}
.footer__brand img{display:block;width:174px;height:18px}
.footer__copy{margin-top:9.7px;margin-bottom:-.7px;font-size:12px;line-height:20px;letter-spacing:-.6px;opacity:.65}
.footer__legal{display:flex;gap:15px;margin-top:27.3px;font-size:11px;line-height:20px;
  letter-spacing:-.55px;opacity:.65;justify-self:center}
.footer__social{display:flex;gap:6px;justify-self:end;margin-top:11px}
.footer__social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid #FFFFFF}
/* у одной иконки кольцо уже внутри svg (экспорт группы 36x36) */
.footer__social a.footer__social--whole{border:0}
.footer__social a img{display:block}
.footer__social .footer__extra{margin-left:15px;margin-top:3px}

/* ============================================================
   16. ВСТУПЛЕНИЕ (нижняя часть Figma 6735:879)
   Слева текстовая колонка 636, справа видео 636x358.
   ============================================================ */
.intro{display:grid;grid-template-columns:696fr 624fr;column-gap:0;padding-top:156.6px;
  padding-bottom:100px}
.intro__label{--lh:1.6667;font-weight:400;font-size:12px;line-height:1.6667;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--c-black);
  padding-bottom:8.3px;border-bottom:1px solid var(--c-black);max-width:637px}
.intro__title{--lh:1.2;max-width:636px;margin-top:23.4px;font-weight:400;
  font-size:clamp(32px,calc(3.472 * var(--vw1)),50px);line-height:calc(clamp(32px,calc(3.472 * var(--vw1)),50px) * 1.2);
  color:var(--c-black)}
.intro__title em{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(39px,calc(4.514 * var(--vw1)),65px);line-height:.75em}
.intro__text{--lh:1.3043;max-width:597px;margin-top:21.4px;font-weight:400;
  font-size:clamp(17px,calc(1.597 * var(--vw1)),23px);line-height:1.3043;color:var(--c-black)}
.intro__note{--lh:1.6667;max-width:579px;margin-top:23px;font-weight:500;
  font-size:12px;line-height:1.6667;color:var(--c-black)}
.intro__cta{margin-top:24.3px}
.intro__media{align-self:start;margin-top:22.4px}
/* маленький плеер вступления: те же пропорции, свои размеры кнопок */
.player--sm{aspect-ratio:636 / 358;margin-top:0}
.player--sm .player__play{width:92px;height:60px}
.player--sm .player__play svg{width:19px;height:25px}
.player--sm .player__sound{width:43px;height:43px;right:15px;top:15px}

.intro__text--2{--lh:1.3043;max-width:597px;margin-top:10px;font-weight:400;
  font-size:clamp(17px,calc(1.597 * var(--vw1)),23px);line-height:1.3043;color:var(--c-black)}

/* ============================================================
   17. СЛОЙ ШАПКИ: меню услуг (1440x382) и форма заявки (600x333)
   Координаты — внутренняя геометрия компонентов из макета шапки,
   а не раскладка страницы; сами панели позиционируются от окна.
   ============================================================ */
.ovl{position:fixed;inset:0;z-index:100}
/* атрибут hidden должен побеждать display:grid/flex панелей — иначе меню видно под формой */
.ovl[hidden],.menu[hidden],.modal[hidden],.fld__list[hidden]{display:none !important}
.ovl__back{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.ovl--menu .ovl__back{background:rgba(0,0,0,.35)}
.ovl__x{position:absolute;right:12px;top:12px;width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.06);color:#000;display:grid;place-items:center;cursor:pointer}
.ovl__x:hover{background:rgba(0,0,0,.13)}
/* меню услуг */
.menu{position:absolute;left:0;top:60px;width:100%;min-height:382px;background:#FFFFFF;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:grid;grid-template-columns:370px 370px 370px;column-gap:47px;
  padding:40px 0 0 max(20px, calc((100% - 1440px) / 2 + 117px));overflow:hidden}
.menu .ovl__x{right:18px;top:14px}
.menu__col--3{margin-left:2px}
.menu__head{display:block;height:36px;margin-bottom:20px}
.menu__head--2{margin-top:26px}
.menu__item{position:relative;display:block;height:48px;margin-bottom:5px;padding-top:5.6px;
  border-bottom:1px solid #DFE3DC;color:#000;text-decoration:none}
.menu__item--last{border-bottom:0}
.menu__t{display:block;font-weight:400;font-size:13px;line-height:15.733px;letter-spacing:-.91px;color:#000;
  transition:transform .15s ease}
.menu__s{display:block;margin-top:1.97px;font-weight:400;font-size:11px;line-height:13.3125px;letter-spacing:-.77px;
  color:#818B86;white-space:nowrap}
.menu__i{position:absolute;right:2px;top:15px}
/* наведение: точка слева и сдвиг названия на 8px — состояние из макета */
.menu__item::before{content:'';position:absolute;left:0;top:12px;width:3px;height:3px;border-radius:50%;
  background:#000;opacity:0;transition:opacity .15s ease}
.menu__item:hover::before{opacity:1}
.menu__item:hover .menu__t{transform:translateX(8px)}
/* форма */
.modal{position:absolute;left:50%;top:50%;width:600px;height:333px;transform:translate(-50%,-50%);
  background:#FBFCFC;border-radius:var(--r-sm);box-shadow:0 30px 80px rgba(0,0,0,.45);color:#000}
.modal__title{margin:23.2px 21px 0;text-align:center;font-family:var(--f-serif);font-style:italic;font-weight:500;
  font-size:31px;line-height:37.54px;letter-spacing:-1.24px;white-space:nowrap}
.modal__title span{font-family:var(--f-sans);font-style:normal;font-weight:400;font-size:24px;letter-spacing:-1.2px}
.modal__form{display:grid;grid-template-columns:255px 255px;column-gap:20px;row-gap:24.3px;
  margin:38.6px 35px 0;position:relative}
.fld{display:block;position:relative}
.fld__l{display:block;font-weight:400;font-size:11px;line-height:13.31px;letter-spacing:.55px;
  text-transform:uppercase;color:#818B86;margin-bottom:2.4px}
.fld__in{display:flex;align-items:center;justify-content:space-between;width:255px;height:39px;padding:0 18px;
  border:1px solid #000;border-radius:var(--r-pill);background:none;
  font-family:var(--f-sans);font-weight:400;font-size:12px;letter-spacing:-.6px;color:#0B0B0B;text-align:left;cursor:text}
.fld__in::placeholder{color:#818B86;opacity:1}
.fld__in:focus{outline:0;box-shadow:none;border-color:#000}   /* в макете состояния фокуса нет: без рамок и полос */
.fld__sel{cursor:pointer;color:#818B86}
.fld__sel.is-set{color:#0B0B0B}
/* обязательное поле не заполнено — после нажатия кнопки */
.fld__in.is-error{border-color:#D20A0A;color:#D20A0A}
.fld__in.is-error::placeholder{color:#D20A0A}
.fld__sel img{margin-right:6px}
.fld__list{position:absolute;left:0;top:calc(100% + 6px);z-index:2;width:255px;margin:0;padding:0;list-style:none;
  background:#FBFCFC;border-radius:var(--r-sm);box-shadow:0 18px 40px rgba(0,0,0,.28);overflow:hidden}
.fld__opt{height:33px;padding:0 12px;display:flex;align-items:center;font-size:12px;letter-spacing:-.6px;cursor:pointer}
.fld__opt--head{background:#E7E3D5;cursor:default}
.fld__opt:not(.fld__opt--head):hover{background:#F0EFE8}
.modal__submit{position:absolute;right:0;top:158.7px;height:39px;width:99px;padding:0}
@media (max-width:640px){
  .modal{width:min(600px, calc(100% - 24px));height:auto;padding-bottom:35px}
  .modal__title{white-space:normal}
  .modal__form{grid-template-columns:1fr;margin-inline:20px}
  .fld__in,.fld__list{width:100%}
  .modal__submit{position:static;justify-self:end}
}
/* режим QA-съёмки: ?qa=1 — ленты стоят на фазе макета, счётчики сразу в конце */
.qa-freeze .marq__track{animation-play-state:paused !important}
.qa-freeze .hero{min-height:723px}   /* при съёмке для сверки с макетом первый экран ровно 723 */


/* ---------- рельс шагов процесса (ad-creative) ----------
   Кружки и отрезки — настоящие элементы из макета (дизайнер пересобрал
   страницу 11.09 и разгруппировал рельс), js/main.js красит их по мере
   прокрутки. Здесь только плавность перехода цвета. */
.gf-line,.gf-box{transition:border-color .25s linear,background-image .25s linear}

/* утка на первом экране главной (js/main.js, 24.09). Десктоп: JS ставит
   правый край рамки на левый край колонок фото героя — утка уходит за
   карточки. Телефон: рамка у правого края экрана — уходит за экран. Клики не
   перехватывает. Ступни в кадре на 96% высоты — сдвиг вниз ставит утку на
   край. Левый край кадра растушёван: на 7-й секунде хвост упирается в
   границу исходника и иначе был бы срезан ровной линией. */
.duck-walk{position:absolute;right:0;bottom:0;pointer-events:none;will-change:transform;height:min(46vh,440px);aspect-ratio:9/16;opacity:0;transition:opacity .35s ease;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%);mask-image:linear-gradient(to right,transparent 0,#000 7%)}
.duck-walk.is-on{opacity:1}
.duck-walk video{display:block;width:100%;height:100%;transform:translateY(3.5%)}
/* телефон: утка ПОВЕРХ карточек героя, иначе её не видно (заказчица 24.09) */
@media (max-width:699px){.duck-walk{height:min(36vh,300px);z-index:30}}
/* обложка плеера «Today's brands need…» — первый кадр ролика vimeo 1230229663 (заказчица 28.09);
   на телефоне фон — слой 7011:5306 с инлайн-заливкой, поэтому !important только на картинку */
.intro__media .player--sm{background:#FCFCFC url(../img/intro-cover.webp) center/cover no-repeat}
.m-only [data-node="7011:5306"]{background-image:url(../img/intro-cover.webp)!important;background-size:cover!important;background-position:center!important;background-color:#FCFCFC!important}
/* значок звука на обложке этого плеера не нужен (заказчица 28.09) — прячем, место в раскладке сохраняем */
.intro__media .player--sm .player__sound,.m-only [data-node="7011:5307"]{visibility:hidden}
/* video-production «More video out the door…»: та же обложка и ролик, что на главной (заказчица 02.10) */
.player--sm[data-node="6735:4748"]{background:#FCFCFC url(../img/intro-cover.webp) center/cover no-repeat}
.player--sm[data-node="6735:4748"] .player__sound,.m-only [data-node="7011:9414"]{visibility:hidden}
.m-only [data-node="7011:9413"]{background-image:url(../img/intro-cover.webp)!important;background-size:cover!important;background-position:center!important;background-color:#FCFCFC!important}
/* ai-powered-creative «Your shortcut to making AI…»: тот же плеер с уткой (заказчица 07.10: «забыл видео вставить») */
.player--sm[data-node="6735:4980"]{background:#FCFCFC url(../img/intro-cover.webp) center/cover no-repeat}
.player--sm[data-node="6735:4980"] .player__sound,.m-only [data-node="7011:8888"]{visibility:hidden}
.m-only [data-node="7011:8887"]{background-image:url(../img/intro-cover.webp)!important;background-size:cover!important;background-position:center!important;background-color:#FCFCFC!important}
/* значок Play поверх обложек роликов Vimeo (immersive: тёмный квадрат и карточка FOOH, 02.10) */
.bd-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:19%;max-width:122px;min-width:57px;aspect-ratio:122/79;border-radius:2px;background:#F8D613;display:grid;place-items:center;z-index:3;pointer-events:none}
.bd-play svg{width:21%;height:auto;fill:#FBFCFC}
.bd-wrap{position:relative;display:block;width:fit-content;max-width:100%}
/* ai-consulting: карусель отзывов (05.10) */
.bd-review-link{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .2s}
.bd-review-link:hover{opacity:.7}
[data-node="6735:1491"],[data-node="6735:1492"],[data-node="7011:12074"],[data-node="7011:12075"]{transition:opacity .18s ease}
.bd-fade{opacity:0}
.bd-arrow{position:absolute;padding:0;margin:0;border:0;background:transparent;cursor:pointer;border-radius:50%;z-index:3}
@media (hover:hover){.bd-arrow:hover{background:rgba(255,255,255,.12)}}
.bd-arrow--y0{left:0;top:0;width:100%;height:44.68%}
.bd-arrow--y1{left:0;bottom:0;width:100%;height:44.68%}
.bd-arrow--x0{left:0;top:0;width:44.55%;height:100%}
.bd-arrow--x1{right:0;top:0;width:44.55%;height:100%}
/* ai-consulting: лента кейсов (05.10) */
.bd-cases{position:absolute;left:0;width:100%;z-index:4;display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;box-sizing:border-box}
.bd-cases::-webkit-scrollbar{display:none}
.bd-cases.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.bd-case{position:relative;flex:0 0 var(--w);height:100%;border-radius:var(--r,10px);overflow:hidden;scroll-snap-align:start;display:block;text-decoration:none;background:#1E1E1E}
.bd-case img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;pointer-events:none}
@media (hover:hover){.bd-case:hover img{transform:scale(1.03)}}
.bd-case__txt{position:absolute;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.bd-case__tag,.bd-case__title{display:block}
/* кнопка звука на шоуриле (06.10) */
.bd-sound{position:absolute;right:16px;bottom:16px;z-index:5;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s}
.bd-sound svg{width:22px;height:22px}
@media (hover:hover){.bd-sound:hover{background:rgba(0,0,0,.75)}}
/* motion-design: «лента, которая оживает» (06.10) */
.bdf{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#04395A 0%,#00263D 55%,#001A2B 100%)}
.bdf__feed{position:absolute;left:0;top:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--gp);padding-top:var(--gp);will-change:transform}
.bdf__post{width:var(--pw);flex:0 0 auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:calc(var(--rr) * 1.6);overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.bdf__head,.bdf__foot{display:flex;align-items:center;gap:calc(var(--pw) * .04);padding:0 calc(var(--pw) * .05)}
.bdf__head{height:var(--hd)}.bdf__foot{height:var(--ft)}
.bdf__ava{display:block;width:calc(var(--hd) * .5);height:calc(var(--hd) * .5);border-radius:50%;background:#F8D613;flex:0 0 auto}
.bdf__bar{display:block;height:calc(var(--pw) * .028);border-radius:99px;background:rgba(255,255,255,.22)}
.bdf__bar--s{background:rgba(255,255,255,.12)}.bdf__bar--l{flex:1;margin-left:auto;max-width:30%;background:rgba(255,255,255,.12)}
.bdf__media{width:var(--pw);height:var(--pw);overflow:hidden;transition:opacity .2s}
.bdf__media img{display:block;width:100%;height:100%;object-fit:cover}
.bdf__heart,.bdf__ic{width:calc(var(--ft) * .42);height:calc(var(--ft) * .42);fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.8;stroke-linejoin:round;flex:0 0 auto}
.bdf__heart{transition:transform .35s cubic-bezier(.34,1.8,.5,1),fill .2s,stroke .2s}
.is-liked .bdf__heart{fill:#F8D613;stroke:#F8D613;transform:scale(1.35)}
.bdf__live{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;overflow:hidden;opacity:0;pointer-events:none;box-shadow:0 30px 80px rgba(0,0,0,.45);will-change:transform}
.bdf__live.is-on{opacity:1}
.bdf__live video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.bdf__live video.is-on{opacity:1}
.bd-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.bd-reel~.bd-sound{z-index:6}
/* кнопка звука — в правом верхнем углу (заказчица 06.10) */
.bd-sound{top:16px;bottom:auto}

/* широкий экран (>1920): кадр не режет края — режет секция по краю окна (js/main.js «Кромки», 08.10) */
.gf-frame.is-open{overflow:visible!important}