/* Veteran Vends — site chrome around the locked hero.
   Palette: Blackout / Gunmetal / Brushed Steel / Dress Silver / Payton Tan / Scarlet.
   Radius: 0 on cards, panels, frames, media. Pill (9999px) only on CTAs + badges.
   Ferrari craft: type + spacing only. Motion: 400ms+, one direction (up), reduced-motion safe. */

:root {
  --blackout: #0A0908;
  --gunmetal: #2B2723;
  --steel: #C4B39F;
  --silver: #E9E4DC;
  /* Payton's tan, off the CMYK brand sheet he sent 2026-08-26, chosen by him
     over the old Medal Gold and over a red. Measures 7.5:1 on --blackout —
     the gold it replaced was 6.6. --gold-deep below is still his LOGO ink and
     is a different colour on purpose. */
  --gold: #BA9971;
  /* Payton's own gold, sampled off the logo master he signed off on
     2026-08-25. Darker and browner than --gold, which was picked for
     buttons on black; this one was picked for ink on a white card. The
     lockup carries it in its own pixels, so nothing has to paint it — the
     token exists so anything sitting NEXT to the mark can match it. */
  --gold-deep: #7C5E24;
  --gold-deep-rgb: 124, 94, 36;
  --scarlet: #B31005;
  --gold-hover: #CBAE8A;   /* --gold lifted, for :hover on CTAs */
  --gold-lift:  #DAC9B3;   /* --gold lifted hard, for the accent sitting OVER the
                              hero video where the lit shelves eat a mid tone.
                              12.3:1 on --blackout, matching what the old gold's
                              hand-picked #E6C892 was doing before the tan. */
  --gold-rgb: 186, 153, 113;
  --steel-rgb: 196, 179, 159;
  --silver-rgb: 233, 228, 220;
  --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fade: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --nav-h: 72px;

  --text-caption: 11px;
  --text-body-sm: 12px;
  --text-body: 13px;
  --tracking-display: 0.005em;
  --tracking-body: 0.015em;
  --tracking-label: 0.083em;
  --tracking-micro: 0.091em;
  --leading-small: 1.78;

  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-44: 44px;
  --spacing-50: 50px;
  --spacing-54: 54px;
  --spacing-60: 60px;
  --spacing-123: 123px;
}

html { scroll-padding-top: var(--nav-h); }

/* ---- Ferrari type whisper on interface (not hero display) ---- */
.site-nav,
.call-now,
.btn-primary,
.btn-ghost,
.btn-beam,
.text-link,
.section-badge,
.eyebrow-rule,
.spec-index,
.machine-card h3,
.spec-steps h3,
.fit-block h3,
.qualify-col h3,
.badge-row,
.footer-copy,
.place-form label,
.nav-link {
  font-weight: 500;
}

/* =====================================================================
   Liquid glass (MotionSites structure, brand-retinted)
   Dress Silver 233,228,220 / Brushed Steel 196,179,159
   ===================================================================== */
.liquid-glass {
  background: rgba(196, 179, 159, 0.06);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 1px 1px rgba(233, 228, 220, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(233, 228, 220, 0.45) 0%,
    rgba(196, 179, 159, 0.15) 20%,
    rgba(196, 179, 159, 0) 40%,
    rgba(196, 179, 159, 0) 60%,
    rgba(196, 179, 159, 0.15) 80%,
    rgba(233, 228, 220, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.liquid-glass-strong {
  background: rgba(196, 179, 159, 0.06);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 9999px;
  box-shadow:
    4px 4px 4px rgba(10, 9, 8, 0.05),
    inset 0 1px 1px rgba(233, 228, 220, 0.15);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(233, 228, 220, 0.5) 0%,
    rgba(196, 179, 159, 0.2) 20%,
    transparent 40%,
    transparent 60%,
    rgba(196, 179, 159, 0.2) 80%,
    rgba(233, 228, 220, 0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.vv-section h2,
.overlay-card h2 {
  font-weight: 500;
  letter-spacing: 0.04em;
  max-width: 22ch;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  border-radius: 9999px;
  padding: var(--spacing-5) 14px;
  margin-bottom: var(--spacing-16);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(196, 179, 159, 0.06);
  box-shadow: inset 0 1px 1px rgba(233, 228, 220, 0.1);
}
.section-badge .rule {
  width: 24px;
  height: 1px;
  background: var(--scarlet);
}

.overlay-prose p,
.who-copy p,
.fit-block p,
.qualify-col p,
.about-copy p {
  font-size: 15px;
  line-height: 1.78;
  letter-spacing: var(--tracking-body);
}

/* =====================================================================
   Sticky nav — glass, always on, compact on scroll. Does not pin/scrub.
   ===================================================================== */
/* No box on the header — clean like DPC. Kills the liquid-glass fill,
   blur, inset shadow, and hairline on the nav itself. */
.site-nav.liquid-glass {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}
.site-nav.liquid-glass::before { display: none; }

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: 20px clamp(16px, 4vw, 32px) 16px;
  pointer-events: none;
  transition: padding 0.5s var(--ease-out-quart);
}
.site-nav > * { pointer-events: auto; }

.site-nav__glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  opacity: 0.35;
  transition: opacity 0.5s var(--ease-out-quart), backdrop-filter 0.5s ease;
}
.site-nav.is-scrolled {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* Scrolled state stays clean too — no blur, no tint, no box. */
.site-nav.is-scrolled .site-nav__glass {
  opacity: 0;
}

.site-nav__brand,
.site-nav__links,
.site-nav__toggle {
  position: relative;
  z-index: 1;
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
/* =====================================================================
   Nav wordmark: 3D stagger flip (Originkit port, web-kit
   components/originkit/3d-stagger-flip). Each letter is a two-faced 3D
   box that flips over its top edge on a timer. Built by site.js from
   data-flip-text.
   ===================================================================== */
/* .logo-flip-solo is the same host under a different name (Scott 2026-08-18).
   The nav wordmark now flips ONE random letter every 3s instead of all twelve
   on a 2s wave, and that driver is logo-flip-solo.js — a standalone file,
   because the old driver is one of the locked site.js IIFEs and it bails when
   no .logo-flip exists. Renaming the host in the markup is what switches
   drivers; aliasing it here is what keeps every rule below applying to it. */
.logo-flip,
.logo-flip-solo {
  --logo-h: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  perspective: 800px;
  filter: drop-shadow(0 2px 6px rgba(10, 9, 8, 0.6));
}
.logo-flip .flip-word,
.logo-flip-solo .flip-word {
  display: inline-flex;
  transform-style: preserve-3d;
}
.flip-char {
  position: relative;
  display: inline-block;
  height: var(--logo-h);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--logo-h) / -2)) rotateX(0deg);
}
.flip-char .flip-face {
  display: block;
  height: var(--logo-h);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(calc(var(--logo-h) / 2));
}
.flip-char .flip-face--alt {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateX(-90deg) translateZ(calc(var(--logo-h) / 2));
}
.flip-char img {
  display: block;
  height: var(--logo-h);
  width: auto;
}
@media (max-width: 720px) {
  .logo-flip,
  .logo-flip-solo { --logo-h: 26px; }
}

/* Transparent-alpha logo: no blend/filter/mask tricks needed. */
.site-nav__logo-pill {
  display: block;
  position: relative;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
/* Metal glint: a light band sweeps across the wordmark, masked to the
   letters only via the PNG's own alpha. */
.site-nav__logo-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url("assets/wordmark-alpha.webp") no-repeat center / contain;
  mask: url("assets/wordmark-alpha.webp") no-repeat center / contain;
  background: linear-gradient(115deg,
    transparent 42%,
    rgba(233, 228, 220, 0.55) 49%,
    rgba(var(--gold-rgb), 0.75) 51%,
    rgba(233, 228, 220, 0.55) 53%,
    transparent 60%);
  background-size: 300% 100%;
  background-position: 130% 0;
  animation: logo-glint 7s var(--ease-out-quart, ease-in-out) infinite;
}
@keyframes logo-glint {
  0%, 62%   { background-position: 130% 0; }
  78%, 100% { background-position: -170% 0; }
}
.site-nav__logo {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(10, 9, 8, 0.6));
  transition: transform 0.4s var(--ease-out-quart, ease), filter 0.4s ease;
}
.site-nav__brand:hover .site-nav__logo {
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 3px 10px rgba(10, 9, 8, 0.7)) brightness(1.12);
}
@media (prefers-reduced-motion: reduce) {
  .site-nav__logo-pill::after { animation: none; opacity: 0; }
  .site-nav__brand:hover .site-nav__logo { transform: none; }
}
@media (max-width: 720px) {
  .site-nav__logo { height: 30px; }
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
}
.nav-link {
  position: relative;
  display: inline-grid;
  overflow: hidden;
  height: calc(1.4em + 10px);
  line-height: 1.4em;
  padding: 5px 12px;
  font-family: "Jost", sans-serif;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--steel);
  text-decoration: none;
  line-height: 1.4;
}
.nav-link span {
  grid-area: 1 / 1;
  display: block;
  transition: transform 0.4s var(--ease-out-quart);
}
.nav-link span:last-child {
  transform: translateY(150%);
  color: var(--silver);
}
.nav-link:hover span:first-child,
.nav-link.is-swap span:first-child { transform: translateY(-150%); }
.nav-link:hover span:last-child,
.nav-link.is-swap span:last-child { transform: translateY(0); }
.nav-link:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
  color: var(--silver);
}

.site-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid rgba(196, 179, 159, 0.28);
  background: rgba(43, 39, 35, 0.55);
  color: var(--silver);
  cursor: pointer;
}
.site-nav__toggle span,
.site-nav__toggle span::before,
.site-nav__toggle span::after {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--silver);
  position: relative;
}
.site-nav__toggle span::before,
.site-nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-nav__toggle span::before { top: -5px; }
.site-nav__toggle span::after { top: 5px; }

.nav-overlay {
  display: none;
}

@media (max-width: 860px) {
  .site-nav__toggle { display: grid; place-items: center; }
  .site-nav__links {
    display: none;
  }
  .nav-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-24);
    position: fixed;
    inset: 0;
    z-index: 39;
    padding: var(--spacing-123) var(--spacing-32) var(--spacing-60);
    background: rgba(10, 9, 8, 0.78);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s var(--ease-out-quart);
  }
  .nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .nav-overlay a {
    font-family: "Jost", sans-serif;
    font-size: clamp(22px, 6vw, 32px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--silver);
    text-decoration: none;
    transform: rotate(-4deg);
    transform-origin: left center;
  }
  .nav-overlay a:hover { color: var(--gold); }
}

/* =====================================================================
   Call Now — pulse-outside beam (Medal Gold). Coolest chrome after hero.
   ===================================================================== */
@property --beam-op { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pg-sx { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pg-sy { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pg-boost { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --bx1 { syntax: "<percentage>"; inherits: true; initial-value: 8%; }
@property --by1 { syntax: "<percentage>"; inherits: true; initial-value: 20%; }
@property --bx2 { syntax: "<percentage>"; inherits: true; initial-value: 92%; }
@property --by2 { syntax: "<percentage>"; inherits: true; initial-value: 18%; }
@property --bx3 { syntax: "<percentage>"; inherits: true; initial-value: 14%; }
@property --by3 { syntax: "<percentage>"; inherits: true; initial-value: 82%; }
@property --bx4 { syntax: "<percentage>"; inherits: true; initial-value: 86%; }
@property --by4 { syntax: "<percentage>"; inherits: true; initial-value: 78%; }
@property --bop-a { syntax: "<number>"; inherits: true; initial-value: 0.85; }
@property --bop-b { syntax: "<number>"; inherits: true; initial-value: 0.7; }
@property --bop-c { syntax: "<number>"; inherits: true; initial-value: 0.55; }
@property --beam-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

.call-now {
  --beam-op: 1;
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 45;
  isolation: isolate;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  border-radius: 9999px;
  padding: 12px 18px 12px 14px;
  text-decoration: none;
  color: var(--silver);
  background: #2B2723;
  border: 1px solid rgba(70, 70, 70, 0.55);
  font-family: "Jost", sans-serif;
  transform: scale(1);
  transition: transform 0.4s var(--ease-out-quart), border-color 0.4s ease;
  animation:
    pulse-sx 3.4s ease-in-out infinite,
    pulse-sy 4.1s ease-in-out infinite,
    pulse-boost 5.2s ease-in-out infinite,
    pulse-p1 6.3s ease-in-out infinite,
    pulse-p2 7.1s ease-in-out infinite,
    pulse-p3 5.8s ease-in-out infinite,
    pulse-p4 8.2s ease-in-out infinite,
    pulse-opa 4.6s ease-in-out infinite,
    pulse-opb 3.9s ease-in-out infinite,
    pulse-opc 5.5s ease-in-out infinite;
}
.call-now:hover { transform: scale(1.05); border-color: rgba(var(--gold-rgb), 0.55); }
.call-now:active { transform: scale(1); }
.call-now:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.call-now__ring,
.call-now__halo,
.call-now__bloom {
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
.call-now__halo {
  inset: -10px;
  z-index: -1;
  transform: scale(0.95, 0.9);
  filter: blur(3px);
  opacity: calc(var(--beam-op) * 0.7);
  background:
    radial-gradient(ellipse calc(42px * var(--pg-sx) * var(--pg-boost)) calc(22px * var(--pg-sy) * var(--pg-boost)) at var(--bx1) var(--by1),
      rgba(var(--gold-rgb), calc(0.55 * var(--bop-a))), transparent 70%),
    radial-gradient(ellipse calc(38px * var(--pg-sx) * var(--pg-boost)) calc(20px * var(--pg-sy) * var(--pg-boost)) at var(--bx2) var(--by2),
      rgba(233, 228, 220, calc(0.28 * var(--bop-b))), transparent 70%),
    radial-gradient(ellipse calc(36px * var(--pg-sx) * var(--pg-boost)) calc(24px * var(--pg-sy) * var(--pg-boost)) at var(--bx3) var(--by3),
      rgba(var(--gold-rgb), calc(0.4 * var(--bop-c))), transparent 72%),
    radial-gradient(ellipse calc(40px * var(--pg-sx) * var(--pg-boost)) calc(18px * var(--pg-sy) * var(--pg-boost)) at var(--bx4) var(--by4),
      rgba(var(--gold-rgb), calc(0.5 * var(--bop-a))), transparent 70%);
}
.call-now__bloom {
  inset: -30px;
  z-index: -1;
  transform: scale(0.95, 0.9);
  filter: blur(22.5px) brightness(1.25) saturate(1.15);
  opacity: calc(var(--beam-op) * 0.85);
  background:
    radial-gradient(ellipse calc(70px * var(--pg-sx) * var(--pg-boost)) calc(36px * var(--pg-sy) * var(--pg-boost)) at var(--bx1) var(--by1),
      rgba(var(--gold-rgb), calc(0.7 * var(--bop-a))), transparent 72%),
    radial-gradient(ellipse calc(64px * var(--pg-sx) * var(--pg-boost)) calc(32px * var(--pg-sy) * var(--pg-boost)) at var(--bx2) var(--by2),
      rgba(var(--gold-rgb), calc(0.45 * var(--bop-b))), transparent 72%),
    radial-gradient(ellipse calc(60px * var(--pg-sx) * var(--pg-boost)) calc(34px * var(--pg-sy) * var(--pg-boost)) at var(--bx4) var(--by4),
      rgba(233, 228, 220, calc(0.22 * var(--bop-c))), transparent 75%);
}
.call-now__ring {
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc(var(--beam-op) * 0.95);
  background:
    radial-gradient(ellipse calc(28px * var(--pg-sx) * var(--pg-boost)) calc(14px * var(--pg-sy) * var(--pg-boost)) at var(--bx1) var(--by1),
      rgba(233, 228, 220, calc(0.95 * var(--bop-a))), transparent 70%),
    radial-gradient(ellipse calc(26px * var(--pg-sx) * var(--pg-boost)) calc(12px * var(--pg-sy) * var(--pg-boost)) at var(--bx2) var(--by2),
      rgba(var(--gold-rgb), calc(0.9 * var(--bop-b))), transparent 70%),
    radial-gradient(ellipse calc(24px * var(--pg-sx) * var(--pg-boost)) calc(14px * var(--pg-sy) * var(--pg-boost)) at var(--bx3) var(--by3),
      rgba(var(--gold-rgb), calc(0.75 * var(--bop-c))), transparent 70%),
    radial-gradient(ellipse calc(22px * var(--pg-sx) * var(--pg-boost)) calc(12px * var(--pg-sy) * var(--pg-boost)) at var(--bx4) var(--by4),
      rgba(233, 228, 220, calc(0.65 * var(--bop-a))), transparent 70%);
}

.call-now__icon {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid rgba(233, 228, 220, 0.3);
  display: grid;
  place-items: center;
  color: var(--gold);
  flex-shrink: 0;
}
.call-now__icon svg { width: 16px; height: 16px; display: block; }
.call-now__kicker {
  display: block;
  font-size: 9px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.27;
}
.call-now__num {
  display: block;
  font-size: var(--text-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
  line-height: 1.27;
}

@keyframes pulse-sx {
  0%, 100% { --pg-sx: 1; }
  50% { --pg-sx: 1.28; }
}
@keyframes pulse-sy {
  0%, 100% { --pg-sy: 1; }
  50% { --pg-sy: 1.22; }
}
@keyframes pulse-boost {
  0%, 100% { --pg-boost: 1; }
  40% { --pg-boost: 1.18; }
  75% { --pg-boost: 0.92; }
}
@keyframes pulse-p1 {
  0%, 100% { --bx1: 10%; --by1: 22%; }
  50% { --bx1: 22%; --by1: 12%; }
}
@keyframes pulse-p2 {
  0%, 100% { --bx2: 90%; --by2: 16%; }
  50% { --bx2: 78%; --by2: 28%; }
}
@keyframes pulse-p3 {
  0%, 100% { --bx3: 12%; --by3: 80%; }
  50% { --bx3: 24%; --by3: 70%; }
}
@keyframes pulse-p4 {
  0%, 100% { --bx4: 88%; --by4: 78%; }
  50% { --bx4: 74%; --by4: 88%; }
}
@keyframes pulse-opa {
  0%, 100% { --bop-a: 0.85; }
  50% { --bop-a: 0.45; }
}
@keyframes pulse-opb {
  0%, 100% { --bop-b: 0.7; }
  50% { --bop-b: 1; }
}
@keyframes pulse-opc {
  0%, 100% { --bop-c: 0.5; }
  50% { --bop-c: 0.9; }
}

/* Mobile: the call button owns the bottom-LEFT corner (the corner mark sits
   bottom-right on phones now, video.css), and it shrinks to icon + label —
   the number is hidden visually but stays in the DOM, and the whole pill is
   still the tel: link. Min tap target 44px: 8px + 30px icon + 8px = 46px. */
@media (max-width: 720px) {
  .call-now {
    left: 12px;
    bottom: 12px;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    min-height: 46px;
  }
  .call-now__icon { width: 30px; height: 30px; }
  .call-now__icon svg { width: 15px; height: 15px; }
  .call-now__kicker { font-size: 11px; letter-spacing: 0.16em; }
  .call-now__num { display: none; }
}

/* =====================================================================
   Buttons — beam, glow, ghost, metal edge
   ===================================================================== */
.btn-primary,
.btn-beam,
.copy .cta,
.place-form button,
.about-cta .btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-10);
  border-radius: 9999px;
  padding: 16px 34px;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: var(--text-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blackout);
  background: var(--gold);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.4s var(--ease-out-quart), background 0.4s ease, color 0.4s ease;
}
.btn-primary:hover,
.btn-beam:hover,
.copy .cta:hover,
.place-form button:hover {
  background: var(--gold-hover);
  transform: scale(1.05);
}
.btn-primary:active,
.btn-beam:active,
.copy .cta:active,
.place-form button:active { transform: scale(1); }

.btn-glow {
  outline: 1.5px solid rgba(var(--gold-rgb), 0.6);
  outline-offset: -1.5px;
  box-shadow: inset 0 0 14px 0 rgba(233, 228, 220, 0.45);
}
@media (min-width: 640px) {
  .btn-glow { outline-width: 2px; outline-offset: -2px; }
}

/* Traveling gold beam (md) on primary CTAs */
.btn-beam {
  overflow: hidden;
}
.btn-beam::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background:
    conic-gradient(from var(--beam-angle),
      transparent 0 55%,
      rgba(233, 228, 220, 0.15) 62%,
      rgba(233, 228, 220, 0.85) 68%,
      rgba(var(--gold-rgb), 1) 70.2%,
      rgba(233, 228, 220, 0.4) 74%,
      transparent 82%),
    conic-gradient(from var(--beam-angle),
      transparent 0 66%,
      rgba(233, 228, 220, 0.9) 69.5%,
      rgba(233, 228, 220, 1) 70.4%,
      transparent 73%);
  -webkit-mask:
    conic-gradient(from var(--beam-angle),
      transparent 0 30%, rgba(255,255,255,.1) 36%, rgba(255,255,255,.35) 44%,
      white 52%, white 80%, rgba(255,255,255,.35) 86%,
      rgba(255,255,255,.1) 92%, transparent 95%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask-composite: intersect, exclude;
  animation: beam-spin 2.4s linear infinite;
  opacity: 0.9;
}
@keyframes beam-spin { to { --beam-angle: 360deg; } }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  border-radius: 9999px;
  border: 1px solid rgba(233, 228, 220, 0.15);
  background: rgba(233, 228, 220, 0.05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(233, 228, 220, 0.8);
  padding: 10px 24px;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  transform: scale(1);
  transition: transform 0.4s var(--ease-out-quart), border-color 0.4s ease, color 0.4s ease, background 0.4s ease;
}
.btn-ghost:hover {
  border-color: rgba(233, 228, 220, 0.3);
  color: var(--silver);
  transform: scale(1.05);
}
.btn-ghost:active { transform: scale(1); }

.text-link {
  display: inline-block;
  margin-top: var(--spacing-16);
  font-family: "Jost", sans-serif;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.35);
  padding-bottom: 2px;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.text-link:hover {
  color: var(--silver);
  border-color: var(--silver);
}

.site-nav .btn-primary {
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: var(--tracking-micro);
}

.place-form button {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
}
.place-form [data-metal] {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-block;
  border-radius: 9999px;
}

/* Two-slab CTA (scroll-landing) */
.btn-split {
  display: inline-flex;
  gap: 1px;
  text-decoration: none;
}
.btn-split__label,
.btn-split__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(233, 228, 220, 0.08);
  -webkit-backdrop-filter: blur(80px);
  backdrop-filter: blur(80px);
  color: var(--silver);
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 0;
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s ease;
}
.btn-split:hover .btn-split__label,
.btn-split:hover .btn-split__arrow {
  background: var(--gold);
  color: var(--blackout);
}
.btn-split__arrow {
  width: 52px;
  padding: 14px 0;
  overflow: hidden;
  position: relative;
}
.btn-split__arrow span {
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-split:hover .btn-split__arrow span:first-child { transform: translateX(250%); }
.btn-split .btn-split__arrow span:last-child {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translateX(-250%);
}
.btn-split:hover .btn-split__arrow span:last-child { transform: translateX(0); }

/* =====================================================================
   Scan Grid Button — vanilla port of Originkit ScanGridButton.
   Layers on top of beam/glow/halo. Does not restyle the host.
   Gold-fill primaries use Scarlet; dark-fill Call Now uses Medal Gold.
   ===================================================================== */
.btn-primary,
.copy .cta,
.place-form button {
  --scan-color: #B31005;
}
.call-now {
  --scan-color: var(--gold);
}
.nav-overlay .btn-primary {
  transform: none;
  color: var(--blackout);
  font-size: var(--text-body);
  letter-spacing: 0.22em;
  align-self: flex-start;
}
.nav-overlay .btn-primary:hover {
  color: var(--blackout);
}
.scan-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}
.scan-grid__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 1;
}
.scan-grid__brackets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.scan-grid__scanline {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 65%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity 0.2s ease;
}
.scan-grid.is-on .scan-grid__scanline {
  opacity: 1;
  transition: opacity 0.15s ease;
}
.scan-grid.is-scanning .scan-grid__scanline {
  animation: scan-grid-sweep 1s linear infinite;
}
@keyframes scan-grid-sweep {
  from { transform: translateY(-100%); }
  to { transform: translateY(153.846%); }
}
.scan-grid__scan-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--scan-color) 45%, transparent) 100%
  );
}
.scan-grid__scan-edge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--scan-color);
  box-shadow: 0 0 6px var(--scan-color);
}
.scan-grid__bracket {
  fill: none;
  stroke: var(--scan-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 0;
  filter: drop-shadow(0 0 0 var(--scan-color));
  transition: stroke-opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.scan-grid.is-on .scan-grid__bracket {
  stroke-opacity: 1;
  filter: drop-shadow(0 0 4px var(--scan-color));
}
.scan-grid__label {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .scan-grid__scanline {
    animation: none !important;
    opacity: 0 !important;
    transition: none !important;
  }
  .scan-grid__bracket {
    transition: none !important;
    stroke-opacity: 0 !important;
    filter: none !important;
  }
}

/* =====================================================================
   Section extras: marquee, badges, qualify, machines, honest work
   ===================================================================== */
.who-copy .who-close {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--text-body) !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold) !important;
  margin-top: var(--spacing-8, 8px);
}

.machine-card {
  border: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  list-style: none;
}
.machine-card::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(145deg,
    rgba(233, 228, 220, 0.28) 0%,
    rgba(var(--gold-rgb), 0.36) 45%,
    rgba(196, 179, 159, 0.18) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.machine-card img {
  border-radius: 0;
  transition:
    transform 6s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.5s var(--ease-out-quart);
}
.machine-card:hover img {
  transform: scale(1.2);
  filter: brightness(1.18);
}
.machine-card:hover {
  box-shadow: inset 0 0 56px rgba(var(--gold-rgb), 0.25);
}
.machine-card__copy {
  position: relative;
  z-index: 1;
  margin-top: -28px;
  padding: 40px var(--spacing-16) 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 9, 8, 0.55) 55%);
}
.machine-card__copy h3,
.machine-card__copy p { padding-left: 0; padding-right: 0; }
.machine-card__copy h3 {
  letter-spacing: 0.083em;
  transition: letter-spacing 0.5s var(--ease-out-quart);
}
.machine-card:hover .machine-card__copy h3 {
  letter-spacing: 0.12em;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-24);
  align-items: center;
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-24);
  border-top: 1px solid rgba(196, 179, 159, 0.16);
}
.badge-row img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
}
.badge-row figcaption {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--steel);
  text-align: center;
  margin-top: var(--spacing-6);
}
.badge-row figure { margin: 0; }

.marquee {
  position: relative;
  overflow: hidden;
  margin: var(--spacing-32) -5.5vw 0;
  padding: var(--spacing-16) 0;
  mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--spacing-32);
  /* 60s read as a still line — the eye never caught it moving. Scott,
     2026-08-19: doubled to 30s, then doubled again. The track is a fixed
     3047px at every width, so the duration IS the speed: 15s is ~102px/s,
     against ~51 at 30s and ~25 at the original 60. Brisk, still readable. */
  animation: marquee-x 15s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
}
.marquee__track span::before {
  content: "·";
  color: var(--gold);
  margin-right: var(--spacing-32);
}
@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.qualify-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-32);
  margin-top: var(--spacing-32);
}
.qualify-col {
  padding: var(--spacing-24);
}
.qualify-col h3 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: var(--spacing-15);
}
.qualify-col--no h3 { color: var(--gold); }
.qualify-stat {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: 0.02em;
  color: var(--gold);
  line-height: 1;
  margin-bottom: var(--spacing-10);
}
.qualify-num {
  display: inline-block;
  min-width: 3ch;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.qualify-stat span {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--steel);
  margin-top: var(--spacing-6);
}

/* ---------------------------------------------------------------------
   Round 4: qualify strip — one horizontal band replacing the two cards.
   Reads in ~15s. Keeps the 500 count-up (.qualify-num) intact.
   --------------------------------------------------------------------- */
.qualify-strip {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--spacing-32);
  border-top: 1px solid rgba(var(--steel-rgb), 0.22);
  border-bottom: 1px solid rgba(var(--steel-rgb), 0.22);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s var(--ease-out-quart),
    transform 0.6s var(--ease-out-quart);
}
.qualify-strip.is-in {
  opacity: 1;
  transform: none;
}
.qualify-strip__stat,
.qualify-strip__col {
  padding: var(--spacing-32) clamp(20px, 2.4vw, 36px);
}
.qualify-strip__col {
  border-left: 1px solid rgba(var(--steel-rgb), 0.16);
}
.qualify-strip__stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 0;
}
.qualify-strip__stat .qualify-num {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(52px, 6.6vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--gold);
  min-width: 3ch;
}
.qualify-strip__unit {
  display: block;
  margin-top: var(--spacing-10);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--steel);
  max-width: 18ch;
}
.qualify-strip__col h3 {
  position: relative;
  padding-left: var(--spacing-16);
  margin-bottom: var(--spacing-15);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--silver);
}
.qualify-strip__col h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 2px;
  background: var(--gold);
}
.qualify-strip__col--no h3 {
  color: var(--steel);
}
.qualify-strip__col--no h3::before {
  background: #B31005;
}
.qualify-strip__col p {
  font-size: 15px;
  line-height: 1.78;
  color: var(--steel);
  max-width: 34ch;
}
.qualify-verdict {
  margin-top: var(--spacing-24);
  font-size: 15px;
  line-height: 1.78;
  color: var(--steel);
  max-width: 62ch;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease-out-quart) 120ms,
    transform 0.5s var(--ease-out-quart) 120ms;
}
.qualify-verdict.is-in {
  opacity: 1;
  transform: none;
}
@media (max-width: 980px) {
  .qualify-strip {
    grid-template-columns: 1fr;
  }
  .qualify-strip__col {
    border-left: 0;
    border-top: 1px solid rgba(var(--steel-rgb), 0.16);
    padding-left: 0;
    padding-right: 0;
  }
  .qualify-strip__col p { max-width: 46ch; }
}

/* Word-by-word reveal (what-we-do heading) */
.reveal-word {
  display: inline-block;
  opacity: 0.12;
  filter: blur(4px);
  transform: translateY(12px);
  transition:
    opacity 0.6s var(--ease-out-quart),
    filter 0.6s var(--ease-out-quart),
    transform 0.6s var(--ease-out-quart);
}
.reveal-word.is-on {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-fade), transform 0.6s var(--ease-fade);
}
.fade-up.is-in {
  opacity: 1;
  transform: none;
}

.spec-steps {
  gap: var(--spacing-24) var(--spacing-32);
  margin: var(--spacing-32) 0;
  padding: var(--spacing-24) 0;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10);
  margin: var(--spacing-24) 0 0;
}

/* Round 4: footer is open lettering on the page — no card, no box.
   One Brushed-Steel hairline across the top, generous air, quiet legal line. */
.overlay-card--footer {
  display: block;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  overflow: visible;
  margin: clamp(72px, 9vw, 140px) 5.5vw 0;
  /* bottom padding keeps the legal line clear of the fixed Call Now pill */
  padding: clamp(40px, 4.5vw, 72px) 0 118px;
  border-top: 1px solid rgba(var(--steel-rgb), 0.2) !important;
}
.overlay-card--footer::after { content: none !important; }
/* Not a card — a full-bleed legibility wash, so the open lettering still
   reads on about.html where the footer sits over the sunrise loop. */
.overlay-card--footer::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: -80px;
  bottom: 0;
  padding: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 9, 8, 0) 0%,
    rgba(10, 9, 8, 0.5) 30%,
    rgba(10, 9, 8, 0.88) 100%
  );
  -webkit-mask: none;
  mask: none;
  pointer-events: none;
  z-index: -1;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-10);
}
.footer-machine {
  margin-top: clamp(40px, 5vw, 72px);
}
.overlay-card--footer .footer-wordmark {
  font-weight: 500;
  letter-spacing: 0.28em;
}
.footer-tagline {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--spacing-10);
}
.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-15);
  font-family: "Jost", sans-serif;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  justify-self: start;
  text-align: left;
}
.footer-nav a {
  color: var(--steel);
  text-decoration: none;
  transition: color 0.4s var(--ease-out-quart);
}
.overlay-card--footer .footer-nav a:hover {
  color: var(--gold);
  text-decoration: none;
}
/* Google Preferred Sources link. Deliberately quieter than the rest of the
   footer nav so it never competes with Call / Get Started. */
.footer-nav a.footer-nav__prefer {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(var(--steel-rgb), 0.45);
  margin-top: calc(var(--spacing-15) * -0.35);
}

/* Hide leftover top-right Place-a-machine chip if present */
.sticky-cta { display: none !important; }

.footer-logo { display: inline-flex; text-decoration: none; margin-bottom: var(--spacing-16); }
.footer-tag { color: var(--steel); font-size: 15px; max-width: 42ch; }
.overlay-card--footer .footer-copy {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: var(--spacing-20);
  border-top: 1px solid rgba(var(--steel-rgb), 0.09);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(var(--steel-rgb), 0.45);
}

/* =====================================================================
   Round 2 layout: wrap, spacers, video fades, loading gate
   ===================================================================== */
.wrap {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
}
.wrap--narrow { max-width: 820px; }
.section-spacer { display: none; height: 0; }
.vv-section {
  position: relative;
  z-index: 12;
  pointer-events: auto;
  padding: calc(var(--nav-h) + var(--spacing-24)) 0 var(--spacing-32);
  scroll-margin-top: 0;
  background-image: linear-gradient(
    180deg,
    rgba(43, 39, 35, 0.28) 0%,
    rgba(10, 9, 8, 0) 64px,
    rgba(10, 9, 8, 0) calc(100% - 64px),
    rgba(43, 39, 35, 0.28) 100%
  );
}
/* Black Ops One site-wide on display headings (Scott, 2026-08-18). The hero H1
   set the face; every section headline now matches it on phone and desktop.
   Deliberately NOT applied to body copy, buttons, nav or the small mono h3
   labels — stencil is a short-line face and paragraphs in it stop scanning.
   Sizes come down ~15% from the Jost settings because the stencil reads larger
   at the same px and runs wider, and tracking drops to 0.03em for the same
   reason the hero's did (the counters do the separating at stencil scale). */
.vv-section h2 {
  font-family: "Black Ops One", "Jost", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(23px, 2.9vw, 40px);
  line-height: 1.12;
  color: var(--silver);
  margin-bottom: var(--spacing-16);
}
.section-sub {
  max-width: 52ch;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.78;
  color: var(--steel);
  margin-bottom: var(--spacing-32);
}
.section-cta { margin-top: 48px; }
.card-grid {
  display: grid;
  gap: var(--spacing-24);
}
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vv-card {
  padding: clamp(24px, 3vw, 32px);
  overflow: visible;
}
.vv-card > *,
.faq-item > *,
.machine-card > *:not(img) {
  position: relative;
  z-index: 1;
}
.vv-card h3 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: var(--spacing-15);
}
.vv-card p {
  font-size: 15px;
  line-height: 1.78;
  letter-spacing: var(--tracking-body);
  color: var(--steel);
}
.video-framed::before,
.video-framed::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 48px;
  pointer-events: none;
  z-index: 0;
}
.video-framed::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(43, 39, 35, 0.22), transparent);
}
.video-framed::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(43, 39, 35, 0.22), transparent);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 300px;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(to top, var(--blackout), transparent);
}

.load-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--blackout);
  display: grid;
  place-content: center;
  gap: 16px;
  transition: opacity 0.6s var(--ease-out-quart), visibility 0.6s;
}
.load-gate.is-ready {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.load-gate__label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel);
  text-align: center;
}
.load-gate__rail {
  width: 16rem;
  height: 1px;
  background: rgba(196, 179, 159, 0.2);
  overflow: hidden;
}
.load-gate__fill {
  display: block;
  width: 33%;
  height: 100%;
  background: var(--gold);
  animation: load-rail 1.2s ease-in-out infinite;
}
@keyframes load-rail {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

.trust-strip {
  margin: 0 auto;
  width: 90%;
  max-width: 1440px;
  padding: 10px 0;
  overflow: hidden;
  pointer-events: auto;
  background: rgba(10, 9, 8, 0.32);
}
.trust-strip .marquee { margin: 0; padding: var(--spacing-10) 0; }
.trust-strip .marquee__track span {
  text-shadow: 0 1px 8px rgba(10, 9, 8, 0.8);
}

.machine-card__media {
  overflow: hidden;
  height: 180px;
}
.machine-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.machine-card[data-gallery] {
  opacity: 0;
  transform: translateX(56px);
  filter: none;
}
.machine-card[data-gallery].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 0.55s var(--ease-out-quart),
    transform 0.55s var(--ease-out-quart),
    box-shadow 0.5s var(--ease-out-quart);
}

.blur-word {
  display: inline-block;
  filter: blur(10px);
  opacity: 0;
  transform: translateY(50px);
}
.blur-word.is-mid {
  filter: blur(5px);
  opacity: 0.5;
  transform: translateY(-5px);
  transition: filter 0.35s var(--ease-out-quart), opacity 0.35s ease, transform 0.35s var(--ease-out-quart);
}
.blur-word.is-on {
  filter: blur(0);
  opacity: 1;
  transform: none;
  transition: filter 0.35s var(--ease-out-quart), opacity 0.35s ease, transform 0.35s var(--ease-out-quart);
}

.statement-section {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Round 4: static hero-machine still, flush to the right edge of the section.
   Replaces the old spotlight video that re-revealed the hero machine. */
.statement-figure {
  position: absolute;
  top: 50%;
  /* negative offset trims the still's own right-hand black margin so the
     machine itself lands on the section's right edge */
  right: -6vw;
  margin: 0;
  z-index: 0;
  width: clamp(340px, 44vw, 660px);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(24px, -50%, 0);
  transition:
    opacity 0.7s var(--ease-out-quart),
    transform 0.7s var(--ease-out-quart);
}
.statement-figure.is-in {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}
.statement-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 30%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 30%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.statement-copy {
  position: relative;
  z-index: 1;
  transform-origin: 0% 50%;
}
.statement-copy > * { max-width: min(56ch, 52%); }
@media (max-width: 860px) {
  .statement-figure { width: 84vw; right: -14vw; }
  .statement-figure.is-in { opacity: 0.3; }
  .statement-copy > * { max-width: 100%; }
  .statement-follow { max-width: 46ch; }
}
.statement-headline {
  font-size: clamp(40px, 8vw, 104px) !important;
  max-width: 12ch !important;
  line-height: 0.95 !important;
}
.statement-headline .scrub-word {
  display: inline-block;
  opacity: 0.1;
  filter: blur(4px);
}
.statement-follow { margin-top: var(--spacing-32); max-width: 52ch; }
.qualify-close {
  margin-top: var(--spacing-32);
  font-size: 15px;
  line-height: 1.78;
  color: var(--steel);
  max-width: 52ch;
}
.area-map {
  margin: var(--spacing-32) 0 0;
  overflow: hidden;
}
.area-map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.faq-list { margin-top: var(--spacing-32); display: grid; gap: 1px; }
.faq-item {
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s var(--ease-out-quart),
    transform 0.5s var(--ease-out-quart);
}
.faq-item.is-in {
  opacity: 1;
  transform: none;
}
.faq-item:nth-child(1) { transition-delay: 0ms; }
.faq-item:nth-child(2) { transition-delay: 60ms; }
.faq-item:nth-child(3) { transition-delay: 120ms; }
.faq-item:nth-child(4) { transition-delay: 180ms; }
.faq-item:nth-child(5) { transition-delay: 240ms; }
.faq-item:nth-child(6) { transition-delay: 300ms; }
.faq-item:nth-child(7) { transition-delay: 360ms; }
.faq-item:nth-child(8) { transition-delay: 420ms; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--spacing-20) var(--spacing-24);
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: var(--text-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--silver);
  position: relative;
  z-index: 1;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.4s var(--ease-out-quart);
}
.faq-item[open] summary::after {
  content: "+";
  transform: rotate(45deg);
}
details.faq-item:not([open]) > .faq-answer {
  display: block;
}
.faq-answer {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.4s var(--ease-out-quart);
}
.faq-answer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--gold);
  pointer-events: none;
}
.faq-item[open] .faq-answer::before {
  width: 100%;
  transition: width 0.5s var(--ease-out-quart);
}
.faq-item p {
  padding: 0 var(--spacing-24) var(--spacing-24);
  font-size: 15px;
  line-height: 1.78;
  color: var(--steel);
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------
   Round 4: FAQ pizzazz. Layers on top of the existing height animation
   and gold top-rule sweep — none of that is replaced.
     a) travelling gold hairline border around the OPEN card
     b) one-time rise + fade on the answer body
     c) closed-row hover: letterspacing breathes, gold rule slides in left
   --------------------------------------------------------------------- */
.faq-item {
  position: relative;
}
/* (a) conic gold sweep, shown only as a 1px ring via a mask cut-out.
   The angle is animated through a registered custom property, so the ring
   travels around the card without rotating the box. Browsers without
   @property support get the same ring, static. */
@property --faq-edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.faq-item::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--faq-edge-angle, 0deg),
    rgba(var(--gold-rgb), 0) 0deg,
    rgba(var(--gold-rgb), 0) 190deg,
    rgba(var(--gold-rgb), 0.5) 262deg,
    rgba(233, 228, 220, 0.7) 300deg,
    rgba(var(--gold-rgb), 0.5) 338deg,
    rgba(var(--gold-rgb), 0) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.5s var(--ease-out-quart);
}
.faq-item[open]::after {
  opacity: 1;
  animation: faq-edge-travel 7s linear infinite;
}
@keyframes faq-edge-travel {
  from { --faq-edge-angle: 0deg; }
  to { --faq-edge-angle: 360deg; }
}

/* (b) answer body rise + fade. Default state is visible, so a no-JS or
   reduced-motion visitor always reads the answer. */
.faq-answer p.is-rising {
  opacity: 0;
  transform: translateY(12px);
  transition: none;
}
.faq-answer p.is-risen {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s var(--ease-out-quart) 60ms,
    transform 0.4s var(--ease-out-quart) 60ms;
}

/* (c) closed-row hover. */
.faq-item summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform 0.4s var(--ease-out-quart);
}
.faq-item:not([open]):hover summary,
.faq-item:not([open]) summary:focus-visible {
  letter-spacing: 0.06em;
  color: var(--silver);
}
.faq-item summary {
  transition:
    letter-spacing 0.45s var(--ease-out-quart),
    color 0.4s var(--ease-out-quart);
}
.faq-item:not([open]):hover summary::before,
.faq-item:not([open]) summary:focus-visible::before {
  transform: scaleY(1);
}
.faq-item[open] summary::before {
  transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
  .faq-item[open]::after { animation: none !important; opacity: 1; }
  .faq-answer p { opacity: 1 !important; transform: none !important; transition: none !important; }
  .faq-item summary,
  .faq-item summary::before { transition: none !important; }
  .faq-item:not([open]):hover summary { letter-spacing: 0.04em; }
}

#contact[data-iris] {
  clip-path: ellipse(5% 8% at 50% 50%);
}
#contact[data-iris].is-iris {
  clip-path: ellipse(155% 158% at 50% 50%);
  transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.copy-secondary {
  display: inline-block;
  margin-left: var(--spacing-16);
  pointer-events: auto;
}
.form-note {
  margin-top: var(--spacing-16);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--steel);
}

.place-form.liquid-glass {
  margin-top: var(--spacing-32);
  padding: clamp(24px, 4vw, 32px);
  overflow: visible;
}
.place-form input,
.place-form textarea {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s var(--ease-out-quart), border-color 0.3s ease;
}
.place-form input:focus,
.place-form textarea:focus {
  outline: none;
  border-color: rgba(196, 179, 159, 0.28);
  background-size: 100% 1px;
}

/* =====================================================================
   About page
   ===================================================================== */
.about-page { background: var(--blackout); min-height: 100vh; position: relative; }
.about-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.about-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-bg__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.6);
}
.about-bg__fade {
  position: absolute;
  left: 0; right: 0;
  height: 200px;
  pointer-events: none;
}
.about-bg__fade--top {
  top: 0;
  background: linear-gradient(to bottom, var(--blackout), transparent);
}
.about-bg__fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--blackout), transparent);
}
/* main + footer lift above the fixed background video; nav and call-now
   must KEEP their fixed positioning (same sticky chrome on every page) */
.about-page main,
.about-page footer {
  position: relative;
  z-index: 2;
}

.about-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--spacing-44));
  padding-bottom: var(--spacing-32);
  min-height: 0;
}
.about-hero__copy {
  position: relative;
  left: auto;
  bottom: auto;
  max-width: none;
  z-index: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.about-hero__copy h1 {
  max-width: 22ch; /* measured in the h1's own type size; breaks after "Marine Corps" */
  margin: 0 auto;
}
.about-hero__copy h1 {
  font-family: "Black Ops One", "Jost", sans-serif;
  font-weight: 400;
  font-size: clamp(27px, 4.2vw, 52px);
  line-height: 1.16;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--silver);
}
.about-copy {
  padding: clamp(24px, 4vw, 40px);
  overflow: visible;
}

.about-layout {
  width: min(1440px, 90%);
  margin: 0 auto var(--spacing-123);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 80px);
  padding: var(--spacing-60) 0;
  align-items: start;
}
.about-portraits {
  position: sticky;
  top: calc(var(--nav-h) + var(--spacing-24));
  order: 2; /* photo right, story left (Scott 2026-08-14) */
}
.about-portrait {
  margin: 0;
}
.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: cover;
}
.about-portrait figcaption {
  margin-top: var(--spacing-10);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--steel);
}

.about-copy {
  max-width: 62ch;
}
.about-copy p {
  color: var(--steel);
  margin-bottom: var(--spacing-20);
}
.about-copy p.about-close {
  color: var(--silver);
}
.about-kicker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--text-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--spacing-16);
}
.about-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-32);
  border-top: 1px solid rgba(196, 179, 159, 0.16);
}
.about-cta p {
  margin: 0;
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  text-transform: none;
  color: var(--steel);
  max-width: 28ch;
}

/* =====================================================================
   Responsive + reduced motion
   ===================================================================== */
@media (max-width: 980px) {
  .qualify-grid,
  .about-layout,
  .footer-top,
  .card-grid--3,
  .machine-grid {
    grid-template-columns: 1fr;
  }
  .footer-nav { justify-self: start; }
  /* stacked: photo first, story below (Scott 2026-08-15, phone review) */
  .about-portraits { position: relative; top: auto; order: 0; }
  /* stacked: keep the portrait people-sized, not wall-sized */
  .about-portrait { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .overlay-card--footer { margin: 64px 22px 0; padding: 36px 0 28px; }
  .marquee { margin-left: 0; margin-right: 0; }
  .section-spacer { display: none; height: 0; }
  .copy-secondary { display: block; margin-left: 0; margin-top: 12px; }
  .machine-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .call-now,
  .call-now__halo,
  .call-now__bloom,
  .call-now__ring,
  .btn-beam::after,
  .marquee__track,
  .machine-card img,
  .nav-link span,
  .btn-split__arrow span {
    animation: none !important;
    transition: none !important;
  }
  .call-now { --pg-sx: 1; --pg-sy: 1; --pg-boost: 1; --bop-a: 0.8; --bop-b: 0.7; --bop-c: 0.6; }
  .machine-card:hover img { transform: none; }
  .blur-word,
  .machine-card[data-gallery],
  .scrub-word,
  .fade-up,
  .reveal-word,
  .faq-item,
  #what .card-grid--3 .vv-card,
  .qualify-col,
  .qualify-strip,
  .qualify-verdict,
  #contact[data-iris] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .marquee__track span::before,
  .area-route__line,
  .area-route__stop,
  .statement-headline span.is-sheen,
  #what .card-grid--3 .vv-card::after {
    animation: none !important;
  }
  .area-route__line { stroke-dashoffset: 0; }
  .area-route__stop { opacity: 1; }
  body.past-hero .stage,
  body.past-hero #layerFg {
    transition: none !important;
  }
  .load-gate__fill { animation: none !important; }
  .statement-figure {
    opacity: 1 !important;
    transform: translate3d(0, -50%, 0) !important;
    transition: none !important;
  }
  .nav-overlay { transition: none; }
  .btn-primary:hover,
  .btn-ghost:hover,
  .call-now:hover,
  .copy .cta:hover,
  .place-form button:hover {
    transform: none;
  }
}

/* Keep hero CTAs clear of the fixed Call Now pill on narrow/mid screens */
@media (max-width: 860px) {
  .copy { top: auto; bottom: 224px; transform: none; }
}

/* =====================================================================
   Mobile-only offer paragraph (see video.html). Desktop keeps it in the hero
   .sub; phones move it here, directly under the hero and above #worlds, so the
   machine animation is not buried. display:none above 720px keeps it out of
   the desktop a11y tree, so the offer is announced exactly once per viewport.
   ===================================================================== */
.hero-offer-mobile {
  display: none;
}
@media (max-width: 720px) {
  .hero-offer-mobile {
    display: block;
    position: relative;
    z-index: 12;
    background: #0A0908;
    padding: var(--spacing-40, 40px) clamp(20px, 6vw, 28px) var(--spacing-32, 32px);
  }
  .hero-offer-mobile p {
    margin: 0;
    max-width: 34ch;
    font-size: 16px;
    line-height: 1.72;
    letter-spacing: var(--tracking-body);
    color: var(--silver);
  }
}

/* =====================================================================
   Two Worlds — cursor-mask reveal (#worlds)
   ===================================================================== */
#worlds {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--blackout);
  z-index: 12;
  pointer-events: none;
}
#worlds .worlds-canvas {
  pointer-events: auto;
}
.worlds-canvas,
.worlds-fallback,
.worlds-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.worlds-canvas {
  z-index: 1;
}
.worlds-video {
  visibility: hidden;
  object-fit: cover;
  pointer-events: none;
}
.worlds-fallback {
  display: none;
  object-fit: cover;
  z-index: 1;
}
#worlds.is-fallback .worlds-fallback { display: block; }
#worlds.is-fallback .worlds-canvas,
#worlds.is-fallback .worlds-video { display: none; }

.worlds-copy {
  position: absolute;
  top: calc(var(--nav-h) + 8px);
  left: clamp(16px, 4vw, 48px);
  z-index: 2;
  max-width: min(34rem, calc(100% - 32px));
  pointer-events: none;
  color: var(--silver);
}
.worlds-copy::before {
  content: "";
  position: absolute;
  inset: -28px -48px -36px -28px;
  background: radial-gradient(
    ellipse 80% 90% at 12% 18%,
    rgba(10, 9, 8, 0.78) 0%,
    rgba(10, 9, 8, 0.42) 48%,
    rgba(10, 9, 8, 0) 78%
  );
  pointer-events: none;
  z-index: -1;
}
#worlds h2 {
  font-family: "Black Ops One", "Jost", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(23px, 2.9vw, 40px);
  line-height: 1.12;
  color: var(--silver);
  max-width: 18ch;
  margin-bottom: var(--spacing-16);
}
#worlds .section-sub {
  color: var(--steel);
  margin-bottom: 0;
  max-width: 36ch;
}
@media (max-width: 720px) {
  .worlds-copy {
    top: calc(var(--nav-h) + 4px);
    max-width: calc(100% - 28px);
  }
  #worlds h2 { max-width: 16ch; }
}

/* =====================================================================
   Post-hero ground, snack containment, per-section motion
   ===================================================================== */
.site-layer {
  background-color: #0A0908;
}

#layerFg {
  opacity: 1;
  transition: opacity 0.45s ease;
}
body.past-hero #layerFg {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.trust-strip .marquee__track span::before {
  display: inline-block;
  transform-origin: center;
}
@keyframes trust-dot-pulse {
  0% { transform: scale(1); opacity: 0.65; }
  40% { transform: scale(1.75); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
#trust.is-pulse .marquee__track span::before {
  animation: trust-dot-pulse 0.5s var(--ease-out-quart) both;
}
#trust.is-pulse .marquee__track span:nth-child(1)::before { animation-delay: 0ms; }
#trust.is-pulse .marquee__track span:nth-child(2)::before { animation-delay: 80ms; }
#trust.is-pulse .marquee__track span:nth-child(3)::before { animation-delay: 160ms; }
#trust.is-pulse .marquee__track span:nth-child(4)::before { animation-delay: 240ms; }
#trust.is-pulse .marquee__track span:nth-child(5)::before { animation-delay: 320ms; }
#trust.is-pulse .marquee__track span:nth-child(6)::before { animation-delay: 400ms; }
#trust.is-pulse .marquee__track span:nth-child(7)::before { animation-delay: 480ms; }
#trust.is-pulse .marquee__track span:nth-child(8)::before { animation-delay: 560ms; }
#trust.is-pulse .marquee__track span:nth-child(9)::before { animation-delay: 640ms; }
#trust.is-pulse .marquee__track span:nth-child(10)::before { animation-delay: 720ms; }

#what .card-grid--3 {
  perspective: 900px;
}
#what .card-grid--3 .vv-card {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px) rotateX(6deg);
  transform-origin: bottom center;
  transition:
    opacity 0.55s var(--ease-out-quart),
    transform 0.55s var(--ease-out-quart);
}
#what .card-grid--3 .vv-card:nth-child(1) { transition-delay: 0ms; }
#what .card-grid--3 .vv-card:nth-child(2) { transition-delay: 120ms; }
#what .card-grid--3 .vv-card:nth-child(3) { transition-delay: 240ms; }
#what .card-grid--3 .vv-card.is-in {
  opacity: 1;
  transform: none;
}
#what .card-grid--3 .vv-card.is-in:hover {
  transform: translateY(-4px);
}
#what .card-grid--3 .vv-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    115deg,
    transparent 36%,
    rgba(233, 228, 220, 0.12) 50%,
    transparent 64%
  );
  background-size: 220% 100%;
  background-position: 130% 0;
  opacity: 0;
}
#what .card-grid--3 .vv-card.is-in:hover::after {
  opacity: 1;
  animation: card-sheen 0.8s var(--ease-out-quart) forwards;
}
@keyframes card-sheen {
  0% { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}

.qualify-col {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.5s var(--ease-out-quart),
    transform 0.5s var(--ease-out-quart);
}
.qualify-col--no {
  transform: translateX(40px);
}
.qualify-col.is-in {
  opacity: 1;
  transform: none;
}

.statement-headline span.is-sheen {
  background-image: linear-gradient(
    100deg,
    #E9E4DC 0%,
    #E9E4DC 38%,
    var(--gold) 50%,
    #E9E4DC 62%,
    #E9E4DC 100%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: caps-sheen 0.8s var(--ease-out-quart) forwards;
}
@keyframes caps-sheen {
  to { background-position: -20% 0; }
}

.area-stage {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: var(--spacing-32);
  align-items: stretch;
  margin-top: var(--spacing-32);
}
.area-route {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: block;
}
.area-route__line {
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.area-route__stop line {
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.area-route__stop text {
  fill: #E9E4DC;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.area-route__stop {
  opacity: 0;
}
#area.is-route .area-route__line {
  animation: area-draw 1.2s var(--ease-out-quart) forwards;
}
#area.is-route .area-route__stop--la {
  animation: area-stop-in 0.45s var(--ease-out-quart) 0.15s forwards;
}
#area.is-route .area-route__stop--oc {
  animation: area-stop-in 0.45s var(--ease-out-quart) 0.55s forwards;
}
#area.is-route .area-route__stop--riv {
  animation: area-stop-in 0.45s var(--ease-out-quart) 0.95s forwards;
}
#area.is-route .area-route__stop--sd {
  animation: area-stop-in 0.45s var(--ease-out-quart) 1.35s forwards;
}
@keyframes area-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes area-stop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.machine-card {
  transition: box-shadow 0.5s var(--ease-out-quart);
}

@media (max-width: 720px) {
  .area-stage {
    grid-template-columns: 1fr;
    gap: var(--spacing-16);
  }
  .area-route {
    min-height: 220px;
    max-height: 280px;
  }
}

/* =====================================================================
   Vend a line — footer easter egg. A mini machine: press B4, a chip
   drops inside, and the line vends out of the flap on a snack tag.
   ===================================================================== */
.vend-line {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 26px;
  min-height: 150px;
}
.vend-machine {
  position: relative;
  width: 100px;
  height: 150px;
  flex: none;
  filter: drop-shadow(0 6px 16px rgba(10, 9, 8, 0.7));
  transition: filter 0.3s ease;
}
.vend-machine:hover {
  filter: drop-shadow(0 6px 16px rgba(10, 9, 8, 0.7)) drop-shadow(0 0 14px rgba(var(--gold-rgb), 0.25));
}
.vend-machine.is-vending {
  animation: vend-shake 0.28s ease;
}
@keyframes vend-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-1px, 0) rotate(-0.6deg); }
  60% { transform: translate(1px, 0) rotate(0.5deg); }
}
.vend-line__key {
  position: absolute;
  right: 7px;
  top: 52px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--silver);
  background: linear-gradient(180deg, rgba(196, 179, 159, 0.18), rgba(196, 179, 159, 0.05));
  border: 1px solid rgba(196, 179, 159, 0.45);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1.5px 0 rgba(10, 9, 8, 0.9), inset 0 1px 0 rgba(233, 228, 220, 0.18);
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.2s ease, color 0.2s ease;
}
.vend-line__key:hover { border-color: var(--gold); color: var(--gold); }
.vend-line__key:active {
  transform: translateY(1.5px);
  box-shadow: 0 0 0 rgba(10, 9, 8, 0.9), inset 0 1px 0 rgba(233, 228, 220, 0.18);
}
.vend-chip {
  position: absolute;
  left: 27px;
  top: 30px;
  width: 7px;
  height: 11px;
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
}
.vend-chip.is-dropping {
  animation: vend-drop 0.42s cubic-bezier(0.5, 0, 0.9, 0.6) forwards;
}
@keyframes vend-drop {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(96px) rotate(24deg); }
}
.vend-line__out {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding-bottom: 2px;
}
.vend-line__hint {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: var(--tracking-micro);
  color: rgba(196, 179, 159, 0.55);
}
.vend-line.has-vended .vend-line__hint { display: none; }
.vend-line__slot {
  position: relative;
  overflow: hidden;
  min-height: 34px;
  display: flex;
  align-items: flex-end;
}
.vend-tag {
  display: inline-block;
  max-width: 100%;
  padding: 8px 14px 8px 12px;
  border-left: 2px solid var(--gold);
  background: rgba(196, 179, 159, 0.07);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--silver);
  transform: translateX(-115%);
  transition: transform 0.5s var(--ease-out-quart), opacity 0.3s ease;
}
.vend-tag.is-in { transform: translateX(0); }
.vend-tag.is-out {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(120%) rotate(2deg);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vend-tag { transition: none; transform: none; }
  .vend-tag.is-out { display: none; }
  .vend-machine.is-vending { animation: none; }
  .vend-chip.is-dropping { animation: none; }
}

/* =====================================================================
   ROUND 4b — mobile pass + Divine Built credit
   Appended block. Everything here is additive; delete the block to revert.
   ===================================================================== */

/* --- 4b.1  Kill the shrink-to-fit -------------------------------------
   .machine-card[data-gallery] parks its pre-reveal state at translateX(56px).
   On a 390px phone that pushed the document to 427px wide, and mobile Safari
   answers a too-wide document by widening the layout viewport — the entire
   homepage rendered at ~91% zoom. Nothing looked broken, everything was
   just slightly small and slightly wrong. On phones the card rises instead
   of sliding (reads better anyway); overflow-x: clip is the guard rail so no
   future entrance transform can do this again. */
@media (max-width: 720px) {
  .machine-grid { overflow-x: clip; overflow-clip-margin: 16px; }
  .machine-card[data-gallery] { transform: translateY(28px); }
  .machine-card[data-gallery].is-in { transform: none; }
}

/* --- 4b.2  Statement still: quieter behind phone-width body copy ------
   At 390px the 84vw still sits directly under the paragraphs, and its lit
   shelves were eating the text. Dropped from 0.3 to 0.14 and softened. */
@media (max-width: 720px) {
  .statement-figure.is-in { opacity: 0.14; }
  .statement-figure img { filter: blur(1px); }
}

/* --- 4b.3  Footer vend machine clears the fixed Call Now pill ---------
   At rest at the bottom of the page the pill (bottom-left, ~162x58) sat on
   top of the machine and swallowed the left third of the vended ticket —
   the B4 joke landed behind the phone number. Lifts the whole vend line
   above the pill's band. */
@media (max-width: 720px) {
  .footer-machine { padding-bottom: 96px; }
}

/* --- 4b.4  Touch targets ---------------------------------------------
   Footer nav links were 18px tall. Padding grows the hit box to 44px and
   the negative margin cancels the layout shift, so nothing moves. */
@media (pointer: coarse) {
  .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 13px 0;
    margin: -13px 0;
  }
  /* B4 is 28x28 by design and stays 28x28; this only widens what a thumb
     can hit. No visual change. */
  .vend-line__key::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
}

/* --- 4b.5  Divine Built credit ---------------------------------------
   A craftsman's stamp under the legal line. The monogram PNG has a real
   alpha channel (db-monogram-alpha.png), so no blend trick is needed —
   only the gold renders. */
.built-by {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--spacing-14, 14px);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--steel-rgb), 0.38);
}
.built-by__mark {
  display: block;
  width: auto;
  height: 40px;
  flex: none;
  opacity: 0.88;
  transition: opacity 0.4s var(--ease-out-quart);
}
.built-by a {
  color: rgba(var(--steel-rgb), 0.55);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease-out-quart), border-color 0.35s var(--ease-out-quart);
}
.built-by a:hover,
.built-by a:focus-visible {
  color: var(--gold);
  border-bottom-color: rgba(var(--gold-rgb), 0.5);
}
.built-by:hover .built-by__mark { opacity: 1; }
@media (pointer: coarse) {
  .built-by a { display: inline-block; padding: 11px 0; margin: -11px 0; }
}

/* =====================================================================
   ROUND 5 — Codex audit fixes (Opus, 2026-08-14).
   Appended block. Everything here is either a fail-open default (CSS shows
   the content; JS may then choose to animate it) or a cheap a11y fix.
   ===================================================================== */

/* --- 5.1  Loading gate: fail open -----------------------------------
   Default is "no gate". The gate only exists while <html> carries
   `js-loading`, added by the inline head script and removed by site.js
   (or by the script's own 8s self-clear). Script blocked, script broken,
   JS off — the page is simply visible. */
.load-gate {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
html.js-loading .load-gate {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- 5.2  Contact iris: fail open -----------------------------------
   Default: fully visible. site.js applies `is-iris-armed` (the closed
   ellipse) only once it has an observer that will open it again. */
#contact[data-iris] {
  clip-path: none;
}
#contact[data-iris].is-iris-armed {
  clip-path: ellipse(5% 8% at 50% 50%);
}
#contact[data-iris].is-iris {
  clip-path: ellipse(155% 158% at 50% 50%);
  transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 5.3  FAQ without JS --------------------------------------------
   Native <details> toggling has to reveal the answer on its own. When
   site.js runs it writes inline heights, which win over this. */
details.faq-item[open] > .faq-answer {
  height: auto;
}

/* --- 5.4  #worlds poster underneath ---------------------------------
   The fallback still sits behind the canvas at all times instead of
   waiting for a JS class. The WebGL pass clears to opaque black and
   covers it completely, so nothing changes when the canvas works — but
   a blocked worlds.js, a failed context or a slow first frame now shows
   the photograph rather than an empty black band. */
.worlds-fallback {
  display: block;
  z-index: 0;
}
#worlds.is-fallback .worlds-fallback { z-index: 1; }

/* --- 5.5  Mobile menu above the Call Now pill -----------------------
   Pill is z-index 45; the overlay was 39, so the pill sat on top of the
   menu items. Header stays above the overlay so the close button works. */
@media (max-width: 860px) {
  .nav-overlay { z-index: 60; }
  .site-nav { z-index: 70; }
}

/* --- 5.6  Contrast + visible focus ----------------------------------
   Legal line was ~2.7:1 and the built-by line ~2.3:1. Brushed Steel at
   70% over Blackout measures ~4.9:1; the link is solid Brushed Steel
   (~9.7:1) so it still reads as the brighter half of the sentence. */
.overlay-card--footer .footer-copy { color: rgba(var(--steel-rgb), 0.7); }
.built-by { color: rgba(var(--steel-rgb), 0.7); }
.built-by a { color: var(--steel); }
.built-by a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
/* The earlier rule kills the outline on :focus, which took it away from
   keyboard users too. Give it back — pointer focus stays clean. */
.place-form input:focus-visible,
.place-form textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --- 5.7  Safe-area insets ------------------------------------------ */
.site-nav { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
.site-nav.is-scrolled { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.call-now { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.overlay-card--footer { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 720px) {
  .call-now { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  /* Reserve the fixed-furniture band at the bottom of the viewport: the
     corner mark (bottom-right, 12px + 92px) and the call pill
     (bottom-left, 12px + 46px). Without it the Divine Built credit ends
     up underneath the mark at full scroll. */
  .overlay-card--footer { padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)); }
}

/* --- 5.8  #area marquee overflow ------------------------------------
   The marquee bleeds -5.5vw either side (~79px each at 1440px) and only
   `body { overflow-x: hidden }` was containing it. Clip it at its own
   section instead, so the document itself is no longer over-wide. The
   body guard stays as a belt-and-braces for browsers without
   `overflow: clip`. */
#area { overflow-x: clip; }

/* --- 5.9  Visually-hidden helper (site.css copy) --------------------
   video.css defines this too; about.html only loads site.css. */
.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;
}

/* --- 5.10  Entrance reveals fail open --------------------------------
   `.fade-up` and friends park at opacity 0 and wait for a JS class. Two
   escape hatches, both driven by the inline head script:
     html WITHOUT .js   -> JavaScript is off entirely.
     html WITH .js-static -> the head script waited 8s and site.js never
                             signalled ready (blocked, 404, threw early).
   Either way the copy is simply there. The normal path is untouched. */
html:not(.js) .fade-up,
html:not(.js) .machine-card[data-gallery],
html:not(.js) .scrub-word,
html:not(.js) .reveal-word,
html:not(.js) .blur-word,
html:not(.js) .faq-item,
html:not(.js) #what .card-grid--3 .vv-card,
html:not(.js) .qualify-strip,
html:not(.js) .qualify-verdict,
html:not(.js) .statement-figure,
html.js-static .fade-up,
html.js-static .machine-card[data-gallery],
html.js-static .scrub-word,
html.js-static .reveal-word,
html.js-static .blur-word,
html.js-static .faq-item,
html.js-static #what .card-grid--3 .vv-card,
html.js-static .qualify-strip,
html.js-static .qualify-verdict,
html.js-static .statement-figure {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}
html:not(.js) #contact[data-iris],
html.js-static #contact[data-iris] {
  clip-path: none !important;
}

/* --- 5.11  Menu focus ring + no-JS wordmark --------------------------
   The overlay links were showing the browser's default blue ring. And the
   nav wordmark is built letter-by-letter by JS, so with scripting off the
   brand slot was empty — fall back to the flat wordmark PNG. */
.nav-overlay a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
/* .logo-flip-solo is the live host since the flip driver moved to its own file
   (2026-08-18). Without it here the no-JS and failed-script fallbacks matched
   nothing and the brand slot rendered blank — the one place on the page where
   an empty box is worse than no effect. Both names kept: index.html still runs
   the old driver on .logo-flip. */
html:not(.js) .logo-flip,
html:not(.js) .logo-flip-solo,
html.js-static .logo-flip:empty,
html.js-static .logo-flip-solo:empty {
  display: block;
  width: calc(var(--logo-h) * 2.88);
  height: var(--logo-h);
  background: url("assets/wordmark-alpha.webp") left center / contain no-repeat;
}

/* =====================================================================
   Round 6 — Hormozi copy integration. Three additions, no new JS:
   1. `.qualify-strip--steps` re-grids the existing Round 4 strip from
      stat + 2 columns into 3 equal step columns.
   2. `.reason-list` is the 10-reasons list living inside #area.
   3. `.ps-block` is the P.S. / P.P.S. closer under the contact form.
   All three reuse existing reveal hooks (`.fade-up`, `.qualify-strip`).
   ===================================================================== */
.qualify-strip--steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.qualify-strip--steps .qualify-strip__col:first-child {
  border-left: 0;
  padding-left: 0;
}
.qualify-strip--steps .qualify-strip__col h3 {
  text-transform: uppercase;
}

.reason-head {
  margin-top: var(--spacing-60, 60px);
  margin-bottom: var(--spacing-24);
  font-family: "Black Ops One", "Jost", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.16;
  color: var(--silver);
}
.reason-list {
  list-style: none;
  counter-reset: reason;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16) var(--spacing-32);
  margin: 0;
  padding: 0;
  max-width: 1100px;
}
.reason-list li {
  counter-increment: reason;
  position: relative;
  padding-left: 40px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
}
.reason-list li::before {
  content: counter(reason, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-micro);
  color: var(--gold);
}
.reason-list li span {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 4px;
}

.ps-block {
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-24);
  border-top: 1px solid rgba(var(--steel-rgb), 0.22);
  max-width: 68ch;
}
.ps-block p + p { margin-top: var(--spacing-15); }
.ps-tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: var(--tracking-label);
  color: var(--gold);
  margin-right: 6px;
}

@media (max-width: 980px) {
  .qualify-strip--steps { grid-template-columns: 1fr; }
  .qualify-strip--steps .qualify-strip__col:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 720px) {
  .reason-list { grid-template-columns: 1fr; }
}

/* --- 5.12  Get Started stays in the header on phones -----------------
   The 860px query hid the whole .site-nav__links group, which took the
   only always-visible CTA down with it and buried "Get Started" inside
   the hamburger. Keep the row, drop just the three text links, and let
   the button ride between the wordmark and the toggle. The overlay copy
   is now a duplicate, so it goes. */
@media (max-width: 860px) {
  .site-nav__links {
    display: flex;
    align-items: center;
    gap: 0;
  }
  .site-nav__links .nav-link { display: none; }
  .site-nav .btn-primary {
    padding: 10px 14px;
    font-size: 10px;
    white-space: nowrap;
  }
  .nav-overlay .btn-primary { display: none; }
}
/* Narrow phones: the wordmark, the button and the 44px toggle all have to
   fit one line. Tighten the header gutters and the button, not the tap
   targets. */
@media (max-width: 400px) {
  .site-nav {
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .site-nav .btn-primary {
    padding: 10px 11px;
    font-size: 9px;
    letter-spacing: 0.06em;
    flex: 0 0 auto;
  }
  /* The 44px tap target is not negotiable — squeeze the wordmark first. */
  .site-nav__toggle { flex: 0 0 44px; }
}
@media (max-width: 360px) {
  .site-nav .logo-flip-solo.vv-wordmark { --logo-h: 18px; }
}


/* Footer vending-machine illustration. Its gold is baked into fill= / stroke=
   presentation attributes in the markup, which cannot read a custom property.
   CSS wins over a presentation attribute, so route them through --gold here
   rather than hard-coding a second copy of the brand colour in four html files. */
.vend-machine [fill="#C9862F"] { fill: var(--gold); }
.vend-machine [stroke="rgba(201,134,47,0.3)"] { stroke: rgba(var(--gold-rgb), 0.3); }
.vend-machine [stroke="rgba(201,134,47,0.45)"] { stroke: rgba(var(--gold-rgb), 0.45); }
.vend-machine [stroke="rgba(201,134,47,0.6)"] { stroke: rgba(var(--gold-rgb), 0.6); }