/* ════════════════════════════════════════════════════════════════════
   FJMedia · Royal Kings Auto Care · design system v3
   lane: redesign · rung: 5 (system + IA rebuild)
   direction: performance-modern — cool graphite ladder, gold as the only
   warm value on the page, Archivo (variable width) display, JetBrains Mono
   spec labels, hard 2–6px edges, wide photo bands.
   signature: the gold bracket notch (⌐, 1px, 18px arms) — rotating role.
   motion: hover micro + functional only. No scroll reveals, no GSAP.
   Page arrives present (restraint #1, G66).
   ════════════════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(button) { background: none; border: 0; cursor: pointer; }

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Surfaces — a cool graphite ladder. Everything is very slightly blue so
     the gold is the only warm value anywhere on the page. */
  --void:       #06070A;
  --carbon:     #0A0C11;
  --graphite:   #0F131A;
  --graphite-2: #141922;
  --steel:      #1A202B;
  --steel-2:    #212936;
  --edge:       #222836;
  --edge-2:     #2E3746;
  --edge-gold:  rgba(201, 162, 39, 0.30);

  /* Brand */
  --gold:       #C9A227;
  --gold-hi:    #EBD07A;
  --gold-lo:    #8C6F18;
  --gold-ink:   #080604;
  --gold-veil:  rgba(201, 162, 39, 0.09);
  --gold-wash:  rgba(201, 162, 39, 0.05);

  /* Text */
  --white:  #FFFFFF;
  --text:   #EAEBEF;
  --text-2: #B2B7C2;
  --text-3: #868C99;
  --text-4: #59606D;   /* decorative numerals only — never body copy */

  /* Semantic */
  --error:   #E5654E;
  --success: #57C08A;
  --on-gold: var(--gold-ink);

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Non-linear clamp multipliers — big type scales harder, because
     perceived size is multiplicative, not additive. */
  --fs-mono:  0.6875rem;
  --fs-meta:  0.8125rem;
  --fs-sm:    0.9375rem;
  --fs-base:  1.0625rem;
  --fs-lg:    1.1875rem;
  --fs-xl:    clamp(1.3rem,  1.14rem + 0.72vw, 1.7rem);
  --fs-2xl:   clamp(1.7rem,  1.36rem + 1.55vw, 2.5rem);
  --fs-3xl:   clamp(2.2rem,  1.62rem + 2.6vw,  3.5rem);
  --fs-4xl:   clamp(2.9rem,  1.9rem  + 4.4vw,  5.2rem);
  --fs-hero:  clamp(2.75rem, 1.5rem  + 5.4vw, 5.6rem);
  --fs-num:   clamp(2.4rem,  1.78rem + 2.8vw,  3.9rem);
  --fs-num-sm: clamp(1.7rem, 1.4rem  + 1.35vw, 2.4rem);

  --lh-body:    1.62;
  --lh-tight:   1.3;
  --lh-display: 1.03;
  --lh-hero:    0.9;

  --tr-mono:      0.18em;
  --tr-mono-wide: 0.3em;
  --tr-display:   -0.028em;
  --tr-hero:      -0.045em;

  /* Space */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* Section padding — a base that sections deliberately override.
     Heroes pad less (internal bands do the work); reading pads more. */
  --pad-section: clamp(3.5rem, 5.2vw, 5.5rem);
  --pad-section-tight: clamp(2.5rem, 3.6vw, 3.75rem);

  /* Hard edges. A 16px radius reads consumer-app; 2–6px reads engineered. */
  --r-0: 0px; --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-pill: 999px;

  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --sh-lift:  0 18px 44px -26px rgba(0, 0, 0, 0.92);
  --sh-panel: 0 44px 90px -46px rgba(0, 0, 0, 1);
  --sh-gold-ring: 0 0 0 2px var(--gold);

  --stroke:        1px solid var(--edge);
  --stroke-2:      1px solid var(--edge-2);
  --stroke-gold:   1px solid var(--edge-gold);
  --stroke-strong: 1px solid var(--gold);

  --dur-fast: 160ms; --dur-base: 300ms; --dur-slow: 520ms;
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emph: cubic-bezier(0.76, 0, 0.24, 1);

  --maxw: 1280px;
  --maxw-wide: 1560px;
  --formw: 760px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --nav-h: 68px;
}

/* ── Page ────────────────────────────────────────────────────────── */
body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--void);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}
body.nav-open { overflow: hidden; }

/* G65 atmosphere — two always-on depth devices, both fixed, static and
   pointer-transparent. Meaning: a dark detail bay lit from above. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(128% 116% at 50% 26%, transparent 48%, rgba(0, 0, 0, 0.42) 100%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.042; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--gold); color: var(--on-gold); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--steel-2); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-lo); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-xs); }

/* ── Layout primitives ───────────────────────────────────────────── */
.wrap  { width: 100%; max-width: var(--maxw);      margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
.wrap-wide { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
.sec   { position: relative; padding-block: var(--pad-section); scroll-margin-top: calc(var(--nav-h) + 20px); }
.sec-tight { padding-block: var(--pad-section-tight); }
.sec > * { position: relative; z-index: 1; }

/* Alternating tonal planes (G65a) */
.band       { background: var(--carbon); border-block: var(--stroke); }
.band-deep  { background: linear-gradient(180deg, var(--carbon), var(--void)); }

/* Per-section light pool — the bay lamp. One per section, never two. */
.pool::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(70% 52% at 22% 0%, var(--gold-veil), transparent 62%);
}
.pool-r::before { background: radial-gradient(64% 50% at 82% 4%, var(--gold-veil), transparent 62%); }

/* Grid children must shrink below content min-width or long tokens blow
   the track past the viewport at 320px (G27). */
.grid > *, [class*='cols-'] > * { min-width: 0; }

/* ── Type roles ──────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--display); text-wrap: balance; font-weight: 700; }

.kicker {
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: var(--tr-mono-wide); text-transform: uppercase;
  color: var(--text-3); display: block; margin-bottom: var(--s-4);
}
.kicker-gold { color: var(--gold); }

/* Signature detail — the bracket notch. Rotating role across the site:
   section headers, featured package, active control, photo plates,
   breadcrumb, hero spec strip. Always 1px, always 18px arms. */
.bkt { position: relative; }
.bkt::before {
  content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px;
  border-top: 1px solid var(--gold); border-left: 1px solid var(--gold);
  pointer-events: none;
}
.bkt-br::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold);
  pointer-events: none;
}
.bkt-inset::before { top: -1px; left: -1px; }

/* Section header — index rule + heading + right-aligned meta, hairline under.
   The index is wayfinding, not decoration. */
.sec-head { margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.sec-head-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  padding-bottom: var(--s-5); border-bottom: var(--stroke);
}
.sec-head h2 {
  font-size: var(--fs-3xl); line-height: var(--lh-display);
  letter-spacing: var(--tr-display); font-weight: 800;
  font-stretch: 112%;
}
.sec-head-meta {
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
.sec-lede { max-width: 58ch; color: var(--text-2); margin-top: var(--s-5); font-size: var(--fs-lg); }

.prose { max-width: 65ch; color: var(--text-2); }
.prose p + p { margin-top: var(--s-4); }
.prose strong { color: var(--text); font-weight: 600; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.gold { color: var(--gold); }

/* Inline icons size to their text, never to the viewport. */
.ic { width: 1.05em; height: 1.05em; flex: none; display: inline-block; vertical-align: -0.14em; }

/* ── Buttons — all eight states (GI1) ────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 48px; padding: var(--s-3) var(--s-6);
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 700;
  letter-spacing: var(--tr-mono); text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-sm);
  outline: 2px solid transparent; outline-offset: 2px;
  transition: background-color var(--dur-fast) var(--ease-std),
              border-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              transform var(--dur-fast) var(--ease-std);
}
.btn .ic { width: 15px; height: 15px; }

.btn-primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn-primary:hover  { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--edge-2); }
.btn-ghost:hover  { border-color: var(--gold); color: var(--gold); }
.btn-ghost:active { transform: translateY(1px); }

.btn-quiet { padding-inline: 0; color: var(--gold); min-height: 44px; }
.btn-quiet:hover { color: var(--gold-hi); }

.btn:focus-visible { outline-color: var(--gold); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[data-state='loading'] { cursor: progress; }
.btn[data-state='loading'] .btn-spin { display: inline-block; }
.btn-spin {
  display: none; width: 14px; height: 14px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: var(--r-pill);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn[data-state='success'] { background: var(--success); border-color: var(--success); color: var(--gold-ink); }
.btn[data-state='error']   { background: var(--error);   border-color: var(--error);   color: var(--white); }

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-std),
              border-color var(--dur-base) var(--ease-std);
}
/* NOTE: no backdrop-filter here. It creates a containing block for the
   drawer's position:fixed descendants — the exact bug that threw the
   mobile drawer's top links off-screen in July. The drawer carries its
   own blur instead. */
.nav.scrolled { background: color-mix(in srgb, var(--void) 96%, transparent); border-bottom-color: var(--edge); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); width: 100%; }

.brand { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; }
.brand img { width: 34px; height: 34px; border-radius: var(--r-xs); object-fit: cover; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand-txt b { font-size: var(--fs-sm); font-weight: 800; letter-spacing: -0.01em; font-stretch: 108%; }
.brand-txt span { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: var(--tr-mono-wide); text-transform: uppercase; color: var(--text-3); }

.nav-links { display: flex; align-items: center; gap: var(--s-2); }
.nav-links a:not(.btn) {
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--text-2); white-space: nowrap;
  padding: var(--s-3) var(--s-3); min-height: 44px; display: inline-flex; align-items: center;
  transition: color var(--dur-fast) var(--ease-std);
}
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-links a:not(.btn)[aria-current='page'] { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 7px; text-decoration-thickness: 1px; }
.nav-cta { margin-left: var(--s-3); }

.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: var(--stroke-2); border-radius: var(--r-sm); color: var(--text);
}
.nav-toggle svg { width: 18px; height: 18px; }

.drawer {
  position: fixed; inset: 0; z-index: 70; height: 100dvh;
  background: color-mix(in srgb, var(--void) 96%, transparent);
  backdrop-filter: blur(16px);
  display: none; flex-direction: column;
  padding: var(--s-5) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom));
}
.drawer[data-open='true'] { display: flex; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: var(--s-7); }
.drawer nav { display: flex; flex-direction: column; }
/* On a short screen (iPhone SE, 568px) the fixed-height column ran out of room
   and the phone number at the bottom became unreachable — no scroll, no
   overflow, just gone. Let the link list scroll and keep the footer pinned. */
.drawer nav { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.drawer nav a {
  font-family: var(--display); font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: var(--tr-display); padding: var(--s-4) 0;
  border-bottom: var(--stroke); color: var(--text);
  transition: color var(--dur-fast) var(--ease-std);
}
.drawer nav a:hover, .drawer nav a[aria-current='page'] { color: var(--gold); }
.drawer-foot { margin-top: auto; display: grid; gap: var(--s-3); }
.drawer-foot .btn { width: 100%; }
.drawer-call {
  font-family: var(--mono); font-size: var(--fs-meta); color: var(--text-3);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
}

@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ── Theme switcher (REVIEW TOOL — remove before launch) ──────────────
   Shipped only while THEME_SWITCHER is true in src/data.mjs. */
.theme-sw { display: inline-flex; border: var(--stroke); border-radius: var(--r-sm); overflow: hidden; margin-left: var(--s-3); flex: none; }
.theme-sw-btn {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: var(--s-2) var(--s-3); min-height: 30px; color: var(--text-3); background: var(--graphite);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.theme-sw-btn + .theme-sw-btn { border-left: var(--stroke); }
.theme-sw-btn:hover { color: var(--text); background: var(--steel); }
.theme-sw-btn[aria-pressed='true'] { color: var(--gold); background: var(--steel-2); }
.theme-sw-btn:focus-visible { outline-offset: -3px; }
.theme-sw-wide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 var(--s-3); }
.theme-sw-wide .theme-sw-btn { min-height: 44px; }
/* The nav runs out of room before the drawer breakpoint does. */
@media (max-width: 1290px) and (min-width: 941px) { .nav-links .theme-sw { display: none; } }

/* ── Hero ────────────────────────────────────────────────────────── */
/* A composition of horizontal bands separated by hairlines, not a
   headline floating in space. Never 100vh (restraint #29 / G46). */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: 0; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(74% 58% at 78% 8%, rgba(201, 162, 39, 0.10), transparent 60%),
    radial-gradient(58% 46% at 10% 96%, rgba(120, 148, 200, 0.05), transparent 62%),
    linear-gradient(180deg, var(--carbon) 0%, var(--void) 72%);
}
.hero-inner { position: relative; z-index: 1; }
.hero-crumb {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono-wide);
  text-transform: uppercase; color: var(--text-3);
  padding-bottom: var(--s-5); border-bottom: var(--stroke);
}
.hero-crumb .dot { width: 5px; height: 5px; background: var(--gold); border-radius: var(--r-pill); flex: none; }

.hero-h1 {
  font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--tr-hero);
  font-weight: 800; font-stretch: 116%; text-transform: uppercase;
  margin-block: clamp(2rem, 4vw, 3.5rem) 0;
  overflow-wrap: anywhere;
}
.hero-h1 em, .sec-head h2 em, .cta h2 em { font-style: normal; color: inherit; }
/* Homepage brand lockup: 'Auto Care' is gold, matching the live hero and the
   logo's own two-tone wordmark. */
.hero-h1 em:only-of-type:not(:first-child) { color: inherit; }
#h1 em { color: var(--gold); }

/* 1.25fr 1fr — the lead column carries the sentence, the support column
   carries the action. Never 1fr 1fr (rubric axis 7). */
.hero-row {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: end; margin-top: clamp(2rem, 3.5vw, 3rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.hero-sub { color: var(--text-2); font-size: var(--fs-lg); max-width: 46ch; }
.hero-act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.hero-act-row { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.hero-call {
  font-family: var(--mono); font-size: var(--fs-meta); color: var(--text-2);
  letter-spacing: 0.06em; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-std);
}
.hero-call:hover { color: var(--gold); }
.hero-fine { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); }

/* Spec strip — edge-to-edge typographic rule, not a row of cards.
   border-left/right:0 is deliberate. */
.spec {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--stroke); border-bottom: var(--stroke);
}
.spec-cell { padding: var(--s-6) var(--s-5) var(--s-6) 0; position: relative; }
.spec-cell + .spec-cell { padding-left: var(--s-5); border-left: var(--stroke); }
.spec-k { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: var(--s-3); }
.spec-v { font-family: var(--display); font-size: var(--fs-num-sm); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-stretch: 110%; }
.spec-v small { display: block; font-family: var(--sans); font-size: var(--fs-meta); font-weight: 400; letter-spacing: 0; color: var(--text-2); margin-top: var(--s-2); text-transform: none; }

@media (max-width: 860px) {
  .hero-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-cell:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .spec-cell:nth-child(n + 3) { border-top: var(--stroke); }
}

/* Mobile corrections found in the 390 crops. */
@media (max-width: 600px) {
  /* The crumb collapsed into a ragged three-line block with the slash
     stranded mid-column. Stack it and drop the separator. */
  .hero-crumb { flex-wrap: wrap; row-gap: var(--s-2); }
  .hero-crumb .sep { display: none; }
  .hero-crumb > span:last-child { flex-basis: 100%; padding-left: 13px; }
  /* 40-character tracked basis labels ran the full gutter-to-gutter width. */
  .mrow-basis { letter-spacing: 0.06em; white-space: normal; }
  /* Keep the badge clear of the card above once the rows stack. */
  .pkg-featured { margin-top: var(--s-3); }
}
/* The hero's deliberate two-line break is a desktop composition; on a phone
   it strands a one-word line. Let the text wrap naturally there. */
.br-desk { display: none; }
@media (min-width: 760px) { .br-desk { display: inline; } }

/* A slogan is a sentence, not a slogan-shaped shout. At 68 characters the
   uppercase wide treatment becomes a wall of three full-bleed lines, so the
   homepage H1 drops the caps, eases the tracking and takes a smaller clamp —
   it still dominates the fold without bellowing. */
.hero-h1-slogan {
  text-transform: none;
  font-stretch: 104%;
  letter-spacing: -0.022em;
  line-height: 1.04;
  font-size: clamp(2.1rem, 1.25rem + 3.5vw, 3.9rem);
  max-width: 30ch;
}

/* The tagline line the live hero carries between the brand H1 and the sub.
   Italic display, gold — the live site set it apart from both, and it is the
   half of the motto the sub does not carry. */
.hero-tagline {
  font-family: var(--display);
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gold);
  margin-top: var(--s-5);
}

/* ── Photo plates ────────────────────────────────────────────────── */
/* Where real photography goes. Until it lands these render as a dark
   panel with light raking across it — a material, not a placeholder.
   Drop an <img> inside and it covers. Shot list: PHOTOS.md */
.plate {
  display: block; position: relative; overflow: hidden; background: var(--graphite);
  border: var(--stroke); border-radius: var(--r-xs);
  background-image:
    linear-gradient(116deg, transparent 30%, rgba(255, 255, 255, 0.06) 46%, rgba(255, 255, 255, 0.014) 56%, transparent 70%),
    radial-gradient(118% 88% at 16% 0%, rgba(201, 162, 39, 0.10), transparent 58%),
    linear-gradient(168deg, var(--steel) 0%, var(--void) 88%);
}
.plate > img { width: 100%; height: 100%; object-fit: cover; }
.plate-tall  { aspect-ratio: 3 / 4; }
.plate-wide  { aspect-ratio: 16 / 9; }
.plate-square { aspect-ratio: 1 / 1; }
.plate-band  { aspect-ratio: 21 / 9; }
@media (max-width: 720px) { .plate-band { aspect-ratio: 4 / 3; } }

/* Vary the rake so a row of plates does not read as one panel repeated. */
.cols-4 > :nth-child(2) .plate, .cols-3 > :nth-child(2) .plate, .cols-2 > :nth-child(2) .plate {
  background-image:
    linear-gradient(76deg, transparent 34%, rgba(255, 255, 255, 0.05) 50%, transparent 66%),
    radial-gradient(110% 84% at 82% 6%, rgba(201, 162, 39, 0.09), transparent 58%),
    linear-gradient(196deg, var(--steel) 0%, var(--void) 86%);
}
.cols-4 > :nth-child(3) .plate, .cols-3 > :nth-child(3) .plate {
  background-image:
    linear-gradient(148deg, transparent 26%, rgba(255, 255, 255, 0.045) 42%, transparent 62%),
    radial-gradient(120% 90% at 44% 100%, rgba(201, 162, 39, 0.08), transparent 60%),
    linear-gradient(154deg, var(--graphite-2) 0%, var(--void) 84%);
}
.cols-4 > :nth-child(4) .plate {
  background-image:
    linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.055) 52%, transparent 68%),
    radial-gradient(104% 80% at 12% 92%, rgba(201, 162, 39, 0.07), transparent 56%),
    linear-gradient(182deg, var(--steel) 0%, var(--carbon) 90%);
}

/* ── Cards ───────────────────────────────────────────────────────── */
/* Dark-UI hierarchy order: (1) tonal step, (2) hairline, (3) shadow —
   and the shadow is reserved for the one card that must lift. */
.card {
  position: relative; padding: var(--s-6); border: var(--stroke); border-radius: var(--r-xs);
  background: linear-gradient(168deg, var(--graphite-2), var(--graphite));
  box-shadow: var(--sh-inset);
  transition: border-color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std);
}
.card-flat { background: var(--graphite); }
a.card:hover, .card-hover:hover { border-color: var(--edge-gold); }
.card h3 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em; margin-bottom: var(--s-3); }
.card p { color: var(--text-2); font-size: var(--fs-sm); }

/* ── Packages ────────────────────────────────────────────────────── */
/* Horizontal rows, not three equal columns. The price is a large tabular
   numeral on the left; the includes list carries the right. */
.pkg-control {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: end; margin-bottom: var(--s-7);
}
@media (max-width: 860px) { .pkg-control { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.pkgs { display: grid; gap: var(--s-4); }
.pkg {
  position: relative; display: grid; grid-template-columns: minmax(200px, 0.62fr) minmax(0, 1.55fr) auto;
  gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: var(--stroke); border-radius: var(--r-xs);
  background: linear-gradient(140deg, var(--graphite-2), var(--graphite) 62%);
  transition: border-color var(--dur-base) var(--ease-std);
}
.pkg:hover { border-color: var(--edge-2); }
.pkg-featured {
  border-color: var(--edge-gold);
  background: linear-gradient(140deg, var(--steel), var(--graphite) 66%);
  box-shadow: var(--sh-lift);      /* the only shadow on the page — that is why it reads featured */
}
.pkg-name { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono-wide); text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: var(--s-3); }
.pkg-featured .pkg-name { color: var(--gold); }
.pkg-price { font-family: var(--display); font-size: var(--fs-num); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; font-stretch: 108%; display: flex; align-items: baseline; gap: 0.1em; }
.pkg-price .cur { font-size: 0.44em; font-weight: 600; color: var(--text-3); transform: translateY(-0.55em); }
.pkg-meta { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); margin-top: var(--s-3); }
.pkg-line { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.pkg-inc { display: grid; gap: var(--s-2); }
.pkg-inc li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.pkg-inc li::before { content: ''; width: 5px; height: 5px; margin-top: 0.62em; flex: none; background: var(--text-4); transform: rotate(45deg); }
.pkg-featured .pkg-inc li::before { background: var(--gold); }
.pkg-badge {
  position: absolute; top: 0; right: clamp(1.5rem, 3vw, 2.25rem); transform: translateY(-50%);
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 700;
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  background: var(--gold); color: var(--on-gold); padding: var(--s-1) var(--s-3); border-radius: var(--r-xs);
}
@media (max-width: 900px) {
  .pkg { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
  .pkg .btn { width: 100%; }
}

/* ── Segmented control (vehicle class) ───────────────────────────── */
/* Vertical stack below 640px — never an uneven 2 + 1 wrap (G32c). */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--stroke); border-radius: var(--r-sm); overflow: hidden; }
.seg-btn {
  padding: var(--s-3) var(--s-2); min-height: 56px;
  font-family: var(--mono); text-transform: uppercase; color: var(--text-2); background: var(--graphite);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center;
  transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.seg-l { font-size: 0.625rem; letter-spacing: 0.09em; white-space: nowrap; font-weight: 500; }
.seg-s { font-size: var(--fs-mono); letter-spacing: 0.04em; color: var(--text-3); }
.seg-btn[aria-pressed='true'] .seg-s { color: var(--gold); }
.seg-btn + .seg-btn { border-left: var(--stroke); }
.seg-btn:hover { background: var(--steel); color: var(--text); }
.seg-btn[aria-pressed='true'] { background: var(--steel-2); color: var(--gold); font-weight: 700; box-shadow: inset 0 -2px 0 var(--gold); }
.seg-btn:focus-visible { outline-offset: -3px; }
.seg-note { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); margin-top: var(--s-3); min-height: 1lh; }
@media (max-width: 640px) {
  .seg { grid-template-columns: minmax(0, 1fr); }
  .seg-btn + .seg-btn { border-left: 0; border-top: var(--stroke); }
}

/* ── Process ─────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: var(--stroke); }
.step { padding: var(--s-6) var(--s-5) var(--s-6) 0; }
.step + .step { padding-left: var(--s-5); border-left: var(--stroke); }
.step-n { font-family: var(--display); font-size: var(--fs-num-sm); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--text-4); display: block; margin-bottom: var(--s-4); font-stretch: 112%; }
.step h3 { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--s-3); letter-spacing: -0.01em; }
.step p { color: var(--text-2); font-size: var(--fs-sm); }
.step:first-child .step-n { color: var(--gold); }
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .step:nth-child(n + 3) { border-top: var(--stroke); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { padding-left: 0 !important; border-left: 0 !important; border-top: var(--stroke); }
  .step:first-child { border-top: 0; }
}

/* ── Capability matrix (add-ons) ─────────────────────────────────── */
.matrix { border-top: var(--stroke); }
.mrow {
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.9fr) auto;
  gap: var(--s-5); align-items: baseline; padding: var(--s-5) 0; border-bottom: var(--stroke);
  transition: background-color var(--dur-fast) var(--ease-std);
}
.mrow:hover { background: var(--gold-wash); }
.mrow-name { font-weight: 700; font-size: var(--fs-base); letter-spacing: -0.012em; }
.mrow-what { color: var(--text-2); font-size: var(--fs-sm); }
.mrow-price { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 500; color: var(--gold); white-space: nowrap; text-align: right; }
.mrow-basis { display: block; font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); margin-top: var(--s-2); font-weight: 400; }
.mrow-2 { grid-template-columns: minmax(0, 0.78fr) minmax(0, 2.2fr); }
@media (max-width: 820px) {
  .mrow { grid-template-columns: minmax(0, 1fr) auto; }
  .mrow-2 { grid-template-columns: minmax(0, 1fr); }
  .mrow-what { grid-column: 1 / -1; }
  .mrow-price { text-align: right; }
}

/* ── Comparison table ────────────────────────────────────────────── */
.cmp { width: 100%; border-collapse: collapse; min-width: 600px; }
.cmp th, .cmp td { text-align: left; padding: var(--s-4) var(--s-5); border-bottom: var(--stroke); vertical-align: top; font-size: var(--fs-sm); }
.cmp thead th { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); border-bottom: var(--stroke-2); font-weight: 500; }
.cmp thead th:last-child { color: var(--gold); }
.cmp tbody th { font-weight: 500; color: var(--text-3); width: 30%; }
.cmp td { color: var(--text-2); }
.cmp td:last-child { color: var(--text); background: var(--gold-wash); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

/* ── Before / after slider ───────────────────────────────────────── */
.ba-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: var(--stroke); border-radius: var(--r-xs); }
.ba-stage > .ba-before, .ba-stage img, .ba-stage .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }
/* The overlay is clipped, not resized. A width-based clip has to stretch the
   inner image to compensate, which means the two halves never line up on a
   real photograph — flat test colours hide it, a car does not. clip-path
   keeps both images identical in size and position, so the seam is exact.
   inset() clips from the LEFT edge, so the after image occupies everything
   to the RIGHT of the handle, matching the labels. */
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 1px; background: var(--gold); pointer-events: none; }
.ba-grip {
  position: absolute; top: 50%; left: var(--pos, 50%); width: 40px; height: 40px;
  transform: translate(-50%, -50%); border: 1px solid var(--gold); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--void) 70%, transparent); pointer-events: none;
}
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-stage:has(.ba-range:focus-visible) .ba-grip { box-shadow: 0 0 0 2px var(--gold); }
.ba figcaption { margin-top: var(--s-3); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); max-width: 68ch; }
/* ── THE STAGE: before and after in one box ───────────────────────
   Side-by-side only compares when both frames hold the same view, and these do
   not — the pairs are hand-held, framed differently. Swapping in place keeps
   the frame still so only the contents change, which is what lets the eye do
   the differencing. It also halves the footprint.

   Radios drive it, so there is no JavaScript: labels are natively focusable,
   arrow keys move between them, and it works with JS off. */
.ba-fig { flex: 0 1 auto; max-width: 100%; min-width: 0; }
.ba-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* NOT .ba-stage — that class belongs to the drag-slider, whose CSS absolutely
   positions every image inside it. Reusing the name silently pulled my grid
   items out of flow and stacked them on top of each other. */
.ba-box {
  position: relative;
  height: clamp(232px, 30vw, 340px);
  aspect-ratio: calc(var(--ar, 0.75) * var(--cols, 1));
  max-width: 100%;
  border: var(--stroke); border-radius: var(--r-xs); overflow: hidden;
  background: var(--graphite);
}
.ba-state {
  position: absolute; inset: 0;
  display: flex; justify-content: center; align-items: stretch;
  gap: 1px; background: transparent;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-std);
}
.ba-state img { height: 100%; width: auto; max-width: 100%; aspect-ratio: var(--ar, 3 / 4); object-fit: cover; display: block; }

/* The checked radio picks the state. Two rules, no script. */
.ba-radio:nth-of-type(1):checked ~ .ba-box .is-a,
.ba-radio:nth-of-type(2):checked ~ .ba-box .is-b { opacity: 1; visibility: visible; }

/* The tabs are the site's own segmented control, so the gallery speaks the same
   language as the vehicle-class picker on /pricing. */
.ba-tabs { display: inline-flex; margin-top: var(--s-4); border: var(--stroke); border-radius: var(--r-xs); overflow: hidden; }
.ba-tab {
  cursor: pointer; padding: var(--s-3) var(--s-5);
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--text-2); background: var(--graphite);
  transition: color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std);
}
.ba-tab + .ba-tab { border-left: 1px solid var(--edge); }
.ba-tab:hover { color: var(--text); background: var(--steel); }
.ba-radio:nth-of-type(2):checked ~ .ba-tabs .ba-tab:first-child,
.ba-radio:nth-of-type(1):checked ~ .ba-tabs .ba-tab:last-child {
  background: var(--gold); color: var(--on-gold); font-weight: 700;
}
/* The focus ring has to land on the LABEL, because the input it controls is
   visually hidden — without this the control is keyboard-operable but invisible
   to a keyboard user, which is the same as not being operable. */
.ba-radio:focus-visible ~ .ba-tabs .ba-tab { outline: 2px solid var(--gold); outline-offset: 2px; }

.ba-fig figcaption {
  margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); max-width: 46ch;
}
@media (prefers-reduced-motion: reduce) {
  .ba-state { transition-duration: 0.01ms; }
}

/* This had no styling at all, so it painted the browser's default ▶ marker
   next to Archivo type. Same segmented-control language as .ba-tab, and a
   44px target because it is the control that reveals the other photos. */
.ba-more > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px;
  margin-top: var(--s-4); padding: 0 var(--s-4) 0 0;
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-2);
  transition: color var(--dur-fast) var(--ease-std);
}
.ba-more > summary::-webkit-details-marker { display: none; }
.ba-more > summary::before {
  content: ''; width: 8px; height: 8px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast) var(--ease-std);
}
.ba-more[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.ba-more > summary:hover { color: var(--gold); }
.ba-more > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ba-more[open] > .ba-list { margin-top: var(--s-5); }
@media (prefers-reduced-motion: reduce) { .ba-more > summary::before { transition: none; } }

/* Grouped by vehicle. Seven comparisons in a row read as seven unrelated
   things; three headed groups read as three cars, which is what a customer is
   actually counting. The heading is a quiet mono rule, not a section header —
   it organises the strip without competing with the page's own headings. */
.ba-job + .ba-job { margin-top: clamp(2rem, 4vw, 3.25rem); }
.ba-job-h {
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 600;
  letter-spacing: var(--tr-mono-wide); text-transform: uppercase;
  color: var(--text-3); margin-bottom: var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
}
.ba-job-h::after {
  content: ''; flex: 1; height: 1px; background: var(--edge);
}

.ba-strip-fig { flex: 0 1 auto; max-width: 100%; min-width: 0; }
.ba-strip-fig figcaption { max-width: 46ch; }

.ba-stage::before, .ba-stage::after {
  content: 'Before'; position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2;
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase;
  padding: var(--s-1) var(--s-3); background: color-mix(in srgb, var(--void) 92%, transparent); color: var(--text);
  border: var(--stroke); border-radius: var(--r-xs);
}
.ba-stage::after { content: 'After'; left: auto; right: var(--s-4); color: var(--gold); border-color: var(--edge-gold); }

/* Side-by-side before/after. The two halves share one hairline seam so the
   pair reads as a single object rather than two loose photos, and the labels
   sit in the frame corners the same way the slider's do — the two treatments
   have to look like siblings or the gallery reads as inconsistent. */
/* ── A GROUP: N before frames against M after frames ──────────────
   Not every job photographs 1:1. The rear of a truck can need two before
   frames — footwell and bench — against one wider after that shows both.
   The column is the unit, not the photograph: BEFORE always left, AFTER
   always right, however many frames sit inside each, so the reading order
   never changes from block to block. Frames within a column share the
   height evenly, which keeps two befores next to one after balanced instead
   of leaving a hole. */
/* The grid rows are driven by the taller column, so a single after frame
   stretches to meet two stacked befores rather than floating half-height. */
.ba-group .ba-dip-grid { align-items: stretch; }
@media (max-width: 620px) {
}

/* Portrait halves get very tall side by side on a phone, so they stack and
   the aspect opens up to something a thumb can actually read. */
@media (max-width: 620px) {
}
.ba figcaption { max-width: 68ch; }

/* Gallery layout */
/* The gallery was one comparison per row at full container width, so every
   comparison cost a whole screen: 8 screens on desktop and 14 on a phone for
   three cars, growing linearly with every job. Nobody scrolls fourteen screens
   of someone else's floor mats.

   The fix is to stop letting WIDTH drive the frames. The frame's HEIGHT is now
   the fixed dimension and its width follows from the photo's own aspect, so a
   comparison hugs its content instead of stretching to fill a row — and every
   comparison ends up the same height whether it holds two frames or three,
   which is what lets them tile into clean rows. */
.ba-list {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .work-grid { grid-template-columns: minmax(0, 1fr); } }
.work-tile { aspect-ratio: 4 / 3; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; }

/* ── Accordion (FAQ) ─────────────────────────────────────────────── */
.acc { border-top: var(--stroke); }
.acc details { border-bottom: var(--stroke); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0; min-height: 56px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--fs-base); letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-std);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--gold); }
.acc summary:focus-visible { outline-offset: -3px; }
.acc-ic { position: relative; width: 14px; height: 14px; flex: none; }
.acc-ic::before, .acc-ic::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--gold);
  transition: transform var(--dur-base) var(--ease-std);
}
.acc-ic::after { transform: rotate(90deg); }
.acc details[open] .acc-ic::after { transform: rotate(0deg); }
.acc-body { padding-bottom: var(--s-5); color: var(--text-2); max-width: 68ch; font-size: var(--fs-sm); }

/* ── Forms — GI1–GI7 ─────────────────────────────────────────────── */
.field { display: grid; gap: var(--s-2); }
.field label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); }
.field .req { color: var(--gold); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  background: var(--void); color: var(--text);
  border: 1px solid var(--edge-2);            /* 1px in EVERY state — geometry never shifts */
  border-radius: var(--r-sm);
  outline: 2px solid transparent; outline-offset: 1px;
  font-size: var(--fs-sm);
  transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { background: var(--graphite); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline-color: var(--gold); border-color: var(--gold-lo); }
.textarea { min-height: 7rem; resize: vertical; line-height: var(--lh-body); }
.select { appearance: none; padding-right: var(--s-8); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23868C99' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-4) center;
}
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--error); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.help { min-height: 1lh; font-size: var(--fs-mono); letter-spacing: 0.04em; color: var(--text-3); }
.help[data-error] { color: var(--error); display: flex; align-items: center; gap: var(--s-2); }
.help[data-error]::before { content: '!'; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border: 1px solid currentColor; border-radius: var(--r-pill); font-size: 9px; font-weight: 700; flex: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 680px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-rule { border: 0; border-top: var(--stroke); margin-block: var(--s-6); }

/* Add-on selectors — checkbox cards */
.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 680px) { .addons { grid-template-columns: minmax(0, 1fr); } }
.addon {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4);
  align-items: start; padding: var(--s-4); cursor: pointer;
  border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--graphite);
  transition: border-color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std);
}
.addon:hover { background: var(--graphite-2); border-color: var(--edge-2); }
.addon:has(input:checked), .addon.is-on { border-color: var(--gold); background: var(--gold-wash); }
.addon:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.addon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.addon-box { width: 17px; height: 17px; margin-top: 2px; border: 1px solid var(--edge-2); border-radius: var(--r-xs); flex: none; display: grid; place-items: center; transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std); }
.addon-box::after { content: ''; width: 8px; height: 4px; border-left: 1.6px solid var(--on-gold); border-bottom: 1.6px solid var(--on-gold); transform: rotate(-45deg) scale(0); transition: transform var(--dur-fast) var(--ease-std); }
.addon:has(input:checked) .addon-box, .addon.is-on .addon-box { background: var(--gold); border-color: var(--gold); }
.addon:has(input:checked) .addon-box::after, .addon.is-on .addon-box::after { transform: rotate(-45deg) scale(1); }
.addon-name { display: block; font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; }
.addon-price { display: block; font-family: var(--mono); font-size: var(--fs-mono); color: var(--gold); margin-top: var(--s-2); letter-spacing: 0.04em; }
.addon-basis { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); margin-top: var(--s-1); display: block; }

/* Estimate readout */
.estimate {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-5); border: var(--stroke-gold); border-radius: var(--r-sm); background: var(--gold-wash);
}
.estimate-k { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono-wide); text-transform: uppercase; color: var(--gold); }
.estimate-sub { font-size: var(--fs-mono); color: var(--text-3); margin-top: var(--s-2); letter-spacing: 0.04em; }
.estimate-v { font-family: var(--display); font-size: var(--fs-num-sm); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.notice { padding: var(--s-5); border: var(--stroke); border-radius: var(--r-sm); background: var(--graphite); font-size: var(--fs-sm); color: var(--text-2); }
.notice strong { color: var(--text); }

/* Success panel */
.sent { display: none; padding: clamp(2rem, 5vw, 3.5rem); border: var(--stroke-gold); border-radius: var(--r-xs); background: var(--graphite); text-align: center; }
.sent[data-visible='true'] { display: block; }
.sent h3 { font-size: var(--fs-2xl); letter-spacing: var(--tr-display); margin-bottom: var(--s-4); }
.sent p { color: var(--text-2); max-width: 52ch; margin-inline: auto; }
.sent p + p { margin-top: var(--s-4); }
.sent .btn { margin-top: var(--s-6); }
.sent-mark { width: 44px; height: 44px; margin: 0 auto var(--s-5); border: 1px solid var(--gold); border-radius: var(--r-pill); display: grid; place-items: center; color: var(--gold); }

/* ── Pullquote — the brand's own slogan, given display treatment ──── */
.pq { border-top: var(--stroke); border-bottom: var(--stroke); padding-block: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.pq p {
  font-family: var(--display); font-size: clamp(1.5rem, 1rem + 2.1vw, 2.6rem);
  font-weight: 700; line-height: 1.2; letter-spacing: var(--tr-display);
  font-stretch: 106%; text-wrap: balance; max-width: 34ch; margin-inline: auto;
}
.pq cite {
  display: block; margin-top: var(--s-5); font-family: var(--mono); font-style: normal;
  font-size: var(--fs-mono); letter-spacing: var(--tr-mono-wide); text-transform: uppercase; color: var(--text-3);
}

/* Footer lockup */
.foot-svc { display: block; margin-top: var(--s-3); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); }
.foot-slogan { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-4); max-width: 36ch; }

/* ── Contact tiles ───────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 620px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile { display: grid; gap: var(--s-2); padding: var(--s-5); border: var(--stroke); border-radius: var(--r-xs); background: var(--graphite); transition: border-color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std); }
a.tile:hover { border-color: var(--edge-gold); background: var(--graphite-2); }
.tile-k { display: flex; align-items: center; gap: var(--s-2); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); }
.tile-v { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.tile-n { font-size: var(--fs-meta); color: var(--text-2); }

/* ── Area list ───────────────────────────────────────────────────── */
.areas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.areas li { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); padding: var(--s-2) var(--s-3); border: var(--stroke); border-radius: var(--r-xs); background: var(--graphite); }

/* Standalone links carry a 24px pointer target (WCAG 2.5.8). Links inside
   running prose are exempt and deliberately left alone. */
.hero-call, .crumb a, .foot-bar a, .foot-list a, .spec-v a, .drawer-call, .hero-fine a, .notice a {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 24px;
}

/* The call links are the highest-intent taps on the site, and they were the
   same 24px as a footnote. 24px clears WCAG 2.5.8 AA and is fine for the dense
   navigational lists above; a phone number a customer is trying to hit on a
   phone gets the full 44px (G29). */
.hero-call, .drawer-call { min-height: 44px; }

/* ── Booking sidebar ─────────────────────────────────────────────
   This was an INLINE `position:sticky` on the <aside>. Inline styles outrank
   every stylesheet rule, so the `max-width:900px` query that collapses
   .split-follow to ONE column could not unstick it. Below 900px the aside and
   the form share a single column, and a sticky element is a POSITIONED one —
   so it painted on top of the form and stayed pinned there while the fields
   scrolled underneath it. On a phone the "What happens next" card sat over the
   date and time inputs with the form showing through behind it.

   Sticky only where there is a second column for it to sit beside. */
@media (min-width: 901px) {
  .book-aside { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }
}

/* ── Preferred-date calendar ─────────────────────────────────────
   `color-scheme: dark` is the whole fix for the native control: without it the
   browser paints its light-mode chrome, so the calendar icon renders as a dark
   glyph on this black input and disappears, and the native popup opens white
   against a black page. It stays on the input because mobile keeps using the
   native picker — an iOS/Android date wheel is better than any grid at 390px. */
.input[type="date"] { color-scheme: dark; }

.cal {
  margin-top: var(--s-3);
  border: var(--stroke); border-radius: var(--r-xs);
  background: var(--graphite); padding: var(--s-4);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.cal-title {
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text);
}
.cal-nav {
  width: 44px; height: 44px; flex: none;          /* G29 — these get tapped a lot */
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: var(--stroke); border-radius: var(--r-xs);
  color: var(--text-2); font-size: 1.1rem; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.cal-nav:hover:not(:disabled) { color: var(--gold); border-color: var(--gold); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-dow {
  margin-top: var(--s-4); margin-bottom: var(--s-2);
  font-family: var(--mono); font-size: var(--fs-mono); color: var(--text-3);
  text-align: center;
}
.cal-day {
  aspect-ratio: 1; min-height: 40px;              /* 7 columns cannot also be 44px
                                                     wide at 320px — the row would
                                                     overflow. 40px square with a
                                                     2px gutter is the honest max. */
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-xs);
  color: var(--text); font-family: var(--mono); font-size: var(--fs-sm); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.cal-day:hover:not(:disabled) { background: var(--steel); }
.cal-day:disabled { color: var(--text-3); opacity: 0.35; cursor: not-allowed; }
.cal-day:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* `.cal-day:hover:not(:disabled)` is (0,3,1) and a bare `.cal-day.is-sel` is
   (0,2,0), so hover silently outranked the selected state — and since your
   cursor is ON the day you just clicked, gold never appeared at the one moment
   it is doing its job. Matched specificity, selection wins. */
.cal-day.is-sel,
.cal-day.is-sel:hover:not(:disabled) { background: var(--gold); color: var(--on-gold); font-weight: 700; }
.cal-pad { aspect-ratio: 1; }

@media (prefers-reduced-motion: reduce) {
  .cal-nav, .cal-day { transition: none; }
}

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.crumb { display: flex; align-items: center; gap: var(--s-3); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); flex-wrap: wrap; }
.crumb a { transition: color var(--dur-fast) var(--ease-std); }
.crumb a:hover { color: var(--gold); }
.crumb [aria-current] { color: var(--text-2); }

/* ── CTA band ────────────────────────────────────────────────────── */
.cta { border-top: var(--stroke); background: linear-gradient(180deg, var(--carbon), var(--void)); position: relative; overflow: hidden; }
.cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 100% at 78% 100%, var(--gold-veil), transparent 62%); }
.cta-inner { position: relative; display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cta h2 { font-size: clamp(1.9rem, 1.32rem + 2.45vw, 3rem); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; }
.cta p { color: var(--text-2); margin-top: var(--s-5); max-width: 46ch; }
.cta-act { display: grid; gap: var(--s-4); justify-items: start; }
@media (max-width: 860px) { .cta-inner { grid-template-columns: minmax(0, 1fr); } }

/* ── Footer ──────────────────────────────────────────────────────── */
.foot { border-top: var(--stroke); background: var(--carbon); padding-block: var(--s-9) var(--s-6); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.15fr; gap: clamp(2rem, 4vw, 4rem); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The footer stacked to ONE column below 540px, which cost 1,369px — 1.75
   screens — on every page of the site. The two link lists are short and narrow;
   they sit side by side happily. Only the brand block (which carries prose) and
   the contact block (which carries names and numbers) need the full width. */
@media (max-width: 540px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
  .foot-grid > :first-child,
  .foot-grid > :last-child { grid-column: 1 / -1; }
}
.foot h3 { font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--tr-mono-wide); text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-5); }
.foot-brand b { display: block; font-family: var(--display); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.015em; font-stretch: 110%; text-transform: uppercase; }
.foot-brand p { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-4); max-width: 34ch; }
.foot-list { display: grid; gap: var(--s-3); }
.foot-list a, .foot-list span { font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
.foot-list a { transition: color var(--dur-fast) var(--ease-std); display: inline-block; min-height: 24px; }
.foot-list a:hover { color: var(--gold); }
.foot-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-9); padding-top: var(--s-5); border-top: var(--stroke); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-3); }
.foot-bar a:hover { color: var(--gold); }

/* ── Sticky mobile action bar ────────────────────────────────────── */
.dock {
  position: fixed; inset: auto 0 0; z-index: 55; display: none;
  gap: var(--s-3); padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--void) 94%, transparent);
  border-top: var(--stroke);
}
.dock .btn { flex: 1; }
@media (max-width: 720px) { .dock { display: flex; } body { padding-bottom: 84px; } }

/* ── Utilities ───────────────────────────────────────────────────── */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
.split-lead   { grid-template-columns: 1.5fr 1fr; }
.split-follow { grid-template-columns: 1fr 1.35fr; }
.split-offer  { grid-template-columns: 1.1fr 1fr; }
.split-story  { grid-template-columns: 1.05fr 1.6fr; }
@media (max-width: 900px) { .split-lead, .split-follow, .split-offer, .split-story { grid-template-columns: minmax(0, 1fr); } }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 980px) { .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cols-3 { grid-template-columns: minmax(0, 1fr); } .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cols-2, .cols-4 { grid-template-columns: minmax(0, 1fr); } }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }

/* ── Toast ───────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: var(--s-7); z-index: 90;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border: var(--stroke-gold); border-radius: var(--r-sm);
  background: var(--graphite-2); box-shadow: var(--sh-panel);
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase;
  transition: transform var(--dur-slow) var(--ease-emph), opacity var(--dur-slow) var(--ease-emph);
}
.toast[data-show='true'] { transform: translate(-50%, 0); opacity: 1; }

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn-spin { animation: none; }
  /* State changes stay legible — only movement is suppressed. */
  .btn:active, .btn-primary:active, .btn-ghost:active { transform: none; }
}