/* ============================================================================
   Spotcars — design system
   Montserrat 900 display / 500 italic eyebrow, charcoal + brand red (#DE0005).
   Diagonal geometry echoes the "S" swoosh in the logo.
   ========================================================================== */

/* ── tokens ───────────────────────────────────────────────────────────────── */
:root {
  --red:      #DE0005;
  --red-hi:   #FF2027;
  --red-lo:   #A50004;
  --red-ink:  #3E0002;

  --ink:      #0B0B0C;
  --char:     #17181A;
  --char-hi:  #212226;
  --char-top: #2C2D32;

  --paper:    #F5F3F0;
  --paper-2:  #E8E5E0;
  --paper-3:  #D9D5CE;

  --on-dark:      #F2F1EF;
  --on-dark-mute: rgba(242,241,239,.68);
  --on-dark-dim:  rgba(242,241,239,.42);
  --on-light:      #232326;
  --on-light-mute: #5E5E63;

  --hair-dark:  rgba(255,255,255,.10);
  --hair-light: rgba(20,20,22,.12);

  --ff: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* spacing scale — 4pt derived, used everywhere instead of ad-hoc values */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 2.75rem; --s8: 3.5rem;
  --s9: 5rem;    --s10: 7rem;   --s11: 9rem;

  --gut: 1.25rem;          /* page gutter */
  --wide: 82.5rem;         /* 1320px content max */
  --skew: 2.5rem;          /* diagonal offset for clipped panels */

  --sh-1: 0 1px 2px rgba(11,11,12,.10), 0 2px 8px rgba(11,11,12,.06);
  --sh-2: 0 2px 6px rgba(11,11,12,.10), 0 12px 28px -8px rgba(11,11,12,.18);
  --sh-red: 0 2px 6px rgba(165,0,4,.18), 0 14px 34px -10px rgba(165,0,4,.34);

  --ease: cubic-bezier(.22,.68,.32,1);
  --spring: cubic-bezier(.34,1.42,.5,1);

  /* Brand panel. The logo drives the width, so the paper wedge always fits it
     exactly; everything scales fluidly with the viewport. --wrap-inset is how
     far the centred container already sits from the left edge, so the header
     rows only reserve the part of the panel that actually sticks out past it. */
  --logo-w:     clamp(7rem, 15vw, 20rem);
  --brand-skew: clamp(1.125rem, 2.4vw, 3.25rem);
  --brand-w:    calc(var(--gut) + var(--logo-w) + var(--brand-skew) + .625rem);
  --hdr-wide:   110rem;
  --wrap-inset: max(0px, (100vw - var(--hdr-wide)) / 2);
  --brand-clear: calc(var(--brand-w) + 1.25rem - var(--wrap-inset));
}

@media (min-width: 48rem)  { :root { --gut: 2rem; --skew: 4rem; } }
@media (min-width: 64rem)  { :root { --gut: 2.5rem; --skew: 5.5rem; } }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--ff);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5 { margin: 0; line-height: 1.05; }
p, figure, figcaption, blockquote, dl, dd, dt, fieldset { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--red); color: #fff; }

/* ── layout primitives ────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 52rem; }
.wrap--mid { max-width: 66rem; }

.sec { position: relative; padding-block: var(--s9); }
@media (min-width: 64rem) { .sec { padding-block: var(--s10); } }
.sec--tight { padding-block: var(--s8); }
.sec--flush-b { padding-bottom: 0; }

.sec--dark  { background: var(--char); color: var(--on-dark); }
.sec--ink   { background: var(--ink);  color: var(--on-dark); }
.sec--light { background: var(--paper); color: var(--on-light); }
.sec--light-2 { background: var(--paper-2); color: var(--on-light); }

/* ── textures ─────────────────────────────────────────────────────────────── */
/* fine diagonal hatch — the mill-finish look on Torque's charcoal panels */
.tex-hatch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.030) 0 1px, transparent 1px 8px);
}
.tex-hatch > * { position: relative; z-index: 1; }

/* brand watermark tile for light sections */
.tex-mark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../images/spotcars-logo-dark.png");
  background-size: 21rem auto;
  background-repeat: repeat;
  opacity: .022;
}
.tex-mark > * { position: relative; z-index: 1; }

/* grain — breaks up flat fills, 1 inline svg, no extra request */
.tex-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* red rule that opens most section headers */
.rule {
  display: block; width: 3.25rem; height: 3px; background: var(--red);
  border: 0; margin: 0 0 var(--s4);
}

/* ── type ─────────────────────────────────────────────────────────────────── */
.eyebrow {
  display: flex; align-items: center; gap: var(--s3);
  font-size: .8125rem; font-weight: 600; font-style: italic;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1.125rem;
}
.eyebrow::before {
  content: ""; width: 2.25rem; height: 2px; background: currentColor; flex: none;
}
.eyebrow--plain::before { display: none; }
.sec--light .eyebrow, .sec--light-2 .eyebrow { color: var(--red-lo); }

.dsp {
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -.022em; line-height: .99;
  font-size: clamp(2rem, 7vw, 3.25rem);
}
.dsp--xl { font-size: clamp(2.35rem, 9.5vw, 4.75rem); line-height: 1.02; }
.dsp--lg { font-size: clamp(2.1rem, 8vw, 3.75rem); }
.dsp--sm { font-size: clamp(1.5rem, 4.6vw, 2.125rem); letter-spacing: -.015em; }
.dsp em  { font-style: normal; color: var(--red); }
.dsp .thin {
  display: inline-block; font-weight: 500; font-style: italic;
  text-transform: none; letter-spacing: -.01em;
}

.sub {
  font-weight: 500; font-style: italic;
  font-size: clamp(1.05rem, 2.7vw, 1.5rem);
  line-height: 1.3; letter-spacing: -.005em;
}

.lede { font-size: 1.0625rem; line-height: 1.75; color: var(--on-dark-mute); }
.sec--light .lede, .sec--light-2 .lede { color: var(--on-light-mute); }
.lede + .lede { margin-top: var(--s4); }
.lede strong { color: var(--on-dark); font-weight: 700; }
.sec--light .lede strong, .sec--light-2 .lede strong { color: var(--on-light); }
.lede--wide { max-width: 42rem; }

.head-stack > * + * { margin-top: var(--s4); }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: .625rem;
  padding: .9375rem 1.625rem;
  font-family: inherit; font-size: .875rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 0; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - .75rem) 100%, 0 100%);
  transition: transform .28s var(--spring), background-color .2s var(--ease), box-shadow .28s var(--ease), color .2s var(--ease);
  will-change: transform;
}
.btn:hover   { background: var(--red-hi); transform: translateY(-2px); box-shadow: var(--sh-red); }
.btn:active  { transform: translateY(0) scale(.985); background: var(--red-lo); }
.btn svg     { flex: none; }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--on-dark);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.30);
  clip-path: none;
}
.btn--ghost:hover  { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 2px rgba(255,255,255,.62); }
.btn--ghost:active { background: rgba(255,255,255,.05); }

.btn--dark {
  --btn-bg: var(--ink); --btn-fg: #fff;
}
.btn--dark:hover { background: var(--char-top); }

.btn--outline-dark {
  --btn-bg: transparent; --btn-fg: var(--on-light);
  box-shadow: inset 0 0 0 2px rgba(20,20,22,.22); clip-path: none;
}
.btn--outline-dark:hover  { background: rgba(20,20,22,.06); box-shadow: inset 0 0 0 2px rgba(20,20,22,.55); transform: translateY(-2px); }
.btn--outline-dark:active { background: rgba(20,20,22,.03); transform: none; }

.btn--sm { padding: .6875rem 1.125rem; font-size: .75rem; }
.btn--wide { width: 100%; justify-content: center; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* text link with sliding arrow */
.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--red); padding-block: .25rem;
  transition: color .2s var(--ease);
}
.tlink svg { transition: transform .3s var(--spring); }
.tlink:hover { color: var(--red-hi); }
.tlink:hover svg { transform: translateX(4px); }
.tlink:active svg { transform: translateX(1px); }
.sec--light .tlink, .sec--light-2 .tlink { color: var(--red-lo); }
.sec--light .tlink:hover { color: var(--red); }

/* ── header: utility strip + nav ──────────────────────────────────────────── */
/*
  Layout, left to right:
    utility strip   [brand wedge] Google + Trustpilot ......... info · socials
    nav row         [brand wedge] nav links .......... phone · Book tid
  The wedge is out of flow, so both rows reserve --brand-clear on the left and
  then simply space-between their two groups.
*/
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--ink);
}
.hdr__util {
  background: #000; border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .8125rem;
}
.hdr__util-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 2.375rem; padding-block: .3125rem;
  max-width: var(--hdr-wide);
  padding-left: max(var(--gut), var(--brand-clear));
}
/* Hidden wherever the nav is collapsed to a burger: the strip costs more header
   height than the information is worth on a phone or tablet, and the phone
   number is already in the sticky bottom call bar at those widths. */
@media (max-width: 63.99rem) { .hdr__util { display: none; } }

.util-group { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.util-group--left { gap: .5rem; flex: none; }
.util-group--right { margin-left: auto; }

.util-item {
  display: inline-flex; align-items: center; gap: .4375rem;
  color: var(--on-dark-mute); font-weight: 500; white-space: nowrap;
}
.util-item svg { flex: none; color: var(--red); }
a.util-item { transition: color .2s var(--ease); }
a.util-item:hover { color: #fff; }

/* Progressive disclosure — each item only appears once there is room for it
   beside the brand wedge and the two review chips. */
.util-addr, .util-hours, .util-mail { display: none; }
@media (min-width: 64rem)  { .util-addr  { display: inline-flex; } }
@media (min-width: 78rem)  { .util-hours { display: inline-flex; } }
@media (min-width: 108rem) { .util-mail  { display: inline-flex; } }

/* review chips — Google and Trustpilot, tucked in beside the logo */
.rchip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .1875rem .625rem .1875rem .375rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .25s var(--spring);
}
.rchip:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.rchip:active { transform: none; }
.rchip__stars { display: inline-flex; gap: 1px; color: #FFB300; }
.rchip--tp .rchip__stars { gap: 2px; }
.rchip--hella { padding: .125rem .625rem .125rem .25rem; gap: .4375rem; }
.rchip--hella img { height: 1.25rem; width: auto; }
.rchip__txt { font-size: .6875rem; font-weight: 800; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
/* Three chips now (Hella, Google, Trustpilot). Below 88rem they keep their
   marks and stars but drop the wordmark, or the strip runs past the viewport. */
@media (max-width: 87.99rem) { .rchip__txt { display: none; } }

.util-social { display: inline-flex; gap: .375rem; }
.util-social a {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--red); color: #fff;
  transition: background-color .2s var(--ease), transform .25s var(--spring);
}
.util-social a:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.util-social a:active { transform: none; }

/* main nav row */
.hdr__main { position: relative; background: var(--char-top); }
.hdr__main::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px);
}
.hdr__main::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--red);
}
.hdr__main-in {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--s4);
  min-height: 3.75rem;
  max-width: var(--hdr-wide);
  padding-left: max(var(--gut), var(--brand-clear));
}
@media (min-width: 64rem) { .hdr__main-in { min-height: 4.75rem; } }

/* The angled paper panel. Absolutely positioned against .hdr (the sticky
   header) so it stays welded to the left edge of the viewport at every width,
   and runs the full height of the header — stopping 3px short so the red rule
   reads edge to edge underneath it. */
.brand {
  position: absolute; left: 0; top: 0; bottom: 3px; z-index: 5;
  display: flex; align-items: center;
  width: var(--brand-w);
  padding: .5rem var(--brand-skew) .5rem var(--gut);
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--brand-skew)) 100%, 0 100%);
  transition: filter .25s var(--ease);
}
.brand img {
  width: 100%; height: auto; max-height: 100%;
  object-fit: contain; object-position: left center;
}
.brand:hover { filter: brightness(1.04); }

/* nav links sit hard against the logo; phone + CTA hold the right edge */
.nav { display: none; margin-right: auto; align-items: center; gap: .125rem; }
@media (min-width: 64rem) { .nav { display: flex; } }

.nav__link, .nav__trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .625rem var(--nav-pad, .6875rem);
  font-family: inherit; font-size: var(--nav-fs, .9375rem); font-weight: 600; font-style: italic;
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--on-dark); background: none; border: 0; cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__link::after, .nav__trigger::after {
  content: ""; position: absolute; left: var(--nav-pad, .6875rem); right: var(--nav-pad, .6875rem); bottom: .3125rem;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover, .nav__trigger:hover { color: #fff; }
.nav__link:hover::after, .nav__trigger:hover::after,
.nav__item--open .nav__trigger::after { transform: scaleX(1); }
.nav__link[aria-current="page"], .nav__trigger[aria-current="page"] { color: var(--red); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__caret { transition: transform .28s var(--ease); }
.nav__item--open .nav__caret { transform: rotate(180deg); }

.nav__item { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + .5rem); left: 0; min-width: 14.5rem;
  padding: .375rem; background: var(--ink);
  border: 1px solid var(--hair-dark); border-top: 3px solid var(--red);
  box-shadow: 0 18px 44px -12px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; transform: translateY(-.5rem);
  transition: opacity .22s var(--ease), transform .26s var(--ease), visibility .22s;
}
.nav__item--open .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__panel a {
  display: block; padding: .625rem .875rem;
  font-size: .875rem; font-weight: 600; color: var(--on-dark-mute);
  transition: color .18s var(--ease), background-color .18s var(--ease), padding-left .22s var(--ease);
}
.nav__panel a:hover { color: #fff; background: rgba(222,0,5,.16); padding-left: 1.125rem; }
.nav__panel a:active { background: rgba(222,0,5,.28); }

/* right-hand cluster: phone then Book tid */
.hdr__actions { display: none; align-items: center; gap: .75rem; flex: none; }
@media (min-width: 64rem) { .hdr__actions { display: flex; } }

.hdr__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; font-weight: 800; font-size: .9375rem; letter-spacing: .01em;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.hdr__tel-ico {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  border-radius: 50%; color: var(--red);
  background: rgba(222,0,5,.14); border: 1px solid rgba(222,0,5,.34);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .25s var(--spring);
}
.hdr__tel:hover { color: var(--red-hi); }
.hdr__tel:hover .hdr__tel-ico { background: var(--red); color: #fff; transform: translateY(-2px); }
.hdr__tel:active .hdr__tel-ico { transform: none; }
/* in the tight band the number collapses to just its button */
@media (max-width: 81.99rem) { .hdr__tel-txt { display: none; } }

/* nav density phases — the wedge takes ~230px, so the links tuck in until
   the viewport has slack again */
@media (min-width: 64rem) and (max-width: 74.99rem) {
  .nav { --nav-pad: .3125rem; --nav-fs: .8125rem; }
  .hdr__actions { gap: .5rem; }
  .hdr__cta { padding-inline: .875rem; }
}
@media (min-width: 75rem) and (max-width: 87.99rem) {
  .nav { --nav-pad: .5rem; --nav-fs: .875rem; }
}

/* burger */
.burger {
  margin-left: auto; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; background: none; border: 0; cursor: pointer;
  color: var(--on-dark);
}
@media (min-width: 64rem) { .burger { display: none; } }
.burger span {
  display: block; width: 1.375rem; height: 2px; background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 95;
  background: var(--ink);
  padding: var(--s5) var(--gut) var(--s8);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-1rem);
  transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .25s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s6); }
.drawer__top img { width: 9.5rem; }
.drawer__close {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: none; border: 1px solid var(--hair-dark); color: var(--on-dark); cursor: pointer;
  transition: background-color .2s var(--ease);
}
.drawer__close:hover { background: rgba(255,255,255,.08); }
.drawer a, .drawer summary {
  display: block; padding: .875rem 0;
  font-size: 1.125rem; font-weight: 800; font-style: italic; text-transform: uppercase;
  border-bottom: 1px solid var(--hair-dark);
}
.drawer details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.drawer details > summary::-webkit-details-marker { display: none; }
.drawer details > summary::after {
  content: ""; width: .5rem; height: .5rem; margin-right: .25rem;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.drawer details[open] > summary::after { transform: rotate(-135deg); }
.drawer details a { padding-left: var(--s4); font-size: .9375rem; font-weight: 600; font-style: normal; text-transform: none; color: var(--on-dark-mute); }
.drawer details a:hover { color: #fff; }
.drawer__foot { margin-top: var(--s6); display: grid; gap: var(--s3); }
.drawer__foot a { border: 0; padding: 0; }

/* ── hero (home) ──────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 34rem; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
@media (min-width: 64rem) { .hero { min-height: min(46rem, calc(100vh - 7rem)); } }
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(11,11,12,.95) 0%, rgba(11,11,12,.72) 34%, rgba(11,11,12,.42) 68%, rgba(11,11,12,.66) 100%),
    linear-gradient(95deg, rgba(11,11,12,.80) 0%, rgba(11,11,12,.42) 44%, rgba(11,11,12,.12) 74%),
    radial-gradient(120% 90% at 12% 100%, rgba(222,0,5,.22) 0%, transparent 60%);
}
.hero__in { position: relative; z-index: 2; width: 100%; padding-block: var(--s8) var(--s8); }
@media (min-width: 64rem) { .hero__in { padding-block: var(--s10) var(--s9); } }
.hero__copy { max-width: 46rem; }
.hero .eyebrow { margin-bottom: 1.5rem; text-shadow: 0 1px 14px rgba(0,0,0,.8); }
.hero .dsp { text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.hero .sub { color: var(--on-dark); margin-top: var(--s3); text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hero__btns { margin-top: var(--s6); }

/* social-proof cluster under the hero buttons */
.proof { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s6); flex-wrap: wrap; }
.proof__faces { display: flex; }
.proof__faces img {
  width: 2.375rem; height: 2.375rem; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--paper); margin-left: -.625rem; background: var(--char-hi);
}
.proof__faces img:first-child { margin-left: 0; }
.proof__txt { font-size: .875rem; line-height: 1.35; color: var(--on-dark-mute); }
.proof__txt b { display: block; font-size: 1.0625rem; font-weight: 900; color: #fff; letter-spacing: -.01em; }

/* ── page hero (sub pages) ────────────────────────────────────────────────── */
.phero { position: relative; overflow: hidden; background: var(--ink); }
.phero__media { position: absolute; inset: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,11,12,.94) 0%, rgba(11,11,12,.78) 46%, rgba(11,11,12,.38) 100%),
    linear-gradient(to top, rgba(11,11,12,.55), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 8px);
}
.phero__in { position: relative; z-index: 2; padding-block: var(--s8); }
@media (min-width: 64rem) { .phero__in { padding-block: var(--s9) var(--s9); } }
.phero__copy { max-width: 44rem; }
.phero .lede { margin-top: var(--s4); max-width: 36rem; }
.crumbs {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark-dim); margin-bottom: var(--s4);
}
.crumbs a { transition: color .18s var(--ease); }
.crumbs a:hover { color: var(--red); }
.crumbs span { color: var(--red); }

/* ── split section: diagonal image / copy, alternating ────────────────────── */
.split { position: relative; background: var(--char); overflow: clip; }
.split__grid { display: grid; }
@media (min-width: 62rem) { .split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }

.split__media { position: relative; overflow: hidden; min-height: 17rem; }
@media (min-width: 62rem) { .split__media { min-height: 34rem; } }
.split__media img {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover;
  transform: translate3d(0, var(--px, 0px), 0);
  will-change: transform;
}
.split__media::after {           /* colour treatment layer */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(222,0,5,.14), rgba(11,11,12,.55));
  mix-blend-mode: multiply;
}
@media (min-width: 62rem) {
  .split--left  .split__media { clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%); }
  .split--right .split__media { clip-path: polygon(var(--skew) 0, 100% 0, 100% 100%, 0 100%); grid-column: 2; grid-row: 1; }
  .split--right .split__body  { grid-column: 1; grid-row: 1; }
}

.split__body { position: relative; padding: var(--s8) 0; display: flex; align-items: center; }
@media (min-width: 62rem) {
  .split__body { padding: var(--s9) 0; }
  .split--left  .split__body { padding-left: var(--s7); }
  .split--right .split__body { padding-right: var(--s7); }
}
.split__inner { width: 100%; max-width: 34rem; }
.split--right .split__inner { margin-left: auto; }
@media (max-width: 61.99rem) {
  .split__body { padding-inline: var(--gut); }
  .split__inner { max-width: none; }
}
@media (min-width: 62rem) {
  .split--left  .split__body { padding-right: var(--gut); }
  .split--right .split__body { padding-left: var(--gut); }
  .split--left  .split__inner { padding-right: var(--s5); }
}
.split--flip { background: var(--char-hi); }

/* sticky copy for tall stacked splits */
@media (min-width: 62rem) {
  .split--sticky .split__body { align-items: flex-start; }
  .split--sticky .split__inner { position: sticky; top: 8.5rem; }
}

/* tick list */
.ticks { display: grid; gap: .625rem; margin-top: var(--s5); }
.ticks li { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; font-weight: 600; }
.ticks svg { flex: none; margin-top: .1875rem; color: var(--red); }

/* ── trust bar ────────────────────────────────────────────────────────────── */
/* Sits directly under the hero: partner marks scrolling on the left, the one
   headline figure on the right. */
.trust { position: relative; background: var(--ink); padding-block: var(--s5); overflow: hidden; }
@media (max-width: 47.99rem) { .trust { padding-block: var(--s4) var(--s5); } }
/* Mobile: badge and figure sit side by side, marquee spans the row beneath.
   From 48rem it flattens to one row — badge, marquee, figure. */
.trust__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
}
.trust__hella { order: 1; }
.trust__stat  { order: 2; }
.trust__marq  { order: 3; min-width: 0; grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .trust__in { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s5); }
  .trust__marq  { order: 2; grid-column: auto; }
  .trust__stat  { order: 3; }
}

/* the Hella badge is fixed to the left — deliberately not part of the marquee */
.trust__hella {
  display: flex; align-items: center; gap: var(--s3); flex: none;
  position: relative; min-width: 0;
  transition: transform .3s var(--spring);
}
.trust__hella img {
  height: 2.5rem; width: auto; flex: none;
  filter: drop-shadow(0 4px 14px rgba(255,204,0,.28));
}
@media (min-width: 62rem) { .trust__hella img { height: 3.25rem; } }
.trust__hella:hover { transform: translateY(-2px); }
.trust__hella:active { transform: none; }
.trust__hella-txt {
  display: block; line-height: 1.25;
  font-size: .75rem; font-weight: 600; color: var(--on-dark-mute);
  max-width: 7rem;
}
@media (min-width: 75rem) { .trust__hella-txt { font-size: .8125rem; max-width: 8.5rem; } }
.trust__hella-txt b {
  display: block; color: #fff; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .1em; font-size: .625rem;
  color: #FFCC00; margin-bottom: .125rem;
}
/* the label only disappears in the band where the bar is horizontal but tight */
@media (min-width: 48rem) and (max-width: 74.99rem) { .trust__hella-txt { display: none; } }
@media (min-width: 48rem) {
  .trust__hella { padding-right: var(--s5); }
  .trust__hella::after {
    content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 3.25rem;
    background: linear-gradient(to bottom, transparent, var(--hair-dark) 22%, var(--hair-dark) 78%, transparent);
  }
}

.trust__lbl {
  font-size: .6875rem; font-weight: 800; font-style: italic; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-dark-dim);
  margin-bottom: var(--s3);
}
.trust__marq .trust__lbl { text-align: center; }

/* the number */
.trust__stat {
  position: relative;
  display: block; text-align: right; padding-left: var(--s5);
}
.trust__stat::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 2.75rem;
  background: linear-gradient(to bottom, transparent, var(--hair-dark) 22%, var(--hair-dark) 78%, transparent);
}
@media (min-width: 48rem) {
  .trust__stat { padding-left: var(--s6); }
  .trust__stat::before { height: 3.25rem; }
}
.trust__n {
  display: inline-flex; align-items: baseline;
  /* the phone floor is low so the figure fits beside the badge on one row */
  font-size: clamp(2rem, 6vw, 4.25rem); font-weight: 900; letter-spacing: -.035em;
  line-height: 1; color: var(--red);
  font-variant-numeric: tabular-nums;
}
.trust__suf { font-size: .42em; font-weight: 800; color: var(--on-dark); margin-left: .1em; }
.trust__lbl--stat {
  display: block; margin: 0; margin-top: .375rem;
  /* tight enough to stay on one line in the narrow phone column */
  font-size: .6875rem; letter-spacing: .07em; font-style: normal;
  white-space: nowrap; color: var(--on-dark-mute);
}
@media (min-width: 48rem) {
  .trust__lbl--stat { font-size: .75rem; letter-spacing: .12em; }
}

/* ── marquee ──────────────────────────────────────────────────────────────── */
.marq {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent);
}
.marq__track {
  display: flex; width: max-content;
  animation: marq 42s linear infinite;
  will-change: transform;
}
.marq:hover .marq__track,
.marq:focus-within .marq__track { animation-play-state: paused; }
.marq__run { display: flex; align-items: center; }
.marq__item {
  display: grid; place-items: center; flex: none;
  padding-inline: clamp(1.25rem, 3vw, 2.75rem);
}
.marq__item img {
  width: auto;
  /* every mark flattened to white: GoSafe only ships a negative asset and
     Bilinfo only a positive one, so a single treatment is the only way they
     can share a row on a dark band */
  filter: brightness(0) invert(1);
  opacity: .62;
  transition: opacity .25s var(--ease), transform .3s var(--spring);
}
a.marq__item:hover img { opacity: 1; transform: translateY(-2px); }
a.marq__item:active img { transform: none; }
@keyframes marq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .marq__track { animation: none; }
  .marq__item img { transition: none; }
}

/* ── Hella Service Partner band ───────────────────────────────────────────── */
/* The only yellow on the site, so the partnership reads as a badge. */
.hella {
  position: relative; overflow: hidden;
  background: var(--ink);
  padding-block: var(--s9);
  border-block: 1px solid rgba(255,204,0,.16);
}
.hella::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 120% at 88% 50%, rgba(255,204,0,.13) 0%, transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 8px);
}
.hella__in {
  position: relative; z-index: 1;
  display: grid; gap: var(--s7); align-items: center;
}
@media (min-width: 62rem) {
  .hella__in { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: var(--s8); }
}
.eyebrow--hella { color: #FFCC00; }
.hella .ticks svg { color: #FFCC00; }

.hella__badge {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s4);
}
.hella__badge img {
  width: clamp(11rem, 26vw, 21rem); height: auto;
  filter: drop-shadow(0 10px 30px rgba(255,204,0,.30));
}
.hella__badge-txt {
  font-size: .8125rem; font-weight: 600; line-height: 1.55;
  letter-spacing: .03em; color: var(--on-dark-mute);
}
.hella__badge-txt b {
  display: block; color: #FFCC00; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .1em; font-size: .75rem;
  margin-bottom: .25rem;
}

/* ── card grid (services / brands / posts) ────────────────────────────────── */
/* minmax(0,…) everywhere — a bare 1fr takes its min-content floor from the
   longest word inside a padded card and pushes the row past the viewport. */
.grid { display: grid; gap: var(--s4); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 34rem) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 40rem) {
  .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .grid { gap: var(--s5); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* photo tile with italic label — Torque's "Brands" grid */
.tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--char-hi);
  box-shadow: var(--sh-2);
}
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease);
}
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,12,.95) 0%, rgba(11,11,12,.78) 26%, rgba(11,11,12,.28) 62%, rgba(11,11,12,.05) 100%);
}
.tile:hover img { transform: scale(1.06); }
.tile:active img { transform: scale(1.02); }
.tile__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--s5) var(--s4) var(--s4); }
.tile__k {
  font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-hi); margin-bottom: .375rem;
}
.tile__t {
  font-size: 1.1875rem; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -.01em; color: #fff;
}
.tile__d { margin-top: .375rem; font-size: .875rem; color: var(--on-dark-mute); }
.tile__go {
  position: absolute; top: var(--s4); right: var(--s4); z-index: 2;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  background: var(--red); color: #fff;
  opacity: 0; transform: translateY(-.375rem);
  transition: opacity .25s var(--ease), transform .3s var(--spring);
}
.tile:hover .tile__go, .tile:focus-visible .tile__go { opacity: 1; transform: none; }

/* flat panel card on dark */
.panel {
  position: relative; padding: var(--s5);
  background: var(--char-hi); border-left: 3px solid var(--red);
  box-shadow: var(--sh-2);
  transition: transform .3s var(--ease), background-color .25s var(--ease);
}
a.panel:hover { transform: translateY(-3px); background: var(--char-top); }
a.panel:active { transform: none; }
.panel__ico { color: var(--red); margin-bottom: var(--s3); }
.panel__t { font-size: 1.0625rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; }
.panel__d { margin-top: .5rem; font-size: .9375rem; color: var(--on-dark-mute); line-height: 1.65; }
.panel__price {
  margin-top: var(--s4); font-size: .75rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red);
}

/* Hella variant — yellow rule instead of red, used only on the partner page */
.panel--hella { border-left-color: #FFCC00; }
.panel--hella .panel__ico { color: #FFCC00; }

/* light variant */
.panel--light { background: #fff; border-left-color: var(--red); color: var(--on-light); }
.panel--light .panel__d { color: var(--on-light-mute); }
a.panel--light:hover { background: #fff; box-shadow: 0 4px 10px rgba(11,11,12,.08), 0 18px 40px -14px rgba(11,11,12,.22); }

/* ── numbered process ─────────────────────────────────────────────────────── */
.steps { display: grid; gap: var(--s5); counter-reset: step; }
@media (min-width: 62rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.step { position: relative; padding-top: 3.75rem; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: 0; left: 0;
  font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(222,0,5,.55);
}
.step__t { font-size: 1.125rem; font-weight: 800; text-transform: uppercase; }
.step__d { margin-top: .625rem; font-size: .9375rem; color: var(--on-dark-mute); line-height: 1.7; }
.sec--light .step__d { color: var(--on-light-mute); }

/* ── service list (workshop pages) ────────────────────────────────────────── */
.slist { border-top: 1px solid var(--hair-dark); }
.slist__row {
  display: grid; gap: var(--s3); align-items: center;
  grid-template-columns: 1fr auto;
  padding: var(--s5) 0; border-bottom: 1px solid var(--hair-dark);
  transition: background-color .25s var(--ease), padding-left .3s var(--ease);
}
.slist__row:hover { background: rgba(255,255,255,.03); padding-left: var(--s4); }
.slist__n {
  font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: var(--red);
  margin-bottom: .375rem;
}
.slist__t { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.slist__d { margin-top: .5rem; font-size: .9375rem; color: var(--on-dark-mute); max-width: 44rem; line-height: 1.7; }
.sec--light .slist { border-color: var(--hair-light); }
.sec--light .slist__row { border-color: var(--hair-light); }
.sec--light .slist__row:hover { background: rgba(20,20,22,.035); }
.sec--light .slist__d { color: var(--on-light-mute); }

/* ── reviews ──────────────────────────────────────────────────────────────── */
.rev-lead { display: grid; gap: var(--s5); align-items: stretch; }
@media (min-width: 62rem) { .rev-lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s7); align-items: center; } }
.rev-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: var(--s5); background: #fff; color: var(--on-light);
  box-shadow: var(--sh-2);
}
.rev-card--dark { background: var(--char-hi); color: var(--on-dark); box-shadow: none; border: 1px solid var(--hair-dark); }
.rev-card__t { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .75rem; }
.rev-card__b { font-size: .9375rem; line-height: 1.75; color: var(--on-light-mute); }
.rev-card--dark .rev-card__b { color: var(--on-dark-mute); }
.rev-card__b::before { content: "“"; }
.rev-card__b::after { content: "”"; }
.rev-card__f {
  display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: var(--s4);
  border-top: 1px solid var(--hair-light);
}
.rev-card--dark .rev-card__f { border-color: var(--hair-dark); }
.rev-card__av {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--paper-3);
}
.rev-card__av--ph {
  display: grid; place-items: center; font-weight: 900; font-size: 1rem;
  background: var(--red); color: #fff;
}
.rev-card__nm { font-size: .875rem; font-weight: 800; letter-spacing: -.005em; }
.rev-card__meta { display: flex; align-items: center; gap: .375rem; margin-top: .125rem; }
.rev-card__src { margin-left: auto; flex: none; }
.stars { display: inline-flex; gap: 1px; color: #FFB300; }

.rev-photo { position: relative; overflow: hidden; box-shadow: var(--sh-2); }
.rev-photo img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.rev-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px var(--red); }

.rev-rail { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 48rem) { .rev-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .rev-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--hair-light); }
.faq details { border-bottom: 1px solid var(--hair-light); }
.faq summary {
  display: flex; align-items: flex-start; gap: var(--s4); justify-content: space-between;
  padding: var(--s5) 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red-lo); }
.faq__ico { position: relative; flex: none; width: 1.25rem; height: 1.25rem; margin-top: .25rem; }
.faq__ico::before, .faq__ico::after {
  content: ""; position: absolute; background: var(--red); border-radius: 1px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.faq__ico::before { left: 0; right: 0; top: calc(50% - 1px); height: 2px; }
.faq__ico::after  { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; }
.faq details[open] .faq__ico::after { transform: scaleY(0); opacity: 0; }
.faq__a { padding: 0 0 var(--s5); max-width: 52rem; font-size: .9375rem; line-height: 1.8; color: var(--on-light-mute); }
.sec--dark .faq, .sec--dark .faq details { border-color: var(--hair-dark); }
.sec--dark .faq__a { color: var(--on-dark-mute); }
.sec--dark .faq summary:hover { color: var(--red-hi); }

/* ── car inventory ────────────────────────────────────────────────────────── */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end;
  padding: var(--s5); background: var(--char-hi); border-left: 3px solid var(--red);
}
.field { display: grid; gap: .375rem; }
.field label {
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-dim);
}
.field select, .field input {
  appearance: none; font-family: inherit; font-size: .875rem; font-weight: 600;
  padding: .625rem 2.25rem .625rem .75rem; min-width: 11rem;
  color: var(--on-dark); background: var(--ink);
  border: 1px solid var(--hair-dark);
  transition: border-color .2s var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23DE0005' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center;
}
.field select:hover, .field select:focus { border-color: var(--red); }
.filters__count { margin-left: auto; font-size: .8125rem; font-weight: 700; color: var(--on-dark-mute); }

.car {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: var(--on-light); box-shadow: var(--sh-2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.car:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(11,11,12,.10), 0 26px 54px -18px rgba(11,11,12,.32); }
.car__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--paper-2); }
.car__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transition: transform .5s var(--ease); }
.car:hover .car__media img { transform: scale(1.05); }
.car__tag {
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: .375rem .75rem; background: var(--red); color: #fff;
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - .5rem) 100%, 0 100%);
}
.car__body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.car__t { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.car__sub { margin-top: .25rem; font-size: .8125rem; color: var(--on-light-mute); }
.car__specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem var(--s4);
  margin: var(--s4) 0; padding: var(--s3) 0;
  border-block: 1px solid var(--hair-light);
}
.car__specs div { font-size: .8125rem; }
.car__specs dt {
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-light-mute);
}
.car__specs dd { margin: .125rem 0 0; font-weight: 700; }
.car__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.car__price { font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; color: var(--red-lo); }

.empty {
  padding: var(--s8) var(--s5); text-align: center;
  border: 1px dashed var(--hair-dark); color: var(--on-dark-mute);
}

/* car detail */
.car-price {
  margin-top: var(--s5);
  font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 900; letter-spacing: -.03em;
  line-height: 1; color: var(--red);
  font-variant-numeric: tabular-nums;
}

.cdetail { display: grid; gap: var(--s6); }
@media (min-width: 64rem) { .cdetail { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s7); align-items: start; } }
.gal__main { position: relative; overflow: hidden; background: var(--char-hi); aspect-ratio: 4/3; }
.gal__main img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: .5rem; }
.gal__thumbs button {
  position: relative; padding: 0; border: 0; cursor: pointer; overflow: hidden;
  aspect-ratio: 4/3; background: var(--char-hi);
  transition: box-shadow .2s var(--ease), opacity .2s var(--ease);
  opacity: .6;
}
.gal__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumbs button:hover { opacity: 1; }
.gal__thumbs button[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 3px var(--red); }

.spec-table { display: grid; gap: 0; border-top: 1px solid var(--hair-dark); }
.spec-table div {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: .8125rem 0; border-bottom: 1px solid var(--hair-dark); font-size: .9375rem;
}
.spec-table dt { color: var(--on-dark-mute); font-weight: 500; }
.spec-table dd { margin: 0; font-weight: 700; text-align: right; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s4); }
.chips li {
  padding: .375rem .75rem; font-size: .8125rem; font-weight: 600;
  background: rgba(255,255,255,.06); border-left: 2px solid var(--red);
}

/* ── price / offer table ──────────────────────────────────────────────────── */
.price-grid { display: grid; gap: var(--s4); }
@media (min-width: 48rem) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── form embed ───────────────────────────────────────────────────────────── */
.formbox {
  position: relative; background: #fff; box-shadow: var(--sh-2);
  padding: .5rem;
}
.formbox--dark { background: var(--char-hi); border: 1px solid var(--hair-dark); box-shadow: none; }
.formbox iframe { width: 100%; border: 0; display: block; min-height: 40rem; }
.formbox--short iframe { min-height: 32rem; }
.formbox--tall iframe { min-height: 52rem; }

.mapbox { position: relative; overflow: hidden; box-shadow: var(--sh-2); }
.mapbox iframe { width: 100%; height: 22rem; border: 0; filter: grayscale(.35) contrast(1.05); }

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; background: var(--ink); }
.cta__bg { position: absolute; inset: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(11,11,12,.95) 0%, rgba(11,11,12,.80) 52%, rgba(165,0,4,.55) 100%);
}
.cta__in {
  position: relative; z-index: 2; padding-block: var(--s8);
  display: grid; gap: var(--s5); align-items: center;
}
@media (min-width: 62rem) {
  .cta__in { grid-template-columns: minmax(0, 1.5fr) auto; gap: var(--s7); padding-block: var(--s9); }
}
.cta .lede { max-width: 38rem; margin-top: var(--s4); }

/* ── footer ───────────────────────────────────────────────────────────────── */
.ftr { position: relative; background: var(--char); color: var(--on-dark); }
.ftr__top { padding-block: var(--s8); }
.ftr__grid { display: grid; gap: var(--s6); }
@media (min-width: 48rem) { .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .ftr__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s6); } }
.ftr__logo { width: 12rem; margin-bottom: var(--s4); }
.ftr h4 {
  font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin-bottom: var(--s4); padding-bottom: .5rem;
  position: relative;
}
.ftr h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 1.75rem; height: 2px; background: var(--red); }
.ftr__links { display: grid; gap: .625rem; }
.ftr__links a { font-size: .9375rem; color: var(--on-dark-mute); transition: color .18s var(--ease), transform .22s var(--ease); display: inline-block; }
.ftr__links a:hover { color: #fff; transform: translateX(3px); }
.ftr__hours { display: grid; gap: .5rem; font-size: .875rem; }
.ftr__hours div { display: flex; justify-content: space-between; gap: var(--s4); color: var(--on-dark-mute); }
.ftr__hours b { color: var(--on-dark); font-weight: 600; }
.ftr__hours .closed { color: var(--on-dark-dim); }
.ftr__contact { display: grid; gap: .75rem; font-size: .9375rem; }
.ftr__contact a, .ftr__contact span { display: flex; align-items: flex-start; gap: .625rem; color: var(--on-dark-mute); }
.ftr__contact a { transition: color .18s var(--ease); }
.ftr__contact a:hover { color: #fff; }
.ftr__contact svg { flex: none; margin-top: .25rem; color: var(--red); }
.ftr__social { display: flex; gap: .5rem; margin-top: var(--s4); }
.ftr__social a {
  width: 2.125rem; height: 2.125rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.07); color: #fff;
  transition: background-color .2s var(--ease), transform .25s var(--spring);
}
.ftr__social a:hover { background: var(--red); transform: translateY(-2px); }
.ftr__social a:active { transform: none; }
.ftr__bar {
  background: #000; padding-block: var(--s4);
  font-size: .8125rem; color: var(--on-dark-dim);
}
.ftr__bar-in { display: flex; flex-wrap: wrap; gap: .5rem var(--s5); align-items: center; justify-content: space-between; }
.ftr__bar a { transition: color .18s var(--ease); }
.ftr__bar a:hover { color: var(--red-hi); }
.ftr__legal { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* sticky mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink); border-top: 1px solid var(--hair-dark);
}
@media (min-width: 64rem) { .callbar { display: none; } }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem .5rem; font-size: .8125rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.callbar a:first-child { background: var(--red); color: #fff; }
.callbar a:first-child:active { background: var(--red-lo); }
.callbar a:last-child { color: var(--on-dark); }
.callbar a:last-child:active { background: var(--char-hi); }
body { padding-bottom: 3.25rem; }
@media (min-width: 64rem) { body { padding-bottom: 0; } }

/* ── reveal on scroll ─────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(1.25rem); }
.rv.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.rv-d1.in { transition-delay: .07s; }
.rv-d2.in { transition-delay: .14s; }
.rv-d3.in { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .split__media img { transform: none !important; }
  .btn, .tile img, .car { transition: none; }
}

/* ── prose (blog / policy) ────────────────────────────────────────────────── */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 {
  margin-top: var(--s7); font-size: 1.5rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: -.015em;
}
.prose h3 { margin-top: var(--s6); font-size: 1.125rem; font-weight: 800; }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.8; color: var(--on-light-mute); }
.prose ul { display: grid; gap: .625rem; padding-left: 1.25rem; list-style: disc; }
.prose strong { color: var(--on-light); font-weight: 700; }
.prose a { color: var(--red-lo); text-decoration: underline; text-underline-offset: .2em; }
.prose a:hover { color: var(--red); }
.sec--dark .prose p, .sec--dark .prose li { color: var(--on-dark-mute); }
.sec--dark .prose strong { color: var(--on-dark); }

/* ── misc utilities ───────────────────────────────────────────────────────── */
.center { text-align: center; }
.mt4 { margin-top: var(--s4); } .mt5 { margin-top: var(--s5); }
.mt6 { margin-top: var(--s6); } .mt7 { margin-top: var(--s7); }
.mb5 { margin-bottom: var(--s5); } .mb6 { margin-bottom: var(--s6); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sec-head { max-width: 44rem; margin-bottom: var(--s7); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--split { display: grid; gap: var(--s5); max-width: none; align-items: end; }
@media (min-width: 62rem) { .sec-head--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s8); } }