/* ============================================================
   VIPAVTO — дизайн-система «Купе»
   Тёмный первый экран продаёт, светлое тело объясняет.
   Шрифты: Prata (антиква, заголовки) + Manrope (гротеск, текст)
   ============================================================ */

:root{
  /* светлая зона — тело страницы */
  --paper:#FAF8F4;
  --card:#FFFFFF;
  --card-2:#F3EFE7;
  --ink:#16130F;
  --ink-2:#5A5148;
  /* #8B8175 давал 3.6:1 на бумаге — ниже нормы для 13-14px (нужно 4.5).
     Числа проверены расчётом контраста, не на глаз. */
  --ink-3:#736A5D;
  --line:#E4DCCD;
  --line-2:#D3C8B4;
  --gold:#8A6B32;
  --gold-soft:#F0E7D5;

  /* тёмная зона — герой, подвал, акцентные полосы */
  --night:#0B0A09;
  --night-2:#14110E;
  --night-3:#1E1A15;
  --night-ink:#F4EFE6;
  --night-ink-2:#B0A796;
  /* приглушённый на тёмном: было #7C7364 = 4.2:1, тоже ниже нормы */
  --night-ink-3:#8E8474;
  --night-line:#2C261F;
  --champagne:#C8A96A;
  --champagne-2:#DFC792;

  --ok:#3F6B48;
  --err:#A8412A;

  --f-display:"Prata",Georgia,"Times New Roman",serif;
  --f-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;

  --page:1240px;
  --gut:clamp(20px,4vw,48px);
  --r:2px;
  --shadow:0 1px 2px rgba(22,19,15,.04),0 8px 28px rgba(22,19,15,.06);
  --shadow-lift:0 2px 6px rgba(22,19,15,.06),0 18px 46px rgba(22,19,15,.12);

  /* Одна кривая на весь сайт. Резкий старт, длинное затухание — движение
     читается как «дорогое», в отличие от линейного. */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Плёночное зерно поверх тёмных зон. Ровная заливка на большом экране
     выглядит дешёвым пластиком; зерно даёт глубину и прячет полосы
     градиента. SVG-шум весит ~600 байт и не требует картинки. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

/* Выделение текста мышью — тоже часть фирменного стиля. Синий системный
   прямоугольник на золотисто-чёрной странице выглядит чужим. */
::selection{background:var(--gold-soft);color:var(--ink)}
.night ::selection,.foot ::selection,.hero ::selection{background:rgba(200,169,106,.3);color:var(--night-ink)}

/* Зерно кладём одним правилом на все тёмные поверхности. pointer-events:none
   обязателен: иначе плёнка перехватила бы клики по кнопкам под ней. */
.hero::after,.night::after,.foot::after,.cta-band::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:var(--grain);
  opacity:.05;
  mix-blend-mode:overlay;
}
.hero,.night,.foot,.cta-band{position:relative}
/* содержимое тёмных секций должно лежать НАД плёнкой */
.night>.wrap,.foot>.wrap,.cta-band>.wrap{position:relative;z-index:2}

h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}

h1,h2{font-family:var(--f-display);letter-spacing:-.01em;line-height:1.08}
h3,h4{font-family:var(--f-body);font-weight:700;line-height:1.25}

a{color:inherit;text-decoration:none}
/* balance режет заголовки по смыслу, pretty — не даёт абзацу закончиться
   одиноким словом. Браузеры без поддержки просто игнорируют. */
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r)}
.night :focus-visible{outline-color:var(--champagne)}

.wrap{max-width:var(--page);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

.eyebrow{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:12px;
  /* Надглавие — отдельная строка, а не часть заголовка. Без отступа оно
     прилипало к h1 на всех внутренних страницах: «Представительские · до 3
     пассажиров» шло вплотную к названию автомобиля. */
  margin-bottom:15px;
}

/* Там, где надглавие лежит в колонке с gap, отступ уже посчитан контейнером —
   иначе он удвоится. Держать список рядом с самим правилом. */
.sec-head .eyebrow,
.prose .eyebrow,
.lead-copy .eyebrow,
.hero-in .eyebrow{margin-bottom:0}

/* Короткая черта перед надглавием. Приём книжной вёрстки: даёт строке
   опору и связывает её со следующим заголовком. */
.eyebrow::before{
  content:"";
  width:26px;
  height:1px;
  background:currentColor;
  opacity:.55;
  flex:0 0 26px;
}

.night .eyebrow{color:var(--champagne)}

.lede{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink-2);line-height:1.6;max-width:62ch}

.tnum{font-variant-numeric:tabular-nums}

/* ---------- Шапка ---------- */

.top{
  position:absolute;
  top:0;left:0;right:0;
  z-index:40;
  padding:22px 0;
}

.top-in{display:flex;align-items:center;gap:26px}

.brand{
  font-family:var(--f-display);
  font-size:21px;
  letter-spacing:.04em;
  color:var(--night-ink);
  white-space:nowrap;
}

.brand span{color:var(--champagne)}

.nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500}
.nav a{color:var(--night-ink-2);transition:color .18s}
.nav a:hover{color:var(--champagne)}

.top-tel{
  font-size:17px;
  font-weight:700;
  color:var(--night-ink);
  white-space:nowrap;
  letter-spacing:.01em;
}

.top-tel:hover{color:var(--champagne)}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger i{display:block;width:24px;height:2px;background:var(--night-ink);margin:5px 0}

/* шапка на светлых внутренних страницах */
.top.solid{position:sticky;top:0;background:var(--night);border-bottom:1px solid var(--night-line)}

/* Шапка, возвращающаяся на главной.
   На первом экране она прозрачная и лежит поверх фотографии. Стоит уехать
   ниже героя — и на странице не остаётся ни меню, ни телефона; человек,
   решившийся звонить на середине автопарка, вынужден мотать вверх.
   Класс навешивает JS, когда первый экран уходит из виду. */
.top--stuck{
  position:fixed;
  top:0;
  padding:12px 0;
  background:rgba(11,10,9,.92);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--night-line);
  animation:drop .34s var(--ease) both;
}

@keyframes drop{from{transform:translateY(-101%)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  .top--stuck{animation:none}
}

/* ---------- Первый экран ---------- */

.hero{
  position:relative;
  background:var(--night);
  color:var(--night-ink);
  min-height:min(94vh,860px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}

.hero-media{position:absolute;inset:0;z-index:0}

.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 62%;
  filter:saturate(.8) contrast(1.08) brightness(.86);
  transform:scale(1.02);
}

.hero-media::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,10,9,.88) 0%,rgba(11,10,9,.42) 34%,rgba(11,10,9,.72) 74%,var(--night) 100%),
    linear-gradient(96deg,rgba(11,10,9,.88) 0%,rgba(11,10,9,.36) 62%,rgba(11,10,9,.1) 100%),
    radial-gradient(120% 90% at 50% 42%,transparent 38%,rgba(11,10,9,.5) 100%);
}

.hero-in{position:relative;z-index:2;padding-top:150px;padding-bottom:62px;width:100%}

/* Текст лежит на фотографии, а фотография у каждого экрана своя по яркости.
   Мягкая тень — страховка читаемости там, где под буквой оказался блик. */
.hero-in h1,.hero-qual,.hero-price,.hero .eyebrow{text-shadow:0 1px 20px rgba(11,10,9,.6)}

.hero h1{
  font-size:clamp(33px,6.1vw,66px);
  color:var(--night-ink);
  margin:18px 0 0;
  max-width:17ch;
}

.hero h1 em{font-style:normal;color:var(--champagne)}

.hero-qual{
  margin-top:22px;
  font-size:clamp(15px,1.8vw,17.5px);
  color:var(--night-ink-2);
  max-width:52ch;
  line-height:1.55;
}

.hero-qual b{color:var(--night-ink);font-weight:600}

.hero-price{
  margin-top:26px;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}

.hero-price .big{
  font-family:var(--f-display);
  font-size:clamp(26px,3.4vw,36px);
  color:var(--champagne);
}

.hero-price .note{font-size:14.5px;color:var(--night-ink-2)}

/* Подсказка прокрутки. Нужна потому, что первый экран занимает почти всю
   высоту и на ноутбуке кажется законченной страницей. */
.scroll-cue{
  position:absolute;
  z-index:2;
  right:var(--gut);
  bottom:26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--night-ink-2);
}

.scroll-cue i{
  display:block;
  width:1px;
  height:42px;
  background:linear-gradient(180deg,transparent,var(--champagne));
  animation:cue 2.4s var(--ease) infinite;
  transform-origin:top;
}

@keyframes cue{
  0%{transform:scaleY(.25);opacity:.35}
  55%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(.25);opacity:.35}
}

.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}

/* ---------- Кнопки ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--f-body);
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  padding:15px 30px;
  border:1px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),transform .22s var(--ease),
             box-shadow .22s var(--ease);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.btn:active{transform:translateY(1px)}

/* Золотая кнопка — главная точка конверсии, ей позволено чуть больше.
   Блик проходит по ней один раз при наведении: это читается как отблеск на
   полированном металле и стоит один псевдоэлемент. */
.btn-gold{
  background:linear-gradient(135deg,var(--champagne) 0%,var(--champagne-2) 52%,var(--champagne) 100%);
  color:#14110C;
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 6px 20px rgba(200,169,106,.16);
}
.btn-gold:hover{box-shadow:0 1px 0 rgba(255,255,255,.44) inset,0 10px 30px rgba(200,169,106,.28)}

.btn-gold::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:-60%;
  width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);
  opacity:0;
  pointer-events:none;
}
.btn-gold:hover::after{animation:sheen .72s var(--ease) 1}

@keyframes sheen{
  from{left:-60%;opacity:.9}
  to{left:120%;opacity:0}
}

.btn-ghost{border-color:rgba(244,239,230,.34);color:var(--night-ink)}
.btn-ghost:hover{border-color:var(--champagne);color:var(--champagne)}

/* Тёмная кнопка на светлых страницах. Плоская заливка выглядит как элемент
   формы; чуть заметный градиент и золотая кромка при наведении делают её
   частью того же набора, что и золотая кнопка на тёмном. */
.btn-dark{
  background:linear-gradient(180deg,#221D16 0%,var(--ink) 100%);
  color:var(--paper);
  box-shadow:0 1px 0 rgba(244,239,230,.08) inset;
}
.btn-dark:hover{background:linear-gradient(180deg,#2E271D 0%,#1B1712 100%);border-color:var(--gold)}

.btn-outline{border-color:var(--line-2);color:var(--ink)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}

.btn-wide{width:100%}

/* ---------- Мессенджеры ----------
   Кнопка рисуется только если в content.py у неё есть ссылка (build.messengers).
   По умолчанию оформление под ТЁМНЫЙ фон — герой, нижний баннер, подвал;
   на светлых страницах ряду добавляется .msg-light. */

.msg-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.msg-tight{margin-top:12px}
.msg-foot{margin-top:14px}

.btn-msg{
  padding:12px 20px;
  font-size:14px;
  background:rgba(244,239,230,.05);
  border-color:rgba(244,239,230,.28);
  color:var(--night-ink);
}
.btn-msg:hover{background:rgba(200,169,106,.10);border-color:var(--champagne);color:var(--champagne)}

.msg-i{width:19px;height:19px;flex:0 0 19px}

.msg-light .btn-msg{background:transparent;border-color:var(--line-2);color:var(--ink)}
.msg-light .btn-msg:hover{background:rgba(138,107,50,.06);border-color:var(--gold);color:var(--gold)}

/* Нижний баннер: звонок и мессенджеры одной колонкой справа от заголовка */
.cta-act{display:flex;flex-direction:column;align-items:flex-start}
.cta-btns{display:flex;gap:13px;flex-wrap:wrap}

/* ---------- Секции ---------- */

.sec{padding:clamp(56px,8vw,104px) 0}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(30px,4vw,48px)}
.sec-head h2{font-size:clamp(26px,4.1vw,44px)}

.night{background:var(--night);color:var(--night-ink)}

/* Волосяная золотая нить по верхней кромке КАЖДОЙ тёмной секции.
   ⚠️ НЕ через соседний селектор (`.sec + .sec.night`): блок заявки лежит
   ПОСЛЕ </main>, его сосед — сам <main>, и такое правило не срабатывало
   ни на одной странице — линии не было нигде.
   Над блоком доверия нить тоже нужна (решение владельца 02.09.2026): она
   отделяет его от первого экрана. Прижималась она раньше не из-за нити, а
   из-за нулевого верхнего отступа секции — отступ теперь есть. */
.sec.night{box-shadow:inset 0 1px 0 rgba(200,169,106,.18)}
.night h2,.night h3{color:var(--night-ink)}
.night .lede{color:var(--night-ink-2)}
.soft{background:var(--card-2)}

/* ---------- Автопарк ---------- */

.fleet{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  gap:clamp(16px,2vw,26px);
}

.car{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .25s,border-color .25s,transform .25s;
}

.car:hover{box-shadow:var(--shadow-lift);border-color:var(--line-2);transform:translateY(-4px)}

/* Золотая нить, которая набегает по верхней кромке карточки. Направление
   слева направо совпадает с чтением, поэтому жест не отвлекает. */
.car::before{
  content:"";
  position:absolute;
  z-index:3;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--gold),var(--champagne-2));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .42s var(--ease);
}
.car:hover::before{transform:scaleX(1)}

.car-shot{
  position:relative;
  aspect-ratio:4/3;
  background:var(--night-2);
  overflow:hidden;
}

.car-shot picture{display:block;width:100%;height:100%}
.car-shot img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease),filter .35s var(--ease);
  filter:saturate(.88) contrast(1.05);
}

/* ⚠️ Здесь был баг: правило зума стояло БЕЗ префикса :hover, поэтому все
   снимки были постоянно увеличены на 3.5%, а наведение не давало ничего.
   Зум нужен только при наведении — иначе кадр всегда обрезан зря. */
.car:hover .car-shot img{transform:scale(1.045);filter:saturate(1) contrast(1.06)}

.car-shot::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,10,9,.06) 0%,rgba(11,10,9,.02) 46%,rgba(11,10,9,.5) 100%);
}

.car-tag{
  position:absolute;
  z-index:2;
  left:14px;top:14px;
  background:rgba(11,10,9,.76);
  backdrop-filter:blur(6px);
  color:var(--champagne);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 11px;
  border-radius:var(--r);
}

.car-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:13px;flex:1}
.car-body h3{font-size:19px}
.car-seats{font-size:13.5px;color:var(--ink-3);margin-top:-6px}

.car-prices{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:13px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:auto;
}

.car-price{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px}
.car-price span{color:var(--ink-2)}
.car-price b{font-size:17px;font-weight:700;color:var(--ink);white-space:nowrap}

/* ---------- Услуги ---------- */

.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}

.svc-item{
  background:var(--paper);
  padding:clamp(24px,3vw,34px);
  display:flex;
  flex-direction:column;
  gap:11px;
  transition:background .22s;
  min-height:190px;
}

.svc-item{position:relative}
.svc-item:hover{background:var(--card)}

.svc-item::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:var(--gold);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .34s var(--ease);
}
.svc-item:hover::before{transform:scaleY(1)}
.svc-item h3{font-size:18.5px}
.svc-item p{font-size:15px;color:var(--ink-2);line-height:1.55}

.svc-price{
  margin-top:auto;
  font-size:14px;
  color:var(--gold);
  font-weight:700;
  letter-spacing:.02em;
}

.svc-item .arrow{color:var(--gold);font-size:15px;transition:transform .22s;display:inline-block}
.svc-item:hover .arrow{transform:translateX(4px)}

/* ---------- Доверие ---------- */

.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:clamp(22px,3vw,42px)}

.trust-item{display:flex;flex-direction:column;gap:9px}

.trust-n{
  font-family:var(--f-display);
  font-size:clamp(32px,4.4vw,46px);
  color:var(--champagne);
  line-height:1;
}

.trust-item h3{font-size:16.5px;color:var(--night-ink)}
.trust-item p{font-size:14.5px;color:var(--night-ink-2);line-height:1.55}

/* ---------- Порядок работы ---------- */

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:clamp(20px,2.6vw,34px);counter-reset:s}

.step{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:22px;
  border-top:2px solid var(--line-2);
  counter-increment:s;
  position:relative;
}

/* Первые 44px верхней линейки — золотые: взгляд цепляется за начало шага. */
.step::after{
  content:"";
  position:absolute;
  top:-2px;left:0;
  width:44px;
  height:2px;
  background:var(--gold);
}

.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--f-display);
  font-size:22px;
  line-height:1;
  color:var(--gold);
  letter-spacing:.06em;
}

.step h3{font-size:17px}
.step p{font-size:14.8px;color:var(--ink-2);line-height:1.55}

/* ---------- Форма ---------- */

.lead{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}

.lead-copy{display:flex;flex-direction:column;gap:16px}
.lead-copy h2{font-size:clamp(25px,3.5vw,38px)}

.lead-tel{
  font-family:var(--f-display);
  font-size:clamp(24px,3vw,32px);
  color:var(--champagne);
  display:inline-block;
  margin-top:6px;
}

.lead-tel:hover{color:var(--champagne-2)}

.form{
  background:var(--night-2);
  border:1px solid var(--night-line);
  border-radius:var(--r);
  padding:clamp(24px,3vw,34px);
  display:flex;
  flex-direction:column;
  gap:15px;
}

.field{display:flex;flex-direction:column;gap:7px}

.field label{font-size:13px;font-weight:600;color:var(--night-ink-2);letter-spacing:.02em}

.field input,.field select,.field textarea{
  font-family:var(--f-body);
  font-size:16px;
  color:var(--night-ink);
  background:var(--night);
  border:1px solid var(--night-line);
  border-radius:var(--r);
  padding:14px 15px;
  width:100%;
  transition:border-color .2s;
}

.field input::placeholder{color:#847B6C}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--champagne);outline:none}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--champagne) 50%),linear-gradient(135deg,var(--champagne) 50%,transparent 50%);background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select option{background:var(--night-2);color:var(--night-ink)}

.consent{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;font-size:12.8px;color:var(--night-ink-2);line-height:1.5}
.consent input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--champagne);cursor:pointer}
.consent a{color:var(--champagne);text-decoration:underline;text-underline-offset:2px}

.form-note{font-size:12.5px;color:var(--night-ink-3);line-height:1.5}
.form-msg{font-size:14.5px;padding:12px 14px;border-radius:var(--r);display:none}
.form-msg.ok{display:block;background:rgba(63,107,72,.16);color:#9CC79F;border:1px solid #3F6B48}
.form-msg.err{display:block;background:rgba(168,65,42,.16);color:#E09079;border:1px solid #A8412A}

/* ---------- Подвал ---------- */

.foot{background:var(--night);color:var(--night-ink-2);padding:clamp(48px,6vw,76px) 0 34px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(24px,3vw,44px)}
.foot h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);margin-bottom:14px;font-weight:700}
.foot ul{display:flex;flex-direction:column;gap:9px}
.foot a:hover{color:var(--champagne)}
.foot-brand{font-family:var(--f-display);font-size:23px;color:var(--night-ink);margin-bottom:12px}
.foot-brand span{color:var(--champagne)}

.foot-bottom{
  margin-top:clamp(32px,4vw,54px);
  padding-top:22px;
  border-top:1px solid var(--night-line);
  display:flex;
  flex-wrap:wrap;
  gap:14px 30px;
  justify-content:space-between;
  font-size:12.8px;
  color:var(--night-ink-3);
}

/* ---------- Хлебные крошки ---------- */

.crumbs{font-size:13px;color:var(--ink-3);padding:26px 0 0;display:flex;gap:9px;flex-wrap:wrap}
.crumbs a:hover{color:var(--gold)}
.crumbs span{color:var(--line-2)}

/* ---------- Внутренние страницы ---------- */

.page-head{padding:clamp(34px,5vw,58px) 0 clamp(28px,4vw,44px);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(28px,4.6vw,50px);margin-bottom:16px}

.prose{max-width:70ch;display:flex;flex-direction:column;gap:18px}
.prose h2{font-size:clamp(22px,3vw,31px);margin-top:22px}
.prose h3{font-size:19px;margin-top:14px}
.prose p{color:var(--ink-2);line-height:1.7}
.prose ul{display:flex;flex-direction:column;gap:9px;padding-left:0}
.prose ul li{position:relative;padding-left:22px;color:var(--ink-2);line-height:1.6}
.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:1px;background:var(--gold)}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
/* кнопка внутри текстового блока — всё ещё кнопка: подчёркивание и золото
   ссылки к ней не относятся */
.prose a.btn{text-decoration:none}
.prose a.btn-dark{color:var(--paper)}
.prose a.btn-outline{color:var(--ink)}
.prose a.btn-outline:hover{color:var(--gold)}
.prose a.btn-gold{color:#14110C}
.prose strong{color:var(--ink);font-weight:700}

/* grid и flex по умолчанию дают потомкам min-width:auto —
   из-за этого широкая таблица растягивает колонку и ломает всю страницу */
.split>*,.lead>*,.wrap>*{min-width:0}

.tbl-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  max-width:100%;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--r);
}

/* подсказка, что таблицу можно листать вбок */
.tbl-scroll{position:relative}
.tbl-scroll::after{
  content:"";
  position:absolute;
  top:1px;right:1px;bottom:1px;
  width:34px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--card) 86%);
  opacity:0;
  transition:opacity .2s;
}
.tbl-scroll.can-scroll::after{opacity:1}

.tbl-hint{
  display:none;
  font-size:12.5px;
  color:var(--ink-3);
  margin-top:9px;
  letter-spacing:.01em;
}
.tbl-scroll.can-scroll .tbl-hint{display:block}
table.price{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
table.price th{text-align:left;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:15px 18px;border-bottom:1px solid var(--line-2);white-space:nowrap}
table.price td{padding:15px 18px;border-bottom:1px solid var(--line);color:var(--ink-2)}
table.price tbody tr:last-child td{border-bottom:none}
table.price td:first-child{color:var(--ink);font-weight:600}
table.price td.n{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700;color:var(--ink)}

.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,58px);align-items:start}
/* Ячейка галереи — ссылка на файл (.shot), внутри неё <picture>. Поэтому
   правила сетки висят на .gal>*, а не на picture: иначе после добавления
   обёртки мозаика рассыпалась бы. */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.gal>*{
  display:block;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r);
  cursor:zoom-in;
}
.gal picture{display:block;height:100%}
.gal img{
  aspect-ratio:4/3;
  object-fit:cover;
  width:100%;
  filter:saturate(.9);
  transition:transform .5s var(--ease),filter .35s var(--ease);
}
.gal>*:hover img{transform:scale(1.05);filter:saturate(1)}
.gal>a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Значок лупы: без него снимок не выглядит нажимаемым — на телефоне
   курсора нет, и cursor:zoom-in там не подсказывает ничего. */
.gal>a::after{
  content:"";
  position:absolute; right:8px; bottom:8px;
  width:30px; height:30px; border-radius:50%;
  background:rgba(11,10,9,.55) center/15px 15px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  opacity:.85;
  transition:opacity .25s var(--ease);
  pointer-events:none;
}
.gal>a:hover::after{opacity:1}

/* Мозаика на странице автомобиля: первый кадр — крупный, остальные миниатюрами.
   Четыре одинаковых квадратика превращают представительский класс в
   объявление на доске; главный снимок обязан быть главным по размеру. */
.gal-mosaic{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.gal-mosaic>*:first-child{grid-column:span 2;grid-row:span 2}
.gal-mosaic>*,.gal-mosaic picture{display:flex}
.gal-mosaic picture{flex:1;min-width:0}
.gal-mosaic img{height:100%;aspect-ratio:auto;min-height:0}
.gal-mosaic>*:not(:first-child) img{aspect-ratio:4/3}

@media (max-width:520px){
  /* в две колонки крупный кадр занял бы всю ширину и мозаика пропала бы —
     на телефоне просто ровная сетка */
  .gal-mosaic>*:first-child{grid-column:auto;grid-row:auto}
  .gal-mosaic img{aspect-ratio:4/3}
}

.cta-band{background:var(--night-2);border-top:1px solid var(--night-line);border-bottom:1px solid var(--night-line)}
.cta-in{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;padding-top:clamp(30px,4vw,50px);padding-bottom:clamp(30px,4vw,50px)}
.cta-in h2{font-size:clamp(22px,3vw,32px);color:var(--night-ink);max-width:22ch}

/* ---------- Появление при прокрутке ---------- */

/* ⚠️ Прятать блок можно ТОЛЬКО когда есть кому его показать. Класс .js
   ставит строчка в <head>; если скрипт не выполнился (ошибка, блокировщик,
   старый браузер) — класса нет, и .rise не скрывает ничего. Иначе одна
   опечатка в main.js оставила бы белую страницу. */
.js .rise{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rise.seen{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  .car:hover{transform:none}
  .car-shot img,.svc-item .arrow{transition:none}
  /* бесконечная и декоративная анимация — первое, что нужно выключить */
  .scroll-cue i{animation:none;transform:scaleY(1)}
  .btn-gold:hover::after{animation:none}
  .car::before,.svc-item::before{transition:none}
  .gal>*:hover img{transform:none}
}

/* ---------- Мобильные ---------- */

@media (max-width:980px){
  .lead,.split{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  body{font-size:16px}
  .scroll-cue{display:none}
  table.price{min-width:480px;font-size:14px}
  table.price th,table.price td{padding:12px 13px}
  .nav{display:none}
  .nav.open{
    display:flex;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    gap:0;
    background:var(--night-2);
    border-top:1px solid var(--night-line);
    padding:8px 0;
    margin:0;
  }
  .nav.open a{padding:13px var(--gut);border-bottom:1px solid var(--night-line)}
  .burger{display:block;margin-left:auto;order:3}
  .top-tel{font-size:15px;order:2;margin-left:auto}
  .top{padding:16px 0}
  .hero-in{padding-top:104px;padding-bottom:42px;text-align:center}

  /* На широком экране текст героя стоит колонкой слева — так он не наезжает
     на автомобиль. На телефоне машина за текстом, а не рядом, и левое
     выравнивание оставляло рваный правый край при трёх строках заголовка.
     Здесь центр. */
  .hero h1,.hero-qual{max-width:none;margin-left:auto;margin-right:auto}
  .hero-price,.hero-cta,.hero .msg-row{justify-content:center}

  /* Черта перед надглавием рассчитана на ОДНУ строку. Длинная строка
     «Самара · встречаем гостей города · круглосуточно» на телефоне
     переносится, и вторая строка уезжала вправо от черты — блок выглядел
     сбитым. На узком экране черту убираем. */
  .hero .eyebrow{justify-content:center;display:block}
  .hero .eyebrow::before{display:none}

  /* На телефоне затемнение съедало фотографию целиком: горизонтальный
     градиент рассчитан на широкий экран, где текст занимает левую треть.
     Здесь текст во всю ширину, поэтому оставляем только вертикальный
     градиент и даём кадру высоту — машину должно быть видно. */
  .hero{min-height:78vh}
  .hero-media img{object-position:center 55%}
  .hero-media::after{
    background:linear-gradient(180deg,
      rgba(11,10,9,.9) 0%,
      rgba(11,10,9,.5) 26%,
      rgba(11,10,9,.62) 58%,
      rgba(11,10,9,.93) 86%,
      var(--night) 100%);
  }
  .hero-cta .btn{flex:1 1 100%}
  .msg-row{width:100%}
  /* Три мессенджера в ряд, а не «два плюс один снизу»: при делении по 50%
     третья кнопка оставалась одна и ряд выглядел сбитым. Подписи короткие,
     на 390px помещаются втроём. */
  .msg-row .btn-msg{flex:1 1 0;min-width:0;padding:12px 8px;font-size:13px;gap:7px}
  .msg-row .btn-msg .msg-i{width:17px;height:17px;flex:0 0 17px}
  .cta-act{width:100%;align-items:stretch}
  .cta-btns{width:100%}
  .cta-btns .btn{flex:1 1 100%}
  .foot-grid{grid-template-columns:1fr}
  .cta-in{flex-direction:column;align-items:flex-start}
}

/* ─── видео ──────────────────────────────────────────────────────────────
   Ролики стоят там, где принимают решение: автопарк — на главной, машина —
   на своей странице. Отдельной страницы «Видео» нет намеренно: на такую
   страницу не заходят, и материал в ней умирает. */
.vid{margin:0}
.vid video{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--night);
}
.vid-cap{margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-3)}

/* Вертикальный ролик. На компьютере — узкой колонкой: растянутый во всю
   ширину, он превращает страницу в почтовый ящик. Потолок по высоте экрана
   нужен и на телефоне: 9:16 во всю ширину даёт полотно выше экрана, и
   человек теряет из виду и заголовок, и кнопку заказа. */
.vid-tall{max-width:360px}
/* Потолок по высоте экрана. Ужимаясь, ролик становится уже своей колонки —
   и без этого правила уезжал бы от левого края содержимого. Центрируем
   только на телефоне, где колонка равна ширине экрана. */
.vid-tall video{max-height:74vh;width:auto;max-width:100%;margin-inline:0}

/* Ролик рядом с текстом. Вертикаль оставляет сбоку пустое место — его и
   занимает содержательный блок, иначе секция читается как дыра. */
.vid-split{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:clamp(26px,4vw,54px);
  /* По верхнему краю, а не по центру: при центрировании заголовок уезжал
     на середину ролика, и блок читался как две несвязанные вещи. */
  align-items:start;
}
/* На телефоне потолок по высоте экрана СНЯТ. Мобильный браузер прячет
   адресную строку при прокрутке — высота окна меняется на ходу, вместе с ней
   пересчитывалась высота ролика, и всё под ним ездило вверх-вниз: страница
   «плавала» под пальцем. Высота теперь берётся только из пропорций файла и
   не зависит от экрана вообще. */
@media (max-width:900px){
  .vid-split{grid-template-columns:1fr;gap:26px}
  .vid-tall{max-width:none}
  .vid-tall video{width:100%;max-height:none;margin-inline:0}

}

/* ролик-вступление перед сеткой карточек */
.vid-lead{margin-bottom:clamp(26px,3.5vw,44px)}

/* Планшет. Вертикальный ролик 9:16 во всю ширину 768 px вырастает в 1256 px
   высоты — выше самого экрана, целиком его не видно. На телефоне во всю
   ширину правильно (390 px дают ~700 px), поэтому ограничение включается
   только с 620 px. Ограничиваем ШИРИНОЙ в пикселях, а не высотой в vh:
   vh на телефоне скачет вместе с адресной строкой и страница «плавает». */
@media (min-width:620px) and (max-width:900px){
  .vid-tall{max-width:390px}
}

/* ---------- Просмотр фотографии во весь экран ---------- */

/* Размеры заданы через inset:0 на fixed-слое, а НЕ через vh. На телефоне
   адресная строка прячется и появляется, vh вместе с ней прыгает — именно
   так «плавала» страница с видео. inset:0 привязан к окну и не дёргается. */
.lb{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,7,6,.94);
  opacity:0; visibility:hidden;
  transition:opacity .22s var(--ease),visibility .22s var(--ease);
  overscroll-behavior:contain;
  /* touch-action:none здесь стоять НЕ должно: он отбирает у браузера щипок,
     а именно щипком фотографию и разглядывают. Листание от этого не страдает —
     обработчики пассивные и получают касания в любом случае. Провалиться
     прокруткой на страницу под слоем не даёт замок body.lb-lock. */
  touch-action:auto;
}
.lb.open{opacity:1;visibility:visible}
body.lb-lock{overflow:hidden}

/* Отступы держит обёртка <picture>, а не сам кадр: padding на картинке
   съедал бы её собственные max-width/max-height и на узком экране кадр
   уезжал бы под кнопки. */
.lb-pic{
  display:flex; align-items:center; justify-content:center;
  /* ⚠️ Именно height/width, а не max-*. Проценты у картинки внутри меряются
     от РОДИТЕЛЯ, а высота родителя с max-height остаётся «по содержимому» —
     то есть неопределённой, и max-height:100% у кадра не ограничивает ничего.
     Проверено: на окне 1440×813 снимок 1280×853 вылезал за экран снизу. */
  width:100%; height:100%;
  min-height:0;
  /* Поля = место под кнопки. По умолчанию стрелки стоят по бокам (так на
     всех широких экранах), поэтому боковые поля шире: 12 px отступа плюс
     44 px кнопки плюс зазор. Раньше здесь было 12 px — и на планшете в
     вертикальном положении стрелки лежали прямо на фотографии. */
  padding:60px 68px 60px;
  box-sizing:border-box;
}
.lb-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

/* Круглые кнопки: 44 px — минимальная цель для пальца. */
.lb-btn{
  position:absolute;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:20px; line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.lb-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.lb-btn:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}
.lb-close{top:12px; right:12px; font-size:24px}
.lb-prev{left:12px; top:50%; transform:translateY(-50%)}
.lb-next{right:12px; top:50%; transform:translateY(-50%)}
.lb-btn[hidden]{display:none}

.lb-count{
  position:absolute; left:0; right:0; bottom:20px;
  text-align:center;
  color:var(--night-ink-2);
  font-size:13px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}

/* Пока файл не пришёл — лёгкая пульсация вместо чёрного пятна. */
.lb.loading .lb-img{opacity:.35;transition:opacity .2s var(--ease)}

/* Правило простое: стоя (телефон и планшет вертикально) кадр тянется в
   ШИРИНУ, и место у него надо отнимать сверху-снизу — стрелки уходят вниз,
   под большой палец. Лёжа кадр тянется в ВЫСОТУ, отнимать надо с боков —
   стрелки встают по краям. Ориентация здесь честнее ширины: планшет 768 px
   вертикально вёл себя как «широкий экран», и стрелки лежали на фотографии. */
@media (orientation:portrait){
  .lb-pic{padding:56px 8px 78px}
  .lb-prev,.lb-next{top:auto;bottom:14px;transform:none}
  .lb-prev{left:calc(50% - 84px)}
  .lb-next{right:calc(50% - 84px)}
  .lb-count{bottom:27px}
}

/* Телефон, повёрнутый набок: высоты всего ~360 px, и 120 px полей съедали
   треть экрана — снимок занимал 17% площади вместо 60%+. Здесь поля режем
   до минимума, а всё управление уводим в углы. */
@media (orientation:landscape) and (max-height:560px){
  .lb-pic{padding:8px 58px}
  .lb-close{top:6px;right:6px;width:38px;height:38px;font-size:21px}
  .lb-prev,.lb-next{width:38px;height:38px;top:50%;bottom:auto;transform:translateY(-50%)}
  .lb-prev{left:6px}
  .lb-next{right:6px}
  /* по центру снизу счётчик лёг бы на кадр — уводим в угол */
  .lb-count{left:auto;right:52px;bottom:8px;text-align:right}
}

@media (prefers-reduced-motion:reduce){
  .lb{transition:none}
}