/* ═══════════════════════════════════════════════════════════════════════════
   BEVEL — the Upshift auto-glass theme.
   Demo business: Prism Auto Glass, Spokane WA (fabricated sample content).

   The thesis: every surface on this site is a pane of laminated glass, and
   light behaves accordingly. Three rules govern everything —

   1. THE EDGE. Every primary pane shows its edge: a chamfered top-right
      corner and an edge-lit rim. The accent is the Prism brand's beam blue
      (the light inside the logo's windshield), and it is only ever the edge
      light of something — never a decorative wash.
   2. THE LIGHT LAW. One light source, upper left, ~24°. Rims are brightest
      top-left, glints travel left→right, sheens rake at 105°. Nothing
      glows from two directions.
   3. FROST CLEARS. Frost (backdrop blur) appears only where there is
      something behind it to blur, and the hero's frost wipes clear like a
      windshield — the promise of the trade, performed by the page.

   Palette roles:
     --paper / --paper-2   cold daylight field
     --ink / --ink-2       tempered slate text
     --edge / --edge-deep  glass-edge green (actions, lit edges)
     --uv                  resin-cure violet (repair states ONLY)
     --amber               "crack is spreading" urgency notes ONLY
     --night / --laser     the calibration bay (dark set)

   Type: Schibsted Grotesk (one variable family = one material, many cuts),
   IBM Plex Mono for everything etched — kickers, data, the DOT-style bug.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Prism Auto Glass brand (identity sheet 2026-08-18): navy #0B132B,
     prism-beam blue #1E7BFF, graphite #2A2F36, ice #E6E9EE. The beam blue is
     the LIT edge; button/text blues are darkened to hold WCAG AA. */
  --paper: #F4F7F9;
  --paper-2: #E9EFF3;
  --white: #FFFFFF;
  --ink: #0C1626;
  --ink-2: #3B4C63;
  --etchc: rgba(12, 22, 38, .64);
  --line: rgba(12, 22, 38, .14);
  --line-soft: rgba(12, 22, 38, .08);

  --edge: #1257C4;        /* buttons, lit edges on light */
  --edge-deep: #0D3F93;   /* hover, small accent text (AA on paper) */
  --edge-lit: #1E7BFF;    /* the prism beam — decorative rim light only */
  --edge-tint: rgba(18, 87, 196, .085);

  --uv: #5646C4;          /* resin cure — repair states only */
  --uv-lit: #8E7DF2;
  --amber: #8F5406;       /* urgency notes only */

  --night: #0B132B;       /* brand navy — the calibration bay */
  --night-2: #101E3C;
  --night-ink: #E7EDF6;
  --night-ink-2: #A6B5CE;
  --night-line: rgba(231, 237, 246, .14);
  --laser: #4D9FFF;

  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-pane: 16px;   /* primary glass panes */
  --r-card: 12px;   /* quiet surfaces, buttons, fields */
  --r-chip: 999px;

  --cut: 22px;      /* the bevel: one chamfered corner per primary pane */

  --lift: 0 28px 56px -36px rgba(11, 19, 43, .38);
  --lift-soft: 0 16px 36px -28px rgba(11, 19, 43, .28);
  --glow-beam: 0 12px 44px -14px rgba(30, 123, 255, .55);
  --beam-grad: linear-gradient(115deg, #1257C4, #1E7BFF 46%, #7FB5FF 88%);
  --beam-grad-soft: linear-gradient(115deg, rgba(18,87,196,.0), rgba(30,123,255,.5), rgba(156,197,255,.0));
  /* the engineering field: a faint measured grid, drawn once, tinted by token */
  --grid-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 .5H0M.5 0v56' fill='none' stroke='%231257C4' stroke-opacity='.09'/%3E%3Ccircle cx='0' cy='0' r='1' fill='%231257C4' fill-opacity='.16'/%3E%3C/svg%3E");

  --ease: cubic-bezier(.22, .7, .25, 1);
}

/* cross-document view transitions: page-to-page glass fade, zero JS */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 180ms var(--ease) both vt-out; }
  ::view-transition-new(root) { animation: 260ms var(--ease) 60ms both vt-in; }
}
@keyframes vt-out { to { opacity: 0; filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; filter: blur(10px); } }

/* ── reset / base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.65;
  font-weight: 430;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, dl, dd, dt, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; border-radius: 4px; }
.night :focus-visible, .site-footer :focus-visible, .callbar :focus-visible { outline-color: var(--laser); }
::selection { background: rgba(30, 123, 255, .3); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--ink); color: var(--white);
  border-radius: 0 0 10px 0; font-weight: 600; font-size: 14px;
}
.skip:focus { left: 0; }

.inner { max-width: 1160px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 36px); }
.inner--tight { max-width: 880px; }

/* ── type roles ───────────────────────────────────────────────────────── */
.t-display {
  font-size: clamp(40px, 6.1vw, 72px);
  font-weight: 760; letter-spacing: -.025em; line-height: 1.02;
  text-wrap: balance;
}
.t-h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 710; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
.t-h3 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 660; letter-spacing: -.012em; line-height: 1.2; }
.t-title { font-size: 17.5px; font-weight: 650; letter-spacing: -.008em; line-height: 1.3; }
.t-lead { font-size: clamp(16.5px, 1.8vw, 19.5px); line-height: 1.58; color: var(--ink-2); text-wrap: pretty; }
.t-body { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.t-strong { font-weight: 640; color: var(--ink); }
.t-small { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.t-fine { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.t-num {
  font-family: var(--font-mono); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* etched labels — the DOT-bug voice. Every kicker on the site is "etched
   into the glass": mono, spaced, all-caps, with a scored tick before it. */
.etch {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--etchc);
}
.etch::before { content: ""; width: 18px; height: 1px; background: var(--edge); opacity: .8; }
.etch--bare::before { display: none; }
.night .etch, .etch--night { color: rgba(231, 237, 246, .66); }
.night .etch::before, .etch--night::before { background: var(--laser); }

.textlink {
  color: var(--edge-deep); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(18, 87, 196, .4);
}
.textlink:hover { text-decoration-color: var(--edge); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 15px 26px; border-radius: var(--r-card);
  background: var(--beam-grad); background-size: 150% 100%; background-position: 0 0;
  color: var(--white);
  font-weight: 650; font-size: 15.5px; letter-spacing: .002em;
  overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(11, 19, 43, .25), var(--glow-beam);
  transition: background-position .35s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { background-position: 85% 0; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 52px -14px rgba(30, 123, 255, .7); }
.btn:active { transform: translateY(0) scale(.99); }
.btn svg { transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
/* the shine: a raked specular band that crosses on hover, 105° per the law */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .34) 50%, transparent 58%);
  background-size: 260% 100%; background-position: 118% 0; background-repeat: no-repeat;
}
.btn:hover::after { background-position: -18% 0; transition: background-position .7s var(--ease); }
.btn-ghost {
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(115deg, rgba(12,22,38,.35), rgba(30,123,255,.55)) border-box;
  color: var(--ink);
  border: 1px solid transparent; box-shadow: var(--lift-soft);
}
.btn-ghost:hover { background: linear-gradient(#F2F7FF, #EAF2FF) padding-box, var(--beam-grad) border-box; box-shadow: var(--glow-beam); }
.btn-ghost::after { display: none; }
.btn-night { background: var(--laser); color: var(--night); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px -16px rgba(77, 159, 255, .55); }
.btn-night:hover { background: #62E2B9; }
.btn-sm { padding: 10px 18px; font-size: 14px; border-radius: 10px; }
.btn-lg { padding: 18px 32px; font-size: 16.5px; }

/* ── the pane: laminated glass as a surface system ────────────────────────
   .pane        the primary specimen — chamfered corner + edge-lit rim
   .pane--frost translucent, blurs whatever sits behind it (use over fields)
   .pane--act   interactive: lifts and takes a sheen sweep on hover
   .card        quiet secondary surface — plain radius, hairline, no cut
   The chamfer clips the top-right corner; the cut face is re-lit by an
   ::after diagonal so the corner reads as a polished bevel, not a bite. */
.pane {
  position: relative;
  background:
    /* the reveal glint rides layer 1; keyframes move its position */
    linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .55) 50%, transparent 56%) no-repeat -160% 0 / 200% 100%,
    linear-gradient(160deg, var(--white) 0%, #FBFDFE 55%, #F2F7F7 100%);
  border: 1px solid rgba(14, 27, 34, .12);
  border-radius: var(--r-pane);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .85),
    inset -1px -1px 0 rgba(18, 87, 196, .07),
    var(--lift-soft);
}
.pane::after { /* the polished cut face: a lit beam wedge, not a hairline */
  content: ""; position: absolute; top: 0; right: 0;
  width: calc(var(--cut) * 2.4); height: calc(var(--cut) * 2.4);
  background:
    linear-gradient(135deg, transparent calc(50% - 2px), var(--edge-lit) 50%, transparent calc(50% + 10px));
  filter: drop-shadow(0 0 6px rgba(30, 123, 255, .5));
  opacity: .9; pointer-events: none;
}
/* the reflection: one diagonal light plane living inside every pane */
.pane:not(.photo-pane)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 34%),
              radial-gradient(120% 60% at 100% 0%, rgba(30, 123, 255, .07), transparent 55%);
}
.pane--night:not(.photo-pane)::before {
  background: linear-gradient(118deg, rgba(231, 237, 246, .1), transparent 32%),
              radial-gradient(120% 60% at 100% 0%, rgba(30, 123, 255, .12), transparent 55%);
}
.pane > * { position: relative; z-index: 1; }
.pane--frost {
  background:
    linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .5) 50%, transparent 56%) no-repeat -160% 0 / 200% 100%,
    linear-gradient(150deg, rgba(255, 255, 255, .78), rgba(244, 249, 250, .55));
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
}
.pane--night {
  background:
    linear-gradient(105deg, transparent 44%, rgba(231, 237, 246, .18) 50%, transparent 56%) no-repeat -160% 0 / 200% 100%,
    linear-gradient(155deg, rgba(20, 38, 48, .92), rgba(12, 24, 31, .88));
  border-color: rgba(231, 237, 246, .16);
  box-shadow: inset 1px 1px 0 rgba(231, 237, 246, .14), 0 30px 60px -40px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.pane--act { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.pane--act:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 87, 196, .35);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .9), inset -1px -1px 0 rgba(18, 87, 196, .12), var(--lift);
}
.pane--act:hover { background-position: 260% 0, 0 0; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background-position .8s var(--ease); }

.card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--lift-soft);
}

/* ── photography: every photo sits in glass ───────────────────────────────
   A .photo-pane is a .pane with the padding removed and an image filling the
   clip — same chamfered corner, same edge-lit rim, so photography obeys the
   same material rules as everything else. The caption etches into the glass
   over a navy scrim that only exists when there is a caption to hold. */
.photo-pane { padding: 0; overflow: hidden; }
.photo-pane img { width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.photo-pane--43 { aspect-ratio: 4 / 3; }
.photo-pane--wide { aspect-ratio: 16 / 10; }
.photo-pane figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 600; font-size: 9.5px;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(231, 237, 246, .95);
}
.photo-pane figcaption::before { content: ""; width: 16px; height: 1px; background: var(--edge-lit); flex: none; }
.photo-pane:has(figcaption)::before {
  content: ""; position: absolute; inset: 56% 0 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(11, 19, 43, .62));
}
/* photos inside a padded pane (a figure block within copy) */
.photo-inset { border-radius: 10px; overflow: hidden; border: 1px solid var(--line-soft); }
.photo-inset img { width: 100%; height: auto; }

/* the hero photograph: anchored right, melting into the frost field left —
   the image's own white wall continues the paper. The frost sheet sits above
   it, so the wipe literally defrosts the photo. */
.hero-photo { position: absolute; inset: 0 0 0 38%; z-index: 1; pointer-events: none; }
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
.hero-grid { z-index: 2; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-photo img { animation: hero-drift linear both; animation-timeline: scroll(); animation-range: 0 120vh; scale: 1.08; }
    @keyframes hero-drift { from { transform: translateY(0); } to { transform: translateY(7%); } }
    .section-head[data-num]::before { animation: num-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    @keyframes num-rise { from { transform: translateY(.18em); opacity: .3; } to { transform: none; opacity: 1; } }
  }
}

/* split page-heroes: copy left, a glass photo right */
.ph-grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}

/* the poster voice (owner reference 2026-08-18): big caps, two tones —
   ink for the fact, beam blue for the promise */
.t-display--caps {
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 830; letter-spacing: -.012em; line-height: 1.08;
  text-transform: uppercase;
}
.disp-blue {
  color: var(--edge);
  background: linear-gradient(100deg, #0D3F93, #1E7BFF 55%, #4D9FFF 85%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 18px rgba(30, 123, 255, .25));
}
.night .disp-blue { background: linear-gradient(100deg, #4D9FFF, #9CC5FF); -webkit-background-clip: text; background-clip: text; }

/* trust strip v2: four jewel tiles of glass on a lit navy field. Each tile is
   a mini pane — chamfered, edge-lit, reflective — with a beam-ring icon coin
   and a glint that crosses on hover. The band itself carries the engineering
   grid and a beam seam along its top edge. */
.trust-strip {
  position: relative;
  padding-block: clamp(22px, 3vw, 34px);
  background:
    var(--grid-field),
    radial-gradient(70% 140% at 12% 0%, rgba(30, 123, 255, .22), transparent 55%),
    radial-gradient(60% 130% at 88% 100%, rgba(86, 70, 196, .16), transparent 60%),
    linear-gradient(120deg, #0E1B3E, var(--night) 65%);
  color: var(--night-ink);
}
.trust-strip::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--beam-grad-soft); opacity: .9;
}
.trust-strip::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30,123,255,.4), transparent);
}
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.trust-item {
  position: relative; display: flex; align-items: center; gap: 15px;
  padding: 18px clamp(14px, 1.6vw, 22px);
  background:
    linear-gradient(105deg, transparent 44%, rgba(231, 237, 246, .16) 50%, transparent 56%) no-repeat -160% 0 / 200% 100%,
    linear-gradient(150deg, rgba(30, 123, 255, .16), rgba(16, 30, 60, .55) 55%, rgba(11, 19, 43, .65));
  border: 1px solid rgba(77, 159, 255, .28);
  border-radius: 14px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  box-shadow: inset 1px 1px 0 rgba(231, 237, 246, .14), 0 18px 40px -24px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-position .7s var(--ease), box-shadow .3s var(--ease);
}
.trust-item:hover {
  transform: translateY(-3px); border-color: rgba(127, 181, 255, .6);
  background-position: 260% 0, 0 0;
  box-shadow: inset 1px 1px 0 rgba(231, 237, 246, .2), 0 22px 48px -22px rgba(30, 123, 255, .45);
}
.trust-item::after { /* the tile's lit cut face */
  content: ""; position: absolute; top: 0; right: 0; width: 32px; height: 32px;
  background: linear-gradient(135deg, transparent calc(50% - 1.5px), var(--laser) 50%, transparent calc(50% + 7px));
  opacity: .9; pointer-events: none;
}
.trust-ico {
  flex: none; width: 52px; height: 52px; border-radius: 999px; position: relative;
  display: grid; place-items: center; color: #CFE4FF;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(127, 181, 255, .4), rgba(18, 87, 196, .25) 55%, rgba(11, 19, 43, .4));
  box-shadow: inset 0 1px 0 rgba(231, 237, 246, .35), 0 6px 18px -6px rgba(30, 123, 255, .55);
}
.trust-ico::before { /* beam ring */
  content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 210deg, transparent 12%, #7FB5FF 32%, #1E7BFF 50%, transparent 78%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .95;
}
.trust-item > div b { display: block; font-size: 13px; font-weight: 740; letter-spacing: .09em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(30, 123, 255, .4); }
.trust-item > div span { display: block; font-size: 12.5px; color: var(--night-ink-2); line-height: 1.45; margin-top: 2px; }

/* services as photo cards: the photograph rides the top of the pane, the
   etched voice keeps the bottom */
.svc { padding: 0; }
.svc-photo { aspect-ratio: 16 / 9; overflow: hidden; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.svc:hover .svc-photo img { transform: scale(1.03); }
.svc-body { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2.2vw, 26px); flex: 1; }
.svc-body .t-body { flex: 1; }

/* ── reveal motion (JS adds .js to <html>; .is-in per element) ─────────── */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js .reveal.is-in[data-delay="1"] { transition-delay: .07s; }
.js .reveal.is-in[data-delay="2"] { transition-delay: .14s; }
.js .reveal.is-in[data-delay="3"] { transition-delay: .21s; }
.js .reveal.is-in[data-delay="4"] { transition-delay: .28s; }
/* the edge glint fires once as a pane arrives — light crossing the glass */
.js .pane.reveal.is-in { animation: glint 1.05s var(--ease) .18s 1 both; }
@keyframes glint {
  from { background-position: -160% 0, 0 0; }
  to   { background-position: 260% 0, 0 0; }
}

/* ── header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 247, 249, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
}
.header-bar {
  display: flex; align-items: center; gap: var(--s5);
  max-width: 1240px; margin-inline: auto;
  padding: 12px clamp(16px, 3vw, 32px);
}
.wordmark { display: inline-flex; align-items: center; gap: 11px; }
.wordmark svg { flex: none; }
.wordmark-stack { display: flex; flex-direction: column; line-height: 1.12; }
.wordmark-name { font-weight: 760; font-size: 18.5px; letter-spacing: -.015em; }
.wordmark-sub {
  font-family: var(--font-mono); font-weight: 600; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--etchc);
}
.site-nav { display: flex; gap: clamp(14px, 1.8vw, 26px); margin-inline: auto; }
.site-nav a { font-weight: 560; font-size: 14.5px; color: var(--ink-2); transition: color .15s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { box-shadow: 0 2px 0 var(--edge); }
.header-actions { display: flex; align-items: center; gap: var(--s4); margin-left: auto; }
.header-phone { font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.header-phone:hover { color: var(--edge-deep); }

/* mobile call bar — glass over the page floor; auto glass is a phone trade */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: none; gap: 1px;
  background: rgba(10, 20, 26, .86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(231, 237, 246, .16);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 10px; color: var(--night-ink);
  font-weight: 650; font-size: 15px;
}
.callbar a + a { border-left: 1px solid rgba(231, 237, 246, .14); }
.callbar .t-num { color: var(--laser); font-size: 14px; }

/* ── hero ─────────────────────────────────────────────────────────────────
   A field of cold daylight seen through glass. The frost overlay wipes
   clear on load along a wiper arc (see @property --wipe below); without
   @property support it simply melts (opacity), and with reduced motion it
   never appears at all. */
.hero { position: relative; overflow: clip; background: var(--paper); }
.hero-field {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(255, 255, 255, .9), transparent 55%),
    radial-gradient(90% 70% at 88% 8%, rgba(30, 123, 255, .14), transparent 60%),
    radial-gradient(70% 60% at 70% 100%, rgba(18, 87, 196, .1), transparent 65%),
    linear-gradient(170deg, #FDFEFE 0%, var(--paper) 46%, #E6EDF1 100%);
}
/* volumetric rays: three raked light shafts falling with the light law */
.hero-rays {
  position: absolute; inset: -12% -6%; z-index: 1; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 18%, rgba(30, 123, 255, .10) 24%, transparent 32%),
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 46%, transparent 52%),
    linear-gradient(115deg, transparent 60%, rgba(30, 123, 255, .07) 68%, transparent 74%);
  filter: blur(10px);
  mix-blend-mode: soft-light;
}
/* streak of low sun across the field, upper-left per the law */
.hero-field::before {
  content: ""; position: absolute; inset: -20% -10%;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 42%, transparent 54%);
  filter: blur(6px);
}
/* ambient glint: one soft beam crossing the hero every 9s */
.hero-field::after {
  content: ""; position: absolute; inset: -20% -10%;
  background: linear-gradient(105deg, transparent 46%, rgba(255, 255, 255, .5) 50%, transparent 54%);
  background-size: 300% 100%; filter: blur(3px); opacity: .5;
  animation: ambient 9s linear infinite;
}
@keyframes ambient {
  0% { background-position: 150% 0; } 32% { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}
.hero-grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
  padding-block: clamp(36px, 4.5vw, 60px) clamp(40px, 5vw, 68px);
}
.hero-copy { max-width: 620px; }
.hero-copy > .t-small { max-width: 44ch; }
.hero-copy .t-display { margin-top: 12px; }
.hero-copy .t-lead { margin-top: 16px; max-width: 52ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; margin-top: 24px; }
.hero-call { display: flex; flex-direction: column; line-height: 1.25; }
.hero-call .t-num { font-size: 17px; color: var(--ink); }
.hero-call:hover .t-num { color: var(--edge-deep); }
.hero-call span:last-child { font-size: 12px; color: var(--ink-2); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; }
.hero-proof li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 560; color: var(--ink-2); }
.hero-proof svg { color: var(--edge); flex: none; }

/* the frost sheet: sits over the whole hero, wipes clear along an arc */
@property --wipe { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.frost-sheet {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(236, 243, 246, .92), rgba(222, 232, 238, .86));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask: conic-gradient(from 235deg at 78% 118%, #000 0deg, #000 calc(359deg - var(--wipe)), transparent 359deg);
  mask: conic-gradient(from 235deg at 78% 118%, #000 0deg, #000 calc(359deg - var(--wipe)), transparent 359deg);
  animation: dewipe 1.5s ease-out .35s both, defrost 1.5s ease-out .35s both;
}
@keyframes dewipe { from { --wipe: 0deg; } to { --wipe: 359deg; } }
@keyframes defrost { from { opacity: 1; } 60% { opacity: 1; } to { opacity: 0; } }

/* the showcase: a windshield, drawn as the instrument it is */
.hero-stage { position: relative; }
.shield-pane { padding: clamp(20px, 2.6vw, 30px); padding-bottom: calc(clamp(20px, 2.6vw, 30px) + 30px); }
.shield-fig svg { width: 100%; height: auto; }
.shield-fig figcaption { margin-top: 10px; }
.shield-notes {
  display: flex; justify-content: space-between; gap: var(--s3);
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.shield-notes div { display: flex; flex-direction: column; gap: 2px; }
.shield-notes .t-num { font-size: 16px; color: var(--ink); }
.shield-notes .lbl {
  font-family: var(--font-mono); font-weight: 600; font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--etchc);
}
/* etched linework inside SVG figures */
.eg-line { stroke: var(--ink); stroke-opacity: .5; fill: none; stroke-width: 1.1; }
.eg-line--soft { stroke-opacity: .24; }
.eg-line--edge { stroke: var(--edge); stroke-opacity: .9; }
.eg-fill { fill: var(--edge-tint); }
.eg-frit { fill: var(--ink); opacity: .3; }
.eg-label { font-family: var(--font-mono); font-weight: 600; font-size: 8.2px; letter-spacing: .12em; fill: var(--etchc); text-transform: uppercase; }
.eg-num { font-family: var(--font-mono); font-weight: 600; font-size: 10px; fill: var(--ink); }

/* floating readouts on the stage */
.readout {
  position: absolute; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 16px; border-radius: var(--r-card);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(14, 27, 34, .1);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .9), var(--lift-soft);
}
.readout dt {
  font-family: var(--font-mono); font-weight: 600; font-size: 9px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--etchc);
}
.readout dd { display: flex; align-items: baseline; gap: 6px; }
.readout .t-num { font-size: 19px; color: var(--ink); }
.readout .unit { font-size: 11px; color: var(--ink-2); font-weight: 560; }
.readout--tl { top: 10%; left: 0; }
.readout--br { bottom: 8%; right: 0; }
.readout--uv dt { color: var(--uv); }
/* the hero readouts float on the photograph, so they must hold their own
   light: brighter frost, harder rim */
.hero-stage { min-height: clamp(280px, 26vw, 380px); }
.hero-stage .readout {
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .95), 0 18px 40px -24px rgba(11, 19, 43, .55);
}

/* ── section furniture ────────────────────────────────────────────────── */
.section { position: relative; padding-block: clamp(68px, 8.5vw, 112px); }
.section--tint {
  background:
    var(--grid-field),
    radial-gradient(60% 40% at 85% 0%, rgba(30, 123, 255, .06), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 18%, var(--paper-2) 82%, var(--paper) 100%);
}
/* ghost numerals: the section's index etched huge into the field */
.section-head[data-num] { position: relative; isolation: isolate; }
.section-head[data-num]::before {
  content: attr(data-num); position: absolute; top: -.28em; right: -.04em; z-index: -1;
  font-family: var(--font-mono); font-weight: 600; font-size: clamp(96px, 14vw, 190px);
  line-height: 1; letter-spacing: -.04em; pointer-events: none;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(18, 87, 196, .16);
  background: linear-gradient(180deg, rgba(30, 123, 255, .1), transparent 80%);
  -webkit-background-clip: text; background-clip: text;
}
.night .section-head[data-num]::before { -webkit-text-stroke-color: rgba(77, 159, 255, .2); }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 4.5vw, 52px); }
.section-head .t-h2 { margin-top: 14px; }
.section-head .t-lead { margin-top: 14px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .etch { justify-content: center; }

/* ── services: four specimens, one row of glass ───────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5); }
.svc {
  grid-column: span 6;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.6vw, 30px);
}
.svc-fig { height: 128px; display: flex; align-items: center; }
.svc-fig svg { width: 100%; max-height: 128px; }
.svc .t-body { flex: 1; }
.svc-meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.svc-meta .t-num { font-size: 13px; color: var(--edge-deep); }
.svc-go { display: inline-flex; align-items: center; gap: 7px; font-weight: 640; font-size: 14.5px; color: var(--ink); }
.svc-go svg { transition: transform .25s var(--ease); color: var(--edge); }
.svc:hover .svc-go svg { transform: translateX(4px); }

/* ── repairability: the quarter rule, drawn to scale ──────────────────── */
.repair-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.break-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.break {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; text-align: left;
}
.break svg { width: 100%; height: auto; }
.break-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.break-verdict { font-family: var(--font-mono); font-weight: 600; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--edge-deep); }
.break-verdict--no { color: var(--amber); }
.break .t-small { min-height: 0; }
.quarter-card { padding: clamp(22px, 2.6vw, 30px); position: sticky; top: 84px; }
.quarter-fig { margin-block: 18px; }
.quarter-fig svg { width: 100%; height: auto; }
.cure-track { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.cure-steps { display: flex; gap: 6px; margin-top: 10px; }
.cure-steps i {
  flex: 1; height: 5px; border-radius: 999px; background: var(--line);
  position: relative; overflow: hidden;
}
.cure-steps i::after { content: ""; position: absolute; inset: 0; background: rgba(14, 27, 34, .4); border-radius: inherit; }
.cure-steps i:nth-child(2)::after { background: linear-gradient(90deg, var(--uv), var(--uv-lit)); }
.cure-labels { display: flex; justify-content: space-between; margin-top: 8px; }
.cure-labels span { font-family: var(--font-mono); font-weight: 600; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--etchc); }
.cure-labels .uv { color: var(--uv); }

/* ── the calibration bay: the page goes dark where the work does ──────── */
.night {
  position: relative; color: var(--night-ink);
  background:
    radial-gradient(90% 70% at 82% 0%, rgba(77, 159, 255, .1), transparent 55%),
    radial-gradient(70% 55% at 10% 100%, rgba(86, 70, 196, .12), transparent 60%),
    linear-gradient(168deg, var(--night-2), var(--night) 60%);
  overflow: clip;
}
.night .t-h2, .night .t-h3, .night .t-title { color: var(--night-ink); }
.night .t-lead, .night .t-body, .night .t-small, .night .t-fine { color: var(--night-ink-2); }
.night .t-strong { color: var(--night-ink); }
.night .textlink { color: var(--laser); text-decoration-color: rgba(77, 159, 255, .45); }
/* measured floor: faint laser grid, one direction of light */
.night::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    linear-gradient(rgba(77, 159, 255, .07) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(77, 159, 255, .05) 1px, transparent 1px) 0 0 / 56px 100%;
  -webkit-mask: radial-gradient(85% 80% at 50% 60%, #000, transparent 78%);
  mask: radial-gradient(85% 80% at 50% 60%, #000, transparent 78%);
}
.adas-grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.adas-fig svg { width: 100%; height: auto; }
.adas-points { display: grid; gap: 0; margin-top: 26px; }
.adas-points li { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--night-line); }
.adas-points li:last-child { border-bottom: 1px solid var(--night-line); }
.adas-points .t-num { color: var(--laser); font-size: 13px; padding-top: 2px; white-space: nowrap; }
.adas-points p { color: var(--night-ink-2); font-size: 14.5px; line-height: 1.55; }
.adas-points .t-strong { color: var(--night-ink); display: block; font-size: 15.5px; margin-bottom: 2px; }

/* the scanning laser: one measured line crossing the bay, slowly */
.scan-pane { position: relative; container-type: size; }
.scan-pane .scanline {
  position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(77, 159, 255, .9) 30%, #CFE4FF 50%, rgba(77, 159, 255, .9) 70%, transparent);
  filter: drop-shadow(0 0 8px rgba(77, 159, 255, .8));
  animation: scan 7s var(--ease) infinite;
  opacity: .8;
}
@keyframes scan { 0% { transform: translateY(8px); } 48% { transform: translateY(calc(100cqh - 10px)); } 52% { transform: translateY(calc(100cqh - 10px)); } 100% { transform: translateY(8px); } }
/* target brackets: the four measured corners */
.scan-pane .corner { position: absolute; width: 22px; height: 22px; z-index: 2; pointer-events: none; color: var(--laser); opacity: .9; }
.scan-pane .corner::before { content: ""; position: absolute; inset: 0; border: 2px solid currentColor; }
.scan-pane .corner--tl { top: 10px; left: 10px; } .scan-pane .corner--tl::before { border-right: 0; border-bottom: 0; }
.scan-pane .corner--tr { top: 10px; right: 10px; } .scan-pane .corner--tr::before { border-left: 0; border-bottom: 0; }
.scan-pane .corner--bl { bottom: 10px; left: 10px; } .scan-pane .corner--bl::before { border-right: 0; border-top: 0; }
.scan-pane .corner--br { bottom: 10px; right: 10px; } .scan-pane .corner--br::before { border-left: 0; border-top: 0; }

/* angled glass seams between the light world and the night bay */
.slash { position: relative; height: clamp(40px, 5vw, 72px); background: var(--paper); }
.slash::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, #0E1B3E, var(--night) 70%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.slash::after {
  content: ""; position: absolute; inset: 0;
  background: var(--beam-grad-soft);
  clip-path: polygon(0 calc(100% - 2px), 100% 0, 100% 3px, 0 100%);
}
.slash--out { transform: scaleY(-1) scaleX(-1); }

/* ── insurance / steps ────────────────────────────────────────────────── */
.claim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); counter-reset: step; }
.claim-step { padding: clamp(20px, 2.4vw, 28px); position: relative; }
.claim-step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .12em; color: var(--edge-deep);
}
.claim-step .t-title { margin-top: 10px; }
.claim-step .t-body { margin-top: 8px; font-size: 15px; }
.rights-note {
  margin-top: var(--s5); padding: 18px 22px;
  border-left: 3px solid var(--edge);
  background: var(--edge-tint); border-radius: 0 var(--r-card) var(--r-card) 0;
}
.rights-note p { font-size: 15px; color: var(--ink); }

/* ── route board: where the vans are, like the whiteboard by the bay ──── */
.route-board { padding: clamp(20px, 2.6vw, 30px); }
.route-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.route-rows { margin-top: 18px; display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.route-row {
  display: grid; grid-template-columns: 92px 1fr auto; gap: var(--s4); align-items: center;
  padding: 13px 4px; background: var(--white);
}
.route-row .when { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; color: var(--ink); }
.route-row .where { font-size: 14.5px; color: var(--ink-2); }
.route-row .where .t-strong { font-size: 15px; }
.route-row { transition: background .2s var(--ease), transform .2s var(--ease); }
.route-row:hover { background: linear-gradient(90deg, rgba(30, 123, 255, .06), transparent 70%); transform: translateX(3px); }
.slots {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: rgba(18, 87, 196, .1); color: var(--edge-deep);
  box-shadow: inset 0 0 0 1px rgba(30, 123, 255, .18);
}
.slots:not(.slots--out):not(.slots--low)::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--edge-lit);
  box-shadow: 0 0 8px 1px rgba(30, 123, 255, .7);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }
.slots--low { background: rgba(143, 84, 6, .1); color: var(--amber); }
.slots--out { background: rgba(14, 27, 34, .07); color: var(--ink-2); }
.route-foot { margin-top: 14px; }

/* ── reviews ──────────────────────────────────────────────────────────── */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.review { padding: clamp(20px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 12px; transition: transform .35s var(--ease); }
.review::after {
  content: "\201C"; position: absolute; top: -6px; right: 18px; z-index: 0;
  font-family: Georgia, serif; font-size: 110px; line-height: 1; pointer-events: none;
  background: linear-gradient(160deg, rgba(30, 123, 255, .22), transparent 75%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.review:hover { transform: perspective(900px) rotateX(1.6deg) translateY(-3px); }
.stars { display: inline-flex; gap: 3px; color: var(--edge); filter: drop-shadow(0 2px 8px rgba(30, 123, 255, .35)); }
.review blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); flex: 1; }
.review figcaption { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.review figcaption .t-strong { font-size: 14px; }

/* ── quote form ───────────────────────────────────────────────────────── */
.form-card { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: var(--s5); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 620; font-size: 13.5px; }
.field .hint { font-size: 12px; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(14, 27, 34, .2);
  background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--edge);
  box-shadow: 0 0 0 3px rgba(18, 87, 196, .16), inset 1px 1px 0 rgba(255, 255, 255, .8);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(58, 78, 87, .55); }
/* which glass? — pick a pane on the car itself */
.glasspick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.glasspick label {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid rgba(14, 27, 34, .18);
  border-radius: 10px; background: var(--white);
  font-size: 14px; font-weight: 560; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.glasspick label:hover { border-color: var(--edge); }
.glasspick input { accent-color: var(--edge); width: 16px; height: 16px; }
.glasspick label:has(input:checked) { border-color: var(--edge); background: var(--edge-tint); }
.checkline { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.checkline input { margin-top: 3px; accent-color: var(--edge); }

/* ── comparison tables (OEM/OEE, static/dynamic) ──────────────────────── */
.spec-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec-table caption { text-align: left; padding-bottom: 12px; }
.spec-table th {
  text-align: left; font-family: var(--font-mono); font-weight: 600; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--etchc);
  padding: 10px 14px; border-bottom: 1.5px solid var(--ink);
}
.spec-table td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink-2); }
.spec-table td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.spec-table tr:nth-child(even) td { background: rgba(233, 239, 243, .5); }

/* ── laminate cross-section rows ──────────────────────────────────────── */
.lam-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.lam-fig svg { width: 100%; height: auto; }
.fact-rows { display: grid; }
.fact-rows > div { display: grid; grid-template-columns: 118px 1fr; gap: var(--s4); padding: 16px 0; border-top: 1px solid var(--line); }
.fact-rows > div:last-child { border-bottom: 1px solid var(--line); }
.fact-rows .t-num { font-size: 15px; color: var(--edge-deep); }
.fact-rows p { font-size: 15px; color: var(--ink-2); }
.fact-rows .t-strong { display: block; font-size: 15.5px; }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: clip; }
.cta-pane { padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: center; }
.cta-pane .t-h2 { margin-top: 12px; }
.cta-pane .t-lead { margin-top: 12px; }
.cta-side { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }
.cta-side .btn { align-self: stretch; justify-content: center; }

/* ── footer ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--night); color: var(--night-ink); padding: clamp(48px, 6vw, 72px) 0 max(28px, env(safe-area-inset-bottom)); }
.footer-cols { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--s6); }
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 300px; }
.footer-brand .t-small, .site-footer .t-small { color: var(--night-ink-2); }
.footer-tel { font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--laser); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13.5px; color: var(--night-ink-2); }
.footer-col a:hover { color: var(--night-ink); }
.footer-legal { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--night-line); display: flex; flex-direction: column; gap: 14px; }
.site-footer .t-fine { color: rgba(166, 181, 206, .8); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.footer-credit { color: var(--laser) !important; font-weight: 600; }
/* the bug: every windshield carries its etched monogram; so does the site */
.bug {
  display: inline-grid; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--night-line); border-radius: 6px; width: fit-content;
  font-family: var(--font-mono); font-weight: 600; font-size: 8.5px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(166, 181, 206, .75);
}
.bug span:first-child { color: var(--night-ink); font-size: 10px; }

/* ── page hero (subpages) ─────────────────────────────────────────────── */
.page-hero { position: relative; overflow: clip; padding-block: clamp(48px, 6.5vw, 84px) clamp(40px, 5vw, 64px); }
.page-hero .t-display { font-size: clamp(34px, 4.6vw, 56px); margin-top: 14px; }
.page-hero .t-lead { margin-top: 16px; max-width: 62ch; }
.page-hero .hero-ctas { margin-top: 26px; }
.crumbs { display: flex; gap: 8px; font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--etchc); }
.crumbs a:hover { color: var(--ink); }

/* night-page variants (the ADAS page works in the dark, so it reads dark) */
.night .crumbs { color: rgba(231, 237, 246, .62); }
.night .crumbs a:hover { color: var(--night-ink); }
.night .etch { color: rgba(231, 237, 246, .66); }
.night .etch::before { background: var(--laser); }
.night .t-num { color: var(--laser); }
.night .fact-rows > div { border-color: var(--night-line); }
.night .fact-rows p { color: var(--night-ink-2); }
.night .fact-rows .t-strong { color: var(--night-ink); }
.night .spec-table th { color: rgba(231, 237, 246, .66); border-bottom-color: var(--night-ink); }
.night .spec-table td { color: var(--night-ink-2); border-bottom-color: var(--night-line); }
.night .spec-table td:first-child { color: var(--night-ink); }
.night .spec-table tr:nth-child(even) td { background: rgba(231, 237, 246, .04); }
.night .rights-note { border-left-color: var(--laser); background: rgba(77, 159, 255, .08); border-radius: 0 var(--r-card) var(--r-card) 0; }
.night .rights-note p { color: var(--night-ink); }
.night .claim-step::before { color: var(--laser); }
.night .hero-call .t-num { color: var(--laser); }
.night .hero-call span:last-child { color: var(--night-ink-2); }
.night .hero-call:hover .t-num { color: #62E2B9; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-list { display: grid; gap: var(--s3); max-width: 820px; }
.faq-list details { border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--white); overflow: hidden; }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: 18px 22px; cursor: pointer; font-weight: 640; font-size: 15.5px;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--font-mono); font-size: 16px; color: var(--edge-deep); transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 22px 20px; font-size: 15px; color: var(--ink-2); max-width: 68ch; }

/* ── warranty / cert strips ───────────────────────────────────────────── */
.cert-strip { display: flex; flex-wrap: wrap; gap: var(--s3); }
.cert {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px;
  border: 1px dashed rgba(14, 27, 34, .26); border-radius: 10px;
  font-family: var(--font-mono); font-weight: 600; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2);
  background: rgba(255, 255, 255, .6);
}
.cert svg { color: var(--edge); }

/* ── misc ─────────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.stack-6 > * + * { margin-top: var(--s6); }
.mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); } .mt-7 { margin-top: var(--s7); }
.urgent { color: var(--amber); font-weight: 640; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stage { display: none; } /* the readouts' facts live in the service metas */
  .hero-photo {
    position: relative; inset: auto; height: 56vw; max-height: 380px;
    margin: 4px clamp(20px, 4vw, 36px) 0; pointer-events: auto;
    border-radius: var(--r-pane); overflow: hidden;
    border: 1px solid var(--line);
  }
  .hero-photo img { -webkit-mask-image: none; mask-image: none; object-position: 62% 30%; }
  .ph-grid { grid-template-columns: 1fr; }
  .adas-grid, .lam-grid, .repair-band, .cta-pane { grid-template-columns: 1fr; }
  .quarter-card { position: static; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .claim-grid, .review-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .site-nav { display: none; }
  .header-actions .btn { display: none; }
  .callbar { display: flex; }
  body { padding-bottom: 64px; }
  .svc { grid-column: span 12; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item { padding: 16px 14px; }
  .trust-item:nth-child(3) { border-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--night-line); }
  .claim-grid, .review-grid, .form-grid, .glasspick, .break-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .readout--tl { top: -10px; left: -6px; }
  .readout--br { bottom: -10px; right: -6px; }
  .route-row { grid-template-columns: 74px 1fr auto; }
  .footer-cols { grid-template-columns: 1fr; }
  .fact-rows > div { grid-template-columns: 96px 1fr; }
}

/* ── reduced motion: the site arrives already clear ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .frost-sheet, .hero-field::after, .scan-pane .scanline { display: none; }
  .slots::before { animation: none !important; }
  .review:hover { transform: none; }
  .js .reveal { opacity: 1; transform: none; }
  .js .pane.reveal.is-in { animation: none; }
  .btn::after, .pane--act:hover { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* print: quotes get printed and handed to insurers */
@media print {
  .site-header, .callbar, .frost-sheet, .cta-band, .site-footer { display: none; }
  body { background: #fff; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}