/* ==========================================================================
   Корпоративы — собственные блоки на телефоне (до 768px).
   Сквозные узлы (шапка, кейсы, отзывы, хвост, футер) лежат в mobile.css —
   здесь только то, чего нет на других страницах: форматы, «под ключ»,
   опции и четыре шага HR-блока. Метод тот же: абсолютный холст переводится
   в поток, порядок берётся из DOM.
   ========================================================================== */
@media (max-width:1023px){

/* ── ПЕРВЫЙ ЭКРАН ──────────────────────────────────────────────────────── */
/* Специфичность .page-korp обязательна: одноклассовые правила mobile.css
   слабее десктопных .page-korp .hero__h1 и до элемента не доходят. */
.page-korp .hero__h1{
  left:2rem; right:2rem; width:auto; bottom:18.4rem;
  /* 3.8 — предел, при котором «на которые сотрудники» держится одной
     строкой: на 4.1 она разваливалась на две и заголовок шёл в четыре */
  font-size:3.8rem; letter-spacing:-.114rem;
}
.page-korp .hero__lead{
  left:2rem; right:2rem; width:auto; bottom:12.2rem;
  font-size:1.4rem; color:rgba(255,255,255,.82);
}
.page-korp .cta-link,.page-korp .tel,.page-korp .socials{display:none}

/* ── ФОРМАТЫ ───────────────────────────────────────────────────────────── */
/* В DOM карточка, её заголовок и подпись идут подряд — в потоке это уже
   готовая вертикальная лента, каскад раскладывать заново не нужно. */
.fm{height:auto; padding-bottom:8rem}
.fm-h2{position:relative; left:0; top:0; width:auto; margin:9rem 2rem 0;
  font-size:3.5rem; letter-spacing:-.105rem}
.fm-lead{position:relative; left:0; top:0; width:auto; margin:2rem 2rem 0;
  font-size:1.5rem}
.fm-c{position:relative; left:0 !important; top:0 !important;
  /* 67vw — пропорция самого кадра 760×568: при 74vw cover резал кадр по
     ширине, а параллакс добавлял срез сверху («30» обрублено — обратка 01.09) */
  width:auto !important; height:67vw !important; margin:5.6rem 2rem 0;
  border-radius:.8rem}
/* Рамка внутри карточки была вытянута под параллакс — на телефоне
   параллакса нет, кадр просто заполняет окно */
.fm-c__frame{left:0 !important; top:0 !important;
  width:100% !important; height:100% !important}
.fm-c__title{position:relative; left:0 !important; top:0 !important;
  width:auto !important; margin:2rem 2rem 0;
  font-size:3.2rem; letter-spacing:-.096rem}
.fm-c__sub{position:relative; left:0 !important; top:0 !important;
  width:auto !important; margin:1rem 2rem 0; font-size:1.4rem;
  text-wrap:balance}
.fm-out__btn{position:relative; left:0; top:0; width:auto; min-width:0;
  /* 3.2, а не 5.6: кнопка висела одиноко в отрыве от подписи (обратка 01.09) */
  margin:3.2rem 2rem 0; height:6.3rem; padding-left:2.8rem; padding-right:.8rem}

/* ── ПОД КЛЮЧ ──────────────────────────────────────────────────────────── */
/* На десктопе кадр раскрывается из окна в полный экран по скроллу. Скраб
   на телефоне съедает кадры и без крупного экрана ничего не рассказывает:
   оставляем сам ролик полосой, а текст ставим под ним. */
.kl{height:auto; min-height:0; padding:9rem 0 8rem}
.kl__video,.kl__dim{position:relative; left:0; top:0; transform:none;
  width:100%; height:58vw}
.kl__dim{margin-top:-58vw; background:rgba(0,0,0,.28); opacity:1}
/* Строка слов шла по средней линии кадра во всю ширину — на 390 она
   превращается в кашу из обрезков. Смысл несёт сам ролик. */
.kl__words{display:none}
.kl__h2{position:relative; left:0; bottom:auto; width:auto;
  margin:3.2rem 2rem 0; font-size:3.5rem; letter-spacing:-.105rem}
.kl__desc{position:relative; right:auto; bottom:auto; width:auto;
  margin:1.8rem 2rem 0; font-size:1.5rem}
.kl__cta{position:relative; left:0; bottom:auto; display:inline-block;
  margin:2.4rem 2rem 0; height:2.5rem}
/* тап-цель ссылки до 44px, раскладку не трогая */
.kl__cta::before{content:''; position:absolute;
  left:-1rem; right:-1rem; top:-1rem; bottom:-1rem}

/* ── ОПЦИИ ─────────────────────────────────────────────────────────────── */
/* Кадр поднят над списком: девять строк подряд без картинки читаются
   прайс-листом. Ховер-подложка строк на тач не нужна. */
/* В DOM порядок десктопный: заголовок, подводка, список, кнопка, кадр.
   На телефоне кадр нужен между подводкой и списком — иначе девять строк
   подряд читаются прайс-листом, а фотография остаётся сиротой в конце.
   Переставляем flex-порядком, разметку не трогая. */
.opt{height:auto; padding-bottom:0; display:flex; flex-direction:column}
.opt__h2{order:1}
.opt__lead{order:2}
.opt__shot{order:3}
.opt__list{order:4}
.opt__btn{order:5}
.opt__h2{position:relative; left:0; top:0; width:auto; margin:9rem 2rem 0;
  font-size:3.5rem; letter-spacing:-.105rem}
.opt__lead{position:relative; left:0; top:0; width:auto; margin:2rem 2rem 0;
  font-size:1.5rem}
.opt__shot{position:relative; left:0; top:0; width:auto; height:64vw;
  margin:4.4rem 2rem 0; border-radius:.8rem}
.opt__list{position:relative; left:0; top:0; width:auto; margin:4.4rem 2rem 0}
.opt__row{height:auto; padding:1.8rem 0; align-items:flex-start}
.opt__row::before{display:none}
.opt__n{width:4.4rem; margin-top:.5rem}
.opt__t{font-size:1.6rem; text-wrap:balance}
.opt__btn{position:relative; left:0; top:0; width:auto; min-width:0;
  margin:4rem 2rem 0; height:6.3rem; padding-left:2.8rem; padding-right:.8rem}

/* ── HR-ЗАДАЧИ: ЧЕТЫРЕ ШАГА ────────────────────────────────────────────── */
/* Сетка 4×1 на 390 даёт колонки по 90px — читать нечего. Разворачиваем
   в столбец, сплошную линию через колонки убираем: в вертикали её роль
   играют разделители между шагами. */
/* Заголовок → подводка → шаги (обратка Германа 02.09: подводка стояла над
   заголовком). Первый шаг подтянут к заголовку: между ними зияло ~300px. */
.ctrl--korp{padding:9rem 2rem 8rem; display:flex; flex-direction:column}
.ctrl--korp .ctrl__h2{order:1}
.ctrl--korp .ctrl__lead{order:2; margin:2rem 0 0}
.ctrl--korp .ctrl__grid{order:3; margin-top:2.4rem}
.ctrl--korp .ctrl__step:first-child{padding-top:1.2rem}
.ctrl--korp .ctrl__h2{position:relative; left:0; width:auto;
  font-size:3.5rem; letter-spacing:-.105rem}
.ctrl__lead{position:relative; left:0; top:0; width:auto;
  margin:0 0 2.4rem; font-size:1.5rem}
.ctrl__grid{grid-template-columns:1fr; margin-top:5.6rem}
/* Сплошная линия шла ПОПЕРЁК четырёх колонок и срезала цифрам низ —
   в этом весь приём. В столбце такой линии взяться неоткуда, а срез
   остаётся: цифра выглядела просто обрубленной. Возвращаем линию каждому
   шагу — она режет свою цифру ровно так же, как на десктопе общая. */
.ctrl__grid::before{display:none}
.ctrl__step{padding:5.6rem 0 0}
.ctrl__step::before{display:none}
.ctrl__step + .ctrl__step{padding-left:0; border-left:0}
.ctrl__cut{width:auto; border-bottom:.1rem solid rgba(255,255,255,.12)}
.ctrl__t{width:auto; margin-top:1.6rem; font-size:2.1rem; text-wrap:balance}
.ctrl__d{width:auto; margin-top:1rem; font-size:1.4rem; text-wrap:balance}

}