/* ==========================================================================
   ЧПОУ «ПремьерАВТО» — автошкола, Казань
   Концепт «Всё включено. Даже машина на экзамен.»
   Палитра выведена из фирменных материалов клиента:
     #0036E3 — пипеткой с фавикона, #16E0F5 — силуэт авто в эмблеме,
     #8A1210 — макет подарочного сертификата.
   ========================================================================== */

/* ---------- Шрифты (локальные, OFL, кириллица) ---------- */
@font-face{
  font-family:'Unbounded';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/unbounded-var-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Unbounded';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/unbounded-var-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215;
}
@font-face{
  font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/onest-var-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/onest-var-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215;
}

/* ---------- Токены ---------- */
:root{
  --ink:#0B0D12;          /* основной текст */
  --ink-2:#3D4453;        /* вторичный текст */
  --ink-3:#5A6173;        /* подписи — 5.1:1 на самой тёмной подложке (было #6B7385 = 3.93:1) */
  --cream:#F7F3EA;        /* базовый фон */
  --cream-2:#EBE2D0;      /* подложка: заметно темнее базового #F7F3EA, иначе швы секций пропадают */
  --paper:#FFFFFF;
  --blue:#0036E3;         /* ультрамарин, ведущий акцент */
  --blue-d:#0027A8;
  --blue-tint:#E6ECFE;
  --cyan:#16E0F5;         /* только на тёмном */
  --hero-ink:#0A0C14;     /* база кино-героя: тёмная, но не чёрная */
  --hero-glow:#F5A25A;    /* рассветный янтарь из кадра */
  --brick:#8A1210;        /* сигнальный: «не доплачиваете», предупреждения */
  --brick-tint:#FBECEA;
  --line:rgba(11,13,18,.12);
  --line-2:rgba(11,13,18,.07);

  --wrap:1240px;
  --gut:clamp(16px,4vw,32px);
  --sec:clamp(56px,8vw,104px);

  --r-xs:10px; --r-s:12px; --r-m:18px; --r-l:26px;
  /* Одна скорость и одна кривая на весь сайт: до этого в вёрстке жили 24 разные
     длительности (.15s, .16s, .18s, .2s, .22s, .26s, .3s...), и страница ощущалась
     собранной из кусков — каждый элемент реагировал по-своему. */
  --t-fast:.16s; --t:.22s; --t-slow:.42s;
  --e:cubic-bezier(.4,0,.2,1);
  --sh-btn:0 6px 18px rgba(0,54,227,.30);
  --sh-btn-h:0 12px 28px rgba(0,54,227,.36);
  --sh-1:0 1px 2px rgba(11,13,18,.05), 0 4px 14px rgba(11,13,18,.05);
  --sh-2:0 2px 6px rgba(11,13,18,.06), 0 14px 40px rgba(11,13,18,.10);
  --sh-3:0 30px 70px rgba(11,13,18,.18);

  --f-disp:'Unbounded',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --f-text:'Onest',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---------- Сброс и база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip }
body{
  margin:0; overflow-x:clip;
  font-family:var(--f-text); font-size:17px; line-height:1.62; font-weight:400;
  color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
img,svg,video{max-width:100%}
img{height:auto; display:block}
a{color:var(--blue); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--blue-d)}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-disp); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:0 0 .5em}
h1{font-size:clamp(30px,5.4vw,60px); font-weight:800; letter-spacing:-.035em}
h2{font-size:clamp(25px,3.7vw,42px); letter-spacing:-.03em}
h3{font-size:clamp(19px,2.1vw,25px); letter-spacing:-.02em}
h4{font-size:clamp(17px,1.5vw,19px); letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em; padding-left:1.15em}
li{margin:.3em 0}
b,strong{font-weight:700}
table{border-collapse:collapse; width:100%}
::selection{background:var(--blue); color:#fff}

/* стилизованный скроллбар */
html{scrollbar-width:thin; scrollbar-color:rgba(0,54,227,.45) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:rgba(0,54,227,.42); border-radius:999px; border:3px solid var(--cream-2)}
::-webkit-scrollbar-thumb:hover{background:rgba(0,54,227,.65)}

/* ---------- Куда встаёт страница при переходе по якорю ----------
   У секции есть собственный внутренний отступ (до 104px), и если просто отступить
   от шапки, к нему прибавляется ещё и он: между меню и заголовком зияет полоса
   пустоты почти в 200px. Поэтому цель сдвигаем НА величину этого отступа и
   отсчитываем фиксированные 88px: заголовок секции всегда оказывается сразу под
   шапкой, независимо от ширины экрана. */
/* 88px оказалось впритык: на широких экранах шапка вырастает до 89px и подпись
   секции упиралась в её край. 110px дают воздух под меню на любой ширине. */
section[id]{scroll-margin-top:calc(110px - clamp(56px,8vw,104px))}
/* у первого экрана и тёмной полосы отступы свои, им хватает простого сдвига */
.hero[id], .band[id]{scroll-margin-top:80px}

/* ---------- Раскладка ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.sec{padding-block:var(--sec); position:relative}
.sec--tight{padding-block:clamp(34px,5vw,60px)}
.sec--cream2{background:var(--cream-2)}
.sec--paper{background:var(--paper)}
/* ---------- Швы между секциями ----------
   Базовый фон, подложка и белый различаются мягко — на стыке двух светлых секций
   граница пропадала. Секции с собственным фоном подняты «плитами»: крупное
   скругление + тень отделяют их от страницы и дают ощущение слоёв. */
.sec--cream2, .sec--paper, .band{
  border-radius:clamp(20px,2.8vw,40px);
  position:relative; z-index:1;
}
.sec--paper{box-shadow:0 1px 2px rgba(11,13,18,.04), 0 18px 46px rgba(11,13,18,.07)}
.sec--cream2{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
/* Как соседние плиты стыкуются — ниже, в разделе «Стыки соседних плит»:
   раньше здесь стоял положительный зазор, из-за него между секциями шла полоса
   фона страницы. Теперь нижняя плита, наоборот, заходит под верхнюю. */
@media (max-width:520px){
  .sec--cream2, .sec--paper, .band{border-radius:var(--r-m)}
}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0}
.skip:focus{left:0}
#site-header{display:block; min-height:74px}
#site-footer{display:contents}
@media (min-width:1161px){ #site-header{min-height:88px} }

/* eyebrow-подпись секции */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-text); font-size:13px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--blue); margin:0 0 16px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--blue); border-radius:2px}
.sec-head{max-width:none; margin-bottom:clamp(28px,4vw,48px)}
/* Заголовок секции держим узким — так он читается как заголовок, а не как абзац.
   Подзаголовок идёт во всю ширину контейнера: по решению владельца искусственных
   переносов в подводках больше нет. */
.sec-head > h2{max-width:26ch}
.sec-head > p{max-width:none; color:var(--ink-2); font-size:clamp(16px,1.6vw,19px); margin:0}
.sec-head h2{margin-bottom:.35em}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-text); font-size:16px; font-weight:700; line-height:1.25;
  padding:15px 26px; border-radius:999px; border:2px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e), background var(--t-fast) var(--e), color var(--t-fast) var(--e);
  white-space:nowrap; max-width:100%;
}
.btn svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--primary{background:var(--blue); color:#fff; box-shadow:var(--sh-btn)}
.btn--primary:hover{background:var(--blue-d); color:#fff; transform:translateY(-2px); box-shadow:var(--sh-btn-h)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{color:var(--ink); border-color:var(--ink); background:rgba(11,13,18,.04)}
.btn--light{background:#fff; color:var(--ink)}
.btn--light:hover{color:var(--ink); background:#fff; transform:translateY(-2px)}
.btn--outline-l{background:transparent; color:#fff; border-color:rgba(255,255,255,.42)}
.btn--outline-l:hover{color:var(--ink); background:#fff; border-color:#fff}
.btn--wide{width:100%}
@media (max-width:560px){
  .btn{white-space:normal; text-align:center; padding:14px 20px}
  .btn--hero{width:100%}
}

/* ---------- Шапка ---------- */
.header{
  position:sticky; top:0; z-index:60; background:rgba(247,243,234,.92);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line-2);
}
.header__in{display:flex; align-items:center; gap:20px; min-height:74px}
@media (min-width:1161px){ .header__in{min-height:88px} }
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:none; min-width:0}
.brand img{width:auto; flex:none}
/* 🚨 Полный логотип-локап имеет соотношение 1100×128 — на высоте 46px это 395px ширины,
   и вместе с меню из 6 пунктов и телефоном он не помещается даже в 1280.
   Поэтому локап показываем только на широких экранах, иначе — эмблема + текстовый бренд. */
.brand__full{display:none; height:44px}
.brand__mark{display:block; height:40px; width:40px}
@media (min-width:1400px){ .brand__full{display:block} .brand__mark{display:none} }
.brand__t{display:block; font-family:var(--f-disp); font-weight:800; font-size:15px; letter-spacing:-.03em; line-height:1.05}
.brand__t span{display:block; font-family:var(--f-text); font-weight:500; font-size:11px; color:var(--ink-3); letter-spacing:.02em; margin-top:2px}
@media (min-width:1400px){ .brand__t{display:none} }
@media (max-width:400px){ .brand__t{display:none} }
.nav{margin-left:auto; min-width:0}
.nav > ul{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nav a,.nav .navbtn{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:15px; font-weight:600; color:var(--ink); text-decoration:none;
  padding:10px 10px; border-radius:var(--r-xs); background:none; border:0; cursor:pointer;
  font-family:var(--f-text); transition:background var(--t-fast) var(--e),color var(--t-fast) var(--e);
}
@media (min-width:1400px){ .nav a,.nav .navbtn{font-size:15px; padding:10px 12px} }
.nav a:hover,.nav .navbtn:hover{background:rgba(0,54,227,.08); color:var(--blue)}
.nav a[aria-current="page"]{color:var(--blue); background:rgba(0,54,227,.09)}
.has-sub{position:relative}
.has-sub > .navbtn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast) var(--e)}
.has-sub:hover > .navbtn svg,.has-sub:focus-within > .navbtn svg{transform:rotate(180deg)}
/* мостик через мёртвый зазор кнопка → выпадашка */
.has-sub::after{content:""; position:absolute; left:0; right:0; top:100%; height:14px; display:none}
.has-sub:hover::after,.has-sub:focus-within::after{display:block}
.subnav{
  position:absolute; top:calc(100% + 12px); left:0; z-index:70;
  display:grid; width:max-content; min-width:270px; max-width:min(92vw,560px);
  gap:2px; margin:0; padding:8px; list-style:none;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:transform var(--t-fast) var(--e);
}
/* выпадашки только в ОДИН столбец; и последнюю прижимаем к правому краю,
   иначе она вылезает за пределы вьюпорта */
.nav > ul > .has-sub:last-child > .subnav{left:auto; right:0}
.has-sub:hover > .subnav,.has-sub:focus-within > .subnav,.has-sub.is-open > .subnav{
  opacity:1; visibility:visible; transform:translateY(0);
}
.subnav a{display:block; white-space:normal; padding:9px 12px; font-size:15px; font-weight:600; line-height:1.35; border-radius:var(--r-xs)}
.subnav a small{display:block; font-weight:400; font-size:13px; color:var(--ink-3); margin-top:2px}
.hdr-phone{display:none; text-align:right; flex:none; line-height:1.15}
.hdr-phone a{padding:6px 2px; display:block; font-family:var(--f-disp); font-weight:700; font-size:17px; color:var(--ink); text-decoration:none; white-space:nowrap; letter-spacing:-.01em}
.hdr-phone a:hover{color:var(--blue)}
.hdr-phone button{
  background:none; border:0; padding:0; margin-top:1px; cursor:pointer; font-family:var(--f-text);
  font-size:13px; font-weight:600; color:var(--blue); text-decoration:underline; text-underline-offset:2px;
}
@media (min-width:1161px){ .hdr-phone{display:block} }
.burger{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex:none; border:1px solid var(--line); border-radius:var(--r-xs);
  background:var(--paper); cursor:pointer; color:var(--ink);
}
.burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (min-width:1161px){ .burger{display:none} .nav{margin-left:auto} }
@media (max-width:1160px){ .nav{display:none} }

/* Drawer (мобильное меню) */
.scrim{position:fixed; inset:0; z-index:80; background:rgba(11,13,18,.5); opacity:0; visibility:hidden; transition:opacity var(--t) var(--e)}
.scrim.is-open{opacity:1; visibility:visible}
.drawer{
  position:fixed; top:0; right:0; z-index:90; width:min(400px,90vw); height:100dvh;
  background:var(--cream); box-shadow:var(--sh-3); transform:translateX(102%);
  transition:transform var(--t) var(--e); display:flex; flex-direction:column;
}
.drawer.is-open{transform:none}
.drawer__top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px var(--gut); border-bottom:1px solid var(--line-2)}
.drawer__brand{display:flex; align-items:center; gap:10px; min-width:0}
.drawer__brand img{width:38px; height:38px; flex:none}
.drawer__brand b{font-family:var(--f-disp); font-weight:800; font-size:15px; letter-spacing:-.03em; line-height:1.05}
.drawer__brand span{display:block; font-family:var(--f-text); font-weight:500; font-size:11px; color:var(--ink-3); margin-top:2px}
.drawer__close{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.drawer__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.drawer__body{flex:1; overflow-y:auto; padding:12px var(--gut) 24px}
.drawer ul{list-style:none; margin:0; padding:0}
.drawer > .drawer__body > ul > li{border-bottom:1px solid var(--line-2)}
.drawer a,.drawer .navbtn{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:14px 2px; font-family:var(--f-text); font-size:17px; font-weight:600; color:var(--ink);
  text-decoration:none; background:none; border:0; cursor:pointer; text-align:left;
}
.drawer .navbtn svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t) var(--e)}
.drawer .navbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer .subnav{
  position:static; display:none; opacity:1; visibility:visible; transform:none; box-shadow:none;
  border:0; background:none; padding:0 0 10px 12px; min-width:0; width:auto; grid-template-columns:1fr;
}
.drawer .subnav.is-open{display:grid}
.drawer .subnav a{font-size:15px; font-weight:500; padding:9px 2px; color:var(--ink-2)}
.drawer__cta{margin-top:20px; display:grid; gap:10px}
.drawer__phone{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2)}
.drawer__phone a{font-family:var(--f-disp); font-weight:700; font-size:21px; padding:4px 0}

/* ---------- HERO ---------- */
.hero{position:relative; padding-block:clamp(30px,5vw,58px) clamp(44px,6vw,78px); overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 460px at 88% 4%, rgba(0,54,227,.10), transparent 62%),
    radial-gradient(540px 380px at 2% 92%, rgba(22,224,245,.14), transparent 66%);
}
.hero__in{position:relative; z-index:1; display:grid; gap:clamp(30px,4vw,52px); align-items:center}
@media (min-width:1000px){ .hero__in{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)} }
@media (min-width:1000px){ .mosaic{width:90%; margin-inline:auto} }
/* Правая колонка героя: компактные адреса филиалов над фото-мозаикой.
   Раньше это место пустовало — мозаика ниже левой колонки по высоте. */
.hero__side{display:grid; gap:clamp(14px,2vw,20px); min-width:0; align-content:start}
.hbr{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 14px}
.hbr a{display:block; text-decoration:none; color:#fff; padding:10px 12px; border-radius:var(--r-s);
  transition:background var(--t-fast) var(--e)}
.hbr a:hover{background:rgba(255,255,255,.08)}
.hbr b{display:flex; align-items:center; gap:9px; font-family:var(--f-disp); font-weight:800;
  font-size:clamp(14px,1.35vw,16px); letter-spacing:-.02em; white-space:nowrap}
.hbr__dot{width:8px; height:8px; flex:none; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 4px rgba(22,224,245,.18)}
.hbr__a{display:block; margin-top:3px; padding-left:17px; font-size:13px; line-height:1.35;
  color:rgba(255,255,255,.74)}
@media (max-width:520px){ .hbr{grid-template-columns:1fr; gap:2px} }

.hero__badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 9px; border-radius:999px;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1);
  font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:18px;
}
.hero__badge b{color:var(--ink); font-weight:700}
.hero__badge svg{width:17px; height:17px; flex:none; fill:none; stroke:var(--blue);
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round}
.hero h1{margin-bottom:.42em; font-size:clamp(30px,4.9vw,54px)}
.hero h1 em{font-style:normal; color:var(--blue); position:relative; white-space:nowrap}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.13em;
  background:var(--cyan); border-radius:999px; z-index:-1; opacity:.85;
}
.hero__lead{font-size:clamp(17px,1.85vw,21px); color:var(--ink-2); max-width:56ch; margin-bottom:26px}
.hero__lead b{color:var(--ink)}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px}
.hero__note{display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink-3); max-width:48ch}
.hero__note svg{width:16px;height:16px;flex:none;margin-top:3px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* мозаика реальных фото выпускниц */
.mosaic{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; min-width:0}
.mosaic > *{min-width:0}
.mosaic figure{
  margin:0; position:relative; border-radius:var(--r-m); overflow:hidden; background:var(--cream-2);
  box-shadow:var(--sh-2); border:5px solid #fff; transition:transform var(--t) var(--e), box-shadow var(--t) var(--e);
}
.mosaic figure img{width:100%; height:100%; object-fit:cover; display:block}
.mosaic figure:hover{transform:translateY(-5px) rotate(0deg)!important; box-shadow:var(--sh-3); z-index:3}
.mosaic .m1{grid-column:1/4; aspect-ratio:3/4; transform:rotate(-2.2deg)}
.mosaic .m2{grid-column:4/7; aspect-ratio:3/4; transform:rotate(1.8deg); margin-top:26px}
.mosaic .m3{grid-column:1/3; aspect-ratio:1/1; transform:rotate(1.4deg)}
.mosaic .m4{grid-column:3/5; aspect-ratio:1/1; transform:rotate(-1.6deg); margin-top:-14px}
.mosaic .m5{grid-column:5/7; aspect-ratio:1/1; transform:rotate(2.4deg)}
.mosaic__tag{
  /* bottom было 6% — плашка налезала на нижний ряд фото; опущена под мозаику */
  position:absolute; z-index:4; right:-6px; bottom:-18px; display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px; background:var(--ink); color:#fff;
  font-size:14px; font-weight:600; box-shadow:var(--sh-3); white-space:nowrap;
}
.mosaic__tag b{font-family:var(--f-disp); font-weight:800; color:var(--cyan); font-size:17px}
@media (max-width:520px){
  .mosaic{gap:9px}
  .mosaic figure{border-width:4px}
  .mosaic__tag{right:auto; left:50%; transform:translateX(-50%); bottom:-14px; font-size:13px; padding:10px 14px}
  .mosaic__tag b{font-size:15px}
}

/* лента якорных чисел */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; margin-top:clamp(30px,4vw,44px)}
@media (min-width:760px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stats div{background:var(--paper); padding:20px clamp(14px,2vw,24px); min-width:0}
/* 🚨 кегль подобран так, чтобы САМОЕ ДЛИННОЕ значение («с 2013 года») влезало в колонку.
   nowrap оставляем только на числах с единицами; длинные значения переносим по словам. */
/* значение плитки: ЦИФРА — акцент (дисплейный Unbounded, ультрамарин, крупно),
   слово-единица — обычный текстовый шрифт чернилами и мельче */
.stats b{
  display:block; font-family:var(--f-text); font-weight:600;
  font-size:clamp(15px,1.5vw,17px); line-height:1.15; letter-spacing:0;
  color:var(--ink); margin-bottom:8px; overflow-wrap:break-word; hyphens:none;
}
.stats b > i{
  font-style:normal; font-family:var(--f-disp); font-weight:800;
  font-size:clamp(26px,2.9vw,35px); letter-spacing:-.045em; color:var(--blue);
  margin-right:2px;
}
.stats b.nw{white-space:nowrap}
/* 🚨 подпись — ТОЛЬКО прямой потомок плитки. Дескендантный `.stats span` ловил и
   <span class="nw"> внутри <b> → значение получало мелкий тёмный кегль подписи,
   а крупным синим оставался лишь «хвост» после спана. */

.stats > div > span{font-size:13px; color:var(--ink-2); line-height:1.35; display:block}

/* ---------- Секция «три риска» ---------- */
.risks{display:grid; gap:clamp(16px,2vw,22px)}
@media (min-width:900px){ .risks{grid-template-columns:repeat(3,1fr)} }
.risk{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; box-shadow:var(--sh-1); position:relative; overflow:hidden;
}
.risk__n{
  font-family:var(--f-disp); font-weight:800; font-size:13px; letter-spacing:.1em;
  color:var(--brick); background:var(--brick-tint); padding:5px 11px; border-radius:999px;
  align-self:flex-start; margin-bottom:16px;
}
.risk__n--src{color:var(--blue); background:var(--blue-tint)}
.risk h3{margin-bottom:.45em}
.risk__quote{
  font-size:15px; line-height:1.55; color:var(--ink-2); font-style:italic;
  border-left:3px solid var(--brick); padding:2px 0 2px 14px; margin:0 0 16px;
}
.risk__quote cite{display:block; font-style:normal; font-size:13px; color:var(--ink-3); margin-top:7px}
.risk__quote cite a{color:var(--ink-3)}
.risk__ans{
  margin-top:auto; padding-top:16px; border-top:1px dashed var(--line);
  display:flex; align-items:flex-start; gap:11px; font-size:15px; line-height:1.5;
}
.risk__ans svg{width:22px;height:22px;flex:none;margin-top:1px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.risk__ans b{color:var(--ink)}

/* ---------- Панель «что входит» ---------- */
.incl{display:grid; gap:clamp(20px,3vw,34px)}
@media (min-width:940px){ .incl{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start} }
/* Левая карточка секции: раньше это был голый список из тонких линеек рядом
   с оформленной тёмной панелью справа — асимметрия и читалась как «пусто».
   Теперь обе стороны равноправны: карточка с заголовком, свой фон, своя тень. */
.incl{align-items:stretch}
.inclc{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(24px,3vw,32px); box-shadow:var(--sh-1); display:flex; flex-direction:column}
.inclc h3{margin:0 0 clamp(16px,2vw,22px); font-size:clamp(18px,2vw,21px)}
.incl__list{display:grid; gap:2px 26px; list-style:none; padding:0; margin:0}
@media (min-width:620px){ .incl__list{grid-template-columns:1fr 1fr} }
.incl__list li{display:flex; align-items:center; gap:12px; margin:0; padding:11px 0;
  font-size:15px; line-height:1.45; position:relative}
/* волосяная линия между строками вместо рамок-ячеек: список дышит, а сетка видна */
.incl__list li::after{content:""; position:absolute; left:38px; right:0; bottom:0;
  height:1px; background:var(--line-2)}
@media (min-width:620px){
  .incl__list li:nth-last-child(-n+2)::after{display:none}
}
@media (max-width:619px){ .incl__list li:last-child::after{display:none} }
.incl__list svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nopay{
  background:var(--ink); color:#fff; border-radius:var(--r-l); padding:clamp(24px,3vw,32px);
  display:flex; flex-direction:column;
  box-shadow:var(--sh-2); position:relative; overflow:hidden;
}
.nopay::before{content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(22,224,245,.22),transparent 70%)}
.nopay h3{color:#fff; position:relative}
.nopay ul{list-style:none; padding:0; margin:0; position:relative}
.nopay li{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.13); font-size:15px}
.nopay li svg{width:22px; height:22px; flex:none; fill:none; stroke:var(--cyan); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.nopay li > span{flex:1; min-width:0}
.nopay li:last-child{border-bottom:0}
.nopay li b{margin-left:auto; font-family:var(--f-disp); font-weight:800; color:var(--cyan); font-size:16px; white-space:nowrap}
.nopay__foot{position:relative; margin:16px 0 0; font-size:13px; color:rgba(255,255,255,.62); line-height:1.5}

/* ---------- Первый экран с видео-фоном ----------
   Обычный первый экран, только вместо светлой подложки под ним идёт зациклённое
   видео рассветного автодрома. Текст остаётся главным: поверх видео лежит плотная
   вуаль, и контраст считается по самому светлому кадру, а не по среднему.
   На телефонах и при reduced-motion видео не грузится вовсе — стоит кадр-постер. */
.hero--film{position:relative; isolation:isolate; color:#fff;
  background:var(--hero-ink); overflow:hidden; overflow:clip}
.hero--film::before{display:none}                    /* светлый декор обычного героя гасим */
.hero__bg{position:absolute; inset:0; z-index:-1}
.hero__still,.hero__vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 62%}
.hero__vid{opacity:0; transition:opacity var(--t-slow) var(--e); will-change:transform; transform:translateZ(0)}
.hero--film.is-playing .hero__vid{opacity:1}
.hero__veil{position:absolute; inset:0;
  background:
    linear-gradient(102deg, rgba(6,8,16,.90) 0%, rgba(6,8,16,.80) 42%, rgba(6,8,16,.44) 72%, rgba(6,8,16,.34) 100%),
    linear-gradient(180deg, rgba(6,8,16,.62) 0%, rgba(6,8,16,.10) 30%, rgba(6,8,16,.20) 66%, rgba(6,8,16,.78) 100%)}

.hero--film h1,.hero--film .hero__lead{color:#fff}
.hero--film h1 em{color:var(--cyan)}
.hero--film h1 em::after{background:rgba(22,224,245,.28)}
.hero--film .hero__lead{color:rgba(255,255,255,.90)}
.hero--film .hero__note{color:rgba(255,255,255,.80)}
.hero--film .hero__note svg{stroke:var(--cyan)}
.hero--film .hero__badge{background:rgba(8,10,18,.55); border:1px solid rgba(160,180,215,.32);
  backdrop-filter:blur(10px); color:rgba(255,255,255,.92)}
.hero--film .hero__badge b{color:#fff}
.hero--film .hero__badge svg{stroke:var(--cyan)}
/* тексты поверх видео получают тень: кадр меняется, а читаемость должна держаться */
.hero--film h1,.hero--film .hero__lead,.hero--film .hero__note,.hero--film .hero__badge{
  text-shadow:0 1px 2px rgba(4,5,10,.9), 0 3px 14px rgba(4,5,10,.7)}
.hero--film .btn{text-shadow:none}

/* лента цифр на тёмном */
.hero--film .stats{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.22)}
.hero--film .stats div{background:rgba(10,12,20,.60); backdrop-filter:blur(8px)}
.hero--film .stats b{color:#fff}
.hero--film .stats b i{color:var(--cyan)}
.hero--film .stats span{color:rgba(255,255,255,.78)}
/* фото учеников: рамки светлые, подпись читается на тёмном */
.hero--film .mosaic figure{border-color:rgba(255,255,255,.86)}
.hero--film .mosaic__tag{background:rgba(8,10,18,.72); backdrop-filter:blur(8px)}

@media (prefers-reduced-motion:reduce){ .hero__vid{display:none} }

/* ---------- Значки списков: знак в кружке ----------
   Была голая линия-птичка, висевшая в воздухе рядом со строкой, и в каждом блоке
   своего размера. Теперь один кружок на весь сайт: 16px значок в 5px поле, итого 26.
   У списка появляется ровная опора по левому краю, а сам значок читается как деталь
   фирменного языка, а не как символ по умолчанию. */
.incl__list li > svg, .tar__list li > svg, .tars__all li > svg,
.nopay li > svg, .mosaic__tag > svg{
  /* размер задаём по внешней рамке: во флекс-строках content-box давал разную
     ширину кружка от блока к блоку (26 против 10 пикселей в тёмной карточке) */
  width:26px; height:26px; padding:5px; box-sizing:border-box; border-radius:50%;
  /* min-width обязателен: у иконок в разметке стоят width="1em"/height="1em", и во
     флекс-строке тёмной карточки svg сжимался по горизонтали до 10px, оставаясь
     26px по высоте — кружок превращался в овал. */
  flex:0 0 26px; min-width:26px; aspect-ratio:1; margin-top:0; fill:none; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  background:var(--blue-tint); stroke:var(--blue);
}
/* на тёмных подложках круг светится изнутри, а не выжигает дыру в фоне */
.nopay li > svg, .mosaic__tag > svg, .band .facts li > svg{
  background:rgba(255,255,255,.12); stroke:var(--cyan);
}
.mosaic__tag > svg{width:22px; height:22px; flex:0 0 22px; min-width:22px; padding:4px}

/* ---------- Стыки соседних плит (общее правило) ----------
   Когда две секции с собственным фоном идут подряд, между ними видна полоса
   базового фона, а в скруглениях просвечивает она же. Лечим так: ВЕРХНЯЯ плита
   выпускается вниз на величину скругления и ложится слоем выше, а нижняя теряет
   верхние скругления. Тогда нижние скругления верхней плиты читаются как вырез,
   сквозь который видно поле нижней — ровно тот стык, что на главной.
   Порядок важен: если вместо этого поднимать нижнюю, она в цепочке из трёх плит
   перекрывает верхнюю и вырез пропадает. */
.sec--cream2:has(+ .sec--paper), .sec--cream2:has(+ .band), .sec--cream2:has(+ .sec--cream2),
.sec--paper:has(+ .sec--cream2), .sec--paper:has(+ .band), .sec--paper:has(+ .sec--paper),
.band:has(+ .sec--cream2), .band:has(+ .sec--paper), .band:has(+ .band),
.phero:has(+ .sec--cream2), .phero:has(+ .sec--paper), .phero:has(+ .band){
  margin-bottom:calc(-1 * clamp(20px,2.8vw,40px));
  position:relative;   /* слой задаёт правило порядка ниже, здесь его не трогаем:
                          иначе оно перебивало убывающий z-index и вырез пропадал */
}
.sec--cream2 + .sec--paper, .sec--cream2 + .band, .sec--cream2 + .sec--cream2,
.sec--paper + .sec--cream2, .sec--paper + .band, .sec--paper + .sec--paper,
.band + .sec--cream2, .band + .sec--paper, .band + .band,
.phero + .sec--cream2, .phero + .sec--paper, .phero + .band{
  border-top-left-radius:0; border-top-right-radius:0;
}
/* 🚨 Слои задаём по убыванию сверху вниз. Иначе в цепочке из трёх и более плит
   секция оказывается одновременно «верхней» для следующей и «нижней» для
   предыдущей, при равных слоях побеждает порядок в разметке — и нижняя плита
   перекрывает вырез верхней. Убывающий порядок делает эффект предсказуемым. */
main > section:nth-child(1){z-index:20}
main > section:nth-child(2){z-index:19}
main > section:nth-child(3){z-index:18}
main > section:nth-child(4){z-index:17}
main > section:nth-child(5){z-index:16}
main > section:nth-child(6){z-index:15}
main > section:nth-child(7){z-index:14}
main > section:nth-child(8){z-index:13}
main > section:nth-child(9){z-index:12}
main > section:nth-child(10){z-index:11}
main > section:nth-child(11){z-index:10}
main > section:nth-child(12){z-index:9}
main > section:nth-child(13){z-index:8}
main > section:nth-child(14){z-index:7}
main > section:nth-child(15){z-index:6}
main > section:nth-child(n+16){z-index:5}
/* Видео-отзывы и финальный блок записи примыкают без выреза снизу:
   первый — к следующей секции, второй — к футеру. */
.video-sec{border-bottom-left-radius:0; border-bottom-right-radius:0}
.cta-final{border-bottom-left-radius:0; border-bottom-right-radius:0}
/* Любая последняя секция страницы упирается в футер: нижние скругления там
   оставляли по углам светлые треугольники фона, и переход к тёмному футеру
   читался как ступенька. */
main > section:last-child{border-bottom-left-radius:0; border-bottom-right-radius:0}

/* ---------- Тарифы ---------- */
.tars{display:grid; gap:clamp(18px,2.4vw,26px)}
@media (min-width:760px){ .tars{grid-template-columns:1fr 1fr} }
.tar{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(24px,2.8vw,32px); display:flex; flex-direction:column; gap:14px;
  box-shadow:var(--sh-1);
}
.tar__n{
  margin:0; font-family:var(--f-disp); font-weight:800; font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--blue);
}
.tar__price{
  margin:0; font-family:var(--f-disp); font-weight:800; font-size:clamp(30px,3.6vw,38px);
  letter-spacing:-.03em; line-height:1.05; white-space:nowrap;
}
.tar__price span{
  display:block; margin-top:6px; font-family:var(--f-text); font-weight:500; font-size:13px;
  letter-spacing:0; color:var(--ink-3); white-space:normal;
}
.tar__lead{margin:0; color:var(--ink-2); font-size:15px; line-height:1.5}
.tar__list{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.tar__list li{display:flex; align-items:flex-start; gap:11px; font-size:15px; line-height:1.45}
.tar__list svg{width:20px; height:20px; flex:none; margin-top:2px; fill:none; stroke:var(--blue); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.tar .btn{margin-top:auto}
.tars__all{
  margin-top:clamp(18px,2.4vw,26px); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-l); padding:clamp(22px,2.6vw,30px);
}
.tars__all h3{margin:0 0 14px; font-size:clamp(18px,2vw,21px)}
.tars__all ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
@media (min-width:620px){ .tars__all ul{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .tars__all ul{grid-template-columns:repeat(4,1fr)} }
.tars__all li{display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.4}
.tars__all svg{width:19px; height:19px; flex:none; margin-top:1px; fill:none; stroke:var(--blue); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.tars__all > p{
  display:flex; gap:11px; margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line);
  color:var(--ink-2); font-size:15px; line-height:1.55;
}
.tars__all > p svg{width:20px; height:20px; flex:none; margin-top:2px; stroke:var(--blue)}

/* ---------- Тёмная фото-полоса ---------- */
/* 🚨 overflow:clip вместо hidden: hidden у предка ломает position:sticky внутри секции
   (липкая колонка в «Экзамене»). clip так же обрезает фон, но не создаёт скролл-контейнер.
   Строка с hidden оставлена первой как фолбэк для старых браузеров. */
.band{position:relative; color:#fff; overflow:hidden; overflow:clip; isolation:isolate}
.band__bg{position:absolute; inset:0; z-index:-2}
.band__bg img{width:100%; height:100%; object-fit:cover}
.band::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(8,10,16,.94) 0%, rgba(8,10,16,.88) 42%, rgba(8,10,16,.55) 100%);
}
.band h2,.band h3{color:#fff}
.band p{color:rgba(255,255,255,.80)}
.band .eyebrow{color:var(--cyan)}
.band .eyebrow::before{background:var(--cyan)}
.band__in{display:grid; gap:clamp(24px,3vw,44px); align-items:center; position:relative}
@media (min-width:940px){ .band__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} }
/* Липкая текстовая колонка (секция «Экзамен»): текст короткий, соседняя карточка с
   каруселью длинная — прижимаем текст к верху и держим в поле зрения, пока листается
   карточка. По высоте окна порог: 105px под шапку + колонка ~400px, с запасом 620px. */
.band__in:has(.band__lead){align-items:start}
@media (min-width:940px) and (min-height:620px){
  .band__lead{position:sticky; top:105px; align-self:start}
}
.band__card{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-l);
  padding:clamp(22px,2.6vw,30px); backdrop-filter:blur(8px);
}
.band__card dl{margin:0; display:grid; gap:0}
.band__card dt{font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--cyan); font-weight:700; margin-top:16px}
.band__card dt:first-child{margin-top:0}
.band__card dd{margin:5px 0 0; font-size:16px; color:#fff; line-height:1.5}

/* ---------- Карусель фото (секция «Экзамен») ---------- */
.carou{position:relative; margin-top:20px}
.carou__vp{overflow:hidden; border-radius:var(--r-m); background:rgba(255,255,255,.06)}
.carou__track{
  display:flex; margin:0; padding:0; list-style:none;
  transition:transform var(--t-slow) var(--e);
}
.carou__track.is-drag{transition:none}
.carou__item{flex:0 0 100%; min-width:0; margin:0; position:relative}
/* Модель автомобиля — на самом слайде, справа вверху. Подложка со стеклом, чтобы
   надпись читалась и на светлом небе, и на тёмном асфальте: кадры разные. */
.carou__badge{
  position:absolute; top:10px; right:10px; z-index:2;
  padding:6px 12px; border-radius:999px;
  background:rgba(8,10,18,.62); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.20);
  font-size:13px; font-weight:600; letter-spacing:.01em; color:#fff;
  text-shadow:0 1px 3px rgba(4,5,10,.8); white-space:nowrap;
}
@media (max-width:520px){ .carou__badge{font-size:12px; padding:5px 10px; top:8px; right:8px} }
/* 🚨 aspect-ratio + object-fit: разные исходники не «прыгают» по высоте при листании */
.carou__item img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover}
.carou__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; padding:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:21px; color:#fff;
  background:rgba(10,12,18,.55); border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(6px); transition:background var(--t), border-color var(--t), transform var(--t);
}
.carou__nav:hover{background:rgba(10,12,18,.82); border-color:rgba(255,255,255,.55)}
.carou__nav:active{transform:translateY(-50%) scale(.94)}
.carou__nav--prev{left:12px}
.carou__nav--next{right:12px}
.carou__dots{
  position:absolute; left:0; right:0; bottom:10px; z-index:2;
  display:flex; justify-content:center; align-items:center; gap:2px;
}
.carou__dots button{
  width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.carou__dots button::before{
  content:""; width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.5);
  box-shadow:0 1px 3px rgba(0,0,0,.45); transition:width var(--t), background var(--t);
}
.carou__dots button:hover::before{background:rgba(255,255,255,.8)}
.carou__dots button[aria-current="true"]::before{width:22px; background:var(--cyan)}
@media (prefers-reduced-motion: reduce){
  .carou__track{transition:none}
  .carou__nav, .carou__dots button::before{transition:none}
}

/* ---------- Программы (фото-карточки) ---------- */
.progs{display:grid; gap:clamp(18px,2.4vw,26px)}
@media (min-width:820px){ .progs{grid-template-columns:1fr 1fr} }
.prog{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--sh-1);
  transition:transform var(--t) var(--e), box-shadow var(--t) var(--e);
}
.prog:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.prog__ph{aspect-ratio:16/9; overflow:hidden; background:var(--cream-2); position:relative}
.prog__ph img{width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--e)}
.prog:hover .prog__ph img{transform:scale(1.04)}
.prog__tag{position:absolute; left:14px; top:14px; padding:6px 13px; border-radius:999px; background:var(--ink); color:#fff; font-size:13px; font-weight:700; letter-spacing:.04em}
.prog__b{padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; flex:1}
.prog__b h3{margin-bottom:.3em}
.prog__b > p{color:var(--ink-2); font-size:15px}
.prog__facts{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:9px}
.prog__facts li{display:flex; align-items:center; gap:10px; font-size:15px}
.prog__facts svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.prog__facts b{white-space:nowrap}
.prog__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line-2)}
.prog__price{font-family:var(--f-disp); font-weight:800; font-size:21px; letter-spacing:-.03em; white-space:nowrap}
.prog__price span{display:block; font-family:var(--f-text); font-weight:500; font-size:13px; color:var(--ink-3); letter-spacing:0}

/* ---------- Инструкторы ----------
   Фото реальные, студийные, на белом фоне: плитка тоже белая — вырезанный портрет
   ложится в неё без видимого шва, а цвет бренда живёт в бейдже стажа и подписи.
   Бейдж стоит СВЕРХУ: внизу кадра тёмный жилет, тёмная плашка на нём потерялась бы. */
.team{list-style:none; margin:0; padding:0; display:grid; gap:clamp(14px,2vw,22px); grid-template-columns:1fr 1fr}
@media (min-width:680px){ .team{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1060px){ .team{grid-template-columns:repeat(5,1fr)} }
.team__i{position:relative; display:flex; flex-direction:column; min-width:0}
.team__ph{
  position:relative; aspect-ratio:3/4; border-radius:var(--r-m); overflow:hidden;
  background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-1);
  transition:box-shadow var(--t) var(--e), transform var(--t) var(--e);
}
.team__ph img{width:100%; height:100%; object-fit:cover; display:block}
.team__i:hover .team__ph{transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--blue), var(--sh-2)}
.team__n{margin-top:14px}
.team__n b{display:block; font-family:var(--f-disp); font-weight:800; font-size:clamp(15px,1.5vw,17px); letter-spacing:-.02em; line-height:1.2}
.team__n span{display:block; margin-top:3px; color:var(--ink-2); font-size:14px; line-height:1.35}
.team__badge{
  /* Стаж — строкой в самом низу карточки, а не плашкой поверх фото. margin-top:auto прижимает
     её к низу, а грид тянет карточки ряда до одной высоты: строки стажа встают на одну линию,
     сколько бы строк ни занимало имя. */
  margin-top:auto; padding-top:12px; align-self:flex-start;
  display:inline-flex; align-items:flex-start; gap:7px;
  color:var(--ink); font-size:13.5px; font-weight:600; line-height:1.35;
}
.team__badge svg{width:15px; height:15px; flex:none; margin-top:1px; fill:none; stroke:var(--blue); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Страница «Заявка отправлена» ----------
   Тёмный экран с рисующейся галочкой. Галочка — СВОЙ svg с классами под анимацию,
   а не icon(): у того width/height=1em, и в обёртке с font-size:0 иконка
   схлопывалась в ноль (на боевом был виден пустой синий квадрат). */
.thx{
  position:relative; overflow:clip; text-align:center; color:#fff;
  background:var(--hero-ink); padding-block:clamp(64px,11vw,132px);
}
.thx::before{
  content:""; position:absolute; left:50%; top:-38%; transform:translateX(-50%);
  width:min(980px,150%); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(0,54,227,.50), rgba(22,224,245,.12) 46%, transparent 68%);
}
.thx__in{position:relative; z-index:1}
.thx__mark{
  width:clamp(96px,13vw,128px); aspect-ratio:1; margin:0 auto clamp(22px,3vw,32px);
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 20px 55px rgba(0,54,227,.45);
}
.thx__mark svg{width:60%; height:60%; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.thx__c{stroke:rgba(255,255,255,.38); stroke-dasharray:145; stroke-dashoffset:145; animation:thx-draw .85s var(--e) forwards}
.thx__v{stroke:var(--cyan); stroke-dasharray:34; stroke-dashoffset:34; animation:thx-draw .45s var(--e) .5s forwards}
@keyframes thx-draw{ to{stroke-dashoffset:0} }
.thx h1{color:#fff; margin-bottom:.32em}
.thx__lead{
  color:rgba(255,255,255,.80); font-size:clamp(16px,1.8vw,19px); line-height:1.6;
  max-width:60ch; margin:0 auto clamp(24px,3vw,34px);
}
.thx .cta-row{justify-content:center; margin-bottom:0}
/* Анимация — украшение, а не смысл: при reduce галочка просто нарисована. */
@media (prefers-reduced-motion:reduce){
  .thx__c, .thx__v{animation:none; stroke-dashoffset:0}
}
/* Шагов на этой странице три, а не четыре, как на главной. Селектор двойной
   (.steps.steps--3): правило .steps{repeat(4,1fr)} объявлено НИЖЕ по файлу и при
   равной специфичности перебивало одиночный класс — третий шаг растягивался,
   а четвёртая колонка оставалась пустой. */
@media (min-width:820px){ .steps.steps--3{grid-template-columns:repeat(3,1fr)} }

/* ---------- Фирменный элемент: ДОСКА ВЫПУСКА ---------- */
.board__chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(20px,2.6vw,28px)}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  font-family:var(--f-text); font-size:14px; font-weight:600; cursor:pointer;
  transition:background var(--t-fast) var(--e), color var(--t-fast) var(--e), border-color var(--t-fast) var(--e);
}
.chip:hover{border-color:var(--blue); color:var(--blue)}
.chip b{font-family:var(--f-disp); font-weight:700; font-size:12px; padding:1px 7px; border-radius:999px; background:var(--blue-tint); color:var(--blue)}
.chip[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.chip[aria-pressed="true"] b{background:rgba(255,255,255,.22); color:#fff}
.board{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:640px){ .board{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .board{grid-template-columns:repeat(3,1fr)} }
.card-rev{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:22px;
  display:flex; flex-direction:column; box-shadow:var(--sh-1); color:var(--ink);
  break-inside:avoid; transition:transform var(--t) var(--e), box-shadow var(--t) var(--e);
}
.card-rev[hidden]{display:none}
.card-rev:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.card-rev__stars{display:flex; gap:2px; margin-bottom:12px}
.card-rev__stars svg{width:15px;height:15px;fill:var(--blue);stroke:none}
.card-rev h3{font-size:17px; margin-bottom:.4em; line-height:1.3}
.card-rev p{font-size:15px; line-height:1.55; color:var(--ink-2); margin:0 0 12px}
/* Дословная цитата. Длинные отзывы визуально подрезаются, но текст ЦЕЛИКОМ в разметке —
   его видят и читатель после «Развернуть», и поисковик. */
.card-rev__q{margin:0 0 14px; border:0; padding:0; quotes:none}
.card-rev__q p:last-child{margin-bottom:0}
.card-rev.is-long .card-rev__q{
  display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical;
  overflow:hidden; position:relative;
}
.card-rev.is-open .card-rev__q{display:block; -webkit-line-clamp:unset; overflow:visible}
.card-rev__more{
  display:none; align-self:flex-start; margin:0 0 14px; padding:0; border:0; background:none;
  cursor:pointer; font-family:var(--f-text); font-size:13px; font-weight:700; color:var(--blue);
  text-decoration:underline; text-underline-offset:3px;
}
.card-rev.is-long .card-rev__more{display:inline-block}
.card-rev__more:hover{color:var(--blue-d)}
.card-rev__who{margin-top:auto; display:flex; align-items:center; gap:11px; padding-top:14px; border-top:1px solid var(--line-2)}
.mono{
  width:40px; height:40px; flex:none; border-radius:var(--r-s); display:grid; place-items:center;
  background:var(--blue-tint); color:var(--blue); font-family:var(--f-disp); font-weight:800; font-size:15px;
}
.mono--ph{padding:0; overflow:hidden; background:var(--cream-2)}
.mono--ph img{width:100%;height:100%;object-fit:cover}
.card-rev__who b{display:block; font-size:15px; font-weight:700; color:var(--ink)}
/* только ВЛОЖЕННЫЙ span-подпись, иначе правило перекрашивает и монограмму .mono */
.card-rev__who > span > span{display:block; font-size:13px; color:var(--ink-3)}
.card-rev__who > span{min-width:0}
.card-rev__who > span > span a{color:var(--ink-3); text-decoration:underline; text-underline-offset:2px}
.card-rev__who > span > span a:hover{color:var(--blue)}
.card-rev__thx{display:flex; flex-wrap:wrap; gap:5px; margin:0 0 14px}
.card-rev__thx i{
  font-style:normal; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--cream-2); color:var(--ink-2);
}
.board__empty{
  grid-column:1/-1; text-align:center; padding:40px 20px; color:var(--ink-3);
  border:1px dashed var(--line); border-radius:var(--r-l); background:var(--paper);
}
.board__empty[hidden]{display:none}
.board__more{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; margin-top:26px}
@media (max-width:560px){ .board__more{flex-direction:column} .board__more .btn{width:100%} }
.board__count{font-size:14px; color:var(--ink-3); margin:0 0 18px}
.board__count b{color:var(--ink); font-weight:700}

/* видео-отзывы (фасад: постер + подгрузка по клику) */
.vids{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.vid{
  position:relative; aspect-ratio:9/16; border-radius:var(--r-m); overflow:hidden; border:0; padding:0;
  cursor:pointer; background:var(--ink); box-shadow:var(--sh-1); display:block; width:100%;
  transition:transform var(--t) var(--e), box-shadow var(--t) var(--e);
}
.vid:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.vid__ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--e)}
.vid:hover .vid__ph{transform:scale(1.05)}
.vid::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(8,10,16,.10) 0%, rgba(8,10,16,.05) 45%, rgba(8,10,16,.82) 100%);
}
.vid__play{
  position:absolute; z-index:2; left:50%; top:44%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; box-shadow:0 8px 26px rgba(0,0,0,.4); transition:transform var(--t) var(--e);
}
.vid:hover .vid__play{transform:translate(-50%,-50%) scale(1.09)}
.vid__play svg{width:22px;height:22px;fill:var(--ink);stroke:none;margin-left:3px}
.vid__lbl{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 16px 14px; text-align:left;
  background:linear-gradient(transparent,rgba(8,10,16,.85)); color:#fff; font-size:14px; font-weight:600; font-family:var(--f-text)}
.vid__lbl span{display:block; font-weight:400; font-size:12px; color:rgba(255,255,255,.7); margin-top:2px}

/* ---------- Лайтбокс-карусель видео-отзывов ---------- */
.vlb{
  position:fixed; inset:0; z-index:145; display:none; align-items:center; justify-content:center;
  background:rgba(8,10,16,.95); padding:clamp(12px,3vw,40px);
}
.vlb.is-open{display:flex}
.vlb__stage{
  position:relative; width:min(calc(100vw - 2*clamp(12px,3vw,40px)), calc(84dvh * 9 / 16));
  aspect-ratio:9/16; border-radius:var(--r-m); overflow:hidden; background:#000; box-shadow:var(--sh-3);
}
.vlb__stage iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vlb__x,.vlb__p,.vlb__n{
  position:absolute; width:52px; height:52px; border-radius:50%; cursor:pointer; color:#fff;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12);
  display:grid; place-items:center; backdrop-filter:blur(6px); transition:background var(--t-fast) var(--e), transform var(--t-fast) var(--e);
}
.vlb__x:hover,.vlb__p:hover,.vlb__n:hover{background:rgba(255,255,255,.24); transform:scale(1.06)}
.vlb__x{top:16px; right:16px; z-index:3}
.vlb__p{left:16px; top:50%; transform:translateY(-50%)}
.vlb__n{right:16px; top:50%; transform:translateY(-50%)}
.vlb__p:hover,.vlb__n:hover{transform:translateY(-50%) scale(1.06)}
.vlb__x svg,.vlb__p svg,.vlb__n svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vlb__c{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3;
  color:#fff; font-family:var(--f-text); font-size:14px; font-weight:600;
  background:rgba(8,10,16,.6); border:1px solid rgba(255,255,255,.18);
  padding:7px 16px; border-radius:999px; backdrop-filter:blur(6px); white-space:nowrap;
}
@media (max-width:620px){
  .vlb__p{left:8px} .vlb__n{right:8px}
  .vlb__x{top:10px; right:10px; width:46px; height:46px}
  .vlb__p,.vlb__n{width:46px; height:46px}
}

/* ---------- Автодромы / сплит текст+фото ---------- */
.split{display:grid; gap:clamp(24px,3.4vw,48px); align-items:center}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr} .split--rev .split__ph{order:-1} }
.split__ph{border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-2); background:var(--cream-2)}
/* Прилипающее фото — тот же приём, что у текста в секции «Экзамен»: колонка с
   картинкой держится в поле зрения, пока читается текст рядом. Включаем только там,
   где для этого есть место: широкий экран, высокое окно и текст длиннее картинки.
   Порог по высоте — 105px под шапку плюс сама картинка, с запасом. */
@media (min-width:900px) and (min-height:700px){
  .split:has(.split__sticky){align-items:start}
  .split__sticky{position:sticky; top:105px; align-self:start}
}
@media (prefers-reduced-motion:reduce){ .split__sticky{position:static} }
.split__ph img{width:100%; aspect-ratio:4/3; object-fit:cover}
.split__b p{color:var(--ink-2)}
.facts{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px}
.facts li{display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.5}
.facts svg{width:21px;height:21px;flex:none;margin-top:2px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.facts b{color:var(--ink)}

/* ---------- Филиалы / расписание ---------- */
.branches{display:grid; gap:clamp(16px,2vw,22px)}
@media (min-width:860px){ .branches{grid-template-columns:1fr 1fr} }
.branch{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--sh-1);
}
.branch__ph{aspect-ratio:16/10; overflow:hidden; background:var(--cream-2)}
.branch__ph img{width:100%;height:100%;object-fit:cover}
.branch__b{padding:clamp(20px,2.3vw,26px); display:flex; flex-direction:column; flex:1}
.branch__b h3{margin-bottom:.35em}
.branch dl{margin:0 0 20px; display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:15px}
.branch dt{color:var(--ink-3); font-size:13px}
.branch dd{margin:0; font-weight:600}
.branch dd a{color:var(--ink); text-decoration:none; font-weight:700; white-space:nowrap}
.branch dd a:hover{color:var(--blue)}
.branch__foot{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap}
.nowrap{white-space:nowrap}

/* ---------- Шаги ---------- */
.steps{counter-reset:s; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; background:var(--line-2)}
@media (min-width:820px){ .steps{grid-template-columns:repeat(4,1fr); gap:1px} }
@media (max-width:819px){ .steps{gap:1px} }
.step{background:var(--paper); padding:clamp(22px,2.4vw,28px); counter-increment:s; position:relative}
.step::before{
  content:"0" counter(s); display:block; font-family:var(--f-disp); font-weight:800; font-size:14px;
  letter-spacing:.06em; color:var(--blue); margin-bottom:14px;
}
.step h3{font-size:17px; margin-bottom:.4em}
.step p{font-size:15px; color:var(--ink-2); margin:0}

/* ---------- Цены ---------- */
.price-hero{
  display:grid; gap:clamp(22px,3vw,40px); align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(24px,3.4vw,44px); box-shadow:var(--sh-2);
}
@media (min-width:900px){ .price-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)} }
.price-hero__n{font-family:var(--f-disp); font-weight:800; font-size:clamp(34px,4.6vw,58px); line-height:.95; letter-spacing:-.045em; color:var(--blue); margin:0 0 10px; white-space:nowrap}
.price-hero__n small{display:block; font-family:var(--f-text); font-weight:500; font-size:15px; color:var(--ink-2); letter-spacing:0; margin-top:12px; white-space:normal}
.rassr{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; margin:0 0 20px}
@media (max-width:560px){ .rassr{grid-template-columns:1fr} }
.rassr div{background:var(--cream); padding:18px 12px; text-align:center; min-width:0}
/* Как в плитках на главной: ЦИФРА — крупный акцент, слово-единица мельче чернилами.
   nowrap только на числе; приставка «от» — отдельной строкой-подписью сверху,
   поэтому длинное «от 40 000 ₽» никогда не режется в узкой колонке. */
.rassr b{display:block; font-family:var(--f-text); font-weight:600;
  font-size:clamp(14px,1.4vw,16px); color:var(--ink); line-height:1.15; letter-spacing:0}
.rassr b > i{font-style:normal; font-family:var(--f-disp); font-weight:800;
  font-size:clamp(25px,3vw,33px); letter-spacing:-.04em; color:var(--blue); white-space:nowrap}
.rassr b > small{display:block; font-family:var(--f-text); font-weight:600; font-size:13px;
  color:var(--ink-3); letter-spacing:.02em; margin-bottom:2px}
.rassr span{display:block; font-size:13px; color:var(--ink-3); margin-top:5px; line-height:1.3}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:12px}
@media (min-width:900px){ .faq{grid-template-columns:1fr 1fr; align-items:start} }
.faq details{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); color:var(--ink);
  overflow:hidden; transition:border-color var(--t-fast) var(--e);
}
.faq details[open]{border-color:rgba(0,54,227,.34)}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 52px 18px 20px; position:relative;
  font-family:var(--f-text); font-weight:700; font-size:17px; line-height:1.4; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:20px; top:24px; width:11px; height:11px;
  border-right:2.4px solid var(--blue); border-bottom:2.4px solid var(--blue);
  transform:rotate(45deg); transition:transform var(--t) var(--e);
}
.faq details[open] summary::after{transform:rotate(-135deg); top:27px}
.faq summary:hover{color:var(--blue)}
.faq__b{padding:0 20px 20px; font-size:15px; color:var(--ink-2); line-height:1.6}
.faq__b p:last-child{margin-bottom:0}

/* ---------- Формы ---------- */
.lead{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(22px,2.8vw,32px); box-shadow:var(--sh-2);
}
/* 🚨 D22: светлая карточка формы внутри тёмной .band наследовала белый цвет
   от «.band h2,.band h3{color:#fff}» и «.band p{color:...}» → текст был невидим.
   Светлый компонент обязан задавать СВОИ тёмные цвета. */
.band .lead{background:rgba(255,255,255,.96); color:var(--ink)}
.band .lead h3{color:var(--ink)}
.band .lead > p{color:var(--ink-2)}
.band .lead .field > span{color:var(--ink-2)}
.band .lead .form__consent{color:var(--ink-3)}
.band .lead .form__consent a{color:var(--blue)}
.band .lead .sel__list li{color:var(--ink)}
.lead h3{margin-bottom:.3em}
.lead > p{font-size:15px; color:var(--ink-2); margin-bottom:20px}
.form-grid{display:grid; gap:12px}
@media (min-width:560px){ .form-grid--2{grid-template-columns:1fr 1fr} }
.field{display:block}
.field > span{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.field input,.field textarea{
  width:100%; font-family:var(--f-text); font-size:16px; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-s);
  background:var(--cream); transition:border-color var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e);
}
.field textarea{min-height:96px; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,54,227,.14)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3); opacity:.75}
.field input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--cream) inset; -webkit-text-fill-color:var(--ink)}
.hp{display:none}
/* кастомный select */
.sel{position:relative}
.sel > select{position:absolute; opacity:0; pointer-events:none; width:1px; height:1px}
.sel__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--f-text); font-size:16px; color:var(--ink); text-align:left;
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-s);
  background:var(--cream); cursor:pointer;
}
.sel__btn[aria-expanded="true"]{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,54,227,.14)}
.sel__btn svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast) var(--e)}
.sel__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.sel__list{
  position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0; margin:0; padding:6px;
  list-style:none; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--sh-2); max-height:260px; overflow:auto;
}
.sel__list[hidden]{display:none}
.sel__list li{margin:0; padding:11px 13px; border-radius:var(--r-xs); font-size:15px; cursor:pointer; line-height:1.35}
.sel__list li:hover,.sel__list li[aria-selected="true"]{background:var(--blue-tint); color:var(--blue); font-weight:600}
.form-actions{margin-top:16px}
.lead .form-actions .btn{width:100%}
.form__consent{display:flex; align-items:flex-start; gap:10px; margin-top:14px; font-size:13px; color:var(--ink-3); line-height:1.5; cursor:pointer}
.form__consent input{width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--blue); cursor:pointer}
/* пока сообщения нет — строка не должна занимать место: иначе низ формы
   визуально «провисает» и отступ перестаёт быть симметричным верхнему */
.form__msg{margin:12px 0 0; font-size:14px; font-weight:600; line-height:1.4}
.form__msg:empty{margin:0; min-height:0}
.form__msg[data-t="err"]{color:var(--brick)}
.form__msg[data-t="ok"]{color:#0A7A3C}
.field.is-bad input,.field.is-bad .sel__btn{border-color:var(--brick)}

/* ---------- Карта ---------- */
.map{border-radius:var(--r-l); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-1); background:var(--cream-2)}
.map iframe{display:block; width:100%; height:clamp(300px,42vw,460px); border:0}

/* ---------- Подстраницы ---------- */
.phero{position:relative; padding-block:clamp(28px,4vw,44px) clamp(30px,4.4vw,52px); background:var(--cream-2); border-bottom:1px solid var(--line-2); overflow:hidden}
.phero::before{content:""; position:absolute; inset:0; background:radial-gradient(620px 340px at 92% 0%, rgba(0,54,227,.11), transparent 64%)}
.phero__in{position:relative}
.phero h1{margin-bottom:.3em; max-width:20ch}
.phero__lead{font-size:clamp(16px,1.7vw,19px); color:var(--ink-2); max-width:none; margin:0}
.crumbs{padding-block:14px; font-size:13px; color:var(--ink-3)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0}
.crumbs li{display:flex; align-items:center; gap:7px; margin:0}
.crumbs li+li::before{content:"/"; color:var(--line)}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--blue); text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-2)}

.prose{font-size:17px; line-height:1.7}
.prose > *{max-width:74ch}
/* правовые страницы: текст на всю ширину контейнера, без читабельного заужения */
.prose--wide > *{max-width:none}
.prose h2{margin-top:1.6em; font-size:clamp(22px,2.8vw,31px)}
.prose h3{margin-top:1.4em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.42em 0}
.prose a{color:var(--blue)}
.prose table{max-width:100%}

.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-m); background:var(--paper); color:var(--ink); -webkit-overflow-scrolling:touch}
.tbl-wrap table{min-width:520px; font-size:15px}
.tbl-wrap th,.tbl-wrap td{padding:13px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-2); line-height:1.5}
.tbl-wrap tr:last-child th,.tbl-wrap tr:last-child td{border-bottom:0}
.tbl-wrap th[scope="row"]{width:38%; color:var(--ink-2); font-weight:600; font-size:14px; background:var(--cream)}
.tbl-wrap thead th{background:var(--ink); color:#fff; font-family:var(--f-text); font-weight:700; font-size:13px; letter-spacing:.03em}

.callout{
  border:1px solid var(--line); border-left:4px solid var(--blue); background:var(--paper); color:var(--ink);
  border-radius:var(--r-m); padding:18px 22px; margin:26px 0; font-size:15px; line-height:1.6;
}
.callout > svg{
  width:20px; height:20px; flex:none; float:left; margin:3px 11px 0 0;
  fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.callout--warn{border-left-color:var(--brick); background:var(--brick-tint)}
.callout--warn > svg{stroke:var(--brick)}
.callout::after{content:""; display:block; clear:both}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}

/* сайдбар «Сведения об ОО» */
/* 🚨 колонку задавать ЯВНО: без grid-template-columns одноколоночный грид берёт ширину
   по max-content самого широкого потомка (длинные названия подразделов) и вылезает за экран */
.doclay{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,3vw,40px); align-items:start}
.doclay > *{min-width:0}

/* Боковая колонка «Сведений об ОО»: оглавление + кнопка версии для слабовидящих.
   Обёртка нужна, чтобы кнопка не стала третьим элементом сетки .doclay. */
.docside{display:grid; gap:14px; align-content:start}
@media (min-width:1000px){ .doclay{grid-template-columns:290px minmax(0,1fr)} }
.docnav{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:14px; box-shadow:var(--sh-1)}
/* 🚨 Оглавление раздела НЕ прокручивается внутри себя и не «липнет»: все 16 пунктов должны быть
   видны сразу. Прежние position:sticky + max-height:calc(100dvh − 130px) + overflow-y:auto давали
   свою полосу прокрутки, а без max-height «липкий» блок выше вьюпорта обрезал бы последние пункты
   и они стали бы недосягаемы. Поэтому блок обычный, в потоке. */
.docnav > p{font-family:var(--f-disp); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:6px 10px 10px}
.docnav ol{list-style:none; counter-reset:d; margin:0; padding:0}
.docnav li{margin:0; counter-increment:d}
.docnav a{
  display:flex; gap:9px; padding:9px 10px; border-radius:var(--r-xs); font-size:14px; line-height:1.35;
  color:var(--ink-2); text-decoration:none; font-weight:500;
}
.docnav a::before{content:counter(d); flex:none; font-family:var(--f-disp); font-weight:700; font-size:12px; color:var(--ink-3); min-width:16px; padding-top:2px}
.docnav a:hover{background:var(--cream-2); color:var(--ink)}
.docnav a[aria-current="page"]{background:var(--blue); color:#fff; font-weight:700}
.docnav a[aria-current="page"]::before{color:rgba(255,255,255,.7)}
.pager{display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; margin-top:36px; padding-top:22px; border-top:1px solid var(--line)}
.pager a{
  display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink);
  font-size:15px; font-weight:600; max-width:46%;
}
.pager a span{font-size:12px; color:var(--ink-3); font-weight:500}
.pager a:hover{color:var(--blue)}
.pager a:last-child{text-align:right; margin-left:auto}

/* карточки-ссылки хаба */
.hub{display:grid; gap:14px}
@media (min-width:680px){ .hub{grid-template-columns:1fr 1fr} }
@media (min-width:1060px){ .hub{grid-template-columns:repeat(3,1fr)} }
.hub a{
  display:flex; align-items:flex-start; gap:13px; padding:20px; text-decoration:none;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); color:var(--ink);
  box-shadow:var(--sh-1); transition:transform var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e), border-color var(--t-fast) var(--e);
}
.hub a:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:rgba(0,54,227,.3); color:var(--ink)}
.hub__n{flex:none; width:34px; height:34px; border-radius:var(--r-xs); background:var(--blue-tint); color:var(--blue);
  display:grid; place-items:center; font-family:var(--f-disp); font-weight:800; font-size:13px}
.hub b{display:block; font-size:15px; font-weight:700; line-height:1.35}
.hub small{display:block; font-size:13px; color:var(--ink-3); margin-top:4px; line-height:1.45}

/* документы-заглушки */
.doclist{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.doclist li{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-m); font-size:15px; line-height:1.45; color:var(--ink);
  flex-wrap:wrap}
.doclist li > span{flex:1 1 190px; min-width:0}
.doclist svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.doclist em{font-style:normal; margin-left:auto; flex:none; font-size:12px; color:var(--ink-3); background:var(--cream-2); padding:3px 10px; border-radius:999px; white-space:nowrap}

/* ---------- Карта сайта ---------- */
.smap{display:grid; gap:11px}
.smap__card{
  display:flex; align-items:center; gap:14px; padding:16px 18px; text-decoration:none;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); color:var(--ink);
  transition:transform var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e);
}
.smap__card[hidden]{display:none}
.smap__card:hover{transform:translateX(4px); box-shadow:var(--sh-1); color:var(--ink)}
.smap__tag{flex:none; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--blue-tint); color:var(--blue); letter-spacing:.03em}
.smap__t{flex:1; min-width:0}
.smap__t b{display:block; font-size:15px; font-weight:700}
.smap__t small{display:block; font-size:13px; color:var(--ink-3); margin-top:2px}
.smap__t code{display:block; font-size:12px; color:var(--ink-3); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin-top:3px}
.smap__arrow{flex:none; color:var(--ink-3)}
.smap__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pagin{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.pagin button{
  min-width:40px; height:40px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-xs);
  background:var(--paper); color:var(--ink); font-family:var(--f-text); font-weight:600; font-size:15px; cursor:pointer;
}
.pagin button:hover{border-color:var(--blue); color:var(--blue)}
.pagin button[aria-current="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.pagin span{display:grid; place-items:center; min-width:26px; color:var(--ink-3)}

/* ---------- 404 ---------- */
/* Светлая и компактная: в стиле остального сайта, без цен и карточек-разделов
   (цены устаревают, а 404 никто не перепроверяет). */
.e404{position:relative; overflow:hidden; background:var(--cream); text-align:center}
.e404::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(680px 380px at 50% -6%, rgba(0,54,227,.12), transparent 64%),
    radial-gradient(460px 300px at 88% 104%, rgba(22,224,245,.14), transparent 66%);
}
.e404__in{position:relative; padding-block:clamp(48px,8vw,96px)}
.e404 b{
  display:block; font-family:var(--f-disp); font-weight:800;
  font-size:clamp(72px,15vw,150px); line-height:.9; letter-spacing:-.06em;
  color:var(--blue); margin-bottom:.12em;
}
.e404 h1{margin-bottom:.4em}
.e404 p{color:var(--ink-2); max-width:52ch; margin-inline:auto}
.e404 .btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
@media (max-width:560px){ .e404 .btn-row .btn{width:100%} }
.e404__links{
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center;
  margin:34px auto 0; padding-top:22px; border-top:1px solid var(--line);
  max-width:640px; font-size:15px;
}
.e404__links a{color:var(--ink-2); text-decoration:none; font-weight:600}
.e404__links a:hover{color:var(--blue); text-decoration:underline}

/* ---------- Футер ---------- */
.footer{background:var(--ink); color:rgba(255,255,255,.68); padding-block:clamp(44px,6vw,70px) 26px; font-size:15px}
.footer a{color:rgba(255,255,255,.68); text-decoration:none}
.footer a:hover{color:#fff; text-decoration:underline}
.footer__top{display:grid; gap:clamp(26px,3vw,40px)}
@media (min-width:760px){ .footer__top{grid-template-columns:1.35fr 1fr 1fr} }
@media (min-width:1080px){ .footer__top{grid-template-columns:1.5fr 1fr 1fr 1.15fr} }
.footer__brand img{width:min(240px,100%); height:auto; margin-bottom:16px}
.footer__brand p{font-size:14px; line-height:1.6; margin:0 0 16px; color:rgba(255,255,255,.55)}
.footer h4{color:#fff; font-family:var(--f-text); font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:15px}
.footer li{margin:0}
.footer__phone{display:block; font-family:var(--f-disp); font-weight:700; font-size:19px; color:#fff!important; margin-bottom:4px; letter-spacing:-.02em; white-space:nowrap}
.footer__phone:hover{color:var(--cyan)!important; text-decoration:none!important}
/* 🚨 Кнопка «Версия для слабовидящих» без своего скрипта бесполезна, поэтому по умолчанию
   скрыта. Показывает её сам модуль assets/js/accessibility.js — он ставит на <html>
   класс .a11y-ready и добавляет все остальные стили панели. */
.a11y-trigger{display:none}

.soc{display:flex; gap:9px; flex-wrap:wrap; margin-top:16px}
.soc a{
  width:42px; height:42px; border-radius:var(--r-s); display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff;
  transition:background var(--t-fast) var(--e), transform var(--t-fast) var(--e);
}
.soc a:hover{background:var(--blue); transform:translateY(-2px)}
.soc svg{width:20px;height:20px;fill:currentColor;stroke:none}
/* кнопка MAX — текстом, а не иконкой (в наборе Lucide знака MAX нет).
   Селектор с `a`: иначе `.soc a{width:42px}` перебивает по специфичности и плашка
   не растягивается под буквы. text-decoration гасим и в :hover — там своё правило у .footer a. */
.soc a.soc__txt{
  width:auto; min-width:44px; padding:0 14px;
  font-family:var(--f-disp); font-weight:800; font-size:13px; letter-spacing:.03em;
  text-decoration:none;
}
.soc a.soc__txt:hover,.soc a.soc__txt:focus-visible{text-decoration:none}
.footer__lic{margin-top:clamp(30px,4vw,44px); padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; color:rgba(255,255,255,.5); line-height:1.6}
.footer__bot{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; margin-top:18px; font-size:13px; color:rgba(255,255,255,.45)}
.footer__bot ul{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px}

/* ---------- Cookie ---------- */
.ckb{
  position:fixed; left:var(--gut); bottom:var(--gut); z-index:120; width:min(410px,calc(100vw - var(--gut)*2));
  background:var(--ink); color:#fff; border-radius:var(--r-l); padding:20px 22px; box-shadow:var(--sh-3);
  opacity:0; transform:translateY(16px); transition:opacity var(--t) var(--e), transform var(--t) var(--e);
}
.ckb.is-in{opacity:1; transform:none}
/* Виджет-кнопка живёт в правом нижнем углу (60px + отступ 40px). На узких экранах
   cookie-плашка растягивается почти во всю ширину и оказывается ровно под кнопкой,
   а та с z-index 9000 её перекрывает. Поднимаем плашку над кнопкой — и только там,
   где виджет действительно подключён. */
@media (max-width:560px){ body:has(.wgtb) .ckb{ bottom:calc(var(--gut) + 116px) } }
.ckb p{font-size:14px; line-height:1.55; margin:0 0 14px; color:rgba(255,255,255,.78)}
.ckb a{color:var(--cyan)}
.ckb__row{display:flex; gap:9px; flex-wrap:wrap}
.ckb .btn{padding:11px 20px; font-size:15px}

/* ---------- Модалка ---------- */
/* 🚨 Прокручивается САМ оверлей, а карточка центрируется через margin:auto.
   С `align-items:center` карточка выше вьюпорта обрезается с ДВУХ сторон и её верх
   становится недосягаем — на коротких экранах телефона это и происходило.
   max-height в dvh тоже ненадёжен: на мобильных с исчезающей панелью браузера dvh
   бывает больше видимой области, и низ формы уезжает за экран. */
.modal{position:fixed; inset:0; z-index:130; display:none; padding:var(--gut);
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.modal.is-open{display:flex}
.modal__bd{position:fixed; inset:0; background:rgba(11,13,18,.62); backdrop-filter:blur(3px)}
.modal__in{position:relative; margin:auto; width:min(460px,100%);
  background:var(--cream); border-radius:var(--r-l); padding:clamp(22px,3vw,32px); box-shadow:var(--sh-3)}
/* на низких экранах поджимаем внутренние отступы, чтобы форма влезала без прокрутки */
@media (max-height:720px){
  .modal__in{padding:18px}
  .modal .lead h3{font-size:21px; margin-bottom:.25em}
  .modal .lead > p{font-size:13px; margin-bottom:14px}
  .modal .form-grid{gap:9px}
  .modal .field input,.modal .sel__btn{padding:11px 13px}
  .modal .form-actions{margin-top:12px}
}
.modal__x{position:absolute; right:14px; top:14px; width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r-xs); background:var(--paper); cursor:pointer; display:grid; place-items:center; color:var(--ink)}
.modal__x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.modal .lead{background:none; border:0; box-shadow:none; padding:0}
.modal .form-actions{display:block}
.modal .form-actions .btn{width:100%}

/* лайтбокс (галерея) */
.lb{position:fixed; inset:0; z-index:140; display:none; align-items:center; justify-content:center; background:rgba(8,10,16,.94); padding:clamp(16px,4vw,48px)}
.lb.is-open{display:flex}
.lb img{max-width:100%; max-height:86dvh; object-fit:contain; border-radius:var(--r-m)}
.lb__x,.lb__p,.lb__n{position:absolute; width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.10); color:#fff; cursor:pointer; display:grid; place-items:center}
.lb__x{top:20px; right:20px}
.lb__p{left:16px; top:50%; transform:translateY(-50%)}
.lb__n{right:16px; top:50%; transform:translateY(-50%)}
.lb__x svg,.lb__p svg,.lb__n svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb__c{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:14px}

/* ---------- Галерея ---------- */
.gal{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media (min-width:700px){ .gal{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1040px){ .gal{grid-template-columns:repeat(4,1fr)} }
.gal a{display:block; aspect-ratio:1; border-radius:var(--r-m); overflow:hidden; background:var(--cream-2); box-shadow:var(--sh-1)}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--e)}
.gal a:hover img{transform:scale(1.05)}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity var(--t-slow) var(--e), transform var(--t-slow) var(--e)}
.reveal.is-in{opacity:1; transform:none}
/* мгновенный показ без мигания: класс живёт один кадр, в отличие от inline-стиля */
.reveal.reveal-instant{transition:none !important}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important; transform:none!important} }

/* ---------- Мелочи ---------- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}
.mt0{margin-top:0}
.muted{color:var(--ink-3); font-size:14px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
@media (max-width:560px){ .cta-row .btn{width:100%} }

/* ---------- Единый жест наведения (после .reveal, иначе оно перебивает) ----------
   Одно движение на все карточки сайта: подъём на 4px и следующая ступень тени.
   Раньше у каждой группы был свой ход и своя скорость — из таких мелочей и
   складывается ощущение, что страницу собирали по частям.
   Жест включается ПОСЛЕ появления карточки (.is-in), чтобы не спорить с её
   анимацией входа: вход медленный, реакция на курсор быстрая. */
.tar.is-in, .prog.is-in, .branch.is-in, .vid, .hub__i, .smap__card{
  transition:transform var(--t) var(--e), box-shadow var(--t) var(--e), border-color var(--t) var(--e);
}
@media (hover:hover){
  .tar.is-in:hover, .prog.is-in:hover, .branch.is-in:hover,
  .vid:hover, .hub__i:hover, .smap__card:hover{
    transform:translateY(-4px); box-shadow:var(--sh-2);
  }
}
@media (prefers-reduced-motion:reduce){
  .tar.is-in, .prog.is-in, .branch.is-in, .vid, .hub__i, .smap__card{transition:none}
  .tar.is-in:hover, .prog.is-in:hover, .branch.is-in:hover,
  .vid:hover, .hub__i:hover, .smap__card:hover{transform:none}
}

/* ---------- Пальцем по экрану ----------
   На сенсорных экранах цель меньше 44px промахивается. Увеличиваем не сам элемент,
   а его зону нажатия: точки карусели растут прозрачным полем, кнопка «Развернуть»
   получает вертикальные отступы, кнопки-фильтры — минимальную высоту. Вёрстка при
   этом не сдвигается: точки остаются того же размера визуально, у кнопки отступ
   компенсирован отрицательным полем. */
@media (pointer:coarse){
  .carou__dots{gap:0}
  .carou__dots button{width:44px; height:44px}
  .card-rev__more{padding:14px 0; margin-top:-14px; margin-bottom:4px}
  .chip{min-height:44px}
  .board__count{margin-top:6px}
  /* ссылки-строки в списках контактов и расписания получают поле по вертикали */
  .facts a, .branch dl a, .docnav a{padding-block:6px; display:inline-block}
}