/* ============================================================================
   Praxis — praxisw.com product site (two-track: index.html = Flow A / HNW,
   banks.html = Flow B / private banks). Rebuilt 2026-08-06 (W4, POSITIONING §9).
   Brand: "Midnight Executive" (context/brand-system.md) · Lora + Inter web type.
   Base craft carried over from the Option-B cinematic build (styles-b.css,
   archived); adds: flow toggle · progress rail · outcome sections · vigil ring ·
   compounding curve · bull/bear debate · four-voice explorer · tap demo ·
   locked-properties rows · moat layers · meta line. All motion honours
   prefers-reduced-motion.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Palette — brand-system.md §1 */
  --navy:#0B1B3A; --navy-mid:#1E3A6F; --navy-soft:#2C4A82;
  --white:#FFFFFF; --ice:#F4F6FB;
  --gold:#C9A45C; --gold-light:#E4CB8E;
  --slate:#2A2F45; --muted:#5A6B85; --divider:#D7DDE8;
  --success:#1F7A52; --alert:#B85042;

  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Inter','Segoe UI',system-ui,sans-serif;

  --maxw:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--slate);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);line-height:1.12;margin:0;font-weight:700}
p{margin:0}
a{color:var(--navy-mid);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* --- shared bits ------------------------------------------------------------ */
.kicker{font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.rule{width:60px;height:3px;background:var(--gold);margin:20px 0 26px}
.lede{color:var(--muted);font-size:19px;max-width:64ch;margin-top:18px;line-height:1.6}
section{padding:96px 0;position:relative}
h2{font-size:clamp(28px,3.4vw,42px);max-width:22ch}
h3{font-size:21px}

.btn{
  display:inline-block;font:600 15px/1 var(--sans);letter-spacing:.01em;
  padding:15px 28px;border-radius:2px;cursor:pointer;transition:.25s var(--ease);
  border:1px solid transparent;
}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(201,164,92,.6)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:var(--white);margin-left:12px}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-light)}

/* --- header + persistent flow toggle ---------------------------------------- */
header{position:fixed;inset:0 0 auto 0;z-index:50;transition:.35s var(--ease);
  background:linear-gradient(180deg,rgba(11,27,58,.55),transparent)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
header.scrolled{background:rgba(11,27,58,.94);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(201,164,92,.25)}
.brand{display:flex;align-items:baseline;gap:12px;font-family:var(--serif);font-weight:700;
  font-size:22px;color:var(--white);letter-spacing:.02em;white-space:nowrap}
.brand small{font:700 11px/1 var(--sans);letter-spacing:.18em;color:var(--gold)}
header nav{display:flex;align-items:center;gap:26px}
header nav a{color:var(--ice);font-size:14.5px;opacity:.85;transition:.2s}
header nav a:hover{opacity:1;color:var(--gold-light)}
header .btn{padding:11px 20px;font-size:14px}
.navtoggle{display:none;background:none;border:0;color:var(--white);font-size:26px;cursor:pointer}

/* The two-flow segmented toggle — always visible, every scroll position */
.flowswitch{display:flex;gap:2px;background:rgba(244,246,251,.08);
  border:1px solid rgba(201,164,92,.45);border-radius:3px;padding:3px;
  font:600 13px/1 var(--sans);white-space:nowrap;flex-shrink:0}
.flowswitch a{color:#cdd7ea;padding:9px 14px;border-radius:2px;transition:.2s var(--ease)}
.flowswitch a.on{background:var(--gold);color:var(--navy)}
.flowswitch a:hover:not(.on){color:var(--gold-light)}

@media(max-width:1080px){header nav{gap:16px}header nav a{font-size:13.5px}}
@media(max-width:960px){
  header nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:0;
    background:rgba(11,27,58,.98);backdrop-filter:blur(10px);padding:10px 0 20px;
    transform:translateY(-140%);transition:.4s var(--ease);align-items:stretch}
  header nav.open{transform:translateY(0)}
  header nav a{padding:15px 32px;opacity:1;border-top:1px solid rgba(255,255,255,.06)}
  header nav .btn{margin:12px 32px 0;text-align:center}
  .navtoggle{display:block}
  .brand small{display:none}
}
@media(max-width:480px){
  .flowswitch a{padding:8px 9px;font-size:12px}
  .brand{font-size:19px}
}

/* --- scroll progress rail (Flow A) ------------------------------------------ */
.rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:18px}
.rail a{display:flex;align-items:center;gap:10px;flex-direction:row-reverse}
.rail i{width:9px;height:9px;border-radius:50%;background:transparent;
  border:1.5px solid var(--gold);display:block;transition:.3s var(--ease)}
.rail span{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);opacity:0;transform:translateX(6px);transition:.3s var(--ease)}
.rail a.on i{background:var(--gold);box-shadow:0 0 0 4px rgba(201,164,92,.22)}
.rail a.on span,.rail a:hover span{opacity:1;transform:none}
@media(max-width:1240px){.rail{display:none}}

/* --- hero ------------------------------------------------------------------ */
.hero{min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:140px 0 90px;
  background:var(--navy);color:var(--white);overflow:hidden;position:relative}
.hero__bg{position:absolute;inset:-8% 0 0 0;overflow:hidden;will-change:transform}
.hero__bgimg{position:absolute;inset:-8%;background-size:cover;background-position:center 30%;
  opacity:.42;transform-origin:65% 40%;animation:kenburns 34s ease-in-out infinite alternate}
@keyframes kenburns{
  0%{transform:scale(1.05) translate(0,0)}
  100%{transform:scale(1.2) translate(-2.5%,-3%)}}
/* Hero video (2026-08-06: replaces the dotted globe canvas — owner feedback).
   Sits inside .hero__bg over the poster still; the veil/grain/sweep stay on top.
   FIX 2026-08-06 (owner: "fixed boat shadow", "too vague"): opacity .55 let the
   static poster ghost through as a frozen double-exposure and washed the clip
   out. Video is now fully opaque; the veil gradient alone keeps text readable;
   the poster only shows during load and under reduced-motion. */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1}
/* Ripple layer — 2026-08-06 (owner: "fade in another water ripple loop video" +
   "u can make the ripples translucent to get the rippling loop effect").
   Sits directly over the hero clip, which by then is holding a clean-water final
   frame. Fading it in at ~.62 rather than swapping to it opaque means the two
   clips' water tones BLEND, so the different sea colour never shows as a cut.
   The source is a ping-pong encode, so the loop itself has no seam. */
.hero__ripple{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 6s cubic-bezier(.4,0,.2,1);pointer-events:none}
.hero__ripple.on{opacity:1}
/* CROSS-DISSOLVE, 2026-08-06 (owner: "the boat's fishing lines are still there
   when it faded in ... the boat's video should then fade out as it can be
   seen"). The ripple layer used to arrive translucent OVER a held final frame,
   so the boat and its outriggers stayed visible underneath. The two layers now
   dissolve: hero → 0 while ripple → 1, over the same 6s (slowed from 3s,
   owner 2026-08-07). The boat leaves with its own footage, not under a wash. */
.hero__video{transition:opacity 6s cubic-bezier(.4,0,.2,1)}
.hero__video.dissolve{opacity:0}
/* Brand tint (owner: "add a blue tint layer over to make it match the navy
   colors of the webpage"). mix-blend-mode:color keeps each frame's LUMINANCE —
   so ripples, glare and wake all survive — and replaces only hue+saturation
   with the house navy. A flat navy wash would have muddied the highlights. */
.hero__tint{position:absolute;inset:0;pointer-events:none;
  background:var(--navy);mix-blend-mode:color;opacity:.58}
/* Flow A crop — right anchor RESTORED 2026-08-06 with seaboat.mp4. Owner: "can
   the boat start from outside the viewport instead of mid screen" + "do not
   zoom in to any of the videos". seawboat03 put the boat dead centre at t=0 and
   the only way to push it out is a crop, which magnifies — the "TOOOO big"
   complaint. seaboat.mp4 needs no crop at all: its boat is already at the far
   right edge at t=0 and drifts in. The right anchor just stops a non-16:9
   viewport trimming that entry edge away. No zoom anywhere. */
/* HNW hero video (owner 2026-08-07): "same height as the viewport, top not
   cropped." Size by HEIGHT (not object-fit:cover, which crops top/bottom on
   wide screens); width follows the clip's aspect and is centered. The -8%
   parallax overscan is removed for Flow A so the top edge is never clipped. */
body.flow-a .hero__bg{inset:0}
body.flow-a .hero__video{height:100%;width:auto;left:50%;right:auto;transform:translateX(-50%);object-fit:fill;object-position:center}
body.flow-a .hero__bgimg{background-position:center}
/* Flow B (2026-08-06, owner: "make the bankers video a little more blur, so that
   the text can be read"): blur is the right lever here — it removes the competing
   marina detail behind the headline WITHOUT darkening the footage (darkening was
   the earlier "too vague" complaint). scale(1.04) pushes the soft, semi-transparent
   edge the blur creates outside the crop so no washed border shows. */
/* 2026-08-06 iteration 2 (owner: "the bankers video is too Blur!! do not make
   them blur, but maybe have an overlay that makes the text more readable?").
   blur(7px) REMOVED — the footage is sharp again. Legibility now comes from a
   horizontal scrim that darkens ONLY the left column the copy sits in and
   fades to nothing across the marina, so the footage still reads on the right.
   Blur softened everything; a scrim costs nothing on the half you look at. */
/* Flow B "use the video as is" (owner 2026-08-06): everything the SITE was adding
   on top of the clip is removed here, so the footage renders horizontally at its
   own framing with no borrowed movement. There is no rotate anywhere in this file
   — the "tilted" read came from the stack below, which zoomed the video 1.08,
   pushed it up 8% and slid it on scroll while a second, differently-scaled
   Ken-Burns copy of the poster animated underneath it.
     · inset:0      — was -8% at the top purely to give the parallax headroom;
                      that offset alone re-crops the frame.
     · bgimg        — the pre-video hero background, still running its Ken-Burns
                      zoom under an opaque video. Animation off; the layer itself
                      stays because it IS the reduced-motion poster fallback.
     · spark/grain  — pre-video overlays (also skipped in main.js so the canvas
                      never animates).
     · title        — kinetic line-reveal + gold shimmer, from the pre-video hero.
                      Copy is unchanged and fully visible, just static.
   Flow A keeps all of the above — this was scoped to the bankers hero. */
body.flow-b .hero__bg{inset:0}
body.flow-b .hero__bgimg{animation:none}
body.flow-b .hero__spark,
body.flow-b .hero__grain{display:none}
body.flow-b .hero__title .ln>span{transform:none;animation:none}
body.flow-b .hero__title em{background:none;-webkit-text-fill-color:var(--gold-light);
  color:var(--gold-light);animation:none}
/* Veil lightened 2026-08-06 (owner: video "too vague") — was .55/.82 navy; the
   footage now reads through, solid navy only at the base for section blend. */
.hero__veil{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 80% at 78% 12%,rgba(201,164,92,.10),transparent 55%),
    linear-gradient(180deg,rgba(11,27,58,.28) 0%,rgba(11,27,58,.48) 62%,var(--navy) 100%)}
/* Readability scrim — the copy column only. Replaces the rejected blur: the
   footage stays sharp everywhere, and the text sits on a dark ramp that is
   gone by ~62% across, where the marina detail lives. Layered UNDER the
   existing vertical veil (same element stack, added as a second layer). */
body.flow-b .hero__veil{
  background:
    radial-gradient(120% 80% at 78% 12%,rgba(201,164,92,.10),transparent 55%),
    linear-gradient(90deg,rgba(9,22,48,.86) 0%,rgba(9,22,48,.72) 26%,
      rgba(9,22,48,.34) 48%,rgba(9,22,48,.06) 62%,transparent 74%),
    linear-gradient(180deg,rgba(11,27,58,.22) 0%,rgba(11,27,58,.40) 62%,var(--navy) 100%)}
@media(max-width:820px){
  /* narrow viewports put the copy over the whole frame — even ramp instead */
  body.flow-b .hero__veil{
    background:linear-gradient(180deg,rgba(9,22,48,.72) 0%,rgba(9,22,48,.78) 62%,var(--navy) 100%)}}
.hero__spark{position:absolute;inset:0;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero__accent{position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--gold);z-index:3}

/* kinetic line-reveal title + gold shimmer */
/* 2026-08-06 (owner: "'Calm when markets aren't.' is too big, 'aren't' is on a
   2nd line, make it one line"). Cause was max-width:18ch — the line is 25
   characters, so it always broke. Widened to 27ch and the top of the clamp
   eased 72→62px so the longest line fits its own <span class="ln"> on one row
   at desktop widths. Each .ln is its own flex row, so nothing else reflows. */
.hero__title{color:var(--white);font-size:clamp(34px,4.9vw,62px);line-height:1.08;
  max-width:27ch;letter-spacing:-.015em;margin:0}
.hero__title .ln>span{white-space:nowrap}
@media(max-width:760px){
  /* below this the nowrap would overflow — let it wrap again */
  .hero__title{max-width:20ch}
  .hero__title .ln>span{white-space:normal}}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .ln>span{display:block;transform:translateY(114%);animation:lnUp 1s var(--ease) forwards}
.hero__title .ln:nth-child(1)>span{animation-delay:.18s}
.hero__title .ln:nth-child(2)>span{animation-delay:.36s}
@keyframes lnUp{to{transform:none}}
.hero__title em{font-style:italic;color:var(--gold-light);
  background:linear-gradient(100deg,var(--gold-light) 15%,#fff6dc 45%,var(--gold) 60%,var(--gold-light) 85%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:shine 5.5s var(--ease) 1.2s infinite}
@keyframes shine{0%,18%{background-position:130% 0}62%,100%{background-position:-40% 0}}

/* hero load-in + metrics strip + cinematic overlays */
.hero__in{opacity:0;transform:translateY(24px);animation:heroIn .95s var(--ease) forwards;
  animation-delay:var(--d,.4s)}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero__metrics{display:flex;gap:32px;margin-top:42px;flex-wrap:wrap;align-items:center}
.hero__metrics .metric{display:flex;align-items:center;gap:13px;position:relative;padding-right:32px}
.hero__metrics .metric:not(:last-child):after{content:"";position:absolute;right:0;top:0;bottom:0;
  width:1px;background:linear-gradient(180deg,transparent,rgba(201,164,92,.7),transparent)}
.hero__metrics b{font-family:var(--serif);font-weight:700;font-size:clamp(28px,3.2vw,40px);
  color:var(--gold-light);line-height:1}
.hero__metrics span{font-size:12px;color:rgba(244,246,251,.72);line-height:1.35}
.hero__metrics code{color:var(--gold);font-size:11.5px}
@media(max-width:560px){.hero__metrics{gap:18px}.hero__metrics .metric{padding-right:18px}}

/* .hero__sweep (gold light-sweep) REMOVED 2026-08-06 — owner read it as a
   "yellow orb moving left to right" over the hero video. */

.hero__grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:130px;animation:grain .45s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-4px,3px)}66%{transform:translate(3px,-4px)}}

.hero .tag{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,27px);
  color:var(--gold-light);margin-top:26px;max-width:34ch;line-height:1.3}
.hero .sub{color:var(--ice);opacity:.9;max-width:60ch;margin-top:26px;font-size:18px;line-height:1.6}
.hero .sub em{color:var(--gold-light);font-style:italic}
.hero .cta-row{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  color:var(--gold-light);font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  opacity:.75;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero__scroll span{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);
  animation:scrollpulse 2.2s var(--ease) infinite}
@keyframes scrollpulse{0%{transform:scaleY(.2);transform-origin:top;opacity:.3}
  50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);transform-origin:bottom;opacity:.3}}
@media(max-width:700px){.btn-ghost{margin:10px 0 0;display:block;text-align:center}
  .hero .cta-row{flex-direction:column;align-items:stretch}}

/* --- generic sections ------------------------------------------------------ */
.alt{background:var(--ice);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.dark{background:var(--navy);color:var(--ice)}
.dark h2,.dark h3{color:var(--white)}
.dark .lede{color:rgba(244,246,251,.82)}
.pull{margin-top:34px;font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);color:var(--navy);
  line-height:1.4;max-width:36ch;border-left:3px solid var(--gold);padding-left:22px}
.pull em{color:var(--gold);font-style:italic}
.src{color:var(--muted);font-size:13.5px;font-style:italic;margin-top:26px}

/* --- Flow A: outcome sections ---------------------------------------------- */
.outcome-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.outcome-grid--flip{grid-template-columns:.9fr 1.1fr}
@media(max-width:880px){.outcome-grid,.outcome-grid--flip{grid-template-columns:1fr;gap:40px}
  .outcome-grid--flip figure{order:2}}

/* status chips — the honesty layer (§6 ceilings, vision tense labelled) */
.status-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:8px 12px;border-radius:2px;display:inline-block}
.chip-now{background:rgba(31,122,82,.12);color:var(--success);border:1px solid rgba(31,122,82,.45)}
.dark .chip-now{background:rgba(31,122,82,.2);color:#9fd8bd;border-color:rgba(31,122,82,.5)}
.chip-pilot{background:rgba(201,164,92,.12);color:#8a6d33;border:1px solid rgba(201,164,92,.5)}
.dark .chip-pilot{background:rgba(201,164,92,.16);color:var(--gold-light)}
.chip-vision{background:rgba(90,107,133,.14);color:var(--muted);border:1px solid rgba(90,107,133,.5)}

/* vigil ring — PROTECT motif */
.vigil{margin:0}
.vigil-svg{width:min(360px,80vw);margin:0 auto;display:block}
.vigil-sweep{transform-origin:160px 160px;animation:vigilspin 7s linear infinite}
@keyframes vigilspin{to{transform:rotate(360deg)}}
.vigil-pulse{transform-origin:160px 160px;animation:vigilpulse 2.6s var(--ease) infinite}
@keyframes vigilpulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* compounding curve — GROW motif (draw-on when revealed) */
.curvefig{margin:0}
.curve-svg{width:100%;max-width:460px;margin:0 auto;display:block}
.curve-line{stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset 2.2s var(--ease) .2s}
.curve-dot{opacity:0;transition:opacity .5s var(--ease) 2s}
.curvefig.in .curve-line{stroke-dashoffset:0}
.curvefig.in .curve-dot{opacity:1}

/* bull/bear debate — SEIZE motif */
.debate{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch;
  margin-top:44px;perspective:1400px}
@media(max-width:720px){.debate{grid-template-columns:1fr;gap:14px}.debate__vs{display:none}}
.side{position:relative;background:var(--navy-mid);color:var(--ice);padding:28px 26px;
  border-radius:3px;overflow:hidden;transform-style:preserve-3d;
  transition:transform .18s var(--ease),box-shadow .3s var(--ease);
  box-shadow:0 16px 40px -26px rgba(0,0,0,.9)}
.side-bull{border-top:3px solid var(--success)}
.side-bear{border-top:3px solid var(--alert)}
.side__tag{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.side-bull .side__tag{color:#9fd8bd}
.side-bear .side__tag{color:#e8a79b}
.side p{color:rgba(244,246,251,.85);font-size:15.5px;line-height:1.6;transform:translateZ(14px)}
.debate__vs{align-self:center;font-family:var(--serif);font-style:italic;font-weight:700;
  color:var(--gold);font-size:22px}

/* four-voice explorer — CONTROL motif */
.voicelab{margin-top:40px;border:1px solid var(--divider);border-radius:3px;overflow:hidden}
.voicelab .voices{display:flex;flex-wrap:wrap;gap:0;margin:0;background:var(--ice);
  border-bottom:1px solid var(--divider)}
.voicelab .voice{cursor:pointer;background:none;border:0;border-right:1px solid var(--divider);
  font:600 13.5px/1 var(--sans);padding:16px 18px;transition:.25s var(--ease)}
.voicelab .voice:last-child{border-right:0}
.voicelab .voice.factual{color:var(--success)}
.voicelab .voice.house{color:#8a6d33}
.voicelab .voice.user{color:var(--muted)}
.voicelab .voice.praxis{color:var(--navy)}
.voicelab .voice.on{background:var(--navy);color:var(--gold-light)}
.voicelab__desc{padding:26px 28px;min-height:110px;background:var(--white)}
.voicelab__desc p{display:none;font-size:16px;color:var(--slate);max-width:70ch;line-height:1.6}
.voicelab__desc p.on{display:block;animation:voiceIn .45s var(--ease)}
@keyframes voiceIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* tap demo — HUMAN motif */
.tapdemo{background:var(--navy);border-radius:3px;padding:32px 30px;color:var(--ice);
  box-shadow:0 22px 60px -34px rgba(11,27,58,.9)}
.tapdemo__btn{display:block;width:100%;background:var(--gold);color:var(--navy);
  font:600 15px/1 var(--sans);padding:16px 20px;border:0;border-radius:2px;cursor:pointer;
  transition:.25s var(--ease)}
.tapdemo__btn:hover{background:var(--gold-light)}
.tapdemo__btn.tapped{background:var(--success);color:var(--white)}
.tapdemo__list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.tapdemo__list li{position:relative;padding-left:26px;font-size:15px;color:rgba(244,246,251,.85);
  opacity:.45;transform:translateX(-4px);transition:.4s var(--ease)}
.tapdemo__list li:before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;
  border-radius:50%;border:1.5px solid var(--gold)}
.tapdemo.sent .tapdemo__list li{opacity:1;transform:none}
.tapdemo.sent .tapdemo__list li:before{background:var(--gold)}
.tapdemo.sent .tapdemo__list li:nth-child(1){transition-delay:.05s}
.tapdemo.sent .tapdemo__list li:nth-child(2){transition-delay:.2s}
.tapdemo.sent .tapdemo__list li:nth-child(3){transition-delay:.35s}
.tapdemo.sent .tapdemo__list li:nth-child(4){transition-delay:.5s}
.tapdemo .src{color:rgba(244,246,251,.6)}

/* vision grid — Flow A direction section */
.direction .acts__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.12;will-change:transform}
.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:820px){.vision-grid{grid-template-columns:1fr}}
.vision{background:rgba(255,255,255,.04);border:1px solid rgba(201,164,92,.25);
  border-radius:3px;padding:26px 24px;transition:.3s var(--ease)}
.vision:hover{background:rgba(255,255,255,.07);transform:translateY(-4px)}
.vision h3{color:var(--white);font-size:19px;margin:14px 0 10px}
.vision p{color:rgba(244,246,251,.8);font-size:15px;line-height:1.6}

/* --- Flow B: problem + drain ------------------------------------------------ */
.problem-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;margin-top:8px}
@media(max-width:860px){.problem-grid{grid-template-columns:1fr;gap:36px}}
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;margin-top:34px}
@media(max-width:560px){.stats{grid-template-columns:1fr}}
.stat{border-top:3px solid var(--gold);padding-top:16px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(30px,4vw,44px);color:var(--navy);line-height:1}
.stat span{display:block;color:var(--muted);font-size:14.5px;margin-top:12px;line-height:1.5}
.stats+.src{margin-top:14px}
.problem-fig{position:relative;border:1px solid var(--divider);margin:0}
.problem-fig img{aspect-ratio:3/4;object-fit:cover;filter:saturate(.7) contrast(1.02)}
.problem-fig:after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(11,27,58,.35),rgba(11,27,58,0) 45%)}
.problem-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;color:var(--ice);
  font-size:14px;background:linear-gradient(0deg,rgba(11,27,58,.92),transparent);z-index:2}
.drain{margin-top:56px;background:var(--navy);border-radius:3px;color:var(--ice);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;padding:38px 40px;
  box-shadow:0 22px 60px -34px rgba(11,27,58,.9)}
@media(max-width:820px){.drain{grid-template-columns:1fr;padding:28px}}
.drain__stats{display:grid;gap:26px;align-content:start}
.drain .stat b{color:var(--gold-light)}
.drain .stat span{color:rgba(244,246,251,.75)}
.drain__copy h3{color:var(--white);margin-bottom:14px}
.drain__copy p{color:rgba(244,246,251,.85);font-size:15.5px;line-height:1.65}
.drain__copy .src{color:rgba(244,246,251,.55)}

/* reimagination — five outcomes (tilt cards) */
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;perspective:1400px}
@media(max-width:900px){.moves{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.moves{grid-template-columns:1fr}}
.move{position:relative;background:var(--navy);color:var(--ice);padding:30px 26px 30px;
  border-radius:3px;overflow:hidden;transform-style:preserve-3d;transition:transform .18s var(--ease),box-shadow .3s var(--ease);
  box-shadow:0 16px 40px -26px rgba(11,27,58,.9)}
.move:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold)}
.move:hover{box-shadow:0 30px 70px -30px rgba(11,27,58,1)}
.move__no{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--gold);
  transform:translateZ(30px)}
.move h3{color:var(--white);margin:12px 0 12px;font-size:19px;transform:translateZ(24px)}
.move p{color:rgba(244,246,251,.82);font-size:15px;line-height:1.58;transform:translateZ(14px)}
.move__glow{position:absolute;width:280px;height:280px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(201,164,92,.22),transparent 60%);
  opacity:0;transition:opacity .3s;mix-blend-mode:screen}
.move:hover .move__glow,.side:hover .move__glow{opacity:1}

/* governed decision-support — five locked properties */
.props{display:grid;gap:14px;margin-top:44px}
.prop{display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start;
  background:rgba(255,255,255,.03);border:1px solid rgba(201,164,92,.22);
  border-left:3px solid var(--gold);padding:22px 26px;border-radius:2px;transition:.3s var(--ease)}
.prop:hover{background:rgba(255,255,255,.06);transform:translateX(4px)}
.prop>b{font-family:var(--serif);font-weight:700;font-size:34px;color:var(--gold);line-height:1}
.prop h3{font-size:17.5px;color:var(--gold-light);margin-bottom:8px}
.prop p{color:rgba(244,246,251,.8);font-size:14.5px;line-height:1.55}
@media(max-width:560px){.prop{grid-template-columns:1fr;gap:10px}}
.canon{margin-top:44px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,30px);
  color:var(--gold-light);line-height:1.4;max-width:56ch}
.canon span{display:block;font-family:var(--sans);font-style:normal;font-size:15.5px;
  color:rgba(244,246,251,.75);margin-top:14px;line-height:1.6}

/* moat — four layers, deepest first */
.layers{display:grid;gap:0;margin-top:44px;max-width:880px}
.layer{background:var(--navy);color:var(--ice);padding:30px 34px;border-radius:2px;
  position:relative;transition:.3s var(--ease)}
.layer:hover{transform:translateX(6px)}
.layer-1{z-index:4}
.layer-2{background:var(--navy-mid);margin:-2px 0 0 26px;z-index:3}
.layer-3{background:var(--navy-soft);margin:-2px 0 0 52px;z-index:2}
.layer-4{background:#3d5b95;margin:-2px 0 0 78px;z-index:1}
@media(max-width:640px){.layer-2,.layer-3,.layer-4{margin-left:0;margin-top:10px}}
.layer__no{font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.layer h3{color:var(--white);margin:10px 0 10px;font-size:19px}
.layer p{color:rgba(244,246,251,.85);font-size:15px;line-height:1.6;max-width:72ch}

/* trust spine — pillars + animated evidence-spine SVG */
.spine-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-top:6px}
@media(max-width:960px){.spine-grid{grid-template-columns:1fr;gap:44px}}
.pillars{display:grid;gap:16px;margin-top:8px}
.pillar{background:rgba(255,255,255,.03);border:1px solid rgba(201,164,92,.22);
  border-left:3px solid var(--gold);padding:20px 22px;border-radius:2px;transition:.3s var(--ease)}
.pillar:hover{background:rgba(255,255,255,.06);transform:translateX(4px)}
.pillar h3{font-size:17px;color:var(--gold-light);margin-bottom:8px}
.pillar p{color:rgba(244,246,251,.8);font-size:14.5px;line-height:1.55}
.voices{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 6px}
.voice{font:600 13px/1 var(--sans);padding:9px 14px;border-radius:2px;border:1px solid;
  transition:.3s var(--ease)}
.voice.on{transform:translateY(-3px)}
.dark .voice.factual{color:#9fd8bd;border-color:rgba(31,122,82,.6)}
.dark .voice.house{color:var(--gold-light);border-color:rgba(201,164,92,.6)}
.dark .voice.user{color:#cdd7ea;border-color:rgba(90,107,133,.7)}
.dark .voice.praxis{color:#f0f3fa;border-color:rgba(255,255,255,.4)}
.dark .voice.on.factual{background:rgba(31,122,82,.22)}
.dark .voice.on.house{background:rgba(201,164,92,.2)}
.dark .voice.on.user{background:rgba(90,107,133,.25)}
.dark .voice.on.praxis{background:rgba(255,255,255,.12)}
.spine-note{margin-top:26px;font-family:var(--serif);font-style:italic;color:var(--gold-light);font-size:20px}
.spine-fig{position:sticky;top:96px;margin:0}
.spine-svg{width:100%;height:auto;display:block}
.flow{stroke-dasharray:5 9;animation:flow 2.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-56}}
.node-label{font:600 11px/1 var(--sans);fill:var(--ice)}
.node-tag{font:700 9.5px/1 var(--sans);letter-spacing:.08em;fill:var(--gold)}

/* proof — verified rows */
.proof-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px}
.verified-badge{display:inline-flex;align-items:center;gap:9px;font:700 12px/1 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--success);
  border:1px solid rgba(31,122,82,.4);background:rgba(31,122,82,.08);padding:9px 15px;border-radius:2px}
.verified-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 0 rgba(31,122,82,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,122,82,.5)}70%{box-shadow:0 0 0 10px rgba(31,122,82,0)}100%{box-shadow:0 0 0 0 rgba(31,122,82,0)}}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
@media(max-width:760px){.proof-grid{grid-template-columns:1fr}}
.proof{background:var(--white);border:1px solid var(--divider);border-top:3px solid var(--gold);
  padding:24px;border-radius:2px}
.proof h3{font-size:17px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.proof h3 .check{color:var(--success);font-size:15px}
.proof .num{font-family:var(--serif);font-weight:700;font-size:30px;color:var(--navy);display:block;margin-bottom:4px}
.proof p{font-size:15px;color:var(--slate);line-height:1.55}
.proof .plain{margin-top:12px;font-size:13.5px;color:var(--muted);font-style:italic;
  border-top:1px dashed var(--divider);padding-top:12px}

/* three acts — staged timeline */
.acts{margin-top:46px;position:relative}
.act{display:grid;grid-template-columns:180px 1fr;gap:34px;padding:30px 0;
  border-top:1px solid rgba(255,255,255,.12);position:relative}
.act:first-child{border-top:0}
@media(max-width:720px){.act{grid-template-columns:1fr;gap:14px}}
.act__tag{font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.act__name{font-family:var(--serif);font-size:24px;color:var(--white);margin-top:10px}
.act__status{margin-top:12px;display:inline-block;font:700 10.5px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;padding:6px 11px;border-radius:2px}
.st-now{background:rgba(31,122,82,.2);color:#9fd8bd;border:1px solid rgba(31,122,82,.5)}
.st-pilot{background:rgba(201,164,92,.16);color:var(--gold-light);border:1px solid rgba(201,164,92,.5)}
.st-vision{background:rgba(90,107,133,.2);color:#cdd7ea;border:1px solid rgba(90,107,133,.6)}
.act ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.act li{position:relative;padding-left:22px;color:rgba(244,246,251,.85);font-size:15.5px;line-height:1.5}
.act li:before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--gold)}
.act--vision li:before{background:var(--muted)}
.acts__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.12;
  will-change:transform}

/* meta line (Flow B) */
.meta__line{font-family:var(--serif);font-size:clamp(22px,2.8vw,32px);color:var(--navy);
  line-height:1.4;max-width:64ch}
.meta__line em{color:var(--gold);font-style:italic}
.meta__line span{display:block;font-family:var(--sans);font-size:16px;color:var(--muted);
  margin-top:16px;line-height:1.6}

/* honest status strip */
.honest{background:linear-gradient(90deg,var(--navy),var(--navy-mid));color:var(--ice);
  border-radius:3px;padding:34px 38px;margin-top:0;display:grid;grid-template-columns:auto 1fr;
  gap:26px;align-items:center;box-shadow:0 22px 60px -34px rgba(11,27,58,.9)}
@media(max-width:640px){.honest{grid-template-columns:1fr;gap:16px;padding:26px}}
.honest__mark{font-family:var(--serif);font-weight:700;font-size:40px;color:var(--gold);line-height:1}
.honest p{color:var(--ice);font-size:16px;line-height:1.6}
.honest b{color:var(--gold-light)}

/* pilot / begin CTA */
.pilot{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
.pilot__accent{position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--gold)}
.pilot h2{color:var(--white);max-width:26ch}
.pilot .lede{color:rgba(244,246,251,.85)}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:40px 0 12px}
@media(max-width:760px){.phases{grid-template-columns:1fr}}
.phase{background:var(--navy-mid);border-top:3px solid var(--gold);padding:22px;border-radius:2px}
.phase b{display:block;color:var(--gold-light);font:700 12px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:12px}
.phase p{color:rgba(244,246,251,.85);font-size:15px;line-height:1.55}
.pilot .cta-row{margin-top:34px}

/* footer */
footer{background:#081226;color:var(--ice);padding:56px 0 40px}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--white)}
.foot-brand small{display:block;font:700 11px/1 var(--sans);letter-spacing:.18em;color:var(--gold);margin-top:8px}
.foot-links{display:flex;gap:28px;flex-wrap:wrap;font-size:14px}
.foot-links a{color:var(--gold-light)}
.feat{margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  font-size:13.5px;color:rgba(244,246,251,.62);line-height:1.65;max-width:92ch}
.feat strong{color:rgba(244,246,251,.85)}

/* --- reveal animation ------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero__bg,.acts__bg{transform:none!important}
  .hero__bgimg{animation:none!important}
  .hero__video,.hero__ripple{display:none}
  .hero__in{opacity:1;transform:none;animation:none}
  .hero__title .ln>span{transform:none;animation:none}
  .hero__title em{-webkit-text-fill-color:var(--gold-light);background:none;animation:none}
  .hero__grain{display:none}
  .curve-line{stroke-dashoffset:0}
  .curve-dot{opacity:1}
  .tapdemo__list li{opacity:1;transform:none}
  .voicelab__desc p{display:block!important;margin-bottom:10px}
}