/* ============ tokens ============ */
:root{
  --bg:#050505;
  --panel:#0b0d09;
  --ink:#f2f6ee;
  --dim:rgba(242,246,238,.48);
  --faint:rgba(242,246,238,.26);
  --neon:#9dff4a;
  --neon-soft:rgba(157,255,74,.55);
  --line:rgba(242,246,238,.09);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --display:'Space Mono',ui-monospace,monospace;
  --nav-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* unconditional, NOT html:focus-within — a tap on a nav link doesn't reliably
   leave focus on the anchor, so the offset was being skipped and every section
   landed with its heading tucked under the fixed nav */
html{scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--neon);color:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-family:var(--mono);letter-spacing:.08em}
.accent{color:var(--neon)}

/* ============ loader ============ */
body.loading { overflow: hidden; }

#loader{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  background:var(--bg);
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.done{opacity:0;visibility:hidden}

.loader-mark{position:relative;display:grid;place-items:center;width:104px;height:104px}

.loader-mark .ring{position:absolute;inset:0;width:104px;height:104px;fill:none;
  transform:rotate(-90deg);}
.ring-track{stroke:rgba(157,255,74,.13);stroke-width:2}
.ring-arc{
  stroke:var(--neon);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:70 206;               /* ~25% arc of 2πr (r=44) */
  transform-origin:50% 50%;
  animation:ring-spin 1.1s linear infinite;
  filter:drop-shadow(0 0 6px var(--neon-soft));
}
@keyframes ring-spin{to{transform:rotate(360deg)}}

.loader-mark .glyph{
  width:38px;height:38px;color:var(--neon);
  filter:drop-shadow(0 0 8px var(--neon-soft));
  animation:mark-pulse 1.6s ease-in-out infinite;
}
@keyframes mark-pulse{0%,100%{opacity:.55}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .ring-arc{animation:none;stroke-dasharray:none;stroke:var(--neon-soft)}
  .loader-mark .glyph{animation:none;opacity:1}
}

/* ============ entry sequence ============ */
/* Runs once when body gets .entered. Deliberately touches only opacity and
   transform — never the canvas geometry, which the particle repel depends on. */
@keyframes e-fade   {from{opacity:0}                          to{opacity:1}}
@keyframes e-rise   {from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none}}
@keyframes e-draw   {from{transform:scaleX(0)}                 to{transform:scaleX(1)}}
@keyframes e-boot{  /* matrix powers on: opacity only, canvas pixels untouched */
  0%{opacity:0} 55%{opacity:.55} 62%{opacity:.25} 70%{opacity:.8} 78%{opacity:.4} 100%{opacity:1}
}
/* Full revolution around the hero, offsets from its centre. The face measures
   x 33-53%, y 50-78% of the hero, so the orbit hugs the perimeter to clear it.
   The bottom leg rides low (+46vh) and STAYS low through 75% — rising any earlier
   clips the jaw on the way left (measured 15px clearance when 75% sat at +36vh).
   0% and 100% match so it loops one way; `linear` keeps the circuit even instead
   of easing at each waypoint. */
/* stacked/mobile path: a shallow arc across the lower half, under the figure
   (which occupies x 23.6-61%, y 11.4-49.3% there). `alternate` retraces it. */
@keyframes glow-drift-m{
  0%  {transform:translate(-50%,-50%) translate(-32vw, 10vh) scale(1);    opacity:.5}
  33% {transform:translate(-50%,-50%) translate(-14vw, 30vh) scale(1.1);  opacity:.85}
  66% {transform:translate(-50%,-50%) translate( 14vw, 30vh) scale(1.05); opacity:1}
  100%{transform:translate(-50%,-50%) translate( 32vw, 10vh) scale(1);    opacity:.6}
}
@keyframes glow-drift{
  0%    {transform:translate(-50%,-50%) translate(-36vw,-34vh) scale(1);    opacity:.55}
  12.5% {transform:translate(-50%,-50%) translate(  0vw,-37vh) scale(1.08); opacity:.8}
  25%   {transform:translate(-50%,-50%) translate( 36vw,-32vh) scale(1);    opacity:.7}
  37.5% {transform:translate(-50%,-50%) translate( 40vw,  0vh) scale(1.1);  opacity:.95}
  50%   {transform:translate(-50%,-50%) translate( 35vw, 34vh) scale(1.04); opacity:1}
  62.5% {transform:translate(-50%,-50%) translate(  8vw, 46vh) scale(1.12); opacity:.85}
  75%   {transform:translate(-50%,-50%) translate(-30vw, 44vh) scale(1);    opacity:.7}
  87.5% {transform:translate(-50%,-50%) translate(-40vw,  4vh) scale(1.08); opacity:.9}
  100%  {transform:translate(-50%,-50%) translate(-36vw,-34vh) scale(1);    opacity:.55}
}
@keyframes e-glitch{
  0%{opacity:0;transform:translateY(10px)}
  25%{opacity:1;transform:translateY(0) translateX(-3px)}
  32%{opacity:.45;transform:translateX(4px)}
  46%{opacity:1;transform:translateX(-2px)}
  55%{opacity:.7;transform:translateX(2px)}
  100%{opacity:1;transform:none}
}
@keyframes e-scan{
  0%{opacity:0;transform:translateY(-6vh)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(104vh)}
}

.scan{
  position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  box-shadow:0 0 18px 2px rgba(157,255,74,.45);
}

/* pre-state only while the loader still covers the page */
body.loading .mark,
body.loading .nav-links a,
body.loading .headline .hl,
body.loading .hero-foot,
body.loading .hero-glow,
body.loading #portrait{opacity:0}
body.loading .nav-line,
body.loading .headline .rule{transform:scaleX(0)}

body.entered .nav-line      {transform-origin:left;animation:e-draw .8s cubic-bezier(.2,.8,.2,1) .05s both}
body.entered .mark          {animation:e-fade .5s ease .18s both}
body.entered #portrait      {animation:e-boot 1.4s ease .2s both}
body.entered .hero-glow     {animation:e-fade 1.6s ease .35s both}
/* `backwards` fill so the 0% keyframe applies during the delay too — without it
   the element falls back to its base position for those 1.4s and visibly jumps */
body.entered .hero-glow::before{animation:glow-drift 60s linear 1.4s infinite backwards}
body.entered .scan          {animation:e-scan 1.15s cubic-bezier(.4,0,.3,1) .25s both}
body.entered .headline .hl  {animation:e-glitch .75s cubic-bezier(.2,.8,.2,1) .38s both}
body.entered .headline .hl:last-of-type{animation-delay:.5s}
body.entered .headline .rule{transform-origin:left;animation:e-draw .7s cubic-bezier(.2,.8,.2,1) .72s both}
body.entered .nav-links a   {animation:e-rise .5s cubic-bezier(.2,.8,.2,1) both}
body.entered .nav-links a:nth-child(1){animation-delay:.55s}
body.entered .nav-links a:nth-child(2){animation-delay:.61s}
body.entered .nav-links a:nth-child(3){animation-delay:.67s}
body.entered .nav-links a:nth-child(4){animation-delay:.73s}
body.entered .nav-links a:nth-child(5){animation-delay:.79s}
body.entered .hero-foot     {animation:e-rise .6s cubic-bezier(.2,.8,.2,1) .8s both}

@media (prefers-reduced-motion:reduce){
  body.loading .mark,body.loading .nav-links a,body.loading .headline .hl,
  body.loading .hero-foot,body.loading #portrait,body.loading .hero-glow{opacity:1}
  body.loading .nav-line,body.loading .headline .rule{transform:none}
  body.entered .nav-line,body.entered .mark,body.entered #portrait,body.entered .scan,
  body.entered .headline .hl,body.entered .headline .rule,
  body.entered .nav-links a,body.entered .hero-foot,
  body.entered .hero-glow{animation:none;opacity:1;transform:none}
  /* base transform already parks it top-left, clear of the face */
  body.entered .hero-glow::before{animation:none}
  .scan{display:none}
}

/* ============ corner-bracket links ============ */
.corner{position:relative;padding:.55em 1.1em;display:inline-block;transition:color .25s}
.corner::before,.corner::after{
  content:"";position:absolute;width:7px;height:7px;
  border:1px solid var(--faint);transition:border-color .25s,width .25s,height .25s;
}
.corner::before{top:0;left:0;border-width:1px 0 0 1px}
.corner::after{bottom:0;right:0;border-width:0 1px 1px 0}
.corner:hover{color:var(--neon)}
.corner:hover::before,.corner:hover::after{border-color:var(--neon);width:11px;height:11px}

/* ============ nav ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;gap:28px;padding:0 28px;
  background:linear-gradient(rgba(5,5,5,.85),rgba(5,5,5,.55) 70%,transparent);
  backdrop-filter:blur(6px);
}
.mark{color:var(--neon);display:flex}
.mark svg{filter:drop-shadow(0 0 6px rgba(157,255,74,.5))}
.nav-line{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.nav-line i{position:absolute;inset:0 auto 0 0;width:0;background:var(--neon);box-shadow:0 0 8px var(--neon-soft)}
.nav-links{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.06em}

/* ============ hero ============ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 24px) 48px 32px;
  border-bottom:1px solid var(--line);
}
#portrait{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* ambient travelling glow — sits BEHIND the canvas and animates only transform/opacity
   on its own compositor layer, so it never repaints or interferes with the dot matrix.
   Its path orbits the portrait and deliberately keeps clear of the face, which main.js
   places at x = w*0.46, roughly y 50-75% of the hero. */
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-glow::before{
  content:"";position:absolute;left:50%;top:50%;
  width:46vmin;height:46vmin;border-radius:50%;
  /* base transform matches the 0% keyframe, so the glow is NEVER centred on the
     face — not before the animation starts, not if it never runs at all */
  transform:translate(-50%,-50%) translate(-36vw,-34vh);
  background:radial-gradient(circle,rgba(157,255,74,.20),rgba(157,255,74,.07) 45%,transparent 70%);
  will-change:transform,opacity;
}
.headline{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:40px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,5.6vw,86px);
  letter-spacing:-.02em;line-height:1.05;white-space:nowrap;
  text-shadow:0 0 18px rgba(242,246,238,.35),0 0 60px rgba(157,255,74,.14);
}
.headline .rule{flex:1;height:1px;background:var(--faint);min-width:40px}
/* HUD + expanded meta are mobile/tablet only; desktop keeps the original hero */
.hud,.hero-meta{display:none}
.headline .hl-name{display:inline}
.headline .stop{display:none}
/* the chevron stands in for the old "↓" glyph on desktop, stacks under it on mobile.
   .corner is carried for the mobile bracket frame — neutralise it up here. */
.scroll-cue{display:inline-flex;align-items:center;gap:7px;padding:0}
.scroll-cue.corner::before,.scroll-cue.corner::after{display:none}
.scroll-cue .chev{
  width:11px;height:11px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.hero-foot{
  position:absolute;left:48px;right:48px;bottom:26px;z-index:2;
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--dim);letter-spacing:.18em;
}

/* ============ work ============ */
.work{
  display:grid;grid-template-columns:300px 1fr;
  border-bottom:1px solid var(--line);
}
.index{border-right:1px solid var(--line);padding:56px 32px}
.index .label{position:sticky;top:calc(var(--nav-h) + 40px);font-size:15px;font-weight:700;letter-spacing:.3em;color:var(--dim);margin-bottom:36px}
.index-list{list-style:none;position:sticky;top:calc(var(--nav-h) + 100px);display:grid;gap:18px}
.index-list a{
  font-size:13px;letter-spacing:.14em;color:var(--dim);line-height:1.5;
  display:grid;grid-template-columns:auto 1fr;gap:14px;transition:color .25s,text-shadow .25s;
}
.index-list .idx{color:var(--faint)}
.index-list a:hover{color:var(--ink)}
.index-list a.active{color:var(--neon);text-shadow:0 0 12px var(--neon-soft)}
.index-list a.active .idx{color:var(--neon)}

.projects{padding:56px 48px;display:grid;gap:120px;
  background:
    radial-gradient(rgba(242,246,238,.05) 1px,transparent 1.4px);
  background-size:26px 26px;
}
.project .shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px}
.project .shots img,.project .shots .shot-vid{
  width:100%;display:block;object-fit:cover;
  aspect-ratio:960/514;             /* locks every shot to the same height, video or image */
  border:1px solid var(--line);background:var(--panel);
  transition:border-color .3s,transform .3s;
}
.project .shots img:hover,.project .shots .shot-vid:hover{border-color:rgba(157,255,74,.4);transform:translateY(-3px)}
.title-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.title-row h2{font-family:var(--display);font-size:clamp(20px,2.2vw,30px);letter-spacing:.02em}
.title-row h2 a{border-bottom:1px solid var(--dim);transition:color .25s,border-color .25s,text-shadow .25s}
.title-row h2 a:hover{color:var(--neon);border-color:var(--neon);text-shadow:0 0 14px var(--neon-soft)}
.title-row .meta{font-size:12px;color:var(--dim);letter-spacing:.2em;white-space:nowrap}
.desc{max-width:56ch;color:var(--dim);margin-bottom:22px}
.visit{font-size:12px;letter-spacing:.2em;color:var(--ink)}

/* ============ about / capabilities / thinking ============ */
/* same 300px index column + dotted field as .work, so the page reads as one system */
.sec{display:grid;grid-template-columns:300px 1fr;border-bottom:1px solid var(--line)}
.sec-head{border-right:1px solid var(--line);padding:56px 32px}
.sec-head .label{position:sticky;top:calc(var(--nav-h) + 40px);font-size:15px;font-weight:700;letter-spacing:.3em;color:var(--dim)}
.sec-body{
  padding:56px 48px;
  background:radial-gradient(rgba(242,246,238,.05) 1px,transparent 1.4px);
  background-size:26px 26px;
}

/* about: portrait + text side by side.
   minmax(0,…) on BOTH tracks: a bare `1fr` floors at min-content, which pushed the
   grid past its container once the 360px portrait column was added in. */
.about-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:56px;align-items:start}
.portrait{position:relative;order:2}
.portrait img{
  width:100%;height:auto;display:block;
  /* real cutout (transparent PNG/WebP, background removed) — no mask needed,
     the page's own --bg shows through and matches either theme automatically */
  filter:saturate(.94) contrast(1.05) drop-shadow(0 24px 40px rgba(0,0,0,.35));
}
.portrait figcaption{
  margin-top:12px;font-size:11px;letter-spacing:.2em;color:var(--faint);
}

.lede{
  font-family:var(--display);font-size:clamp(19px,2.1vw,28px);line-height:1.35;
  letter-spacing:-.01em;max-width:30ch;margin-bottom:28px;
  text-shadow:0 0 22px rgba(242,246,238,.18);
}
.prose{max-width:70ch;color:var(--dim);margin-bottom:16px}

.facts{margin-top:40px;display:grid;gap:10px;font-size:12px;letter-spacing:.14em}
.fact{display:flex;gap:18px}
.fact dt{color:var(--faint);min-width:86px}
.fact dd{color:var(--ink)}
.fact dd.accent{color:var(--neon)}   /* beats `.fact dd`, which outranks bare .accent */

/* capabilities */
.caps{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.tech{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.tech-label{font-size:12px;letter-spacing:.3em;color:var(--faint);margin-bottom:18px}
.tech-list{
  font-size:14px;letter-spacing:.06em;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:8px;
}
.tech-list i{font-style:normal}
.cap{
  background:var(--bg);padding:26px 24px 28px;transition:background .3s;
  display:grid;grid-template-columns:1fr auto;column-gap:24px;
}
.cap .idx,.cap h3,.cap p{grid-column:1}
.cap:hover{background:var(--panel)}
.cap .idx{display:block;font-size:11px;color:var(--faint);letter-spacing:.2em;margin-bottom:14px;transition:color .3s}
.cap-ic{
  grid-column:2;grid-row:1 / span 3;align-self:center;
  display:block;width:104px;height:104px;flex:none;
  fill:none;stroke:var(--dim);stroke-width:1.1;   /* thinner still: it scales up with the box */
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .3s,filter .3s,transform .4s cubic-bezier(.2,.8,.2,1);
}
.cap:hover .cap-ic{
  stroke:var(--neon);transform:translateY(-2px);
  filter:drop-shadow(0 0 7px var(--neon-soft));
}
.cap:hover .idx{color:var(--neon)}
.cap h3{font-size:14px;letter-spacing:.16em;margin-bottom:10px;font-weight:500}
.cap p{font-size:14px;color:var(--dim);max-width:34ch}

/* thinking */
.thinking-body{display:flex;gap:48px;align-items:flex-start}
.tenets{list-style:none;display:grid;gap:2px;counter-reset:t;max-width:680px;flex:1}

/* ---- stack diagram: animated terminal + isometric layer stack ---- */
.stack-diagram{
  flex:1;min-width:0;max-width:620px;
  position:sticky;top:calc(var(--nav-h) + 40px);
  display:flex;flex-direction:column;gap:18px;
}
.term{
  border:1px solid var(--line);background:var(--panel);
  font-size:12px;line-height:1.7;
}
.term-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.term-bar i{width:8px;height:8px;border-radius:50%;background:var(--faint);display:block}
.term-code{
  margin:0;padding:14px 16px;height:172px;color:var(--dim);
  white-space:pre-wrap;word-break:break-word;overflow:hidden;
}
.term-code .kw{color:var(--neon)}
.term-code .cm{color:var(--faint)}
.term-code .cur{color:var(--neon);animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

.stack-svg{width:100%;height:auto;overflow:visible}
.stack-svg .face{stroke:var(--line);stroke-width:1}
.stack-svg .face-t{fill:var(--panel)}
.stack-svg .face-l{fill:#000}
.stack-svg .face-r{fill:#050604}
.stack-svg .layer-top .face-t{fill:var(--neon);opacity:.16}
.stack-svg .layer-top .face-l{fill:rgba(157,255,74,.06)}
.stack-svg .layer-top .face-r{fill:rgba(157,255,74,.03)}
.stack-svg .layer-top .face{stroke:var(--neon-soft);animation:layer-pulse 2.6s ease-in-out infinite}
@keyframes layer-pulse{0%,100%{stroke-opacity:.55}50%{stroke-opacity:1}}
.stack-svg .plane{fill:none;stroke:var(--neon);stroke-width:1.4;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px var(--neon-soft));animation:plane-float 2.6s ease-in-out infinite}
@keyframes plane-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.stack-svg .wire{fill:none;stroke:var(--faint);stroke-width:1;stroke-dasharray:2 4}
.stack-svg .node{fill:var(--neon);animation:node-pulse 2.2s ease-in-out infinite}
@keyframes node-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.stack-svg .lbl{fill:var(--ink);font-size:11px;letter-spacing:.12em}
.stack-svg .lbl-sub{fill:var(--faint);font-size:9px;letter-spacing:.02em}

@media (prefers-reduced-motion:reduce){
  .stack-svg .layer-top .face,.stack-svg .plane,.stack-svg .node{animation:none}
  .term-code .cur{animation:none}
}
/* tablet / small laptop: the 300px sidebar + 360px portrait leave too little for
   the body copy at these widths, so both give ground before anything stacks */
@media (max-width:1150px){
  .stack-diagram{display:none}
  .tenets{max-width:920px}
  .work,.sec{grid-template-columns:260px 1fr}
  .index{padding:56px 26px}
  .sec-head{padding:56px 26px}
  .sec-body{padding:56px 32px}
  .about-body{grid-template-columns:minmax(0,1fr) minmax(0,270px);gap:36px}
}
.tenet{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;
  padding:26px 0;border-top:1px solid var(--line)}
.tenet:last-child{border-bottom:1px solid var(--line)}
.tenet .num{
  font-family:var(--display);font-size:clamp(30px,3.4vw,46px);line-height:.9;
  color:transparent;-webkit-text-stroke:1px var(--faint);transition:-webkit-text-stroke-color .3s,color .3s;
}
.tenet:hover .num{-webkit-text-stroke-color:var(--neon);color:rgba(157,255,74,.08)}
.tenet h3{font-size:14px;letter-spacing:.16em;margin-bottom:8px;font-weight:500}
.tenet p{color:var(--dim);max-width:56ch}

/* ============ contact / footer ============ */
.contact{
  position:relative;padding:110px 48px 40px;overflow:hidden;
}
/* two-column layout: headline+cta on the left, contact info stacked on the right */
.contact-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:64px;
  margin-bottom:70px;
}
.contact-left{padding-right:16px}
.contact-right{
  position:relative;padding-left:64px;border-left:1px solid var(--line);
  display:grid;gap:56px;
}
.contact-right::before{
  content:"+";position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  color:var(--faint);font-size:14px;line-height:1;
}
.contact-headline{
  font-family:var(--display);font-weight:700;font-size:clamp(34px,4.4vw,56px);
  line-height:1.15;letter-spacing:-.01em;
  text-shadow:0 0 22px rgba(242,246,238,.18);
}
.contact-sub{margin-top:20px;color:var(--dim);font-size:14px;line-height:1.7}

/* CTA bar */
.cta-bar{
  margin-top:44px;display:flex;align-items:center;gap:28px;
  border:1px solid var(--neon);padding:22px 32px;
  background:rgba(157,255,74,.045);box-shadow:0 0 60px -12px var(--neon-soft);
  transition:background .25s;
}
.cta-bar:hover{background:rgba(157,255,74,.08)}
.cta-bar.corner::before,.cta-bar.corner::after{width:12px;height:12px}
.cta-bar:hover.corner::before,.cta-bar:hover.corner::after{width:16px;height:16px;border-color:var(--neon)}
.cta-bar-icon{
  flex:none;width:64px;height:64px;display:grid;place-items:center;
  border:1px solid var(--neon);color:var(--neon);
}
.cta-bar-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cta-bar-text{display:flex;flex-direction:column;gap:6px}
.cta-eyebrow{font-size:12px;letter-spacing:.16em;color:var(--dim)}
.cta-big{font-size:20px;font-weight:700;letter-spacing:.08em;color:var(--neon);text-shadow:0 0 16px var(--neon-soft)}

.col-head{font-size:13px;letter-spacing:.2em;color:var(--ink);font-weight:700;margin-bottom:26px}

.contact-rows{display:grid;font-size:13px}
.contact-rows .row{
  display:flex;align-items:center;gap:18px;padding:16px 0;
  border-bottom:1px solid var(--line);
}
.contact-rows .row:first-child{border-top:1px solid var(--line)}
.icon-box{
  flex:none;width:52px;height:52px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--neon);transition:border-color .25s;
}
.icon-box svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-rows .row:hover .icon-box{border-color:var(--neon)}
.row-text{display:flex;flex-direction:column;gap:4px}
.contact-rows .key{color:var(--faint);font-size:11px;letter-spacing:.1em}
.contact-rows a{color:var(--ink);border-bottom:1px solid transparent;transition:color .25s;word-break:break-word}
.contact-rows a:hover{color:var(--neon)}
.foot-base{
  position:relative;z-index:2;display:flex;justify-content:flex-start;
  font-size:11px;color:var(--faint);letter-spacing:.14em;
}
.ghost{
  position:absolute;right:-40px;bottom:-70px;width:340px;height:340px;
  color:rgba(242,246,238,.07);pointer-events:none;
}

/* ============ reveal ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ============ responsive ============ */
@media (max-width:900px){
  /* ---- stacked hero: HUD chrome, portrait band, headline block, scroll cue ---- */
  .hero{padding:calc(var(--nav-h) + 14px) 22px 26px;justify-content:flex-start}

  .hud{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;z-index:3;
    font-size:10px;letter-spacing:.14em;line-height:1.5;color:var(--dim);
    padding:9px 11px;
  }
  .hud.corner::before,.hud.corner::after{width:9px;height:9px;border-color:var(--faint)}
  .hud-id{top:calc(var(--nav-h) + 22px);left:22px}
  /* sits low beside the portrait; must stay clear of the headline at ~51% */
  .hud-avail{top:39%;right:22px;text-align:right}
  .hud-sub{color:var(--faint)}

  .headline{
    flex-direction:column;align-items:flex-start;gap:0;white-space:normal;
    /* sits just under the portrait band main.js draws — KEEP 50 IN SYNC with the
       `bottom` fraction in imagePoints() */
    margin-top:calc(50svh - var(--nav-h) - 14px + 10px);
  }
  .headline .rule{display:none}
  .headline .hl:first-of-type{
    font-family:var(--mono);font-size:15px;font-weight:400;
    letter-spacing:.2em;color:var(--neon);text-transform:uppercase;
    text-shadow:0 0 14px var(--neon-soft);margin-bottom:10px;
  }
  .headline .hl:first-of-type::after{content:","}
  .headline .hl-name{
    display:flex;flex-direction:column;align-items:flex-start;
    font-size:clamp(40px,12.5vw,74px);line-height:1.02;text-transform:uppercase;
  }
  .headline .stop{display:inline;text-shadow:0 0 18px var(--neon-soft)}

  .hero-meta{display:block;margin-top:22px}
  .dash-rule{
    display:block;width:62px;height:1px;margin-bottom:18px;
    background:repeating-linear-gradient(90deg,var(--faint) 0 5px,transparent 5px 10px);
  }
  .hm-role{font-size:14px;letter-spacing:.16em;margin-bottom:6px;text-shadow:0 0 14px var(--neon-soft)}
  .hm-disc{font-size:14px;letter-spacing:.16em;color:var(--dim)}
  .hm-blurb{margin-top:20px;font-size:14px;line-height:1.75;color:var(--dim);max-width:34ch}
  .hm-blurb .cur{font-style:normal;color:var(--neon);animation:blink 1s step-end infinite}

  /* cue leaves the absolute corner and rides the end of the flow, so a tall
     text block pushes the hero taller instead of colliding with it */
  .hero-foot{
    position:static;left:auto;right:auto;bottom:auto;
    margin-top:auto;padding-top:30px;justify-content:center;
  }
  /* direct child only — a plain descendant selector also caught .scroll-word,
     which is the first child of .scroll-cue, and hid the label */
  .hero-foot > span:first-child{display:none}
  .scroll-cue{
    flex-direction:column;gap:9px;padding:10px 18px;
    font-size:11px;letter-spacing:.28em;
  }
  .scroll-cue.corner::before,.scroll-cue.corner::after{display:block;width:9px;height:9px;border-color:var(--faint)}
  .scroll-cue .chev{width:15px;height:15px;stroke-width:1.6}
  /* Glow, stacked-layout variant. The figure measures x 23.6-61%, y 11.4-49.3%
     here (upper centre) and the side channels are too narrow for the desktop
     perimeter orbit, so a smaller blob traces a shallow arc through the lower
     half, well under the face. The base transform matches the 0% keyframe so it
     never flashes centre-screen during the animation delay. */
  .hero-glow::before{
    width:38vmin;height:38vmin;
    transform:translate(-50%,-50%) translate(-32vw,10vh);
  }
  body.entered .hero-glow::before{animation:glow-drift-m 34s ease-in-out 1.4s infinite alternate backwards}
  /* minmax(0,…) not 1fr: a bare 1fr floors at min-content, so the 104px
     capability icon dragged the whole section wider than the screen */
  .work{grid-template-columns:minmax(0,1fr)}
  .index{border-right:0;border-bottom:1px solid var(--line);padding:32px 22px}
  .index .label{position:static;margin-bottom:0}
  /* the stacked layout puts each project title right above its own card, so the
     sidebar index just repeats itself here — keep the label as the section head */
  .index-list{display:none}
  .projects{padding:40px 22px;gap:80px}
  .project .shots{grid-template-columns:1fr}
  .sec{grid-template-columns:minmax(0,1fr)}
  .sec-head{border-right:0;border-bottom:1px solid var(--line);padding:32px 22px}
  .sec-head .label{position:static}
  .sec-body{padding:40px 22px}
  .caps{grid-template-columns:minmax(0,1fr)}
  .cap{grid-template-columns:minmax(0,1fr) auto}
  .about-body{grid-template-columns:minmax(0,1fr);gap:32px}
  .portrait{order:0;max-width:320px}
  .tenet{grid-template-columns:56px 1fr;gap:14px}
  .contact{padding:70px 22px 30px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .contact-left{padding-right:0}
  .contact-right{padding-left:0;border-left:0;gap:40px}
  .contact-right::before{display:none}
  .cta-bar{flex-direction:column;align-items:flex-start;gap:18px}
  .nav{padding:0 18px;gap:14px}
}

/* ---- hamburger (hidden on desktop, drives the drawer below 900px) ---- */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 9px;flex:none;
  background:none;border:1px solid var(--line);cursor:pointer;
  transition:border-color .25s;
}
.nav-toggle:hover{border-color:var(--neon)}
.nav-toggle .bar{
  display:block;height:1.5px;width:100%;background:var(--ink);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
}
.nav-toggle[aria-expanded="true"]{border-color:var(--neon)}
.nav-toggle[aria-expanded="true"] .bar{background:var(--neon)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* phone + tablet: five links never fit a narrow bar, so they move into a drawer */
@media (max-width:900px){
  .nav{gap:14px;padding:0 18px}
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(5,5,5,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:6px 18px 14px;
    /* transform+opacity only, so the drawer stays on its own compositor layer */
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .24s ease,visibility .3s;
  }
  body.nav-open .nav-links{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav-links a{
    padding:15px 4px;font-size:14px;letter-spacing:.14em;
    border-bottom:1px solid var(--line);
  }
  .nav-links a:last-child{border-bottom:0}
  /* the corner brackets are a hover affordance; pointless in a touch drawer */
  .nav-links a.corner::before,.nav-links a.corner::after{display:none}
}

/* small phones: the wide-tracked labels and the big capability icon are sized
   for desktop and stop fitting down here */
@media (max-width:600px){
  .cap-ic{width:64px;height:64px}
  .cap{column-gap:16px;padding:22px 18px 24px}
  .index .label,.sec-head .label{font-size:13px;letter-spacing:.18em}
  .tech-label{letter-spacing:.18em}
  /* "[WORKING IN]" needs 107px but the track was pinned to 86px */
  .fact{flex-wrap:wrap;gap:2px 14px}
  .fact dt{min-width:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}