/* abbytes-sudo.github.io — home. Dark, cinematic, big type.
   The frame stays black and bone; colour comes from the work (the seven project keys)
   and from the four "gears" in the INTP section. No inline styles anywhere (CSP). */
:root{
  --bg:#07070A; --bg-2:#0D0E13; --bg-3:#14151C; --line:rgba(243,240,234,.11); --line-2:rgba(243,240,234,.2);
  --ink:#F3F0EA; --ink-2:#CDC9C1; --mute:#9A968E;
  --k1:#F4B556; --k2:#F5A02A; --k3:#D3A84F; --k4:#FF4FD8; --k5:#E8B931; --k6:#C9A45F; --k7:#4BE3C1;
  --ti:#4BE3C1; --ne:#FF4FD8; --si:#F4B556; --fe:#9D8CFF;
  --spectrum:linear-gradient(100deg,#F4B556 0%,#FF4FD8 45%,#9D8CFF 70%,#4BE3C1 100%);
  --display:'Inter Tight','Inter',system-ui,sans-serif;
  --text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(16px,5vw,96px); --max:1560px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ── base ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background:url(grain.svg);opacity:.05;mix-blend-mode:overlay}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit}
b,strong{font-weight:600}
em{font-style:normal}
::selection{background:#FF4FD8;color:#07070A}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:16px;top:12px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font:500 15px/1.2 var(--text);text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

/* type */
.eyebrow{display:flex;align-items:center;gap:14px;font:500 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.eyebrow span{display:inline-grid;place-items:center;min-width:38px;height:26px;padding:0 8px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink);letter-spacing:.06em}
.h2{font:700 clamp(40px,6.6vw,118px)/.94 var(--display);letter-spacing:-.048em;text-wrap:balance;margin-top:22px}
.h2 em,.mega em,.gp-h em,.loop-h em,.svc-h em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;
  background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.lede{font:400 clamp(18px,1.55vw,23px)/1.55 var(--text);color:var(--ink-2);max-width:62ch;margin-top:28px}
.fine{font:400 13.5px/1.6 var(--text);color:var(--mute);max-width:110ch}
.sh{max-width:1180px}
.sec{position:relative;padding-block:clamp(96px,13vw,200px)}

/* stamp */
.stamp{display:inline-flex;align-items:center;gap:9px;font:400 12px/1.35 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.stamp::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.stamp.k1::before{background:var(--k1)} .stamp.k2::before{background:var(--k2)} .stamp.k3::before{background:var(--k3)}
.stamp.k4::before{background:var(--k4)} .stamp.k5::before{background:var(--k5)} .stamp.k6::before{background:var(--k6)} .stamp.k7::before{background:var(--k7)}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;
  font:600 16px/1 var(--display);letter-spacing:-.01em;text-decoration:none;color:var(--bg);background:var(--ink);overflow:hidden;
  transition:transform .35s var(--ease),background .25s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--spectrum);opacity:0;transition:opacity .35s}
.btn > *{position:relative}
.btn{isolation:isolate}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{opacity:1}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.ghost::before{display:none}
.btn.ghost:hover{background:rgba(243,240,234,.07)}

.pulse{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:#4BE3C1;flex:none}
.pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid #4BE3C1;animation:ping 2.2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* ── header ───────────────────────────────────────── */
.hd{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;gap:24px;padding:16px var(--gut);
  transition:background .4s,backdrop-filter .4s,box-shadow .4s,transform .45s var(--ease)}
.hd.scrolled{background:rgba(7,7,10,.62);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.hd.hide{transform:translateY(-100%)}
.hd-mark{display:inline-flex;align-items:center;gap:12px;font:600 16px/1 var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.hd-dot{width:22px;height:22px;border-radius:50%;background:var(--spectrum);box-shadow:0 0 22px rgba(255,79,216,.45);animation:spin 9s linear infinite}
@keyframes spin{to{filter:hue-rotate(360deg)}}
.hd-nav{display:flex;gap:6px;margin-left:auto}
.hd-nav a{font:500 14px/1 var(--text);text-decoration:none;color:var(--ink-2);padding:11px 14px;border-radius:999px;transition:background .2s,color .2s}
.hd-nav a:hover,.hd-nav a.on{color:var(--ink);background:rgba(243,240,234,.08)}
.hd-cta{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--display);text-decoration:none;padding:12px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);white-space:nowrap;transition:background .2s}
.hd-cta:hover{background:rgba(243,240,234,.08)}
@media (max-width:860px){.hd-nav{display:none}.hd-cta{margin-left:auto}}
@media (max-width:420px){.hd-mark{font-size:14px}.hd-cta{padding:10px 14px;font-size:13px}}
@media (max-width:359px){.hd{gap:12px}.hd-dot{display:none}.hd-cta{gap:8px;padding:9px 12px;font-size:12.5px}}

/* ── hero ─────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.net{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.aurora{position:absolute;inset:-20%;z-index:-2;filter:blur(80px);opacity:.7}
.aurora i{position:absolute;border-radius:50%}
.aurora i:nth-child(1){width:46vw;height:46vw;left:52%;top:6%;background:radial-gradient(circle,rgba(255,79,216,.55),transparent 65%);animation:drift1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:40vw;height:40vw;left:66%;top:40%;background:radial-gradient(circle,rgba(75,227,193,.42),transparent 65%);animation:drift2 26s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:38vw;height:38vw;left:30%;top:52%;background:radial-gradient(circle,rgba(244,181,86,.36),transparent 65%);animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-14vw,10vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-20vw,-14vh) scale(.9)}}
@keyframes drift3{to{transform:translate(16vw,-8vh) scale(1.2)}}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;z-index:-1;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero-in{width:100%;max-width:var(--max);margin-inline:auto;padding:120px var(--gut) clamp(56px,8vh,96px)}
.kick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,3vh,36px)}
.kick span{font:500 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:999px;background:rgba(243,240,234,.06);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kick span:last-child{color:var(--bg);background:var(--ti);box-shadow:none}
.name{font:800 clamp(46px,6.4vw,124px)/.9 var(--display);letter-spacing:-.052em;margin-left:-.03em}
.name .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
@media (min-width:900px){.name .line{display:inline-block;vertical-align:top}}
.name .w{display:inline-block;transform:translateY(108%);animation:rise 1.25s var(--ease) forwards}
.name .line:nth-child(2) .w{animation-delay:.12s}
.name em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em;background:var(--spectrum);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em;animation:sheen 8s ease-in-out infinite alternate}
@keyframes rise{to{transform:none}}
@keyframes sheen{to{background-position:100% 0}}
.hero-row{display:grid;gap:28px;margin-top:clamp(28px,5vh,56px);align-items:end}
@media (min-width:1024px){.hero-row{grid-template-columns:1.25fr 1fr;gap:64px}}
.statement{font:400 clamp(24px,2.6vw,42px)/1.14 var(--display);letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
.statement em{font-family:var(--serif);font-style:italic;color:var(--k1)}
.role{font:600 17px/1.4 var(--display);margin-bottom:22px}
.role span{display:block;margin-top:8px;font:400 15.5px/1.55 var(--text);color:var(--ink-2);max-width:46ch}
.fx{opacity:0;transform:translateY(22px);animation:fadeup 1s var(--ease) forwards}
.f1{animation-delay:.05s}.f3{animation-delay:.45s}.f4{animation-delay:.6s}
@keyframes fadeup{to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.scroll-cue span{position:absolute;left:50%;top:9px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--ink);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media (max-width:699px){.scroll-cue{display:none}}

/* ── ticker ───────────────────────────────────────── */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--line);background:var(--bg-2);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tk-track{display:flex;width:max-content;animation:marquee 92s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-set{display:flex;flex:none}
.tk-set li{display:flex;align-items:baseline;gap:12px;padding:26px 44px;white-space:nowrap;color:var(--ink-2);font:400 15px/1 var(--text);position:relative}
.tk-set li::after{content:"✦";position:absolute;right:-6px;color:var(--k4);font-size:12px;top:50%;transform:translateY(-50%)}
.tk-set b{font:700 30px/1 var(--display);letter-spacing:-.035em;color:var(--ink)}
.tk-set b i{font:italic 400 26px/1 var(--serif);color:var(--mute)}
.tk-set .d{font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── reveal on scroll (JS adds .js to <html>) ─────── */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ── section transitions ─────────────────────────────
   1. ambient glow: a fixed wash behind the page; JS crossfades two layers (opacity only) to each
      section's colours. The body is transparent on the home page so the wash shows through. */
body.home{background:transparent}
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;display:none}
.js .amb{display:block}
.amb i{position:absolute;inset:0;opacity:0;transition:opacity 1.3s cubic-bezier(.4,0,.2,1);will-change:opacity}
.amb i.on{opacity:1}
.amb .p-brain{background:radial-gradient(60vw 62vh at 6% 24%,rgba(75,227,193,.13),transparent 70%),radial-gradient(56vw 60vh at 96% 78%,rgba(157,140,255,.15),transparent 70%)}
.amb .p-results{background:radial-gradient(62vw 60vh at 90% 14%,rgba(244,181,86,.16),transparent 70%),radial-gradient(54vw 56vh at 4% 88%,rgba(245,160,42,.10),transparent 70%)}
.amb .p-k1{background:radial-gradient(58vw 58vh at 94% 10%,rgba(244,181,86,.17),transparent 70%),radial-gradient(60vw 60vh at 4% 92%,rgba(43,88,170,.20),transparent 70%)}
.amb .p-k2{background:radial-gradient(58vw 58vh at 6% 12%,rgba(245,160,42,.17),transparent 70%),radial-gradient(56vw 56vh at 96% 90%,rgba(251,226,190,.09),transparent 70%)}
.amb .p-k3{background:radial-gradient(58vw 58vh at 92% 14%,rgba(211,168,79,.15),transparent 70%),radial-gradient(56vw 56vh at 6% 86%,rgba(120,128,150,.10),transparent 70%)}
.amb .p-k4{background:radial-gradient(58vw 58vh at 90% 12%,rgba(255,79,216,.17),transparent 70%),radial-gradient(60vw 60vh at 6% 88%,rgba(122,60,255,.17),transparent 70%)}
.amb .p-k5{background:radial-gradient(58vw 58vh at 8% 10%,rgba(232,185,49,.17),transparent 70%),radial-gradient(52vw 52vh at 94% 92%,rgba(232,185,49,.08),transparent 70%)}
.amb .p-k6{background:radial-gradient(58vw 58vh at 92% 88%,rgba(201,164,95,.16),transparent 70%),radial-gradient(52vw 52vh at 6% 10%,rgba(150,110,70,.10),transparent 70%)}
.amb .p-k7{background:radial-gradient(58vw 58vh at 90% 18%,rgba(75,227,193,.16),transparent 70%),radial-gradient(60vw 60vh at 6% 86%,rgba(60,110,255,.14),transparent 70%)}
.amb .p-how{background:radial-gradient(60vw 60vh at 92% 20%,rgba(255,79,216,.15),transparent 70%),radial-gradient(54vw 56vh at 6% 84%,rgba(157,140,255,.09),transparent 70%)}
.amb .p-contact{background:radial-gradient(48vw 52vh at 4% 90%,rgba(244,181,86,.13),transparent 70%),radial-gradient(50vw 54vh at 96% 8%,rgba(255,79,216,.15),transparent 70%),radial-gradient(44vw 48vh at 70% 92%,rgba(157,140,255,.12),transparent 70%),radial-gradient(44vw 46vh at 18% 6%,rgba(75,227,193,.11),transparent 70%)}

/* 2. section boundaries: where one section meets the next, a still hairline across the content column, fading at
      both ends. (The five scrolling service strips that used to sit here are now the "What I can take on" block
      before Contact.) */
.home main > .sec + .sec::before{content:"";position:absolute;top:0;left:0;right:0;width:calc(min(100%,var(--max)) - 2 * var(--gut));height:1px;margin-inline:auto;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--line-2) 16%,var(--line-2) 84%,transparent)}

/* 3. section headings rise word by word (home.js wraps the words; nothing is hidden without it) */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.split .wd{display:inline-block;clip-path:inset(-.45em -.35em -.34em -.35em)}
.split .wi{display:inline-block;transform:translate3d(0,152%,0);transition:transform 1s var(--ease);transition-delay:calc(var(--wi,0) * 55ms)}
.split.wi-in .wi{transform:none}

/* ── brain ────────────────────────────────────────── */
.brain{background:radial-gradient(1200px 700px at 15% 30%,rgba(75,227,193,.07),transparent 60%),radial-gradient(900px 600px at 90% 70%,rgba(157,140,255,.08),transparent 60%)}
.gears{display:grid;gap:clamp(32px,4vw,72px);margin-top:clamp(56px,7vw,104px);align-items:center}
@media (min-width:1024px){.gears{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.gmap{position:relative;max-width:620px;width:100%;margin-inline:auto}
.gsvg{width:100%;height:auto;overflow:visible}
.glinks path{fill:none;stroke:rgba(243,240,234,.1);stroke-width:1.5}
.gflow path{fill:none;stroke:rgba(243,240,234,.55);stroke-width:2;stroke-dasharray:3 16;stroke-linecap:round;animation:flow 2.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-38}}
.gcore{fill:#0D0E13;stroke:rgba(243,240,234,.22);stroke-width:1.5}
.gcore-t{font:800 26px var(--display);letter-spacing:-.02em;fill:var(--ink);text-anchor:middle}
.gcore-s{font:500 11px var(--mono);letter-spacing:.08em;fill:var(--mute);text-anchor:middle}
.gnode{cursor:pointer;transition:opacity .4s}
.gnode .halo{opacity:.12;transform-box:fill-box;transform-origin:center;transition:opacity .4s,transform .6s var(--ease)}
.gnode .dot{stroke-width:2;transition:fill .3s}
.gnode text{font:700 28px var(--display);letter-spacing:-.02em;text-anchor:middle;fill:var(--ink);pointer-events:none}
.n-ti .halo{fill:var(--ti)} .n-ti .dot{fill:rgba(75,227,193,.16);stroke:var(--ti)}
.n-ne .halo{fill:var(--ne)} .n-ne .dot{fill:rgba(255,79,216,.16);stroke:var(--ne)}
.n-si .halo{fill:var(--si)} .n-si .dot{fill:rgba(244,181,86,.16);stroke:var(--si)}
.n-fe .halo{fill:var(--fe)} .n-fe .dot{fill:rgba(157,140,255,.16);stroke:var(--fe)}
.gears.has-sel .gnode{opacity:.42}
.gears.has-sel .gnode.on{opacity:1}
.gnode.on .halo{opacity:.4;animation:breathe 2.6s ease-in-out infinite}
.n-ti.on .dot{fill:var(--ti)} .n-ne.on .dot{fill:var(--ne)} .n-si.on .dot{fill:var(--si)} .n-fe.on .dot{fill:var(--fe)}
.gnode.on text{fill:#07070A}
.gnode:hover .halo{opacity:.3}
@keyframes breathe{50%{transform:scale(1.14)}}

.gtabs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:28px}
@media (min-width:640px){.gtabs{grid-template-columns:repeat(4,1fr)}}
.no-js .gtabs{display:none}
.gtab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;border-radius:16px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,box-shadow .25s,transform .3s var(--ease)}
.gtab b{font:700 24px/1 var(--display);letter-spacing:-.02em}
.gtab span{font:500 13px/1.3 var(--text);color:var(--mute)}
.gtab:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-2)}
.gtab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.t-ti b{color:var(--ti)} .t-ne b{color:var(--ne)} .t-si b{color:var(--si)} .t-fe b{color:var(--fe)}
.gtab[aria-selected="true"]{background:var(--bg-3)}
.t-ti[aria-selected="true"]{box-shadow:inset 0 0 0 1.5px var(--ti),0 10px 40px -12px rgba(75,227,193,.5)}
.t-ne[aria-selected="true"]{box-shadow:inset 0 0 0 1.5px var(--ne),0 10px 40px -12px rgba(255,79,216,.5)}
.t-si[aria-selected="true"]{box-shadow:inset 0 0 0 1.5px var(--si),0 10px 40px -12px rgba(244,181,86,.5)}
.t-fe[aria-selected="true"]{box-shadow:inset 0 0 0 1.5px var(--fe),0 10px 40px -12px rgba(157,140,255,.5)}
.gtab[aria-selected="true"] span{color:var(--ink)}

.gp{--c:var(--ti);padding:clamp(26px,3vw,44px);border-radius:28px;background:linear-gradient(160deg,rgba(243,240,234,.05),rgba(243,240,234,.015));box-shadow:inset 0 0 0 1px var(--line);position:relative;overflow:hidden}
.gp + .gp{margin-top:16px}
.js .gp + .gp{margin-top:0}
.gp::before{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,var(--c),transparent 70%);opacity:.18;pointer-events:none}
.g-ne{--c:var(--ne)} .g-si{--c:var(--si)} .g-fe{--c:var(--fe)}
.gp.enter{animation:gpin .6s var(--ease)}
@keyframes gpin{from{opacity:0;transform:translateY(14px)}}
.gp-k{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.gp-h{font:700 clamp(30px,3.5vw,56px)/1 var(--display);letter-spacing:-.04em;margin-top:16px;text-wrap:balance}
.gp-b{font:400 clamp(17px,1.35vw,20px)/1.55 var(--text);color:var(--ink-2);margin-top:18px;max-width:52ch}
.wild{margin-top:28px;padding:22px 24px;border-radius:18px;background:rgba(7,7,10,.55);border-left:3px solid var(--c);display:grid;gap:12px}
.wild-l{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.wild p{font:400 16.5px/1.6 var(--text);color:var(--ink-2)}
.wild p b{color:var(--ink)}
.wild a{font:600 15px/1.2 var(--display);text-decoration:none;color:var(--c);justify-self:start}
.wild a:hover{text-decoration:underline;text-underline-offset:4px}

.loop{margin-top:clamp(80px,10vw,150px);padding-top:48px;border-top:1px solid var(--line)}
.loop-h{font:700 clamp(28px,3vw,48px)/1 var(--display);letter-spacing:-.04em}
.loop-steps{display:grid;gap:14px;margin-top:40px;counter-reset:s}
@media (min-width:768px){.loop-steps{grid-template-columns:repeat(5,1fr);gap:0}}
.loop-steps li{position:relative;padding:26px 22px 24px;border-radius:20px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);transition:background .5s,box-shadow .5s}
@media (min-width:768px){
  .loop-steps li{border-radius:0;box-shadow:none;background:transparent;border-left:1px solid var(--line);padding:8px 26px 0}
  .loop-steps li:last-child::after{content:"↺";position:absolute;right:0;top:-6px;font:400 30px/1 var(--display);color:var(--ti)}
}
.loop-steps .ln{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--mute)}
.loop-steps b{display:block;margin-top:14px;font:700 clamp(24px,2.3vw,36px)/1 var(--display);letter-spacing:-.035em}
.loop-steps p{margin-top:12px;font:400 15.5px/1.55 var(--text);color:var(--ink-2)}
.js .loop .loop-steps li{opacity:.25;transition:opacity .8s var(--ease)}
.js .loop.in .loop-steps li{opacity:1}
.js .loop.in .loop-steps li:nth-child(2){transition-delay:.15s}
.js .loop.in .loop-steps li:nth-child(3){transition-delay:.3s}
.js .loop.in .loop-steps li:nth-child(4){transition-delay:.45s}
.js .loop.in .loop-steps li:nth-child(5){transition-delay:.6s}
.loop.in .loop-steps li:nth-child(1) b{color:var(--si)}
.loop.in .loop-steps li:nth-child(2) b{color:var(--ne)}
.loop.in .loop-steps li:nth-child(3) b{color:var(--ti)}
.loop.in .loop-steps li:nth-child(4) b{color:var(--fe)}
.loop.in .loop-steps li:nth-child(5) b{color:var(--k1)}
.loop-steps b{transition:color .8s var(--ease) .3s}

.notes{display:grid;gap:22px;margin-top:clamp(80px,10vw,150px)}
@media (min-width:1024px){.notes{grid-template-columns:1.3fr 1fr;column-gap:72px}.notes-l{grid-column:1/-1}.now{align-self:start}.fine{grid-column:1/-1}}
.notes-l{font:500 12.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.notes-list li{position:relative;display:block;padding:22px 0 22px 46px;border-bottom:1px solid var(--line);font:500 clamp(22px,2.2vw,34px)/1.2 var(--display);letter-spacing:-.025em}
.notes-list li:first-child{border-top:1px solid var(--line)}
.notes-list li span{position:absolute;left:0;color:var(--ti);font-weight:400}
.notes-list em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--k1)}
.now{padding:28px;border-radius:24px;background:linear-gradient(150deg,rgba(75,227,193,.10),rgba(157,140,255,.06));box-shadow:inset 0 0 0 1px rgba(75,227,193,.25)}
.now-l{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ti);margin-bottom:16px}
.now p:last-child{font:400 17px/1.6 var(--text);color:var(--ink-2)}

/* ── results: by the numbers ──────────────────────── 
   Two tiers that never mix: "Me, since 2022" (career numbers, open tiles on hairlines) and one
   project in production (a framed panel). Numbers size to their own tile (container units), so
   they never overflow; the clamp() before each one is the fallback. */
.results{background:none}
.tier{margin-top:clamp(56px,7vw,104px)}
.tier-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 32px;padding-bottom:22px;border-bottom:1px solid var(--line-2)}
.tier-h{font:700 clamp(26px,2.7vw,42px)/1.05 var(--display);letter-spacing:-.035em;text-wrap:balance}
.tier-h em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--k1)}
.tier-s{font:400 12.5px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.nums{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(28px,3.4vw,64px)}
@media (min-width:640px){.nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.nums{grid-template-columns:repeat(3,minmax(0,1fr))}}
.num{--c:var(--k1);container-type:inline-size;display:flex;flex-direction:column;gap:16px;padding:clamp(30px,3.2vw,48px) 0 clamp(26px,2.8vw,40px);border-bottom:1px solid var(--line)}
.num::before{content:"";width:30px;height:3px;border-radius:2px;background:var(--c)}
.num-n{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.12em;row-gap:.1em;font:700 clamp(56px,7vw,120px)/.88 var(--display);font-size:clamp(56px,27cqi,124px);letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.num-n small{font:italic 400 .34em/1 var(--serif);letter-spacing:-.005em;color:var(--c);white-space:nowrap}
.num-n .ar{font:400 .5em/1 var(--display);letter-spacing:0;color:var(--c);align-self:center}
.num-l{font:400 clamp(16px,1.2vw,18.5px)/1.5 var(--text);color:var(--ink-2);max-width:38ch}
.num .stamp{margin-top:auto}
.num .stamp::before{background:var(--c)}
.a-ti{--c:var(--ti)} .a-fe{--c:var(--fe)} .a-k1{--c:var(--k1)}.a-k2{--c:var(--k2)}.a-k3{--c:var(--k3)}.a-k6{--c:var(--k6)} .a-k4{--c:var(--k4)} .a-k5{--c:var(--k5)} .a-k7{--c:var(--k7)}
.pips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pips i{width:14px;height:14px;border-radius:50%;background:var(--pc)}
.pips i.dep{background:transparent;box-shadow:inset 0 0 0 2px var(--pc)}
.pips i.cb{background:transparent;border:2px dashed var(--pc)}
.pips .q1{--pc:var(--k1)} .pips .q2{--pc:var(--k2)} .pips .q3{--pc:var(--k3)} .pips .q4{--pc:var(--k4)} .pips .q5{--pc:var(--k5)} .pips .q6{--pc:var(--k6)} .pips .q7{--pc:var(--k7)}
.prod{position:relative;margin-top:clamp(64px,8vw,120px);padding:clamp(22px,3.4vw,56px);border-radius:clamp(22px,2.4vw,36px);
  background:linear-gradient(155deg,rgba(244,181,86,.085),rgba(244,181,86,.02) 52%,rgba(243,240,234,.015));box-shadow:inset 0 0 0 1px rgba(244,181,86,.24)}
.prod .tier-hd{display:block;border-bottom-color:rgba(244,181,86,.22)}
.tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:8px 12px;border-radius:999px;background:rgba(244,181,86,.12);box-shadow:inset 0 0 0 1px rgba(244,181,86,.35);font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--k1)}
.prod-s{font:400 clamp(15.5px,1.15vw,17.5px)/1.5 var(--text);color:var(--ink-2);max-width:56ch;margin-top:10px}
.hl{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.hl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,48px)}}
.hl li{container-type:inline-size;display:flex;flex-direction:column;gap:12px;padding-block:clamp(24px,2.6vw,36px);border-bottom:1px solid rgba(244,181,86,.14)}
@media (min-width:1100px){
  .hl{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;margin-inline:calc(-1 * clamp(18px,1.8vw,30px))}
  .hl li{padding-inline:clamp(18px,1.8vw,30px);border-bottom:0}
  .hl li + li{border-left:1px solid rgba(244,181,86,.16)}
}
.hl-n{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.12em;row-gap:.1em;font:700 clamp(46px,5.2vw,88px)/.9 var(--display);font-size:clamp(46px,25cqi,94px);letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.hl-n small{font:italic 400 .38em/1 var(--serif);letter-spacing:-.005em;color:var(--k1);white-space:nowrap}
.hl-l{font:400 16px/1.5 var(--text);color:var(--ink-2);max-width:36ch}
.hl .stamp{margin-top:auto}
.hl .stamp::before{background:var(--k1)}
.prod-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:clamp(22px,2.6vw,36px)}
.prod-note{font:400 13px/1.5 var(--mono);letter-spacing:.02em;color:var(--mute);max-width:60ch}
.go{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:15px 24px;border-radius:999px;background:var(--k1);color:#07070A;font:700 15.5px/1.15 var(--display);letter-spacing:-.01em;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s}
.go i{font-style:normal;transition:transform .35s var(--ease)}
.go:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px rgba(244,181,86,.7)}
.go:hover i{transform:translateX(4px)}
.results .fine{margin-top:28px}

/* ── work: sticky stack ───────────────────────────── */
.stack{padding-inline:var(--gut);max-width:calc(var(--max) + 0px);margin:clamp(56px,7vw,96px) auto 0;display:grid;gap:4vh}
.pj{position:relative}
@media (min-width:900px) and (min-height:700px){
  .stack{gap:0}
  .pj{position:sticky;top:84px;height:calc(100svh - 104px);min-height:600px;max-height:900px;padding-bottom:3vh}
  .pj:nth-child(2){top:96px}.pj:nth-child(3){top:108px}.pj:nth-child(4){top:120px}.pj:nth-child(5){top:132px}.pj:nth-child(6){top:144px}.pj:nth-child(7){top:156px}
  .pj + .pj{margin-top:6vh}
}
.pj-in{--g:#0F2340;--a:#F4B556;--t:#F6EFE2;--t2:rgba(246,239,226,.74);
  position:relative;display:grid;gap:clamp(24px,3vw,56px);height:100%;padding:clamp(26px,4vw,64px);border-radius:clamp(22px,2.4vw,36px);
  background:var(--g);color:var(--t);text-decoration:none;overflow:hidden;isolation:isolate;transform-origin:50% 0;
  box-shadow:0 -30px 80px -20px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.07);will-change:transform}
@media (min-width:900px){.pj-in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center}}
.pj-tx{display:flex;flex-direction:column;gap:18px;position:relative;z-index:2;min-width:0}
.pj-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font:500 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t2)}
.pj-n{font:700 15px/1 var(--mono);letter-spacing:.04em;padding:8px 11px;border-radius:999px;background:var(--a);color:var(--g)}
.pj-h{font:800 clamp(38px,4.8vw,92px)/.92 var(--display);letter-spacing:-.05em;text-wrap:balance}
.pj-h span{font:italic 400 .6em/1 var(--serif);letter-spacing:-.01em;color:var(--a)}
.pj-tag{margin-top:-4px;font:italic 400 clamp(21px,1.75vw,31px)/1.16 var(--serif);letter-spacing:-.01em;color:var(--a);max-width:24em;text-wrap:balance}
.pj-st{display:flex;align-items:center;gap:10px;font:500 14px/1.35 var(--text);color:var(--t)}
.pj-st .live{width:9px;height:9px;border-radius:50%;background:#43E08C;box-shadow:0 0 0 4px rgba(67,224,140,.2);flex:none}
.pj-st .dep{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--a);flex:none}
.pj-b{font:400 clamp(16px,1.25vw,19px)/1.55 var(--text);color:var(--t2);max-width:54ch}
.pj-k{display:flex;flex-wrap:wrap;gap:10px 28px}
.pj-k li{display:flex;flex-direction:column;font:400 13.5px/1.35 var(--text);color:var(--t2)}
.pj-k b{font:700 clamp(26px,2.4vw,40px)/1 var(--display);letter-spacing:-.04em;color:var(--a);margin-bottom:4px}
.pj-q{font:400 13.5px/1.4 var(--mono);padding:12px 16px;border-radius:12px;background:rgba(19,35,63,.07);box-shadow:inset 0 0 0 1px rgba(19,35,63,.14);align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-stack{font:400 13px/1.4 var(--mono);color:var(--t2)}
.pj4 .pj-b{font-size:clamp(15px,1.05vw,17px)}
.pj4 .pj-tx{gap:14px}
.pj-go{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:8px;padding:15px 24px;border-radius:999px;background:var(--a);color:var(--g);font:700 15.5px/1 var(--display);letter-spacing:-.01em;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s}
.pj-go i{font-style:normal;transition:transform .35s var(--ease)}
.pj-in:hover .pj-go,.pj-go:hover{box-shadow:0 12px 40px -10px var(--a)}
.pj-in:hover .pj-go i,.pj-go:hover i{transform:translateX(5px)}
.pj-fig{position:relative;z-index:1;perspective:1800px;min-width:0}
.browser{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12);
  transform:rotateY(-9deg) rotateX(5deg) rotateZ(.5deg);transform-origin:30% 50%;transition:transform 1s var(--ease)}
.pj-in:hover .browser{transform:none}
.bb{display:flex;gap:7px;padding:11px 14px;background:#E9E6E0}
.bb i{width:10px;height:10px;border-radius:50%;background:#C9C4BC}
.bb i:first-child{background:#FF6159}.bb i:nth-child(2){background:#FFBD2E}.bb i:nth-child(3){background:#28C941}
.browser img{width:100%;object-fit:cover;object-position:top left}
.pj-fig.duo{padding-bottom:6%}
.pj-fig.duo .browser{margin-right:12%}
.phone{position:absolute;right:0;bottom:0;width:26%;border-radius:22px;overflow:hidden;background:#000;padding:6px;box-shadow:0 30px 70px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.18);transform:rotate(4deg) translateY(4%);transition:transform 1s var(--ease)}
.phone img{border-radius:17px;aspect-ratio:9/18;object-fit:cover;object-position:top}
.pj-in:hover .phone{transform:none}
@media (max-width:899px){.browser{transform:none}.phone{width:30%}}

/* project wardrobes */
.pj1 .pj-in{--g:#0F2340;--a:#F4B556;--t:#F6EFE2;background:radial-gradient(900px 500px at 100% 0%,rgba(244,181,86,.22),transparent 60%),#0F2340}
.pj2 .pj-in{--g:#FBF6EE;--a:#F5A02A;--t:#13233F;--t2:rgba(19,35,63,.72);background:radial-gradient(800px 500px at 100% 100%,rgba(245,160,42,.22),transparent 60%),#FBF6EE;box-shadow:0 -30px 80px -20px rgba(0,0,0,.65)}
.pj2 .pj-n{color:#FBF6EE;background:#13233F}
.pj2 .pj-go{background:#13233F;color:#FBF6EE}
.pj2 .pj-in:hover .pj-go{box-shadow:0 12px 40px -10px rgba(19,35,63,.6)}
.pj3 .pj-in{--g:#111214;--a:#D3A84F;--t:#EDE7DA;background-color:#111214;background-image:linear-gradient(rgba(211,168,79,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(211,168,79,.07) 1px,transparent 1px);background-size:40px 40px}
.pj4 .pj-in{--g:#0D0817;--a:#FF4FD8;--t:#F5ECFF;--t2:rgba(245,236,255,.72);background:radial-gradient(700px 500px at 80% 20%,rgba(255,79,216,.25),transparent 60%),radial-gradient(600px 400px at 20% 100%,rgba(122,60,255,.25),transparent 60%),#0D0817}
.pj5 .pj-in{--g:#0A0A0A;--a:#E8B931;--t:#F4F1E8;background:linear-gradient(115deg,#0A0A0A 0 64%,rgba(232,185,49,.95) 64% 72%,#0A0A0A 72%)}
@media (max-width:899px){.pj5 .pj-in{background:linear-gradient(160deg,#0A0A0A 0 78%,rgba(232,185,49,.95) 78% 82%,#0A0A0A 82%)}}
.pj5 .pj-h{text-transform:uppercase;letter-spacing:-.03em}
.pj6 .pj-in{--g:#0D0C0B;--a:#C9A45F;--t:#EFE6D6;background:radial-gradient(900px 600px at 0% 100%,rgba(201,164,95,.16),transparent 60%),#0D0C0B}
.pj6 .pj-h{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(42px,5vw,96px)}
.pj7 .pj-in{--g:#04050D;--a:#4BE3C1;--t:#E9F3FF;--t2:rgba(233,243,255,.72);
  background:radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 32% 72%,#fff,transparent),radial-gradient(1.5px 1.5px at 58% 14%,#fff,transparent),radial-gradient(1px 1px at 78% 62%,#fff,transparent),radial-gradient(1.5px 1.5px at 90% 28%,#fff,transparent),radial-gradient(1px 1px at 46% 88%,#fff,transparent),radial-gradient(700px 500px at 70% 40%,rgba(75,227,193,.16),transparent 60%),#04050D}

/* wide screens: the sticky cards have a fixed height (at most 900px, so a tall window does not make them roomier),
   so their text sizes with the viewport height (smaller title and body, tighter gaps, figures in one row) and
   every card still fits whole. This used to stop at 920px tall, which let card 01 lose its button at 1920×960+ */
@media (min-width:900px){
  .pj-in{padding:clamp(24px,4.2vh,46px) clamp(26px,3.4vw,54px)}
  .pj-tx{gap:clamp(10px,1.7vh,16px)}
  .pj-meta{font-size:12px}
  .pj-h{font-size:clamp(34px,min(4.6vw,7.6vh),84px)}
  .pj6 .pj-h{font-size:clamp(38px,min(4.8vw,8vh),88px)}
  .pj-tag{font-size:clamp(18px,min(1.7vw,2.8vh),28px)}
  .pj-b{font-size:clamp(14.5px,min(1.2vw,2.1vh),18px);line-height:1.5}
  .pj4 .pj-b{font-size:clamp(14px,min(1.02vw,1.95vh),16px)}
  .pj-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px}
  .pj-k li{font-size:13px}
  .pj-k b{font-size:clamp(22px,min(2.2vw,3.8vh),36px)}
  .pj-go{margin-top:2px;padding:13px 20px}
}
@media (min-width:900px) and (max-height:800px){.pj-stack{display:none}}
/* short laptop windows (≤760px tall): card 01's integrations line is the one detail left out, so its button keeps
   clear of the card edge; the case study lists them */
@media (min-width:900px) and (max-height:760px){.pj-int{display:none}}

/* the 3D deck (home.js sets the transforms; nothing here hides content without it) */
.work{overflow-x:clip}
.pj-shade{position:absolute;inset:0;z-index:3;border-radius:inherit;background:#050507;opacity:0;pointer-events:none}
.pj-glare{position:absolute;left:0;top:0;z-index:4;width:62%;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.2),rgba(255,255,255,.06) 55%,rgba(255,255,255,0));transition:opacity .5s var(--ease);will-change:transform}
.pj2 .pj-glare{background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0))}
.pj-in.tilt .pj-glare{opacity:1}
.deck3d .pj-in{backface-visibility:hidden}
/* accent glow: the card on top (home.js adds .is-top) lights its surroundings in its own colour; opacity only */
.pj{isolation:isolate}
.pj::before{content:"";position:absolute;left:1.5%;right:1.5%;top:2%;bottom:calc(3vh + 2%);z-index:-1;border-radius:40px;pointer-events:none;
  box-shadow:0 0 110px 6px rgba(var(--ac),.36),0 18px 60px rgba(var(--ac),.16);opacity:0;transition:opacity 1.1s var(--ease)}
.pj.is-top::before{opacity:1}
.pj1{--ac:244,181,86} .pj2{--ac:245,160,42} .pj3{--ac:211,168,79} .pj4{--ac:255,79,216} .pj5{--ac:232,185,49} .pj6{--ac:201,164,95} .pj7{--ac:75,227,193}
@media (max-width:899px),(max-height:699px){.pj::before{left:4%;right:4%;top:3%;bottom:3%;box-shadow:0 0 70px 2px rgba(var(--ac),.3)}}
.deck3d .pj-in:hover .browser{transition-duration:.7s}

/* progress rail: 01–07 in each project's colour (wide screens; JS shows it) */
.deck-rail{position:fixed;right:clamp(4px,1vw,20px);top:50%;z-index:70;opacity:0;visibility:hidden;transform:translate3d(12px,-50%,0);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s linear .45s}
.deck-rail.on{opacity:1;visibility:visible;transform:translate3d(0,-50%,0);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s}
.deck-rail ol{display:flex;flex-direction:column;gap:2px;padding:5px;border-radius:999px;background:rgba(7,7,10,.6);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.dr{--c:var(--k1);position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;text-decoration:none;font:500 12px/1 var(--mono);letter-spacing:.02em;color:var(--mute);transition:color .3s,background .3s,box-shadow .3s}
.dr::after{content:"";position:absolute;left:50%;bottom:6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--c);opacity:.85}
.dr:hover{color:var(--ink)}
.dr[aria-current="true"]{color:#07070A;background:var(--c);box-shadow:0 6px 22px -6px var(--c)}
.dr[aria-current="true"]::after{opacity:0}
.dr-t{position:absolute;right:calc(100% + 12px);top:50%;padding:9px 13px;border-radius:999px;background:rgba(7,7,10,.88);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);font:500 13px/1 var(--text);letter-spacing:0;white-space:nowrap;
  opacity:0;transform:translate3d(6px,-50%,0);pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.dr:hover .dr-t,.dr:focus-visible .dr-t{opacity:1;transform:translate3d(0,-50%,0)}
.dr1{--c:var(--k1)} .dr2{--c:var(--k2)} .dr3{--c:var(--k3)} .dr4{--c:var(--k4)} .dr5{--c:var(--k5)} .dr6{--c:var(--k6)} .dr7{--c:var(--k7)}
@media (max-width:1199px){.deck-rail{right:3px}.deck-rail ol{padding:3px}}
@media (max-width:899px),(max-height:699px){.deck-rail{display:none}}

/* phones, tablets and short windows: the cards are not sticky, so each one deals in as it arrives */
@media (max-width:899px),(max-height:699px){
  .pj.pj-pre .pj-in{opacity:0;transform:translate3d(0,64px,0) rotate(-2.4deg) scale(.96);transform-origin:50% 100%;transition:opacity .7s var(--ease),transform 1s var(--ease)}
  .pj.pj-pre:nth-child(even) .pj-in{transform:translate3d(0,64px,0) rotate(2.4deg) scale(.96)}
  .pj.pj-pre.pj-on .pj-in{opacity:1;transform:none}
}

/* finale: the deck fans out into all six, each one a link (a plain grid on phones and with reduced motion;
   six cards fill 2 or 3 columns evenly, so no card spans a row) */
.fan{margin-top:clamp(72px,9vw,140px)}
.fan-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 32px}
.fan-h{font:700 clamp(32px,3.8vw,64px)/1 var(--display);letter-spacing:-.045em;text-wrap:balance}
.fan-h em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.fan-s{font:400 16px/1.5 var(--text);color:var(--mute)}
.fan-list{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:var(--max);margin:clamp(28px,3.4vw,48px) auto 0;padding-inline:var(--gut)}
@media (min-width:640px){.fan-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){
  .fan-list{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 14px;padding-block:24px 36px}
  .fc{flex:0 0 calc((100% - 3 * 14px) / 4)}
}
@media (min-width:1200px){.fc{flex-basis:calc((100% - 5 * 14px) / 6)}}
.fc{position:relative}
.deck3d .fc{will-change:transform}
.fc a{--g:#0F2340;--a:#F4B556;--t:#F6EFE2;position:relative;display:flex;flex-direction:column;gap:8px;height:100%;min-height:clamp(170px,14vw,214px);padding:16px 16px 15px;border-radius:18px;overflow:hidden;
  background:var(--g);color:var(--t);text-decoration:none;box-shadow:0 24px 50px -26px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.fc a:hover,.fc a:focus-visible{transform:translateY(-10px);box-shadow:0 30px 60px -22px rgba(0,0,0,.9),0 0 0 1.5px var(--a)}
.fc-n{align-self:flex-start;padding:6px 9px;border-radius:999px;background:var(--a);color:var(--g);font:700 12.5px/1 var(--mono);letter-spacing:.04em}
.fc-t{margin-top:6px;font:700 clamp(16px,1.2vw,19px)/1.12 var(--display);letter-spacing:-.025em;text-wrap:balance}
.fc-k{font:400 13px/1.35 var(--text);opacity:.78}
.fc-s{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;font:500 12px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.fc-s i{flex:none;width:8px;height:8px;border-radius:50%;background:#43E08C;box-shadow:0 0 0 3px rgba(67,224,140,.2)}
.fc-s i.dep{background:transparent;box-shadow:inset 0 0 0 2px var(--a)}
.fc1 a{--g:#0F2340;--a:#F4B556;--t:#F6EFE2;background:radial-gradient(240px 160px at 100% 0%,rgba(244,181,86,.28),transparent 70%),#0F2340}
.fc2 a{--g:#FBF6EE;--a:#F5A02A;--t:#13233F;background:radial-gradient(240px 160px at 100% 100%,rgba(245,160,42,.25),transparent 70%),#FBF6EE}
.fc2 .fc-n{background:#13233F;color:#FBF6EE}
.fc3 a{--g:#111214;--a:#D3A84F;--t:#EDE7DA;background-color:#111214;background-image:linear-gradient(rgba(211,168,79,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(211,168,79,.08) 1px,transparent 1px);background-size:22px 22px}
.fc4 a{--g:#0D0817;--a:#FF4FD8;--t:#F5ECFF;background:radial-gradient(200px 160px at 80% 10%,rgba(255,79,216,.32),transparent 70%),radial-gradient(200px 140px at 10% 100%,rgba(122,60,255,.3),transparent 70%),#0D0817}
.fc5 a{--g:#0A0A0A;--a:#E8B931;--t:#F4F1E8;background:linear-gradient(118deg,#0A0A0A 0 70%,rgba(232,185,49,.95) 70% 77%,#0A0A0A 77%)}
.fc5 .fc-t{text-transform:uppercase;letter-spacing:-.01em}
.fc6 a{--g:#0D0C0B;--a:#C9A45F;--t:#EFE6D6;background:radial-gradient(220px 180px at 0% 100%,rgba(201,164,95,.22),transparent 70%),#0D0C0B}
.fc6 .fc-t{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:clamp(18px,1.4vw,22px)}
.fc7 a{--g:#04050D;--a:#4BE3C1;--t:#E9F3FF;background:radial-gradient(1.5px 1.5px at 18% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 84% 70%,#fff,transparent),radial-gradient(1px 1px at 40% 80%,#fff,transparent),radial-gradient(220px 160px at 70% 40%,rgba(75,227,193,.2),transparent 70%),#04050D}


/* ── process ──────────────────────────────────────── */
.rail{display:grid;gap:14px;padding-inline:var(--gut);max-width:var(--max);margin:clamp(56px,7vw,96px) auto 0}
@media (min-width:700px){.rail{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.rail{grid-template-columns:repeat(3,1fr)}}
.st{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.4vw,36px);border-radius:24px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;min-height:300px}
.st-n{font:800 clamp(80px,8vw,130px)/.8 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(243,240,234,.28);transition:-webkit-text-stroke-color .4s}
.st:hover .st-n{-webkit-text-stroke-color:var(--ink)}
.st h3{font:700 clamp(24px,2vw,32px)/1.05 var(--display);letter-spacing:-.035em;margin-top:8px}
.st p{font:400 16px/1.55 var(--text);color:var(--ink-2)}
.st a,.st .seen{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px;font:500 13px/1.3 var(--mono);letter-spacing:.02em;color:var(--mute);text-decoration:none}
.st a:hover{color:var(--ink)}
.dotk{width:9px;height:9px;border-radius:50%;flex:none}
.dotk.k1{background:var(--k1)}.dotk.k2{background:var(--k2)}.dotk.k4{background:var(--k4)}.dotk.k5{background:var(--k5)}
.howbar{margin-top:28px;padding:24px 28px;border-radius:20px;background:linear-gradient(100deg,rgba(244,181,86,.10),rgba(255,79,216,.07),rgba(75,227,193,.08));box-shadow:inset 0 0 0 1px var(--line);font:400 16.5px/1.6 var(--text);color:var(--ink-2)}
.howbar b{color:var(--ink)}

/* ── services: what I can take on. One still block before Contact (it replaced the five scrolling service strips):
   four groups in the order a project runs, two columns from 900px, one on phones; the reveal is the only motion ── */
.svc-hd{max-width:1180px}
.svc-h{font:700 clamp(34px,4.2vw,72px)/1 var(--display);letter-spacing:-.045em;margin-top:22px;text-wrap:balance}
.svc-s{font:400 clamp(17px,1.35vw,20px)/1.55 var(--text);color:var(--ink-2);max-width:56ch;margin-top:20px}
.svc-list{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(32px,4.4vw,80px);margin-top:clamp(36px,4.6vw,64px);border-top:1px solid var(--line)}
@media (min-width:900px){.svc-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.svc-g{--c:var(--ti);display:flex;flex-direction:column;gap:12px;padding-block:clamp(24px,2.6vw,36px);border-bottom:1px solid var(--line)}
.svc-g.g2{--c:var(--k1)} .svc-g.g3{--c:var(--ne)} .svc-g.g4{--c:var(--fe)}
.svc-t{display:flex;align-items:baseline;gap:14px;font:700 clamp(22px,1.9vw,30px)/1.1 var(--display);letter-spacing:-.03em}
.svc-n{flex:none;font:500 13px/1 var(--mono);letter-spacing:.12em;color:var(--c)}
.svc-p{font:400 16px/1.55 var(--text);color:var(--ink-2);max-width:48ch}
.svc-i{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:4px}
.svc-i li{display:inline-flex;align-items:center;gap:9px;font:500 15px/1.35 var(--text);color:var(--ink)}
.svc-i li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--c)}

/* ── contact ──────────────────────────────────────── */
.contact{overflow:hidden;isolation:isolate}
/* its glow fades in from the top, so the boundary above stays a hairline, not a step in the background */
.contact::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1000px 700px at 85% 10%,rgba(255,79,216,.12),transparent 60%),radial-gradient(900px 600px at 0% 100%,rgba(75,227,193,.10),transparent 60%);
  -webkit-mask:linear-gradient(transparent,#000 280px);mask:linear-gradient(transparent,#000 280px)}
.mega{font:800 clamp(48px,8.6vw,168px)/.9 var(--display);letter-spacing:-.06em;margin-top:28px;max-width:14ch;text-wrap:balance}
.contact .lede{margin-top:36px}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:clamp(40px,5vw,72px)}
.mail-a{position:relative;font:600 clamp(26px,4.2vw,72px)/1.1 var(--display);letter-spacing:-.04em;text-decoration:none;word-break:break-all}
.mail-a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:2px;background:var(--spectrum);transform:scaleX(.25);transform-origin:0 50%;transition:transform .6s var(--ease)}
.mail-a:hover::after{transform:none}
.copy{all:unset;cursor:pointer;font:600 14px/1 var(--display);padding:13px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);transition:background .2s}
.copy:hover{background:rgba(243,240,234,.08)}
.copy:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.clinks{margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.clinks li{display:grid;gap:8px;padding:22px 0;border-bottom:1px solid var(--line)}
@media (min-width:800px){.clinks li{grid-template-columns:220px 1fr;align-items:baseline}}
.clinks span{font:500 12.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.clinks a{text-decoration:none;font:500 clamp(18px,1.6vw,24px)/1.35 var(--display);letter-spacing:-.02em;transition:color .2s}
.clinks a:hover{color:var(--k1)}
.clinks a i{font-style:normal;color:var(--mute)}
.clinks p{font:400 17px/1.55 var(--text);color:var(--ink-2)}
.clinks p a{font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}
/* the live sites: a list, in one line with dots between on wide screens; on phones one per row (mobile pass below) */
.clinks .cl-live{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:2px}
.clinks .cl-live li{display:block;padding:0;border:0}
.clinks .cl-live li + li::before{content:"·";content:"·" / "";margin-inline:.5em;color:var(--mute)}
.clinks .cl-live a{font:400 17px/1.55 var(--text);letter-spacing:0;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}

/* ── footer ───────────────────────────────────────── */
.ft{border-top:1px solid var(--line);padding-block:36px}
.ft-in{display:grid;gap:10px}
@media (min-width:900px){.ft-in{grid-template-columns:1fr auto;align-items:center}.ft-fine{grid-column:1}.ft-top{grid-column:2;grid-row:1/3}}
.ft-name{font:600 16px/1.3 var(--display)}
.ft-name span{font-weight:400;color:var(--mute)}
.ft-fine{font:400 13px/1.5 var(--text);color:var(--mute)}
.ft-top{font:600 14px/1 var(--display);text-decoration:none;padding:13px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);justify-self:start}

/* ── motion off ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .name .w,.fx{transform:none;opacity:1}
  .js .reveal{opacity:1;transform:none}
  .tk-track{animation:none}
  .browser,.phone{transform:none}
  .split .wi,.fc,.fc a,.pj.pj-pre .pj-in{transform:none!important}
  .pj.pj-pre .pj-in{opacity:1}
  /* nothing moves, so nothing is left out: the ticker becomes a still list */
  .ticker{-webkit-mask:none;mask:none}
  .tk-track{width:auto}
  .tk-set{flex:1 1 100%;min-width:0;flex-wrap:wrap;padding:10px var(--gut)}
  .tk-set[aria-hidden]{display:none}
  .tk-set li{flex-wrap:wrap;row-gap:6px;padding:14px 32px 14px 0;white-space:normal;line-height:1.4}
  .tk-set li::after{display:none}
}

/* print: the page as plain, static content */
@media print{
  .amb,.deck-rail,.pj-shade,.pj-glare{display:none!important}
  .split .wi,.pj-in,.fc{transform:none!important}
  .pj{position:relative!important;top:auto!important}
}

/* black-hole cursor in the hero (fine pointers only; links and buttons keep the normal pointer) */
.hero.bh-cursor{cursor:none}
.hero.bh-cursor a,.hero.bh-cursor button{cursor:pointer}

/* hero quote (replaces the big name; the name lives in the header) */
.hq{margin:0;max-width:min(1100px,100%)}
.hq-q{margin:0}
.hq-q p{font:400 clamp(34px,5.4vw,92px)/1.02 var(--serif);font-style:italic;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;min-height:2.06em}
.hq-mark{font-style:normal;margin-right:.04em;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.hq-caret{display:inline-block;width:.06em;height:.82em;margin-left:.06em;vertical-align:-.06em;background:var(--ti);animation:caret 1.05s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hq-by{margin-top:18px;font:500 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.hq-by::before{content:"— "}
.hq .hq-t,.hq .hq-by{transition:opacity .45s var(--ease),filter .45s var(--ease)}
.hq.out .hq-t,.hq.out .hq-by{opacity:0;filter:blur(6px)}
.f2{animation-delay:.2s}
@media (max-width:599px){.hq-q p{min-height:3.1em}}
@media (prefers-reduced-motion:reduce){.hq-caret{display:none}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* hero quote v2: cipher decode, stable layout */
.hq-q p{font-size:clamp(30px,4.6vw,80px);line-height:1.04;min-height:0}
.hq.long .hq-q p{font-size:clamp(25px,3.3vw,56px);line-height:1.08}
.hq-reply{margin-top:16px;font:500 clamp(14px,1.25vw,18px)/1.45 var(--mono);color:var(--ti);letter-spacing:.01em;transition:opacity .4s var(--ease)}
.hq-reply span:first-child{margin-right:.35em}
.hq.no-reply .hq-reply{visibility:hidden}
.hq-by{transition:opacity .4s var(--ease)}
.hq-by.dim,.hq-reply.dim,.hq.out .hq-reply{opacity:0}
.dc{position:relative;color:transparent}
.dc::after{content:attr(data-g);position:absolute;left:0;top:0;color:var(--ti);font-style:normal;opacity:.9}
.dc.on{color:inherit}
.dc.on::after{content:none}
@media (max-width:599px){.hq-q p{min-height:0}}

/* ── cover v3: clean geometric stack + word-cascade quotes ── */
.hero-in{position:relative}
.hfr{position:absolute;inset:78px calc(var(--gut) * .45) 22px;pointer-events:none}
.hfr i{position:absolute;width:22px;height:22px;border:0 solid rgba(243,240,234,.32)}
.hfr i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.hfr i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.hfr i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.hfr i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.kick{margin-bottom:clamp(22px,3.4vh,34px)}
.hq{max-width:min(24ch,100%);margin:0}
.hq-t{font:400 clamp(32px,4.5vw,78px)/1.06 var(--serif)!important;font-style:italic!important;letter-spacing:-.02em;color:var(--ink);min-height:0!important;text-wrap:pretty}
.hq-t em,.hq-t .acc{font-style:italic;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.hq .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .16em .02em;margin:0 -.08em -.16em -.02em}
.hq .wi{display:inline-block}
.js .hq .wi{transform:translateY(110%);opacity:0;filter:blur(8px);transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .9s ease,filter 1s ease}
.js .hq.show .wi{transform:none;opacity:1;filter:none}
.js .hq.leave .wi{transform:translateY(-110%);opacity:0;filter:blur(6px);transition-duration:.65s,.55s,.65s}
.hq-by{margin-top:clamp(16px,2.4vh,24px);display:flex;align-items:center;gap:14px}
.hq-by::before{content:"";flex:none;width:44px;height:1px;background:currentColor;opacity:.6}
.js .hq-by{opacity:0;transform:translateY(6px);transition:opacity .7s ease,transform .7s ease}
.js .hq.show .hq-by{opacity:1;transform:none}
.hero-rule{height:1px;margin:clamp(26px,4.2vh,46px) 0 clamp(22px,3.4vh,34px);background:linear-gradient(90deg,rgba(243,240,234,.28),rgba(243,240,234,.06) 70%,transparent)}
.hero-row{margin-top:0!important;align-items:start!important}
.statement{font-size:clamp(26px,2.6vw,44px)!important}
@media (prefers-reduced-motion:reduce){.js .hq .wi,.js .hq-by{transform:none;opacity:1;filter:none;transition:none}}
.hq{max-width:none}
.hq-t{max-width:14.5em}
@media (max-width:599px){.hq-t{max-width:none}}

/* deck frames show each screenshot whole (no cropping). No aspect-ratio is set on .browser img any more, so each
   image's width/height attributes reserve its exact box before it lazy-loads (with "aspect-ratio:auto" here the
   boxes were ~12px tall until load, and on phones everything below the deck moved down ~950px as they arrived) */
.browser img{height:auto!important;object-fit:fill!important}

.pj-int{font:400 12.5px/1.6 var(--mono);color:var(--t2,var(--ink-2));max-width:60ch;letter-spacing:.01em}
.pj-int b{display:block;margin-bottom:4px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--a,var(--k1))}

/* ── 3D Lab redirect section (homepage) + footer link + cross-page view transitions ── */

.labteaser{padding-block:clamp(72px,10vw,170px)}
.lt{display:grid;gap:clamp(28px,4vw,72px);align-items:center}
@media (min-width:980px){.lt{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.lt-screen{position:relative;display:block;aspect-ratio:16/10;border-radius:clamp(18px,2vw,30px);overflow:hidden;background:#07070A;isolation:isolate;text-decoration:none;color:var(--ink);box-shadow:0 0 0 1px var(--line-2),0 50px 140px -50px rgba(75,227,193,.32),0 40px 100px -40px rgba(255,79,216,.24);transition:transform .8s var(--ease),box-shadow .5s}
.lt-screen:hover,.lt-screen:focus-visible{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(243,240,234,.32),0 60px 150px -50px rgba(75,227,193,.42),0 50px 110px -40px rgba(255,79,216,.32)}
.lt-poster,.lt-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lt-vid{opacity:0;transition:opacity 1s var(--ease)}
.lt-vid.on{opacity:1}
.lt-screen::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(7,7,10,.55)),linear-gradient(180deg,transparent 62%,rgba(7,7,10,.6))}
.lt-frame{position:absolute;inset:clamp(12px,1.6vw,22px);z-index:2;pointer-events:none}
.lt-frame i{position:absolute;width:20px;height:20px;border:0 solid rgba(243,240,234,.5)}
.lt-frame i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.lt-frame i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.lt-frame i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.lt-frame i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.lt-tag{position:absolute;left:clamp(22px,2.6vw,38px);top:clamp(22px,2.6vw,36px);z-index:3;display:inline-flex;align-items:center;gap:9px;font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:9px 13px;border-radius:999px;background:rgba(7,7,10,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line-2)}
.lt-tag i{width:7px;height:7px;border-radius:50%;background:#4BE3C1;box-shadow:0 0 12px #4BE3C1;animation:ltpulse 1.8s ease-in-out infinite}
@keyframes ltpulse{50%{opacity:.3}}
.lt-go{position:absolute;right:clamp(22px,2.6vw,38px);bottom:clamp(20px,2.4vw,34px);z-index:3;display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--display);padding:13px 18px;border-radius:999px;background:rgba(243,240,234,.94);color:#07070A;transform:translateY(6px);opacity:.92;transition:transform .5s var(--ease),opacity .4s}
.lt-go b{transition:transform .5s var(--ease)}
.lt-screen:hover .lt-go,.lt-screen:focus-visible .lt-go{transform:none;opacity:1}
.lt-screen:hover .lt-go b,.lt-screen:focus-visible .lt-go b{transform:translateX(4px)}
.lt-tx{display:flex;flex-direction:column}
.lt-tx .h2{font-size:clamp(40px,5.2vw,96px)}
.lt-tx .btn{margin-top:30px;align-self:flex-start}
.lt-ch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin-top:clamp(28px,4vw,56px)}
@media (min-width:760px){.lt-ch{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.lt-ch{grid-template-columns:repeat(6,minmax(0,1fr))}}
.lt-ch a{position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);transition:transform .55s var(--ease),box-shadow .4s}
.lt-ch img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:saturate(.92) brightness(.86);transition:transform .9s var(--ease),filter .5s}
.lt-ch a:hover,.lt-ch a:focus-visible{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line-2),0 26px 60px -28px rgba(244,181,86,.5)}
.lt-ch a:hover img,.lt-ch a:focus-visible img{transform:scale(1.06);filter:none}
.lt-ch .cap{display:flex;align-items:baseline;gap:10px;padding:12px 14px 14px;font:600 14.5px/1.25 var(--display)}
.lt-ch .n{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--mute)}
.ft-lab{font:600 14px/1 var(--display);text-decoration:none;padding:13px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);justify-self:start}
@media (max-width:620px){.lt-tag{font-size:10.5px;padding:8px 11px}.lt-go{font-size:14px;padding:11px 15px}.lt-ch .cap{font-size:13.5px;padding:10px 12px 12px}}
@media (prefers-reduced-motion:reduce){.lt-vid{display:none}.lt-tag i{animation:none}.lt-screen,.lt-ch a,.lt-ch img,.lt-go,.lt-go b{transition:none}}

/* ── mobile menu (≤860px): a toggle in the header opens a full-screen menu built from the header's links ── */
.hd-menu{display:none;place-items:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:#F3F0EA;box-shadow:inset 0 0 0 1px rgba(243,240,234,.22);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s}
.hd-menu:hover{background:rgba(243,240,234,.08)}
.hd-menu:focus-visible{outline:2px solid #4BE3C1;outline-offset:3px}
.hd-menu i{grid-area:1/1;display:block;width:18px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.hd-menu i:first-child{transform:translateY(-3.5px)}
.hd-menu i:last-child{transform:translateY(3.5px)}
.nav-open .hd-menu i:first-child{transform:rotate(45deg)}
.nav-open .hd-menu i:last-child{transform:rotate(-45deg)}
@media (max-width:860px){.hd-menu{display:inline-grid}.hd{gap:10px}}
@media (max-width:420px){.hd-dot{display:none}.hd-mark{font-size:14.5px}.hd-cta{gap:7px;padding:9px 12px;font-size:12.5px}}
@media (max-width:359px){.hd-cta{display:none}}
.mnav{position:fixed;inset:0;z-index:88;display:flex;flex-direction:column;justify-content:flex-end;gap:26px;padding:96px max(20px,5vw) max(30px,env(safe-area-inset-bottom));
  background:radial-gradient(120% 70% at 100% 0%,rgba(75,227,193,.12),transparent 60%),radial-gradient(110% 60% at 0% 100%,rgba(255,79,216,.12),transparent 62%),rgba(7,7,10,.97);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overflow-y:auto;overscroll-behavior:contain;color:#F3F0EA;
  opacity:0;visibility:hidden;transition:opacity .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s}
.nav-open .mnav{opacity:1;visibility:visible;transition:opacity .35s cubic-bezier(.2,.8,.2,1)}
html.nav-open,html.nav-open body{overflow:hidden}
.nav-open .hd{z-index:89;transform:none}
.mnav-k{font:500 12px/1 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#9A968E}
.mnav ol{list-style:none;margin:0;padding:0}
.mnav .ml{display:flex;align-items:baseline;gap:16px;padding:13px 0;font:700 clamp(34px,10.5vw,58px)/1 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.045em;color:#F3F0EA;text-decoration:none;border-bottom:1px solid rgba(243,240,234,.09);
  opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),color .2s}
.mnav .ml span{flex:none;width:2.6em;font:500 12px/1 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#9A968E}
.mnav .ml:hover,.mnav .ml:focus-visible{color:#4BE3C1;outline:none}
.mnav .ml[aria-current]{color:#4BE3C1}
.nav-open .mnav .ml{opacity:1;transform:none}
.nav-open .mnav li:nth-child(2) .ml{transition-delay:.04s}
.nav-open .mnav li:nth-child(3) .ml{transition-delay:.08s}
.nav-open .mnav li:nth-child(4) .ml{transition-delay:.12s}
.nav-open .mnav li:nth-child(5) .ml{transition-delay:.16s}
.nav-open .mnav li:nth-child(6) .ml{transition-delay:.2s}
.mnav-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:15px 24px;border-radius:999px;background:#F3F0EA;color:#07070A;font:600 16px/1 'Inter Tight',Inter,system-ui,sans-serif;text-decoration:none}
.mnav-cta:focus-visible{outline:2px solid #4BE3C1;outline-offset:3px}
@media (min-width:861px){.mnav{display:none}}
@media (prefers-reduced-motion:reduce){.mnav,.mnav .ml,.hd-menu i{transition:none}}

/* ── mobile pass: phones, landscape phones and tablets (≤899px unless a rule says otherwise). Wide screens keep
   their look. Text never drops under 13px (reading copy 15px+), tap targets reach 44px (as invisible hit areas
   where the drawn size is part of the design), screenshots show whole and nothing covers anything else. ── */

/* the deck's phone frames take each screenshot's own shape (9:18 cut ~8% off the bottom); the frame grows a little */
.phone img{aspect-ratio:auto;object-fit:fill}
/* the hero glow hangs from the screen's top instead of from the hero's height (the same place whenever the hero is one
   screen tall), so the hero settling its height as the web fonts arrive no longer drags the whole glow with it; that
   was most of the homepage's layout shift on phones */
.aurora{top:-20svh}

/* header: the brand and "Open to work" keep their size but answer to a 44px-tall touch; the pill's label is 13px */
@media (max-width:860px){
  .hd-mark,.hd-cta{position:relative}
  .hd-mark::after,.hd-cta::after{content:"";position:absolute;left:-5px;right:-5px;top:50%;height:44px;margin-top:-22px}
}
@media (max-width:420px){.hd-cta{font-size:13px}}

/* menu: 13px label and numbers. The list sits at the bottom when it fits and starts at the top (scrolling) when it
   does not, so on a landscape phone nothing is pushed up off-screen; there the links shrink and pair up in two
   columns, and the header keeps a backdrop over anything scrolling under it */
.mnav{justify-content:flex-start}
.mnav-k{margin-top:auto;font-size:13px}
.mnav .ml span{font-size:13px}
@media (max-height:560px){
  .mnav{gap:16px;padding-top:88px}
  .mnav .ml{font-size:clamp(26px,7.4vh,40px);padding:10px 0}
  .nav-open .hd{background:linear-gradient(rgba(7,7,10,.97) 72%,rgba(7,7,10,0))}
}
@media (max-height:560px) and (min-width:560px){.mnav ol{columns:2;column-gap:32px}.mnav li{break-inside:avoid}}

/* the 3D-deck rail on touch screens wide enough to show it (tablets in landscape): 44px dots */
@media (pointer:coarse){.dr{width:44px;height:44px}}

/* a line break that only phones use, so a headline breaks at its phrase */
@media (min-width:600px){.m-br{display:none}}
/* the span that keeps "Design-studio" whole on phones is plain title text (deck titles style their spans as subtitles);
   the fan card's title keeps it whole at every width (at 360px it used to break at the hyphen) */
.pj-h .nw{font:inherit;letter-spacing:inherit;color:inherit}
.fc-t .nw{white-space:nowrap}

@media (max-width:899px){
  .skip{padding:13px 16px}
  .ft-lab,.ft-top{padding:15px 18px}
  /* small labels go up to 13px; the fine print is reading copy */
  .home .kick span,.home .tk-set .d,.home .gp-k,.home .loop-steps .ln,.home .now-l,.home .stamp,.home .tag,.home .notes-l,.home .tier-s,
  .home .pj-meta,.home .pj-int,.home .fc-n,.home .fc-s,.home .clinks span,.home .lt-ch .n,.home .lt-tag{font-size:13px}
  .home .tk-set li::after{font-size:13px!important}
  .home .fine{font-size:15px}
  .home .prod-note{font-size:15px}
  .home .pj-k li{font-size:14px}
  /* the gear map's "Ti · Ne · Si · Fe" would be about 7px here; the tabs below say the same, so it goes and INTP centres */
  .home .gcore-s{display:none}
  .home .gcore-t{transform:translateY(14px)}
  /* the demo search query wraps instead of being cut off with an ellipsis; "Design-studio" never breaks at its hyphen */
  .home .pj-q{white-space:normal;overflow-wrap:anywhere}
  .home .pj-h .nw{white-space:nowrap}
  .home .lede,.home .fan-s{text-wrap:pretty}
  /* the 3D Lab chapter tiles in a row share one height when a caption takes two lines */
  .home .lt-ch a{height:100%}
  /* one compositor layer per deck card costs a lot of GPU memory on a phone; the deal-in still animates */
  .home .pj-in{will-change:auto}
  /* 44px tap targets */
  .home .wild a,.home .st a,.home .clinks li > a{position:relative}
  .home .wild a::before,.home .st a::before,.home .clinks li > a::before,.home .mail-a::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:max(100%,44px);transform:translateY(-50%)}
  .home .scroll-cue::before{content:"";position:absolute;inset:-2px -9px}
  .home .clinks p a{padding-block:12px}
  .home .copy{padding:15px 20px}
  /* the live sites stack one per row, each a full 44px tap that never reaches into the next */
  .home .clinks .cl-live{display:grid;row-gap:0}
  .home .clinks .cl-live li + li::before{content:none}
  .home .clinks .cl-live a{display:flex;align-items:center;width:fit-content;min-height:44px}
}
/* the "See all results" button keeps to one line on the narrowest phones */
@media (max-width:400px){.home .prod{padding-inline:18px}.home .go{padding-inline:18px}}
/* the INTP panels (phones, tablets: the map sits above them) each keep their own height. home.js runs the
   auto-advance only from 1024px, so below that a panel changes, and the page under it moves, only on the reader's
   own tap; a shared height left up to ~180px of empty card under the shorter panels */
/* tablets: five columns of the loop were ~120px each (a word per line); two columns, the last step full width */
@media (min-width:768px) and (max-width:1023px){
  .home .loop-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .home .loop-steps li{border-left:0;border-radius:20px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);padding:26px 22px 24px}
  .home .loop-steps li:last-child{grid-column:1/-1}
  .home .loop-steps li:last-child::after{content:none}
}
/* landscape phones: the decorative gear map stays within about one screen */
@media (max-height:500px) and (min-width:600px) and (max-width:1023px){.home .gmap{max-width:min(620px,118vh)}}

/* ── games: Gravity Well (hero), Galaxy of Work, Lead Run ── */
.gw-tip{margin-top:14px;font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--mute)}
.gw-hud{position:absolute;top:96px;right:var(--gut);z-index:3;padding:12px 18px;border-radius:18px;background:rgba(7,7,10,.62);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:min(320px,calc(100% - 2*var(--gut)));pointer-events:auto}
.gw-n{display:flex;align-items:baseline;gap:8px;font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.gw-n b{font:700 28px/1 var(--display);letter-spacing:-.03em;color:var(--k1)}
.gw-hud.bump .gw-n b{animation:gwbump .45s var(--ease)}
@keyframes gwbump{0%{transform:scale(1.5);color:#fff}100%{transform:scale(1)}}
.gw-hud.won{box-shadow:inset 0 0 0 1px rgba(75,227,193,.5),0 0 40px rgba(75,227,193,.18)}
.gw-win{margin-top:10px;font:500 15px/1.4 var(--text);color:var(--ink)}
.gw-win em{font-family:var(--serif);font-style:italic;color:var(--ti)}
.gw-win a{display:inline-block;margin-top:6px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ti)}
@media (max-width:699px){.gw-hud{top:78px;padding:10px 14px}.gw-n b{font-size:22px}}

.galaxy{margin-top:clamp(64px,8vw,120px)}
.gx-hd{margin-bottom:clamp(18px,2.4vw,32px)}
.gx-stage{position:relative;border-radius:clamp(22px,2.4vw,36px);overflow:hidden;background:radial-gradient(60% 70% at 50% 50%,rgba(244,181,86,.08),transparent 70%),var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.gx-cv{display:block;width:100%;height:clamp(380px,46vw,600px)}
.gx-cv.pt{cursor:pointer}
.gx-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.gx-a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(243,240,234,.04);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,box-shadow .25s}
.gx-a i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.gx-a b{font:600 14px/1 var(--display)}
.gx-a span{font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.gx-a.on,.gx-a:hover,.gx-a:focus-visible{background:rgba(243,240,234,.09);box-shadow:inset 0 0 0 1px var(--c)}
.gx-a.k1{--c:var(--k1)}.gx-a.k2{--c:var(--k2)}.gx-a.k3{--c:var(--k3)}.gx-a.k5{--c:var(--k5)}.gx-a.k6{--c:var(--k6)}.gx-a.k7{--c:var(--k7)}
@media (max-width:599px){.gx-a span{display:none}}

.run-stage{position:relative;margin-top:clamp(28px,3.4vw,48px);border-radius:clamp(22px,2.4vw,36px);overflow:hidden;background:linear-gradient(180deg,#0B0B12,#07070A);box-shadow:inset 0 0 0 1px var(--line)}
.run-cv{display:block;width:100%;height:clamp(360px,40vw,500px);outline:none}
.run-stage.playing .run-cv{cursor:none;touch-action:none}
.run-cv:focus-visible{box-shadow:inset 0 0 0 2px var(--ti)}
.run-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:radial-gradient(60% 60% at 50% 50%,rgba(7,7,10,.35),rgba(7,7,10,.78))}
.run-ov[hidden]{display:none}
.run-t{font:700 clamp(34px,5vw,64px)/1 var(--display);letter-spacing:-.04em}
.run-s{font:400 16px/1.5 var(--text);color:var(--ink-2);max-width:42ch}
.run-best{min-height:1em;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--k1)}