/* ═══════════════════════════════════════════════════════════
   NYCE SHOT — BRAND KIT v1.2 · SHARED STYLESHEET
   One stylesheet for all three pages:
     index.html        → .hero.hero-home
     lineup.html       → .hero.has-bg-cycle
     get-started.html  → .hero.has-form
   Edit shared styles (nav, footer, buttons, palette) once here
   and all three pages pick up the change.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── EDITORIAL CREAM THEME ─── */
  --paper:            #FAF7F1;
  --paper-2:          #F2EEE6;
  --paper-3:          #E8E2D6;
  --text:             #1E1B17;
  --text-soft:        #5E5850;
  --block:            #12100E;
  --block-2:          #201C18;
  --on-block:         #F3EFE8;
  --on-block-soft:    #CFC8BC;
  --accent:           #2F7D7B;
  --accent-bright:    #55A3A1;
  --accent-deep:      #1E5654;
  --accent-pale:      #BFDDDC;
  --accent2:          #9A8E7E;
  --accent2-bright:   #B6AB9C;
  --accent2-deep:     #665C4F;
  --accent2-pale:     #D6CDBF;
  --cyan:             #9DCCD8;
  --cyan-bright:      #C7EDFA;
  --cyan-deep:        #6BB5C0;
  --line:             rgba(30, 27, 23, 0.10);
  --line-strong:      rgba(30, 27, 23, 0.16);
  --accent-glow:      rgba(47, 125, 123, 0.12);
  --bloom-a:          rgba(47, 125, 123, 0.05);

  /* ─── LEGACY ALIASES — map old variable names to new palette ─── */
  --ink:              var(--paper);
  --ink-soft:         var(--paper-2);
  --ink-card:         var(--paper-2);
  --ink-card-2:       var(--paper-3);
  --white:            var(--block);

  --chrome:           var(--text);
  --chrome-mid:       var(--text-soft);
  --chrome-side:      var(--accent2);
  --chrome-deep:      var(--accent2-deep);

  --gold:             var(--accent);
  --gold-bright:      var(--accent-bright);
  --gold-deep:        var(--accent-deep);
  --gold-pale:        var(--accent-pale);

  --copper:           var(--accent2);
  --copper-bright:    var(--accent2-bright);
  --copper-deep:      var(--accent2-deep);
  --copper-pale:      var(--accent2-pale);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--chrome);
  font-family: 'Archivo', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 12% 8%, var(--bloom-a) 0%, transparent 45%),
    radial-gradient(circle at 88% 92%, var(--bloom-a) 0%, transparent 45%);
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Diagonal scanline accent */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: 0.015;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0px,
    transparent 3px,
    var(--text) 3px,
    var(--text) 4px
  );
}

.container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 640px) { .container { padding: 0 32px; } }
@media (min-width: 1024px) { .container { padding: 0 48px; } }

/* ═══════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════ */
nav.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #000000;
  border-bottom: 1px solid var(--line);
  padding: 2px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
@media (min-width: 640px) { nav.topbar { padding: 4px 0; } }
@media (min-width: 1024px) { nav.topbar { padding: 4px 0; } }
nav.topbar > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav.topbar .left {
  display: flex;
  align-items: center;
}
nav.topbar .nav-logo {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}
nav.topbar .nav-logo img {
  height: 95px;
  width: auto;
  display: block;
  filter: none;
}
@media (min-width: 768px) {
  nav.topbar .nav-logo img { height: 125px; }
}

nav.topbar .nav-links {
  display: none;
  color: var(--on-block);
}
@media (min-width: 768px) { nav.topbar .nav-links { display: block; } }
nav.topbar .nav-links a {
  color: var(--on-block);
  opacity: 0.6;
  text-decoration: none;
  margin-left: 28px;
  transition: color 0.2s, opacity 0.2s;
}
nav.topbar .nav-links a:hover,
nav.topbar .nav-links a.current { color: var(--accent-bright); opacity: 1; }

/* ── Mobile menu ──
   Below 768px the nav links collapse behind a hamburger at top right. The
   panel reuses the same .nav-links markup the desktop bar uses, so the links
   and their .current state live in one place per page. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;                 /* 44px keeps the tap target thumb-sized */
  height: 44px;
  padding: 0 9px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--on-block);
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.nav-toggle:hover span { background: var(--accent-bright); }
/* Bars fold into an X while the panel is open. */
nav.topbar.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.topbar.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.topbar.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
  nav.topbar.is-open .nav-links {
    display: block;
    position: absolute;        /* out of flow, so the bar itself never shifts */
    top: 100%;
    left: 0;
    right: 0;
    background: #000000;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 4px 0 8px;
  }
  nav.topbar.is-open .nav-links a {
    display: block;
    margin-left: 0;
    padding: 16px 24px;
    opacity: 0.85;
    border-bottom: 1px solid var(--line);
  }
  nav.topbar.is-open .nav-links a:last-child { border-bottom: none; }
  nav.topbar.is-open .nav-links a.current {
    opacity: 1;
    box-shadow: inset 3px 0 0 var(--accent-bright);
  }
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   HERO — shared base
   ═══════════════════════════════════════════════════════════ */
.hero {
  min-height: auto;
  padding: 20px 0 32px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 768px) { .hero { padding: 28px 0 44px; min-height: auto; } }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
  }
}

.hero-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
}
@media (min-width: 768px) { .hero-meta { font-size: 13px; margin-bottom: 36px; } }
.hero-meta .bar {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  max-width: 200px;
}

.hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(38px, 7vw, 92px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--chrome);
  margin-bottom: 24px;
  text-transform: uppercase;
  text-shadow:
    3px 3px 0 var(--chrome-side),
    6px 6px 0 var(--chrome-deep);
}
@media (min-width: 768px) {
  .hero h1 { text-shadow: 4px 4px 0 var(--chrome-side), 8px 8px 0 var(--chrome-deep); }
}
.hero h1 .script {
  display: block;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 0.55em;
  background: linear-gradient(135deg, var(--copper-pale) 0%, var(--copper) 35%, var(--gold) 70%, var(--gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: none;
  letter-spacing: -0.01em;
  margin-top: -0.1em;
  margin-left: 0.1em;
  transform: rotate(-4deg);
  line-height: 0.9;
  filter: drop-shadow(0 2px 8px rgba(47, 125, 123, 0.3));
}

.hero p.lede {
  font-size: 18px;
  line-height: 1.55;
  max-width: 480px;
  color: var(--chrome-mid);
  opacity: 0.82;
  margin-bottom: 36px;
}
@media (min-width: 768px) { .hero p.lede { font-size: 20px; } }

.hero-actions { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 480px) { .hero-actions { flex-direction: row; } }

/* ─── HERO VARIANT A: HOME (was index.html) ─── */
.hero.hero-home { padding: 16px 0 24px; }
@media (min-width: 768px) { .hero.hero-home { padding: 20px 0 36px; } }
@media (min-width: 900px) {
  .hero.hero-home .hero-grid { grid-template-columns: 1fr 0.85fr; }
}
.hero.hero-home .hero-meta { margin-bottom: 18px; }
@media (min-width: 768px) { .hero.hero-home .hero-meta { margin-bottom: 22px; } }
.hero.hero-home h1 {
  font-size: clamp(44px, 8vw, 110px);
  margin-bottom: 16px;
}
.hero.hero-home p.lede { margin-bottom: 24px; }

/* ── Home hero on phones and tablets ──
   The call-to-action moves below the photo, so the sequence reads
   headline -> promise -> proof -> action instead of asking for the tap before
   the photo has made its case.

   The text column is a wrapper div holding the meta, headline, lede and
   button. `display: contents` dissolves that wrapper so its children become
   grid items in their own right, which is what makes the button orderable
   independently of the photo. The wrapper carries no styling of its own, so
   nothing is lost by dissolving it. Grid gap is zeroed at the same time —
   otherwise the 40px gap meant for two columns would open up between every
   line of the headline block; the elements' own margins handle spacing. */
@media (max-width: 899px) {
  .hero.hero-home .hero-grid { gap: 0; }
  .hero.hero-home .hero-grid > div:first-child { display: contents; }
  .hero.hero-home .hero-media { order: 1; }
  .hero.hero-home .hero-actions { order: 2; margin-top: 22px; }
  /* Shorter than the 7/9 portrait used on desktop — at phone widths that
     crop stood 450px tall and pushed everything else off-screen. */
  .hero.hero-home .hero-media { aspect-ratio: 5 / 4; width: 100%; }

  /* Section 01 repeats the hero's "See the Lineup" call to action. Side by
     side in two columns that reads as a section-level action; stacked on a
     phone it is just the same button twice within a screen or two of
     scrolling. The hero keeps it. */
  .section-about .about-spread-link { display: none; }
}

/* The home eyebrow is 41 characters — long enough to wrap onto a second line
   on a phone, which broke it mid-phrase after "SMART VENDING ·". It scales
   with the viewport instead so it stays on one line down to small handsets,
   and nowrap makes that a guarantee rather than a calculation that happens to
   work at the widths tested. The gradient rule is dropped because a
   full-width eyebrow leaves it only a stub of space. */
@media (max-width: 767px) {
  .hero.hero-home .hero-meta {
    font-size: clamp(8px, 2.6vw, 11px);
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
  .hero.hero-home .hero-meta .bar { display: none; }
}

/* Brand-mark above the hero meta (left column) */
.hero-logo-banner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 12px;
}
.hero-logo-banner img {
  height: 80px;
  width: auto;
  max-width: 100%;
  display: block;
  filter: drop-shadow(0 0 16px rgba(47, 125, 123, 0.18));
}
@media (min-width: 768px) {
  .hero-logo-banner { margin-bottom: 16px; }
  .hero-logo-banner img { height: 120px; }
}

/* Hero media well — image/video container in the right column */
.hero-media {
  position: relative;
  width: 350px;
  max-width: 100%;
  aspect-ratio: 7 / 9;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  box-shadow: 0 0 80px rgba(47, 125, 123, 0.08), inset 0 0 60px rgba(47, 125, 123, 0.05);
  justify-self: center;
}
.hero-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(47, 125, 123, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(110, 122, 133, 0.12) 0%, transparent 45%),
    repeating-linear-gradient(90deg, transparent 0px, transparent 40px, rgba(47, 125, 123, 0.05) 40px, rgba(47, 125, 123, 0.05) 41px);
  z-index: 1;
}
.hero-media > img,
.hero-media > video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85) saturate(0.9);
}
.hero-media .corner-tag {
  position: absolute;
  top: 14px; left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
  z-index: 3;
  font-weight: 700;
  text-transform: uppercase;
}
.hero-media .corner-tag.br {
  top: auto; left: auto;
  bottom: 14px; right: 14px;
  opacity: 0.5;
  color: var(--chrome);
  font-weight: 400;
}
/* Narrow phones: let the media well go fluid so the fixed 350px doesn't
   push the hero wider than the viewport (was masked by overflow-x: hidden) */
.hero > .container { min-width: 0; }
@media (max-width: 430px) {
  .hero-media { width: 100%; }
}

/* ─── HERO VARIANT B: LINEUP — full-bleed video background ─── */
.hero.has-bg-cycle {
  min-height: auto;
  padding: 14px 0 18px;
}
@media (min-width: 768px) {
  .hero.has-bg-cycle { padding: 18px 0 26px; }
}
.hero.has-bg-cycle .hero-grid {
  grid-template-columns: 1fr !important;
  max-width: 900px;
  margin-left: 0;
  margin-right: auto;
}
.hero.has-bg-cycle > .container { position: relative; z-index: 2; }

/* Background media layer — sits absolutely behind the hero text */
.hero-bg-cycle {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hero text sits directly over the video — white body + muted teal accent */
.hero.has-bg-cycle .hero-caption {
  background: transparent;
  padding: 0;
  max-width: fit-content;
  box-shadow: none;
  border: none;
}
.hero.has-bg-cycle .hero-caption h1 {
  color: #FFFFFF !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(0, 0, 0, 0.35);
  margin-bottom: 12px;
}
.hero.has-bg-cycle .hero-caption h1 .script {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(0, 0, 0, 0.35);
}
.hero.has-bg-cycle .hero-caption .lede {
  color: #FFFFFF !important;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(0, 0, 0, 0.35);
  max-width: 520px;
  margin-bottom: 0;
}

/* ─── HERO VARIANT C: GET STARTED — photo background + inline form ─── */
.hero.has-form {
  min-height: auto;
  isolation: isolate;
  padding: 48px 0 64px;
}
@media (min-width: 768px) {
  .hero.has-form { padding: 72px 0 96px; }
}
.hero.has-form > .container { position: relative; z-index: 3; }
.hero.has-form .hero-grid {
  align-items: center;
}
@media (min-width: 900px) {
  .hero.has-form .hero-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
  }
}

/* Merged venue photo — static background sits behind hero text + form */
.hero.has-form .hero-bg-image {
  position: absolute;
  inset: 0;
  background-image: url("images/venue-collage-merged.jpg");
  background-size: cover;
  background-position: center;
}
/* Dark overlay above the photo for text + form readability */
.hero.has-form .hero-bg-cycle::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.40) 100%);
  pointer-events: none;
}
/* Subtle teal accent bloom */
.hero.has-form .hero-bg-cycle::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 75% 30%, rgba(47, 125, 123, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(47, 125, 123, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
/* Hero caption panel (left col) — text sits directly on darkened photo */
.hero.has-form .hero-caption h1 {
  color: #FFFFFF !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(0, 0, 0, 0.35);
}
.hero.has-form .hero-caption .lede {
  color: #FFFFFF !important;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(0, 0, 0, 0.35);
}
.hero.has-form .hero-caption .hero-meta {
  color: var(--accent-bright) !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* LAUNCH shimmer — subtle cyan color cycle for life */
@keyframes launchShimmer {
  0%   { color: var(--cyan-bright) !important; -webkit-text-fill-color: var(--cyan-bright) !important; opacity: 1; }
  50%  { color: var(--cyan) !important; -webkit-text-fill-color: var(--cyan) !important; opacity: 0.85; }
  100% { color: var(--cyan-bright) !important; -webkit-text-fill-color: var(--cyan-bright) !important; opacity: 1; }
}
.hero.has-form h1 .script {
  animation: launchShimmer 4s ease-in-out infinite !important;
  font-size: 1em !important;
  margin-top: 0.05em !important;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn .arrow { transition: transform 0.25s ease; display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-gold {
  background: var(--block);
  color: var(--on-block);
  border-color: var(--block);
  box-shadow: 0 4px 20px rgba(30, 27, 23, 0.12);
}
.btn-gold:hover {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 6px 28px rgba(47, 125, 123, 0.25);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--chrome);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* Focus states for keyboard users */
nav.topbar .nav-links a:focus-visible,
.btn:focus-visible,
.btn-gold:focus-visible,
.footer-col a:focus-visible,
.about-spread-link:focus-visible,
.hw-card-cta:focus-visible,
.hw-specs-trigger:focus-visible,
.form-submit:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ═══════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════ */
section.section {
  padding: 64px 0 80px;
  border-top: 1px solid var(--line);
  position: relative;
}
@media (min-width: 768px) { section.section { padding: 88px 0 100px; } }

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
  align-items: baseline;
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: 220px 1fr;
    gap: 60px;
    margin-bottom: 56px;
  }
}

.section-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 12px;
  border-top: 1px solid var(--gold);
  display: inline-block;
  font-weight: 700;
}

.section-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--chrome);
  text-transform: uppercase;
}
.section-title .script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 0.85em;
  background: linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: none;
  letter-spacing: -0.01em;
  display: inline-block;
  transform: rotate(-3deg) translateY(-0.05em);
}

.section-sub {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--chrome-mid);
  opacity: 0.82;
  max-width: 580px;
  margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════
   STAT BAR — dark treatment
   ═══════════════════════════════════════════════════════════ */
.stat-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 0;
  background: var(--block);
  color: var(--on-block);
  position: relative;
  overflow: hidden;
}
.stat-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
  pointer-events: none;
}
.stat-bar > .container { position: relative; z-index: 1; }
.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}
.stat-item {
  text-align: center;
  padding: 12px 20px;
  position: relative;
}
@media (min-width: 640px) {
  .stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: rgba(243, 239, 232, 0.15);
  }
}
.stat-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--on-block);
  text-transform: uppercase;
  margin-bottom: 8px;
}
@media (min-width: 768px) { .stat-title { font-size: 26px; } }
.stat-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   ABOUT NYCE SHOT
   ═══════════════════════════════════════════════════════════ */
.about-blurb {
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--chrome-mid);
  opacity: 0.88;
  max-width: 560px;
}
.about-blurb .script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.3em;
  background: linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
  display: inline-block;
  transform: rotate(-2deg);
}

/* ─── ABOUT + TESTIMONIALS — COMBINED SPREAD ─── */
.about-spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 900px) {
  .about-spread {
    grid-template-columns: 0.85fr 1fr;
    gap: 80px;
  }
}

.about-spread-left {
  position: relative;
}
@media (min-width: 900px) {
  .about-spread-left {
    position: sticky;
    top: 140px; /* clears the sticky nav */
  }
}

.about-spread-title {
  margin-top: 20px;
}
.about-spread-blurb {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--chrome-mid);
  opacity: 0.82;
  margin-top: 22px;
  max-width: 460px;
}
.about-spread-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 12px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line-strong);
  background: transparent;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.about-spread-link:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  transform: translateX(2px);
}
.about-spread-link .arrow {
  transition: transform 0.2s;
}
.about-spread-link:hover .arrow {
  transform: translateX(4px);
}

.about-spread-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 24px;
}

.testimonial-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Lighter testimonial treatment when stacked vertically in the about spread */
.testimonial-stack .testimonial {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 28px 0 32px;
  gap: 18px;
  transition: none;
}
.testimonial-stack .testimonial:first-child {
  padding-top: 0;
}
.testimonial-stack .testimonial:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.testimonial-stack .testimonial:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
  border-bottom-color: var(--line-strong);
}
.testimonial-stack .testimonial-quote::before {
  font-size: 36px;
  margin-bottom: 8px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════ */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
@media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  background: var(--ink-card);
  border: 1px solid var(--line);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.testimonial:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(47, 125, 123, 0.12);
}
.testimonial-quote {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--chrome);
  font-weight: 400;
}
.testimonial-quote::before {
  content: '"';
  font-family: 'Archivo Black', sans-serif;
  font-size: 48px;
  line-height: 0.5;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
  height: 24px;
}
.testimonial-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--chrome);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.testimonial-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.testimonial-venue {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--chrome);
  opacity: 0.45;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   CTA FINAL
   ═══════════════════════════════════════════════════════════ */
.cta-final {
  background: var(--block);
  padding: 28px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: var(--on-block);
}
@media (min-width: 768px) { .cta-final { padding: 40px 0; } }
.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
  pointer-events: none;
}
.cta-final > .container { position: relative; z-index: 1; }
.cta-final-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-bright);
  opacity: 0.7;
  margin-bottom: 14px;
  font-weight: 700;
}
.cta-final-headline {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 900px;
  margin: 0 auto;
  color: var(--ink);
}
/* Home CTA runs a longer headline — needs the extra measure */
.cta-final.cta-final-wide .cta-final-headline {
  max-width: 1100px;
  white-space: normal;
}
.cta-final-headline .script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 0.95em;
  color: var(--ink);
  opacity: 0.85;
  text-transform: none;
  letter-spacing: 0;
  display: inline-block;
  transform: rotate(-3deg);
}
.cta-final-sub {
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-block);
  opacity: 0.75;
  max-width: 560px;
  margin: 18px auto 0;
}
.cta-final-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}
@media (min-width: 480px) { .cta-final-actions { flex-direction: row; } }
.cta-final .btn-gold {
  background: var(--paper);
  color: var(--text);
  border-color: var(--paper);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.cta-final .btn-gold:hover {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer {
  background: #000000;
  border-top: 1px solid var(--line);
  padding: 32px 0 5px;
  color: var(--on-block);
}
/* On phones the two link columns sit side by side rather than stacking —
   stacking pushed the contact details a long way down the page. The brand
   spans the full width above them. */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 18px;
  margin-bottom: 20px;
}
.footer-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
  .footer-grid > :first-child { grid-column: auto; }
}
/* Logo and tagline sit side by side rather than stacked — the tagline wrapped
   to two lines under the logo and cost a lot of vertical space for a line that
   is supporting text, not a heading. */
.footer-grid > :first-child {
  display: flex;
  align-items: center;
  /* Tighter on phones so the tagline keeps a safe margin on one line at
     narrow widths; nowrap means running out of room would overflow the page
     rather than wrap. */
  gap: 10px;
}
@media (min-width: 768px) {
  .footer-grid > :first-child { gap: 14px; }
}
.footer-brand {
  display: inline-block;
  line-height: 0;
  margin-bottom: 0;
  flex-shrink: 0;
  text-decoration: none;
}
.footer-brand img {
  height: 64px;
  width: auto;
  max-width: 100%;
  display: block;
  filter: none;
}
@media (min-width: 768px) {
  .footer-brand img { height: 112px; }
}
/* Sits on one line beside the logo at every width.
   The 40-character tagline needed 280px in the 244px next to the logo. Most
   of that overrun was tracking — 40 characters of 0.16em is roughly 58px of
   pure letter-spacing — so tightening the tracking recovers most of the
   shortfall without shrinking the text into illegibility. Size scales with
   the viewport for the rest, and nowrap makes one line a guarantee rather
   than a calculation that happens to hold at the widths tested.
   The old max-width forced a wrap on desktop too, where there was room. */
.footer-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(6px, 2vw, 9px);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  font-weight: 700;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .footer-tag { font-size: 11px; letter-spacing: 0.18em; }
}
.footer-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
  .footer-col h4 { font-size: 12px; letter-spacing: 0.25em; }
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a {
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  color: var(--on-block);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
  /* The contact email is wider than a half-width column at 375px. */
  overflow-wrap: break-word;
}
@media (min-width: 768px) {
  .footer-col a { font-size: 15px; }
}
.footer-col a:hover { opacity: 1; color: var(--gold-bright); }
.footer-bot {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome);
  opacity: 0.4;
}
@media (min-width: 640px) {
  .footer-bot { flex-direction: row; justify-content: space-between; }
}

/* ═══════════════════════════════════════════════════════════
   LINEUP — HARDWARE CARDS + GRID
   ═══════════════════════════════════════════════════════════ */
.lineup-category { margin-top: 56px; }
.lineup-category:first-of-type { margin-top: 0; }
.lineup-category-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.lineup-category-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 32px;
  line-height: 1;
  background: linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
.lineup-category-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.lineup-category-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 700;
}
.lineup-category-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(24px, 3.5vw, 38px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--chrome);
  text-transform: uppercase;
}
.lineup-category-title .script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  background: linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 0.75em;
  text-transform: none;
  letter-spacing: 0;
  display: inline-block;
  transform: rotate(-3deg);
}
.lineup-category-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chrome);
  opacity: 0.4;
  font-weight: 700;
}

/* Tag group wrapper so tag + availability stack together */
.lineup-category-tag-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

/* Availability line — bold display font, sits inline right of the title */
.lineup-category-availability {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.3;
  font-weight: 900;
}
@media (min-width: 768px) {
  .lineup-category-availability { font-size: 15px; }
}

.lineup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) { .lineup-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1120px) { .lineup-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* Hardware card */
.hw-card {
  background: var(--ink-card);
  border: 1px solid var(--line);
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.hw-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(47, 125, 123, 0.12);
}

/* ─── Product category border: booth = muted teal, kiosk = logo cyan ─── */
.lineup-category[data-category="booth"] .hw-card {
  border: 3px solid var(--accent);
}
.lineup-category[data-category="booth"] .hw-card:hover {
  border-color: var(--accent-bright);
}
.lineup-category[data-category="kiosk"] .hw-card {
  border: 3px solid var(--cyan-deep);
}
.lineup-category[data-category="kiosk"] .hw-card:hover {
  border-color: var(--cyan);
}
.hw-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}
.hw-card-num { color: var(--gold); }
.hw-card-line { flex: 1; height: 1px; background: var(--line); }
.hw-card-tag { color: var(--chrome); opacity: 0.5; }

.hw-card-art {
  aspect-ratio: 5/4;
  background: var(--ink);
  border: 1px solid var(--line);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hw-card-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(47, 125, 123, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(47, 125, 123, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.hw-card-art .product-img {
  position: relative;
  z-index: 2;
  max-width: 72%;
  max-height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(47, 125, 123, 0.15));
}

/* Wall-mounted badge — placed inside kiosk card art frames on wall-mount models only */
.hw-card-mount-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  background: var(--accent);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Dark stage/spotlight background for photo booth card art frames only */
.lineup-category[data-category="booth"] .hw-card-art {
  background-image: url("images/card-art-stage-bg.jpg");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-color: #82b8bd; /* teal fallback matching wall color, fills any extra top area */
}

/* Dark bar / wall-wash lighting background for smart kiosk card art frames only */
.lineup-category[data-category="kiosk"] .hw-card-art {
  background-image: url("images/card-art-kiosk-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1F2229; /* dark charcoal fallback */
}
/* Boost drop-shadow on kiosk product images so they pop against the dark bg */
.lineup-category[data-category="kiosk"] .hw-card-art .product-img {
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.55));
  max-width: 92%;
  max-height: 92%;
}
/* Wall-mount kiosk cards: shift image down so it doesn't touch the WALL-MOUNTED badge */
.lineup-category[data-category="kiosk"] .hw-card-art:has(.hw-card-mount-badge) {
  padding-top: 5%;
}
.lineup-category[data-category="kiosk"] .hw-card-art:has(.hw-card-mount-badge) .product-img {
  max-width: 100%;
  max-height: 100%;
}
/* Ghost text (like "TOWER" placeholder) needs to be light on the dark bg */
.lineup-category[data-category="kiosk"] .hw-card-art .ghost {
  color: rgba(243, 239, 232, 0.15);
  -webkit-text-fill-color: rgba(243, 239, 232, 0.15);
}

/* Carousel — one booth visible at a time, auto-advances, arrows for manual nav */
.hw-card-art.has-carousel {
  overflow: hidden;
  position: relative;
  padding: 0;
}
.hw-card-art.has-carousel .carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.hw-card-art.has-carousel .carousel-item {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 2% 3%;
}
.hw-card-art.has-carousel .carousel-item img {
  max-width: 96%;
  max-height: 96%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}

/* Arrow navigation buttons */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Archivo', sans-serif;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  backdrop-filter: blur(4px);
}
.carousel-nav:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-50%) scale(1.08);
}
.carousel-nav:focus {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
.carousel-nav span {
  display: block;
  margin-top: -3px; /* nudge for ‹ › vertical alignment */
}
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
@media (min-width: 768px) {
  .carousel-nav { width: 40px; height: 40px; font-size: 26px; }
}

/* Ghost placeholder type inside a card art frame */
.hw-card-art .ghost {
  position: relative;
  z-index: 2;
  font-family: 'Archivo Black', sans-serif;
  font-size: 44px;
  letter-spacing: -0.03em;
  color: var(--chrome-deep);
  text-transform: uppercase;
  opacity: 0.4;
}

.hw-card-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--chrome);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hw-card-title .script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  background: linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 0.85em;
  text-transform: none;
  letter-spacing: 0;
  display: inline-block;
  transform: rotate(-3deg);
}
.hw-card-body {
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--chrome-mid);
  opacity: 0.82;
  margin-bottom: 14px;
}

.hw-card-features {
  list-style: none;
  margin-bottom: 16px;
}
.hw-card-features li {
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--chrome);
  padding: 5px 0;
  padding-left: 22px;
  position: relative;
}
.hw-card-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 1px;
  background: var(--gold);
}

/* Compact spec list — shows specs at a glance on the card face */
.hw-card-specs-mini {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hw-card-specs-mini li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.hw-card-specs-mini li:last-child {
  border-bottom: none;
}
.hw-card-specs-mini .spec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 82px;
}
.hw-card-specs-mini .spec-value {
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  line-height: 1.35;
  color: var(--chrome);
}

/* ─── HW Card: drawer-trigger button ─── */
.hw-specs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 0;
  margin-bottom: 14px;
  border: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.hw-specs-trigger:hover { color: var(--gold-bright); }
.hw-specs-trigger:focus { outline: none; color: var(--gold-bright); }
.hw-specs-trigger .label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hw-specs-trigger .label::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: var(--gold);
}
.hw-specs-trigger .arrow {
  transition: transform 0.25s ease;
}
.hw-specs-trigger:hover .arrow {
  transform: translateX(4px);
}

/* ─── SPECS DRAWER (right-side slide-out panel) ─── */
.specs-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  z-index: 200;
}
.specs-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.specs-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  background: var(--ink-card);
  border-left: 1px solid var(--line-strong);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 201;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.specs-drawer.is-open {
  transform: translateX(0);
}

.specs-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.specs-drawer-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 8px;
}
.specs-drawer-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--chrome);
  text-transform: uppercase;
}
.specs-drawer-close {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--chrome);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.specs-drawer-close:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  transform: rotate(90deg);
}
.specs-drawer-close:focus {
  outline: none;
  border-color: var(--gold-bright);
}

.specs-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 32px;
}

/* Hidden data containers — JS reads from these */
.specs-data {
  display: none;
}

@media (max-width: 640px) {
  .specs-drawer {
    max-width: 100%;
  }
  .specs-drawer-header {
    padding: 20px 22px 16px;
  }
  .specs-drawer-body {
    padding: 20px 22px 24px;
  }
  .specs-drawer-title {
    font-size: 20px;
  }
}

.hw-spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Drawer section headers (used above Highlights and Specifications) */
.hw-spec-section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 8px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-strong);
}
.hw-spec-section-title:not(:first-child) {
  margin-top: 32px;
}

/* Highlights list in the drawer */
.hw-spec-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hw-spec-highlights li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}
.hw-spec-highlights li:last-child {
  border-bottom: none;
}
.hw-spec-highlights li::before {
  content: '— ';
  color: var(--accent);
  font-weight: 700;
  margin-right: 4px;
}
.hw-spec-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hw-spec-list li:first-child { padding-top: 0; }
.hw-spec-list li:last-child { border-bottom: none; padding-bottom: 0; }
.hw-spec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.hw-spec-value {
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  color: var(--chrome);
  line-height: 1.5;
  opacity: 0.85;
}

.hw-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--line-strong);
  text-decoration: none;
  transition: all 0.25s;
  align-self: flex-start;
}
.hw-card-cta:hover {
  background: linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);
  color: var(--ink);
  border-color: var(--gold);
}
.hw-card-cta .arrow { transition: transform 0.25s; }
.hw-card-cta:hover .arrow { transform: translateX(4px); }

/* Placeholder card — subtle, signals "reserved/coming soon" */
.placeholder-card {
  border-style: dashed !important;
  opacity: 0.7;
}
.placeholder-card .hw-card-art .ghost {
  font-size: 80px !important;
  opacity: 0.25 !important;
}

/* Brand statement card (slot 3 in row 1) */
.brand-card {
  background:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url("images/brand-card-collage.jpg") center/cover no-repeat,
    var(--block);
  border: 1px solid var(--line-strong);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  color: var(--on-block);
}
.brand-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 16px 40px rgba(47, 125, 123, 0.18);
}
.brand-card-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-bright);
  font-weight: 700;
}
.brand-card-headline {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--on-block);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.brand-card-headline .script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  background: linear-gradient(135deg, var(--copper-pale) 0%, var(--gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 0.9em;
  text-transform: none;
  letter-spacing: 0;
  display: block;
  margin-top: 4px;
  transform: rotate(-3deg);
}
.brand-card-body {
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-block);
  opacity: 0.9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   PARTNER INQUIRY FORM
   ═══════════════════════════════════════════════════════════ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 960px) {
  .form-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: start;
  }
}

.form-aside-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.form-aside-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--chrome);
}
.form-aside-title .script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  background: linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 0.75em;
  text-transform: none;
  letter-spacing: 0;
  display: inline-block;
  transform: rotate(-3deg);
}
.form-aside-body {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--chrome-mid);
  opacity: 0.82;
}

.next-steps {
  list-style: none;
  border-top: 1px solid var(--line);
}
.next-steps li {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.next-steps-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--gold);
  font-weight: 700;
  padding-top: 4px;
  flex-shrink: 0;
}
.next-steps-content { flex: 1; min-width: 0; }
.next-steps-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--chrome);
  margin-bottom: 5px;
}
.next-steps-body {
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  color: var(--chrome-mid);
  opacity: 0.7;
  line-height: 1.5;
}

/* Form card */
.form-card {
  background: var(--ink-card);
  border: 1px solid var(--line);
  padding: 28px 22px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}
@media (min-width: 640px) { .form-card { padding: 40px 36px; } }

.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-row.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .form-row.two-col { grid-template-columns: 1fr 1fr; gap: 16px; }
}
.form-row.two-col .form-field { margin-bottom: 0; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.form-label .req { color: var(--copper-bright); }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  color: var(--chrome);
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--ink-card-2);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--chrome);
  opacity: 0.3;
}
.form-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%232F7D7B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
  color: var(--chrome);
}
.form-select option { background: var(--ink); color: var(--chrome); }

.form-submit {
  width: 100%;
  padding: 18px 28px;
  background: linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);
  color: var(--ink);
  border: 1px solid var(--gold-deep);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  box-shadow: 0 4px 20px rgba(47, 125, 123, 0.2);
}
.form-submit:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(47, 125, 123, 0.35);
}
.form-submit .arrow { transition: transform 0.2s; }
.form-submit:hover .arrow { transform: translateX(4px); }

.form-disclaimer {
  margin-top: 18px;
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  color: var(--chrome);
  opacity: 0.5;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL ACCENT OVERRIDE — same font as headline, accent color
   Unified voice: Archivo Black throughout, accent words pop via color only
   ═══════════════════════════════════════════════════════════ */
.script,
.hero h1 .script,
.section-title .script,
.lineup-category-title .script,
.hw-card-title .script,
.brand-card-headline .script,
.cta-final-headline .script,
.about-blurb .script,
.form-aside-title .script,
.testimonial-quote .script,
.footer-tag .script {
  font-family: 'Archivo Black', sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  color: var(--accent) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--accent) !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  display: inline !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Hero h1 — accent on its own line, slightly smaller for hierarchy */
.hero h1 .script {
  display: block !important;
  margin-top: 0.1em !important;
  line-height: 0.9 !important;
  font-size: 0.6em !important;
  text-transform: uppercase !important;
  letter-spacing: -0.03em !important;
}

/* Brand card — accent stays on its own line, brighter teal for dark image bg */
.brand-card-headline .script {
  display: block !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
  color: var(--accent-bright) !important;
  -webkit-text-fill-color: var(--accent-bright) !important;
}

/* CTA Final — accent script on ink block (no stroke needed on dark bg) */
.cta-final-headline .script {
  color: var(--accent-bright) !important;
  -webkit-text-fill-color: var(--accent-bright) !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  paint-order: normal !important;
}

/* Get Started hero — keeps the shimmer + full-size accent line */
.hero.has-form h1 .script {
  animation: launchShimmer 4s ease-in-out infinite !important;
  font-size: 1em !important;
  margin-top: 0.05em !important;
}