/* ==========================================================================
   Towers Passport — landing page system
   Mobile-first. Cobalt system, yellow accent only.
   ========================================================================== */
:root{
  /* Nine-swatch ScanBuild1 palette (working draft) */
  --cobalt:#004AAD;   /* 1 Cobalt Blue   — brand voice */
  --deep:#003070;     /* 2 Deep Cobalt   — deepest ground */
  --azure:#253238;    /* 3 Azure Grey    — panels, cards */
  --slate:#5B7B8A;    /* 4 Slate Steel   — borders, secondary text */
  --surge:#1A7CFF;    /* 5 Cobalt Surge  — interaction, live */
  --sky:#6CA7F9;      /* 6 Sky Current   — data, geometry */
  --ice:#A8CBFD;      /* 7 Ice Veil      — highlights */
  --mist:#F4F7F8;     /* 8 Signal Mist   — text */
  --yellow:#F2CB07;   /* 9 Accent Yellow — CTA, key metric, active */

  /* Derived grounds (flagged in delivery notes) */
  --ground:#011A40;           /* Deep Cobalt pulled ~45% toward black */
  --ground-2:#02224F;
  --panel:rgba(37,50,56,.55); /* Azure Grey over ground */
  --line:rgba(91,123,138,.32);
  --line-strong:rgba(108,167,249,.45);
  --text-2:#B7C6CE;           /* Signal Mist ↔ Slate Steel */

  --f-display:'Chakra Petch', 'Oxanium', sans-serif;
  --f-body:'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;

  --pad:20px;
  --sec:72px;
  --max:1240px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
@media (min-width:760px){ :root{ --pad:40px; --sec:120px; } }
@media (min-width:1200px){ :root{ --sec:150px; } }

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ground); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{
  margin:0; background:var(--ground); color:var(--mist);
  font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit }
::selection{ background:var(--surge); color:#fff }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad) }

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ice); display:flex; align-items:center; gap:10px; margin:0 0 20px;
}
.eyebrow b{ color:var(--yellow); font-weight:500 }
.eyebrow::before{ content:""; width:18px; height:1px; background:var(--slate) }
h1,h2,h3{ font-family:var(--f-display); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.01em }
h1{ font-size:clamp(40px, 6.4vw, 92px); line-height:1.0; }
h2{ font-size:clamp(32px, 4.6vw, 66px); line-height:1.04; }
h3{ font-size:clamp(22px, 2vw, 28px); line-height:1.15; font-weight:600 }
h1 em, h2 em, h3 em{ font-style:italic; font-weight:500 }
em.y{ color:var(--yellow) }
em.b{ color:var(--sky) }
.lede{ font-size:clamp(17px, 1.5vw, 20px); color:var(--text-2); max-width:56ch; text-wrap:pretty; margin:20px 0 0 }
p{ text-wrap:pretty }
.mono{ font-family:var(--f-mono) }

/* Outline (unbuilt) → solid (as-built) device */
.outline{
  color:transparent; -webkit-text-stroke:1.2px var(--sky); text-stroke:1.2px var(--sky);
}
.half{
  color:transparent; -webkit-text-stroke:1.2px var(--sky);
  background:linear-gradient(to top, var(--mist) 0 52%, transparent 52% 100%);
  -webkit-background-clip:text; background-clip:text;
}
.solid{ color:var(--mist) }

/* ---------- Buttons ---------- */
.btn{
  --h:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--h); padding:0 26px; border-radius:999px; border:1px solid transparent;
  font-family:var(--f-display); font-weight:600; font-size:16px; letter-spacing:.02em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease-out), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn-primary{ background:var(--yellow); color:#0B1A2E; box-shadow:0 0 0 0 rgba(242,203,7,0) }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 40px -10px rgba(242,203,7,.55) }
.btn-primary .arr{ transition:transform .25s var(--ease-out) }
.btn-primary:hover .arr{ transform:translateX(3px) }
.btn-ghost{ background:rgba(26,124,255,.08); color:var(--mist); border-color:rgba(108,167,249,.4) }
.btn-ghost:hover{ border-color:var(--sky); background:rgba(26,124,255,.18) }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--surge); outline-offset:3px;
}
.illus{
  position:absolute; z-index:3; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ice); background:rgba(1,26,64,.72); border:1px solid var(--line); padding:4px 8px; border-radius:2px;
}

/* ---------- Progress rail + nav ---------- */
.rail{ position:fixed; inset:0 0 auto 0; height:2px; z-index:60; pointer-events:none }
.rail i{ display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--cobalt), var(--surge) 40%, var(--sky) 75%, var(--ice)); }
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:64px; display:flex; align-items:center;
  transition:background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(1,26,64,.78); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px); border-color:var(--line) }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px }
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none }
.brand img{ height:36px; width:auto }
.brand .tp{ font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--text-2); border-left:1px solid var(--line); padding-left:14px; display:none }
.nav-links{ display:none; gap:28px; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase }
.nav-links a{ text-decoration:none; color:var(--text-2); transition:color .2s }
.nav-links a:hover{ color:var(--ice) }
.nav .btn{ --h:44px; padding:0 18px; font-size:14px }
@media (min-width:760px){ .brand .tp{ display:block } }
@media (min-width:1080px){ .nav-links{ display:flex } }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 45% at 50% 28%, rgba(26,124,255,.28), transparent 70%),
    radial-gradient(120% 80% at 50% 120%, rgba(0,74,173,.45), transparent 60%),
    var(--ground);
}
.hero::before{ /* coordinate field */
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:radial-gradient(circle at 1px 1px, rgba(168,203,253,.22) 1px, transparent 1.4px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 35%, #000 10%, transparent 75%); mask-image:radial-gradient(70% 60% at 50% 35%, #000 10%, transparent 75%);
}
.hero-media{ position:absolute; inset:0; z-index:-1 }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 40%; opacity:.9 }
.hero-media canvas{ position:absolute; inset:0; width:100%; height:100%; display:none; touch-action:pan-y }
html.motion .hero-media canvas{ display:block }
html.motion .hero-media img{ display:none }
.hero-media .illus{ right:var(--pad); top:78px }
html.motion .hero-media .illus{ display:none }
.hero-scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to top, rgba(1,26,64,.98) 0%, rgba(1,26,64,.85) 32%, rgba(1,26,64,0) 62%); }
.hero-inner{ position:relative; padding-top:110px; padding-bottom:28px; width:100% }
.badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 10px; border-radius:999px;
  border:1px solid rgba(108,167,249,.35); background:rgba(1,26,64,.6); backdrop-filter:blur(8px);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ice); margin-bottom:20px;
}
.badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--surge); box-shadow:0 0 0 4px rgba(26,124,255,.22) }
html.motion .badge .dot{ animation:pulse 2.4s var(--ease-io) infinite }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(26,124,255,.25)} 50%{ box-shadow:0 0 0 7px rgba(26,124,255,0)} }
.hero h1{ max-width:13ch }
.hero .lede{ margin-top:16px; font-size:16px }
.hero-ctas{ display:flex; flex-direction:column; gap:10px; margin-top:24px }
.hero-ctas .btn{ width:100% }
.hero-meta{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); line-height:1.8;
}
.hero-meta span{ color:var(--text-2) }
.hero-readout{
  position:absolute; right:var(--pad); top:84px; z-index:2; display:none;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--sky); text-align:right; line-height:1.9;
}
.hero-readout b{ color:var(--ice); font-weight:500 }
html.motion .hero-readout{ display:block }
.hero-hint{ display:none }
@media (min-width:760px){
  .hero{ align-items:center }
  .hero-scrim{ background:linear-gradient(90deg, rgba(1,26,64,.96) 0%, rgba(1,26,64,.7) 36%, rgba(1,26,64,0) 60%), linear-gradient(to top, rgba(1,26,64,.9), transparent 30%) }
  .hero-inner{ padding-top:120px; padding-bottom:80px }
  .hero .lede{ font-size:19px; max-width:44ch }
  .hero-ctas{ flex-direction:row; gap:12px; margin-top:36px }
  .hero-ctas .btn{ width:auto }
  .hero-meta{ max-width:620px; margin-top:56px }
  .hero-hint{ display:block; position:absolute; right:var(--pad); bottom:32px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate) }
  html:not(.motion) .hero-hint{ display:none }
}

/* ---------- Generic section ---------- */
.sec{ position:relative; padding:var(--sec) 0 }
.sec-head{ max-width:900px; margin-bottom:40px }
@media (min-width:760px){ .sec-head{ margin-bottom:64px } }
.hair{ border:0; border-top:1px solid var(--line); margin:0 }
.source{ font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--slate); margin-top:28px; line-height:1.7 }
.kicker{ font-family:var(--f-display); font-size:clamp(18px,1.6vw,22px); font-weight:500; color:var(--mist); margin-top:36px; max-width:60ch }
.kicker em{ color:var(--yellow) }

/* ---------- Spatial story ---------- */
.story{ position:relative; background:linear-gradient(to bottom, var(--ground), #01143A 50%, var(--ground)); }
.story-pin{ position:relative; padding:var(--sec) 0 }
.story-head{ position:relative; z-index:2 }
.story-head h2{ max-width:14ch }
.story-stage{ position:relative; margin:28px 0 0; aspect-ratio:16/11; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#01143A }
.story-stage img{ width:100%; height:100%; object-fit:cover }
.story-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:none }
.story-stage .illus{ left:10px; top:10px }
.story-readout{
  position:absolute; right:12px; top:12px; z-index:3; display:none;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; line-height:1.85; color:var(--sky);
  padding:10px 12px; background:rgba(1,20,58,.72); border:1px solid var(--line); border-radius:2px; min-width:150px;
}
.story-readout b{ color:var(--ice); font-weight:500 }
.story-readout .m{ color:var(--yellow) }
.story-steps{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:0; counter-reset:s }
.story-step{ position:relative; padding:16px 0 16px; border-top:1px solid var(--line); cursor:default }
.story-step .row{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.story-step .nm{ font-family:var(--f-display); font-weight:700; font-size:30px; line-height:1; letter-spacing:.02em }
.story-step .st{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate) }
.story-step p{ margin:8px 0 0; color:var(--text-2); font-size:15px; max-width:42ch }
.story-step .bar{ position:absolute; left:0; top:-1px; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--surge) }
.story-step.active .st{ color:var(--yellow) }
.story-step.active .bar{ background:linear-gradient(90deg, var(--surge), var(--sky)) }
.story-note{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--slate); margin-top:18px }
@media (min-width:760px){
  .story-steps{ grid-template-columns:repeat(3,1fr); gap:28px }
  .story-step .nm{ font-size:clamp(34px,3.6vw,52px) }
}
/* motion: pinned scroll-driven */
html.motion .story-track{ height:420vh }
html.motion .story-pin{ position:sticky; top:0; height:100svh; padding:76px 0 20px; display:flex; flex-direction:column }
html.motion .story-pin > .wrap{ display:flex; flex-direction:column; height:100%; }
html.motion .story-stage{ flex:1 1 auto; aspect-ratio:auto; min-height:0; margin-top:14px; border:0; background:transparent; overflow:visible }
html.motion .story-stage > img, html.motion .story-stage > .illus{ display:none }
html.motion .story-stage canvas, html.motion .story-readout{ display:block }
html.motion .story-steps{ margin-top:8px; grid-template-columns:repeat(3,1fr); gap:12px }
html.motion .story-step{ padding:12px 0 4px; cursor:pointer }
html.motion .story-step .nm{ font-size:22px }
html.motion .story-step .st{ font-size:9.5px; letter-spacing:.12em; display:block; margin-top:6px }
html.motion .story-step p{ font-size:12.5px; line-height:1.45; opacity:.55; transition:opacity .3s }
html.motion .story-step.active p{ opacity:1 }
html.motion .story-note{ display:none }
html.motion .story-head h2{ font-size:clamp(28px,4vw,56px); max-width:none }
html.motion .story-head .eyebrow{ margin-bottom:10px }
@media (min-width:760px){
  html.motion .story-pin{ padding:96px 0 32px }
  html.motion .story-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px }
  html.motion .story-steps{ gap:32px; margin-top:16px }
  html.motion .story-step .nm{ font-size:clamp(32px,3.2vw,48px) }
  html.motion .story-step .st{ display:inline; margin:0 }
  html.motion .story-step p{ font-size:14px }
  html.motion .story-readout{ right:0; top:8px; font-size:11px }
}
@media (max-width:759px){
  html.motion .story-readout{ right:0; top:0; padding:8px 10px; min-width:0; font-size:9.5px }
}
.story-head .sub{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--text-2); max-width:38ch; margin:12px 0 0; display:none }
@media (min-width:1000px){ html.motion .story-head .sub{ display:block; text-align:right } }

/* ---------- 01 Problem ---------- */
.problem-grid{ display:grid; gap:40px }
.problem-media{ position:relative; border-radius:4px; overflow:hidden; aspect-ratio:4/3; order:-1 }
.problem-media img{ width:100%; height:100%; object-fit:cover; object-position:80% 50% }
.problem-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, var(--ground), transparent 50%) }
.problem-media .illus{ left:10px; top:10px }
.stats{ display:grid; gap:0; margin-top:36px }
.stat{ display:grid; grid-template-columns:1fr; gap:6px; padding:20px 0; border-top:1px solid var(--line) }
.stat .n{ font-family:var(--f-display); font-weight:600; font-size:clamp(40px,4.4vw,60px); line-height:1; letter-spacing:-.01em }
.stat .n.y{ color:var(--yellow) }
.stat .c{ color:var(--text-2); font-size:15.5px; max-width:40ch }
@media (min-width:760px){
  .stat{ grid-template-columns:220px 1fr; align-items:center; gap:28px }
}
@media (min-width:1000px){
  .problem-grid{ grid-template-columns:1.1fr .9fr; gap:72px; align-items:stretch }
  .problem-media{ order:0; aspect-ratio:auto; min-height:560px }
  .problem-media::after{ background:linear-gradient(90deg, var(--ground) 0%, rgba(1,26,64,.72) 4%, rgba(1,26,64,.38) 9%, rgba(1,26,64,.12) 14%, transparent 18%), linear-gradient(to top, var(--ground), transparent 22%) }
}

/* ---------- 02 Program ---------- */
.program{ background:linear-gradient(to bottom, var(--ground), var(--ground-2)) }
.cards3{ display:grid; gap:16px }
.pcard{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .35s, transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .35s }
.pcard::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; box-shadow:inset 0 2px 0 var(--yellow); opacity:0; transition:opacity .35s }
.pcard:hover{ border-color:var(--surge); transform:translateY(-8px); background:rgba(0,74,173,.28); box-shadow:0 40px 80px -30px rgba(26,124,255,.65), 0 0 0 1px rgba(26,124,255,.35) }
.pcard:hover::before{ opacity:1 }
.cards3:hover .pcard:not(:hover){ opacity:.62 }
.pcard{ transition-property:border-color, transform, box-shadow, background, opacity }
.pcard:hover .stg{ color:var(--ice) }
.pcard:hover h3.outline{ -webkit-text-stroke-color:var(--ice) }
.pcard .img{ position:relative; aspect-ratio:16/9; overflow:hidden }
.pcard .img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out), filter .6s }
.pcard:hover .img img{ transform:scale(1.16); filter:brightness(1.12) saturate(1.1) }
.pcard .img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(37,50,56,.95), transparent 60%) }
.pcard .illus{ right:8px; top:8px }
.pcard .body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1 }
.pcard .stg{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate) }
.pcard .stg b{ color:var(--yellow); font-weight:500 }
.pcard h3{ font-size:34px; letter-spacing:.03em; font-weight:700 }
.pcard .tag{ font-family:var(--f-display); font-weight:500; color:var(--ice); font-size:18px; line-height:1.3 }
.pcard ul{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px }
.pcard li{ position:relative; padding-left:20px; color:var(--text-2); font-size:15px; line-height:1.5 }
.pcard li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border:1px solid var(--sky); transform:rotate(45deg) scale(.75) }
.continuity{ margin-top:28px; display:flex; align-items:center; gap:14px; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--text-2) }
.continuity::before{ content:""; flex:0 0 40px; height:1px; background:linear-gradient(90deg, var(--surge), var(--ice)) }
@media (min-width:900px){ .cards3{ grid-template-columns:repeat(3,1fr); gap:20px } }

/* ---------- 03 Why now ---------- */
.lanes{ display:grid; gap:44px }
.lane-t{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); margin-bottom:18px }
.tl{ list-style:none; margin:0; padding:0; position:relative; display:grid; gap:0 }
.tl::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:linear-gradient(to bottom, var(--cobalt), var(--sky)) }
.tl li{ position:relative; padding:0 0 22px 30px }
.tl li::before{ content:""; position:absolute; left:0; top:5px; width:11px; height:11px; border-radius:50%; background:var(--ground); border:1px solid var(--sky) }
.tl li.now::before{ background:var(--yellow); border-color:var(--yellow); box-shadow:0 0 0 5px rgba(242,203,7,.15) }
.tl .d{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sky) }
.tl li.now .d{ color:var(--yellow) }
.tl .w{ font-family:var(--f-display); font-weight:600; font-size:19px; line-height:1.25; margin-top:4px }
.tl .x{ color:var(--text-2); font-size:14.5px; margin-top:2px }
@media (min-width:1000px){
  .lanes{ gap:56px }
  .tl{ grid-template-columns:repeat(4,1fr); gap:24px }
  .tl::before{ left:0; right:0; top:5px; bottom:auto; width:auto; height:1px; background:linear-gradient(90deg, var(--cobalt), var(--sky)) }
  .tl li{ padding:30px 12px 0 0 }
  .tl li::before{ top:0 }
}
.cranes{ margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.cranes div{ padding:20px 10px 20px 0 }
.cranes div + div{ padding-left:14px; border-left:1px solid var(--line) }
.cranes .n{ font-family:var(--f-display); font-weight:600; font-size:clamp(30px,4vw,56px); line-height:1 }
.cranes .c{ font-size:13px; color:var(--text-2); margin-top:8px; line-height:1.4 }
.cranes .n.y{ color:var(--yellow) }
@media (min-width:760px){ .cranes div + div{ padding-left:28px } .cranes .c{ font-size:15px } }

/* ---------- 04 Developer ---------- */
.outcomes{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden }
.outcome{ background:var(--ground); padding:24px 22px 26px; position:relative; transition:background .3s }
.outcome:hover{ background:#022150 }
.outcome .i{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--slate) }
.outcome h3{ margin:10px 0 8px; font-size:22px }
.outcome p{ margin:0; color:var(--text-2); font-size:15px; max-width:44ch }
@media (min-width:760px){ .outcomes{ grid-template-columns:1fr 1fr } .outcome{ padding:34px 34px 38px } }
.proof{ margin-top:var(--sec); position:relative; border-radius:4px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(120deg, rgba(0,74,173,.35), rgba(1,26,64,.2) 55%), #011638 }
.proof-bg{ position:absolute; inset:0; opacity:.28 }
.proof-bg img{ width:100%; height:100%; object-fit:cover; object-position:80% 50% }
.proof-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, #011638 20%, rgba(1,22,56,.4)) }
.proof-in{ position:relative; padding:32px 22px }
.proof-in h3{ font-size:clamp(22px,2.4vw,34px); max-width:24ch }
.proof-in h3 em{ color:var(--yellow) }
.proof-nums{ display:grid; grid-template-columns:1fr 1fr; margin-top:30px; border-top:1px solid var(--line-strong) }
.proof-nums div{ padding:20px 14px 4px 0 }
.proof-nums div:nth-child(even){ padding-left:16px; border-left:1px solid var(--line) }
.proof-nums .n{ font-family:var(--f-display); font-weight:700; font-size:clamp(38px,5.4vw,80px); line-height:.95; letter-spacing:-.02em }
.proof-nums .n.y{ color:var(--yellow) }
.proof-nums .c{ font-size:13px; color:var(--text-2); margin-top:10px; line-height:1.45 }
.proof .illus{ right:10px; top:10px }
@media (min-width:900px){
  .proof-in{ padding:56px 56px 48px }
  .proof-nums{ grid-template-columns:repeat(4,1fr) }
  .proof-nums div{ padding:28px 22px 6px 0 }
  .proof-nums div + div{ padding-left:22px; border-left:1px solid var(--line) }
  .proof-nums .c{ font-size:14px }
}

/* ---------- 04b Liability — interval slices ---------- */
.lia{ position:relative; margin-top:var(--sec); padding-top:8px;
  background:linear-gradient(to bottom, var(--ground), #011638 18%, #011638 82%, var(--ground)); }
.lia-copy{ position:relative; z-index:2 }
.lia-copy h3{ font-size:clamp(28px,3.8vw,56px); line-height:1.05; max-width:17ch }
.lia-copy h3 em{ color:var(--yellow) }
.lia-copy > p:not(.eyebrow){ color:var(--text-2); max-width:46ch; margin:16px 0 0; font-size:16px }
.lia-stage{ position:relative; overflow:hidden; margin-top:8px }
.lia-frame{ position:relative; width:185%; margin-left:-82%; aspect-ratio:1600/893 }
.lia-frame > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:filter .6s var(--ease-out) }
.slice{ position:absolute; inset:0; clip-path:var(--clip); pointer-events:none; opacity:0; transition:opacity .5s var(--ease-out) }
.slice .cut, .slice .cut img{ position:absolute; inset:0; width:100%; height:100% }
.slice .cut img{ object-fit:cover; filter:brightness(1.18) saturate(1.05) }
.slice::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(26,124,255,.10), rgba(108,167,249,0) 40%, rgba(26,124,255,.12)); mix-blend-mode:screen }
.slice .sweep{ position:absolute; left:0; right:0; height:2px; top:0; background:linear-gradient(90deg, transparent, var(--ice), transparent); box-shadow:0 0 18px 4px rgba(108,167,249,.55); opacity:0 }
.pin{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; opacity:.0; transition:opacity .4s, transform .5s var(--ease-out) }
.pin b{ font-family:var(--f-mono); font-weight:500; font-size:10px; letter-spacing:.1em; color:#0B1A2E; background:var(--yellow); padding:2px 6px; border-radius:2px }
.pin span{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); background:rgba(1,20,58,.85); border:1px solid rgba(242,203,7,.5); padding:3px 7px; white-space:nowrap }
.pin::after{ content:""; width:1px; height:18px; background:linear-gradient(to bottom, var(--yellow), transparent) }
.lia-stage .illus{ left:var(--pad); bottom:12px }
.lia-readout{ display:none; position:absolute; right:var(--pad); bottom:12px; z-index:3; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; line-height:1.85; color:var(--sky); padding:8px 10px; background:rgba(1,20,58,.78); border:1px solid var(--line) }
.lia-readout b{ color:var(--ice); font-weight:500 } .lia-readout span{ color:var(--yellow) }
.lia-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-top:20px }
.lia-tabs button{ position:relative; text-align:left; background:var(--ground); border:0; color:var(--mist); padding:14px 14px 16px; min-height:44px; font:inherit; cursor:default; display:flex; flex-direction:column; gap:2px }
.lia-tabs b{ font-family:var(--f-mono); font-weight:500; font-size:11px; letter-spacing:.14em; color:var(--sky) }
.lia-tabs span{ font-family:var(--f-display); font-weight:600; font-size:17px }
.lia-tabs small{ font-size:12.5px; color:var(--text-2); line-height:1.35 }
.lia-tabs button::before{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--yellow) }
.lia .proof-in{ padding:0; margin-top:44px }
@media (min-width:760px){
  .lia-frame{ width:150%; margin-left:-50% }
  .lia-tabs{ grid-template-columns:repeat(4,1fr) }
  .lia-tabs button{ padding:18px 18px 20px }
  .lia-readout{ display:block }
  html:not(.js) .lia-readout{ display:none }
  .pin span{ font-size:10.5px }
}
@media (min-width:1100px){
  .lia{ padding-top:0 }
  .lia-copy{ position:absolute; left:0; right:0; top:12%; pointer-events:none }
  .lia-copy > *{ max-width:490px }
  .lia-stage{ margin-top:0 }
  .lia-frame{ width:118%; margin-left:-14% }
  .lia-stage::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, #011638 0%, rgba(1,22,56,.55) 30%, transparent 46%) }
  .lia-tabs{ margin-top:-56px; position:relative; z-index:2 }
}
/* No-JS / reduced motion: full image, static list — nothing hidden */
html:not(.js) .pin{ opacity:1; transform:translate(-50%,-100%) }
/* JS states */
html.js .lia-tabs button{ cursor:pointer; transition:background .25s }
html.js .lia-tabs button:hover{ background:#022150 }
html.js .lia.live .lia-frame > img{ filter:brightness(.55) saturate(.8) }
html.js .lia .slice.on{ opacity:1 }
html.js .lia .pin.on{ opacity:1; transform:translate(-50%,calc(-100% - 6px)) }
html.js .lia .pin.done{ opacity:.55 }
html.js .lia-tabs button.on{ background:linear-gradient(to bottom, rgba(0,74,173,.45), var(--ground)) }
html.js .lia-tabs button.on b{ color:var(--yellow) }
html.js .lia-tabs button.on::before{ transform:scaleX(var(--p,1)) }
html.js .lia-tabs button.done::before{ transform:scaleX(1); background:var(--slate) }
html.motion .lia .slice.on .sweep{ opacity:1; animation:liaSweep 1.6s var(--ease-io) both }
@keyframes liaSweep{ from{ top:10% } to{ top:88%; opacity:0 } }

/* ---------- 05 Why ScanBuild1 ---------- */
.cmp{ display:grid; gap:10px }
.cmp-h{ display:none }
.cmp-r{ display:grid; grid-template-columns:1fr; background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:16px 16px 14px }
.cmp-r .p{ font-family:var(--f-display); font-weight:600; font-size:18px; margin-bottom:10px }
.cmp-r .cells{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.cmp-r .cell{ display:flex; flex-direction:column; gap:4px }
.cmp-r .cell .l{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate) }
.v{ font-family:var(--f-mono); font-size:14px; color:var(--text-2) }
.v.yes{ color:var(--mist) }
.v.part{ color:var(--sky) }
.v.no{ color:var(--slate) }
.cmp-r.answer{ background:linear-gradient(110deg, var(--cobalt), #0A5FD6 60%, var(--surge)); border-color:var(--surge);
  box-shadow:0 30px 80px -30px rgba(26,124,255,.7); padding:20px 16px 18px; margin-top:10px }
.cmp-r.answer .p{ font-size:20px }
.cmp-r.answer .p small{ display:block; font-family:var(--f-mono); font-weight:400; font-size:10.5px; letter-spacing:.16em; color:var(--ice); text-transform:uppercase; margin-top:4px }
.cmp-r.answer .cell .l{ color:var(--ice) }
.cmp-r.answer .v{ color:var(--yellow); font-weight:500; display:flex; align-items:center; gap:6px }
.cmp-r.answer .v::before{ content:""; width:12px; height:7px; border-left:2px solid var(--yellow); border-bottom:2px solid var(--yellow); transform:rotate(-45deg) translateY(-2px) }
@media (min-width:760px){
  .cmp{ gap:0; border-top:1px solid var(--line) }
  .cmp-h, .cmp-r{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); align-items:center }
  .cmp-h{ padding:14px 24px; font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate) }
  .cmp-r{ background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:18px 24px }
  .cmp-r .p{ margin:0; font-weight:500; font-size:18px; color:var(--text-2) }
  .cmp-r .cells{ display:contents }
  .cmp-r .cell .l{ display:none }
  .cmp-r.answer{ border-radius:4px; padding:26px 24px; margin-top:14px; border:1px solid var(--surge); position:relative }
  .cmp-r.answer .p{ color:#fff; font-size:22px; font-weight:600 }
  .v{ font-size:15px }
}
.creds{ display:grid; gap:1px; background:var(--line); margin-top:56px; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.cred{ background:var(--ground-2); padding:22px 0 22px }
.cred h3{ font-size:19px }
.cred p{ margin:6px 0 0; color:var(--text-2); font-size:14.5px }
@media (min-width:760px){ .creds{ grid-template-columns:repeat(2,1fr) } .cred{ padding:28px 28px 28px 0 } .cred:nth-child(even){ padding-left:28px } }
@media (min-width:1100px){ .creds{ grid-template-columns:repeat(4,1fr) } .cred{ padding:28px 24px } .cred:first-child{ padding-left:0 } }
.why{ background:var(--ground-2) }
.integ{ margin-top:56px; display:grid; gap:0 }
.integ div{ display:grid; grid-template-columns:96px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--line) }
.integ .k{ font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; color:var(--sky); padding-top:2px }
.integ .t{ color:var(--text-2); font-size:15px }
.integ-h{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); margin-bottom:14px }
@media (min-width:900px){ .integ-wrap{ display:grid; grid-template-columns:1fr 2fr; gap:56px } .integ-wrap .integ{ margin-top:0 } }

/* ---------- 06 Investment ---------- */
.inv-grid{ display:grid; gap:40px }
.layers{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.layer{ position:relative; display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:end; padding:20px 18px; background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden }
.layer::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; transform-origin:0 50%; background:linear-gradient(90deg, var(--surge), var(--sky)) }
.layer.l3::after{ background:var(--yellow) }
html.motion .layers:not(.in) .layer::after{ transform:scaleX(0) }
html.motion .layer::after{ transition:transform 1s var(--ease-out) }
html.motion .layers.in .layer:nth-child(2)::after{ transition-delay:.25s }
html.motion .layers.in .layer:nth-child(3)::after{ transition-delay:.5s }
.layer .lt{ grid-column:1/-1; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate) }
.layer .lt b{ color:var(--sky); font-weight:500 }
.layer.l3 .lt b{ color:var(--yellow) }
.layer h3{ font-size:22px }
.layer p{ margin:4px 0 0; color:var(--text-2); font-size:14px; grid-column:1/2 }
.layer .amt{ font-family:var(--f-display); font-weight:600; font-size:clamp(24px,2.6vw,34px); text-align:right; line-height:1; grid-row:2/4; grid-column:2; white-space:nowrap }
.layer .amt small{ display:block; font-family:var(--f-mono); font-weight:400; font-size:11px; color:var(--slate); margin-top:6px; letter-spacing:.04em }
.layer.l3 .amt{ color:var(--yellow) }
.mix{ margin-top:22px }
.mix-bar{ display:flex; height:12px; border-radius:2px; overflow:hidden; background:rgba(91,123,138,.2) }
.mix-bar i{ display:block; height:100%; transition:flex-basis .7s var(--ease-out) }
.mix-bar .a{ background:var(--sky) } .mix-bar .b{ background:var(--surge) } .mix-bar .c{ background:var(--yellow) }
.mix-l{ display:flex; justify-content:space-between; gap:10px; margin-top:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--text-2); flex-wrap:wrap }
.mix-l span::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:6px; vertical-align:0 }
.mix-l .a::before{ background:var(--sky) } .mix-l .b::before{ background:var(--surge) } .mix-l .c::before{ background:var(--yellow) }

.seg{ display:grid; grid-template-columns:repeat(3,1fr); padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(1,20,58,.6); margin-bottom:14px }
.seg button{ min-height:44px; border:0; border-radius:999px; background:transparent; color:var(--text-2); font-family:var(--f-display); font-weight:600; font-size:15px; cursor:pointer; transition:background .25s, color .25s }
.seg button[aria-pressed="true"]{ background:var(--cobalt); color:#fff; box-shadow:inset 0 0 0 1px var(--surge) }
.seg button:hover:not([aria-pressed="true"]){ color:var(--ice) }
.seg{ display:none } html.js .seg{ display:grid }

.classes{ display:grid; gap:12px }
.classes .lbls{ display:none }
.ccard{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:18px 18px 8px; transition:border-color .3s, background .3s }
.ccard .ch{ font-family:var(--f-display); font-weight:600; font-size:20px }
.ccard .ch small{ display:block; font-family:var(--f-mono); font-weight:400; font-size:11px; letter-spacing:.12em; color:var(--slate); text-transform:uppercase; margin-top:2px }
.ccard dl{ margin:12px 0 0; display:grid }
.ccard dl div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line) }
.ccard dt{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); padding-top:2px }
.ccard dd{ margin:0; font-family:var(--f-mono); font-size:14px; color:var(--mist); text-align:right }
.ccard .tot dd{ font-weight:500 }
.ccard .shr dd{ color:var(--yellow); font-weight:500 }
.ccard.sel{ border-color:var(--surge); background:linear-gradient(to bottom, rgba(0,74,173,.4), rgba(37,50,56,.5)) }
html.js .ccard:not(.sel){ display:none }
@media (min-width:900px){
  .seg{ max-width:520px }
  html.js .ccard:not(.sel){ display:block }
  .classes{ grid-template-columns:1.2fr repeat(3,1fr); gap:0; border-top:1px solid var(--line) }
  .classes .lbls{ display:block; padding-top:62px }
  .classes .lbls div{ height:44px; display:flex; align-items:center; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); border-top:1px solid var(--line) }
  .ccard{ border:0; border-radius:0; background:none; padding:16px 18px 0; cursor:pointer; border-left:1px solid var(--line) }
  .ccard .ch{ height:46px; font-size:18px }
  .ccard dl{ margin-top:0 }
  .ccard dl div{ height:44px; align-items:center; padding:0 }
  .ccard dt{ display:none }
  .ccard dd{ text-align:left; font-size:15px }
  .ccard:hover:not(.sel){ background:rgba(26,124,255,.06) }
  .ccard.sel{ background:linear-gradient(to bottom, rgba(0,74,173,.55), rgba(0,74,173,.18)); box-shadow:inset 0 2px 0 var(--yellow) }
}
@media (min-width:1100px){ .inv-grid{ grid-template-columns:5fr 7fr; gap:64px; align-items:start } }
.inv-note{ font-family:var(--f-mono); font-size:11px; color:var(--slate); margin-top:18px; line-height:1.7 }

/* ---------- 07 Pilot ---------- */
.pilot{ overflow:hidden; isolation:isolate }
.pilot-bg{ position:absolute; inset:0; z-index:-1 }
.pilot-bg img{ width:100%; height:100%; object-fit:cover; object-position:70% 40%; opacity:.55 }
.pilot-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, var(--ground), rgba(1,26,64,.6) 30%, rgba(1,26,64,.85) 70%, var(--ground)) }
.pilot .illus{ right:var(--pad); bottom:20px }
.pnums{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:44px; border-top:1px solid var(--line-strong) }
.pnums div{ padding:20px 10px 0 0 }
.pnums div + div{ padding-left:14px; border-left:1px solid var(--line) }
.pnums .n{ font-family:var(--f-display); font-weight:700; font-size:clamp(44px,8vw,128px); line-height:.9; letter-spacing:-.02em }
.pnums .n.y{ color:var(--yellow) }
.pnums .c{ font-size:13px; color:var(--text-2); margin-top:12px; line-height:1.4; max-width:22ch }
.pilot-give{ margin-top:44px; max-width:760px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.pilot-give .t{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); margin-bottom:8px }
.pilot-give p{ margin:0; color:var(--mist); font-size:16px }
.pilot-close{ margin-top:24px; font-family:var(--f-display); font-weight:500; font-size:18px }
.pilot-close em{ color:var(--yellow) }
@media (min-width:760px){ .pnums div + div{ padding-left:32px } .pnums .c{ font-size:15px } }

/* ---------- 08 FAQ ---------- */
.faq{ display:grid; gap:0; border-top:1px solid var(--line) }
.qa{ padding:22px 0; border-bottom:1px solid var(--line) }
.qa h3{ font-size:19px; display:flex; gap:14px }
.qa h3 span{ font-family:var(--f-mono); font-weight:400; font-size:12px; color:var(--sky); padding-top:5px; letter-spacing:.1em }
.qa p{ margin:8px 0 0 34px; color:var(--text-2); font-size:15px; max-width:52ch }
@media (min-width:900px){ .faq{ grid-template-columns:1fr 1fr; column-gap:56px; border-top:0 } .qa{ border-top:1px solid var(--line); border-bottom:0; padding:28px 0 } }

/* ---------- 09 CTA ---------- */
.cta{ background:
  radial-gradient(70% 60% at 80% 30%, rgba(26,124,255,.2), transparent 70%),
  linear-gradient(to bottom, var(--ground), var(--deep)); overflow:hidden }
.cta h2{ font-size:clamp(36px,5.4vw,80px); max-width:16ch }
.cta h2 .outline{ font-style:italic; font-weight:500; -webkit-text-stroke-color:var(--sky) }
.cta-grid{ display:grid; gap:44px; margin-top:44px }
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.steps li{ display:grid; grid-template-columns:44px 1fr; gap:12px; padding:18px 0; border-top:1px solid var(--line) }
.steps .k{ font-family:var(--f-display); font-weight:700; font-size:28px; line-height:1; color:var(--sky) }
.steps li:first-child .k{ color:var(--yellow) }
.steps b{ font-family:var(--f-display); font-weight:600; font-size:18px; display:block; color:var(--mist) }
.steps span{ color:var(--text-2); font-size:15px }
.form{ background:rgba(37,50,56,.6); border:1px solid var(--line-strong); border-radius:6px; padding:22px; backdrop-filter:blur(10px) }
.form h3{ font-size:22px; margin-bottom:4px }
.form .fs{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--slate); margin:0 0 18px }
.fgrid{ display:grid; gap:14px }
.field{ display:flex; flex-direction:column; gap:6px }
.field label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ice) }
.field input, .field select, .field textarea{
  font:inherit; font-size:16px; font-weight:400; color:var(--mist); background:rgba(1,26,64,.7); border:1px solid var(--line);
  border-radius:4px; min-height:48px; padding:10px 14px; transition:border-color .2s, background .2s; width:100%;
}
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--sky) 50%), linear-gradient(135deg, var(--sky) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px }
.field input:hover, .field select:hover{ border-color:var(--slate) }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--surge); background:rgba(1,26,64,.95); outline:none; box-shadow:0 0 0 3px rgba(26,124,255,.25) }
.field input::placeholder{ color:#6E8793 }
.form .btn{ width:100%; margin-top:6px; --h:56px; font-size:17px }
.form .fine{ font-size:12px; color:var(--slate); margin:12px 0 0; line-height:1.5 }
.form .ok{ display:none; margin-top:12px; font-family:var(--f-mono); font-size:12px; color:var(--ice) }
.form.sent .ok{ display:block }
@media (min-width:600px){ .fgrid{ grid-template-columns:1fr 1fr } .field.full{ grid-column:1/-1 } }
@media (min-width:1000px){ .cta-grid{ grid-template-columns:5fr 6fr; gap:72px; align-items:start } .form{ padding:32px } }

/* ---------- Footer ---------- */
.foot{ background:var(--deep); border-top:1px solid rgba(108,167,249,.2); padding:56px 0 40px }
.foot-top{ display:grid; gap:32px }
.foot img{ height:60px; width:auto }
.foot .line{ font-family:var(--f-display); font-size:18px; font-weight:500; max-width:40ch }
.foot .line em{ color:var(--yellow) }
.foot .meta{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ice); line-height:2 }
.foot .disc{ margin-top:36px; padding-top:20px; border-top:1px solid rgba(108,167,249,.2); font-size:12px; color:#8FA6B2; line-height:1.7; display:grid; gap:8px }
@media (min-width:900px){ .foot-top{ grid-template-columns:auto 1fr auto; gap:56px; align-items:center } }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:55; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(1,26,64,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px; transform:translateY(110%); transition:transform .4s var(--ease-out);
}
.sticky-cta.on{ transform:none }
.sticky-cta .t{ flex:1; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); line-height:1.4 }
.sticky-cta .t b{ color:var(--yellow); font-weight:500 }
.sticky-cta .btn{ --h:48px; padding:0 20px; font-size:15px }
@media (max-width:759px){ html.js body{ padding-bottom:76px } }
@media (min-width:760px){ .sticky-cta{ display:none } }

/* ---------- Tweaks ---------- */
.tweaks{ position:fixed; right:16px; bottom:16px; z-index:80; width:260px; background:rgba(37,50,56,.96); border:1px solid var(--line-strong); border-radius:8px; padding:14px 14px 16px; font-family:var(--f-mono); font-size:11px; color:var(--text-2); box-shadow:0 20px 60px -20px #000; display:none }
.tweaks.on{ display:block }
.tweaks .th{ display:flex; justify-content:space-between; align-items:center; font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--mist); margin-bottom:12px }
.tweaks .th button{ background:none; border:0; color:var(--slate); font-size:18px; cursor:pointer; width:28px; height:28px }
.tweaks .tl2{ letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin:12px 0 6px }
.tweaks .opts{ display:grid; grid-template-columns:1fr 1fr; gap:4px; background:rgba(1,26,64,.6); padding:3px; border-radius:6px }
.tweaks .opts button{ min-height:34px; border:0; border-radius:4px; background:none; color:var(--text-2); font-family:var(--f-mono); font-size:11px; cursor:pointer }
.tweaks .opts button[aria-pressed="true"]{ background:var(--cobalt); color:#fff }
.tweaks input[type=range]{ width:100%; accent-color:var(--surge) }
.tweaks .rec{ margin-top:10px; color:var(--ice); line-height:1.5 }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important }
}

/* ==========================================================================
   v4 additions — 14 Oct 2026
   ========================================================================== */

/* ---------- Story variant B · image riser ---------- */
.story-img{ display:none }
html.motion[data-story="b"] #storyCanvas{ display:none }
html.motion[data-story="b"] .story-img{ display:block; position:absolute; inset:0; overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 4%, #000 92%, transparent); mask-image:linear-gradient(to bottom, transparent 0, #000 4%, #000 92%, transparent) }
.si-base{ position:absolute; left:-60%; right:-60%; top:60.5%; height:1px; z-index:1; background:linear-gradient(90deg, transparent, rgba(242,203,7,.65) 20%, rgba(242,203,7,.65) 80%, transparent) }
/* zoomed: tower (image y 6–68%) fills the stage height */
.si-col{ position:absolute; left:50%; top:-6%; height:150%; aspect-ratio:544/893; transform:translateX(-50%) }
@media (max-width:759px){ .si-col{ top:-2%; height:128% } }
.si-layer, .si-ghost{ position:absolute; inset:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) }
.si-layer img, .si-ghost img{ position:absolute; top:0; height:100%; width:294%; max-width:none; left:var(--sx); object-fit:cover }
.si-ghost{ opacity:var(--ghost, 0); transition:opacity .4s }
.si-layer{ clip-path:inset(100% 0 0 0); will-change:clip-path }
.si-layer[data-i="0"] img{ filter:saturate(1.15) }
.si-bar{ position:absolute; left:-30%; right:-30%; height:2px; top:92%; background:linear-gradient(90deg, transparent, var(--yellow) 18%, #FFF3A6 50%, var(--yellow) 82%, transparent); box-shadow:0 0 22px 5px rgba(242,203,7,.45), 0 0 2px rgba(255,243,166,.9); transform:translateY(-1px); pointer-events:none; opacity:0 }
.si-tag{ position:absolute; right:-6px; transform:translate(100%,-50%); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; color:#0B1A2E; background:var(--yellow); padding:3px 7px; white-space:nowrap; opacity:0 }
@media (max-width:759px){ .si-tag{ right:auto; left:50%; transform:translate(-50%,-140%); font-size:9.5px } }

/* ---------- 03 Why now — gaussian + scroll timeline + statement + Gold Coast ---------- */
.now-head{ display:grid; gap:28px; margin-bottom:40px }
.now-head .sec-head{ margin-bottom:0 }
.now-media{ position:relative; margin:0; border-radius:4px; overflow:hidden; aspect-ratio:16/10; border:1px solid var(--line) }
.now-media img{ width:100%; height:100%; object-fit:cover; object-position:42% 62% }
.now-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(1,26,64,.85), transparent 40%) }
.now-media figcaption{ position:absolute; z-index:2; left:14px; right:14px; bottom:12px; display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ice) }
.now-media figcaption span:last-child{ color:var(--yellow) }
.now-media .illus{ right:10px; top:10px }
html.motion .now-media img{ transform:scale(1.08); transition:transform 2.4s var(--ease-out) }
html.motion .now-media.in img{ transform:scale(1) }
@media (min-width:1000px){
  .now-head{ grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; margin-bottom:64px }
  .now-media{ aspect-ratio:16/11 }
}
/* scroll-driven timeline: yellow riser through each lane */
.tl{ --p:1 }
.tl::after{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--yellow); box-shadow:0 0 10px rgba(242,203,7,.6); transform-origin:50% 0; transform:scaleY(var(--p)); display:none }
html.motion .tl::after{ display:block }
html.motion .tl li{ transition:opacity .4s }
html.motion .tl li:not(.on){ opacity:.42 }
html.motion .tl li.on::before{ border-color:var(--yellow); background:var(--yellow); box-shadow:0 0 0 5px rgba(242,203,7,.15) }
html.motion .tl li.on .d{ color:var(--yellow) }
html.motion .tl li.on.cur .w{ color:#fff }
@media (min-width:1000px){
  .tl::after{ left:0; right:0; top:5px; bottom:auto; width:auto; height:1px; transform-origin:0 50%; transform:scaleX(var(--p)) }
}
.statement{ margin-top:56px; padding:36px 0 8px; border-top:1px solid var(--line-strong); position:relative }
.statement::before{ content:""; position:absolute; left:0; top:-1px; width:96px; height:2px; background:var(--yellow) }
.statement p{ margin:0; font-family:var(--f-display); font-weight:600; line-height:1.06; letter-spacing:-.01em; text-wrap:balance }
.statement .st-a{ font-size:clamp(34px,5.4vw,76px) }
.statement .st-b{ font-size:clamp(22px,2.8vw,40px); margin-top:14px; color:var(--text-2); font-weight:500; max-width:28ch }
.statement .st-b em{ color:var(--yellow); font-weight:500 }
.statement .outline{ -webkit-text-stroke-width:1px }
.gc{ position:relative; margin-top:var(--sec); isolation:isolate; overflow:hidden; min-height:560px; display:flex; align-items:flex-start }
.gc-bg{ position:absolute; inset:14% 0 0 0; z-index:-1 }
.gc-bg img{ width:100%; height:100%; object-fit:cover; object-position:55% 38%; opacity:.84 }
.gc-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, var(--ground) 0%, rgba(1,26,64,.6) 16%, rgba(1,26,64,.12) 46%, rgba(1,26,64,.08) 78%, rgba(1,26,64,.6) 93%, var(--ground)) }
.gc .illus{ right:var(--pad); bottom:16px }
.gc-in{ padding-top:56px; padding-bottom:220px }
.gc-in h3{ font-size:clamp(28px,3.6vw,52px); line-height:1.06; max-width:20ch }
.gc .cranes{ grid-template-columns:repeat(2,1fr); margin-top:36px; background:rgba(1,26,64,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
.gc .cranes div{ padding:18px 14px }
.gc .cranes div + div{ border-left:0 }
.gc .cranes div:nth-child(even){ border-left:1px solid var(--line) }
.gc .cranes div:nth-child(n+3){ border-top:1px solid var(--line) }
@media (min-width:900px){
  .gc{ min-height:720px }
  .gc-in{ padding-top:80px; padding-bottom:300px }
  .gc .cranes{ grid-template-columns:repeat(4,1fr) }
  .gc .cranes div + div{ border-left:1px solid var(--line) }
  .gc .cranes div:nth-child(n+3){ border-top:0 }
  .gc .cranes div{ padding:22px 24px }
}

/* ---------- Premium add-on · Reframe ---------- */
.reframe{ background:linear-gradient(to bottom, var(--ground-2), #011638 30%, #011638 70%, var(--ground)) }
.rf-head{ display:grid; gap:20px; margin-bottom:32px }
.rf-head h2{ max-width:14ch }
.rf-copy p{ margin:0 0 12px; color:var(--text-2); font-size:16px; max-width:52ch }
.rf-copy strong{ color:var(--mist); font-weight:500 }
@media (min-width:1000px){ .rf-head{ grid-template-columns:1.1fr 1fr; gap:64px; align-items:end; margin-bottom:44px } }
.rf-stage{ position:relative }
.rf-prompt{ display:flex; align-items:center; gap:12px; min-height:48px; padding:0 16px; margin-bottom:12px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(1,20,58,.75); font-family:var(--f-mono); font-size:12.5px; color:var(--mist); overflow:hidden; white-space:nowrap }
.rf-prompt .k{ font-size:10.5px; letter-spacing:.16em; color:#0B1A2E; background:var(--yellow); padding:3px 8px; border-radius:999px; flex:0 0 auto }
.rf-prompt .t{ overflow:hidden; text-overflow:ellipsis }
.rf-prompt .cur{ width:7px; height:15px; background:var(--sky); flex:0 0 auto }
html.motion .rf-prompt .cur{ animation:rfBlink 1s steps(1) infinite }
@keyframes rfBlink{ 50%{ opacity:0 } }
html:not(.js) .rf-prompt{ display:none }
.rf-frame{ position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; border:1px solid var(--line-strong); background:#0a1530; touch-action:pan-y; box-shadow:0 50px 100px -40px rgba(26,124,255,.5) }
.rf-frame > img.rf-static{ width:100%; height:100%; object-fit:cover; object-position:78% 50% }
.rf-after, .rf-before, .rf-line, .rf-range, .rf-tag, .rf-geo{ display:none }
.rf-stage.live .rf-static{ display:none }
.rf-stage.live .rf-after, .rf-stage.live .rf-before{ display:block; position:absolute; inset:0 }
.rf-after img, .rf-before img{ width:100%; height:100%; object-fit:cover; display:block }
.rf-before{ clip-path:inset(0 50% 0 0) }
.rf-before::after{ content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(circle at 1px 1px, rgba(168,203,253,.35) 1px, transparent 1.5px) 0 0/22px 22px,
  linear-gradient(90deg, rgba(0,48,112,.28), rgba(26,124,255,.10)); mix-blend-mode:screen }
.rf-scan{ position:absolute; top:0; bottom:0; right:0; width:120px; background:linear-gradient(90deg, transparent, rgba(108,167,249,.28)); pointer-events:none }
.rf-stage.live .rf-line{ display:block; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:var(--yellow); box-shadow:0 0 18px 3px rgba(242,203,7,.55), 0 0 2px #FFF3A6; pointer-events:none; z-index:3 }
.rf-knob{ position:absolute; top:50%; left:50%; width:52px; height:52px; transform:translate(-50%,-50%); border-radius:50%; background:rgba(1,20,58,.85); border:2px solid var(--yellow); display:flex; align-items:center; justify-content:center; gap:8px; color:var(--yellow); font-family:var(--f-display); font-size:20px; font-weight:700; font-style:normal; box-shadow:0 10px 30px -8px rgba(0,0,0,.6) }
.rf-stage.live .rf-tag{ display:block; position:absolute; top:14px; z-index:4; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border-radius:2px; transition:opacity .3s }
.rf-tag.l{ left:14px; color:var(--ice); background:rgba(1,20,58,.8); border:1px solid var(--line-strong) }
.rf-tag.r{ right:14px; color:#0B1A2E; background:var(--yellow) }
.rf-stage.to-after .rf-tag.l, .rf-stage.to-before .rf-tag.r{ opacity:.25 }
.rf-stage.live .rf-geo{ display:block; position:absolute; left:14px; bottom:14px; z-index:4; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--sky); padding:4px 8px; background:rgba(1,20,58,.72); border:1px solid var(--line) }
.rf-stage.live .rf-range{ display:block; position:absolute; inset:auto 0 0 0; width:100%; height:44px; margin:0; opacity:0; cursor:ew-resize; z-index:5 }
.rf-stage.live .rf-frame{ cursor:ew-resize }
.rf-stage .illus{ right:14px; bottom:14px; z-index:6 }
.rf-hint{ display:none; margin:12px 0 0; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); text-align:center }
.rf-stage.live .rf-hint{ display:block }
.rf-foot{ display:grid; gap:24px; margin-top:36px }
.rf-stat{ display:grid; gap:8px }
.rf-stat .n{ font-family:var(--f-display); font-weight:700; font-size:clamp(56px,7vw,104px); line-height:.9; letter-spacing:-.02em }
.rf-stat .n.y{ color:var(--yellow) }
.rf-stat .c{ color:var(--text-2); font-size:15px; max-width:40ch }
.rf-uses{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden }
.rf-uses li{ background:var(--ground); padding:16px 18px; display:flex; flex-direction:column; gap:2px }
.rf-uses b{ font-family:var(--f-display); font-weight:600; font-size:18px }
.rf-uses span{ color:var(--text-2); font-size:14px }
@media (min-width:760px){ .rf-uses{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1000px){ .rf-foot{ grid-template-columns:auto 1fr; gap:56px; align-items:center } .rf-stat{ grid-template-columns:auto 1fr; gap:22px; align-items:center } }
@media (max-width:759px){ .rf-frame{ aspect-ratio:4/5 } .rf-knob{ width:46px; height:46px } .rf-prompt{ font-size:11.5px } .rf-geo{ display:none !important } }

/* ---------- 3D lift tiles (outcomes, pilot, FAQ) ---------- */
.lift{ position:relative; transform-style:preserve-3d; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .35s, border-color .35s, opacity .35s }
.lift::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 2px 0 var(--yellow); opacity:0; transition:opacity .35s }
@media (hover:hover){
  .lift:hover{ transform:perspective(900px) translateY(-10px) translateZ(24px) rotateX(4deg); z-index:3; background:linear-gradient(160deg, rgba(0,74,173,.6), rgba(2,33,80,.95)) !important; box-shadow:0 46px 70px -28px rgba(0,0,0,.75), 0 22px 60px -24px rgba(26,124,255,.6), 0 0 0 1px rgba(26,124,255,.55) }
  .lift:hover::after{ opacity:1 }
  .outcomes:hover .lift:not(:hover), .faq:hover .lift:not(:hover), .tiles:hover .lift:not(:hover){ opacity:.5 }
  .tiles .lift:hover .n:not(.y), .tiles .lift:hover h3, .tiles .lift:hover b{ color:#fff }
  .tiles .lift:hover .lt b, .cred.lift:hover h3{ color:var(--yellow) }
}
.outcomes{ overflow:visible }
.outcome h3{ transition:color .3s }
.outcome.lift:hover .i, .qa.lift:hover h3 span{ color:var(--yellow) }
/* pilot tiles */
.pnums.tiles{ gap:10px; border-top:0 }
.pnums.tiles .lift{ padding:22px 16px 20px; border:1px solid var(--line); border-radius:4px; background:rgba(1,26,64,.55); backdrop-filter:blur(6px) }
.pnums.tiles .lift + .lift{ border-left:1px solid var(--line); padding-left:16px }
@media (min-width:760px){ .pnums.tiles{ gap:16px } .pnums.tiles .lift, .pnums.tiles .lift + .lift{ padding:30px 28px 28px } }
@media (max-width:559px){ .pnums.tiles{ grid-template-columns:1fr } .pnums.tiles .lift{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center } .pnums.tiles .c{ margin-top:0 } }
/* FAQ tiles */
.faq{ gap:12px; border-top:0 }
.qa.lift{ padding:22px 20px; border:1px solid var(--line); border-radius:4px; background:var(--panel) }
@media (min-width:760px){ .faq{ grid-template-columns:1fr 1fr; gap:16px; column-gap:16px } .qa.lift{ padding:28px 28px 30px } }
@media (min-width:1100px){ .faq{ grid-template-columns:repeat(3,1fr) } }
.qa.lift p{ margin-left:0; margin-top:12px }

/* ---------- Liability v4: datum line, leaders, hover ---------- */
.lia-frame .datum{ position:absolute; left:49%; right:2%; top:10%; height:0; border-top:1px dashed rgba(242,203,7,.45); pointer-events:none }
.lia-frame .datum::before{ content:"INTERVAL DATUM"; position:absolute; left:0; top:-16px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; color:var(--slate) }
.lia-frame .pin{ top:10% !important }
.lia-frame .pin::after{ display:none }
.lia-frame .lead{ position:absolute; left:var(--x); top:10%; width:1px; height:var(--h); background:linear-gradient(to bottom, var(--yellow), rgba(242,203,7,.15)); pointer-events:none; opacity:0; transition:opacity .4s }
html:not(.js) .lia-frame .lead{ opacity:.8 }
html.js .lia .lead.on{ opacity:1 }
html.js .lia .lead.done{ opacity:.45 }
html.js .lia .pin.on{ transform:translate(-50%,calc(-100% - 4px)) }
html.js .lia-frame{ cursor:crosshair }
.lia-stage{ padding-top:24px }
@media (min-width:1100px){ .lia-stage{ padding-top:0 } }
.proof-head{ margin-bottom:6px; max-width:720px }
.proof-head .eyebrow{ margin-bottom:12px }
.proof-head h3{ font-size:clamp(22px,2.4vw,34px); line-height:1.12 }
.proof-head h3 em{ color:var(--yellow) }

/* ---------- v7: lift tiles extended (investment, creds, QBCC, market, reframe uses) ---------- */
/* layers: overflow must be visible for the lift shadow; underline bar keeps its own clip */
.layers.tiles .layer{ overflow:visible }
.layers.tiles .layer::after{ border-radius:0 0 4px 4px }
.layers.tiles .layer.lift::after{ inset:auto 0 0 0; width:100%; height:2px; box-shadow:none; opacity:1 }
.layers.tiles .layer.lift::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:4px; box-shadow:inset 0 2px 0 var(--yellow); opacity:0; transition:opacity .35s }
@media (hover:hover){ .layers.tiles .layer.lift:hover::before{ opacity:1 } }

/* creds: gapped tiles instead of hairline table */
.creds.tiles{ gap:12px; background:none; border:0 }
.creds.tiles .cred{ padding:22px 20px; border:1px solid var(--line); border-radius:4px; background:var(--panel) }
@media (min-width:760px){ .creds.tiles .cred, .creds.tiles .cred:nth-child(even), .creds.tiles .cred:first-child{ padding:28px 24px } }
@media (min-width:1100px){ .creds.tiles{ gap:16px } }

/* QBCC proof numbers */
.proof-nums.tiles{ gap:10px; border-top:0; margin-top:24px }
.proof-nums.tiles .lift, .proof-nums.tiles .lift + .lift, .proof-nums.tiles .lift:nth-child(even){ padding:22px 16px 20px; border:1px solid var(--line); border-radius:4px; background:rgba(1,22,56,.7) }
@media (min-width:900px){ .proof-nums.tiles{ gap:16px } .proof-nums.tiles .lift, .proof-nums.tiles .lift + .lift, .proof-nums.tiles .lift:nth-child(even){ padding:28px 24px 26px } }

/* market cranes */
.gc .cranes.tiles{ gap:10px; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:0 }
.gc .cranes.tiles .lift, .gc .cranes.tiles .lift + .lift, .gc .cranes.tiles .lift:nth-child(even), .gc .cranes.tiles .lift:nth-child(n+3){ padding:20px 16px; border:1px solid var(--line); border-radius:4px; background:rgba(1,26,64,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
@media (min-width:900px){ .gc .cranes.tiles{ gap:16px } .gc .cranes.tiles .lift, .gc .cranes.tiles .lift + .lift, .gc .cranes.tiles .lift:nth-child(even), .gc .cranes.tiles .lift:nth-child(n+3){ padding:24px 24px } }

/* reframe uses */
.rf-uses.tiles{ gap:12px; background:none; border:0; overflow:visible }
.rf-uses.tiles li{ border:1px solid var(--line); border-radius:4px; background:var(--panel); padding:18px 20px }

/* ---------- Hero option C · 3D tower ---------- */
#hero3d{ display:none !important; touch-action:pan-y }
html.motion[data-hero="3d"] #hero3d{ display:block !important; position:absolute; inset:0; width:100%; height:100%; cursor:grab }
html.motion[data-hero="3d"] .hero.grabbing #hero3d{ cursor:grabbing }
html.motion[data-hero="3d"] #heroCanvas{ visibility:hidden }
.h3d-layer{ display:none; position:absolute; inset:0; pointer-events:none; overflow:hidden }
html.motion[data-hero="3d"] .h3d-layer{ display:block }
.h3d-pin{ position:absolute; left:-6px; top:-6px; width:12px; height:12px; background:var(--yellow); box-shadow:0 0 0 3px rgba(1,26,64,.6), 0 0 0 4px rgba(242,203,7,.6), 0 0 16px rgba(242,203,7,.6); transition:opacity .3s; will-change:transform }
.h3d-pin.on{ box-shadow:0 0 0 3px rgba(1,26,64,.6), 0 0 0 5px var(--yellow), 0 0 26px 4px rgba(242,203,7,.75) }
.h3d-label{ position:absolute; left:0; top:0; padding:8px 11px; background:rgba(1,20,58,.92); border:1px solid rgba(242,203,7,.7); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; line-height:1.5; white-space:nowrap; opacity:0; transition:opacity .25s; will-change:transform }
.h3d-label b{ display:block; color:var(--mist); font-weight:500 }
.h3d-label span{ display:block; color:var(--yellow); text-transform:uppercase }
.h3d-label::before{ content:""; position:absolute; top:50%; right:100%; width:14px; height:1px; background:rgba(242,203,7,.8) }
.h3d-label.left::before{ right:auto; left:100% }
.h3d-tag{ position:absolute; left:0; top:0; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; color:#0B1A2E; background:var(--yellow); padding:3px 7px; opacity:0; white-space:nowrap; transition:opacity .3s }
.h3d-ui{ display:none }
html.motion[data-hero="3d"] .h3d-ui{ display:flex; position:absolute; z-index:4; right:var(--pad); top:auto; bottom:72px; padding:3px; gap:2px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(1,20,58,.75); backdrop-filter:blur(8px) }
.h3d-ui button{ min-height:36px; padding:0 14px; border:0; border-radius:999px; background:none; color:var(--text-2); font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer }
.h3d-ui button[aria-pressed="true"]{ background:var(--cobalt); color:#fff; box-shadow:inset 0 0 0 1px var(--surge) }
@media (max-width:759px){
  html.motion[data-hero="3d"] .h3d-ui{ top:auto; bottom:auto; right:var(--pad); left:auto; top:184px; height:auto; padding:2px }
  .h3d-ui button{ min-height:30px; padding:0 10px; font-size:9.5px; letter-spacing:.1em }
  .h3d-label{ font-size:9.5px }
}

/* ---------- 09 · GHL calendar embed ---------- */
.book-frame{ position:relative; min-height:640px; margin-top:6px; border-radius:4px; overflow:hidden; background:rgba(1,26,64,.6); border:1px solid var(--line); transition:background .4s }
.book-frame.ready{ background:#fff }
.book-frame iframe{ display:block; width:100%; min-height:640px; border:0; overflow:hidden; background:#fff; opacity:0; transition:opacity .4s }
.book-frame.ready iframe{ opacity:1 }
.book-load{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(1,26,64,.92); font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ice); transition:opacity .4s; z-index:1 }
.book-load i{ width:34px; height:34px; border-radius:50%; border:2px solid rgba(108,167,249,.25); border-top-color:var(--yellow) }
html.motion .book-load i{ animation:bookSpin 1s linear infinite }
@keyframes bookSpin{ to{ transform:rotate(360deg) } }
.book-frame.ready .book-load{ opacity:0; pointer-events:none }
.book .fine a{ color:var(--ice) }
html:not(.js) .book-frame{ display:none }
@media (max-width:599px){ .book{ padding:16px 12px } .book-frame, .book-frame iframe{ min-height:720px } }
.book-stuck{ display:none; position:absolute; inset:0; z-index:2; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center; background:rgba(1,26,64,.94) }
.book-stuck p{ margin:0; color:var(--text-2) }
.book-frame.stuck:not(.ready) .book-stuck{ display:flex }
.book-frame.stuck:not(.ready) .book-load{ opacity:0 }

/* ---------- Mobile · hero C: tower first, copy below (desktop unchanged) ---------- */
.h3d-cue{ display:none }
@media (max-width:759px){
  html.motion[data-hero="3d"] .hero{ align-items:flex-start; min-height:auto }
  html.motion[data-hero="3d"] #hero3d,
  html.motion[data-hero="3d"] .h3d-layer{ inset:0 0 auto 0 !important; height:60svh !important }
  html.motion[data-hero="3d"] #hero3d{ touch-action:none }   /* mobile: free 3D orbit + tilt on the tower; page scrolls from the copy below */
  html.motion[data-hero="3d"] .hero-inner{ pointer-events:none }          /* its top padding covers the tower; let touches reach the canvas */
  html.motion[data-hero="3d"] .hero-inner > *{ pointer-events:auto }
  html.motion[data-hero="3d"] .hero-inner{ padding-top:calc(60svh + 22px); padding-bottom:36px }
  html.motion[data-hero="3d"] .hero-scrim{ background:linear-gradient(to bottom, rgba(1,26,64,0) 0, rgba(1,26,64,0) 50svh, rgba(1,26,64,.85) 60svh, var(--ground) 68svh) }
  html.motion[data-hero="3d"] .hero-readout{ display:none }
  html.motion[data-hero="3d"] .hero::before{ -webkit-mask-image:radial-gradient(70% 40% at 50% 28%, #000 10%, transparent 75%); mask-image:radial-gradient(70% 40% at 50% 28%, #000 10%, transparent 75%) }
  html.motion[data-hero="3d"] .h3d-ui{ top:calc(60svh - 58px) !important; right:auto !important; left:50% !important; transform:translateX(-50%); bottom:auto !important }
  html.motion[data-hero="3d"] .h3d-cue{ display:flex; align-items:center; justify-content:center; gap:8px; position:absolute; z-index:4; left:0; right:0; top:calc(60svh - 16px); font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ice); pointer-events:none }
  html.motion[data-hero="3d"] .h3d-cue .dot{ width:7px; height:7px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 3px rgba(242,203,7,.2) }
  html.motion[data-hero="3d"] .h3d-cue .dot{ animation:pulse 2.4s var(--ease-io) infinite }
  html.motion[data-hero="3d"] .badge{ margin-bottom:16px }
}