/* ═══════════════════════════════════════════════════════════════════════
   A&M DETAILING
   Design system  ·  deep-black + crimson cinematic
   ─────────────────────────────────────────────────────────────────────
   1.  Tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography
   5.  Buttons & controls
   6.  Header / nav / mobile menu
   7.  Preloader
   8.  Hero
   9.  Marquee
   10. Generated media art  ← replace with real photos, see README
   11. Promise
   12. Services accordion
   13. Before / after comparison
   14. Process
   15. Work grid
   16. Reviews
   17. Drop-off steps
   18. FAQ
   19. Quote wizard
   20. CTA band / footer / sticky bar
   21. Reveal animation states
   22. Responsive
   23. Reduced motion & print
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Surface ramp — never pure #000 (OLED smear + harsh contrast edges) */
  --ink:        #08090b;
  --ink-2:      #0b0d10;
  --surface:    #101319;
  --surface-2:  #161a21;
  --surface-3:  #1d222b;

  --fg:         #f2f4f7;
  --fg-muted:   #a4abb7;
  /* #6f7683 measured 4.26:1 on --surface — just under AA. Lightened to clear
     4.5:1 on every surface in the ramp. */
  --fg-dim:     #7d8492;

  --line:       rgba(255,255,255,.09);
  --line-soft:  rgba(255,255,255,.055);
  --line-hard:  rgba(255,255,255,.16);

  /* Crimson accent + its glow */
  --red:        #e11d2a;
  --red-hot:    #ff2f3c;
  --red-deep:   #8e0f18;
  --red-glow:   rgba(225,29,42,.42);
  --on-red:     #fff;
  /* --red is 4.18:1 on the dark ramp: fine for large text, borders and
     icons (needs 3:1), NOT for small text. Small red copy uses this. */
  --red-text:   #ff2f3c;

  /* Type */
  --font-display: 'Anton', 'Arial Narrow', system-ui, sans-serif;
  --font-serif:   'Bodoni Moda', 'Times New Roman', serif;
  --font-body:    'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-lg:   clamp(1.06rem, .99rem + .32vw, 1.22rem);
  --fs-xl:   clamp(1.25rem, 1.12rem + .6vw, 1.6rem);
  --fs-2xl:  clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-3xl:  clamp(2.3rem, 1.7rem + 2.9vw, 4.4rem);
  --fs-hero: clamp(3rem, 1.4rem + 8.4vw, 9.5rem);

  /* Spacing — density 4/10 (standard) */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  --shell:   1280px;
  --shell-x: clamp(1.25rem, 4vw, 3.5rem);

  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* Motion — expo.out family, per the design system */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);
  --t-fast:    .18s;
  --t-base:    .3s;
  --t-slow:    .6s;

  --header-h: 76px;
  --shadow-lift: 0 24px 60px -20px rgba(0,0,0,.85);
}

/* ─── 2. RESET & BASE ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Ambient page wash so the black never reads flat */
  background-image:
    radial-gradient(1100px 620px at 78% -6%,  rgba(225,29,42,.12), transparent 62%),
    radial-gradient(900px 700px at -8% 42%,   rgba(80,96,130,.07), transparent 60%);
  background-attachment: fixed;
}

img, svg, video { display: block; max-width: 100%; }
svg { fill: none; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

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

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

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--red); color: #fff;
  padding: .7rem 1.1rem; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500;
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ─── 3. LAYOUT PRIMITIVES ──────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-x);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section-head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

.section-head--split {
  display: grid;
  gap: var(--space-5);
  align-items: end;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.15fr .85fr; gap: var(--space-8); }
}

.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.section-note {
  color: var(--fg-muted);
  font-size: var(--fs-lg);
  max-width: 46ch;
  line-height: 1.7;
}

/* ─── 4. TYPOGRAPHY ─────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: var(--space-4);
}
.eyebrow span {
  color: var(--red-text);
  font-family: var(--font-serif);
  font-size: .95rem;
  letter-spacing: 0;
  font-style: italic;
}
.eyebrow::after {
  content: ''; width: clamp(28px, 6vw, 64px); height: 1px;
  background: linear-gradient(90deg, var(--line-hard), transparent);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.005em;
  text-transform: uppercase;
}

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--red);
  /* Optical size correction: serif italic runs visually smaller than Anton */
  font-size: .92em;
}

.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red-hot);
  box-shadow: 0 0 0 0 var(--red-glow);
  animation: pulse 2.4s var(--ease-io) infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--red-glow); }
  70%  { box-shadow: 0 0 0 9px rgba(225,29,42,0); }
  100% { box-shadow: 0 0 0 0 rgba(225,29,42,0); }
}

/* ─── 5. BUTTONS & CONTROLS ─────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .85rem 1.5rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn > span { position: relative; z-index: 2; }
.btn > svg  { position: relative; z-index: 2; }

.btn--primary {
  background: var(--red);
  color: var(--on-red);
  box-shadow: 0 10px 30px -10px var(--red-glow);
}
/* Sheen wipe on hover — pure transform, no layout cost */
.btn--primary::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-110%);
  transition: transform .65s var(--ease);
}
.btn--primary:hover { box-shadow: 0 16px 40px -12px var(--red-glow); transform: translateY(-2px); }
.btn--primary:hover::before { transform: translateX(110%); }
.btn--primary:active { transform: translateY(0) scale(.98); }

.btn--ghost {
  border: 1px solid var(--line-hard);
  color: var(--fg);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--red); color: #fff; transform: translateY(-2px); }
.btn--ghost:active { transform: translateY(0) scale(.98); }

.btn--sm  { min-height: 44px; padding: .55rem 1.15rem; font-size: var(--fs-xs); }
.btn--lg  { min-height: 56px; padding: 1rem 2rem; }
.btn--block { width: 100%; }

/* ─── 6. HEADER / NAV ───────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              backdrop-filter var(--t-base) var(--ease),
              transform var(--t-slow) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(8,9,11,.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
}

.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--fg);
  min-height: 44px;                 /* touch target, not just the glyph box */
}
.brand__mark { width: 34px; height: 34px; color: var(--red); flex: none; }
/* SVG <text> monogram inside the badge. dominant-baseline is set in the markup
   for centring; this only handles the face. */
.brand__mono {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .5px;
  fill: currentColor;
  stroke: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-size: 1.06rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.brand__sub {
  font-size: .66rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--fg-muted); margin-top: 3px;
}

.nav { display: none; }
.nav__list { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.nav__list a {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  padding-block: .4rem;
  transition: color var(--t-base) var(--ease);
}
.nav__list a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base) var(--ease);
}
.nav__list a:hover, .nav__list a.is-current { color: var(--fg); }
.nav__list a:hover::after, .nav__list a.is-current::after { transform: scaleX(1); transform-origin: left; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }

.phone-link {
  display: none; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); color: var(--fg-muted);
  transition: color var(--t-base) var(--ease);
}
.phone-link svg { width: 16px; height: 16px; }
.phone-link:hover { color: var(--red-hot); }

.burger {
  width: 44px; height: 44px;
  display: grid; place-content: center; gap: 6px;
  border-radius: var(--r-sm);
}
.burger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--fg); border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 85;
  padding: calc(var(--header-h) + 2rem) var(--shell-x) max(2rem, env(safe-area-inset-bottom));
  background: rgba(8,9,11,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.mobile-menu[hidden] { display: flex; }           /* animate rather than snap */
.mobile-menu.is-open { opacity: 1; visibility: visible; }

.mobile-menu__nav li { border-bottom: 1px solid var(--line-soft); }
.mobile-menu__nav a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  text-transform: uppercase; line-height: 1;
  opacity: 0; transform: translateY(14px);
  transition: color var(--t-base) var(--ease);
}
.mobile-menu.is-open .mobile-menu__nav a {
  animation: menuIn .5s var(--ease) forwards;
}
.mobile-menu__nav li:nth-child(1) a { animation-delay: .06s; }
.mobile-menu__nav li:nth-child(2) a { animation-delay: .10s; }
.mobile-menu__nav li:nth-child(3) a { animation-delay: .14s; }
.mobile-menu__nav li:nth-child(4) a { animation-delay: .18s; }
.mobile-menu__nav li:nth-child(5) a { animation-delay: .22s; }
.mobile-menu__nav li:nth-child(6) a { animation-delay: .26s; }
@keyframes menuIn { to { opacity: 1; transform: translateY(0); } }
.mobile-menu__nav a:hover { color: var(--red); }
.mobile-menu__nav i {
  font-style: normal; font-family: var(--font-body);
  font-size: .7rem; letter-spacing: .2em; color: var(--red);
}

.mobile-menu__foot { margin-top: var(--space-7); display: grid; gap: var(--space-4); }
.mobile-menu__tel {
  font-family: var(--font-display); font-size: 1.5rem;
  text-align: center; letter-spacing: .04em;
  min-height: 48px; display: grid; place-content: center;
}
.mobile-menu__addr {
  text-align: center; font-size: var(--fs-sm); color: var(--fg-dim);
}

/* ─── 7. PRELOADER ──────────────────────────────────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-content: center;
  background: var(--ink);
}
.preloader__inner { display: grid; gap: 1.2rem; justify-items: center; }
.preloader__mark {
  font-family: var(--font-display);
  font-size: 2.4rem; letter-spacing: .18em;
  color: var(--fg);
}
.preloader__bar {
  width: min(210px, 50vw); height: 2px;
  background: var(--line); overflow: hidden; border-radius: 2px;
}
.preloader__bar i {
  display: block; height: 100%; width: 0%;
  background: var(--red);
  box-shadow: 0 0 14px var(--red-glow);
  transition: width .45s var(--ease);
}
.preloader.is-done { opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.no-js .preloader { display: none; }

/* ─── 8. HERO ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--header-h) + 3rem) 5rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

.hero__glow {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
/* NOTE: these breathe via opacity/filter only — never transform. GSAP owns
   transform on these elements for the scroll parallax, and a CSS animation
   would silently win that conflict. */
.hero__glow--a {
  width: 62vw; height: 62vw; max-width: 820px; max-height: 820px;
  top: -18%; right: -12%;
  background: radial-gradient(circle, rgba(225,29,42,.5), rgba(225,29,42,.06) 62%, transparent 72%);
  animation: breathe 22s var(--ease-io) infinite alternate;
}
.hero__glow--b {
  width: 46vw; height: 46vw; max-width: 560px; max-height: 560px;
  bottom: -14%; left: -12%;
  background: radial-gradient(circle, rgba(120,20,30,.42), transparent 68%);
  animation: breathe 28s var(--ease-io) infinite alternate-reverse;
}
@keyframes breathe {
  from { opacity: .72; }
  to   { opacity: 1; }
}

/* Abstract glossy flank — reads as a car body without being a bad drawing.
   Swap for a real photo by setting --hero-img on .hero__panel (see README). */
.hero__panel {
  position: absolute;
  right: -8%; bottom: -6%;
  width: 92vw; height: 68vh;
  max-width: 1150px;
  background:
    var(--hero-img, none),
    radial-gradient(120% 90% at 30% 8%, rgba(255,255,255,.09), transparent 46%),
    linear-gradient(168deg, #23272f 0%, #14161b 34%, #0b0d10 62%, #101318 100%);
  background-size: cover;
  background-position: center;
  border-radius: 46% 30% 34% 22% / 58% 46% 40% 30%;
  filter: blur(.4px);
  opacity: .92;
  will-change: transform;
}
/* Specular highlight sweeping the "body line" */
.hero__sheen {
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(102deg, transparent 26%, rgba(255,255,255,.16) 40%, rgba(255,255,255,.5) 45%, rgba(255,255,255,.14) 50%, transparent 62%),
    linear-gradient(258deg, transparent 40%, rgba(225,29,42,.3) 62%, transparent 80%);
  mix-blend-mode: screen;
  animation: sheen 9s var(--ease-io) infinite;
}
@keyframes sheen {
  0%, 100% { opacity: .55; transform: translateX(-4%); }
  50%      { opacity: 1;   transform: translateX(4%); }
}
/* Wheel arch suggestion */
.hero__arch {
  position: absolute; left: 16%; bottom: -14%;
  width: 34%; aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.07);
  box-shadow: inset 0 26px 60px rgba(0,0,0,.85), 0 0 70px rgba(225,29,42,.18);
  background: radial-gradient(circle at 42% 34%, rgba(255,255,255,.06), transparent 58%);
}

/* Film grain — kills banding on the big black gradients */
.hero__grain, .reviews__bg::after {
  position: absolute; inset: 0;
  opacity: .5; pointer-events: none;
  background-image: 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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(8,9,11,.72) 100%),
    linear-gradient(180deg, rgba(8,9,11,.85) 0%, transparent 26%, transparent 62%, var(--ink) 100%);
}

.hero__inner { position: relative; z-index: 2; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .5rem 1rem .5rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--fg-muted);
  margin-bottom: var(--space-5);
}
.hero__eyebrow strong { color: var(--fg); font-weight: 500; }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.hero__title .line { display: block; }
/* Gradient stays within legible reds. An earlier #6d0d15 tail measured
   1.63:1 against the page — the last word literally disappeared. Darkest
   stop is now --red at 4.18:1, comfortably past the 3:1 large-text bar. */
.hero__title .line--accent {
  color: transparent;
  background: linear-gradient(94deg, #ff5560 0%, var(--red-hot) 44%, var(--red) 100%);
  -webkit-background-clip: text; background-clip: text;
}
/* Per-character wrappers produced by JS; also the no-JS resting state.
   .word keeps a whole word on one line — without it, every .char is its own
   inline-block and the browser will happily break in the middle of a word. */
.hero__title .word {
  display: inline-block;
  white-space: nowrap;
}
.hero__title .char {
  display: inline-block;
  will-change: transform, opacity;
}

.hero__lede {
  max-width: 54ch;
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  line-height: 1.75;
  margin-bottom: var(--space-6);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
  max-width: 720px;
}
.stat dt {
  font-size: var(--fs-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-dim);
  margin-bottom: .25rem;
}
.stat dd {
  display: flex; align-items: baseline; gap: .12rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat dd em { font-style: normal; font-size: .5em; color: var(--red-text); }
.stat__star { width: .46em; height: .46em; fill: var(--red); margin-left: .12em; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  flex-direction: column; align-items: center; gap: .55rem;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--fg-dim);
}
.hero__scroll i {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--line-hard), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll i::after {
  content: ''; position: absolute; inset: 0;
  background: var(--red);
  animation: scrollLine 2.2s var(--ease-io) infinite;
}
@keyframes scrollLine {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ─── 9. MARQUEE ────────────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  background: linear-gradient(90deg, var(--ink-2), var(--surface) 50%, var(--ink-2));
  padding-block: 1.05rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 2.2rem;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
.marquee__track .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ─── 10. GENERATED MEDIA ART ───────────────────────────────────────────
   Pure CSS stand-ins for photography — zero bytes, zero requests.
   To use a real photo, set --img on the element:
       <div class="media-art" style="--img:url(assets/img/audi.jpg)">
   The gradient stack stays underneath as the loading/fallback state.
   ──────────────────────────────────────────────────────────────────── */
.media-art {
  position: relative;
  overflow: hidden;
  background-color: var(--surface);
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.media-art::before,
.media-art::after { content: ''; position: absolute; inset: 0; }
.media-art::before { z-index: -2; }   /* base paint */
.media-art::after  { z-index: -1; }   /* specular / texture */
/* A slot holding a real photograph.
   Note the paint order: .media-art isolates a stacking context, so the
   element's own background-image (the photo) paints FIRST and the ::before /
   ::after gradients paint on top of it. So the base gradient has to go fully
   transparent or it would tint the photo, and the specular sweep is dialled
   right down to a hint rather than a white wash across the car.

   This is a class rather than the old [style*="--img"] attribute match:
   substring-matching the style attribute broke the moment --img was set from
   anywhere but an inline style, which is exactly what a CMS does. */
.media-art--photo::before { opacity: 0; }
.media-art--photo::after  { opacity: .1; }

/* Deep black gloss */
.media-art--gloss::before {
  background:
    radial-gradient(130% 80% at 26% 6%,  rgba(255,255,255,.2), transparent 44%),
    linear-gradient(158deg, #2b3038 0%, #14171d 40%, #090a0d 74%, #15181e 100%);
}
.media-art--gloss::after {
  background: linear-gradient(104deg, transparent 32%, rgba(255,255,255,.34) 46%, transparent 58%);
  mix-blend-mode: screen; opacity: .8;
}

/* Machine-polish / depth */
.media-art--depth::before {
  background:
    radial-gradient(90% 70% at 70% 74%, rgba(225,29,42,.24), transparent 60%),
    linear-gradient(140deg, #1c2129 0%, #0d0f14 52%, #191d25 100%);
}
.media-art--depth::after {
  background:
    repeating-conic-gradient(from 210deg at 66% 68%,
      rgba(255,255,255,.055) 0deg 6deg, transparent 6deg 14deg);
  opacity: .9;
}

/* Interior — stitched leather feel */
.media-art--interior::before {
  background:
    radial-gradient(80% 60% at 20% 16%, rgba(225,29,42,.3), transparent 62%),
    linear-gradient(158deg, #3a1418 0%, #1a0d10 46%, #0b0c0f 100%);
}
.media-art--interior::after {
  background:
    repeating-linear-gradient(122deg, rgba(255,255,255,.05) 0 1px, transparent 1px 13px),
    radial-gradient(60% 40% at 78% 84%, rgba(255,255,255,.09), transparent 60%);
}

/* Crimson performance body */
.media-art--red::before {
  background:
    radial-gradient(110% 80% at 68% 18%, rgba(255,60,72,.5), transparent 56%),
    linear-gradient(150deg, #7e0e18 0%, #37070c 44%, #0d0a0c 100%);
}
.media-art--red::after {
  background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.4) 47%, transparent 60%);
  mix-blend-mode: screen;
}

/* Alloy wheel */
.media-art--wheel::before {
  background:
    radial-gradient(circle at 50% 52%, #2e343d 0 16%, #14171c 17% 34%, #0b0d11 35%),
    linear-gradient(160deg, #1b1f26, #0a0b0e);
}
.media-art--wheel::after {
  background:
    repeating-conic-gradient(from 0deg at 50% 52%,
      rgba(255,255,255,.13) 0deg 3deg, transparent 3deg 24deg),
    radial-gradient(circle at 50% 52%, transparent 40%, rgba(225,29,42,.22) 46%, transparent 54%);
}

/* Mirror finish — the "after" state */
.media-art--mirror::before {
  background:
    linear-gradient(180deg, #363c46 0%, #171b21 34%, #050608 62%, #1b1f26 100%);
}
.media-art--mirror::after {
  background:
    linear-gradient(97deg, transparent 12%, rgba(255,255,255,.5) 26%, transparent 34%),
    linear-gradient(97deg, transparent 52%, rgba(255,255,255,.32) 62%, transparent 70%),
    radial-gradient(70% 44% at 50% 100%, rgba(225,29,42,.28), transparent 70%);
  mix-blend-mode: screen;
}

/* Dull, filmed-over, water-spotted — the "before" state.
   Deliberately NOT swirl marks: swirls are a paint-correction defect, and
   correction isn't a service here. This reads as road film, salt haze and
   spotting, which is what an Express Refresh actually removes. */
.media-art--swirled::before {
  background:
    linear-gradient(180deg, #30343b 0%, #1d2026 40%, #0e1013 70%, #1a1d22 100%);
}
.media-art--swirled::after {
  background:
    /* dried water spotting */
    radial-gradient(circle at 22% 32%, rgba(198,206,216,.2) 0 3px, transparent 4px),
    radial-gradient(circle at 38% 55%, rgba(198,206,216,.16) 0 4px, transparent 5px),
    radial-gradient(circle at 61% 27%, rgba(198,206,216,.18) 0 3px, transparent 4px),
    radial-gradient(circle at 74% 62%, rgba(198,206,216,.14) 0 5px, transparent 6px),
    radial-gradient(circle at 49% 78%, rgba(198,206,216,.15) 0 3px, transparent 4px),
    radial-gradient(circle at 85% 40%, rgba(198,206,216,.13) 0 4px, transparent 5px),
    /* uneven road-film blotching */
    radial-gradient(60% 42% at 30% 60%, rgba(168,178,192,.16), transparent 70%),
    radial-gradient(50% 38% at 76% 34%, rgba(168,178,192,.13), transparent 72%),
    /* flat grey haze killing the reflection */
    linear-gradient(0deg, rgba(150,160,175,.2), rgba(150,160,175,.2));
  filter: blur(.4px);
}

/* ─── 11. PROMISE ───────────────────────────────────────────────────── */
.promise__grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .promise__grid { grid-template-columns: repeat(3, 1fr); } }

.promise-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--ink-2));
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.promise-card:hover { border-color: var(--line-hard); transform: translateY(-4px); }
.promise-card__media { aspect-ratio: 16 / 10; }
.promise-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-xl); line-height: 1.05;
  text-transform: uppercase;
  padding: var(--space-5) var(--space-5) var(--space-2);
}
.promise-card p {
  color: var(--fg-muted); font-size: var(--fs-sm);
  padding: 0 var(--space-5) var(--space-5);
  line-height: 1.72;
}

/* ─── 12. SERVICES ACCORDION ────────────────────────────────────────── */
.services__list { border-top: 1px solid var(--line-soft); }
.svc { border-bottom: 1px solid var(--line-soft); }

.svc__head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: clamp(1.1rem, .8rem + 1vw, 1.9rem) 0;
  text-align: left;
  transition: color var(--t-base) var(--ease);
}
.svc__idx {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-sm); color: var(--red-text);
  min-width: 2.1ch;
}
.svc__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.2rem, .95rem + 1.5vw, 2.1rem);
  line-height: 1.05; text-transform: uppercase;
  letter-spacing: .005em;
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.svc__name .tag {
  display: inline-block; vertical-align: middle;
  margin-left: .6rem;
  font-family: var(--font-body); font-style: normal;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red); border: 1px solid currentColor;
  border-radius: var(--r-pill); padding: .18rem .55rem;
}
.svc__price {
  font-size: var(--fs-sm); color: var(--fg-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.svc__chev {
  position: relative; width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 50%;
  flex: none;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.svc__chev::before, .svc__chev::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 1.5px; background: currentColor;
  transform: translate(-50%,-50%);
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.svc__chev::after { transform: translate(-50%,-50%) rotate(90deg); }

.svc__head:hover .svc__name { color: var(--red-hot); transform: translateX(6px); }
.svc__head:hover .svc__chev { border-color: var(--red); background: rgba(225,29,42,.1); }
.svc__head[aria-expanded="true"] .svc__name { color: var(--red-hot); }
.svc__head[aria-expanded="true"] .svc__chev { border-color: var(--red); background: var(--red); color: #fff; }
.svc__head[aria-expanded="true"] .svc__chev::after { transform: translate(-50%,-50%) rotate(0deg); opacity: 0; }

.svc__body { overflow: hidden; }
.svc__body-inner {
  display: grid; gap: var(--space-4);
  padding: 0 0 var(--space-6) calc(2.1ch + var(--space-3));
  max-width: 68ch;
}
.svc__body-inner > p { color: var(--fg-muted); line-height: 1.75; }
.svc__meta { font-size: var(--fs-sm); color: var(--fg-dim); }
.svc__meta strong { color: var(--fg); font-weight: 500; }

.svc--featured .svc__idx { color: var(--red-hot); }

/* ── Coming-soon services ──────────────────────────────────────────────
   Visually recessive but still legible: dimmed to ~55% rather than the
   usual disabled-grey, because these are read, not just skipped past.
   No button, no tabindex — nothing here is focusable or clickable. */
.svc-soon { margin-top: var(--space-7); }
.svc-soon__label {
  font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: .75rem;
}
.svc-soon__label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.services__list--soon { border-top: 1px solid var(--line-soft); }

/* Recession is done with COLOUR, not a group opacity. Dimming the whole row
   with opacity multiplies against children that are already --fg-dim, which
   dragged the numerals and the badge down to 2.34:1. Every value below is
   measured against the page background on its own. */
.svc__head--soon {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: clamp(.9rem, .7rem + .7vw, 1.4rem) 0;
  cursor: default;                 /* not interactive — say so */
}
.svc__head--soon .svc__name {
  font-size: clamp(1.05rem, .9rem + 1vw, 1.6rem);
  color: var(--fg-muted);          /* 9.0:1 — clearly secondary, still legible */
}
.svc__head--soon .svc__idx   { color: var(--fg-muted); }
.svc__head--soon .svc__price { color: var(--fg-dim); }
.svc__soon-icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-content: center;
  color: var(--fg-dim);
}
.svc__soon-icon svg { width: 19px; height: 19px; }

.tag--soon {
  /* base .tag is .58rem (~9px) — too small to read once muted, so this
     variant sizes up rather than inheriting it */
  font-size: .72rem !important;
  color: var(--fg-muted) !important;
  border-color: var(--line-hard) !important;
}

.svc-soon__note {
  margin-top: var(--space-4);
  font-size: var(--fs-sm); color: var(--fg-dim);
  max-width: 52ch; line-height: 1.7;
}

.ticks { display: grid; gap: .55rem; }
.ticks li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--red);
}

/* ─── 13. BEFORE / AFTER ────────────────────────────────────────────── */
.compare__stage { max-width: 1000px; margin-inline: auto; }

.ba {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  touch-action: pan-y;               /* let the page still scroll vertically */
  --pos: 50%;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer--after {
  clip-path: inset(0 0 0 var(--pos));
}
.ba__tag {
  position: absolute; top: 1rem; z-index: 4;
  padding: .35rem .8rem;
  font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
  border-radius: var(--r-pill);
  background: rgba(8,9,11,.7);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.ba__tag--l { left: 1rem; }
.ba__tag--r { right: 1rem; color: var(--red-hot); border-color: rgba(225,29,42,.4); }

.ba__handle {
  position: absolute; top: 0; bottom: 0; z-index: 5;
  left: var(--pos);
  width: 2px;
  background: linear-gradient(180deg, transparent, #fff 12%, #fff 88%, transparent);
  transform: translateX(-1px);
  pointer-events: none;
}
.ba__handle i {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(8,9,11,.7);
  border: 1.5px solid #fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.ba__handle i::before, .ba__handle i::after {
  content: ''; position: absolute; top: 50%;
  width: 7px; height: 7px;
  border-top: 1.6px solid #fff; border-right: 1.6px solid #fff;
}
.ba__handle i::before { left: 13px;  transform: translateY(-50%) rotate(-135deg); }
.ba__handle i::after  { right: 13px; transform: translateY(-50%) rotate(45deg); }

/* The range input IS the control — keyboard + screen-reader accessible,
   made invisible but kept full-size and hit-testable. */
.ba__range {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  background: transparent;
  cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 56px; height: 100%; cursor: ew-resize; opacity: 0;
}
.ba__range::-moz-range-thumb {
  width: 56px; height: 400px; border: 0; cursor: ew-resize; opacity: 0;
}
.ba__range::-moz-range-track { background: transparent; }
.ba__range:focus-visible { outline-offset: -4px; }

.compare__caption {
  text-align: center; margin-top: var(--space-4);
  font-size: var(--fs-sm); color: var(--fg-dim);
}

/* ─── 14. PROCESS ───────────────────────────────────────────────────── */
.process__track-wrap { padding-inline: var(--shell-x); }
.process__track {
  max-width: var(--shell); margin-inline: auto;
  display: grid; gap: var(--space-6);
}
@media (min-width: 860px) {
  .process__track { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}

.step { position: relative; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.step__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 2rem + 2vw, 3.6rem);
  line-height: 1;
  color: transparent;
  /* Decorative ghost numeral — the <ol> carries the real sequence for AT.
     Stroked a little heavier than --line-hard so it reads at a glance. */
  -webkit-text-stroke: 1px rgba(255,255,255,.3);
  display: block; margin-bottom: var(--space-3);
  transition: -webkit-text-stroke-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
.step:hover .step__num { color: var(--red-text); -webkit-text-stroke-color: var(--red-text); }
.step__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-xl); text-transform: uppercase;
  line-height: 1.05; margin-bottom: var(--space-3);
}
.step p { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.75; }
.step__line {
  position: absolute; top: -1px; left: 0;
  height: 1px; width: 0;
  background: var(--red);
  box-shadow: 0 0 12px var(--red-glow);
}

/* ─── 15. WORK GRID ─────────────────────────────────────────────────── */
.work__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
}
@media (min-width: 900px) {
  .work__grid { grid-template-columns: repeat(4, 1fr); }
  .tile--tall { grid-row: span 2; }
  .tile--wide { grid-column: span 2; }
}

.tile {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  min-height: 190px;
  isolation: isolate;
}
.tile__media {
  position: absolute; inset: 0;
  transition: transform .9s var(--ease);
}
.tile:hover .tile__media { transform: scale(1.07); }
.tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 42%, rgba(8,9,11,.9) 100%);
  transition: opacity var(--t-base) var(--ease);
}
.tile figcaption {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: var(--space-4);
  display: grid; gap: .2rem;
}
.tile__label {
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-hot);
}
.tile__meta {
  font-family: var(--font-display); font-size: var(--fs-lg);
  text-transform: uppercase; line-height: 1.1;
}
.tile--tall { min-height: 260px; }
@media (min-width: 900px) { .tile { min-height: 230px; } .tile--tall { min-height: 100%; } }

/* ─── 16. REVIEWS ───────────────────────────────────────────────────── */
.reviews { position: relative; isolation: isolate; overflow: hidden; }
.reviews__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 50% 12%, rgba(225,29,42,.2), transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, #14161b 42%, var(--ink) 100%);
}
.reviews__bg::after { content: ''; }

.rating {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: var(--space-4);
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.rating__stars { display: inline-flex; gap: .15rem; }
.rating__stars svg { width: 17px; height: 17px; fill: var(--red); }

.reviews__grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }

.review {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.review:hover { transform: translateY(-5px); border-color: rgba(225,29,42,.32); }
.review::before {
  content: '\201C';
  position: absolute; top: -.1em; left: var(--space-5);
  font-family: var(--font-serif); font-size: 4.6rem;
  color: var(--red); opacity: .32; line-height: 1;
}
.review blockquote p { color: var(--fg); line-height: 1.75; font-size: var(--fs-sm); }
.review figcaption {
  margin-top: auto; display: flex; flex-direction: column; gap: .1rem;
  padding-top: var(--space-3); border-top: 1px solid var(--line-soft);
}
.review__name { font-weight: 500; letter-spacing: .04em; }
.review__src { font-size: var(--fs-xs); color: var(--fg-dim); letter-spacing: .1em; text-transform: uppercase; }

.reviews__note {
  /* Must clear the cards' 34px reveal travel. At the old 24px the cards
     landed on top of this line mid-animation every time the section
     scrolled into view. */
  margin-top: var(--space-7); text-align: center;
  font-size: var(--fs-xs); color: var(--fg-dim); letter-spacing: .06em;
}
/* --space-7 (48px), not 32px: the cards travel 34px on reveal, so anything
   tighter gets landed on mid-animation. Same reason as .reviews__note. */
.reviews__cta { margin-top: var(--space-7); display: flex; justify-content: center; }

/* ─── 17. DROP-OFF ──────────────────────────────────────────────────────
   Replaced the old service-area radar (rings + town pins). That visual read
   as a mobile coverage radius, which isn't the business — it's one location
   in Fenelon Falls with the exact spot given over the phone. */
.areas__lede {
  color: var(--fg-muted); font-size: var(--fs-lg);
  max-width: 50ch; margin-block: var(--space-5);
  line-height: 1.75;
}
.areas__lede--center { margin-inline: auto; text-align: center; }

.dropoff {
  display: grid; gap: var(--space-5);
  counter-reset: drop;
}
@media (min-width: 800px) {
  .dropoff { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
.dropoff__step {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--ink-2));
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.dropoff__step:hover { border-color: var(--line-hard); transform: translateY(-4px); }
.dropoff__num {
  display: block;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.1rem; color: var(--red-text);
  margin-bottom: var(--space-3);
}
.dropoff__step h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-xl); text-transform: uppercase;
  line-height: 1.05; margin-bottom: var(--space-3);
}
.dropoff__step p { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.72; }

.areas__cta { margin-top: var(--space-6); display: flex; justify-content: center; }

/* Address card — doubles as the directions link */
.addr-card {
  display: inline-flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap; justify-content: center;
  margin: 0 auto var(--space-7);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: left;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.addr-card:hover { border-color: var(--red); transform: translateY(-2px); }
.addr-card__pin { width: 26px; height: 26px; color: var(--red-text); flex: none; }
.addr-card__text { display: grid; gap: .15rem; }
.addr-card__text b {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: .02em;
}
.addr-card__text span { font-size: var(--fs-sm); color: var(--fg-muted); }
.addr-card__go {
  display: inline-flex; align-items: center; gap: .45rem;
  padding-left: var(--space-4);
  border-left: 1px solid var(--line);
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-text);
  white-space: nowrap;
}
.addr-card__go svg { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .addr-card { width: 100%; justify-content: flex-start; }
  .addr-card__go { padding-left: 0; border-left: 0; width: 100%; }
}

/* ─── 18. FAQ ───────────────────────────────────────────────────────── */
.faq__inner { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 940px) {
  .faq__inner { grid-template-columns: .8fr 1.2fr; gap: var(--space-8); }
  .faq__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.faq__note { margin-top: var(--space-4); color: var(--fg-muted); font-size: var(--fs-sm); }
.faq__note a { color: var(--red-hot); border-bottom: 1px solid currentColor; }

.faq__list { border-top: 1px solid var(--line-soft); }
.qa { border-bottom: 1px solid var(--line-soft); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 1.25rem 0;
  cursor: pointer;
  font-size: var(--fs-lg); font-weight: 400;
  list-style: none;
  min-height: 48px;
  transition: color var(--t-base) var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--red-hot); }
.qa summary i {
  position: relative; width: 26px; height: 26px; flex: none;
}
.qa summary i::before, .qa summary i::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 1.5px; background: currentColor;
  transform: translate(-50%,-50%);
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.qa summary i::after { transform: translate(-50%,-50%) rotate(90deg); }
.qa[open] summary { color: var(--red-hot); }
.qa[open] summary i::after { transform: translate(-50%,-50%) rotate(0); opacity: 0; }
.qa__body { padding-bottom: 1.4rem; }
.qa__body p { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.8; max-width: 62ch; }
.qa[open] .qa__body { animation: qaIn .35s var(--ease); }
@keyframes qaIn { from { opacity: 0; transform: translateY(-6px); } }

/* ─── 19. QUOTE WIZARD ──────────────────────────────────────────────── */
.quote { background: linear-gradient(180deg, var(--ink), #0c0e12 40%, var(--ink)); }
.quote__inner { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 980px) {
  .quote__inner { grid-template-columns: .85fr 1.15fr; gap: var(--space-8); }
  .quote__copy { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.quote__lede { color: var(--fg-muted); font-size: var(--fs-lg); margin-block: var(--space-5); max-width: 44ch; }
.quote__points { display: grid; gap: .8rem; }
.quote__points li { display: flex; align-items: center; gap: .7rem; font-size: var(--fs-sm); color: var(--fg-muted); }
.quote__points svg { width: 19px; height: 19px; color: var(--red); flex: none; }
.quote__points a { color: var(--red-hot); border-bottom: 1px solid currentColor; }

.wizard {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface), var(--ink-2));
  padding: clamp(1.25rem, 1rem + 1.6vw, 2.5rem);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.wizard__progress {
  position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--line);
}
.wizard__progress span {
  display: block; height: 100%; width: 33.33%;
  background: var(--red); box-shadow: 0 0 12px var(--red-glow);
  transition: width var(--t-slow) var(--ease);
}

.wizard__steps {
  display: flex; gap: var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-dim);
  counter-reset: step;
}
.wizard__steps li { display: flex; align-items: center; gap: .5rem; counter-increment: step; }
.wizard__steps li::before {
  content: counter(step);
  display: grid; place-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-hard);
  font-size: .62rem; letter-spacing: 0;
  transition: all var(--t-base) var(--ease);
}
.wizard__steps li.is-active { color: var(--fg); }
.wizard__steps li.is-active::before { background: var(--red); border-color: var(--red); color: #fff; }
.wizard__steps li.is-done::before { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }

.wstep { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.wstep__legend {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-xl); text-transform: uppercase;
  margin-bottom: var(--space-5); padding: 0;
}
/* Never start from opacity 0: the fieldset already occupies its full height
   the instant it is unhidden, so a fade-from-nothing shows a large blank
   card for the whole duration — and showStep() may be smooth-scrolling at
   the same time, which made it read as broken. Shorter, and it starts
   legible. */
.wstep.is-active { animation: stepIn .28s var(--ease); }
@keyframes stepIn { from { opacity: .35; transform: translateX(10px); } }

.choice-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3); margin-bottom: var(--space-5);
}
@media (min-width: 620px) { .choice-grid { grid-template-columns: repeat(4, 1fr); } }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__box {
  display: grid; gap: .55rem; justify-items: center; text-align: center;
  min-height: 96px;
  padding: var(--space-4) .6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.choice__box svg { width: 40px; height: 26px; color: var(--fg-muted); transition: color var(--t-base) var(--ease); }
.choice__box b { font-size: var(--fs-xs); font-weight: 400; letter-spacing: .06em; color: var(--fg-muted); }
.choice__box:hover { border-color: var(--line-hard); transform: translateY(-2px); }
.choice input:checked + .choice__box {
  border-color: var(--red); background: rgba(225,29,42,.1);
}
.choice input:checked + .choice__box svg,
.choice input:checked + .choice__box b { color: var(--fg); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--red-hot); outline-offset: 3px; }

.check-list { display: grid; gap: .55rem; margin-bottom: var(--space-5); }
@media (min-width: 620px) { .check-list { grid-template-columns: repeat(2, 1fr); } }
.check {
  display: flex; align-items: center; gap: .75rem;
  min-height: 48px; padding: .55rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--fg-muted);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check span {
  width: 20px; height: 20px; flex: none;
  border: 1px solid var(--line-hard); border-radius: 5px;
  position: relative;
  transition: all var(--t-base) var(--ease);
}
.check span::after {
  content: ''; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--t-base) var(--ease);
}
.check:hover { border-color: var(--line-hard); color: var(--fg); }
.check input:checked + span { background: var(--red); border-color: var(--red); }
.check input:checked + span::after { transform: rotate(45deg) scale(1); }
.check input:checked ~ * { color: var(--fg); }
.check:has(input:checked) { border-color: rgba(225,29,42,.5); color: var(--fg); }
.check input:focus-visible + span { outline: 2px solid var(--red-hot); outline-offset: 3px; }

.field-row { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; margin-bottom: var(--space-4); }
.field-row .field { margin-bottom: 0; }
.field label {
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
}
.field .opt { text-transform: none; letter-spacing: .02em; color: var(--fg-dim); opacity: .7; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: .8rem 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--fs-base);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23a4abb7' stroke-width='1.6' stroke-linecap='round' d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}
.field select option { background: var(--surface-2); color: var(--fg); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-dim); opacity: .65; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-hard); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--red); background: rgba(225,29,42,.05); outline: none;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--red-hot); outline-offset: 2px;
}
.field__error {
  font-size: var(--fs-xs); color: #ff6a72; min-height: 0;
}
.field.has-error input { border-color: #ff6a72; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.summary {
  margin-block: var(--space-5);
  padding: var(--space-4);
  border: 1px dashed var(--line-hard);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--fg-muted);
  display: grid; gap: .3rem;
}
.summary:empty { display: none; }
.summary b { color: var(--fg); font-weight: 500; }

.wizard__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-5);
}
.wizard__fine { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--fg-dim); line-height: 1.6; }

/* Any class rule that sets `display` beats the browser's [hidden] rule, so
   the success panel rendered under the live form on every page load. The
   attribute needs restating whenever a component sets its own display. */
.wizard__done[hidden] { display: none; }
.wizard__done {
  display: grid; justify-items: center; text-align: center; gap: var(--space-3);
  padding-block: var(--space-6);
  animation: stepIn .5s var(--ease);
}
.wizard__tick { width: 64px; height: 64px; color: var(--red); }
.wizard__done h3 { font-family: var(--font-display); font-size: var(--fs-2xl); text-transform: uppercase; font-weight: 400; }
.wizard__done p { color: var(--fg-muted); font-size: var(--fs-sm); max-width: 42ch; }
.wizard__done a { color: var(--red-hot); border-bottom: 1px solid currentColor; }

/* ─── 20. CTA BAND / FOOTER / STICKY ────────────────────────────────── */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4rem, 3rem + 5vw, 7.5rem);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.cta-band__glow {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 120% at 50% 118%, rgba(225,29,42,.45), transparent 62%);
}
.cta-band__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-3xl); line-height: .94; text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--ink-2);
  padding-top: var(--space-8);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
}
.site-footer__top {
  display: grid; gap: var(--space-6);
  padding-bottom: var(--space-7);
}
@media (min-width: 720px) { .site-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-7); } }

.site-footer__brand p {
  margin-top: var(--space-4); color: var(--fg-dim);
  font-size: var(--fs-sm); max-width: 36ch; line-height: 1.75;
}
.site-footer__col h3 {
  font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg); font-weight: 500; margin-bottom: var(--space-4);
}
.site-footer__col ul { display: grid; gap: .5rem; }
.site-footer__col li, .site-footer address {
  font-size: var(--fs-sm); color: var(--fg-dim); font-style: normal; line-height: 1.7;
}
.site-footer address { margin-bottom: var(--space-4); }
.site-footer__col a {
  display: inline-flex; align-items: center;
  transition: color var(--t-base) var(--ease);
}
.site-footer__col a:hover { color: var(--red-hot); }

/* On touch viewports give standalone footer nav links a real 44px target
   rather than just their ~20px line box. Links sitting inline inside a
   sentence (.faq__note, .quote__points) are deliberately left alone —
   WCAG 2.5.5 exempts inline targets, and padding them out would wreck the
   line rhythm of the copy they live in. */
@media (max-width: 859px) {
  .site-footer__col ul { gap: 0; }
  .site-footer__col li a { min-height: 44px; }
}

.socials { display: flex; gap: .5rem; margin-top: var(--space-4); }
.socials a {
  display: grid; place-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--fg-muted);
  transition: all var(--t-base) var(--ease);
}
.socials svg { width: 19px; height: 19px; }
.socials a:hover { border-color: var(--red); color: var(--fg); background: rgba(225,29,42,.12); }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: space-between; align-items: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs); color: var(--fg-dim); letter-spacing: .06em;
}

/* Mobile sticky call bar — thumb-reachable, respects the home indicator */
.sticky-cta {
  position: fixed; z-index: 80;
  left: 0; right: 0; bottom: 0;
  display: flex; gap: .6rem;
  padding: .65rem max(.75rem, env(safe-area-inset-left))
           calc(.65rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-right));
  background: rgba(8,9,11,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-soft);
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__call, .sticky-cta__quote {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
}
.sticky-cta__call {
  flex: 0 0 33%;
  border: 1px solid var(--line-hard); color: var(--fg);
}
.sticky-cta__call svg { width: 18px; height: 18px; }
.sticky-cta__quote {
  flex: 1;
  background: var(--red); color: #fff;
  box-shadow: 0 8px 24px -8px var(--red-glow);
}
@media (min-width: 860px) { .sticky-cta { display: none; } }
/* Keep the last section clear of the bar */
@media (max-width: 859px) { .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } }

/* ─── 21. REVEAL STATES ─────────────────────────────────────────────── */
/* Deliberately empty. Everything marked [data-reveal] / [data-reveal-child]
   is fully visible in CSS — GSAP sets the hidden start state itself at the
   moment it animates. That means a blocked CDN, a JS error or a slow network
   leaves a complete, readable page rather than a blank one, and there is no
   pre-hide class that can get stranded. The preloader covers the only frames
   where the hero would otherwise pop in.
   Below-the-fold reveals are off-screen when JS boots, so no flash occurs. */

/* ─── 22. RESPONSIVE ────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
  .phone-link { display: inline-flex; }
}
@media (min-width: 1060px) {
  :root { --header-h: 88px; }
  .nav { display: block; }
  .burger { display: none; }
  .hero__scroll { display: flex; }
}
/* Wide screens: let the hero art breathe further right */
@media (min-width: 1500px) {
  .hero__panel { right: -2%; width: 68vw; }
}
/* Short landscape phones — don't force 100svh of empty hero */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--header-h) + 2rem) 3rem; }
  .hero__scroll { display: none; }
}

/* ─── 23. REDUCED MOTION & PRINT ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; }
  .hero__glow, .hero__sheen, .pulse-dot,
  .hero__scroll i::after { animation: none; }
  [data-reveal], [data-reveal-child] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .sticky-cta, .mobile-menu, .preloader,
  .marquee, .hero__bg, .cta-band__glow { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* Submit failure notice. Sits above the buttons so it can't be missed, and
   carries role="alert" so screen readers announce it the moment it appears.
   Red-on-dark at body size needs the lighter red — see --red-text. */
.wizard__error {
  margin-top: var(--space-4);
  padding: .85rem 1rem;
  border: 1px solid rgba(225,29,42,.45);
  border-left: 3px solid var(--red-text);
  border-radius: var(--r-md);
  background: rgba(225,29,42,.08);
  color: #ffb3b8;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.wizard__error[hidden] { display: none; }
.btn[disabled] { opacity: .6; cursor: not-allowed; pointer-events: none; }

/* ── Safety nets for the gradient headline ─────────────────────────────
   1. If the accent line ever gets split into .char spans again, those
      transformed children cannot receive the parent's text-clipped
      gradient and would render invisible. Painting them solid red is a
      far better failure mode than blank.
   2. Browsers without background-clip:text get a solid colour instead of
      transparent-on-nothing. */
.hero__title .line--accent .char {
  color: var(--red-text);
  -webkit-text-fill-color: var(--red-text);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title .line--accent {
    color: var(--red-text);
    background: none;
  }
}

/* ─── 24. ICON SYSTEM ───────────────────────────────────────────────────
   Inline SVG only — no icon font, no external library, nothing rasterised.
   Every icon draws its body from currentColor and carries exactly one
   detail in --am-red, so a whole icon recolours from its parent.

   NOTE ON THE RED: the supplied sheet used #ef233c. That is a different red
   from the site's --red (#e11d2a) by a hair, and two near-identical brand
   reds is a defect you only notice when they sit side by side. --am-red is
   therefore wired to the existing token: one brand red, everywhere.
   ──────────────────────────────────────────────────────────────────── */
.am-icon {
  --am-red: var(--red);
  width: 42px; height: 42px;
  display: block; flex: 0 0 auto;
  color: #e7e7e7;                      /* silver, deliberately below --fg */
  transition: color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              filter var(--t-base) var(--ease);
}
.am-icon--small { width: 22px; height: 22px; }
.am-icon--mid   { width: 28px; height: 28px; }
.am-icon--large { width: 56px; height: 56px; }

/* Hover lift is kept faint — the brief asked for understated, not neon. */
a:hover > .am-icon,
button:hover > .am-icon,
.promise-card:hover .am-icon,
.step:hover .am-icon,
.svc__head:hover .am-icon {
  color: #fff;
  transform: translateY(-2px);
  filter: drop-shadow(0 0 5px rgba(225, 29, 42, .22));
}
@media (prefers-reduced-motion: reduce) {
  .am-icon { transition: none; }
  a:hover > .am-icon, button:hover > .am-icon,
  .promise-card:hover .am-icon, .step:hover .am-icon,
  .svc__head:hover .am-icon { transform: none; filter: none; }
}

/* Promise cards ------------------------------------------------------ */
.promise-card__icon { display: block; padding: var(--space-5) var(--space-5) 0; }
.promise-card__icon .am-icon { color: var(--fg-muted); }
.promise-card h3 { padding-top: var(--space-4); }

/* Service rows ------------------------------------------------------- */
.svc__head, .svc__head--soon { grid-template-columns: auto auto 1fr auto auto; }
.svc__icon { display: flex; align-items: center; }
.svc__icon .am-icon { color: var(--fg-muted); }
.svc--soon .svc__icon .am-icon { color: var(--fg-dim); }
/* Body copy still lines up under the service name, now that a column
   sits between the index and the name. */
.svc__body-inner { padding-left: calc(2.1ch + var(--space-3) + 28px + var(--space-3)); }

/* Below 560px the row has no width to spare — the icon is the first thing
   to go, since the name and price carry the meaning. */
@media (max-width: 559px) {
  .svc__icon { display: none; }
  .svc__head, .svc__head--soon { grid-template-columns: auto 1fr auto auto; }
  .svc__body-inner { padding-left: calc(2.1ch + var(--space-3)); }
}

/* Process steps ------------------------------------------------------ */
.step__icon { display: block; margin-bottom: var(--space-3); }
.step__icon .am-icon { color: var(--fg-muted); }

/* Reviews ------------------------------------------------------------ */
.rating__stars { display: inline-flex; align-items: center; }
.rating__stars .am-icon { width: 104px; height: 25px; color: var(--fg-muted); }
.review__quote { display: block; margin-bottom: var(--space-3); }
.review__quote .am-icon { width: 30px; height: 30px; color: var(--fg-dim); opacity: .75; }
/* The old ::before quote glyph is retired — Bodoni rendered it as two
   detached commas that read as stray dots rather than a quotation mark. */
.review::before { content: none; }
.review { padding-top: var(--space-5); }

/* Compare / before-after --------------------------------------------- */
.compare__icon { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.compare__icon .am-icon { color: var(--fg-muted); }

/* Inline icons that sit beside text ---------------------------------- */
.phone-link .am-icon { color: currentColor; }
.sticky-cta__call .am-icon { color: currentColor; }
.addr-card__pin.am-icon { color: var(--red-text); }
.footer-meta-icon { display: inline-flex; align-items: center; gap: .5rem; }
.footer-meta-icon .am-icon { color: var(--fg-dim); }

/* ─── 24b. SUPPLEMENTAL ICON PLACEMENTS (41–49) ─────────────────────────
   Positioning only. The .am-icon system, --am-red and the hover behaviour
   are defined once in section 24 and are not repeated here.
   ──────────────────────────────────────────────────────────────────── */

/* Drop-off steps */
.dropoff__icon { display: block; margin-bottom: var(--space-3); }
.dropoff__icon .am-icon { color: var(--fg-muted); }

/* Quote-form vehicle selector.
   The generic `.choice__box svg` rule sizes icons 40x26 for the old wide
   viewBoxes; these are 64x64, so they need a square box or they letterbox
   down to ~26px and sit visually small. Sizing only — the radio input,
   its label, value and checked styling are untouched. */
.choice__box .am-icon { width: 34px; height: 34px; }

/* Footer meta rows.
   The clock labels the whole hours block, not just the Mon–Fri line, so the
   two lines after it indent to align with its text instead of sitting under
   the icon. Same trick keeps the phone/email/directions rows aligned. */
/* Only indent rows WITHOUT their own icon. The bare `~ li` form also hit
   the footer email, which has an icon already, pushing it 30px right of the
   phone number directly above it. */
.footer-meta-icon ~ li:not(.footer-meta-icon) { padding-left: calc(22px + .5rem); }
.footer-meta-icon .am-icon { flex: 0 0 auto; }