/* ============================================================
   Big Star Power · Lone Star Voltage design system
   Tokens, chrome, hero scrub, sections, cards, forms, footer.
   ============================================================ */

:root{
  --ink:#090D13;
  --panel:#0E1420;
  --panel-2:#111827;
  --line:rgba(237,236,230,.12);
  --line-gold:rgba(200,155,98,.35);
  --gold:#C89B62;
  --gold-hi:#E8C287;
  --bone:#EDECE6;
  --slate:#8A93A3;
  --max:1240px;
  --gut:48px;
  --nav-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-variation-settings:"wdth" 100;
  line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:rgba(200,155,98,.35)}

.mono{font-family:"Fragment Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:400}
.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
@media(max-width:760px){:root{--gut:22px}}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ---------------- Nav ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h); padding:0 32px;
  background:linear-gradient(180deg, rgba(9,13,19,.82), rgba(9,13,19,0));
  transition:background .4s var(--ease);
}
.nav.solid{background:rgba(9,13,19,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-lockup{display:flex; align-items:center; gap:11px; font-weight:640; font-size:15px; letter-spacing:.02em; font-variation-settings:"wdth" 108}
.nav-lockup img{height:62px; width:auto}
@media(max-width:600px){.nav-lockup img{height:46px}}
.nav-links{display:flex; gap:30px; list-style:none; margin:0; padding:0; font-size:13.5px; color:var(--slate)}
.nav-links a{transition:color .25s}
.nav-links a:hover,.nav-links a.on{color:var(--bone)}
.nav-links a.on{color:var(--gold-hi)}
.nav-cta{
  font-family:"Fragment Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); padding:12px 18px; border-radius:2px;
  transition:background .25s;
}
.nav-cta:hover{background:var(--gold-hi)}
.nav-burger{display:none; background:none; border:none; cursor:pointer; padding:10px; z-index:70}
.nav-burger span{display:block; width:22px; height:2px; background:var(--bone); margin:5px 0; transition:transform .3s var(--ease), opacity .3s}
@media(max-width:1080px){
  .nav-links,.nav .nav-cta{display:none}
  .nav-burger{display:block}
}
.nav-drawer{
  position:fixed; inset:0; z-index:65; background:rgba(9,13,19,.98);
  display:flex; flex-direction:column; padding:calc(var(--nav-h) + 8px) 40px 32px; gap:8px;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
/* auto margins center the menu when it fits and let it scroll from the top when it does not */
.nav-drawer > :first-child{margin-top:auto}
.nav-drawer > :last-child{margin-bottom:auto}
.nav-drawer.open{opacity:1; pointer-events:auto}
.nav-drawer a{font-size:32px; font-weight:640; padding:12px 0; border-bottom:1px solid var(--line); font-variation-settings:"wdth" 106}
.nav-drawer a.cta{color:var(--gold-hi)}
.nav-drawer .mono{color:var(--slate); margin-bottom:18px}
@media(max-height:860px){.nav-drawer{gap:4px}.nav-drawer a{font-size:26px; padding:10px 0}}
@media(max-height:700px){.nav-drawer{gap:2px; padding-bottom:20px}.nav-drawer a{font-size:22px; padding:7px 0}.nav-drawer .mono{margin-bottom:10px}}
body.drawer-lock{overflow:hidden}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- Hero scrub ---------------- */
.hero-track{position:relative; height:560vh}
.hero-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--ink)}
.hero-media{position:absolute; inset:0}
.hero-media video,.hero-media img.poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-media img.poster{opacity:1; transition:opacity .5s}
.hero-stage.video-live img.poster{opacity:0}
.hero-vignette{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,13,19,.55) 0%, rgba(9,13,19,0) 30%),
    linear-gradient(0deg, rgba(9,13,19,.6) 0%, rgba(9,13,19,0) 28%);
}
@media(max-width:900px){
  .hero-vignette{background:
    linear-gradient(180deg, rgba(9,13,19,.65) 0%, rgba(9,13,19,.3) 38%, rgba(9,13,19,.55) 72%, rgba(9,13,19,.75) 100%)}
}

.hero-load{
  position:absolute; right:26px; bottom:24px; z-index:8; display:flex; align-items:center; gap:10px;
  color:var(--slate); font-family:"Fragment Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transition:opacity .4s;
}
.hero-load.show{opacity:1}
.hero-load .ring{width:14px; height:14px; border-radius:50%; border:2px solid rgba(237,236,230,.2); border-top-color:var(--gold); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero-load .ring{animation:none}}

/* Band 0: the opening statement */
.band0{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 0 10vh; pointer-events:none;
}
.band0 .wrap{width:100%; pointer-events:auto}
.band0 .kick{color:var(--gold-hi); margin:0 0 22px; text-shadow:0 1px 14px rgba(9,13,19,.8)}
.band0 h1{
  font-size:clamp(42px,6vw,88px); line-height:.99; font-weight:660; letter-spacing:-.022em;
  margin:0 0 24px; max-width:17ch; font-variation-settings:"wdth" 106;
  text-shadow:0 2px 30px rgba(9,13,19,.75); text-wrap:balance;
}
.band0 h1 .h1-status{
  display:block; margin-top:.28em; font-size:.5em; line-height:1.05; letter-spacing:-.012em;
  color:var(--gold-hi); font-weight:620;
}
.band0 .sub{
  font-size:17.5px; color:var(--bone); max-width:50ch; margin:0 0 32px; line-height:1.55;
  text-shadow:0 1px 18px rgba(9,13,19,.9);
}
.band0 .ctas{display:flex; gap:14px; flex-wrap:wrap}
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  color:var(--slate); font-family:"Fragment Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue::after{content:""; width:1px; height:34px; background:linear-gradient(180deg,var(--gold),transparent); animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
@media(prefers-reduced-motion:reduce){.scroll-cue::after{animation:none}}

/* Caption bands over the film */
.band{
  position:absolute; z-index:6; max-width:520px; opacity:0; pointer-events:none;
  transform:translateY(18px);
}
.band .panel{
  background:linear-gradient(135deg, rgba(9,13,19,.72), rgba(9,13,19,.38));
  backdrop-filter:blur(3px);
  border-left:2px solid var(--gold);
  padding:22px 26px;
}
.band .mono{color:var(--gold-hi); display:block; margin-bottom:10px}
.band p{margin:0; font-size:clamp(22px,2.6vw,34px); line-height:1.18; font-weight:620; letter-spacing:-.012em; font-variation-settings:"wdth" 104}
.band p + p{margin-top:10px; color:var(--gold-hi)}
.band.pos-ul{top:16vh; left:var(--gut)}
.band.pos-l{top:34vh; left:var(--gut)}
.band.pos-ur{top:16vh; right:var(--gut); left:auto}

/* The settle */
.settle{
  position:absolute; z-index:7; top:14vh; left:var(--gut); max-width:600px;
  opacity:0; transform:translateY(20px); pointer-events:none;
}
.settle.on{pointer-events:auto}
.settle .mono{color:var(--gold-hi); display:block; margin-bottom:16px}
.settle h2{
  font-size:clamp(34px,4.4vw,62px); line-height:1.02; font-weight:660; letter-spacing:-.02em;
  margin:0 0 18px; font-variation-settings:"wdth" 106; text-shadow:0 2px 26px rgba(9,13,19,.8); text-wrap:balance;
}
.settle p{font-size:17px; color:var(--bone); margin:0 0 28px; text-shadow:0 1px 16px rgba(9,13,19,.9)}

/* Buttons */
.btn{
  display:inline-block; background:var(--gold); color:var(--ink);
  padding:16px 28px; font-weight:640; font-size:14.5px; border-radius:2px; border:none; cursor:pointer;
  transition:background .25s, transform .25s var(--ease);
}
.btn:hover{background:var(--gold-hi); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--bone); border:1px solid rgba(237,236,230,.32)}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold-hi); background:transparent}

/* ---------------- Sections ---------------- */
main{position:relative}
.section{padding:120px 0; position:relative}
.section.dark2{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.kick{display:block; color:var(--gold); margin-bottom:16px}
.h2{
  font-size:clamp(32px,3.8vw,52px); line-height:1.04; font-weight:650; letter-spacing:-.018em;
  margin:0 0 20px; font-variation-settings:"wdth" 105; text-wrap:balance;
}
.h2 .gold{color:var(--gold-hi)}
.lead{font-size:16.5px; color:var(--slate); max-width:60ch; margin:0}
.lead strong{color:var(--bone); font-weight:600}

/* word-reveal targets */
.wr .w{display:inline-block; overflow:hidden; vertical-align:top}
.wr .w>span{display:inline-block; will-change:transform}

/* Stat band */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:rgba(14,20,32,.5)}
.stat{padding:30px 30px 26px; border-right:1px solid var(--line); position:relative; overflow:hidden}
.stat:last-child{border-right:none}
.stat::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold),transparent); opacity:0; transition:opacity .5s}
.stat.lit::before{opacity:1}
.stat b{display:block; font-size:clamp(30px,3vw,42px); font-weight:650; letter-spacing:-.01em; font-variant-numeric:tabular-nums; font-variation-settings:"wdth" 104; line-height:1.05; white-space:nowrap}
.stat b i{font-style:normal; color:var(--gold); font-size:.5em; font-family:"Fragment Mono",monospace; letter-spacing:.06em; margin-left:5px; vertical-align:2px}
.stat > span{display:block; font-size:13px; color:var(--slate); margin-top:8px}
.stat b span{display:inline; font-size:inherit; color:inherit; margin:0}
.stats-note{margin-top:14px; color:var(--slate); font-size:10.5px}
.stats.stats-2{grid-template-columns:repeat(2,1fr)}
.stats.stats-2 .stat:nth-child(2){border-right:none}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}}

/* Pipeline (the interactive moment) */
.pipeline{position:relative; margin-top:70px}
.pipe-svg{position:absolute; top:0; left:50%; transform:translateX(-50%); height:100%; width:2px; overflow:visible}
.stages{display:flex; flex-direction:column; gap:56px; position:relative}
.stage{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.stage .num{
  font-family:"Fragment Mono",monospace; color:var(--gold); font-size:12px; letter-spacing:.16em; display:block; margin-bottom:10px;
}
.stage h3{font-size:clamp(24px,2.4vw,32px); margin:0 0 12px; font-weight:640; font-variation-settings:"wdth" 105; letter-spacing:-.012em}
.stage p{color:var(--slate); font-size:15.5px; margin:0; max-width:44ch}
.stage .cell{
  background:var(--panel); border:1px solid var(--line); padding:36px 38px; position:relative; overflow:hidden;
  opacity:.45; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease), border-color .6s;
}
.stage .cell::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold),transparent); opacity:0; transition:opacity .6s}
.stage.lit .cell{opacity:1; transform:none; border-color:var(--line-gold)}
.stage.lit .cell::before{opacity:1}
.stage:nth-child(even){direction:rtl}
.stage:nth-child(even) .cell{direction:ltr}
.stage:nth-child(even) .side{direction:ltr}
.stage .side{color:var(--slate)}
.stage .side .glyph{width:120px; height:120px; opacity:.8}
@media(max-width:860px){
  .stage{grid-template-columns:1fr; gap:18px}
  .stage:nth-child(even){direction:ltr}
  .stage .side{display:none}
  .pipe-svg{left:8px; transform:none}
}

/* Cards */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px}
.card{
  background:var(--panel); border:1px solid var(--line); padding:34px 32px; position:relative; overflow:hidden;
}
.card::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.card .mono{color:var(--gold); display:block; margin-bottom:16px}
.card h3{margin:0 0 12px; font-size:21px; font-weight:640; font-variation-settings:"wdth" 104; letter-spacing:-.01em}
.card p{margin:0; color:var(--slate); font-size:14.5px}
@media(max-width:860px){.cards3{grid-template-columns:1fr}}
.cards4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:56px}
.cards4 .card{padding:30px 26px}
@media(max-width:1000px){.cards4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards4{grid-template-columns:1fr}}

/* SKU table */
.sku-wrap{overflow-x:auto; margin-top:56px; border:1px solid var(--line)}
table.sku{width:100%; border-collapse:collapse; min-width:640px; background:rgba(14,20,32,.5)}
table.sku th{
  font-family:"Fragment Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:400;
  color:var(--slate); text-align:left; padding:16px 22px; border-bottom:1px solid var(--line-gold);
}
table.sku td{padding:17px 22px; border-bottom:1px solid var(--line); font-size:15px}
table.sku tr:last-child td{border-bottom:none}
table.sku td.num{font-variant-numeric:tabular-nums; color:var(--gold-hi); font-weight:600}
table.sku tbody tr{transition:background .25s}
table.sku tbody tr:hover{background:rgba(200,155,98,.06)}
.table-note{margin-top:14px; color:var(--slate); font-size:10.5px}

/* Split sections */
.split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center}
.split .photo{position:relative; overflow:hidden; border:1px solid var(--line)}
.split .photo img{width:100%; height:100%; min-height:420px; object-fit:cover; transform:scale(1.06)}
.split .photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(15deg, rgba(9,13,19,.45), rgba(9,13,19,0) 55%)}
.split .photo .tag{
  position:absolute; left:16px; bottom:14px; z-index:2; color:var(--bone);
  font-family:"Fragment Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(9,13,19,.55); padding:7px 10px; backdrop-filter:blur(4px);
}
@media(max-width:900px){.split{grid-template-columns:1fr; gap:36px}}
.photo.spec{background:
  radial-gradient(80% 60% at 50% 100%, rgba(200,155,98,.10), transparent 65%),
  var(--panel);
  display:flex; align-items:center; justify-content:center; padding:40px 20px 56px; min-height:420px}
.photo.spec::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold),transparent); z-index:2}
.photo.spec::after{display:none}
.photo.spec img{width:auto; max-height:560px; min-height:0; object-fit:contain; transform:none;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.5))}

/* Spec rows */
.specs{margin-top:40px; border-top:1px solid var(--line)}
.spec{display:grid; grid-template-columns:110px 1fr; gap:20px; padding:17px 0; border-bottom:1px solid var(--line); font-size:15px}
.spec .mono{color:var(--gold); padding-top:3px}
.spec strong{color:var(--bone); font-weight:600}
.spec span:last-child{color:var(--slate)}

/* Regions + NDA */
.regions{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:48px}
.region{background:var(--panel); border:1px solid var(--line); padding:30px 32px}
.region b{display:block; font-size:20px; font-weight:640; margin-bottom:6px; font-variation-settings:"wdth" 104}
.region span{color:var(--slate); font-size:13.5px}
.nda{
  margin-top:18px; border:1px solid var(--line-gold); background:rgba(200,155,98,.05);
  padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.nda p{margin:0; color:var(--slate); font-size:14px; max-width:56ch}
@media(max-width:700px){.regions{grid-template-columns:1fr}}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:40px}
.chip{
  font-family:"Fragment Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--slate); padding:10px 14px;
  transition:border-color .25s, color .25s;
}
.chip:hover{border-color:var(--line-gold); color:var(--gold-hi)}

/* CTA band */
.cta-band{padding:150px 0; text-align:center; position:relative; overflow:hidden}
.cta-band .h2{max-width:20ch; margin-left:auto; margin-right:auto}
.cta-band .lead{margin:0 auto 42px; max-width:52ch}
.cta-band .ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* Conductor spine */
#spine{position:absolute; top:0; left:50%; width:2px; height:100%; pointer-events:none; z-index:0}

/* Vector tower layer */
.towerline{position:absolute; right:-40px; bottom:0; opacity:.10; pointer-events:none}

/* ---------------- Paper theme (light spec-sheet sections) ---------------- */
.section.paper{background:#EDECE6; color:#16181B; border-top:1px solid rgba(22,24,27,.12); border-bottom:1px solid rgba(22,24,27,.12)}
.section.paper .kick{color:#8F6B3D}
.section.paper .h2{color:#16181B}
.section.paper .lead{color:#54574F}
.section.paper .lead strong{color:#16181B}
.section.paper .card{background:#F6F5EF; border-color:rgba(22,24,27,.16)}
.section.paper .card::before{background:linear-gradient(90deg,#8F6B3D,transparent)}
.section.paper .card .mono{color:#8F6B3D}
.section.paper .card h3{color:#16181B}
.section.paper .card p{color:#54574F}
.section.paper .sku-wrap,.section.paper .compare-wrap{border-color:rgba(22,24,27,.16)}
.section.paper table.sku,.section.paper table.compare{background:#F6F5EF}
.section.paper table.sku th,.section.paper table.compare th{color:#75786F; border-bottom-color:rgba(143,107,61,.45)}
.section.paper table.compare th.hl{color:#8F6B3D}
.section.paper table.sku td,.section.paper table.compare td{border-bottom-color:rgba(22,24,27,.12); color:#54574F}
.section.paper table.sku td{color:#16181B}
.section.paper table.sku td.num{color:#8F6B3D}
.section.paper table.compare td:first-child{color:#16181B}
.section.paper table.compare td.hl{color:#16181B; background:rgba(143,107,61,.07)}
.section.paper table.sku tbody tr:hover{background:rgba(143,107,61,.06)}
.section.paper .table-note,.section.paper .stats-note{color:#75786F}
.section.paper .timeline{background:#F6F5EF; border-color:rgba(22,24,27,.16)}
.section.paper .tl-cell{border-right-color:rgba(22,24,27,.12)}
.section.paper .tl-cell .mono{color:#8F6B3D}
.section.paper .tl-cell b{color:#16181B}
.section.paper .tl-cell .d{color:#54574F}
.section.paper .tl-cell::after{background:linear-gradient(90deg,#8F6B3D,#C89B62)}
.section.paper .specs{border-top-color:rgba(22,24,27,.14)}
.section.paper .spec{border-bottom-color:rgba(22,24,27,.14); color:#54574F}
.section.paper .spec .mono{color:#8F6B3D}
.section.paper .spec strong{color:#16181B}
.section.paper .spec span:last-child{color:#54574F}
.section.paper .steps{border-top-color:rgba(22,24,27,.14)}
.section.paper .step{border-bottom-color:rgba(22,24,27,.14)}
.section.paper .step::before{color:#8F6B3D}
.section.paper .step b{color:#16181B}
.section.paper .step p{color:#54574F}
.section.paper .faq{border-top-color:rgba(22,24,27,.14)}
.section.paper details.qa{border-bottom-color:rgba(22,24,27,.14)}
.section.paper details.qa summary{color:#16181B}
.section.paper details.qa summary::after{color:#8F6B3D}
.section.paper details.qa .a{color:#54574F}
.section.paper details.qa .a strong{color:#16181B}
.section.paper .btn{background:#16181B; color:#EDECE6}
.section.paper .btn:hover{background:#2A2E33}
.section.paper .btn.ghost{background:transparent; color:#16181B; border:1px solid rgba(22,24,27,.4)}
.section.paper .btn.ghost:hover{border-color:#8F6B3D; color:#8F6B3D}
.section.paper .chips .chip{border-color:rgba(22,24,27,.2); color:#54574F}
.section.paper .chips .chip:hover{border-color:rgba(143,107,61,.5); color:#8F6B3D}
.section.paper .fnotes{color:#75786F}
.section.paper .fnotes .fn{color:#8F6B3D}
.section.paper .dcard{background:#F6F5EF; border-color:rgba(22,24,27,.16)}
.section.paper .dcard h3{color:#16181B}
.section.paper .dcard .dsub{color:#75786F}
.section.paper .chip-status{color:#8F6B3D; border-color:rgba(143,107,61,.45)}
.section.paper .dcheck li{color:#54574F; border-top-color:rgba(22,24,27,.12)}
.section.paper .dcheck li strong{color:#16181B}
.section.paper .dcheck li::before{border-color:#8F6B3D}

/* Diagram tokens: blueprint linework that adapts to ground */
.dg{--dg-line:#8A93A3; --dg-strong:#EDECE6; --dg-accent:#C89B62; --dg-dim:rgba(138,147,163,.4)}
.section.paper .dg{--dg-line:#4A4E45; --dg-strong:#16181B; --dg-accent:#8F6B3D; --dg-dim:rgba(74,78,69,.35)}
.dg text{font-family:"Fragment Mono",monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; fill:var(--dg-line)}
.dg .lbl{fill:var(--dg-accent)}
.dg .strong{fill:var(--dg-strong)}
.diagram-panel{border:1px solid var(--line); background:rgba(14,20,32,.5); padding:34px; display:flex; align-items:center; justify-content:center}
.diagram-panel svg{width:100%; height:auto; max-width:560px}
.section.paper .diagram-panel{border-color:rgba(22,24,27,.16); background:#F6F5EF}

/* Catalog family block (hardware page) */
.family{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center}
.family:nth-child(even of .family){direction:rtl}
.family:nth-child(even of .family)>*{direction:ltr}
@media(max-width:900px){.family{grid-template-columns:1fr; gap:30px}.family:nth-child(even of .family){direction:ltr}}
.spec-chips{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 26px}
.spec-chips .chip{cursor:default}

/* ---------------- Nav dropdown ---------------- */
.nav-links li.has-sub{position:relative}
.nav-links li.has-sub>a::after{content:"▾"; font-size:9px; margin-left:6px; opacity:.7}
.nav-links .sub{position:absolute; top:100%; left:-18px; padding-top:16px; display:none; min-width:210px; z-index:80}
.nav-links li.has-sub:hover .sub, .nav-links li.has-sub:focus-within .sub{display:block}
.sub-panel{background:rgba(9,13,19,.97); border:1px solid var(--line); backdrop-filter:blur(10px); padding:10px; display:flex; flex-direction:column; gap:2px}
.sub-panel a{padding:11px 14px; font-size:13.5px; color:var(--slate); display:block; transition:color .2s, background .2s}
.sub-panel a:hover, .sub-panel a.on{color:var(--gold-hi); background:rgba(200,155,98,.07)}
.sub-panel .sub-head{display:block; margin-top:6px; padding:12px 14px 6px; border-top:1px solid var(--line); color:var(--gold); font-size:10px; cursor:default}

/* ---------------- Depth components ---------------- */
/* Commissioning timeline M0 -> M12 */
.timeline{display:grid; grid-template-columns:repeat(6,1fr); margin-top:56px; border:1px solid var(--line); background:rgba(14,20,32,.5)}
.tl-cell{padding:22px 20px 26px; border-right:1px solid var(--line); position:relative; overflow:hidden}
.tl-cell:last-child{border-right:none}
.tl-cell .mono{color:var(--gold); display:block; margin-bottom:10px; font-size:10px}
.tl-cell b{display:block; font-size:15px; font-weight:640; margin-bottom:5px; font-variation-settings:"wdth" 104}
.tl-cell .d{color:var(--slate); font-size:12.5px; display:block; line-height:1.5}
.tl-cell::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi)); opacity:.55}
@media(max-width:1000px){.timeline{grid-template-columns:repeat(3,1fr)}.tl-cell:nth-child(3n){border-right:none}.tl-cell{border-bottom:1px solid var(--line)}}
@media(max-width:620px){.timeline{grid-template-columns:repeat(2,1fr)}.tl-cell:nth-child(3n){border-right:1px solid var(--line)}.tl-cell:nth-child(2n){border-right:none}}

/* Process stepper */
.steps{counter-reset:step; margin-top:48px; border-top:1px solid var(--line)}
.step{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--line)}
.step::before{counter-increment:step; content:"0" counter(step); font-family:"Fragment Mono",monospace; color:var(--gold); font-size:13px; padding-top:4px}
.step b{display:block; font-size:17.5px; font-weight:640; font-variation-settings:"wdth" 104}
.step p{margin:5px 0 0; color:var(--slate); font-size:14.5px; max-width:64ch}

/* FAQ accordion (native details) */
.faq{margin-top:48px; border-top:1px solid var(--line)}
details.qa{border-bottom:1px solid var(--line)}
details.qa summary{cursor:pointer; padding:21px 40px 21px 0; font-size:16.5px; font-weight:600; list-style:none; position:relative; font-variation-settings:"wdth" 103}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--gold); font-size:22px; font-weight:300; transition:transform .3s var(--ease)}
details.qa[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details.qa .a{padding:0 0 24px; color:var(--slate); font-size:15px; max-width:72ch; line-height:1.6}
details.qa .a strong{color:var(--bone); font-weight:600}

/* Region dossier cards */
.dossier{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:56px}
@media(max-width:820px){.dossier{grid-template-columns:1fr}}
.dcard{background:var(--panel); border:1px solid var(--line); padding:36px 34px; position:relative; overflow:hidden}
.dcard::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),transparent)}
.dcard .dhead{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px}
.dcard h3{margin:0; font-size:22px; font-weight:640; font-variation-settings:"wdth" 105}
.chip-status{display:inline-block; font-family:"Fragment Mono",monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-hi); border:1px solid var(--line-gold); padding:6px 10px; border-radius:2px; white-space:nowrap}
.dcard .dsub{color:var(--slate); font-size:13.5px; margin:0 0 6px}
.dcheck{list-style:none; margin:18px 0 26px; padding:0}
.dcheck li{padding:10px 0 10px 28px; position:relative; color:var(--slate); font-size:14px; border-top:1px solid var(--line)}
.dcheck li:first-child{border-top:none}
.dcheck li strong{color:var(--bone); font-weight:600}
.dcheck li::before{content:""; position:absolute; left:2px; top:16px; width:12px; height:6px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg)}

/* Execution photo strip */
.estrip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:56px}
@media(max-width:900px){.estrip{grid-template-columns:repeat(2,1fr)}}
.estrip figure{margin:0; border:1px solid var(--line); position:relative; overflow:hidden; background:var(--panel)}
.estrip img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.estrip figure.contain img{object-fit:contain; padding:14px; box-sizing:border-box}
.estrip figcaption{font-family:"Fragment Mono",monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); padding:12px 14px; border-top:1px solid var(--line)}

/* Footnotes */
.fnotes{margin-top:28px; color:var(--slate); font-size:11.5px; line-height:1.8; max-width:86ch}
.fnotes p{margin:0}
.fnotes .fn{color:var(--gold); font-family:"Fragment Mono",monospace; font-size:10px; margin-right:4px}
sup.fn{color:var(--gold); font-size:.58em; font-family:"Fragment Mono",monospace}

/* Comparison table */
.compare-wrap{overflow-x:auto; margin-top:56px; border:1px solid var(--line)}
table.compare{width:100%; border-collapse:collapse; min-width:680px; background:rgba(14,20,32,.5)}
table.compare th{font-family:"Fragment Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:400; color:var(--slate); text-align:left; padding:16px 20px; border-bottom:1px solid var(--line-gold)}
table.compare th.hl{color:var(--gold-hi)}
table.compare td{padding:15px 20px; border-bottom:1px solid var(--line); font-size:14px; color:var(--slate); vertical-align:top}
table.compare td:first-child{color:var(--bone); font-weight:600; white-space:nowrap}
table.compare td.hl{color:var(--bone); background:rgba(200,155,98,.05)}
table.compare tr:last-child td{border-bottom:none}

/* ---------------- Forms ---------------- */
form.lead-form{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px}
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-family:"Fragment Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate)}
.field input,.field select,.field textarea{
  background:var(--panel); border:1px solid var(--line); color:var(--bone);
  padding:14px 16px; font-size:15px; font-family:inherit; border-radius:2px;
  transition:border-color .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold)}
.form-note{grid-column:1 / -1; color:var(--slate); font-size:12px; margin:4px 0 0}
.form-err{
  grid-column:1 / -1; display:none; border:1px solid rgba(227,93,62,.5); background:rgba(227,93,62,.08);
  color:#E8A395; padding:14px 18px; font-size:14px;
}
.form-err.show{display:block}
.btn:disabled{opacity:.6; cursor:default; transform:none}
.form-ok{
  grid-column:1 / -1; border:1px solid var(--line-gold); background:rgba(200,155,98,.07);
  padding:26px 28px; display:none;
}
.form-ok.show{display:block}
.form-ok b{color:var(--gold-hi)}
.hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}
@media(max-width:700px){form.lead-form{grid-template-columns:1fr}}

/* ---------------- Footer ---------------- */
footer{border-top:1px solid var(--line); padding:64px 0 40px; background:var(--ink)}
.foot{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start}
.foot .lk img{height:30px; margin-bottom:16px}
.foot .lk p{color:var(--slate); font-size:13px; max-width:34ch; margin:0}
.foot nav{display:flex; gap:56px; flex-wrap:wrap}
.foot nav div{display:flex; flex-direction:column; gap:10px}
.foot nav .mono{color:var(--gold); margin-bottom:4px}
.foot nav a{color:var(--slate); font-size:14px; transition:color .25s}
.foot nav a:hover{color:var(--bone)}
.foot-base{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
  color:var(--slate); font-size:12.5px;
}
.foot-base .mono{font-size:10px}

/* ---------------- Subpage hero ---------------- */
.page-hero{padding:calc(var(--nav-h) + 90px) 0 70px; position:relative; overflow:hidden}
.page-hero h1{
  font-size:clamp(38px,5vw,72px); line-height:1.0; font-weight:660; letter-spacing:-.02em;
  margin:0 0 24px; max-width:16ch; font-variation-settings:"wdth" 106; text-wrap:balance;
}
.page-hero h1 .gold{color:var(--gold-hi)}
.page-hero .sub{font-size:17px; color:var(--slate); max-width:54ch; margin:0 0 34px}

/* Leadership */
.leaders{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px}
.leader{background:var(--panel); border:1px solid var(--line); overflow:hidden}
.leader img{width:100%; aspect-ratio:1; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .5s}
.leader:hover img{filter:grayscale(0)}
.leader .pad{padding:20px 22px 24px}
.leader h3{margin:0 0 3px; font-size:17.5px; font-weight:640}
.leader .role{color:var(--gold); font-family:"Fragment Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 12px}
.leader .bio{color:var(--slate); font-size:13px; margin:0; line-height:1.55}
@media(max-width:1000px){.leaders{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.leaders{grid-template-columns:1fr}}

/* Reveal defaults (GSAP takes over; CSS keeps page complete without JS) */
.rv{opacity:1}
html.js .rv{opacity:0; transform:translateY(26px)}
@media(prefers-reduced-motion:reduce){
  html.js .rv{opacity:1; transform:none}
}

/* ---------------- Legal documents ---------------- */
.legal-section{padding-top:20px}
.legal{max-width:78ch}
.legal h2{font-size:clamp(20px,2vw,24px); font-weight:640; letter-spacing:-.01em; margin:48px 0 14px; padding-top:22px; border-top:1px solid var(--line); font-variation-settings:"wdth" 104}
.legal > h2:first-child{margin-top:0}
.legal h3{font-size:16px; font-weight:640; margin:26px 0 8px; color:var(--bone)}
.legal p, .legal li{color:var(--slate); font-size:15px; line-height:1.7}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 14px; padding-left:20px}
.legal li{margin-bottom:7px}
.legal li::marker{color:var(--gold)}
.legal a{color:var(--gold-hi); text-decoration:underline; text-underline-offset:3px}
.legal .caps{font-size:12.5px; letter-spacing:.02em; line-height:1.75}

@media(max-width:560px){.stats.stats-2{grid-template-columns:1fr}.stats.stats-2 .stat{border-right:none}.stats.stats-2 .stat:nth-child(1){border-bottom:1px solid var(--line)}}

/* Jump links land below the fixed nav */
section[id]{scroll-margin-top:var(--nav-h)}

.leader.leader-mono:hover img{filter:grayscale(1) contrast(1.05)}

/* ---------------- Subsidiary brand pages ---------------- */
.brand-hero{position:relative; padding-bottom:100px}
.brand-photo{position:relative; height:clamp(380px,66vh,660px); overflow:hidden; background:var(--panel)}
.brand-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 60%}
.brand-photo::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,13,19,.62) 0%, rgba(9,13,19,0) 30%),
    linear-gradient(0deg, var(--ink) 0%, rgba(9,13,19,0) 34%)}
.brand-id{display:grid; grid-template-columns:minmax(220px,340px) 1fr; gap:64px; align-items:center; margin-top:12px}
.brand-logo{position:relative; display:flex; align-items:center; justify-content:center; background:var(--panel); border:1px solid var(--line); padding:46px 42px}
.brand-logo::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),transparent)}
/* BiXBiT lockup: hexagon mark + wordmark, product line underneath (USA, Prime, AMS) */
.bx-lockup{display:flex; align-items:center; gap:16px}
.bx-mark{width:clamp(48px,4.6vw,62px); height:auto; flex:none}
.bx-word{display:flex; flex-direction:column; line-height:1}
.bx-word b{font-size:clamp(30px,3.1vw,40px); font-weight:800; letter-spacing:-.035em; color:#F8FAFC; font-variation-settings:"wdth" 100}
.bx-word span{margin-top:7px; font-size:clamp(13px,1.2vw,16px); font-weight:500; letter-spacing:.02em; color:var(--slate)}
.brand-meta h1{font-size:clamp(44px,5.6vw,80px); line-height:.98; font-weight:660; letter-spacing:-.022em; margin:0 0 16px; font-variation-settings:"wdth" 106}
.brand-tag{font-size:clamp(18px,1.7vw,21px); line-height:1.45; color:var(--bone); max-width:40ch; margin:0 0 18px}
.brand-parent{color:var(--gold-hi); margin:0}
@media(max-width:820px){
  .brand-hero{padding-bottom:72px}
  .brand-photo{height:clamp(260px,44vh,440px)}
  .brand-id{grid-template-columns:1fr; gap:26px; margin-top:0}
  .brand-logo{max-width:240px; padding:26px 24px}
}

/* Three-up stat band */
.stats.stats-3{grid-template-columns:repeat(3,1fr)}
.stats.stats-3 .stat{border-bottom:none}
.stats.stats-3 .stat:nth-child(2){border-right:1px solid var(--line)}
@media(max-width:700px){
  .stats.stats-3{grid-template-columns:1fr}
  .stats.stats-3 .stat, .stats.stats-3 .stat:nth-child(2){border-right:none; border-bottom:1px solid var(--line)}
  .stats.stats-3 .stat:last-child{border-bottom:none}
}

/* Visit the brand site + social links */
.brand-visit{display:flex; align-items:center; justify-content:space-between; gap:18px 28px; flex-wrap:wrap; margin-top:18px; border:1px solid var(--line-gold); background:rgba(200,155,98,.05); padding:22px 26px}
.brand-visit p{margin:0; font-size:16px; color:var(--bone)}
.brand-visit .acts{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.brand-visit .btn .ext{display:inline-block; width:11px; height:11px; margin-left:8px}
.social{display:flex; gap:8px}
.social a{width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(237,236,230,.24); border-radius:2px; color:var(--slate); transition:border-color .25s, color .25s}
.social a:hover{border-color:var(--gold); color:var(--gold-hi)}
.social svg{width:18px; height:18px; fill:currentColor}