/* Prodigy Auto Collision: the site-wide design system, first used by the homepage.
   Idea: "The Art of Restoration". Atmosphere and service live in the dark (charcoal, black, one gold); proof and
   information live in warm daylight (paper and stone). Illustrative photography only ever appears in the dark;
   genuine Prodigy repairs only in daylight, so the two can never be confused.
   Reusable on every page: tokens, .wrap, .display/.h2/.h3/.lead, .btn, .arrow-link, .inline-link, .tag, .note,
   [data-reveal], .nav/.menu, .ba (comparison), .pairs, .act (action panels), .info, .foot, .field (forms). */

:root {
  color-scheme: dark;

  /* Colour: dark grounds */
  --black: #0b0b0a;
  --charcoal: #141413;
  --graphite: #1f1e1c;
  --graphite-2: #2a2926;
  --ink: #f5f4f0;
  --muted: #b8b4ac;
  --dim: #8e8a83;
  /* Colour: daylight grounds */
  --paper: #efeeea;
  --stone: #e3e1db;
  --ink-dark: #141412;
  --muted-dark: #55524c;
  --ink-dark-soft: #2b2925;
  /* Colour: the one accent */
  --gold: #e9b824;
  --gold-soft: #f2cd5c;
  --gold-deep: #765600;
  --gold-ink: #0e0d0b;

  /* Type: a wide grotesk (Archivo at 116% width) for the voice of the brand, Inter for reading */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Inter", system-ui, sans-serif;
  --wide: 116%;
  --fs-tag: 0.8125rem;
  --fs-small: 0.9375rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --fs-title: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);
  --fs-h2: clamp(2rem, 1.1rem + 2.4vw, 3.5rem);
  --fs-display: clamp(2.5rem, 1rem + 4.2vw, 5.25rem);

  /* Space: one rhythm for every page */
  --m: clamp(20px, 4vw, 64px);
  --wrap-max: 1360px;
  --gutter: max(var(--m), calc((100vw - var(--wrap-max)) / 2));
  --col-gap: clamp(20px, 2.4vw, 40px);
  --section: clamp(88px, 9vw, 152px);
  --nav-h: 88px;
  --logo: clamp(50px, 4.2vw, 60px);

  /* Motion: one curve for entrances, one for state changes */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --focus: var(--gold);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #3a3936 var(--black); }
body { margin: 0; background: var(--black); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--text); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
figure, dl, dd, blockquote { margin: 0; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; font-stretch: var(--wide); text-wrap: balance; }
:where(ul[role="list"], ol) { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--gold-ink); }
[hidden] { display: none !important; } /* the attribute always wins over a component's display */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 60; background: var(--gold); color: var(--gold-ink); padding: 12px 16px; text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }

/* ---------- Layout and type ---------- */
.wrap { width: min(100% - 2 * var(--m), var(--wrap-max)); margin-inline: auto; }
.display { font-size: var(--fs-display); line-height: 0.96; letter-spacing: -0.035em; }
.h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.03em; }
.h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 46ch; }
.accent { color: var(--gold-soft); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px;
  font: 600 var(--fs-small)/1 var(--display); font-stretch: 108%; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms ease-out;
}
.btn:active { transform: scale(0.97); }
.btn--gold { background: var(--gold); color: var(--gold-ink); }
.btn--line { color: var(--ink); border-color: rgb(245 244 240 / 0.55); background: rgb(11 11 10 / 0.25); }
.btn--dark { background: var(--ink-dark); color: var(--paper); }
.btn--icon svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; padding: 12px 0; font: 600 var(--fs-small)/1 var(--display); font-stretch: 108%; color: var(--gold); text-decoration: none; }
.arrow-link span { transition: transform 240ms var(--ease); }
.arrow-link--dark { color: var(--gold-deep); }
.inline-link { color: var(--gold-soft); text-decoration: underline; text-decoration-color: rgb(242 205 92 / 0.5); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover { background: var(--gold-soft); }
  .btn--line:hover { border-color: var(--ink); background: rgb(245 244 240 / 0.08); }
  .btn--dark:hover { background: var(--graphite-2); }
  .arrow-link:hover span { transform: translateX(5px); }
  .inline-link:hover { text-decoration-color: currentColor; }
}

/* Tags: what a picture is. Gold for genuine Prodigy work; a quiet dark note for illustrative photography. */
.tag, .note { display: inline-block; padding: 6px 10px; font: 600 var(--fs-tag)/1 var(--display); font-stretch: 108%; white-space: nowrap; }
.tag--real { background: var(--gold); color: var(--gold-ink); }
.note { background: rgb(11 11 10 / 0.6); color: rgb(245 244 240 / 0.82); }
/* Photo captions: small, muted, below the picture, never over it. Prodigy's own photographs say what they show;
   licensed ones say "Illustrative photography · Photo: <creator> / <site>" (src/lib/photos.ts). */
.fig { margin: 0; }
.fig__frame { position: relative; overflow: hidden; background: var(--graphite); }
.fig__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.credit { margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.45; letter-spacing: 0.005em; color: color-mix(in srgb, currentColor 62%, transparent); }
.credit--own { color: color-mix(in srgb, currentColor 80%, transparent); }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }

/* Entrances: once, a short rise and fade, staggered within a group. app.js turns them on (html.reveal) only when it
   can also turn them off again, so a failed script never leaves content hidden; reduced motion skips them. */
.reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease) var(--d, 0ms), transform 900ms var(--ease) var(--d, 0ms); }
.reveal [data-reveal].is-in { opacity: 1; transform: none; }


/* Forms (for Estimate and Contact): label above, one field per line on phones, gold focus */
.field { display: grid; gap: 8px; }
.field label { font: 600 var(--fs-small)/1.2 var(--display); font-stretch: 108%; }
.field input, .field select, .field textarea { min-height: 52px; padding: 14px 16px; font: inherit; color: inherit; background: var(--graphite); border: 1px solid rgb(245 244 240 / 0.18); border-radius: 0; }
.field textarea { min-height: 140px; resize: vertical; }
.field :focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.field__hint { font-size: var(--fs-small); color: var(--muted); }

/* ---------- Header ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--nav-h); display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px);
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  transition: background-color 300ms ease, height 300ms var(--ease), transform 400ms var(--ease);
}
.nav.is-solid { background: rgb(11 11 10 / 0.95); --nav-h: 76px; --logo: clamp(46px, 3.6vw, 52px); }
.nav.is-hidden { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: calc(var(--logo) * 0.24); margin-right: auto; text-decoration: none; flex: none; }
.brand__mark { height: var(--logo); width: auto; transition: height 300ms var(--ease); }
.brand__word { height: calc(var(--logo) * 0.64); width: auto; transition: height 300ms var(--ease); }
.nav__links { display: flex; gap: clamp(18px, 2vw, 30px); }
.nav__links a, .nav__phone { position: relative; padding: 10px 0; font: 500 var(--fs-small)/1 var(--display); font-stretch: 104%; text-decoration: none; }
.nav__links a::after { content: ""; position: absolute; inset: auto 0 2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover::after { transform: scaleX(1); } }
.nav__phone { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.nav__cta { min-height: 46px; padding: 0 20px; }
.nav__call, .nav__menu { display: none; }
.nav__call { align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; white-space: nowrap; background: var(--gold); color: var(--gold-ink); font: 600 var(--fs-small)/1 var(--display); font-stretch: 108%; text-decoration: none; }
.nav__call svg { width: 18px; height: 18px; fill: currentColor; }
.nav__menu { position: relative; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid rgb(245 244 240 / 0.35); cursor: pointer; }
.nav__menu-bars, .nav__menu-bars::before { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); transition: transform 240ms var(--ease); }
.nav__menu-bars { top: 17px; }
.nav__menu-bars::before { content: ""; left: 0; right: 0; top: 7px; }
.nav__menu[aria-expanded="true"] .nav__menu-bars { transform: translateY(3.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-bars::before { transform: translateY(-7px) rotate(-90deg); }

/* The menu (below 1180px): a full-screen panel beneath the header, so the logo, Call 24/7 and close stay on top */
.menu { position: fixed; inset: 0; z-index: 35; display: grid; align-content: space-between; gap: 32px; overflow-y: auto; background: var(--black);
  padding: calc(var(--nav-h) + clamp(20px, 5svh, 48px)) max(var(--m), env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(var(--m), env(safe-area-inset-left)); }
.menu:not(.is-open) { display: none; }
.menu:focus { outline: none; }
.menu__links a { display: block; padding: clamp(10px, 1.8svh, 16px) 0; font: 600 clamp(1.625rem, 6vw, 2.5rem)/1.08 var(--display); font-stretch: var(--wide); letter-spacing: -0.02em; text-decoration: none; }
.menu__links a:active { color: var(--gold-soft); }
.menu__foot { display: grid; gap: 10px; max-width: 40rem; }
.menu__line { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--muted); font-size: var(--fs-small); text-decoration: none; }
.menu__line b { color: var(--ink); font-weight: 500; }
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .menu.is-open { animation: menu-in 260ms ease-out; }
  .menu.is-open li, .menu.is-open .menu__foot { animation: menu-row 420ms var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
}
@keyframes menu-in { from { opacity: 0; } }
@keyframes menu-row { from { opacity: 0; transform: translateY(14px); } }

/* ---------- 1 · Hero ---------- */
/* One screen: the words top left (clear of the car in every frame), the actions and the story along the foot. */
.hero { position: relative; background: var(--black); }
.js .hero { height: 210svh; } /* about one screen of scroll restores the car */
.hero__stage { position: sticky; top: 0; isolation: isolate; display: grid; grid-template-rows: 1fr auto; height: 100svh; min-height: 620px; overflow: hidden; }
.hero__frame { position: absolute; inset: 0; z-index: -1; }
.hero__frame::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(11 11 10 / 0.7) 0%, rgb(11 11 10 / 0) 26%, rgb(11 11 10 / 0) 62%, rgb(11 11 10 / 0.85) 100%), /* taste-skill-ignore: scrim under the words and the actions */
              linear-gradient(90deg, rgb(11 11 10 / 0.72) 0%, rgb(11 11 10 / 0.25) 42%, rgb(11 11 10 / 0) 64%); } /* taste-skill-ignore: scrim under the words */
/* Each frame slides in as a window over the last while its picture holds still (the window and the picture move in
   opposite directions, so only transforms change), led by a band of light on the seam. The scroll drives both (app.js). */
.hero__shot { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.hero__pan { position: absolute; inset: 0; }
.hero__pan img { width: 100%; height: 100%; object-fit: cover; }
.hero__shot--impact img { object-position: 62% 50%; }
.hero__shot--renewal img { object-position: 12% 50%; }
.hero__shot--confidence img { object-position: 50% 60%; }
.js .hero__shot + .hero__shot { transform: translate3d(-100%, 0, 0); will-change: transform; }
.js .hero__shot + .hero__shot .hero__pan { transform: translate3d(100%, 0, 0); will-change: transform; }
.hero__sweep { --w: clamp(140px, 20vw, 360px); position: absolute; top: 0; bottom: 0; left: calc(var(--w) / -2); width: var(--w); pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(90deg, rgb(255 238 200 / 0), rgb(255 238 200 / 0.18) 44%, rgb(255 248 228 / 0.38) 49.4%, rgb(255 253 245 / 0.9) 50%, rgb(255 248 228 / 0.38) 50.6%, rgb(255 238 200 / 0.18) 56%, rgb(255 238 200 / 0)); } /* taste-skill-ignore: the band of light on the seam */
/* Confidence comes alive: the light comes up on the car, the headlights ignite with a xenon flicker, the fog drifts.
   .hero__map is the photograph's own rectangle (the same cover maths as object-fit), so the lamps sit on the headlights. */
.hero__shot--confidence::after { content: ""; position: absolute; inset: 0; background: var(--black); opacity: 0.5; transition: opacity 1600ms var(--ease); }
.hero__shot--confidence.is-lit::after, html:not(.js) .hero__shot--confidence::after { opacity: 0; }
.hero__map { --ar: 1.5082; --oy: 0.6; position: absolute; left: 50%; width: max(100cqw, 100cqh * var(--ar)); aspect-ratio: var(--ar); top: calc((100cqh - max(100cqw, 100cqh * var(--ar)) / var(--ar)) * var(--oy)); transform: translateX(-50%); pointer-events: none; }
.hero__lamp { position: absolute; top: 66.4%; width: 13%; aspect-ratio: 1; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); mix-blend-mode: screen;
  background: radial-gradient(circle, rgb(255 252 244 / 0.95) 0%, rgb(214 230 255 / 0.55) 14%, rgb(170 202 255 / 0.18) 34%, rgb(160 196 255 / 0) 64%); } /* taste-skill-ignore: headlight bloom */
.hero__lamp--l { left: 37.6%; }
.hero__lamp--r { left: 61.8%; }
.is-lit .hero__lamp { animation: hero-ignite 1700ms var(--ease) 200ms forwards, hero-breathe 4.8s ease-in-out 1.9s infinite alternate; }
.hero__lamp--r { animation-delay: 280ms, 1.98s !important; }
@keyframes hero-ignite { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 14% { opacity: 1; } 24% { opacity: 0.3; } 34% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); } }
@keyframes hero-breathe { from { opacity: 0.8; } to { opacity: 0.62; } }
.hero__fog { position: absolute; inset: -12% -24%; pointer-events: none; opacity: 0; transition: opacity 2400ms ease;
  background: radial-gradient(38% 26% at 30% 62%, rgb(205 214 228 / 0.12), transparent 70%), radial-gradient(34% 22% at 72% 48%, rgb(205 214 228 / 0.09), transparent 70%); } /* taste-skill-ignore: drifting fog */
.is-lit .hero__fog { opacity: 1; animation: hero-fog 26s ease-in-out infinite alternate; }
@keyframes hero-fog { from { transform: translate3d(-5%, 0, 0); } to { transform: translate3d(5%, -1.5%, 0); } }
.hero.is-idle .hero__lamp, .hero.is-idle .hero__fog { animation-play-state: paused; }
/* The headline rises into place line by line; the words are never transparent, so they paint at once */
.hero__line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__line > span { animation: hero-rise 1100ms var(--ease) 80ms both; }
  .js .hero__line + .hero__line > span { animation-delay: 170ms; }
  .js .hero__text, .js .hero__bar { animation: hero-fade 900ms var(--ease) 380ms both; }
}
@keyframes hero-rise { from { transform: translateY(108%); } }
@keyframes hero-fade { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .is-lit .hero__lamp { animation: none; opacity: 0.8; } .is-lit .hero__fog { animation: none; }
  .js .hero { height: auto; }
  .js .hero__shot + .hero__shot, .js .hero__shot + .hero__shot .hero__pan { transform: none; }
  .hero__cue { display: none; }
}
.hero__copy { align-self: start; padding: calc(var(--nav-h) + clamp(36px, 9vh, 120px)) var(--gutter) 0; }
.hero__title { max-width: 14ch; font-size: clamp(2.5rem, 1rem + 3.6vw, 4.75rem); line-height: 0.96; letter-spacing: -0.035em; outline: none; }
.hero__text { margin-top: clamp(18px, 2.4vh, 28px); max-width: 34ch; font-size: var(--fs-lead); line-height: 1.45; color: rgb(245 244 240 / 0.9); }
.hero__bar { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding: 0 var(--gutter) clamp(28px, 5vh, 56px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__story { position: relative; display: grid; gap: 10px; width: min(380px, 30vw); }
.hero__cue { position: absolute; right: 0; bottom: calc(100% + 14px); font: 600 var(--fs-tag)/1 var(--display); font-stretch: 108%; color: rgb(245 244 240 / 0.78); transition: opacity 300ms ease; }
.hero__cue span { display: inline-block; margin-left: 4px; }
@media (prefers-reduced-motion: no-preference) { .hero__cue span { animation: hero-cue 1.8s var(--ease-io) infinite; } }
@keyframes hero-cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.hero__story.is-moving .hero__cue { opacity: 0; }
html:not(.js) .hero__cue { display: none; }
.hero__note { justify-self: end; font: 600 var(--fs-tag)/1 var(--display); font-stretch: 108%; color: rgb(245 244 240 / 0.6); }

/* ---------- 2 · Trust ---------- */
.trust { --focus: #8a6500; background: var(--paper); color: var(--ink-dark); padding-block: var(--section); }
.trust__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(56px, 6vw, 96px); align-items: center; }
.trust__intro { grid-column: 1 / span 7; display: grid; gap: 24px; justify-items: start; }
.trust__intro .accent { display: block; color: var(--gold-deep); }
.trust__intro .lead { color: var(--ink-dark-soft); }
.trust__intro .arrow-link { margin-top: -8px; }
/* The warranty as a certificate: the one dark object on the daylight page, framed by a fine inset gold line */
.cert { grid-column: 8 / -1; display: grid; gap: 18px; justify-items: start; padding: clamp(32px, 3.2vw, 52px); background: var(--black); color: var(--ink);
  outline: 1px solid rgb(233 184 36 / 0.4); outline-offset: -12px; }
.cert__mark { width: clamp(64px, 5vw, 84px); }
.cert__title { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.02; letter-spacing: -0.03em; }
.cert__title span { display: block; color: var(--gold-soft); }
.cert__text { max-width: 32ch; color: var(--muted); }
.proof { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--col-gap); }
.proof h3 { font-size: var(--fs-title); line-height: 1.2; letter-spacing: -0.01em; }
.proof p { margin-top: 8px; max-width: 30ch; font-size: var(--fs-small); line-height: 1.55; color: var(--muted-dark); }

/* ---------- 3 · Services ---------- */
/* The Mercedes as a wide band that dissolves into the charcoal; the heading sits on its dark floor. */
.svc { background: var(--charcoal); padding-bottom: var(--section); }
.svc__media { position: relative; height: clamp(440px, 72svh, 780px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 52%, transparent 100%); } /* taste-skill-ignore: feathered photo edge */
.svc__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; filter: brightness(0.66) contrast(1.08) saturate(0.85); }
.svc__media .note { position: absolute; top: calc(var(--nav-h) + 8px); right: var(--gutter); }
.reveal .svc__media[data-unveil] img { clip-path: inset(7% 5% 0 5%); transition: clip-path 1400ms var(--ease); }
.reveal .svc__media[data-unveil].is-in img { clip-path: inset(0); }
.svc__head { position: relative; margin-top: clamp(-260px, -17vw, -140px); display: grid; gap: 20px; }
.svc__head .lead { color: var(--muted); max-width: 52ch; }
.svc__grid { margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: stretch; }
.svc__lead { grid-column: 1 / span 5; display: grid; grid-template-rows: auto auto 1fr; gap: 18px; justify-items: start; padding: clamp(32px, 3.2vw, 52px); background: var(--graphite); }
.svc__lead h3 { font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.02em; }
.svc__lead p { color: rgb(245 244 240 / 0.86); }
.svc__lead .btn { align-self: end; margin-top: 8px; }
.svc__list { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.svc__list a { display: block; padding: 18px 0 26px; text-decoration: none; }
.svc__list h3 { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-title); line-height: 1.25; letter-spacing: -0.01em; transition: color 200ms ease; }
.svc__list h3::after { content: "→"; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity 200ms ease, transform 240ms var(--ease); }
.svc__list p { margin-top: 8px; font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }
/* The secondary offering spans the list: its name on the left column, its line on the right, so the grid stays square */
.svc__wide { grid-column: 1 / -1; }
.svc__wide { margin-top: 10px; }
.svc__wide a { display: grid; grid-template-columns: calc((100% + 24px - var(--col-gap)) / 2) minmax(0, 1fr); column-gap: var(--col-gap); align-items: baseline;
  margin-left: -24px; padding: 22px 24px 24px; background: rgb(245 244 240 / 0.045); transition: background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .svc__wide a:hover { background: rgb(245 244 240 / 0.075); } }
.svc__wide p { margin-top: 0; }
@media (hover: hover) and (pointer: fine) {
  .svc__list a:hover h3 { color: var(--gold-soft); }
  .svc__list a:hover h3::after { opacity: 1; transform: none; }
}
.svc__foot { margin-top: clamp(40px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; }
.svc__foot p { max-width: 62ch; font-size: var(--fs-small); color: var(--muted); }
.svc__foot .btn { flex: none; }

/* ---------- 4 · Real repairs ---------- */
.work { --focus: #8a6500; background: var(--paper); color: var(--ink-dark); padding-block: var(--section); }
.work__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: end; }
.work__head .lead { color: var(--ink-dark-soft); }
/* The comparison: centred, as large as the screen allows while the whole picture stays in view. The photographs are
   4:3; the frame is too, so nothing is cropped. Before on the left, After on the right of a hairline divider the
   visitor moves by dragging across the photograph (touch: once the movement is clearly sideways, so scrolling never
   moves it), tapping a point, or with the arrow keys. */
.ba { --pos: 50%; width: min(100% - 2 * var(--m), 1480px, (100svh - 150px) * 4 / 3); margin: clamp(40px, 4vw, 64px) auto 0; }
.ba__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--graphite); cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba.is-framed .ba__img { object-fit: contain; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; translate: -0.5px 0; background: rgb(245 244 240 / 0.92); box-shadow: 0 0 0 0.5px rgb(11 11 10 / 0.18), 0 0 14px rgb(11 11 10 / 0.35); pointer-events: none; }
.ba__label { position: absolute; top: 14px; padding: 6px 9px; font: 600 var(--fs-tag)/1 var(--display); font-stretch: 108%; letter-spacing: 0.06em; color: rgb(245 244 240 / 0.92); background: rgb(11 11 10 / 0.42); pointer-events: none; transition: opacity 220ms ease; }
.ba__label--before { left: 14px; }
.ba__label--after { right: 14px; }
.ba[data-near="before"] .ba__label--before, .ba[data-near="after"] .ba__label--after { opacity: 0; }
.ba__input { position: absolute; inset: auto 0 0; width: 100%; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
html:not(.js) .ba__input, html:not(.js) .ba__how { display: none; }
.ba:has(.ba__input:focus-visible) .ba__stage { outline: 2px solid var(--focus); outline-offset: 3px; }
.ba:has(.ba__input:focus-visible) .ba__line { width: 2px; background: var(--gold); }
.ba.is-dragging .ba__label { opacity: 0; }
.ba__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; font-size: var(--fs-small); color: var(--muted-dark); }
.ba__cap b { font: 600 var(--fs-title)/1.2 var(--display); font-stretch: 108%; color: var(--ink-dark); }
.ba__how, .ba__framing { color: var(--muted-dark); }
.ba__how { margin-left: auto; }
.ba__framing { flex-basis: 100%; }
.ba__touch { display: none; }
@media (hover: none) { .ba__fine { display: none; } .ba__touch { display: inline; } }
.more { margin-top: clamp(72px, 7vw, 120px); }
.more__head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.pairs a { display: block; text-decoration: none; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; aspect-ratio: 16 / 9; }
.pair__half { position: relative; overflow: hidden; background: var(--stone); }
.pair__half img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.pair__tag { position: absolute; left: 8px; top: 8px; padding: 5px 8px; background: rgb(11 11 10 / 0.72); color: var(--ink); font: 600 0.75rem/1 var(--display); font-stretch: 108%; }
.pair__cap { display: block; margin-top: 14px; font-size: var(--fs-small); color: var(--muted-dark); }
.pair__cap b { display: block; margin-bottom: 2px; font: 600 var(--fs-title)/1.25 var(--display); font-stretch: 108%; color: var(--ink-dark); }
@media (hover: hover) and (pointer: fine) { .pairs a:hover .pair__half img { transform: scale(1.03); } }

/* ---------- 5 · Reputation ---------- */
.rev { --focus: #8a6500; background: var(--stone); color: var(--ink-dark); padding-block: var(--section); }
.rev__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) var(--col-gap); }
.rev__score { grid-column: 1 / span 4; grid-row: span 2; display: grid; gap: 14px; justify-items: start; align-content: start; }
.rev__num { margin-top: 8px; font: 600 clamp(5rem, 2.6rem + 6vw, 8.5rem)/0.86 var(--display); font-stretch: var(--wide); letter-spacing: -0.05em; }
.rev__stars svg { width: 130px; height: auto; fill: #b98a07; }
.rev__meta { font-size: var(--fs-small); color: var(--muted-dark); }
.rev__score .btn { margin-top: 12px; }
.quote blockquote p { font-size: var(--fs-body); line-height: 1.6; }
.quote figcaption { margin-top: 14px; font-size: var(--fs-small); color: var(--muted-dark); }
.quote figcaption b { display: block; font: 600 var(--fs-small)/1.3 var(--display); font-stretch: 108%; color: var(--ink-dark); }
.quote--lead { grid-column: 6 / -1; }
.quote--lead blockquote p { font: 500 clamp(1.375rem, 1rem + 1.1vw, 2.125rem)/1.3 var(--display); font-stretch: 104%; letter-spacing: -0.015em; }
.rev__grid .quote:nth-of-type(2) { grid-column: 6 / span 3; }
.rev__grid .quote:nth-of-type(3) { grid-column: 10 / span 3; }

/* ---------- 6 · Close ---------- */
.close { background: var(--charcoal); padding-block: var(--section); }
.close__head { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.close__head .display span { display: block; color: var(--gold); }
.close__mark { width: clamp(84px, 9vw, 140px); flex: none; }
.acts { margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.act { display: grid; grid-template-rows: auto auto 1fr; gap: 14px; min-height: clamp(220px, 19vw, 290px); padding: clamp(28px, 3vw, 48px); background: var(--graphite); text-decoration: none; transition: background-color 200ms ease, transform 160ms ease-out; }
.act:active { transform: scale(0.99); }
.act__t { font: 600 clamp(1.5rem, 1.1rem + 1.3vw, 2.375rem)/1.05 var(--display); font-stretch: var(--wide); letter-spacing: -0.025em; }
.act__d { max-width: 40ch; color: var(--muted); }
.act__num { align-self: end; font: 600 clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem)/1 var(--display); font-stretch: 108%; font-variant-numeric: tabular-nums; color: var(--gold); }
.act--gold { background: var(--gold); color: var(--gold-ink); }
.act--gold .act__d { color: rgb(14 13 11 / 0.78); }
@media (hover: hover) and (pointer: fine) { .act:hover { background: var(--graphite-2); } .act--gold:hover { background: var(--gold-soft); } }
.info { margin-top: clamp(48px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--col-gap); }
.info dt { font: 600 var(--fs-small)/1.2 var(--display); font-stretch: 108%; color: var(--gold-soft); }
.info dd { margin-top: 10px; line-height: 1.7; color: var(--muted); }
.info dd a:not(.arrow-link) { color: var(--ink); text-decoration-color: rgb(245 244 240 / 0.35); text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.foot { background: var(--black); }
.foot__inner { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: 40px var(--col-gap); padding-block: clamp(64px, 7vw, 104px) 48px; }
.foot__logo img { width: clamp(112px, 10vw, 148px); }
.foot__col h2 { margin-bottom: 14px; font-size: var(--fs-small); font-stretch: 108%; color: var(--gold); }
.foot__col li, .foot__col p { color: var(--muted); line-height: 1.9; }
.foot__col p + p { margin-top: 12px; }
.foot__col a { text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .foot__col a:hover { color: var(--ink); } }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 24px calc(36px + env(safe-area-inset-bottom)); font-size: var(--fs-small); color: var(--dim); }

/* Development placeholder pages */
.ph { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 24px; padding: 48px var(--m); text-align: center; }
.ph__logo img { width: 140px; }
.ph p { color: var(--muted); max-width: 40ch; }
.ph__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ================= Below 1180: the menu replaces the links ================= */
@media (max-width: 1180px) {
  .nav__links, .nav__phone, .nav__cta { display: none; }
  .nav__call { display: inline-flex; }
  .nav__menu { display: block; }
  .nav { gap: 10px; }
  .cert { grid-column: 8 / -1; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc__lead { grid-column: 1 / -1; }
  .svc__list { grid-column: 1 / -1; margin-top: 24px; }
  .svc__wide a { margin-left: 0; }
}

/* ================= Tablet ================= */
@media (max-width: 900px) {
  .trust__intro, .cert { grid-column: 1 / -1; }
  .cert { max-width: 560px; }
  .work__head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rev__score, .quote--lead { grid-column: 1 / -1; grid-row: auto; }
  .rev__grid .quote:nth-of-type(2) { grid-column: 1 / span 6; }
  .rev__grid .quote:nth-of-type(3) { grid-column: 7 / span 6; }
  .info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__logo { grid-column: 1 / -1; }
  .svc__foot { flex-direction: column; align-items: start; }
}

/* ================= Phone: its own composition ================= */
@media (max-width: 760px) {
  :root { --nav-h: 68px; --logo: clamp(40px, 11.2vw, 48px); --section: 80px; }
  .nav.is-solid { --nav-h: 62px; --logo: clamp(38px, 10.4vw, 44px); }
  .brand { gap: calc(var(--logo) * 0.2); }

  /* Hero: the opening fills the whole phone screen. Tall 9:16 crops; each picture rises into place from below behind a
     level band of light (app.js), and the words and the actions settle along the foot over a dark scrim. */
  .js .hero { height: 200svh; }
  .hero__stage { min-height: 540px; grid-template-rows: 1fr auto auto; }
  .hero__frame::after { background: linear-gradient(180deg, rgb(11 11 10 / 0.55) 0%, rgb(11 11 10 / 0) 16%, rgb(11 11 10 / 0) 40%, rgb(11 11 10 / 0.7) 62%, rgb(11 11 10 / 0.94) 100%); } /* taste-skill-ignore: scrim under the header and the words */
  .hero__shot--impact img, .hero__shot--renewal img { object-position: 50% 50%; }
  .hero__shot--confidence img { object-position: 50% 66%; }
  .hero__sweep { --w: clamp(120px, 24svh, 220px); top: calc(var(--w) / -2); bottom: auto; left: 0; right: 0; width: auto; height: var(--w);
    background: linear-gradient(180deg, rgb(255 238 200 / 0), rgb(255 238 200 / 0.18) 44%, rgb(255 248 228 / 0.38) 49.4%, rgb(255 253 245 / 0.9) 50%, rgb(255 248 228 / 0.38) 50.6%, rgb(255 238 200 / 0.18) 56%, rgb(255 238 200 / 0)); } /* taste-skill-ignore: the band of light on the seam */
  /* the lamps on the 9:16 crop of the built-in picture (x 31.1–68.3% of the original) */
  .hero__map { --ar: 0.5625; --oy: 0.66; }
  /* the finished car rides a fifth of the screen higher, so its lit headlights sit clear above the words; the road
     beneath fades into the dark foot (built-in picture only: it is the one with the drawn lamps) */
  .hero__pan:has(.hero__map) { background: var(--black); }
  .hero__pan:has(.hero__map) img, .hero__map { translate: 0 -20%; }
  .hero__pan:has(.hero__map) img { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 96%); mask-image: linear-gradient(180deg, #000 72%, transparent 96%); } /* taste-skill-ignore: road fades into the foot */
  .hero__lamp { width: 25%; }
  .hero__lamp--l { left: 17.5%; }
  .hero__lamp--r { left: 82.4%; }
  .hero__copy { grid-row: 2; align-self: end; padding: 0 var(--m); }
  .hero__title { font-size: clamp(2rem, 8.8vw, 2.6rem); }
  .hero__text { margin-top: 14px; font-size: var(--fs-body); }
  .hero__bar { grid-row: 3; display: grid; gap: 18px; padding: 22px var(--m) max(28px, calc(env(safe-area-inset-bottom) + 16px)); }
  .hero__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .hero__actions .btn { padding: 0 18px; }



  .hero__story { width: 100%; }
  .hero__note { justify-self: start; }
  .hero__cue { bottom: 0; }

  .trust__grid { row-gap: 48px; }
  .proof { gap: 28px 20px; }
  .proof p { font-size: 0.875rem; }

  .svc__media { height: auto; aspect-ratio: 4 / 3.3; }
  .svc__media img { object-position: 46% 66%; }
  .svc__media .note { top: 12px; right: var(--m); }
  .svc__head { margin-top: -48px; gap: 14px; }
  .svc__head .lead { font-size: var(--fs-body); }
  .svc__head .h2 { font-size: clamp(1.45rem, 6.5vw, 1.75rem); }
  .svc__grid { margin-top: 32px; }
  .svc__lead { padding: 26px 22px; }
  .svc__list { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
  .svc__wide a { display: block; padding: 20px; }
  .svc__wide p { margin-top: 8px; }
  .svc__list a { padding: 18px 0; }

  .ba { width: 100%; margin-top: 32px; }
  .ba__cap { padding-inline: var(--m); }
  .ba__label { top: 10px; }
  .ba__label--before { left: 10px; }
  .ba__label--after { right: 10px; }
  .ba__how { margin-left: 0; }
  .pairs { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pair { aspect-ratio: 16 / 8.6; }

  .rev__grid .quote:nth-of-type(2), .rev__grid .quote:nth-of-type(3) { grid-column: 1 / -1; }
  .rev__num { font-size: 5.5rem; }

  .close__head { flex-direction: column-reverse; align-items: start; gap: 24px; }
  .close__mark { width: 64px; }
  .close .display { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .acts { grid-template-columns: minmax(0, 1fr); }
  .act { min-height: 0; }
  .act__num { margin-top: 8px; }
  .info { grid-template-columns: minmax(0, 1fr); }
  .foot__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Short phones (iPhone SE in Safari): the window gives way first */
@media (max-width: 760px) and (max-height: 640px) {
  .hero { --shot: clamp(190px, 100svh - var(--nav-h) - 380px, 300px); }
}


@media (max-width: 1000px) { .hero__num { display: none; } }

/* Reduced motion: the hero is one still screen on Confidence at every size */
@media (prefers-reduced-motion: reduce) { .js .hero { height: auto; } }
@media (max-width: 400px) { .nav__call { padding: 0 12px; gap: 6px; } }

/* ================= Request an Estimate (the form pattern for every Prodigy form) ================= */
.est { background: var(--charcoal); padding-block: calc(var(--nav-h) + clamp(48px, 7vw, 104px)) var(--section); }
.est__head { display: grid; gap: 22px; justify-items: start; max-width: var(--wrap-max); }
.est__head .display { font-size: clamp(2.5rem, 1rem + 3.6vw, 4.5rem); }
.est__head .display span { color: var(--gold); }
.est__head .lead { color: var(--muted); max-width: 52ch; }
.est__urgent { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--muted); text-decoration: none; }
.est__urgent b { color: var(--ink); font-weight: 500; }
.est__form { margin-top: clamp(48px, 5vw, 80px); display: grid; gap: clamp(40px, 4vw, 64px); }
.est__summary { padding: 16px 20px; background: #3a1d17; color: #ffd9cf; outline: none; }
.est__summary a { color: var(--ink); font-weight: 500; }
.est__part { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--col-gap); margin: 0; padding: 0; border: 0; min-width: 0; }
.est__part > legend { float: left; display: grid; gap: 6px; align-content: start; padding: 0; } /* float lets the legend sit in the grid's first column */
.est__step { font: 600 var(--fs-h3)/1.1 var(--display); font-stretch: var(--wide); letter-spacing: -0.02em; }
.est__hint { color: var(--muted); font-size: var(--fs-small); }
.est__fields { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--col-gap); align-items: start; }
.est__fields input, .est__fields select, .est__fields textarea { width: 100%; min-width: 0; }
.est__fields--3 { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr); }
.est__wide { grid-column: 1 / -1; }
.field__opt { color: var(--dim); font-weight: 400; }
.field__error { color: #ffb4a3; font-size: var(--fs-small); }
.field [aria-invalid="true"], .field[aria-invalid="true"] { border-color: #ff8a70; }
.field select { appearance: none; background: var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b8b4ac' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 44px; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.est__choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.est__choice > legend { margin-bottom: 8px; padding: 0; font: 600 var(--fs-small)/1.2 var(--display); font-stretch: 108%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; background: var(--graphite); color: var(--muted); font-size: var(--fs-small); transition: background-color 160ms ease, color 160ms ease; }
.chips input:checked + span { background: var(--gold); color: var(--gold-ink); font-weight: 500; }
.chips input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.drop { display: grid; gap: 6px; padding: 28px; background: var(--graphite); cursor: pointer; transition: background-color 160ms ease; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .drop:hover { background: var(--graphite-2); } }
.drop__title { font: 600 var(--fs-title)/1.2 var(--display); font-stretch: 108%; color: var(--gold-soft); }
.drop__text { color: var(--muted); font-size: var(--fs-small); max-width: 60ch; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 12px; }
.thumbs li { position: relative; aspect-ratio: 1; background: var(--graphite); overflow: hidden; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs__name { display: grid; place-items: center; height: 100%; padding: 8px; font-size: 0.75rem; color: var(--muted); word-break: break-all; text-align: center; }
.thumbs__x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; background: rgb(11 11 10 / 0.8); color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.est__send { display: grid; gap: 20px; justify-items: start; margin-left: calc((100% - var(--col-gap)) / 3 + var(--col-gap)); }
.check { display: flex; gap: 12px; align-items: start; max-width: 64ch; color: var(--muted); font-size: var(--fs-small); line-height: 1.55; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--gold); }
.check .field__error { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.est__submit { min-width: 220px; }
.est__submit:disabled { opacity: 0.7; cursor: progress; }
.est__status { min-height: 1.5em; color: var(--muted); font-size: var(--fs-small); }
.est__bar { width: min(100%, 420px); height: 3px; background: var(--graphite-2); overflow: hidden; }
.est__bar span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 200ms linear; }
.est__done { display: grid; gap: 20px; justify-items: start; margin-top: clamp(40px, 4vw, 64px); outline: none; }
.est__done img { width: 72px; }
.est__done .lead { color: var(--muted); max-width: 52ch; }
.est__done .lead b { color: var(--gold-soft); font-weight: 600; }
.est__done-help a { color: var(--ink); }
@media (max-width: 900px) {
  .est__part { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .est__part > legend { float: none; margin-bottom: 20px; }
  .est__fields { grid-column: 1; }
  .est__send { margin-left: 0; }
}
@media (max-width: 760px) {
  .est__fields, .est__fields--3 { grid-template-columns: minmax(0, 1fr); }
  .est__submit { width: 100%; }
}

/* Announcement strip (set in the portal; absent unless one is published) */
.notice-strip { position: fixed; left: 16px; bottom: 16px; z-index: 45; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 12px 12px 18px; background: var(--graphite); color: var(--ink); box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); font-size: var(--fs-small); }
.notice-strip a { color: var(--gold-soft); }
.notice-strip button { flex: none; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.notice-strip.is-gone { display: none; }

/* ---------- Cinematic opening (homepage, motion allowed; html.cine is set in <head>) ----------
   Five stages on natural scroll, every value set from the scroll position by app.js, so reversing is exact:
   1 the BMW alone · 2 the header comes in as Renewal slides over · 3 the words and actions rise on Confidence ·
   4 the headlights ignite as the shade lifts · 5 the finished scene holds for a screen before the page moves on.
   No pinning beyond the stage's own position: sticky, no wheel handling. Keyboard focus always reveals the header. */
.js.cine .hero { height: 500svh; }
.cine .nav { opacity: 0; translate: 0 -12px; transition: background-color 300ms ease, height 300ms var(--ease), transform 400ms var(--ease); }
.cine .nav:focus-within { opacity: 1 !important; translate: none !important; pointer-events: auto !important; }
.cine .hero__line > span, .cine .hero__text, .cine .hero__bar { animation: none !important; }
.cine .hero__line > span { transform: translate3d(0, 105%, 0); }
.cine .hero__text, .cine .hero__actions, .cine .hero__story { opacity: 0; visibility: hidden; }
.cine .hero__cue { display: none; }
.cine .hero__shot--confidence::after { opacity: var(--shade, 0.5); transition: none; }
.cine .is-lit .hero__lamp { animation: hero-ignite 2600ms var(--ease) 150ms forwards, hero-breathe 4.8s ease-in-out 2.8s infinite alternate; }
.cine .is-lit .hero__lamp--r { animation-delay: 420ms, 3.1s !important; }
.hero__hint { display: none; }
.cine .hero__hint { position: absolute; left: 50%; bottom: clamp(24px, 5vh, 48px); display: grid; justify-items: center; gap: 10px; translate: -50% 0; font: 600 var(--fs-tag)/1 var(--display); font-stretch: 108%; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(245 244 240 / 0.72); pointer-events: none; }
.cine .hero__hint i { display: block; width: 1px; height: 36px; background: linear-gradient(rgb(245 244 240 / 0.7), rgb(245 244 240 / 0)); transform-origin: top; animation: hero-hint 2.2s var(--ease-io) infinite; }
@keyframes hero-hint { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 760px) {
  .js.cine .hero { height: 420svh; }
  .cine .hero__hint { bottom: 18px; }
}

/* Estimate: the three ways in. Sections marked data-for show only on their path (all show without script). */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.path { position: relative; display: grid; gap: 6px; align-content: start; padding: 20px 20px 22px; border: 1px solid var(--line, rgb(255 255 255 / 0.16)); border-radius: 4px; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.path:hover { border-color: rgb(233 184 36 / 0.6); }
.path input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.path:has(input:checked) { border-color: var(--gold, #e9b824); background: rgb(233 184 36 / 0.08); }
.path:has(input:focus-visible) { outline: 2px solid var(--gold, #e9b824); outline-offset: 3px; }
.path__title { font: 600 1.05rem/1.25 var(--display); }
.path__text { font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.est__accident { margin-top: 20px; padding: 20px 22px; border-left: 2px solid var(--gold, #e9b824); background: rgb(255 255 255 / 0.03); }
.est__accident h2 { margin-bottom: 10px; }
.est__steps { display: grid; gap: 8px; padding-left: 1.2em; color: var(--muted); line-height: 1.6; }
.est__steps b { color: var(--ink, #fff); }
.est__steps a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.est__next { display: grid; gap: 18px; margin: 28px 0; text-align: left; max-width: 62ch; }
.est__next dt { font: 600 var(--fs-small, 0.85rem)/1.2 var(--display); color: var(--gold, #e9b824); }
.est__next dd { margin-top: 6px; line-height: 1.6; color: var(--muted); }
.est__next a { color: inherit; text-decoration: underline; }
form[data-path='other'] [data-for]:not([data-for~='other']),
form[data-path='damage'] [data-for]:not([data-for~='damage']),
form[data-path='accident'] [data-for]:not([data-for~='accident']),
.est__done[data-path='other'] [data-for]:not([data-for~='other']),
.est__done[data-path='damage'] [data-for]:not([data-for~='damage']),
.est__done[data-path='accident'] [data-for]:not([data-for~='accident']) { display: none; }
@media (max-width: 760px) { .paths { grid-template-columns: minmax(0, 1fr); } }

.promo { position: fixed; z-index: 90; right: 24px; bottom: 24px; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: var(--charcoal); border: 1px solid rgb(233 184 36 / 0.45); border-radius: 6px; box-shadow: 0 18px 48px rgb(0 0 0 / 0.5); opacity: 0; transform: translateY(12px); transition: opacity 200ms ease-out, transform 200ms ease-out; }
.promo.is-in { opacity: 1; transform: none; }
.promo__img { display: block; width: 100%; height: auto; max-height: 180px; object-fit: cover; }
.promo__body { display: grid; gap: 10px; padding: 22px 22px 24px; }
.promo__h { font: 600 22px/1.2 var(--display); color: var(--ink); padding-right: 28px; }
.promo__p { color: var(--muted); line-height: 1.5; }
.promo__d { font-size: var(--fs-small); color: var(--gold-soft); }
.promo__cta { justify-self: start; margin-top: 6px; }
.promo__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.55); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.promo__x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 560px) { .promo { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 70vh; } }
@media (prefers-reduced-motion: reduce) { .promo { transition: none; transform: none; } }
.promo__form { display: grid; gap: 10px; margin-top: 4px; }
.promo__label { font-size: var(--fs-small); color: var(--ink); }
.promo__form input[type="email"] { width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ink); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.28); border-radius: 3px; }
.promo__form input[type="email"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.promo__agree { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); cursor: pointer; }
.promo__agree input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gold); }
.promo__privacy { justify-self: start; font-size: var(--fs-small); color: var(--muted); text-decoration: underline; }
.promo__note { line-height: 1.5; color: var(--ink); }
.promo__note:empty { display: none; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* The pop-up's fine print under the button: small, but full contrast enough to read. */
.promo__fine { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); max-width: 44ch; }