/* ============================================================
   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}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.gal picture{display:block}
.gal picture{overflow:hidden;border:1px solid var(--line);border-radius:var(--r)}
.gal img{
  aspect-ratio:4/3;
  object-fit:cover;
  width:100%;
  filter:saturate(.9);
  transition:transform .5s var(--ease),filter .35s var(--ease);
}
.gal picture:hover img{transform:scale(1.05);filter:saturate(1)}

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

@media (max-width:520px){
  /* в две колонки крупный кадр занял бы всю ширину и мозаика пропала бы —
     на телефоне просто ровная сетка */
  .gal-mosaic picture: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 picture: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}
}