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

:root{
  --biz:#43bf5a;
  --biz-rgb:67,191,90;
  --dir-rgb:67,191,90;   /* цвет направления для общих блоков в 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,.88) 0%,
      rgba(0,0,0,.74) 6%,
      rgba(0,0,0,.50) 13%,
      rgba(0,0,0,.24) 21%,
      rgba(0,0,0,.08) 27%,
      rgba(0,0,0,0)   34%),
    linear-gradient(0deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.82) 12%,
      rgba(0,0,0,.58) 24%,
      rgba(0,0,0,.30) 36%,
      rgba(0,0,0,.12) 46%,
      rgba(0,0,0,0)   58%);
}

/* Засвет намеренно выходит за нижнюю грань первого экрана и заходит на кейсы:
   иначе на стыке видна ровная линия обреза. Резать было нужно, пока следующей
   секцией шли форматы с их чёрной половиной; сейчас там кейсы, и склон
   засвета работает как переход между блоками. */
.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;
}

/* Награда прижата к заголовку. На бизнес-событиях заголовок в четыре строки
   и её место посчитано от них; здесь строк три, и прежние 34rem оставляли
   между плашкой и первой строкой дыру в полтора кегля. Считаем от верха
   заголовка: 4.4 низ + три строки по 6.92 = 25.2, плюс волосяной зазор. */
/* Межстрочный шаг заголовка вырос на .07em (правка наездов Й/Ё, 26.08.2026),
   заголовок прижат к низу — значит верхняя строка поднялась. Плашку поднимаем
   на ту же величину: два интервала × .07 × 7.692rem = 1.08rem, иначе воздух
   между наградой и первой строкой съедается вдвое. */
/* 31.4, а не 28.22: со строкой «2 место» плашка садилась на заголовок
   (обратка Германа 01.09 — «дай воздуха») */
.page-biz .award{bottom:31.4rem}

/* Ссылка шапки: текст прототипа длиннее базового, поэтому у неё своя ширина
   и своя позиция стрелки — иначе стрелка ложится на последнее слово.
   Ссылка стала на 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}

/* Подзаголовок — дословно из прототипа, место наше: справа, как на главной.
   Награда переехала влево, колонка вернулась к ритму главной: строка + кнопка. */
/* Подзаголовок набран двумя строками равной длины — в 40.6rem фраза
   ломалась на «вовлечь / всю команду / без принуждения», и правый край
   рвался ступенькой. Колонка расширена до 46rem: правый край всё ещё
   не доходит до поля страницы (87.8 + 46 = 133.8 при поле 138). */
.page-biz .hero__lead{
  left:87.8rem; bottom:15.1rem; width:52rem;
}

/* Кнопка направления — синяя вместо маджентовой.
   В базе к мадженте привязаны четыре вещи разом: фон, цвет шеврона, заливка
   разрастающегося круга и цвет подписи на ховере. Перебиваем все четыре —
   иначе при наведении по краю кружка проступает розовая каёмка. */
.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)}

/* ----------------------------------------------------------- НАГРАДА --- */
/* Вариант А: горизонтальная строка над заголовком, по его левому краю.
   Знак / вертикальная волосяная линия / две строки текста. Подложки нет,
   всё лежит прямо на кадре. Ширина зажата шириной первого слова заголовка —
   номинация переносится, а не тянется вправо. */
.award{
  position:absolute; left:6.1rem; bottom:34rem;
  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:90%; 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 видимый намеренно: ремешок бейджа заходит на блок выше */
  position:relative; min-height:126svh; padding:14rem 6rem 12rem;
  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{
  position:relative; padding:2.8rem 0 2.8rem 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.7rem;
  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 % оставляли наезд «Й» на «Д» в 0,7 px — детектор ловит, глаз почти
     нет, но правило одно на весь сайт. 104 % закрывает с запасом. */
  font-size:3.6rem; line-height:106%; 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)}

/* ═══════════ СВЕТЛЫЙ НИЗ СТРАНИЦЫ ═══════════════════════════════════════
   Пробный режим, включается классом is-light на .stage. Первый экран
   остаётся чёрным кадром, а со второго блока страница уходит в светло-серое:
   тимбилдинг — это улица и день, и держать его в ночном свете неправильно.
   Смена света здесь работает как событие, ровно по правилу проекта: граница
   проходит по стыку кадра и блока кейсов, а не размазана градиентом.
   Всё собрано отдельной секцией, чтобы тёмный вариант можно было вернуть
   снятием одного класса. */

.page-biz.is-light{
  background:#f2f2f2;
  /* Блок «Бережём бюджет» с главной покрашен переменными сцены */
  --tone-bg:#f2f2f2;
  --tone-fg:#0f0f0f;
  --tone-dim:rgba(0,0,0,.62);
  --tone-line:rgba(0,0,0,.12);
  /* Хвост (форма, футер) возвращаем к его родным дневным значениям —
     они и есть база style.css, здесь просто снимаем ночное переопределение */
  --t2-fg:#0f0f0f;
  --t2-dim:rgba(0,0,0,.6);
  --t2-soft:rgba(0,0,0,.45);
  --t2-field:#e7e7e7;
  --t2-fieldtxt:#131313;
  --t2-line:rgba(0,0,0,.1);
}

/* Кадр держит свою ночь сам и не пускает засвет на светлое: на белом фоне
   слой в режиме screen ничего не добавляет, зато оставляет мутный край. */
.page-biz.is-light .hero{background:#000; overflow:hidden}

/* ── Кейсы ── */
.page-biz.is-light .cases{background:#f2f2f2}
.page-biz.is-light .cases-h2,
.page-biz.is-light .cases-stat__num{color:#0f0f0f}
.page-biz.is-light .cases-stat__cap{color:rgba(0,0,0,.6)}
.page-biz.is-light .case-count b{color:#0f0f0f}
.page-biz.is-light .case-count span{color:rgba(0,0,0,.45)}
.page-biz.is-light .thumb__cap{color:rgba(0,0,0,.62)}
/* Растворение ленты превью собрано под чёрный фон */
.page-biz.is-light .thumbs__fade{
  background:linear-gradient(90deg, rgba(242,242,242,0) 0%, rgba(242,242,242,1) 78%);
}

/* ── Лента логотипов ── */
/* Ассет белый и на светлом исчезает: выворачиваем в чёрный. Логотипы
   одноцветные, поэтому инверсия даёт ровно тот же знак, а не негатив. */
.page-biz.is-light .cl-strip{background:#f2f2f2}
.page-biz.is-light .cl-band__row img{filter:invert(1); opacity:.72}

/* ── Отзывы ── */
.page-biz.is-light .rev{background:#f2f2f2}
.page-biz.is-light .rev__card{border-color:rgba(0,0,0,.12); background:#fff}
.page-biz.is-light .rev__t{color:#0f0f0f}
.page-biz.is-light .rev__meta{color:rgba(0,0,0,.5)}
.page-biz.is-light .rev__lead{color:#0f0f0f}
.page-biz.is-light .rev__txt{color:rgba(0,0,0,.55)}
/* Монограмма и подпись под цитатой — светлые варианты. В базе они белые
   по чёрному полю; на светлом полотне тимбилдинга без этих двух правил
   и кружок, и строка источника просто исчезают. */
.page-biz.is-light .rev__av--mono{
  background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); color:rgba(0,0,0,.5);
}
.page-biz.is-light .rev__src{color:rgba(0,0,0,.4)}
/* Индикаторы отзывов. В базе неактивная полоска белая — приём чёрного
   поля, на светлом полотне её просто нет. Берём цвет направления и
   разводим активную и неактивную прозрачностью, а не разными цветами. */
.page-biz.is-light .rev__dot{background:rgba(var(--biz-rgb),.24)}
.page-biz.is-light .rev__dot i{background:var(--biz)}
.page-biz.is-light .rev__dot.is-on i{background:var(--biz)}

/* ── «Дарим незабываемые эмоции» ── */
/* Кадр основателя вырезан по силуэту и растворяется в чёрный: под светлым
   фоном растворение надо перекрасить, иначе внизу висит тёмный шлейф. */
/* Портреты пересняты на светлом фоне — сам фон и есть источник света,
   обтравки больше нет. Точка белого у кадров подогнана к полотну страницы,
   а остаток стыка снимает мягкая маска по краям: прямоугольник фотографии
   не должен читаться ни одной гранью.
   Растворение внизу ослаблено и опущено: раньше оно доходило до шеи и
   мутило лицо. Теперь начинается по одежде и только доводит её до полотна. */
.page-biz.is-light .maxim-photo{
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 5%, #000 72%, transparent 87%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 5%, #000 72%, transparent 87%);
          mask-composite:intersect;
}
/* 🔴 Почему стык не лечился градиентом. Резала кадр не маска и не
   растворение, а ФОН СЛЕДУЮЩЕЙ СЕКЦИИ: окно этого блока выше самой
   полосы и выступает за неё, а лента логотипов идёт после и закрашивает
   выступ ровной горизонтальной линией. Сколько ни тяни градиент ниже —
   он оказывался уже под чужим фоном.
   Считаем по-честному: полоса .bz-maxim высотой 61rem, окно сдвинуто
   вверх на 99.1rem, значит линия обреза лежит на 160.1rem системы окна.
   Растворение обязано добрать до сплошного ДО неё — к 159.5rem, тогда
   резать уже нечего. Начинается оно по груди, на лицо не заходит. */
.page-biz.is-light .maxim-fade{
  top:130rem; height:30rem;
  background:linear-gradient(180deg,
    rgba(242,242,242,0) 0%,
    rgba(242,242,242,.22) 22%,
    rgba(242,242,242,.55) 45%,
    rgba(242,242,242,.82) 68%,
    rgba(242,242,242,.96) 86%,
    rgba(242,242,242,1) 98%);
}
/* Портрет у формы — та же логика краёв */
.page-biz.is-light .maxim-form{
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 5%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 5%, #000 88%, transparent 100%);
          mask-composite:intersect;
}
.page-biz.is-light .maxim-h2,
.page-biz.is-light .maxim-name,
.page-biz.is-light .stat__num{color:#0f0f0f}
.page-biz.is-light .maxim-lead,
.page-biz.is-light .stat__cap{color:rgba(0,0,0,.6)}
.page-biz.is-light .maxim-role{color:rgba(0,0,0,.45)}
.page-biz.is-light .maxim-sign{filter:invert(1)}

/* ── Форма ── */
/* Поля возвращаются к дневной базе: ночные плейсхолдер и фокус выше
   заданы для чёрного фона и на светлом становятся невидимыми. */
.page-biz.is-light .biz-tail .form__field::placeholder{color:rgba(0,0,0,.42)}
.page-biz.is-light .biz-tail .form__field:focus{background:#dedede}

/* Стык светлого полотна с футером. Футер держим ночным: страница уходит
   в тот же чёрный, с которого началась, и низ не растворяется в сером.
   Его собственные цвета (белый текст, светлые линейки) заданы в базе
   глобально — здесь нужна только подложка. */
.page-biz.is-light .foot{background:#0d0d0d}

/* Подпись у портрета в форме: на главной она лежит на тёмном полотне,
   здесь под ней светлое — иначе белым по светло-серому. */
.page-biz.is-light .maxim-form__name{color:#0f0f0f}
.page-biz.is-light .maxim-form__role{color:rgba(0,0,0,.5)}

/* ── Кнопка направления на светлом ───────────────────────────────────────
   База выворачивает пилюлю на ховере в белый: на чёрном это работает как
   вспышка, а на светлой карточке кнопка просто исчезает — белое на белом.
   Здесь ховер уводим в тёмный зелёный: подпись и кружок остаются светлыми,
   кнопка на секунду становится плотнее, а не растворяется.
   Первый экран не трогаем — там кнопка лежит на фотографии, и белый ховер
   на ней читается правильно. */
.page-biz.is-light .btn-pill--biz:hover{
  background:#2c8f43; box-shadow:none;
}
.page-biz.is-light .btn-pill--biz:hover .btn__t{color:#fff}
.page-biz.is-light .btn-pill--biz::after{background:#2c8f43}
.page-biz.is-light .btn-pill--biz .btn__ic::before{background:#fff}
.page-biz.is-light .btn-pill--biz:hover .btn__ic{color:#2c8f43}
/* Кадр первого экрана — обратно на белый ховер базы */
.page-biz.is-light .hero .btn-pill--biz:hover{background:#fff; box-shadow:inset 0 0 0 .1rem var(--biz)}
.page-biz.is-light .hero .btn-pill--biz:hover .btn__t{color:var(--biz)}
.page-biz.is-light .hero .btn-pill--biz::after{background:#fff}
.page-biz.is-light .hero .btn-pill--biz:hover .btn__ic{color:var(--biz)}

/* Кадр в карточке отзыва затемнялся к линии раздела — приём для чёрной
   карточки. На белой он даёт грязный серый клин у стыка. */
.page-biz.is-light .rev__shot::after{
  background:linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 40%);
}
.page-biz.is-light .rev__shot{background:#e9e9e9}

/* ── Карточка кейса ──────────────────────────────────────────────────────
   ~~Пробовали вывернуть вуаль в белый, чтобы кадр растворялся в полотне.~~
   [неактуально, 24.08.26] Герман: «из-за этого градиента прям грязно,
   дёшево выглядит» — светлое растворение съедало кадр и мылило стык.
   Держим родной тёмный градиент карточки: текст белый, кнопка белая.
   На тёмном поле фотография остаётся плотной, а карточка читается
   как отдельный экран внутри светлой страницы — смена света работает
   так же, как на стыке первого экрана.

   🔴 Что решено на будущее (Герман, 24.08): когда пойдём наполнять кейсы
   направления, продление кадра вправо красим не в чёрное и не в белое,
   а в доминирующий цвет самой фотографии — зелёный для поляны, коричневый
   для зала и так далее. Тогда у каждого кейса свой градиент, и карточка
   не спорит с кадром. Сейчас не делаем: кейсы ещё не отобраны. */

/* ── Попап на светлой странице ───────────────────────────────────────────
   Кнопка отправки в базе выворачивается на ховере в белый, а поле попапа
   белое: кнопка исчезала ровно так же, как исчезала на светлых карточках.
   Уводим в тот же тёмный зелёный, что и на странице. */
.t-biz .modal__send:hover{background:#2c8f43; box-shadow:none}
.t-biz .modal__send:hover .btn__t{color:#fff}
.t-biz .modal__send::after{background:#2c8f43}
.t-biz .modal__send .btn__ic::before{background:#fff}
.t-biz .modal__send:hover .btn__ic{color:#2c8f43}

/* ── Зазор от первого экрана до блока кейсов ─────────────────────────────
   Все координаты внутри секции отсчитаны от её верха, поэтому шапку и
   слайдер поднимаем одинаково — на 8rem — и на столько же режем высоту
   секции. Ритм внутри блока не меняется, уходит только пустая полоса
   под кадром, которая на светлом читалась как провал. */
.cases{height:104rem}
.cases-h2{top:13rem}
.cases-stat{top:13.4rem}
.cases .case{top:29rem}
.cases .thumbs{top:82.2rem}
.cases .thumbs__fade{top:81.6rem}
.cases .case-count{top:82.6rem}
.cases .case-nav{top:88.8rem}

/* ── Ссылка на видеопрезентацию в правой колонке первого экрана ──────────
   ~~Стояла столбиком над «Смотреть кейсы».~~ [неактуально, 24.08.26]
   Кейсы с первого экрана убраны: две ссылки рядом делили внимание, а блок
   кейсов и так идёт следующим. Видео встало на их место — по центру кнопки
   (кнопка 4.6 + половина её 6.3 минус половина строки 2.5 = 6.5).
   Иконка своя, play вместо стрелки. */
.link-cases--video{bottom:6.5rem}
.link-cases--video .link-cases__arw{
  left:11.3rem; top:.1rem; width:1.5rem; height:1.5rem;
}
.link-cases--video .link-cases__arw img{width:100%; height:100%}

/* ═══════════ «ОТДЫХАЙТЕ ВМЕСТЕ С КОМАНДОЙ» ═══════════════════════════════
   Механика колонок со страницы корпоративов, блок «Решаем HR-задачи»:
   крупный номер, обрезанный линией, контурная иконка, заголовок, описание.
   Здесь она переложена на светлое полотно и на пять пунктов вместо четырёх.

   🔴 Про сетку. Пятая колонка в один ряд к четырём не встаёт: на 132rem
   рабочей ширины колонка вышла бы по 26rem, и заголовки поехали бы в
   четыре строки — пришлось бы резать кегль, а он общий для всей серии
   страниц. Поэтому сетка считается в ШЕСТИ долях: верхний ряд — три
   колонки по две доли, нижний — две по три. Ряды выглядят как один блок,
   а не как строка с дыркой справа, и кегль остаётся каноническим. */
.care{
  position:relative; width:100%;
  padding:16rem 6rem 4rem;
  display:grid; grid-template-columns:32.1rem 1fr; column-gap:9.9rem;
}
.care__lead{
  grid-column:1; align-self:end; padding-bottom:1.2rem;
  font-size:1.6rem; line-height:140%; color:rgba(0,0,0,.6);
}
.care__h2{
  grid-column:2;
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:6.8rem; line-height:88%; letter-spacing:-.204rem;
  text-transform:uppercase; color:#0f0f0f;
}

.care__grid{
  grid-column:1 / -1; margin-top:9rem;
  display:grid; grid-template-columns:repeat(6,1fr);
  row-gap:9rem; list-style:none;
}
.care__step{grid-column:span 2}
.care__step--wide{grid-column:span 3}

/* Колонка целиком уезжает вверх на ховере — вместе с номером, поэтому его
   посадка относительно линии не меняется (см. компенсацию у .care__cut). */
/* 🔴 Поднимается только содержимое НИЖЕ линии. Раньше ехала вся колонка
   целиком, и вместе с ней уезжали линия ряда и номер: номер приходилось
   гасить встречным сдвигом, а линия всё равно рвалась относительно соседей
   — цифра «выбегала» из-за линии. Линия и номер теперь стоят намертво,
   двигается только иконка с текстом. */
.care__step{
  position:relative; z-index:1; isolation:isolate;
  padding:0 4rem 0 0;
}
.care__t,.care__d{
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.care__step:hover .care__ico,
.care__step:hover .care__t,
.care__step:hover .care__d{transform:translateY(-.8rem)}
/* Вертикальные разделители — только у тех, кто не первый в своём ряду.
   Ряды разной длины, поэтому перечисляем поимённо, а не через + */
.care__step:nth-child(2),
.care__step:nth-child(3),
.care__step:nth-child(5){padding-left:4rem; border-left:.1rem solid rgba(0,0,0,.12)}

/* Линия ряда: у каждой ячейки своя, от края до края — на стыках они
   сходятся в одну сплошную. Отдельным абсолютным слоем не делаем: рядов
   два, и слой пришлось бы позиционировать по высоте первого ряда. */
.care__step::after{
  content:''; position:absolute; z-index:2; left:0; right:0; top:5.2rem;
  height:.1rem; background:rgba(0,0,0,.12);
}
/* Подсветка колонки: мягкое стекло позади содержимого, не плашка поверх */
.care__step::before{
  content:''; position:absolute; z-index:-1;
  left:-2rem; right:2rem; top:-2.6rem; bottom:-2.6rem;
  border-radius:.6rem; background:rgba(0,0,0,0);
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  transition:background .4s ease, backdrop-filter .4s ease,
             -webkit-backdrop-filter .4s ease;
}
.care__step:nth-child(2)::before,
.care__step:nth-child(3)::before,
.care__step:nth-child(5)::before{left:2rem; right:2rem}
.care__step:hover::before{
  background:rgba(0,0,0,.035);
  -webkit-backdrop-filter:blur(1.2rem); backdrop-filter:blur(1.2rem);
}

/* Номер уходит в линию снизу. Интерлиньяж ровно 1: при меньшем строчный
   бокс становится ниже глифа, цифра торчит выше него и overflow срезает
   ей макушку — грабля с бизнес-страницы, разобранная 24.08. */
.care__cut{display:block; height:5.2rem; overflow:hidden}
.care__num{
  display:block; margin-top:-1rem; line-height:1;
  font-family:'Songer Condensed',sans-serif; font-size:11rem;
  letter-spacing:-.33rem; color:rgba(0,0,0,.09);
}

/* 🔴 Переход задан ОДНИМ свойством. Раньше ниже стояло отдельное
   transition:stroke, и оно затирало переход трансформа, заданный выше
   для всей тройки: иконка не ехала, а телепортировалась на новое место,
   пока заголовок и текст плыли. */
.care__ico{
  display:block; width:3.2rem; height:3.2rem; margin-top:4.6rem;
  fill:none; stroke:rgba(0,0,0,.45); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .5s cubic-bezier(.19,1,.22,1), stroke .4s ease;
}
.care__step:hover .care__ico{stroke:var(--biz)}

.care__t{
  margin-top:6rem;
  font-size:2.4rem; font-weight:600; line-height:120%; letter-spacing:-.048rem;
  color:#0f0f0f;
}
.care__d{
  margin-top:2.4rem;
  font-size:1.5rem; line-height:155%; color:rgba(0,0,0,.55);
}

/* 🔴 В широких ячейках нижнего ряда сама колонка шире, а строка текста —
   нет. Без ограничения строки внизу выходили в полтора раза длиннее
   верхних, и один блок читался как два разных: сверху узкая колонка,
   снизу газетный абзац. Держим одну меру строки на весь блок, лишнюю
   ширину отдаём воздуху справа. */
.care__step--wide .care__t,
.care__step--wide .care__d{max-width:40rem}

/* ═══════════ «АДАПТИРУЕМ СЦЕНАРИИ ПРОГРАММ» ══════════════════════════════
   Залипающий экран: пока идёт скролл, пять карточек проезжают по дуге.
   Карточка — тот же объект, что подсказка под курсором в блоке «Бережём
   ваш бюджет»: акварельные пятна, зерно, микрологотип, подпись капсом.
   Класс .viz переиспользуем как есть, перебивая только позиционирование —
   в базе он fixed, потому что там ходит за курсором. */
.prog{position:relative; width:100%; height:100vh; overflow:hidden}
.prog__in{position:relative; width:100%; height:100%}

/* Шапка собрана как у блока «Отдыхайте вместе с командой» ниже: слева
   узкая колонка подзаголовка, справа крупный заголовок.

   🔴 Заголовок держим строго в две строки. На прежнем кегле «культуру»
   срывалось третьей строкой и висело одиноким словом. Кегль опущен,
   трекинг поджат, колонка расширена до правого поля — фраза ложится
   двумя строками почти равной длины.

   Подзаголовок выровнен по нижней линии заголовка, как в остальных
   блоках страницы. Обе величины считаются от одной переменной, иначе
   на низком окне заголовок уезжает вверх, а подзаголовок остаётся. */
.prog{--prog-top:min(13rem, 11vh)}
.prog__h2{
  position:absolute; left:48rem; top:var(--prog-top); width:90rem; z-index:3;
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:6rem; line-height:90%; letter-spacing:-.24rem;
  text-transform:uppercase; color:#0f0f0f;
}
/* высота заголовка 2 строки × 5.4rem = 10.8; высота лида 4 строки × 2.24 = 8.96.
   🔴 Лид стал длиннее 25.08: текст поставлен дословно по прототипу «Финал —
   23 июня» (правка Максима #819486). Замер на 1440: строки 309/319/271/302 px
   при колонке 321 — ни одного висячего слова, в колонку влезает. Ширину не
   трогать: справа на 48rem начинается заголовок, зазор всего 6.9rem. */
.prog__lead{
  /* 🔴 Базовая линия первой строки лида поставлена на базовую линию ВТОРОЙ
     строки заголовка. Замер по чернилам: база лида сидела на 159, база
     второй строки заголовка на 230 — лид висел выше и связка с заголовком
     не читалась. Величина сдвига подобрана замером по чернилам, а не
     расчётом по метрикам: 4.1 + 5.2 = 9.3rem. */
  position:absolute; left:6rem; top:calc(var(--prog-top) + 9.3rem);
  width:32.1rem; z-index:3;
  font-size:1.6rem; line-height:140%; color:rgba(0,0,0,.6);
}

/* Точка захвата под подзаголовком. Живёт в левой колонке, там же где лид,
   и целиком помещается НАД дугой: связка карточек идёт по нижней половине
   экрана, её верх на 1440×900 — примерно 496-я строка, а низ приписки —
   335-я. На низких окнах дуга поднимается вместе с карточками, поэтому
   зазор считался и там: при 700 остаётся ещё 27 пикселей. */
/* Лид-магнит живёт ЗА пином, отдельной строкой под блоком — см. .prog-out
   ниже. Внутри пина ему места нет: дуга к краям опускается почти до низа
   экрана, карточки перекрывали кнопку на 5–61 px. */
.prog-out{
  position:relative; padding:7rem 6rem 1rem; text-align:center; z-index:3;
}
.prog-out__cta{
  position:relative; left:auto; right:auto; top:auto; bottom:auto;
  display:inline-flex; width:auto; height:5.4rem;
  padding:.8rem .8rem .8rem 2.8rem; gap:1.6rem;
}
.prog-out__cta .btn__t{font-size:1.4rem}
.prog-out__cta .btn__ic,.prog-out__cta .btn__ic .chev{width:3.8rem; height:3.8rem}
.prog-out__cta::after{width:3.8rem; height:3.8rem; margin-top:-1.9rem}
.prog-out__note{
  margin-top:1.6rem;
  font-size:1.3rem; line-height:140%; color:rgba(0,0,0,.42);
}
/* ~~Скрытие приписки на низких окнах~~ [неактуально, 25.08.26] Было нужно,
   пока кнопка с припиской стояли в левой колонке и туда заходила дуга.
   После переноса под связку места хватает на всех высотах. */

/* Траектория и поле карточек делят одну систему координат: плагин
   выравнивает карточку по точке пути, и если размеры окон разойдутся —
   разъедется вся дуга. Оба слоя растянуты по секции. */
.prog__path,
.prog__cards{position:absolute; inset:0; width:100%; height:100%}
.prog__path{pointer-events:none; overflow:visible}
.prog__path path{stroke:none}
.prog__cards{pointer-events:none}

/* 🔴 Карточка ограничена и по ширине окна, и по его ВЫСОТЕ. Размеры на
   сайте живут в rem, а rem считается от ширины — на низком ноутбуке
   карточка в 33rem занимала почти половину высоты экрана, и связка на
   дуге переставала помещаться: карточки «открывались снизу».
   Пропорцию держит aspect-ratio, поэтому кадр не искажается. */
.prog__card{
  position:absolute; left:0; top:0;
  width:auto; will-change:transform;
}
/* Базовый .viz живёт на курсоре и потому fixed и прозрачный.
   Здесь он обычный элемент внутри карточки. */
.prog__viz{
  position:relative; left:auto; top:auto;
  height:min(38rem, 48vh); width:auto; aspect-ratio:27 / 33;
  opacity:1;
}
.prog__viz .viz__cap{
  top:9rem; font-size:3.6rem; line-height:94%;
}
.prog__viz .viz__mark{top:3.4rem; width:3.6rem}
/* Кадр карточки — сгенерённая акварель. Зерно и разводы уже внутри
   изображения, поэтому слои .viz__paint и .viz__grain здесь не нужны:
   от базового .viz остаётся только рамка, обрезка и типографика. */
.prog__art{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:inherit;
}
/* Подпись стоит на небе, а небо у разных кадров разной плотности: на
   охряном и терракотовом белый капс садился на светлую полосу и терял
   край. Кладём тот же приём, что на первом экране, — лёгкое притемнение
   самого кадра сверху. Не плашка и не тень у букв: и то, и другое на
   этом сайте запрещено. */
.prog__viz::before{
  content:''; position:absolute; inset:0; z-index:2; border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(0,0,0,.20) 0%, rgba(0,0,0,.13) 30%, rgba(0,0,0,.04) 48%, rgba(0,0,0,0) 62%);
  pointer-events:none;
}
.prog__num{
  position:absolute; left:0; right:0; bottom:2rem; z-index:3; text-align:center;
  font-size:1.2rem; letter-spacing:.12rem; color:rgba(255,255,255,.7);
}

/* Без анимации карточки просто стоят в ряд — блок остаётся читаемым */
@media (prefers-reduced-motion:reduce){
  .prog{height:auto; padding:14rem 6rem 10rem}
  .prog__h2,.prog__lead{position:relative; left:auto; right:auto; top:auto}
  .prog__lead{margin-top:2.4rem}
  .prog__path{display:none}
  .prog__cards{position:relative; inset:auto; height:auto; margin-top:8rem;
    display:flex; gap:2.4rem; flex-wrap:wrap}
  .prog__card{position:relative}
}

/* Строка «Читать письмо целиком» на светлом полотне тимбилдинга. В базе она
   белая по чёрному, здесь без правки исчезает совсем — проверено 31.08.2026. */
.page-biz.is-light .rev__open{color:rgba(0,0,0,.55)}
.page-biz.is-light .rev__open span{border-bottom-color:rgba(0,0,0,.22)}
.page-biz.is-light .rev__open:hover{color:#0f0f0f}

/* ~~Поднимали шаг .rev__t до 1.09 против наезда «Й»~~ [неактуально, 31.08.26 —
   наезд от увеличения шага вырос с 0.7 до 1.7px, значит он не между строками
   одного заголовка. Разбираться отдельно, вслепую не трогаем.] */

/* Логотип клиента в карточке отзыва. Файлы — белые силуэты под тёмное
   полотно; на светлой странице тимбилдинга их просто не видно. Тот же приём,
   что у ленты логотипов выше. */
.page-biz.is-light .rev__logo{filter:invert(1)}
.page-biz.is-light .case__logo{filter:invert(1)}

/* ══════════ ШАГ СТРОК В КРУПНЫХ ЗАГОЛОВКАХ ══════════════════════════════
   Правка Максима 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)}