/* Shoreline Automotive: "Work Light" system. Rules live in DESIGN-RULES.md. */

/* Self-hosted fonts (Google Fonts originals, SIL OFL), subset by tools/subset-fonts.py:
   Latin only, Archivo cut to 700-800 weight and 100-120% width, Manrope to 400-700. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700 800; font-stretch: 100% 120%; font-display: swap; src: url("../fonts/archivo.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/manrope.woff2") format("woff2"); }
/* Metric-matched fallback for the headings: until Archivo arrives, Arial Bold is scaled to the same
   width and line metrics (measured 2026-10-21 against the real heading styles), so the phone headline
   wraps the same and nothing shifts when the font swaps in. No preload needed. Manrope needs no
   fallback face: plain Arial is within 1% of its width, and every extra local() font lookup costs
   main-thread time at startup. */
@font-face { font-family: "Archivo Fallback"; font-weight: 700 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); size-adjust: 108%; ascent-override: 81.3%; descent-override: 19.4%; line-gap-override: 0%; }

:root {
  /* Palette */
  --bg: #0F1210;          /* warm graphite page ground */
  --panel: #171B18;       /* raised surfaces */
  --panel-2: #1F2420;     /* second-level surfaces, highlighted rows */
  --line: #2E3530;        /* hairlines (decorative only) */
  --line-strong: #5A635C; /* ghost button borders */
  --hivis: #C8F135;       /* ACTIONS ONLY: call, quote, open dot, horizon dot, final band */
  --hivis-hover: #D8FA66;
  --chalk: #F2F4EF;       /* headings, primary text */
  --fog: #A3ACA5;         /* body text, form borders */
  --dim: #7D877F;         /* meta text on panels, never body copy */
  --ok: #8BD99B;

  /* Type */
  --font-display: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --font-body: "Manrope", Arial, sans-serif;
  --fs-xs: 0.8125rem;  /* 13px meta */
  --fs-sm: 0.9375rem;  /* 15px */
  --fs-base: 1.125rem; /* 18px body */
  --fs-lg: 1.25rem;
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h2-sm: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);

  /* Space */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --section: clamp(3.5rem, 2rem + 6vw, 8rem);
  --header-h: 4.5rem;
  --container: 75rem;
  --radius-lg: 18px;
  --radius: 14px;
  --radius-sm: 10px;

  /* Motion (Emil: strong custom curves, UI under 300ms) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --bar-h: 0px;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fog);
  font: 400 var(--fs-base)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--hivis);
  scrollbar-color: var(--line-strong) var(--bg);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--chalk); text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--hivis); color: var(--bg); }
:focus-visible { outline: 3px solid var(--hivis); outline-offset: 3px; border-radius: 4px; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 3px solid var(--bg); }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--hivis); color: var(--bg); font-weight: 700;
  padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); text-decoration: none;
  transition: top 160ms var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ---------- Type roles ---------- */
.h1, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 104%;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.h1 { font-size: var(--fs-h1); line-height: 0.96; }
.h2 { font-size: var(--fs-h2); line-height: 1; }
.h2-sm { font-size: var(--fs-h2-sm); line-height: 1.04; }
.h3 { font: 700 var(--fs-h3)/1.25 var(--font-display); color: var(--chalk); }
.lead { font-size: var(--fs-lg); color: #C9CFCA; max-width: 58ch; }
.prose { max-width: 65ch; }
.prose > * + * { margin-top: 1em; }

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0 1.5rem;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  font: 700 1.0625rem/1 var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 1.15rem; height: 1.15rem; }
.btn-call { background: var(--hivis); color: var(--bg); }
.btn-ghost { border-color: var(--line-strong); color: var(--chalk); background: transparent; }
.btn-dark { background: var(--bg); color: var(--chalk); }
.btn-lg { min-height: 3.75rem; padding: 0 1.75rem; font-size: 1.125rem; }
.btn-block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn-call:hover { background: var(--hivis-hover); }
  .btn-ghost:hover { border-color: var(--chalk); }
  .btn-dark:hover { background: #262C27; }
}
.cta-pair { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-note { font-size: var(--fs-sm); color: #CBD1CC; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }

.text-link {
  color: var(--chalk); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--hivis);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) { .text-link:hover { text-decoration-color: var(--chalk); } }

/* ---------- Horizon line motif ---------- */
/* The line scales from the left and the dot rides to the far end. 100cqw is the line's own
   width (it's a size container), so the dot moves with transform alone. */
.horizon { position: relative; height: 9px; container-type: inline-size; }
.horizon::before { content: ""; position: absolute; inset: 4px 0 auto 0; height: 1px; background: var(--line); transform-origin: left center; transform: scaleX(1); }
.horizon::after { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--hivis); transform: translateX(calc(100cqw - 9px)); }
/* Transition only once revealed: switching to "pending" at load must be instant, or the line
   would un-draw off screen and keep the page repainting while someone starts to scroll */
.horizon[data-reveal="done"]::before, .horizon[data-reveal="done"]::after { transition: transform 900ms var(--ease-out); }
.horizon[data-reveal="pending"]::before { transform: scaleX(0); }
.horizon[data-reveal="pending"]::after { transform: translateX(0); }
.horizon-short { width: 12.5rem; max-width: 100%; }
.horizon-short::before { background: #4A534C; }
.section-divider { padding-block: 0; }

/* ---------- Status dot ---------- */
.status { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--chalk); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.status[data-open="true"]::before { background: var(--hivis); box-shadow: 0 0 0 4px rgb(200 241 53 / 0.16); }

/* ---------- Utility bar ---------- */
.utility { display: none; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.utility .container { display: flex; align-items: center; gap: 2rem; min-height: 2.5rem; }
.utility a { color: var(--fog); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.utility a:hover { color: var(--chalk); }
.utility .icon { width: 1rem; height: 1rem; }
.utility .push { margin-left: auto; }
@media (min-width: 64em) { .utility { display: block; } }

/* ---------- Header ---------- */
/* The header background and its bottom rule are overlay layers that fade with opacity,
   so turning solid on scroll costs no repaint. The transparent 1px border keeps the height. */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; view-transition-name: site-header; }
.site-header::before, .site-header::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; transition: opacity 220ms ease; }
.site-header::before { top: 0; bottom: -1px; background: rgb(15 18 16 / 0.94); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); }
.site-header::after { bottom: -1px; height: 1px; background: var(--line); opacity: 0; }
.site-header.is-scrolled::after { opacity: 1; }
.has-hero .site-header:not(.is-scrolled):not(.is-open)::before { opacity: 0; }
.site-header .container { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: inline-flex; text-decoration: none; color: var(--chalk); margin-right: auto; padding: 0.25rem 0; }
.brand svg { width: 10.5rem; height: auto; overflow: visible; }
.brand-word { font-family: var(--font-display); font-weight: 800; font-stretch: 120%; letter-spacing: 0.02em; }
.brand-sub { font-family: var(--font-display); font-weight: 700; font-stretch: 118%; letter-spacing: 0.22em; }
.nav { display: none; }
.nav ul { display: flex; gap: 0.25rem; }
.nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.85rem; color: var(--fog); font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: 8px; transition: color 160ms ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--chalk); }
.header-call .num { display: none; }
.header-call { width: 3.25rem; padding: 0; }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: var(--radius-sm);
  background: transparent; border: 1.5px solid var(--line-strong); color: var(--chalk); cursor: pointer;
}
.menu-toggle .icon { width: 1.4rem; height: 1.4rem; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }

.mobile-nav {
  position: fixed; inset: 4.5rem 0 auto 0; z-index: 39;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 0.5rem var(--gutter) 1.5rem;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 260ms var(--ease-drawer), visibility 0s linear 260ms;
}
.mobile-nav.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 260ms var(--ease-drawer), visibility 0s; }
.mobile-nav a:not(.btn) { display: flex; align-items: center; min-height: 3.5rem; border-bottom: 1px solid var(--line); color: var(--chalk); font: 700 1.25rem/1 var(--font-display); text-decoration: none; }
.mobile-nav .status { margin-top: 1.25rem; font-size: var(--fs-sm); }
.mobile-nav .btn { margin-top: 1rem; }

@media (min-width: 64em) {
  .nav { display: block; }
  .menu-toggle, .mobile-nav { display: none; }
  .header-call { width: auto; padding: 0 1.25rem; }
  .header-call .num { display: inline; }
  .brand svg { width: 11.5rem; }
}

/* ---------- Hero (full bleed, under the header) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  display: grid; align-items: end;
  background: var(--panel);
}
.hero-media, .hero-media picture, .hero-media img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { z-index: -2; }
.hero-media img, .hero-video { object-fit: cover; object-position: 50% 40%; }
/* The video sits on the poster (its own first frame) and fades in once it is actually playing,
   so there is never a blank or black frame. Opacity only. */
.hero-video { opacity: 0; transition: opacity 600ms var(--ease-out); pointer-events: none; }
.hero-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(15 18 16 / 0.75) 0%, rgb(15 18 16 / 0) 22%),
    linear-gradient(90deg, rgb(15 18 16 / 0.95) 0%, rgb(15 18 16 / 0.8) 38%, rgb(15 18 16 / 0.3) 70%, rgb(15 18 16 / 0.12) 100%),
    linear-gradient(0deg, rgb(15 18 16 / 1) 0%, rgb(15 18 16 / 0) 30%);
}
.hero-inner { display: grid; gap: 2rem; padding-block: calc(var(--header-h) + 2rem) 2.5rem; }
.hero-copy { max-width: 46rem; display: grid; gap: 1.25rem; }
.hero-copy .h1 { max-width: 17ch; }
.hero-sub { font-size: var(--fs-lg); color: #CBD1CC; max-width: 46ch; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.8rem; border-radius: 999px;
  background: rgb(23 27 24 / 0.8); border: 1px solid var(--line);
  color: var(--chalk); font-size: var(--fs-sm); font-weight: 600;
}
.chip .icon { width: 1rem; height: 1rem; color: var(--fog); }

.hours-card {
  position: relative;
  background: rgb(23 27 24 / 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  font-size: var(--fs-sm); line-height: 1.5;
  max-width: 21rem;
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.55);
}
.hours-card .status { font: 700 1.0625rem/1.3 var(--font-display); }
.hours-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 1rem; margin: 0.6rem 0 0; color: var(--fog); font-variant-numeric: tabular-nums; }
.hours-card dt { color: var(--fog); }
.hours-card dd { margin: 0; color: var(--chalk); text-align: right; }

@media (max-width: 55.99em) {
  .hero::after { background: linear-gradient(180deg, rgb(15 18 16 / 0.7) 0%, rgb(15 18 16 / 0.86) 30%, rgb(15 18 16 / 0.96) 70%, rgb(15 18 16 / 1) 100%); }
  .hours-card { max-width: none; }
}
/* Phones: shading tuned with the client 2026-10-21 (5 points darker than the tablet-width base); bottom stays solid to blend into the page */
@media (max-width: 47.99em) {
  /* The phone clip is already dark, so it gets lighter shading than a photo would (75/91/100%) */
  .hero::after { background: linear-gradient(180deg, rgb(15 18 16 / 0.35) 0%, rgb(15 18 16 / 0.55) 40%, rgb(15 18 16 / 0.85) 75%, rgb(15 18 16 / 1) 100%); }
}
@media (min-width: 56em) {
  .hero { min-height: clamp(40rem, 100svh, 58rem); }
  .hero-inner { grid-template-columns: 1fr auto; align-items: end; padding-block: calc(var(--header-h) + 4rem) 4.5rem; }
  .hours-card { justify-self: end; }
}

/* Signature moment: the work light switches on (load only, never on scroll).
   The hero copy is readable from the first frame: it rises into place from 60% opacity,
   all of it settled within 600ms. Every keyframe below is transform or opacity only. */
.hero-media::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.hours-card::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--hivis); border-radius: inherit; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: hero-rise 480ms var(--ease-out) both; }
  .hero-copy > *:nth-child(2) { animation-delay: 30ms; }
  .hero-copy > *:nth-child(3) { animation-delay: 60ms; }
  .hero-copy > *:nth-child(4) { animation-delay: 90ms; }
  .hero-copy > *:nth-child(5) { animation-delay: 120ms; }
  .hero-copy > *:nth-child(6) { animation-delay: 150ms; }
  .hero-media picture, .hero-video { animation: lights-scale 900ms var(--ease-out) both; }
  .hero-media::after { animation: lights-dim 900ms var(--ease-out) both; }
  .hours-card { animation: switch-on 700ms var(--ease-out) 380ms both; }
  .hours-card::after { animation: switch-on-edge 700ms var(--ease-out) 380ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes hero-rise { from { opacity: 0.6; transform: translateY(14px); } }
/* black at 45% over the photo is the same as brightness(0.55), without repainting a filter */
@keyframes lights-dim { from { opacity: 0.45; } to { opacity: 0; } }
@keyframes lights-scale { from { transform: scale(1.03); } }
@keyframes switch-on { from { opacity: 0; transform: translateY(10px); } }
@keyframes switch-on-edge { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); max-width: 50rem; }
.section-close { margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); display: grid; gap: 1.5rem; max-width: 50rem; }
.section-close p { color: #C9CFCA; }

/* ---------- Cost of waiting ledger ---------- */
.ledger { border-top: 1px solid var(--line); }
.ledger-head { display: none; }
.ledger-row { display: grid; gap: 0.6rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.ledger-notice { display: flex; align-items: flex-start; gap: 0.9rem; }
.ledger-notice .icon { width: 1.6rem; height: 1.6rem; color: var(--chalk); margin-top: 0.1rem; }
.ledger-becomes { color: var(--fog); padding-left: 2.5rem; max-width: 60ch; }
.ledger-becomes strong { color: var(--chalk); font-weight: 600; }
.ledger-label { font-size: var(--fs-xs); font-weight: 700; color: var(--dim); letter-spacing: 0.04em; }
@media (min-width: 52em) {
  .ledger-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; padding: 0 0 0.75rem; }
  .ledger { border-top: 0; }
  .ledger-list { border-top: 1px solid var(--line); }
  .ledger-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; padding: 1.75rem 0; align-items: start; }
  .ledger-becomes { padding-left: 0; }
}

/* ---------- Why: slip centrepiece + promises ---------- */
.why-grid { display: grid; gap: clamp(2.5rem, 1rem + 4vw, 4rem); }
@media (min-width: 64em) { .why-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.promises { display: grid; gap: 1.5rem; }
.promise { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.9rem; align-content: start; }
.promise .tick {
  grid-row: span 2; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--line-strong); color: var(--chalk);
}
.promise .tick .icon { width: 0.95rem; height: 0.95rem; stroke-width: 2.25; }
.promise h2, .promise h3 { font: 700 1.125rem/1.3 var(--font-display); }
.promise p { color: var(--fog); font-size: 1rem; }
@media (min-width: 40em) and (max-width: 63.99em) { .promises { grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; } }
/* Short four-up version (home and services) */
@media (min-width: 40em) { .promises-4 { grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; } }
@media (min-width: 64em) { .promises-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }

.slip { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7); }
.slip-head { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1.5vw, 2rem) 1.1rem; border-bottom: 1px dashed var(--line-strong); display: grid; gap: 0.4rem; }
.slip-tag { justify-self: start; font-size: var(--fs-xs); font-weight: 700; color: var(--bg); background: var(--fog); padding: 0.2rem 0.55rem; border-radius: 6px; }
.slip-head h2, .slip-head h3 { font: 800 clamp(1.375rem, 1.1rem + 1vw, 1.75rem)/1.15 var(--font-display); font-stretch: 104%; }
.slip-head p { font-size: var(--fs-sm); color: var(--fog); }
.slip-lines { display: grid; }
.slip-line {
  display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1.25rem; align-items: center;
  padding: 1.15rem clamp(1.25rem, 1rem + 1.5vw, 2rem); border-bottom: 1px solid var(--line);
}
.slip-line { position: relative; isolation: isolate; }
.slip-line::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--panel-2); opacity: 0; transition: opacity 220ms ease; pointer-events: none; }
.slip-line:has(.approve[aria-pressed="true"])::before { opacity: 1; }
.slip-line b { color: var(--chalk); font: 700 1.1875rem/1.3 var(--font-display); }
.slip-line p { grid-column: 1; color: var(--fog); font-size: 1rem; }
.slip-line .verdict { grid-row: 1; grid-column: 2; justify-self: end; font-size: var(--fs-xs); font-weight: 700; color: var(--fog); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.15rem 0.6rem; }
.slip-line .approve {
  grid-column: 2; grid-row: 2; justify-self: end;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.75rem; min-width: 7.5rem; justify-content: center; padding: 0 1rem; border-radius: 8px;
  background: transparent; color: var(--chalk); border: 1.5px solid var(--line-strong);
  font: 700 0.9375rem/1 var(--font-body); cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out);
}
.slip-line .approve:active { transform: scale(0.95); }
.slip-line .approve .icon { width: 1rem; height: 1rem; stroke-width: 2.5; display: none; }
.slip-line .approve[aria-pressed="true"] { background: var(--chalk); color: var(--bg); border-color: var(--chalk); }
.slip-line .approve[aria-pressed="true"] .icon { display: block; }
.slip-line .approve.is-stamped { animation: stamp 280ms var(--ease-out); }
@keyframes stamp { 0% { transform: scale(0.9); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }
@media (hover: hover) and (pointer: fine) { .slip-line .approve:hover { border-color: var(--chalk); } }
.slip-foot { padding: 1.25rem clamp(1.25rem, 1rem + 1.5vw, 2rem) 1.4rem; display: grid; gap: 0.3rem; background: var(--panel-2); }
.slip-count { color: var(--chalk); font: 800 1.5rem/1.1 var(--font-display); font-stretch: 104%; display: flex; align-items: baseline; gap: 0.4rem; }
.odo { display: inline-block; height: 1.1em; overflow: hidden; font-variant-numeric: tabular-nums; }
.odo-col { display: grid; transform: translateY(calc(var(--n, 0) * -1.1em)); transition: transform 320ms var(--ease-out); }
.odo-col span { height: 1.1em; line-height: 1.1; }
.slip-note { color: #CBD1CC; font-weight: 600; }
.slip-fine { font-size: var(--fs-sm); color: var(--fog); }

/* ---------- Comparison ---------- */
.section.raised { background: var(--panel); border-block: 1px solid var(--line); }
.raised .compare .us { background: #232924; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare caption { text-align: left; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: var(--fs-sm); font-weight: 700; color: var(--dim); padding-top: 0; }
.compare tbody th { color: var(--chalk); font-weight: 700; width: 28%; }
.compare td { color: var(--fog); }
.compare .us { background: var(--panel-2); color: var(--chalk); }
.compare thead .us { color: var(--chalk); border-radius: var(--radius) var(--radius) 0 0; padding-top: 1.1rem; }
.compare tbody tr:last-child .us { border-radius: 0 0 var(--radius) var(--radius); border-bottom: 0; }
.compare .us-cell { display: flex; gap: 0.6rem; align-items: flex-start; }
.compare .us-cell .icon { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; stroke-width: 2.25; color: var(--chalk); }
@media (max-width: 47.99em) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tbody { display: grid; gap: 0.75rem; }
  .compare tr { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .compare th, .compare td { border-bottom: 0; padding: 0.75rem 0.9rem; font-size: 0.9375rem; line-height: 1.4; }
  .compare tbody th { grid-column: 1 / -1; width: 100%; font: 700 1.0625rem/1.3 var(--font-display); padding-bottom: 0; }
  .compare td::before { content: attr(data-label); display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--dim); margin-bottom: 0.15rem; }
  .compare td.us::before { color: var(--fog); }
  .compare .us { border-radius: 0 !important; }
  .compare .us-cell .icon { width: 1rem; height: 1rem; margin-top: 0.2rem; }
}

/* ---------- Photo strip ---------- */
.strip { position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: grid; align-items: end; min-height: clamp(20rem, 12rem + 20vw, 36rem); }
.strip-media, .strip-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.strip-media { z-index: -2; }
.strip-media img { object-fit: cover; object-position: 50% 45%; }
.strip::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgb(15 18 16 / 0) 28%, rgb(15 18 16 / 0) 55%, rgb(15 18 16 / 0.92) 100%),
    linear-gradient(90deg, rgb(15 18 16 / 0.55) 0%, rgb(15 18 16 / 0) 50%);
}
.strip .container { padding-block: 2.5rem; }
.strip-line { font: 800 clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem)/1.02 var(--font-display); font-stretch: 104%; text-transform: uppercase; color: var(--chalk); max-width: 18ch; text-wrap: balance; }

/* ---------- Services ---------- */
.services { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.svc {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 17rem; padding: 1.4rem;
  border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
  text-decoration: none; color: var(--chalk);
}
.svc picture, .svc img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.svc img { object-fit: cover; transition: transform 300ms var(--ease-out); }
.svc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(15 18 16 / 0.97) 0%, rgb(15 18 16 / 0.9) 36%, rgb(15 18 16 / 0.5) 66%, rgb(15 18 16 / 0.12) 100%); }
.svc h3 { font: 700 1.3125rem/1.2 var(--font-display); }
.svc p { color: #CBD1CC; font-size: var(--fs-sm); margin-top: 0.35rem; max-width: 34ch; }
.svc .more { margin-top: 0.9rem; font-weight: 700; font-size: var(--fs-sm); text-decoration: underline; text-decoration-color: var(--hivis); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .svc:hover img { transform: scale(1.04); } }
.svc-feature h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.svc-call { background: var(--panel-2); justify-content: space-between; gap: 1.5rem; min-height: 0; }
.svc-call::after { display: none; }
.svc-call h3 { font-size: 1.3125rem; }
.svc-call p { color: var(--fog); }
@media (min-width: 40em) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .services { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(15.5rem, auto); }
  .svc-feature { grid-column: span 2; grid-row: span 2; padding: 2rem; }
  .svc { min-height: 0; }
}
@media (max-width: 39.99em) {
  .services { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .svc { min-height: 11.5rem; padding: 1rem; }
  .svc h3 { font-size: 1.0625rem; }
  .svc p, .svc .more { display: none; }
  .svc-feature { grid-column: 1 / -1; min-height: 15rem; padding: 1.25rem; }
  .svc-feature p, .svc-feature .more { display: block; }
  .svc-feature h3 { font-size: 1.5rem; }
  .svc-call { gap: 0.75rem; }
  .svc-call h3 { font-size: 1.0625rem; }
  .svc-call .btn { min-height: 3rem; padding: 0 0.75rem; }
}

/* ---------- Services page: grouped rows ---------- */
.svc-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1rem, 0.5rem + 2vw, 2rem); }
.svc-jump a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--chalk); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .svc-jump a:hover { border-color: var(--chalk); } }
.svc-group { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.svc-group .h2 { margin-bottom: 1.5rem; }
.svc-rows { display: grid; gap: 1rem; }
@media (min-width: 52em) { .svc-rows { grid-template-columns: 1fr 1fr; } }
.svc-row { display: grid; gap: 0.6rem; align-content: start; justify-items: start; padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.svc-row h3 { font: 700 1.3125rem/1.25 var(--font-display); }
.svc-row p { max-width: 54ch; }
.svc-row .btn { margin-top: 0.5rem; min-height: 3rem; }

/* ---------- Service page hero (services, auto body) ---------- */
/* The photo sits behind the page head; the shading keeps the text side near solid and lets the tools show on the right and below */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--panel); border-bottom: 1px solid var(--line); margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.page-hero-media, .page-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-hero-media { z-index: -2; }
.page-hero-media img { object-fit: cover; object-position: 70% 75%; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(15 18 16 / 0.96) 0%, rgb(15 18 16 / 0.9) 45%, rgb(15 18 16 / 0.5) 74%, rgb(15 18 16 / 0.25) 100%),
    linear-gradient(0deg, rgb(15 18 16 / 0.85) 0%, rgb(15 18 16 / 0) 30%);
}
.page-hero .container { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.page-hero .page-head { padding-bottom: 1.5rem; }
.page-hero .svc-jump { margin-bottom: 0; }
.page-hero .lead { color: #D3D8D4; }
@media (min-width: 64em) { .page-hero { min-height: 34rem; display: grid; align-items: end; } }
/* Phones: the text covers most of the frame, so the shading runs top to bottom instead */
@media (max-width: 39.99em) {
  .page-hero-media img { object-position: 50% 100%; }
  .page-hero::after { background: linear-gradient(180deg, rgb(15 18 16 / 0.62) 0%, rgb(15 18 16 / 0.8) 40%, rgb(15 18 16 / 0.86) 70%, rgb(15 18 16 / 0.97) 100%); }
}

/* ---------- Home: short auto body section ---------- */
.body-short { display: grid; gap: 1.5rem; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); margin-bottom: var(--section); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.body-short .h2 { margin-bottom: 0.75rem; }
.body-short p { max-width: 62ch; }
.body-short .btn { justify-self: start; }
@media (min-width: 60em) { .body-short { grid-template-columns: 1fr auto; align-items: center; gap: 3rem; } }

/* ---------- Auto body page ---------- */
.crumbs { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); font-size: var(--fs-sm); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.6rem; color: var(--dim); }
.crumbs a { color: var(--fog); }
.crumbs [aria-current] { color: var(--chalk); }
.crumbs + .page-head { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.body-split { display: grid; gap: 1.75rem; padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.body-split .h2 { margin-bottom: 0.25rem; }
@media (min-width: 60em) { .body-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: center; } }
.ticks { display: grid; gap: 0.85rem; padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.ticks li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--chalk); }
.ticks .icon { width: 1.15rem; height: 1.15rem; margin-top: 0.25rem; stroke-width: 2.25; }
.svc-rows-3 { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
@media (min-width: 60em) { .svc-rows.svc-rows-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-row h3 a { text-decoration: none; }
.svc-row .cta-pair { align-items: center; gap: 1.25rem; margin-top: 0.5rem; }
.svc-row .cta-pair .btn { margin-top: 0; }
.ba-grid { display: grid; gap: 1.25rem; margin-bottom: clamp(1rem, 0.5rem + 2vw, 2rem); }
@media (min-width: 52em) { .ba-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ba-slot { aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--dim); font-size: var(--fs-sm); font-weight: 700; }
.ba-cap { grid-column: 1 / -1; color: var(--chalk); font-weight: 600; font-size: var(--fs-sm); }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 2.5rem; counter-reset: step; }
.step { display: grid; gap: 0.75rem; position: relative; align-content: start; }
.step-num { position: relative; font: 800 3.5rem/1 var(--font-display); font-stretch: 104%; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }
.step-num::after { content: attr(data-n); position: absolute; inset: 0; color: var(--chalk); -webkit-text-stroke: 1.5px var(--chalk); opacity: 0; transition: opacity 360ms var(--ease-out); }
.step.is-reached .step-num::after { opacity: 1; }
.step h3 { font: 700 1.375rem/1.25 var(--font-display); }
.step p { max-width: 36ch; }
.steps-rail { display: none; position: relative; height: 9px; }
.steps-rail::before { content: ""; position: absolute; inset: 4px 0 auto 0; height: 1px; background: var(--line); }
/* JS sets transform on both each frame while the steps are on screen (no layout, no paint) */
.rail-fill { position: absolute; inset: 4px 0 auto 0; height: 1px; background: var(--fog); transform-origin: left center; transform: scaleX(1); }
.rail-head { position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--hivis); }
@media (max-width: 51.99em) {
  .steps { gap: 1.75rem; }
  .step { grid-template-columns: 3rem 1fr; gap: 0.25rem 1rem; }
  .step-num { grid-row: span 2; font-size: 2.75rem; }
}
@media (min-width: 52em) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .steps.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .steps-rail { display: block; margin-bottom: 2rem; }
}

/* ---------- Quote ---------- */
.quote-grid { display: grid; gap: 2.5rem; }
@media (min-width: 60em) { .quote-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } }
.call-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: 0.85rem; }
.call-card .h3 { font-size: 1.25rem; }
.call-card .big-num { font: 800 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1 var(--font-display); color: var(--chalk); text-decoration: none; font-variant-numeric: tabular-nums; }
.call-card .status { font-size: var(--fs-sm); }

.form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); display: grid; gap: 1.25rem; }
.form-row { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.45rem; min-width: 0; }
.field label { color: var(--chalk); font-weight: 700; font-size: 1rem; }
.field .opt { color: var(--dim); font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 3.25rem; padding: 0.8rem 0.95rem;
  background: var(--bg); color: var(--chalk);
  border: 1.5px solid var(--fog); border-radius: var(--radius-sm);
  font: 500 1.0625rem/1.4 var(--font-body);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; border-color: var(--hivis); box-shadow: 0 0 0 3px rgb(200 241 53 / 0.28); }
.field [aria-invalid="true"] { border-color: #FF8A7A; }
.field-error { color: #FFB4A8; font-size: var(--fs-sm); font-weight: 600; display: flex; gap: 0.4rem; align-items: center; }
.field-error:empty { display: none; }
.field-hint { font-size: var(--fs-sm); color: var(--dim); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.9rem 1rem; font-size: var(--fs-sm); color: var(--chalk); background: var(--panel-2); }
.form-notice:empty { display: none; }
.form-notice.is-error { border-color: #FF8A7A; }
.form-foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.form-foot small { color: var(--dim); font-size: var(--fs-sm); flex: 1 1 16rem; }
.form-foot small a { color: var(--fog); }
.btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.form-success { display: grid; gap: 0.75rem; text-align: left; align-content: start; }
.sms-preview { margin: 0.25rem 0; padding: 1rem 1.1rem; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--chalk); font: 500 1rem/1.55 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.form-success .tickbig { width: 3rem; height: 3rem; border-radius: 50%; background: var(--chalk); color: var(--bg); display: grid; place-items: center; }
.form-success .tickbig svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.form-success .tickbig path { stroke-dasharray: 24; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .form-success .tickbig { animation: pop 320ms var(--ease-out) both; }
  .form-success .tickbig path { animation: draw 420ms var(--ease-out) 160ms both; }
}
@keyframes pop { from { transform: scale(0.8); opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 24; } }
@media (prefers-reduced-motion: no-preference) {
  .form-success { animation: rise 360ms var(--ease-out) both; }
}

/* ---------- Area + map + hours ---------- */
.area-grid { display: grid; gap: 2.5rem; }
@media (min-width: 60em) { .area-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 4rem; } }
.area-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.area-chips li { padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); color: var(--chalk); }
.map { position: relative; display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: #121513; color: var(--chalk); text-decoration: none; }
.map img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 400ms var(--ease-out); }
.map-open {
  position: absolute; right: 0.75rem; bottom: 0.75rem;
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.9rem;
  background: rgb(23 27 24 / 0.94); border: 1px solid var(--line-strong); border-radius: 8px;
  font-size: var(--fs-sm); font-weight: 700;
}
@media (hover: hover) and (pointer: fine) { .map:hover img { transform: scale(1.02); } .map:hover .map-open { border-color: var(--chalk); } }
.map-credit { margin-top: 0.5rem; font-size: var(--fs-xs); color: var(--dim); }
.map-credit a { color: var(--fog); }
.map-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
@media (max-width: 39.99em) { .area-chips { display: none; } }

.hours-table { width: 100%; border-collapse: collapse; margin-top: 2rem; font-variant-numeric: tabular-nums; }
.hours-table caption { text-align: left; font: 700 1.25rem/1.3 var(--font-display); color: var(--chalk); padding-bottom: 0.75rem; }
.hours-table th, .hours-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.hours-table th { color: var(--chalk); font-weight: 600; }
.hours-table td { text-align: right; color: var(--fog); }
.hours-table tr.is-today { background: var(--panel-2); }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--chalk); }
.hours-table .today-tag { display: inline-block; margin-left: 0.5rem; font-size: var(--fs-xs); font-weight: 700; color: var(--bg); background: var(--chalk); border-radius: 6px; padding: 0.1rem 0.45rem; vertical-align: middle; }
.review-ask { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: 0.75rem; }
.review-ask p { max-width: 52ch; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 2.5rem; }
@media (min-width: 60em) { .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; } .faq-side { position: sticky; top: 6.5rem; align-self: start; } }
.faq-side { display: grid; gap: 1.25rem; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.35rem 0; min-height: 3.5rem;
  color: var(--chalk); font: 700 1.1875rem/1.35 var(--font-display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 1.35rem; height: 1.35rem; color: var(--fog); transition: transform 220ms var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .answer { padding: 0 0 1.5rem; max-width: 62ch; }
.faq .answer p + p { margin-top: 0.75em; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } .faq summary .icon { transition: none; } }

/* ---------- Final band ---------- */
.band { background: var(--hivis); color: var(--bg); }
.band .container { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); display: grid; gap: 2rem; }
.band .h2 { color: var(--bg); max-width: 18ch; }
.band p { color: #1E2A12; font-size: var(--fs-lg); max-width: 54ch; font-weight: 500; }
.band .status { color: var(--bg); font-weight: 700; }
.band .status::before { background: var(--bg); box-shadow: none; }
.band .btn-ghost { border-color: var(--bg); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .band .btn-ghost:hover { background: rgb(15 18 16 / 0.08); border-color: var(--bg); } }
.band :focus-visible { outline-color: var(--bg); }
.band ::selection { background: var(--bg); color: var(--hivis); }
@media (min-width: 60em) { .band .container { grid-template-columns: 1fr auto; align-items: end; } }
.band-actions { display: grid; gap: 1rem; justify-items: start; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 4rem 2rem; font-size: var(--fs-sm); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 40em) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { font: 700 1rem/1.3 var(--font-display); color: var(--chalk); margin-bottom: 0.9rem; }
.site-footer address { font-style: normal; display: grid; gap: 0.35rem; margin-top: 1rem; }
.site-footer a { color: var(--fog); text-decoration: none; }
.site-footer a:hover { color: var(--chalk); text-decoration: underline; text-underline-offset: 4px; }
.site-footer li + li { margin-top: 0.45rem; }
.footer-hours { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; font-variant-numeric: tabular-nums; }
.footer-hours dd { margin: 0; color: var(--chalk); }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; color: var(--dim); }
.footer-bottom .push { margin-left: auto; }

/* ---------- Mobile action bar ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgb(15 18 16 / 0.96); border-top: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.action-bar .btn { min-height: 3.25rem; padding: 0 0.6rem; }
.action-bar { transition: transform 260ms var(--ease-drawer), visibility 0s; }
.js .has-hero .action-bar:not(.is-shown), .js .bar-after-cta .action-bar:not(.is-shown) { transform: translateY(calc(100% + 2px)); visibility: hidden; transition: transform 200ms var(--ease-out), visibility 0s linear 200ms; }
body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 48em) { .action-bar { display: none; } body { padding-bottom: 0; } }

/* ---------- Simple pages (quote, 404, privacy) ---------- */
.page-head { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); display: grid; gap: 1.25rem; }
.page-head .h1 { max-width: 16ch; }
.legal h2 { font: 700 1.375rem/1.3 var(--font-display); margin-top: 2.5rem; }
.legal p, .legal li { max-width: 68ch; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal ul li + li { margin-top: 0.4rem; }
.legal a { color: var(--chalk); text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .faq details::details-content { transition: none !important; }
}

.section.flush { padding-top: 0; }
.section-head.tight { margin-bottom: 0; }
.quote-aside { display: grid; gap: 1.25rem; align-content: start; }
/* Book page on phones and tablets: the form comes first (the action bar already offers Call and Text) */
@media (max-width: 59.99em) { .quote-aside { order: 2; } }

.site-footer .brand { color: var(--chalk); }
.site-footer .brand:hover { text-decoration: none; }

/* ---------- Page transitions (browsers without support just navigate) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- Phone trims ---------- */
@media (max-width: 39.99em) {
  /* Hero kept light on phones (client, 2026-10-26): one-line promise, no chips, and the
     hours card shows only today's status (the full hours are in the area section) */
  .hero-sub-more, .hero-chips { display: none; }
  .hours-card dl { display: none; }
  .hours-table th, .hours-table td { padding: 0.55rem 0.75rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer-grid > div:first-child, .footer-grid > div:nth-child(2) { grid-column: 1 / -1; }
  .site-footer { padding-block: 3rem 1.5rem; }
  .ledger-row { padding: 1.25rem 0; }
  .section-close { margin-top: 2rem; }
}
/* On phones the sticky action bar is on screen past the hero, so these repeat it */
@media (max-width: 47.99em) { .bar-covers { display: none !important; } }

/* ---------- Scroll motion (each tied to meaning; content is never hidden) ---------- */

/* Comparison: Shoreline ticks are checked off in sequence, 0.6s apart, like an inspection sheet */
.compare .us-cell .icon { stroke-dasharray: 24; stroke-dashoffset: 0; }
/* Drawn only after the reveal fires (see the horizon note). While drawing, each tick gets its
   own small layer so the stroke change repaints just the icon, not the whole page; main.js
   removes .is-drawing when the last tick finishes. */
.compare[data-reveal="done"] .us-cell .icon { transition: stroke-dashoffset 600ms var(--ease-out); }
.compare.is-drawing .us-cell .icon { will-change: transform; }
.compare[data-reveal="pending"] .us-cell .icon { stroke-dashoffset: 24; }
.compare tbody tr:nth-child(2) .us-cell .icon { transition-delay: 600ms; }
.compare tbody tr:nth-child(3) .us-cell .icon { transition-delay: 1200ms; }
.compare tbody tr:nth-child(4) .us-cell .icon { transition-delay: 1800ms; }
.compare tbody tr:nth-child(5) .us-cell .icon { transition-delay: 2400ms; }
.compare tbody tr:nth-child(6) .us-cell .icon { transition-delay: 3000ms; }

/* Strip: the mechanic's work light sweeps the underside of the car as you scroll.
   Both layers are centred on the strip and moved only by translate3d from main.js.
   The shade is just big enough to cover the strip at either end of the light's travel
   (light moves up to 0.38 of the width and 0.23 of the height from centre); the glow is
   only as big as the light. will-change is switched on while the strip is on screen. */
.strip-shade, .strip-light { position: absolute; z-index: 0; pointer-events: none; transform: translate3d(-12vw, -6vw, 0); }
.strip-shade { left: -40%; top: -30%; width: 180%; height: 160%; }
.strip-light { --r: clamp(11rem, 18vw, 18rem); left: calc(50% - var(--r)); top: calc(50% - var(--r)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); }
.strip.is-lit .strip-shade, .strip.is-lit .strip-light { will-change: transform; }
.strip-shade { background: radial-gradient(circle at center, rgb(15 18 16 / 0) 0, rgb(15 18 16 / 0) clamp(5rem, 8vw, 8rem), rgb(15 18 16 / 0.5) clamp(10rem, 18vw, 18rem), rgb(15 18 16 / 0.72) clamp(15rem, 28vw, 28rem)); }
.strip-light {
  background: radial-gradient(circle at center, rgb(255 222 150 / 0.85) 0, rgb(255 222 150 / 0.4) clamp(2.5rem, 4vw, 4rem), rgb(255 222 150 / 0.12) clamp(7rem, 11vw, 11rem), rgb(255 222 150 / 0) clamp(11rem, 18vw, 18rem));
  mix-blend-mode: screen;
}
.strip .container { position: relative; z-index: 1; }

/* Hero: the short horizon draws in as part of the load moment */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy .horizon-short::before { animation: draw-line 900ms var(--ease-out) 200ms both; }
  .hero-copy .horizon-short::after { animation: draw-dot 900ms var(--ease-out) 200ms both; }
}
@keyframes draw-line { from { transform: scaleX(0); } }
@keyframes draw-dot { from { transform: translateX(0); } }

/* Sections below the screen skip layout and paint until they come near it. Measured 2026-11-04:
   the two full-page layouts during load (first paint, then the web-font swap) took about 1.3s each
   on a throttled phone, and this cuts layout work about 4x. "auto" makes the browser remember each
   section's real height once it has been shown, so scrolling back up never jumps. */
main > section:not(.hero):not(.page-hero), .site-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Set by main.js just before a jump to #section, so the jump lands on real heights, not estimates */
.cv-all main > section:not(.hero):not(.page-hero), .cv-all .site-footer { content-visibility: visible; } /* same specificity as the rule above, or it loses */

/* ---------- Phones (under 768px): no backdrop blur, near-solid backgrounds instead ---------- */
@media (max-width: 47.99em) {
  .site-header::before, .hours-card, .action-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header::before { background: rgb(15 18 16 / 0.97); }
  .hours-card { background: rgb(23 27 24 / 0.97); }
}