/* ==========================================================
   CrispSign — Brand-locked design tokens
   Cream #FAF7F2 · Navy #0A1226 · Signal Red #E81820 (v2 brand)
   ========================================================== */
:root {
  --cream: #FAF7F2;
  --navy: #0A1226;
  --navy-deep: #050912;
  /* v2 rebrand: Signal Red replaces Signal Orange. Variable names kept
     for backward compat across the stylesheet. */
  --orange: #E81820;
  --orange-night: #FF4D55;
  --signal-red: #E81820;
  --ink-muted: #5C6273;
  --border: #E5DFD3;
  --halo-warm: #FFF5E0;

  --bg: var(--cream);
  --surface: #ffffff;
  --text: var(--navy);
  --text-muted: var(--ink-muted);

  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.4rem, 2.4vw, 1.875rem);
  --text-2xl: clamp(2rem, 4vw, 3rem);
  --text-hero: clamp(2.2rem, 4.5vw, 3.8rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --container: 1240px;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(10,18,38,0.06), 0 2px 8px rgba(10,18,38,0.04);
  --shadow: 0 4px 12px rgba(10,18,38,0.08), 0 12px 32px rgba(10,18,38,0.10);
  --shadow-lg: 0 12px 28px rgba(10,18,38,0.16), 0 32px 64px rgba(10,18,38,0.18);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 0px;
}

/* ==========================================================
   Reset
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--space-8); }
}

/* ==========================================================
   Floating menu button + nav overlay (header removed)
   ========================================================== */
.floating-menu-btn {
  position: fixed;
  top: clamp(var(--space-4), 2vw, var(--space-6));
  left: clamp(var(--space-4), 2vw, var(--space-6));
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(5, 9, 18, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.floating-menu-btn:hover {
  background: rgba(5, 9, 18, 0.6);
  border-color: rgba(255, 255, 255, 0.25);
}
.floating-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--cream);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(5, 9, 18, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.nav-overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.nav-overlay[hidden] { display: none; }
.nav-overlay-close {
  position: absolute;
  top: clamp(var(--space-4), 2vw, var(--space-6));
  right: clamp(var(--space-4), 2vw, var(--space-6));
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--cream);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease;
}
.nav-overlay-close:hover { background: rgba(255, 255, 255, 0.08); }
.nav-overlay-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-4), 2.5vw, var(--space-6));
}
.nav-overlay-links a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: color 200ms ease;
}
.nav-overlay-links a:hover { color: var(--orange); }
.nav-overlay-links .nav-overlay-cta {
  margin-top: var(--space-4);
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--navy);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}
.nav-overlay-links .nav-overlay-cta:hover { background: var(--cream); color: var(--navy); }

/* ==========================================================
   Header account controls (fixed top-right, like the builders)
   ----------------------------------------------------------
   A persistent Sign in / My Account cluster in the right-hand
   header zone, mirroring the builder apps. The CrispSign hero
   logo stays the home link; these controls sit above it in the
   same top band. Static links only — the brand site is a static
   site and cannot read the cross-origin app session, so both
   controls are always shown (see scripts/account-controls.test.mjs).
   ========================================================== */
.account-controls {
  position: fixed;
  top: clamp(var(--space-4), 2vw, var(--space-6));
  right: clamp(var(--space-4), 2vw, var(--space-6));
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.account-controls a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.account-controls .account-signin {
  color: var(--cream);
  background: rgba(5, 9, 18, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.account-controls .account-signin:hover {
  background: rgba(5, 9, 18, 0.6);
  border-color: rgba(255, 255, 255, 0.3);
}
/* My Account is a utility/secondary control — navy, not red. Red is reserved
   for the page's forward CTA (e.g. "Design & Price My Sign"). */
.account-controls .account-portal {
  color: var(--cream);
  background: var(--navy);
  border: 1px solid var(--navy);
}
.account-controls .account-portal:hover {
  background: var(--navy-deep);
  color: var(--cream);
  border-color: var(--navy-deep);
}
@media (max-width: 600px) {
  .account-controls { gap: var(--space-1); }
  .account-controls a {
    height: 36px;
    padding: 0 13px;
    font-size: var(--text-xs);
  }
}
@media (max-width: 480px) {
  .account-controls { top: 14px; right: 14px; }
}

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--orange);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--cream);
  color: var(--navy);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(250, 247, 242, 0.7);
}
.btn-ghost:hover {
  background: var(--cream);
  color: var(--navy);
  border-color: var(--cream);
}

/* ==========================================================
   Hero — full viewport, clean photo, copy bottom-left
   ========================================================== */
.hero {
  position: relative;
  width: 100%;
  background: var(--navy-deep);
  overflow: hidden;
}
.hero-stage {
  position: relative;
  width: 100%;
  height: calc(100svh - var(--header-h));
  min-height: 560px;
  overflow: hidden;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(5,9,18,0.55) 0%, rgba(5,9,18,0.15) 45%, rgba(5,9,18,0.0) 70%),
    linear-gradient(to top, rgba(5,9,18,0.65) 0%, rgba(5,9,18,0.15) 40%, rgba(5,9,18,0.0) 70%);
  z-index: 1;
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: clamp(var(--space-6), 4vw, var(--space-16));
  padding-bottom: clamp(var(--space-8), 5vw, var(--space-20));
  gap: var(--space-6);
  color: var(--cream);
  pointer-events: none;
}
.hero-overlay a, .hero-overlay button { pointer-events: auto; }

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 640px;
}

/* v2 brand: single horizontal lockup image (mark + wordmark), top-right
   of hero. The .hero-mark-img replaces the old inline SVG + <span> pair.
   NOTE: This hero variant uses logo-halolit-hero.png — a halo-lit channel-
   letter rendition of the canonical logo. Brand Standards v2 Page 8 lists
   glows under Logo Don'ts; this is an approved one-off hero treatment that
   mirrors the halo-lit signage shown in the hero video. All other pages
   continue to use logo-fullcolor.svg (no glow) per brand book. */
.hero-mark {
  position: absolute !important;
  /* Sits just below the fixed .account-controls header band (top-right). */
  top: clamp(64px, 7vw, 92px);
  right: clamp(20px, 2.5vw, 44px);
  left: auto !important;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  pointer-events: auto;
  /* The halo-lit PNG ships with its own baked-in glow; no CSS drop-shadow
     needed (would double-glow the wordmark). */
  transition: opacity 200ms ease;
}
.hero-mark:hover { opacity: 0.85; }
.hero-mark-img {
  display: block;
  height: auto;
  /* Halo PNG includes ~8% glow padding on each side, so visible logo ≈ 84%
     of asset width. Sized so the visible logo lands ~540px on wide screens
     (~1.5× the prior 360px target). */
  width: clamp(380px, 38vw, 640px);
}
@media (max-width: 480px) {
  .hero-mark { top: 58px; right: 16px; left: auto !important; }
  .hero-mark-img { width: 320px; }
}

/* Legal page brand mark — top-left lockup that links home, sitting in the
   header band to the right of the hamburger and clear of the right-side
   account controls. Legal pages have a light background, so the navy SVG
   lockup reads cleanly. Kept compact so the fixed controls never overlap. */
.legal-logo {
  position: fixed;
  top: clamp(var(--space-4), 2vw, var(--space-6));
  /* Hamburger sits at left: clamp(16px, 2vw, 24px) and is 48px wide, so its
     right edge tracks 2vw + 48px. Offset the logo by a further ~20px so it
     keeps a comfortable gap from the button at every width. */
  left: clamp(84px, calc(2vw + 68px), 92px);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  height: 48px;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.legal-logo:hover { opacity: 0.8; }
.legal-logo img {
  display: block;
  height: 30px;
  width: auto;
}
@media (max-width: 600px) {
  .legal-logo { height: 40px; left: clamp(80px, 18vw, 88px); }
  .legal-logo img { height: 24px; }
}
.hero-eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.dot-orange {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
}
.hero-headline {
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
}
.hero-headline .hl-line { display: block; }
.hero-headline em {
  font-style: italic;
  color: var(--orange-night);
  font-weight: 700;
}
.hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  color: rgba(250, 247, 242, 0.92);
  max-width: 56ch;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* "One workflow from design to delivery" — three hub CTAs aligned under
   the 6-step grid columns. Beacon under col 1 (Design online / Approve),
   Lobby under col 2 (Instant estimate / Fabricate), Auto under col 3
   (Production review / Reorder). Grid mirrors .how-it-works-steps. */
.how-it-works-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.how-it-works-actions.how-it-works-actions--hubs {
  /* Mirror the 3-column grid of .how-it-works-steps so each CTA sits
     directly under its column pair. The 40px column gap is measured
     from the parent grid (319px col + 40px gap pattern). */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: var(--space-7);
  width: 100%;
  flex-wrap: initial;
  justify-content: initial;
}
.how-it-works-actions--hubs .hub-cta {
  /* Full column-width block CTA. Signal Red on Cream, Space Grotesk Bold
     uppercase wordmark, wider letter-spacing for typographic presence.
     This is a stronger version of the .btn-primary pill on purpose:
     the section's anchor action deserves more weight than a default pill. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 76px;
  padding: var(--space-4) var(--space-5);
  background: var(--signal-red, #E81820);
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(232, 24, 32, 0.28),
              inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.how-it-works-actions--hubs .hub-cta:hover,
.how-it-works-actions--hubs .hub-cta:focus-visible {
  background: #C9151C;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(232, 24, 32, 0.36),
              inset 0 -2px 0 rgba(0, 0, 0, 0.16);
}
.how-it-works-actions--hubs .hub-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(232, 24, 32, 0.30),
              inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
@media (max-width: 720px) {
  .how-it-works-actions--hubs {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .how-it-works-actions--hubs .hub-cta {
    min-height: 64px;
    font-size: 1.125rem;
  }
}

.hero-hint {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.65);
  font-weight: 500;
}

@media (max-width: 720px) {
  .hero-headline { font-size: clamp(2rem, 9vw, 2.8rem); }
}

/* ==========================================================
   Lines overview (intro cards)
   ========================================================== */
.lines-overview {
  padding: var(--space-20) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.section-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.dot-beacon { background: var(--orange); }
.dot-lobby  { background: var(--orange-night); }
.dot-print  { background: var(--orange); }
.dot-auto   { background: var(--orange); }

.lines-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .lines-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.line-card {
  display: block;
  padding: var(--space-8);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.line-card:hover {
  transform: translateY(-4px);
  border-color: var(--navy);
  box-shadow: var(--shadow);
}
.line-card h2 {
  font-size: var(--text-xl);
  margin: var(--space-3) 0 var(--space-2);
}
.line-card p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}
.line-mark {
  width: 40px;
  height: 8px;
  border-radius: 2px;
  position: relative;
  margin-bottom: var(--space-2);
}
.line-mark--beacon { background: var(--orange); }
.line-mark--lobby  { background: var(--navy); }
.line-mark--print  { background: var(--navy); }
.line-mark--print::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 0;
  width: 10px;
  height: 8px;
  background: var(--orange);
  border-radius: 2px;
}
.line-mark--auto   { background: var(--navy); }
.line-mark--auto::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 0;
  width: 10px;
  height: 8px;
  background: var(--orange);
  border-radius: 2px;
}

/* ==========================================================
   LINE SECTION — Rolls-Royce pattern
   .line             = full product-line section, dark background
     .line-overview  = full-bleed clean photo + intro copy + line title
       .line-stage   = the photo container (full viewport height)
       .line-image   = the photo (clean, no overlay markers)
       .highlight-box = scroll-driven outline on the active product zone
     .line-nav       = numbered nav strip (sticky under header on desktop)
     .detail x N     = full-bleed detail section per product
   ========================================================== */
.line {
  position: relative;
  background: var(--navy-deep);
  color: var(--cream);
  scroll-margin-top: var(--header-h);
}

/* --- Overview (clean photo, full viewport) --- */
.line-overview {
  position: relative;
  width: 100%;
}
.line-stage {
  position: relative;
  width: 100%;
  height: calc(100svh - var(--header-h));
  min-height: 580px;
  overflow: hidden;
  background: var(--navy-deep);
}
.line-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- Lit-frame stack (Beacon overview): photoreal cross-fade lighting --- */
.lit-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lit-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}
/* Base frame is always visible underneath */
.lit-frame-base { opacity: 1; }
/* Active spot frame fades in on top */
.lit-frame.is-visible { opacity: 1; }

/* Visually hide the alt-text node but keep it readable for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.line-overview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(var(--space-6), 4vw, var(--space-16));
  pointer-events: none;
  background: linear-gradient(to top, rgba(5,9,18,0.85) 0%, rgba(5,9,18,0.35) 30%, rgba(5,9,18,0) 60%);
  z-index: 2;
}
/* Lobby scene: position intro between TIDEWATER COFFEE letters and table tent on cafe table.
   Gradient must NOT darken the bottom of the image where the table tents (top:74%)
   and the Direct-Mount Vinyl decal on the bakery case (top:67%) live. Keep the
   gradient narrow and centered so the intro copy has a soft band of contrast
   without smothering the products above and below it. */
#crisplobby .line-overview-overlay {
  padding-bottom: max(150px, 17vw) !important;
  background: linear-gradient(to top, rgba(5,9,18,0) 0%, rgba(5,9,18,0.10) 14%, rgba(5,9,18,0.45) 28%, rgba(5,9,18,0.20) 48%, rgba(5,9,18,0) 70%);
}
#crisplobby .line-intro {
  gap: var(--space-2);
}
#crisplobby .line-sub {
  max-width: 480px;
}
.line-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 820px;
  pointer-events: auto;
}
.line-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.line-brand {
  font-size: clamp(3.25rem, 8.4vw, 6.5rem);
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin: 0;
  color: var(--cream);
  text-shadow: 0 2px 28px rgba(0,0,0,0.55);
  font-weight: 700;
}
.line-tagline {
  font-size: clamp(1.25rem, 1.95vw, 1.75rem);
  letter-spacing: -0.012em;
  line-height: 1.18;
  margin: 0;
  color: var(--cream);
  max-width: 28ch;
  font-weight: 500;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.line-sub {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: rgba(250, 247, 242, 0.85);
  max-width: 56ch;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}

/* --- Highlight box: traces active product on the overview as you scroll --- */
.highlight-box {
  position: absolute;
  z-index: 3;
  border: 2px solid var(--orange);
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition:
    left 0.6s var(--ease),
    top 0.6s var(--ease),
    width 0.6s var(--ease),
    height 0.6s var(--ease),
    opacity 0.4s var(--ease);
  box-shadow: 0 0 0 9999px rgba(5,9,18,0.55), 0 0 24px rgba(232,82,27,0.5);
}
.highlight-box.is-active { opacity: 1; }
/* When the lit-stack is doing the wayfinding, hide the highlight box entirely —
   the lighting itself reveals the active product, which is far more elegant
   than an orange outline. */
[data-lit-stage] .highlight-box,
[data-spotlight-stage] .highlight-box {
  display: none !important;
}

/* --- Spotlight overlay (CrispLobby): hovering a product dims + desaturates the
   rest of the scene while the active product region stays bright and crisp.
   Region positioned via CSS vars set in JS from each detail's data-region. --- */
[data-spotlight-stage] .line-stage {
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-w: 0%;
  --spot-h: 0%;
  --spot-opacity: 0;
}
.spotlight-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--spot-opacity, 0);
  transition: opacity 0.45s var(--ease);
  /* CrispSign card position — cut out of the dim mask so the card never
     gets darkened (NO glow, just stays at native brightness).
     Hole sized to hug the card itself, not a halo around it.
     Pushed down to match Nick's viewport — his card sits lower than master image %. */
  --card-x: 63%;
  --card-y: 92%;
  --card-w: 4%;
  --card-h: 5%;
  /* Dim layer: a light dim (most of the scene stays visible) + a subtle
     warm kicker on the active spotlight. Lowered from 0.55 → 0.25 so the
     scene stays mostly bright and the spotlight is a gentle highlight
     rather than a harsh contrast. */
  background:
    radial-gradient(ellipse calc(var(--spot-w) * 0.85) calc(var(--spot-h) * 0.95)
      at var(--spot-x) var(--spot-y),
      rgba(255, 240, 215, 0.12) 0%,
      rgba(255, 240, 215, 0.06) 35%,
      rgba(0, 0, 0, 0) 60%),
    linear-gradient(rgba(5, 9, 18, 0.25), rgba(5, 9, 18, 0.25));
  /* Mask: TWO holes — the cycling spotlight + the persistent card hole. */
  -webkit-mask:
    radial-gradient(
      ellipse var(--card-w) var(--card-h)
      at var(--card-x) var(--card-y),
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 70%,
      rgba(0,0,0,1) 100%),
    radial-gradient(
      ellipse calc(var(--spot-w) * 0.65) calc(var(--spot-h) * 0.75)
      at var(--spot-x) var(--spot-y),
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,1) 80%);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(
      ellipse var(--card-w) var(--card-h)
      at var(--card-x) var(--card-y),
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 70%,
      rgba(0,0,0,1) 100%),
    radial-gradient(
      ellipse calc(var(--spot-w) * 0.65) calc(var(--spot-h) * 0.75)
      at var(--spot-x) var(--spot-y),
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,1) 80%);
          mask-composite: intersect;
}
[data-spotlight-stage].is-spot-active .spotlight-mask {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .spotlight-mask { transition: none; }
}

/* --- Always-on spotlight: a soft warm glow positioned over a fixed point
   in the scene that should never be dimmed. Lives ABOVE the dimming mask
   (z-index: 3) so when the cycling spotlight is elsewhere and the rest of
   the scene is dim, this point still reads bright and warm. Uses a layered
   radial-gradient (warm highlight + slight desaturation kicker) and a soft
   pulsing breathe for a subtle “always lit” feel. --- */
.always-spot {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(0.5px);
}
/* Card-holder is kept un-dimmed via a hole in .spotlight-mask (see above).
   The .always-spot--crispsign-card element is kept in markup but has no
   visual glow — Nick wants the card visible at native brightness, NOT
   highlighted with a warm light. */
.always-spot--crispsign-card {
  display: none;
}

/* --- Numbered nav strip --- */
.line-nav {
  position: relative;
  z-index: 4;
  width: 100%;
  background: rgba(5, 9, 18, 0.95);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.line-nav::-webkit-scrollbar { display: none; }

.line-nav-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-4), 2vw, var(--space-8));
}
.line-nav-item {
  flex: 1 0 auto;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 18px var(--space-4);
  color: rgba(250, 247, 242, 0.65);
  border-bottom: 2px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
  white-space: nowrap;
}
.line-nav-item:hover {
  color: var(--cream);
  background: rgba(255,255,255,0.04);
}
.line-nav-item .num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--orange);
  flex: none;
}
.line-nav-item .label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.line-nav-item.is-active {
  color: var(--cream);
  border-bottom-color: var(--orange);
  background: rgba(232, 82, 27, 0.08);
}
.line-nav-item.is-active .num { color: var(--orange); }

/* --- Detail section (one per product) --- */
.detail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  background: var(--navy-deep);
  scroll-margin-top: calc(var(--header-h) + 56px);
}
@media (min-width: 980px) {
  .detail {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .detail-copy {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
  }
}

.detail-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy);
}
.detail-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease);
}
.detail.is-visible .detail-image {
  transform: scale(1);
}

.detail-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  background: var(--navy-deep);
  color: var(--cream);
}
.detail-num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
}
.detail-title {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--cream);
  margin: 0;
}
.detail-body {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: rgba(250, 247, 242, 0.84);
  margin: 0;
  max-width: 52ch;
}
.detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}
.detail-meta li {
  font-size: var(--text-sm);
  color: rgba(250, 247, 242, 0.72);
  letter-spacing: 0.005em;
}
.detail-cta {
  align-self: flex-start;
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--orange);
  color: var(--cream);
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.detail-cta:hover {
  background: var(--cream);
  color: var(--navy);
  transform: translateY(-1px);
}

/* Mobile: detail layout = image first, copy below */
@media (max-width: 979px) {
  .detail-copy { padding: var(--space-12) var(--space-6); }
  .detail-stage { aspect-ratio: 4 / 3; }
}

/* ==========================================================
   Process
   ========================================================== */
.process {
  padding: var(--space-20) 0;
  background: var(--cream);
  border-top: 1px solid var(--border);
}
.process-title {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-12);
  max-width: 16ch;
}
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .process-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
}
.process-steps li {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}
.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.process-steps h3 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}
.process-steps p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}

/* ==========================================================
   Contact
   ========================================================== */
.contact {
  padding: var(--space-20) 0;
  background: var(--navy);
  color: var(--cream);
}
.contact .section-eyebrow { color: var(--orange-night); }
.contact h2 {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-4);
  color: var(--cream);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}
.contact-copy p {
  color: rgba(250, 247, 242, 0.78);
  font-size: var(--text-lg);
}
.contact-quote-link {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  color: rgba(250, 247, 242, 0.78);
}
.contact-quote-link a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
}
.contact-quote-link a:hover { color: var(--cream); }
.contact-list {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
}
.contact-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.contact-list strong {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
  font-weight: 600;
}
.contact-list a:hover { color: var(--orange-night); }

.contact-form {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.form-fields { display: grid; gap: var(--space-4); }
.contact-form label { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-form label span {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
  font-weight: 600;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font: inherit;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--cream);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  resize: vertical;
  transition: border-color 0.2s, background 0.2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255,255,255,0.1);
}
.contact-form .btn-primary { background: var(--orange); color: var(--cream); }
.contact-form .btn-primary:hover { background: var(--cream); color: var(--navy); }

.form-thanks { text-align: center; padding: var(--space-8) 0; }
.form-thanks h3 {
  font-size: var(--text-xl);
  color: var(--orange-night);
  margin: 0 0 var(--space-2);
}
.form-thanks p { color: rgba(250, 247, 242, 0.7); margin: 0; }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer {
  background: var(--navy-deep);
  color: rgba(250, 247, 242, 0.6);
  padding: var(--space-16) 0 var(--space-8);
  position: relative;
  overflow: hidden;
}
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 12rem);
  letter-spacing: -0.06em;
  color: rgba(250, 247, 242, 0.07);
  line-height: 0.85;
  margin-bottom: var(--space-8);
  user-select: none;
  padding: 0 var(--space-6);
}
@media (min-width: 768px) { .footer-wordmark { padding: 0 var(--space-8); } }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  max-width: var(--container);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-12); padding: var(--space-8) var(--space-8); }
}
.footer-grid a, .footer-grid span {
  display: block;
  padding: 4px 0;
  font-size: var(--text-sm);
  color: rgba(250, 247, 242, 0.7);
}
.footer-grid a:hover { color: var(--orange-night); }
.footer-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.45);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.footer-fineprint {
  margin: var(--space-8) auto 0;
  font-size: var(--text-xs);
  color: rgba(250, 247, 242, 0.4);
  text-align: left;
  padding: 0 var(--space-6);
  max-width: var(--container);
}
@media (min-width: 768px) { .footer-fineprint { padding: 0 var(--space-8); } }
.footer-fineprint em {
  color: var(--orange);
  font-style: italic;
  font-weight: 600;
}

/* ==========================================================
   Reduced motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .highlight-box { transition: opacity 0.2s; }
}

/* Brand names stay mixed-case even inside uppercase labels */
.line-eyebrow .brand,
.detail-num .brand,
.section-eyebrow .brand,
.hero-eyebrow .brand,
.footer-eyebrow .brand {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ===========================================
   PRODUCT PAGES (crispbeacon, crisplobby, crispauto, contact)
   =========================================== */

/* Hero-mark variant for use on light/cream product page heroes.
   Drop-shadow soft so the navy lockup reads cleanly on cream. */
.hero-mark--solid {
  filter: drop-shadow(0 1px 2px rgba(10,18,38,0.12));
}

/* ---------- Product hero ---------- */
.product-hero {
  position: relative;
  background: var(--cream);
  padding: clamp(120px, 14vw, 180px) 0 var(--space-20);
  overflow: hidden;
}
.product-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 960px) {
  .product-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-16);
  }
}
.product-hero-copy { max-width: 60ch; }
.product-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.product-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--orange);
}
.product-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--navy);
  margin: 0 0 var(--space-6);
}
.product-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-style: italic;
  color: var(--ink-muted);
  margin: 0 0 var(--space-4);
  max-width: 32ch;
  line-height: 1.25;
}
.product-sub {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 var(--space-8);
  max-width: 60ch;
}
.product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.product-hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: block;
}

/* ---------- Options grid ---------- */
.product-options {
  background: var(--surface);
  padding: clamp(80px, 10vw, 130px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.product-options-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--navy);
  margin: 0 0 var(--space-12);
  max-width: 22ch;
}
.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 700px) {
  .options-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .options-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-12) var(--space-8); }
}
.options-grid--two { max-width: 980px; }
@media (min-width: 700px) {
  .options-grid--two { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .options-grid--two { grid-template-columns: repeat(2, 1fr); }
}

.option-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--ease);
  scroll-margin-top: 96px;
}
.option-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.option-card:target {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232, 82, 27, 0.18), var(--shadow);
}
.option-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream);
}
.option-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.option-card:hover .option-card-media img { transform: scale(1.03); }

.option-card-body {
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.option-card .detail-num {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.option-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  line-height: 1.15;
}
.option-card p {
  margin: 0;
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.55;
}
.option-card .detail-meta {
  margin: var(--space-2) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.option-card .detail-meta li {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.5;
}
.option-card .detail-cta {
  margin-top: auto;
  /* Reset the pill styles inherited from generic .detail-cta */
  background: transparent;
  padding: var(--space-4) 0 0 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--orange);
  letter-spacing: -0.01em;
  align-self: flex-start;
  transition: color 180ms ease, transform 180ms ease;
}
.option-card .detail-cta:hover {
  background: transparent;
  color: var(--navy);
  transform: translateX(2px);
}

/* ---------- Process band ---------- */
.product-process {
  background: var(--cream);
  padding: clamp(80px, 10vw, 130px) 0;
}
.product-process-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--navy);
  margin: 0 0 var(--space-12);
  max-width: 22ch;
}
.product-process .process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 700px) {
  .product-process .process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .product-process .process-steps { grid-template-columns: repeat(4, 1fr); }
}
.product-process .process-steps li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 0 0;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--navy);
  border-radius: 0;
}
.product-process .process-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--orange);
}
.product-process .process-steps h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
}
.product-process .process-steps p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-base);
  line-height: 1.55;
}

/* ---------- Builder CTA band (full-width navy) ---------- */
.product-builder-cta {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(96px, 12vw, 160px) 0;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.product-builder-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 90% 0%, rgba(232, 82, 27, 0.20), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(255, 138, 77, 0.10), transparent 60%);
  pointer-events: none;
}
.product-builder-cta > .container { position: relative; }
.section-eyebrow--light {
  color: rgba(250, 247, 242, 0.7);
}
.product-builder-cta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--cream);
  margin: 0 0 var(--space-6);
  max-width: 16ch;
}
.product-builder-cta p {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: rgba(250, 247, 242, 0.86);
  margin: 0 0 var(--space-8);
  max-width: 60ch;
}
.product-builder-cta .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.product-builder-cta .btn-primary {
  background: var(--orange);
  color: var(--cream);
  border-color: var(--orange);
}
.product-builder-cta .btn-primary:hover {
  background: var(--cream);
  color: var(--navy);
  border-color: var(--cream);
}
.product-builder-cta .btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(250, 247, 242, 0.5);
}
.product-builder-cta .btn-ghost:hover {
  background: var(--cream);
  color: var(--navy);
  border-color: var(--cream);
}

/* ---------- Contact page ---------- */
.contact-hero { padding-bottom: clamp(80px, 10vw, 130px); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}
.contact-copy { max-width: 56ch; }
.contact-meta {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-8);
  border-top: 1px solid var(--border);
  padding-top: var(--space-8);
}
.contact-meta-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-1);
}
.contact-meta-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}
.contact-meta-value a { color: var(--navy); border-bottom: 1px solid transparent; transition: border-color 150ms ease, color 150ms ease; }
.contact-meta-value a:hover { color: var(--orange); border-bottom-color: var(--orange); }

.contact-form-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .contact-form-wrap { padding: var(--space-12); }
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-field { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-field span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--navy);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.08);
}
.contact-field textarea { resize: vertical; min-height: 140px; line-height: 1.55; }

.contact-submit {
  align-self: flex-start;
  background: var(--orange);
  color: var(--cream);
  border-color: var(--orange);
}
.contact-submit:hover {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}
.contact-form-thanks {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--navy);
  background: var(--halo-warm);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
  margin: 0;
}

/* Mobile fine-tuning */
@media (max-width: 640px) {
  .product-hero { padding-top: clamp(96px, 22vw, 130px); }
  .product-hero-actions .btn,
  .product-builder-cta .cta-actions .btn { width: 100%; justify-content: center; text-align: center; }
  .contact-meta { grid-template-columns: 1fr; }
}

/* ---------- Overrides: contact page on light cream bg ----------
   The legacy .contact-form rules above were authored for a dark navy
   contact section. The standalone contact.html uses a light hero bg, so
   re-skin form inputs and labels for a light surface. */

.contact-hero .contact-copy > p,
.contact-hero .contact-copy .product-tagline,
.contact-hero .contact-copy .product-sub {
  color: var(--text);
}
.contact-hero .product-tagline { color: var(--ink-muted); }

.contact-form-wrap .contact-form {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
.contact-form-wrap .contact-form label span,
.contact-form-wrap .contact-field span {
  color: var(--ink-muted);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}
.contact-form-wrap .contact-form input,
.contact-form-wrap .contact-form select,
.contact-form-wrap .contact-form textarea,
.contact-form-wrap .contact-field input,
.contact-form-wrap .contact-field select,
.contact-form-wrap .contact-field textarea {
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--navy);
  padding: 14px 16px;
  border-radius: var(--radius);
}
.contact-form-wrap .contact-form input::placeholder,
.contact-form-wrap .contact-form textarea::placeholder {
  color: rgba(92, 98, 115, 0.7);
}
.contact-form-wrap .contact-form input:focus,
.contact-form-wrap .contact-form select:focus,
.contact-form-wrap .contact-form textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.08);
}
.contact-form-wrap .contact-form .btn-primary {
  background: var(--orange);
  color: var(--cream);
}
.contact-form-wrap .contact-form .btn-primary:hover {
  background: var(--navy);
  color: var(--cream);
}

/* Make contact-meta eyebrows + values fully visible on cream bg */
.contact-hero .contact-meta li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: none;
  padding: 0;
}
.contact-hero .contact-meta-eyebrow { color: var(--ink-muted); }
.contact-hero .contact-meta-value { color: var(--navy); }

/* ==========================================================
   MOBILE: keep product scenes uncropped
   The full-bleed line photos are 16:9 landscape. On a 9:19
   portrait viewport, object-fit:cover slices the sides off and
   hides the actual products (signs, vehicles). Switch to contain
   so the full scene fits with letterboxing on the dark backdrop.
   Hero video gets the same treatment.
   ========================================================== */
@media (max-width: 720px) {
  .hero video,
  .hero-video {
    object-fit: contain !important;
    background: #050912;
  }
  .line-image,
  .lit-frame {
    object-fit: contain !important;
    background: var(--navy-deep, #050912);
  }
  /* Stage no longer needs full svh on mobile — size to image aspect */
  .line-stage {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .line-image,
  .lit-frame,
  .lit-stack {
    position: relative;
    inset: auto;
  }
  .lit-frame {
    position: absolute;
  }
  .lit-frame-base {
    position: relative;
  }
  /* Bring the overlay text back into flow under the now-shorter image */
  .line-overview-overlay {
    position: relative;
    inset: auto;
    background: var(--navy-deep, #050912);
    padding: var(--space-8) var(--space-6);
  }
  /* Hero mark on mobile: the navy lockup sits over the navy letterbox bars
     above/below the contained hero video — swap to the white-knockout PNG
     so it stays readable. .hero-mark--solid (light product page heros) keeps
     the full-color version. */
  .hero-mark:not(.hero-mark--solid) .hero-mark-img {
    content: url('assets/brand-v2/logo-white-knockout.png');
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55));
  }
}

/* ============================================================
   .line-cta — single "Learn more about…" button inside the
   line-intro overlay. Replaces the old numbered .line-nav strip,
   which is still rendered in the DOM (hidden) so the auto-cycle
   behavior continues to work.
   ============================================================ */
.line-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: var(--space-3);
  padding: 0.85rem 1.5rem;
  background: var(--orange);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--text-base, 1rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(232, 24, 32, 0.32), 0 1px 2px rgba(0,0,0,0.18);
  transition: transform 0.2s var(--ease, ease), background 0.2s var(--ease, ease), color 0.2s var(--ease, ease), box-shadow 0.2s var(--ease, ease);
  white-space: nowrap;
}
.line-cta:hover,
.line-cta:focus-visible {
  background: var(--cream);
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.line-cta span[aria-hidden] {
  transition: transform 0.2s var(--ease, ease);
}
.line-cta:hover span[aria-hidden],
.line-cta:focus-visible span[aria-hidden] {
  transform: translateX(3px);
}

/* Hide the numbered nav strip beneath each scene. Keep it in the
   DOM so the auto-cycle (which iterates .line-nav-item) still works. */
.line-nav {
  display: none !important;
}

/* ============================================================
   LINE DESCRIPTION BANDS — sit directly under each scene
   ============================================================ */
.line-description {
  padding: 72px 0 80px;
}
.line-description--navy {
  background: var(--navy, #0A1226);
  color: var(--cream, #FAF7F2);
}
.line-description--cream {
  background: var(--cream, #FAF7F2);
  color: var(--navy, #0A1226);
}
.line-description .container {
  max-width: 1100px;
}
.line-description-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 14px;
}
.line-description--navy .line-description-eyebrow {
  color: var(--signal-red, #E81820);
  opacity: 1;
}
.line-description--cream .line-description-eyebrow {
  color: var(--signal-red, #E81820);
  opacity: 1;
}
.line-description-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 18px;
  max-width: 24ch;
}
.line-description-body {
  font-size: 18px;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 36px;
  opacity: 0.92;
}
.line-description-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 0 0 36px;
}
@media (min-width: 720px) {
  .line-description-pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
.line-description-pillars > div {
  border-top: 2px solid currentColor;
  padding-top: 14px;
  opacity: 0.92;
}
.line-description--navy .line-description-pillars > div {
  border-top-color: rgba(232, 24, 32, 0.85);
}
.line-description--cream .line-description-pillars > div {
  border-top-color: var(--navy, #0A1226);
}
.line-description-pillars strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}
.line-description-pillars span {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.78;
}
.line-description-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: var(--signal-red, #E81820);
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 6px 22px rgba(232, 24, 32, 0.28);
}
.line-description-cta:hover {
  transform: translateY(-2px);
  background: #c8121b;
  box-shadow: 0 10px 28px rgba(232, 24, 32, 0.36);
}

/* ============================================================
   SECTION DIVIDERS — thin design break between scenes
   ============================================================ */
.section-divider {
  background: var(--cream, #FAF7F2);
  padding: 28px 20px;
}
.section-divider-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.section-divider-rule {
  flex: 1;
  height: 2px;
  background: var(--signal-red, #E81820);
  max-width: 360px;
  border-radius: 1px;
}
.section-divider-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy, #0A1226);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .section-divider { padding: 22px 16px; }
  .section-divider-inner { gap: 12px; }
  .section-divider-text {
    font-size: 11px;
    letter-spacing: 0.1em;
    white-space: normal;
    text-align: center;
  }
  .section-divider-rule { max-width: 80px; }
}

/* ============================================
   HALO-LIT SHOWCASE BAND
   Full-bleed photoreal logo as fabricated signage,
   placed directly under the hero. Doubles as
   brand statement + product demo for CrispBeacon.
   ============================================ */
.showcase-halolit {
  position: relative;
  width: 100%;
  background: #050813; /* slightly darker than the photo's edges for seamless bleed */
  overflow: hidden;
}

/* Stage holds the image + an overlay anchored to the photo's bottom band.
   The photo of the halo-lit CrispSign logo sits in the upper half of the
   frame, so the lower half is dark concrete — the eyebrow + headline +
   sub typeset directly on that area without covering the sign itself.
   Copy is full-width-of-the-image so it reads as one wide three-line
   marquee underneath the sign, not a narrow right-side block. */
.showcase-halolit-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  min-height: 360px;
}

.showcase-halolit-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Overlay anchored to the bottom of the photo — positioned in the lower
   portion of the image where the concrete is darkest, so plain white text
   reads cleanly without any gradient or background plate behind it (per
   Nick's spec). Three text lines + CTA, full-image-width, centered. */
.showcase-halolit-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 clamp(24px, 6vw, 96px) clamp(28px, 4vw, 56px);
  display: flex;
  justify-content: center;
  pointer-events: none; /* let the CTA itself be the only clickable target */
}

.showcase-halolit-copy {
  width: 100%;
  max-width: 1280px;
  color: var(--cream, #FAF7F2);
  text-align: center;
  pointer-events: auto;
}

.showcase-halolit-eyebrow {
  color: var(--signal-red, #E81820);
  margin: 0 0 8px;
  /* Slightly larger letter-spacing reads better stretched across the
     full photo width than the tighter site-wide eyebrow default. */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.showcase-halolit-headline {
  font-size: clamp(28px, 3.8vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--cream, #FAF7F2);
  /* No background plate — a soft text-shadow keeps the white headline
     legible against any darker-concrete area of the photo without
     introducing a gradient that would dim the sign above. */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.showcase-halolit-sub {
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.5;
  color: rgba(250, 247, 242, 0.95);
  margin: 0 0 18px;
  /* Wide single-line read on desktop; wraps on narrow viewports. */
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.showcase-halolit-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--signal-red, #E81820);
  color: var(--cream, #FAF7F2);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 160ms ease, background 160ms ease;
}

.showcase-halolit-cta:hover {
  background: #c8121a;
  transform: translateY(-1px);
}

.showcase-halolit-cta span {
  transition: transform 160ms ease;
}

.showcase-halolit-cta:hover span {
  transform: translateX(3px);
}

/* Mobile: the photo gets shorter (still 16:9) and the bottom-anchored
   text needs a bit more breathing room from the lower edge. Type sizes
   already responsive via clamp(); just tighten the padding so the
   three-line block fits comfortably. */
@media (max-width: 720px) {
  .showcase-halolit-stage {
    min-height: 0;
    max-height: none;
  }
  .showcase-halolit-overlay {
    padding: 0 18px 22px;
  }
  .showcase-halolit-sub {
    /* On mobile the sub gets long enough to clip the CTA — hide it on the
       smallest viewports where the eyebrow + headline already carry the
       message and the CTA does the work. */
    display: none;
  }
}

/* ==========================================================
   Brand video block — used on the homepage to host the
   CrispSign 60-second production walkthrough. Click-to-play,
   metadata-only preload to protect homepage performance.
   ========================================================== */
.brand-video {
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--cream);
}
.brand-video-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.brand-video-frame {
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  box-shadow: 0 24px 60px -28px rgba(10, 18, 38, 0.35);
}
.brand-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.brand-video-copy h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 8px 0 12px;
  color: var(--navy);
}
.brand-video-copy p {
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 8px;
}
.brand-video-copy .section-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-red);
}
@media (max-width: 900px) {
  .brand-video-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   Onboarding tour modal — homepage welcome / "who is CrispSign"
   Auto-opens once per session (JS-gated); re-openable from the hero.
   Built on the same dark-overlay language as .nav-overlay.
   ========================================================== */
.onboarding-open-play {
  display: inline-block;
  font-size: 0.78em;
  margin-right: 2px;
  transform: translateY(-1px);
}

.onboarding-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.onboarding-modal[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.onboarding-modal[hidden] { display: none; }

.onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 18, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.onboarding-dialog {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: calc(100dvh - clamp(32px, 8vw, 96px));
  overflow-y: auto;
  background: var(--cream);
  color: var(--navy);
  border-radius: 16px;
  box-shadow: 0 40px 100px -30px rgba(5, 9, 18, 0.7);
  transform: translateY(12px) scale(0.98);
  transition: transform 240ms var(--ease);
}
.onboarding-modal[data-open="true"] .onboarding-dialog {
  transform: translateY(0) scale(1);
}

.onboarding-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(10, 18, 38, 0.06);
  border: 1px solid rgba(10, 18, 38, 0.14);
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.onboarding-close:hover { background: var(--signal-red); color: #fff; border-color: var(--signal-red); }

.onboarding-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3.5vw, 44px);
  align-items: start;
}

.onboarding-media { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* Brand identity block — fills what used to be empty white space on the left
   side of the modal. Logo + eyebrow + headline + lede stack above the video,
   so the CrispSign mark and "America's Storefront Sign Company" tagline are
   immediately visible the moment the modal opens. */
.onboarding-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onboarding-brand-logo {
  width: clamp(180px, 18vw, 240px);
  height: auto;
  margin: 0 0 4px;
  display: block;
}
.onboarding-brand-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.08;
  margin: 0 0 6px;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.onboarding-brand-headline em {
  font-style: italic;
  color: var(--signal-red);
}

.onboarding-video-frame {
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  box-shadow: 0 18px 44px -24px rgba(10, 18, 38, 0.45);
}
.onboarding-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.onboarding-media-note {
  margin: 0 2px;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.onboarding-copy { min-width: 0; }
.onboarding-eyebrow { margin: 0 0 6px; }
.onboarding-eyebrow-secondary { color: var(--ink-muted); }
.onboarding-copy h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.12;
  margin: 0 0 12px;
  color: var(--navy);
}
.onboarding-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 18px;
}
.onboarding-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.onboarding-points li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
}
.onboarding-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal-red);
}
.onboarding-points strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 2px;
}
.onboarding-points span { color: var(--ink-muted); }
.onboarding-points b { color: var(--navy); font-weight: 600; }

.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}

/* Secondary CTA inside the cream-on-cream onboarding modal. The site-wide
   .btn-ghost is designed for the dark navy hero (cream text on transparent
   background) and disappears here. This button is the standard secondary
   CTA pattern for any cream-background panel: white fill, red border, red
   text — swaps to solid red on hover so the shape stays visible at all
   times. Scoped explicitly so it never affects .btn-ghost elsewhere. */
.btn-onboarding-secondary {
  background: #ffffff;
  color: var(--signal-red);
  border: 1.5px solid var(--signal-red);
}
.btn-onboarding-secondary:hover,
.btn-onboarding-secondary:focus-visible {
  background: var(--signal-red);
  color: #ffffff;
  border-color: var(--signal-red);
  transform: translateY(-1px);
}

.onboarding-finecta {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
}

@media (max-width: 820px) {
  .onboarding-grid { grid-template-columns: 1fr; }
  /* On mobile the brand block + video are already stacked vertically;
     keep the logo a touch smaller so the headline gets the visual lead. */
  .onboarding-brand-logo { width: clamp(150px, 36vw, 200px); }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-modal,
  .onboarding-dialog { transition: none; }
  .onboarding-modal[data-open="true"] .onboarding-dialog { transform: none; }
}

/* ==========================================================================
   FOUNDER STORY — homepage editorial block + /about page
   Tokens used: --cream, --navy, --navy-deep, --signal-red, --ink-muted

   v2: Full-bleed edge-to-edge layout. The rooftop photo of Nick fills the
   entire left half of the viewport, bleeding flush to the left edge with
   no container padding. The copy sits on the right half inside generous
   padding. The 4-stat strip remains container-bounded below the split.
   ========================================================================== */

.founder {
  background: var(--navy);
  color: var(--cream);
  position: relative;
  /* No vertical padding on the section itself — the split owns the height. */
  padding: 0;
}

/* --- The full-bleed split -------------------------------------------------- */
.founder-split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  /* width is implicit 100% — deliberately NOT inside a .container */
}
@media (min-width: 880px) {
  .founder-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(560px, 72vh, 760px);
  }
}

/* Media column — flush to the left viewport edge.
   Important: reset the browser default <figure> margin (16px 40px) so the image
   actually bleeds edge-to-edge. */
.founder-media {
  position: relative;
  margin: 0;
  padding: 0;
  background: var(--navy-deep, #050912);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.founder-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 880px) {
  .founder-media {
    aspect-ratio: auto;
    height: 100%;
  }
}
.founder-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor Nick to the left side of the crop on desktop; centered on mobile */
  object-position: 30% center;
  filter: contrast(1.02);
}
@media (min-width: 880px) {
  .founder-media-img { object-position: 38% center; }
}
/* Subtle navy-to-transparent gradient on the right edge of the photo, so the
   image visually melts into the navy copy column on desktop instead of cutting
   off hard. Cream-on-navy still gets enough contrast. */
.founder-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(10, 18, 38, 0) 0%,
    rgba(10, 18, 38, 0) 65%,
    rgba(10, 18, 38, 0.55) 92%,
    rgba(10, 18, 38, 0.95) 100%
  );
}
@media (max-width: 879px) {
  /* Vertical fade on mobile so the copy below feels connected to the image */
  .founder-media::after {
    background: linear-gradient(
      180deg,
      rgba(10, 18, 38, 0) 0%,
      rgba(10, 18, 38, 0) 70%,
      rgba(10, 18, 38, 0.85) 100%
    );
  }
}

/* Copy column — right half, generous interior padding */
.founder-copy {
  padding: 64px 24px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
}
@media (min-width: 880px) {
  .founder-copy {
    padding: 80px clamp(40px, 6vw, 96px) 80px clamp(40px, 5vw, 72px);
    max-width: none;
    margin: 0;
  }
}
@media (min-width: 1280px) {
  .founder-copy {
    padding-left: clamp(56px, 5vw, 96px);
    padding-right: clamp(72px, 8vw, 160px);
  }
}
.founder .section-eyebrow {
  color: var(--signal-red);
  margin-bottom: 14px;
}
.founder-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  margin: 0 0 28px;
  max-width: 18ch;
  color: var(--cream);
}
.founder-pullquote {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.32;
  margin: 0 0 28px;
  padding-left: 18px;
  border-left: 3px solid var(--signal-red);
  color: var(--cream);
  max-width: 28ch;
}
.founder-body {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(250, 247, 242, 0.86);
  margin: 0 0 18px;
  max-width: 52ch;
}
@media (min-width: 1280px) {
  .founder-body { font-size: 18px; }
}
.founder-signature {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.7);
  margin: 28px 0 28px;
}
.founder-signature strong {
  display: block;
  color: var(--cream);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  letter-spacing: 0.06em;
}
.founder-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--signal-red);
  transition: color 160ms ease, border-color 160ms ease, gap 160ms ease;
}
.founder-cta:hover,
.founder-cta:focus-visible { color: var(--signal-red); gap: 14px; }
.founder-cta-arrow { font-size: 16px; line-height: 1; }

/* --- /about page-specific layout ---------------------------------------- */
.about-hero {
  padding: 140px 0 72px;
  background: var(--cream);
  color: var(--navy);
}
.about-hero .container { max-width: 880px; }
.about-hero .section-eyebrow { color: var(--signal-red); margin-bottom: 18px; }
.about-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  max-width: 14ch;
}
.about-hero-lede {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
  color: var(--navy);
  max-width: 22ch;
  margin: 0 0 16px;
  padding-left: 18px;
  border-left: 3px solid var(--signal-red);
}

.about-body {
  background: var(--cream);
  color: var(--navy);
  padding: 24px 0 96px;
}
.about-body .container { max-width: 720px; }
.about-body p {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.72;
  color: var(--navy);
  margin: 0 0 24px;
}
.about-body p.about-emphasis {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  color: var(--navy);
  margin: 36px 0;
  padding-left: 18px;
  border-left: 3px solid var(--signal-red);
}
.about-signoff {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(10, 18, 38, 0.12);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.about-signoff strong {
  display: block;
  color: var(--navy);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* About — closing CTA band (navy) */
.about-cta {
  padding: 80px 0 96px;
  background: var(--navy);
  color: var(--cream);
  text-align: center;
}
.about-cta .container { max-width: 720px; }
.about-cta-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--cream);
}
.about-cta-sub {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(250, 247, 242, 0.85);
  margin: 0 0 32px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}