/* ============================================================
   VERAX OUTREACH — "THE SYSTEM UNDERNEATH"

   A studio that sells the machinery should look like machinery.
   This sheet is built on three ideas:

     1. Dark, so the work is the only bright thing on the page.
     2. Hairlines and mono labels, so structure is visible rather
        than implied. Every section is numbered and ruled, the way
        a schematic is.
     3. Short, precise motion. Nothing drifts or floats: things
        arrive in 180ms and stop.

   The markup contract is unchanged, so site.js keeps working: the
   class and id vocabulary here matches what the script queries.
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  color-scheme:dark;

  /* surfaces, darkest to lightest */
  --canvas:#0A0C0F;
  --beat:#070B18;          /* the deep blue beat the globe sits in */
  --surface:#12151A;
  --surface-2:#181C23;
  --surface-3:#1E232B;

  /* hairlines */
  --line:#23282F;
  --line-2:#333A44;
  --line-3:#49525F;

  /* ink */
  --text:#F4F6F8;
  --text-dim:#98A1AE;      /* 7.6:1 on canvas */
  --text-faint:#8A929F;    /* 6.2:1 on canvas, 5.0:1 on the lightest surface */

  /* the one accent, taken off the logo gradient */
  --accent:#3D7BFF;        /* 5.1:1 on canvas */
  --accent-deep:#1E4FD8;
  --accent-soft:#7FB4FF;
  --accent-ghost:rgba(61,123,255,.14);

  --warn:#FF8A6B;          /* form errors, 6.4:1 on canvas */

  --display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* fast and mechanical, never floaty */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t:180ms;

  /* type over footage: a dark halo, the inverse of the old light one */
  --tshadow:0 1px 2px rgba(0,0,0,.55),0 2px 20px rgba(7,9,12,.85);

  --gut:clamp(20px,5vw,72px);
  --maxw:1280px;
  --rule:1px solid var(--line);
}

/* ============================================================
   BASE
   ============================================================ */
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv05" 1,"cv08" 1;
}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{display:block;max-width:100%}
/* the build wraps every JPEG in <picture> for the WebP source; taking the
   wrapper out of layout means the figure rules below still size the <img> */
picture{display:contents}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul{list-style:none;padding:0}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:#04070D}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#04070D;
  padding:12px 18px;font-weight:600;border-radius:0 0 6px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ============================================================
   TYPE SCALE
   Display is Space Grotesk, tracked in tight. Mono carries every
   label, number and piece of structural furniture.
   ============================================================ */
.big,h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.04}
.big{font-size:clamp(34px,5.4vw,68px)}
h1{font-size:clamp(38px,6vw,76px)}
h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.02em;line-height:1.2}

.lede{margin-top:20px;font-size:clamp(17px,1.5vw,20px);line-height:1.58;color:var(--text-dim);max-width:60ch}

/* the numbered rule above every section: 01 / THE PROBLEM ------- */
.kicker{display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-faint)}
.kicker::after{content:"";flex:1;height:1px;background:var(--line);min-width:40px}
.kicker .num{color:var(--accent);font-variant-numeric:tabular-nums}

.note{margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--text-dim)}
.tlink{color:var(--accent-soft);text-decoration:none;
  border-bottom:1px solid rgba(127,180,255,.34);transition:border-color var(--t) var(--ease)}
.tlink:hover{border-bottom-color:var(--accent-soft)}

/* ============================================================
   THE ENVIRONMENT LAYER
   One fixed plate behind everything, with a slow accent bloom.
   ============================================================ */
.env{position:fixed;inset:0;z-index:-3;pointer-events:none;background:var(--canvas)}
.env .glow{position:absolute;left:50%;top:-20%;width:120%;height:90%;margin-left:-60%;
  background:radial-gradient(ellipse 46% 50% at 50% 50%,rgba(61,123,255,.13) 0%,rgba(61,123,255,0) 70%)}
.env .grain{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:3px 3px}
.ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.ambient.live{opacity:.16}
.ambient video{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.5)}
.motes{position:fixed;inset:0;z-index:-1;pointer-events:none}
.motes i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent-soft);opacity:.16}

/* ============================================================
   BUTTONS
   The primary sits in electric blue with near-black text: on this
   canvas that reads brighter than white-on-blue and clears AA.
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;min-height:48px;border-radius:6px;
  background:var(--accent);color:#04070D;
  font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;border:1px solid var(--accent);cursor:pointer;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.btn:hover{background:var(--accent-soft);border-color:var(--accent-soft)}
.btn:active{transform:translateY(1px)}
.btn .ar{width:16px;height:16px;transition:transform var(--t) var(--ease)}
.btn:hover .ar{transform:translateX(3px)}

.btn-ghost{background:var(--surface-2);color:var(--text);border-color:var(--line-3)}
.btn-ghost:hover{background:var(--surface-3);color:var(--text);border-color:var(--line-3)}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.nav.solid{background:rgba(10,12,15,.92);border-bottom-color:var(--line);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.nav-in{display:flex;align-items:center;gap:28px;height:86px}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
/* The wordmark stacks "Verax" over "outreach", so it needs far more height
   than a single-line logo: whatever the box is, the second line only gets
   about a third of it, and the PNG spends another ~11% on transparent
   margin. The bar is 86px, so 60px still leaves 13px of air top and bottom.
   The footer mark is the brand signature and gets more again. */
.brand-logo{height:clamp(48px,5.2vw,60px);width:auto;display:block}
footer .brand-logo{height:clamp(72px,7.6vw,92px)}

.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav-links a{font-size:14.5px;font-weight:500;text-decoration:none;color:var(--text-dim);
  min-height:24px;display:inline-flex;align-items:center;
  transition:color var(--t) var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a.btn{color:#04070D;padding:11px 20px;min-height:44px}
.nav-links a.btn:hover{color:#04070D}

.navdrop{position:relative}
.navdrop-btn{background:none;border:0;padding:0;cursor:pointer;font-size:14.5px;font-weight:500;
  min-height:24px;display:inline-flex;align-items:center;
  color:var(--text-dim);transition:color var(--t) var(--ease)}
.navdrop-btn:hover,.navdrop[data-open="1"] .navdrop-btn{color:var(--text)}
.navdrop-panel{position:absolute;top:calc(100% + 18px);left:-20px;width:340px;
  background:var(--surface);border:var(--rule);border-radius:10px;padding:8px;
  display:grid;gap:2px}
.navdrop-panel[hidden]{display:none}
.navdrop-panel a{display:grid;gap:3px;padding:12px 14px;border-radius:6px;text-decoration:none;
  transition:background var(--t) var(--ease)}
.navdrop-panel a:hover{background:var(--surface-3)}
.ndt{font-size:14.5px;font-weight:600;color:var(--text)}
.ndd{font-size:13px;line-height:1.45;color:var(--text-faint)}

@media (max-width:860px){
  .nav-links a:not(.nav-cta),.navdrop{display:none}
  .nav-links{gap:0}
}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:clamp(80px,11vh,140px) 0;position:relative}
.sec-head{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sec-head .big{margin-top:22px;max-width:19ch}
.flow{position:relative}

.p-grid{margin-top:34px;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px);max-width:900px}
.p-grid p{color:var(--text-dim);font-size:16.5px;line-height:1.65}
@media (max-width:720px){.p-grid{grid-template-columns:1fr}}

/* the pull quote sits in its own ruled plate */
.pull{margin-top:48px;border:var(--rule);border-radius:12px;background:var(--surface);
  padding:clamp(24px,3.4vw,40px);display:flex;align-items:center;gap:28px;justify-content:space-between;
  max-width:900px}
.pull q{font-family:var(--display);font-weight:500;font-style:normal;
  font-size:clamp(19px,2.3vw,27px);letter-spacing:-.025em;line-height:1.24;quotes:none}
.pull .shard{width:104px;height:104px;flex:0 0 auto;opacity:.75}
.pull .shard g{stroke:var(--accent)}
@media (max-width:640px){.pull{flex-direction:column;align-items:flex-start;gap:20px}.pull .shard{width:78px;height:78px}}

/* ============================================================
   ENTRANCES
   8px and 180ms. Anything longer reads as a website animating at
   you rather than a page settling.
   ============================================================ */
.rise,.rise-l,.rise-r,.pop{opacity:0;transition:opacity .34s var(--ease-out),transform .34s var(--ease-out)}
.rise{transform:translateY(10px)}
.rise-l{transform:translateX(-14px)}
.rise-r{transform:translateX(14px)}
.pop{transform:scale(.99)}
.rise.in,.rise-l.in,.rise-r.in,.pop.in{opacity:1;transform:none}

.stag > *{opacity:0;transform:translateY(10px);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out)}
.stag.in > *{opacity:1;transform:none}
.stag.in > *:nth-child(1){transition-delay:0ms}
.stag.in > *:nth-child(2){transition-delay:55ms}
.stag.in > *:nth-child(3){transition-delay:110ms}
.stag.in > *:nth-child(4){transition-delay:165ms}
.stag.in > *:nth-child(5){transition-delay:220ms}
.stag.in > *:nth-child(6){transition-delay:275ms}
.stag.done > *{transition-delay:0s !important}

/* word-split headings: the script swaps in .hw spans, the .sr copy is
   what a screen reader actually reads */
.hwrap{display:inline}
.hw{display:inline-block;opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
  transition-delay:calc(var(--wi) * 34ms)}
.in .hw,.done .hw{opacity:1;transform:none}

/* ============================================================
   HERO
   The footage is bright glass on white, so on this canvas it is
   pushed down hard and read as glass in a dark room. The scroll
   choreography is unchanged; only the lighting is.
   ============================================================ */
.hero{position:relative;height:100vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
/* the 103%/-1.5% overscan hides any object-fit:cover rounding gap at the
   edges, but the base reset below (img,svg,video,canvas{max-width:100%})
   clamps a <video> straight back down to 100% width, which — combined with
   the -1.5% left inset still shifting it — leaves the right 1.5% of the
   viewport exposed once the video crossfades in over the poster. The
   poster is a <div> so that reset never touched it, which is why only the
   video showed the gap. */
.poster,.stage video{position:absolute;inset:-1.5%;width:103%;height:103%;
  max-width:none;max-height:none;
  object-fit:cover;background-size:cover;background-position:center;
  filter:brightness(.46) contrast(1.12) saturate(.78)}
.stage video{opacity:0;transition:opacity .8s var(--ease)}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0;transition:opacity .8s var(--ease)}
.scrim{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%,rgba(10,12,15,0) 0%,rgba(10,12,15,.72) 100%),
    linear-gradient(180deg,rgba(10,12,15,.9) 0%,rgba(10,12,15,.2) 26%,rgba(10,12,15,.34) 64%,var(--canvas) 100%)}

/* the world map behind the hero type: wide, 2:1, and sitting far enough
   back that the headline still owns the frame. max-width:none because the
   base reset (img,svg,video,canvas{max-width:100%}) would otherwise clamp
   this canvas to the stage's own width whenever the map is sized past
   100% of it — the same overscan-clamping bug fixed for the hero video
   earlier, just latent here until the map grew past that threshold. */
.heromark{position:absolute;left:50%;top:50%;width:min(1475px,112.5vw);height:auto;
  max-width:none;
  aspect-ratio:2.54/1;transform:translate(-50%,-50%);
  opacity:0;transition:opacity 1.1s var(--ease);
  pointer-events:none}
/* the script raises it once the first frame is on the canvas, so the map
   arrives rather than popping in half-drawn */
.heromark.in{opacity:.72}

.cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  display:grid;justify-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-faint)}
.cue .chev{width:18px;height:18px;animation:cueNudge 4s var(--ease) infinite}
@keyframes cueNudge{0%,70%,100%{transform:translateY(0);opacity:.5}82%{transform:translateY(5px);opacity:1}}

/* The scrubbed bands build up as a stacked log rather than swapping
   full-bleed: each line reserves a small, constant footprint from the
   start (so nothing ever reflows or snaps into place), and the currently
   active line is enlarged with a transform instead — compositor-only,
   opacity + transform, so the scrub stays smooth at any speed. Once the
   next line arrives, it eases back down to that same small resting size
   and dims; only the last line, with the CTA, stays enlarged. --k is the
   per-band scrub progress the script writes on; every entrance below is a
   pure function of it, so the whole sequence is scrubbable both ways with
   no extra JS per frame. */
/* a single band now, always at its full active size (no more scroll-driven
   settling), so unlike the old multi-band sequence its footprint is
   constant rather than a moving target — centering it is safe to verify
   once instead of across a whole scroll range. Top and bottom padding are
   equal so justify-content:center lands on the stage's true vertical
   center, not just the center of a lopsided box; the fixed nav (86px, see
   .nav) still gets guaranteed clearance since 130-155px clears it with
   room for the line's own scale-up growth on top. */
.bands{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(130px,18vh,155px) var(--gut);pointer-events:none}
.band{position:relative;opacity:0;margin-top:clamp(32px,6vh,52px);pointer-events:none}
.band:first-child{margin-top:0}
/* .band stretches to fill .bands' full (padded) width, and once the
   viewport is wide enough for that to exceed --maxw, this max-width cap
   kicks in — without auto margins a capped block just sits at the start
   edge of that wider parent instead of centering within it, which is
   exactly the "text sits left of center on a wide screen" bug. */
.band-inner{position:relative;max-width:var(--maxw);margin-left:auto;margin-right:auto}
.lane-c .band-inner{text-align:center}
.band .line{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.03em;
  font-size:clamp(25px,3.8vw,35px);max-width:19ch;color:var(--text);text-shadow:var(--tshadow);
  transform:scale(var(--scale,1));transform-origin:left bottom}
/* center bottom (not left bottom) would grow the line only upward, which is
   what previously forced the lopsided padding above — center center grows
   it symmetrically instead, so the extra margin-top below absorbs the
   downward half rather than it visually crowding the subtitle. */
.lane-c .line{margin-left:auto;margin-right:auto;transform-origin:center center}
.band .sub{margin-top:34px;font-size:clamp(15px,1.35vw,19px);color:var(--text-dim);max-width:38ch;
  text-shadow:var(--tshadow)}
.lane-c .sub{margin-left:auto;margin-right:auto}
.band .w{display:inline-block;white-space:pre}
.band .c{display:inline-block;will-change:transform,opacity}
.band .cta-row{justify-content:flex-start;pointer-events:auto}
.lane-c .cta-row{justify-content:center}

/* entrance: scatter (echoes drifting fragments) */
.band[data-entrance="scatter"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* entrance: drift-down (echoes the descent) */
.band[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px))}
/* entrance: grid snap-align (echoes the fragments aligning) */
.band[data-entrance="grid"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
.band[data-entrance="grid"] .sub{--ks:clamp(0,(var(--k,0) - .5)*3.4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*10px))}
/* entrance: settle (echoes the arrival) */
.band[data-entrance="settle"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px))}
.band[data-entrance="settle"] .sub{--ks:clamp(0,(var(--k,0) - .62)*3.6,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px))}
.band[data-entrance="settle"] .cta-row{--kb:clamp(0,(var(--k,0) - .76)*4.6,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*14px))}

/* the static hero, for the five gated cases */
.static-hero{position:absolute;inset:0;display:none;align-items:center;z-index:2}
.sh-wash{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,15,.55) 0%,rgba(10,12,15,.88) 100%)}
.sh-in{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding-left:var(--gut);padding-right:var(--gut)}
.sh-in h2{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(32px,7vw,54px)}
.sh-in p{margin-top:18px;font-size:16px;line-height:1.55;color:var(--text-dim);max-width:46ch}

/* ============================================================
   THE SPINE
   The branching rule that runs the length of the narrative. It is
   the clearest statement the page makes: four lines leave one, and
   four lines come back to one.
   ============================================================ */
.spine{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:96px;height:100%;pointer-events:none;opacity:.5}
.spine svg{width:100%;height:100%}
.spine path{fill:none;stroke:var(--accent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.spine path.faint{stroke:var(--line-3)}

/* ============================================================
   IMAGE BANDS
   ============================================================ */
.imgband{position:relative;height:clamp(240px,42vh,440px);overflow:hidden;
  border-top:var(--rule);border-bottom:var(--rule)}
/* the photography is graded dark in camera now, so this is a whisper of
   a grade rather than the heavy knock-down the old bright stock needed */
.imgband img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.94) contrast(1.02) saturate(.92)}
.imgband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--canvas) 0%,rgba(10,12,15,0) 22%,
             rgba(10,12,15,0) 74%,var(--canvas) 100%)}
.imgband figcaption{z-index:1}
.imgband figcaption{position:absolute;left:var(--gut);bottom:22px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-dim)}

/* ============================================================
   CARDS
   Hairline plates. No shadows: on a dark canvas a shadow is
   invisible and a border is the honest way to show an edge.
   ============================================================ */
.cards{margin-top:44px;display:grid;gap:14px}
.caps{grid-template-columns:repeat(4,1fr)}
@media (max-width:1040px){.caps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.caps{grid-template-columns:1fr}}

.card{position:relative;background:var(--surface);border:var(--rule);border-radius:12px;
  padding:26px 24px 24px;text-decoration:none;display:flex;flex-direction:column;height:100%;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.card:hover{background:var(--surface-2);border-color:var(--line-3);transform:translateY(-3px)}
.card .motif{width:34px;height:34px;margin-bottom:22px}
.card .motif path,.card .motif circle,.card .motif rect,.card .motif line{
  stroke:var(--accent);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:10px}
.card p{font-size:14.5px;line-height:1.55;color:var(--text-dim)}
.cdl{margin-top:18px;padding-top:16px;flex:0 0 auto;border-top:var(--rule);display:grid;gap:7px}
.cdl li{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--text-faint)}
.capgo{display:block;margin-top:auto;padding-top:20px;font-size:13px;font-weight:600;color:var(--accent-soft)}
.capcard:hover .capgo{color:var(--accent)}

/* ============================================================
   THE BEAT
   Where the light sections breathe out. Deep blue rather than an
   inversion, because the globe is drawn for a dark sky.
   ============================================================ */
.dark{position:relative;overflow:hidden;background:var(--beat);
  border-top:var(--rule);border-bottom:var(--rule)}
.dark::before{content:"";position:absolute;left:50%;top:-30%;width:120%;height:150%;
  margin-left:-60%;pointer-events:none;
  background:radial-gradient(ellipse 50% 46% at 50% 50%,rgba(61,123,255,.2) 0%,rgba(61,123,255,0) 68%);
  animation:beatGlow 34s var(--ease) -9s infinite alternate}
@keyframes beatGlow{
  0%{transform:translate3d(-5%,0,0) scale(1);opacity:.7}
  100%{transform:translate3d(5%,0,0) scale(1.14);opacity:1}}
.dark .sec-head,.dark .wrap{position:relative;z-index:1}

/* ============================================================
   HOLD IT TOGETHER
   ============================================================ */
.hold-wrap{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center}
@media (max-width:880px){.hold-wrap{grid-template-columns:1fr}}
/* touch-action + user-select matter here: without them a press-and-hold on
   a phone starts a scroll or a text selection instead of holding */
.hold-btn{margin-top:30px;background:transparent;border:1px solid var(--line-3);color:var(--text);
  padding:13px 24px;min-height:48px;border-radius:6px;cursor:pointer;font-size:14.5px;font-weight:600;
  touch-action:none;-webkit-user-select:none;user-select:none;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background var(--t) var(--ease)}
.hold-btn:hover{border-color:var(--accent);color:var(--accent)}
.hold-btn.done{background:var(--accent);border-color:var(--accent);color:#04070D}
.hold-bar{margin-top:18px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;max-width:300px}
.hold-bar i{display:block;height:100%;width:100%;background:var(--accent);
  transform-origin:left;transform:scaleX(var(--h,0))}
.hold-done{margin-top:20px;font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(19px,2.3vw,27px);line-height:1.2;color:var(--text);
  opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.hold-done.show{opacity:1;transform:none}

/* The script writes --h (0 loose .. 1 held) onto the stage. Each tile
   carries its own scattered start (--sx1/--sy1/--sr) and its resting slot
   (--ey), and interpolates between them purely in CSS, so holding the
   button is one custom property changing rather than per-frame JS. */
.hold-stage{position:relative;height:360px;display:flex;align-items:center;justify-content:center}
.tile{position:absolute;width:min(300px,76%);display:flex;align-items:center;gap:11px;
  padding:13px 16px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2);
  transform:translate(calc(var(--sx1)*(1 - var(--h,0))),
                      calc(var(--sy1)*(1 - var(--h,0)) + var(--ey)*var(--h,0)))
            rotate(calc(var(--sr)*(1 - var(--h,0))))}
.tile .dot{width:7px;height:7px;border-radius:50%;background:var(--line-3);flex:0 0 auto;
  transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.tile .tl{font-size:13.5px;font-weight:500}
.tile .tn{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text-faint)}
.hold-stage.locked .tile{border-color:rgba(61,123,255,.5);background:rgba(61,123,255,.1)}
.hold-stage.locked .tile.lit .dot{background:var(--accent);box-shadow:0 0 0 4px rgba(61,123,255,.2)}
@media (max-width:620px){.tile .tl{font-size:12px}.hold-stage{height:300px}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{overflow:hidden;border-top:var(--rule);border-bottom:var(--rule);padding:22px 0;
  background:var(--surface)}
.mq-track{display:flex;align-items:center;gap:22px;white-space:nowrap;will-change:transform}
.mq-track b{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,24px);letter-spacing:-.03em}
.mq-track b.ghost{color:var(--text-faint)}
.mq-track i{color:var(--accent);font-style:normal;font-size:9px}

/* ============================================================
   SPLIT / POINTS / STEPS
   ============================================================ */
.split{margin-top:34px;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.split .figure{aspect-ratio:3/4;max-height:560px;overflow:hidden;border-radius:12px;border:var(--rule);position:relative}
@media (max-width:880px){.split .figure{aspect-ratio:16/10;max-height:none}}
.figure img{width:100%;height:100%;object-fit:cover;filter:brightness(1) saturate(.96)}
.figure figcaption{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:10.5px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}

.points{margin-top:34px;display:grid;gap:2px}
.point{display:flex;gap:20px;padding:22px 0;border-top:var(--rule)}
.pn{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent);
  flex:0 0 auto;padding-top:4px;font-variant-numeric:tabular-nums}
.point h3{margin-bottom:8px}
.point p{font-size:15.5px;line-height:1.6;color:var(--text-dim);max-width:62ch}

.steps{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{padding:24px 22px 26px;border-left:var(--rule)}
.step:first-child{border-left:0}
@media (max-width:900px){.step:nth-child(3){border-left:0}}
@media (max-width:560px){.step{border-left:0;border-top:var(--rule)}}
.sn{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--accent)}
.srule{margin:16px 0 18px;height:1px;background:var(--line);position:relative;overflow:hidden}
.srule i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out)}
.step.lit .srule i{transform:scaleX(1)}
.step h3{margin-bottom:9px}
.step p{font-size:14.5px;line-height:1.56;color:var(--text-dim)}

/* ============================================================
   NUMBERS
   ============================================================ */
.numbers{padding:clamp(66px,9vh,110px) 0}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,34px)}
@media (max-width:860px){.nums{grid-template-columns:repeat(2,1fr);gap:28px}}
.nm{border-top:1px solid var(--line-2);padding-top:18px}
.nv{display:block;font-family:var(--display);font-weight:600;letter-spacing:-.04em;
  font-size:clamp(40px,5.6vw,66px);line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.nv .u{font-size:.36em;margin-left:6px;color:var(--accent-soft);letter-spacing:0}
.nm p{margin-top:12px;font-size:14px;line-height:1.5;color:var(--text-dim)}

/* ============================================================
   PRICING
   Prices are data, so they are set in mono and tabular. The
   recommended tier is marked with a rule and a label, not a shadow.
   ============================================================ */
.tiers{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media (max-width:940px){.tiers{grid-template-columns:1fr;max-width:560px}}
.tier{position:relative;background:var(--surface);border:var(--rule);border-radius:12px;
  padding:28px 26px 26px;display:flex;flex-direction:column;height:100%}
.tier.best{border-color:var(--accent);background:var(--surface-2)}
.tag{position:absolute;top:-1px;right:18px;transform:translateY(-50%);
  background:var(--accent);color:#04070D;border-radius:999px;padding:5px 12px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.tname{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.02em}
.tprice{display:block;margin-top:14px;font-family:var(--mono);font-weight:600;
  font-size:clamp(22px,2.6vw,29px);letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
.tprice small{font-size:13px;font-weight:500;color:var(--text-faint);letter-spacing:0}
.tline{display:block;margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--text-dim);min-height:44px}
.tier ul{margin-top:22px;padding-top:20px;border-top:var(--rule);display:grid;gap:12px;flex:1}
.tier li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--text-dim)}
.tier li svg{width:14px;height:14px;flex:0 0 auto;margin-top:5px;color:var(--accent)}
.tier .btn{margin-top:26px;justify-content:center}

/* one-time builds + attachments */
.attach{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:980px){.attach{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.attach{grid-template-columns:1fr}}
.attach .at{background:var(--surface);border:var(--rule);border-radius:10px;padding:20px}
.attach .atn{font-weight:600;font-size:15px;letter-spacing:-.01em}
.attach .atp{font-family:var(--mono);font-size:12px;color:var(--accent-soft);margin-top:7px;
  font-variant-numeric:tabular-nums}
.attach .at p{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--text-dim)}
.once{margin-top:26px;display:grid;gap:12px}
.once a.o{text-decoration:none;color:inherit}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin-top:38px;border-top:var(--rule);max-width:900px}
.q{border-bottom:var(--rule)}
.q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;padding:22px 0;cursor:pointer;text-align:left;
  font-size:16.5px;font-weight:500;letter-spacing:-.01em;color:var(--text);
  transition:color var(--t) var(--ease)}
.q button:hover{color:var(--accent-soft)}
.pm{position:relative;width:14px;height:14px;flex:0 0 auto}
.pm i{position:absolute;background:var(--accent);transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.pm i:first-child{left:0;top:6.5px;width:14px;height:1.5px}
.pm i:last-child{left:6.5px;top:0;width:1.5px;height:14px}
.q[open] .pm i:last-child{transform:scaleY(0);opacity:0}
.a{overflow:hidden;height:0;transition:height .32s var(--ease)}
.a p{padding-bottom:24px;font-size:15.5px;line-height:1.62;color:var(--text-dim);max-width:68ch}

/* ============================================================
   RELAY — two-track steps, dash lists, stat cards
   ============================================================ */
.tracks{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
@media (max-width:760px){.tracks{grid-template-columns:1fr;gap:36px}}
.track .points{margin-top:18px}

.dashlist{margin-top:28px;display:grid;gap:14px}
.dashlist li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:var(--text-dim)}
.dashlist li::before{content:"\2014";position:absolute;left:0;color:var(--text-faint)}

.statbox{background:var(--surface);border:var(--rule);border-radius:12px;padding:26px;align-self:start}
.statbox p{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--text-dim)}
.statbox .nv.phrase{font-size:clamp(26px,3vw,32px);letter-spacing:-.02em;font-variant-numeric:normal}

/* the homepage feature panel: boxed so Relay reads as a
   standout offer rather than blending into a plain text section */
.feature-panel{position:relative;margin-top:22px;background:var(--surface);
  border:1px solid var(--accent);border-radius:18px;
  padding:clamp(28px,4vw,44px);box-shadow:0 0 0 1px var(--accent-ghost),0 30px 60px -30px rgba(61,123,255,.35)}
.feature-panel .lede{margin-top:16px;max-width:62ch}
.feature-panel .cards{margin-top:36px}
.feature-panel .cta-row{margin-top:32px}

.cards.duo{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){.cards.duo{grid-template-columns:1fr}}

/* ============================================================
   THE START BEAT AND ITS FORM
   ============================================================ */
#start{position:relative;overflow:hidden;border-top:var(--rule)}
.sbg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.8) saturate(.9);opacity:.85}
.swash{position:absolute;inset:0;
  background:linear-gradient(180deg,var(--canvas) 0%,rgba(10,12,15,.82) 40%,var(--canvas) 100%)}
.sin{position:relative;z-index:1}
.form-grid{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:900px){.form-grid{grid-template-columns:1fr}}

.callplan{margin-top:34px;display:grid;gap:2px}
.cp{display:flex;gap:16px;padding:16px 0;border-top:var(--rule)}
.cp p{font-size:15px;line-height:1.55;color:var(--text-dim)}

.lead{background:var(--surface);border:var(--rule);border-radius:14px;padding:clamp(22px,3vw,32px);
  position:relative}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.lead input,.lead textarea{width:100%;background:var(--canvas);border:1px solid var(--line-2);
  border-radius:8px;padding:13px 14px;font-size:15.5px;color:var(--text);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.lead input:focus,.lead textarea:focus{outline:none;border-color:var(--accent);background:#070A0E}
.lead textarea{resize:vertical;min-height:104px}
/* Relay intake forms (/relay/): selects, two-up rows, hints and consent */
.lead select{width:100%;background:var(--canvas);border:1px solid var(--line-2);border-radius:8px;
  padding:13px 14px;font-size:15.5px;color:var(--text);transition:border-color var(--t) var(--ease)}
.lead select:focus{outline:none;border-color:var(--accent)}
.lead select.bad{border-color:var(--warn)}
.lead .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
@media (max-width:560px){.lead .row2{grid-template-columns:1fr}}
.lead .track-label{margin-bottom:18px}
.field .hint{margin-top:7px;font-size:12.5px;line-height:1.45;color:var(--text-faint)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;font-size:13.5px;line-height:1.5;color:var(--text-dim)}
.lead .consent input{width:18px;height:18px;flex:none;margin-top:2px;padding:0;accent-color:var(--accent)}
.lead .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{margin-top:14px;font-size:13px;line-height:1.5;color:var(--text-faint)}

/* the honeypot: reachable by a script, invisible and unreachable to a
   person and to assistive tech. Not display:none, which bots test for. */
.trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* the message carries the meaning; the colour only reinforces it */
.err{margin-top:7px;font-size:13px;line-height:1.45;color:var(--warn);font-weight:500}
.lead input.bad,.lead textarea.bad{border-color:var(--warn)}
.form-err{margin-top:14px}
.btn.sending{opacity:.6;pointer-events:none}

.thanks{position:absolute;inset:0;background:var(--surface);border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);text-align:center;padding:30px}
.thanks.show{opacity:1;pointer-events:auto}
.thanks .tk{width:42px;height:42px;color:var(--accent)}
.thanks p{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.03em}
.thanks small{font-size:14px;color:var(--text-dim);max-width:34ch}

/* ============================================================
   THE REACH GLOBE
   ============================================================ */
.reach{padding:clamp(72px,10vh,120px) 0}
.reach-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.reach-copy .big{margin-top:16px}
.reach-list{margin-top:32px;display:grid;max-width:420px;border-top:1px solid var(--line-2)}
.reach-list li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:var(--rule)}
.rl-place{font-size:14.5px;color:var(--text-dim)}
.rl-time{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--accent-soft);
  font-variant-numeric:tabular-nums}
.reach-list li.home .rl-place{color:var(--text);font-weight:600}
.reach-list li.home .rl-time{color:var(--text)}
.reach-note{margin-top:18px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.reach-globe{position:relative;aspect-ratio:1;width:100%;max-width:560px;margin-inline:auto}
#globe{width:100%;height:100%;cursor:grab;touch-action:pan-y}
#globe:active{cursor:grabbing}
@media (max-width:860px){
  .reach-grid{grid-template-columns:1fr;gap:34px}
  .reach-globe{max-width:380px;order:-1}
}

/* ============================================================
   THE CAPABILITY EXPLORER
   ============================================================ */
.capex{margin-top:44px;border:var(--rule);border-radius:14px;background:var(--surface);
  padding:clamp(22px,3.4vw,36px)}
.capex-head h3{font-size:clamp(19px,2.3vw,25px)}
.capex-head p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--text-dim);max-width:58ch}
.cx-tabs{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;border-bottom:var(--rule);padding-bottom:16px}
.cx-tabs[hidden]{display:none}
.cx-tab{background:var(--surface-3);border:1px solid var(--line-2);border-radius:999px;
  padding:9px 16px;min-height:44px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--text-dim);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
.cx-tab:hover{color:var(--text);border-color:var(--line-3)}
.cx-tab.is-on{background:var(--accent);border-color:var(--accent);color:#04070D}
.cx-panel{padding-top:24px}
.cx-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
@media (max-width:760px){.cx-cols{grid-template-columns:1fr;gap:22px}}
.cx-col{border-top:2px solid var(--accent);padding-top:14px}
.cx-col.is-none{border-top-color:var(--line-2)}
.cx-tier{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text)}
.cx-col.is-none .cx-tier{color:var(--text-faint)}
.cx-col ul{margin-top:12px;display:grid;gap:10px}
.cx-col li{position:relative;padding-left:19px;font-size:14px;line-height:1.55;color:var(--text-dim)}
.cx-col li::before{content:"";position:absolute;left:0;top:.56em;width:7px;height:7px;
  border-radius:2px;background:var(--accent)}
.cx-none{margin-top:12px;font-size:14px;line-height:1.55;color:var(--text-faint);font-style:italic}
.cx-note{margin-top:22px;padding-top:16px;border-top:var(--rule);font-size:13.5px;line-height:1.6;
  color:var(--text-dim);max-width:70ch}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:var(--rule);padding:60px 0 40px;position:relative}
.f-in{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between}
.f-line{margin-top:18px;font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.03em;
  color:var(--text-dim)}
.f-mail,.f-tel{display:inline-block;margin-top:14px;font-size:14.5px;font-weight:500;
  color:var(--accent-soft);text-decoration:none;border-bottom:1px solid rgba(127,180,255,.3);
  padding-bottom:2px;transition:border-color var(--t) var(--ease)}
.f-mail:hover,.f-tel:hover{border-bottom-color:var(--accent-soft)}
.f-tel{display:block;margin-top:9px}
.f-cols{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap}
.f-cols > div{display:grid;gap:8px;align-content:start}
.f-head{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.f-cols a{font-size:14px;color:var(--text-dim);text-decoration:none;min-height:24px;
  display:flex;align-items:center;transition:color var(--t) var(--ease)}
.f-cols a:hover{color:var(--accent-soft)}
/* the footer's cookie re-opener is a button, so it has to be talked
   back into looking like the links it sits with */
.f-cookie{background:none;border:0;padding:0;text-align:left;cursor:pointer;min-height:24px;
  display:flex;align-items:center;font-size:14px;color:var(--text-dim);font-family:var(--body);
  transition:color var(--t) var(--ease)}
.f-cookie:hover{color:var(--accent-soft)}
.f-bot{margin-top:44px;padding-top:22px;border-top:var(--rule);display:flex;gap:16px;
  flex-wrap:wrap;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-faint)}

/* ============================================================
   INTERIOR PAGES
   The home page is one long narrative. Every other page opens on a
   ruled masthead instead, with the V set as a watermark behind it.
   ============================================================ */
.phero{position:relative;padding:clamp(140px,19vh,210px) 0 clamp(52px,7vh,86px);
  overflow:hidden;border-bottom:var(--rule)}
.pmark{position:absolute;right:-3%;top:8%;width:min(420px,44vw);height:auto;
  fill:var(--accent);opacity:.05;pointer-events:none}
.pcrumb{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:26px}
.pcrumb a{text-decoration:none;transition:color var(--t) var(--ease)}
.pcrumb a:hover{color:var(--accent)}
.pcrumb span{color:var(--line-3);margin:0 8px}
.phero h1{max-width:17ch}
.phero .lede{margin-top:22px}

.jump{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:inline-flex;align-items:center;min-height:40px;padding:9px 16px;
  border:1px solid var(--line-2);border-radius:999px;text-decoration:none;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.jump a:hover{border-color:var(--accent);color:var(--accent)}

/* the honest empty state on /work/ */
.shell{margin-top:40px;border:1px dashed var(--line-3);border-radius:14px;
  padding:clamp(28px,5vw,52px);background:var(--surface);max-width:820px}
.shell h3{font-size:clamp(20px,2.4vw,27px)}
.shell p{margin-top:14px;font-size:15.5px;line-height:1.62;color:var(--text-dim);max-width:58ch}
.shell .cta-row{margin-top:26px}

/* ============================================================
   LEGAL PAGES
   Long-form prose, so the measure is tighter than the rest of the
   site and headings carry the structure a reader scans for.
   ============================================================ */
.legal-date{margin-top:22px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.legal{max-width:calc(760px + var(--gut) * 2)}
.legal h3{margin-top:46px;font-size:clamp(18px,2.1vw,23px)}
.legal h3:first-of-type{margin-top:0}
.legal p{margin-top:15px;font-size:16px;line-height:1.7;color:var(--text-dim);max-width:68ch}
.legal p b,.legal li b{color:var(--text);font-weight:600}
.legal-list{margin-top:15px;display:grid;gap:13px;max-width:68ch}
.legal-list li{position:relative;padding-left:22px;font-size:16px;line-height:1.7;color:var(--text-dim)}
.legal-list li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:7px;
  border-radius:2px;background:var(--accent)}

/* ============================================================
   THE CONSENT BAR
   Injected only when there is analytics to gate, so it never
   appears on a build that stores nothing.
   ============================================================ */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--surface);
  border-top:1px solid var(--line-2);transform:translateY(102%);
  transition:transform .4s var(--ease-out)}
.cc.in{transform:none}
.cc-in{width:100%;max-width:var(--maxw);margin:0 auto;padding:18px var(--gut);
  display:flex;gap:clamp(16px,3vw,40px);align-items:center;justify-content:space-between;flex-wrap:wrap}
.cc-copy{font-size:14px;line-height:1.55;color:var(--text-dim);max-width:74ch}
.cc-copy b{color:var(--text);font-weight:600}
.cc-acts{display:flex;gap:10px;flex-shrink:0}
.cc-acts .btn{padding:11px 20px;font-size:14px;min-height:44px}
@media (max-width:640px){
  .cc-in{align-items:stretch}
  .cc-acts{width:100%}
  .cc-acts .btn{flex:1;justify-content:center}
}

/* ============================================================
   TOUCH TARGETS
   WCAG 2.2 AA asks for 24x24 and everything already clears that. On
   a phone the things people actually reach for get the full 44:
   the mark, the two contact lines and the in-page section nav.
   Secondary footer navigation stays at 24 with spacing, because a
   footer where every link is 44px tall is its own usability problem.
   ============================================================ */
@media (max-width:860px) and (pointer:coarse){
  .brand{min-height:44px;display:flex;align-items:center}
  .f-mail,.f-tel{min-height:44px;display:flex;align-items:center}
  .jump a{min-height:44px}
}

/* ============================================================
   SHORT SCREENS
   ============================================================ */
@media (max-height:560px){.cue{display:none}}

/* ============================================================
   THE FIVE STATIC-HERO GATES (must match the JS strings exactly)
   ============================================================ */
@media (max-width:720px){
  .hero{height:100vh}.bands,.cue{display:none}
  .static-hero{display:flex}
}
@media (orientation:portrait) and (max-width:1024px){
  .hero{height:100vh}.bands,.cue{display:none}
  .static-hero{display:flex}
}
@media (orientation:portrait) and (pointer:coarse){
  .hero{height:100vh}.bands,.cue{display:none}
  .static-hero{display:flex}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero{height:100vh}.bands,.cue{display:none}
  .static-hero{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .hero{height:100vh}.stage video,.stage .poster,.bands,.cue{display:none}
  .static-hero{display:flex}
}

/* ============================================================
   REDUCED MOTION, HONORED COMPLETELY
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rise,.rise-l,.rise-r,.pop,.stag > *,.hw{opacity:1 !important;transform:none !important}
  .dark::before{animation:none}
  .cue .chev{animation:none}
  .ambient{display:none}
  .motes{display:none}
  .cc{transform:none}
}
/* the script sets .rm when it detects the same preference live */
body.rm .rise,body.rm .rise-l,body.rm .rise-r,body.rm .pop,body.rm .stag > *,body.rm .hw{
  opacity:1 !important;transform:none !important}


/* ============================================================
   THE GATED HERO
   On the five paths that skip the scrub — phones, portrait tablets,
   short landscape and reduced motion — the map becomes the hero art
   in place of the band sequence. It sits in the upper half, the
   headline sits beneath it, and the wash is weighted to the bottom so
   the type stays legible without burying the map behind it.
   ============================================================ */
@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){
  .heromark{top:35%;width:min(1180px,126vw);max-width:none}
  .heromark.in{opacity:.82}
  .static-hero{align-items:flex-end;padding-bottom:9vh}
  .static-hero .sh-wash{
    background:linear-gradient(180deg,
      rgba(10,12,15,.18) 0%,rgba(10,12,15,.46) 32%,
      rgba(10,12,15,.88) 58%,var(--canvas) 100%)}
  .sh-in h2{font-size:clamp(29px,7.4vw,48px)}
}
/* a laptop turned sideways, or a phone in landscape, has no room to
   stack them: centre the two and let the wash do the separating */
@media (orientation:landscape) and (max-height:620px){
  .heromark{top:50%;width:min(1180px,88vw);max-width:none}
  .heromark.in{opacity:.6}
  .static-hero{align-items:center;padding-bottom:0}
}

/* ============================================================
   SOCIAL BUTTONS
   Grouped with the other ways to reach us. Hairline plates in the
   same language as the cards, sized past the 24px target minimum
   and up to 44 on a touch screen.
   ============================================================ */
.f-social{margin-top:22px;display:flex;gap:10px}
.f-social a{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;
  color:var(--text-dim);
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease),
             background var(--t) var(--ease),transform var(--t) var(--ease)}
.f-social a:hover{color:var(--accent-soft);border-color:var(--accent);
  background:var(--accent-ghost);transform:translateY(-2px)}
.f-social svg{width:19px;height:19px}
@media (pointer:coarse){
  .f-social a{width:44px;height:44px}
}