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

  /* ---- Zeldman typography pass (2026-07-29): type-scale tokens ----
     Fluid clamps + line-height/letter-spacing/measure ladders. Existing
     --text-* tokens above are kept for backward compatibility; new rules
     should reference these --type-* tokens instead. */
  --type-display-xl: clamp(3rem, 8vw, 6.5rem);   /* hero headlines */
  --type-display-l:  clamp(2rem, 4.5vw, 3.25rem); /* section H2 headlines */
  --type-display-m:  clamp(1.5rem, 2.6vw, 2.15rem); /* subsection H3 */
  --type-lede:       clamp(1.1rem, 1.5vw, 1.35rem); /* intro paragraph after headline */
  --type-body:       1rem;   /* paragraph */
  --type-small:      0.85rem; /* caption, footnote */
  --type-eyebrow:    0.72rem; /* section label above H2 */
  --type-nav:        0.95rem; /* nav / button text */

  --lh-display: 0.95;
  --lh-heading: 1.2;
  --lh-body:    1.65;
  --lh-small:   1.5;

  --ls-display:  -0.025em;
  --ls-heading:  -0.01em;
  --ls-eyebrow:  0.22em;

  --measure-body: 66ch;
  --measure-lede: 50ch;

  --ink: var(--navy);
  --ink-muted-on-navy: rgba(255, 255, 255, 0.75);

  --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, h5, h6 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--ls-heading); margin: 0; line-height: var(--lh-heading); }
/* Zeldman pass: base paragraph rule — body copy defaults to --type-body /
   ink-muted / measured line length. Pages and components that need a wider
   or narrower measure (cards, ledes, captions) override max-width locally. */
p {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  max-width: var(--measure-body);
  margin: 0 0 1em;
}
/* Tabular figures for numeric displays — step numbers, prices, phone
   numbers, dates. Apply via class since not every number should be tabular
   (e.g. running prose). */
.tabular-nums, .num, .line-nav .num { font-variant-numeric: tabular-nums lining-nums; }

.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);
}

/* Slim side drawer nav — replaces full-screen overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(5, 9, 18, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  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-drawer {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 88vw);
  background: #0A1226;
  color: var(--cream);
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 28px);
  box-shadow: 4px 0 24px rgba(0,0,0,0.32);
  overflow-y: auto;
}
.nav-overlay[data-open="true"] .nav-overlay-drawer {
  transform: translateX(0);
}

.nav-overlay-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--cream);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease;
  z-index: 2;
}
.nav-overlay-close:hover { background: rgba(255, 255, 255, 0.08); }

.nav-overlay-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding-right: 60px; /* leave room for close button */
}
.nav-overlay-logo img { height: 26px; width: auto; }

.nav-overlay-links {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
}
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-group-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.5);
  margin: 0 0 2px;
  padding: 0;
}
.nav-overlay-links a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 6px 0;
  border-radius: 6px;
  transition: color 200ms ease, transform 200ms ease;
  display: inline-block;
}
.nav-overlay-links a:hover,
.nav-overlay-links a:focus-visible {
  color: #E81820;
  transform: translateX(3px);
}
.nav-overlay-links .nav-overlay-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: #E81820;
  color: #fff;
  font-weight: 600;
  margin-top: 6px;
  transition: background 200ms ease;
}
.nav-overlay-links .nav-overlay-cta:hover {
  background: #C11319;
  color: #fff;
  transform: none;
}

/* ==========================================================
   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. */
.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);
}
/* Phone number — white pill so the header reads red / white / navy. */
.account-controls .account-phone {
  color: var(--navy);
  background: #FFFFFF;
  border: 1px solid rgba(10, 18, 38, 0.12);
  gap: 6px;
  box-shadow: 0 1px 4px rgba(10, 18, 38, 0.12);
}
.account-controls .account-phone:hover {
  background: #F2F0EB;
  border-color: rgba(10, 18, 38, 0.22);
}
.account-controls .account-phone .phone-icon {
  width: 15px; height: 15px;
  color: var(--navy);
  flex-shrink: 0;
}
.account-controls .account-cart {
  position: relative;
  width: 40px;
  min-width: 40px;
  padding: 0;
  justify-content: center;
  color: var(--navy);
  background: #FFFFFF;
  border: 1px solid rgba(10, 18, 38, 0.12);
  box-shadow: 0 1px 4px rgba(10, 18, 38, 0.12);
}
.account-controls .account-cart:hover {
  background: #F2F0EB;
  border-color: rgba(10, 18, 38, 0.22);
}
.account-controls .account-cart svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.account-cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--signal-red, #E81820);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(232, 24, 32, 0.28);
}
.account-cart-count[hidden] {
  display: none;
}
/* Authed identity chip — smaller, initials-only. */
.account-controls .account-signin.is-authed {
  min-width: 40px;
  width: 40px;
  padding: 0;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: var(--text-sm);
  text-transform: uppercase;
}
/* Primary sitewide CTA — the forward-conversion action. Red pill, always visible. */
.account-controls .account-cta {
  color: var(--cream);
  background: var(--signal-red, #E81820);
  border: 1px solid var(--signal-red, #E81820);
  box-shadow: 0 2px 10px rgba(232, 24, 32, 0.24);
}
.account-controls .account-cta:hover {
  background: #C11319;
  border-color: #C11319;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232, 24, 32, 0.34);
}
@media (max-width: 600px) {
  .floating-menu-btn {
    top: 10px;
    left: 10px;
    width: 42px;
    height: 42px;
  }
  .account-controls {
    top: 10px;
    right: 10px;
    gap: 6px;
  }
  .account-controls .account-cta,
  .account-controls .account-phone {
    display: none;
  }
  .account-controls a {
    height: 36px;
    padding: 0 12px;
    font-size: var(--text-xs);
  }
  .account-controls .account-cart {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }
}
@media (max-width: 480px) {
  .account-controls { top: 10px; right: 10px; }
  .account-controls a {
    height: 34px;
    padding: 0 10px;
  }
  .account-controls .account-portal {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .account-controls .account-cart {
    width: 34px;
    min-width: 34px;
  }
  .account-controls .account-cart svg {
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================
   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).
     Right edge is aligned to match the account controls (same clamp so
     it hugs the same margin as the 'My Account' button above). */
  top: clamp(64px, 7vw, 92px);
  right: clamp(var(--space-4), 2vw, var(--space-6));
  left: auto !important;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  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;
  /* +15% over the previous target so the wordmark reads bolder. Halo PNG
     includes ~8% glow padding on each side. */
  width: clamp(440px, 44vw, 735px);
}
@media (max-width: 480px) {
  .hero-mark { top: 58px; right: 12px; left: auto !important; }
  .hero-mark-img { width: min(58vw, 230px); }
}

/* 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;
  /* Vertical center alignment with the hamburger:
     The hamburger uses top: clamp(var(--space-4), 2vw, var(--space-6))
     which resolves to ~24px at desktop, and is 48px tall — so its
     center sits at y = top + 24. The logo wrapper is 72px tall, so to
     put its center on the same line we pin its top 12px above the
     hamburger's top. Using calc(var(--top) - 12px) keeps them locked
     together at every breakpoint. */
  top: calc(clamp(var(--space-4), 2vw, var(--space-6)) - 12px);
  /* 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;
  /* Chrome height was 48px when the logo image was 30px. Since the logo
     image is now the sitewide 72px, expand the wrapper so nothing gets
     clipped by the parent container. */
  height: 72px;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.legal-logo:hover { opacity: 0.8; }
.legal-logo img {
  display: block;
  /* Sitewide chrome brand-mark size. Historically some pages overrode
     this to 72px inline (Gallery, FAQ, Permits, Privacy, Terms,
     UL-Certified). The larger size is now the canonical header — every
     public page uses it via this rule alone. Per-page inline
     overrides have been removed so headers cannot drift. */
  height: 72px;
  width: auto;
}
@media (max-width: 600px) {
  /* Mobile chrome: hamburger shrinks to 42x42 at top:10, left:10, so
     center is at y=31. Logo wrapper is 42px (centered on hamburger),
     image is 32px tall so it fits between the hamburger and the
     .account-controls cluster (cart + Sign in + My Account) without
     overlapping on typical phone viewports. */
  .legal-logo {
    top: 10px;
    height: 42px;
    left: 60px; /* hamburger ends at ~52; give an 8px gap */
  }
  .legal-logo img { height: 32px; }
}
@media (max-width: 480px) {
  /* Very narrow phones: further shrink the wordmark so it never runs
     into the account cluster. At 480px viewport the wordmark image at
     26px tall is 26 * (3000/795) ≈ 98px wide, comfortably fitting
     between the ~52px hamburger and the ~170px start of account. */
  .legal-logo img { height: 26px; }
}
@media (max-width: 380px) {
  /* Smallest phones: hide the wordmark entirely rather than crowd the
     account cluster. Hamburger + account cluster remain. */
  .legal-logo { display: none; }
}
.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);
}

/* Inline hero wordmark variant — sits directly above .hero-actions in the
   bottom-left of the hero, left edge aligned to the first CTA button.
   Cancels the default top-right absolute positioning of .hero-mark.

   Spacing: buttons are tucked right under the wordmark tagline
   (var(--space-1) ≈ 4px) so the logo and CTAs read as one lockup. The
   'Scroll to explore three product lines' hint has been removed. */
.hero-mark.hero-mark--inline {
  position: static !important;
  top: auto;
  right: auto;
  left: auto !important;
  z-index: auto;
  align-self: flex-start;
  justify-content: flex-start;
  margin: 0 0 var(--space-1) 0;
  padding: 0;
  line-height: 0; /* remove inline gap so the A/C left edge = image left edge */
}
.hero-mark.hero-mark--inline .hero-mark-img {
  display: block;
  /* +60% again on top of the previous clamp(512px, 54vw, 832px). */
  width: clamp(819px, 86.4vw, 1331px);
  max-width: 100%;
  height: auto;
  /* Collapse the V3 white PNG's transparent bottom padding + a little
     extra so the visible 'AMERICA'S STOREFRONT SIGN COMPANY' baseline
     snaps right above the button row. margin-bottom percentages resolve
     against the container's inline size; -7% of container width lands
     the tagline within a few px of the button caps. */
  margin: 0 0 -7% 0;
}
@media (max-width: 480px) {
  .hero-mark.hero-mark--inline { top: auto; right: auto; }
  .hero-mark.hero-mark--inline .hero-mark-img { width: min(94vw, 820px); }
}

/* "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;
  }
}
@media (max-width: 480px) {
  .how-it-works-actions--hubs {
    width: 100%;
    max-width: 100%;
    gap: 8px;
    overflow: hidden;
  }
  .how-it-works-actions--hubs .hub-cta {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.62rem 0.75rem;
    font-size: clamp(0.78rem, 3.8vw, 0.88rem);
    letter-spacing: 0.035em;
    border-radius: 12px;
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .how-it-works-actions--hubs .hub-cta {
    min-height: 42px;
    padding: 0.58rem 0.6rem;
    font-size: 0.76rem;
    letter-spacing: 0.02em;
  }
}

.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(--type-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  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;
  align-items: flex-start;
  padding: clamp(var(--space-6), 4vw, var(--space-16));
  pointer-events: none;
  z-index: 2;
  /* Owner directive 2026-07-29 v2: 'Move the entire text block to the
     bottom-left corner. Big solid dark corner-zone, only feathered on the
     inside edges (top + right). Outer edges (bottom + left) go to the
     photo edge. Like a movie-poster credits corner.'

     Implemented as a linear-gradient from the bottom-left corner: ~90%
     opaque navy at the corner, dropping to 0% by roughly 55% along the
     diagonal so the photo bleeds through cleanly on the top-right two
     thirds of the frame. No border-radius, no small bubble — the dark
     zone is a big anchored corner element. */
  background: linear-gradient(
    to top right,
    rgba(5, 9, 18, 0.90) 0%,
    rgba(5, 9, 18, 0.78) 18%,
    rgba(5, 9, 18, 0.55) 34%,
    rgba(5, 9, 18, 0.28) 48%,
    rgba(5, 9, 18, 0.08) 60%,
    rgba(5, 9, 18, 0) 72%
  );
}

/* All three (Beacon, Lobby, Motion) get the same treatment now — the
   corner-zone approach works uniformly because the bottom-left corner
   of every product-line photo is intentionally free of important detail
   (storefront row, coffee shop, work yard). */
#crisplobby .line-overview-overlay,
#crispbeacon .line-overview-overlay,
#crispmotion .line-overview-overlay {
  padding: clamp(var(--space-6), 4vw, var(--space-16));
  background: linear-gradient(
    to top right,
    rgba(5, 9, 18, 0.90) 0%,
    rgba(5, 9, 18, 0.78) 18%,
    rgba(5, 9, 18, 0.55) 34%,
    rgba(5, 9, 18, 0.28) 48%,
    rgba(5, 9, 18, 0.08) 60%,
    rgba(5, 9, 18, 0) 72%
  );
}

#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: 620px;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

/* Light pillow behind the lockup removed 2026-07-29 per owner directive.
   Corner-gradient alone now handles all contrast. */
.line-brand.line-brand--lockup {
  position: relative;
}
.line-brand-lockup-img {
  position: relative;
  z-index: 1;
}
.line-eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
.line-brand {
  font-size: var(--type-display-xl);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  margin: 0;
  color: var(--cream);
  text-shadow: 0 2px 28px rgba(0,0,0,0.55);
  font-weight: 700;
}
.line-tagline {
  font-size: var(--type-display-m);
  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.55);
}
.line-sub {
  font-size: var(--type-lede);
  font-weight: 500;
  line-height: 1.35;
  color: rgba(250, 247, 242, 0.92);
  max-width: var(--measure-lede);
  margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* --- 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(5, 1fr); gap: var(--space-10); padding: var(--space-8) var(--space-8); }
}
@media (min-width: 768px) and (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 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); }

/* Follow column: icon + label rows (each on own line) */
.footer-follow .footer-social {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 4px 0 !important;
  color: rgba(250, 247, 242, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
  width: fit-content;
}
.footer-follow .footer-social svg { flex-shrink: 0; opacity: 0.9; }
.footer-follow .footer-social:hover { color: var(--orange-night); }
.footer-follow .footer-social:hover svg { opacity: 1; }
.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;
  /* Page-level H1 — uses the display-xl scale, capped slightly below its
     6.5rem ceiling to match this component's existing proportions. */
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  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; }

/* Valet shield badge above the eyebrow on /contact.
   Sized large to anchor the left column visually. On desktop the badge
   sits above 'VALET QUOTE SERVICE' and pushes the headline down; on
   mobile it centers with the copy so the layout stays tidy. */
.contact-hero-badge {
  display: block;
  width: clamp(160px, 22vw, 240px);
  height: auto;
  margin: 0 0 var(--space-6);
  filter: drop-shadow(0 10px 24px rgba(20, 22, 30, 0.18));
}
@media (max-width: 720px) {
  .contact-hero-badge {
    margin-left: auto;
    margin-right: auto;
  }
}

.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(--type-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  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-v3/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: var(--font-display);
  font-weight: 700;
  font-size: var(--type-display-l);
  line-height: 1.08;
  letter-spacing: var(--ls-heading);
  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: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: rgba(250, 247, 242, 0.86);
  margin: 0 0 18px;
  max-width: var(--measure-body);
}
@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: var(--font-display);
  font-weight: 700;
  /* Page-level H1, but on a narrow 880px container — capped below the full
     --type-display-xl ceiling (6.5rem) to avoid overflow/wrap regressions.
     Uses the same fluid-clamp pattern and letter-spacing as the token. */
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0 0 24px;
  max-width: 14ch;
}
.about-hero-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--type-display-m);
  line-height: 1.3;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 0 16px;
  padding-left: 18px;
  border-left: 3px solid var(--signal-red);
}

.about-founder-photo {
  margin: 0 auto clamp(32px, 5vw, 56px);
  max-width: 720px;
}
.about-founder-photo picture,
.about-founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.about-founder-photo figcaption {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  color: #6b6b66;
  margin-top: 12px;
  text-align: center;
  font-style: italic;
}

.about-body {
  background: var(--cream);
  color: var(--navy);
  padding: 24px 0 96px;
}
.about-body .container { max-width: 720px; }
.about-body p {
  font-family: var(--font-body);
  font-size: var(--type-lede);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  max-width: var(--measure-body);
  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: var(--font-display);
  font-weight: 700;
  font-size: var(--type-display-l);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  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;
}


/* ==========================================================
   Valet Quote Service — /contact form additions
   ---------------------------------------------------------
   The Valet Quote form lives inside .contact-form-wrap, whose
   overrides swap the base dark-mode form to a cream/navy palette
   (see rules above). These styles layer on: a two-column grid
   for basic contact fields, product-line multi-select cards, and
   a photo-upload block. All colors resolve against the light theme.
   ========================================================== */
.contact-form-wrap .valet-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-form-wrap .valet-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.contact-form-wrap .valet-field-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .contact-form-wrap .valet-form-grid { grid-template-columns: 1fr; }
}

/* Fieldset — product line multi-select */
.contact-form-wrap .valet-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.contact-form-wrap .valet-fieldset legend {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 4px;
  padding: 0;
}
.contact-form-wrap .valet-fieldset-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-muted);
}
.contact-form-wrap .valet-checkgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .contact-form-wrap .valet-checkgrid { grid-template-columns: 1fr; }
}
.contact-form-wrap .valet-check {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 44px 14px 16px;
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--navy);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.contact-form-wrap .valet-check:hover {
  border-color: rgba(232, 24, 32, 0.5);
  background: var(--surface);
}
.contact-form-wrap .valet-check input[type="checkbox"] {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  accent-color: #E81820;
  cursor: pointer;
}
.contact-form-wrap .valet-check:has(input:checked) {
  border-color: #E81820;
  background: rgba(232, 24, 32, 0.06);
  box-shadow: 0 0 0 2px rgba(232, 24, 32, 0.12);
}
.contact-form-wrap .valet-check .valet-check-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--navy);
  text-transform: none;
}
.contact-form-wrap .valet-check .valet-check-sub {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

/* Photo upload block */
.contact-form-wrap .valet-photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px dashed var(--border);
}
.contact-form-wrap .valet-photos-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-form-wrap .valet-photos-label .valet-photos-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.contact-form-wrap .valet-photos-label .valet-photos-hint {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
.contact-form-wrap .valet-photos input[type="file"] {
  font-family: inherit;
  color: var(--navy);
  font-size: 13px;
  background: transparent;
  border: 0;
  padding: 0;
}
.contact-form-wrap .valet-photos input[type="file"]:focus {
  box-shadow: none;
  outline: 2px solid rgba(232, 24, 32, 0.4);
  outline-offset: 4px;
}
.contact-form-wrap .valet-photos input[type="file"]::file-selector-button {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  padding: 8px 14px;
  margin-right: 12px;
  border-radius: 999px;
  border: 0;
  background: var(--navy);
  color: var(--cream);
  cursor: pointer;
  transition: background 180ms ease;
}
.contact-form-wrap .valet-photos input[type="file"]::file-selector-button:hover {
  background: var(--orange);
}
.contact-form-wrap .valet-photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.contact-form-wrap .valet-photo-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}
.contact-form-wrap .valet-photo-chip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.contact-form-wrap .valet-photo-chip span {
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

/* Non-image artwork chip (PDF/AI/EPS/SVG) — the browser can't render these
   inline, so the JS renders a filename-extension badge in place of the
   thumbnail. Same aspect ratio + border as the image chip so the row of
   attachments stays visually consistent. */
.contact-form-wrap .valet-photo-chip-icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, #eeeae2);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* "(optional)" suffix on the artwork field label — softer than the required
   photo title so the eye reads it as an optional slot. */
.contact-form-wrap .valet-photos-title .valet-photos-optional {
  font-weight: 400;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

/* Spacing between the photos block and the artwork block so they read as
   two distinct upload slots rather than one giant field. */
.contact-form-wrap .valet-artwork { margin-top: var(--space-4); }

/* ==========================================================
   .legal-logo--on-dark  — white-knockout variant for the top-left
   brand mark when the page sits over a dark hero (the homepage,
   and any future page with a dark full-bleed top). Interior
   pages keep the default full-color .legal-logo look on cream.
   ========================================================== */
.legal-logo--on-dark img {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

/* ==========================================================================
   V3 PRODUCT-FAMILY LOCKUPS
   --------------------------------------------------------------------------
   Rules for rendering the Beacon / Lobby / Motion 3D lockup PNGs in the
   three surface types they appear in on the homepage:

     1. .line-brand--lockup  — the big scroll-driven hero headline in each
        product-line section (replaces the CrispBeacon / CrispLobby /
        CrispMotion text wordmark on cream cards).
     2. .line-card-lockup    — the compact product-lines-overview card grid
        (replaces the old colored dot .line-mark + <h2> text combo).
     3. .hub-cta--lockup     — the three side-by-side hub CTA buttons at the
        bottom of the "how it works" section (replaces the red text pill
        with a cream-carded lockup CTA).

   The lockup images are cream-backgrounded PNGs, so their host surfaces are
   cream (or transparent) to blend seamlessly. Border + shadow give the
   button variant tactile lift; hover state gently deepens the shadow.
   ========================================================================== */

/* 1. Big line-section headline lockup ------------------------------------ */
.line-brand.line-brand--lockup {
  /* Neutralize the default type-heavy .line-brand rule so the image sits on
     its own without inherited font-size or margin from the h2 baseline. */
  margin: 0 0 var(--space-3);
  font-size: 0;
  line-height: 0;
}
.line-brand-lockup-img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  /* The reference PNGs are transparent-background floating lockups with a
     baked-in soft drop shadow, so no blend mode is needed. The extra padding
     added by the drop-shadow halo is trimmed with negative margins so the
     visible mark sits closer to the eyebrow / tagline above and below. */
  margin: -4% 0 -3%;
}
@media (max-width: 720px) {
  .line-brand-lockup-img { max-width: 260px; }
}

/* 2. Product-lines-overview card lockup ---------------------------------- */
.line-card-lockup {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  /* Trim the drop-shadow halo baked into the PNG so the mark sits closer
     to the descriptor <p> below it inside the card. */
  margin: 0 auto var(--space-2);
  margin-top: -3%;
  margin-bottom: -2%;
}
@media (max-width: 720px) {
  .line-card-lockup { max-width: 260px; }
}

/* 3. Hub-CTA button lockup ----------------------------------------------- */
.how-it-works-actions--hubs .hub-cta--lockup {
  /* Override the red pill styling — a lockup button needs a cream card
     surface so the PNG's own cream background merges with the button. */
  background: var(--cream, #FAF7F2);
  color: var(--navy, #0A1226);
  border: 1px solid rgba(10, 18, 38, 0.14);
  box-shadow: 0 6px 18px rgba(10, 18, 38, 0.08),
              inset 0 -2px 0 rgba(10, 18, 38, 0.04);
  padding: var(--space-3);
  min-height: 96px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0; /* kill any residual whitespace text from the button */
  line-height: 0;
}
.how-it-works-actions--hubs .hub-cta--lockup img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  /* Trim the drop-shadow halo baked into the PNG so the lockup fills the
     button surface tightly. */
  margin: -2% auto;
}
.how-it-works-actions--hubs .hub-cta--lockup:hover,
.how-it-works-actions--hubs .hub-cta--lockup:focus-visible {
  background: var(--cream, #FAF7F2);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10, 18, 38, 0.14),
              inset 0 -2px 0 rgba(10, 18, 38, 0.06);
}
.how-it-works-actions--hubs .hub-cta--lockup:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(10, 18, 38, 0.10),
              inset 0 -1px 0 rgba(10, 18, 38, 0.08);
}

/* ==========================================================
   Bug 2 — Header consistency (Owner directive, verbatim):
   "The headers are different after you go through the builder, the
   first page looks okay, but after you get past the builder and you
   save it into your cart, when you go in to shipping and into the
   proofing, the headers don't look right. So those headers need to be
   consistent across the board in the entire page."

   Canonical reference: the Beacon builder's header
   (crispsign-builder-beacon builder-v2.css .v2-topbar + site-chrome.css
   .legal-logo/.account-controls) — a compact 64px real (non-floating)
   header bar: dark navy circular hamburger, small single-line logo
   lockup, spacer, right-aligned account/cart cluster.

   header.topbar (Install Hub, Shipping Hub, Proofing Hub, Cart,
   accessories, and the /preview/* funnel pages) previously had NO base
   layout CSS at all anywhere in this repo — it rendered on browser
   defaults only, with the logo displayed at its raw HTML width/height
   attribute (450x119, ~3x the Builder's 34px-tall logo) and an unstyled
   <nav> for the account/cart links. This block gives it the same real
   (non-floating, in-flow) header bar treatment as the Builder, WITHOUT
   touching the unrelated .floating-menu-btn / .nav-overlay rules above
   (those stay exactly as they are for every other page on the site —
   this is scoped entirely under .topbar, matching how beacon scopes its
   override under .v2-topbar).
   ========================================================== */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 60;
}
/* Un-float the hamburger so it sits inline in the real header bar, like
   the Builder's .v2-topbar .floating-menu-btn — solid navy circle,
   normal flex flow, not a fixed overlay pill. */
.topbar .floating-menu-btn {
  position: relative;
  top: auto;
  left: auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--navy);
  border: none;
  flex: 0 0 auto;
}
.topbar .floating-menu-btn span { background: #fff; }
/* Logo: single small lockup, matching the Builder's 34px-tall mark
   (was rendering at the raw 450x119 HTML attributes — ~3x too big). */
.topbar-mark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.topbar-mark img { height: 34px !important; width: auto !important; max-width: 160px; display: block; }
/* Spacer pushes the account/cart cluster to the right, exactly like the
   Builder's .v2-topbar-spacer. */
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.topbar-signin {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease;
}
.topbar-signin:hover { background: rgba(10, 18, 38, 0.05); border-color: var(--navy); }
.topbar-signin.is-authed { border-color: var(--navy); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
/* Cart: same round white icon-pill treatment as the Builder's
   .account-controls .account-cart (a circular button, not the previous
   solid-navy rectangular "Cart" pill). */
.topbar-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 0;
  box-shadow: 0 4px 12px rgba(10, 18, 38, 0.08);
  transition: background 150ms ease, border-color 150ms ease;
}
.topbar-cart::before {
  content: '';
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h8.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h8.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.topbar-cart:hover { background: var(--bg); border-color: var(--navy); }
.topbar-cart .account-cart-count { font-size: 11px; }
@media (max-width: 560px) {
  .topbar { height: 56px; padding: 0 10px; gap: 8px; }
  .topbar .floating-menu-btn { width: 36px; height: 36px; }
  .topbar-mark img { height: 26px; }
  .topbar-signin { height: 32px; padding: 0 10px; font-size: 13px; }
  .topbar-cart { width: 36px; height: 36px; min-width: 36px; }
}

/* ==========================================================
   CRISP CORPORATE BANNER COMPONENTS
   Ships three banners: sitewide top strip, homepage flagship,
   product-hub in-page card. Route multi-location prospects to
   the /corporate landing page.
   ========================================================== */

.cc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  letter-spacing: 0.005em; text-decoration: none;
  border: none; cursor: pointer;
  transition: all .2s ease; white-space: nowrap;
}
.cc-btn-primary { background: var(--signal-red); color: white; }
.cc-btn-primary:hover { filter: brightness(0.92); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(232, 24, 32, 0.28); }
.cc-btn-cream { background: var(--cream); color: var(--navy); }
.cc-btn-cream:hover { filter: brightness(0.96); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(250, 247, 242, 0.25); }

/* #1 SITEWIDE ANNOUNCEMENT BAR */
.cc-topbar {
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-body);
  border-bottom: 1px solid rgba(250, 247, 242, 0.12);
  position: relative; z-index: 5;
}
.cc-topbar-inner {
  /* 2026-08-31: scaled +55% for legibility (Nick — the old 36px logo
     was too small to read, and 'Corporate' next to it was near
     invisible). Logo 36 -> 56, copy 13 -> 20, eyebrow 11 -> 17,
     padding 10 -> 16, gap 16 -> 20. Mobile override below preserves
     the tighter layout at narrow widths. */
  max-width: 1400px; margin: 0 auto;
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap;
  font-size: 20px; letter-spacing: 0.005em;
}
.cc-topbar-eyebrow {
  color: var(--signal-red); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 17px;
}
.cc-topbar-logo { height: 56px; width: auto; display: inline-block; vertical-align: middle; }
.cc-topbar-copy { color: var(--cream); opacity: 0.95; }
.cc-topbar-cta {
  color: var(--cream); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--signal-red);
  padding-bottom: 2px; transition: color .15s;
}
.cc-topbar-cta:hover { color: var(--signal-red); }
.cc-topbar-cta::after { content: "  \2192"; opacity: 0.8; }
@media (max-width: 720px) {
  /* Mobile: keep the larger logo but tighten the surrounding text so
     the whole banner still fits on 2-3 wrapped lines on a phone. */
  .cc-topbar-inner { gap: 10px; text-align: center; padding: 14px 16px; font-size: 16px; }
  .cc-topbar-logo { height: 48px; }
  .cc-topbar-eyebrow { font-size: 14px; }
}

/* #2 HOMEPAGE FLAGSHIP BANNER — NAVY */
.cc-flagship {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(72px, 9vw, 140px) 24px;
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
}
.cc-flagship::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--signal-red);
}
.cc-flagship-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px; align-items: center;
  position: relative;
}
.cc-flagship-lockup {
  display: block;
  width: clamp(240px, 32vw, 380px);
  height: auto; margin-bottom: 28px;
}
.cc-flagship-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.cc-flagship-eyebrow::before {
  content: ""; display: inline-block; width: 44px; height: 2px;
  background: var(--signal-red);
}
.cc-flagship-eyebrow-text {
  font-size: var(--type-eyebrow, 0.72rem);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--signal-red);
}
.cc-flagship h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--type-display-l);
  line-height: 1.08; letter-spacing: -0.02em;
  color: var(--cream); margin: 0 0 22px;
}
.cc-flagship h2 .accent { color: var(--signal-red); }
.cc-flagship-deck {
  font-size: var(--type-lede);
  line-height: 1.55;
  color: var(--cream); opacity: 0.85;
  margin: 0 0 32px; max-width: 560px;
}
.cc-flagship-cta-row {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.cc-flagship-trust {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(250, 247, 242, 0.15);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); opacity: 0.7; font-weight: 500;
  max-width: 560px;
}
.cc-flagship-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
}
.cc-flagship-visual img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cc-flagship-stat {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  background: var(--cream);
  padding: 20px 24px; border-radius: 4px;
  border-left: 3px solid var(--signal-red);
  display: flex; flex-direction: column; gap: 4px;
}
.cc-flagship-stat-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; color: var(--navy); line-height: 1;
}
.cc-flagship-stat-label {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy); opacity: 0.7; font-weight: 500;
}
@media (max-width: 900px) {
  .cc-flagship-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* #3 PRODUCT-HUB BANNER — CREAM */
.cc-hub {
  background: var(--cream);
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 48px auto;
  max-width: 1200px;
  padding: 32px 40px;
  display: flex; align-items: center; gap: 32px;
  font-family: var(--font-body);
  position: relative;
}
.cc-hub::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--signal-red);
  border-radius: 6px 0 0 6px;
}
.cc-hub-lockup {
  width: 180px; height: auto; flex-shrink: 0;
}
.cc-hub-body { flex: 1; min-width: 0; }
.cc-hub h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--navy); margin: 0 0 6px;
}
.cc-hub h3 .accent { color: var(--signal-red); }
.cc-hub-deck {
  font-size: 14px; line-height: 1.5;
  color: var(--navy); opacity: 0.75;
  margin: 0;
}
.cc-hub-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  text-decoration: none; white-space: nowrap;
  background: var(--signal-red); color: white;
  transition: all .2s ease;
}
.cc-hub-cta:hover { filter: brightness(0.92); transform: translateY(-1px); }
.cc-hub-cta::after { content: "\2192"; }
@media (max-width: 720px) {
  .cc-hub { flex-direction: column; align-items: flex-start; padding: 28px 24px; gap: 20px; }
  .cc-hub-lockup { width: 160px; }
}