/* ==========================================================================
   TACC Partners: the entrance cover, shown over the house site. Ported from the North Post Group
   cover (16 Sep 2026) and recoloured to the TACC tokens: navy field, gold instrument, Playfair /
   Jost / Geist Mono, grain, drawn lines.
   CSP-clean: no inline style or script; every visual lives here, in cover.js and in cover-art.js.
   ========================================================================== */
@font-face{font-family:"Playfair Display";src:url(/assets/fonts/playfair-var.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(/assets/fonts/playfair-italic-var.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(/assets/fonts/jost-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --abyss:#0A1017; --deep:#0E1620; --ink-bg:#101923; --slate:#1D2835;
  --teal:#24527A; --sea:#5A80AA; --glow:#A9C4E2; --mist:#EEF2F6; --foam:#D7E1EC;
  --sand:#A8843F; --sand-lt:#D1AD68;
  --on-dark:#EAF0F6; --on-dark-2:#A7B6C6; --on-dark-3:#8193A6; --rule-d:rgba(215,225,236,.13);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.1,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease-x:cubic-bezier(.16,1,.3,1);
  --frame:clamp(10px,1.5vw,22px);
  --gut:calc(var(--frame) + clamp(14px,2.2vw,30px));
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--abyss);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;background:var(--abyss);color:var(--on-dark);font-family:var(--sans);
  font-size:1rem;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,p{margin:0;font-weight:400}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ---------- scene: fixed, full-bleed, behind the page ---------- */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(90% 55% at 50% var(--hz,62%),rgba(36,82,122,.20),rgba(36,82,122,0) 70%),
    radial-gradient(60% 45% at 50% 30%,rgba(90,128,170,.07),rgba(90,128,170,0) 70%),
    linear-gradient(180deg,#080D13 0%,#0B1219 48%,#0D1620 100%)}
.scene__field{position:absolute;left:-2%;top:-2%;width:104%;height:104%;opacity:0;transition:opacity 1.8s ease;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent var(--fm0,48%),#000 var(--fm1,72%));
  mask-image:linear-gradient(180deg,transparent 0,transparent var(--fm0,48%),#000 var(--fm1,72%));will-change:transform}
.scene__field.is-live{opacity:.86}
.scene__sky,.scene__inst{position:absolute;inset:0;width:100%;height:100%}
.scene__shade{position:absolute;inset:0;background:
  linear-gradient(0deg,rgba(10,16,23,.78) 0%,rgba(10,16,23,0) 22%),
  linear-gradient(180deg,rgba(10,16,23,.45) 0%,rgba(10,16,23,0) 16%)}
.scene__grain{position:absolute;inset:0;background:url(/assets/img/grain.png) repeat;background-size:192px 192px;opacity:.5}
/* the chart frame: a neatline with graduated edges, inset from the viewport */
.scene__frame{position:absolute;inset:var(--frame);border:1px solid rgba(215,225,236,.12)}
.scene__frame::before,.scene__frame::after{content:"";position:absolute;inset:0;pointer-events:none}
.scene__frame::before{background:
  repeating-linear-gradient(90deg,rgba(215,225,236,.2) 0 1px,transparent 1px 14px) top left/100% 4px no-repeat,
  repeating-linear-gradient(90deg,rgba(215,225,236,.2) 0 1px,transparent 1px 14px) bottom left/100% 4px no-repeat,
  repeating-linear-gradient(180deg,rgba(215,225,236,.2) 0 1px,transparent 1px 14px) top left/4px 100% no-repeat,
  repeating-linear-gradient(180deg,rgba(215,225,236,.2) 0 1px,transparent 1px 14px) top right/4px 100% no-repeat}
.scene__frame::after{background:
  repeating-linear-gradient(90deg,rgba(215,225,236,.34) 0 1px,transparent 1px 70px) top left/100% 9px no-repeat,
  repeating-linear-gradient(90deg,rgba(215,225,236,.34) 0 1px,transparent 1px 70px) bottom left/100% 9px no-repeat,
  repeating-linear-gradient(180deg,rgba(215,225,236,.34) 0 1px,transparent 1px 70px) top left/9px 100% no-repeat,
  repeating-linear-gradient(180deg,rgba(215,225,236,.34) 0 1px,transparent 1px 70px) top right/9px 100% no-repeat}

/* ---------- page grid: bar / stage / foot, exactly one screen when it fits ---------- */
.page{position:relative;z-index:1;min-height:100vh;min-height:100svh;overflow:clip;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:calc(var(--frame) + 12px) var(--gut) calc(var(--frame) + 12px);
  padding-top:max(calc(var(--frame) + 12px),env(safe-area-inset-top));padding-bottom:max(calc(var(--frame) + 12px),env(safe-area-inset-bottom))}
.bar,.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-3);line-height:1}
.bar{padding-block:6px}
.bar,.foot{text-shadow:0 0 12px rgba(10,16,23,.95),0 0 3px rgba(10,16,23,.95)}
.bar__item{display:flex;align-items:center;gap:10px;white-space:nowrap}
.bar__needle{width:14px;height:14px;flex:none}
.bar__n{fill:none;stroke:var(--sand-lt);stroke-width:1.2;stroke-linejoin:round}
.bar__s{fill:none;stroke:rgba(215,225,236,.45);stroke-width:1.2;stroke-linecap:round}
.bar__deg{display:inline-block;min-width:4.6ch;text-align:right;color:var(--on-dark-2);font-variant-numeric:tabular-nums}
.bar__sep{display:inline-block;width:1px;height:10px;margin:0 4px 0 12px;background:var(--rule-d);vertical-align:middle}
.foot{padding-block:6px;flex-wrap:wrap;row-gap:10px}
.foot__c{white-space:nowrap}
/* non-solicitation fine print (operator, 14 Sep 2026): its own line above the © / Privacy row, sentence case */
.foot__legal{flex:0 0 100%;max-width:100%;font-family:var(--sans);font-size:.64rem;font-weight:400;line-height:1.5;
  letter-spacing:.01em;text-transform:none;color:var(--on-dark-3);opacity:.85;text-wrap:pretty}
.foot__p{position:relative;text-decoration:none;padding:10px 2px;margin:-10px -2px;color:var(--on-dark-2);transition:color .3s}
.foot__p::after{content:"";position:absolute;left:2px;right:2px;bottom:5px;height:1px;background:var(--sand-lt);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.foot__p:hover,.foot__p:focus-visible{color:#fff}
.foot__p:hover::after,.foot__p:focus-visible::after{transform:scaleX(1);transform-origin:left}

.stage{display:grid;grid-template-rows:minmax(clamp(170px,30svh,420px),1fr) auto auto;justify-items:center;text-align:center;min-height:0}
.orbit{align-self:stretch;justify-self:stretch;min-height:0}

/* the wordmark: glyph outlines, one <use> per letter */
.mark{width:min(100%,1080px);margin-top:clamp(10px,2.4svh,30px)}
.wm-t{display:block;font-family:var(--serif);font-weight:400;line-height:1;color:#F4F7FB;text-transform:uppercase;
  font-size:clamp(2rem,7.3vw,6.1rem);letter-spacing:.085em;text-indent:.085em;white-space:nowrap}
.wm-l{display:inline-block;will-change:transform;transition:transform .5s var(--ease),color .5s var(--ease)}
.wm{width:100%;height:auto;overflow:visible;fill:#F2F7FB}
.wm__l{transition:fill .5s var(--ease)}
.copy{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:clamp(18px,3.4svh,40px);padding-bottom:clamp(14px,4svh,54px)}
.copy::before{content:"";position:absolute;left:50%;top:44%;width:min(150%,1200px,100vw);height:210%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,16,23,.72),rgba(10,16,23,.38) 55%,rgba(10,16,23,0))}
.nobr{white-space:nowrap}
.about{max-width:39em;font-size:clamp(.98rem,.55vw + .82rem,1.14rem);line-height:1.72;font-weight:350;color:#C2D0DE;text-wrap:balance;letter-spacing:.005em}.acts{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,1.6svh,18px);margin-top:clamp(20px,3.4svh,38px)}

/* primary action: the site's glass pill with the gold padlock, plus the gold arrow disc */
.access{position:relative;display:inline-flex;align-items:center;gap:12px;padding:8px 8px 8px 20px;min-height:50px;text-decoration:none;
  border:1px solid rgba(169,196,226,.4);border-radius:999px;background:linear-gradient(180deg,rgba(36,82,122,.42),rgba(36,82,122,.16));
  font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;line-height:1;color:#F2F7FB;
  box-shadow:inset 0 1px 0 rgba(215,225,236,.12),0 18px 50px -24px rgba(90,128,170,.7);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .45s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease),transform .5s var(--ease)}
.access::before{content:"";position:absolute;inset:-6px;border-radius:inherit;border:1px solid rgba(209,173,104,.0);transition:border-color .5s var(--ease),inset .5s var(--ease)}
.access:hover,.access:focus-visible{border-color:var(--glow);background:linear-gradient(180deg,rgba(36,82,122,.62),rgba(36,82,122,.28));
  box-shadow:inset 0 1px 0 rgba(215,225,236,.18),0 0 0 4px rgba(169,196,226,.08),0 22px 60px -20px rgba(169,196,226,.6)}
.access:hover::before,.access:focus-visible::before{border-color:rgba(209,173,104,.35);inset:-9px}
.access:focus-visible{outline-offset:6px}
.access__lock{width:16px;height:16px;flex:none;overflow:visible}
.access__lock path,.access__lock rect{fill:none;stroke:var(--sand-lt);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.access__shackle{transform-box:fill-box;transform-origin:100% 100%;transition:transform .5s var(--ease)}
.access:hover .access__shackle,.access:focus-visible .access__shackle,.access[aria-expanded="true"] .access__shackle{transform:translate(1px,-1.5px) rotate(-18deg)}
.access__go{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--sand-lt);transition:transform .5s var(--ease),background-color .4s}
.access__go::before{content:"";position:absolute;left:10px;right:10px;top:50%;height:1.5px;background:var(--abyss);transform:translateY(-50%)}
.access__go::after{content:"";position:absolute;right:10px;top:50%;width:7px;height:7px;border-top:1.5px solid var(--abyss);border-right:1.5px solid var(--abyss);transform:translate(1px,-50%) rotate(45deg)}
.access:hover .access__go,.access:focus-visible .access__go{transform:translateX(4px);background:#E0C289}
/* secondary action, above the investor pill (Alex Wang, 16 Sep 2026): a ghost pill in the same
   geometry, hairline and transparent, so the primary still leads. The envelope opens on hover. */
.ask{position:relative;display:inline-flex;align-items:center;gap:11px;padding:0 22px;min-height:44px;
  border:1px solid rgba(209,173,104,.34);border-radius:999px;background:rgba(10,16,23,.28);
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;line-height:1;color:#E9F1F1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;
  transition:border-color .45s var(--ease),background-color .45s var(--ease),color .3s,box-shadow .45s var(--ease)}
.ask:hover,.ask:focus-visible{border-color:var(--sand-lt);background:rgba(185,138,69,.14);color:#fff;
  box-shadow:0 0 0 4px rgba(209,173,104,.07),0 16px 40px -26px rgba(209,173,104,.8)}
.ask:focus-visible{outline-offset:6px}
.ask__mark{width:15px;height:15px;flex:none;overflow:visible}
.ask__mark rect,.ask__mark path{fill:none;stroke:var(--sand-lt);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ask__flap{transform-box:fill-box;transform-origin:50% 0;transition:transform .5s var(--ease)}
.ask:hover .ask__flap,.ask:focus-visible .ask__flap,.ask[aria-expanded="true"] .ask__flap{transform:scaleY(-.62) translateY(1px)}
.no-js .ask{display:none}
.noscript__a{color:var(--sand-lt);text-underline-offset:3px}

.contact{position:relative;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  color:var(--on-dark-2);padding:12px 2px;transition:color .3s}
.contact::after{content:"";position:absolute;left:2px;right:2px;bottom:7px;height:1px;background:var(--sand-lt);transform:scaleX(.28);transform-origin:left;transition:transform .55s var(--ease)}
.contact:hover,.contact:focus-visible{color:#fff}
.contact:hover::after,.contact:focus-visible::after{transform:scaleX(1)}
.no-js .ask{display:none}
.noscript{margin-top:18px;font-size:.92rem;color:var(--on-dark-2)}

/* ---------- entrance (pure CSS, runs without JS; off for reduced motion) ---------- */
@keyframes wmIn{from{transform:translateY(118%)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .wm__l{animation:wmIn 1.35s var(--ease-x) backwards;animation-delay:calc(.5s + var(--i,0) * 42ms)}
  .wm__l:nth-child(1){--i:0}.wm__l:nth-child(2){--i:1}.wm__l:nth-child(3){--i:2}.wm__l:nth-child(4){--i:3}.wm__l:nth-child(5){--i:4}
  .wm__l:nth-child(6){--i:6}.wm__l:nth-child(7){--i:7}.wm__l:nth-child(8){--i:8}.wm__l:nth-child(9){--i:9}
  .wm__l:nth-child(10){--i:11}.wm__l:nth-child(11){--i:12}.wm__l:nth-child(12){--i:13}.wm__l:nth-child(13){--i:14}.wm__l:nth-child(14){--i:15}
  .about{animation:rise 1.1s var(--ease) .9s backwards}
  .acts{animation:rise 1.1s var(--ease) 1.15s backwards}
  .bar,.foot{animation:fade 1.4s ease 1.5s backwards}
  .scene__frame{animation:fade 2s ease .2s backwards}
  .gate__step{animation:stepIn .6s var(--ease-x) backwards}
}
@keyframes stepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ---------- investor access: dialog (card on desktop, sheet on phones) ---------- */
.gate{position:fixed;inset:0;margin:auto;z-index:50;width:min(468px,calc(100% - 32px));height:fit-content;max-height:calc(100svh - 32px - var(--kb,0px));
  padding:0;border:0;background:transparent;color:var(--on-dark);overflow:visible;
  opacity:0;transform:translateY(18px) scale(.985);transition:opacity .45s var(--ease),transform .7s var(--ease-x)}
.gate.is-open{opacity:1;transform:none}
/* the veil: what ::backdrop painted, now that the card opens non-modally (16 Sep 2026) */
.veil{position:fixed;inset:0;z-index:40;background:rgba(6,10,11,0);transition:background-color .5s ease}
.veil.is-on{background:rgba(6,10,11,.52)}
.gate::backdrop{background:rgba(5,9,13,0);transition:background-color .5s ease}
.gate.is-open::backdrop{background:rgba(5,9,13,.52)}
.gate__card{position:relative;max-height:inherit;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:24px;padding:clamp(24px,3.4vw,36px);
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(36,82,122,.30),rgba(36,82,122,0) 60%),
    linear-gradient(180deg,rgba(20,34,35,.96),rgba(12,20,21,.97));
  border:1px solid rgba(169,196,226,.22);
  box-shadow:inset 0 1px 0 rgba(215,225,236,.08),0 50px 120px -40px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}
.gate__card::before{content:"";position:absolute;left:50%;top:-1px;width:38%;height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(209,173,104,0),var(--sand-lt),rgba(209,173,104,0))}
.gate__card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:url(/assets/img/grain.png) repeat;background-size:192px 192px;opacity:.28;pointer-events:none}
.gate__card > *{position:relative;z-index:1}
.gate__x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(215,225,236,.14);
  color:var(--on-dark-2);transition:border-color .3s,color .3s,background-color .3s;z-index:2}
.gate__x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.gate__x:hover,.gate__x:focus-visible{border-color:rgba(169,196,226,.5);color:#fff;background:rgba(36,82,122,.25)}
.gate__head{display:flex;align-items:center;gap:14px;padding-right:44px}
.dial{width:42px;height:32px;flex:none;overflow:visible}
/* the mark in the card header: the house mark itself — the gold prism with its beam */
.dial__prism{fill:none;stroke:var(--sand-lt);stroke-width:3;stroke-linejoin:round}
.dial__beam{fill:none;stroke:var(--on-dark);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gate__kicker{flex:1;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:.64rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--glow)}
.gate__count{color:var(--sand-lt);font-variant-numeric:tabular-nums}
.gate__step{margin-top:22px}
.gate__title{font-family:var(--serif);font-size:clamp(1.75rem,2.6vw,2.15rem);line-height:1.08;letter-spacing:-.012em;color:#F4F8FB}
.gate__title:focus{outline:none}
.gate__text{margin-top:10px;font-size:.98rem;line-height:1.62;font-weight:350;color:var(--on-dark-2)}
.gate__email{font-weight:500;color:var(--on-dark);overflow-wrap:anywhere}
.gate__label{display:block;margin-top:24px;margin-bottom:9px;font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-3)}
.gate__input{display:block;width:100%;height:54px;padding:0 18px;border-radius:14px;border:1px solid rgba(215,225,236,.2);
  background:rgba(6,11,16,.55);color:var(--on-dark);font-family:var(--sans);font-size:1.0625rem;font-weight:400;letter-spacing:.01em;
  caret-color:var(--sand-lt);-webkit-appearance:none;appearance:none;transition:border-color .3s,box-shadow .3s,background-color .3s}
.gate__input::placeholder{color:rgba(167,182,198,.5)}
.gate__input:hover{border-color:rgba(215,225,236,.32)}
.gate__input:focus{outline:none;border-color:var(--glow);box-shadow:0 0 0 4px rgba(169,196,226,.12);background:rgba(6,11,16,.7)}
.gate__input[aria-invalid="true"]{border-color:rgba(226,160,120,.75)}
.gate__input:-webkit-autofill{-webkit-text-fill-color:var(--on-dark);-webkit-box-shadow:0 0 0 1000px #0C141D inset;caret-color:var(--sand-lt);transition:background-color 99999s}
/* the inquiry message: the same field, given lines to breathe and a lighter type size */
.gate__area{height:auto;min-height:120px;padding:15px 18px;font-size:1rem;line-height:1.55;resize:vertical}
.gate--ask .gate__label:first-of-type{margin-top:22px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.gate__msg{margin-top:12px;display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.5;color:#EFC9A6}
.gate__msg:empty{display:none}
.gate__msg::before{content:"";flex:none;width:7px;height:7px;margin-top:.5em;border:1px solid currentColor;transform:rotate(45deg)}
.gate__msg.is-ok{color:var(--glow)}
.gate__msg small{display:block;margin-top:2px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3)}
.gate__go{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:54px;margin-top:20px;border-radius:999px;
  background:linear-gradient(180deg,#DDB677,#C99C57);color:#0A1017;font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 40px -18px rgba(209,173,104,.8);transition:filter .3s,transform .4s var(--ease),box-shadow .4s}
.gate__go:hover{filter:brightness(1.07)}
.gate__go:active{transform:translateY(1px)}
.gate__go:focus-visible{outline-color:var(--sand-lt);outline-offset:4px}
.gate__go[aria-busy="true"]{cursor:progress}
.gate__go[aria-busy="true"]::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(10,16,23,.25);border-top-color:#0A1017;animation:spin .8s linear infinite}
.gate__go:disabled{cursor:not-allowed;filter:saturate(.6) brightness(.8)}
@keyframes spin{to{transform:rotate(360deg)}}
.gate__alt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin-top:16px}
.gate__link{position:relative;padding:10px 0;font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2);transition:color .3s}
.gate__link::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--sand-lt);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.gate__link:hover:not(:disabled),.gate__link:focus-visible{color:#fff}
.gate__link:hover:not(:disabled)::after,.gate__link:focus-visible::after{transform:scaleX(1)}
.gate__link:disabled{cursor:default;color:var(--on-dark-3)}
.gate__link .cd{font-variant-numeric:tabular-nums;color:var(--sand-lt)}

/* six-digit code: one real input (autofill, paste, screen readers) over six drawn cells */
.otp{position:relative;height:62px}
.otp__cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;pointer-events:none}
.otp__cells span{position:relative;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(215,225,236,.18);background:rgba(6,11,16,.55);
  font-family:var(--mono);font-size:1.5rem;font-weight:400;color:#F4F8FB;transition:border-color .3s,background-color .3s,box-shadow .3s,transform .35s var(--ease)}
.otp__cells span.is-on{border-color:rgba(169,196,226,.45)}
.otp.is-focus .otp__cells span.is-cur{border-color:var(--glow);box-shadow:0 0 0 4px rgba(169,196,226,.12)}
.otp.is-focus .otp__cells span.is-cur:empty::after{content:"";width:1.5px;height:24px;background:var(--sand-lt);animation:caret 1.05s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.otp.is-bad .otp__cells span{border-color:rgba(226,160,120,.7)}
.otp.is-shake .otp__cells{animation:shake .5s var(--ease)}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.otp.is-off .otp__cells span{opacity:.45}
.otp__input{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:12px;background:transparent;
  color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;font-size:16px;
  -webkit-appearance:none;appearance:none;outline:none;z-index:1}
.otp__input::selection{background:transparent}
.otp__input:focus-visible{outline:none}
.otp:focus-within{outline:0}
.otp__input:disabled{cursor:not-allowed}

.gate__step--done .gate__title{color:var(--sand-lt)}
.gate.is-done .gate__x{visibility:hidden}
.gate__bar{position:relative;height:1px;margin-top:22px;background:rgba(215,225,236,.14);overflow:hidden}
.gate__bar span{position:absolute;inset:0;background:linear-gradient(90deg,var(--glow),var(--sand-lt));transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-io)}
.gate.is-done .gate__bar span{transform:scaleX(1)}
.gate.is-done .dial__ring{stroke:var(--sand-lt)}

/* phones: a TOP sheet (14 Sep 2026: a bottom sheet hid under the keyboard in iOS in-app browsers, whose keyboard
   does not resize the page). Anchored to the top, the email and code fields always sit above the keyboard. */
@media (max-width:640px){
  /* the bar carries two clocks now: on a phone the times alone, so the row never widens the page */
  .bar__item--r span:not(.bar__deg):not(.bar__sep){display:none}
  .bar__deg{min-width:5.2ch}
  .bar__sep{margin:0 2px}
  /* a panel, not a slab: inset from both sides, centred, rounded all round, held near the top so
     the keyboard opens beneath it rather than over it */
  .gate{inset:auto auto auto 50%;top:max(12px,env(safe-area-inset-top));margin:0;width:calc(100% - 26px);max-width:430px;
    max-height:calc(100svh - 24px - var(--kb,0px));transform:translate(-50%,-14px);
    transition:opacity .4s var(--ease),transform .55s var(--ease-x),max-height .35s var(--ease)}
  .gate.is-open{transform:translate(-50%,0)}
  /* the card takes the room the keyboard leaves. Where the browser reports the visual viewport
     (kb-known) that is exact; where it does not — some iOS in-app browsers — fall back to a cap
     while a field is being typed into. Never a strip: 320px is the floor. */
  .gate.kb-known{max-height:max(320px,calc(100svh - 24px - var(--kb,0px)))}
  .gate.is-typing:not(.kb-known){max-height:62svh}
  /* only when the room left is genuinely tight does the card give anything up */
  .gate.kb-tight .gate__text,
  .gate.is-typing:not(.kb-known) .gate__text{display:none}
  .gate.kb-tight .gate__title,
  .gate.is-typing:not(.kb-known) .gate__title{font-size:1.5rem}
  .gate.kb-tight .gate__label,
  .gate.is-typing:not(.kb-known) .gate__label{margin-top:14px}
  .gate.kb-tight .gate__area,
  .gate.is-typing:not(.kb-known) .gate__area{min-height:0;height:58px}
  .gate.kb-tight .gate__go,
  .gate.is-typing:not(.kb-known) .gate__go{margin-top:14px}
  .gate.kb-tight .gate__alt,
  .gate.is-typing:not(.kb-known) .gate__alt{margin-top:10px;font-size:.74rem}
  /* typing: the explainer steps aside so the fields and the button fit the smaller card */
  .gate.is-typing .gate__text{display:none}
  .gate.is-typing .gate__title{font-size:1.5rem}
  .gate.is-typing .gate__label{margin-top:14px}
  .gate.is-typing .gate__area{min-height:0;height:58px}
  .gate.is-typing .gate__alt{margin-top:10px;font-size:.74rem}
  .gate.is-typing .gate__go{margin-top:14px}
  .gate__card{border-radius:22px;padding:20px 18px 22px}
  .gate__card::before{width:46px;height:3px;top:auto;bottom:9px;border-radius:3px;background:rgba(215,225,236,.22)}
  .gate__x{top:11px;right:11px;width:36px;height:36px}
  .gate__head{touch-action:none}
  .gate__step{margin-top:18px}
  .gate__title{font-size:1.72rem}
  .gate__text{font-size:.95rem}
  .otp__cells{gap:6px}
  .gate__alt{gap:4px 14px}
  .gate__link{letter-spacing:.1em}
}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .bar,.foot{font-size:.58rem;letter-spacing:.18em}
  .mark{width:100%}
  .wm-t{font-size:clamp(1.8rem,9.4vw,3rem);letter-spacing:.06em;text-indent:.06em}
  .about{font-size:.97rem;line-height:1.66;max-width:34em}
  .acts{gap:10px}
  .access{padding-left:18px;font-size:.74rem;min-height:48px}
  .ask{padding:0 18px;font-size:.69rem;min-height:42px}
}
@media (max-width:360px){
  .bar__item--l span{display:none}
  .access{gap:10px;letter-spacing:.14em}
  .ask{gap:9px;letter-spacing:.13em;font-size:.66rem}
  .contact{letter-spacing:.16em}
}
/* short phones (iPhone SE / Safari with bars): the longer copy + fine print still fit one screen */
@media (max-width:640px) and (max-height:700px){
  .copy{margin-top:10px;padding-bottom:4px}
  .about{font-size:.88rem;line-height:1.5}
  .acts{margin-top:12px}
  .foot{row-gap:6px}
  .foot__legal{font-size:.58rem;line-height:1.42}
}
@media (max-width:640px) and (max-height:600px){
  .stage{grid-template-rows:minmax(112px,1fr) auto auto}
  .mark{margin-top:4px}
}
@media (max-width:360px) and (max-height:640px){
  .stage{grid-template-rows:minmax(96px,1fr) auto auto!important}
  .about{font-size:.84rem!important;line-height:1.46!important}
  .foot__legal{font-size:.55rem;line-height:1.38}
}
/* the smallest phones (320 x 568 class): tighter rhythm so the cover still fits one screen */
@media (max-width:360px) and (max-height:640px){
  .stage{grid-template-rows:minmax(136px,1fr) auto auto}
  .mark{margin-top:6px}
  .copy{margin-top:12px;padding-bottom:6px}
  .about{font-size:.9rem;line-height:1.55}
  .acts{margin-top:14px}
}
/* short landscape screens (phones on their side): instrument left, wordmark and copy right, still one screen */
@media (max-height:520px) and (orientation:landscape) and (min-width:560px){
  .stage{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:1fr auto auto 1fr;
    grid-template-areas:"orbit ." "orbit mark" "orbit copy" "orbit .";column-gap:clamp(18px,4vw,48px);justify-items:start;text-align:left}
  .orbit{grid-area:orbit}
  .mark{grid-area:mark;width:100%;margin-top:0}
  .copy{grid-area:copy;align-items:flex-start;margin-top:clamp(10px,3svh,18px);padding-bottom:0}
  .copy::before{left:40%}
  .about{max-width:none;font-size:clamp(.82rem,1.6vw,.95rem);line-height:1.55;text-wrap:pretty}
  .acts{justify-content:flex-start;margin-top:clamp(10px,3.4svh,18px);gap:10px 22px}
  .access{min-height:44px}
}

/* ---------- reduced motion: static and complete ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .scene__field{transition:none}
}