/* ACP concept — interior pages.
   styles.css owns the approved homepage; everything here is nav chrome,
   the compact page hero, and the per-page interactive modules ("labs"). */

/* ---------- nav dropdowns ---------- */
.nav-group { position: relative; }
.nav-top {
  font-family: 'Saira', sans-serif; font-weight: 500;
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--acp-text); background: none; border: 0; cursor: pointer;
  padding: .55rem .15rem; display: inline-flex; align-items: center; gap: .4rem;
}
.nav-top::after {
  content: ""; width: .42rem; height: .42rem; margin-top: -.2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease;
}
.nav-top:hover, .nav-top[aria-expanded="true"] { color: var(--acp-gold); }
.nav-top[aria-expanded="true"]::after { transform: rotate(-135deg); }
.nav-menu {
  display: none; position: absolute; top: calc(100% + .55rem); left: -1rem;
  min-width: 15rem; background: rgba(8,8,10,.97);
  border-top: 2px solid var(--acp-gold);
  padding: .5rem 0;
}
.nav-menu a {
  display: block; padding: .6rem 1.1rem; white-space: nowrap;
  letter-spacing: .06em; text-transform: none; font-size: var(--step--1);
}
.nav-menu a:hover { background: rgba(255,255,255,.05); color: var(--acp-gold); }
.nav-group.open .nav-menu { display: block; }

@media (max-width: 860px) {
  .nav-group { width: 100%; }
  .nav-top { font-size: 1.3rem; width: 100%; justify-content: space-between; }
  .nav-menu { position: static; display: block; border-top: 0; padding: .2rem 0 .6rem 1rem; background: none; min-width: 0; }
  .nav-menu a { font-size: 1rem; padding: .5rem 0; color: var(--acp-text-muted); }
  .head-nav.open { overflow-y: auto; gap: .9rem; }
}

/* ---------- compact page hero ---------- */
.page-hero {
  position: relative; isolation: isolate;
  padding: clamp(2.2rem, 5.5vw, 4rem) var(--pad) clamp(1.8rem, 3.6vw, 2.8rem);
  border-bottom: 1px solid var(--acp-hairline);
  overflow: hidden;
}
.page-hero-media { position: absolute; inset: 0; z-index: -1; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.page-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, #000 22%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.7));
}
.page-hero h1 { font-size: var(--step-5); text-transform: uppercase; max-width: 18ch; }
.page-hero p { margin-top: .8rem; color: var(--acp-text); max-width: var(--measure); font-size: var(--step-1); }
.page-hero .meta {
  margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 1.4rem;
  font-family: 'Saira', sans-serif; font-size: var(--step--1);
  letter-spacing: .1em; text-transform: uppercase; color: var(--acp-text-muted);
}
.page-hero .meta b { color: var(--acp-gold); font-weight: 600; }

/* ---------- lab: shared frame for every interactive ---------- */
.lab { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 980px) { .lab.split { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.lab-stage {
  position: relative; background: #08080a;
  border-top: 1px solid var(--acp-hairline);
  overflow: hidden;
}
.lab-hint {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 4;
  font-family: 'Saira', sans-serif; font-size: var(--step--2);
  letter-spacing: .16em; text-transform: uppercase; color: var(--acp-gold);
  background: rgba(0,0,0,.6); border: 1px solid rgba(238,178,30,.35); padding: .45rem .75rem;
  pointer-events: none; transition: opacity .4s ease;
}
.lab-hint.gone { opacity: 0; }
.lab-side h3 { font-size: var(--step-4); text-transform: uppercase; }
.lab-side > p { color: var(--acp-text-muted); margin-top: .8rem; }

/* control chips, used by several labs */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.chip {
  font-family: 'Saira', sans-serif; font-size: var(--step--1); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  background: none; color: var(--acp-text-muted); cursor: pointer;
  border: 1px solid var(--acp-hairline); padding: .7rem 1.05rem;
  min-height: 44px; transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.chip:hover { color: var(--acp-text); border-color: var(--acp-text-muted); }
.chip[aria-pressed="true"], .chip.on {
  color: #000; background: var(--acp-gold); border-color: var(--acp-gold);
}
.readout { margin-top: 1.6rem; border-top: 1px solid var(--acp-hairline); }
.readout div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--acp-hairline);
}
.readout dt, .readout b { font-weight: 500; font-family: 'Saira', sans-serif; letter-spacing: .05em; color: var(--acp-text); }
.readout span, .readout dd {
  font-family: 'Saira', sans-serif; font-weight: 600; color: var(--acp-gold);
  font-variant-numeric: tabular-nums;
}

/* ---------- 1. film anatomy (PPF) ---------- */
.anatomy { position: relative; height: clamp(19rem, 40vh, 25rem); }
.anatomy svg { width: 100%; height: 100%; display: block; }
.layer { cursor: pointer; outline: none; }
.layer .lbl { font-family: 'Saira', sans-serif; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--acp-text-muted); transition: fill .3s ease; }
.layer .leader { stroke: #2e3137; stroke-width: 1; transition: stroke .3s ease; }
.layer .face { stroke: rgba(255,255,255,.08); stroke-width: .6; }
.layer.active .lbl { fill: var(--acp-gold); }
.layer.active .leader { stroke: var(--acp-gold); }
.layer.active .face { stroke: rgba(238,178,30,.75); stroke-width: 1; }
.layer.dim .slab { opacity: .62; }        /* recede, but stay readable as material */
.layer:focus-visible .lbl { text-decoration: underline; }
.layer .heal { animation: heal 3.6s ease-in-out infinite; }
@keyframes heal { 0%, 35% { opacity: .85; } 70%, 100% { opacity: .08; } }
@media (prefers-reduced-motion: reduce) { .layer .heal { animation: none; } }
.bracket path { stroke: #4b5058; stroke-width: 1.2; }
.bracket text { font-family: 'Saira', sans-serif; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; fill: var(--acp-text-muted); }
.bracket.b-film path { stroke: var(--acp-gold); }
.bracket.b-film text { fill: var(--acp-gold); }
.anatomy-note { margin-top: 1.2rem; min-height: 5.5rem; }
.anatomy-note h4 { font-family: 'Saira', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--acp-gold); font-size: 1.05rem; }
.anatomy-note p { color: var(--acp-text-muted); font-size: var(--step--1); margin-top: .35rem; }

/* ---------- 2. beading (ceramic) ---------- */
.bead-stage { height: clamp(18rem, 38vh, 24rem); position: relative; overflow: hidden; }
.hood-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* pulled down and cooled so the brand's dark ground still reads */
  filter: brightness(.52) saturate(.5) contrast(1.08);
}
.hood-veil { position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none; }
.hood-veil.bare {                       /* flatter, duller clearcoat: a small
                                           difference on purpose, because the
                                           story belongs to the water, not the paint */
  left: 0; background: linear-gradient(180deg, rgba(150,158,170,.07), rgba(0,0,0,.12));
}
.hood-veil.coated {                     /* deeper, glossier, faintly warm */
  right: 0;
  background: linear-gradient(200deg, rgba(238,178,30,.10), rgba(0,0,0,.28) 60%);
}
#bead-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: crosshair; }
.bead-legend {
  position: absolute; inset: auto 0 0 0; display: grid; grid-template-columns: 1fr 1fr;
  font-family: 'Saira', sans-serif; font-size: var(--step--2); letter-spacing: .14em;
  text-transform: uppercase; pointer-events: none;
}
.bead-legend span { padding: .6rem .9rem; color: var(--acp-text); text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.bead-stage .lab-hint { top: 1rem; bottom: auto; }   /* clear of the legend */
.bead-legend span + span { color: var(--acp-gold); text-align: right; }

/* ---------- 3. inspection light (correction) ---------- */
.swirl-stage { height: clamp(18rem, 40vh, 25rem); position: relative; cursor: none; }
#swirl-canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.swirl-toggle { position: absolute; right: 1rem; top: 1rem; z-index: 4; display: flex; gap: .4rem; }

/* ---------- 4. tint cabin ---------- */
/* the tint stage: a 3D car, so no photo crop and no border to go wrong */
/* The tint lab is the one light stage on the site. The car is ACP's own render
   on white, so the stage has to be white too or the photo sits in a box. */
.tint-stage { position: relative; min-height: clamp(15rem, 34vh, 23rem); background: #fff; overflow: hidden; }
#tint .lab-hint { color: #14151a; background: #eceef1; border-color: rgba(0,0,0,.3); }
#tint-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s ease; }
#tint.live #tint-canvas { opacity: 1; }
#tint.flat .lab-hint { display: none; }
.tint-fallback { display: block; width: 100%; height: auto; }

.cabin-stage { height: clamp(18rem, 40vh, 25rem); position: relative; }
.cabin-scene { position: absolute; inset: 0; }
.cabin-scene img { width: 100%; height: 100%; object-fit: cover; }
.cabin-film {
  position: absolute; inset: 0; background: #05070a;
  opacity: 0; transition: opacity .55s ease;
}
.cabin-frame { position: absolute; inset: 0; pointer-events: none; }
.cabin-frame .pillar { position: absolute; top: 0; bottom: 0; width: 8%; background: linear-gradient(90deg, #0b0b0d, #17181c); }
.cabin-frame .pillar.l { left: 0; } .cabin-frame .pillar.r { right: 0; }
.cabin-frame .roof { position: absolute; top: 0; left: 0; right: 0; height: 12%; background: linear-gradient(#0b0b0d, #131418); }
.cabin-frame .dash { position: absolute; bottom: 0; left: 0; right: 0; height: 22%; background: linear-gradient(#101116, #050507); }
.legal-note {
  margin-top: 1rem; font-size: var(--step--2); color: var(--acp-text-muted);
  border-left: 2px solid var(--acp-hairline); padding-left: .8rem;
}
.legal-note.warn { border-color: var(--acp-gold); color: var(--acp-gold); }

/* ---------- 5. tesla sensor map ---------- */
.sensor-stage { padding: clamp(1rem, 2.5vw, 1.8rem); }
.sensor-stage svg { width: 100%; height: auto; display: block; margin: 0 auto; }
/* the car lies on its side (nose left) so it fills the landscape stage */
.ts-body { stroke: #3a3e46; stroke-width: 1.2; transition: d .5s ease; }
.ts-tyre { fill: #0c0d10; stroke: #26292f; stroke-width: 1; }
.ts-shut { fill: none; stroke: rgba(0,0,0,.6); stroke-width: 1; }
.ts-glass { stroke: #2c313a; stroke-width: 1; transition: d .5s ease; }
.ts-bar { stroke: #25282e; stroke-width: 3.2; }
.ts-mirror { fill: #1d1f24; stroke: #3a3e46; stroke-width: 1; }
/* film is CLEAR: it tints the paint and shows its own edge, it does not
   paint over the car. An opaque fill here is what made the old car a blob. */
.ts-wash { fill: var(--acp-gold); opacity: .07; }
.ts-hatch { opacity: .5; }
.ts-rim { fill: none; stroke: var(--acp-gold); stroke-width: 2.2; }
.ts-film-mirror { opacity: .55; }
.ts-edge { stroke: var(--acp-gold); stroke-width: 1.4; opacity: .95; }
.ts-cut { fill: none; stroke: var(--acp-gold); stroke-width: .9; stroke-dasharray: 2 1.6; opacity: .9; }
.ts-sensor { fill: #e8ecf3; }
.sensor-lbl { font-family: 'Saira', sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; fill: var(--acp-text-muted); }

/* ---------- 6. gallery loupe ---------- */
/* Fixed column counts, not auto-fit: six photos over an auto-fit four columns
   left two cells in the last row showing the grid's grey backing, which read as
   two images that had failed to load. 3, 2 and 1 all divide six evenly. */
.gal-grid { display: grid; gap: 1px; background: var(--acp-hairline); grid-template-columns: 1fr; border: 1px solid var(--acp-hairline); }
@media (min-width: 620px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
.gal-item { position: relative; overflow: hidden; background: #08080a; aspect-ratio: 4 / 3; cursor: crosshair; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; }
.gal-cap {
  position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.72);
  font-family: 'Saira', sans-serif; font-size: var(--step--2); letter-spacing: .1em;
  text-transform: uppercase; color: var(--acp-text-muted); padding: .45rem .8rem;
}
.loupe {
  position: absolute; width: 9.5rem; height: 9.5rem; border-radius: 50%;
  border: 2px solid var(--acp-gold); box-shadow: 0 0 0 1px #000, 0 12px 34px rgba(0,0,0,.6);
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background-repeat: no-repeat; z-index: 3;
}
.gal-item:hover .loupe { opacity: 1; }
.loupe::after {
  content: "FILM EDGE"; position: absolute; left: 50%; bottom: -1.6rem; transform: translateX(-50%);
  font-family: 'Saira', sans-serif; font-size: 9px; letter-spacing: .18em; color: var(--acp-gold);
}

/* ---------- 7. review wall ---------- */
.rw-bars { margin-top: 1.4rem; }
.rw-bars div { display: grid; grid-template-columns: 2.2rem 1fr 2.4rem; gap: .7rem; align-items: center; padding: .3rem 0; }
.rw-bars i { display: block; height: 6px; background: var(--acp-hairline); position: relative; font-style: normal; }
.rw-bars i b { position: absolute; inset: 0 auto 0 0; background: var(--acp-gold); transition: width .5s ease; }
.rw-bars span { font-family: 'Saira', sans-serif; font-size: var(--step--2); color: var(--acp-text-muted); font-variant-numeric: tabular-nums; }
.rw-list { display: grid; gap: 1px; background: var(--acp-hairline); border: 1px solid var(--acp-hairline); }
.rw-card { background: #08080a; padding: 1.3rem 1.4rem; }
.rw-card.hide { display: none; }
.rw-card blockquote { font-size: var(--step-0); }
.rw-card figcaption { margin-top: .7rem; color: var(--acp-text-muted); font-size: var(--step--1); }
.rw-card figcaption b { color: var(--acp-text); }
.rw-stars { color: var(--acp-gold); letter-spacing: .16em; font-size: .9rem; margin-bottom: .5rem; }
.rw-empty { padding: 2rem 1.4rem; color: var(--acp-text-muted); background: #08080a; }

/* ---------- 8. dealer warranty flow ---------- */
.flow { display: grid; gap: 1px; background: var(--acp-hairline); border: 1px solid var(--acp-hairline); grid-template-columns: 1fr; }
@media (min-width: 820px) { .flow { grid-template-columns: repeat(4, 1fr); } }
.flow-step { background: #08080a; padding: 1.4rem 1.3rem; cursor: pointer; border-top: 2px solid transparent; transition: border-color .3s ease, background .3s ease; }
.flow-step.on { border-top-color: var(--acp-gold); background: #0e0f12; }
.flow-step h4 { font-family: 'Saira', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 1.02rem; }
.flow-step .n { font-family: 'Saira', sans-serif; color: var(--acp-gold); font-size: var(--step--2); letter-spacing: .18em; display: block; margin-bottom: .5rem; }
.flow-step p { color: var(--acp-text-muted); font-size: var(--step--1); margin-top: .4rem; }
.flow-detail { margin-top: 1.4rem; border-top: 1px solid var(--acp-hairline); background: #0a0a0c; padding: 1.4rem; }
.flow-detail h4 { font-size: var(--step-4); text-transform: uppercase; }
.flow-detail p { color: var(--acp-text-muted); margin-top: .6rem; max-width: 52ch; }
.flow-card { margin-top: 1.2rem; border: 1px solid var(--acp-hairline); padding: 1rem 1.1rem; font-family: 'Saira', sans-serif; letter-spacing: .05em; }
.flow-card span { display: block; color: var(--acp-text-muted); font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; }
.flow-card b { color: var(--acp-gold); }

/* ---------- 9. shop floor ---------- */
.floor-stage { padding: clamp(.9rem, 2vw, 1.5rem); }
.floor-stage svg { width: 100%; height: auto; display: block; }
/* An architectural plan, not six floating boxes: walls with thickness, a drive
   aisle, a door into every room, fixtures that say what each room is for, and
   a real top-down car that turns to face its route. */
.fl-wall { fill: none; stroke: #3a3e46; stroke-width: 2; }
.fl-wall-in { fill: none; stroke: #24272c; stroke-width: 1; }
.fl-iwall { fill: none; stroke: #3a3e46; stroke-width: 2; }
.fl-rollup { stroke: var(--acp-gold); stroke-width: 2; stroke-dasharray: 4 3; opacity: .7; }
.fl-note { font-family: 'Saira', sans-serif; font-size: 8px; letter-spacing: .18em; text-transform: uppercase; fill: #5d626a; text-anchor: middle; }
.fl-aisle { fill: #0c0d10; }
.fl-route { fill: none; stroke: #2e3137; stroke-width: 1.5; stroke-dasharray: 5 4; }
.fl-route-done { fill: none; stroke: var(--acp-gold); stroke-width: 2; transition: stroke-dashoffset .7s cubic-bezier(.22,1,.36,1); }
.fl-fix { fill: none; stroke: #3a3e46; stroke-width: 1.2; pointer-events: none; }
.fl-bayline { fill: none; stroke: #4a4536; stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.fl-rail { fill: none; stroke: #4b5058; stroke-width: 1.2; stroke-dasharray: 2 3; pointer-events: none; }
.fl-seal { fill: none; stroke: #2e3a48; stroke-width: 1; stroke-dasharray: 1 2; pointer-events: none; }
.bay { cursor: pointer; outline: none; }
.bay-hit { fill: #0f1013; transition: fill .3s ease; }
.bay:hover .bay-hit { fill: #15161a; }
.bay.on .bay-hit { fill: #1a1811; }
.bay:focus-visible .bay-hit { stroke: var(--acp-gold); stroke-width: 1.5; }
.bay.on .fl-fix, .bay.on .fl-rail { stroke: #7a6a3a; }
.bay-n { font-family: 'Saira', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .08em; fill: #5d626a; pointer-events: none; }
.bay-t { font-family: 'Saira', sans-serif; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--acp-text-muted); pointer-events: none; }
.bay.on .bay-n, .bay.on .bay-t { fill: var(--acp-gold); }
#floor-car { pointer-events: none; transform-box: view-box; }
.fl-car { fill: #2a2d33; stroke: var(--acp-gold); stroke-width: 1.3; }
.fl-glass { fill: #0d131d; stroke: #3a4250; stroke-width: .8; }
.fl-mirror { fill: #2a2d33; stroke: var(--acp-gold); stroke-width: .8; }

/* ---------- 10. studio finder ---------- */
.finder-map svg { width: 100%; height: auto; display: block; }
.finder-map .land { fill: #0e0f12; stroke: var(--acp-hairline); stroke-width: 1.2; }
.finder-map .pt { fill: var(--acp-steel); transition: fill .3s ease, r .3s ease; }
.finder-map .pt.on { fill: var(--acp-gold); }
.finder-map .link { stroke: var(--acp-gold); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0; transition: opacity .4s ease; }
.finder-map .link.on { opacity: .8; }
.finder-map text { font-family: 'Saira', sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: var(--acp-text-muted); }
.finder-out { margin-top: 1.2rem; border-top: 1px solid var(--acp-hairline); padding-top: .9rem; }
.finder-out b { font-family: 'Saira', sans-serif; font-size: var(--step-4); text-transform: uppercase; display: block; }
.finder-out span { color: var(--acp-text-muted); font-size: var(--step--1); }

/* ---------- 11. estimator ---------- */
.est-total { margin-top: 1.8rem; border-top: 2px solid var(--acp-gold); padding-top: 1.1rem; }
.est-total .fig { font-family: 'Saira', sans-serif; font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--acp-gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.est-total p { color: var(--acp-text-muted); font-size: var(--step--2); margin-top: .4rem; max-width: 40ch; }
.est-line { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--acp-hairline); font-size: var(--step--1); }
.est-line span { color: var(--acp-text-muted); }

/* ---------- legal ---------- */
.legal { max-width: 46rem; }
.legal h2 { font-size: var(--step-4); text-transform: uppercase; margin-top: 2.2rem; }
.legal p, .legal li { color: var(--acp-text-muted); margin-top: .8rem; }
.legal ul { padding-left: 1.1rem; }
.legal .flag { color: var(--acp-gold); }


/* ---------- PPF coverage picker (3D, button-driven) ---------- */
.picker { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 980px) { .picker { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }
.picker-stage {
  position: relative; min-height: clamp(17rem, 38vh, 25rem);
  background: #000; cursor: grab;
}
.picker-stage:active { cursor: grabbing; }
/* a still of the same car, so the stage is never an empty black box while
   1.4MB of model is still arriving on a phone */
.picker-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
#picker-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; opacity: 0; transition: opacity .6s ease; }
#picker.live #picker-canvas { opacity: 1; }
#picker.live .picker-poster { opacity: 0; transition: opacity .6s ease; }
.picker-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.8) 100%);
}
.picker-side { display: flex; flex-direction: column; gap: 1rem; }

/* the level buttons: a price list you can press */
.lvl-row { display: grid; gap: 1px; background: var(--acp-hairline); border: 1px solid var(--acp-hairline); }
.lvl {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  background: #08080a; border: 0; cursor: pointer; text-align: left;
  padding: .85rem 1rem; min-height: 44px;
  border-left: 2px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.lvl b {
  font-family: 'Saira', sans-serif; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--acp-text); font-size: var(--step--1);
}
.lvl span {
  font-family: 'Saira', sans-serif; font-weight: 600; color: var(--acp-text-muted);
  font-variant-numeric: tabular-nums;
}
.lvl:hover { background: #0e0f12; }
.lvl.on { background: #14130c; border-left-color: var(--acp-gold); }
.lvl.on b { color: var(--acp-gold); }
.lvl.on span { color: var(--acp-gold); }

.lvl-detail { border-top: 1px solid var(--acp-hairline); padding-top: 1rem; }
.lvl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lvl-head h3 { font-size: var(--step-4); text-transform: uppercase; }
.lvl-head .price { font-family: 'Saira', sans-serif; font-weight: 600; font-size: 1.7rem; color: var(--acp-gold); margin: 0; }
.lvl-detail > p { color: var(--acp-text-muted); margin-top: .6rem; max-width: 44ch; font-size: var(--step--1); }
.lvl-detail ul { list-style: none; margin: .9rem 0 1.2rem; }
.lvl-detail li { color: var(--acp-text-muted); font-size: var(--step--1); padding: .18rem 0 .18rem 1.1rem; position: relative; }
.lvl-detail li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 2px; background: var(--acp-gold); }

.picker-fallback { display: none; }
#picker.no3d .picker { display: none; }
#picker.no3d .picker-fallback { display: block; }


/* ---------- 3D loading state ---------- */
.scene-loading {
  position: absolute; inset: auto 0 0 0; z-index: 6; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  padding: .7rem 1rem;
  font-family: 'Saira', sans-serif; font-size: var(--step--2);
  letter-spacing: .2em; text-transform: uppercase; color: var(--acp-text-muted);
  background: linear-gradient(transparent, rgba(0,0,0,.75) 45%);
  transition: opacity .5s ease;
}
.scene-loading.gone { opacity: 0; }
.scene-loading i {
  display: block; width: 2.2rem; height: 2px; background: var(--acp-hairline);
  position: relative; overflow: hidden; font-style: normal;
}
.scene-loading i::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: var(--acp-gold); animation: sceneload 1.1s ease-in-out infinite;
}
@keyframes sceneload { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .scene-loading i::after { animation: none; width: 100%; } }


/* ---------- paint correction: before / after reveal ---------- */
.reveal-lab { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 980px) { .reveal-lab { grid-template-columns: 1.45fr 1fr; align-items: start; } }

.ba {
  position: relative; overflow: hidden; touch-action: pan-y;
  border-top: 1px solid var(--acp-hairline); background: #08080a;
  cursor: ew-resize;
  /* the whole thing is a control: nothing inside it should be selectable,
     draggable, or long-pressable, or a drag turns into an image drag */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ba-img {
  display: block; width: 100%; height: auto;
  pointer-events: none;                  /* the container handles the drag */
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
/* the corrected frame is clipped from the left, so the wipe reads as a pass
   across the panel rather than a crossfade */
.ba-after-wrap { position: absolute; inset: 0 auto 0 0; width: 0; overflow: hidden; }
.ba-after-wrap .ba-after { position: absolute; top: 0; left: 0; width: auto; height: 100%; max-width: none; }
@supports (aspect-ratio: 1) { .ba-after-wrap .ba-after { height: 100%; } }

.ba-line {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: linear-gradient(to bottom, transparent, var(--acp-gold) 12%, var(--acp-gold) 88%, transparent);
  box-shadow: 0 0 18px rgba(238,178,30,.55);
  pointer-events: none; transform: translateX(-1px);
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgba(8,8,10,.82); border: 2px solid var(--acp-gold);
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
}
.ba-grip::before, .ba-grip::after {
  content: ""; position: absolute; top: 50%; width: .42rem; height: .42rem;
  border-top: 2px solid var(--acp-gold); border-right: 2px solid var(--acp-gold);
}
.ba-grip::before { left: .5rem; transform: translateY(-50%) rotate(-135deg); }
.ba-grip::after  { right: .5rem; transform: translateY(-50%) rotate(45deg); }
/* while the pass is running the line glows harder, like a machine head working */
.ba.working .ba-line { box-shadow: 0 0 30px rgba(238,178,30,.85), 0 0 70px rgba(238,178,30,.35); }

.ba-tag {
  position: absolute; bottom: .8rem; z-index: 3; pointer-events: none;
  font-family: 'Saira', sans-serif; font-size: var(--step--2);
  letter-spacing: .16em; text-transform: uppercase;
  background: rgba(0,0,0,.62); padding: .4rem .7rem; color: var(--acp-text);
}
.ba-tag-l { left: .8rem; color: var(--acp-gold); }   /* the corrected side grows from the left */
.ba-tag-r { right: .8rem; }

/* the native range is the keyboard and screen-reader control, visually hidden
   but focusable, so the comparison is not mouse-only */
.ba-range {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2.6rem;
  opacity: 0; cursor: ew-resize; margin: 0;
}
.ba-range:focus-visible { opacity: .001; outline: 2px solid var(--acp-gold); outline-offset: -2px; }

.reveal-side h3 { font-size: var(--step-4); text-transform: uppercase; }
.reveal-side > p { color: var(--acp-text-muted); margin: .8rem 0 1.3rem; max-width: 44ch; font-size: var(--step--1); }
.ba-note { color: var(--acp-text-muted); font-size: var(--step--2); margin-top: .8rem; }

/* phones: the Tesla hint chip sat on the car's tail, and the floor-plan labels
   rendered at about 5px once the 560-unit plan scaled down to a phone width */
@media (max-width: 700px) {
  .sensor-stage .lab-hint { display: none; }   /* the model buttons below say the same thing */
  .bay-t { font-size: 13px; letter-spacing: .05em; }
  .bay-n { font-size: 14px; }
}

/* reviews: the filter stays with you. Unpinned, it sat at the top of a
   1,700px wall and left the whole right column empty below it */
@media (min-width: 861px) { .rw-side { position: sticky; top: 6rem; align-self: start; } }

/* legal: a contents column beside the text, rather than one 46rem column
   parked on the left of a wide screen */
.legal-wrap { display: grid; gap: clamp(1.5rem, 4vw, 4rem); }
@media (min-width: 861px) {
  .legal-wrap { grid-template-columns: 15rem minmax(0, 46rem); }
  .legal-toc { position: sticky; top: 6rem; align-self: start; }
}
.legal-toc ol { list-style: none; counter-reset: toc; margin-top: .6rem; border-left: 1px solid var(--acp-hairline); }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: block; padding: .5rem 0 .5rem 1rem; color: var(--acp-text-muted); text-decoration: none; font-size: var(--step--1); margin-left: -1px; border-left: 1px solid transparent; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero) "  "; color: #5d626a; font-family: 'Saira', sans-serif; }
.legal-toc a:hover { color: var(--acp-text); border-left-color: var(--acp-gold); }


/* ================= service sales page (sp-*) =================
   Built on Ceramic first, then shared by every service page: a page opts in
   with <main class="sp">. Graphics unique to one page keep that page's own
   prefix (cer-drops, cer-years, tn-*). */
/* ceramic: the sales page
   Round one ("the surface") read as a report: a technical exhibit up top, the
   same figure-and-caption shape in every section, prices last with no button.
   This one leads with a finished car, the price and the quote, uses ACP's own
   photographs throughout, and keeps the two graphics as the proof. */
/* ---- ground: BRUSHED STEEL, with black bands (Mudit, 2026-09-11) ----
   All-black read as "not quite a website". Paper, gunmetal and a yellow ground
   were tried side by side; he chose steel, meaning the METAL of the logo's P: a
   light, cool brushed silver (#E8E9EC at the top of the letter to #A9ABB1 in the
   stem). Each light section is its own brushed panel (a vertical silver run,
   fine horizontal brushing, one soft diagonal sheen) and black bands carry the
   demo, the packages and the close, so the page alternates metal and black.
   Gold sits beside the metal the way it does in the logo, as a FILL: it is
   1.1:1 against silver. Deep Gold fails as text on the darker metal too (2.6:1),
   so text accents on metal use a darker bronze, #5E4508 (4.4:1 at the darkest
   point), via --sp-accent. The colour tokens are re-pointed here rather than
   every rule rewritten; .sp-dark flips a section back to the black palette. */
main.sp {
  --acp-ground: #D3D5D9; --acp-surface: #F4F5F6; --acp-surface-2: #E4E5E8;
  --acp-hairline: rgba(10,10,10,.16); --acp-text: var(--acp-ink); --acp-text-muted: #3A3D42;
  --sp-accent: #5E4508;
  --sp-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -0.72'/%3E%3C/filter%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.7' numOctaves='2' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 0 0 -0.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.42'/%3E%3Crect width='100%25' height='100%25' filter='url(%23d)' opacity='.16'/%3E%3C/svg%3E");
  background: var(--acp-ground); color: var(--acp-text);
}
main.sp > section:not(.sp-dark) {
  background:
    linear-gradient(112deg, rgba(255,255,255,0) 22%, rgba(255,255,255,.42) 38%, rgba(255,255,255,0) 54%),
    var(--sp-brush),
    linear-gradient(180deg, #ECEDEF 0%, #D9DBDF 45%, #C4C6CB 100%);
  /* the brushing tile is stretched to the full width, so its repeat never
     shows as a vertical seam; it only repeats downward, along the grain */
  background-size: 100% 100%, 100% 360px, 100% 100%;
  background-repeat: no-repeat, repeat-y, no-repeat;
  border-top: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}
.sp .sp-dark {
  --acp-ground: #000; --acp-surface: #101114; --acp-surface-2: #1A1C20;
  --acp-hairline: #2A2D33; --acp-text: #F4F4F5; --acp-text-muted: #9C9FA6;
  --sp-accent: var(--acp-gold);
  background: #0a0a0c; color: var(--acp-text);
}
/* every section is its own panel, so each carries its own bottom edge, and
   panels butt straight onto the black bands */
main.sp > .sp-band { padding-bottom: clamp(3rem, 6.5vw, 5.5rem); }
main.sp > .sp-final { margin-top: 0; }
.sp .frame-tag { color: var(--sp-accent); }
.sp .frame-tag::before, .sp .frame-tag::after { background: var(--sp-accent); }
.sp .rw-stars { color: var(--sp-accent); }
.sp-hero-photo::before { display: none; }
main.sp > section:not(.sp-dark) .sp-get { background: rgba(255,255,255,.55); }
main.sp > section:not(.sp-dark) .sp-card,
main.sp > section:not(.sp-dark) .sp-review { background: rgba(255,255,255,.72); }
.sp-card::before { background: var(--acp-gold); }
.sp-ticks li::before { border-color: var(--acp-gold-deep); }
/* the packages chart was drawn for black: on the brushed metal its thin gold
   lines and labels fought the texture (Mudit: "hard to read"), so the packages
   sit in a black band, where the gold lines read at 11:1 */
.sp-dark .tl-axis, .sp-dark .tl-ticks line { stroke: #4a4e56; }
.sp-dark .tl-new { stroke: #33363c; }
.sp-dark .tl-bare { stroke: #8a8d93; }
.sp-dark .cd-drop { stroke: rgba(220,232,246,.72); }
/* the shared header fades to transparent for dark heroes; over metal that fade
   reads as a grey smear, so on this page it is solid from the top */
body:has(main.sp) .site-head { background: #000; }

.sp-band { padding: clamp(3rem, 6.5vw, 5.5rem) var(--pad) 0; }
.sp-head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); max-width: 44rem; }
.sp-head h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); text-transform: uppercase; }
.sp-sub { margin-top: .7rem; color: var(--acp-text-muted); max-width: var(--measure); }
.sp-link {
  font-family: 'Saira', sans-serif; font-weight: 500; font-size: var(--step--1);
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--acp-text); border-bottom: 1px solid var(--sp-accent); padding: .3rem 0;
}
.sp-link:hover { color: var(--sp-accent); }

/* ---- hero: copy left, the finished car right, bled to the edge ---- */
.sp-hero { display: grid; align-items: center; }
.sp-hero-copy { padding: clamp(1.6rem, 4vw, 3rem) var(--pad) clamp(2rem, 4vw, 3rem); }
.sp-hero h1 { font-size: var(--step-5); text-transform: uppercase; max-width: 13ch; }
.sp-lede { margin-top: 1.1rem; font-size: var(--step-1); max-width: 34rem; }
.sp-ticks { list-style: none; margin-top: 1.3rem; display: grid; gap: .45rem; }
.sp-ticks li { position: relative; padding-left: 1.7rem; color: var(--acp-text); }
.sp-ticks li::before {             /* a drawn tick, not a glyph */
  content: ""; position: absolute; left: .2rem; top: .42em; width: .7rem; height: .38rem;
  border-left: 2px solid var(--sp-accent); border-bottom: 2px solid var(--sp-accent); transform: rotate(-45deg);
}
.sp-cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem; }
.sp-trust { list-style: none; margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--acp-hairline); display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; }
.sp-trust li { color: var(--acp-text-muted); font-size: var(--step--1); letter-spacing: .04em; }
.sp-trust b { color: var(--sp-accent); font-family: 'Saira', sans-serif; font-weight: 600; font-size: 1.15em; margin-right: .25rem; }
.sp-hero-photo { position: relative; margin: 0; order: -1; }
.sp-hero-photo img { width: 100%; height: clamp(15rem, 62vw, 26rem); object-fit: cover; object-position: 52% 60%; }
.sp-hero-photo figcaption {
  position: absolute; left: var(--pad); right: var(--pad); bottom: .8rem; text-align: right;
  font-size: var(--step--2); letter-spacing: .06em; line-height: 1.4;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.85);
}
@media (min-width: 861px) {
  /* the photo keeps its own proportions; stretched to the copy's height it
     cropped to a portrait slice and cut both ends off the car */
  .sp-hero { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
  .sp-hero-photo { order: 0; }
  .sp-hero-photo img { height: auto; aspect-ratio: 16 / 10; }
  .sp-hero-copy { padding-right: clamp(1.5rem, 3vw, 3rem); }
}

/* ---- what you get: four payoffs, scannable ---- */
.sp-gets {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--acp-hairline); border-block: 1px solid var(--acp-hairline);
}
@media (min-width: 1000px) { .sp-gets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-get { background: var(--acp-surface); padding: clamp(1.2rem, 2.6vw, 1.9rem) clamp(1rem, 2.4vw, 1.8rem); }
.sp-get svg { width: 30px; height: 30px; fill: none; stroke: var(--sp-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-get h3 { margin-top: .8rem; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .04em; }
.sp-get p { margin-top: .35rem; color: var(--acp-text-muted); font-size: var(--step--1); line-height: 1.55; }

/* ---- the demo, contained, beside its explanation ---- */
.sp-try { display: grid; gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center; }
@media (min-width: 861px) { .sp-try { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.sp-try h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); text-transform: uppercase; }
.sp-try-copy p:not(.eyebrow) { margin-top: .9rem; color: var(--acp-text-muted); max-width: 30rem; }
.sp-try-copy .sp-try-note { color: var(--acp-text); padding-left: 1rem; border-left: 2px solid var(--sp-accent); }
.sp-try-stage { container-type: inline-size; }
/* height from the container's own width, so it never forces the width (the
   aspect-ratio + min-height trap), and a floor so phones get a usable target */
.sp-try .bead-stage { width: 100%; height: max(14rem, calc(100cqw * 756 / 2000)); border: 1px solid var(--acp-hairline); }
.sp .hood-photo { filter: brightness(.66) saturate(.75) contrast(1.06); }
.sp-try .bead-legend span { padding: .55rem .8rem; }

/* ---- why it beads: the diagram and the real thing side by side ---- */
.cer-why { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
@media (min-width: 861px) { .cer-why { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.cer-why-copy { display: grid; gap: .9rem; margin-top: 1.2rem; }
@media (min-width: 600px) { .cer-why-copy { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
.cer-why-copy p { color: var(--acp-text-muted); font-size: var(--step--1); }
.sp-photo { margin: 0; }
.sp-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.sp-photo figcaption { margin-top: .55rem; color: var(--acp-text-muted); font-size: var(--step--2); letter-spacing: .06em; }

.cer-drops svg, .cer-years svg { width: 100%; height: auto; display: block; }
.cd-surface { stroke: #6e7278; stroke-width: 1.5; }
.cd-drop { fill: url(#cd-water); stroke: #6f8fb2; stroke-width: 1.3; }
.cd-glint { fill: rgba(255,255,255,.9); }
.cd-tan { stroke: #8a9099; stroke-width: 1; stroke-dasharray: 3 3; }
.cd-arc { fill: none; stroke: #6e7278; stroke-width: 1.5; stroke-dasharray: 72; stroke-dashoffset: 72; transition: stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1) .25s; }
.cd-arc-gold { stroke: var(--sp-accent); }
.cer-drops.in .cd-arc { stroke-dashoffset: 0; }
.cd-deg { font-family: 'Saira', sans-serif; font-weight: 600; font-size: 15px; fill: var(--acp-text-muted); }
.cd-deg-gold { fill: var(--sp-accent); }
.cd-cap { font-family: 'Saira', sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; fill: var(--acp-text); }
.cd-cap .cd-sub { fill: var(--acp-text-muted); letter-spacing: .08em; }
.cd-cap-gold { fill: var(--sp-accent); }

/* ---- packages: the timeline, then a card per tier keyed to its line ---- */
.tl-axis { stroke: #8a8d93; stroke-width: 1.2; }
.tl-ticks line { stroke: #8a8d93; }
.tl-ticks text { font-family: 'Saira', sans-serif; font-size: 12px; fill: var(--acp-text-muted); text-anchor: middle; }
.tl-ylab, .tl-newlab { font-family: 'Saira', sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; fill: var(--acp-text-muted); }
.tl-new { stroke: #b9bcc1; stroke-dasharray: 2 5; }
.tl-bare, .tl-coat { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1); }
.tl-bare { stroke: #8a8d93; stroke-width: 2; }
.tl-coat { stroke: var(--sp-accent); stroke-width: 2.4; }
.tl-coat.t2 { stroke-opacity: .45; transition-delay: .15s; }
.tl-coat.t5 { stroke-opacity: .7; transition-delay: .3s; }
.tl-coat.t7 { transition-delay: .45s; }
.cer-years.in .tl-bare, .cer-years.in .tl-coat { stroke-dashoffset: 0; }
.cer-years.in .tl-bare { stroke-dasharray: .012 .01; }   /* dashed once drawn: the one to avoid */
.tl-end { fill: var(--sp-accent); }
.tl-end.t2 { fill-opacity: .5; } .tl-end.t5 { fill-opacity: .78; }
.tl-lbl { font-family: 'Saira', sans-serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; fill: var(--sp-accent); }
.tl-barelab { font-family: 'Saira', sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; fill: var(--acp-text-muted); }
.cer-years { margin: 0; }
.cer-years figcaption { margin-top: .4rem; color: var(--acp-text-muted); font-size: var(--step--2); }

.sp-cards {
  display: grid; gap: 1px; margin-top: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--acp-hairline); border: 1px solid var(--acp-hairline);
}
@media (min-width: 861px) { .sp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-card { position: relative; display: flex; flex-direction: column; background: var(--acp-surface); padding: 1.6rem 1.5rem 1.5rem; }
.sp-card::before {                /* the tier's own line from the chart */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--sp-accent);
}
.sp-card.t2::before { opacity: .42; } .sp-card.t5::before { opacity: .7; }
.sp-card h3 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .05em; }
.sp-term { margin-top: .15rem; color: var(--acp-text-muted); font-size: var(--step--1); letter-spacing: .04em; }
.sp-flag {
  position: absolute; top: 1rem; right: 1rem; background: var(--acp-gold); color: #000;
  font-family: 'Saira', sans-serif; font-weight: 600; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: .25rem .55rem;
}
.sp-card .price { margin-top: .3rem; font-family: 'Saira', sans-serif; font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.1; color: var(--sp-accent); }
.sp-card .price span { font-size: .55em; vertical-align: .6em; margin-left: .05em; }
.sp-card ul { list-style: none; margin: .9rem 0 1.5rem; display: grid; gap: .45rem; }
.sp-card li { position: relative; padding-left: 1.2rem; color: var(--acp-text-muted); font-size: var(--step--1); }
.sp-card li::before { content: ""; position: absolute; left: 0; top: .72em; width: .6rem; height: 1px; background: var(--sp-accent); }
.sp-card .btn { margin-top: auto; text-align: center; }
.sp-fine { margin-top: 1rem; color: var(--acp-text-muted); font-size: var(--step--1); max-width: 46rem; }

/* ---- how we do it: four photographed steps ---- */
.sp-steps { list-style: none; display: grid; gap: clamp(1.4rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.sp-step-img { position: relative; overflow: hidden; }
.sp-step-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sp-step h3 { margin-top: .9rem; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .04em; }
.sp-step h3 span { color: var(--sp-accent); margin-right: .5rem; }
.sp-step p { margin-top: .35rem; color: var(--acp-text-muted); font-size: var(--step--1); }

/* missing media: the closest photo holds the slot; a tag says so, and the
   cover (hover or focus) names the shot that should be here */
.media-missing { outline-offset: 2px; }
.media-missing::after {
  content: "Missing media"; position: absolute; left: .6rem; top: .6rem; z-index: 1;
  font-family: 'Saira', sans-serif; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(38,38,38,.93); color: #d6d7da; padding: .25rem .5rem;
}
.media-missing-cover {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: .5rem;
  padding: 1.2rem; background: rgba(38,38,38,.93); opacity: 0; transition: opacity .25s ease;
}
.media-missing-cover span { font-family: 'Saira', sans-serif; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-accent); }
.media-missing-cover p { color: #e4e5e8; font-size: var(--step--1); line-height: 1.5; }
.media-missing:hover .media-missing-cover, .media-missing:focus .media-missing-cover { opacity: 1; }

/* ---- proof ---- */
.sp-strip { display: grid; gap: 4px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .sp-strip { grid-template-columns: 1.3fr 1fr 1fr; } }
.sp-strip img { width: 100%; height: clamp(12rem, 24vw, 20rem); object-fit: cover; }
.sp-strip-cap { margin-top: .55rem; color: var(--acp-text-muted); font-size: var(--step--2); letter-spacing: .06em; }
.sp-reviews { display: grid; gap: 1px; margin: clamp(1.8rem, 4vw, 2.8rem) 0 1.4rem; background: var(--acp-hairline); border: 1px solid var(--acp-hairline); }
@media (min-width: 861px) { .sp-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-review { margin: 0; background: var(--acp-surface); padding: 1.4rem 1.4rem 1.3rem; display: flex; flex-direction: column; }
.sp-review blockquote { font-size: var(--step-0); line-height: 1.6; }
.sp-review figcaption { margin-top: auto; padding-top: 1rem; color: var(--acp-text-muted); font-size: var(--step--1); }
.sp-review figcaption b { display: block; color: var(--acp-text); font-weight: 600; }

/* ---- final call ---- */
.sp-final {
  margin-top: clamp(3.5rem, 7vw, 6rem); padding: clamp(2.6rem, 5.5vw, 4rem) var(--pad);
  display: grid; gap: 1.6rem; align-items: center;
}
@media (min-width: 861px) { .sp-final { grid-template-columns: 1.4fr 1fr; } }
.sp-final h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); text-transform: uppercase; max-width: 22ch; }
.sp-final p:not(.frame-tag) { margin-top: .8rem; color: var(--acp-text-muted); max-width: 36rem; }
.sp-final-side { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.sp-phone { color: var(--acp-text); text-decoration: none; border-bottom: 1px solid var(--acp-hairline); padding: .35rem 0; }
.sp-phone:hover { border-color: var(--sp-accent); }
.sp-studios { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .4rem; }
.sp-studios a { color: var(--acp-text-muted); font-size: var(--step--1); text-decoration: none; display: inline-block; padding: .5rem 0; }
.sp-studios a:hover { color: var(--sp-accent); }

/* ---- phone quote bar (assets/js/sticky-cta.js) ---- */
.sticky-cta { display: none; }
@media (max-width: 860px) {
  .sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    align-items: center; justify-content: space-between; gap: 1rem;
    padding: .65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom));
    background: rgba(0,0,0,.94); border-top: 1px solid var(--acp-hairline);
    transform: translateY(110%); transition: transform .3s ease;
  }
  .sticky-cta.on { transform: none; }
  .sticky-cta span { color: var(--acp-text-muted); font-size: var(--step--1); }
  .sticky-cta b { color: var(--sp-accent); font-family: 'Saira', sans-serif; font-weight: 600; }
  .sticky-cta .btn { padding: .7rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* phones: SVG text shrinks with the drawing, so it is set larger in user units */
@media (max-width: 700px) {
  .cd-deg { font-size: 26px; }
  .cd-cap { font-size: 20px; letter-spacing: .05em; }
  .tl-ticks text { font-size: 24px; }
  .tl-ylab, .tl-newlab { font-size: 19px; letter-spacing: .06em; }
  .tl-lbl, .tl-barelab { display: none; }   /* the tier cards carry these */
}

/* ================= window tinting on the sales page (tn-*) ================= */
/* the hero photo is portrait-sourced, so it runs 5:4 rather than 16:10 */
@media (min-width: 861px) { .sp-hero-photo--tall img { aspect-ratio: 5 / 4; } }
.sp-hero-photo--tall img { object-position: 50% 45%; }

/* shade picker, in a black band: the white render reads as a lightbox */
.tn-pick-head { max-width: 40rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.tn-pick-head h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); text-transform: uppercase; }
.tn-pick-head p:not(.eyebrow) { margin-top: .7rem; color: var(--acp-text-muted); }
.tn-pick-grid { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; }
@media (min-width: 861px) { .tn-pick-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.tn-pick .tint-stage { border: 1px solid var(--acp-hairline); }
.tn-pick .chips { margin-top: 0; }
.tn-note { margin-top: 1rem; color: var(--acp-text-muted); font-size: var(--step--2); line-height: 1.55; }

/* why ceramic: the three bands of sunlight, and the real glass beside it */
.tn-why { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
@media (min-width: 861px) { .tn-why { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.tn-why-copy { display: grid; gap: .9rem; margin-top: 1.2rem; }
@media (min-width: 600px) { .tn-why-copy { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
.tn-why-copy p { color: var(--acp-text-muted); font-size: var(--step--1); }
.tn-light { margin: 0; }
.tn-light svg { width: 100%; height: auto; display: block; }
.tn-side { font-family: 'Saira', sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; fill: var(--acp-text-muted); }
.tn-lbl { font-family: 'Saira', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; fill: var(--acp-text); }
.tn-val { font-family: 'Saira', sans-serif; font-size: 13px; letter-spacing: .06em; fill: var(--acp-text); }
.tn-val-gold { fill: var(--sp-accent); font-weight: 600; }
.tn-glass { fill: rgba(150,190,220,.5); stroke: #6f8fb2; stroke-width: 1; }
.tn-film { fill: var(--acp-gold); }
.tn-uv { fill: #6b4fbf; }
.tn-vis { fill: #f3f1ea; stroke: rgba(10,10,10,.35); stroke-width: 1; }
.tn-ir { fill: #b3261e; }
/* the beams draw in from the sun side when the figure reveals */
.tn-beam { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform .9s cubic-bezier(.22,1,.36,1); }
.tn-beam.tn-out { transition-delay: .55s; }
.tn-light.in .tn-beam { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .tn-beam { transform: none; transition: none; } }
@media (max-width: 700px) {
  .tn-side { font-size: 18px; letter-spacing: .06em; }
  .tn-lbl, .tn-val { font-size: 19px; letter-spacing: .02em; }
}

/* ================= the rest of the site on steel (2026-09-11) =================
   Every page opts in with <main class="sp">: photo heroes, 3D scenes and
   interactive demos sit in black bands (.sp-dark), text, cards, photos and forms
   on brushed steel. The older components were drawn for black, so inside a
   steel section the gold TOKEN is re-pointed to the readable bronze (gold is
   1.1:1 on silver) and true gold is pinned back onto the three things that
   carry black text on a gold fill. Near-black panels become light enamel. */
main.sp > section:not(.sp-dark) { --acp-gold: #5E4508; }
main.sp > section:not(.sp-dark) :is(.btn:not(.btn-quiet), .chip.on, .sp-flag) { background: #EEB21E; border-color: #EEB21E; color: #000; }
main.sp > section:not(.sp-dark) .btn:not(.btn-quiet):hover { background: #f6c33e; }
main.sp > section:not(.sp-dark) :is(.certs div, .rw-card, .rw-empty, .pkg-grid .pkg, .svc) { background: rgba(255,255,255,.66); }
main.sp > section:not(.sp-dark) .svc-img { background: #c4c6cb; }
main.sp > section:not(.sp-dark) .svc-img::after { background: linear-gradient(to top, rgba(255,255,255,.66) 0%, transparent 40%); }
main.sp > section:not(.sp-dark) .field :is(input, select, textarea) { background: rgba(255,255,255,.88); color: var(--acp-ink); border-color: rgba(10,10,10,.25); }
main.sp > section:not(.sp-dark) .field :is(input, select, textarea):focus { border-color: #5E4508; }
main.sp > section:not(.sp-dark) .tesla-media::after { background: linear-gradient(to right, #D9DBDF, transparent 35%); }
/* the coverage act fades its 3D into pure black, so its band stays #000 */
.sp .coverage.sp-dark { background: #000; }
/* legacy bands carry their own vertical padding; only the sp-* bands need the
   extra bottom edge added above */
main.sp > .band + .v-divider { background: none; }

/* ================= PPF on the sales page (pf-*) ================= */
/* gloss vs stealth: the same car from the same spot, straight across */
.pf-pair { display: grid; gap: clamp(.8rem, 2vw, 1.4rem); }
@media (min-width: 700px) { .pf-pair { grid-template-columns: 1fr 1fr; } }
.pf-pair .sp-photo img { aspect-ratio: 1200 / 582; }
.pf-pair figcaption b { color: var(--acp-text); font-weight: 600; margin-right: .3rem; }
/* straight answers, in a black band */
.pf-faq { display: grid; gap: 1px; background: var(--acp-hairline); border: 1px solid var(--acp-hairline); }
@media (min-width: 861px) {
  .pf-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* an odd count would leave an empty grey cell that reads as a failed load */
  .pf-faq > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.pf-faq > div { background: var(--acp-surface); padding: 1.3rem 1.4rem; }
.pf-faq dt { font-family: 'Saira', sans-serif; font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.pf-faq dd { margin-top: .45rem; color: var(--acp-text-muted); font-size: var(--step--1); }
.sp-band .picker, .sp-band .lab.split { margin-top: 0; }

/* ================= paint correction on the sales page (pc-*) ================= */
/* the before|after pair must never be cropped, or the two halves stop matching the tags */
.sp-hero-photo--wide img { height: auto; aspect-ratio: 2 / 1; object-position: 50% 50%; }
.pc-tag {
  position: absolute; top: .8rem; z-index: 2; font-family: 'Saira', sans-serif; font-size: var(--step--2);
  letter-spacing: .16em; text-transform: uppercase; background: rgba(0,0,0,.7); color: #fff; padding: .3rem .6rem;
}
.pc-tag-l { left: .8rem; } .pc-tag-r { left: calc(50% + .8rem); }
/* what correction can fix: a cross-section of the paint */
.pc-layers { margin: 0; }
.pc-layers svg { width: 100%; height: auto; display: block; }
.pc-clear { fill: rgba(190,215,235,.55); }
.pc-base { fill: #4a4f57; }
.pc-primer { fill: #8a8d93; }
.pc-top { fill: none; stroke: #1b1e23; stroke-width: 1.6; stroke-linejoin: round; }
.pc-level { stroke: var(--sp-accent); stroke-width: 1.6; stroke-dasharray: 6 5; }
.pc-lead { stroke: #6e7278; stroke-width: 1; }
.pc-lyr { font-family: 'Saira', sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; fill: var(--acp-text-muted); }
.pc-note { font-family: 'Saira', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; fill: var(--acp-text); }
.pc-sub { font-family: 'Saira', sans-serif; font-size: 12px; letter-spacing: .06em; fill: var(--sp-accent); }
.pc-sub-warn { fill: #9a2a1f; }
.pc-cap { font-size: 12px; fill: var(--acp-text-muted); }
@media (max-width: 700px) {
  .pc-lyr, .pc-sub { font-size: 17px; letter-spacing: .02em; }
  .pc-note { font-size: 18px; letter-spacing: .02em; }
  .pc-cap { display: none; }
}
/* improvement range per stage, as a bar */
.pc-gain { position: relative; height: 6px; margin-top: .9rem; background: var(--acp-hairline); }
.pc-gain span { position: absolute; top: 0; bottom: 0; left: calc(var(--lo) * 1%); width: calc((var(--hi) - var(--lo)) * 1%); background: var(--acp-gold); }
.pc-gain::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--lo) * 1%); background: rgba(238,178,30,.25); }
.pc-gain-l { margin-top: .4rem; color: var(--acp-text-muted); font-size: var(--step--2); letter-spacing: .06em; }

/* ================= Tesla on the sales page (ts-*) ================= */
@media (min-width: 861px) { .sp-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 860px) { .sp-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ts-items { list-style: none; margin-top: .9rem; display: grid; gap: .4rem; }
.ts-items li { position: relative; padding-left: 1.2rem; color: var(--acp-text-muted); font-size: var(--step--1); }
.ts-items li::before { content: ""; position: absolute; left: 0; top: .72em; width: .6rem; height: 1px; background: var(--acp-gold); }
.sp-proof .pf-faq + .sp-reviews { margin-top: clamp(1.6rem, 3.5vw, 2.4rem); }

/* ================= gallery (gx-*) ================= */
.gx-filter { margin: 0 0 1.4rem; }
/* masonry by columns, so portrait and landscape tiles keep their shape */
.gx-grid { columns: 3 17rem; column-gap: 10px; }
.gx-grid .gal-item { break-inside: avoid; margin: 0 0 10px; aspect-ratio: auto; display: block; }
.gx-grid .gal-item img { height: auto; }
.gx-grid .gal-item[hidden] { display: none; }
.gx-grid .gal-cap { text-transform: none; letter-spacing: .02em; font-family: 'Manrope', sans-serif; font-size: var(--step--1); color: #d9dbdf; }
.gx-grid .gal-cap b { color: #fff; font-weight: 600; }
.gx-grid .loupe::after { content: "CLOSER LOOK"; }
.gx-count { margin-top: .6rem; color: var(--acp-text-muted); font-size: var(--step--2); letter-spacing: .08em; }
.gx-pairs { display: grid; gap: clamp(1.8rem, 4vw, 2.8rem); }
.gx-pair h3 { margin-top: .7rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
.gx-pair .sp-photo img { aspect-ratio: auto; }
.gx-wide img { width: 100%; height: auto; }
@media (min-width: 861px) { .gx-wide { max-width: 70%; } }

/* correction slider: one state label, bottom centre, that flips at halfway */
.ba-state {
  position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); z-index: 3; pointer-events: none;
  font-family: 'Saira', sans-serif; font-weight: 600; font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  background: rgba(0,0,0,.72); color: #fff; padding: .45rem .9rem; border: 1px solid rgba(255,255,255,.18);
  transition: color .25s ease, border-color .25s ease;
}
.ba-state.is-corrected { color: #EEB21E; border-color: rgba(238,178,30,.55); }