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

:root{
  --korp:#8b5cf6;
  --korp-rgb:139,92,246;
  --dir-rgb:139,92,246;   /* цвет направления для общих блоков в style.css */
}

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

.page-korp{background:#000}

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

/* Затемнение мягче, чем на главной: кадр и без того тёмный, лишний слой
   съедал бы лучи. Держим только края — под шапку и под нижний ряд текста. */
.page-korp .hero__scrim{
  background:
    /* 🔴 Мягкое пятно под плашкой награды. Нижний скрим к её высоте уже
       почти сошёл на нет, и на светлом кадре золотой пазл не читался:
       замер по кадру давал яркость фона 102 при разбросе 48, четверть
       пикселей ярче 120. Это не подложка — растянутый эллипс без границы,
       затухает шестью ступенями, на глаз воспринимается как естественный
       спад света в углу зала. */
    radial-gradient(66% 42% at 16% 66%,
      rgba(0,0,0,.84) 0%,
      rgba(0,0,0,.78) 20%,
      rgba(0,0,0,.62) 38%,
      rgba(0,0,0,.40) 56%,
      rgba(0,0,0,.20) 73%,
      rgba(0,0,0,.06) 88%,
      rgba(0,0,0,0)   100%),
    linear-gradient(180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.28) 9%,
      rgba(0,0,0,.08) 18%,
      rgba(0,0,0,0)   28%),
    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-korp .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(--korp-rgb),1) 0%,
    rgba(var(--korp-rgb),.78) 22%,
    rgba(var(--korp-rgb),.46) 42%,
    rgba(var(--korp-rgb),.20) 62%,
    rgba(var(--korp-rgb),.06) 80%,
    rgba(var(--korp-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(--korp-rgb),1) 0%,
    rgba(var(--korp-rgb),.80) 22%,
    rgba(var(--korp-rgb),.52) 42%,
    rgba(var(--korp-rgb),.24) 62%,
    rgba(var(--korp-rgb),.08) 80%,
    rgba(var(--korp-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(--korp)}
.nav a.is-here:hover{opacity:1}

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

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

/* Подзаголовок — справа, как на главной и на бизнес-странице. */
.page-korp .hero__lead{
  left:87.8rem; bottom:15.1rem; width:40.6rem;
}

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

/* ----------------------------------------------------------- НАГРАДА --- */
/* Та же плашка и то же место, что на бизнес-странице: знак, волосяная линия,
   две строки текста. Подложки нет, всё лежит прямо на кадре. */
/* Межстрочный шаг заголовка вырос на .07em (правка наездов Й/Ё, 26.08.2026),
   заголовок прижат к низу — значит верхняя строка поднялась. Плашку поднимаем
   на ту же величину: два интервала × .07 × 7.692rem = 1.08rem, иначе воздух
   между наградой и первой строкой съедается вдвое. */
.award{
  /* 31.4, а не 28.18: со строкой «2 место» плашка садилась на заголовок
     (обратка Германа 01.09 — «дай воздуха») */
  position:absolute; left:6.1rem; bottom:31.4rem;
  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);
}

/* ══════════════════════ ФОРМАТЫ КОРПОРАТИВОВ ═══════════════════════════
   Механика блока «Организация частных мероприятий» с главной: крупные кадры,
   у каждого свой ход параллакса, поэтому сетка при прокрутке «дышит».
   Раскладка — каскад, как на главной: каждая следующая карточка ниже
   предыдущей и с другой стороны, ряды намеренно не выровнены по верхней
   грани. Порядок сверху вниз: гендерные / выездные / новогодние / юбилеи.
   Отступ шапки блока 21rem — тот же, что у блока кейсов на бизнес-странице,
   чтобы расстояние между блоками по сайту было одинаковым.
   Позиционирование абсолютное, как во всём проекте. */
.fm{position:relative; width:100%; height:232rem; background:#000}

/* Заголовок держим в две строки: в три он забирал слишком много веса
   и спорил с первой карточкой. Ширина подобрана под длинную вторую строку. */
.fm-h2{
  position:absolute; left:48rem; top:21rem; width:90rem;
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:7.6rem; line-height:88%; letter-spacing:-.228rem;
  text-transform:uppercase; color:#fff;
}
/* 🔴 Подзаголовок выровнен по НИЖНЕЙ линии заголовка, а не по верхней —
   приём главной («Организация частных мероприятий», style.css:537). Счёт тот
   же: заголовок в две строки при 7.6rem/88% занимает 13.376rem, подзаголовок
   в три строки при 1.6rem/140% — 6.72rem, разница 6.656rem, плюс .144rem
   поправки на разный полулидинг (у заголовка интерлиньяж меньше кегля и буквы
   вылезают за бокс, у подзаголовка больше и утоплены). Итого +6.8rem. */
/* Подзаголовок несёт мысль про 50+ идей — она конкретнее, чем прежняя общая
   фраза про сценарии. Выровнен по нижней линии заголовка: заголовок в две
   строки — 13.376rem, текст в пять строк по 2.24rem — 11.2rem, плюс
   .144rem поправки на полулидинг. */
.fm-lead{
  position:absolute; left:6rem; top:23.34rem; width:32.1rem;
  font-size:1.6rem; line-height:140%; color:rgba(255,255,255,.6);
}

/* Обёртка нужна из-за трансформов: параллакс живёт на самой картинке (gsap),
   ховер-увеличение — на обёртке (CSS). Один элемент — один источник трансформа. */
.fm-c{position:absolute; overflow:hidden; border-radius:.4rem; background:#141414}
.fm-c__frame{position:absolute; display:block; overflow:hidden;
             transition:transform .6s cubic-bezier(.19,1,.22,1)}
.fm-c__photo{position:absolute; inset:0; width:100%; height:100%;
             object-fit:cover; max-width:none}
.fm-c:hover .fm-c__frame{transform:scale(1.045)}

.fm-c__title{
  position:absolute;
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:4.4rem; line-height:92%; letter-spacing:-.132rem;
  text-transform:uppercase; color:#fff;
}

/* Вторая строка подписи. В прототипе она есть только у «гендерных», но одна
   подпись на четыре карточки читается как недоделка — ставим всем.
   Формулировки для трёх остальных мои, короткие и однотипные: расшифровка
   категории, а не обещание. Кликабельных ссылок здесь нет — четыре
   фиолетовых призыва подряд перебивали сами кадры. */
.fm-c__sub{
  position:absolute;
  font-size:1.5rem; line-height:140%; color:rgba(255,255,255,.55);
}

.fm-c--gen{left:6rem; top:44rem; width:53.6rem; height:40rem}
.fm-c--gen .fm-c__frame{left:-2rem; top:-9rem; width:58rem; height:58rem}
.fm-c__title--gen{left:6rem; top:89rem; width:48rem}
.fm-c__sub--gen{left:6rem; top:94.2rem; width:40rem}

/* 2. Выездные — справа и ниже. Ширина срезана с 76.5 до 56rem: в прежнем
   размере кадр перетягивал на себя весь блок и ломал каскад. */
.fm-c--out{left:73.2rem; top:68rem; width:56rem; height:42rem}
.fm-c--out .fm-c__frame{left:-2.5rem; top:-10rem; width:61rem; height:62rem}
.fm-c__title--out{left:73.2rem; top:116rem; width:52rem}
.fm-c__sub--out{left:73.2rem; top:121.2rem; width:40rem}

/* 3. Новогодние — слева, ниже гендерных */
.fm-c--ny{left:6rem; top:122rem; width:53.6rem; height:39rem}
.fm-c--ny .fm-c__frame{left:-2rem; top:-9rem; width:58rem; height:57rem}
.fm-c__title--ny{left:6rem; top:166rem; width:50rem}
.fm-c__sub--ny{left:6rem; top:171.2rem; width:40rem}

/* 4. Юбилеи — справа, замыкают каскад. Заголовок в две строки. */
.fm-c--jub{left:73.2rem; top:146rem; width:56rem; height:41rem}
.fm-c--jub .fm-c__frame{left:-2.5rem; top:-10rem; width:61rem; height:61rem}
/* 🔴 Окно у рамки квадратное, а кадр широкий — `cover` по умолчанию берёт
   центр и срезает по бокам поровну. Цифра стоит в левой трети кадра, и её
   резало левым краем. Сдвигаем точку кадрирования влево: цифра входит
   целиком с полем, справа теряется только дальний край толпы. */
.fm-c--jub .fm-c__photo{object-position:20% 50%}
.fm-c__title--jub{left:73.2rem; top:193rem; width:52rem}
.fm-c__sub--jub{left:73.2rem; top:203.3rem; width:40rem}

/* ── Подвал блока форматов ─────────────────────────────────────────────
   Своего текста у подвала нет: мысль про 50+ идей ушла в подзаголовок
   наверх. Внизу остаётся только призыв — на левом крае карточки юбилеев
   (73.2rem), то есть на той же силовой линии, что весь правый ряд каскада.
   Координаты базовой .btn-pill перебиваются целиком — иначе кнопка уезжает
   к позиции первого экрана. */
.fm-out__btn{
  position:absolute; left:73.2rem; top:215rem; right:auto; bottom:auto;
  margin-top:0; min-width:29rem; width:auto; padding-right:1rem; gap:2.8rem;
}

/* ══════════════ СОБЕРИТЕ ПРОЕКТ ИЗ НУЖНЫХ ОПЦИЙ ═══════════════════════════
   Блок из прототипа. Два решения, которых в прототипе нет:

   1. Чекбоксов не будет. Девять квадратиков подряд читаются как форма,
      которую пользователь должен заполнить, — а это перечень услуг, а не
      анкета. Ставим строчный список по механике «Бережём ваш бюджет»:
      номер, волосяная линия, название. Приём на странице уже живёт дважды,
      блок садится в общий ритм и не выглядит вставным.
   2. Справа — кадр закулисья. Список перечисляет услуги словами, кадр
      показывает, что за ними стоит: свет, ферма, монтажники. Один резкий
      объект и смаз вокруг — тот же приём, что в кадрах форматов. */

.opt{position:relative; width:100%; height:119rem; background:#000}

.opt__h2{
  position:absolute; left:42rem; top:21rem; width:90rem;
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:7.6rem; line-height:88%; letter-spacing:-.228rem;
  text-transform:uppercase; color:#fff;
}
/* 🔴 Подзаголовок стоит СЛЕВА узкой колонкой, а заголовок правее центра —
   так собраны все блоки страницы. Первый вариант был зеркальным (текст
   справа по правому краю) и выбивался из общего ритма.
   Выровнен по нижней линии заголовка: заголовок в две строки — 13.376rem,
   пояснение в четыре строки по 2.24rem — 8.96rem, плюс .144rem на полулидинг. */
.opt__lead{
  position:absolute; left:6rem; top:25.56rem; width:32.1rem;
  font-size:1.6rem; line-height:140%; color:rgba(255,255,255,.6);
}

.opt__list{
  position:absolute; left:6rem; top:44rem; width:62rem;
  list-style:none; margin:0; padding:0;
  border-bottom:.1rem solid rgba(255,255,255,.12);
}
/* Строка живёт на своём слое, чтобы подложка ховера ушла под линии:
   иначе плашка перебивает волосяную линию и ряд рвётся. */
.opt__row{
  position:relative; z-index:0; isolation:isolate;
  display:flex; align-items:center; height:6.4rem;
  border-top:.1rem solid rgba(255,255,255,.12);
}
.opt__row::before{
  content:''; position:absolute; z-index:-1;
  left:-2rem; right:-2rem; top:.1rem; bottom:0;
  border-radius:.4rem; background:rgba(255,255,255,0);
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  transition:background .35s ease, backdrop-filter .35s ease,
             -webkit-backdrop-filter .35s ease;
}
.opt__row:hover::before{
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(1.4rem); backdrop-filter:blur(1.4rem);
}
.opt__n{
  flex:none; width:6rem;
  font-size:1.3rem; line-height:1; letter-spacing:.039rem;
  color:var(--korp);
  transition:color .35s ease;
}
.opt__row:hover .opt__n{color:#fff}
.opt__t{font-size:2rem; line-height:130%; color:rgba(255,255,255,.9)}

/* Кнопка в базе абсолютная — координаты перебиваются целиком, иначе она
   уезжает к позиции первого экрана. */
.opt__btn{
  position:absolute; left:6rem; top:106.7rem; right:auto; bottom:auto;
  margin-top:0; min-width:29rem; width:auto; padding-right:1rem; gap:2.8rem;
}

.opt__shot{
  position:absolute; left:76rem; top:44rem; width:62rem; height:69rem;
  margin:0; overflow:hidden; border-radius:.4rem; background:#141414;
}
.opt__shot img{display:block; width:100%; height:100%; object-fit:cover}

/* ══════════════════════════ HR-ЗАДАЧИ ══════════════════════════════════
   Механика блока «Контролируем каждую деталь» с бизнес-страницы: фраза во
   всю ширину, кадр по центру с растворёнными краями, под ним четыре колонки
   с обрезанными линией номерами и контурными иконками.
   Стили сняты один в один, отличается цвет иконок — фиолетовый.
   Донор — titangatequity.com. Скрипт общий: js/ctrl.js. */

.ctrl{position:relative; width:100%; background:#000; padding:21rem 6rem 10rem}

/* Шапка блока: заголовок справа, мелкий подзаголовок слева — тот же ритм,
   что у блока форматов выше. Обе части стоят на одной верхней линии. */
.ctrl--korp{display:block}
.ctrl--korp .ctrl__h2{
  position:relative; left:42rem; width:84rem;
  font-size:7.6rem; line-height:88%; letter-spacing:-.228rem;
}
/* Выровнен по нижней линии заголовка — счёт тот же, что у .fm-lead выше. */
.ctrl__lead{
  position:absolute; left:6rem; top:27.8rem; width:32.1rem;
  font-size:1.6rem; line-height:140%; color:rgba(255,255,255,.6);
}

/* Ярус 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;
}



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

/* номер обрезан линией — половина цифры уходит под неё */
/* 🔴 Цифра остаётся приваренной к линии и на ховере. Подъём колонки её
   не касается: линия живёт на сетке и не двигается, а вместе с колонкой
   уезжало и окно обрезки — срез повисал на 8 пикселей выше линии, и цифра
   читалась обрубленной в воздухе. Гасим подъём встречным сдвигом. */
.ctrl__cut{
  display:block; height:5.2rem; overflow:hidden;
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.ctrl__step:hover .ctrl__cut{transform:translateY(.8rem)}
/* 🔴 Цифра уходит в линию снизу — приём донора, он и нужен.
   Срез СВЕРХУ был побочкой интерлиньяжа: при line-height .8 и кегле 11rem
   строчный бокс ниже самого глифа, цифра торчала выше него, и overflow
   рубил ей макушку. Ставим интерлиньяж 1 — глиф садится внутрь бокса
   целиком, — и подтягиваем блок отрицательным отступом. Сверху теперь
   цифра целая, снизу её по-прежнему режет линия. */
.ctrl__num{
  display:block; margin-top:-1rem; line-height:1;
  font-family:'Songer Condensed',sans-serif; font-size:11rem;
  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(--korp); 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);
}

/* ══════════════════════════ ПОД КЛЮЧ ═══════════════════════════════════
   Донор композиции — wearekaleida.com, блок «We can handle everything».
   Взято: кадр не на всю ширину, а прямоугольником по центру; строка слов
   разнесена по всей ширине и идёт ПОВЕРХ кадра, пересекая его; крупная
   мысль внизу слева, пояснение мелким внизу справа.
   Рамка донора не берётся: у него она сквозная через весь сайт и работает
   как часть системы, у нас появилась бы в одном блоке и читалась декором.

   🔴 Кадр РАСТЁТ ПО СКРОЛЛУ. Пока блок подъезжает, видео стоит окном по
   центру; когда секция встаёт в экран — раскрывается на всю площадь и
   притемняется, чтобы под текстом была ровная плотная подложка с жёсткой
   границей кадра. Раскрытие идёт через ширину и высоту, а не через scale:
   scale тянул бы вместе с полотном и его содержимое, кадр «наезжал» бы.
   Прогресс считает js/korporativy.js и кладёт его в --kl. */

.kl{
  position:relative; width:100%; height:100svh; min-height:64rem;
  background:#000; overflow:hidden;
  --kl:0;   /* 0 — окно по центру, 1 — полный экран */
}

/* Ширина и высота интерполируются между окном и полным экраном.
   Позиция всегда по центру, поэтому кадр раскрывается симметрично. */
.kl__video{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(75rem + (100% - 75rem) * var(--kl));
  height:calc(47rem + (100% - 47rem) * var(--kl));
  object-fit:cover;
}

/* Притемнение живёт отдельным слоем ровно по границам кадра и набирает
   плотность вместе с раскрытием: пока кадр окном — он чистый, на полном
   экране под текстом лежит плотная подложка. */
.kl__dim{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(75rem + (100% - 75rem) * var(--kl));
  height:calc(47rem + (100% - 47rem) * var(--kl));
  background:rgba(0,0,0,.55);
  opacity:var(--kl);
  pointer-events:none; z-index:1;
}

/* Слова идут по средней линии кадра и уходят за его края в поля.
   space-between по всей ширине — крайние слова почти у самого края. */
.kl__words{
  position:absolute; left:8rem; right:8rem; top:50%;
  transform:translateY(-50%);
  display:flex; justify-content:space-between; align-items:center;
  font-size:1.3rem; line-height:1; letter-spacing:.117rem;
  text-transform:uppercase; color:#fff;
  pointer-events:none; z-index:2;
  text-shadow:0 .1rem 1.2rem rgba(0,0,0,.55);
}
.kl__words-tail{opacity:.55}

.kl__h2{
  position:absolute; left:8rem; bottom:11rem; width:58rem;
  font-family:'Songer Condensed',sans-serif; font-weight:400;
  font-size:5.8rem; line-height:90%; letter-spacing:-.174rem;
  text-transform:uppercase; color:#fff; z-index:3;
}

/* 🔴 Подзаголовок выровнен по НИЖНЕЙ линии заголовка — как на главной.
   Счёт: заголовок в две строки при кегле 5.8rem и интерлиньяже 90% занимает
   10.44rem, снизу отбит на 12rem — значит его строчный бокс начинается на
   22.44rem от низа. Подзаголовок в четыре строки по 2.4rem занимает 9.6rem,
   поэтому его bottom = 22.44 - 9.6 = 12.84rem.
   Дальше поправка на разный полулидинг: у заголовка интерлиньяж меньше
   кегля и буквы вылезают за бокс на .29rem, у подзаголовка больше кегля
   и буквы утоплены на .4rem. Обе поправки опускают подзаголовок ещё на
   .69rem, чтобы совпали видимые кромки букв, а не строчные боксы. */
.kl__desc{
  position:absolute; right:8rem; bottom:10.83rem; width:42rem;
  font-size:1.6rem; line-height:150%; color:rgba(255,255,255,.72); z-index:3;
}

.kl__cta{
  position:absolute; left:8rem; bottom:5rem; height:2.5rem;
  text-decoration:none; z-index:3;
}
.kl__cta-txt{
  font-size:1.4rem; font-weight:500; line-height:1.21;
  color:var(--korp); white-space:nowrap;
}
.kl__cta-arw{
  position:absolute; left:16.4rem; top:.4rem; width:.881rem; height:.881rem;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.kl__cta-arw img{width:100%; height:100%}
.kl__cta-line{
  position:absolute; left:0; top:2.5rem; width:18.1rem; height:.1rem;
  background:rgba(var(--korp-rgb),.28);
}
.kl__cta:hover .kl__cta-arw{transform:translate(.3rem,-.3rem)}


/* ═════════════════ ОТЗЫВЫ ═══════════════════════════════════════════════
   Карточка по прототипу: фото слева, справа аватар, шапка, цитата, кнопка.
   Стиль подтянут к блоку «За кадром» — чёрное поле, тонкие линии, крупный
   портрет на чёрном. Соседние карточки видны по краям, притушены и уведены
   назад. Размытие не берём: карточки едут, а движущийся blur пересчитывается
   каждый кадр — тот же капкан, что был с кольцом. */
/* Блок читается как продолжение «за кадром» — отступ сверху вдвое меньше
   обычного шага страницы. */
/* Верхний отступ срезан с 8 до 2rem: отзыв прилегает к блоку HR-задач и
   читается как подтверждение только что сказанного, а не отдельный экран. */
.rev{position:relative; padding:0 0 9rem; 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, 04.09). 108% убирает наезд, блок не едет:
     заголовок в своей ячейке грида. */
  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(--korp); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s cubic-bezier(.19,1,.22,1)}
.rev__dot.is-on i{transform:scaleX(1)}



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


/* ══════════════════════════════ КЕЙСЫ ══════════════════════════════════
   Слайдер общий с главной. Там его элементы стоят в системе координат
   холста (top в сотнях rem), здесь холста нет — поэтому секция становится
   своей системой отсчёта, а координаты сдвигаются на 191.5rem вверх.
   Разметка и скрипт не тронуты, отличается только цвет акцента. */
/* Фон прозрачный, а сама секция лежит НАД первым экраном: тогда склон
   засвета виден сквозь неё, но остаётся под текстом. Если оставить секции
   свой чёрный фон, засвет ложится поверх и красит заголовок в голубой. */
.cases{
  position:relative; z-index:3; width:100%; height:114rem;
  background:transparent; overflow:hidden;
}
.page-korp{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(--korp)}
.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-band{position:relative; z-index:2; width:100%; margin-top:-16rem; 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(--korp)}
.btn-white--biz::after{background:var(--korp)}
.btn-white--biz:hover{background:var(--korp); box-shadow:none}

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



/* ═══════════ ХВОСТ СТРАНИЦЫ — БЛОКИ, ПЕРЕНЕСЁННЫЕ С ГЛАВНОЙ ═════════════
   «Бережём ваш бюджет», форма и футер собраны на главной абсолютом по холсту
   в 144rem: у каждой строки свой top, отсчитанный от верха страницы. Вместо
   того чтобы пересчитывать полсотни координат под другую страницу, сдвигаем
   всю систему координат: обёртка держит высоту полосы в потоке, а вложенное
   окно уезжает вверх ровно на исходный отступ блока. Координаты в style.css
   остаются едиными для обеих страниц — правка на главной не разъезжается.  */
.bz-why{position:relative; height:83.6rem; margin-top:20rem}
.biz-tail{position:relative; height:198.8rem; margin-top:12rem}
/* Окно выше самого блока и накрыло бы соседние секции — клики сквозь него */
.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-korp{
  --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(--korp)}

/* Поля на тёмном: базовые плейсхолдер и фокус собраны под белый фон и
   на чёрном проваливаются в подложку. */
.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(--korp-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(--korp)}
.biz-tail .form__submit:hover .btn__t{color:var(--korp)}

/* Линия-разделитель над формой снята: на тёмной странице она отрезает
   призыв от всего, что выше, и читается как конец страницы, а не как стык. */
.biz-tail .form-rule{display:none}

/* Мелочи футера, завязанные на маджентовый ховер базы */
.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(--korp)}
.biz-tail .foot__addr a:hover{text-decoration-color:var(--korp)}

/* ═══════════ ДАРИМ НЕЗАБЫВАЕМЫЕ ЭМОЦИИ — перенос с главной ═══════════════
   Второй блок главной целиком: портрет с растворением в чёрное, лид,
   заголовок, две цифры, подпись основателя. Разметка и координаты с главной
   не переписаны — окно .emo__in сдвигает систему координат так, чтобы
   нужная полоса холста встала на своё место. Высота окна = высоте портрета
   (89.1 → 170.8rem), верх окна поднят ровно на координату портрета.
   Цвет направления подменяется точечно: --mag внутри блока фиолетовый. */
.emo{position:relative; height:81.7rem; margin-top:2rem; color:#fff; --mag:var(--korp)}
.emo__in{
  position:absolute; left:0; right:0; top:-89.1rem; height:180rem;
  pointer-events:none;
}
.emo__in > *{pointer-events:auto}

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

/* Плашка награды: короткая строка + раскрытие по наведению и призовое
   место вынесены в style.css — приём одинаковый на трёх направлениях,
   цвет берётся из переменной страницы. Перенесено 31.08.2026. */


/* Отзывы из благодарственных писем — приём общий для трёх направлений,
   стили живут в style.css. Перенесено 31.08.2026. */

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

/* ── Вариант отзыва по просьбе Максима: логотип вместо скана письма ───────
   Его довод — скан читается как «сами себе напечатали», а логотип клиента
   узнаётся сразу. Знак кладём в ту же половину карточки, где лежал лист,
   и держим тот же воздух: место в композиции занято одинаково. */
.rev__desk--logo{padding:0}
/* 🔴 Ширина одна на все знаки, и этого достаточно: файлы в logos/card/
   уже сведены по площади чернил, поэтому широкая «ТРАСКО» и компактный
   «ИРЕКС» занимают поле одинаково. Подгонять каждый знак руками не нужно —
   иначе консистентность держится на честном слове и ломается на первом
   же новом логотипе. */
.rev__brand{
  width:40rem; height:auto; opacity:.92;
  filter:drop-shadow(0 1rem 2.4rem rgba(0,0,0,.5));
}

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