/* Thunder X Titans — thunderxtitans.com
   Fonts: Playfair Display / Space Grotesk / JetBrains Mono
   Palette: gold #C9A227 · cyan #38E1FF · void #05070E
*/
/* ======================================================================
   TOKENS — sampled from the live thunderxtitans.com stylesheet
   ====================================================================== */
:root{
  color-scheme:dark;
  --void:#05070E; --ink:#080B14; --panel:#0C1120; --panel-2:#111829; --panel-3:#161E33;
  --gold:#C9A227; --gold-lt:#E7CC7E; --gold-dim:rgba(201,162,39,.34);
  --cyan:#38E1FF; --cyan-dim:rgba(56,225,255,.42);
  --text:#E9EDF8; --text-2:#AEB7CC; --muted:#7F89A2; --faint:#5A6478;
  --line:rgba(190,208,255,.10); --line-2:rgba(190,208,255,.18);
  --radius:4px; --max:1200px; --nav-h:78px;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,48px);
}
*{ box-sizing:border-box; }
/* NOT smooth: with scroll-behavior:smooth every programmatic scroll turns
   into its own ~300ms animation, and they stack into a page that keeps
   gliding after you stop. overflow-anchor:none stops the browser nudging
   the scroll when something above the viewport reveals or loads. */
html{ scroll-behavior:auto; overflow-anchor:none; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--void); color:var(--text);
  font-family:var(--sans); font-size:16.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100vh; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:#0a0a0a; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.container--narrow{ max-width:920px; }

h1,h2,h3{ font-family:var(--serif); font-weight:700; line-height:1.06; letter-spacing:-.015em; margin:0; }
h1{ font-size:clamp(40px,6.4vw,82px); }
h2{ font-size:clamp(29px,4.2vw,52px); }
h3{ font-size:clamp(18px,2vw,23px); line-height:1.25; }
p{ margin:0; }
.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.eyebrow.cy{ color:var(--cyan); }
.lead{ color:var(--text-2); font-size:clamp(15.5px,1.45vw,18.5px); max-width:64ch; }
.muted{ color:var(--muted); }
.gold{ color:var(--gold); } .cy{ color:var(--cyan); }

/* ======================================================================
   ATMOSPHERE — grain, vignette, cursor spotlight
   ====================================================================== */
#grain{
  position:fixed; inset:0; z-index:6; pointer-events:none; opacity:.035;
  will-change:auto; contain:strict;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
#vignette{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
}
#spotlight{
  position:fixed; top:0; left:0; width:640px; height:640px; z-index:1; pointer-events:none;
  margin:-320px 0 0 -320px; opacity:0; transition:opacity .5s ease;
  background:radial-gradient(circle, rgba(201,162,39,.09), rgba(56,225,255,.03) 42%, transparent 66%);
}
body.has-cursor #spotlight{ opacity:1; }

/* ======================================================================
   LOADER + CINEMATIC INTRO
   ====================================================================== */
@keyframes riseIn{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:none;} }
@keyframes sheen{ 0%{transform:translateX(-120%);opacity:0;} 25%{opacity:1;} 100%{transform:translateX(120%);opacity:0;} }
@keyframes flash{ 0%{opacity:0;} 10%{opacity:.92;} 100%{opacity:0;} }
@keyframes boltPop{ 0%{opacity:0;transform:scale(.7) rotate(-12deg);} 62%{opacity:1;transform:scale(1.07) rotate(3deg);} 100%{opacity:1;transform:none;} }

.loader{ position:fixed; inset:0; z-index:300; }
.loader__curtain{ position:absolute; left:0; right:0; height:50.2%; background:var(--void); z-index:1; will-change:transform; backface-visibility:hidden; transition:transform 1.05s var(--ease); }
.loader__curtain.top{ top:0; border-bottom:1px solid var(--gold-dim); }
.loader__curtain.bot{ bottom:0; border-top:1px solid var(--gold-dim); }
.loader__core{ position:absolute; inset:0; z-index:3; transition:opacity .4s ease; }
.loader__grid{
  position:absolute; inset:-10%;
  background-image:linear-gradient(rgba(190,208,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(190,208,255,.055) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(58% 58% at 50% 50%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(58% 58% at 50% 50%,#000 10%,transparent 78%);
}
.loader__scan{ position:absolute; left:0; right:0; top:0; height:160px; pointer-events:none;
  will-change:transform;
  background:linear-gradient(to bottom,transparent,rgba(56,225,255,.07),transparent);
  animation:scanMove 2.8s var(--ease) infinite; }
@keyframes scanMove{ 0%{ transform:translateY(-160px); } 100%{ transform:translateY(100vh); } }

.loader__stack{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:18px; padding:24px; text-align:center; }
.loader__bolt{ position:relative; width:clamp(84px,12vw,118px); animation:boltPop 1s var(--ease) both .05s; }
.loader__bolt img{ width:100%; }
.loader__bolt .ghost{ filter:grayscale(1) brightness(.26); }
.loader__bolt .fill{ position:absolute; inset:0; clip-path:inset(100% 0 0 0); -webkit-clip-path:inset(100% 0 0 0);
  filter:drop-shadow(0 0 26px rgba(201,162,39,.55)); }
.loader__word{ font-size:clamp(12px,2.1vw,16px); letter-spacing:.44em; text-transform:uppercase; font-weight:700; padding-left:.44em; opacity:0; animation:riseIn .7s var(--ease) forwards .6s; }
.loader__word i{ color:var(--gold); font-style:normal; }
.loader__sub{ font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); opacity:0; animation:riseIn .7s var(--ease) forwards .75s; }

.loader__hud{ position:absolute; left:0; right:0; bottom:34px; display:flex; align-items:center; gap:clamp(12px,2.5vw,24px); padding-inline:var(--pad); opacity:0; animation:riseIn .7s var(--ease) forwards .9s; }
.loader__status{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); min-width:clamp(96px,16vw,190px); }
.loader__bar{ flex:1; height:1px; background:rgba(190,208,255,.14); position:relative; overflow:hidden; }
.loader__bar i{ position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--cyan),var(--gold)); }
.loader__pct{ font-family:var(--serif); font-weight:800; font-size:clamp(26px,3.6vw,44px); line-height:1; color:var(--gold); min-width:2.4ch; text-align:right; }
.loader__pct::after{ content:"%"; font-family:var(--mono); font-weight:400; font-size:11px; color:var(--muted); margin-left:5px; vertical-align:top; }

.loader__skip{ position:absolute; z-index:4; top:30px; right:30px; background:none; border:1px solid var(--line-2); color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:9px 17px; cursor:pointer; transition:color .25s,border-color .25s; }
.loader__skip:hover{ color:var(--text); border-color:var(--gold); }
.loader__flash{ position:absolute; inset:0; z-index:5; background:#fff; opacity:0; pointer-events:none; }
.loader.is-flash .loader__flash{ animation:flash .55s ease-out forwards; }
.loader.is-out{ pointer-events:none; }
.loader.is-out .loader__core{ opacity:0; }
.loader.is-out .loader__skip{ opacity:0; transition:opacity .25s; }
.loader.is-out .loader__curtain.top{ transform:translateY(-100%); }
.loader.is-out .loader__curtain.bot{ transform:translateY(100%); }
.loader.quick .loader__curtain{ transition-duration:.6s; }
.loader.quick .loader__core{ display:none; }
.loader.is-gone{ display:none; }

/* ======================================================================
   PAGE WIPE
   ====================================================================== */
.wipe{ position:fixed; inset:0; z-index:250; pointer-events:none; display:flex; }
.wipe i{ flex:1; background:var(--panel); transform:translateY(101%); will-change:transform; backface-visibility:hidden; }
.wipe i:nth-child(2){ background:var(--panel-3); }
.wipe i:nth-child(3){ background:var(--panel-2); }
.wipe i:nth-child(4){ background:var(--gold); }
.wipe.in i{ animation:wipeIn .4s var(--ease) forwards; }
.wipe.out i{ animation:wipeOut .5s var(--ease) forwards; }
.wipe.in i:nth-child(2),.wipe.out i:nth-child(2){ animation-delay:.04s; }
.wipe.in i:nth-child(3),.wipe.out i:nth-child(3){ animation-delay:.08s; }
.wipe.in i:nth-child(4),.wipe.out i:nth-child(4){ animation-delay:.12s; }
@keyframes wipeIn{ from{transform:translateY(101%);} to{transform:translateY(0);} }
@keyframes wipeOut{ from{transform:translateY(0);} to{transform:translateY(-101%);} }
.wipe__bolt{
  position:absolute; inset:0; display:grid; place-items:center; opacity:0;
}
.wipe__bolt img{ width:64px; filter:drop-shadow(0 0 30px rgba(201,162,39,.6)); }
.wipe.in .wipe__bolt{ animation:boltFlash .55s ease-out forwards .1s; }
@keyframes boltFlash{ 0%{opacity:0;transform:scale(.6);} 50%{opacity:1;transform:scale(1);} 100%{opacity:0;transform:scale(1.25);} }

/* ======================================================================
   NAV
   ====================================================================== */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--cyan),var(--gold)); z-index:120; }
.site-header{ position:fixed; top:0; left:0; right:0; z-index:110; transition:background .35s,border-color .35s; border-bottom:1px solid transparent; }
.site-header.is-stuck{ background:rgba(5,7,14,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ width:30px; height:auto; filter:drop-shadow(0 0 12px rgba(201,162,39,.28)); transition:transform .5s var(--ease); }
.brand:hover img{ transform:rotate(-8deg) scale(1.08); }
.brand b{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.2em; white-space:nowrap; }
.brand b i{ color:var(--gold); font-style:normal; }
.brand small{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-top:2px; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a:not(.btn){ font-size:12.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); position:relative; padding:5px 0; transition:color .25s; }
.nav-links a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .3s var(--ease); }
.nav-links a:not(.btn):hover{ color:#fff; } .nav-links a:not(.btn):hover::after{ width:100%; }
.nav-links a.active{ color:var(--gold); } .nav-links a.active::after{ width:100%; }

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:15px 28px; border-radius:var(--radius); cursor:pointer; border:1px solid transparent; overflow:hidden;
  transition:color .3s,border-color .3s,box-shadow .35s; white-space:nowrap;
}
.btn--gold{ background:linear-gradient(135deg,var(--gold-lt),var(--gold)); color:#0B0E17; }
.btn--gold:hover{ box-shadow:0 12px 34px rgba(201,162,39,.3); }
.btn--gold::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
}
.btn--gold:hover::after{ animation:sheen .8s ease-out; }
.btn--ghost{ border-color:var(--line-2); color:var(--text); }
.btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 0 1px var(--cyan-dim); }
.btn--sm{ padding:11px 20px; font-size:11.5px; }

.nav-toggle{ display:none; width:44px; height:44px; border:1px solid var(--line-2); background:rgba(190,208,255,.04); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.nav-toggle span{ display:block; width:16px; height:1.5px; background:var(--text); transition:transform .3s var(--ease),opacity .2s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
.drawer{ display:none; background:var(--void); border-top:1px solid var(--line); }
.drawer.open{ display:block; }
.drawer a{ display:block; padding:15px var(--pad); font-size:14px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line); color:var(--text-2); }

/* ======================================================================
   WEBGL + PAGE SHELL
   ====================================================================== */
#scene{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.bgfall{ position:fixed; inset:0; z-index:-1; background:radial-gradient(46% 40% at 64% 44%,rgba(22,30,51,.75),transparent 70%),var(--void); }
.veil{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(70% 54% at 18% 46%,rgba(5,7,14,.66),rgba(5,7,14,.22) 58%,transparent 82%),
             linear-gradient(to bottom,rgba(5,7,14,.52),transparent 22%,transparent 58%,var(--void) 97%); }
/* with footage behind it the veil would otherwise double up on the scrim */
html.has-plate .veil{
  background:radial-gradient(66% 52% at 18% 46%,rgba(5,7,14,.52),rgba(5,7,14,.14) 58%,transparent 82%),
             linear-gradient(to bottom,rgba(5,7,14,.40),transparent 22%,transparent 60%,var(--void) 97%);
}
.page{ display:block; position:relative; z-index:2; }
.page.is-active{ display:block; }

/* hero */
.hero{ position:relative; min-height:94svh; display:flex; align-items:center; }
.hero--sub{ min-height:70svh; }
.hero__in{ width:100%; padding-top:134px; padding-bottom:96px; }
.hero__copy{ max-width:790px; }
.hero .eyebrow{ display:block; margin-bottom:20px; opacity:0; }
body.ready .hero .eyebrow{ animation:riseIn .8s var(--ease) forwards .2s; }
.hero h1{ margin-bottom:24px; }
.ch{ display:inline-block; transform:translateY(110%) rotate(6deg); opacity:0; }
body.ready .ch{ animation:chIn .85s var(--ease) forwards; }
@keyframes chIn{ to{ transform:none; opacity:1; } }
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero h1 .line--gold{ color:var(--gold); }
.hero__lead{ margin-bottom:34px; opacity:0; }
body.ready .hero__lead{ animation:riseIn .9s var(--ease) forwards .62s; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; opacity:0; }
body.ready .hero__cta{ animation:riseIn .9s var(--ease) forwards .78s; }
.hero__markets{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:44px; opacity:0; }
body.ready .hero__markets{ animation:riseIn .9s var(--ease) forwards .92s; }
.hero__markets span{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:9px; }
.hero__markets span::before{ content:""; width:4px; height:4px; background:var(--gold); transform:rotate(45deg); }
.scroller{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:grid; justify-items:center; gap:9px; opacity:0; }
body.ready .scroller{ animation:riseIn .8s var(--ease) forwards 1.3s; }
.scroller i{ width:1px; height:42px; background:linear-gradient(to bottom,transparent,var(--gold)); position:relative; overflow:hidden; }
.scroller i::after{ content:""; position:absolute; left:0; width:1px; height:12px; background:var(--cyan); animation:drop 1.8s var(--ease) infinite; }
@keyframes drop{ 0%{top:-14px;opacity:0} 30%{opacity:1} 100%{top:42px;opacity:0} }
.scroller span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }

/* ticker */
.ticker{ position:relative; z-index:2; border-block:1px solid var(--line); background:rgba(12,17,32,.72); overflow:hidden; padding:13px 0; }
.ticker__row{ display:flex; width:max-content; animation:slide 40s linear infinite; }
.ticker:hover .ticker__row{ animation-play-state:paused; }
.ticker__row div{ display:flex; align-items:center; }
.ticker__row b{ font-family:var(--mono); font-weight:400; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-2); padding:0 20px; }
.ticker__row i{ color:var(--gold); font-size:7px; font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ======================================================================
   SECTIONS
   ====================================================================== */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.rv.on{ opacity:1; transform:none; }
/* once the reveal has played, the transform stops transitioning so the
   depth parallax can track the scroll instead of easing 900ms behind it */
.rv.rv-settled{ transition:opacity .9s var(--ease); }
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}

.section{ padding:clamp(76px,10vw,136px) 0; position:relative; background:var(--void); }
.section--glass{ background:rgba(5,7,14,.88); }
.section--alt{ background:linear-gradient(to bottom,var(--void),var(--ink) 42%,var(--void)); }
.section-head{ max-width:730px; margin-bottom:clamp(44px,5.4vw,70px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .eyebrow{ display:block; margin-bottom:16px; }
.section-head h2{ margin-bottom:18px; }

/* gap tracks */
.gap-grid{ display:grid; gap:18px; }
.track{ border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,3vw,34px); background:linear-gradient(145deg,rgba(17,24,41,.8),rgba(8,11,20,.45)); position:relative; overflow:hidden; }
.track--us{ border-color:var(--gold-dim); }
.track--us::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 120% at 90% 50%,rgba(201,162,39,.1),transparent 70%); }
.track__label{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.track__label em{ font-family:var(--mono); font-style:normal; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.track--us .track__label em{ color:var(--gold); }
.chain{ display:flex; align-items:center; flex-wrap:wrap; }
.node{ display:flex; align-items:center; gap:9px; border:1px solid var(--line); padding:9px 15px; font-size:12.5px; font-weight:500; color:var(--text-2); background:rgba(5,7,14,.6); white-space:nowrap; margin:5px 0; opacity:.28; transform:translateY(5px); transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .5s,color .5s; }
.on .node{ opacity:1; transform:none; }
.node em{ font-style:normal; width:5px; height:5px; background:var(--panel-3); transform:rotate(45deg); }
.track--us .node{ color:var(--text); } .track--us .node em{ background:var(--gold); box-shadow:0 0 10px rgba(201,162,39,.8); }
.link{ width:clamp(11px,3vw,28px); height:1px; background:var(--line-2); flex:0 0 auto; }
.track--us .link{ background:linear-gradient(90deg,rgba(201,162,39,.25),rgba(201,162,39,.7)); }
.node--dead{ border-style:dashed; color:var(--faint); background:transparent; }
.track__note{ margin-top:18px; font-size:14px; color:var(--muted); max-width:66ch; }
.track--us .track__note{ color:var(--text-2); }
.on .node:nth-child(1){transition-delay:.05s}.on .node:nth-child(3){transition-delay:.13s}
.on .node:nth-child(5){transition-delay:.21s}.on .node:nth-child(7){transition-delay:.29s}
.on .node:nth-child(9){transition-delay:.37s}.on .node:nth-child(11){transition-delay:.45s}
.on .node:nth-child(13){transition-delay:.53s}.on .node:nth-child(15){transition-delay:.61s}

/* grids + cards */
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.card:hover{ will-change:transform; }
.card{ position:relative; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,36px); overflow:hidden; background:linear-gradient(160deg,rgba(17,24,41,.85),rgba(8,11,20,.5)); transform-style:preserve-3d; transition:border-color .4s,box-shadow .4s; }
.card:hover{ border-color:var(--gold-dim); box-shadow:0 24px 60px rgba(0,0,0,.5); }
.card__glow{ position:absolute; width:340px; height:340px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(201,162,39,.15),transparent 66%); opacity:0; transition:opacity .4s; transform:translate(-50%,-50%); }
.card:hover .card__glow{ opacity:1; }
.icon-badge{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--gold-dim); margin-bottom:22px; color:var(--gold); }
.icon-badge svg{ width:20px; height:20px; fill:currentColor; }
.icon-badge.cy{ border-color:var(--cyan-dim); color:var(--cyan); }
.card h3{ margin-bottom:12px; } .card p{ color:var(--muted); font-size:15px; }
.card ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; }
.card li{ font-size:13px; color:var(--text-2); position:relative; padding-left:15px; }
.card li::before{ content:""; position:absolute; left:0; top:7px; width:5px; height:5px; background:var(--gold); transform:rotate(45deg); }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--ink); padding:clamp(24px,3.2vw,40px) clamp(18px,2.4vw,28px); position:relative; overflow:hidden; }
.stat::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:linear-gradient(90deg,var(--cyan),var(--gold)); transition:width 1.4s var(--ease) .2s; }
.on .stat::after{ width:100%; }
.stat b{ display:block; font-family:var(--serif); font-weight:800; font-size:clamp(34px,4.8vw,60px); line-height:1; background:linear-gradient(160deg,#fff 18%,var(--gold) 108%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:10px; }
.stat span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.stats-note{ margin-top:18px; font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.03em; }

/* case studies */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.filters button{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:11px 20px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; transition:color .25s,border-color .25s,background .25s; }
.filters button:hover{ color:var(--text); border-color:var(--line-2); }
.filters button.on{ color:#0B0E17; background:var(--gold); border-color:var(--gold); }
.cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.case{ border:1px solid var(--line); padding:clamp(24px,3vw,34px); background:linear-gradient(160deg,rgba(17,24,41,.82),rgba(8,11,20,.5)); transition:border-color .35s,transform .35s var(--ease); display:flex; flex-direction:column; }
.case:hover{ border-color:var(--gold-dim); transform:translateY(-4px); }
.case.hide{ display:none; }
.case__tag{ align-self:flex-start; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-dim); padding:5px 12px; margin-bottom:18px; }
.case h3{ margin-bottom:8px; }
.case__meta{ font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-bottom:22px; line-height:1.7; }
.case__stats{ display:flex; flex-wrap:wrap; gap:24px; padding:18px 0; border-block:1px solid var(--line); margin-bottom:20px; }
.case__stats div b{ display:block; font-family:var(--serif); font-size:clamp(22px,2.8vw,30px); color:var(--text); line-height:1.05; }
.case__stats div span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.case ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.case li{ font-size:14px; color:var(--text-2); position:relative; padding-left:16px; }
.case li::before{ content:""; position:absolute; left:0; top:8px; width:4px; height:4px; background:var(--cyan); transform:rotate(45deg); }
.case li b{ color:var(--gold); font-weight:700; }

/* steps */
.steps{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.steps::before{ content:""; position:absolute; left:0; right:0; top:19px; height:1px; background:var(--line); }
.steps::after{ content:""; position:absolute; left:0; top:19px; height:1px; width:var(--fill,0%); background:linear-gradient(90deg,var(--cyan),var(--gold)); box-shadow:0 0 14px rgba(201,162,39,.5); transition:width .1s linear; }
.step{ position:relative; padding-top:50px; }
.step i{ position:absolute; top:13px; left:0; width:13px; height:13px; background:var(--void); border:1px solid var(--line-2); transform:rotate(45deg); transition:border-color .4s,box-shadow .4s,background .4s; }
.step.lit i{ border-color:var(--gold); background:var(--gold); box-shadow:0 0 16px rgba(201,162,39,.8); }
.step b{ display:block; font-family:var(--mono); font-size:11px; color:var(--gold); margin-bottom:8px; letter-spacing:.1em; }
.step h3{ font-size:clamp(16px,1.8vw,20px); margin-bottom:9px; }
.step p{ font-size:13.5px; color:var(--muted); }

/* split rows */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,66px); align-items:center; }
.split + .split{ margin-top:clamp(56px,7.5vw,104px); }
.panel{ border:1px solid var(--line); padding:clamp(24px,3vw,38px); background:linear-gradient(160deg,rgba(17,24,41,.82),rgba(8,11,20,.5)); }
.split h3{ margin-bottom:14px; } .split p{ color:var(--muted); } .split p + p{ margin-top:14px; }
.spec{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.spec li{ font-size:13.5px; color:var(--text-2); position:relative; padding-left:15px; }
.spec li::before{ content:""; position:absolute; left:0; top:8px; width:4px; height:4px; background:var(--gold); transform:rotate(45deg); }
.kv{ display:grid; gap:13px; margin-top:22px; }
.kv div{ display:flex; justify-content:space-between; gap:18px; padding-bottom:11px; border-bottom:1px solid var(--line); font-size:14px; }
.kv span{ color:var(--muted); } .kv b{ font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; }

/* board members */
.members{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.member{ border:1px solid var(--line); background:linear-gradient(160deg,rgba(17,24,41,.85),rgba(8,11,20,.5)); overflow:hidden; transition:border-color .4s; }
.member:hover{ border-color:var(--gold-dim); }
.member__shot{ position:relative; overflow:hidden; aspect-ratio:4/3.4; background:var(--panel); }
.member__shot img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; filter:grayscale(.55) contrast(1.06); transform:scale(1.04); transition:filter .6s var(--ease),transform .9s var(--ease); clip-path:inset(0 0 100% 0); }
.member.on .member__shot img{ clip-path:inset(0 0 0 0); transition:clip-path 1.1s var(--ease),filter .6s,transform .9s; }
.member:hover .member__shot img{ filter:grayscale(0) contrast(1); transform:scale(1); }
.member__shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,7,14,.92),transparent 55%); pointer-events:none; }
.member__role-tag{ position:absolute; left:18px; bottom:16px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-dim); padding:5px 11px; background:rgba(5,7,14,.6); }
.member__body{ padding:clamp(22px,3vw,32px); }
.member__body h3{ margin-bottom:5px; font-size:clamp(22px,2.4vw,28px); }
.member__role{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:18px; }
.member__body p{ color:var(--muted); font-size:14.5px; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.tags span{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); border:1px solid var(--line); padding:6px 11px; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(26px,4vw,48px); align-items:start; }
.contact-item{ display:flex; gap:16px; margin-bottom:26px; }
.contact-item .icon-badge{ margin-bottom:0; flex:0 0 auto; }
.contact-item h3{ font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; font-weight:500; }
.contact-item p{ font-size:16px; } .contact-item a:hover{ color:var(--gold); }
.cal-wrap{ position:relative; border:1px solid var(--line); background:var(--panel); min-height:700px; overflow:hidden; }
.cal-fallback{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; padding:40px; gap:14px; }
.cal-fallback h3{ font-size:20px; } .cal-fallback p{ color:var(--muted); font-size:14px; max-width:36ch; }
.cal-wrap iframe{ position:relative; z-index:2; width:100%; height:700px; border:0; background:transparent; }
.cal-note{ font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:12px; }

.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:22px 0; font-family:var(--serif); font-size:clamp(17px,2vw,21px); display:flex; justify-content:space-between; gap:20px; align-items:center; transition:color .25s; }
.faq summary:hover{ color:var(--gold); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--sans); color:var(--gold); font-size:20px; transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq p{ color:var(--muted); padding-bottom:22px; font-size:14.5px; max-width:74ch; }

/* cta + footer */
.cta{ position:relative; overflow:hidden; border:1px solid var(--gold-dim); padding:clamp(42px,6.5vw,86px) clamp(24px,5vw,66px); text-align:center; background:linear-gradient(150deg,rgba(22,30,51,.7),rgba(8,11,20,.92)); }
.cta::before{ content:""; position:absolute; inset:-40% -10% auto; height:340px; background:radial-gradient(50% 60% at 50% 0%,rgba(201,162,39,.2),transparent 70%); pointer-events:none; }
.cta img{ width:52px; margin:0 auto 22px; filter:drop-shadow(0 0 22px rgba(201,162,39,.45)); animation:hover 4s ease-in-out infinite; }
@keyframes hover{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.cta h2{ margin-bottom:16px; } .cta p{ margin:0 auto 32px; color:var(--muted); max-width:54ch; }
.cta__row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

.site-footer{ position:relative; z-index:2; border-top:1px solid var(--line); padding:64px 0 30px; background:var(--ink); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; margin-bottom:46px; }
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand img{ width:28px; }
.footer-brand b{ font-size:12.5px; letter-spacing:.2em; } .footer-brand b i{ color:var(--gold); font-style:normal; }
.site-footer p{ color:var(--muted); font-size:14px; max-width:40ch; margin-top:16px; }
.site-footer h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; margin:0 0 16px; color:var(--text); }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.site-footer li a{ font-size:14px; color:var(--muted); transition:color .25s; }
.site-footer li a:hover{ color:var(--gold); }
.footer-bottom{ border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:11px; color:var(--faint); }

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1040px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:30px 16px; }
  .steps::before,.steps::after{ display:none; } .step{ padding-top:38px; }
  .split{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  :root{ --nav-h:68px; }
  .nav-links{ display:none; } .nav-toggle{ display:flex; }
  .cases,.members{ grid-template-columns:1fr; }
  .hero__in{ padding-top:108px; padding-bottom:80px; }
  #spotlight{ display:none; }
}
@media (max-width:560px){
  .stats{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; } .spec{ grid-template-columns:1fr; }
  .btn{ width:100%; } .hero__cta{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; animation-delay:0s !important; transition-duration:.001s !important; }
  .ch{ transform:none; opacity:1; } .rv{ opacity:1; transform:none; } .node{ opacity:1; transform:none; }
  .hero__lead,.hero__cta,.hero__markets,.scroller,.hero .eyebrow{ opacity:1; }
  .member__shot img{ clip-path:none; }
}

/* ======================================================================
   V4 — sunburst, fly slots, deeper hovers
   ====================================================================== */
.sunburst{
  position:absolute; inset:-40% -10%; z-index:0; pointer-events:none; opacity:.5;
  background:repeating-conic-gradient(from 0deg at 62% 48%,
    rgba(190,208,255,.055) 0deg 5deg, transparent 5deg 16deg);
  mask-image:radial-gradient(52% 52% at 62% 48%, #000 12%, transparent 74%);
  -webkit-mask-image:radial-gradient(52% 52% at 62% 48%, #000 12%, transparent 74%);
  will-change:transform; backface-visibility:hidden;
  animation:spin 140s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.section--fly{ background:transparent; }
.section--fly::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, var(--void), rgba(5,7,14,.55) 22%, rgba(5,7,14,.55) 78%, var(--void));
}
.section--fly > .container{ position:relative; z-index:2; }
.svc{ display:flex; flex-direction:column; }
.fly-slot{
  position:relative; height:clamp(120px,15vw,178px); display:grid; place-items:center;
  margin-bottom:-1px;
}
.slot-ring{
  width:clamp(74px,9vw,104px); aspect-ratio:1; border:1px solid var(--line);
  transform:rotate(45deg) scale(.7); opacity:0;
  transition:opacity .9s var(--ease), transform .9s var(--ease), border-color .5s;
}
.svc.on .slot-ring{ opacity:1; transform:rotate(45deg) scale(1); }
.svc:hover .slot-ring{ border-color:var(--gold); transform:rotate(135deg) scale(1.08); }
.svc .card{ flex:1; }
.svc:hover .card{ border-color:var(--gold-dim); }

/* heading rule that draws in */
.section-head h2{ position:relative; display:inline-block; }
.section-head h2::after{
  content:""; position:absolute; left:0; bottom:-14px; height:1px; width:0;
  background:linear-gradient(90deg,var(--gold),transparent);
  transition:width 1.1s var(--ease) .25s;
}
.rv.on .section-head h2::after,.section-head.rv.on h2::after{ width:78px; }

/* flowing chain */
.track--us .link{
  background:linear-gradient(90deg,rgba(201,162,39,.18) 0%,var(--gold) 45%,rgba(201,162,39,.18) 90%);
  background-size:220% 100%; animation:flow 2.6s linear infinite;
}
@keyframes flow{ from{ background-position:180% 0; } to{ background-position:-40% 0; } }
.track--us .chain .link:nth-of-type(1){animation-delay:0s}
.track--us .chain .link:nth-of-type(2){animation-delay:.13s}
.track--us .chain .link:nth-of-type(3){animation-delay:.26s}
.track--us .chain .link:nth-of-type(4){animation-delay:.39s}
.track--us .chain .link:nth-of-type(5){animation-delay:.52s}
.track--us .chain .link:nth-of-type(6){animation-delay:.65s}
.track--us .chain .link:nth-of-type(7){animation-delay:.78s}
.track--us .node{ transition:opacity .5s var(--ease),transform .25s var(--ease),border-color .3s,color .3s,background .3s; }
.track--us .node:hover{ border-color:var(--gold); background:rgba(201,162,39,.09); transform:translateY(-3px); }

/* hovers: cards, icons, cases, stats, steps, filters, tags, footer, faq */
.card{ transition:border-color .4s,box-shadow .4s,transform .35s var(--ease); }
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%);
  transform:translateX(-120%); transition:opacity .2s;
}
.card:hover::after{ opacity:1; animation:sheen .9s var(--ease); }
.icon-badge{ transition:transform .5s var(--ease),border-color .4s,color .4s,background .4s; }
.card:hover .icon-badge,.contact-item:hover .icon-badge{ transform:rotate(45deg) scale(1.08); border-color:var(--gold); background:rgba(201,162,39,.08); }
.card:hover .icon-badge svg,.contact-item:hover .icon-badge svg{ transform:rotate(-45deg); transition:transform .5s var(--ease); }

.case{ position:relative; overflow:hidden; }
.case::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--gold)); transition:width .55s var(--ease);
}
.case:hover::after{ width:100%; }
.case__stats div b{ transition:color .35s,transform .35s var(--ease); display:block; }
.case:hover .case__stats div b{ color:var(--gold); transform:translateY(-2px); }
.case__tag{ transition:background .35s,color .35s; }
.case:hover .case__tag{ background:var(--gold); color:#0B0E17; }

.stat{ transition:background .4s; }
.stat:hover{ background:var(--panel); }
.stat b{ transition:transform .45s var(--ease); }
.stat:hover b{ transform:translateY(-3px) scale(1.02); }

.step{ transition:transform .35s var(--ease); }
.step:hover{ transform:translateY(-4px); }
.step:hover i{ border-color:var(--gold); box-shadow:0 0 18px rgba(201,162,39,.7); }
.step h3{ transition:color .3s; } .step:hover h3{ color:var(--gold); }

.filters button{ position:relative; overflow:hidden; z-index:1; }
.filters button::before{
  content:""; position:absolute; inset:0; background:var(--gold); transform:translateY(101%);
  transition:transform .35s var(--ease); z-index:-1;
}
.filters button:hover::before{ transform:translateY(0); }
.filters button:hover{ color:#0B0E17; border-color:var(--gold); }
.filters button.on::before{ transform:translateY(0); }

.tags span{ transition:border-color .3s,color .3s,transform .3s var(--ease); }
.tags span:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.member{ transition:border-color .4s,transform .45s var(--ease); }
.member:hover{ transform:translateY(-5px); }

.site-footer li a{ display:inline-block; transition:color .25s,transform .3s var(--ease); }
.site-footer li a:hover{ transform:translateX(5px); }
.faq summary{ padding-left:0; transition:color .25s,padding-left .35s var(--ease); }
.faq summary:hover{ padding-left:10px; }
.panel{ transition:border-color .4s,transform .4s var(--ease); }
.panel:hover{ border-color:var(--gold-dim); transform:translateY(-3px); }
.contact-item{ transition:transform .35s var(--ease); }
.contact-item:hover{ transform:translateX(5px); }
.nav-links a:not(.btn):hover{ letter-spacing:.1em; }
.nav-links a:not(.btn){ transition:color .25s,letter-spacing .3s var(--ease); }
.brand:hover b i{ color:var(--cyan); transition:color .3s; }
.hero__markets span{ transition:color .3s,transform .3s var(--ease); }
.hero__markets span:hover{ color:var(--gold); transform:translateY(-2px); }

@media (max-width:1040px){ .fly-slot{ height:clamp(110px,22vw,150px); } }
@media (prefers-reduced-motion:reduce){
  .sunburst,.track--us .link{ animation:none !important; }
  .slot-ring{ opacity:1; transform:rotate(45deg); }
}


/* ======================================================================
   V7 — word-safe headlines + classified board files
   ====================================================================== */
.wd{ display:inline-block; white-space:nowrap; }
.sp{ white-space:pre; }
h1,h2,h3,p,li,.lead{ hyphens:none; -webkit-hyphens:none; overflow-wrap:normal; word-break:normal; }
.site-footer li a,.contact-item p a{ overflow-wrap:anywhere; }

.files-hud{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border:1px solid var(--line); padding:14px 18px; margin-bottom:20px;
  background:linear-gradient(90deg,rgba(17,24,41,.85),rgba(8,11,20,.45));
}
.files-hud__left,.files-hud__right{ display:flex; align-items:center; gap:14px; }
.files-hud__dot{ width:7px; height:7px; background:var(--cyan); border-radius:50%; animation:blip 1.6s ease-in-out infinite; }
.files-hud__label,.files-hud__count{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.files-hud__count b{ color:var(--gold); font-weight:500; }
.files-hud__btn{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:9px 15px; border:1px solid var(--gold-dim); background:transparent; color:var(--gold);
  cursor:pointer; transition:background .3s,color .3s,transform .25s var(--ease);
}
.files-hud__btn:hover{ background:var(--gold); color:#0B0E17; transform:translateY(-2px); }
.files-hud__btn[disabled]{ opacity:.3; pointer-events:none; }

.member{ position:relative; }
.member__shot img.base,.member__shot img.clear{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.member.is-locked .member__shot{ cursor:crosshair; }
.member.is-locked .member__shot img.base{
  filter:blur(17px) grayscale(1) brightness(.42) contrast(1.25);
  transform:scale(1.14); transition:filter .9s var(--ease),transform 1s var(--ease);
}
.member.is-locked .member__shot img.clear{
  -webkit-mask-image:radial-gradient(circle 96px at var(--mx,-999px) var(--my,-999px), #000 34%, transparent 72%);
  mask-image:radial-gradient(circle 96px at var(--mx,-999px) var(--my,-999px), #000 34%, transparent 72%);
  filter:grayscale(.3);
}
.member:not(.is-locked) .member__shot img.base{ filter:grayscale(.5) contrast(1.05); transform:scale(1.02); }
.member:not(.is-locked):hover .member__shot img.base{ filter:grayscale(0); transform:scale(1); }
.member:not(.is-locked) .member__shot img.clear{ display:none; }
.noise{
  position:absolute; inset:0; pointer-events:none; opacity:.9; transition:opacity .8s var(--ease);
  background:repeating-linear-gradient(to bottom, rgba(5,7,14,.55) 0 2px, transparent 2px 4px),
             repeating-linear-gradient(to right, rgba(56,225,255,.05) 0 1px, transparent 1px 7px);
}
.member:not(.is-locked) .noise{ opacity:0; }
.sweep{
  position:absolute; left:0; right:0; height:90px; top:-90px; pointer-events:none; opacity:0;
  background:linear-gradient(to bottom,transparent,rgba(56,225,255,.4),rgba(255,255,255,.55),rgba(56,225,255,.4),transparent);
}
.member.is-scanning .sweep{ animation:sweepDown 1.1s var(--ease) forwards; }
@keyframes sweepDown{ 0%{ top:-90px; opacity:1; } 100%{ top:100%; opacity:0; } }
.stamp{
  position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-11deg) scale(1.6);
  font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); border:2px solid var(--gold); padding:9px 18px; opacity:0; pointer-events:none;
  background:rgba(5,7,14,.55);
}
.member.is-stamping .stamp{ animation:stampIn 1.5s var(--ease) forwards; }
@keyframes stampIn{
  0%{ opacity:0; transform:translate(-50%,-50%) rotate(-11deg) scale(1.8); }
  18%{ opacity:1; transform:translate(-50%,-50%) rotate(-11deg) scale(1); }
  70%{ opacity:1; } 100%{ opacity:0; }
}
.member.is-locked .member__bio,.member.is-locked .tags{ filter:blur(4.5px); opacity:.3; user-select:none; }
.member__bio,.tags{ transition:filter .9s var(--ease),opacity .9s var(--ease); }
.member.is-locked h3{ color:var(--gold); font-family:var(--mono); font-size:clamp(17px,2vw,22px); letter-spacing:.06em; }
.member h3{ transition:color .5s; }
.decrypt{
  margin-top:22px; width:100%; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; padding:14px 18px; border:1px solid var(--gold-dim); background:transparent;
  color:var(--gold); cursor:pointer; position:relative; overflow:hidden;
  transition:color .3s,border-color .3s,transform .25s var(--ease);
}
.decrypt::before{ content:""; position:absolute; inset:0; background:var(--gold); transform:translateY(101%); transition:transform .35s var(--ease); z-index:-1; }
.decrypt:hover{ color:#0B0E17; border-color:var(--gold); transform:translateY(-2px); }
.decrypt:hover::before{ transform:translateY(0); }
.member:not(.is-locked) .decrypt{ display:none; }

.cleared{
  display:none;
  margin-top:22px; border:1px solid var(--gold-dim); padding:clamp(26px,4vw,44px); text-align:center;
  background:radial-gradient(70% 120% at 50% 0%,rgba(201,162,39,.12),transparent 70%),rgba(8,11,20,.7);
}
.cleared.show{ display:block; animation:clearedIn .8s var(--ease) both; }
@keyframes clearedIn{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.cleared__eyebrow{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); margin-bottom:14px; }
.cleared h3{ margin-bottom:12px; }
.cleared p{ color:var(--muted); max-width:52ch; margin:0 auto 26px; }
@media (prefers-reduced-motion:reduce){
  .member.is-locked .member__shot img.base{ filter:none; transform:none; }
  .member.is-locked .member__bio,.member.is-locked .tags{ filter:none; opacity:1; }
  .noise{ opacity:0; }
}


/* ======================================================================
   V8 — proof screenshots, lightbox, resilient booking embed
   ====================================================================== */
.proof{ margin:22px 0 0; padding:0; display:none; cursor:zoom-in; border:1px solid var(--line); background:var(--ink); }
.proof img{ width:100%; height:auto; display:block; filter:saturate(.9) contrast(1.02); transition:filter .4s, transform .6s var(--ease); }
.proof:hover img{ filter:none; }
.proof figcaption{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 13px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.proof figcaption em{ font-style:normal; color:var(--gold); }

.lightbox{
  position:fixed; inset:0; z-index:400; display:none; place-items:center; padding:clamp(16px,4vw,54px);
  background:rgba(3,5,10,.93); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.lightbox.open{ display:grid; animation:lbIn .3s var(--ease); }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox__inner{ margin:0; max-width:1100px; width:100%; border:1px solid var(--gold-dim); background:var(--ink); }
.lightbox__inner img{ width:100%; height:auto; max-height:78vh; object-fit:contain; display:block; background:#0B0E17; }
.lightbox__inner figcaption{ padding:14px 18px; border-top:1px solid var(--line); font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.lightbox__close{
  position:absolute; top:22px; right:26px; width:44px; height:44px; line-height:1;
  font-size:26px; color:var(--text); background:transparent; border:1px solid var(--line-2); cursor:pointer;
  transition:border-color .25s,color .25s,transform .25s var(--ease);
}
.lightbox__close:hover{ border-color:var(--gold); color:var(--gold); transform:rotate(90deg); }

#calWidget{ position:relative; z-index:2; min-width:300px; height:700px; }
#calWidget iframe{ width:100%; height:700px; border:0; display:block; }
.cal-wrap.cal-ok .cal-fallback{ display:none; }
.cal-note{ min-height:1em; }

/* ======================================================================
   V9 — legal pages
   ====================================================================== */
.legal{ max-width:78ch; }
.legal__meta{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding-bottom:22px; margin-bottom:30px; border-bottom:1px solid var(--line); }
.legal__intro{ font-size:clamp(16px,1.5vw,18.5px); color:var(--text-2); margin-bottom:12px; }
.legal h2{
  font-size:clamp(21px,2.4vw,28px); margin:46px 0 14px; padding-top:22px;
  border-top:1px solid var(--line); color:var(--text);
}
.legal h2:first-of-type{ border-top:0; padding-top:0; }
.legal h3{ font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.02em;
  margin:26px 0 10px; color:var(--gold); }
.legal p{ color:var(--muted); margin-bottom:14px; }
.legal ul{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:9px; }
.legal li{ font-size:15px; color:var(--text-2); position:relative; padding-left:16px; }
.legal li::before{ content:""; position:absolute; left:0; top:9px; width:4px; height:4px; background:var(--gold); transform:rotate(45deg); }
.legal a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--gold); }
.legal strong{ color:var(--text); font-weight:700; }
.legal__callout{
  border:1px solid var(--gold-dim); border-left-width:3px; padding:18px 20px; margin:20px 0 22px;
  background:rgba(201,162,39,.06); color:var(--text-2) !important;
}
.todo{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:#0B0E17; background:var(--gold); padding:2px 8px; border-radius:2px; font-weight:500;
}
.footer-legal{ display:flex; gap:18px; }
.footer-legal a{ color:var(--muted); transition:color .25s; }
.footer-legal a:hover{ color:var(--gold); }
@media print{
  .site-header,.site-footer,.loader,.wipe,.progress,#scene,.veil,.bgfall,#grain,#vignette,
  #spotlight,.hero__cta,.lightbox,#globalCta{ display:none !important; }
  body{ background:#fff; color:#111; }
  .legal a{ color:#111; }
  .todo{ background:#ffe9a8; color:#111; }
}

/* ======================================================================
   MISSION CONTROL — panels above, planet below as the dial
   The globe is the control surface: its Y rotation is DERIVED from the
   deck position, so dragging the planet spins it and slides the panels
   as one motion. Slot geometry follows the reference deck: slot 0 faces
   the viewer, neighbours rotate away and recede in Z.
   ====================================================================== */
.cs-section{ padding-bottom:clamp(60px,8vw,110px); }
.cs-stage{
  position:relative; width:100%;
  margin-top:clamp(18px,2.6vw,34px);
  display:grid; grid-template-rows:1fr auto; gap:clamp(10px,1.6vw,22px);
}

/* ---------- the deck of photos ---------- */
.cs-deck{
  position:relative;
  min-height:clamp(565px,64vh,660px);
  perspective:1700px; perspective-origin:50% 46%;
}
.deck-space{ position:absolute; inset:0; transform-style:preserve-3d; }
.deck-panel{
  position:absolute; left:50%; top:50%; height:auto; max-height:100%;
  width:min(745px,84vw);
  transform-style:preserve-3d; will-change:transform,opacity;
  border:1px solid var(--line); background:linear-gradient(165deg,rgba(17,24,41,.96),rgba(8,11,20,.93));
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateX(-50%) translateY(-50%) translateZ(-900px);
  backface-visibility:hidden;
}
.deck-panel.near{ cursor:pointer; }
.deck-panel.active{ cursor:default; border-color:var(--gold-dim); }

.deck-shots{ position:relative; flex:0 0 auto; border-bottom:1px solid var(--line); background:#0a0d16; }
.shot-tabs{ position:absolute; z-index:3; top:10px; right:10px; display:flex; gap:5px; }
.shot-tab{
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 11px; border:1px solid var(--line-2); background:rgba(5,7,14,.85); color:var(--text-2);
  cursor:pointer; transition:background .25s,color .25s,border-color .25s;
}
.shot-tab:hover{ border-color:var(--gold); color:var(--gold); }
.shot-tab.on{ background:var(--gold); border-color:var(--gold); color:#0B0E17; }
.shot-frames{ position:relative; }
.shot{ margin:0; display:none; cursor:zoom-in; }
.shot.on{ display:block; animation:shotIn .45s var(--ease); }
@keyframes shotIn{ from{ opacity:0; } to{ opacity:1; } }
.shot img{
  width:100%; height:auto; max-height:clamp(150px,17vh,186px);
  object-fit:cover; object-position:center top; display:block;
}
.shot-frames::after{
  content:""; position:absolute; left:0; right:0; bottom:31px; height:30px;
  pointer-events:none; background:linear-gradient(to bottom,transparent,rgba(10,13,22,.92));
}
.shot figcaption{
  padding:8px 13px; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px; align-items:center;
}
.shot figcaption::after{ content:"Enlarge"; color:var(--gold); flex:0 0 auto; }

.deck-body{
  padding:clamp(14px,1.8vw,20px); overflow:auto; flex:1 1 auto;
  mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);
}
.deck-body::-webkit-scrollbar{ width:4px; }
.deck-body::-webkit-scrollbar-thumb{ background:var(--line-2); }
.deck-body .case__tag{ display:inline-block; margin-bottom:8px; }
.deck-body h3{ margin-bottom:5px; font-size:clamp(19px,2.2vw,25px); }
.deck-body .case__meta{ margin-bottom:11px; }
.deck-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-bottom:12px;
}
.deck-stats div{ background:var(--ink); padding:9px 8px; text-align:center; }
.deck-stats b{
  display:block; font-family:var(--serif); font-weight:800; font-size:clamp(17px,2.1vw,24px);
  line-height:1.05; margin-bottom:4px;
  background:linear-gradient(160deg,#fff 20%,var(--gold) 110%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.deck-stats span{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.deck-list{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.deck-list li{ font-size:13.5px; color:var(--text-2); position:relative; padding-left:16px; line-height:1.55; }
.deck-list li::before{ content:""; position:absolute; left:0; top:9px; width:4px; height:4px; background:var(--cyan); transform:rotate(45deg); }
.deck-list li b{ color:var(--gold); font-weight:700; }

/* ---------- the planet, sitting under the photos as the dial ---------- */
.cs-dial{
  position:relative; display:grid; justify-items:center; justify-content:center;
  grid-template-columns:auto auto auto; align-items:center;
  gap:clamp(12px,2vw,26px);
}
.cs-globe{ position:relative; }
.globe-core{ position:relative; width:clamp(158px,17vw,198px); aspect-ratio:1; }
#globeCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:pan-y; }
#globeCanvas.is-drag{ cursor:grabbing; }
#globeCanvas.is-hot{ cursor:pointer; }
.globe-labels{ position:absolute; inset:-54px -70px; pointer-events:none; }
.glabel{
  position:absolute; transform:translate(-50%,-50%); white-space:nowrap;
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); padding:3px 8px; border:1px solid var(--line);
  background:rgba(5,7,14,.82); transition:color .3s,border-color .3s,background .3s;
}
.glabel.on{ color:#0B0E17; background:var(--gold); border-color:var(--gold); }

/* a ring under the planet so it reads as a dial rather than a decoration */
.cs-globe::after{
  content:""; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  width:72%; height:10px; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(201,162,39,.3),transparent 72%);
}

.dial-arrow{
  width:46px; height:46px; display:grid; place-items:center;
  font-size:15px; color:var(--text-2);
  border:1px solid var(--line); background:transparent; cursor:pointer;
  transition:color .25s,border-color .25s,background .25s,transform .25s var(--ease);
}
.dial-arrow:hover{ color:#0B0E17; background:var(--gold); border-color:var(--gold); transform:translateY(-2px); }

.dial-readout{
  grid-column:1 / -1; display:grid; justify-items:center; gap:9px; margin-top:4px;
}
.deck-dots{ display:flex; gap:8px; }
.deck-dots button{
  width:7px; height:7px; padding:0; border:0; background:var(--line-2); transform:rotate(45deg);
  cursor:pointer; transition:background .3s,transform .3s var(--ease);
}
.deck-dots button:hover{ background:var(--cyan); }
.deck-dots button.on{ background:var(--gold); transform:rotate(45deg) scale(1.5); }
.dial-now{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-2); display:flex; gap:10px; align-items:baseline;
}
.dial-now b{ color:var(--gold); font-weight:500; }
.hud-hint{
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); transition:opacity .5s;
}

@media (max-width:860px){
  .cs-stage{ display:block; }
  .cs-deck{ min-height:0; perspective:none; }
  .deck-space{ position:relative; inset:auto; transform-style:flat; }
  .deck-panel{
    position:relative; left:auto; top:auto; width:100%; height:auto; max-height:none;
    opacity:1 !important; transform:none !important; margin-bottom:0; display:none;
  }
  .deck-panel.active{ display:flex; }
  .deck-body{ mask-image:none; -webkit-mask-image:none; overflow:visible; }
  .shot img{ max-height:none; object-fit:contain; }
  .cs-dial{ margin-top:22px; gap:12px; }
  .globe-core{ width:clamp(170px,46vw,210px); }
  .deck-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce){
  .deck-panel{ transition:none !important; }
}

/* ---------- cinematic layer ---------- */
/* (the has-smooth rules were dead: nothing ever set that class) */
/* deliberately NO will-change here: promoting these to their own layer is
   what let the browser resample the text instead of redrawing it sharp */
[data-depth]{ transform:none; }
@media (prefers-reduced-motion:reduce){ [data-depth]{ transform:none !important; } }

@media (max-height:780px) and (min-width:861px){
  .cs-stage{ min-height:760px; }
  .shot img{ max-height:158px; }
  .deck-body .case__meta{ margin-bottom:9px; }
}

/* ----------------------------------------------------------------------
   Horizontal clipping. The hero sunburst, the ticker and the deck's side
   panels all extend past the viewport by design. `clip` contains them
   without turning the page into a scroll container the way `hidden` would,
   so position:sticky and the fixed nav keep working.
   ---------------------------------------------------------------------- */
html{ overflow-x:clip; }
body{ overflow-x:clip; }
.hero{ overflow-x:clip; }
.cs-stage{ overflow-x:clip; }
@supports not (overflow-x:clip){
  html,body{ overflow-x:hidden; }
}

@media (max-height:800px) and (min-width:861px){
  .cs-deck{ min-height:580px; }
  .shot img{ max-height:144px; }
  .globe-core{ width:clamp(150px,15vw,176px); }
}

/* ======================================================================
   FILM LAYER — the cinematic backdrop
   One fixed plate behind the whole site. Two video slots cross-fade into
   each other; the WebGL scene sits on top of them. Everything is driven by
   scroll-derived custom properties, so the motion is CSS and the JS only
   writes numbers. The push-in is deliberately tiny (1.5% to 3.3% across
   the whole page) because a locked-off camera drifts, it does not zoom.
   ====================================================================== */
:root{
  --scroll:0;
  --film-scale:1.015;
  --film-x:0px;
  --film-y:0px;
  --film-dim:0.62;
  --hero-opacity:1;
}
#film{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:radial-gradient(46% 40% at 64% 44%,rgba(22,30,51,.75),transparent 70%),var(--void);
}
.film-plate{
  position:absolute; inset:-3%;
  transform:scale(var(--film-scale)) translate3d(var(--film-x),var(--film-y),0);
  transform-origin:58% 46%;
  will-change:transform;
}
.film-plate video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:#05070E;
  /* grade is baked into the file; .film-dim handles legibility */
  opacity:0; transition:opacity 1.1s var(--ease);
}
.film-plate video.on{ opacity:1; }
/* the plate is a backdrop, not the subject: hold it well under the type */
.film-dim{
  position:absolute; inset:0; pointer-events:none;
  /* dark enough on the left for the headline, open on the right so the
     footage is actually visible rather than implied */
  background:
    radial-gradient(58% 52% at 20% 46%, rgba(5,7,14,.86), rgba(5,7,14,.30) 56%, transparent 80%),
    linear-gradient(to bottom, rgba(5,7,14,.70), rgba(5,7,14,.10) 24%, rgba(5,7,14,.14) 60%, rgba(5,7,14,.88));
  opacity:var(--film-dim);
}
html.has-film .bgfall{ display:none; }

/* ---------- camera HUD ---------- */
.hud{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  height:var(--hud-h); padding:0 clamp(16px,3vw,40px);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); pointer-events:none;
  background:rgba(5,7,14,.93);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  opacity:0; transition:opacity .6s var(--ease);
}
:root{ --hud-h:40px; }
/* nothing should end up permanently parked behind the chrome */
.site-footer{ padding-bottom:calc(30px + var(--hud-h)); }
body.ready .hud{ opacity:1; }
.hud > *{ pointer-events:auto; }
.hud__set{ display:flex; align-items:center; gap:clamp(12px,2vw,26px); }
.hud__btn{
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; letter-spacing:.2em; text-transform:uppercase;
  background:none; border:0; color:var(--muted); cursor:pointer; padding:6px 0;
  transition:color .25s;
}
.hud__btn:hover{ color:var(--gold); }
.hud__btn i{ display:block; width:9px; height:9px; border:1px solid currentColor; flex:0 0 auto; }
.hud__btn[aria-pressed="true"] i{ background:var(--gold); border-color:var(--gold); }
.hud__read{ display:flex; align-items:center; gap:10px; }
.hud__read b{ color:var(--gold); font-weight:500; }
.hud__scroll{ display:flex; align-items:center; gap:9px; transition:opacity .5s; }
.hud__scroll span{ display:block; width:1px; height:14px; background:linear-gradient(to bottom,transparent,var(--gold)); }
html.scrolled .hud__scroll{ opacity:0; }

@media (max-width:860px){
  :root{ --hud-h:36px; }
  .hud{ font-size:8px; padding:0 12px; gap:8px; }
  .hud__scroll{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .film-plate{ transform:none !important; }
  .film-plate video{ display:none; }
}
html.motion-off .film-plate video{ opacity:0 !important; }
html.motion-off #grain{ display:none; }
html.motion-off .ticker__row{ animation-play-state:paused; }
html.motion-off .sunburst{ animation-play-state:paused; }
html.motion-off .scroller i::after{ animation:none; }
html.motion-off .hud-coord::before{ animation:none; }

/* ----------------------------------------------------------------------
   The film plate sits at z-index -1, which puts it behind body's own
   background. Because the critical CSS gives html a background, body's no
   longer propagates to the canvas and paints over the plate instead. Keep
   the base colour on html and let body be transparent so the plate shows.
   ---------------------------------------------------------------------- */
html{ background:var(--void); }
body{ background:transparent; }

/* ----------------------------------------------------------------------
   Legibility over footage. Only applied when a plate is actually present,
   so the no-video build keeps its original lighter panels.
   ---------------------------------------------------------------------- */
html.has-plate .film-dim{
  background:
    radial-gradient(64% 58% at 23% 49%, rgba(5,7,14,.92), rgba(5,7,14,.40) 58%, transparent 84%),
    linear-gradient(to bottom, rgba(5,7,14,.74), rgba(5,7,14,.12) 24%, rgba(5,7,14,.18) 58%, rgba(5,7,14,.90));
}
html.has-plate .card,
html.has-plate .case,
html.has-plate .panel,
html.has-plate .member,
html.has-plate .deck-panel,
html.has-plate .info__block,
html.has-plate .track{
  background:linear-gradient(160deg,rgba(13,19,34,.95),rgba(6,9,17,.90));
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
html.has-plate .stat,
html.has-plate .principle,
html.has-plate .deck-stats div{ background:rgba(8,11,20,.94); }
html.has-plate .section--glass{ background:rgba(5,7,14,.72); }

/* ======================================================================
   CASE STUDIES — fit the deck and the dial in one viewport
   The planet is the control for the photos, so both have to be on screen
   together or the interaction is invisible. The stage was 867–969px tall
   against a 78px fixed nav, which never fits a laptop. It now sizes to the
   viewport: the stage takes the height, the grid's 1fr row gives whatever
   is left to the deck, and the screenshot and globe scale with it.
   ====================================================================== */
@media (min-width:861px){
  .cs-stage{
    --globe:clamp(150px,min(21vw,19vh),250px);
    height:calc(100vh - 78px - 34px);
    min-height:520px; max-height:980px;
    gap:clamp(8px,1.2vh,22px);
  }
  .cs-deck{ min-height:0; }
  .globe-core{ width:var(--globe); }
  .shot img{ max-height:clamp(120px,17vh,218px); }
}

/* Short viewports: buy back the ~70–150px the panel body was scrolling.
   Trimmed from the screenshot cap, the padding and the type, in that order,
   because the figures and the bullets are the part people actually read. */
@media (min-width:861px) and (max-height:1000px){
  .shot img{ max-height:clamp(104px,14.5vh,200px); }
  .shot figcaption{ padding:6px 12px; }
  .deck-body{ padding:clamp(10px,1.5vh,18px) clamp(14px,1.6vw,20px); }
  .deck-body h3{ font-size:clamp(17px,2.4vh,25px); margin-bottom:3px; }
  .deck-body .case__meta{ margin-bottom:8px; }
  .deck-stats{ margin-bottom:9px; }
  .deck-stats div{ padding:7px 8px; }
  .deck-stats b{ font-size:clamp(16px,2.3vh,24px); margin-bottom:2px; }
  .deck-list{ gap:5px; }
  .deck-list li{ font-size:13px; line-height:1.45; }
}

/* ======================================================================
   CASE STUDY PANELS — show the whole screenshot

   The screenshot was object-fit:cover with a height cap, so the bottom of
   every Ads Manager table was sliced off and a gradient hid the cut. The
   point of the panel is the screenshot, so: no crop, no cap.

   On a wide screen the panel turns side by side, which is the only way to
   give the image real width and still keep the planet on screen underneath.
   The image box takes the full height of the column and the image is
   contained inside it, so the whole frame is always visible and as large as
   the box allows, whatever the viewport.
   ====================================================================== */
.shot-frames::after{ display:none; }              /* the gradient hid the crop */

@media (min-width:1000px){
  .deck-panel{
    width:min(1180px,92vw);
    flex-direction:row; align-items:stretch;
    height:auto; max-height:100%;                   /* hug the image, no empty band */
  }
  .deck-shots{
    flex:0 0 63%; min-height:0;
    display:flex; flex-direction:column;
    border-bottom:0; border-right:1px solid var(--line);
  }
  .shot-frames{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  .shot{ flex:1 1 auto; min-height:0; }
  .shot.on{ display:flex; flex-direction:column; justify-content:center; }
  .shot img{
    flex:0 0 auto;                                  /* let the aspect box rule, not flex stretch */
    width:100%; height:auto;
    aspect-ratio:1500/760;                          /* one box for every shot, so
                                                       switching tabs does not jump */
    max-height:none;                                /* beats the short-viewport caps */
    object-fit:contain; object-position:center;
    background:#070a12;
  }
  .shot figcaption{ flex:0 0 auto; }
  .deck-body{ flex:1 1 40%; min-width:0; }
  .deck-stats{ grid-template-columns:repeat(2,1fr); }
}

/* Narrow screens keep the stacked panel, but still uncropped. */
@media (max-width:999px){
  .shot img{ max-height:none; height:auto; object-fit:contain; object-position:center; }
}