/* ============================================================
   AVIK — B2B эвакуация. Токены проекта.
   Шрифт: Onest 300 / 400 (два веса)
   Цвет:  графит #0E1012 / поверхность #171A1C / тёплый белый #E8E5E0 / акцент #D9552B
   Easing: cubic-bezier(.22, 1, .36, 1)
   ============================================================ */

:root{
  --ink:#0E1012;
  --surface:#171A1C;
  --surface-2:#1E2225;
  --paper:#E8E5E0;
  --accent:#D9552B;

  --t1:rgba(232,229,224,1);
  --t2:rgba(232,229,224,.74);
  --t3:rgba(232,229,224,.56);
  --hair:rgba(232,229,224,.14);

  --e:cubic-bezier(.22,1,.36,1);

  --r:18px;
  --r-pill:999px;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px; --s7:160px;
  --pad:clamp(20px, 4.4vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--t1);
  font-family:"Onest","Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.6;
  text-wrap:pretty;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:300; hyphens:none; text-wrap:balance; }
p{ margin:0; }
ol,dl,dd{ margin:0; padding:0; list-style:none; }

h2{
  font-size:clamp(2rem,5.5vw,5rem);
  line-height:.94;
  letter-spacing:-.03em;
}
h3{
  font-size:clamp(20px,1.9vw,30px);
  line-height:1.05;
  letter-spacing:-.02em;
  font-weight:300;
}

.label{
  font-size:12px;
  line-height:1.8;
  text-transform:uppercase;
  letter-spacing:.19em;
  color:var(--t3);
}

.num{
  font-size:13px;
  letter-spacing:.16em;
  color:var(--accent);
  line-height:1.8;
}

/* ---------- зерно ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ---------- шапка ---------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4);
  padding:22px var(--pad);
  transition:background 600ms var(--e), backdrop-filter 600ms var(--e);
}
.hdr.is-stuck{
  background:rgba(14,16,18,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.hdr__mark{
  font-size:15px; letter-spacing:.16em; font-weight:400;
}
.hdr__nav{ display:flex; gap:var(--s4); }
.hdr__nav a{
  font-size:14px; color:var(--t2);
  position:relative; padding:6px 0;
  transition:color 320ms var(--e);
}
.hdr__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 520ms var(--e);
}
.hdr__nav a:hover{ color:var(--t1); }
.hdr__nav a:hover::after{ transform:scaleX(1); }
.hdr__side{ display:flex; align-items:center; gap:var(--s3); }
.hdr .hdr__quick{ display:none; }

/* Быстрая связь на телефоне: звонок зелёной кнопкой, по бокам мессенджеры */
.hdr__quick{ display:flex; align-items:center; gap:6px; }
.hdr__call{
  min-height:52px; padding:0 16px;
  background:#1FAF4B; color:#fff;
  font-size:15px; letter-spacing:-.01em;
  border-radius:var(--r-pill);
  transition:background 320ms var(--e), transform 320ms var(--e);
}
.hdr__call:hover{ background:#18963F; }
.hdr__call:active{ transform:scale(.97); }
.ico{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:var(--r-pill);
  color:#fff; transition:transform 320ms var(--e), filter 320ms var(--e);
}
.ico--tg{ background:#2AABEE; }
.ico--wa{ background:#25D366; }
.ico:active{ transform:scale(.94); }
.hdr__tel{ font-size:14px; color:var(--t2); transition:color 320ms var(--e); }
.hdr__tel:hover{ color:var(--t1); }

/* ---------- кнопки ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px;
  min-height:52px; padding:0 26px;
  border-radius:var(--r-pill);
  font-size:15px; line-height:1;
  isolation:isolate;
}
.btn--sm{ min-height:44px; padding:0 20px; font-size:14px; }
.btn--solid{ background:var(--paper); color:var(--ink); }
.btn--ghost{ border:1px solid var(--hair); color:var(--t1); }

.btn__fill{
  position:absolute; inset:0; z-index:-1; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 500ms var(--e);
}
.btn__label{ position:relative; z-index:2; transition:color 320ms var(--e); }
.btn__ico{
  position:relative; z-index:2;
  display:grid; place-items:center;
  width:26px; height:26px; border-radius:var(--r-pill);
  transition:transform 520ms var(--e), background 520ms var(--e), color 520ms var(--e);
}
.btn--solid .btn__ico{ background:rgba(14,16,18,.1); }
.btn--ghost .btn__ico{ background:rgba(232,229,224,.08); }

.btn--solid:hover .btn__fill{ transform:scaleX(1); }
.btn--solid:hover .btn__label{ color:var(--paper); }
.btn--solid:hover .btn__ico{ transform:translateX(5px); background:rgba(232,229,224,.16); color:var(--paper); }
.btn--ghost:hover .btn__ico{ transform:translateX(5px); background:rgba(232,229,224,.16); }

.calm,.hero__calm{ font-size:13px; color:var(--t3); }
.hero__calm{ text-shadow:0 2px 14px rgba(0,0,0,.7); }

/* ---------- ГЕРОЙ ---------- */
.hero{ position:relative; height:260vh; }

.hero__media{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:var(--ink);
}
.hero__canvas{ width:100%; height:100%; display:block; }

/* Кадр садится в графит страницы виньеткой по кромке, симметрично сверху и снизу,
   а не общим затемнением: техника в центре остаётся в полном качестве. */
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(14,16,18,.62) 11%, transparent 27%),
    linear-gradient(to top, var(--ink) 0%, rgba(14,16,18,.62) 11%, transparent 27%),
    radial-gradient(140% 104% at 50% 50%, transparent 56%, rgba(14,16,18,.52) 100%);
}

.hero__wordmark{
  position:absolute; left:var(--pad); right:var(--pad); top:clamp(76px,10vh,132px);
  margin:0;
  /* Плотный кириллический гротеск, слово цельное и по центру. Разрядка
     по всей ширине рассыпала девять букв на отдельные знаки. */
  font-family:"Golos Text","Onest",sans-serif;
  font-size:clamp(2.4rem,8.4vw,7.6rem);
  line-height:.92; letter-spacing:-.03em; font-weight:700;
  text-align:center;
  color:rgba(232,229,224,.94);
  text-shadow:0 12px 60px rgba(0,0,0,.35);
  pointer-events:none;
}

/* Логотип с прозрачным фоном — лежит прямо на кадре, без подложки. */
.hero__badge{
  position:absolute; right:var(--pad); top:clamp(84px,11vh,150px);
  width:clamp(140px,14.5vw,210px);
  transition:transform 620ms var(--e);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
.hero__badge img{ width:100%; height:auto; display:block; }
.hero__badge:hover{ transform:translateY(-4px); }

.hero__copy{
  position:absolute; left:var(--pad); bottom:clamp(36px,7vh,72px);
  max-width:min(58ch,58vw);
  will-change:transform,opacity,filter;
}
.hero__title{
  font-size:clamp(2.2rem,4.4vw,4.2rem);
  line-height:.94; letter-spacing:-.032em;
  text-shadow:0 6px 34px rgba(0,0,0,.45);
}
.hero__sub{
  margin-top:20px; max-width:56ch; color:var(--t2);
  text-shadow:0 4px 22px rgba(0,0,0,.5);
}
.hero__act{ margin-top:var(--s4); display:flex; align-items:center; gap:var(--s3); flex-wrap:nowrap; }
.hero__calm{ white-space:nowrap; }

.hero__cards{
  position:absolute; right:var(--pad); bottom:clamp(36px,7vh,72px);
  display:flex; align-items:flex-end; gap:14px;
}
.card{
  background:var(--paper); color:var(--ink);
  border-radius:16px;
  padding:18px 20px 16px;
  width:184px;
  box-shadow:0 34px 80px -30px rgba(0,0,0,.86), 0 4px 14px -6px rgba(0,0,0,.4);
  opacity:0; transform:translateY(26px); filter:blur(14px);
  transition:opacity 900ms var(--e), transform 900ms var(--e), filter 900ms var(--e);
  transition-delay:calc(var(--i) * 90ms);
}
.card.is-on{ opacity:1; transform:none; filter:blur(0); }
.card b{
  display:block; font-weight:300;
  font-size:clamp(26px,2.4vw,36px); line-height:1; letter-spacing:-.03em;
}
.card__cap{
  margin-top:9px;
  font-size:11px; text-transform:uppercase; letter-spacing:.16em;
  color:rgba(14,16,18,.62);
}
.card__note{
  margin-top:12px; font-size:11.5px; line-height:1.45;
  color:rgba(14,16,18,.5); text-wrap:balance;
}
.card--wide{ width:228px; padding:22px 24px 18px; }
.card--photo{ width:196px; padding:12px 12px 16px; }
.card--photo img{
  width:100%; height:92px; object-fit:cover;
  border-radius:11px; margin-bottom:14px;
}
.card--photo b{ padding:0 8px; }
.card--photo .card__cap{ padding:0 8px; }

.hero__rail{
  position:absolute; right:calc(var(--pad) / 2); top:22vh; bottom:22vh; width:1px;
  background:rgba(232,229,224,.14); opacity:0;
  transition:opacity 600ms var(--e);
}
.hero__rail i{
  position:absolute; inset:0 0 auto 0; height:100%;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
}
.hero.is-scrubbing .hero__rail{ opacity:1; }

/* ---------- НАПРАВЛЕНИЯ ---------- */
.work{ padding:var(--s7) var(--pad) var(--s6); }
.work__head{
  display:grid; grid-template-columns:minmax(180px,22%) 1fr; gap:var(--s4);
  padding-bottom:var(--s6);
}
.work__lead{ max-width:none; }
.work__lead p{ margin-top:var(--s3); max-width:56ch; color:var(--t2); }
.work__lead .btn{ margin-top:var(--s4); }

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.tile{
  position:relative; overflow:hidden;
  border-radius:var(--r);
  background:var(--surface);
  min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform 620ms var(--e);
}
.tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 800ms var(--e), opacity 800ms var(--e);
}
.tile::after{
  content:""; position:absolute; inset:0;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  -webkit-mask-image:linear-gradient(to top,#000 12%,transparent 62%);
  mask-image:linear-gradient(to top,#000 12%,transparent 62%);
}
.tile__txt{ position:relative; z-index:2; padding:26px 26px 28px; }
.tile__txt h3{ margin-top:10px; }
.tile__txt p{ margin-top:12px; max-width:42ch; font-size:14px; color:var(--t2); text-wrap:balance; }
.tile:hover{ transform:translateY(-6px); }
.tile:hover img{ transform:scale(1.045); }

.tile--tall{ grid-row:span 2; min-height:100%; }
.tile--flat{
  background:var(--surface-2); min-height:300px;
  grid-column:span 2;
}
.tile--flat .tile__txt{ padding:32px; }
.tile--flat .tile__txt p{ max-width:56ch; }


/* ---------- МАРШРУТ: второй скролл ---------- */
.route{ position:relative; height:340vh; }

.route__media{
  position:sticky; top:0; height:100svh; overflow:hidden;
  /* тон задаёт скрипт: белая студия в начале ролика, графит на дороге */
  background:var(--route-bg, var(--ink));
  transition:background 220ms linear;
}
.route__video{ width:100%; height:100%; display:block; object-fit:cover; }

.route__stations{ position:absolute; inset:0; pointer-events:none; }

.stn{ position:absolute; inset:0; }

/* Карточка станции. Плотная сетка, глубокая мягкая тень — иначе светлая плашка
   тонет на светлом студийном кадре. */
.stn__card{
  position:absolute; left:var(--pad); top:clamp(88px,13vh,148px);
  width:min(372px,44vw);
  background:var(--paper); color:var(--ink);
  border-radius:16px; padding:20px 22px 18px;
  box-shadow:0 34px 80px -28px rgba(0,0,0,.86), 0 4px 14px -6px rgba(0,0,0,.4);
}
.stn__head{
  display:flex; align-items:baseline; gap:10px;
  padding-bottom:14px; border-bottom:1px solid rgba(14,16,18,.12);
}
.stn__num{ font-size:12px; letter-spacing:.12em; color:var(--accent); }
.stn__cap{
  font-size:11px; text-transform:uppercase; letter-spacing:.17em;
  color:rgba(14,16,18,.5);
}
.stn__card h3{
  margin-top:16px;
  font-size:clamp(21px,1.9vw,28px); line-height:1.04; letter-spacing:-.025em;
  color:var(--ink);
}
.stn__meter{
  margin-top:20px;
  display:flex; align-items:center; gap:10px;
  font-size:10.5px; letter-spacing:.14em; color:rgba(14,16,18,.4);
}
.stn__meter i{
  flex:1; height:1px; background:rgba(14,16,18,.14); position:relative;
}
.stn__meter i::after{
  content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--f) * 100%);
  background:var(--ink);
}

/* Показатели шага — правый верхний угол. Заполняют пустое поле кадра
   и дают цифру там, где слева стоит формулировка. */
.stn__spec{
  position:absolute; right:var(--pad); top:clamp(88px,13vh,148px);
  width:min(208px,24vw);
  background:var(--paper); color:var(--ink);
  border-radius:16px; padding:18px 20px 16px;
  box-shadow:0 34px 80px -30px rgba(0,0,0,.86), 0 4px 14px -6px rgba(0,0,0,.4);
}
.stn__spec div + div{
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(14,16,18,.12);
}
.stn__spec b{
  display:block; font-weight:300;
  font-size:clamp(22px,2.1vw,30px); line-height:1; letter-spacing:-.03em;
}
.stn__spec span{
  display:block; margin-top:8px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.16em;
  color:rgba(14,16,18,.5);
}

.stn__note{
  position:absolute; right:var(--pad); bottom:clamp(46px,9vh,92px);
  width:max-content; max-width:min(34vw,400px);
  background:var(--paper); color:rgba(14,16,18,.72);
  border-radius:14px; padding:14px 18px;
  font-size:13px; line-height:1.45; text-align:left; text-wrap:balance;
  box-shadow:0 28px 70px -30px rgba(0,0,0,.82), 0 3px 10px -5px rgba(0,0,0,.35);
}

/* финал: надпись во весь экран на подъезде к сервису */
.stn--final::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(14,16,18,.95) 0%, rgba(14,16,18,.90) 40%, rgba(14,16,18,.74) 62%,
    rgba(14,16,18,.40) 78%, rgba(14,16,18,.12) 90%, transparent 100%);
  opacity:0; transition:opacity 760ms var(--e);
}
.stn--final.is-on::before{ opacity:1; }

.stn--final .final{
  position:absolute; left:var(--pad); right:var(--pad);
  top:50%; transform:translateY(-50%); z-index:2;
}
/* строка не должна заходить в световое пятно сервиса справа */
.final__title,.final .label{ max-width:68vw; }
.final__title{
  margin-top:18px;
  font-size:clamp(2.1rem,5.4vw,5.4rem);
  line-height:.94; letter-spacing:-.035em;
  color:var(--t1);
  text-shadow:0 2px 10px rgba(0,0,0,.55), 0 12px 60px rgba(0,0,0,.7);
}
.final__act{
  margin-top:var(--s4);
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  pointer-events:auto;
}
.final .calm{ text-shadow:0 2px 16px rgba(0,0,0,.7); }

/* вход станции: плашка, затем подпись */
.stn__card,.stn__spec,.stn__note,.stn .final{
  opacity:0; transform:translateY(26px); filter:blur(14px);
  transition:opacity 760ms var(--e), transform 760ms var(--e), filter 760ms var(--e);
}
.stn.is-on .stn__card,
.stn.is-on .stn__spec,
.stn.is-on .stn__note,
.stn.is-on .final{ opacity:1; transform:none; filter:blur(0); }
.stn.is-on .stn__card{ transition-delay:0ms; }
.stn.is-on .stn__spec{ transition-delay:120ms; }
.stn.is-on .stn__note{ transition-delay:240ms; }
.stn.is-on .final{ transition-delay:0ms; }
.stn--final .final{ transform:translateY(calc(-50% + 26px)); }
.stn--final.is-on .final{ transform:translateY(-50%); }

/* кадр маршрута тоже садится в графит виньеткой */
.route__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* виньетка нужна только на тёмной дороге; на белой студии гасим её */
  opacity:var(--route-veil, 1);
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(14,16,18,.6) 10%, transparent 26%),
    linear-gradient(to top, var(--ink) 0%, rgba(14,16,18,.62) 11%, transparent 30%),
    linear-gradient(104deg, rgba(14,16,18,.34) 0%, rgba(14,16,18,.12) 26%, transparent 46%),
    radial-gradient(150% 112% at 50% 50%, transparent 62%, rgba(14,16,18,.4) 100%);
}

/* На белой студии светлые карточки исчезли бы: перекрашиваем их в графит */
.route.is-light .stn__card,
.route.is-light .stn__spec,
.route.is-light .stn__note{
  background:var(--ink); color:var(--t1);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.5), 0 3px 10px -5px rgba(0,0,0,.25);
}
.route.is-light .stn__card h3,
.route.is-light .stn__spec b{ color:var(--t1); }
.route.is-light .stn__cap,
.route.is-light .stn__spec span{ color:var(--t3); }
.route.is-light .stn__note{ color:var(--t2); }
.route.is-light .stn__head{ border-bottom-color:rgba(232,229,224,.16); }
.route.is-light .stn__meter{ color:rgba(232,229,224,.4); }
.route.is-light .stn__meter i{ background:rgba(232,229,224,.18); }
.route.is-light .stn__meter i::after{ background:var(--paper); }
.route.is-light .stn__spec div + div{ border-top-color:rgba(232,229,224,.16); }
.stn__card,.stn__spec,.stn__note{ transition:background 220ms linear, color 220ms linear; }
.route__stations{ z-index:2; }

.route__rail{
  position:absolute; right:calc(var(--pad) / 2); top:24vh; bottom:24vh; width:1px;
  background:rgba(232,229,224,.14);
}
.route__rail i{
  position:absolute; inset:0 0 auto 0; height:100%;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
}

/* ---------- широкий кадр ---------- */
.shot{
  margin:var(--s6) var(--pad) 0; position:relative; overflow:hidden;
  border-radius:var(--r);
}
.shot img{ width:100%; height:clamp(320px,52vh,620px); object-fit:cover; }
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; gap:var(--s3);
  padding:26px 28px; font-size:13px; color:var(--t2);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 100%);
  mask-image:linear-gradient(to top,#000 30%,transparent 100%);
}

/* ---------- ПАРК ---------- */
.fleet{
  display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch;
  margin-top:var(--s6);
}
.fleet__media img{ width:100%; height:100%; min-height:70svh; object-fit:cover; }
.fleet__panel{
  background:var(--surface);
  padding:var(--s6) var(--pad);
  display:flex; flex-direction:column; justify-content:center;
}
.fleet__panel h2{ margin-top:var(--s3); font-size:clamp(1.9rem,3.2vw,3rem); }
.fleet__note{ margin-top:var(--s3); max-width:44ch; color:var(--t2); text-wrap:balance; }
.spec{ margin-top:var(--s5); display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3) var(--s4); }
.spec div{ border-top:1px solid var(--hair); padding-top:14px; }
.spec dt{ font-size:12px; text-transform:uppercase; letter-spacing:.17em; color:var(--t3); }
.spec dd{ margin-top:8px; font-size:clamp(22px,2.4vw,34px); font-weight:300; letter-spacing:-.03em; line-height:1; }

/* ---------- УСЛУГИ ---------- */
.serv{ padding:var(--s6) var(--pad) var(--s5); }
.serv__head{
  display:grid; grid-template-columns:minmax(180px,22%) 1fr; gap:var(--s4);
  padding-bottom:var(--s5);
}
.serv__body{
  display:grid; grid-template-columns:1.24fr .76fr; gap:var(--s5) var(--s6);
  align-items:start;
}
.serv__list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4) var(--s5);
}
.serv__item{
  border-top:1px solid var(--hair); padding-top:16px;
}
.serv__item h3{
  margin-top:12px;
  font-size:clamp(18px,1.6vw,23px); line-height:1.08; letter-spacing:-.02em;
}
.serv__item p{ margin-top:8px; font-size:13px; color:var(--t3); text-wrap:balance; }

.serv__carrier{
  margin:0; border-radius:var(--r); overflow:hidden;
  background:var(--surface);
}
.serv__carrier img{
  width:100%; height:clamp(220px,26vh,300px); object-fit:cover;
  transition:transform 800ms var(--e);
}
.serv__carrier:hover img{ transform:scale(1.04); }
.serv__carrier figcaption{ padding:22px 24px 26px; }
.serv__carrier h3{
  margin-top:12px;
  font-size:clamp(21px,1.9vw,28px); line-height:1.04; letter-spacing:-.025em;
}
.serv__carrier figcaption p:last-child{
  margin-top:14px; font-size:13px; line-height:1.5; color:var(--t2); text-wrap:balance;
}

/* ---------- УСЛОВИЯ ---------- */
.terms{
  display:grid; grid-template-columns:1fr .9fr; gap:var(--s5);
  padding:var(--s7) var(--pad) var(--s6);
  align-items:center;
}
.terms__copy h2{ margin-top:var(--s3); font-size:clamp(1.9rem,3.4vw,3.2rem); }
.terms__copy > p{ margin-top:var(--s3); max-width:52ch; color:var(--t2); }
.terms__act{ margin-top:var(--s4); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.terms__shot{ margin:0; border-radius:var(--r); overflow:hidden; }
.terms__shot img{ width:100%; height:clamp(280px,46vh,540px); object-fit:cover; }

/* ---------- ЛЕНТА РЕЙСОВ ---------- */
/* Секция залипает, пока лента идёт вбок: иначе портфолио проматывается вместе
   со страницей и досмотреть его нельзя. Высоту секции считает скрипт —
   она равна экрану плюс горизонтальный путь трека. */
.reel{ position:relative; }
.reel__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:var(--s4);
  padding:clamp(88px,12vh,132px) 0 var(--s5);
}
.reel__head{
  display:grid; grid-template-columns:minmax(180px,22%) 1fr; gap:var(--s4);
  padding:0 var(--pad);
}
.reel__view{ overflow:hidden; }
.reel__track{
  display:flex; gap:18px; padding:0 var(--pad);
  width:max-content; will-change:transform;
}
.reel__item{
  margin:0; position:relative; flex:0 0 auto;
  width:clamp(220px,22vw,330px);
  border-radius:var(--r); overflow:hidden;
  background:var(--surface);
}
.reel__item:nth-child(3n+2){ width:clamp(180px,17vw,250px); }
.reel__item:nth-child(4n+3){ width:clamp(250px,27vw,390px); }
.reel__item img{
  width:100%; height:clamp(280px,42vh,440px); object-fit:cover;
  transition:transform 800ms var(--e);
}
.reel__item:nth-child(3n+2) img{ height:clamp(230px,34vh,360px); }
.reel__item:hover img{ transform:scale(1.045); }
.reel__item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:20px 22px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  -webkit-mask-image:linear-gradient(to top,#000 34%,transparent 100%);
  mask-image:linear-gradient(to top,#000 34%,transparent 100%);
}
.reel__item b{
  display:block; font-weight:300; font-size:17px; letter-spacing:-.015em;
}
.reel__item span{
  display:block; margin-top:6px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--t3);
}

.reel__meter{
  display:flex; align-items:center; gap:14px;
  padding:0 var(--pad);
  font-size:10.5px; letter-spacing:.16em; color:var(--t3);
}
.reel__meter i{ flex:1; height:1px; background:var(--hair); position:relative; }
.reel__meter b{
  position:absolute; inset:0 auto 0 0; width:8%;
  background:var(--accent);
}

/* ---------- ЗАЯВКА ---------- */
.lead{
  display:grid; grid-template-columns:1fr .95fr; gap:var(--s5) var(--s6);
  padding:var(--s6) var(--pad) var(--s7);
  align-items:start;
}
.lead__title{
  margin-top:var(--s3);
  font-size:clamp(2rem,3.6vw,3.4rem); line-height:.98; letter-spacing:-.03em;
}
.lead__sub{ margin-top:var(--s3); max-width:42ch; color:var(--t2); text-wrap:balance; }

.lead__contacts{ padding-top:clamp(0px,3vw,54px); }

.lead__logo{
  width:clamp(220px,28vw,340px); height:auto;
  margin:0 0 var(--s3);
}
.lead__phone{
  display:inline-block;
  font-size:clamp(2rem,3.4vw,3.4rem); font-weight:300; letter-spacing:-.03em;
  line-height:1; position:relative;
}
.lead__phone::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 520ms var(--e);
}
.lead__phone:hover::after{ transform:scaleX(1); }
.lead__hours{ margin-top:16px; font-size:13px; color:var(--t3); }

.lead__act{
  margin-top:var(--s4);
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
}

.lead__ways{ margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--hair); }
.lead__links{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
.lead__mail{
  display:inline-block; margin-top:var(--s3);
  font-size:14px; color:var(--t2); position:relative;
}
.lead__mail::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 520ms var(--e);
}
.lead__mail:hover{ color:var(--t1); }
.lead__mail:hover::after{ transform:scaleX(1); }

/* ---------- подвал ---------- */
.ftr{ padding:var(--s5) var(--pad) var(--s4); border-top:1px solid var(--hair); }
.ftr__row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); }
.ftr__mark{ font-size:15px; letter-spacing:.16em; }
.ftr__logo{
  width:clamp(170px,19vw,240px); height:auto;
}
.ftr__tel{ font-size:clamp(20px,2.2vw,30px); font-weight:300; letter-spacing:-.02em; }

.ftr__grid{
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4) var(--s5);
}
.ftr__col{ display:flex; flex-direction:column; gap:10px; }
.ftr__col .label{ margin-bottom:6px; }
.ftr__col a,.ftr__col span{ font-size:14px; color:var(--t2); max-width:100%; }
.ftr__col a{ position:relative; width:max-content; transition:color 320ms var(--e); }
.ftr__col a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 520ms var(--e);
}
.ftr__col a:hover{ color:var(--t1); }
.ftr__col a:hover::after{ transform:scaleX(1); }

/* ---------- вход ---------- */
.rise{ opacity:0; transform:translateY(28px); filter:blur(14px); }
.is-in .rise,
.rise.is-in{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity 900ms var(--e) var(--d,0ms),
             transform 900ms var(--e) var(--d,0ms),
             filter 900ms var(--e) var(--d,0ms);
}

/* ---------- планшет ---------- */
@media (max-width:1080px){
  .work__head{ grid-template-columns:1fr; gap:var(--s3); }
  .serv__head{ grid-template-columns:1fr; gap:var(--s3); }
  .serv__body{ grid-template-columns:1fr; gap:var(--s5); }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .tile--tall{ grid-row:span 1; min-height:340px; }
  .tile--flat{ grid-column:span 2; }
  .fleet{ grid-template-columns:1fr; }
  .fleet__media img{ min-height:46svh; }
  .terms{ grid-template-columns:1fr; }
  .reel__head{ grid-template-columns:1fr; gap:var(--s3); }
  .lead{ grid-template-columns:1fr; gap:var(--s4); }
  .lead__form{ padding-top:0; }
  .hero__copy{ max-width:min(52ch,86vw); }
  .hdr__nav{ display:none; }
}

/* ---------- мобильный ---------- */
@media (max-width:720px){
  .hero{ height:230vh; }
  /* Все слои героя были абсолютными и на невысоком экране наезжали друг
     на друга. На телефоне раскладываем их колонкой: логотип, текст, кнопка,
     плашки — каждому своя полоса. */
  .hero__media{ display:flex; flex-direction:column; }
  .hero__wordmark{ display:none; }
  .hero__canvas{ position:absolute; inset:0; }
  .hero__veil{ z-index:1; }

  .hero__badge{
    position:relative; z-index:2;
    left:auto; right:auto; top:auto;
    width:min(320px,72vw); margin:clamp(74px,11vh,104px) auto 0;
  }

  .hero__copy{
    position:relative; z-index:2;
    left:auto; right:auto; bottom:auto;
    margin-top:auto; padding:0 var(--pad) clamp(24px,4vh,40px); max-width:none;
  }
  .hero__act{ margin-top:var(--s3); gap:14px; flex-wrap:wrap; }
  .hero__calm{ white-space:normal; }

  /* Плашки появляются позже, когда текст уже ушёл вверх, поэтому делят
     с ним нижнюю полосу и не отжимают кнопку от края экрана. */
  .hero__cards{
    position:absolute; z-index:3;
    left:var(--pad); right:var(--pad); bottom:clamp(20px,3vh,32px);
    align-items:stretch; gap:8px;
  }
  /* Плашки выровнены по верху и одинаковы по ритму: цифра, под ней подпись
     в одну-две строки. Фото в третьей на телефоне мельчит — убираем. */
  .card,.card--wide,.card--photo{
    width:auto; flex:1 1 0; padding:14px 12px; border-radius:14px;
    display:flex; flex-direction:column; justify-content:flex-start;
  }
  .card--photo img{ display:none; }
  .card b{ font-size:clamp(19px,5.6vw,25px); line-height:1; }
  .card__cap{
    margin-top:8px; font-size:9.5px; letter-spacing:.1em; line-height:1.5;
    color:rgba(14,16,18,.55);
  }
  .card__note{ display:none; }
  .card--photo img{ height:64px; margin-bottom:12px; }
  .fleet__note br{ display:none; }
  /* Ручные переносы рассчитаны на широкий экран: на телефоне они дробят
     заголовки на лишние строки, поэтому отдаём перенос браузеру. */
  h2 br,.stn__card h3 br,.final__title br,.lead__title br{ display:none; }
  .hero__rail{ display:none; }
  .route{ height:300vh; }
  .route__rail{ display:none; }
  /* Кадр горизонтальный: на вертикальном экране обрезка съедала машину,
     поэтому показываем сцену целиком и подтягиваем её, чтобы не оставалось
     половины пустого экрана. */
  .route__video{ object-fit:contain; transform:scale(1.24); }
  .stn__card{ right:var(--pad); width:auto; top:92px; padding:18px 18px 20px; }
  .stn__spec{ display:none; }
  .stn__note{ left:var(--pad); right:var(--pad); width:auto; max-width:none; }
  .final__act{ gap:14px; }
  .hero__veil{
    -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 62%);
    mask-image:linear-gradient(to top,#000 0%,transparent 62%);
  }
  .grid{ grid-template-columns:1fr; }
  .tile--flat{ grid-column:span 1; }
  .spec{ grid-template-columns:1fr; }
  .serv__list{ grid-template-columns:1fr; gap:var(--s3); }
  .reel{ height:auto !important; min-height:0; padding:var(--s6) 0 var(--s5); }
  .reel__pin{ position:static; height:auto; padding:0; gap:var(--s3); }
  .reel__view{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .reel__track{ transform:none !important; }
  .reel__item{ scroll-snap-align:center; }
  .reel__item,.reel__item:nth-child(3n+2),.reel__item:nth-child(4n+3){ width:78vw; }
  .reel__item img,.reel__item:nth-child(3n+2) img{ height:56vw; }
  /* Меню на узком экране скрыто, поэтому в шапке остаётся прямой звонок:
     иначе с телефона до контактов пришлось бы листать всю страницу. */
  .hdr{ padding:16px var(--pad); gap:12px; }
  .hdr__tel{ display:none; }
  .hdr__side .btn--sm{ min-height:44px; padding:0 16px; font-size:13px; white-space:nowrap; }
  .hdr .hdr__cta{ display:none; }
  .hdr .hdr__quick{ display:flex; }
  .hdr__mark{ font-size:13px; letter-spacing:.1em; }
  .ftr__row{ flex-direction:column; align-items:flex-start; gap:10px; }
  .ftr__grid{ grid-template-columns:1fr; gap:var(--s4); }
}

/* ---------- покой ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:1ms !important; transition-delay:0ms !important; animation-duration:1ms !important; }
  .rise{ opacity:1; transform:none; filter:none; }
  .card{ opacity:1; transform:none; filter:none; }
  .hero{ height:100svh; }

  /* маршрут разворачивается в статичный список: ни один шаг не теряется */
  .route{ height:auto; }
  .route__media{ position:static; height:auto; }
  .route__video{ height:clamp(260px,44vh,520px); }
  .route__stations{
    position:static; padding:var(--s5) var(--pad) 0;
    display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4) var(--s5);
  }
  .stn{ position:static; }
  .stn__card,.stn__spec,.stn__note,.stn .final{
    position:static; opacity:1; transform:none; filter:none;
    width:auto; max-width:none;
  }
  .stn__spec{ margin-top:12px; display:flex; gap:var(--s4); }
  .stn__note{ margin-top:12px; }
  .final__title{ color:var(--t1); }
  .route__rail{ display:none; }

  .reel{ height:auto !important; }
  .reel__pin{ position:static; height:auto; }
  .reel__view{ overflow-x:auto; }
  .reel__track{ transform:none !important; }
}