@font-face{font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;src:url(f/onest-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;src:url(f/onest-cyrillic.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:300 700;font-display:swap;src:url(f/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   АВТОШКОЛА «ТРИ ИКС», Волгодонск.

   Устройство: страница mobile-first. На телефоне всё в одну колонку,
   диагонали пологие, фото — широкими полосами. На ПК включаются
   брейкпоинты 700 / 1025 и раскладка становится ДРУГОЙ (две колонки,
   диагональные разрезы, боковые панели), а не растянутой мобильной —
   это главное требование к сайту.

   Всё, что подкручивают руками, живёт в переменных ниже.
   ============================================================ */

:root{
  color-scheme: light;

  /* --- палитра (снята пипеткой с макета, не на глаз) --- */
  --paper:   #EAECE9;   /* фон страницы */
  --paper-2: #F4F5F2;   /* светлее — карточки на светлом */
  --ink:     #113549;   /* глубокий синий: текст и тёмные панели */
  --ink-2:   #0B2637;   /* глубже — подвал */
  --ink-soft:#42627A;   /* второстепенный текст */
  --lime:    #BEC930;   /* акцент: кнопки, точки маршрута, цифры */
  --lime-in: #0F2E3F;   /* текст НА лаймовой кнопке */
  --white:   #fff;
  --line:    rgb(17 53 73 / .14);

  /* --- ритм --- */
  --pad:  clamp(18px, 5vw, 72px);      /* поля по краям */
  --sp:   clamp(58px, 6.6vw, 112px);   /* между секциями */
  --maxw: 1440px;
  --r:    18px;                        /* скругление карточек */
  --skew: 7vw;                         /* глубина диагонального среза */

  /* --- типографика --- */
  --h1:   clamp(40px, 12.5vw, 116px);
  --h2:   clamp(29px, 6.4vw, 68px);
  --h3:   clamp(20px, 2.4vw, 27px);
  --body: clamp(15px, 1.15vw, 18px);
  --small:clamp(13px, 1vw, 15px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:var(--body); font-weight:400; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3{margin:0; font-weight:600; line-height:1.02; letter-spacing:-.02em}
h1{font-size:var(--h1); letter-spacing:-.035em}
h2{font-size:var(--h2); letter-spacing:-.03em}
h3{font-size:var(--h3); letter-spacing:-.02em; line-height:1.15}
p{margin:0}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
/* сверху отступ полный, снизу поменьше — иначе между светлыми секциями
   на широком экране образуется пустое поле в пол-экрана */
.sect{padding-block:var(--sp) calc(var(--sp) * .72)}
.lead{color:var(--ink-soft); font-size:clamp(16px,1.35vw,20px); line-height:1.5}

/* ============================================================
   1. ШАПКА
   Липнет к верху, на телефоне сжимается и прячет меню в кнопку.
   ============================================================ */
.top{
  position:sticky; top:0; z-index:60;
  background:rgb(234 236 233 / .88); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.top.stuck{border-bottom-color:var(--line)}
.top__in{display:flex; align-items:center; gap:24px; min-height:66px}
.logo{display:flex; align-items:center; gap:11px; flex:0 0 auto}
.logo svg{width:38px; height:38px; flex:0 0 auto}
.logo b{
  font-weight:600; font-size:13px; line-height:1.15; letter-spacing:.01em;
  text-transform:uppercase; white-space:nowrap;
}
.nav{display:none; margin-left:auto; gap:clamp(14px,2.4vw,42px)}
.nav a{
  font-size:15px; color:var(--ink); padding-block:6px; position:relative;
  transition:color .2s;
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--lime); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a.on::after{transform:scaleX(1)}
.top .top__cta{display:none}   /* специфичнее .btn, иначе кнопка лезет в шапку телефона */
.burger{
  margin-left:auto; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px;
}
.burger span{display:block; width:18px; height:2px; background:var(--ink); box-shadow:0 -6px 0 var(--ink), 0 6px 0 var(--ink)}

/* выезжающее меню на телефоне */
.sheet{
  position:fixed; inset:0; z-index:70; background:var(--ink); color:var(--white);
  padding:calc(var(--pad) + 10px); display:flex; flex-direction:column; gap:6px;
  transform:translateY(-100%); transition:transform .42s var(--ease); visibility:hidden;
}
.sheet.open{transform:none; visibility:visible}
.sheet a{font-size:clamp(26px,7vw,38px); font-weight:600; letter-spacing:-.02em; padding-block:10px}
.sheet .x{position:absolute; top:18px; right:16px; font-size:34px; line-height:1; width:44px; height:44px}
.sheet__foot{margin-top:auto; font-size:15px; color:rgb(255 255 255 / .66)}
.sheet__foot a{font-size:19px; color:var(--lime)}

/* ============================================================
   2. КНОПКИ
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--lime); color:var(--lime-in);
  padding:15px 24px; border-radius:12px; font-weight:600; font-size:16px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  box-shadow:0 1px 0 rgb(17 53 73 / .08);
}
.btn svg{width:19px; height:12px; transition:transform .3s var(--ease)}
.btn--ghost{background:none; color:var(--ink); border:1.5px solid var(--line); box-shadow:none}
.btn--on-dark{background:var(--lime); color:var(--lime-in)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgb(17 53 73 / .16)}
  .btn:hover svg{transform:translateX(5px)}
  .nav a:hover{color:var(--ink-soft)}
}
.btn:active{transform:translateY(0) scale(.985)}

/* ============================================================
   3. ГЕРОЙ
   Телефон: заголовок, затем фото полосой со скошенным низом.
   ПК: две колонки, фото справа отрезано по диагонали.
   ============================================================ */
.hero{position:relative; padding-top:clamp(26px,5vw,54px)}
.hero__in{position:relative; z-index:2}
.hero h1{margin-bottom:18px}
.hero .sub{font-size:clamp(19px,2.3vw,30px); line-height:1.25; color:var(--ink); font-weight:400}
.cats{
  display:flex; gap:14px; align-items:center; margin:22px 0 26px;
  font-size:clamp(17px,1.7vw,22px); letter-spacing:.06em; color:var(--ink-soft);
}
.cats i{width:5px; height:5px; border-radius:50%; background:var(--lime); font-style:normal}
.hero__photo{
  position:relative; margin-top:34px;
  aspect-ratio:16/11; overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 9vw));
}
.hero__photo img{width:100%; height:100%; object-fit:cover; object-position:center 42%}

/* ============================================================
   4. МАРШРУТ-ПУНКТИР — фирменный приём макета.
   SVG рисуется штрихом, когда блок появляется в кадре.
   ============================================================ */
.route-line{position:absolute; pointer-events:none; overflow:visible}
.route-line path{
  fill:none; stroke:currentColor; stroke-width:2; stroke-dasharray:9 9;
  stroke-linecap:round; opacity:.5;
  stroke-dashoffset:var(--len,1200);
}
.in .route-line path{
  animation:draw 1.9s var(--ease) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
/* линия идёт по светлому полю и упирается лаймовой стрелкой в фото;
   если увести её правее — пунктир ложится на снимок и читается как царапина */
.hero__line{display:none; color:var(--ink); left:35%; top:36%; width:300px; height:220px}

/* ============================================================
   5. ПОЛОСА ФАКТОВ — тёмная панель с цифрами 01–04
   ============================================================ */
.facts{
  background:var(--ink); color:var(--white); position:relative;
  padding-block:clamp(40px,6vw,74px); margin-top:calc(var(--sp) * -.15);
}
.facts .wrap{position:relative}
.facts__grid{display:grid; gap:26px; grid-template-columns:1fr 1fr}
.fact{position:relative; padding-top:4px}
.fact b{
  display:block; font-family:'Onest'; font-size:clamp(30px,4.6vw,52px); font-weight:600;
  color:var(--lime); line-height:1; letter-spacing:-.03em; margin-bottom:8px;
}
.fact span{display:block; font-size:clamp(14px,1.15vw,17px); font-weight:500; line-height:1.3}
.fact em{display:block; font-style:normal; font-size:13px; color:rgb(255 255 255 / .6); margin-top:5px; line-height:1.35}
/* width считаем явно, а не через left+right: у SVG есть СВОЯ ширина (viewBox
   1280), и для абсолютно позиционированного заменяемого элемента `width:auto`
   берёт именно её, а `right` просто отбрасывается. Отсюда страница ехала вбок
   на 1025–1400px — то есть на обычном ноутбуке (замер 15.08: окно 1261 →
   страница 1343). Проценты считаются от padding-box .wrap, поэтому вычитаем
   два поля. */
.facts__line{display:none; color:var(--white); top:-10px; left:var(--pad); width:calc(100% - var(--pad) * 2); height:44px}

/* ============================================================
   6. КАТЕГОРИИ — переключатель, а не ссылки
   Нажатие на строку меняет панель, страница остаётся на месте.
   Без JS (.js на html нет) все панели видны подряд — читаемость
   не зависит от скрипта.
   ============================================================ */
.cats-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(24px,3vw,44px)}
.cat-main{
  position:relative; background:var(--ink); color:var(--white);
  border-radius:var(--r); overflow:hidden;
}
.cat-pane{display:grid; grid-template-columns:1fr}
.js .cat-pane{display:none}
.js .cat-pane.on{display:grid}
.cat-main__txt{padding:clamp(24px,3.4vw,44px)}
.cat-main__code{font-size:clamp(64px,13vw,120px); font-weight:600; color:var(--lime); line-height:.85; letter-spacing:-.05em}
.cat-main__code--long{font-size:clamp(46px,8.6vw,88px); letter-spacing:-.04em}
.cat-main h3{margin:12px 0 14px}
.cat-main p{color:rgb(255 255 255 / .72); margin-bottom:26px}
.cat-badge{
  display:inline-block; margin:0 0 16px; padding:7px 14px; border-radius:99px;
  background:rgb(190 201 48 / .16); color:var(--lime);
  font-size:13px; font-weight:500; line-height:1.2;
}
.cat-main__ph{position:relative; aspect-ratio:16/10; order:-1; overflow:hidden}
.cat-main__ph img{width:100%; height:100%; object-fit:cover}

/* смена панели: текст всплывает по строкам, фото мягко наезжает */
@keyframes paneUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes paneZoom{from{opacity:0; transform:scale(1.06)} to{opacity:1; transform:none}}
.js .cat-pane.on .cat-main__txt>*{animation:paneUp .5s var(--ease) both}
.js .cat-pane.on .cat-main__txt>*:nth-child(2){animation-delay:.05s}
.js .cat-pane.on .cat-main__txt>*:nth-child(3){animation-delay:.1s}
.js .cat-pane.on .cat-main__txt>*:nth-child(4){animation-delay:.15s}
.js .cat-pane.on .cat-main__txt>*:nth-child(5){animation-delay:.2s}
.js .cat-pane.on .cat-main__ph img{animation:paneZoom .7s var(--ease) both}

.cat-list{display:grid; gap:0; margin-top:14px}
.cat-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  width:100%; text-align:left; padding:20px 4px;
  border-bottom:1px solid var(--line); position:relative;
  transition:background .25s var(--ease), padding .25s var(--ease);
}
.cat-row:first-child{border-top:1px solid var(--line)}
.cat-row__dot{
  width:11px; height:11px; border-radius:50%; background:var(--line);
  transition:background .25s, box-shadow .3s var(--ease);
}
.cat-row.on{background:var(--paper-2); padding-inline:14px}
.cat-row.on .cat-row__dot{background:var(--lime); box-shadow:0 0 0 5px rgb(190 201 48 / .22)}
.cat-row b{
  font-size:clamp(30px,5.4vw,44px); font-weight:600; letter-spacing:-.03em; line-height:1;
  color:var(--ink-soft); transition:color .25s;
}
.cat-row.on b{color:var(--ink)}
.cat-row span{color:var(--ink-soft); font-size:var(--small); display:block}
.cat-row__name{display:flex; flex-direction:column; gap:2px}
.cat-row i{
  font-style:normal; color:var(--lime); font-size:20px;
  transition:transform .3s var(--ease);
}
.cat-row.on i{transform:translateX(4px)}
.cat-row:focus-visible{outline:2px solid var(--lime); outline-offset:3px; border-radius:10px}
@media (hover:hover){.cat-row:hover i{transform:translateX(6px)}}

/* ============================================================
   7. ФОРМАТ: онлайн + практика
   ============================================================ */
.fmt{position:relative}
.fmt h2{margin-bottom:clamp(26px,3.4vw,48px)}
.fmt__grid{display:grid; gap:20px}
.fmt__card{border-radius:var(--r); overflow:hidden; background:var(--paper-2); border:1px solid var(--line)}
.fmt__card--dark{background:var(--ink); color:var(--white); border-color:transparent}
.fmt__ph{aspect-ratio:16/9; overflow:hidden}
.fmt__ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
@media (hover:hover){.fmt__card:hover .fmt__ph img{transform:scale(1.045)}}
.fmt__txt{padding:clamp(20px,2.6vw,32px)}
.fmt__card h3{margin-bottom:8px}
.fmt__card p{color:var(--ink-soft)}
.fmt__card p+p{margin-top:14px}
.fmt__card--dark p{color:rgb(255 255 255 / .72)}
.fmt__sub{font-weight:500; color:var(--ink)}
.fmt__card--dark .fmt__sub{color:rgb(255 255 255 / .95)}
.fmt__link{
  display:inline-flex; align-items:center; gap:9px; font-weight:600; color:var(--ink);
  border-bottom:1.5px solid var(--lime); padding-bottom:3px;
}
.fmt__link svg{width:17px; height:11px; transition:transform .3s var(--ease)}
@media (hover:hover){.fmt__link:hover svg{transform:translateX(5px)}}

/* ============================================================
   8. МАРШРУТ ОБУЧЕНИЯ — инфографика со стрелкой, без фотографий
   Телефон: линия идёт сверху вниз. ПК: слева направо.
   Линия дорисовывается, когда блок появляется в кадре.
   ============================================================ */
.route{background:var(--ink); color:var(--white); position:relative; overflow:hidden}
.route h2{margin-bottom:clamp(30px,4vw,56px)}
.road{
  list-style:none; margin:0; padding:0 0 30px; position:relative;
  display:grid; gap:clamp(22px,3vw,30px);
}
.road::before{                       /* сама линия — пунктир в фирменном ритме 9/9 */
  content:''; position:absolute; left:5px; top:6px; bottom:16px; width:2px;
  background:repeating-linear-gradient(180deg, rgb(255 255 255 / .5) 0 9px, transparent 9px 18px);
  transform:scaleY(0); transform-origin:top; transition:transform 1.3s var(--ease);
}
.road.in::before{transform:scaleY(1)}
.road::after{                        /* остриё маршрута */
  content:''; position:absolute; left:0; bottom:0; width:0; height:0;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:12px solid var(--lime);
  opacity:0; transition:opacity .4s var(--ease) 1.1s;
}
.road.in::after{opacity:1}
.road__step{position:relative; padding-left:32px}
.road__dot{
  position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 0 0 rgb(190 201 48 / .3);
}
.road__step b{
  display:block; font-size:clamp(26px,3.4vw,40px); font-weight:600; color:var(--lime);
  line-height:1; letter-spacing:-.04em; margin-bottom:8px;
}
.road__step h3{color:var(--white)}

/* ============================================================
   8b. О ШКОЛЕ — текст и документы школы
   Мозаика из трёх фотографий заменена лицензией и заключением ГИБДД
   (правка Лены 15.08). Документ показывается ЦЕЛИКОМ: `contain` на светлой
   подложке. Обрезать документ по кадру нельзя — обрезанный документ ничего
   не доказывает, а доказательство здесь и есть содержание блока.
   ============================================================ */
/* minmax(0,1fr), а не auto: лента документов внутри — прокручиваемая, её
   max-content равен сумме трёх листов (750px) и через колонку сетки растягивал
   ВЕСЬ раздел, давая странице горизонтальный скролл (поймано приёмкой 15.08) */
.about__in{display:grid; gap:clamp(24px,3.4vw,44px); grid-template-columns:minmax(0,1fr)}
.about__docs{min-width:0}
.about__txt p{margin-top:16px; max-width:52ch}
.docs__title{font-size:clamp(17px,1.7vw,22px); margin-bottom:14px}
/* телефон: лента с прилипанием — три листа A4 в столбик растянули бы
   раздел на три экрана, а в ряд по трети ширины их не разглядеть */
.docs__row{
  display:grid; grid-auto-flow:column; grid-auto-columns:62vw; gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
  scrollbar-width:thin;
}
.doc{display:block; scroll-snap-align:start}
.doc__ph{
  display:block; padding:10px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:12px; aspect-ratio:3/4;
  transition:border-color .25s var(--ease), transform .35s var(--ease);
}
.doc__ph img{width:100%; height:100%; object-fit:contain}
.doc__cap{display:block; margin-top:10px}
.doc__cap b{display:block; font-size:14px; font-weight:600; line-height:1.25}
.doc__cap span{display:block; font-size:13px; color:var(--ink-soft); line-height:1.35; margin-top:2px}
.docs__note{margin-top:12px; font-size:var(--small); color:var(--ink-soft)}
.doc:focus-visible{outline:2px solid var(--lime); outline-offset:4px; border-radius:14px}
@media (hover:hover){
  .doc:hover .doc__ph{border-color:var(--lime); transform:translateY(-3px)}
}

/* ============================================================
   9. ОТЗЫВЫ — настоящие, с drom.ru
   ============================================================ */
.rev__head{display:grid; gap:26px; margin-bottom:clamp(26px,3.4vw,44px)}
.score{display:flex; align-items:flex-end; gap:18px}
.score__big{font-size:clamp(58px,9vw,104px); font-weight:600; color:var(--ink); line-height:.85; letter-spacing:-.05em}
.score__of{color:var(--ink-soft); font-size:var(--small); padding-bottom:8px}
.stars{display:flex; gap:3px; margin-bottom:6px}
.stars svg{width:17px; height:17px; color:var(--lime)}
.parts{display:grid; gap:10px; max-width:420px}
.part{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; font-size:var(--small)}
.part__bar{grid-column:1/-1; height:4px; background:var(--line); border-radius:4px; overflow:hidden}
.part__bar i{display:block; height:100%; background:var(--lime); width:0; transition:width 1.2s var(--ease) .2s}
.in .part__bar i{width:var(--w)}

.rev__grid{display:grid; gap:16px}
.rev{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px); position:relative;
}
.rev p{font-size:clamp(15px,1.2vw,18px); line-height:1.45}
.rev footer{margin-top:14px; font-size:13px; color:var(--ink-soft); display:flex; gap:10px; align-items:center}
.rev__q{position:absolute; top:14px; right:18px; font-size:44px; line-height:1; color:var(--lime); opacity:.5}
.rev__src{margin-top:20px; font-size:13px; color:var(--ink-soft)}
.rev__src a{border-bottom:1px solid var(--line)}

/* ============================================================
   10. ВОПРОСЫ — аккордеон
   ============================================================ */
.faq__grid{display:grid; gap:0; margin-top:clamp(22px,3vw,40px)}
.q{border-bottom:1px solid var(--line)}
.q:first-child{border-top:1px solid var(--line)}
.q__btn{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:20px 2px; text-align:left; font-size:clamp(16px,1.4vw,20px); font-weight:500;
}
.q__dot{width:10px; height:10px; border-radius:50%; border:2px solid var(--lime); background:none; transition:background .25s}
.q.open .q__dot{background:var(--lime)}
.q__chev{width:14px; height:9px; color:var(--lime); transition:transform .32s var(--ease)}
.q.open .q__chev{transform:rotate(180deg)}
.q__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease)}
.q.open .q__body{grid-template-rows:1fr}
.q__body>div{overflow:hidden}
.q__body p{margin:0 0 14px; padding-left:24px; color:var(--ink-soft); max-width:70ch}
.q__list{
  margin:0; padding:0 0 0 44px; display:grid; gap:8px;
  color:var(--ink-soft); font-size:var(--small); list-style:none;
}
.q__list li{position:relative}
.q__list li::before{
  content:''; position:absolute; left:-18px; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--lime);
}
.q__body>div>:last-child{margin-bottom:22px; padding-bottom:0}

/* ============================================================
   11. КОНТАКТЫ И ПОДВАЛ
   ============================================================ */
.cta{position:relative}
.cta h2{margin-bottom:26px}
.cta__btns{display:flex; flex-wrap:wrap; gap:12px}
.contact{display:grid; gap:22px; margin-top:30px}
.contact__row{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start}
.contact__ico{
  width:42px; height:42px; border-radius:50%; background:var(--lime); color:var(--lime-in);
  display:grid; place-items:center; flex:0 0 auto;
}
.contact__ico svg{width:19px; height:19px}
.contact b{display:block; font-weight:500; font-size:clamp(16px,1.3vw,19px)}
.contact span{color:var(--ink-soft); font-size:var(--small)}
.contact a.link{color:var(--ink); border-bottom:1.5px solid var(--lime); font-weight:500}
.cta__ph{margin-top:34px; border-radius:var(--r); overflow:hidden; aspect-ratio:16/10}
.cta__ph img{width:100%; height:100%; object-fit:cover}

.foot{background:var(--ink-2); color:rgb(255 255 255 / .72); padding-block:34px 96px; margin-top:var(--sp)}
.foot__in{display:grid; gap:22px}
.foot .logo b{color:var(--white)}
/* тёмная половина знака на тёмном фоне пропадает — там она белая */
.foot .logo .lg-ink, .sheet .logo .lg-ink{fill:var(--white)}
.foot nav{display:flex; flex-wrap:wrap; gap:16px 22px; font-size:var(--small)}
.foot small{font-size:12px; color:rgb(255 255 255 / .45); line-height:1.5}

/* липкая полоса действий на телефоне — главный путь к записи */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgb(234 236 233 / .93); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.dock.show{transform:none}
.dock a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px; border-radius:11px; font-weight:600; font-size:15px;
}
.dock .call{background:var(--ink); color:var(--white)}
.dock .wa{background:var(--lime); color:var(--lime-in)}
.dock svg{width:17px; height:17px}

/* ============================================================
   12. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   ============================================================ */
/* Прячем ТОЛЬКО когда скрипт жив (html.js): если JS не отработал,
   страница обязана остаться читаемой, а не пустой. */
.js .rise{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .rise.in{opacity:1; transform:none}
.rise.d1{transition-delay:.08s} .rise.d2{transition-delay:.16s} .rise.d3{transition-delay:.24s}
.rise.d4{transition-delay:.32s}

/* ============================================================
   13. ШИРОКИЙ ЭКРАН — раскладка перестраивается, а не растягивается
   ============================================================ */
@media (min-width:700px){
  .facts__grid{grid-template-columns:repeat(4,1fr); gap:20px}
  .fmt__grid{grid-template-columns:1fr 1fr}
  .rev__grid{grid-template-columns:1fr 1fr}
  /* панели лежат в одной ячейке друг на друге: высота блока считается по
     самой длинной, и при переключении список справа не подпрыгивает */
  .js .cat-main{display:grid}
  .js .cat-pane{
    display:grid; grid-area:1/1; opacity:0; visibility:hidden;
    transition:opacity .4s var(--ease);
  }
  .js .cat-pane.on{opacity:1; visibility:visible}
  /* Фотография ложится полосой поверх карточки и на ПК тоже (правка Лены
     15.08: «не увидела горизонтальных фотографий в блоках о категориях»).
     Раньше на ПК она вставала второй колонкой — узкий вертикальный кусок,
     в который кадр 4:3 входил с обрезкой в 60%: от площадки оставалась
     полоска асфальта. Полосой сверху кадр режется только по верху и низу. */
  .cat-pane{grid-template-columns:1fr}
  .cat-main__ph{order:-1; aspect-ratio:16/9; min-height:0}
  /* большая буква — слева от текста, а не над ним: карточка перестаёт расти
     в высоту, и справа от неё хватает места списку категорий */
  .cat-main__txt{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(24px,3.4vw,54px)}
  .cat-main__code{grid-column:1; grid-row:1/-1; align-self:start}
  .cat-main__txt>*:not(.cat-main__code){grid-column:2}
  /* на ПК крупную букву держит список справа, а в карточке она — подпись, а не
     заголовок: «A · A1» в 120px забирала половину карточки, текст сжимался в
     узкий столбик и карточка росла вверх на лишние полтораста пикселей */
  .cat-main__code, .cat-main__code--long{font-size:clamp(44px,4.6vw,66px); letter-spacing:-.04em}

  /* маршрут разворачивается поперёк: линия слева направо, остриё справа */
  /* padding у списка не ставим: линия считается от края .road, а точки — от
     края ступени, и любой верхний отступ разводит их по высоте */
  .road{grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.6vw,24px); padding:0}
  .road::before{
    left:0; right:30px; top:5px; bottom:auto; width:auto; height:2px;
    background:repeating-linear-gradient(90deg, rgb(255 255 255 / .5) 0 9px, transparent 9px 18px);
    transform:scaleX(0); transform-origin:left;
  }
  .road.in::before{transform:scaleX(1)}
  .road::after{
    left:auto; right:0; bottom:auto; top:0;
    border-top:6px solid transparent; border-bottom:6px solid transparent;
    border-left:12px solid var(--lime); border-right:0;
  }
  .road__step{padding-left:0; padding-top:30px}
  .road__dot{top:0}
  .contact{grid-template-columns:1fr 1fr}
  .foot__in{grid-template-columns:auto 1fr auto; align-items:center}
  .dock{display:none}
  .hero__photo{aspect-ratio:21/9}
  /* места хватает — документы встают в ряд, лента с прокруткой не нужна */
  .docs__row{
    grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto;
    overflow:visible; margin-inline:0; padding-inline:0; gap:clamp(12px,1.6vw,20px);
  }
}

@media (min-width:1025px){
  .nav{display:flex}
  .burger{display:none}
  .top__cta{display:inline-flex; margin-left:8px; padding:11px 18px; font-size:15px}
  .sheet{display:none}

  /* герой: текст слева, фото справа, граница — диагональ */
  .hero{padding-top:0}
  .hero__in{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    align-items:center; gap:clamp(24px,3vw,60px);
    min-height:min(84vh, 780px);
  }
  /* Высота окна — такая же граница, как ширина. Кегль, заданный только по
     ширине, держал 116px и на невысоком экране: замер 15.08 на 1261x605
     (так выглядит окно Лены при её масштабе браузера) дал герой 614px = 101%
     экрана, и низ фотографии уезжал за край — «видно только часть». Теперь
     заголовок и подпись знают про обе стороны окна, и первый экран остаётся
     первым экраном. На высоком мониторе ограничение не срабатывает: там
     13vh > 116px, и вид прежний. */
  .hero h1{font-size:min(var(--h1), 13vh)}
  .hero .sub{font-size:min(clamp(19px,2.3vw,30px), 3.4vh)}
  .hero__txt{padding-block:clamp(24px,5vh,90px)}
  .cats{margin:min(22px,2.4vh) 0 min(26px,2.8vh)}
  .hero__photo{
    position:absolute; inset:0 0 0 auto; width:52vw; margin:0; aspect-ratio:auto;
    clip-path:polygon(var(--skew) 0, 100% 0, 100% 100%, 0 100%);
    z-index:1;
  }
  .hero__txt{position:relative; z-index:2; padding-block:clamp(40px,6vw,90px)}
  .hero__line{display:block}
  .facts{margin-top:0}
  .facts__line{display:block}
  .facts__grid{margin-top:44px}

  /* категории: крупная A слева, список справа на линии.
     Список тянется на всю высоту карточки, а не висит по центру с пустым
     полем сверху и снизу (правка Лены 15.08: «буквы крупнее на высоту
     блока»). Три строки по 1fr делят высоту карточки поровну, кегль букв
     растёт вместе с ними. */
  .cats-wrap{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(30px,4vw,70px); align-items:stretch}
  .cat-list{margin-top:0; grid-template-rows:repeat(3,1fr)}
  .cat-row{padding-block:0}
  /* потолок 150px — ширина, а не вкус: «A · A1» самая длинная строка списка,
     на 150px это ~410px при колонке ~550px, дальше буквы полезут на стрелку */
  .cat-row b{font-size:clamp(46px,9vw,150px); letter-spacing:-.045em}
  .cat-row span{font-size:clamp(14px,1.1vw,17px)}
  .cat-row i{font-size:30px}
  .cat-row__name{gap:6px}

  .about__in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:clamp(30px,4vw,70px)}

  .rev__head{grid-template-columns:auto 1fr; align-items:center; gap:clamp(40px,6vw,90px)}
  .rev__grid{grid-template-columns:repeat(3,1fr)}
  .cta__in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,70px); align-items:center}
  .cta__ph{margin-top:0; aspect-ratio:4/3}
  .faq__in{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,4vw,70px); align-items:start}
  .faq__grid{margin-top:0}
}

@media (min-width:1400px){
  :root{--skew:5.2vw}
}

/* мелкие телефоны: не даём заголовку рвать макет */
@media (max-width:360px){
  :root{--h1:clamp(34px,11vw,44px)}
  .cats{gap:10px; font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; transition-duration:.001s !important}
  html{scroll-behavior:auto}
  .rise{opacity:1; transform:none}
  .route-line path{stroke-dashoffset:0}
}