/* ACP Paint Protection — homepage concept
   Direction: "The Invisible Layer" — studio-black object photography,
   the film itself as interface. See ../CONCEPT-NOTES.md */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* type scale */
  --step-6: clamp(2.6rem, 6.5vw, 5.4rem);
  --step-5: clamp(2rem, 4.2vw, 3.4rem);
  --step-4: clamp(1.5rem, 2.8vw, 2.2rem);
  --step-1: clamp(1.02rem, 1.2vw, 1.15rem);
  --step-0: 1rem;
  --step--1: .86rem;
  --step--2: .74rem;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --measure: 34rem;
}

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

body {
  background: var(--acp-ground);
  color: var(--acp-text);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, .display {
  font-family: 'Saira', 'Manrope', sans-serif;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: .005em;
  text-wrap: balance;
}

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

::selection { background: var(--acp-gold); color: #000; }

:focus-visible { outline: 2px solid var(--acp-gold); outline-offset: 3px; border-radius: 1px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--acp-gold); color: #000; padding: .6rem 1rem;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* concept ribbon */
.concept-ribbon {
  background: #16130a;
  border-bottom: 1px solid #2e2610;
  color: var(--acp-gold);
  font-size: var(--step--2);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: .35rem var(--pad);
}

/* ---------- the open-frame motif (from the logo's frame anatomy) ---------- */
.frame-tag {
  position: relative;
  display: inline-block;
  color: var(--acp-gold);
  font-family: 'Saira', sans-serif;
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding-top: .9rem;
  margin-bottom: 1.1rem;
}
.frame-tag::before {           /* top bar */
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 2px; background: var(--acp-gold);
}
.frame-tag::after {            /* left shoulder drop, like the logo corner accent */
  content: ""; position: absolute; top: 0; left: 0;
  width: 2px; height: .55rem; background: var(--acp-gold);
}

.eyebrow {
  display: block; color: var(--acp-text-muted);
  font-family: 'Saira', sans-serif; font-weight: 500;
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: .55rem;
}

/* bottom-V divider, from the logo's lower V */
.v-divider { display: flex; justify-content: center; padding: clamp(2rem,5vw,3.5rem) 0 0; }
.v-divider svg { width: 54px; height: 20px; display: block; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .8rem var(--pad);
  background: linear-gradient(rgba(0,0,0,.82), rgba(0,0,0,.55) 70%, transparent);
  transition: background .3s ease;
}
.site-head.solid { background: rgba(0,0,0,.92); border-bottom: 1px solid var(--acp-hairline); }
.head-mark img { height: 44px; width: auto; }
.head-nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem); }
.head-nav a {
  font-family: 'Saira', sans-serif; font-weight: 500;
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--acp-text);
  padding: .55rem .15rem;
}
.head-nav a:hover { color: var(--acp-gold); }
/* the nav link colour was winning over .btn, leaving near-white text on gold (1.9:1) */
.head-nav a.btn, .head-nav a.btn:hover { color: #000; }
.btn {
  display: inline-block;
  font-family: 'Saira', sans-serif; font-weight: 600;
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  background: var(--acp-gold); color: #000;
  padding: .85rem 1.6rem;
  text-decoration: none;
  border: 0; cursor: pointer;
  position: relative; overflow: hidden;
}
.btn:hover { background: #f6c33e; }
.btn:active { transform: translateY(1px); }
.btn-quiet {
  background: none; color: var(--acp-text);
  border: 1px solid var(--acp-hairline);
}
.btn-quiet:hover { background: rgba(255,255,255,.05); border-color: var(--acp-text-muted); }

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .head-nav { display: none; }
  .head-nav.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: fixed; inset: 0; padding: 6rem var(--pad);
    background: rgba(0,0,0,.97); gap: 1.4rem;
  }
  .head-nav.open a { font-size: 1.3rem; }
  .nav-toggle {
    display: block; z-index: 120; background: none; border: 0; cursor: pointer;
    width: 44px; height: 44px; position: relative;
  }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after {
    content: ""; position: absolute; left: 10px; right: 10px; height: 2px;
    background: var(--acp-text); transition: transform .25s ease, opacity .25s ease;
  }
  .nav-toggle::before { top: 15px; }
  .nav-toggle span   { top: 21px; }
  .nav-toggle::after { top: 27px; }
  .nav-toggle[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span { opacity: 0; }
  .nav-toggle[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }
}

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.hero-img {
  position: absolute; inset: 0; z-index: -2;
  background: url("assets/hero.jpg") center 38% / cover no-repeat;
}
.hero-img::after {   /* melt into the black ground + light falloff */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, #000 4%, rgba(0,0,0,.55) 34%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.45)),
    linear-gradient(100deg, rgba(0,0,0,.72) 18%, transparent 55%);
}
.hero-video {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-video.ready { opacity: 1; }

/* Phones: the photo gets its own band and the words sit under it. Full-bleed
   on a portrait screen cover-scaled the photo to the whole 100svh, which
   enlarged the car and parked it exactly where the bottom-anchored headline
   landed: the gold eyebrow ran across the roofline and tail light while the
   top half of the screen stayed empty black. */
@media (max-width: 700px) {
  .hero { min-height: 0; padding-top: 46svh; }
  .hero-img, .hero-video { bottom: auto; height: 58svh; }
  .hero-img { background-position: 50% 47%; background-size: cover; }
  .hero-img::after {
    background:
      linear-gradient(to top, #000 0%, #000 8%, rgba(0,0,0,.35) 38%, transparent 62%),
      linear-gradient(to bottom, rgba(0,0,0,.55), transparent 30%);
  }
  .hero-inner { padding-top: 0; }
}

.hero-sweep {        /* the studio light pass */
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(238,178,30,.14) 50%, rgba(255,255,255,.10) 52%, transparent 60%);
  background-size: 260% 100%;
  animation: sweep 9s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes sweep {
  0%, 55%  { background-position: 130% 0; }
  85%, 100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-sweep { animation: none; opacity: 0; } }

.hero-inner {
  padding: 0 var(--pad) clamp(3rem, 8vh, 5.5rem);
  max-width: 60rem;
}
.hero h1 {
  font-size: var(--step-6);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  max-width: 13ch;
}
.hero h1 .gold { color: var(--acp-gold); }
.hero-sub {
  margin-top: 1.2rem; max-width: var(--measure);
  color: var(--acp-text); font-size: var(--step-1); font-weight: 400;
}
.hero-cta { margin-top: 2rem; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.hero-alt {
  font-size: var(--step--1); letter-spacing: .05em;
  color: var(--acp-text-muted); text-decoration: none;
  border-bottom: 1px solid var(--acp-hairline); padding-bottom: .2rem;
}
.hero-alt:hover { color: var(--acp-gold); border-color: var(--acp-gold); }

/* ---------- stat strip ---------- */
.statline {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4.5rem);
  padding: clamp(2.2rem, 5vw, 3.4rem) var(--pad);
  border-top: 1px solid var(--acp-hairline);
  border-bottom: 1px solid var(--acp-hairline);
}
.statline > div { min-width: 9rem; }
.statline b {
  display: block; font-family: 'Saira', sans-serif; font-weight: 600;
  font-size: var(--step-4); color: var(--acp-gold); line-height: 1.1;
}
.statline span { color: var(--acp-text-muted); font-size: var(--step--1); letter-spacing: .06em; }

/* ---------- generic section shell ---------- */
.band { padding: clamp(2.6rem, 5.2vw, 4.4rem) var(--pad); position: relative; }
/* Section heads run as two columns on desktop: the heading no longer wraps to
   three lines with an empty half-screen beside it, and the block is shorter. */
.band-head {
  max-width: none; margin-bottom: clamp(1.4rem, 2.8vw, 2.2rem);
  display: grid; gap: .6rem 3rem; align-items: end;
}
.band-head .eyebrow, .band-head .frame-tag { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .band-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .band-head p { margin-top: 0; padding-bottom: .35rem; }
}
.band-head h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); text-transform: uppercase; }
.band-head p { margin-top: .7rem; color: var(--acp-text-muted); max-width: var(--measure); }

/* ---------- coverage sequence (3D act) ---------- */
.coverage { position: relative; background: #000; }
.coverage-track { height: 520vh; position: relative; }   /* the tail is the hold on Full Car. 640vh made four beats
   take six screens of scrolling, which read as the page having stalled */
.coverage-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  /* grid, so the heading, steps and package panel each own a band and the
     car always has the free space between them (see coverage3d.js framing) */
  display: grid;
  grid-template-columns: 1fr min(23rem, 42%);
  grid-template-rows: auto 1fr auto;
  padding: clamp(4.2rem, 9vh, 6rem) var(--pad) clamp(1.4rem, 5vh, 3.5rem);
  gap: 1rem;
}
#coverage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.coverage-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.85) 100%);
}
.coverage-head {
  grid-column: 1 / -1; grid-row: 1;
  position: relative; z-index: 5; pointer-events: none;
}
.coverage-head h2 { font-size: var(--step-4); text-transform: uppercase; }
.coverage-head p { color: var(--acp-text-muted); font-size: var(--step--1); max-width: 30rem; margin-top: .4rem; }

.coverage-hud {
  grid-column: 2; grid-row: 3; align-self: end; justify-self: end;
  position: relative; z-index: 5;
  width: 100%; min-height: 13.5rem;
  pointer-events: none;
}
.pkg {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
  background: rgba(10,10,12,.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 1.3rem 1.4rem 1.4rem;
  border-top: 2px solid var(--acp-gold);
}
.pkg::before { /* corner accent */
  content: ""; position: absolute; top: 0; left: 0; width: 2px; height: .6rem; background: var(--acp-gold);
}
.pkg.active { opacity: 1; transform: none; }
.pkg h3 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .05em; }
.pkg .price {
  font-family: 'Saira', sans-serif; font-weight: 600; font-size: 1.9rem;
  color: var(--acp-gold); margin: .2rem 0 .5rem;
}
.pkg .price small { font-size: .9rem; color: var(--acp-text-muted); font-weight: 400; letter-spacing: .06em; }
.pkg ul { list-style: none; }
.pkg li { color: var(--acp-text-muted); font-size: var(--step--1); padding: .16rem 0 .16rem 1.1rem; position: relative; }
.pkg li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 2px; background: var(--acp-gold);
}
.coverage-steps {
  grid-column: 1; grid-row: 3; align-self: end;
  position: relative; z-index: 5;
  display: flex; flex-direction: column; gap: .15rem;
  /* It is the section's only navigation, and it sits over the pale studio
     floor. Muted grey caps straight on that floor had no contrast and did not
     read as something you could press, so it gets a panel of its own. */
  width: max-content; padding: .7rem 1rem .7rem .85rem;
  background: rgba(8, 8, 10, .66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--acp-hairline);
}
.coverage-steps button {
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: 'Saira', sans-serif; font-size: var(--step--1);
  letter-spacing: .16em; text-transform: uppercase;
  color: #c3c6cc; min-height: 2.1rem;
  padding-left: .9rem; position: relative;
  transition: color .3s ease;
}
.coverage-steps button::before {
  content: ""; position: absolute; left: 0; top: 50%; width: .45rem; height: 2px;
  background: var(--acp-hairline); transition: background .3s ease, width .3s ease;
}
.coverage-steps button.done::before { background: var(--acp-steel); }
.coverage-steps button:hover { color: var(--acp-text); }
.coverage-steps button.active { color: var(--acp-gold); }
.coverage-steps button.active::before { background: var(--acp-gold); width: .65rem; }

.coverage-hold {
  position: absolute; left: 50%; bottom: clamp(7rem, 20vh, 11rem);
  transform: translate(-50%, 14px); z-index: 5; margin: 0;
  font-family: 'Saira', sans-serif; font-size: var(--step-1);
  letter-spacing: .16em; text-transform: uppercase; text-align: center;
  color: var(--acp-text); text-shadow: 0 2px 18px rgba(0,0,0,.9);
  opacity: 0; transition: opacity .6s ease, transform .6s ease;
  pointer-events: none; white-space: nowrap;
}
.coverage-hold.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 700px) { .coverage-hold { white-space: normal; width: min(20rem, 80vw); font-size: var(--step-0); } }

/* no-3D fallback + reduced-motion package grid */
.coverage-fallback { display: none; }
.no3d .coverage-track, .no3d .coverage-stage { display: none; }
.no3d .coverage-fallback { display: block; }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--acp-hairline); border: 1px solid var(--acp-hairline); }
.pkg-grid .pkg { position: static; opacity: 1; transform: none; background: #0a0a0c; border-top: 2px solid var(--acp-gold); }

@media (max-width: 700px) {
  /* one column: heading, then the step row, then the car's free band, then the panel */
  .coverage-stage { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  .coverage-head { grid-column: 1; grid-row: 1; }
  .coverage-steps {
    grid-column: 1; grid-row: 2; align-self: start;
    flex-direction: row; flex-wrap: wrap; gap: .5rem 1rem;
  }
  .coverage-hud { grid-column: 1; grid-row: 4; width: 100%; justify-self: stretch; min-height: 12.5rem; }
  .coverage-head h2 { font-size: var(--step-1); }
  .coverage-head p:not(.frame-tag) { display: none; }   /* keep the eyebrow, drop the long line */
  .coverage-head .frame-tag { margin-bottom: .5rem; }
}

/* ---------- services ---------- */
.services-grid {
  display: grid; gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(12, 1fr);
}
.svc {
  position: relative; grid-column: span 12;
  background: var(--acp-surface);
  border-top: 2px solid var(--acp-hairline);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .3s ease, transform .3s ease;
}
.svc::before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: .6rem; background: var(--acp-hairline); transition: background .3s ease; z-index: 2; }
.svc:hover { border-color: var(--acp-gold); transform: translateY(-3px); }
/* when the whole card is the link (location pages), it must not inherit link
   styling: without this every line inside it, price included, rendered
   underlined in the browser's default link colour */
a.svc { text-decoration: none; color: inherit; }
.svc-go {
  font-family: 'Saira', sans-serif; font-size: var(--step--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--acp-text-muted); margin-top: auto; padding-top: .4rem;
}
.svc-go::after { content: " \2192"; color: var(--acp-gold); }
a.svc:hover .svc-go { color: var(--acp-text); }
.svc:hover::before { background: var(--acp-gold); }

/* the photograph is the card's face, not a hover reveal */
.svc-img { position: relative; display: block; height: clamp(8.5rem, 15vw, 12.5rem); overflow: hidden; background: #0a0a0c; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1), filter .4s ease; filter: saturate(.85) brightness(.9); }
.svc:hover .svc-img img { transform: scale(1.06); filter: saturate(1) brightness(.92); }
.svc-img::after {
  content: ""; position: absolute; inset: 0;
  /* only enough to seat the photo into the card; at .35 by mid-height on top of
     the brightness filter, four of the five photos went fully black */
  background: linear-gradient(to top, var(--acp-surface) 0%, rgba(16,17,20,.12) 38%, transparent 62%);
}

.svc-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.svc h3 { font-size: var(--step-4); text-transform: uppercase; }
.svc p { color: var(--acp-text-muted); font-size: var(--step--1); max-width: 34rem; }
.svc .from {
  font-family: 'Saira', sans-serif; font-weight: 600; font-size: 1.2rem;
  color: var(--acp-gold); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.svc-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .6rem; }
.svc-actions .btn { padding: .7rem 1.15rem; font-size: var(--step--2); }

@media (min-width: 861px) {
  .svc-wide { grid-column: span 7; }
  .svc-side { grid-column: span 5; }
  .svc-third { grid-column: span 4; }
  .svc-half { grid-column: span 6; }
}

/* ---------- self-heal ---------- */
.heal { position: relative; isolation: isolate; overflow: hidden; }
.heal-media { position: absolute; inset: 0; z-index: -1; }
.heal-media img { width: 100%; height: 100%; object-fit: cover; }
.heal-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.88) 20%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55)); }
#heal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.heal-inner { padding: clamp(5rem, 12vw, 9rem) var(--pad); max-width: 44rem; pointer-events: none; }
.heal-inner > * { pointer-events: none; }
.heal h2 { font-size: var(--step-5); text-transform: uppercase; }
.heal p { margin-top: 1rem; color: var(--acp-text); max-width: var(--measure); }
.heal .hint {
  display: inline-block; margin-top: 1.6rem; color: var(--acp-gold);
  font-family: 'Saira', sans-serif; font-size: var(--step--1);
  letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid rgba(238,178,30,.4); padding: .55rem .9rem;
}

/* ---------- process ---------- */
.process { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .process { grid-template-columns: 1.15fr 1fr; } }
.process-media { position: relative; }
.process-media img { width: 100%; height: auto; }
.process-media figcaption {
  position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.75);
  padding: .5rem .9rem; font-size: var(--step--2); letter-spacing: .1em;
  text-transform: uppercase; color: var(--acp-text-muted);
}
.steps { display: flex; flex-direction: column; }
.step { padding: 1.4rem 0 1.5rem; border-top: 1px solid var(--acp-hairline); display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; }
.step-mark { width: 1.6rem; padding-top: .45rem; }
.step-mark i { display: block; height: 2px; background: var(--acp-gold); }
.step-mark i + i { margin-top: 3px; opacity: .45; }
.step h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; }
.step p { color: var(--acp-text-muted); font-size: var(--step--1); margin-top: .3rem; max-width: 30rem; }

/* ---------- tesla ---------- */
.tesla { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--acp-surface); }
@media (min-width: 900px) { .tesla { grid-template-columns: 1fr 1.1fr; } }
.tesla-copy { padding: clamp(3rem, 7vw, 5.5rem) var(--pad); }
.tesla-copy h2 { font-size: var(--step-5); text-transform: uppercase; }
.tesla-copy > p { margin-top: 1rem; color: var(--acp-text-muted); max-width: var(--measure); }
.tesla-media { position: relative; min-height: 20rem; }
.tesla-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tesla-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--acp-surface), transparent 35%); }
.price-ladder { margin-top: 2rem; border-top: 1px solid var(--acp-hairline); }
.price-ladder div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--acp-hairline);
}
.price-ladder b { font-weight: 500; font-family: 'Saira', sans-serif; letter-spacing: .04em; }
.price-ladder span { color: var(--acp-gold); font-family: 'Saira', sans-serif; font-weight: 600; }
.price-ladder span small { color: var(--acp-text-muted); font-weight: 400; margin-right: .4rem; }

/* ---------- dealer band ---------- */
.dealer { position: relative; isolation: isolate; text-align: left; }
.dealer-media { position: absolute; inset: 0; z-index: -1; }
.dealer-media img { width: 100%; height: 100%; object-fit: cover; }
.dealer-media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.82); }
/* Partner names set as wordmarks, not boxes. Outlined and padded, they read as
   buttons that did nothing when pressed. */
/* the stores' brand marks, not a photo (Mudit, 2026-09-17). Each mark gets its
   own height so the wide wings and the tall oval read at the same weight. */
.dealer-marks { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(2rem, 6vw, 5rem); margin-top: 2.2rem; }
.dealer-marks li { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.dealer-marks img { width: auto; height: clamp(3.4rem, 6vw, 4.6rem); }
.dealer-marks li:first-child img { height: clamp(3.8rem, 7vw, 5.2rem); }
.dealer-marks span { font-family: 'Saira', sans-serif; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--acp-text-muted); }
.dealer-names { display: flex; flex-wrap: wrap; align-items: center; row-gap: .8rem; margin-top: 2rem; }
.dealer-names span {
  font-family: 'Saira', sans-serif; font-weight: 600; font-size: var(--step-2);
  letter-spacing: .06em; text-transform: uppercase; color: var(--acp-text);
  padding: .1rem clamp(1rem, 2.4vw, 1.8rem);
}
.dealer-names span:first-child { padding-left: 0; }
.dealer-names span + span { border-left: 1px solid var(--acp-gold); }

/* ---------- proof ---------- */
.proof-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .proof-grid { grid-template-columns: .8fr 1.2fr; } }
.rating b {
  font-family: 'Saira', sans-serif; font-weight: 700; font-size: clamp(4rem, 9vw, 7rem);
  color: var(--acp-gold); line-height: 1; display: block;
}
.rating .stars { color: var(--acp-gold); font-size: 1.3rem; letter-spacing: .2em; }
.rating p { color: var(--acp-text-muted); margin-top: .5rem; font-size: var(--step--1); }
.quotes { display: flex; flex-direction: column; }
.quote { border-top: 1px solid var(--acp-hairline); padding: 1.4rem 0; }
.quote blockquote { font-size: var(--step-1); max-width: 36rem; }
.quote figcaption { margin-top: .6rem; color: var(--acp-text-muted); font-size: var(--step--1); letter-spacing: .05em; }
.quote figcaption b { color: var(--acp-text); font-weight: 600; }
.certs { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--acp-hairline); border: 1px solid var(--acp-hairline); margin-top: clamp(2.5rem, 6vw, 4rem); }
.certs div { background: #0a0a0c; padding: 1.3rem 1.2rem; }
.certs b { display: block; font-family: 'Saira', sans-serif; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.certs span { color: var(--acp-text-muted); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- locations ---------- */
.loc-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .loc-grid { grid-template-columns: 1fr 1.1fr; } }
.ma-map svg { width: 100%; height: auto; display: block; }
.ma-map .land { fill: var(--acp-surface); stroke: var(--acp-hairline); stroke-width: 1.2; }
.ma-map .pt { fill: var(--acp-gold); }
.ma-map .pt-ring { fill: none; stroke: var(--acp-gold); stroke-width: 1; opacity: .5; }
.ma-map text { font-family: 'Saira', sans-serif; font-size: 11px; letter-spacing: .14em; fill: var(--acp-text-muted); text-transform: uppercase; }
.loc-list { display: flex; flex-direction: column; }
.loc { border-top: 1px solid var(--acp-hairline); padding: 1.5rem 0; display: grid; gap: .25rem; }
.loc h3 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .06em; }
.loc h3 small { color: var(--acp-gold); font-size: .72rem; letter-spacing: .2em; margin-left: .6rem; vertical-align: middle; }
.loc p { color: var(--acp-text-muted); font-size: var(--step--1); }
.loc a { color: var(--acp-text); text-decoration: none; border-bottom: 1px solid var(--acp-hairline); width: max-content; }
.loc a:hover { color: var(--acp-gold); border-color: var(--acp-gold); }

/* ---------- quote form ---------- */
.quote-band { background: var(--acp-surface); }
.quote-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .quote-grid { grid-template-columns: .9fr 1.1fr; } }
.quote-side p { color: var(--acp-text-muted); max-width: var(--measure); margin-top: 1rem; }
.quote-side .contact-line { margin-top: 2rem; display: flex; flex-direction: column; gap: .5rem; }
.quote-side .contact-line a {
  color: var(--acp-text); text-decoration: none; font-family: 'Saira', sans-serif;
  font-size: var(--step-1); letter-spacing: .04em; width: max-content;
  border-bottom: 1px solid var(--acp-hairline);
}
.quote-side .contact-line a:hover { color: var(--acp-gold); border-color: var(--acp-gold); }
form.quote-form { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--acp-text-muted); font-family: 'Saira', sans-serif; }
.field input, .field select, .field textarea {
  background: #0a0a0c; border: 1px solid var(--acp-hairline); color: var(--acp-text);
  padding: .8rem .9rem; font: inherit; min-height: 44px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--acp-gold); outline: none; }
.field textarea { min-height: 6.5rem; resize: vertical; }
.form-note { grid-column: 1 / -1; color: var(--acp-text-muted); font-size: var(--step--2); }
.form-note.sent { color: var(--acp-gold); }
@media (max-width: 640px) { form.quote-form { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--acp-hairline); padding: clamp(2.5rem, 6vw, 4rem) var(--pad); }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.foot-lockup img { width: 180px; height: auto; }
.site-foot h4 { font-family: 'Saira', sans-serif; font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--acp-text-muted); margin-bottom: .8rem; }
.site-foot ul { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.site-foot li, .site-foot p { font-size: var(--step--1); color: var(--acp-text-muted); }
.site-foot a { color: var(--acp-text-muted); text-decoration: none; }
.site-foot a:hover { color: var(--acp-gold); }
/* footer links were 19px tall on a phone, less than half a comfortable thumb */
@media (max-width: 700px) {
  .site-foot ul { gap: 0; }
  .site-foot a { display: inline-block; padding: .72rem 0; }
}
.foot-base { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--acp-hairline); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: var(--step--2); color: var(--acp-text-muted); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .pkg { transition: none; }
}