/* ==========================================================
   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); }

/* ==========================================================
   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. */
.hero-mark {
  position: absolute !important;
  top: clamp(20px, 2.5vw, 40px);
  right: clamp(20px, 2.5vw, 44px);
  left: auto !important;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  pointer-events: auto;
  filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.35));
  transition: opacity 200ms ease;
}
.hero-mark:hover { opacity: 0.85; }
.hero-mark-img {
  display: block;
  height: auto;
  width: clamp(220px, 22vw, 360px);
  /* The PNG lockup carries its own colors; the SVG version uses navy paths
     that we don't tint. Just constrain size cleanly. */
}
@media (max-width: 480px) {
  .hero-mark { top: 16px; right: 16px; left: auto !important; }
  .hero-mark-img { width: 170px; }
}
.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);
}
.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-brand {
  font-size: clamp(1.8rem, 3.6vw, 3rem) !important;
  line-height: 1.05 !important;
}
#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);
}

/* ---------- BeaconCarved material paths ---------- */
.carved-materials {
  background:
    radial-gradient(900px 360px at 100% 0%, rgba(232, 82, 27, 0.08), transparent 60%),
    var(--cream);
  padding: clamp(80px, 10vw, 130px) 0;
  border-bottom: 1px solid var(--border);
}
.carved-materials-lede {
  max-width: 70ch;
  margin: calc(-1 * var(--space-7)) 0 var(--space-10);
  color: var(--ink-muted);
  font-size: var(--text-lg);
  line-height: 1.6;
}
.carved-material-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  align-items: stretch;
}
@media (max-width: 899px) {
  .carved-material-grid { grid-template-columns: 1fr; }
}
.carved-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 48px rgba(12, 20, 35, 0.06);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.carved-card:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.carved-card-media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--cream);
}
.carved-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.carved-card:hover .carved-card-media img { transform: scale(1.03); }
.carved-card-body {
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.carved-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;
}
.carved-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
  color: var(--navy);
  margin: 0;
}
.carved-card p {
  margin: 0;
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.58;
}
.carved-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);
}
.carved-card .detail-meta li {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.carved-card .detail-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--orange);
  color: var(--cream);
  align-self: flex-start;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.carved-card .detail-cta:hover {
  background: var(--navy);
  color: var(--cream);
  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;
}

.showcase-halolit-stage {
  position: relative;
  width: 100%;
  /* Match the source 16:9 ratio so the image never crops awkwardly */
  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;
}

/* Dark vignette on the right so text reads cleanly without obscuring the logo on the left */
.showcase-halolit-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(5, 8, 19, 0)   0%,
    rgba(5, 8, 19, 0)   42%,
    rgba(5, 8, 19, 0.55) 65%,
    rgba(5, 8, 19, 0.82) 100%
  );
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(24px, 4vw, 64px) clamp(24px, 6vw, 96px);
}

.showcase-halolit-copy {
  max-width: 440px;
  color: var(--cream, #FAF7F2);
  text-align: left;
}

.showcase-halolit-eyebrow {
  color: var(--signal-red, #E81820);
  margin: 0 0 12px;
}

.showcase-halolit-headline {
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--cream, #FAF7F2);
}

.showcase-halolit-sub {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  color: rgba(250, 247, 242, 0.82);
  margin: 0 0 24px;
}

.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: stack copy below the image instead of overlaying.
   The image needs to be readable; on small screens an overlay
   on top of the logo would crowd both elements. */
@media (max-width: 720px) {
  .showcase-halolit-stage {
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .showcase-halolit-img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .showcase-halolit-overlay {
    position: relative;
    inset: auto;
    background: #050813;
    justify-content: flex-start;
    padding: 32px 24px 48px;
  }

  .showcase-halolit-copy {
    max-width: 100%;
  }
}