/* ═══════════════════════════════════════════════
   Car Man — малярно-кузовной цех
   Токены и значения — по design handoff (high-fidelity)
   ═══════════════════════════════════════════════ */

:root{
  /* Фоны */
  --bg:#dcd8d0;
  --surface:#eceae4;
  --surface-2:#e4e1d9;
  --surface-3:#e7e4dc;
  /* Тёмные */
  --hero:#101214;
  --dark:#17181a;
  --dark-hover:#24262a;
  --ink:#1a1a18;
  /* Текст */
  --ink-2:#3f3d38;
  --ink-3:#5f5c55;
  --ink-4:#7a766e;
  --ink-5:#8c887f;
  --ink-6:#9c988f;
  /* Бордеры */
  --line:#cdc9c0;
  --line-2:#d5d1c8;
  --line-3:#a8a49b;
  /* На тёмном */
  --on-dark:#f4f2ee;
  --on-dark-2:#eceae4;
  /* Акцент */
  --accent:#d95d1e;
  --red:#b0504a;
  --red-hover:#ba5650;
  /* Шрифты */
  --f-display:"Wix Madefor Display",system-ui,sans-serif;
  --f-text:"Wix Madefor Text",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  /* Кривая */
  --ease:cubic-bezier(.4,0,.2,1);

  /* Раскладка. Всё, что имеет размер, задано через vw с ограничителями:
     страница тянется и сжимается вместе с окном и масштабом браузера,
     потолка ширины у контента нет. Опорная точка шкалы — 1280px,
     на ней каждое значение совпадает с макетом (напр. --edge = 44px). */
  --edge:clamp(16px,3.44vw,160px);
  --pad-y:clamp(40px,5vw,110px);
  --header-h:62px;   /* пересчитывается из JS по фактической высоте панели */
}

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

html{scroll-behavior:smooth;background:var(--hero)}

body{
  margin:0;
  background:var(--surface);
  font-family:var(--f-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--dark);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--accent)}

button{font-family:inherit;margin:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:50;
  padding:12px 20px;background:var(--dark);color:var(--on-dark-2);
  font:600 12px var(--f-text);border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;color:var(--on-dark-2)}

.page{
  width:100%;
  padding-top:var(--header-h);   /* обложка начинается под плашкой, а не под ней же */
  background:
    linear-gradient(var(--hero),var(--hero)) 0 0/100% var(--header-h) no-repeat,
    var(--surface);
}

/* ── Флаговая полоса ─────────────────────────── */
/* Плашка всегда на своём чёрном фоне и никогда не лежит поверх кадра:
   обложка начинается ровно под ней (см. padding-top у .page). */
.topbar-shell{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:var(--hero);
  transition:border-color .3s var(--ease);
  /* не transparent: сквозь прозрачный бордер светил фон страницы
     и читался как белая полоса в 1px под плашкой */
  border-bottom:1px solid var(--hero);
}
/* Сойдя с обложки, плашка отделяется от светлого контента линией */
.topbar-shell.is-stuck{border-bottom-color:rgba(236,234,228,.12)}

.flagstrip{display:flex;height:clamp(3px,.31vw,6px)}
.flagstrip i{flex:1}

/* ═══ Обложка-карусель ═══════════════════════ */
.hero{
  position:relative;
  /* Ровно остаток первого экрана: плашка + обложка = высота окна,
     светлой полосы снизу не остаётся ни на одном формате.
     svh — чтобы адресная строка мобильного браузера не сдвигала низ. */
  height:calc(100vh - var(--header-h));
  height:calc(100svh - var(--header-h));
  min-height:420px;
  background:var(--hero);
  overflow:hidden;
}

.hero__track{
  position:absolute;inset:0;
  display:flex;
  transform:translateX(0);
  transition:transform .9s var(--ease);
  will-change:transform;
}

.slide{
  position:relative;
  flex:0 0 100%;
  height:100%;
  overflow:hidden;
}

/* Кадры обложки. Фон --hero держит цвет, пока картинка не пришла,
   чтобы светлый текст не мигнул на белом. */
.slide__photo{
  position:absolute;inset:0;
  background-color:var(--hero);
  background-repeat:no-repeat;
  background-size:cover;
}
.slide__photo--1{background-image:url(./img/hero-1.webp);background-position:center 55%}
.slide__photo--2{background-image:url(./img/hero-2.webp);background-position:center 45%}
.slide__photo--3{background-image:url(./img/hero-3.webp);background-position:center 38%}

/* Верх кадра выходит из сплошного цвета плашки — стык бесшовный,
   дальше кадр открыт и не притоплен. Плотность набирается только
   внизу, под кикером, заголовком и абзацем. */
.slide__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    var(--hero) 0%,
    rgba(16,18,20,.78) 4%,
    rgba(16,18,20,.42) 12%,
    rgba(16,18,20,0) 27%,
    rgba(16,18,20,0) 52%,
    rgba(8,9,10,.34) 66%,
    rgba(8,9,10,.72) 84%,
    rgba(8,9,10,.92) 100%);
}

.slide__copy{
  position:absolute;left:var(--edge);right:var(--edge);bottom:var(--edge);
  display:flex;flex-direction:column;align-items:flex-start;
}

.kicker{
  display:flex;align-items:center;gap:9px;
  margin:0 0 14px;
  font:500 clamp(9px,.78vw,13px) var(--f-text);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark);
  text-shadow:0 1px 3px rgba(8,9,10,.9),0 2px 14px rgba(8,9,10,.7);
}
.kicker__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}

.slide__title{
  margin:0 0 .37em;
  /* три строки + запас: держит текст на одной высоте между слайдами
     и при этом не ломается, если строка перенесётся */
  min-height:calc(3 * 1.12em + 14px);
  font:700 clamp(26px,2.97vw,58px)/1.12 var(--f-display);
  letter-spacing:-.03em;
  color:var(--on-dark);
  text-shadow:0 2px 18px rgba(8,9,10,.45);
  text-wrap:pretty;
}

.slide__text{
  margin:0;
  font:400 clamp(13px,1.09vw,18px)/1.6 var(--f-text);
  color:rgba(236,234,228,.86);
  text-shadow:0 1px 12px rgba(8,9,10,.6);
  width:max-content;max-width:min(100%,58ch);
  text-wrap:pretty;
}

.slide__cta{position:absolute;right:var(--edge);bottom:calc(var(--edge) + clamp(52px,4.5vw,72px));display:flex;justify-content:flex-end}

/* Неактивные слайды не ловят фокус и клики — через [inert] из JS,
   без visibility:hidden, чтобы не ломать анимацию ухода слайда */

/* ── Шапка ───────────────────────────────────── */
/* Сетка, а не space-between: правый блок (телефон + кнопка) заметно
   шире логотипа, поэтому при равных промежутках меню уезжало влево
   от середины шапки. Боковые колонки равны — меню стоит по центру. */
.topbar{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 var(--edge);
  height:clamp(44px,3.98vw,66px);
  gap:16px;
}

/* Колонки закреплены явно: на ≤680px меню уходит в absolute и выпадает
   из сетки — без этого правый блок съезжал бы в среднюю колонку.
   Самому .nav колонку не задаём: у абсолютного грид-потомка с указанной
   колонкой контейнером стала бы её ячейка, и выпадающая панель
   перестала бы тянуться на всю ширину. */
.brand{display:flex;align-items:center;flex-shrink:0;grid-column:1;justify-self:start;min-width:0}
.brand:hover{color:inherit}
/* Знак на шапке лежит на тёмном: у логотипа чёрный силуэт кузова,
   поэтому подсвечиваем контур — иначе от машины остаются одни блики. */
.brand__logo{
  display:block;
  height:clamp(24px,2.66vw,44px);width:auto;
  filter:drop-shadow(0 0 1px rgba(236,234,228,.45));
  transition:opacity .18s var(--ease);
}
.brand:hover .brand__logo{opacity:.82}

/* 6px, а не 2: фон активной пилюли выступает за текст на 15px
   и при тесном gap она зрительно липла к соседнему пункту */
.nav{display:flex;gap:6px}
.nav__item{
  padding:.7em 1.25em;border-radius:20px;
  font:500 clamp(11px,.94vw,15px) var(--f-text);
  color:rgba(236,234,228,.72);
  white-space:nowrap;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.nav__item:hover{background:rgba(236,234,228,.08);color:var(--on-dark-2)}
.nav__item.is-active{background:rgba(236,234,228,.14);color:var(--on-dark-2)}

.topbar__side{display:flex;align-items:center;grid-column:3;justify-self:end;gap:clamp(8px,1.25vw,20px)}

.burger{
  display:none;
  width:42px;height:42px;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:0;cursor:pointer;
}
.burger span{
  width:20px;height:1.5px;background:var(--on-dark-2);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav__item--phone{display:none}
.topbar__phone{
  font:500 clamp(11px,.94vw,15px) var(--f-text);
  color:var(--on-dark-2);
  white-space:nowrap;flex-shrink:0;
}
.topbar__phone:hover{color:var(--accent)}

/* ── Кнопки ──────────────────────────────────── */
.btn{
  display:inline-block;
  font:600 12px var(--f-text);
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease);
}
.btn:active{transform:translateY(1px)}

.btn--light{padding:14px 28px;border-radius:24px;background:var(--surface);color:var(--dark);font-size:12px}
.btn--light:hover{background:#fff;color:var(--dark)}

.btn--ghost-light{padding:.75em 1.6em;border-radius:22px;border-color:rgba(236,234,228,.45);color:var(--on-dark-2)}
.btn--ghost-light:hover{background:rgba(236,234,228,.12);border-color:var(--on-dark-2);color:var(--on-dark-2)}

.btn--dark{padding:15px 26px;border-radius:24px;background:var(--dark);color:var(--on-dark-2);font-size:12.5px}
.btn--dark:hover{background:var(--dark-hover);color:var(--on-dark-2)}

.btn--accent{padding:15px 26px;border-radius:24px;background:var(--accent);color:#fff;font-size:12.5px}
.btn--accent:hover{background:#e86b28;color:#fff}

.btn--outline{padding:15px 26px;border-radius:24px;border-color:var(--line-3);color:var(--ink);font-size:12.5px}
.btn--outline:hover{border-color:var(--accent);color:var(--accent)}

.btn--red{padding:.75em 1.6em;border-radius:22px;background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-hover);color:#fff}

.btn--sm{padding:11px 18px;border-radius:22px;font-size:11px}

/* ── Переключатель слайдов ───────────────────── */
.hero__controls{
  position:absolute;right:var(--edge);bottom:var(--edge);
  display:flex;align-items:center;gap:14px;
}

.playpause{
  width:44px;height:44px;border-radius:50%;
  background:rgba(236,234,228,.12);
  border:1px solid rgba(236,234,228,.22);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font:400 13px var(--f-text);
  color:var(--on-dark-2);letter-spacing:.06em;
  padding:0;
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.playpause:hover{background:rgba(236,234,228,.2);border-color:rgba(236,234,228,.4)}
.playpause__glyph{line-height:1;pointer-events:none}

.dots{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;border-radius:26px;
  background:rgba(236,234,228,.12);
}

.dot{
  position:relative;
  width:14px;height:14px;
  padding:0;border:0;
  border-radius:8px;
  background:rgba(236,234,228,.42);
  cursor:pointer;overflow:hidden;
  transition:width .6s var(--ease),background-color .18s var(--ease);
}
.dot:hover{background:rgba(236,234,228,.62)}
.dot.is-active{width:46px}
.dot__fill{
  position:absolute;left:0;top:0;bottom:0;
  width:0;background:#fff;
  pointer-events:none;
}

/* ═══ Секции ═════════════════════════════════ */
.section{
  padding:var(--pad-y) var(--edge);
  border-bottom:1px solid var(--line-2);
  scroll-margin-top:calc(var(--header-h) + 12px);
}

.sechead{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.sechead--tight{margin-bottom:12px}
.sechead__title{margin:0;font:700 clamp(23px,2.34vw,46px) var(--f-display);letter-spacing:-.03em;color:var(--ink)}
.sechead__title--sm{font-size:clamp(21px,2.03vw,40px);letter-spacing:-.02em}
.sechead__sub{margin:0 0 26px;font:400 clamp(12.5px,1.02vw,17px) var(--f-text);color:var(--ink-4);max-width:80ch}
.sechead__sub--wide{margin-bottom:30px}

/* ── 01 Карта зон ────────────────────────────── */
.zonemap{
  display:grid;grid-template-columns:1.5fr 1fr;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;overflow:hidden;
}

/* Кадр держит пропорции снимка (1800×1012), а не фиксированную высоту:
   точки зон стоят в % и обязаны совпадать с машиной на любой ширине.
   Если карточка справа окажется выше — грид растянет кадр, и cover
   срежет по краям пару процентов; на посадку точек это не влияет. */
.zonemap__frame{
  position:relative;aspect-ratio:1800/1012;
  background:var(--hero) url(./img/zones.webp) center/cover no-repeat;
  cursor:crosshair;overflow:hidden;
  border-right:1px solid var(--line);
  touch-action:none;
}

.cross{position:absolute;background:var(--accent);pointer-events:none}
.cross--h{left:0;right:0;height:1px;top:44%}
.cross--v{top:0;bottom:0;width:1px;left:60%}

.marker{
  position:absolute;left:60%;top:44%;
  transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:3px solid var(--surface);
  pointer-events:none;
}

.zdot{
  position:absolute;
  width:9px;height:9px;padding:0;
  border-radius:50%;border:0;
  /* кадр тёмный, поэтому точки светлые: тёмные тонули бы в кузове */
  background:var(--surface);
  box-shadow:0 0 0 1px rgba(10,11,12,.5),0 1px 4px rgba(0,0,0,.45);
  transform:translate(-50%,-50%);
  cursor:pointer;
  transition:box-shadow .18s var(--ease),background-color .18s var(--ease);
}
.zdot:hover{background:var(--accent)}
.zdot.is-active{background:var(--accent);box-shadow:0 0 0 4px rgba(217,93,30,.32),0 1px 4px rgba(0,0,0,.45)}

.zonemap__status{
  position:absolute;left:0;right:0;bottom:0;height:24px;
  background:rgba(16,18,20,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-top:1px solid rgba(236,234,228,.14);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;
  font:400 9px var(--f-mono);color:rgba(236,234,228,.62);letter-spacing:.1em;
  pointer-events:none;
}

.zonecard{padding:clamp(20px,2.03vw,40px);display:flex;flex-direction:column}
.zonecard__label{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font:400 10px var(--f-mono);color:var(--ink-5);letter-spacing:.14em;
}
.zonecard__dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.zonecard__title{margin:0 0 9px;font:700 clamp(18px,1.56vw,30px) var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.zonecard__desc{margin:0 0 16px;font:400 clamp(12.5px,1.02vw,17px)/1.65 var(--f-text);color:var(--ink-3);max-width:60ch}
.zonecard__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.zonecard__list li{
  display:flex;gap:10px;padding:8px 0;
  border-top:1px solid var(--line-2);
  font:400 clamp(12px,.94vw,16px) var(--f-text);color:var(--ink-3);
}
.slash{color:var(--line-3)}
.zonecard__foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.zonecard__note{font:400 11px/1.5 var(--f-text);color:var(--ink-6);max-width:190px}

/* ── 02 Услуги ───────────────────────────────── */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,1.88vw,40px)}
.service{border-top:1px solid var(--line-2);padding:20px 0 0;display:flex;flex-direction:column;gap:8px}
.service__num{font:400 10px var(--f-mono);color:var(--ink-5);letter-spacing:.14em}
.service__title{margin:0;font:700 clamp(17px,1.41vw,26px) var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.service__text{margin:0;font:400 clamp(12.5px,.98vw,16px)/1.65 var(--f-text);color:var(--ink-3)}

/* Остальные работы цеха одной строкой — они реже приходят из поиска,
   но без них список выглядит уже, чем цех умеет на самом деле. */
.services__more{
  margin:clamp(22px,2.03vw,42px) 0 0;padding-top:18px;
  border-top:1px solid var(--line-2);
  font:400 clamp(12.5px,1.02vw,17px)/1.7 var(--f-text);color:var(--ink-3);
  max-width:100ch;text-wrap:pretty;
}
.services__more-tag{
  display:inline-block;margin-right:10px;
  font:400 10px var(--f-mono);color:var(--accent);
  letter-spacing:.14em;text-transform:uppercase;
}

/* Репортажная полоса под списком услуг. Кадры вертикальные (9:16),
   поэтому рамка 4:5 и своя точка кадрирования у каждого. */
.shots__lead{
  margin:clamp(34px,3.44vw,70px) 0 clamp(16px,1.25vw,26px);
  font:400 11px var(--f-mono);color:var(--ink-5);letter-spacing:.14em;text-transform:uppercase;
}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.88vw,40px)}
.shot{margin:0;display:flex;flex-direction:column;gap:clamp(10px,.94vw,16px)}
.shot__img{
  aspect-ratio:4/5;border-radius:12px;
  background:var(--surface-2) no-repeat;
  background-size:cover;
  border:1px solid var(--line);
}
.shot__img--body {background-image:url(./img/svc-body.webp);background-position:center 42%}
.shot__img--prep {background-image:url(./img/svc-prep.webp);background-position:center 38%}
.shot__img--paint{background-image:url(./img/svc-paint.webp);background-position:center 56%}
.shot__cap{font:400 clamp(12px,.94vw,16px)/1.6 var(--f-text);color:var(--ink-3)}
.shot__tag{
  display:block;margin-bottom:7px;
  font:400 10px var(--f-mono);color:var(--accent);letter-spacing:.14em;text-transform:uppercase;
}

/* ── 03 Как проходит ремонт ──────────────────── */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,1.88vw,40px);
}
.step{border-top:1px solid var(--line-2);padding-top:20px;display:flex;flex-direction:column;gap:8px}
/* номер шага акцентный, в отличие от служебной нумерации услуг:
   здесь это порядок действий, а не просто метка карточки */
.step__num{font:400 10px var(--f-mono);color:var(--accent);letter-spacing:.14em}
.step__title{margin:0;font:700 clamp(16px,1.33vw,24px) var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.step__text{margin:0;font:400 clamp(12.5px,.98vw,16px)/1.65 var(--f-text);color:var(--ink-3)}

/* Гарантия — то, чем цех отличается от соседнего; поэтому единственная
   тёмная плашка в светлой части страницы. */
.warranty{
  margin-top:clamp(30px,3.13vw,64px);
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(22px,3.13vw,64px);
  padding:clamp(22px,2.34vw,46px);
  background:var(--dark);border-radius:12px;
}
.warranty__label{
  display:flex;align-items:center;gap:8px;margin:0 0 14px;
  font:400 10px var(--f-mono);letter-spacing:.14em;color:rgba(236,234,228,.55);
}
.warranty__dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.warranty__num{margin:0 0 12px;font:700 clamp(30px,3.13vw,60px)/1 var(--f-display);letter-spacing:-.03em;color:var(--on-dark)}
.warranty__text{margin:0;font:400 clamp(13px,1.09vw,18px)/1.7 var(--f-text);color:rgba(236,234,228,.78);max-width:52ch;text-wrap:pretty}
.warranty__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;align-self:center}
.warranty__list li{
  display:flex;gap:12px;padding:13px 0;
  border-top:1px solid rgba(236,234,228,.14);
  font:400 clamp(12.5px,.98vw,16px)/1.5 var(--f-text);color:rgba(236,234,228,.8);
}
.warranty__list li:first-child{border-top:0;padding-top:0}
.warranty .slash{color:var(--accent)}

/* ── 04 О нас ────────────────────────────────── */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,3.13vw,64px);align-items:start;margin-top:22px}
.about__copy{display:flex;flex-direction:column;gap:18px}
.about__p{margin:0;font:400 clamp(14px,1.17vw,20px)/1.75 var(--f-text);color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding-top:22px;border-top:1px solid var(--line-2);margin-top:4px;
}
.fact__num{font:700 clamp(20px,1.72vw,32px) var(--f-display);color:var(--ink);letter-spacing:-.02em}
.fact__cap{font:400 12px var(--f-text);color:var(--ink-4);margin-top:3px}
.about__media{display:flex;flex-direction:column;gap:clamp(14px,1.25vw,26px)}
.photo{margin:0;display:flex;flex-direction:column;gap:10px}
.photo__img{
  aspect-ratio:4/3;border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface-2) no-repeat;background-size:cover;
}
.photo__img--owner{background-image:url(./img/about-owner.webp);background-position:25% center}
.photo__cap{font:400 clamp(11.5px,.9vw,15px)/1.55 var(--f-text);color:var(--ink-4);text-wrap:pretty}

/* ── 05 Оценка по фото ───────────────────────── */
.estimate{
  padding:calc(var(--pad-y) * .72) var(--edge);border-bottom:1px solid var(--line-2);
  display:grid;grid-template-columns:1fr auto;gap:clamp(24px,3.75vw,72px);align-items:end;
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.estimate__copy{display:flex;flex-direction:column}
.estimate__text{margin:0;font:400 clamp(12.5px,1.02vw,17px)/1.7 var(--f-text);color:var(--ink-3);max-width:66ch}
.estimate__actions{display:flex;gap:8px}

/* ── 06 Где нас найти ────────────────────────── */
.contacts{padding:calc(var(--pad-y) * .9) var(--edge);scroll-margin-top:calc(var(--header-h) + 12px)}
.map{
  position:relative;height:clamp(220px,21.88vw,420px);
  border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--surface-3);
  transition:background-color .3s var(--ease);
}
.map__grid{
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0 47px,#dcd8cf 47px 48px),linear-gradient(0deg,transparent 0 47px,#dcd8cf 47px 48px);
  background-size:48px 48px;
  transition:opacity .3s var(--ease);
}
.map__road{position:absolute;background:#d3cfc5;transition:background-color .3s var(--ease)}
.map__road--a{left:-40px;top:120px;width:640px;height:16px;transform:rotate(-8deg)}
.map__road--b{left:180px;top:-40px;width:12px;height:400px;transform:rotate(11deg)}
.map__pin{
  position:absolute;left:46%;top:44%;
  transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.map__pin-label{
  padding:8px 12px;border-radius:8px;
  background:var(--dark);color:var(--on-dark-2);
  font:600 11px var(--f-text);white-space:nowrap;
}
.map__pin-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--surface)}
.map__modes{position:absolute;left:14px;top:14px;display:flex;gap:6px}
.mapmode{
  padding:7px 12px;border-radius:18px;border:0;cursor:pointer;
  background:rgba(255,255,255,.8);
  font:500 11px var(--f-text);color:var(--ink-3);
  transition:background-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.mapmode:hover{background:rgba(255,255,255,.95);color:var(--ink)}
.mapmode.is-active{background:#fff;font-weight:600;color:var(--dark);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.map__badge{
  position:absolute;right:14px;bottom:14px;
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:18px;
  background:rgba(255,255,255,.9);
  font:500 10px var(--f-mono);color:var(--ink-3);letter-spacing:.08em;
}
/* Режим «Спутник» */
.map.is-satellite{background:#4a4740}
.map.is-satellite .map__grid{opacity:.08}
.map.is-satellite .map__road{background:#6d6960}

.contacts__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.88vw,40px);margin-top:20px;
  font:400 clamp(12.5px,1.02vw,17px)/1.7 var(--f-text);color:var(--ink-3);
}
.contacts__label{font:600 12px var(--f-text);color:var(--ink);margin-bottom:4px}
/* Пунктирная метка для данных, которых ещё нет от заказчика:
   такую строку невозможно случайно выкатить в прод не заметив. */
.todo{
  display:inline-block;margin-bottom:2px;
  padding:2px 8px;border-radius:4px;
  border:1px dashed var(--accent);
  font:500 12px var(--f-mono);color:var(--accent);letter-spacing:.03em;
}

.contacts__actions{display:flex;gap:8px;margin-top:20px}
.contacts__actions .btn{padding:13px 22px;border-radius:22px;font-size:12px}

/* ── Футер ───────────────────────────────────── */
.footer{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px;
  padding:20px var(--edge);background:var(--dark);
  color:rgba(236,234,228,.55);
  font:400 clamp(10.5px,.86vw,14px) var(--f-text);letter-spacing:.06em;
}
.footer__links{justify-self:end;text-align:right}
.footer__slogan{justify-self:center;color:rgba(236,234,228,.38);letter-spacing:.16em;white-space:nowrap}
.footer a{color:rgba(236,234,228,.55)}
.footer a:hover{color:var(--accent)}

/* ═══ Респонсив ═══════════════════════════════
   Боковые поля задаёт --gutter, так что жёстких значений
   отступов здесь нет — меняются только сетки и размеры.  */

@media (max-width:1180px){
  .slide__text{width:auto}
}

@media (max-width:1000px){
  /* Телефон в шапку уже не помещается — он остаётся кликабельным
     в блоке «Часы и связь» и в футере */
  .topbar{gap:12px}
  .topbar__phone{display:none}
  .nav{min-width:0;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav__item{padding:.6em .8em}
  .slide__text{max-width:min(100%,46ch)}
  .zonemap{grid-template-columns:1fr}
  .zonemap__frame{border-right:0;border-bottom:1px solid var(--line)}
  .services{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .warranty{grid-template-columns:1fr;gap:26px}
  .contacts__grid{grid-template-columns:repeat(2,1fr)}
  .estimate{grid-template-columns:1fr;gap:24px;align-items:start}
}

@media (max-width:680px){
  .section{padding-top:calc(var(--pad-y) * .9);padding-bottom:calc(var(--pad-y) * .9)}

  /* Шапка в одну тонкую строку: бренд · «Записаться» · бургер.
     Разделы уезжают в выпадающую панель — так плашка не съедает экран. */
  .burger{display:flex}
  .topbar{gap:10px}
  .topbar__phone{display:none}

  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:2px;
    padding:8px var(--edge) 16px;
    background:rgba(16,18,20,.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(236,234,228,.12);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    display:none;
  }
  .nav.is-open{display:flex}
  .nav__item{padding:13px 14px;font-size:14px;border-radius:10px}
  .nav__item--phone{
    display:block;margin-top:6px;
    border-top:1px solid rgba(236,234,228,.12);
    border-radius:0;padding-top:16px;color:var(--on-dark-2);
  }
  .btn--ghost-light,.btn--red{padding:.7em 1.15em;font-size:11.5px}

  /* Пальцем в 9px точку не попасть — расширяем зону нажатия */
  .zdot::after{content:"";position:absolute;inset:-14px}
  .dot{height:18px}
  .dot__fill{border-radius:8px}

  .slide__title{min-height:0}
  .slide__copy{bottom:calc(var(--edge) + 62px)}
  .slide__cta{left:var(--edge);right:auto;bottom:var(--edge);justify-content:flex-start}
  .hero__controls{gap:10px}
  .services{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .shot__img{aspect-ratio:3/2}
  .facts{grid-template-columns:1fr;gap:14px}
  .steps{grid-template-columns:1fr}
  .contacts__grid{grid-template-columns:1fr}
  .estimate__actions{flex-wrap:wrap}
  .contacts__actions{flex-wrap:wrap}
  .footer{grid-template-columns:1fr;gap:8px}
  .footer__links,.footer__slogan{justify-self:start;text-align:left}
  .zonecard__foot{flex-direction:column;align-items:flex-start;gap:14px}
  .zonecard__note{max-width:none}
  .footer__slogan{white-space:normal}
}

/* Телефон-«альбом»: заголовок не резервирует три строки */
@media (max-width:900px) and (orientation:landscape){
  .hero{min-height:320px}
  .slide__title{min-height:0}
}

/* ── Уважение к системным настройкам ─────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__track{transition:none}
  .dot{transition:none}
  .btn,.nav__item,.mapmode,.zdot,.playpause{transition:none}
}