/* ============================================================
   VERIXA design system
   Cold light is raw signal. Brass light is verified.
   That rule is the palette, and it holds on every page.
   ============================================================ */

:root{
  /* surfaces, tinted toward the hero's ink navy grade, never pure black */
  --canvas:#090E16;
  --canvas-deep:#06090F;
  --panel:#111A26;
  --panel-raised:#16202E;

  /* lines. hairline is decoration. interactive is the only one allowed on a control. */
  --hairline:#1E2A3A;
  --rule:#33445B;
  --border-interactive:#5B7189;   /* 3.84:1 on canvas, 3.26:1 on raised. measured, not guessed. */

  /* meaning */
  --accent:#C6A15B;               /* verified */
  --accent-hover:#DDB871;
  --accent-muted:rgba(198,161,91,.16);
  --accent-glow:rgba(198,161,91,.30);
  --signal:#7FA8C9;               /* raw, unverified */
  --signal-muted:rgba(127,168,201,.14);

  /* type */
  --text-primary:#ECEAE4;
  --text-secondary:#9FACBB;
  --text-tertiary:#8291A0;   /* 5.42:1 on panel, 5.99:1 on canvas. #71808F measured 4.32:1 and failed small text. */

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* the two easing tokens. everything eases. nothing snaps. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(4,6,10,.95),0 3px 12px rgba(4,6,10,.78),0 10px 44px rgba(4,6,10,.8);

  /* rhythm */
  --gutter:clamp(20px,5vw,72px);
  --measure:68ch;
  --rail-x:clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;   /* fallback first */
  overflow-x:clip;     /* the one that actually stops programmatic sideways scroll */
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}

img,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}

/* ---------- the fixed environment layer -------------------------------
   one place behind everything, drifting slowly, so scrolling reads as
   moving through somewhere rather than past stacked boxes.            */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%,rgba(127,168,201,.09),transparent 60%),
    radial-gradient(ellipse 70% 50% at 82% 108%,rgba(198,161,91,.07),transparent 62%),
    var(--canvas);
}
.env::after{
  content:"";position:absolute;inset:-15%;
  background:
    repeating-linear-gradient(180deg,transparent 0 118px,rgba(159,172,187,.030) 118px 119px),
    repeating-linear-gradient(180deg,transparent 0 47px,rgba(159,172,187,.014) 47px 48px);
  animation:strata 96s linear infinite;
  animation-delay:-31s;   /* mid-cycle at first paint */
}
@keyframes strata{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-119px,0)}}

/* grain, at whisper level */
.env::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
}

/* ---------- layout ---------------------------------------------------- */
.page{position:relative;z-index:1}
.wrap{width:min(1200px,100% - var(--gutter)*2);margin-inline:auto}
.wrap-tight{width:min(880px,100% - var(--gutter)*2);margin-inline:auto}

/* every section is offset right of the evidence rail */
.section{position:relative;padding-block:clamp(84px,11vw,160px)}
.section + .section{border-top:1px solid var(--hairline)}

/* ---------- typography ------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.08;margin:0;letter-spacing:-.014em}
h1{font-size:clamp(2.6rem,6.4vw,5rem);line-height:1.03;letter-spacing:-.026em}
h2{font-size:clamp(2rem,4.1vw,3.35rem);letter-spacing:-.02em}
h3{font-size:clamp(1.3rem,2vw,1.72rem);line-height:1.2}
h4{font-size:1.06rem;line-height:1.3;font-family:var(--body);font-weight:600;letter-spacing:-.005em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.lede{font-size:clamp(1.1rem,1.72vw,1.35rem);line-height:1.62;color:var(--text-secondary);max-width:58ch}
.body-serif{font-family:var(--display);font-size:1.16rem;line-height:1.68;color:var(--text-secondary)}
.small{font-size:.925rem;line-height:1.6;color:var(--text-secondary)}
.tiny{font-size:.82rem;line-height:1.55;color:var(--text-tertiary)}
em{font-style:italic}
strong{font-weight:600;color:var(--text-primary)}

/* the kicker: mono, tracked, the technical voice of the site */
.kicker{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:baseline;gap:.7em;margin:0 0 1.4rem
}
.kicker::before{
  content:"";width:22px;height:1px;background:var(--accent);opacity:.55;
  transform:translateY(-.28em);flex:none
}
.kicker--signal{color:var(--signal)}
.kicker--signal::before{background:var(--signal)}

a{color:var(--accent);text-decoration-color:var(--accent-muted);text-underline-offset:.22em;
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
a:hover{color:var(--accent-hover);text-decoration-color:var(--accent-hover)}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--canvas-deep);padding:12px 20px;
  font-family:var(--mono);font-size:.8rem;font-weight:500;border-radius:0 0 4px 0
}
.skip:focus{left:0}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   THE EVIDENCE RAIL the signature element
   A chain of custody, drawn down the page. Every claim that
   matters is pinned to it with its own reference marker.
   ============================================================ */
.rail{
  position:absolute;left:var(--rail-x);top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--rule) 4%,var(--rule) 96%,transparent);
  z-index:1;pointer-events:none
}
.rail::after{   /* the drawn portion: brass above the reader's position */
  content:"";position:absolute;left:0;top:0;width:1px;
  height:var(--rail-drawn,0%);
  background:linear-gradient(180deg,var(--accent),rgba(198,161,91,.22));
  box-shadow:0 0 12px var(--accent-glow)
}

/* a marker: E-07 sitting on the rail, tied to a claim */
.mark{
  position:absolute;left:calc(var(--rail-x) - 4px);
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;
  color:var(--text-tertiary);background:var(--canvas);
  padding:5px 0 5px 12px;white-space:nowrap;z-index:2;
  transition:color .5s var(--ease)
}
.mark::before{
  content:"";position:absolute;left:-3px;top:50%;width:7px;height:7px;
  margin-top:-3.5px;border-radius:50%;
  background:var(--canvas);border:1px solid var(--rule);
  transition:border-color .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)
}
.mark.lit{color:var(--accent)}
.mark.lit::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}

@media (max-width:900px){
  .rail,.mark{display:none}
}

/* ---------- buttons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.62em;
  font-family:var(--body);font-size:.94rem;font-weight:500;letter-spacing:.005em;
  padding:14px 26px;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;position:relative;
  transition:background .34s var(--ease),color .34s var(--ease),
             border-color .34s var(--ease),transform .34s var(--ease-out),
             box-shadow .34s var(--ease);
  text-shadow:none;   /* a shadowed button label reads as grime */
}
.btn svg{flex:none;transition:transform .38s var(--ease-out)}

.btn-primary{
  background:linear-gradient(176deg,#D2AE68 0%,#C6A15B 42%,#B08C48 100%);
  color:#120D04;border-color:#A8853F;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,244,214,.42),0 1px 2px rgba(0,0,0,.5)
}
.btn-primary:hover{
  background:linear-gradient(176deg,#E3BF78 0%,#D6B267 42%,#BE9A52 100%);
  border-color:#BE9A52;color:#120D04;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,248,224,.5),0 12px 34px -12px var(--accent-glow)
}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-primary:active{transform:translateY(0)}

.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border-interactive)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-ghost:hover svg{transform:translateX(4px)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

@media (pointer:coarse){
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:520px){
  .btn{padding:13px 22px;font-size:.9rem}
  .static-inner .btn-row{gap:11px}
  .static-inner .btn-row .btn{flex:1 1 100%;min-width:0}
}

/* ---------- navigation -------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 var(--gutter);height:74px;
  background:rgba(9,14,22,0);border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),
             backdrop-filter .45s var(--ease),height .45s var(--ease)
}
.nav.stuck{
  background:rgba(9,14,22,.86);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--hairline);height:64px
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text-primary);flex:none}
.brand:hover{color:var(--text-primary)}
.brand svg,.brand-mark{width:30px;height:30px;flex:none;display:block}
.foot-brand .brand-tagline,.brand-tagline{font-family:var(--body);font-size:.75rem;letter-spacing:.34em;text-transform:uppercase;color:#C9B48A;margin:-.35rem 0 1.1rem;line-height:1.4}
.brand-word{
  font-family:var(--body);font-size:1.02rem;font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;line-height:1;
  color:#E6D8B8
}
.nav-panel{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.1vw,30px);list-style:none;margin:0;padding:0}
.nav-links a{
  font-size:.87rem;font-weight:400;color:var(--text-secondary);text-decoration:none;
  position:relative;padding:6px 0;transition:color .3s var(--ease)
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease-out)
}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--text-primary)}
.nav-cta{margin-left:6px}

.nav-toggle{display:none;background:none;border:1px solid var(--border-interactive);
  border-radius:2px;width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle span{display:block;width:17px;height:1px;background:var(--text-primary);position:relative;
  transition:background .25s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:17px;height:1px;background:var(--text-primary);
  transition:transform .38s var(--ease-out)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:960px){
  .nav-toggle{display:flex}
  .nav-panel{
    display:block;
    position:fixed;inset:74px 0 auto 0;background:rgba(6,9,15,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--hairline);
    padding:12px var(--gutter) 28px;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .34s var(--ease),transform .34s var(--ease-out),visibility .34s
  }
  .nav-panel.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  .nav-links{flex-direction:column;align-items:stretch;gap:0}
  .nav-links li{border-bottom:1px solid var(--hairline)}
  .nav-links a{display:block;padding:15px 0;font-size:1rem}
  .nav-links a::after{display:none}
  .nav-cta{margin:20px 0 0}
  .nav-cta .btn{width:100%}
}

/* ============================================================
   THE HERO pinned scroll region, sticky stage, scrubbed video
   720vh of scroll. 620vh of range. Four bands.
   ============================================================ */
.hero{position:relative;height:280vh;z-index:2}  /* was 720vh: ~7,200px of scroll before the first section, which a usability audit on
     24 September called its only critical issue. Four bands, ~70vh each. */
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas-deep)
}

.poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:var(--canvas-deep);
  transition:opacity .9s var(--ease)
}
#hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);
  will-change:transform;transform:translateZ(0)
}
.stage.video-ready #hero-video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed #hero-video{display:none}

/* layer 1 of the legibility system: the always-on base scrim */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 92% at 50% 44%,rgba(6,9,15,0) 32%,rgba(6,9,15,.66) 100%)
}
/* a top wash so the fixed nav always has something to sit on */
.scrim-top{
  position:absolute;left:0;right:0;top:0;height:210px;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,15,.78),rgba(6,9,15,0))
}

/* the loading ring, and its honest failure state */
.ring{
  position:absolute;left:50%;bottom:54px;width:40px;height:40px;margin-left:-20px;
  color:var(--accent);opacity:.85;transform:rotate(-90deg);pointer-events:none
}
.ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0;transition:opacity .5s var(--ease)}
.cue{
  position:absolute;left:50%;bottom:46px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-tertiary);pointer-events:none
}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--rule),transparent);
  animation:cue 2.8s var(--ease) infinite;animation-delay:-.9s}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* ---- the caption bands ------------------------------------------------- */
.bands{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;left:0;right:0;
  padding-inline:clamp(24px,7vw,110px);
  opacity:0;text-shadow:var(--tshadow)
}
.band .btn{text-shadow:none}

/* layer 2: the per-band scrim, riding the band's own progress.
   The ellipse holds close to its peak across the words and falls off only at
   the very edge. A gradient that starts dying at 46% leaves the text sitting
   in the thin part of its own scrim, which is what failed the worst-frame
   audit against the real footage. Peaks below are measured, not guessed. */
.band::before{
  content:"";position:absolute;inset:-10% -7%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 108% 92% at 50% 50%,
    rgba(4,6,11,.72) 0%,rgba(4,6,11,.65) 55%,rgba(4,6,11,0) 100%)
}
/* The opening beat sits over the brightest part of the footage, where the
   camera is still up in the lit haze. A radial ellipse leaves the top of the
   headline in thin scrim there and measured 1.95:1. A linear wash reaching
   the top of the stage is the correct shape for a title over bright sky. */
.band[data-alpha="hook"]::before{
  /* full bleed horizontally so the wash has no visible side edge; it fades
     on the vertical axis only, the way a title-safe gradient should */
  inset:calc(-15vh - 12px) -50vw -14% -50vw;
  background:linear-gradient(180deg,
    rgba(4,6,11,.95) 0%,rgba(4,6,11,.93) 46%,
    rgba(4,6,11,.86) 72%,rgba(4,6,11,0) 100%)
}
/* bands sitting nearest the brass light get the deepest peak */
.band[data-alpha="deep"]::before{
  background:radial-gradient(ellipse 108% 92% at 50% 50%,
    rgba(4,6,11,.90) 0%,rgba(4,6,11,.81) 55%,rgba(4,6,11,0) 100%)
}

/* band placement: the action lane is the vertical centre of frame,
   so words live above it and below it, never across it. */
.band-1{top:15vh;bottom:auto;max-width:min(980px,74vw)}
.band-2{top:auto;bottom:15vh;max-width:min(560px,52vw)}   /* left of the action lane */
.band-3{top:16vh;bottom:auto;max-width:min(820px,68vw)}
.band-4{top:13vh;bottom:auto;text-align:center}           /* settles ABOVE the arrival mark */

.band h1,.band .h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:1.04;letter-spacing:-.026em;
  margin:0;max-width:min(17ch,72vw)
}
.band-4 .h1{max-width:none}
.band .band-sub{
  font-size:clamp(1rem,1.42vw,1.19rem);line-height:1.58;color:#D6D9DE;
  max-width:50ch;margin:1.35rem 0 0
}
.band-4 .band-sub{margin-inline:auto;max-width:54ch}
.band .band-line{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.75rem,3.8vw,3rem);line-height:1.16;letter-spacing:-.018em;
  margin:0;max-width:min(20ch,90%)
}
.band .band-line + .band-line{margin-top:.34em;color:var(--text-secondary)}
.band-2 .band-line + .band-line,.band-3 .band-line + .band-line{color:#D2D9E1}

/* layer 4: the chip, for small text over live footage */
.chip{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:#C3CCD6;
  background:rgba(7,10,17,.56);border:1px solid rgba(96,112,138,.32);
  border-radius:10px;padding:7px 13px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(4,6,11,.85)
}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--signal);flex:none;
  box-shadow:0 0 8px rgba(127,168,201,.7)}
.chip.verified i{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.band-4 .btn-row{justify-content:center;margin-top:2.1rem;pointer-events:auto}
.band-4 .chip{margin-bottom:1.5rem}

/* ---- text choreography ------------------------------------------------
   transform and opacity only, scrubbed off each band's --k, reversible. */
.split{display:block}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (f) drift-down band 1, echoing the fall through the points */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px))
}
/* (b) grid snap-align band 2, echoing the points ordering into strata */
.e-grid .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)))
}
/* (c) blur-to-sharp band 3, echoing the lens clearing after the crossing.
   two stacked copies, opacity crossfade only. filter stays static. */
.e-blur{position:relative;display:block}
.e-blur .soft{
  position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0));
  color:var(--signal);pointer-events:none
}
.e-blur .sharp{position:relative;opacity:var(--k,0)}
/* (e) word-by-word rise into a staged settle band 4, echoing the arrival */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 30px))
}
.band-4 .band-sub{--ks:clamp(0,(var(--k,0) - .60)*3.6,1);
  opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 14px))}
.band-4 .btn-row{--kb:clamp(0,(var(--k,0) - .76)*4.6,1);
  opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 14px))}
.band-4 .chip{--kb:clamp(0,(var(--k,0) - .48)*4,1);opacity:var(--kb)}

/* ---- the static hero (phones, reduced motion) --------------------------
   a designed layout, not an apology. */
.static-hero{display:none;position:relative;min-height:100svh;overflow:hidden}
.static-hero .poster-still{
  position:absolute;inset:0;background-size:cover;background-position:50% 58%;
  background-color:var(--canvas-deep)
}
/* a portrait crop of the same approved ending frame, composed so the brass
   arrival sits mid frame on a phone rather than behind the words */
@media (orientation:portrait){
  .static-hero .poster-still{
    background-image:url('hero-still-portrait.jpg') !important;
    background-position:50% 50%
  }
}
.static-hero .scrim{
  /* opens through the middle so the brass arrival actually reads on a phone,
     then deepens under the text block where the words sit */
  background:linear-gradient(180deg,
    rgba(6,9,15,.86) 0%,rgba(6,9,15,.32) 20%,
    rgba(6,9,15,.26) 40%,rgba(6,9,15,.70) 60%,
    rgba(6,9,15,.78) 74%,rgba(6,9,15,.62) 100%)
}
.static-inner{
  position:relative;z-index:2;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px var(--gutter) clamp(52px,9vh,80px)
}
.static-inner h1,.static-inner .h1{font-family:var(--display);font-weight:500;line-height:1.06;letter-spacing:-.022em;margin:0 0 1rem;font-size:clamp(2.35rem,8.4vw,3.5rem);max-width:15ch;text-shadow:var(--tshadow)}
.static-inner .band-sub{
  font-size:1.02rem;line-height:1.6;color:#D6D9DE;max-width:44ch;
  margin:1.15rem 0 1.9rem;text-shadow:var(--tshadow)}
.static-inner .chip{margin-bottom:1.5rem;align-self:flex-start}
.static-inner .btn-row .btn{flex:1 1 auto;min-width:190px}

/* THE FIVE STATIC-HERO GATES. character for character identical in site.js. */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:block}
}
/* scrub-capable but merely short: keep the scrub, drop what has no room */
@media (max-height:560px){.ring,.cue{display:none}}

/* ============================================================
   SECTIONS. No two neighbours share a layout skeleton.
   ============================================================ */

.sec-head{max-width:64ch;margin-bottom:clamp(44px,6vw,72px)}
.sec-head h2{margin-bottom:.55em}
.sec-head .lede{margin:0}

/* ---- 01 THE PROBLEM : an editorial ledger of leaks -------------------- */
.problem{background:linear-gradient(180deg,var(--canvas) 0%,var(--canvas-deep) 100%)}
.problem-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(30px,5vw,84px);align-items:end;margin-bottom:clamp(50px,6vw,80px)
}
.problem-top h2{font-size:clamp(2.1rem,4.6vw,3.6rem)}
.problem-top .lede{margin:0}
.leaks{border-top:1px solid var(--hairline)}
.leak{
  display:grid;grid-template-columns:auto minmax(0,.92fr) minmax(0,1.1fr);
  gap:clamp(18px,3.4vw,54px);align-items:baseline;
  padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--hairline);
  position:relative;transition:background .5s var(--ease)
}
.leak::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--signal),transparent 62%);
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease-out)
}
.leak:hover::after{transform:scaleX(1)}
.leak-n{
  font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--signal);
  letter-spacing:.11em;padding-top:.35em
}
.leak h3{font-size:clamp(1.18rem,1.9vw,1.6rem);letter-spacing:-.014em}
.leak p{color:var(--text-secondary);font-size:.99rem;line-height:1.66;margin:0}
.leak p em{color:#B9C3CE;font-style:italic}
@media (max-width:820px){
  .problem-top{grid-template-columns:1fr;align-items:start}
  .leak{grid-template-columns:auto 1fr;gap:14px 20px}
  .leak p{grid-column:2}
}

/* ---- 02 HOW VERIXA WORKS : a ladder with a drawn spine ---------------- */
.method{position:relative}
.method-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.35fr);
  gap:clamp(34px,6vw,96px);align-items:start}
.method-aside{position:sticky;top:120px}
.method-aside h2{margin-bottom:.5em}
.stages{position:relative;display:grid;gap:0}
.stage-spine{
  position:absolute;left:23px;top:26px;bottom:26px;width:1px;background:var(--hairline)
}
.stage-spine::after{
  content:"";position:absolute;inset:0 auto 0 0;width:1px;
  height:var(--spine,0%);
  background:linear-gradient(180deg,var(--signal) 0%,var(--accent) 100%);
  box-shadow:0 0 10px rgba(198,161,91,.28)
}
.stg{
  position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);
  gap:clamp(18px,2.4vw,30px);padding:clamp(20px,2.6vw,32px) 0;align-items:start
}
.stg + .stg{border-top:1px solid var(--hairline)}
.stg-dot{
  width:47px;height:47px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--canvas);border:1px solid var(--rule);
  font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--text-tertiary);
  position:relative;z-index:2;
  transition:border-color .6s var(--ease),color .6s var(--ease),box-shadow .6s var(--ease)
}
.stg.in .stg-dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 5px rgba(198,161,91,.07)}
.stg h3{font-size:clamp(1.2rem,1.85vw,1.56rem);margin-bottom:.42em}
.stg h3 span{font-family:var(--mono);font-size:.75rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.85em;font-weight:500}
.stg p{color:var(--text-secondary);font-size:1rem;margin:0 0 1rem;max-width:56ch}
.stg-ex{
  border-left:1px solid var(--rule);padding:2px 0 2px 16px;margin-top:1.1rem;
  font-size:.9rem;line-height:1.6;color:var(--text-tertiary)
}
.stg-ex b{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-secondary);display:block;margin-bottom:.5em}
@media (max-width:900px){
  .method-grid{grid-template-columns:1fr;gap:40px}
  .method-aside{position:static}
  .stage-spine{left:19px}
  .stg{grid-template-columns:40px minmax(0,1fr);gap:16px}
  .stg-dot{width:39px;height:39px;font-size:.75rem}
}

/* ---- 03 THE VERIFICATION HOLD : the one interactive moment ------------ */
.hold-sec{background:var(--canvas-deep);position:relative;overflow:hidden}
.hold-sec::before{
  content:"";position:absolute;left:50%;top:50%;width:min(900px,120vw);height:min(900px,120vw);
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(127,168,201,.09),transparent 66%);
  transition:background 1.2s var(--ease)
}
.hold-sec.done::before{background:radial-gradient(circle,rgba(198,161,91,.13),transparent 66%)}
.hold-wrap{position:relative;text-align:center;max-width:820px;margin-inline:auto}
.hold-claim{
  font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.24;
  letter-spacing:-.016em;color:var(--signal);margin:0 0 .55em;
  transition:color 1s var(--ease)
}
.hold-sec.done .hold-claim{color:var(--accent)}
.hold-status{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--text-tertiary);min-height:1.5em;margin:0 0 2.4rem
}
.hold-btn{
  position:relative;width:132px;height:132px;border-radius:50%;
  background:transparent;border:1px solid var(--border-interactive);
  display:grid;place-items:center;margin:0 auto 2rem;cursor:pointer;
  font-family:var(--mono);font-size:.63rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-secondary);
  transition:border-color .5s var(--ease),color .5s var(--ease),transform .4s var(--ease-out);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none
}
.hold-btn:hover{border-color:var(--accent);color:var(--text-primary)}
.hold-btn:active{transform:scale(.97)}
.hold-btn svg{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  transform:rotate(-90deg);pointer-events:none}
.hold-btn svg circle{transition:none}
.hold-sec.done .hold-btn{border-color:var(--accent);color:var(--accent)}
.hold-steps{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 2.6rem;
  list-style:none;padding:0
}
.hold-steps li{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-tertiary);
  border:1px solid var(--hairline);border-radius:2px;padding:7px 12px;
  transition:color .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease)
}
.hold-steps li.on{color:var(--accent);border-color:var(--accent-muted);background:rgba(198,161,91,.06)}
.hold-out{
  text-align:left;border:1px solid var(--hairline);border-radius:3px;
  background:var(--panel);padding:clamp(20px,3vw,30px);
  opacity:0;transform:translateY(12px);
  transition:opacity .7s var(--ease),transform .7s var(--ease-out),border-color .7s var(--ease)
}
.hold-sec.done .hold-out{opacity:1;transform:none;border-color:var(--accent-muted)}
.hold-out .kicker{margin-bottom:1rem}
.hold-out ol{margin:0;padding-left:1.25em;color:var(--text-secondary);font-size:.95rem;line-height:1.7}
.hold-out ol li{margin-bottom:.5em}
.hold-out ol li:last-child{margin-bottom:0}
.hold-out ol li b{font-family:var(--mono);font-size:.75rem;color:var(--accent);font-weight:500}
.hold-note{margin-top:1.6rem;font-size:.84rem;color:var(--text-tertiary);text-align:center}

/* ---- 04 SERVICES : disclosure cards ----------------------------------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.svc{
  background:var(--canvas);padding:clamp(26px,3vw,38px);
  display:flex;flex-direction:column;position:relative;
  transition:background .55s var(--ease)
}
.svc:hover{background:var(--panel)}
.svc-n{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.15em;
  color:var(--text-tertiary);margin-bottom:1.5rem;transition:color .5s var(--ease)}
.svc:hover .svc-n{color:var(--accent)}
.svc h3{font-size:clamp(1.14rem,1.65vw,1.38rem);margin-bottom:.6em;letter-spacing:-.012em}
.svc > p{color:var(--text-secondary);font-size:.955rem;line-height:1.66;margin:0 0 1.6rem}
.svc dl{margin:auto 0 0;padding-top:1.4rem;border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:auto 1fr;gap:.55em 1.1em;align-items:baseline}
.svc dt{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
.svc dd{margin:0;font-size:.885rem;line-height:1.55;color:var(--text-secondary)}
@media (max-width:560px){
  .svc dl{grid-template-columns:1fr;gap:.2em}
  .svc dd{margin-bottom:.7em}
}

/* ---- 05 EVIDENCE : a delivered artifact, rendered as one -------------- */
.evidence{background:var(--canvas-deep)}
.ev-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.doc{
  background:var(--panel);border:1px solid var(--rule);border-radius:3px;
  overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.9)
}
.doc-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px clamp(18px,2.4vw,26px);border-bottom:1px solid var(--hairline);
  background:var(--panel-raised)
}
.doc-bar .t{font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;color:var(--text-secondary)}
.stamp{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--signal);
  border:1px solid rgba(127,168,201,.4);border-radius:2px;padding:4px 9px;
  background:var(--signal-muted)
}
.doc-body{padding:clamp(20px,3vw,34px)}
.doc-body h3{font-size:clamp(1.16rem,1.8vw,1.48rem);margin-bottom:.7em;letter-spacing:-.014em}
.finding{border-top:1px solid var(--hairline);padding:1.35rem 0}
.finding:first-of-type{border-top:0;padding-top:0}
.finding:last-child{padding-bottom:0}
.finding .f-h{display:flex;align-items:baseline;gap:.8em;margin-bottom:.6em;flex-wrap:wrap}
.finding .f-id{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--accent);
  letter-spacing:.1em;flex:none}
.finding .f-t{font-weight:600;font-size:1rem;color:var(--text-primary)}
.finding p{margin:0 0 .8em;font-size:.93rem;line-height:1.66;color:var(--text-secondary)}
.finding p:last-child{margin-bottom:0}
.src{
  display:block;font-family:var(--mono);font-size:.75rem;line-height:1.6;
  color:var(--text-tertiary);border-left:1px solid var(--rule);padding-left:13px
}
.src b{color:var(--signal);font-weight:500}
.ev-aside h2{margin-bottom:.5em}
.ev-aside .lede{margin-bottom:1.6rem}
.ev-list{list-style:none;margin:0 0 1.9rem;padding:0;border-top:1px solid var(--hairline)}
.ev-list li{padding:.85rem 0;border-bottom:1px solid var(--hairline);
  font-size:.93rem;color:var(--text-secondary);display:flex;gap:.8em;align-items:baseline}
.ev-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);
  flex:none;transform:translateY(-.2em)}
@media (max-width:900px){.ev-grid{grid-template-columns:1fr}}

/* ---- 06 ACADEMY : module rows with the video architecture ------------- */
.mods{display:grid;gap:1px;background:var(--hairline);border-block:1px solid var(--hairline)}
.mod{
  background:var(--canvas);display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(22px,4vw,56px);align-items:center;
  padding:clamp(24px,3vw,38px) 0;
  transition:background .55s var(--ease)
}
.mod:hover{background:var(--panel)}
.mod-txt .kicker{margin-bottom:1rem}
.mod-txt h3{font-size:clamp(1.2rem,2vw,1.62rem);margin-bottom:.5em;letter-spacing:-.014em}
.mod-txt p{color:var(--text-secondary);font-size:.96rem;margin:0 0 1.2rem;max-width:52ch}
.mod-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.3rem;padding:0;list-style:none}
.mod-meta li{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-tertiary);
  border:1px solid var(--hairline);border-radius:2px;padding:5px 10px
}
@media (max-width:820px){.mod{grid-template-columns:1fr;gap:22px}}

/* ---- THE VIDEO SYSTEM (reusable, every page) -------------------------- */
.vid{
  position:relative;aspect-ratio:16/9;width:100%;
  background:var(--panel-raised);border:1px solid var(--rule);border-radius:3px;
  overflow:hidden;display:grid;place-items:center;
  transition:border-color .5s var(--ease)
}
.vid:hover{border-color:var(--border-interactive)}
.vid-poster{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42}
.vid-grid{
  position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(159,172,187,.05) 39px 40px),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(159,172,187,.05) 39px 40px)
}
.vid-inner{position:relative;text-align:center;padding:20px;display:grid;gap:14px;justify-items:center}
.vid-play{
  width:62px;height:62px;border-radius:50%;
  border:1px solid var(--border-interactive);background:rgba(9,14,22,.6);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease-out)
}
.vid-play svg{width:15px;height:17px;fill:var(--text-primary);margin-left:3px;
  transition:fill .45s var(--ease)}
.vid:hover .vid-play{border-color:var(--accent);background:rgba(198,161,91,.1);transform:scale(1.06)}
.vid:hover .vid-play svg{fill:var(--accent)}
.vid-label{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-tertiary)
}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.vid.playing .vid-inner,.vid.playing .vid-grid,.vid.playing .vid-poster{display:none}
.vid-dur{
  position:absolute;right:11px;bottom:11px;font-family:var(--mono);font-size:.75rem;
  color:var(--text-secondary);background:rgba(6,9,15,.72);border-radius:2px;padding:3px 7px
}
.vid-cap{
  margin-top:12px;font-size:.83rem;color:var(--text-tertiary);line-height:1.55;
  display:flex;gap:.7em;align-items:baseline
}
.vid-cap b{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--signal);flex:none}
.transcript{margin-top:14px;border-top:1px solid var(--hairline);padding-top:14px}
.transcript summary{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-secondary);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.6em;transition:color .35s var(--ease)
}
.transcript summary::-webkit-details-marker{display:none}
.transcript summary::before{content:"+";font-size:1rem;line-height:1;color:var(--accent)}
.transcript[open] summary::before{content:"\2212"}
.transcript summary:hover{color:var(--text-primary)}
.transcript-body{padding-top:14px;font-size:.9rem;line-height:1.7;color:var(--text-secondary)}

/* ---- 07 CTA + FORM ---------------------------------------------------- */
.cta-sec{background:linear-gradient(180deg,var(--canvas-deep),var(--canvas))}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(36px,6vw,88px);align-items:start}
.cta-copy h2{font-size:clamp(2.1rem,4.4vw,3.4rem);margin-bottom:.5em}
.cta-copy .lede{margin-bottom:2rem}
.cta-facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.cta-facts li{padding:1rem 0;border-bottom:1px solid var(--hairline);display:grid;
  grid-template-columns:auto 1fr;gap:1.1em;align-items:baseline}
.cta-facts b{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
.cta-facts span{font-size:.94rem;color:var(--text-secondary)}
.cta-facts a{font-size:.94rem}

form{background:var(--panel);border:1px solid var(--hairline);border-radius:3px;
  padding:clamp(24px,3.4vw,38px)}
.f-row{margin-bottom:19px}
.f-row:last-of-type{margin-bottom:24px}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}
input,textarea,select{
  width:100%;background:var(--canvas);color:var(--text-primary);
  border:1px solid var(--border-interactive);border-radius:2px;
  padding:12px 14px;font-size:.95rem;font-family:var(--body);
  transition:border-color .35s var(--ease),background .35s var(--ease)
}
textarea{resize:vertical;min-height:118px;line-height:1.6}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%239FACBB' stroke-width='1.3' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
input::placeholder,textarea::placeholder{color:var(--text-tertiary)}
input:hover,textarea:hover,select:hover{border-color:var(--text-tertiary)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);
  background:var(--canvas-deep)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
.f-note{font-size:.81rem;color:var(--text-tertiary);margin:14px 0 0;line-height:1.55}
form .btn-primary{width:100%}
.f-ok{
  display:none;text-align:center;padding:clamp(26px,4vw,44px) 10px
}
form.sent .f-body{display:none}
form.sent .f-ok{display:block}
.f-ok .seal{width:56px;height:56px;margin:0 auto 20px}
.f-ok h3{margin-bottom:.6em;font-size:1.4rem}
.f-ok p{color:var(--text-secondary);font-size:.94rem;max-width:44ch;margin-inline:auto}
@media (max-width:880px){
  .cta-grid{grid-template-columns:1fr}
  .f-two{grid-template-columns:1fr}
}

/* ---- inner-page furniture -------------------------------------------- */
.phead{padding:clamp(128px,15vh,180px) 0 clamp(52px,7vw,86px);
  border-bottom:1px solid var(--hairline);position:relative}
.phead h1{font-size:clamp(2.3rem,5.4vw,4.1rem);max-width:17ch;margin-bottom:.42em}
.phead .lede{max-width:56ch}
.crumb{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:1.6rem;display:flex;gap:.7em;align-items:center}
.crumb a{color:var(--text-tertiary);text-decoration:none}
.crumb a:hover{color:var(--accent)}

.prin{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.prin > div{background:var(--canvas);padding:clamp(24px,3vw,34px);transition:background .5s var(--ease)}
/* No hover lift on these: they are not clickable, and a usability audit on
   24 September read the hover as a promise that they were. The one item with
   somewhere to go is a real link instead (.skey-go). */
.prin > div.has-link:hover{background:var(--panel)}
.prin .r-go{
  display:inline-flex;align-items:center;gap:.5em;margin-top:.9rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-muted);
  padding-bottom:2px;transition:border-color .25s var(--ease)}
.prin .r-go:hover,.prin .r-go:focus-visible{border-bottom-color:var(--accent)}
a.skey{text-decoration:none;transition:border-color .25s var(--ease),color .25s var(--ease)}
a.skey:hover,a.skey:focus-visible{border-color:var(--accent);color:var(--text-primary)}
a.skey::after{content:"\2193";margin-left:.2em;font-size:.9em}
.prin h3{font-size:1.16rem;margin-bottom:.6em;display:flex;gap:.7em;align-items:baseline}
.prin h3 i{font-family:var(--mono);font-size:.75rem;font-style:normal;font-weight:500;
  color:var(--accent);flex:none}
.prin p{color:var(--text-secondary);font-size:.94rem;margin:0}

.never{border:1px solid var(--accent-muted);border-radius:3px;background:rgba(198,161,91,.045);
  padding:clamp(24px,3.4vw,40px)}
.never h3{margin-bottom:1rem}
.never ul{list-style:none;margin:0;padding:0;
  columns:2;column-gap:clamp(24px,4vw,54px)}
.never li{padding:.62rem 0;border-bottom:1px solid var(--hairline);font-size:.93rem;
  color:var(--text-secondary);break-inside:avoid;display:flex;gap:.7em;align-items:baseline}
.never li::before{content:"\00D7";color:var(--accent);font-size:.9em;flex:none}
@media (max-width:640px){.never ul{columns:1}}

.txt-block{max-width:66ch}
.txt-block h2{margin:clamp(46px,6vw,72px) 0 .6em}
.txt-block h2:first-child{margin-top:0}
.txt-block h3{margin:2.2rem 0 .6em;font-family:var(--body);font-size:1.06rem;font-weight:600}
.txt-block p{color:var(--text-secondary)}
.txt-block ul{color:var(--text-secondary);padding-left:1.15em;margin:0 0 1.2em}
.txt-block li{margin-bottom:.55em}
.txt-block li::marker{color:var(--accent)}

.pull{
  font-family:var(--display);font-size:clamp(1.4rem,2.9vw,2.05rem);line-height:1.3;
  letter-spacing:-.016em;color:var(--text-primary);
  border-left:1px solid var(--accent);padding-left:clamp(20px,2.6vw,32px);
  margin:clamp(38px,5vw,58px) 0;max-width:26ch
}

/* ---- footer ----------------------------------------------------------- */
.foot{border-top:1px solid var(--hairline);background:var(--canvas-deep);
  padding:clamp(56px,7vw,84px) 0 34px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,52px);margin-bottom:clamp(40px,5vw,60px)}
.foot-brand .brand{margin-bottom:1.1rem}
.foot-brand p{font-size:.9rem;color:var(--text-tertiary);max-width:36ch;margin:0}
.foot h2{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:1.1rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.62em}
.foot li a{font-size:.9rem;color:var(--text-tertiary);text-decoration:none;
  transition:color .3s var(--ease)}
.foot li a:hover{color:var(--accent)}
.foot-base{border-top:1px solid var(--hairline);padding-top:26px;
  display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:baseline}
.foot-base p{font-size:.78rem;color:var(--text-tertiary);margin:0;max-width:62ch;line-height:1.6}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:460px){.foot-grid{grid-template-columns:1fr}}

/* ============================================================
   THE ENTRANCE SYSTEM
   IntersectionObserver adds .in. Children arrive in sequence.
   Start AND end states are prefixed with the container class so
   nothing later in the cascade can silently cancel them.
   ============================================================ */
.js .rev .r{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease-out)}
.rev.in .r{opacity:1;transform:none}
.rev.in .r:nth-child(1){transition-delay:0ms}
.rev.in .r:nth-child(2){transition-delay:80ms}
.rev.in .r:nth-child(3){transition-delay:160ms}
.rev.in .r:nth-child(4){transition-delay:240ms}
.rev.in .r:nth-child(5){transition-delay:320ms}
.rev.in .r:nth-child(6){transition-delay:400ms}
.rev.in .r:nth-child(7){transition-delay:480ms}
.rev.in .r:nth-child(8){transition-delay:560ms}

/* RETIRE the stagger once the entrance is done, or every hover on the
   later siblings lags forever. :nth-child counts as a class, so this
   selector must carry equal weight to beat the rules above. */
.rev.in.settled .r:nth-child(n){transition-delay:0ms}

/* simple single-element reveal */
.js .up{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease-out)}
.up.in{opacity:1;transform:none}

/* the self-drawing SVG line */
.js .draw path,.js .draw line,.js .draw circle,.js .draw polyline{
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.9s var(--ease-out)}
.draw.in path,.draw.in line,.draw.in circle,.draw.in polyline{stroke-dashoffset:0}

/* one living element per section, at whisper level, mid-cycle at first paint */
.pulse{position:relative}
.pulse::after{
  content:"";position:absolute;inset:-18px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 44px var(--accent-glow);opacity:0;
  animation:breathe 7s var(--ease) infinite;animation-delay:-2.4s}
@keyframes breathe{0%,100%{opacity:0}50%{opacity:.5}}

/* pause every animation off-screen and on hidden tabs.
   animation-play-state does not inherit, so it is set on everything. */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}
.offscreen,.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused}

/* ============================================================
   REDUCED MOTION honored completely, and in both directions.
   Final states shown. Drives stopped. Positional transforms that
   place an element are re-declared, never blanket-removed.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important
  }
  .rev .r,.rev.in .r,.up,.up.in{opacity:1;transform:none}
  .draw path,.draw line,.draw circle,.draw polyline{stroke-dashoffset:0}
  .pulse::after{opacity:0;animation:none}
  .env::after{animation:none}
  .cue i{animation:none;opacity:.6}
  /* re-apply the transforms that POSITION something, per breakpoint */
  .band{opacity:1}
  .hold-out{opacity:1;transform:none}
  .rail::after{height:100%}
  .stage-spine::after{height:100%}
}

/* the same final states, applied by JS when reduced motion flips ON mid-session */
.pinned .rev .r,.pinned .up{opacity:1 !important;transform:none !important;transition:none !important}
.pinned .draw path,.pinned .draw line,.pinned .draw circle,.pinned .draw polyline{
  stroke-dashoffset:0 !important;transition:none !important}
.pinned .pulse::after{animation:none;opacity:0}
.pinned .env::after{animation:none}
.pinned .hold-out{opacity:1 !important;transform:none !important}

/* ---- decorations never collide with content ---------------------------- */
@media (max-height:620px){.pulse::after{display:none}}

/* ---- print ------------------------------------------------------------- */
@media print{
  .nav,.hero,.static-hero,.rail,.mark,.env,.ring,.cue{display:none !important}
  body{background:#fff;color:#000}
}

/* ============================================================
   THE 3D LAYER
   Real perspective, drawn to canvas. It carries meaning in both
   places it appears: the descent, and the assembly.
   ============================================================ */
.scene{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* the hero scene sits over the composed poster and under the captions,
   so the poster is still what paints first and what remains if scripts fail */
.scene-hero{z-index:1}   /* starts transparent by nature, so it needs no fade */
.stage .poster{z-index:0}
#hero-video{z-index:2}
.stage .scrim,.stage .scrim-top{z-index:3}
.bands{z-index:4}
.ring,.cue{z-index:5}

/* when the cinematic video is present it becomes the top layer and the
   3D field reads as depth behind it */
.stage.video-ready .scene-hero{opacity:.55}

/* the assembly, in the interactive moment */
.hold-stage{
  position:relative;width:min(460px,74vw);aspect-ratio:1;margin:0 auto 6px;
  pointer-events:auto
}
.hold-stage .scene{pointer-events:auto;cursor:grab}
@media (max-width:640px){.hold-stage{width:min(320px,80vw);margin-bottom:0}}
@media (max-height:620px){.hold-stage{width:min(280px,50vw)}}

/* ============================================================
   PAGE-SPECIFIC VISUAL LANGUAGE
   One brand, seven purposes. Each page states its own character
   through structure and density, never through a new palette.
   ============================================================ */

/* the page-kind stripe: a quiet index mark under every inner hero */
.phead .kind{
  display:flex;align-items:baseline;gap:.8em;margin-top:2.2rem;
  padding-top:1.3rem;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-tertiary);flex-wrap:wrap
}
.phead .kind b{color:var(--accent);font-weight:500}
.phead .kind span{color:var(--text-tertiary)}

/* ---- SERVICES : intelligence modules, disclosure driven ------------- */
.mods-list{border-top:1px solid var(--hairline)}
.smod{border-bottom:1px solid var(--hairline)}
.smod > summary{
  list-style:none;cursor:pointer;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:clamp(24px,3.2vw,38px) 0;
  transition:background .5s var(--ease)
}
.smod > summary::-webkit-details-marker{display:none}
.smod > summary:hover{background:rgba(22,32,46,.42)}
.smod-n{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.11em;color:var(--accent)}
.smod-h{min-width:0}
.smod-h h2{font-size:clamp(1.3rem,2.4vw,2rem);margin-bottom:.4em;letter-spacing:-.016em}
.smod-h p{margin:0;color:var(--text-secondary);font-size:.98rem;max-width:62ch}
.smod-x{
  width:34px;height:34px;border:1px solid var(--border-interactive);border-radius:50%;
  display:grid;place-items:center;flex:none;position:relative;
  transition:border-color .4s var(--ease),transform .4s var(--ease-out)
}
.smod-x::before,.smod-x::after{
  content:"";position:absolute;background:var(--text-secondary);
  transition:transform .45s var(--ease-out),background .4s var(--ease)}
.smod-x::before{width:12px;height:1px}
.smod-x::after{width:1px;height:12px}
.smod[open] .smod-x{border-color:var(--accent);transform:rotate(90deg)}
.smod[open] .smod-x::after{transform:scaleY(0)}
.smod > summary:hover .smod-x{border-color:var(--accent)}
.smod > summary:hover .smod-x::before,.smod > summary:hover .smod-x::after{background:var(--accent)}
.smod-body{
  padding:0 0 clamp(28px,3.4vw,44px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:3px;overflow:hidden
}
.smod-cell{background:var(--canvas);padding:clamp(18px,2.2vw,26px)}
.smod-cell h3{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.9em}
.smod-cell.warn h3{color:var(--signal)}
.smod-cell p,.smod-cell li{color:var(--text-secondary);font-size:.9rem;line-height:1.62;margin:0}
.smod-cell ul{margin:0;padding-left:1.1em}
.smod-cell li{margin-bottom:.45em}
.smod-cell li::marker{color:var(--rule)}
.smod-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:clamp(18px,2.4vw,26px)}
@media (max-width:700px){
  .smod > summary{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .smod-x{grid-column:2;justify-self:end;margin-top:10px}
}

/* ---- METHODOLOGY : the pipeline, stage by stage --------------------- */
.stage-full{position:relative;padding-block:clamp(56px,7vw,92px);border-top:1px solid var(--hairline)}
.stage-full:first-of-type{border-top:0}
.stage-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.stage-idx{display:flex;align-items:baseline;gap:.8em;margin-bottom:1.1rem}
.stage-idx b{
  font-family:var(--mono);font-size:2.6rem;font-weight:400;line-height:1;
  color:var(--accent);letter-spacing:-.02em}
.stage-idx span{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary)}
.stage-full h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.5em}
.stage-full .lede{font-size:1.06rem;margin:0}
.io{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:3px;overflow:hidden}
.io > div{background:var(--canvas);padding:clamp(18px,2.4vw,26px);display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:1.1em;align-items:baseline}
.io b{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
.io p{margin:0;color:var(--text-secondary);font-size:.93rem;line-height:1.65}
.io .out b{color:var(--accent)}
@media (max-width:860px){
  .stage-grid{grid-template-columns:1fr;gap:26px}
  .io > div{grid-template-columns:1fr;gap:.4em}
}

/* ---- EVIDENCE : analytical artifacts -------------------------------- */
.status-key{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(34px,4vw,52px)}
.skey{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;border:1px solid var(--hairline);border-radius:2px;
  padding:8px 12px;color:var(--text-tertiary)}
.skey i{width:6px;height:6px;border-radius:50%;flex:none}
.skey.live i{background:var(--accent)}
.skey.demo i{background:var(--signal)}
.skey.none i{background:var(--rule)}
.skey.none{opacity:.68}

.trace{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  border-radius:3px;overflow:hidden;margin-top:clamp(20px,2.6vw,28px)}
.trace-step{background:var(--canvas);padding:clamp(16px,2.2vw,24px);
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:clamp(14px,2vw,26px);align-items:baseline}
.trace-step b{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--signal)}
.trace-step:last-child b{color:var(--accent)}
.trace-step p{margin:0;font-size:.93rem;line-height:1.65;color:var(--text-secondary)}
.trace-step p em{color:var(--text-primary);font-style:normal;font-weight:500}
@media (max-width:640px){.trace-step{grid-template-columns:1fr;gap:.4em}}

.empty-state{
  border:1px dashed var(--rule);border-radius:3px;padding:clamp(26px,3.6vw,42px);
  text-align:center;background:rgba(17,26,38,.4)}
.empty-state h3{font-size:1.16rem;margin-bottom:.6em}
.empty-state p{color:var(--text-secondary);font-size:.94rem;max-width:52ch;margin:0 auto}

/* ---- RESOURCES : editorial index ------------------------------------ */
.res-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(32px,4vw,48px)}
.res-filters span{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-tertiary);
  border:1px solid var(--hairline);border-radius:2px;padding:7px 12px}
.arts{border-top:1px solid var(--hairline)}
.art{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,3vw,44px);align-items:baseline;
  padding:clamp(22px,2.8vw,32px) 0;border-bottom:1px solid var(--hairline);
  text-decoration:none;color:inherit;position:relative;transition:background .5s var(--ease)}
.art:hover{background:rgba(22,32,46,.4);color:inherit}
.art-cat{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--signal);white-space:nowrap}
.art h3{font-size:clamp(1.1rem,1.8vw,1.42rem);margin-bottom:.35em;letter-spacing:-.012em}
.art p{margin:0;color:var(--text-secondary);font-size:.94rem;max-width:64ch}
.art-go{font-family:var(--mono);font-size:.75rem;color:var(--text-tertiary);white-space:nowrap;
  transition:color .4s var(--ease),transform .4s var(--ease-out)}
.art:hover .art-go{color:var(--accent);transform:translateX(4px)}
@media (max-width:760px){
  .art{grid-template-columns:1fr;gap:.5em}
  .art-go{display:none}
}

/* ---- CONTACT : calm conversion -------------------------------------- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:3px;overflow:hidden}
.flow > div{background:var(--canvas);padding:clamp(16px,2.2vw,22px)}
.flow b{display:block;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.7em}
.flow p{margin:0;font-size:.88rem;line-height:1.55;color:var(--text-secondary)}

/* ---- HOME previews : compact, they lead somewhere ------------------- */
.prev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.prev{background:var(--canvas);padding:clamp(22px,2.8vw,32px);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;transition:background .5s var(--ease)}
.prev:hover{background:var(--panel);color:inherit}
.prev-n{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.15em;
  color:var(--text-tertiary);margin-bottom:1.2rem;transition:color .4s var(--ease)}
.prev:hover .prev-n{color:var(--accent)}
.prev h3{font-size:1.1rem;margin-bottom:.5em;letter-spacing:-.01em}
.prev p{margin:0 0 1.3rem;color:var(--text-secondary);font-size:.92rem;line-height:1.6}
.prev-go{margin-top:auto;font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-tertiary);display:flex;align-items:center;gap:.6em;
  transition:color .4s var(--ease)}
.prev:hover .prev-go{color:var(--accent)}
.prev:hover .prev-go svg{transform:translateX(3px)}
.prev-go svg{transition:transform .4s var(--ease-out)}

/* the "read the whole thing" link that ends a preview section */
.more{display:inline-flex;align-items:center;gap:.6em;margin-top:clamp(26px,3vw,38px);
  font-size:.95rem;text-decoration:none;color:var(--accent)}
.more:hover svg{transform:translateX(4px)}
.more svg{transition:transform .4s var(--ease-out)}
.more::after{content:"";position:absolute}

/* problem chips on home */
.dom-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,36px)}
.dom{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);
  border:1px solid var(--hairline);border-radius:2px;padding:10px 14px;
  text-decoration:none;transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.dom:hover{border-color:var(--accent);color:var(--accent);background:rgba(198,161,91,.05)}

/* ============================================================
   REPORT ANATOMY
   A real deliverable, annotated. The visitor opens each part and
   reads what it is for. More useful than another claim about rigour.
   ============================================================ */
.anat{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(28px,4.6vw,68px);align-items:start}
.anat-aside{position:sticky;top:104px}
.anat-aside h2{margin-bottom:.5em}
.anat-legend{list-style:none;margin:1.6rem 0 0;padding:0;border-top:1px solid var(--hairline)}
.anat-legend li{display:grid;grid-template-columns:auto 1fr;gap:.9em;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid var(--hairline);
  font-size:.88rem;color:var(--text-secondary)}
.anat-legend b{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--accent);
  letter-spacing:.1em}

.rdoc{background:var(--panel);border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  box-shadow:0 30px 80px -44px rgba(0,0,0,.9)}
.rdoc-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px clamp(18px,2.4vw,26px);border-bottom:1px solid var(--hairline);background:var(--panel-raised)}
.rdoc-bar .t{font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;color:var(--text-secondary)}
.rdoc-body{padding:clamp(6px,1vw,10px)}

.rpart{border-bottom:1px solid var(--hairline)}
.rpart:last-child{border-bottom:0}
.rpart-h{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,2vw,20px);
  align-items:baseline;padding:clamp(15px,2vw,20px) clamp(12px,1.8vw,18px);
  transition:background .45s var(--ease)}
.rpart-h:hover{background:rgba(22,32,46,.6)}
.rpart-n{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.13em;color:var(--accent)}
.rpart-t{min-width:0}
.rpart-t b{display:block;font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.6em}
.rpart-t span{display:block;font-size:.96rem;line-height:1.6;color:var(--text-primary)}
.rpart-t .quiet{color:var(--text-secondary);font-size:.9rem;margin-top:.4em}
.rpart-x{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--text-secondary);
  white-space:nowrap;transition:color .4s var(--ease)}
.rpart-h:hover .rpart-x{color:var(--accent)}
.rpart-h[aria-expanded="true"]{background:rgba(198,161,91,.055)}
.rpart-h[aria-expanded="true"] .rpart-x{color:var(--accent)}
.rpart-note{
  display:none;padding:0 clamp(12px,1.8vw,18px) clamp(18px,2.2vw,24px)
    clamp(38px,4.4vw,58px);
  border-left:1px solid var(--accent-muted);margin-left:clamp(12px,1.8vw,18px)}
.rpart-note.open{display:block}
.rpart-note p{margin:0;font-size:.9rem;line-height:1.68;color:var(--text-secondary);max-width:62ch}
.rpart-note p + p{margin-top:.7em}
.rpart-note em{color:var(--signal);font-style:normal}
@media (max-width:900px){
  .anat{grid-template-columns:1fr;gap:30px}
  .anat-aside{position:static}
}
@media (max-width:560px){
  .rpart-h{grid-template-columns:auto minmax(0,1fr)}
  .rpart-x{display:none}
}

/* ---- academy: learning objectives + honest video state ------------- */
.objectives{margin:0 0 1.3rem;padding:0;list-style:none}
.objectives li{display:grid;grid-template-columns:auto 1fr;gap:.8em;align-items:baseline;
  padding:.45rem 0;font-size:.92rem;line-height:1.58;color:var(--text-secondary)}
.objectives li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent);flex:none;transform:translateY(-.18em)}
.objectives-h{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-tertiary);margin:0 0 .9rem}
.vid-soon{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);
  border:1px solid rgba(127,168,201,.36);border-radius:2px;padding:6px 11px;
  background:var(--signal-muted)}
.vid.pending .vid-play{cursor:not-allowed;opacity:.5}
.vid.pending:hover .vid-play{border-color:var(--border-interactive);background:rgba(9,14,22,.6);transform:none}
.vid.pending:hover .vid-play svg{fill:var(--text-primary)}

/* ---- resources: article metadata ------------------------------------ */
.art-meta{display:flex;flex-wrap:wrap;gap:.5em 1.3em;margin-top:.8em}
.art-meta span{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-tertiary);display:inline-flex;gap:.5em;align-items:baseline}
.art-meta span i{font-style:normal;color:var(--rule)}

/* ---- about: leadership placeholder ---------------------------------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.person{background:var(--canvas);padding:clamp(22px,2.8vw,30px)}
.person .slot{width:52px;height:52px;border-radius:50%;border:1px dashed var(--rule);
  display:grid;place-items:center;margin-bottom:1.1rem}
.person .slot span{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;color:var(--text-tertiary)}
.person h3{font-size:1.02rem;margin-bottom:.4em}
.person p{margin:0;font-size:.9rem;line-height:1.6;color:var(--text-secondary)}
.person .role{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.7em}

/* ---- approved supporting stills: cold signal, layered inspection, convergence
       Used only where the image carries the section's meaning. ---------------- */
.fig{margin:clamp(26px,3.4vw,44px) 0 0;position:relative}
.fig img{width:100%;height:auto;display:block;border:1px solid var(--hairline);border-radius:3px}
.fig figcaption{
  margin-top:.9rem;font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-tertiary);
  display:flex;gap:.7em;align-items:baseline}
.fig figcaption i{font-style:normal;color:var(--accent);flex:none}
.fig-wide{margin-block:clamp(30px,4vw,52px)}

/* guide pages */
.prose{max-width:720px}
.prose h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin:2.2rem 0 .7rem}
.prose p,.prose li{color:var(--text-secondary);line-height:1.75;font-size:1.02rem}
.prose ol{padding-left:1.2rem}.prose li{margin:.55rem 0}
.prose b{color:var(--text-primary)}
.prose a{color:var(--accent)}
.box{border:1px solid var(--hairline);background:var(--panel);padding:1.4rem 1.6rem;border-radius:6px}
.box h3{margin:0 0 .5rem}

/* ---------- page jump bar ----------------------------------------------- */
/* The services page is ~10,000px tall with six sections and no way to reach
   section five without scrolling past four. This is that way. Sticky under the
   fixed nav, so it is reachable from any depth rather than only from the top. */
.jump{
  position:sticky;top:64px;z-index:90;
  background:rgba(9,14,22,.92);backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)
}
.jump-in{
  display:flex;align-items:center;gap:6px;
  padding:0 var(--gutter);height:48px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.jump-in::-webkit-scrollbar{display:none}
.jump-lab{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-tertiary);flex:none;margin-right:10px
}
.jump a{
  flex:none;text-decoration:none;color:var(--text-secondary);
  font-family:var(--body);font-size:.8125rem;line-height:1;
  padding:8px 12px;border-radius:999px;border:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)
}
.jump a:hover,.jump a:focus-visible{
  color:var(--text-primary);border-color:var(--border-interactive);background:var(--panel)
}
.jump a[aria-current="true"]{
  color:var(--accent);border-color:var(--accent-muted);background:var(--accent-muted)
}
@media (max-width:640px){ .jump-lab{display:none} }

/* Anchored sections must clear both the fixed nav and the sticky jump bar,
   or a jump lands with the heading hidden behind them. */
.jump ~ .section[id],main .section[id]{scroll-margin-top:124px}

/* ---------- terms list -------------------------------------------------- */
/* Access, payment and refund were four paragraphs of prose. They are the three
   things a buyer checks before sending money, so they are now scannable. */
.terms{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:14px;max-width:var(--measure)}
.terms>li{
  padding:14px 18px;background:var(--panel);
  border:1px solid var(--hairline);border-radius:3px
}
.terms b{display:block;color:var(--text-primary);margin-bottom:.35rem;
  font-size:.9375rem;letter-spacing:-.005em}
.terms li>span{display:block;color:var(--text-secondary);font-size:.9375rem;line-height:1.62}
.terms ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.45rem}
.terms ul li{
  color:var(--text-secondary);font-size:.9062rem;line-height:1.58;
  padding-left:1.15rem;position:relative
}
.terms ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent)
}

/* The hold ring was a 1.5px arc; a usability audit on 24 September could not
   tell the button was making progress at all. Thicker arc, plus the number. */
.hold-btn .hold-lab{display:block;line-height:1}
.hold-pct{
  display:block;margin-top:.3rem;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.06em;color:var(--text-tertiary);font-variant-numeric:tabular-nums
}
.hold-sec.done .hold-pct{color:var(--accent)}

/* ---------- price comparison ---------------------------------------------- */
/* Other people's prices, published on our own page. The row for us is marked, but the table is
   not weighted in our favour anywhere else — a comparison that obviously flatters the author is
   read as marketing and believed by nobody. */
.cmp-h{font-family:var(--display);font-size:1.35rem;font-weight:600;letter-spacing:-.01em;
  margin:2.6rem 0 .7rem}
.cmp-wrap{overflow-x:auto;margin:1.2rem 0 1.4rem;max-width:var(--measure)}
.cmp{border-collapse:collapse;width:100%;font-size:.9375rem;min-width:520px}
.cmp th,.cmp td{border:1px solid var(--hairline);padding:10px 14px;text-align:left;
  vertical-align:top}
.cmp th{background:var(--panel);color:var(--text-secondary);font-family:var(--body);
  font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.cmp td{color:var(--text-secondary)}
.cmp tr.us td{background:var(--accent-muted);color:var(--text-primary)}
.cmp tr.us td b{color:var(--accent)}

/* ---------- resources: the free download ---------------------------------- */
.res-lead{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,3.4vw,52px);
  align-items:start;background:var(--panel);border:1px solid var(--hairline);border-radius:4px;
  padding:clamp(24px,3vw,38px)}
.res-lead-body p{color:var(--text-secondary);font-size:.9375rem;margin:0 0 1.1rem;
  max-width:52ch}
.res-n{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;color:var(--accent);
  margin:0 0 .3rem !important}
.res-lead-cta .btn{width:100%;justify-content:center}
.res-note{color:var(--text-tertiary);font-size:.875rem;line-height:1.6;margin:1.1rem 0 0}
.res-note b{color:var(--text-secondary)}
@media (max-width:820px){ .res-lead{grid-template-columns:1fr} }

/* ---------- the signature block ------------------------------------------ */
/* Written as a signed letter, because that is what the section is: text first, then the person
   who wrote it. The earlier version put a 228x313 portrait above the words, which on a phone took
   37% of the screen and read as a CV photo rather than a company. The professional standard for a
   headshot in a credibility block is 80-120px, square or round. */
.sign-letter{max-width:var(--measure);
  /* every other section's kicker sits 20px below the rail mark; measured, not guessed. Without
     this the mark prints on top of the word and the rail reads "E-07 ANSWERS". */
  padding-top:20px}
.sign-letter .lede{max-width:60ch}
.sign-off{
  display:flex;align-items:flex-start;gap:clamp(14px,1.8vw,22px);
  margin:2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--hairline)}
.sign-avatar{
  width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover;
  /* the frame is portrait and the face sits in its upper third, so a centred crop would cut the
     head off — pull the crop upward */
  object-position:50% 22%;
  border:1px solid var(--hairline);background:var(--panel)}
.sign-name{font-family:var(--display);font-size:1.125rem;font-weight:600;
  color:var(--text-primary);margin:0 0 .15rem;letter-spacing:-.005em}
.sign-role{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .6rem}
.sign-avail{color:var(--text-tertiary);font-size:.875rem;line-height:1.6;margin:0;max-width:46ch}
@media (max-width:520px){
  .sign-avatar{width:56px;height:56px}
  .sign-off{gap:14px}
}

/* ---------- faq ----------------------------------------------------------- */
.faq{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  border-radius:4px;overflow:hidden;max-width:var(--measure)}
.faq details{background:var(--canvas)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 22px;font-size:1.0625rem;
  color:var(--text-primary);display:flex;gap:16px;align-items:baseline;
  transition:background .25s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);color:var(--accent);flex:none;
  font-size:1rem;line-height:1.4}
.faq details[open] summary::before{content:"\2212"}
.faq summary:hover{background:var(--panel)}
.faq details[open] summary{background:var(--panel)}
.faq details>div{padding:0 22px 20px 56px}
.faq details p{color:var(--text-secondary);font-size:.9375rem;line-height:1.66;margin:0 0 .85rem}
.faq details p:last-child{margin-bottom:0}
@media (max-width:560px){ .faq details>div{padding-left:22px} }

/* ---------- the work, shown --------------------------------------------- */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(18px,2.4vw,30px);margin:clamp(28px,3.4vw,44px) 0 1.6rem}
.work-grid figure{margin:0}
.work-grid img{display:block;width:100%;height:auto;border:1px solid var(--hairline);
  border-radius:4px;background:var(--panel)}
.work-grid figcaption{margin-top:.8rem;color:var(--text-secondary);font-size:.9062rem;
  line-height:1.55}
.band-note{font-size:.875rem;color:var(--text-tertiary);margin:1rem 0 0}
.band-note a{color:var(--accent)}

/* ---- 4 Oct: evidence reads as explanation first, image second. A 380px chart before the
   reader knows what to look at is noise; a small thumbnail after the sentence is proof. -- */
.work-list{list-style:none;margin:clamp(24px,3vw,36px) 0 1.6rem;padding:0;max-width:820px;
  border-top:1px solid var(--hairline)}
.work-list li{display:grid;grid-template-columns:auto 1fr 112px;gap:clamp(14px,2vw,24px);
  align-items:center;padding:18px 0;border-bottom:1px solid var(--hairline)}
.work-n{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--accent);align-self:start;padding-top:.2rem}
.work-h{color:var(--text-primary);font-weight:600;margin:0 0 .3rem}
.work-txt p:not(.work-h){color:var(--text-secondary);font-size:.9375rem;line-height:1.6;margin:0}
.work-thumb{display:block;border:1px solid var(--hairline);border-radius:4px;overflow:hidden;
  background:var(--panel);transition:border-color .2s var(--ease)}
.work-thumb:hover,.work-thumb:focus-visible{border-color:var(--accent)}
.work-thumb img{display:block;width:100%;height:auto}
@media (max-width:560px){.work-list li{grid-template-columns:1fr 84px}.work-n{display:none}}

/* team portraits: a face, not a poster */
.person img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  display:block;margin:0 0 1.1rem;border:1px solid var(--hairline);background:var(--panel)}

/* ---- 4 Oct: what we sell, said in the first screen on every device ---------------- */
.offer2{padding:clamp(40px,6vw,72px) 0 clamp(20px,3vw,32px)}
.offer2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(14px,2vw,22px)}
.offer2-card{display:flex;flex-direction:column;gap:.55rem;padding:clamp(20px,2.6vw,28px);
  border:1px solid var(--hairline);border-radius:6px;background:var(--panel);color:inherit;
  text-decoration:none;transition:border-color .2s var(--ease)}
.offer2-card:hover,.offer2-card:focus-visible{border-color:var(--accent)}
.offer2-for{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}
.offer2-card h2{font-size:clamp(1.35rem,4.6vw,1.7rem);margin:0;line-height:1.2}
.offer2-card p{margin:0;color:var(--text-secondary);font-size:.9688rem;line-height:1.6}
.offer2-price{margin-top:auto!important;padding-top:.6rem;color:var(--text-primary)!important;font-weight:600}

/* ---------- VERIXA in 100 seconds (intro film) ---------- */
.film-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,88px);align-items:center}
.film-points{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.6rem;color:var(--text-secondary)}
.film-points li{position:relative;padding-left:1.4rem;line-height:1.55}
.film-points li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:1px;background:var(--accent)}
.film-transcript{margin-top:1.6rem;border-top:1px solid var(--hairline);padding-top:1rem;color:var(--text-secondary)}
.film-transcript summary{cursor:pointer;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.film-transcript summary:hover{color:var(--accent-hover)}
.film-transcript p{max-width:var(--measure);line-height:1.65;margin:.9rem 0 0}
.film-frame{position:relative;margin:0;justify-self:center;width:min(100%,380px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;
  background:var(--panel);border:1px solid var(--rule);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(198,161,91,.08)}
.film-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.film-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.8rem;
  padding-bottom:18%;border:0;cursor:pointer;color:var(--text-primary);
  background:linear-gradient(to top,rgba(6,9,15,.82) 0%,rgba(6,9,15,.15) 45%,rgba(6,9,15,0) 70%)}
.film-play[hidden]{display:none}
.film-play-icon{width:72px;height:72px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 10px var(--accent-muted);
  transition:transform .25s var(--ease-out),background .25s var(--ease)}
.film-play-icon::after{content:"";display:block;margin:24px 0 0 29px;border-left:20px solid var(--canvas);border-top:12px solid transparent;border-bottom:12px solid transparent}
.film-play:hover .film-play-icon,.film-play:focus-visible .film-play-icon{transform:scale(1.07);background:var(--accent-hover)}
.film-play:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.film-play-label{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:860px){.film-grid{grid-template-columns:1fr}.film-frame{order:-1;width:min(100%,340px)}}
@media (prefers-reduced-motion:reduce){.film-play-icon{transition:none}}

/* ---------- case study ---------- */
.cs-title{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.08;max-width:20ch;margin:.4rem 0 1.2rem}
.cs-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1px;margin:2.2rem 0 0;background:var(--hairline);border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.cs-facts div{background:var(--panel);padding:16px 18px}
.cs-facts dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.cs-facts dd{margin:0;color:var(--text-primary)}
.cs-shots{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:start}
.cs-shot{margin:0}
.cs-shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--rule);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.cs-shot figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary);margin-top:.7rem}
@media (max-width:760px){.cs-shots{grid-template-columns:1fr}.cs-shot--phone{max-width:300px;justify-self:center}}
.work-card{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(18px,3vw,28px);
  border:1px solid var(--rule);border-radius:16px;background:var(--panel);text-decoration:none;color:inherit;transition:border-color .2s var(--ease)}
.work-card:hover,.work-card:focus-visible{border-color:var(--accent)}
.work-card img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--hairline)}
.work-card h3{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);margin:.3rem 0 .8rem}
.work-card .more{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
@media (max-width:760px){.work-card{grid-template-columns:1fr}}

/* 8 nav items: keep one line between the hamburger breakpoint and 1240px */
@media (min-width:961px) and (max-width:1240px){.nav-links{gap:13px}.nav-links a{font-size:.8rem}.nav-cta .btn{padding-inline:14px}}
@media (min-width:961px) and (max-width:1060px){.nav-links a[href="demo/"]{display:none}}

/* ---------- Website demos (index + website-demos.html) ---------- */
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.2vw,24px)}
.demo-card{display:flex;flex-direction:column;gap:.5rem;padding:clamp(14px,2vw,20px);border:1px solid var(--rule);border-radius:14px;
  background:var(--panel);color:inherit;text-decoration:none;transition:border-color .2s var(--ease)}
.demo-card:hover,.demo-card:focus-visible{border-color:var(--accent)}
.demo-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:9px;border:1px solid var(--hairline);margin-bottom:.5rem}
.demo-card h3{font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.75rem);margin:0;line-height:1.2}
.demo-card p{margin:0;color:var(--text-secondary);font-size:.9688rem;line-height:1.6}
.demo-card .more{margin-top:auto;padding-top:.5rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.demo-note{margin:1.4rem 0 0;max-width:72ch;color:var(--text-secondary);font-size:.9rem;line-height:1.6}
@media (max-width:760px){.demo-grid{grid-template-columns:1fr}}
.demo-shot{position:relative;display:block}
.demo-badge{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;background:rgba(9,14,22,.82);border:1px solid var(--accent);
  color:var(--accent);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.demo-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:1.8rem 0 0}
.demo-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:clamp(28px,4vw,48px);
  padding:clamp(20px,3vw,32px);border:1px solid var(--rule);border-radius:14px;background:var(--panel)}
.demo-panel h2{font-size:clamp(1.2rem,2vw,1.5rem);margin:0}
.demo-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,24px)}
.demo-stat{padding:clamp(18px,2.4vw,26px);border:1px solid var(--rule);border-radius:14px;background:var(--panel)}
.demo-stat p{margin:0;color:var(--text-secondary);line-height:1.55}
.demo-stat .demo-num{font-family:var(--display);font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:var(--accent);margin-bottom:.6rem}
.demo-stat .demo-src{margin-top:.9rem;font-size:.8rem}
.demo-steps{list-style:decimal;padding-left:1.2rem}
.demo-steps li{padding-left:.3rem}
.demo-steps li::before{display:none}
@media (max-width:760px){.demo-panel,.demo-stats{grid-template-columns:1fr}}

/* ============================================================
   19 Oct 2026: the scroll-driven 3D hero is retired. The still hero is the hero for everyone,
   with a calm entrance in the manner of the demo sites, an October offer card, and a wide film.
   ============================================================ */
.hero{display:none !important}
.static-hero{display:block}
.static-hero .poster-still{animation:vx-kenburns 18s ease-out both}
.static-inner > *{opacity:0;transform:translateY(18px);animation:vx-rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.static-inner > *:nth-child(1){animation-delay:.15s}
.static-inner > *:nth-child(2){animation-delay:.3s}
.static-inner > *:nth-child(3){animation-delay:.5s}
.static-inner > *:nth-child(4){animation-delay:.7s}
@keyframes vx-rise{to{opacity:1;transform:none}}
@keyframes vx-kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}

.oct-offer{padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px) 0;max-width:1180px;margin:0 auto}
.oo-card{display:flex;align-items:center;gap:clamp(18px,3vw,36px);padding:clamp(18px,2.6vw,28px) clamp(18px,3vw,36px);
  border:1px solid rgba(168,141,94,.55);border-radius:18px;background:linear-gradient(120deg,rgba(14,27,44,.96),rgba(14,27,44,.86));
  box-shadow:0 18px 50px -24px rgba(0,0,0,.6);opacity:0;transform:translateY(16px);animation:vx-rise .9s .9s cubic-bezier(.2,.7,.2,1) forwards}
.oo-photo{position:relative;flex:0 0 auto;width:96px;height:96px}
.oo-photo img{position:relative;z-index:1;width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #0E1B2C}
.oo-ring{position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from 0deg,#E6D8B8,#A88D5E,#0E1B2C,#E6D8B8);animation:vx-spin 6s linear infinite}
.oo-badge{position:absolute;z-index:2;right:-10px;bottom:-6px;background:#E6D8B8;color:#0E1B2C;font:700 .82rem/1 Inter,system-ui,sans-serif;
  padding:.42rem .5rem;border-radius:999px;box-shadow:0 6px 16px -6px rgba(0,0,0,.5);animation:vx-pulse 2.4s ease-in-out infinite}
.oo-copy{flex:1 1 auto;min-width:0}
.oo-kicker{margin:0 0 .3rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#E6D8B8}
.oo-copy h2{margin:0 0 .55rem;font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.2;color:#fff}
.oo-prices{margin:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.92rem;color:rgba(255,255,255,.82)}
.oo-prices s{opacity:.55;margin-right:.2rem}.oo-prices b{color:#E6D8B8}
.oo-cta{flex:0 0 auto}
@keyframes vx-spin{to{transform:rotate(360deg)}}
@keyframes vx-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (max-width:720px){.oo-card{flex-direction:column;text-align:center}.oo-prices{justify-content:center}.oo-cta{width:100%}}

.film-wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.film-frame-wide{margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(168,141,94,.4);box-shadow:0 24px 60px -30px rgba(0,0,0,.65)}
.film-frame-wide video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0E1B2C}
@media (max-width:900px){.film-wide{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .static-hero .poster-still,.static-inner > *,.oo-card,.oo-ring,.oo-badge{animation:none;opacity:1;transform:none}
}
.film-frame.film-frame-wide{aspect-ratio:16/9 !important;height:auto !important;max-width:none !important;width:100% !important;padding:0 !important;background:#0E1B2C}
.film-frame.film-frame-wide video{position:static !important;width:100% !important;height:100% !important;object-fit:cover}

/* ---- services row: an endless, hover-paused marquee of cards, after the Bonanza dishes row ---- */
.svc-row{padding:clamp(56px,8vw,110px) 0;overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.svc-row h2 em{font-style:italic;color:var(--accent)}
.svc-viewport{overflow:hidden;margin:clamp(24px,4vw,44px) 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.svc-track{list-style:none;margin:0;padding:0;display:flex;gap:22px;width:max-content;animation:svc-marquee 60s linear infinite}
.svc-viewport:hover .svc-track{animation-play-state:paused}
@keyframes svc-marquee{to{transform:translateX(calc(-50% - 11px))}}
.svc-card{flex:0 0 auto;width:260px}
@media (min-width:768px){.svc-card{width:300px}}
.svc-tilt{transition:transform .5s var(--ease);transform-style:preserve-3d;will-change:transform}
.svc-fig{position:relative;margin:0;aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:1px solid rgba(198,161,91,.28);
  background:radial-gradient(120% 90% at 30% 20%,#1d2d44 0%,#111a26 55%,#0b121c 100%)}
.svc-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.4s ease-out}
.svc-card:hover .svc-fig img{transform:scale(1.06)}
.svc-art{position:absolute;inset:0 0 38%;display:grid;place-items:center;color:var(--accent)}
.svc-art svg{width:42%;height:auto;transition:transform 1.4s ease-out,filter .6s}
.svc-card:hover .svc-art svg{transform:scale(1.08);filter:drop-shadow(0 0 18px rgba(198,161,91,.45))}
.svc-fig figcaption{position:absolute;inset:auto 0 0 0;padding:3.2rem 1.15rem 1.15rem;background:linear-gradient(to top,rgba(6,9,15,.92),rgba(6,9,15,.55) 60%,transparent);display:grid;gap:.3rem}
.svc-fig b{font:500 1.28rem/1.2 var(--display);color:#F3F0E8}
.svc-fig figcaption > span:not(.svc-price){font-size:.86rem;line-height:1.45;color:rgba(236,234,228,.75)}
.svc-price{justify-self:start;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:#0E1B2C;background:#E6D8B8;border-radius:999px;padding:.28rem .6rem;margin-bottom:.2rem}
.svc-price s{opacity:.6;margin-right:.25rem}
@media (prefers-reduced-motion:reduce){.svc-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.svc-card[aria-hidden]{display:none}}
.svc-fig img ~ figcaption{padding-top:5rem;background:linear-gradient(to top,rgba(6,9,15,.97) 0%,rgba(6,9,15,.88) 45%,rgba(6,9,15,.35) 80%,transparent)}
.platforms{max-width:1180px;margin:0 auto;padding:clamp(28px,4vw,44px) clamp(16px,4vw,40px) 0;text-align:center}
.pf-kicker{margin:0 0 1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-tertiary)}
.pf-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,4vw,56px)}
.pf-row li{display:grid;gap:.2rem;opacity:.82;transition:opacity .4s,transform .4s;opacity:0;transform:translateY(10px);animation:vx-rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.pf-row li:nth-child(1){animation-delay:1.1s}.pf-row li:nth-child(2){animation-delay:1.25s}.pf-row li:nth-child(3){animation-delay:1.4s}.pf-row li:nth-child(4){animation-delay:1.55s}
.pf-row li:hover{transform:translateY(-2px)}
.pf-row b{font:600 1.55rem/1 var(--body);letter-spacing:-.02em;color:#ECEAE4}
.pf-row span{font-size:.76rem;color:var(--text-tertiary)}
.pf-note{margin:.9rem 0 0;font-size:.7rem;color:var(--text-tertiary);opacity:.8}
@media (prefers-reduced-motion:reduce){.pf-row li{animation:none;opacity:.82;transform:none}}