*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* dB unit rendered in DM Sans so Bebas Neue doesn't force uppercase */
.unit-db { font-family:'DM Sans',sans-serif; font-weight:400; font-size:0.45em; letter-spacing:0; vertical-align:baseline; }
:root {
  --black:#0a0a0a; --white:#f2f0ec;
  --orange:#e8420a; --silver:#a0a0a0; --silver-dim:#2a2a2a;
}
html, body {
  background:var(--black); color:var(--white);
  font-family:'DM Sans',sans-serif; cursor:none;
  scroll-behavior:smooth; overflow-x:hidden;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 48px; transition:background 0.4s;
}
nav.scrolled {
  background:rgba(10,10,10,0.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--silver-dim);
}
nav.menu-open { z-index: 9998; } /* lifts nav above all page sections when mobile menu is open */
.nav-logo img { height:26px; mix-blend-mode:screen; }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a {
  font-size:11px; font-weight:400; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--silver); text-decoration:none; transition:color 0.2s;
}
.nav-links a:hover { color:var(--white); }

/* ════════════════════════
   SECTION 1 — HERO
════════════════════════ */
.s-hero {
  position:relative; width:100vw; height:100vh;
  display:flex; align-items:flex-end; overflow:hidden;
}
.s-hero-bg {
  position:absolute; inset:0;
  background-image:url('../images/hero-bg.jpg');
  background-size:cover; background-position:center;
  animation:slowzoom 18s ease-out forwards;
}
@keyframes slowzoom { from{transform:scale(1.04);} to{transform:scale(1.0);} }
.s-hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.55) 38%, rgba(10,10,10,0.1) 65%, transparent 100%),
    linear-gradient(to right, rgba(10,10,10,0.45) 0%, transparent 55%);
}
.hero-line {
  display:block; width:calc(100% + 48px); margin-left:-48px;
  height:1px; margin-bottom:22px;
  background:linear-gradient(to right, var(--orange), rgba(232,66,10,0.2) 40%, transparent 70%);
  opacity:0; animation:fadein 1s 1.4s ease forwards;
}
.hero-content {
  position:relative; z-index:2; padding:0 48px 80px; max-width:860px;
}
.hero-eyebrow {
  font-size:10px; font-weight:500; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--orange); margin-bottom:22px;
  opacity:0; transform:translateY(14px);
  animation:rise 0.8s 0.5s ease forwards;
}
.hero-headline {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(54px,7.5vw,100px);
  line-height:0.93; letter-spacing:0.015em; color:var(--white); margin-bottom:30px;
  opacity:0; transform:translateY(18px);
  animation:rise 0.9s 0.75s ease forwards;
}
.hero-headline .dot, .opt-a-headline .dot { color:var(--orange); }
.hero-sub {
  font-size:15px; font-weight:300; line-height:1.7;
  color:var(--silver); max-width:400px; margin-bottom:44px;
  opacity:0; transform:translateY(12px);
  animation:rise 0.8s 1.05s ease forwards;
}
.hero-cta {
  display:inline-flex; align-items:center; gap:14px;
  padding:15px 34px; background:var(--orange); color:var(--white);
  font-size:11px; font-weight:500; letter-spacing:0.14em;
  text-transform:uppercase; text-decoration:none; cursor:none;
  transition:background 0.2s, gap 0.2s;
  opacity:0; transform:translateY(10px);
  animation:rise 0.8s 1.3s ease forwards;
}
.hero-cta:hover { background:#ff5218; gap:20px; }
.hero-stats {
  position:absolute; right:48px; bottom:80px; z-index:2;
  display:flex; flex-direction:column; gap:28px; text-align:right;
  opacity:0; animation:fadein 1s 1.8s ease forwards;
}
.hero-stats-header {
  font-size:10px; font-weight:500; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--orange); margin-bottom:-12px;
}
.stat-item { border-right:1px solid var(--silver-dim); padding-right:20px; }
.stat-num {
  font-family:'Bebas Neue',sans-serif;
  font-size:34px; letter-spacing:0.04em; color:var(--white); line-height:1;
}
.stat-label {
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--silver); margin-top:5px;
}
.scroll-hint {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; animation:fadein 1s 2.2s ease forwards;
}
.scroll-hint span {
  font-size:8px; letter-spacing:0.22em; text-transform:uppercase; color:var(--silver-dim);
}
.scroll-bar {
  width:1px; height:44px; background:var(--silver-dim); position:relative; overflow:hidden;
}
.scroll-bar::after {
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--orange); animation:scrollline 2s 2.4s ease-in-out infinite;
}

/* ════════════════════════
   SECTION 2 — HIGHLIGHTS CAROUSEL
════════════════════════ */
.s-highlights {
  background:var(--black); padding:120px 0 100px;
}

.hl-header {
  padding:0 48px; margin-bottom:56px;
  opacity:0; transform:translateY(16px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.s-highlights.in-view .hl-header { opacity:1; transform:none; }

.hl-label {
  font-size:10px; font-weight:500; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--orange); margin-bottom:14px;
}
.hl-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px,3.5vw,54px);
  letter-spacing:0.02em; color:var(--white);
}

/* track + cards */
.hl-track-wrap {
  position:relative; overflow:hidden;
}
.hl-track {
  display:flex; gap:20px;
  padding:0 48px;
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
  will-change:transform;
}

/* ── CARD ── */
.hl-card {
  flex:0 0 calc(44% - 10px);
  position:relative; overflow:hidden;
  background:var(--silver-dim);
  min-height:520px;
  display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0; transform:translateY(24px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.s-highlights.in-view .hl-card:nth-child(1) { opacity:1; transform:none; transition-delay:0.1s; }
.s-highlights.in-view .hl-card:nth-child(2) { opacity:1; transform:none; transition-delay:0.25s; }
.s-highlights.in-view .hl-card:nth-child(3) { opacity:1; transform:none; transition-delay:0.4s; }

.hl-card-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform 0.6s ease;
}
.hl-card:hover .hl-card-bg { transform:scale(1.03); }

.hl-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.4) 45%, transparent 100%);
}

/* placeholder cards */
.hl-card.placeholder .hl-card-bg {
  background:var(--silver-dim);
}
.hl-card.placeholder .hl-card-overlay {
  background:linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.3) 60%, transparent 100%);
}
/* placeholder grid pattern */
.hl-card.placeholder::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--silver-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--silver-dim) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:0.3;
}

.hl-card-content {
  position:relative; z-index:2; padding:36px 40px;
}
.card-tag {
  font-size:9px; font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--orange); margin-bottom:12px;
}
.card-headline {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(32px,3vw,46px);
  line-height:0.95; letter-spacing:0.02em;
  color:var(--white); margin-bottom:14px;
}
.card-headline em { color:var(--orange); font-style:normal; }
.card-body {
  font-size:14px; font-weight:300; line-height:1.65;
  color:var(--silver); max-width:380px; margin-bottom:28px;
}
.card-body strong { color:var(--white); font-weight:400; }
.card-link {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:500; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--white); text-decoration:none;
  border-bottom:1px solid var(--orange); padding-bottom:3px;
  transition:gap 0.2s, color 0.2s; cursor:none;
}
.card-link:hover { gap:16px; color:var(--orange); }

/* placeholder label */
.placeholder-label {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Bebas Neue',sans-serif;
  font-size:24px; letter-spacing:0.2em;
  color:rgba(160,160,160,0.25); text-transform:uppercase;
  z-index:1; white-space:nowrap;
}

/* ── CAROUSEL CONTROLS ── */
.hl-controls {
  display:flex; align-items:center; justify-content:center;
  gap:20px; margin-top:48px; padding:0 48px;
}
.hl-dots {
  display:flex; gap:8px; align-items:center;
}
.hl-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--silver-dim); cursor:none;
  transition:background 0.2s, transform 0.2s;
}
.hl-dot.active {
  background:var(--white); transform:scale(1.4);
}
.hl-arrows {
  display:flex; gap:10px;
}
.hl-arrow {
  width:40px; height:40px; border:1px solid var(--silver-dim);
  background:transparent; color:var(--silver);
  display:flex; align-items:center; justify-content:center;
  cursor:none; font-size:16px;
  transition:border-color 0.2s, color 0.2s;
}
.hl-arrow:hover { border-color:var(--white); color:var(--white); }
.hl-arrow:disabled { opacity:0.2; }


/* ════════════════════════
   SECTION 3 — IMAGE BREAK
════════════════════════ */
.s-image-break {
  background:var(--black);
  padding:0 48px 100px;
}
.s-image-break-inner {
  max-width:820px;
  margin:0 auto;
  overflow:hidden;
  border-radius:18px;
}
.s-image-break-inner img {
  width:100%;
  height:auto;
  display:block;
}

/* ── PRODUCT SECTIONS SHARED ── */
.prod-section {
  background:var(--black); padding:100px 48px;
  border-top:1px solid var(--silver-dim);
}
.prod-eyebrow {
  font-size:10px; font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--silver); margin-bottom:16px;
}
.prod-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,6vw,80px);
  color:var(--white); line-height:0.92; letter-spacing:0.03em;
  margin-bottom:12px;
}
.p1-placeholder {
  width:100%; height:100%; background:var(--silver-dim);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:0.15em; color:var(--silver);
  text-transform:uppercase;
}

/* ── CONCEPT 1: Spec Cards ── */
.p1-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.p1-card {
  background:#111; position:relative;
  display:flex; flex-direction:column;
}
.p1-card.featured { background:#161616; outline:1px solid var(--orange); }
.p1-badge {
  position:absolute; top:20px; right:20px;
  font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--black); background:var(--orange);
  padding:5px 10px;
}
.p1-img-wrap { width:100%; aspect-ratio:16/9; overflow:hidden; }
.p1-body { padding:32px 28px 36px; flex:1; display:flex; flex-direction:column; }
.p1-num {
  font-family:'Bebas Neue',sans-serif; font-size:13px;
  color:var(--orange); letter-spacing:0.12em; margin-bottom:8px;
}
.p1-name {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(28px,3vw,40px); color:var(--white);
  letter-spacing:0.04em; margin-bottom:16px;
}
.p1-price {
  font-family:'Bebas Neue',sans-serif; font-size:28px;
  color:var(--white); letter-spacing:0.04em; margin-bottom:28px;
}
.p1-price span { font-size:14px; color:var(--silver); font-family:'DM Sans',sans-serif; letter-spacing:0.1em; }
.p1-specs { flex:1; border-top:1px solid var(--silver-dim); padding-top:20px; margin-bottom:28px; }
.p1-spec-row {
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--silver); padding:7px 0;
  border-bottom:1px solid #1e1e1e; letter-spacing:0.04em;
}
.p1-spec-row span:last-child { color:var(--white); }
.p1-cta {
  display:inline-block; padding:13px 28px;
  border:1px solid var(--silver-dim); color:var(--white);
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none; transition:border-color 0.2s, color 0.2s;
  align-self:flex-start;
}
.p1-cta:hover { border-color:var(--orange); color:var(--orange); }


/* ── MODULE FAMILY GRID ── */
.mod-grid {
  display:grid; grid-template-columns:repeat(6,1fr); gap:2px;
  margin-bottom:80px;
}
.mod-card {
  background:#111; display:flex; flex-direction:column;
}
.mod-coming-soon { opacity:1; }
.mod-img-wrap { width:100%; aspect-ratio:1/1; overflow:hidden; }
.mod-num {
  font-family:'Bebas Neue',sans-serif; font-size:12px;
  color:var(--orange); letter-spacing:0.14em;
  padding:20px 18px 4px;
}
.mod-name {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(16px,1.6vw,22px); color:var(--white);
  letter-spacing:0.04em; padding:0 18px 4px;
}
.mod-desc {
  font-size:10px; color:var(--silver); letter-spacing:0.1em;
  text-transform:uppercase; padding:0 18px 14px;
}
.mod-specs {
  flex:1; border-top:1px solid var(--silver-dim);
  margin:0 18px; padding:12px 0;
}
.mod-spec-row {
  display:flex; justify-content:space-between;
  font-size:10px; color:var(--silver); padding:5px 0;
  border-bottom:1px solid #1a1a1a; letter-spacing:0.03em;
}
.mod-spec-row span:last-child { color:var(--white); }
.mod-price {
  font-family:'Bebas Neue',sans-serif; font-size:20px;
  color:var(--white); letter-spacing:0.06em;
  padding:16px 18px 20px;
}
.mod-poa { color:var(--silver); }
.mod-poa span {
  display:block; font-family:'DM Sans',sans-serif;
  font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--orange); margin-top:2px;
}
.byo-divider {
  text-align:center; position:relative; margin-bottom:60px;
}
.byo-divider::before {
  content:''; position:absolute; top:50%; left:0; right:0;
  height:1px; background:var(--silver-dim);
}
.byo-divider span {
  position:relative; background:#080808;
  padding:0 24px; font-size:10px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--silver);
}

/* ── BUILD YOUR OWN ── */
.byo-section {
  background:#080808; padding:100px 48px;
  border-top:1px solid var(--silver-dim);
}
.byo-header { max-width:640px; margin-bottom:64px; }
.byo-sub {
  font-size:15px; font-weight:300; line-height:1.7;
  color:var(--silver); margin-top:16px;
}
.byo-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.byo-card {
  background:#111; position:relative;
  display:flex; flex-direction:column;
}
.byo-card.featured { background:#161616; outline:1px solid var(--orange); }
.byo-img-wrap { width:100%; aspect-ratio:4/3; overflow:hidden; }
.byo-body { padding:32px 28px 36px; flex:1; display:flex; flex-direction:column; }
.byo-tier {
  font-size:10px; font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--orange); margin-bottom:10px;
}
.byo-name {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(26px,2.8vw,38px); color:var(--white);
  letter-spacing:0.03em; line-height:1; margin-bottom:16px;
}
.byo-name span { color:var(--silver); font-size:0.65em; }
.byo-power {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px,4vw,52px); color:var(--white);
  letter-spacing:0.03em; line-height:1; margin-bottom:28px;
}
.byo-power span {
  font-size:14px; color:var(--orange); font-family:'DM Sans',sans-serif;
  font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
  margin-left:6px;
}
.byo-modules {
  flex:1; border-top:1px solid var(--silver-dim);
  padding-top:18px; margin-bottom:24px;
}
.byo-mod-row {
  display:grid; grid-template-columns:36px 1fr auto;
  align-items:center; padding:8px 0;
  border-bottom:1px solid #1a1a1a; gap:8px;
}
.byo-qty {
  font-family:'Bebas Neue',sans-serif; font-size:16px;
  color:var(--orange); letter-spacing:0.06em;
}
.byo-mod-name { font-size:12px; color:var(--silver); letter-spacing:0.04em; }
.byo-mod-price { font-size:12px; color:var(--white); letter-spacing:0.04em; }
.byo-poa { color:var(--silver); }
.byo-total-row {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 0; border-top:1px solid var(--silver-dim); margin-bottom:24px;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--silver);
}
.byo-total {
  font-family:'Bebas Neue',sans-serif; font-size:26px;
  color:var(--white); letter-spacing:0.04em;
}
.byo-note {
  font-size:11px; color:var(--silver); letter-spacing:0.06em;
  line-height:1.7; margin-top:40px; padding-top:28px;
  border-top:1px solid var(--silver-dim); max-width:700px;
}

/* ── PRE-FOOTER CTA ── */
.footer-cta {
  background:var(--orange);
  padding:100px 48px;
}
.footer-cta-inner { max-width:700px; }
.footer-cta-eyebrow {
  font-size:11px; font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:rgba(255,255,255,0.7); margin-bottom:20px;
}
.footer-cta-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(56px,8vw,110px);
  color:var(--white); line-height:0.92; letter-spacing:0.02em;
  margin-bottom:44px;
}
.footer-cta-title .dot { color:rgba(255,255,255,0.35); }
.footer-cta-btn {
  display:inline-block; padding:16px 40px;
  background:var(--white); color:var(--orange);
  font-size:12px; font-weight:500; letter-spacing:0.2em;
  text-transform:uppercase; text-decoration:none;
  transition:background 0.2s, color 0.2s;
}
.footer-cta-btn:hover { background:var(--black); color:var(--white); }

/* ── FOOTER ── */
.site-footer {
  background:#050505;
  border-top:1px solid var(--silver-dim);
  padding:72px 48px 40px;
}
.footer-top {
  display:grid; grid-template-columns:1fr 2fr;
  gap:80px; padding-bottom:64px;
  border-bottom:1px solid var(--silver-dim);
}
.footer-logo { height:22px; mix-blend-mode:screen; margin-bottom:20px; display:block; }
.footer-tagline {
  font-size:13px; font-weight:300; line-height:1.7;
  color:var(--silver); max-width:280px; margin-bottom:32px;
}
.footer-socials { display:flex; gap:16px; }
.footer-social {
  width:36px; height:36px; border:1px solid var(--silver-dim);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:500; letter-spacing:0.08em;
  color:var(--silver); text-decoration:none;
  transition:border-color 0.2s, color 0.2s;
}
.footer-social:hover { border-color:var(--orange); color:var(--orange); }
.footer-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.footer-col { display:flex; flex-direction:column; gap:12px; }
.footer-col-title {
  font-size:10px; font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--white); margin-bottom:6px;
}
.footer-col a {
  font-size:13px; font-weight:300; color:var(--silver);
  text-decoration:none; transition:color 0.2s; letter-spacing:0.03em;
}
.footer-col a:hover { color:var(--white); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px; gap:24px; flex-wrap:wrap;
}
.footer-copy {
  font-size:11px; color:#444; letter-spacing:0.05em; line-height:1.6;
}
.footer-legal { display:flex; gap:24px; }
.footer-legal a {
  font-size:11px; color:#444; text-decoration:none;
  letter-spacing:0.08em; transition:color 0.2s;
}
.footer-legal a:hover { color:var(--silver); }

/* ── TESTIMONIALS SHARED ── */
.tq-section {
  background:var(--black); padding:100px 48px;
  border-top:1px solid var(--silver-dim);
}

/* Option A — Large Rotating Quote */
.tqa-wrap { max-width:900px; margin:0 auto; text-align:center; }
.tqa-slides { position:relative; min-height:200px; }
.tqa-slide { display:none; }
.tqa-slide.active { display:block; }
.tqa-quote {
  font-family:'DM Serif Display',serif;
  font-size:clamp(16px,2vw,28px);
  font-style:italic; font-weight:500;
  color:var(--white); line-height:1.25; letter-spacing:0.01em;
  margin-bottom:32px; quotes:none;
}
.tqa-cite {
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--orange); font-style:normal;
}
.tqa-controls {
  display:flex; align-items:center; justify-content:center;
  gap:24px; margin-top:52px;
}
.tqa-prev, .tqa-next {
  background:none; border:1px solid var(--silver-dim); color:var(--silver);
  width:40px; height:40px; cursor:none;
  font-size:14px; transition:border-color 0.2s, color 0.2s;
}
.tqa-prev:hover, .tqa-next:hover { border-color:var(--orange); color:var(--orange); }
.tqa-dots { display:flex; gap:8px; }
.tqa-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--silver-dim); transition:background 0.2s;
}
.tqa-dot.active { background:var(--orange); }

/* ── NARRATIVE SECTION ── */
.s-narrative {
  background:var(--black); padding:120px 48px;
  border-top:1px solid var(--silver-dim);
}
.s-narrative-inner { max-width:1200px; margin:0 auto; }
.s-narrative-headline {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(48px, 7vw, 108px);
  color:var(--white); line-height:0.92; letter-spacing:0.03em;
  margin-bottom:72px;
}
.s-narrative-headline .dot { color:var(--orange); }
.s-narrative-tags {
  display:flex; flex-wrap:wrap; gap:12px; margin-bottom:64px;
}
.s-narrative-tag {
  font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--silver); border:1px solid var(--silver-dim);
  padding:8px 20px; border-radius:100px;
}
.s-narrative-img {
  margin-top:72px; border-radius:18px; overflow:hidden;
}
.s-narrative-img img { width:100%; height:auto; display:block; }
.s-narrative-cols {
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
}
.s-narrative-col p {
  font-size:clamp(16px, 1.4vw, 20px); font-weight:300; line-height:1.75;
  color:var(--silver); margin-bottom:28px;
}
.s-narrative-col strong { color:var(--white); font-weight:500; }
.s-narrative-until {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(32px, 4vw, 56px);
  color:var(--orange) !important; letter-spacing:0.04em;
  margin-bottom:28px !important; line-height:1 !important;
}

/* ── BASS ISOLATION CAROUSEL ── */
.bs-section { padding-bottom:0; }
.bs-track-wrap { overflow:hidden; }
.bs-track {
  display:flex; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.bs-slide {
  min-width:100%; padding:120px 48px 80px;
  box-sizing:border-box;
}
.bs-controls {
  display:flex; align-items:center; justify-content:space-between;
  padding:32px 48px 64px;
  border-top:1px solid var(--silver-dim);
}
.bs-dots { display:flex; gap:8px; }
.bs-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--silver-dim); border:none; cursor:pointer; padding:0;
  transition:background 0.2s;
}
.bs-dot.active { background:var(--orange); }
.bs-arrows { display:flex; gap:12px; }
.bs-arrow {
  background:none; border:1px solid var(--silver-dim); color:var(--white);
  width:44px; height:44px; cursor:pointer; font-size:16px;
  transition:border-color 0.2s, color 0.2s;
}
.bs-arrow:hover:not(:disabled) { border-color:var(--orange); color:var(--orange); }
.bs-arrow:disabled { opacity:0.3; cursor:default; }

/* ── FEATURE SECTIONS ── */
.s-feature {
  background:var(--black); padding:120px 48px;
  border-top:1px solid var(--silver-dim);
}
.s-feature-alt { background:#0d0d0d; }
.s-feature-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.s-feature-unlock {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(18px, 2vw, 28px);
  color:var(--orange); letter-spacing:0.08em;
  margin-bottom:12px;
}
.s-feature-eyebrow {
  font-size:11px; font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--orange); margin-bottom:20px;
}
.s-feature-headline {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(48px, 6vw, 88px);
  color:var(--white); line-height:0.92; letter-spacing:0.03em;
  margin-bottom:28px;
}
.s-feature-headline .dot { color:var(--orange); }
.s-feature-body {
  font-size:clamp(15px, 1.3vw, 18px); font-weight:300; line-height:1.7;
  color:var(--silver); margin-bottom:48px;
}
.s-feature-stats {
  list-style:none; display:flex; gap:40px;
}
.s-feature-stats li { display:flex; flex-direction:column; gap:6px; }
.s-stat-val {
  font-family:'Bebas Neue', sans-serif; font-size:32px;
  color:var(--white); letter-spacing:0.04em;
}
.s-stat-label {
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--silver);
}
.s-feature-img { width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:#0a0a0a; }
.s-feature-img img { width:100%; height:100%; object-fit:contain; display:block; border-radius:12px; }
.s-feature-placeholder {
  width:100%; aspect-ratio:4/3; background:var(--silver-dim);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--silver);
}

/* ── MODULAR SECTION ── */
.s-modular {
  background:var(--black); padding:120px 48px 64px;
  text-align:center;
}
.s-modular-eyebrow {
  font-size:11px; font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--silver); margin-bottom:20px;
}
.s-modular-headline {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(48px, 8vw, 120px);
  color:var(--white); line-height:0.92; letter-spacing:0.03em;
  margin-bottom:32px;
}
.s-modular-headline .dot { color:var(--orange); }
.s-modular-body {
  font-size:clamp(15px, 1.4vw, 19px); font-weight:300; line-height:1.7;
  color:var(--silver); max-width:620px; margin:0 auto 64px;
}
.s-modular-img-wrap {
  max-width:900px; margin:0 auto; overflow:hidden; border-radius:18px;
}

/* ── EXPERIENCE BLOCK ── */
.opt-a-block {
  max-width:780px; margin:0 auto 64px; text-align:center;
}
.opt-a-eyebrow {
  font-size:11px; font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--silver); margin-bottom:20px;
}
.opt-a-headline {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(36px, 6.5vw, 96px);
  color:var(--white); line-height:0.92; letter-spacing:0.03em;
  margin-bottom:28px; white-space:nowrap;
}
.opt-a-body {
  font-size:clamp(15px, 1.4vw, 19px); font-weight:300; line-height:1.65;
  color:var(--silver); max-width:580px; margin:0 auto; text-align:center;
}

/* ── VIDEO SECTION ── */
.s-video { padding:80px 48px; }
.s-video-inner { max-width:1200px; margin:0 auto; }

/* Mission text block above video */
.s-video-mission {
  max-width: 760px;
  margin-bottom: 64px;
}
.s-video-mission-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 6vw, 80px);
  line-height: 0.9;
  color: var(--white);
  margin-bottom: 36px;
}
.s-video-mission-headline .dot { color: var(--orange); }
.s-video-mission-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.s-video-mission-body p {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
}
.s-video-mission-body strong {
  color: var(--white);
  font-weight: 400;
}
.s-video-mission-coda {
  font-style: italic;
  color: var(--silver) !important;
  opacity: 0.7;
}
.s-video-frame {
  position:relative; width:100%; aspect-ratio:16/9;
  background:var(--silver-dim); border-radius:12px; overflow:hidden;
}
.s-video-placeholder {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px;
  background:linear-gradient(135deg, #111 0%, #1a1a1a 100%);
  border:1px solid #333;
}
.s-video-play {
  width:80px; height:80px; color:var(--white); opacity:0.6;
  transition:opacity 0.2s;
}
.s-video-placeholder:hover .s-video-play { opacity:1; }
.s-video-play svg { width:100%; height:100%; }
.s-video-label {
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--silver);
}

/* ── BILLBOARD BREAKS ── */
.s-billboard {
  padding:120px 48px;
  text-align:center;
  border-top:1px solid var(--silver-dim);
  border-bottom:1px solid var(--silver-dim);
}
.s-billboard-headline {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(64px, 12vw, 160px);
  line-height:0.92;
  letter-spacing:0.01em;
  color:var(--white);
}
.s-billboard-headline .dot { color:var(--orange); }
.s-billboard-sub {
  margin-top:24px;
  font-size:clamp(13px, 1.2vw, 16px);
  font-weight:300;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--silver);
}

/* ── SOCIAL PROOF SECTIONS ── */
.sp-section { padding:100px 48px; border-top:1px solid var(--silver-dim); }
.sp-header { max-width:1200px; margin:0 auto 56px; }
.sp-eyebrow { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; }
.sp-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(40px,5vw,72px); line-height:0.9; color:var(--white); }
.sp-title .dot { color:var(--orange); }
.sp-sub { font-size:12px; letter-spacing:0.15em; color:var(--silver); margin-top:12px; }
.sp-label { font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--silver); }

/* Option A — Reel Strip */
.sp-a-track {
  display:flex; gap:16px; align-items:flex-end;
  max-width:1200px; margin:0 auto;
  overflow-x:auto; padding-bottom:8px;
}
.sp-a-track::-webkit-scrollbar { display:none; }
.sp-a-card {
  flex:0 0 220px; aspect-ratio:9/16;
  background:var(--silver-dim); border-radius:12px; overflow:hidden;
}
.sp-a-tall { flex:0 0 220px; aspect-ratio:9/18; }
.sp-a-inner {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#1a1a1a,#111);
  border:1px solid #333; border-radius:12px;
}

/* Option B — Phone Frames */
.sp-b-row {
  display:flex; gap:32px; justify-content:center; align-items:flex-end;
  max-width:1000px; margin:0 auto; flex-wrap:wrap;
}
.sp-b-phone { flex:0 0 180px; }
.sp-b-mid { transform:translateY(-32px); }
.sp-b-frame {
  border:2px solid #444; border-radius:32px; overflow:hidden;
  padding:10px; background:#111; position:relative;
}
.sp-b-notch {
  width:60px; height:8px; background:#333; border-radius:4px;
  margin:0 auto 8px;
}
.sp-b-screen {
  aspect-ratio:9/16; background:#1a1a1a; border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #2a2a2a;
}

/* Option C — Masonry Grid */
.sp-c-grid {
  display:flex; gap:12px; align-items:stretch;
  max-width:1200px; margin:0 auto; height:560px;
}
.sp-c-tall { flex:1; min-width:0; }
.sp-c-col { flex:1; display:flex; flex-direction:column; gap:12px; min-width:0; }
.sp-c-square { flex:1; min-height:0; }
.sp-c-inner, .sp-c-square > div {
  width:100%; height:100%;
  background:linear-gradient(160deg,#1a1a1a,#111);
  border:1px solid #333; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.sp-c-tall .sp-c-inner { height:100%; }

/* ── FAQ SECTION ── */
.faq-section { padding:120px 48px; }
.faq-inner { max-width:860px; margin:0 auto; }
.faq-header { margin-bottom:64px; }
.faq-eyebrow {
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--orange); margin-bottom:12px;
}
.faq-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,6vw,96px); line-height:0.9;
  color:var(--white);
}
.faq-title .dot { color:var(--orange); }
.faq-item {
  border-bottom:1px solid var(--silver-dim);
}
.faq-item:first-of-type { border-top:1px solid var(--silver-dim); }
.faq-question {
  list-style:none; display:flex; justify-content:space-between; align-items:center;
  padding:24px 0; cursor:pointer;
  font-size:clamp(15px,1.4vw,18px); font-weight:400;
  color:var(--white); letter-spacing:0.01em;
  transition:color 0.2s;
}
.faq-question::-webkit-details-marker { display:none; }
.faq-question::after {
  content:'+'; font-size:22px; font-weight:300;
  color:var(--silver); flex-shrink:0; margin-left:24px;
  transition:transform 0.3s, color 0.2s;
}
.faq-item[open] .faq-question { color:var(--orange); }
.faq-item[open] .faq-question::after { transform:rotate(45deg); color:var(--orange); }
.faq-answer {
  padding:0 0 28px 0;
  font-size:clamp(14px,1.2vw,16px); font-weight:300; line-height:1.7;
  color:var(--silver); max-width:680px;
}

/* ── HEX CURSOR ── */
#hex-canvas {
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  width:100vw; height:100vh; overflow:visible;
}
#cursor-dot {
  position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
  width:5px; height:5px; border-radius:50%; background:var(--white);
  transform:translate(-50%,-50%);
}

/* ── KEYFRAMES ── */
@keyframes rise { to{opacity:1;transform:translateY(0);} }
@keyframes fadein { to{opacity:1;} }


/* ════════════════════════════════════════════════════════════
   PROBLEM SECTION MOCKUPS — Options A · B · C · D
   All four render simultaneously for side-by-side review.
   Shared: .prob-section-label
════════════════════════════════════════════════════════════ */

/* Shared option label */
.prob-section-label {
  display:block;
  text-align:center;
  font-family:'DM Sans', sans-serif;
  font-size:11px;
  font-weight:400;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--silver-dim);
  margin-bottom:48px;
  opacity:0.7;
}


/* ────────────────────────────────────────────────
   OPTION A — Three Pillars
   Black background, centred intro, three-column grid
──────────────────────────────────────────────── */
.prob-a-section {
  background:var(--black);
  padding:64px 48px 100px;
  border-bottom:1px solid var(--silver-dim);
}
.prob-a-highlight {
  color: var(--white);
  font-weight: 500;
}

.sol-section {
  background:#080808;
  padding:100px 48px;
  border-bottom:1px solid var(--silver-dim);
}

.sol-badge {
  background:rgba(76,175,125,0.12);
  color:#4caf7d;
  border:1px solid rgba(76,175,125,0.3);
}

.prob-a-eyebrow {
  text-align:center;
  font-family:'DM Sans', sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:20px;
}

.prob-a-headline {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(48px, 6vw, 80px);
  line-height:0.95;
  color:var(--white);
  text-align:center;
  margin-bottom:32px;
}

.prob-a-divider {
  width:40px;
  height:2px;
  background:var(--orange);
  margin:0 auto 40px;
}

.prob-a-intro {
  max-width:640px;
  margin:0 auto 64px;
  text-align:center;
  font-family:'DM Sans', sans-serif;
  font-size:clamp(15px, 1.4vw, 17px);
  font-weight:300;
  line-height:1.75;
  color:var(--silver);
}

/* Three-column grid — collapses to single column below 720px */
.prob-a-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:48px;
  max-width:1100px;
  margin:0 auto;
}

@media (max-width:900px) {
  .prob-a-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px) {
  .prob-a-grid { grid-template-columns:1fr; }
}

.prob-a-col {
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Status badges */
.prob-a-badge {
  display:inline-block;
  font-family:'DM Sans', sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:100px;
  width:fit-content;
}
.prob-a-badge--solved   { background:rgba(76,175,125,0.15); color:#4caf7d; border:1px solid rgba(76,175,125,0.35); }
.prob-a-badge--improved { background:rgba(240,165,0,0.12);  color:#f0a500; border:1px solid rgba(240,165,0,0.3);   }
.prob-a-badge--unsolved { background:rgba(232,66,10,0.12);  color:var(--orange); border:1px solid rgba(232,66,10,0.3); }

.prob-a-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:28px;
  letter-spacing:0.04em;
  color:var(--white);
  line-height:1;
}

.prob-a-body {
  font-family:'DM Sans', sans-serif;
  font-size:14px;
  font-weight:300;
  line-height:1.75;
  color:var(--silver);
}


/* ────────────────────────────────────────────────
   OPTION B — Editorial Manifesto
   Very dark bg, left-aligned, third para called out
──────────────────────────────────────────────── */
.prob-b-section {
  background:#0d0d0d;
  padding:100px 48px;
  border-bottom:1px solid var(--silver-dim);
}

.prob-b-inner {
  max-width:780px;
}

.prob-b-eyebrow {
  font-family:'DM Sans', sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:20px;
}

.prob-b-headline {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(48px, 6vw, 80px);
  letter-spacing:0.02em;
  line-height:1;
  color:var(--white);
  margin-bottom:32px;
}

/* Short orange divider line */
.prob-b-divider {
  width:40px;
  height:2px;
  background:var(--orange);
  margin-bottom:40px;
}

.prob-b-body {
  font-family:'DM Sans', sans-serif;
  font-size:clamp(15px, 1.4vw, 17px);
  font-weight:300;
  line-height:1.8;
  color:var(--silver);
  margin-bottom:28px;
}

/* Room Acoustics — called out with left border */
.prob-b-problem-block {
  border-left:3px solid var(--orange);
  padding-left:24px;
  margin-top:12px;
}

.prob-b-problem-label {
  font-family:'DM Sans', sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:14px;
}

/* Override .prob-b-body margin inside the block */
.prob-b-problem-block .prob-b-body {
  margin-bottom:0;
}


/* ────────────────────────────────────────────────
   OPTION C — Status Tracker
   Black bg, three horizontal rows with progress bars
──────────────────────────────────────────────── */
.prob-c-section {
  background:var(--black);
  padding:100px 48px;
  border-bottom:1px solid var(--silver-dim);
}

.prob-c-eyebrow {
  font-family:'DM Sans', sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:16px;
}

.prob-c-intro {
  font-family:'DM Sans', sans-serif;
  font-size:clamp(15px, 1.4vw, 17px);
  font-weight:300;
  color:var(--silver);
  margin-bottom:64px;
  max-width:520px;
}

.prob-c-rows {
  max-width:1100px;
  margin:0 auto;
}

.prob-c-row {
  display:grid;
  grid-template-columns:72px 1fr 280px;
  gap:32px;
  align-items:center;
  padding:40px 0;
  border-top:1px solid var(--silver-dim);
}
.prob-c-row:last-child {
  border-bottom:1px solid var(--silver-dim);
}

@media (max-width:800px) {
  .prob-c-row {
    grid-template-columns:48px 1fr;
    grid-template-rows:auto auto;
  }
  .prob-c-meter { grid-column:2; }
}

.prob-c-num {
  font-family:'Bebas Neue', sans-serif;
  font-size:64px;
  line-height:1;
  color:var(--orange);
  opacity:0.7;
}

.prob-c-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:24px;
  letter-spacing:0.04em;
  color:var(--white);
  margin-bottom:8px;
}

.prob-c-body {
  font-family:'DM Sans', sans-serif;
  font-size:13px;
  font-weight:300;
  line-height:1.7;
  color:var(--silver);
}

.prob-c-meter {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.prob-c-track {
  position:relative;
  width:100%;
  height:3px;
  background:var(--silver-dim);
  border-radius:2px;
  overflow:hidden;
}

.prob-c-fill {
  position:absolute;
  left:0; top:0; height:100%;
  border-radius:2px;
  transition:width 0.6s ease;
}
.prob-c-fill--solved   { background:#4caf7d; }
.prob-c-fill--improved { background:#f0a500; }
.prob-c-fill--unsolved { background:var(--orange); }

.prob-c-status {
  font-family:'DM Sans', sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.prob-c-status--solved   { color:#4caf7d; }
.prob-c-status--improved { color:#f0a500; }
.prob-c-status--unsolved { color:var(--orange); }


/* ────────────────────────────────────────────────
   OPTION D — Experimental / Cinematic
   Full-bleed black, watermark word, signal-meter viz
──────────────────────────────────────────────── */
.prob-d-section {
  position:relative;
  background:var(--black);
  padding:100px 48px;
  overflow:hidden;
  border-bottom:1px solid var(--silver-dim);
}

/* Massive background watermark */
.prob-d-watermark {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-44%, -52%);
  font-family:'Bebas Neue', sans-serif;
  font-size:18vw;
  line-height:1;
  color:#1a1a1a;
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
  z-index:0;
}

.prob-d-inner {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:40% 55%;
  gap:5%;
  max-width:1200px;
  align-items:center;
}

@media (max-width:860px) {
  .prob-d-inner { grid-template-columns:1fr; }
}

/* Left column — intro text */
.prob-d-eyebrow {
  font-family:'DM Sans', sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:20px;
}

.prob-d-intro {
  font-family:'DM Sans', sans-serif;
  font-size:clamp(18px, 1.6vw, 24px);
  font-weight:300;
  line-height:1.7;
  color:var(--silver);
}

/* Right column — signal meter areas */
.prob-d-right {
  display:flex;
  flex-direction:column;
  gap:44px;
}

.prob-d-area {
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Horizontal track with dot indicator */
.prob-d-meter-track {
  position:relative;
  width:100%;
  height:1px;
  background:var(--silver-dim);
}

/* Filled portion left of the dot — width set inline */
.prob-d-meter-fill {
  position:absolute;
  top:0;
  left:0;
  height:1px;
}
.prob-d-fill--green { background:#4caf7d; }
.prob-d-fill--amber { background:#f0a500; }
.prob-d-fill--red   { background:var(--orange); }

/* Dot indicator */
.prob-d-meter-dot {
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
  width:10px;
  height:10px;
  border-radius:50%;
  border:2px solid var(--black);
}
.prob-d-dot--green { background:#4caf7d; box-shadow:0 0 8px rgba(76,175,125,0.6); }
.prob-d-dot--amber { background:#f0a500; box-shadow:0 0 8px rgba(240,165,0,0.5); }
.prob-d-dot--red   { background:var(--orange); box-shadow:0 0 8px rgba(232,66,10,0.5); }

/* Label row below the track */
.prob-d-area-label {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.prob-d-area-name {
  font-family:'Bebas Neue', sans-serif;
  font-size:20px;
  letter-spacing:0.06em;
  color:var(--white);
}

.prob-d-area-verdict {
  font-family:'DM Sans', sans-serif;
  font-size:13px;
  font-weight:300;
  color:var(--silver);
  line-height:1.5;
}
/* ════ END PROBLEM SECTION MOCKUPS ════ */
@keyframes scrollline { from{top:-100%;} to{top:200%;} }


/* ════════════════════════════════════════════════════════════
   HOW IT WORKS MOCKUPS — Options A · B · C · D
   All four render simultaneously for side-by-side review.
════════════════════════════════════════════════════════════ */

/* Shared option label */
.hiw-label {
  display: block;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #444;
  margin-bottom: 48px;
}


/* ────────────────────────────────────────────────
   OPTION A — Numbered Chapter Scroll
   Dark bg, numbered rows with vertical spine line
──────────────────────────────────────────────── */
.hiw-a-section {
  background: #080808;
  padding: 100px 48px;
  border-bottom: 1px solid var(--silver-dim);
}

.hiw-a-wrap {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* Vertical orange spine running the full height of the wrap */
.hiw-a-spine {
  position: absolute;
  left: 59px; /* centres on the 120px left column */
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--orange);
  opacity: 0.35;
  pointer-events: none;
}

.hiw-a-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: start;
  padding: 48px 0;
  border-bottom: 1px solid var(--silver-dim);
  position: relative;
}

.hiw-a-row:first-of-type {
  border-top: 1px solid var(--silver-dim);
}

.hiw-a-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  line-height: 1;
  color: var(--orange);
  letter-spacing: 0.02em;
  /* Sits above the spine so the number reads clearly */
  position: relative;
  z-index: 1;
  background: #080808;
  padding-right: 16px;
}

.hiw-a-content {
  padding-left: 16px;
}

.hiw-a-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1;
}

.hiw-a-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
}


/* ────────────────────────────────────────────────
   OPTION B — Accordion
   Uses <details>/<summary>, no JS required
──────────────────────────────────────────────── */
.hiw-b-section {
  background: var(--black);
  padding: 100px 48px;
  border-bottom: 1px solid var(--silver-dim);
}

.hiw-b-wrap {
  max-width: 860px;
  margin: 0 auto;
}

.hiw-b-item {
  border-bottom: 1px solid var(--silver-dim);
}

.hiw-b-item:first-of-type {
  border-top: 1px solid var(--silver-dim);
}

.hiw-b-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  cursor: pointer;
  user-select: none;
}

.hiw-b-summary::-webkit-details-marker { display: none; }

.hiw-b-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--orange);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.hiw-b-sum-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  flex-shrink: 0;
}

.hiw-b-oneliner {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--silver);
  flex: 1;
  text-align: right;
}

.hiw-b-icon {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--silver);
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.3s ease, color 0.2s;
  display: inline-block;
}

.hiw-b-item[open] .hiw-b-icon {
  transform: rotate(45deg);
  color: var(--orange);
}

.hiw-b-item[open] .hiw-b-summary {
  color: var(--orange);
}

.hiw-b-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
  padding: 0 0 32px 60px; /* indent to align under title */
  max-width: 640px;
}


/* ────────────────────────────────────────────────
   OPTION C — Alternating Feature Rows
   Two-column grid, odd rows normal, even rows reversed
──────────────────────────────────────────────── */
.hiw-c-section {
  background: #060606;
  padding: 100px 48px;
  border-bottom: 1px solid var(--silver-dim);
}

.hiw-c-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.hiw-c-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--silver-dim);
}

.hiw-c-row:first-of-type {
  border-top: 1px solid var(--silver-dim);
}

/* Reverse layout for even rows by flipping column order */
.hiw-c-row--reverse {
  direction: rtl;
}

.hiw-c-row--reverse > * {
  direction: ltr;
}

.hiw-c-num {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: 12px;
}

.hiw-c-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 20px;
}

.hiw-c-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
}

.hiw-c-img {
  background: #111;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hiw-c-img span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #333;
}


/* ────────────────────────────────────────────────
   OPTION D — Carousel
   Full-width single-card carousel with prev/next controls
──────────────────────────────────────────────── */
.hiw-d-section {
  background: var(--black);
  padding: 100px 48px;
  border-bottom: 1px solid var(--silver-dim);
}

.hiw-d-outer {
  max-width: 1000px;
  margin: 0 auto;
}

.hiw-d-track-wrap {
  overflow: hidden;
  border-radius: 12px;
}

.hiw-d-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.hiw-d-card {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 48px;
  align-items: center;
  background: #0d0d0d;
  border: 1px solid var(--silver-dim);
  border-radius: 12px;
  padding: 56px;
  box-sizing: border-box;
}

.hiw-d-card-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hiw-d-big-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 96px;
  line-height: 1;
  color: var(--orange);
  letter-spacing: 0.02em;
}

.hiw-d-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1;
}

.hiw-d-oneliner {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--silver);
}

.hiw-d-card-right {
  display: flex;
  align-items: center;
}

.hiw-d-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
}

/* ════ END HOW IT WORKS MOCKUPS ════ */


/* ════════════════════════════════════════════════════════════
   METRICS & PROOF MOCKUPS — Options A · B · C
   All three render simultaneously for side-by-side review.
════════════════════════════════════════════════════════════ */

/* ── Shared: option label ── */
.metrics-label {
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #444;
  margin-bottom: 40px;
}

/* ── Shared: image caption ── */
.mtr-img-caption {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 300;
  color: var(--silver);
  margin-top: 8px;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}


/* ────────────────────────────────────────────────
   OPTION A — Report Style
   Dark bg #080808, centred copy, stats row, chart, comparison grid
──────────────────────────────────────────────── */
.mtr-a-section {
  background: #080808;
  padding: 100px 48px;
  border-bottom: 1px solid var(--silver-dim);
}

/* Split layout — text left, chart right */
.mtr-a-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto 64px;
  align-items: end;
}

.mtr-a-split-left {
  display: flex;
  flex-direction: column;
}
.mtr-a-split-left .prob-a-eyebrow,
.mtr-a-split-left .prob-a-headline {
  text-align: left;
}
.mtr-a-split-left .prob-a-divider {
  width: 100%;
  height: 1px;
  background: var(--silver-dim);
}

.mtr-a-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 0.95;
  color: var(--white);
  margin-bottom: 28px;
}

.mtr-a-body {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
  margin-bottom: 20px;
}

/* Stats — horizontal row below the split */
.mtr-a-stats-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 1200px;
  margin: 48px auto;
  padding: 40px 0;
  border-top: 1px solid var(--silver-dim);
  border-bottom: 1px solid var(--silver-dim);
}

.mtr-a-stat {
  text-align: center;
}

.mtr-a-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  color: var(--orange);
  letter-spacing: 0.04em;
  line-height: 1;
}

.mtr-a-stat-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 10px;
}

.mtr-a-split-right img {
  border-radius: 8px;
  width: 100%;
  display: block;
}

/* Chart block (legacy — kept for Options B/C) */
.mtr-a-chart-wrap {
  max-width: 946px;
  margin: 56px auto;
}

.mtr-a-chart-caption {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  color: var(--silver);
  text-align: center;
  margin-top: 14px;
}

/* Section divider label */
.mtr-a-comp-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--silver);
  text-align: center;
  margin: 64px 0 40px;
}

/* Two-column image comparison grid */
.mtr-a-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.mtr-a-col {
  display: flex;
  flex-direction: column;
}

.mtr-a-col-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}


/* ────────────────────────────────────────────────
   OPTION B — Side-by-Side Comparison
   Black bg, two-col intro, sticky column headers
──────────────────────────────────────────────── */
.mtr-b-section {
  background: var(--black);
  padding: 100px 48px;
  border-bottom: 1px solid var(--silver-dim);
}

/* Two-column intro: text left, stats right */
.mtr-b-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--silver-dim);
  align-items: start;
}

.mtr-b-body {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
}

.mtr-b-stats {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.mtr-b-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: var(--orange);
  letter-spacing: 0.04em;
  line-height: 1;
}

.mtr-b-stat-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 6px;
}

/* Chart */
.mtr-b-chart-wrap {
  max-width: 946px;
  margin: 56px auto;
}

/* Two-column comparison grid */
.mtr-b-comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 48px;
}

.mtr-b-col {
  display: flex;
  flex-direction: column;
}

/* Sticky column headers */
.mtr-b-col-header {
  position: sticky;
  top: 80px;
  z-index: 10;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.mtr-b-col-header--ps {
  border-bottom: 2px solid var(--silver-dim);
}

.mtr-b-col-header--halo {
  border-bottom: 2px solid var(--orange);
}

.mtr-b-col-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
}

.mtr-b-col-title--ps {
  color: var(--silver);
}

.mtr-b-col-title--halo {
  color: var(--orange);
}

/* images inside B columns already spaced by mtr-img-caption margin-bottom */


/* ────────────────────────────────────────────────
   OPTION C — Stats-Hero + Narrative
   Very dark bg #060606, massive stats bar, orange divider column
──────────────────────────────────────────────── */
.mtr-c-section {
  background: #060606;
  padding: 100px 48px;
  border-bottom: 1px solid var(--silver-dim);
}

/* Full-bleed hero stats bar */
.mtr-c-hero-bar {
  background: #0d0d0d;
  padding: 64px 48px;
  margin: 0 -48px 0;  /* bleed past section padding */
}

.mtr-c-hero-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.mtr-c-hero-stat {
  text-align: center;
}

.mtr-c-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  line-height: 1;
  letter-spacing: 0.02em;
}

.mtr-c-stat-num--primary {
  font-size: clamp(80px, 10vw, 140px);
  color: var(--orange);
}

.mtr-c-stat-num--secondary {
  font-size: clamp(60px, 7vw, 100px);
  color: var(--white);
}

.mtr-c-stat-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 14px;
}

/* Body text below stats bar */
.mtr-c-body-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 48px;
}

.mtr-c-body {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
}

/* Chart */
.mtr-c-chart-wrap {
  max-width: 946px;
  margin: 0 auto 64px;
}

/* Comparison heading */
.mtr-c-comp-head {
  text-align: center;
  margin-bottom: 48px;
}

.mtr-c-comp-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 3vw, 48px);
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 8px;
}

.mtr-c-comp-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver);
}

/* Two-column grid with orange centre divider */
.mtr-c-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.mtr-c-col {
  display: flex;
  flex-direction: column;
  padding: 0 32px;
}

/* Orange vertical line between columns via right border on left col */
.mtr-c-col--left {
  border-right: 2px solid var(--orange);
}

/* ════ END METRICS & PROOF MOCKUPS ════ */

/* ════════════════════════════════════════════════════════════
   PROTOTYPE DATA OPTIONS A · B · C
   ════════════════════════════════════════════════════════════ */

/* ── Shared placeholder card ── */
.proto-placeholder {
  background: #111;
  border: 1px solid var(--silver-dim);
  border-radius: 8px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  aspect-ratio: 4 / 3;
  position: relative;
}

.proto-ph-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 auto;
}

.proto-ph-laf {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  color: var(--white);
  line-height: 1;
  margin: auto 0;
  text-align: center;
}

.proto-ph-vals {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: var(--silver);
  text-align: center;
  margin: 8px 0 0;
}

.proto-ph-caption {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: var(--silver);
  font-style: italic;
  margin: 12px 0 0;
  text-align: center;
}

/* ── Shared 4-column grid ── */
.proto-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

/* ── Shared overperform callout (green Bebas line) ── */
.proto-overperform {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: #4caf7d;
  text-align: center;
  margin: 24px auto 0;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════
   OPTION A — TABS
   ══════════════════════════════════ */
.proto-tab-section {
  background: #080808;
  padding: 96px 0;
}

.proto-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--silver-dim);
  max-width: 900px;
  margin: 0 auto 48px;
}

.proto-tab-btn {
  padding: 16px 32px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-bottom-color 0.2s;
  margin-bottom: -1px;
}

.proto-tab-btn:hover {
  color: var(--white);
}

.proto-tab-btn.active {
  color: var(--white);
  border-bottom-color: var(--orange);
}

.proto-tab-panel {
  display: none;
}

.proto-tab-card {
  background: #0d0d0d;
  border: 1px solid var(--silver-dim);
  border-radius: 8px;
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
}

.proto-tab-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.proto-tab-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 40px;
}

.proto-tab-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  color: var(--orange);
  line-height: 1;
}

.proto-tab-stat-num--orange {
  color: var(--orange);
}

.proto-tab-stat-num--lg {
  font-size: 56px;
}

.proto-tab-stat-num--md {
  font-size: 48px;
  color: var(--white);
}

.proto-tab-stat-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: var(--silver);
  text-align: center;
  letter-spacing: 0.05em;
}

.proto-tab-stat-divider {
  width: 1px;
  height: 56px;
  background: var(--silver-dim);
  flex-shrink: 0;
}

.proto-tab-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-style: italic;
  color: var(--silver);
  text-align: center;
  margin: 0;
}

.proto-tab-hero {
  margin-bottom: 40px;
}

/* ══════════════════════════════════
   OPTION B — TWO-PHASE NARRATIVE
   ══════════════════════════════════ */
.proto-phase-section {
  background: var(--black);
  padding: 96px 0;
}

.proto-phase-intro {
  max-width: 760px;
  text-align: center;
  margin: 0 auto 64px;
}

.proto-phase-block {
  border-left: 3px solid var(--silver-dim);
  padding-left: 32px;
  margin: 0 auto 64px;
  max-width: 760px;
}

.proto-phase-block--achieved {
  border-left-color: #4caf7d;
}

.proto-phase-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 12px;
}

.proto-phase-label--green {
  color: #4caf7d;
}

.proto-phase-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--white);
  font-weight: 400;
  margin: 0 0 16px;
  letter-spacing: 0.03em;
}

.proto-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.proto-chip {
  background: #111;
  border: 1px solid var(--silver-dim);
  border-radius: 4px;
  padding: 8px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--silver);
}

.proto-phase-divider {
  display: flex;
  align-items: center;
  max-width: 760px;
  margin: 0 auto 64px;
  gap: 16px;
  color: var(--silver-dim);
}

.proto-phase-divider::before,
.proto-phase-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--silver-dim);
}

.proto-phase-divider-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: var(--silver);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* 2×2 grid for Option B */
.proto-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 32px auto 0;
}

.proto-achieved-callout {
  background: rgba(76, 175, 125, 0.08);
  border: 1px solid rgba(76, 175, 125, 0.3);
  border-radius: 8px;
  padding: 24px 32px;
  max-width: 760px;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  gap: 32px;
}

.proto-achieved-predicted {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--silver);
}

.proto-achieved-arrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: var(--silver);
}

.proto-achieved-result {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: #4caf7d;
  letter-spacing: 0.04em;
}

.proto-achieved-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--silver);
  font-weight: 300;
}

/* ══════════════════════════════════
   OPTION C — DISTANCE GRADIENT VISUAL
   ══════════════════════════════════ */
.proto-dist-section {
  background: #060606;
  padding: 96px 0;
}

.proto-dist-intro {
  max-width: 640px;
  text-align: center;
  margin: 0 auto 56px;
}

.proto-dist-track {
  max-width: 1100px;
  margin: 0 auto 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 80px 0;
}

.proto-dist-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--silver-dim);
  transform: translateY(-50%);
  z-index: 0;
}

.proto-dist-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Values above the line (nodes 1 & 3) */
.proto-dist-node--up .proto-dist-node-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 2px;
  order: 1;
}

.proto-dist-node--up .proto-dist-node-val-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--silver);
  text-transform: uppercase;
  margin-bottom: 12px;
  order: 2;
}

.proto-dist-node--up .proto-dist-dot {
  order: 3;
}

.proto-dist-node--up .proto-dist-node-dist {
  order: 4;
  margin-top: 10px;
}

.proto-dist-node--up .proto-dist-node-name {
  order: 5;
}

/* Values below the line (nodes 2 & 4) */
.proto-dist-node--down {
  flex-direction: column;
}

.proto-dist-node--down .proto-dist-dot {
  order: 1;
}

.proto-dist-node--down .proto-dist-node-dist {
  order: 2;
  margin-top: 10px;
}

.proto-dist-node--down .proto-dist-node-name {
  order: 3;
}

.proto-dist-node-val--below {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--orange);
  line-height: 1;
  margin-top: 12px;
  order: 4;
}

.proto-dist-node-val-lbl--below {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--silver);
  text-transform: uppercase;
  order: 5;
}

.proto-dist-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  position: relative;
  z-index: 2;
}

.proto-dist-node-dist {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--silver);
  text-transform: uppercase;
  text-align: center;
}

.proto-dist-node-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: var(--silver);
  font-weight: 300;
  text-align: center;
  margin-top: 4px;
}

.proto-dist-callout {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: var(--white);
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: 0.03em;
}

.proto-dist-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--silver);
  text-align: center;
  margin: 0 0 48px;
}

.proto-dist-cards {
  max-width: 1100px;
  margin: 48px auto 0;
}

/* ════ END PROTOTYPE DATA OPTIONS ════ */
/* ════ PROTOTYPE DATA OPTION D — Two-point + Large Images ════ */
.proto-d-section {
  background: #080808;
  padding: 100px 64px;
  border-bottom: 1px solid var(--silver-dim);
}
.proto-d-section .prob-a-eyebrow { text-align: left; }

/* Title block */
.proto-d-header {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: 0 auto 48px;
}
/* Body text — newspaper columns, appears after the graphic */
.proto-d-intro {
  column-count: 2;
  column-gap: 48px;
  column-rule: 1px solid var(--silver-dim);
  max-width: 1100px;
  margin: 0 auto 64px;
  padding-top: 28px;
}
.proto-d-intro p {
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
  margin-bottom: 20px;
  break-inside: avoid;
}
.proto-d-intro p:last-child { margin-bottom: 0; }
.proto-d-intro strong { color: var(--white); font-weight: 500; }
.proto-d-intro em { color: var(--white); font-style: italic; }

/* Hero image below title */
.proto-d-hero-img {
  display: block;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 0;
  border-radius: 8px;
  object-fit: cover;
}

/* Track wrapper */
.proto-d-track-wrap {
  max-width: 1100px;
  margin: 28px auto 80px;
}

/* TOP ROW: numbers */
.proto-d-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  padding-bottom: 20px;
}
.proto-d-left-num  { text-align: left; }
.proto-d-center-drop { text-align: center; }
.proto-d-right-num { text-align: right; }

.proto-d-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px, 9vw, 120px);
  color: var(--orange);
  line-height: 0.95;
  display: block;
}
.proto-d-sublbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 6px;
  display: block;
}
.proto-d-drop-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 72px);
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* FULL-WIDTH LINE */
.proto-d-line {
  width: 100%;
  height: 1px;
  background: var(--silver-dim);
}

/* BOTTOM ROW: dots + distances */
.proto-d-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  padding-top: 16px;
}
.proto-d-left-dist  { text-align: left; }
.proto-d-center-lbl {
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  padding-top: 6px;
}
.proto-d-right-dist { text-align: right; }

.proto-d-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
  display: inline-block;
  margin-bottom: 8px;
}
.proto-d-dist {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--silver);
  display: block;
}

/* Two large images */
.proto-d-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.proto-d-img-block img {
  width: 100%;
  display: block;
  border-radius: 8px;
}
/* ════ END PROTOTYPE DATA OPTION D ════ */

/* ════ ABOUT SECTION (inline on index) ════ */
.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 80px;
  align-items: start;
  border-top: 1px solid var(--silver-dim);
}
.about-text {
  padding: 60px 64px 30px 64px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.about-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 24px;
}
.about-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 0.9;
  color: var(--white);
  margin-bottom: 36px;
}
.about-headline .dot { color: var(--orange); }
.about-divider {
  width: 40px;
  height: 2px;
  background: var(--orange);
  margin-bottom: 40px;
}
.about-body {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
  margin-bottom: 24px;
  max-width: 520px;
}
.about-body strong {
  color: var(--white);
  font-weight: 400;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
  padding-top: 20px;
  border-top: 1px solid var(--silver-dim);
  max-width: 520px;
}
.about-stat-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  color: var(--orange);
  line-height: 1;
  display: block;
}
.about-stat-lbl {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 6px;
  display: block;
}
.about-image {
  border-left: 1px solid var(--silver-dim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 40px;
}
.about-image img {
  width: 80%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
/* ════ END ABOUT SECTION ════ */

/* ════ COMPARISON — OPTION A: ACCORDION (details/summary) ════ */
.comp-a-details {
  margin-top: 40px;
  border-top: 1px solid var(--silver-dim);
  border-bottom: 1px solid var(--silver-dim);
}
.comp-a-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  transition: color 0.2s;
}
.comp-a-summary::-webkit-details-marker { display: none; }
.comp-a-summary:hover { color: var(--white); }
.comp-a-summary .comp-a-label { color: var(--white); }
.comp-a-summary .comp-a-label span { color: var(--orange); }
.comp-a-arrow {
  font-size: 18px;
  color: var(--orange);
  transition: transform 0.35s;
  line-height: 1;
}
.comp-a-details[open] .comp-a-arrow { transform: rotate(180deg); }
.comp-a-body {
  padding-bottom: 40px;
  animation: comp-a-open 0.35s ease;
}
@keyframes comp-a-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════ COMPARISON — OPTION B: FREQUENCY TABS ════ */
.comp-b-wrap { margin-top: 40px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.comp-b-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--silver-dim);
  margin-bottom: 28px;
}
.comp-b-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}
.comp-b-title span { color: var(--orange); }
.comp-b-tabs {
  display: flex;
  gap: 4px;
}
.comp-b-tab {
  background: none;
  border: 1px solid var(--silver-dim);
  color: var(--silver);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s;
}
.comp-b-tab:hover { border-color: var(--silver); color: var(--white); }
.comp-b-tab.active { background: var(--orange); border-color: var(--orange); color: var(--white); }
.comp-b-panel { display: none; }
.comp-b-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.comp-b-col-lbl {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 10px;
}

/* ════ COMPARISON — OPTION C: MODAL LIGHTBOX ════ */
.comp-c-trigger {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--silver-dim);
}
.comp-c-trigger-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
  flex: 1;
}
.comp-c-trigger-title span { color: var(--orange); }
.comp-c-btn {
  background: none;
  border: 1px solid var(--orange);
  color: var(--orange);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s;
  white-space: nowrap;
}
.comp-c-btn:hover { background: var(--orange); color: var(--white); }
.comp-c-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.92);
  z-index: 9000;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.comp-c-modal.open { display: flex; }
.comp-c-modal-inner {
  background: #141414;
  border: 1px solid var(--silver-dim);
  border-radius: 8px;
  max-width: 960px;
  width: 100%;
  padding: 40px;
  position: relative;
}
.comp-c-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none;
  border: none;
  color: var(--silver);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.comp-c-close:hover { color: var(--white); }
.comp-c-modal-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 24px;
}
.comp-c-modal-title span { color: var(--orange); }

/* ════ COMPARISON — OPTION D: HORIZONTAL SCROLL STRIP ════ */
.comp-d-wrap { margin-top: 40px; }
.comp-d-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--silver-dim);
}
.comp-d-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}
.comp-d-title span { color: var(--orange); }
.comp-d-hint {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
}
.comp-d-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.comp-d-scroll::-webkit-scrollbar { height: 3px; }
.comp-d-scroll::-webkit-scrollbar-track { background: var(--silver-dim); }
.comp-d-scroll::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }
.comp-d-card {
  flex: 0 0 520px;
  scroll-snap-align: start;
  background: #111;
  border: 1px solid var(--silver-dim);
  border-radius: 8px;
  padding: 20px;
}
.comp-d-freq {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.comp-d-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.comp-d-pair-lbl {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 6px;
}
/* ════ END COMPARISON OPTIONS ════ */

/* ════ MISSION SECTION — OPTION A: CINEMATIC SPLIT ════ */
.ms-a-section {
  padding: 80px 48px;
  border-top: 1px solid var(--silver-dim);
  max-width: 1296px;
  margin: 0 auto;
}
.ms-a-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 0;
}
.ms-a-video { }
.ms-a-video-frame {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
  border: 1px solid #333;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.ms-a-video-play {
  width: 64px; height: 64px;
  color: var(--white); opacity: 0.5;
}
.ms-a-video-play svg { width: 100%; height: 100%; }
.ms-a-video-lbl {
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--silver);
}
.ms-a-quote {
  border-left: 1px solid var(--silver-dim);
  padding-left: 64px;
}
.ms-a-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 28px;
}
.ms-a-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(44px, 4.5vw, 68px);
  line-height: 0.92;
  color: var(--white);
  margin-bottom: 24px;
}
.ms-a-headline .dot { color: var(--orange); }
.ms-a-sub {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--silver);
  font-style: italic;
}
.ms-a-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
  border-top: 1px solid var(--silver-dim);
}
.ms-a-stat {
  padding: 32px 0;
}
.ms-a-stat--mid {
  border-left: 1px solid var(--silver-dim);
  border-right: 1px solid var(--silver-dim);
  padding-left: 40px;
}
.ms-a-stat:last-child {
  padding-left: 40px;
}
.ms-a-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: var(--orange);
  line-height: 1;
  display: block;
}
.ms-a-stat-lbl {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 6px;
  display: block;
}

/* ════ MISSION SECTION — OPTION B: DECLARATION STACK ════ */
.ms-b-section {
  padding: 80px 48px;
  border-top: 1px solid var(--silver-dim);
  max-width: 1296px;
  margin: 0 auto;
}
.ms-b-declarations {
  margin-bottom: 48px;
}
.ms-b-line {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--orange);
}
.ms-b-line:last-child { border-bottom: 1px solid var(--orange); }
.ms-b-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  color: var(--orange);
  letter-spacing: 0.1em;
}
.ms-b-decl {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3.5vw, 52px);
  color: var(--white);
  line-height: 1;
  letter-spacing: 0.01em;
}
.ms-b-video-frame {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
  border: 1px solid #333;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.ms-b-video-play {
  width: 64px; height: 64px;
  color: var(--white); opacity: 0.5;
}
.ms-b-video-play svg { width: 100%; height: 100%; }

/* ════ MISSION SECTION — OPTION C: TEXT OVER VIDEO ════ */
.ms-c-section {
  padding: 80px 48px;
  border-top: 1px solid var(--silver-dim);
  max-width: 1296px;
  margin: 0 auto;
}
.ms-c-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.ms-c-video-frame {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
  border: 1px solid #333;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-c-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ms-c-play svg {
  width: 64px; height: 64px;
  color: var(--white); opacity: 0.4;
}
.ms-c-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 60px 52px 44px;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
}
.ms-c-eyebrow {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.ms-c-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 0.92;
  color: var(--white);
  margin-bottom: 16px;
}
.ms-c-headline .dot { color: var(--orange); }
.ms-c-body {
  font-size: 13px;
  font-weight: 300;
  color: rgba(160,160,160,0.9);
  max-width: 480px;
  line-height: 1.7;
}
/* ════ END MISSION OPTIONS ════ */

/* Mission body text */
.ms-a-body-text {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--silver-dim);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ms-a-body-text p {
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
}
.ms-a-body-text strong {
  color: var(--white);
  font-weight: 400;
}
.ms-a-coda {}

/* ════════════════════════════════════════════════════
   PROTOTYPE SECTION — Options A / B / C
════════════════════════════════════════════════════ */

/* ── SHARED BASE ── */
.prot-a-section,
.prot-b-section,
.prot-c-section {
  padding: 100px 64px;
  border-bottom: 1px solid var(--silver-dim);
}

/* ════ OPTION A — Hero + Contact Sheet ════ */
.prot-a-section .prob-a-eyebrow { text-align: left; }
.prot-a-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.prot-a-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 6vw, 80px);
  line-height: 0.92;
  color: var(--white);
  margin-top: 12px;
}
.prot-a-intro {
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prot-a-intro-callout {
  color: var(--white);
  font-weight: 400;
}
.prot-a-hero {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 8px;
}
.prot-a-hero-wrap {
  max-width: 1200px;
  margin: 0 auto 12px;
  display: flex;
  flex-direction: column;
}
.prot-a-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}
.prot-a-strip-item {
  display: flex;
  flex-direction: column;
}
.prot-a-strip-item .prot-a-caption,
.prot-a-hero-wrap .prot-a-caption {
  margin-top: 10px;
}
.prot-a-strip-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.prot-a-caption {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--silver);
  margin-top: 8px;
  opacity: 0.7;
}

/* ════ OPTION B — Editorial Split Grid ════ */
.prot-b-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
.prot-b-hero {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.prot-b-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 0.92;
  color: var(--white);
  margin: 12px 0 20px;
}
.prot-b-intro {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
  margin-bottom: 32px;
  max-width: 480px;
}
.prot-b-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.prot-b-context-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* ════ OPTION C — Cinematic Full-Bleed ════ */
.prot-c-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  max-width: 1200px;
  margin: 0 auto 40px;
}
.prot-c-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 0.92;
  color: var(--white);
  margin-top: 12px;
}
.prot-c-intro {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
  align-self: end;
}
.prot-c-hero-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
}
.prot-c-hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
.prot-c-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-top: 1px solid var(--silver-dim);
}
.prot-c-row-item {
  border-right: 1px solid var(--silver-dim);
}
.prot-c-row-item:last-child { border-right: none; }
.prot-c-row-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
/* ════ END PROTOTYPE OPTIONS ════ */

/* ════════════════════════════════════════════════════
   TESTIMONIALS — 2×2 GRID
════════════════════════════════════════════════════ */
.tq-grid-section {
  padding: 100px 64px;
  border-bottom: 1px solid var(--silver-dim);
}
.tq-grid-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 48px;
  text-align: center;
}
.tq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  max-width: 1200px;
  margin: 0 auto;
}
.tq-card {
  background: #111;
  padding: 48px 48px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tq-card-mark {
  font-family: 'DM Serif Display', serif;
  font-size: 80px;
  line-height: 0.6;
  color: var(--orange);
  display: block;
  margin-bottom: 24px;
  opacity: 0.8;
}
.tq-card-quote {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--white);
  flex: 1;
  margin-bottom: 28px;
}
.tq-card-cite {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  font-style: normal;
}
/* ════ END TESTIMONIALS GRID ════ */

/* ════════════════════════════════════════════════════
   MAESTRO FEATURE CARDS
════════════════════════════════════════════════════ */
.maestro-cards-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 64px 0;
  border-top: 1px solid var(--silver-dim);
}
.maestro-dev-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 32px;
}
.maestro-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 48px;
}
.maestro-card {
  background: #111;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.maestro-card-badge {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid rgba(232,66,10,0.3);
  border-radius: 100px;
  padding: 4px 10px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 16px;
}
.maestro-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 2.5vw, 32px);
  color: var(--white);
  line-height: 1;
  letter-spacing: 0.03em;
}
.maestro-card-body {
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
}
.maestro-goal {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--white);
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 8px;
}
/* ════ END MAESTRO CARDS ════ */

.ms-a-goals-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  padding-top: 32px;
  margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════
   MOBILE & RESPONSIVE STYLES
   Breakpoints: 900px (tablet landscape) · 768px (tablet) · 480px (phone)
══════════════════════════════════════════════════════════════ */

/* ── Hamburger button (hidden on desktop) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 301;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
/* Animate to X when open */
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Hide custom cursor on touch devices */
@media (hover: none) {
  #hex-canvas, #cursor-dot { display: none; }
  html, body { cursor: auto; }
  .hero-cta, .card-link, .hl-arrow, .hl-dot { cursor: pointer; }
}

/* ══════════════════════════════════════════════════════════════
   TABLET LANDSCAPE  ≤ 900px
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Nav */
  nav { padding: 22px 32px; }

  /* Hero */
  .hero-content { padding: 0 32px 64px; }
  .hero-stats { right: 32px; bottom: 64px; gap: 20px; }

  /* Feature sections */
  .s-feature { padding: 80px 32px; }
  .s-feature-inner { grid-template-columns: 1fr; gap: 48px; }
  .s-feature-inner.reverse { direction: ltr; }

  /* Mission */
  .ms-a-section { padding: 64px 32px; }
  .ms-a-grid { grid-template-columns: 1fr; gap: 48px; }
  .ms-a-quote { border-left: none; padding-left: 0; border-top: 1px solid var(--silver-dim); padding-top: 40px; }
  .ms-a-stats { grid-template-columns: repeat(3, 1fr); }

  /* Products */
  .prod-section { padding: 80px 32px; }
  .p1-grid { grid-template-columns: 1fr 1fr; }

  /* Modules */
  .byo-section { padding: 80px 32px; }
  .mod-grid { grid-template-columns: repeat(3, 1fr); }

  /* Prototype sections */
  .prot-a-section, .prot-b-section, .prot-c-section { padding: 80px 32px; }
  .prot-a-header { grid-template-columns: 1fr; }
  .prot-a-strip { grid-template-columns: repeat(2, 1fr); }
  .prot-b-grid { grid-template-columns: 1fr; }
  .prot-c-header { grid-template-columns: 1fr; }

  /* Proto D */
  .proto-d-section { padding: 80px 32px; }
  .proto-d-intro { column-count: 1; }
  .proto-d-images { grid-template-columns: 1fr; }

  /* Metrics / Proof */
  .mtr-a-section { padding: 80px 32px; }
  .mtr-a-split { grid-template-columns: 1fr; gap: 48px; }
  .mtr-a-stats-row { flex-wrap: wrap; gap: 32px; justify-content: flex-start; padding: 32px 0; }

  /* Testimonials grid */
  .tq-grid-section { padding: 80px 32px; }

  /* Maestro cards */
  .maestro-cards-wrap { padding: 48px 32px 0; }

  /* FAQ */
  .faq-section { padding: 80px 32px; }

  /* Footer */
  .site-footer { padding: 56px 32px 32px; }
  .footer-top { grid-template-columns: 1fr; gap: 48px; }

  /* About / Contact / News page panels */
  .about-wrap, .contact-wrap { grid-template-columns: 1fr; }
  .about-image { border-left: none; border-top: 1px solid var(--silver-dim); padding: 40px; }
  .contact-text { border-right: none; border-bottom: 1px solid var(--silver-dim); padding: 40px 32px; }
  .contact-form-wrap { padding: 40px 32px; }
  .news-body { grid-template-columns: 1fr; }
  .news-main { border-right: none; padding: 48px 32px; }
  .news-sidebar { padding: 0 32px 48px; border-top: 1px solid var(--silver-dim); }
}

/* ══════════════════════════════════════════════════════════════
   TABLET PORTRAIT & PHONE  ≤ 768px
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV: remove backdrop-filter on mobile — it traps fixed children to nav height ── */
  nav.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10,10,10,0.97);
  }

  /* ── NAV → HAMBURGER ── */
  .nav-links {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10,10,10,0.97);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    z-index: 300;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 14px; letter-spacing: 0.24em; }
  .nav-hamburger { display: flex; }

  /* ── HERO ── */
  .s-hero { height: 100svh; } /* small viewport height — avoids mobile browser chrome */
  .s-hero-bg {
    background-image: url('../images/hero-bg-portrait.jpg');
    background-position: center top;
  }
  .hero-content { padding: 0 24px 40px; max-width: 100%; }
  .hero-headline { font-size: clamp(36px, 10.5vw, 52px); }
  .hero-sub { font-size: 14px; max-width: 100%; margin-bottom: 28px; }
  .hero-line { width: calc(100% + 24px); margin-left: -24px; } /* match mobile padding */
  .hero-stats { display: none; } /* stats duplicated in mission section below */
  .scroll-hint { display: none; }

  /* ── HIGHLIGHTS CAROUSEL ── */
  .s-highlights { padding: 80px 0 64px; }
  .hl-header { padding: 0 24px; }
  .hl-track { padding: 0 24px; }
  .hl-card { flex: 0 0 calc(82% - 10px); min-height: 400px; }
  .hl-controls { padding: 0 24px; margin-top: 32px; }

  /* ── IMAGE BREAK ── */
  .s-image-break { padding: 0 24px 64px; }

  /* ── PROBLEM / SOLUTION ── */
  .prob-a-section, .sol-section { padding: 56px 24px 72px; }
  .prob-b-section, .prob-c-section, .prob-d-section { padding: 64px 24px; }
  .hiw-a-section, .hiw-b-section, .hiw-c-section, .hiw-d-section { padding: 64px 24px; }

  /* How It Works Option A */
  .hiw-a-row { grid-template-columns: 64px 1fr; }
  .hiw-a-num { font-size: 52px; }
  .hiw-a-spine { left: 30px; }

  /* How It Works Option D */
  .hiw-d-card { grid-template-columns: 1fr; padding: 32px; }
  .hiw-d-big-num { font-size: 64px; }

  /* ── NARRATIVE ── */
  .s-narrative { padding: 80px 24px; }
  .s-narrative-cols { grid-template-columns: 1fr; gap: 0; }

  /* ── FEATURE SECTIONS ── */
  .s-feature { padding: 64px 24px; }
  .s-feature-stats { flex-wrap: wrap; gap: 24px; }
  .maestro-cards { grid-template-columns: 1fr; }
  .maestro-cards-wrap { padding: 40px 24px 0; }

  /* ── MODULAR ── */
  .s-modular { padding: 80px 24px 48px; }

  /* ── VIDEO / MISSION ── */
  .s-video { padding: 64px 24px; }
  .ms-a-section { padding: 56px 24px; }
  .ms-a-stats { grid-template-columns: 1fr; border-top: none; }
  .ms-a-stat { padding: 20px 0; border-top: 1px solid var(--silver-dim); }
  .ms-a-stat--mid { border-left: none; border-right: none; padding-left: 0; }
  .ms-a-stat:last-child { padding-left: 0; }

  /* ── METRICS ── */
  .mtr-a-section { padding: 64px 24px; }
  .mtr-a-col-grid, .mtr-b-comp-grid, .mtr-c-col-grid, .mtr-b-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .mtr-c-col--left { border-right: none; border-bottom: 1px solid var(--orange); padding-bottom: 32px; }
  .mtr-c-hero-bar { padding: 40px 24px; margin: 0 -24px; }
  .mtr-c-hero-inner { flex-wrap: wrap; gap: 32px; justify-content: flex-start; }
  .mtr-a-stats-row { flex-direction: column; align-items: flex-start; gap: 28px; }

  /* ── PROTOTYPE SECTIONS ── */
  .prot-a-section, .prot-b-section, .prot-c-section { padding: 64px 24px; }
  .proto-d-section { padding: 64px 24px; }
  .proto-tab-card { padding: 24px; }
  .proto-tab-stats { flex-wrap: wrap; gap: 24px; }
  .proto-tab-stat { padding: 0 16px; }
  .proto-tab-stat-divider { display: none; }
  .proto-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .proto-grid-2x2 { grid-template-columns: 1fr; }

  /* ── TESTIMONIALS ── */
  .tq-section { padding: 64px 24px; }
  .tq-grid-section { padding: 64px 24px; }
  .tq-grid { grid-template-columns: 1fr; }
  .tq-card { padding: 32px 28px; }

  /* ── PRODUCTS ── */
  .prod-section { padding: 64px 24px; }
  .p1-grid { grid-template-columns: 1fr; }

  /* ── MODULES ── */
  .byo-section { padding: 64px 24px; }
  .mod-grid { grid-template-columns: repeat(2, 1fr); }
  .byo-grid { grid-template-columns: 1fr; }

  /* ── PRE-FOOTER CTA ── */
  .footer-cta { padding: 72px 24px; }

  /* ── FOOTER ── */
  .site-footer { padding: 48px 24px 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* ── FAQ ── */
  .faq-section { padding: 64px 24px; }

  /* ── BILLBOARD ── */
  .s-billboard { padding: 80px 24px; }

  /* ── ABOUT PAGE ── */
  .about-wrap { padding-top: 72px; }
  .about-text { padding: 40px 24px 32px; }
  .about-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .about-stat-val { font-size: 32px; }
  .about-image { padding: 32px 24px; }
  .about-image img { width: 100%; aspect-ratio: 4/3; }

  /* ── CONTACT PAGE ── */
  .contact-wrap { padding-top: 72px; }
  .contact-text { padding: 40px 24px 32px; }
  .contact-form-wrap { padding: 32px 24px 48px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* ── NEWS PAGE ── */
  .news-header { padding: 120px 24px 56px; }
  .news-main { padding: 40px 24px; }
  .news-sidebar { padding: 0 24px 40px; }
  .press-release-item { grid-template-columns: 60px 1fr auto; gap: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   SMALL PHONE  ≤ 480px
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Nav */
  nav { padding: 18px 20px; }
  .nav-logo img { height: 22px; }

  /* Hero */
  .hero-content { padding: 0 20px 36px; }
  .hero-headline { font-size: clamp(34px, 10vw, 48px); }

  /* Carousel cards full-width on small phones */
  .hl-card { flex: 0 0 calc(92% - 10px); min-height: 360px; }
  .hl-track { padding: 0 20px; }

  /* Feature stats row */
  .s-feature-stats { flex-direction: column; gap: 16px; }

  /* Modules: single column */
  .mod-grid { grid-template-columns: repeat(2, 1fr); }

  /* Mission stats */
  .ms-a-stats { grid-template-columns: 1fr; }
  .ms-a-stat--mid { padding-left: 0; }

  /* Products: full width */
  .p1-grid { grid-template-columns: 1fr; }
  .p1-body { padding: 24px 20px 28px; }

  /* Footer nav: single column */
  .footer-nav { grid-template-columns: 1fr; gap: 24px; }
  .footer-cta { padding: 56px 20px; }

  /* BYO grid */
  .byo-grid { grid-template-columns: 1fr; }

  /* FAQ */
  .faq-section { padding: 56px 20px; }

  /* About stats */
  .about-stats { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Contact form */
  .contact-text { padding: 32px 20px; }
  .contact-form-wrap { padding: 24px 20px 40px; }
  .contact-headline { font-size: clamp(40px, 10vw, 64px); }

  /* News */
  .news-header { padding: 100px 20px 40px; }
  .news-main, .news-sidebar { padding-left: 20px; padding-right: 20px; }
  .press-release-item { grid-template-columns: 1fr; gap: 8px; }
  .press-release-date { flex-direction: row; align-items: baseline; gap: 8px; }
  .press-release-date-day { font-size: 22px; }
  .press-release-arrow { display: none; }

  /* Prototype strip */
  .prot-a-strip { grid-template-columns: repeat(2, 1fr); }

  /* Testimonials */
  .tq-card { padding: 28px 20px; }
  .tq-card-mark { font-size: 56px; }

  /* Billboard */
  .s-billboard { padding: 64px 20px; }

  /* Narrative tags */
  .s-narrative-tags { gap: 8px; }
  .s-narrative-tag { font-size: 10px; padding: 6px 14px; }

  /* Misc padding tightening */
  .hiw-a-section, .hiw-b-section { padding: 56px 20px; }
  .mtr-a-section, .mtr-b-section, .mtr-c-section { padding: 56px 20px; }
  .prob-a-section, .sol-section { padding: 48px 20px 64px; }
  .tq-grid-section { padding: 56px 20px; }
}
/* ══════════════════════════════════════════════════════════════
   END RESPONSIVE STYLES
══════════════════════════════════════════════════════════════ */