/* Вариант 4 «Сочные кадры» — дизайн-план: content/design-v4.md
   База — фото на всю ширину, акцент — плоскости цвета из ливреи машин. */

@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(/fonts/unb-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: 600 800; font-display: swap;
  src: url(/fonts/unb-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/golos-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/golos-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #0e1621;
  --ink-2: #172231;
  --navy: #1f3b5b;
  --paper: #fbf8f4;
  --white: #ffffff;
  --muted: #5a6472;
  --line: #e6e0d8;
  --org: #ff6a13;
  --org-deep: #c24c00;
  --on-dark: #f3efe9;
  --on-dark-2: #b9c1cc;
  --ok: #1f8a4c;
  --err: #c0262d;

  --r-ph: 28px;
  --r-ctl: 14px;
  --wrap: 1280px;
  --pad: clamp(20px, 4vw, 48px);

  --f-d: 'Unbounded', 'Arial Black', sans-serif;
  --f-t: 'Golos Text', 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--f-t); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-d); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(32px, 5vw, 64px); }
h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo__m { stroke: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--org); color: var(--ink); padding: 10px 16px; border-radius: var(--r-ctl); }
:focus-visible { outline: 3px solid var(--org); outline-offset: 3px; }

/* ── кнопки ─────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; font: 600 16px/1 var(--f-t); text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 17px; }
.btn--wide { width: 100%; }
.btn--org { background: var(--org); color: var(--ink); }
.btn--org:hover { background: #ff8340; }
.btn--org:active { transform: scale(.98); }
.btn--ghost { color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ── шапка ──────────────────────────────────────────────────────────── */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--white); transition: background .25s; }
.hdr.is-stuck, .hdr.is-open { background: rgba(14,22,33,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hdr__in { display: flex; align-items: center; gap: 24px; height: 76px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo__m { width: 42px; height: 42px; flex: none; }
.logo__t { display: flex; flex-direction: column; line-height: 1.1; }
.logo__t b { white-space: nowrap; font: 800 16px var(--f-d); letter-spacing: -.01em; }
.logo__t i { font-style: normal; font-size: 13px; opacity: .8; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__a { white-space: nowrap; position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; background: none; color: inherit;
  font: 500 15px/1.2 var(--f-t); text-decoration: none; cursor: pointer; border-radius: 10px; opacity: .92; transition: color .15s, background .15s, opacity .15s; }
.nav__a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--org);
  transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.nav__a:hover { opacity: 1; background: rgba(255,255,255,.1); }
.nav__a:active { transform: translateY(1px); background: rgba(255,255,255,.18); }
.nav__a.is-current { color: var(--org); opacity: 1; font-weight: 700; }
.nav__a.is-current::after { transform: scaleX(1); }
.nav__g { position: relative; }
.nav__chev { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.nav__g.is-open .nav__chev { transform: rotate(180deg); }
.nav__g.is-open > .nav__a { background: rgba(255,255,255,.14); opacity: 1; }
.nav__dd { position: absolute; top: 100%; left: 0; min-width: 270px; padding: 8px; margin-top: 6px; display: none; flex-direction: column;
  background: var(--ink); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.35); max-height: calc(100vh - 96px); overflow-y: auto; }
.nav__g::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.nav__g.is-open .nav__dd { display: flex; }
.nav__dd a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 500; position: relative; }
.nav__dd a:hover { background: rgba(255,255,255,.1); }
.nav__dd a:active { background: rgba(255,255,255,.2); }
.nav__dd a.is-sub { padding-left: 30px; font-size: 14px; opacity: .85; }
.nav__dd a.is-sub::before { content: ''; position: absolute; left: 16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: rgba(255,255,255,.4); }
.nav__dd a.is-current { background: var(--org); color: var(--ink); font-weight: 700; opacity: 1; }
.nav__dd a.is-current::before { background: var(--ink); }
.hdr__side { display: flex; align-items: center; gap: 16px; }
/* сведения об образовательной организации — обязательная ссылка, всегда в шапке */
.hdr__doc { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: inherit; text-decoration: none; font: 600 14px var(--f-t); white-space: nowrap; }
.hdr__doc svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hdr__doc:hover span { text-decoration: underline; text-underline-offset: 3px; }
.tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 700 16px var(--f-d); white-space: nowrap; }
.tel svg { color: var(--org); }
.burger { display: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); cursor: pointer; padding: 0; position: relative; }
.burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .2s; }
.burger span:first-child { top: 19px; } .burger span:last-child { top: 27px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mnav { display: none; }

/* средняя ширина: меню и кнопки шапки не должны ломать строки */
@media (max-width: 1440px) {
  .hdr__in { gap: 14px; }
  .logo__t i { display: none; }
  .nav { gap: 0; }
  .nav__a { padding: 10px 9px; }
  .hdr__side { gap: 10px; }
}

/* ── первый экран ───────────────────────────────────────────────────── */
/* Фото справа с левым краем-шевроном «›», как на дверях учебных машин:
   оранжевая полоса — это фон рамки, видный между двумя одинаковыми срезами. */
.hero { position: relative; min-height: max(100svh, 720px); display: flex; align-items: center; color: var(--white); overflow: hidden;
  background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), 0 100%); }
.hero__ph { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 56%; background: var(--org);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16% 50%); }
.hero__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 18% 50%;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 5% 100%, 21% 50%); animation: arrive 1.6s cubic-bezier(.2,.7,.2,1) both; }
.hero__ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,22,33,.7) 0%, rgba(14,22,33,0) 22%); }
.hero__in { position: relative; z-index: 1; padding-top: 120px; padding-bottom: 110px; }
.hero__tag { display: inline-block; margin-bottom: 20px; padding: 8px 14px; border-radius: 999px; background: var(--org); color: var(--ink); font-weight: 600; font-size: 14px; }
.hero h1 { font-size: clamp(44px, 5.4vw, 80px); max-width: 11ch; animation: slide .9s .25s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 span { color: var(--org); }
.hero__lead { max-width: 30ch; margin-top: 22px; font-size: clamp(17px, 1.6vw, 21px); color: var(--on-dark); }
.hero__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 172px)); gap: 20px; margin: 48px 0 0; }
.hero__facts div { border-top: 2px solid rgba(255,255,255,.35); padding-top: 12px; }
.hero__facts dt { font: 800 clamp(20px, 2vw, 27px)/1.1 var(--f-d); white-space: nowrap; }
.hero__facts dd { margin: 6px 0 0; font-size: 14px; color: var(--on-dark-2); line-height: 1.4; }

@keyframes arrive { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes slide { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── права в руках ──────────────────────────────────────────────────── */
.got { padding: 72px 0 96px; }
.got__head { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 32px; align-items: end; margin-bottom: 36px; }
.got__head p { color: var(--muted); font-size: 18px; }
.got__grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: min(78vw, 680px); }
.ph { margin: 0; border-radius: var(--r-ph); overflow: hidden; background: var(--line); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ph:hover img { transform: scale(1.04); }
.ph--tall { grid-row: span 2; }
.ph--tall img { object-position: 40% 40%; }

/* ── категории ──────────────────────────────────────────────────────── */
.sec { padding: 96px 0; }
.sec__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.sec__head p { max-width: 46ch; color: var(--muted); }
.sec__head--dark p { color: var(--on-dark-2); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 16px; }
.tile { position: relative; display: block; border-radius: var(--r-ph); overflow: hidden; color: var(--white); text-decoration: none; background: var(--ink); }
.tile--big { grid-column: span 2; grid-row: span 2; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,22,33,.88) 0%, rgba(14,22,33,.15) 55%, rgba(14,22,33,0) 75%); }
.tile__k { position: absolute; z-index: 1; top: 16px; left: 16px; min-width: 52px; height: 52px; padding: 0 12px; display: grid; place-items: center;
  border-radius: var(--r-ctl); background: var(--org); color: var(--ink); font: 800 22px var(--f-d); }
.tile--big .tile__k { min-width: 76px; height: 76px; font-size: 36px; border-radius: 20px; }
.tile__txt { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; }
.tile__n { display: block; font: 700 18px/1.2 var(--f-d); }
.tile--big .tile__n { font-size: clamp(22px, 2.4vw, 32px); }
.tile__p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; }
.tile__p b { font: 800 18px var(--f-d); color: var(--org); }
.tile--big .tile__p b { font-size: clamp(24px, 2.6vw, 36px); }
.tile__p span { font-size: 14px; color: var(--on-dark); }
.spec__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 48px auto 18px; }
.spec__head h3 { font-size: clamp(22px, 2.4vw, 30px); }
.spec__head p { max-width: 46ch; color: var(--muted); font-size: 16px; }
.tiles--spec { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; }
.more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.more__i { display: inline-flex; align-items: baseline; gap: 10px; min-height: 48px; padding: 12px 18px; border-radius: 999px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; font-weight: 500; }
.more__i b { font: 700 15px var(--f-d); color: var(--org-deep); }
.more__i:hover { box-shadow: inset 0 0 0 2px var(--ink); }

/* ── как учим ───────────────────────────────────────────────────────── */
.how { background: var(--ink); color: var(--on-dark); padding: 120px 0 96px; clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%); margin-top: -1px; }
.how h2 { color: var(--white); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0 auto; }
.step figure { margin: 0 0 18px; border-radius: var(--r-ph); overflow: hidden; aspect-ratio: 4 / 5; }
.step img { width: 100%; height: 100%; object-fit: cover; }
.step b { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; background: var(--org); color: var(--ink); font: 800 16px var(--f-d); }
.step h3 { color: var(--white); margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--on-dark-2); }

/* ── полосы на всю ширину ───────────────────────────────────────────── */
.band { position: relative; min-height: min(86vh, 820px); display: flex; align-items: flex-end; color: var(--white); overflow: hidden; background: var(--ink); }
.band__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,22,33,.82) 0%, rgba(14,22,33,0) 50%); }
.band__in { position: relative; z-index: 1; padding-bottom: 64px; }
.band__big { font: 800 clamp(30px, 5vw, 68px)/1.04 var(--f-d); letter-spacing: -.02em; max-width: 16ch; margin-bottom: 14px; }
.band__in p:not(.band__big) { max-width: 46ch; color: var(--on-dark); font-size: 18px; }
.band--trip .band__ph { object-position: 50% 40%; }
.band--trip::after { background: linear-gradient(0deg, rgba(14,22,33,.9) 0%, rgba(14,22,33,.35) 55%, rgba(14,22,33,0) 75%); }
/* закат: машины внизу кадра — главное, текст уходит в небо */
.band--sky { align-items: flex-start; }
.band--sky .band__ph { object-position: 50% 100%; }
.band--sky::after { background: linear-gradient(180deg, rgba(14,22,33,.55) 0%, rgba(14,22,33,0) 45%); }
.band--sky .band__in { padding: 96px var(--pad) 0; }

/* ── классы ─────────────────────────────────────────────────────────── */
.where { padding: 96px 0; }
.where__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.where__txt > p { margin: 18px 0 28px; color: var(--muted); max-width: 44ch; }
.places { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.places li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.places b { font-weight: 600; }
.places i { font-style: normal; color: var(--muted); font-size: 14px; grid-column: 1; }
.places span { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 14px; color: var(--ink); max-width: 22ch; }
.places li:last-child b { color: var(--org-deep); }
/* коллаж из пяти кадров класса: широкий сверху, под ним две пары */
.where__ph { position: sticky; top: 100px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1.3fr 1fr 1fr; gap: 12px; aspect-ratio: 4 / 5; }
.cl { margin: 0; border-radius: var(--r-ph); overflow: hidden; background: var(--line); }
.cl--a, .cl--b { grid-column: span 2; }
.cl img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.cl:hover img { transform: scale(1.04); }

/* ── команда: общее фото и лента инструкторов ───────────────────────── */
.crew { padding: 96px 0; }
.crew__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 36px; }
.crew__head p { color: var(--muted); max-width: 44ch; }
.crew__all { margin: 0 0 40px; border-radius: var(--r-ph); overflow: hidden; aspect-ratio: 3 / 1; background: var(--line); }
.crew__all img { width: 100%; height: 100%; object-fit: cover; }
.crew__list { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.crew__card { flex: 0 0 calc((100% - 4 * 16px) / 5); scroll-snap-align: start; }
.crew__card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; background: var(--line); }
.crew__card b { display: block; margin-top: 12px; font-weight: 700; font-size: 17px; }
.crew__card span { display: block; color: var(--muted); font-size: 14px; }

/* лента с прокруткой и стрелками (команда, отзывы) */
.rail__track, [data-rail-track] { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
[data-rail-track]::-webkit-scrollbar { display: none; }
[data-rail] { position: relative; }
.rail__btn { position: absolute; top: 38%; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--org); color: var(--ink);
  font: 700 22px/1 var(--f-t); cursor: pointer; box-shadow: 0 6px 20px rgba(14,22,33,.18); transition: opacity .2s, background .2s; }
.rail__btn:hover { background: #ff8340; }
.rail__btn:disabled { opacity: 0; pointer-events: none; }
.rail__btn--prev { left: -18px; }
.rail__btn--next { right: -18px; }

/* ── деньги ─────────────────────────────────────────────────────────── */
.money { background: var(--org); color: var(--ink); padding: 128px 0 104px; clip-path: polygon(0 0, 100% 56px, 100% 100%, 0 100%); }
.money h2 { margin-bottom: 40px; }
.money__grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 16px; }
.money__grid article { padding: 26px; border-radius: var(--r-ph); background: rgba(255,255,255,.22); }
.money__grid .money__main { background: var(--ink); color: var(--on-dark); }
.money__grid b { display: block; margin-bottom: 14px; font: 800 clamp(28px, 3vw, 42px)/1 var(--f-d); letter-spacing: -.02em; white-space: nowrap; }
.money__main b { color: var(--org); }
.money__grid h3 { margin-bottom: 8px; font-size: 18px; }
.money__main h3 { color: var(--white); }
.money__grid p { font-size: 15px; }
.money__sale { display: flex; flex-direction: column; }
.money__go { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 44px; margin-top: auto; padding: 0 18px;
  border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none; transition: background .2s; }
.money__sale p { margin-bottom: 18px; }
.money__go:hover { background: #22303f; }

/* ── люди ───────────────────────────────────────────────────────────── */
.people { background: var(--ink); color: var(--on-dark); padding-bottom: 96px; }
.people__ph { margin: 0; height: min(70vh, 720px); overflow: hidden; }
.people__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.people__in { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; margin-top: -88px; position: relative; }
.people__score { padding: 28px; border-radius: var(--r-ph); background: var(--org); color: var(--ink); align-self: start; }
.people__score b { display: block; font: 800 72px/1 var(--f-d); letter-spacing: -.03em; }
.people__score span { display: block; margin-top: 8px; font-weight: 600; }
.people__score i { display: block; margin-top: 12px; font-style: normal; font-size: 13px; }
/* карусель скриншотов отзывов: все сняты в колонку 360 px, карточки одной ширины, без ссылок на площадки */
.rv { grid-column: 2; min-width: 0; padding-top: 112px; }
.rv__list { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 0; list-style: none; overflow-y: hidden; transition: height .3s; }
.rv__card { flex: 0 0 auto; width: min(300px, 78vw); scroll-snap-align: start; }
.rv__src { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; background: var(--ink-2); color: var(--on-dark); font-size: 13px; font-weight: 600; }
.rv__shot { padding: 4px; border-radius: 20px; background: var(--white); overflow: hidden; }
.rv__card img { width: 100%; }
.rv .rail__btn { top: 200px; }

/* ── заявка ─────────────────────────────────────────────────────────── */
.apply { position: relative; padding: 112px 0; color: var(--white); overflow: hidden; background: var(--ink); }
.apply__ph { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 0; }
.apply::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(14,22,33,.86) 0%, rgba(14,22,33,.6) 50%, rgba(14,22,33,.3) 100%); }
.apply__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px; align-items: center; }
.apply__txt p { margin-top: 18px; max-width: 40ch; font-size: 18px; color: var(--on-dark); }
.apply__tel a { color: var(--org); font-weight: 700; white-space: nowrap; }
.apply__card { background: var(--white); color: var(--ink); border-radius: var(--r-ph); padding: 28px; }

/* ── форма ──────────────────────────────────────────────────────────── */
.form { position: relative; }
.form__h { font-size: 24px; margin-bottom: 16px; }
.chips { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-grid; place-items: center; min-width: 52px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 600; cursor: pointer; }
.chip input:checked + span { background: var(--ink); color: var(--white); box-shadow: none; }
.chip input:focus-visible + span { outline: 3px solid var(--org); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 14px; font-weight: 600; color: var(--muted); }
.field input, .sel { min-height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r-ctl); background: var(--paper); font: 400 17px var(--f-t); color: var(--ink); width: 100%; }
.field input:focus, .sel:focus { border-color: var(--ink); outline: none; }
.field input[aria-invalid="true"] { border-color: var(--err); }
.hp { position: absolute; left: -9999px; }
.promo { margin: 0 0 12px; }
.promo__open { padding: 4px 0; border: 0; background: none; font: 600 15px var(--f-t); color: var(--org-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.promo__open:hover { color: var(--ink); }
.promo__box label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.promo__row { display: flex; gap: 8px; }
.promo__row input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r-ctl); background: var(--paper); font: 600 17px var(--f-t); color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.promo__row input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }
.promo__row input:focus { border-color: var(--ink); outline: none; }
.promo__go { min-height: 52px; padding: 0 18px; border-radius: var(--r-ctl); flex: none; }
.promo__msg { margin-top: 6px; font-size: 14px; color: var(--muted); }
.promo__msg:empty { display: none; }
.promo__msg.is-ok { color: var(--ok); font-weight: 600; }
.promo__msg.is-bad { color: var(--err); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 13px; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.consent a { color: var(--ink); }
.form__note { margin-top: 10px; text-align: center; font-size: 13px; color: var(--muted); }
.err { display: none; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--r-ctl); background: #fde8e8; color: var(--err); font-size: 14px; }
.err.on { display: block; }
.form__done { display: none; text-align: center; padding: 24px 0; }
.form__done.on { display: block; }
.form.is-sent .form__body { display: none; }
.form__done h3 { font-size: 24px; margin: 12px 0 8px; }
.form__done p { color: var(--muted); }
.form__done a { color: var(--ink); font-weight: 700; }
.tick { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #e3f4ea; color: var(--ok); }
.tick svg { stroke-width: 2.5; }

/* ── вопросы ────────────────────────────────────────────────────────── */
.faq__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-weight: 600; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font: 700 26px var(--f-d); color: var(--org-deep); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--muted); max-width: 64ch; }

/* ── подвал ─────────────────────────────────────────────────────────── */
.ftr { background: var(--ink); color: var(--on-dark-2); padding: 64px 0 28px; font-size: 14px; }
.ftr .logo { color: var(--white); }
.ftr__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; }
.ftr__legal { margin-top: 20px; line-height: 1.6; }
.ftr__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ftr h4 { margin: 0 0 12px; color: var(--white); font: 700 14px var(--f-d); }
.ftr__cols a { display: block; padding: 4px 0; text-decoration: none; }
.ftr a:hover { color: var(--org); }
.ftr__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }

/* ── шторка ─────────────────────────────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet__bg { position: absolute; inset: 0; background: rgba(14,22,33,.6); }
.sheet__win { position: relative; width: min(720px, 100%); max-height: 86vh; overflow: auto; background: var(--white); border-radius: var(--r-ph) var(--r-ph) 0 0; padding: 24px 28px 32px; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sheet__head h3 { font-size: 24px; }
.sheet__x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.sheet__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sheet__row b { text-align: right; font-weight: 700; white-space: nowrap; }
.sheet__row i { display: block; font-style: normal; font-weight: 400; font-size: 13px; color: var(--muted); }
.sheet__note { margin-top: 16px; font-size: 13px; color: var(--muted); }

.dock { display: none; }

/* ── планшет ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav { display: none; }
  .hdr__side { margin-left: auto; }
  .burger { display: block; }
  .mnav { display: none; flex-direction: column; padding: 8px var(--pad) 20px; }
  .mnav.is-open { display: flex; max-height: calc(100svh - 76px); overflow-y: auto; }
  .mnav__a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0 14px 14px; border: 0; border-bottom: 1px solid rgba(255,255,255,.12);
    border-left: 4px solid transparent; background: none; color: inherit; font: 500 17px/1.3 var(--f-t); text-align: left; text-decoration: none; cursor: pointer; }
  .mnav__a:active { background: rgba(255,255,255,.12); }
  .mnav__a.is-current, .mnav__g.is-current > .mnav__a { border-left-color: var(--org); color: var(--org); font-weight: 700; }
  .mnav__btn[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
  .mnav__dd { display: flex; flex-direction: column; padding: 4px 0 8px 14px; background: rgba(255,255,255,.05); }
  .mnav__dd[hidden] { display: none; }
  .mnav__dd a { padding: 12px 0 12px 14px; border-left: 3px solid transparent; text-decoration: none; font-size: 16px; }
  .mnav__dd a.is-sub { padding-left: 30px; font-size: 15px; opacity: .85; }
  .mnav__dd a.is-current { border-left-color: var(--org); color: var(--org); font-weight: 700; opacity: 1; }
  .mnav__dd a:active { background: rgba(255,255,255,.12); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .money__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people__in { grid-template-columns: minmax(0, 1fr); }
  .people__score { justify-self: start; }
  .rv { grid-column: 1; padding-top: 0; }
  .crew__card { flex-basis: calc((100% - 2 * 16px) / 3); }
}

/* ── телефон ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: 76px; }
  .hdr__in { height: 64px; gap: 12px; }
  .logo__m { width: 38px; height: 38px; }
  .logo__t i { display: none; }
  .hdr__cta { display: none; }
  .tel { font-size: 15px; }

  /* на телефоне фото сверху, срез шевроном смотрит вниз */
  .hero { display: block; min-height: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%); }
  .hero__ph { position: relative; width: 100%; height: 52svh; min-height: 340px; clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); }
  .hero__ph img { object-position: 22% 45%; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 94%, 0 80%); }
  .hero__in { padding-top: 20px; padding-bottom: 64px; }
  .hero__tag { font-size: 13px; margin-bottom: 14px; }
  .hero__act .btn { flex: 1 1 100%; }
  .hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
  .hero__facts dt { font-size: 18px; }
  .hero__facts dd { font-size: 12px; }

  .got { padding: 56px 0 64px; }
  .got__head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .got__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 320px 160px; height: auto; gap: 10px; }
  .ph--tall { grid-row: auto; grid-column: span 2; }
  .ph { border-radius: 20px; }

  .sec { padding: 64px 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 10px; }
  .tile { border-radius: 20px; }
  .tile--big { grid-row: span 2; }
  .spec__head { display: block; margin-top: 36px; }
  .spec__head p { margin-top: 8px; font-size: 15px; }
  .tiles--spec { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 200px; }
  .tile__k { top: 12px; left: 12px; min-width: 42px; height: 42px; font-size: 17px; }
  .tile__txt { left: 14px; right: 14px; bottom: 12px; }
  .tile__n { font-size: 15px; }
  .tile__p b { font-size: 15px; }
  .tile__p span { font-size: 12px; }

  .how { padding: 88px 0 64px; clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); }
  .steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 78%; scroll-snap-align: start; }

  .band { min-height: 78svh; }
  .band__in { padding-bottom: 44px; }

  .where { padding: 64px 0; }
  .where__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .where__ph { position: static; aspect-ratio: 1 / 1; order: -1; gap: 8px; }
  .cl { border-radius: 18px; }
  .places li { grid-template-columns: minmax(0, 1fr); }
  .places span { grid-column: 1; grid-row: auto; text-align: left; max-width: none; color: var(--muted); }

  .money { padding: 88px 0 64px; clip-path: polygon(0 0, 100% 28px, 100% 100%, 0 100%); }
  .money__grid { grid-template-columns: minmax(0, 1fr); }
  .money__grid article { padding: 22px; }

  .crew { padding: 64px 0; }
  .crew__head { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 24px; }
  .crew__all { margin-bottom: 24px; border-radius: 18px; aspect-ratio: 2 / 1; }
  .crew__card { flex-basis: 64%; }
  .rail__btn { display: none; }
  .where__ph { aspect-ratio: 4 / 5; }

  .people__ph { height: 56vh; }
  .people__in { margin-top: -56px; gap: 20px; }
  .people__score b { font-size: 56px; }

  .apply { padding: 72px 0; }
  .apply::before { background: rgba(14,22,33,.78); }
  .apply__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .apply__card { padding: 22px; }

  .faq__in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ftr__in, .ftr__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .dock { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(14,22,33,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .dock__tel { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--white); flex: none; }
  .dock__tel svg { color: var(--org); }
  .dock__cta { flex: 1; display: grid; place-items: center; min-height: 56px; border-radius: 999px; background: var(--org); color: var(--ink); font-weight: 700; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ── контакты ───────────────────────────────────────────────────────── */
.contacts { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding: clamp(64px, 9vw, 112px) 0; }
.contacts__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.contacts::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,22,33,.94) 25%, rgba(14,22,33,.5)); }
.contacts__in { position: relative; z-index: 1; }
.contacts h2 { margin-bottom: 40px; color: var(--white); }
.contacts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contacts__tel, .contacts__card { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; border-radius: var(--r-ph); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: inherit; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.contacts__tel { grid-column: span 2; background: var(--org); border-color: var(--org); color: var(--ink); transition: background .2s; }
.contacts__tel:hover { background: #ff8340; }
.contacts span { font: 600 13px/1 var(--f-t); letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.contacts__tel b { font: 800 clamp(26px, 3.4vw, 44px)/1.05 var(--f-d); letter-spacing: -.02em; }
.contacts__card b { font: 700 clamp(18px, 1.8vw, 22px)/1.25 var(--f-d); }
.contacts__card i { font-style: normal; color: var(--on-dark-2); font-size: 15px; }
.contacts__card a { color: var(--white); font-size: 18px; text-underline-offset: 3px; }
.contacts__card p { margin: 0; font-size: 18px; }
@media (max-width: 900px) {
  .contacts__grid { grid-template-columns: minmax(0, 1fr); }
  .contacts__tel { grid-column: auto; }
}

/* узкие телефоны: в шапке телефон — иконкой, чтобы поместился бургер */
@media (max-width: 480px) {
  .hdr__in { gap: 10px; }
  .tel { width: 40px; height: 40px; justify-content: center; border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; }
  .tel span { display: none; }
  .hdr__side { gap: 6px; }
  .tel, .hdr__doc, .hdr__side .a11y-btn { width: 38px; height: 38px; min-height: 38px; }
  .hdr__doc { justify-content: center; border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; }
  .hdr__doc span { display: none; }
  .logo__t b { font-size: 15px; }
  .burger { width: 42px; height: 42px; }
  .burger span { left: 13px; right: 13px; }
  .burger span:first-child { top: 18px; } .burger span:last-child { top: 26px; }
}

/* ── написать нам: мессенджеры в правом нижнем углу (#95) ─────────────── */
.chat { position: fixed; right: 24px; bottom: 24px; z-index: 70; }
.chat__btn { list-style: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--org); color: var(--ink); cursor: pointer;
  box-shadow: 0 10px 28px rgba(14,22,33,.32); transition: background .2s, transform .2s; }
.chat__btn::-webkit-details-marker { display: none; }
.chat__btn:hover { background: #ff8340; transform: translateY(-2px); }
.chat__btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.chat__off, .chat[open] .chat__on { display: none; }
.chat[open] .chat__off { display: block; }
.chat[open] .chat__btn { background: var(--ink); color: var(--white); }
.chat__pop { position: absolute; right: 0; bottom: 72px; width: 280px; padding: 14px; border-radius: 20px; background: var(--white); color: var(--ink);
  box-shadow: 0 20px 60px rgba(14,22,33,.28); }
.chat__h { margin: 2px 6px 8px; font: 700 15px/1.2 var(--f-d); }
.chat__i { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; transition: background .15s; }
.chat__i:hover, .chat__i:focus-visible { background: var(--paper); }
.chat__ic { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.chat__i span { display: flex; flex-direction: column; gap: 2px; }
.chat__i b { font-size: 16px; }
.chat__i small { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .chat { right: 14px; bottom: 16px; }
  body:has(.dock) .chat { bottom: 88px; }
  .chat__btn { width: 54px; height: 54px; }
  .chat__pop { bottom: 66px; width: min(280px, calc(100vw - 28px)); }
}

/* ── «Я не робот» (#98): галочка капчи над согласием ─────────────────── */
.robot { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 4px 0 12px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-ctl); background: var(--white); cursor: pointer; user-select: none; }
.robot:hover { border-color: var(--ink); }
.robot__in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.robot__box { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 2px solid var(--muted); border-radius: 7px; background: var(--white); transition: background .2s, border-color .2s; }
.robot__box svg { width: 18px; height: 18px; fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.robot__t { flex: 1; font-weight: 600; font-size: 16px; color: var(--ink); }
.robot__by { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); text-align: right; }
.robot__by svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; flex: none; }
.robot__in:focus-visible + .robot__box { outline: 3px solid var(--org); outline-offset: 2px; }
.robot.is-wait { cursor: progress; }
.robot.is-wait .robot__box { border-color: var(--line); border-top-color: var(--org); border-radius: 50%; animation: robot-spin .8s linear infinite; }
.robot.is-ok { cursor: default; border-color: var(--ok); }
.robot.is-ok .robot__box { background: var(--ok); border-color: var(--ok); }
.robot.is-ok .robot__box svg { opacity: 1; transform: none; }
.robot.is-ok .robot__t { color: var(--ok); }
.robot.is-bad { border-color: var(--err); }
.robot.is-bad .robot__box { border-color: var(--err); }
@keyframes robot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .robot.is-wait .robot__box { animation-duration: 2.4s; } }