/* ==========================================================================
   Orbital Ecology, home
   Light ground, two ink bands, three data hues. Imagery is graded to the
   palette so nothing on the page fights anything else on the page.
   ========================================================================== */
:root{
 /* Paper sits within a few points of neutral. The old cream read craft, not
    institution. One brand accent, --grnd; the chart hues are a separate,
    validated categorical set and are never used as brand colour. */
 --bg:#F4F3EF; --card:#FAFAF7; --sink:#EBE9E2; --wash:#ECEFEC;
 --ln:#E2E0D8; --ln2:#CFCCC1; --ln3:#B4B0A4;
 --ink:#0F1113; --deep:#0B0D0F;
 --t1:#3C4046; --t2:#6C7075; --t3:#8E9196; --t4:#ABADB1;
 --grnd:#14432F; --acd:#5FA98A;
 --grn:#2A7F55; --blu:#35619C; --alr:#A54A1C;
 --sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
 --serif:"Newsreader",Georgia,"Times New Roman",serif;
 --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,"Courier New",monospace;
 --max:1560px; --pad:clamp(22px,4.6vw,72px);
 --gut:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));
 --s:clamp(88px,11vw,180px);
 --cp:clamp(26px,2.7vw,46px);
 --ease:cubic-bezier(.22,.72,.28,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--sans);font-size:16px;
 line-height:1.68;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
 overflow-x:hidden}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h3,h4{color:var(--ink);font-weight:600;margin:0;letter-spacing:-.018em}
h1,h2{color:var(--ink);margin:0;font-family:var(--serif);font-weight:400;
 letter-spacing:-.014em;font-variation-settings:'opsz' 60}
p{margin:0}
::selection{background:rgba(20,67,47,.15)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;
 mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>")}
:focus-visible{outline:2px solid var(--grnd);outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--t3)}
.hd2 .lbl,.thesis .lbl,.stmt .lbl,.phero .lbl,.band .lbl,.mast .lbl,.end .cpy .lbl{display:flex;align-items:center;gap:15px}
.hd2 .lbl::before,.thesis .lbl::before,.stmt .lbl::before,.phero .lbl::before,.band .lbl::before,
.mast .lbl::before,.end .cpy .lbl::before{
 content:"";width:30px;height:1px;background:var(--ln2);flex:none}
.stmt .lbl::before,.band .lbl::before{background:#3A3F49}

/* ---------- motion primitives ---------- */
/* Gated on html.js. If the script never runs, or oe.js is missing, every .rv
   block stays fully visible instead of an invisible page. */
.js .rv{opacity:0;transform:translateY(22px);
 transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.js .rv.shown{opacity:1;transform:none}
.zi{overflow:hidden}
.zi img,.zi video{transform:scale(1.07);transition:transform 1.5s var(--ease),opacity .9s ease}
.shown .zi img,.shown .zi video,.zi.shown img,.zi.shown video{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
 .js .rv{opacity:1;transform:none;transition:none}
 .zi img,.zi video{transform:none;transition:none}
 *{animation:none!important}
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(244,243,239,.80);
 backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
 border-bottom:1px solid transparent;
 transition:border-color .35s,background .35s,backdrop-filter .35s}
.nav.stuck{border-bottom-color:var(--ln);background:rgba(244,243,239,.94)}
/* over a full-bleed hero the bar disappears and the marks invert */
body.hero-page .nav{position:fixed;top:0;left:0;right:0}
.nav.over{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
 border-bottom-color:transparent}
.nav.over .wm img{filter:invert(1)}
.nav.over .lk .n{color:#B4BAC2}
.nav.over .lk .n:hover{color:#fff}
.nav.over .lk .n::after{background:#fff}
.nav.over .btn{background:transparent;color:#F4F3EF;border-color:rgba(244,243,239,.44)}
.nav.over .btn:hover{background:#F4F3EF;color:var(--deep);border-color:#F4F3EF}
.nv{max-width:var(--max);margin:0 auto;padding:20px var(--pad);display:flex;align-items:center;
 justify-content:space-between;gap:24px;transition:padding .3s var(--ease)}
.nav.stuck .nv{padding:13px var(--pad)}
.wm{display:flex;align-items:center;gap:12px}
.wm .mk{height:27px;width:auto;transition:height .3s var(--ease)}
.wm .wd{height:20px;width:auto;transition:height .3s var(--ease)}
.nav.stuck .wm .mk{height:23px}.nav.stuck .wm .wd{height:17px}
.lk{display:flex;align-items:center;gap:clamp(16px,1.9vw,32px)}
.lk .n{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
 color:var(--t2);white-space:nowrap;position:relative;padding-bottom:3px}
.lk .n::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
 background:var(--grnd);transition:right .35s var(--ease)}
.lk .n:hover{color:var(--ink)}
.lk .n:hover::after{right:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
 font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
 padding:13px 22px;border:1px solid var(--grnd);background:var(--grnd);color:var(--card);
 white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.btn .ar{display:inline-block;transition:transform .32s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.gh{background:transparent;color:var(--ink);border-color:var(--ln2)}
.btn.gh:hover{background:var(--ink);color:var(--card);border-color:var(--ink)}
.btn.lg{padding:19px 30px;font-size:10.5px;letter-spacing:.19em}
.btn.lt{background:transparent;color:#F4F3EF;border-color:rgba(244,243,239,.36)}
.btn.lt:hover{background:#F4F3EF;color:var(--deep);border-color:#F4F3EF}

/* On dark ground the deep forest reads as a black box, so the primary inverts
   to paper and the accent steps back to the outline. */
.vhero .acts .btn:not(.lt),.end .box .btn:not(.lt){background:#F4F3EF;color:var(--deep);
 border-color:#F4F3EF}
.vhero .acts .btn:not(.lt):hover,.end .box .btn:not(.lt):hover{background:#fff;border-color:#fff;
 color:var(--deep)}
.btn .sm{display:none}
@media(max-width:1180px){.lk .n{display:none}.lk .n.keep{display:inline}}
@media(max-width:780px){.lk .n.keep{display:none}}
@media(max-width:520px){.btn.nav-cta .lg2{display:none}.btn.nav-cta .sm{display:inline}
 .btn{padding:12px 15px;letter-spacing:.13em;font-size:9.5px}
 .wm .mk{height:23px}.wm .wd{height:17px}}

/* ---------- full-bleed hero ---------- */
.vhero{position:relative;background:var(--deep);overflow:hidden;
 height:min(92vh,960px);min-height:600px;display:flex;align-items:flex-end}
.vhero video,.vhero>.bgi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* three domains, one at a time. 10.5s loop, ~2.9s hold each, short crossfades. */
.vhero .slides{position:absolute;inset:0;overflow:hidden}
.vhero .slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
 animation:slides 10.5s linear infinite}
.vhero .slides img:nth-child(2){animation-delay:3.5s}
.vhero .slides img:nth-child(3){animation-delay:7s}
@keyframes slides{
 0%{opacity:0;transform:scale(1.005)}
 5%{opacity:1}
 28%{opacity:1;transform:scale(1.05)}
 33.3%{opacity:0;transform:scale(1.056)}
 34%,100%{opacity:0;transform:scale(1.005)}}
/* domain ticker, locked to the same 10.5s cycle */
.vhero .dom{position:absolute;left:var(--gut);bottom:clamp(34px,4vw,56px);z-index:3;
 height:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
 color:#B7BCC4;display:flex;align-items:center;gap:10px;pointer-events:none;
 opacity:0;animation:fin .9s var(--ease) .9s forwards}
.vhero .dom i{width:5px;height:5px;border-radius:50%;background:var(--acd);flex:none;
 animation:dpulse 2.5s linear infinite}
.vhero .dom .rot{position:relative;display:block;width:16em;height:14px}
.vhero .dom .rot span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;
 animation:domtick 10.5s linear infinite}
.vhero .dom .rot span:nth-child(2){animation-delay:3.5s}
.vhero .dom .rot span:nth-child(3){animation-delay:7s}
@keyframes domtick{0%{opacity:0;transform:translateY(5px)}
 5%,28%{opacity:1;transform:translateY(0)}
 33.3%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes dpulse{0%,100%{opacity:.35}12%{opacity:1}}
@media(max-width:820px){.vhero .dom{display:none}}
@media(prefers-reduced-motion:reduce){
 .vhero .slides img{animation:none;opacity:0;transform:none}
 .vhero .slides img:first-child{opacity:1}
 .vhero .dom{opacity:1;animation:none}
 .vhero .dom i,.vhero .dom .rot span{animation:none}
 .vhero .dom .rot span:first-child{opacity:1;transform:none}}
.vhero::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(102deg,rgba(10,12,15,.90) 0%,rgba(10,12,15,.66) 44%,rgba(10,12,15,.08) 80%,rgba(10,12,15,.24) 100%),
 linear-gradient(180deg,rgba(10,12,15,.58) 0%,rgba(10,12,15,0) 26%,rgba(10,12,15,0) 60%,rgba(10,12,15,.66) 100%)}
.vhero .inner{position:relative;z-index:2;width:100%;padding-block:clamp(44px,6vw,92px)}
.vhero .lbl{color:#8A9099}
.vhero .eye i{background:var(--acd)}
.vhero h1{color:#F7F8FA}
.vhero .sub{color:#C6CAD1;margin-top:clamp(20px,2.2vw,30px);font-size:clamp(16px,1.45vw,19px);
 line-height:1.5;max-width:46ch;opacity:0;animation:fin .9s var(--ease) .5s forwards}
.vhero .sub b{color:#F7F8FA;font-weight:600}
.vhero .acts{margin-top:clamp(28px,3vw,42px);opacity:0;animation:fin .9s var(--ease) .68s forwards}
.vhero .cue{position:absolute;right:var(--gut);bottom:clamp(34px,4vw,56px);z-index:2;
 display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:9px;
 letter-spacing:.24em;text-transform:uppercase;color:#7C828B}
.vhero .cue span{width:1px;height:38px;background:linear-gradient(180deg,#7C828B,rgba(124,130,139,0));
 animation:drop 2.4s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media(max-width:820px){.vhero{height:auto;min-height:0;padding-top:clamp(120px,34vw,220px)}
 .vhero .cue{display:none}}
@media(prefers-reduced-motion:reduce){.vhero .sub,.vhero .acts{opacity:1;animation:none}}

/* ---------- thesis line ---------- */
.thesis{border-bottom:1px solid var(--ln)}
.thesis .in{padding-block:clamp(44px,5.4vw,88px);display:grid;
 grid-template-columns:minmax(150px,.24fr) 1fr;gap:clamp(20px,3.4vw,64px);align-items:start}
@media(max-width:820px){.thesis .in{grid-template-columns:1fr;gap:16px}}
.thesis p.q{font-family:var(--serif);font-size:clamp(22px,2.6vw,37px);line-height:1.26;
 letter-spacing:-.012em;color:var(--ink);font-weight:400;max-width:34ch;
 font-variation-settings:'opsz' 40}

/* ---------- hero (legacy inner spacing) ---------- */
.hero{padding-block:clamp(56px,7.5vw,116px) clamp(34px,4vw,58px)}
.hero .eye{display:flex;align-items:center;gap:11px;margin-bottom:clamp(24px,2.8vw,38px)}
.hero .eye i{width:6px;height:6px;border-radius:50%;background:var(--grnd);font-style:normal;
 animation:bp 2.6s ease-in-out infinite;box-shadow:0 0 0 0 rgba(20,67,47,.42)}
@keyframes bp{0%,100%{box-shadow:0 0 0 0 rgba(20,67,47,.34)}70%{box-shadow:0 0 0 8px rgba(20,67,47,0)}}
h1.big{font-size:clamp(42px,5.6vw,84px);line-height:1.02;letter-spacing:-.018em;max-width:none}
h1.big.two{font-size:clamp(32px,4.3vw,64px);line-height:1.06}
.htop{display:grid;grid-template-columns:1.16fr .84fr;gap:clamp(28px,4vw,72px);align-items:end}
@media(max-width:1080px){.htop{grid-template-columns:1fr;gap:36px}}
.hmedia{margin:0;opacity:0;animation:fin 1s var(--ease) .5s forwards}
.hmedia .fr{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--deep);
 border:1px solid var(--ln)}
@media(max-width:1080px){.hmedia .fr{aspect-ratio:16/9}}
.hmedia video,.hmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hmedia .ov{position:absolute;left:0;right:0;bottom:0;z-index:2;
 padding:clamp(40px,4vw,66px) clamp(16px,1.7vw,24px) clamp(16px,1.7vw,24px);
 background:linear-gradient(180deg,rgba(11,13,15,0),rgba(11,13,15,.55) 45%,rgba(11,13,15,.94))}
.hmedia .ov p{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
 color:#C9CDD3;line-height:1.7}
@media(prefers-reduced-motion:reduce){.hmedia{opacity:1;animation:none}}
h1.big .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
h1.big .ln>span{display:block;transform:translateY(105%);
 animation:rise .95s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes rise{to{transform:none}}
@media(prefers-reduced-motion:reduce){h1.big .ln>span{transform:none;animation:none}}
.hero .sub{margin-top:clamp(24px,2.6vw,36px);font-size:clamp(16px,1.55vw,20.5px);line-height:1.55;
 color:var(--t1);max-width:56ch;opacity:0;animation:fin .9s var(--ease) .55s forwards}
.hero .sub b{color:var(--ink);font-weight:600}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(30px,3.2vw,44px);
 opacity:0;animation:fin .9s var(--ease) .72s forwards}
@keyframes fin{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero .sub,.hero .acts{opacity:1;animation:none}}

/* ---------- hero figure ---------- */
.fig{margin:0;border-top:1px solid var(--ln2);padding-top:26px}
.fig .cap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
 margin-bottom:18px}
.fig .keys{display:flex;gap:22px;flex-wrap:wrap}
.fig .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--t2);display:flex;align-items:center;gap:8px}
.fig .k i{width:14px;height:2px;display:block}
.fig .note{font-size:11.5px;color:var(--t2);max-width:58ch;text-align:right;line-height:1.6}
@media(max-width:1180px){.fig .note{text-align:left;max-width:54ch}}
#hf{width:100%;display:block}
.lgd{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,40px);
 margin-top:26px;border-top:1px solid var(--ln);padding-top:24px}
@media(max-width:860px){.lgd{grid-template-columns:repeat(2,1fr);gap:24px}}
.lgd .v{font-family:var(--mono);font-size:clamp(20px,2vw,29px);color:var(--ink);
 letter-spacing:-.035em;line-height:1}
.lgd .v.g{color:var(--grnd)}
.lgd .t{font-size:11.5px;color:var(--t2);margin-top:10px;line-height:1.45}
.fig .under{margin-top:24px;padding-top:20px;border-top:1px solid var(--ln);font-size:12.8px;
 color:var(--t2);line-height:1.7;max-width:76ch}
.fig .under b{color:var(--ink);font-weight:600}
.fig .under a{color:var(--grnd);border-bottom:1px solid rgba(20,67,47,.34);white-space:nowrap}
.fig .under a:hover{border-color:var(--grnd)}

/* ---------- full bleed media band ---------- */
.band{position:relative;overflow:hidden;background:var(--deep);
 height:clamp(380px,52vw,620px);display:flex;align-items:flex-end}
.band video,.band>.bgi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 opacity:.62}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(11,13,15,.62) 0%,rgba(11,13,15,.12) 34%,rgba(11,13,15,.88) 100%)}
.band .txt{position:relative;z-index:2;width:100%;padding-bottom:clamp(34px,4.4vw,64px)}
.band .txt .lbl{color:#7E848D}
.band h2{color:#F6F7F9;font-size:clamp(26px,3.6vw,52px);line-height:1.12;letter-spacing:-.014em;
 max-width:21ch;margin-top:20px}
.band .m{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
 color:#7E848D;margin-top:20px}

/* ---------- section frame ---------- */
.sec{padding-block:var(--s)}
.sec.tight{padding-block:clamp(66px,7.5vw,120px)}
.hd2 h2{font-size:clamp(34px,4.9vw,70px);line-height:1.06;margin-top:24px;max-width:18ch;
 letter-spacing:-.016em}
/* two-part headline: sans set-up line, serif pay-off underneath */
.hd2 h2.dbl{font-size:clamp(31px,4.2vw,60px);line-height:1.07;max-width:21ch;letter-spacing:-.015em}
.hd2 h2.dbl b{display:block;font-family:var(--sans);font-size:clamp(14.5px,1.28vw,17.5px);
 font-weight:600;line-height:1.45;letter-spacing:-.006em;color:var(--t2);
 max-width:34ch;margin-bottom:clamp(16px,1.5vw,22px);font-variation-settings:normal}
.lede{font-size:clamp(15.5px,1.4vw,18.5px);line-height:1.6;color:var(--t1);max-width:54ch;margin-top:26px}

/* ---------- stakes ---------- */
.stk{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4.4vw,80px);
 margin-top:clamp(46px,5.2vw,80px);align-items:start}
@media(max-width:1020px){.stk{grid-template-columns:1fr;gap:36px}}
.stk .shot{position:sticky;top:110px}
.stk .shot .fr{aspect-ratio:3/4;border:1px solid var(--ln);background:var(--sink)}
@media(max-width:1020px){.stk .shot{position:static}.stk .shot .fr{aspect-ratio:16/9}}
.stk .shot img{width:100%;height:100%;object-fit:cover}
.stk .shot figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--t3);margin-top:14px}
.evt{border-top:1px solid var(--ln2)}
.evt .e{border-bottom:1px solid var(--ln);padding:clamp(24px,2.8vw,40px) 0;display:grid;
 grid-template-columns:minmax(140px,.42fr) 1fr;gap:clamp(18px,2.6vw,44px);align-items:start}
@media(max-width:620px){.evt .e{grid-template-columns:1fr;gap:14px}}
.evt .n{font-family:var(--mono);font-size:clamp(30px,3.7vw,50px);line-height:.95;color:var(--alr);
 letter-spacing:-.04em}
.evt .b{font-size:14.5px;color:var(--t1);line-height:1.6}
.evt .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--t3);margin-top:16px;
 text-transform:uppercase}

/* ---------- method ---------- */
.mth{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln2);
 margin-top:clamp(46px,5.2vw,78px);border-block:1px solid var(--ln2)}
@media(max-width:900px){.mth{grid-template-columns:1fr}}
.mth .st{background:var(--bg);padding:clamp(30px,3.2vw,50px) clamp(22px,2.4vw,38px)}
.mth .st i{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--grnd);font-style:normal}
.mth .st h3{font-size:clamp(20px,1.9vw,27px);margin-top:22px;line-height:1.14}
.mth .st p{font-size:13.8px;color:var(--t2);margin-top:16px;line-height:1.68}
.pipe{margin-top:clamp(40px,4.4vw,66px);border:1px solid var(--ln);background:var(--card);
 padding:clamp(22px,2.4vw,36px)}
.pipe .ph{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.pipe .ph span{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
 color:var(--t3)}
#pipe{width:100%;display:block}

/* ---------- product index ---------- */
.idx{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,4.2vw,76px);
 margin-top:clamp(46px,5.2vw,78px);align-items:start}
@media(max-width:1080px){.idx{grid-template-columns:1fr}}
.rows{border-top:1px solid var(--ln2)}
.row{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;width:100%;
 text-align:left;background:none;border:0;border-bottom:1px solid var(--ln);
 padding:clamp(17px,1.7vw,25px) 6px;cursor:pointer;font:inherit;color:inherit;position:relative;
 transition:padding-left .32s var(--ease),background .32s var(--ease)}
.row::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--grnd);
 transform:scaleY(0);transform-origin:50% 50%;transition:transform .38s var(--ease)}
.row:hover,.row.on{background:var(--card);padding-left:20px}
.row.on::before{transform:scaleY(1)}
.row .id{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--t3);
 transition:color .25s}
.row.on .id{color:var(--grnd)}
.row .nm{font-size:clamp(18px,1.65vw,24px);color:var(--ink);font-weight:600;letter-spacing:-.02em}
.row .nm span{display:block;font-size:12.8px;color:var(--t2);font-weight:400;margin-top:4px;
 letter-spacing:0}
.row .ch{font-family:var(--mono);font-size:15px;color:var(--ln3);line-height:1;padding-right:6px;
 transform:translateX(-6px);opacity:0;transition:transform .32s var(--ease),opacity .32s var(--ease)}
.row:hover .ch,.row.on .ch{opacity:1;transform:translateX(0);color:var(--grnd)}
.idx .fine{font-size:12.5px;line-height:1.75;color:var(--t2);max-width:46ch}
.panel{position:sticky;top:104px}
.panel .ph{position:relative;aspect-ratio:16/10;background:var(--sink);overflow:hidden;
 border:1px solid var(--ln)}
.panel .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
 transform:scale(1.06);transition:opacity .6s var(--ease),transform 1.1s var(--ease)}
.panel .ph img.on{opacity:1;transform:scale(1)}
.panel .bd{border:1px solid var(--ln);border-top:0;background:var(--card);padding:var(--cp)}
.panel .bd .kk{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
 color:var(--t3)}
.panel .bd h4{font-size:clamp(18px,1.6vw,23px);margin-top:15px}
.panel .bd p{font-size:13.8px;color:var(--t2);margin-top:14px;line-height:1.68;min-height:3.4em}
.panel .bd .ev{font-size:12.4px;color:var(--t1);margin-top:20px;padding-top:18px;
 border-top:1px solid var(--ln);min-height:3.6em;line-height:1.6}
.panel .bd .ev b{font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;
 color:var(--grnd);display:block;margin-bottom:8px;font-weight:400}
.panel .go{display:inline-flex;gap:9px;margin-top:20px;font-family:var(--mono);font-size:10px;
 letter-spacing:.17em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ln2);
 padding-bottom:5px;transition:color .2s,border-color .2s}
.panel .go .ar{transition:transform .32s var(--ease)}
.panel .go:hover{border-color:var(--grnd);color:var(--grnd)}
.panel .go:hover .ar{transform:translateX(4px)}

/* ---------- ink band ---------- */
.ink{background:var(--deep);color:#B9BDC4;position:relative;overflow:hidden}
.ink h2,.ink h3{color:#F6F7F9}
.ink .lbl{color:#6E747D}
.ink .bgi{position:absolute;inset:-8% 0;opacity:.46;will-change:transform}
.ink .bgi img{width:100%;height:100%;object-fit:cover}
.ink::after{content:"";position:absolute;inset:0;
 background:linear-gradient(96deg,#0B0D0F 6%,rgba(11,13,15,.82) 42%,rgba(11,13,15,.36) 100%)}
.ink .inr{position:relative;z-index:2;padding-block:var(--s)}
.ink .q{font-size:clamp(29px,4.2vw,62px);line-height:1.1;letter-spacing:-.014em;color:#F6F7F9;
 max-width:20ch;margin-top:26px;font-weight:400}
.ink .p{font-size:clamp(15px,1.4vw,18px);line-height:1.65;color:#A2A8B0;max-width:54ch;margin-top:28px}
.arc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#242830;
 margin-top:clamp(46px,5.2vw,76px);border:1px solid #242830}
@media(max-width:920px){.arc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.arc{grid-template-columns:1fr}}
.arc .a{background:var(--deep);padding:clamp(24px,2.5vw,36px)}
.arc .a i{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--acd);font-style:normal}
.arc .a h3{font-size:17px;margin-top:18px}
.arc .a p{font-size:12.8px;color:#8C929A;margin-top:12px;line-height:1.62}

/* ---------- record ---------- */
.rec{width:100%;border-collapse:collapse;margin-top:clamp(40px,4.4vw,64px)}
.rec th{text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:.22em;
 text-transform:uppercase;color:var(--t3);font-weight:400;padding:0 18px 16px 0;
 border-bottom:1px solid var(--ln2)}
.rec td{padding:20px 18px 20px 0;font-size:13.4px;border-bottom:1px solid var(--ln);
 vertical-align:top;color:var(--t1);line-height:1.6}
.rec tr{transition:background .25s}
.rec tbody tr:hover{background:var(--card)}
.rec td:last-child,.rec th:last-child{padding-right:0}
.rec .st{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
 border:1px solid var(--ln2);padding:5px 9px;white-space:nowrap;color:var(--t2);display:inline-block}
.rec .st.done{color:var(--grnd);border-color:rgba(20,67,47,.34)}
.rec .bm{font-family:var(--mono);font-size:11px;color:var(--t2);white-space:nowrap}
.rec .out{color:var(--ink)}
@media(max-width:880px){
 .rec thead{display:none}
 .rec tr{display:grid;gap:8px;padding:22px 0;border-bottom:1px solid var(--ln)}
 .rec td{border:0;padding:0}
}

/* ---------- team ---------- */
.tm{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln);
 border:1px solid var(--ln);margin-top:clamp(40px,4.4vw,64px)}
@media(max-width:880px){.tm{grid-template-columns:1fr}}
.tm .p{background:var(--card);padding:var(--cp);transition:background .3s}
.tm .p:hover{background:#FFFDF8}
.tm .p .mono{font-family:var(--mono);font-size:22px;color:var(--grnd);letter-spacing:.04em}
.tm .p .r{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
 color:var(--t3);margin-top:22px}
.tm .p h3{font-size:20px;margin-top:12px}
.tm .p p{font-size:13.4px;color:var(--t2);margin-top:14px;line-height:1.68}

/* ---------- cta ---------- */
.end{border-top:1px solid var(--ln);background:var(--card)}
.end .inr{display:grid;grid-template-columns:1.02fr .98fr;gap:0;align-items:stretch}
@media(max-width:980px){.end .inr{grid-template-columns:1fr}}
.end .cpy{padding:var(--s) clamp(34px,4.6vw,90px) var(--s) var(--gut)}
@media(max-width:980px){.end .cpy{padding:var(--s) var(--gut) clamp(44px,5vw,68px)}}
.end h2{font-size:clamp(31px,4.4vw,64px);line-height:1.08;margin-top:24px;max-width:19ch;
 letter-spacing:-.016em}
.end .cpy>p{font-size:15.5px;color:var(--t2);max-width:52ch;margin-top:26px;line-height:1.68}
.end ul{list-style:none;margin:32px 0 0;padding:0}
.end li{position:relative;padding:13px 0 13px 24px;font-size:13.8px;color:var(--t2);
 border-top:1px solid var(--ln)}
.end li::before{content:"";position:absolute;left:0;top:24px;width:11px;height:1px;background:var(--grnd)}
.end .box{position:relative;overflow:hidden;background:var(--deep);display:flex;align-items:flex-end;
 min-height:420px}
.end .box .bgi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.end .box::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(11,13,15,.42),rgba(11,13,15,.92))}
.end .box .in2{position:relative;z-index:2;padding:var(--cp);width:100%}
.end .box .btn{display:flex;width:100%}
.end .box .btn+.btn{margin-top:11px}
.end .box .fine{font-size:11.5px;color:#8C929A;line-height:1.65;margin-top:24px}

/* ---------- footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--ln)}
.ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3.2vw,56px);
 padding-block:clamp(56px,5.6vw,88px) clamp(34px,3.4vw,52px)}
@media(max-width:880px){.ft{grid-template-columns:1fr 1fr}}
.ft h4{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
 color:var(--t3);font-weight:400;margin-bottom:18px}
.ft a{display:block;font-size:13px;color:var(--t2);padding:6px 0;transition:color .2s,transform .25s}
.ft a:hover{color:var(--ink);transform:translateX(3px)}
.ft .about{font-size:12.8px;color:var(--t2);line-height:1.68;max-width:38ch;margin-top:20px}
.ftb{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
 padding-block:24px 46px;border-top:1px solid var(--ln)}
.ftb p{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--t3);text-transform:uppercase}

/* ==========================================================================
   Interior pages: philosophy, team, demo shell
   ========================================================================== */

/* ---------- page hero ---------- */
.phero{padding-block:clamp(52px,6.5vw,104px) clamp(34px,4vw,58px)}
.phero .grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4vw,72px);align-items:end}
@media(max-width:1080px){.phero .grid{grid-template-columns:1fr;gap:34px}}
.phero h1{font-size:clamp(39px,5.4vw,78px);line-height:1.04;letter-spacing:-.018em;margin-top:24px}
.phero .lede{font-size:clamp(16px,1.5vw,19.5px);line-height:1.58;color:var(--t1);max-width:52ch;
 margin-top:26px}
.phero .fr{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--deep);
 border:1px solid var(--ln)}
.phero .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero .fr .ov{position:absolute;left:0;right:0;bottom:0;z-index:2;
 padding:clamp(38px,4vw,64px) clamp(15px,1.6vw,22px) clamp(15px,1.6vw,22px);
 background:linear-gradient(180deg,rgba(11,13,15,0),rgba(11,13,15,.55) 45%,rgba(11,13,15,.94))}
.phero .fr .ov p{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
 color:#C9CDD3;line-height:1.7}

/* ---------- numbers strip ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ln);
 border:1px solid var(--ln);margin-top:clamp(44px,5vw,76px)}
@media(max-width:1000px){.nums{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nums{grid-template-columns:1fr}}
.nums .c{background:var(--card);padding:var(--cp)}
.nums .v{font-family:var(--mono);font-size:clamp(26px,2.9vw,40px);line-height:1;color:var(--ink);
 letter-spacing:-.04em}
.nums .v.a{color:var(--alr)}
.nums .t{font-size:13px;color:var(--t2);margin-top:18px;line-height:1.6}
.nums .s{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--t3);margin-top:16px;padding-top:14px;border-top:1px solid var(--ln)}

/* ---------- belief blocks ---------- */
.bel{border-top:1px solid var(--ln2);margin-top:clamp(44px,5vw,76px)}
.bel .b{display:grid;grid-template-columns:minmax(120px,.28fr) 1fr;gap:clamp(20px,3.4vw,64px);
 padding:clamp(30px,3.6vw,58px) 0;border-bottom:1px solid var(--ln)}
@media(max-width:820px){.bel .b{grid-template-columns:1fr;gap:16px}}
.bel .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--grnd);
 text-transform:uppercase}
.bel h3{font-size:clamp(21px,2.3vw,32px);line-height:1.14;letter-spacing:-.026em;max-width:22ch}
.bel p{font-size:14.6px;color:var(--t2);line-height:1.72;margin-top:18px;max-width:66ch}
.bel p+p{margin-top:14px}
.bel p b{color:var(--ink);font-weight:600}
.bel .fig2{margin-top:24px;border:1px solid var(--ln);background:var(--card);overflow:hidden}
.bel .fig2 img{width:100%;height:auto;display:block}
.bel .fig2 figcaption{font-family:var(--mono);font-size:9px;letter-spacing:.15em;
 text-transform:uppercase;color:var(--t3);padding:14px var(--cp)}

/* ---------- prose ---------- */
/* ---------- product pages ---------- */
.phd{padding-block:clamp(52px,6.5vw,104px) clamp(30px,3.4vw,50px)}
.phd .grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,72px);
 align-items:center}
@media(max-width:1000px){.phd .grid{grid-template-columns:1fr;gap:32px}}
.phd .lbl{display:flex;align-items:center;gap:11px}
.phd .lbl i{width:5px;height:5px;border-radius:50%;background:var(--acd);flex:none}
.phd h1{font-size:clamp(44px,6.4vw,96px);line-height:1;letter-spacing:-.03em;margin-top:20px;
 color:var(--ink)}
.phd .lede{font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:var(--t1);max-width:34ch;
 margin-top:22px}
.phd .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,38px)}
.phd .fr{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--deep);
 border:1px solid var(--ln)}
.phd .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.two2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.6vw,64px);
 margin-top:clamp(38px,4.4vw,64px);align-items:start}
@media(max-width:900px){.two2{grid-template-columns:1fr;gap:36px}}
.slb2{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
 color:var(--t3);margin:0 0 18px}
.syl{border-top:1px solid var(--ln2)}
.sy2{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
 padding:15px 2px;border-bottom:1px solid var(--ln)}
.sy2 b{font-size:15px;color:var(--ink);font-weight:600;letter-spacing:-.012em}
.sy2 span{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--t3);
 text-align:right}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:12.4px;color:var(--t2);border:1px solid var(--ln2);padding:7px 12px;
 line-height:1.3}
.fine2{font-size:11.6px;color:var(--t2);line-height:1.65;margin:18px 0 0;max-width:64ch}
.fine2 a{color:var(--grnd);text-decoration:none;border-bottom:1px solid rgba(20,67,47,.3)}

.st2{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
 border:1px solid var(--ln2);padding:5px 9px;white-space:nowrap;color:var(--t2)}
.st2.ok{color:var(--grnd);border-color:rgba(20,67,47,.34)}

.oths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.1vw,18px);
 margin-top:clamp(30px,3.4vw,48px)}
@media(max-width:820px){.oths{grid-template-columns:1fr}}
.op{display:block;background:var(--card);border:1px solid var(--ln);padding:var(--cp);
 text-decoration:none;transition:border-color .2s,background .2s;position:relative}
.op:hover{border-color:var(--grnd);background:var(--wash)}
.op .cd{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--t3);display:block}
.op b{display:block;font-size:17px;color:var(--ink);margin-top:10px;letter-spacing:-.015em}
.op:hover b{color:var(--grnd)}
.op .mk{display:block;font-size:12.4px;color:var(--t2);line-height:1.5;margin-top:6px}

/* ---------- founder's note, centred single column ---------- */
.note{padding-block:clamp(64px,7.5vw,124px) clamp(44px,5vw,78px)}
.note .col{max-width:70ch;margin-inline:auto;text-align:center}
.note .lbl{justify-content:center}
.note .lbl::before{display:none}
.note h1{font-size:clamp(32px,4vw,55px);line-height:1.08;letter-spacing:-.017em;
 margin-top:20px;max-width:20ch;margin-inline:auto}
.note .body{margin-top:clamp(30px,3.2vw,46px);font-size:clamp(15.6px,1.4vw,17.4px);
 line-height:1.78;color:var(--t1);text-align:left;max-width:64ch;margin-inline:auto}
.note .body p+p{margin-top:1.15em}
.note .body .op{font-size:1.1em;line-height:1.62;color:var(--ink);letter-spacing:-.006em}
.note .sig{margin-top:clamp(38px,4vw,58px);padding-top:clamp(28px,2.8vw,40px);
 border-top:1px solid var(--ln);max-width:64ch;margin-inline:auto;text-align:center}
.note .sig svg{display:block;width:clamp(292px,28vw,412px);height:auto;color:var(--ink);
 margin:0 auto 16px}
.note .sig .who{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--t3);line-height:1.9}

.prose{max-width:66ch;font-size:15.4px;line-height:1.78;color:var(--t2);margin-top:26px}
.prose p+p{margin-top:20px}
.prose b{color:var(--ink);font-weight:600}

/* ---------- bios ---------- */
.bios{border-top:1px solid var(--ln2);margin-top:clamp(44px,5vw,76px)}
.bio{display:grid;grid-template-columns:minmax(150px,.3fr) 1fr;gap:clamp(20px,3.4vw,64px);
 padding:clamp(30px,3.6vw,56px) 0;border-bottom:1px solid var(--ln)}
@media(max-width:820px){.bio{grid-template-columns:1fr;gap:16px}}
.bio .side .mono{font-family:var(--mono);font-size:26px;color:var(--grnd);letter-spacing:.04em}
.bio .side .r{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--t3);margin-top:20px}
.bio h3{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.026em}
.bio p{font-size:14.6px;color:var(--t2);line-height:1.72;margin-top:16px;max-width:62ch}
.bio .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.bio .tags span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--t2);border:1px solid var(--ln2);padding:6px 10px}

/* ---------- principles ---------- */
.prin{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ln2);
 border:1px solid var(--ln2);margin-top:clamp(40px,4.6vw,68px)}
@media(max-width:820px){.prin{grid-template-columns:1fr}}
.prin .p{background:var(--bg);padding:var(--cp)}
.prin .p i{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--grnd);font-style:normal}
.prin .p h3{font-size:19px;margin-top:18px;line-height:1.2}
.prin .p p{font-size:13.6px;color:var(--t2);margin-top:14px;line-height:1.68}

/* ---------- sources ---------- */
.src{border-top:1px solid var(--ln2);margin-top:clamp(40px,4.6vw,68px);padding-top:26px}
.src li{list-style:none;padding:14px 0;border-bottom:1px solid var(--ln);font-size:12.6px;
 color:var(--t2);line-height:1.65;display:grid;grid-template-columns:44px 1fr;gap:14px}
.src ol{margin:0;padding:0}
.src .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--t3);padding-top:3px}
.src a{color:var(--grnd);border-bottom:1px solid rgba(20,67,47,.32);word-break:break-word}
.src a:hover{border-color:var(--grnd)}

/* ---------- generic dark statement band ---------- */
.stmt{background:var(--deep);color:#B9BDC4}
.stmt .inr{padding-block:var(--s)}
.stmt h2{color:#F6F7F9;font-size:clamp(28px,3.8vw,56px);line-height:1.1;letter-spacing:-.014em;
 max-width:20ch;margin-top:24px}
.stmt .lbl{color:#6E747D}
.stmt p{font-size:clamp(15px,1.4vw,17.5px);line-height:1.68;color:#A2A8B0;max-width:56ch;margin-top:26px}
.stmt ul{list-style:none;margin:32px 0 0;padding:0;max-width:60ch}
.stmt li{position:relative;padding:14px 0 14px 26px;font-size:14px;color:#A2A8B0;
 border-top:1px solid #242830}
.stmt li::before{content:"";position:absolute;left:0;top:26px;width:12px;height:1px;background:var(--acd)}
.stmt li b{color:#F6F7F9;font-weight:600}

/* ---------- legal pages ---------- */
.legal{max-width:74ch;margin-top:clamp(40px,4.6vw,68px)}
.legal h2{font-size:clamp(22px,2.3vw,31px);line-height:1.18;margin:clamp(38px,4vw,58px) 0 0;
 letter-spacing:-.014em}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:16.5px;margin:30px 0 0;letter-spacing:-.012em}
.legal p{font-size:15.2px;line-height:1.8;color:var(--t2);margin-top:16px}
.legal p b,.legal li b{color:var(--ink);font-weight:600}
.legal ul{list-style:none;margin:18px 0 0;padding:0}
.legal li{position:relative;padding:10px 0 10px 24px;font-size:14.6px;line-height:1.75;
 color:var(--t2);border-top:1px solid var(--ln)}
.legal li::before{content:"";position:absolute;left:0;top:21px;width:11px;height:1px;
 background:var(--grnd)}
.legal a{color:var(--grnd);border-bottom:1px solid rgba(20,67,47,.32)}
.legal a:hover{border-color:var(--grnd)}
.legal .stamp{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--t3);margin-top:clamp(44px,5vw,72px);padding-top:22px;border-top:1px solid var(--ln2)}
.legal .box{border:1px solid var(--ln);background:var(--card);padding:var(--cp);margin-top:26px}
.legal .box p{margin-top:0}
.legal .box p+p{margin-top:12px}

/* legal links in the footer bottom bar */
.ftb .lg{display:flex;gap:20px;flex-wrap:wrap}
.ftb .lg a{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--t3)}
.ftb .lg a:hover{color:var(--ink)}