/* ─────────────────────────────────────────────────────────────────────────
   TRUST LEDGER — Mesh, book edition
   Deep navy ground, mesh artwork untouched, ivory ink, Instrument Serif.
   Loaded after art.css, so anything here wins.
   ───────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#070a12; --bg2:#0a0f1c; --panel:#0b1020;
  --ink:#f1ece1; --mut:#a7b2cc; --faint:#8b95b4;
  --acc:#5b8cff; --acc2:#34e0a1;
  --line:rgba(241,236,225,.13); --line2:rgba(241,236,225,.26);
  --display:"Instrument Serif","Iowan Old Style",Georgia,"Times New Roman",serif;
  --body:"Newsreader","Iowan Old Style",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* one radius scale for the whole site: large panels, small panels, controls */
  --r:16px; --r2:12px; --r3:8px;
}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:
    radial-gradient(120% 62% at 74% 0%,rgba(91,140,255,.15),transparent 58%),
    radial-gradient(90% 50% at 6% 12%,rgba(52,224,161,.07),transparent 62%),
    linear-gradient(180deg,#080c16 0%,#070a12 40%,#05070d 100%) fixed;
  color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--acc2);outline-offset:3px;border-radius:var(--r3)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:12px 18px;background:var(--acc2);
  color:#04121a;font-weight:700;border-radius:0 0 var(--r3) 0}
.skip:focus{left:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 44px}
@media(max-width:820px){.wrap{padding:0 20px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* paper grain over the whole page, so the ground is never a flat fill */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.42;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
header.site,main,footer.site{position:relative;z-index:2}

/* ── the hovering light ─────────────────────────────────────────────────
   A dim lamp carried just above the page, not a torch pointed at it. It
   lags the pointer slightly so it glides, sits under every piece of text,
   and never takes a click. Strongest across the masthead, where it lifts
   the nav labels as you sweep along them; barely there over the artwork so
   it cannot compete with the plate. Pointer devices only, and off entirely
   under reduced motion. */
.glow{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .55s ease;
  background:
    radial-gradient(380px 380px at var(--gx,-999px) var(--gy,-999px),
      rgba(91,140,255,.085), rgba(52,224,161,.035) 44%, transparent 70%);
}
.glow.lit{opacity:1}
header.site::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(230px 115px at var(--hx,-999px) 50%,
    rgba(91,140,255,.15), rgba(52,224,161,.045) 48%, transparent 74%);
}
header.site.lit::before{opacity:1}
.bar{position:relative;z-index:1}
@media(hover:none),(pointer:coarse){.glow,header.site::before{display:none}}
@media(prefers-reduced-motion:reduce){.glow,header.site::before{display:none}}

/* ── masthead ───────────────────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:40;background:rgba(7,10,18,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
/* the masthead runs a little wider than the text column, so the wordmark sits
   further left than the body copy and the menu has room to stay on one line */
header.site .wrap{max-width:1292px}
.bar{display:flex;align-items:center;gap:18px;padding:19px 0}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  text-decoration:none;white-space:nowrap}
.brand .wm{font-family:var(--display);font-size:25px;letter-spacing:.012em;color:var(--ink);line-height:1}
/* the strapline, set on two short lines so it never widens the masthead
   enough to push the menu onto a second row */
.brand .tag{display:block;font-family:var(--body);font-style:italic;font-weight:300;
  font-size:13px;letter-spacing:.005em;color:var(--mut);line-height:1.28}
.brand .tag span{display:block}
.brand:hover .tag{color:var(--mut)}
nav.primary{margin-left:auto}
nav.primary ul{display:flex;gap:17px;list-style:none;flex-wrap:wrap}
nav.primary a{display:inline-block;padding:8px 0;text-decoration:none;color:var(--mut);
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  border-bottom:1px solid transparent;white-space:nowrap}
nav.primary a:hover{color:var(--ink);border-bottom-color:var(--line2)}
nav.primary a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--acc2)}
.navcta{display:flex;align-items:center;gap:9px;margin-left:18px}
.navtoggle{display:none;min-width:44px;min-height:44px;border:1px solid var(--line2);
  background:transparent;color:var(--ink);font:600 13px var(--body);cursor:pointer;border-radius:var(--r3)}
@media(max-width:1280px){
  .navtoggle{display:block;margin-left:auto}
  nav.primary{order:3;flex:0 0 100%;margin-left:0;display:none}
  nav.primary.open{display:block;padding-bottom:10px}
  nav.primary ul{flex-direction:column;gap:0}
  nav.primary a{padding:13px 0;border-bottom:1px solid var(--line);width:100%}
  .navcta{margin-left:0}
}

/* ── buttons ────────────────────────────────────────────────────────── */
.b1,.b2,.b3{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:52px;
  padding:14px 28px;border-radius:var(--r3);font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;
  border:1px solid transparent;transition:.18s;white-space:nowrap}
.b1{background:linear-gradient(120deg,var(--acc),var(--acc2));color:#04101d}
.b1:hover{color:#04101d;filter:brightness(1.07)}
.b2{color:var(--mut);border-bottom:1px solid var(--line2);padding:14px 4px;background:none}
.b2:hover{color:var(--ink);border-bottom-color:var(--acc2)}
.b3{min-height:40px;padding:9px 20px;font-size:10.5px;letter-spacing:.19em;color:var(--ink);
  border:1px solid var(--line2);background:rgba(241,236,225,.03)}
.b3:hover{color:var(--ink);border-color:var(--acc2)}
.b3 .key{width:5px;height:5px;border-radius:50%;background:var(--acc2);box-shadow:0 0 8px var(--acc2)}
.b4{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 20px;
  border-radius:var(--r3);font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  font-weight:600;text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:.18s;
  background:linear-gradient(120deg,var(--acc),var(--acc2));color:#04101d}
.b4:hover{color:#04101d;filter:brightness(1.08)}
/* On a narrow screen the two calls sit on their own row under the wordmark,
   full width, rather than being squeezed against the menu button. */
@media(max-width:760px){
  .bar{flex-wrap:wrap;gap:12px;padding:14px 0}
  .brand{flex:1;min-width:0}
  .brand .tag{white-space:normal;font-size:12px;line-height:1.3}
  .navcta{order:2;flex:0 0 100%;margin-left:0;gap:10px}
  .navcta .b4,.navcta .b3{flex:1}
}
@media(max-width:400px){
  .b4,.b3{padding:9px 10px;font-size:10px;letter-spacing:.12em}
}

/* ── type ───────────────────────────────────────────────────────────── */
h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,4.4vw,60px);line-height:1.02;
  letter-spacing:-.012em;text-wrap:balance}
h1 em{font-style:italic;color:#cfdcff}
h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.2vw,42px);line-height:1.08;
  letter-spacing:-.01em;text-wrap:balance}
h3{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:-.005em}
p{text-wrap:pretty}
.kicker{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--acc);margin-bottom:16px}
.kicker .dot{display:none}
.lead{margin-top:22px;font-size:19px;line-height:1.6;color:var(--mut);font-weight:300;max-width:52ch}
.pts{margin-top:26px;list-style:none;display:flex;flex-direction:column}
.pts li{padding:13px 0;border-top:1px solid var(--line);font-size:15.5px;display:flex;gap:14px;color:var(--mut)}
.pts li:last-child{border-bottom:1px solid var(--line)}
.pts li .c{font-family:var(--mono);font-size:10px;color:var(--acc2);flex:0 0 auto;padding-top:5px}
.cta-row{margin-top:30px;display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.rule{height:1px;background:var(--line)}
.folio{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:48px;align-items:start;
  padding:58px 0 40px}
.hero.solo{grid-template-columns:minmax(0,1fr) 430px}
@media(max-width:1040px){.hero,.hero.solo{grid-template-columns:1fr;gap:34px;padding:38px 0 30px}}
.hright{display:flex;flex-direction:column;gap:16px;min-width:0}

/* the quartet: Collect it, Prove it, Sign it, Keep it */
.quartet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none}
@media(max-width:1040px){.quartet{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.quartet{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.qbox{border:1px solid var(--line);border-top:1px solid var(--line2);padding:16px 14px 18px;
  border-radius:var(--r2);
  background:linear-gradient(180deg,rgba(241,236,225,.035),rgba(241,236,225,0));
  display:flex;flex-direction:column;gap:10px;position:relative;
  transition:border-color .5s,background .5s,
             transform .34s cubic-bezier(.2,.8,.3,1),
             box-shadow .34s ease}
/* the pop: up 3px, a shade larger, a green hairline and a shadow under it,
   with a touch of overshoot on the way up and a slower settle back down */
.qbox:hover,.qbox:focus-within{
  transform:translateY(-3px) scale(1.02);
  border-color:rgba(52,224,161,.42);
  box-shadow:0 16px 32px -20px rgba(0,0,0,.95),
             inset 0 0 0 1px rgba(52,224,161,.10);
  transition:border-color .18s ease,background .18s ease,
             transform .2s cubic-bezier(.34,1.5,.64,1),
             box-shadow .2s ease;
  z-index:2}
@media(prefers-reduced-motion:reduce){
  .qbox,.qbox:hover,.qbox:focus-within{transform:none;transition:none}}
.qbox .qic{display:block;width:26px;height:26px;color:var(--acc);transition:color .5s}
.qbox .qic svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;
  stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.qbox .qt{font-family:var(--display);font-size:22px;line-height:1;color:var(--ink)}
.qbox .qd{font-size:13px;line-height:1.45;color:var(--faint)}
.qbox.on{border-color:rgba(52,224,161,.5);
  background:linear-gradient(180deg,rgba(52,224,161,.09),rgba(52,224,161,0))}
.qbox.on .qic{color:var(--acc2)}
@media(prefers-reduced-motion:reduce){.qbox{transition:none}}

.hero h1{margin-top:38px}
@media(max-width:720px){.hero h1{margin-top:30px}}

/* the plate */
.stage{position:relative;border:1px solid var(--line);overflow:hidden;border-radius:var(--r);
  background:radial-gradient(122% 96% at 34% 40%,#111c34 0%,#0a1020 60%,#070a12 100%);
  box-shadow:0 46px 100px -52px #000}
.stagehead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint)}
.stagehead b{color:var(--mut);font-weight:400}
.stagehead .st{color:var(--acc2);transition:opacity .26s ease}
.stagehead .st.fading{opacity:0}
.steps{display:flex;border-top:1px solid var(--line)}
.steps .step{flex:1;min-height:44px;padding:12px 6px;background:transparent;border:0;
  border-right:1px solid var(--line);color:var(--faint);font-family:var(--body);font-size:12.5px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.3s}
.steps .step:last-child{border-right:0}
.steps .step .n{font-family:var(--mono);font-size:9px;color:inherit}
.steps .step.on{color:var(--ink);background:rgba(91,140,255,.12);box-shadow:inset 0 -2px 0 var(--acc2)}
.steps .step.done{color:var(--mut)}
.steps .step.done .n{color:var(--acc2)}
@media(max-width:520px){.steps{flex-wrap:wrap}.steps .step{flex:1 0 50%;border-bottom:1px solid var(--line)}}
/* ── the plate morphs, it does not cut ──────────────────────────────────
   One ground plane sits behind all four beats and never restarts, so the
   space itself never moves. The two drawings then cross over each other:
   the outgoing one settles back and goes soft while the incoming one grows
   out of the same light and sharpens. They are deliberately on screen
   together in the middle, which is what makes it read as one form becoming
   another. The blur is what keeps that double image from looking doubled.

   Pure transitions, no keyframes: a keyframe with fill-mode is thrown away
   the instant the class is removed, which is exactly the hard cut this
   replaces. */
.stage .scenes{position:relative;isolation:isolate}
.stage .scenes .sharedfloor{z-index:0}
.stage .scene{
  z-index:1;
  opacity:0;
  visibility:hidden;
  filter:blur(6px);
  transform:scale(.968);
  will-change:opacity,transform,filter;
  transition:opacity .62s cubic-bezier(.45,0,.55,1),
             filter .62s cubic-bezier(.45,0,.55,1),
             transform .74s cubic-bezier(.45,0,.55,1),
             visibility 0s linear .74s}
.stage .scene.on{
  opacity:1;
  visibility:visible;
  filter:blur(0);
  transform:scale(1);
  transition:opacity .8s cubic-bezier(.2,0,.2,1),
             filter .8s cubic-bezier(.2,0,.2,1),
             transform .9s cubic-bezier(.2,0,.2,1),
             visibility 0s linear 0s}
@media(prefers-reduced-motion:reduce){
  .stage .scene{transition:none;filter:none;transform:none}
}

.platecap{display:flex;gap:14px;align-items:baseline;font-family:var(--mono);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.platecap b{color:var(--mut);font-weight:400}
.platenote{font-size:14.5px;line-height:1.55;color:var(--faint)}
.colophon{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:22px 0 0;border-top:1px solid var(--line);margin-top:18px}

/* the two hero columns end on the same line: the plate keeps its proportions
   and the note under it is pushed to the foot of the column */
.hero{align-items:stretch}
.hright{justify-content:flex-start}
.hright .platewrap{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.platewrap{transition:opacity .26s ease}
.platewrap.fading{opacity:0}
@media(prefers-reduced-motion:reduce){.platewrap{transition:none}}

/* ── the film ───────────────────────────────────────────────────────────
   Same measure and same furniture as the plate above it: a bordered well,
   a caption in the plate's voice, and the two calls to action centred
   underneath so the eye finishes in the middle of the page. */
/* the film sits on the same measure as the plate in the hero: same column
   width, same gap, so its left and right edges line up with the plate */
.film .split{grid-template-columns:minmax(0,1fr) 460px;gap:48px;align-items:start}
@media(max-width:1040px){.film .split{grid-template-columns:1fr;gap:32px}}
.filmfig{margin:0;display:flex;flex-direction:column;gap:14px}
/* The picture carries nothing on top of it: the browser's own controls and
   its centre play button are switched off, and the film is driven from a bar
   of our own, sitting directly under the frame where it is plainly a player.
   The markup still ships with native controls, so a visitor with JavaScript
   switched off gets a working player rather than a still image. */
.filmplayer{display:flex;flex-direction:column}
.filmbox{position:relative;width:100%;aspect-ratio:16/9;background:#04070e;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;
  box-shadow:0 46px 100px -52px #000}
.filmbox video{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;background:transparent}
video::-webkit-media-controls-overlay-play-button{display:none}
video::-webkit-media-controls-start-playback-button{display:none}

.filmctl{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);
  background:rgba(241,236,225,.035)}
.filmctl .ic,.filmctl .tx{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 8px;border:1px solid transparent;background:none;
  color:var(--mut);cursor:pointer;border-radius:var(--r3);transition:.16s}
.filmctl .ic:hover,.filmctl .tx:hover{color:var(--ink);border-color:var(--line2)}
.filmctl .tx{font-family:var(--mono);font-size:10px;letter-spacing:.14em}
.filmctl .tx[aria-pressed="true"]{color:#04101d;background:var(--acc2);border-color:transparent}
.filmctl .pp{min-width:38px}
.filmctl .tri{width:0;height:0;border-left:11px solid var(--acc2);
  border-top:7px solid transparent;border-bottom:7px solid transparent}
.filmctl .bars{display:none;gap:3px}
.filmctl .bars i{display:block;width:3.5px;height:13px;background:var(--acc2)}
.filmctl.playing .tri{display:none}
.filmctl.playing .bars{display:flex}
.filmctl .spk{width:14px;height:12px;background:currentColor;
  clip-path:polygon(0 32%,32% 32%,62% 0,62% 100%,32% 68%,0 68%)}
.filmctl.muted .spk{opacity:.42}
.filmctl .fs{width:13px;height:13px;border:2px solid currentColor;
  clip-path:polygon(0 0,42% 0,42% 18%,18% 18%,18% 42%,0 42%,0 100%,42% 100%,42% 82%,
    18% 82%,18% 58%,0 58%,0 0,100% 0,58% 0,58% 18%,82% 18%,82% 42%,100% 42%,100% 100%,
    58% 100%,58% 82%,82% 82%,82% 58%,100% 58%)}
.filmctl .tt{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--faint);
  white-space:nowrap}
.filmctl .seek{flex:1;min-width:60px;height:34px;appearance:none;background:none;cursor:pointer}
.filmctl .seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:rgba(241,236,225,.18)}
.filmctl .seek::-moz-range-track{height:3px;border-radius:2px;background:rgba(241,236,225,.18)}
.filmctl .seek::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--acc2);margin-top:-4.5px;border:0}
.filmctl .seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;
  background:var(--acc2);border:0}
.filmctl .seek:focus-visible{outline:3px solid var(--acc2);outline-offset:2px}
@media(max-width:520px){
  .filmctl{flex-wrap:wrap;gap:8px}
  .filmctl .seek{order:5;flex:1 0 100%}
}
.filmcap{justify-content:center;text-align:center;white-space:nowrap}
.filmnote{font-size:14.5px;line-height:1.5;color:var(--mut);text-align:center;
  display:flex;flex-direction:column;gap:2px}
@media(max-width:1040px){.filmcap{white-space:normal}}

.filmact{margin-top:44px;padding-top:34px;border-top:1px solid var(--line);
  display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:center}
@media(max-width:960px){.filmact{margin-top:32px;padding-top:26px}}

/* ── sections ───────────────────────────────────────────────────────── */
section.band{padding:70px 0;border-top:1px solid var(--line)}
.bandhead{max-width:60ch}
.bandhead p{margin-top:14px;color:var(--mut);font-size:17px;font-weight:300}
.grid3{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}
.tile{padding:26px 26px 26px 0;border-right:1px solid var(--line)}
.tile:last-child{border-right:0}
@media(max-width:900px){.tile{border-right:0;border-bottom:1px solid var(--line);padding-right:0}}
.tile h3{margin-bottom:9px}
.tile p{color:var(--mut);font-size:15px}

/* plates in a row */
.cards{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card3{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);overflow:hidden}
.card3 .art{aspect-ratio:3/2;position:relative;
  background:radial-gradient(120% 96% at 36% 40%,#101a30 0%,#0a0f1e 62%,#070a12 100%)}
.card3 .art svg{width:100%;height:100%;display:block}
.card3 .meta{padding:16px 18px 20px;border-top:1px solid var(--line)}
.card3 .meta b{display:block;font-family:var(--display);font-size:21px;font-weight:400}
.card3 .meta span{display:block;margin-top:7px;color:var(--mut);font-size:14.5px}

/* split */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
@media(max-width:960px){.split{grid-template-columns:1fr;gap:32px}}
.split.rev .fig{order:2}
@media(max-width:960px){.split.rev .fig{order:0}}
.fig{position:relative;aspect-ratio:3/2;border:1px solid var(--line);overflow:hidden;border-radius:var(--r);
  background:radial-gradient(120% 96% at 36% 40%,#101a30 0%,#0a0f1e 62%,#070a12 100%)}
.fig svg{width:100%;height:100%;display:block}
/* a glimpse of the portal: cropped, edges dissolving, sitting in the same
   dark well as the drawings so it belongs to the page rather than sitting on
   top of it */
.shot{position:relative;margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:var(--r2)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(7,10,18,0) 55%,rgba(7,10,18,.55) 100%)}
.shot figcaption{margin-top:14px;position:relative;z-index:1}
/* on a wide screen the glimpse runs a little past its column, so the detail
   is readable without turning it into a full screenshot */
@media(min-width:1180px){.shot{width:122%;max-width:none}}
@media(max-width:960px){.shot img{max-width:640px}}

.morelink{display:inline-block;margin-top:26px;color:var(--acc2);font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid rgba(52,224,161,.4);padding-bottom:3px}
.morelink:hover{border-bottom-color:var(--acc2)}

/* numbered clauses */
.stepgrid{margin-top:34px;max-width:78ch}
.stepcard{display:grid;grid-template-columns:78px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.stepcard:last-child{border-bottom:1px solid var(--line)}
@media(max-width:640px){.stepcard{grid-template-columns:1fr;gap:8px}}
.stepcard .num{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--acc);padding-top:7px}
.stepcard h3{margin-bottom:8px}
.stepcard p{color:var(--mut);font-size:15.5px}

/* quote */
.quote{border-top:1px solid var(--line2);padding-top:34px}
.quote .big{font-family:var(--display);font-size:clamp(28px,3.4vw,42px);line-height:1.14;
  max-width:26ch;text-wrap:balance}
.quote .big span{display:block;color:var(--mut);margin-top:14px;font-size:.62em;font-style:italic}
.quote p{margin-top:26px;color:var(--mut);font-size:17px;font-weight:300;max-width:66ch}
.quote .foot{margin-top:18px;color:var(--ink);font-size:17px}

/* code */
.codewrap{margin-top:30px;border:1px solid var(--line);background:#05070d;
  border-radius:var(--r2);overflow:hidden}
.codewrap .h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.codewrap .h i{width:6px;height:6px;border-radius:50%;background:var(--acc2);display:block}
pre{overflow-x:auto;padding:20px;font:400 12.8px/1.7 var(--mono);color:#cfe0ff}

/* pricing */
.plans{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(max-width:980px){.plans{grid-template-columns:1fr}}
.plan{padding:30px 28px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.plan:last-child{border-right:0}
@media(max-width:980px){.plan{border-right:0;border-bottom:1px solid var(--line)}}
.plan.featured{background:linear-gradient(180deg,rgba(52,224,161,.07),transparent 60%)}
.plan .badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc2);display:block;margin-bottom:12px}
.plan h3{font-size:25px}
.plan .who{margin-top:8px;color:var(--faint);font-size:13.5px;min-height:42px}
.plan .price{margin-top:18px;font-family:var(--display);font-size:48px;line-height:1}
.plan .unit{color:var(--mut);font-size:13.5px;margin-top:8px}
.plan ul{margin-top:22px;list-style:none;flex:1}
.plan li{padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--mut);display:flex;gap:12px}
.plan li .c{color:var(--acc2);font-family:var(--mono);font-size:10px;padding-top:5px}
.plan .b1,.plan .b2{margin-top:24px;width:100%}
.pricenote{margin-top:24px;color:var(--faint);font-size:13.5px;max-width:74ch}
.comparenote{margin-top:30px;border-left:2px solid var(--acc);padding:6px 0 6px 22px;color:var(--mut);
  font-size:16.5px;font-weight:300;line-height:1.6;max-width:74ch}

/* faq */
.faq{margin-top:30px;max-width:78ch;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 0;font-family:var(--display);font-size:21px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc2);font-family:var(--mono);font-size:17px}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 22px;color:var(--mut);font-size:16px;max-width:66ch}

/* contact */
.contactgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start}
@media(max-width:960px){.contactgrid{grid-template-columns:1fr;gap:30px}}
.formcard{border:1px solid var(--line2);background:var(--panel);padding:28px;border-radius:var(--r)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.row2{grid-template-columns:1fr}}
.field{margin-top:16px;display:block}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;min-height:46px;padding:12px 14px;
  border:1px solid var(--line2);background:#05070d;color:var(--ink);font:400 16px var(--body);
  border-radius:var(--r3)}
.field textarea{min-height:112px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#79839f}
.fine{margin-top:14px;font-size:13px;color:var(--faint);line-height:1.6}
.fine a{color:var(--mut)}
.notice{margin-top:18px;padding:14px 16px;border:1px solid rgba(52,224,161,.5);
  background:rgba(52,224,161,.09);font-size:14.5px}

/* cta */
.ctaband{padding:64px 0 74px;border-top:1px solid var(--line)}
.ctabox{display:flex;gap:40px;align-items:flex-end;flex-wrap:wrap;border-top:2px solid var(--acc2);
  padding-top:34px}
.ctabox .t{flex:1;min-width:290px}
.ctabox p{margin-top:14px;color:var(--mut);font-size:17px;font-weight:300;max-width:58ch}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* legal pages */
.legal{max-width:74ch;margin-top:30px}
.legal section{padding:28px 0;border-top:1px solid var(--line)}
.legal section:first-child{border-top:0;padding-top:0}
.legal section:last-child{border-bottom:1px solid var(--line)}
.legal h2{font-size:26px;margin-bottom:12px}
.legal p{color:var(--mut);font-size:16.5px;font-weight:300}
.legal p+p{margin-top:14px}
.legal a{color:var(--acc2)}

/* footer */
footer.site{border-top:1px solid var(--line);padding:50px 0 66px;color:var(--faint);font-size:13.5px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:34px}
@media(max-width:800px){.fgrid{grid-template-columns:1fr}}
footer.site h3{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mut);margin-bottom:14px;font-weight:400}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer.site a{color:var(--faint);text-decoration:none}
footer.site a:hover{color:var(--ink);text-decoration:underline}
.fbrand{font-family:var(--display);font-size:23px;color:var(--ink)}
.fnote{margin-top:14px;max-width:46ch;line-height:1.7}
.legal{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);display:flex;gap:20px;
  flex-wrap:wrap;justify-content:space-between}
/* ── cookie and privacy choices ─────────────────────────────────────────
   The site sets nothing that needs consent by default: no advertising,
   no profiling, no third party analytics. This bar exists so the choice
   is on the record, so anything optional stays OFF until it is switched
   on, and so the decision can be changed later from the footer. Refusing
   is exactly as easy as accepting, which is what the GDPR asks for. */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:16px 22px;background:rgba(7,10,18,.97);border-top:1px solid var(--line2);
  backdrop-filter:blur(14px);box-shadow:0 -24px 60px -30px #000}
.cbar.open{display:block}
.cbar .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cbar p{margin:0;flex:1 1 340px;min-width:0;font-size:14.5px;line-height:1.5;color:var(--mut)}
.cbar p b{color:var(--ink);font-weight:400}
.cbar .btns{display:flex;gap:10px;flex-wrap:wrap}
.cbar button{min-height:44px;padding:11px 20px;border-radius:var(--r3,8px);cursor:pointer;
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  border:1px solid var(--line2);background:rgba(241,236,225,.04);color:var(--ink);transition:.16s}
.cbar button:hover{border-color:var(--acc2)}
.cbar button.yes{background:var(--acc2);border-color:transparent;color:#04101d;font-weight:600}
.cpanel{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:none;
  max-width:1180px;margin-left:auto;margin-right:auto}
.cpanel.open{display:block}
.crow{display:flex;gap:16px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.crow:first-child{border-top:0}
.crow h3{font-size:15px;font-weight:400}
.crow p{font-size:13.5px;color:var(--faint)}
.crow .sw{margin-left:auto;display:flex;align-items:center;gap:10px;
  font-family:var(--mono,monospace);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.crow input{width:20px;height:20px;accent-color:var(--acc2)}
@media(max-width:700px){.cbar .btns{width:100%}.cbar .btns button{flex:1}}

/* ── fast scrolling without white flashes ───────────────────────────────
   When a phone (or a fast flick) scrolls quicker than the page can paint,
   the browser fills the gap with the page's base colour. The ground above is
   gradients only, so that base colour was white, and it flashed. Now:
   1. the base colour is the navy itself, so any unpainted gap is invisible;
   2. the ground is a fixed layer the graphics card just holds, instead of a
      "background … fixed" the browser repaints on every scroll frame;
   3. bars that stay on screen are solid, not blurring what scrolls under
      them on every frame (they were 90%+ opaque, so the blur barely showed);
   4. on touch screens the paper grain is laid on flat, not blended live. */
html{background-color:#070a12}
body{background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 62% at 74% 0%,rgba(91,140,255,.15),transparent 58%),
    radial-gradient(90% 50% at 6% 12%,rgba(52,224,161,.07),transparent 62%),
    linear-gradient(180deg,#080c16 0%,#070a12 40%,#05070d 100%);
  transform:translateZ(0)}
header.site{background:rgba(7,10,18,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
.cbar{-webkit-backdrop-filter:none;backdrop-filter:none}
#tlp .jump,#tlp .switch{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#tlp .jump{background:rgba(9,12,22,.98)!important}
@media (hover:none),(pointer:coarse){
  body::after{mix-blend-mode:normal;opacity:.035}
}

/* ── phones: nothing touches the edge, and the menu is a drawer (owner 2026-10-08) ──
   The header row carries both .wrap (20px sides) and .bar, and .bar's padding reset
   the sides to 0, so the wordmark, Menu, both buttons and every menu item ran to the
   glass. On a phone: the page's 20px inset; a hamburger on the left where a thumb
   expects it, then the wordmark; the menu slides in from the left, large enough to
   read, over a dimmed page, and shuts once something is chosen (site.js). */
.navhead{display:none}
@media(max-width:760px){
  header.site .wrap.bar{padding:12px 20px}
  .navtoggle{order:-1;margin-left:0;width:50px;height:50px;min-width:50px;padding:0;
    font-size:0;color:transparent;border:1px solid var(--line2);border-radius:12px;
    background:
      linear-gradient(var(--ink),var(--ink)) center calc(50% - 8px)/24px 2px no-repeat,
      linear-gradient(var(--ink),var(--ink)) center 50%/24px 2px no-repeat,
      linear-gradient(var(--ink),var(--ink)) center calc(50% + 8px)/24px 2px no-repeat,
      rgba(241,236,225,.04)}
  .navtoggle:focus-visible{outline:3px solid var(--acc2);outline-offset:3px}
  .brand{flex:1;min-width:0}
  nav.primary,nav.primary.open{display:block;position:fixed;top:0;left:0;bottom:0;z-index:100;
    width:min(86vw,360px);margin:0;padding:0 0 28px;overflow-y:auto;background:#0a0f1c;
    border-right:1px solid var(--line2);transform:translateX(-102%);visibility:hidden;
    transition:transform .28s ease,visibility 0s linear .28s}
  nav.primary.open{transform:none;visibility:visible;transition:transform .28s ease,visibility 0s;
    box-shadow:0 0 0 100vmax rgba(3,5,10,.62)}
  .navhead{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 16px 24px;
    border-bottom:1px solid var(--line2)}
  .navhead .wm{font-family:var(--display);font-size:26px;color:var(--ink)}
  .navclose{all:unset;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;
    border:1px solid var(--line2);color:var(--ink);font:300 38px/1 var(--body);cursor:pointer}
  .navclose:focus-visible{outline:3px solid var(--acc2);outline-offset:2px}
  .navclose{position:relative}
  .navclose span{display:none}
  .navclose::before,.navclose::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:2px;
    background:var(--ink);border-radius:1px;transform:translate(-50%,-50%) rotate(45deg)}
  .navclose::after{transform:translate(-50%,-50%) rotate(-45deg)}
  nav.primary ul{padding:8px 24px 0}
  nav.primary a{padding:18px 2px;font-size:16px;letter-spacing:.14em;color:var(--ink)}
  body.navopen{overflow:hidden}
  /* the film: the video straight after the animation, its words under it */
  .band.film{padding-top:26px}
  .film .split{gap:22px}
  .film .split>.filmfig{order:-1}
}
@media(prefers-reduced-motion:reduce){nav.primary,nav.primary.open{transition:none}}