/* ─────────────────────────────────────────────────────────────
   Компоненты: лока́п, шапка, подвал, окно возможностей,
   шапка раздела, прелоадер.
   ───────────────────────────────────────────────────────────── */

/* ── Лока́п «ФГБУ МП МЦ / ЦСМС» ───────────────────────────────
   Две плашки, наклоны разнонаправленные и никогда не совпадают —
   одинаковый наклон повторил бы структуру логотипа Росмолодёжи.
   Просвет 6px обеспечен формулой в tokens.css, здесь его не трогаем. */

.logo {
  position: relative;
  display: inline-block;
  padding: var(--logo-safe) calc(var(--logo-safe) * 2) var(--logo-safe) var(--logo-safe);
  text-decoration: none;
  flex: none;
}
.logo:hover { color: inherit; }

.logo__stack {
  position: relative;
  display: inline-block;
  margin-bottom: var(--logo-overlap);
}

.logo__sub,
.logo__main {
  border-radius: var(--r-plate);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.logo__sub {
  display: block;
  background: var(--cyan);
  color: var(--black);
  font-size: var(--logo-sub-size);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-caps);
  padding: var(--logo-sub-pad-t) var(--logo-sub-pad-h) var(--logo-sub-pad-b);
  transform: rotate(var(--logo-tilt-sub));
}

.logo__main {
  position: absolute;
  bottom: calc(-1 * var(--logo-overlap));
  left: var(--logo-bleed);
  z-index: 2;
  width: max-content;
  background: var(--red);
  color: var(--white);
  font-size: var(--logo-main-size);
  font-weight: var(--w-bold);
  letter-spacing: 0.03em;
  padding: var(--logo-main-pad-v) var(--logo-main-pad-h);
  transform: rotate(var(--logo-tilt-main));
}

/* Подвал: красная плашка становится белой, циановая — контурной */
.logo--inverse .logo__sub {
  background: transparent;
  border: 1px solid var(--white);
  color: var(--white);
}
.logo--inverse .logo__main {
  background: var(--white);
  color: var(--black);
}

/* ── Шапка ── */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  padding: 6px var(--gutter);
  min-height: 108px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  /* Не переносим: восемь пунктов во вторую строку разваливают шапку.
     Не помещается — уходим в бургер, порог ниже. */
  flex-wrap: nowrap;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--w-medium);
}
.nav__link { text-decoration: none; white-space: nowrap; }
.nav__link[aria-current='page'] { font-weight: var(--w-semibold); }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex: none;
}

.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--black);
  border-radius: var(--r-control-sm);
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--black);
  transition: transform var(--t-fast) ease, opacity var(--t-fast) ease;
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/*
  Меню держится за шапку, а не лежит в потоке. В потоке оно жило
  сразу под шапкой в самом начале страницы: прокрутил вниз, нажал
  бургер — меню открывалось за экраном, наверху документа, и его
  просто не было видно.

  top берётся из --header-h, которую main.js считает по фактической
  высоте шапки: min-height у неё 92px, но из-за логотипа выходит
  больше. Запасное значение — на случай, если скрипт не отработал.

  z-index 59: под шапкой (у неё 60), чтобы её белый фон накрывал
  верхний край меню, но над содержимым страницы.
*/
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-h, 92px);
  left: 0;
  right: 0;
  z-index: 59;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px 18px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lift);

  /* Длинное меню на невысоком экране должно прокручиваться внутри
     себя, а не уезжать за нижний край. dvh, а не vh: в мобильных
     браузерах адресная строка съезжает, и vh меряет по большему. */
  max-height: calc(100dvh - var(--header-h, 92px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu__link {
  display: block;
  padding: 13px 10px;
  font-size: 17px;
  font-weight: var(--w-medium);
  text-decoration: none;
  border-radius: var(--r-control-sm);
}

/* 1320px, а не 1200: замер показал, что логотип (169) + меню в одну
   строку (692) + кнопки (300) + поля и зазоры (148) требуют 1310px.
   На 1200–1310 меню переносилось на вторую строку. */
@media (max-width: 1320px) {
  .header { min-height: 92px; padding-inline: var(--gutter); }
  .nav,
  .header__actions .btn,
  .header__actions .mono-toggle { display: none; }
  .burger { display: flex; }
  .mobile-menu { display: flex; }
  .mobile-menu[hidden] { display: none; }
}

/* ── Подвал ── */
.footer {
  background: var(--black);
  color: var(--white);
  padding: var(--section-y) var(--gutter);
}
.footer a { color: var(--white); }
.footer a:hover { color: var(--cyan); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 0.85fr)) minmax(0, 1.2fr);
  gap: 30px;
}
.footer__col { display: flex; flex-direction: column; gap: var(--gap-sm); }
.footer__col-title {
  font-size: var(--fs-micro);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-inverse);
}
.footer__note { color: var(--ink-inverse); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
  justify-content: space-between;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line-inverse);
  font-size: 14px;
  color: var(--ink-inverse);
}
.footer__social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  transition: transform var(--t-hover) var(--ease);
}
.footer__social a:hover { transform: translateY(-2px); }
.footer__social img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Окно возможностей ──
   Всегда aria-hidden: фигура декоративна, смысл дублируется текстом.
   Цвет задаётся через --window-tone, форма — маской. */
.window {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: var(--window-tone, var(--cyan));
  -webkit-mask: var(--window-shape) center / contain no-repeat;
  mask: var(--window-shape) center / contain no-repeat;
}

/* ── Шапка раздела ──
   Секция во всю ширину, содержимое — по сетке. Раньше сетка лежала
   на самой секции, и на мониторе шире 1440px текст первого экрана
   разъезжался до края, пока все секции ниже держались в полосе
   1440px: заголовок начинался левее собственного текста страницы.

   Декор (окно, конь) остаётся внутри той же полосы, но вылезает
   за её край и подрезается уже секцией — то есть на широком экране
   доходит до края монитора. */
.section-head {
  position: relative;
  overflow: hidden;
  padding: 36px var(--gutter) var(--section-y);
  /* Колонка, чтобы полоса растянулась на всю высоту секции. Иначе
     она высотой ровно с текст, и декор, отцентрованный по ней,
     оказывается выше середины секции и подрезается сверху. */
  display: flex;
  flex-direction: column;
}
.section-head__inner {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--gap-xl);
  align-items: end;
}
.section-head--plain .section-head__inner { grid-template-columns: minmax(0, 1fr); }
.section-head__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
.section-head__metrics {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: var(--gap-xs);
}
.metric__value {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: var(--w-bold);
  line-height: 1;
}
.metric__label {
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--ink-2);
}

/* Крошки жили по тем же правилам, что и старая шапка раздела:
   поля от края экрана, без ограничения полосы. На широком мониторе
   «Главная / …» начиналось левее заголовка под ним. Ограничение
   с учётом полей: box-sizing здесь border-box, поэтому в max-width
   входят и поля. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 18px var(--gutter) 0;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs [aria-current='page'] { color: var(--black); }

@media (max-width: 900px) {
  .section-head { padding-top: 20px; }
  .section-head__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ── Прелоадер ──
   Три плашки собираются в композицию. Без JS и при reduced-motion
   скрыт полностью: контент не должен зависеть от анимации. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  background: var(--white);
  transition: opacity var(--t-reveal) ease;
}
html[data-preloader='on'] .preloader { display: flex; }
.preloader[data-state='done'] { opacity: 0; pointer-events: none; }
.preloader__stage { position: relative; width: clamp(240px, 30vw, 420px); aspect-ratio: 3 / 2; }
.preloader__plate {
  position: absolute;
  border-radius: var(--r-cover);
  opacity: 0;
  transform: scale(0.86);
  transition: transform var(--t-slow) var(--ease), opacity var(--t-hover) ease;
}
.preloader__plate[data-shown='1'] { opacity: 1; transform: none; }
.preloader__plate:nth-child(1) { left: 2%;  top: 34%; width: 44%; height: 46%; background: var(--red);  rotate: -3deg; }
.preloader__plate:nth-child(2) { left: 26%; top: 18%; width: 46%; height: 52%; background: var(--red);  rotate: 4deg; }
.preloader__plate:nth-child(3) { left: 52%; top: 2%;  width: 44%; height: 50%; background: var(--cyan); rotate: -2deg; }

@media (prefers-reduced-motion: reduce) {
  html[data-preloader='on'] .preloader { display: none; }
}

/* На узком экране окно в герое уводим за правый край и уменьшаем:
   иначе оно ложится на счётчики. Не больше одного-двух окон на экран. */
@media (max-width: 900px) {
  .hero .window {
    width: min(280px, 62vw) !important;
    height: 190px !important;
    right: -90px !important;
    top: -20px !important;
  }
}

/* ── Первый экран ── */
.hero { min-height: min(78vh, 640px); padding-top: var(--section-y); }
.hero__title { font-size: var(--fs-hero); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--gap-xs); }

/* ── Заголовок блока ── */
.block-head { display: flex; flex-direction: column; gap: var(--gap-sm); max-width: 62ch; }
.block-head--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-lg);
  max-width: none;
}
.block-head + * { margin-top: var(--gap-xl); }

/* ── Появление при прокрутке ── */
/*
  Прячем только при живом JS: флаг data-js ставит встроенный скрипт
  в base.html до первой отрисовки. Скрипты отключены или не догрузились —
  блок просто показывается сразу. Пустая страница хуже страницы
  без анимации.

  Тот же скрипт не ставит флаг при prefers-reduced-motion, так что
  отдельного правила для него не нужно.

  rotate(var(--tilt)) повторяется в обоих состояниях: transform
  переписывается целиком, и без этого наклонённая плашка выпрямлялась
  бы на время появления.
*/
html[data-js] [data-reveal]:not([data-revealed]) { opacity: 0; }

html[data-js] [data-reveal][data-revealed] {
  animation: reveal-up var(--t-appear) var(--ease) backwards;
}

/*
  Появление сделано анимацией, а не переходом, намеренно. Переход
  занял бы то же свойство transform, что и ховер, и его длинная
  скорость 0,8 с оставалась бы висеть на возврате: плашка уезжала бы
  из-под курсора втрое медленнее, чем подъезжала. Анимация и переход
  живут параллельно, поэтому ховер остаётся на своих 0,35 с
  в обе стороны.

  rotate(var(--tilt)) повторяется в обоих кадрах: transform
  переписывается целиком, и без этого наклонённая плашка выпрямлялась
  бы на время выезда.

  backwards — чтобы на время задержки лесенки плашка стояла
  в начальном кадре, а не мигала конечным.
*/
@keyframes reveal-up {
  from { opacity: 0; transform: rotate(var(--tilt, 0deg)) translate3d(0, 22px, 0); }
  /* Прозрачность добирает до единицы раньше движения: плашка
     дочитывается, пока ещё доезжает. */
  75%  { opacity: 1; }
  to   { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}

/* ── Плитки «Чем мы занимаемся» ── */
/*
  Каскад, а не ряд: каждая следующая плашка уже предыдущей, сдвинута
  левее и наезжает на неё снизу. Порядок наложения задаётся порядком
  в разметке — все плашки position:relative без z-index, и поздние
  рисуются поверх ранних сами.

  Наклон живёт в переменной --tilt, а не прямо в transform. На ховере
  и при появлении transform переписывается целиком, и наклон, будь он
  вписан в само свойство, каждый раз затирался бы.
*/
.about { display: grid; gap: var(--gap-xl); }
.about .block-head + .tiles { margin-top: 0; }
.about__head .lead { max-width: 34ch; }

.tiles { display: flex; flex-direction: column; align-items: flex-start; }

.tile {
  --tilt: 0deg;
  position: relative;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--r-card);
  padding: 20px 20px 36px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transform: rotate(var(--tilt));
  transition:
    transform var(--t-hover) var(--ease),
    box-shadow var(--t-hover) ease;
}
.tile h3 { font-size: var(--fs-h3); }

/* Ховер: плашка выпрямляется, выходит вперёд и приподнимается.
   z-index нужен, чтобы она перекрыла соседку, которая по порядку
   в разметке идёт после неё. */
.tile:hover,
.tile:focus-within {
  transform: rotate(0deg) translateY(-6px) scale(1.015);
  box-shadow: 0 20px 44px rgb(0 0 0 / 0.16);
  z-index: 5;
}

@media (min-width: 900px) {
  .about {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
  .tile { width: var(--tile-w); margin-left: var(--tile-shift); }
  .tile + .tile { margin-top: -14px; }

  /* Шаг 4n, а не просто 1–4: направлений в админке может стать больше
     или меньше четырёх, и рисунок каскада тогда просто повторится —
     ровно как повторяется цветовой цикл в шаблоне. */
  .tile:nth-child(4n + 1) { --tilt: -1.4deg; --tile-w: 82%; --tile-shift: -10%; }
  .tile:nth-child(4n + 2) { --tilt:  1.2deg; --tile-w: 72%; --tile-shift: -20%; }
  .tile:nth-child(4n + 3) { --tilt:   -1deg; --tile-w: 64%; --tile-shift: -30%; }
  .tile:nth-child(4n + 4) { --tilt:  1.6deg; --tile-w: 57%; --tile-shift: -48%; }
}

/* На узком экране каскад разваливается: плашки становятся в столбик
   без наклона и без наезда. Наклонённая плашка во всю ширину телефона
   упирается углами в края. */
@media (max-width: 899px) {
  .tile + .tile { margin-top: 14px; }
  .tile { padding: 18px 18px 32px; }
  .tile__text { font-size: 14px; }
}

/* ── Карточки направлений ── */
/*
  Карточка залита фирменным цветом целиком, окно возможностей уходит
  за край и подрезается overflow. Наклон, как и у плашек выше, живёт
  в --tilt: на ховере transform переписывается целиком.
*/
.dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dir {
  --tilt: 0deg;
  position: relative;
  overflow: hidden;
  min-height: 440px;
  padding: 44px 40px;
  border-radius: var(--r-card-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  text-decoration: none;
  transform: rotate(var(--tilt));
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) ease;
}

/* Наклон — по порядку, цвет — по направлению. Появится третье
   направление: наклон подхватится циклом, а цвет нужно будет задать.
   Только на широком экране: наклонённая карточка во всю ширину
   телефона упирается углами в края — то же, что и с плашками выше. */
@media (min-width: 900px) {
  .dir:nth-child(2n + 1) { --tilt:  1.2deg; }
  .dir:nth-child(2n)     { --tilt: -1.4deg; }
}

/*
  Цвет текста держим в --dir-ink, а не задаём напрямую. Глобальное
  правило a:hover красит любую ссылку в красный, и его специфичность
  (0,1,1) выше, чем у .dir--business (0,1,0). Раньше это гасилось
  через color:inherit на ховере — но inherit брал чёрный от секции,
  и белый текст на красной карточке чернел под курсором.
*/
.dir { color: var(--dir-ink, var(--black)); }
.dirs .dir:hover,
.dirs .dir:focus-visible { color: var(--dir-ink, var(--black)); }

.dir--business {
  background: var(--red);
  --dir-ink: var(--white);
  --dir-window: rgb(255 255 255 / 0.22);
}
.dir--profi {
  background: var(--cyan);
  --dir-ink: var(--black);
  --dir-window: rgb(0 0 0 / 0.09);
}

.dir__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.dir__tag {
  font-size: 14px;
  font-weight: var(--w-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dir__title { font-size: clamp(22px, 3vw, 40px); font-weight: var(--w-bold); line-height: 1.06; }
.dir__lead {
  font-size: 17px;
  font-weight: var(--w-regular);
  line-height: 1.29;
  letter-spacing: 0.03em;
  max-width: 32ch;
}

/* Кнопка внутри карточки: на красном — белая, на циане — красная. */
.dir__cta {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-control);
  font-size: 16px;
  font-weight: var(--w-semibold);
  background: var(--white);
  color: var(--black);
  transition: transform var(--t-hover) var(--ease);
}
.dir--profi .dir__cta { background: var(--red); color: var(--white); }

/* Ховер: карточка выпрямляется и приподнимается, окно внутри
   подаётся вперёд — движение окна медленнее самой карточки,
   поэтому читается как глубина, а не как общий сдвиг. */
.dir .window { transition: transform var(--t-slow) var(--ease); }
.dir:hover,
.dir:focus-visible {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 22px 50px rgb(0 0 0 / 0.16);
}
.dir:hover .window,
.dir:focus-visible .window { transform: scale(1.12) rotate(3deg); }

@media (max-width: 899px) {
  .dirs { grid-template-columns: minmax(0, 1fr); }
  .dir { min-height: 240px; padding: 20px 18px; gap: 24px; }
}

/* ── Карточка проекта: обложка + плашка, наклоны разнонаправленные ── */
.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap-lg); }
.proj { display: flex; flex-direction: column; }
.proj--muted { opacity: 0.72; }
.proj__cover {
  position: relative;
  z-index: 1;
  height: 210px;
  border-radius: var(--r-cover);
  overflow: hidden;
  background: var(--surface);
  transform: rotate(var(--tilt-cover));
  transition: transform var(--t-card) var(--ease);
}
.proj__cover img { width: 100%; height: 100%; object-fit: cover; }
.proj__window {
  position: absolute;
  inset: 8%;
  background: var(--window-tone, var(--cyan));
  -webkit-mask: var(--window-shape) center / contain no-repeat;
  mask: var(--window-shape) center / contain no-repeat;
}
.proj__plate {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 92%;
  align-self: flex-end;
  margin-top: -46px;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-cover);
  transform: rotate(var(--tilt-plate));
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) ease;
}
.proj:hover .proj__cover,
.proj:focus-within .proj__cover { transform: rotate(var(--tilt-cover)) scale(1.05) translateY(-6px); }
.proj:hover .proj__plate,
.proj:focus-within .proj__plate { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-lift); }
.proj__badge {
  align-self: flex-start;
  font-size: var(--fs-micro);
  font-weight: var(--w-semibold);
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.proj__badge--open { background: var(--red); color: var(--white); }
.proj__badge--soon { background: var(--cyan); color: var(--black); }
.proj__badge--closed { background: var(--surface); color: var(--black); border: 1px solid var(--line); }
.proj__title { font-size: clamp(19px, 1.6vw, 21px); }
.proj__text { font-size: 16px; line-height: 1.35; color: var(--ink-2); flex: 1; }
.proj__link { font-size: 16px; font-weight: var(--w-semibold); align-self: flex-start; }

/* ── Список документов ── */
.doc-list { display: flex; flex-direction: column; }
.doc-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font-weight: var(--w-medium);
}
.doc-list__item:last-child { border-bottom: 1px solid var(--line); }
.doc-list__item a { text-decoration: none; }
.doc-list__meta { font-size: 14px; font-weight: var(--w-semibold); color: var(--ink-3); white-space: nowrap; }

/* ── Партнёры ── */
.partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color var(--t-hover) ease;
}
.partner:hover { border-color: var(--black); }
.partner img { max-height: 100%; width: auto; object-fit: contain; }

@media (max-width: 900px) {
  .proj__plate { width: 100%; margin-top: -40px; }
}

/* Плитки «Чем мы занимаемся». Цвет чередуется по позиции — в базе его нет.
   Белый текст ставим только на красном: на циане он запрещён (1,23:1). */
.tile__num { font-size: 15px; font-weight: var(--w-semibold); }
.tile__text { font-size: 16px; line-height: 1.35; font-weight: var(--w-regular); color: var(--ink-2); }
.tile--plain { background: var(--white); border-color: var(--line); }
.tile--cyan { background: var(--cyan); }
.tile--cyan .tile__text { color: var(--black); }
.tile--red { background: var(--red); color: var(--white); }
.tile--red .tile__text { color: var(--white); }
.tile--red .tile__num { color: var(--white); }

/* ── Двухколоночный разворот: заголовок слева, текст справа ── */
.split { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); gap: var(--gap-xl); align-items: start; }
.prose { max-width: 76ch; display: flex; flex-direction: column; gap: 22px; }
.prose h2 { font-size: var(--fs-h3); }
.prose p { font-weight: var(--w-book); }
.doc-page { padding-top: var(--section-y); }

/* ── Герой направления: место окна занимает конь ── */
/* Высота подобрана под обрез коня: при картинке 1300px шириной
   (867px высотой) видимая часть 694px — это 80% высоты файла,
   то есть срез проходит чуть ниже галстука. Меняешь ширину коня —
   пересчитай и это. */
.dir-hero { position: relative; overflow: hidden; min-height: min(80vh, 730px); }
/*
  Конь прижат к верху и подрезан снизу.

  Голова не обрезается: верх картинки совпадает с верхом полосы.
  Низ уходит под рамку секции — видно чуть ниже галстука. Замер
  по файлу: тёмный контур галстука кончается на 73% высоты картинки,
  режем на 80% — остаётся небольшой запас под ним.

  Отсюда и размер: чтобы при высоте героя H было видно 80% картинки,
  сама она должна быть H/0,8. Ширина следует из пропорции 3:2.
  Проценты, а не пиксели: на широком мониторе конь растёт вместе
  с полосой, иначе тонет в пустоте справа.
*/
.dir-hero__horse {
  position: absolute;
  right: -18%;
  top: 0;
  width: min(1300px, 98%);
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
html[data-mono='on'] .dir-hero__horse { display: none; }

/* Временный лока́п направления. Верх контрастен низу, наклоны
   разнонаправленные — как у логотипа центра. */
.dir-lockup { position: relative; display: inline-block; align-self: flex-start; margin-bottom: 30px; }
.dir-lockup__top,
.dir-lockup__main { border-radius: var(--r-plate); line-height: 1; white-space: nowrap; text-align: center; }
.dir-lockup__top {
  display: block;
  font-size: 13px;
  font-weight: var(--w-medium);
  letter-spacing: var(--track-caps);
  padding: 6px 12px 30px;
  transform: rotate(1.6deg);
}
.dir-lockup__main {
  position: absolute;
  bottom: -22px;
  left: 10px;
  z-index: 2;
  width: max-content;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
  padding: 7px 16px;
  transform: rotate(-1.4deg);
}
.dir-hero--business .dir-lockup__top { background: var(--cyan); color: var(--black); }
.dir-hero--business .dir-lockup__main { background: var(--red); color: var(--white); }
.dir-hero--profi .dir-lockup__top { background: var(--red); color: var(--white); transform: rotate(-1.8deg); }
.dir-hero--profi .dir-lockup__main { background: var(--cyan); color: var(--black); transform: rotate(1.2deg); }

.proj-group + .proj-group { margin-top: var(--gap-xl); }
.proj-group__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--gap-lg); }
.proj-group__head h3 { font-size: clamp(20px, 1.8vw, 26px); }

/* ── Команда ── */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 44px 22px; margin-top: var(--gap-lg); }
.member { display: flex; flex-direction: column; }
.member__photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  width: 68%;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-cover);
  transform: rotate(var(--tilt-cover));
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) ease;
}
.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Медленнее, чем сама рамка: снимок как будто отстаёт от неё
     и подаётся вперёд. Тот же приём, что с окном в карточках
     направлений. */
  transition: transform var(--t-slow) var(--ease);
}
.member__initials { font-size: clamp(30px, 3vw, 46px); font-weight: var(--w-bold); color: var(--ink-3); }
.member__plate {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 92%;
  align-self: flex-end;
  margin-top: -46px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-cover);
  transform: rotate(var(--tilt-plate));
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) ease;
}
/* Ховер: и снимок, и плашка выпрямляются и приподнимаются — карточка
   собирается целиком, а не половиной. Снимок поднимается чуть выше
   плашки: наезд плашки на снимок при этом слегка раскрывается,
   и видно, что это две разные плоскости. */
.member:hover .member__photo,
.member:focus-within .member__photo {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.member:hover .member__photo img,
.member:focus-within .member__photo img { transform: scale(1.06); }
.member:hover .member__plate,
.member:focus-within .member__plate { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-lift); }
.member__name { font-size: clamp(18px, 1.6vw, 21px); }
.member__position { font-size: 16px; line-height: 1.35; color: var(--ink-2); flex: 1; }
.member__contacts { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: var(--w-medium); min-width: 0; }
.member__contacts a { text-decoration: none; overflow-wrap: anywhere; }

/* ── Контакты ── */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap-lg); }
.contact-card {
  display: flex; flex-direction: column; gap: var(--gap-sm);
  padding: 24px 22px; border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color var(--t-hover) ease, transform var(--t-hover) var(--ease);
}
.contact-card:hover { border-color: var(--black); transform: translateY(-3px); }
.contact-card__value { font-size: clamp(18px, 1.7vw, 21px); font-weight: var(--w-bold); line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
.contact-card__value--sm { font-size: 16px; font-weight: var(--w-medium); line-height: 1.4; }
.contact-card__note { font-size: 15px; line-height: 1.4; color: var(--ink-2); }

/* ── Карта на контактах ──
   Пока карта не загружена, поверх лежит заглушка-кнопка: она же
   служит и запасным вариантом, если скрипт Яндекса не отработал. */
.map {
  position: relative; height: clamp(260px, 34vw, 420px);
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--cyan); overflow: hidden;
}
.map__canvas { position: absolute; inset: 0; }

.map__cover {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 0;
  background: var(--cyan); border: 0; cursor: pointer;
  font: inherit; color: var(--black);
  transition: opacity var(--t-card) ease;
}
.map__cover--static { cursor: default; }
/* Карта готова — заглушка уходит и перестаёт ловить нажатия. */
.map[data-map-state='ready'] .map__cover { opacity: 0; pointer-events: none; }
.map[data-map-state='loading'] .map__hint { opacity: .5; }

.map__pin { display: flex; }
.map__dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); border: 3px solid var(--white); box-shadow: var(--shadow-pin);
}
.map__hint {
  background: var(--white); font-size: 14px; font-weight: var(--w-semibold);
  padding: 7px 12px; border-radius: var(--r-control-sm); box-shadow: var(--shadow-pin);
}

.map__link { margin-top: 12px; font-size: 15px; font-weight: var(--w-medium); }

/* Блок «Яндекс» в углу карты убираем: он перекрывает метку
   на узком экране, а обязательная ссылка на сервис стоит под картой. */
.map ymaps[class$='-copyrights-pane'] { max-width: 60%; }

.widget-slot {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 22px; border: 1px dashed var(--ink-3);
  border-radius: var(--r-card); background: var(--surface);
}

/*
  Виджет Битрикс24. Своей ширины у него нет — он растягивается
  на всю ширину родителя, поэтому ширину задаём здесь, а не надеемся
  на настройки в кабинете Битрикса.

  max-width как у остальных форм на сайте (форма подписки — 560px),
  чтобы поля не растягивались через всю колонку: строка ввода длиннее
  этого читается тяжело, а на широком экране колонка вдвое шире.

  min-width: 0 — обязателен: обёртка лежит в grid-колонке, а элемент
  грида по умолчанию не даёт себя сжать уже содержимого. Виджет
  со своей вёрсткой раздувал бы колонку и ломал сетку.

  overflow-x: auto — страховка, а не решение: если Битрикс однажды
  выдаст что-то шире, поедет полоса прокрутки внутри блока,
  а не вся страница.
*/
.bitrix-form {
  width: 100%;
  min-width: 0;
  max-width: 560px;
  overflow-x: auto;
}
/* Внутренности виджета не должны вылезать за обёртку, чем бы
   они ни оказались. */
.bitrix-form :is(iframe, form, div) { max-width: 100%; }

/* ── Документы ── */
.filters { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-bottom: var(--gap-xl); }
.filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border: 1px solid var(--black); border-radius: var(--r-control);
  font-size: 15px; font-weight: var(--w-medium); text-decoration: none;
}
.filter--on { background: var(--black); color: var(--white); font-weight: var(--w-semibold); }
.filter--on:hover { color: var(--white); }
.filter__n { font-size: 13px; opacity: 0.75; }

.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap-lg); }
.doc-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 22px; border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color var(--t-hover) ease, transform var(--t-hover) var(--ease), box-shadow var(--t-hover) ease;
}
.doc-card:hover { border-color: var(--black); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.doc-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.doc-card__ext {
  font-size: var(--fs-micro); font-weight: var(--w-bold); letter-spacing: 0.04em;
  padding: 6px 10px; border-radius: 8px;
  background: var(--white); color: var(--black); border: 1px solid var(--black);
}
.doc-card__ext--pdf { background: var(--red); color: var(--white); border-color: transparent; }
.doc-card__ext--docx, .doc-card__ext--xlsx, .doc-card__ext--doc, .doc-card__ext--xls { background: var(--cyan); color: var(--black); border-color: transparent; }
.doc-card__title { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.2; }
.doc-card__title a { text-decoration: none; }
/* Названия приказов доходят до 490 знаков: без ограничения одна карточка
   вытягивает всю строку сетки. Полное название остаётся в title
   и в aria-label, так что ни поиск, ни скринридер ничего не теряют. */
.doc-card__title a {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
  overflow: hidden;
}
.doc-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.doc-card__tag { font-size: var(--fs-micro); font-weight: var(--w-medium); padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); }
.doc-card__meta { font-size: 14px; font-weight: var(--w-semibold); color: var(--ink-3); }

/* ── Аккордеон антикоррупции ── */
.acc { display: flex; flex-direction: column; }
.acc__item { border-top: 1px solid var(--line); padding: 14px 0; }
.acc__item:last-child { border-bottom: 1px solid var(--line); }
.acc__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 6px 0; cursor: pointer; list-style: none;
  font-size: clamp(19px, 1.7vw, 24px); font-weight: var(--w-bold); line-height: 1.2;
}
.acc__head::-webkit-details-marker { display: none; }
.acc__head::after { content: '+'; color: var(--red); font-size: 20px; font-weight: var(--w-bold); }
.acc__item[open] .acc__head::after { content: '−'; }
/* Заголовок тянется, счётчик и «+» прижаты вправо. */
.acc__head > span:first-child { flex: 1; }
.acc__n { flex: none; font-size: 15px; font-weight: var(--w-semibold); color: var(--ink-3); }
.acc__list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; }
.acc__list li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; line-height: 1.4; }
/* Названия документов длинные — ссылка занимает всю свободную ширину,
   дата с весом остаются справа одной строкой. */
.acc__list li > a { flex: 1 1 320px; }
.acc__kind { flex: none; font-size: 12px; font-weight: var(--w-bold); letter-spacing: 0.04em; border: 1px solid var(--black); border-radius: 6px; padding: 3px 7px; }
.acc__meta { flex: none; font-size: 13px; font-weight: var(--w-semibold); color: var(--ink-3); white-space: nowrap; }
.acc__empty { margin: 10px 0 14px; color: var(--ink-3); }
li.acc__empty { display: block; margin: 0; }

/* Маркированный список в текстовых блоках. */
.list { display: flex; flex-direction: column; gap: 10px; padding-left: 1.2em; }
.list li { list-style: disc; font-weight: var(--w-book); }

/* ── Страницы ошибок ── */
.errpage { position: relative; overflow: hidden; min-height: min(70vh, 560px); display: flex; align-items: center; }
.errpage__inner { display: flex; flex-direction: column; gap: var(--gap-md); align-items: flex-start; position: relative; z-index: 1; }
.errpage__code { font-size: clamp(76px, 10vw, 150px); font-weight: var(--w-bold); line-height: 0.9; letter-spacing: -0.01em; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }

  /* На широком экране снимок и подпись сдвинуты в разные стороны —
     это коллаж, и в трёх колонках он читается. В одну колонку тот же
     сдвиг превращается в перекос: снимок жмётся влево, подпись
     растянута во всю ширину. Здесь ставим обе части по центру,
     подпись оставляем шире снимка, чтобы наезд был виден. */
  .member__photo { width: 76%; align-self: center; }
  .member__plate { width: 88%; align-self: center; margin-top: -40px; }
  .dir-hero__horse { position: relative; right: auto; top: auto; transform: none; width: 100%; margin-top: var(--gap-lg); opacity: 0.9; }
  .dir-hero { min-height: auto; }
}

/* В герое направления показатели уезжали в правую колонку — прямо на коня,
   и тёмный текст на красном становился нечитаемым. Ставим их строкой
   под текстом, правую половину целиком отдаём изображению.

   Селектор смотрит на .section-head__inner, а не на саму секцию:
   сетка живёт там. Пока это правило висело на .dir-hero, оно
   переставало работать, и показатели снова уезжали на коня. */
.dir-hero .section-head__inner { grid-template-columns: minmax(0, 1fr); }
.dir-hero .section-head__text { max-width: 54ch; }
.dir-hero .section-head__metrics {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-xl);
  max-width: 54ch;
  padding-top: var(--gap-md);
}

@media (max-width: 900px) {
  .dir-hero .section-head__metrics { gap: var(--gap-lg); }
}

/* ── Форма подписки ── */
.subscribe { position: relative; overflow: hidden; }
/*
  Просвет между лидом и формой задаётся только gap контейнера.
  Правило `.block-head + *` добавляет своё поле сверху, и здесь оно
  складывалось с gap: замер показывал 77px вместо 38 — форма отрывалась
  от текста, к которому относится. Единственное место на сайте, где эти
  два отступа встретились; проверено обходом всех блоков с .block-head.
*/
.subscribe__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: var(--gap-lg);
}
.subscribe__inner .block-head + * { margin-top: 0; }

.subs { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.subs__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.subs__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; }
.subs__label { font-size: var(--fs-micro); font-weight: var(--w-semibold); }
.subs__field input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--black);
  border-radius: var(--r-control);
  background: var(--white);
  color: var(--black);
}
.subs__field input[aria-invalid='true'] { border-color: var(--red); }
.subs__submit { flex: 0 0 auto; }

/* Ловушка для ботов. Не display:none — часть ботов такие поля пропускает. */
.subs__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.subs__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; }
/* Ссылки внутри согласия — красные и подчёркнутые. Подчёркивание
   здесь не украшение: цвет не должен быть единственным признаком
   ссылки (ГОСТ Р 52872-2019), а текст согласия читают внимательнее
   остального. На светлом фоне берём затемнённый --red-ink: фирменный
   #FF443B даёт на белом 3,42:1, этого для текста мало. */
.subs__consent a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 2px; }
.subs__consent a:hover { color: var(--red-ink); text-decoration-thickness: 2px; }
.subs__consent input {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  accent-color: var(--red);
}
.subs__msg { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--w-semibold); }
.subs__msg[hidden] { display: none; }
.subs__msg::before {
  content: '✓';
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--cyan); color: var(--black); font-size: 13px; font-weight: 800;
}
.subs__msg[data-kind='error']::before { content: '!'; background: var(--red); color: var(--white); }

/* Вариант в подвале: на чёрном фоне */
.subs--inline { gap: 10px; }
.subs--inline .subs__label { color: var(--ink-inverse); font-size: 12px; }
.subs--inline .subs__field input {
  font-size: 15px; padding: 11px 12px; border-radius: var(--r-control-sm);
  background: transparent; color: var(--white);
  border-color: var(--line-inverse);
}
.subs--inline .subs__field input::placeholder { color: var(--ink-inverse); }
.subs--inline .subs__consent { font-size: 12px; color: var(--ink-inverse); }
.subs--inline .subs__consent input { width: 17px; height: 17px; }
/* На чёрном подвале фирменный красный проходит с запасом (6,14:1),
   а затемнённый там был бы вязким — 4,15:1. */
.subs--inline .subs__consent a { color: var(--red); }
.subs--inline .subs__consent a:hover { color: var(--red); }
.subs--inline .subs__msg { font-size: 13px; color: var(--white); }
.subs--inline .btn { padding: 12px 18px; font-size: 15px; border-radius: var(--r-control-sm); }

/* Ссылки на файлы документов под лидом раздела. */
.doc-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: var(--w-medium); }