/* ==========================================================================
   Бизнес-события — первый экран.
   Опирается на style.css: шапка, кнопки, шрифты и сетка оттуда, здесь только
   то, что отличает страницу направления от главной.
   Цвет направления — синий, утверждён клиентом 17.08. Градиентов-фонов нет:
   цвет живёт в кнопке, в подсветке пункта меню и в двух засветах по углам.
   ========================================================================== */

:root{
  --biz:#2996ee;
  --biz-rgb:41,150,238;
  --dir-rgb:41,150,238;   /* цвет направления для общих блоков в style.css */
}

/* Прелоадер этой страницы гасим плавно и до конца — иначе чёрная плашка
   висит поверх экрана: анимацию с главной сюда не тянем. */
.preload{transition:opacity .5s ease, visibility 0s linear .5s}
.preload.is-off{opacity:0; visibility:hidden; pointer-events:none}

/* ------------------------------------------------------------ СЛОЙ ФОТО --- */
/* Кадр 16:10, кроем окно целиком. object-position держит сцену в кадре
   на вытянутых окнах: обрезаем низ с рядами, а не верх со сценой. */
/* Кадр пересобран Германом в макете 24.08: экран без текста, сверху добавлен
   воздух — шапка ложится на однородный потолок, а не на надписи. Пропорция
   исходника 16:10 совпадает с окном, поэтому кадрировать нечего: показываем
   целиком, без смещения. */
.hero__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}

/* Затемнение мягче, чем на главной: кадр и без того тёмный, лишний слой
   съедал бы лучи. Держим только края — под шапку и под нижний ряд текста. */
.page-biz .hero__scrim{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.62) 6%,
      rgba(0,0,0,.38) 13%,
      rgba(0,0,0,.16) 21%,
      rgba(0,0,0,0)   32%),
    linear-gradient(0deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.70) 12%,
      rgba(0,0,0,.44) 24%,
      rgba(0,0,0,.18) 36%,
      rgba(0,0,0,.05) 46%,
      rgba(0,0,0,0)   56%);
}

/* Засвет намеренно выходит за нижнюю грань первого экрана и заходит на кейсы:
   иначе на стыке видна ровная линия обреза. Резать было нужно, пока следующей
   секцией шли форматы с их чёрной половиной; сейчас там кейсы, и склон
   засвета работает как переход между блоками. */
.page-biz .hero{overflow:visible}

/* --------------------------------------------------------- СЛОЙ ЗАСВЕТА --- */
/* Каждый засвет — самостоятельный слой поверх фотографии.
   screen работает как свет: складывает яркости и физически не может
   затемнить кадр, поэтому чёрные части слоя пропадают без следа.
   Радиальная заливка вместо картинки — у неё чистая растяжка без полос
   и она тянется под любое окно без пережатия. */
.glow2{
  position:absolute; pointer-events:none;
  mix-blend-mode:screen;
}
/* правый верхний угол — ядро свечения уходит за угол кадра, в кадре
   остаётся только его склон, поэтому пятна не читается */
.glow2--tr{
  right:-34rem; top:-38rem; width:104rem; height:92rem;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(var(--biz-rgb),1) 0%,
    rgba(var(--biz-rgb),.78) 22%,
    rgba(var(--biz-rgb),.46) 42%,
    rgba(var(--biz-rgb),.20) 62%,
    rgba(var(--biz-rgb),.06) 80%,
    rgba(var(--biz-rgb),0)  100%);
  filter:blur(2.4rem);
}
/* левый нижний угол — крупнее и глуше: под ним лежит заголовок */
.glow2--bl{
  left:-46rem; bottom:-48rem; width:136rem; height:118rem;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(var(--biz-rgb),1) 0%,
    rgba(var(--biz-rgb),.80) 22%,
    rgba(var(--biz-rgb),.52) 42%,
    rgba(var(--biz-rgb),.24) 62%,
    rgba(var(--biz-rgb),.08) 80%,
    rgba(var(--biz-rgb),0)  100%);
  filter:blur(3rem);
  /* Гасим нижнюю треть слоя: засвет должен растворить стык с кейсами,
     но не доползать до кадра — на фото он читался как посторонний блик. */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.35) 72%, transparent 92%);
          mask-image:linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.35) 72%, transparent 92%);
}

/* ------------------------------------------------------------- ИНТЕРФЕЙС --- */
/* Активный пункт меню: страница, на которой стоим */
.nav a.is-here{color:var(--biz)}
.nav a.is-here:hover{opacity:1}

/* Заголовок в четыре строки против трёх на главной: «под ключ» из прототипа
   в две строки не влезает по ширине, а сжимать его в подпись нельзя —
   это часть формулировки. Кегль опущен, чтобы блок не подошёл к шапке. */
.page-biz .hero__h1{
  bottom:4.4rem; width:80rem;
}

/* Ссылка шапки: текст прототипа длиннее базового, поэтому у неё своя ширина
   и своя позиция стрелки — иначе стрелка ложится на последнее слово.
   Ссылка стала на 4rem шире, и вся правая группа сдвинута влево на столько же:
   зазоры между телефоном, иконками и ссылкой остаются как на главной. */
.page-biz .cta-link{left:120rem; width:18rem}
.page-biz .cta-link__arw{left:16.9rem}
.page-biz .cta-link__line{width:18rem}
.page-biz .tel{left:96.6rem}
.page-biz .socials{left:109.6rem}

/* Подзаголовок — дословно из прототипа, место наше: справа, как на главной.
   Награда переехала влево, колонка вернулась к ритму главной: строка + кнопка. */
.page-biz .hero__lead{
  left:87.8rem; bottom:15.1rem; width:40.6rem;
}

/* Кнопка направления — синяя вместо маджентовой.
   В базе к мадженте привязаны четыре вещи разом: фон, цвет шеврона, заливка
   разрастающегося круга и цвет подписи на ховере. Перебиваем все четыре —
   иначе при наведении по краю кружка проступает розовая каёмка. */
.btn-pill--biz{background:var(--biz)}
.btn-pill--biz .btn__ic{color:var(--biz)}
.btn-pill--biz .btn__ic::before{background:#fff}
.btn-pill--biz::after{background:#fff}
.btn-pill--biz:hover{background:#fff}
.btn-pill--biz:hover .btn__t{color:var(--biz)}
/* 🔴 На ховере базовая кнопка рисует маджентовую кайму внутренней тенью
   (style.css:1085). На синей она читалась как красная обводка по скруглению.
   Перекрашиваем в синий, а не гасим: кайма держит край на белом фоне. */
.btn-pill--biz:hover{box-shadow:inset 0 0 0 .1rem var(--biz)}

/* ----------------------------------------------------------- НАГРАДА --- */
/* Вариант А: горизонтальная строка над заголовком, по его левому краю.
   Знак / вертикальная волосяная линия / две строки текста. Подложки нет,
   всё лежит прямо на кадре. Ширина зажата шириной первого слова заголовка —
   номинация переносится, а не тянется вправо. */
/* Межстрочный шаг заголовка вырос на .07em (правка наездов Й/Ё, 26.08.2026),
   заголовок прижат к низу — значит верхняя строка поднялась. Плашку поднимаем
   на ту же величину: три интервала × .07 × 7.692rem = 1.62rem, иначе воздух
   между наградой и первой строкой съедается вдвое. */
.award{
  /* 38.9, а не 35.66: со строкой «2 место» плашка садилась на заголовок
     (обратка Германа 01.09 — «дай воздуха») */
  position:absolute; left:6.1rem; bottom:38.9rem;
  width:52rem;
  display:flex; align-items:center; gap:1.6rem;
}
/* Знак — корона в венках, без словесной части: подпись набрана текстом,
   вписанные в картинку буквы на таком размере превращались в кашу. */
.award__mark{
  width:4.6rem; height:auto; flex:none;
  opacity:.92;
}
.award__rule{
  align-self:stretch; width:.1rem; flex:none;
  background:rgba(255,255,255,.28);
}
.award__t{
  font-size:1.3rem; font-weight:600; line-height:1.25;
  letter-spacing:.117rem; text-transform:uppercase;
}
.award__d{
  margin-top:1rem;   /* было .5: заголовок плашки прижимался к тексту */
  font-size:1.2rem; line-height:1.4; color:rgba(255,255,255,.62);
}

/* ══════════════════════ ФОРМАТЫ БИЗНЕС-СОБЫТИЙ ══════════════════════════
   Донор — improntahome.com. Оттуда взяты: раскладка в половину экрана,
   переключение состояний без перезагрузки блока и характер движения.
   Замер по донору: кривая cubic-bezier(.19,1,.22,1) при 0.8 с — 1635 раз
   на сайте, шкала кеглей 300 / 37.5 / 14, то есть контраст ×8.
   Текст и фото делят экран поровну и не наезжают друг на друга. */

.fmt{position:relative; width:100%; background:#000}
.fmt__inner{
  position:relative; width:100%; height:100svh; min-height:60rem;
  display:flex; overflow:hidden; background:#000;
}

/* ---------------------------------------------------- левая половина --- */
.fmt__left{
  position:relative; width:50%; flex:none;
  background:#000; overflow:hidden;
}

/* Иконки лежат стопкой в одной точке — видна одна, остальные погашены */
/* 🔴 Иконки живут в окне с обрезкой: старая уезжает вверх ЗА его край,
   новая приходит снизу. Раньше они просто проявлялись друг сквозь друга —
   на середине перехода в кадре висели два контура разом, и это дешевило.
   Кегль и толщина срезаны (4.8→3.6rem, обводка 2→1.4): жирный контур в
   36 пикселей читался как клипарт, а не как знак. */
.fmt__icons{
  position:absolute; left:6rem; top:10rem; width:3.6rem; height:3.6rem;
  overflow:hidden;
}
.fmt__ico{
  position:absolute; inset:0; width:3.6rem; height:3.6rem;
  fill:none; stroke:#fff; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0;
}

/* Стопка текстов: все три лежат друг на друге, разъезжаются по скроллу */
/* Тексты стоят над полосой, полоса — своей строкой ниже них */
.fmt__stack{position:absolute; left:6rem; right:6rem; bottom:17.4rem}
.fmt__body{position:absolute; left:0; right:0; bottom:0}
/* Маску вокруг каждой строки ставит скрипт: внутри неё строка уезжает
   за край и пропадает, поэтому на переходе не видно двух текстов разом. */
.fmt__mask{display:block; overflow:hidden}
.fmt__body > *{display:block}
.fmt__mask > *{display:block; will-change:transform}

.fmt__label{
  margin-bottom:2.6rem;
  font-size:1.3rem; line-height:140%; letter-spacing:.117rem;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
/* Кегль поднят до заголовочного с первого экрана: на половине ширины
   он держит вес блока, а прежние 5.6rem рядом с фото выглядели подписью. */
.fmt__h2{
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:6.9rem; line-height:97%; letter-spacing:-.207rem;
  text-transform:uppercase; color:#fff;
}
.fmt__desc{
  margin-top:2.6rem; max-width:56rem;
  font-size:1.8rem; line-height:150%; color:rgba(255,255,255,.6);
  /* переносы расставлены руками в разметке: строки примерно равной длины,
     висячих слов нет. Автоперенос тут не годится — он их и создавал. */
}

/* Полоса прогресса — часть текстовой колонки, а не подвал секции.
   Стоит под подзаголовком и тянется на ширину колонки. */
.fmt__bar{
  position:absolute; left:6rem; right:6rem; bottom:9.4rem; height:.3rem;
  background:rgba(255,255,255,.12);
}
.fmt__bar i{
  display:block; height:100%; background:var(--biz);
  transform:scaleX(0); transform-origin:0 50%;
}

/* --------------------------------------------------- правая половина --- */
.fmt__right{position:relative; width:50%; flex:none; overflow:hidden; background:#000}
.fmt__shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  clip-path:inset(100% 0 0 0);
  will-change:clip-path,transform;
}
/* Затемнение только у нижней грани — под номером, чтобы он не сел на светлое */
.fmt__foot{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  z-index:3; pointer-events:none;
  background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 44%, rgba(0,0,0,0) 100%);
}
.fmt__num{
  position:absolute; right:6rem; bottom:7.4rem; z-index:4;
  display:flex; align-items:baseline; gap:.9rem; color:#fff;
}
.fmt__num b{
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:12rem; line-height:.8; letter-spacing:-.36rem;
}
.fmt__num span{font-size:1.6rem; color:rgba(255,255,255,.5)}


/* ── Композиция: заголовок к верхнему краю ───────────────────────────────
   Утверждена Германом 23.08 вместо прижатой к низу. Лейбл и заголовок
   стоят вверху колонки, подзаголовок с полосой — внизу.
   Прежняя раскладка остаётся доступной по ?fmt=bottom. */
.fmt__icons{top:9rem}
.fmt__stack{top:19.4rem; bottom:17.4rem}
.fmt__body{position:absolute; inset:0; display:flex; flex-direction:column}
/* распорка между верхней парой и нижней: подзаголовок прижимается к низу */
.fmt__mask:nth-child(2){margin-bottom:auto}

/* прежний вариант — всё прижато к низу колонки */
.fmt--bottom .fmt__icons{top:10rem}
.fmt--bottom .fmt__stack{top:auto; bottom:17.4rem}
.fmt--bottom .fmt__body{position:absolute; inset:auto 0 0 0; display:block}
.fmt--bottom .fmt__mask:nth-child(2){margin-bottom:0}

/* ══════════════════════════════ КЕЙСЫ ══════════════════════════════════
   Слайдер общий с главной. Там его элементы стоят в системе координат
   холста (top в сотнях rem), здесь холста нет — поэтому секция становится
   своей системой отсчёта, а координаты сдвигаются на 191.5rem вверх.
   Разметка и скрипт не тронуты, отличается только цвет акцента. */
/* Фон прозрачный, а сама секция лежит НАД первым экраном: тогда склон
   засвета виден сквозь неё, но остаётся под текстом. Если оставить секции
   свой чёрный фон, засвет ложится поверх и красит заголовок в голубой. */
.cases{
  /* 112, а не 123: снизу висел хвост от ленты логотипов, которая переехала
     в свою секцию. Без него шаг до заголовка форматов — ровно 210, как везде. */
  position:relative; z-index:3; width:100%; height:112rem;
  background:transparent; overflow:hidden;
}
.page-biz{background:#000}

/* Шапка блока: слева заголовок, справа число — раскладка прототипа.
   На главной они стоят наоборот, здесь берём порядок этой страницы. */
.cases-h2{
  position:absolute; left:6rem; top:21rem; width:78rem;
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:5.8rem; line-height:90%; letter-spacing:-.174rem;
  text-transform:uppercase;
}
.cases-stat{position:absolute; right:6rem; top:21.4rem; width:40rem; text-align:right}
.cases-stat__num{
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:6.4rem; line-height:90%; letter-spacing:-.228rem; white-space:nowrap;
}
.cases-stat__num i{font-style:normal; color:var(--biz)}
.cases-stat__cap{
  margin-top:1.4rem; font-size:1.5rem; line-height:150%; color:rgba(255,255,255,.6);
}

/* Слайдер сдвинут под шапку; все координаты — от верха секции */
.cases .case{top:37rem}
.cases .thumbs{top:90.2rem}
.cases .thumbs__fade{top:89.6rem}
.cases .case-count{top:90.6rem}
.cases .case-nav{top:96.8rem}

/* Лента логотипов — бегущая, как на главной, но без общего скрипта:
   дубль ряда и линейная анимация, шов не виден на стыке копий. */
/* Лента переехала из блока кейсов в собственную секцию: в прототипе она идёт
   после «Дарим незабываемые эмоции», а не сразу за кейсом. */
.cl-strip{position:relative; width:100%; background:#000; padding:6rem 0}
.cl-band{position:relative; left:0; right:0; overflow:hidden}
.cl-band__row{display:flex; width:288rem; animation:cl-run 38s linear infinite}
.cl-band__row img{flex:none; width:144rem; height:2.5rem; object-fit:contain}
@keyframes cl-run{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .cl-band__row{animation:none} }

/* ── Заголовок блока форматов ─────────────────────────────────────────── */
.fmt-head{
  position:relative; width:100%; background:#000;
  padding:21rem 6rem 6rem; text-align:center;
}
.fmt-head__h2{
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:6.4rem; line-height:90%; letter-spacing:-.228rem;
  text-transform:uppercase;
}

/* Белая кнопка на кадре: круг и выворот у неё завязаны на мадженту.
   Меняем на синий целиком, включая кайму ховера. */
.btn-white--biz .btn__ic::before{background:var(--biz)}
.btn-white--biz::after{background:var(--biz)}
.btn-white--biz:hover{background:var(--biz); box-shadow:none}

/* Активное превью подсвечиваем цветом направления, а не белым */
.cases .thumb.is-active .thumb__shot{box-shadow:0 0 0 .2rem var(--biz)}

/* ═════════════════ КОНТРОЛИРУЕМ КАЖДУЮ ДЕТАЛЬ ═════════════════════════
   Донор блока — titangatequity.com. Три яруса:
   1. фраза во всю ширину: первое предложение белым, продолжение серым
   2. широкий кадр по центру с короткой фразой поверх
   3. четыре колонки: гигантский призрачный номер, обрезанный волосяной
      линией, под линией контурная иконка, заголовок и описание.
   Пин здесь намеренно не берём — он уже занят блоком форматов выше.
   Скругления по канону сайта — .4rem, как у всех фото и плашек. */
/* Нижний отступ держит поднятый бейдж следующего блока: его ремешок заходит
   сюда и должен висеть в чёрном поле, а не поперёк врезки с кнопкой. */
.ctrl{position:relative; width:100%; background:#000; padding:21rem 6rem 30rem}

/* Ярус 1 — фраза-цитата */
.ctrl__h2{
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:6.4rem; line-height:92%; letter-spacing:-.192rem;
  text-transform:uppercase; max-width:150rem;
}
.ctrl__h2 i{font-style:normal}
/* серым стартует только продолжение фразы, скрипт заливает его белым */
.ctrl__h2 i .w{color:rgba(255,255,255,.22)}

/* Ярус 2 — кадр по центру.
   Кадр не обрезан рамкой, а растворяется в чёрном сверху и снизу: маска гасит
   само полотно, а не кладёт градиент поверх. Поверх был бы виден край плёнки. */
.ctrl__stage{
  /* во всю ширину экрана: с полями по бокам оставались вертикальные обрезы */
  position:relative; margin:9rem -6rem 0; height:58rem; overflow:hidden;
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0%,#000 22%,#000 74%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
          mask-image:
    linear-gradient(180deg,transparent 0%,#000 22%,#000 74%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  /* пересечение двух масок: гаснут все четыре края, а не только по вертикали */
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.ctrl__stage img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; will-change:transform;
}


/* Ярус 3 — четыре шага */
.ctrl__grid{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  list-style:none;
  /* колонки заходят на растворённый низ кадра: разрыв в 11rem читался
     как две несвязанные секции. Отрицательный отступ — не декор, а связка */
  margin-top:-7rem;
}
/* линия идёт сплошняком через все четыре колонки, а не кусками по колонке */
.ctrl__grid::before{
  content:''; position:absolute; left:0; right:0; top:8.2rem; height:.1rem;
  background:rgba(255,255,255,.12);
}
.ctrl__step{
  /* isolation обязателен: без него подложка с z-index:-1 уезжает
     под чёрный фон секции и ховер не виден вообще */
  position:relative; isolation:isolate; padding:0 4rem 4rem 0;
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.ctrl__step + .ctrl__step{padding-left:4rem; border-left:.1rem solid rgba(255,255,255,.12)}
/* подсветка колонки: еле заметная плашка позади содержимого, вылезает
   за паддинги, чтобы не липнуть к тексту. Всё, что выше — поверх неё. */
.ctrl__step::before{
  content:''; position:absolute; z-index:-1;
  left:-2rem; right:2rem; top:-2.6rem; bottom:0;
  border-radius:.4rem; background:rgba(255,255,255,0);
  /* Верхний край плашки заходит на кадр, и голая прозрачная заливка резала
     его прямой границей. Матовое стекло убирает этот стык: под плашкой
     кадр размывается, и она читается как панель поверх фотографии.
     Блюр держим на статичном слое — сама плашка не ездит, ездит колонка. */
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  transition:background .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease;
}
.ctrl__step + .ctrl__step::before{left:2rem; right:2rem}
.ctrl__step:hover{transform:translateY(-.8rem)}
/* цифра держится линии: колонка едет вверх, обрез остаётся на месте */
.ctrl__step:hover .ctrl__cut{transform:translateY(.8rem)}
.ctrl__cut{transition:transform .5s cubic-bezier(.19,1,.22,1)}
.ctrl__step:hover::before{
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.ctrl__step:hover .ctrl__ico{stroke:#fff}
.ctrl__ico{transition:stroke .4s ease}

/* Номер уходит под линию — приём донора. Ломались тут две вещи, обе чиним,
   а сам приём оставляем:
   1. коробка была ниже самого глифа, поэтому маска срезала цифру ЕЩЁ И
      СВЕРХУ. Теперь высота коробки равна отступу до линии, а цифра опущена
      абсолютом так, что сверху остаётся запас, а под линию уходит низ.
   2. на ховере колонка уезжала вверх вместе с маской, а линия оставалась на
      месте — обрез отрывался от неё и читался как вторая, случайная обрезка.
      Коробку с цифрой на ту же величину возвращаем назад (правило ниже). */
.ctrl__cut{display:block; position:relative; height:8.2rem; overflow:hidden}
.ctrl__num{
  position:absolute; left:0; bottom:-3.2rem;
  font-family:'Songer Condensed',sans-serif; font-size:11rem; line-height:1;
  letter-spacing:-.33rem; color:rgba(255,255,255,.14);
}
.ctrl__ico{
  display:block; margin-top:3.4rem; width:3.8rem; height:3.8rem;
  fill:none; stroke:var(--biz); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.ctrl__t{
  margin-top:8rem;
  font-size:2.6rem; font-weight:500; line-height:115%; letter-spacing:-.052rem;
}
.ctrl__d{
  margin-top:2.4rem;
  font-size:1.5rem; line-height:155%; color:rgba(255,255,255,.45);
}

/* ── Врезка под колонками ──────────────────────────────────────────────── */
.ctrl__cta{
  margin-top:6rem; display:flex; align-items:center; justify-content:space-between;
  gap:4rem; padding:4.4rem 4.8rem;
  border:.1rem solid rgba(255,255,255,.14); border-radius:.4rem;
}
.ctrl__cta-t{font-size:2.2rem; line-height:135%; letter-spacing:-.022rem}
.ctrl__cta .btn-pill{flex:none}

/* стартовые состояния появления — снимаются скриптом ctrl.js */
.ctrl.is-armed .ctrl__rise{opacity:0}

/* ═════════════════ ЗАКАДРОВАЯ ИНФРАСТРУКТУРА ══════════════════════════
   Донор — vastspace.com, механика снята замером: центр экрана целиком отдан
   предмету, вся периферия прижата к краям, позади гигантское слово-призрак
   (у донора 382 px против 12 px у технического списка — контраст ×32),
   вокруг предмета пунктирное кольцо.
   У донора кольцо и объект живут внутри WebGL-сцены; у нас кольцо — свой SVG,
   так им можно управлять с кода. Пин здесь тоже не берём. */
.bts{
  /* overflow видимый намеренно: ремешок бейджа заходит на блок выше */
  /* 🔴 Нижняя граница в rem обязательна: список вырос с четырёх пунктов
     до семи (правка Максима 25.08), и на окне 800 одной доли svh не хватало —
     список упирался в нижний блок вплотную, зазор уходил в ноль. */
  position:relative; min-height:max(100svh, 88rem); padding:10rem 6rem 7rem;
  background:#000; overflow:visible; z-index:2;
  display:flex; flex-direction:column; justify-content:space-between;
}

/* слово-призрак: во всю ширину, ярче снизу и тает кверху */
.bts__word span{display:inline-block}
.bts__word{
  /* кегль подбирается скриптом так, чтобы слово ровно легло по ширине
     контента — от левого края лейбла до правого края списка */
  position:absolute; left:6rem; right:6rem; top:50%;
  text-align:center; pointer-events:none; user-select:none; white-space:nowrap;
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:20vw; line-height:.78; letter-spacing:-.03em; text-transform:uppercase;
  background:linear-gradient(180deg, rgba(255,255,255,.01) 0%, rgba(255,255,255,.11) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  will-change:transform;
}

/* 🔴 Ни у слова, ни у кольца, ни у бейджа transform в css не пишем: gsap
   читает вычисленную матрицу как x/y в пикселях и складывает со своим
   yPercent — слой улетает за экран. Центрирование целиком в js. */
/* 🔴 Кольцо — картинка, а не svg. Вращающийся svg с пунктирной обводкой
   перерисовывается каждый кадр (замер: он один давал 87 тяжёлых кадров
   из 220, без него — ноль). Растр крутится на видеокарте бесплатно.
   Две коробки: внешняя держит центр и пятно, внутренняя вращается —
   на одном элементе css-свойство rotate применяется ДО transform,
   и центрирование в процентах уезжает в повёрнутых координатах. */
.bts__ring{
  /* Светлое пятно живёт фоном этого же элемента, а не отдельным слоем:
     каждый композиторский слой на ретине — это лишний проход по экрану,
     а четыре перекрывающихся слоя роняли блок до 30 fps. Градиент круглый,
     от вращения не меняется, так что совмещение бесплатное. */
  position:absolute; left:50%; top:50%; width:68rem; height:68rem;
  pointer-events:none;
}
/* 🔴 Пятно отдельным элементом, а не фоном кольца. Замер: когда градиент
   лежал фоном под вращающейся картинкой, он переклеивался каждый кадр —
   34 тяжёлых кадра из 165. Разнесли по соседям — ноль. */
.bts__haze{
  position:absolute; left:50%; top:50%; width:96rem; height:96rem;
  margin:-48rem 0 0 -48rem; pointer-events:none; will-change:opacity;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,255,255,.14) 0%, rgba(255,255,255,.075) 34%,
    rgba(255,255,255,.026) 60%, rgba(255,255,255,0) 100%);
}
/* 🔴 Обводка серая в самом ассете, а не белая под прозрачностью. Кольцо
   проходит по слову-призраку: две прозрачности складывались, и на буквах
   пунктир менял цвет. Плотный серый ведёт себя одинаково везде. */
/* Пробуем без кольца: пунктир спорил со словом-призраком и добавлял шума,
   а композицию держат бейдж, пятно света и слово. Разметка и ассет на месте —
   вернуть можно сменой одного значения. */
.bts__ring{display:none}
.bts__ring-i{
  display:block; width:100%; height:100%; opacity:1;
  will-change:transform; animation:bts-spin 90s linear infinite;
}
@keyframes bts-spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}

/* Обёртка ездит по скроллу, картинка внутри доворачивается на ховере.
   Один элемент на оба движения не годится: hover-твин перебивает scrub. */
/* Бейдж выровнен по кольцу не серединой картинки, а серединой самой
   карточки: в кадре она сидит ниже центра (замер по альфе — 64.8% высоты),
   поэтому картинку поднимаем на эту разницу. Ремешок уходит выше кольца. */
.bts__badge{
  /* 🔴 ширину задаём пропорцией: у абсолютной обёртки без width картинка
     с width:auto считается от самой обёртки и бейдж сплющивается по горизонтали */
  position:absolute; left:50%; top:50%; height:127rem; aspect-ratio:712/1347;
  pointer-events:none; will-change:transform;
  /* 🔴 transform тут не писать: gsap читает вычисленную матрицу как x/y
     в пикселях и складывает со своим xPercent/yPercent — бейдж улетает.
     Сдвиг целиком в js. Без js бейдж просто стоит от левого верхнего угла. */
}
.bts__badge img{
  display:block; width:100%; height:100%; object-fit:contain;
  /* 🔴 тень запечена в сам ассет. Через css filter:drop-shadow она
     пересчитывалась на каждом кадре скролла и роняла блок до 12 fps. */
}

/* ── периферия ────────────────────────────────────────────────────────── */
.bts__top,.bts__bot{position:relative; z-index:2; display:flex; justify-content:space-between; gap:6rem}
.bts__bot{align-items:flex-end}

.bts__label{font-size:1.3rem; letter-spacing:.117rem; text-transform:uppercase; color:rgba(255,255,255,.5)}
.bts__label i{display:block; margin-top:.6rem; font-style:normal; color:var(--biz)}

.bts__list{list-style:none; width:38rem; margin-top:-.6rem}
.bts__item{
  /* отступ ужат с 2.8rem: семь пунктов на прежнем шаге не оставляли воздуха */
  position:relative; padding:2.3rem 0 2.3rem 3.4rem; text-align:left;
  border-bottom:.1rem solid rgba(255,255,255,.12);
  font-size:1.6rem; line-height:140%; color:rgba(255,255,255,.62);
  transition:color .4s ease;
}
.bts__item:first-child{border-top:.1rem solid rgba(255,255,255,.12)}
/* маркер слева: точка разрастается в синюю на наведении */
.bts__item::before{
  content:''; position:absolute; left:.4rem; top:3.2rem;
  width:.6rem; height:.6rem; border-radius:50%; background:rgba(255,255,255,.3);
  transition:background .4s ease, transform .5s cubic-bezier(.19,1,.22,1);
}
.bts__item:hover{color:#fff}
.bts__item:hover::before{background:var(--biz); transform:scale(1.8)}

.bts__h2{
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:5.6rem; line-height:90%; letter-spacing:-.168rem; text-transform:uppercase;
  max-width:52rem;
}
.bts__bl .btn-pill{margin-top:3.4rem}
.bts__p{width:38rem; font-size:1.5rem; line-height:155%; color:rgba(255,255,255,.45)}

/* 🔴 Кнопка в потоке. У базовой `.btn-pill` в style.css зашиты
   `position:absolute`, координаты и ширина 32.3rem — она нарисована под холст
   главной. `position:static` это ломало дважды: разрастающийся круг
   (`::after`) считал координаты от далёкого предка и вырастал посреди
   страницы, а длинный текст не влезал в фиксированную ширину.
   Правильно — `relative` и ширина по содержимому. */
.ctrl__cta .btn-pill,
.bts__bl .btn-pill,
.rev__body .btn-pill{
  position:relative; left:auto; right:auto; top:auto; bottom:auto;
  width:auto; min-width:32.3rem; padding-right:1rem;
  /* база растягивает подпись и кружок по краям через space-between. При
     ширине по содержимому растягивать нечего, и подпись липла к кружку. */
  gap:2.8rem;
}

/* ═════════════════ ОТЗЫВЫ ═══════════════════════════════════════════════
   Карточка по прототипу: фото слева, справа аватар, шапка, цитата, кнопка.
   Стиль подтянут к блоку «За кадром» — чёрное поле, тонкие линии, крупный
   портрет на чёрном. Соседние карточки видны по краям, притушены и уведены
   назад. Размытие не берём: карточки едут, а движущийся blur пересчитывается
   каждый кадр — тот же капкан, что был с кольцом. */
/* Блок читается как продолжение «за кадром» — отступ сверху вдвое меньше
   обычного шага страницы. */
.rev{position:relative; padding:8rem 0 8rem; background:#000; overflow:hidden}



/* Стрелки — те же, что в блоке кейсов: разметка и поведение общие
   (`.case-nav` в style.css), меняем только положение и синий значок. */
.rev .case-nav{
  position:absolute; top:50%; margin-top:-2.75rem; z-index:4;
  left:auto;
}
.rev .case-nav--prev{left:3rem}
.rev .case-nav--next{right:3rem}

/* лента: активная карточка по центру, соседние выглядывают по краям */
.rev__stage{position:relative; width:100%}
.rev__track{
  display:flex; align-items:stretch; gap:3rem; list-style:none;
  transition:transform .9s cubic-bezier(.19,1,.22,1); will-change:transform;
}
.rev__card{
  flex:none; width:112rem; display:flex; min-height:52rem;
  border:.1rem solid rgba(255,255,255,.12); border-radius:.4rem; overflow:hidden;
  opacity:.28; transform:scale(.94); transform-origin:50% 50%;
  transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);
}
.rev__card.is-on{opacity:1; transform:scale(1)}

.rev__shot{position:relative; width:46%; flex:none; background:#0a0a0a}
.rev__shot img{width:100%; height:100%; object-fit:cover}
/* кадр уводится в чёрное к линии раздела — стыка со светлой половиной нет */
.rev__shot::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%);
}

.rev__body{display:flex; flex-direction:column; padding:5rem 5.4rem 5rem}
/* 🔴 Шапка отзыва каскадом, а не в строку. Было три колонки в один ряд:
   аватар / название / данные справа — и данные жались в узкую колонку,
   ломаясь дурными переносами («Генеральный директор,» + «Шакалида Е. Е.»
   на разных строках, а название рядом ещё и в три строки). Теперь справа
   от аватара одна колонка на всю ширину: название, под ним число участников,
   под ним кто говорит. Ширина названия больше не зависит от длины подписи.
   Одинаково на всех страницах — приём приехал со страницы тимбилдинга. */
.rev__who{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"av title" "av meta";
  align-items:start; column-gap:2.4rem; row-gap:1.4rem;
}
.rev__av{grid-area:av; width:8.8rem; height:8.8rem; border-radius:50%; object-fit:cover}
.rev__t{
  grid-area:title;
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  /* 🔴 102% давали наезд краткой у «Й» на «О» строкой выше — 1.9px по метрикам
     шрифта (check/diacritic.js). То же правило было в korporativy.css. */
  font-size:3.6rem; line-height:108%; letter-spacing:-.108rem; text-transform:uppercase;
}
/* Монограмма вместо портрета — для отзывов из благодарственных писем.
   🔴 Под настоящей подписью настоящего человека чужой стоковый портрет
   ставить нельзя, а живого фото директора у нас нет. Инициалы на плашке
   решают это честно и в деловой странице смотрятся уместнее лица.
   Приём уже работает на странице кейсов (.kb-quote__ava). */
/* Источник цитаты — отдельной строкой, а не хвостом внутри абзаца:
   «— из благодарственного письма…» слипалось с последним предложением
   и читалось как часть речи клиента. */
.rev__src{display:block; margin-top:1.4rem; font-size:1.3rem; line-height:150%; color:rgba(255,255,255,.38)}
.rev__av--mono{
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:.1rem solid rgba(255,255,255,.16);
  font-family:'Songer Condensed',sans-serif; font-size:3rem; line-height:1;
  letter-spacing:.06em; color:rgba(255,255,255,.62); text-transform:uppercase;
}
.rev__meta{
  grid-area:meta; text-align:left;
  font-size:1.4rem; line-height:160%; color:rgba(255,255,255,.5);
}
.rev__meta span{display:block}

/* подзаголовок цитатой — этого в прототипе нет, вытащенная суть отзыва */
.rev__lead{
  margin-top:4rem; font-size:2.4rem; line-height:130%; letter-spacing:-.048rem;
  text-wrap:balance;
}
.rev__txt{
  margin-top:2.2rem; margin-bottom:6rem; font-size:1.5rem; line-height:160%; color:rgba(255,255,255,.5);
}
.rev__body .btn-pill{margin-top:auto; align-self:flex-start}

/* индикаторы как в прототипе — полосками, а не точками */
.rev__dots{display:flex; gap:1rem; justify-content:center; margin-top:6rem}
.rev__dot{
  width:7rem; height:.3rem; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.16); overflow:hidden;
}
.rev__dot i{display:block; height:100%; width:100%; background:var(--biz); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s cubic-bezier(.19,1,.22,1)}
.rev__dot.is-on i{transform:scaleX(1)}

/* ═══════════ ХВОСТ СТРАНИЦЫ — БЛОКИ, ПЕРЕНЕСЁННЫЕ С ГЛАВНОЙ ═════════════
   «Бережём ваш бюджет», форма и футер собраны на главной абсолютом по холсту
   в 144rem: у каждой строки свой top, отсчитанный от верха страницы. Вместо
   того чтобы пересчитывать полсотни координат под другую страницу, сдвигаем
   всю систему координат: обёртка держит высоту полосы в потоке, а вложенное
   окно уезжает вверх ровно на исходный отступ блока. Координаты в style.css
   остаются едиными для обеих страниц — правка на главной не разъезжается.  */
.bz-why{position:relative; height:83.6rem; margin-top:12rem}
.biz-tail{position:relative; height:198.8rem; margin-top:8rem}
/* Окно выше самого блока и накрыло бы соседние секции — клики сквозь него */
.bz-why__in,.biz-tail__in{position:absolute; left:0; right:0; pointer-events:none}
.bz-why__in > *,.biz-tail__in > *{pointer-events:auto}
.bz-why__in{top:-297.4rem; height:381rem}
.biz-tail__in{top:-797.6rem; height:996.4rem}

/* Хвост главной темнеет по скроллу скриптом. Здесь страница чёрная с первого
   экрана — ставим те же ночные значения статикой (числа из theme2()). */
.page-biz{
  --t2-fg:#fff;
  --t2-dim:rgba(255,255,255,.6);
  --t2-soft:rgba(255,255,255,.5);
  --t2-field:rgba(255,255,255,.08);
  --t2-fieldtxt:#fff;
  --t2-line:rgba(255,255,255,.14);
}
/* Акцент направления вместо мадженты — только внутри перенесённых блоков.
   Точечно, а не глобально: маджента остаётся живой для остальной базы. */
.bz-why,.biz-tail{--mag:var(--biz)}

/* Поля на тёмном: базовые плейсхолдер и фокус собраны под белый фон и
   на чёрном проваливаются в подложку. */
.biz-tail .form__field::placeholder{color:rgba(255,255,255,.42)}
.biz-tail .form__field:focus{background:rgba(255,255,255,.14)}
.biz-tail .form__field.is-bad{
  background:rgba(41,150,238,.12); box-shadow:inset 0 0 0 .1rem rgba(var(--biz-rgb),.6);
}
/* Кнопка формы — синяя. Базовая на ховере выворачивается в чёрный, что на
   чёрном фоне читается как исчезновение: держим приём btn-pill--biz. */
.biz-tail .form__submit::after{background:#fff}
.biz-tail .form__submit:hover{background:#fff; box-shadow:inset 0 0 0 .1rem var(--biz)}
.biz-tail .form__submit:hover .btn__t{color:var(--biz)}

/* Мелочи футера, завязанные на маджентовый ховер базы */
.biz-tail .foot__nav a:hover,
.biz-tail .foot__phone:hover,
.biz-tail .foot__mail a:hover,
.biz-tail .foot__addr a:hover,
.biz-tail .foot__copy a:hover{color:var(--biz)}
.biz-tail .foot__addr a:hover{text-decoration-color:var(--biz)}

/* ═══════════ ПОПАПЫ НА СТРАНИЦЕ НАПРАВЛЕНИЯ ═════════════════════════════
   Разметка попапов общая с главной и собирается скриптом в конец body, куда
   класс страницы не достаёт. Метку вешаем на body, а перекрашиваем одной
   переменной: в базе к мадженте привязаны кикер, кнопка, чекбокс, ссылки
   и ховер телефона — перечислять их поимённо значит однажды забыть один. */
.t-biz .modal{--mag:var(--biz)}
/* Кнопка отправки: база выворачивает её в чёрный, здесь держим приём
   направления — на ховере белая с синей подписью и синей каймой. */
.t-biz .modal__send::after{background:#fff}
.t-biz .modal__send:hover{background:#fff; box-shadow:inset 0 0 0 .1rem var(--biz)}
.t-biz .modal__send:hover .btn__t{color:var(--biz)}
.t-biz .modal__f:focus{box-shadow:inset 0 0 0 .1rem rgba(var(--biz-rgb),.55)}

/* ═══════════ «ДАРИМ НЕЗАБЫВАЕМЫЕ ЭМОЦИИ» — БЛОК С ГЛАВНОЙ ════════════════
   Полоса холста главной с 89.1rem по 170.8rem: фото основателя, заголовок,
   лид, две цифры и подпись. Приём тот же, что у хвоста страницы — сдвиг
   системы координат вместо пересчёта каждой строки. */
/* Полоса обрезана с обеих сторон, а не только снизу. Сверху у кадра Максима
   пустые 12.5% высоты (замер по альфе ассета) — на холсте главной их держал
   соседний блок, здесь они превращались в провал под точками слайдера.
   Поэтому окно сдвинуто ещё на 10rem вниз, и на столько же убрана высота. */
.bz-maxim{position:relative; height:61rem; margin-top:2rem}
.bz-maxim__in{
  position:absolute; left:0; right:0; top:-99.1rem; height:170.8rem;
  /* окно вдвое выше полосы и накрыло бы первый экран — клики сквозь него */
  pointer-events:none;
}
.bz-maxim__in > *{pointer-events:auto}
/* акцент у цифр — синий направления, а не маджента базы */
.bz-maxim{--mag:var(--biz)}

/* ══════════ ШАГ СТРОК В КРУПНЫХ ЗАГОЛОВКАХ ══════════════════════════════
   Правка Максима 01.09.2026: «везде, где есть вторая строчка, состыковки
   не очень». Формально буквы не пересекаются — детектор наездов даёт ноль,
   но у Songer бревис «Й» поднимается на .915 кегля, а шаг стоял .88–.90.
   Между строками не остаётся воздуха, и глаз читает это как касание.
   Ставим .96: краткая проходит с запасом, набор не рассыпается.

   🔴 Заголовки прижаты низом (bottom), поэтому рост шага уводит верхнюю
   строку вверх, а не двигает всё вниз — соседние блоки остаются на месте. */
.hero__h1{line-height:96%}
.why-h2, .pe-h2, .form-h2, .fm-h2, .opt__h2, .care__h2,
.bts__h2, .events-h2, .emo-h2, .cl-h2, .viz__h2, .prog__h2{line-height:96%}
.maxim-h2, .ctrl__h2{line-height:96%}

/* 🔴 Заголовок формы стоит сверху (top), а не прижат низом: выросший шаг
   уводит вторую строку вниз, и она садится на подводку. Поднимаем блок
   ровно на прирост одного интервала (76 × .08 = 6.1px ≈ .61rem), чтобы
   низ заголовка остался там же, где был. */
.form-h2{margin-top:-.61rem}

/* Кейсы: кружок «Хочу так же», счётчик и ссылка на видео — в цвете
   направления, а не в розовом главной (обратка Германа 03.09, скрин с
   телефона). Мобильный трек .mcases живёт внутри .cases, наследует. */
.cases{--mag:var(--biz)}