/* ============================================================
   Parth Kothawade — cinematic portfolio
   Image-first. Dark. Brass. Editorial. Visible by default.
   ============================================================ */
:root{
  --bg:#08090B; --bg2:#0D0F12; --panel:#14161A; --panel2:#191C21;
  --ink:#EAE5D9; --ink-soft:#CBC6BA; --mut:#8A8E96;
  --line:rgba(234,229,217,.10); --line2:rgba(234,229,217,.18);
  --brass:#C7924F; --brass-l:#E0B57C; --brass-d:#A8773A; --green:#82CF90;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace; --script:'Dancing Script',cursive;
  --maxw:1320px; --gut:clamp(22px,5vw,80px);
  --ease:cubic-bezier(.16,1,.3,1); --ease2:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(199,146,79,.3)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
img{display:block;max-width:100%}

/* entrance (pure CSS — no JS gating) */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.a1,.a2,.a3,.a4,.a5,.a6{opacity:0;animation:rise 1s var(--ease) forwards}
.a1{animation-delay:.15s}.a2{animation-delay:.45s}.a3{animation-delay:.62s}.a4{animation-delay:.9s}.a5{animation-delay:1.1s}.a6{animation-delay:1.3s}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);transition:padding .3s,background .3s}
.nav.scrolled{padding:14px var(--gut);background:rgba(8,9,11,.7);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;flex-direction:column;gap:2px;line-height:1}
.bn{font-weight:600;font-size:15px;letter-spacing:.32em}
.bs{font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut)}
.links{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.links a{font-size:13.5px;color:var(--ink-soft);transition:color .3s}
.links a:hover{color:var(--ink)}
.links a:not(.cta){position:relative}
.links a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);box-shadow:0 0 9px rgba(199,146,79,.7)}
.links a:not(.cta):hover::after{transform:scaleX(1)}
.cta{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line2);border-radius:2px;padding:11px 19px;color:var(--ink) !important;font-size:12.5px;letter-spacing:.05em;transition:.3s var(--ease)}
.cta i{width:5px;height:5px;border-radius:50%;background:var(--brass);transition:.3s}
.cta:hover{transform:translateY(-2px);border-color:var(--brass)}
.cta:hover i{transform:scale(1.6)}
@media(max-width:760px){.links a:not(.cta){display:none}}

/* HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-stage{position:absolute;inset:0;will-change:transform;transform-origin:center}
.hero-stage img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}

/* live "studio display" on the device screen — positioned by JS cover-geometry */
.hero-screen{position:absolute;left:0;top:0;width:0;height:0;z-index:2;border-radius:5px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%, #efe6d2 0%, #e4d8bf 60%, #d8c8a8 100%);
  box-shadow:inset 0 0 22px rgba(120,84,40,.35), inset 0 2px 6px rgba(255,255,255,.4);
  opacity:0;transition:opacity .9s ease .3s}
.hero-screen.lit{opacity:1;animation:scrFlick 6s infinite}
@keyframes scrFlick{0%,96%,100%{filter:brightness(1)}97%{filter:brightness(.93)}98%{filter:brightness(1.04)}}
.scr-glass{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(80,52,20,.06) 0 2px, rgba(255,255,255,.02) 2px 4px);
  box-shadow:inset 0 0 30px rgba(120,80,40,.22)}
.scr-feed{position:absolute;inset:0;z-index:2;padding:9% 10%;font-family:var(--mono);
  color:#2c1d0c;line-height:1.65;display:flex;flex-direction:column;justify-content:center;
  text-shadow:0 1px 0 rgba(255,255,255,.35);font-size:13px}
.scr-h{font-size:.74em;letter-spacing:.14em;text-transform:uppercase;color:#8a5e28;
  margin-bottom:1em;display:flex;align-items:center;gap:.55em;font-weight:600}
.scr-h .d{width:.55em;height:.55em;border-radius:50%;background:#3f9a4f;
  box-shadow:0 0 6px #4caf5a;animation:scrPulse 1.6s ease-in-out infinite}
@keyframes scrPulse{0%,100%{opacity:1}50%{opacity:.35}}
.scr-row{font-size:.92em;white-space:nowrap;overflow:hidden;color:#2a1c0b;min-height:1.6em}
.scr-row .nm{color:#1d1407}
.scr-row .vl{color:#9a4a18;font-weight:600}
.scr-row .dots{color:#a98c5e}
.scr-cur{display:inline-block;width:.55em;height:1.05em;background:#2c1d0c;
  vertical-align:-2px;margin-left:1px;animation:scrBlink 1s steps(1) infinite}
@keyframes scrBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
.scr-live{position:absolute;top:7%;right:8%;z-index:4;font-family:var(--mono);font-size:clamp(7px,.8vw,10px);
  letter-spacing:.12em;text-transform:uppercase;color:#3f9a4f;text-shadow:0 0 6px rgba(76,175,90,.7);
  animation:scrPulse 1.4s ease-in-out infinite}
.scr-reflect{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(118deg,transparent 42%,rgba(255,244,222,.14) 50%,transparent 58%);
  transform:translateX(-100%);animation:scrReflect 7s ease-in-out infinite}
@keyframes scrReflect{0%,32%{transform:translateX(-100%)}66%,100%{transform:translateX(100%)}}
@media(max-width:600px){.hero-screen{display:none}}
/* device glow halo — pulls the eye to the machine */
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(38% 48% at 63% 52%, rgba(199,146,79,.20), transparent 70%);
  animation:heroGlow 5.5s ease-in-out infinite}
@keyframes heroGlow{0%,100%{opacity:.65}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.scr-reflect,.hero-glow,.scr-live{animation:none}}
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg, rgba(7,8,10,.95) 0%, rgba(7,8,10,.78) 34%, rgba(7,8,10,.32) 58%, rgba(7,8,10,0) 82%),
  linear-gradient(0deg, rgba(7,8,10,.7) 0%, transparent 38%)}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;padding:120px var(--gut) 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);margin-bottom:22px}
.h-title{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.2vw,76px);line-height:1.04;letter-spacing:-.02em;font-optical-sizing:auto;max-width:600px}
.h-title em{font-style:italic}
.h-sub{margin-top:26px;max-width:540px;font-size:clamp(15.5px,1.2vw,18px);line-height:1.7;color:var(--ink-soft)}
.h-stats{display:flex;gap:clamp(24px,3vw,48px);margin-top:40px;flex-wrap:wrap}
.st b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1}
.st b .am{color:var(--brass)}
.st span{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);line-height:1.5}
.h-now{display:inline-flex;align-items:center;gap:9px;margin-top:42px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:30px;padding:8px 15px;background:rgba(13,15,18,.5);backdrop-filter:blur(8px)}
.h-now b{color:var(--ink);font-weight:500}
.h-now .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(130,207,144,.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue i{width:1px;height:34px;background:linear-gradient(var(--brass),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* SECTION shell */
.band{position:relative;z-index:2;padding:clamp(70px,9vw,120px) 0;border-top:1px solid var(--line);background:var(--bg)}
.sec-no{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.sec-no::before{content:"";width:18px;height:1px;background:var(--brass)}
.sec-title{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.06;letter-spacing:-.01em;max-width:760px}
.sec-title.sm{font-size:clamp(26px,2.4vw,34px)}
.sec-lead{margin-top:14px;color:var(--mut);font-size:16px;line-height:1.7;max-width:600px}
.sec-head{margin-bottom:46px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:gap .3s var(--ease),color .3s}
.link-arrow:hover{gap:14px;color:var(--brass)}

/* WORK — framed editorial gallery */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.tile{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--panel);
  cursor:pointer;text-align:left;font:inherit;color:inherit;appearance:none;
  transition:transform .5s var(--ease),box-shadow .5s,border-color .3s;will-change:transform}
.tile:nth-child(1){grid-column:span 7}.tile:nth-child(2){grid-column:span 5}
.tile:nth-child(3){grid-column:span 5}.tile:nth-child(4){grid-column:span 7}
.tile:nth-child(5){grid-column:span 7}.tile:nth-child(6){grid-column:span 5}
.tile:hover{transform:translateY(-8px);border-color:var(--line2);box-shadow:0 46px 90px -38px rgba(0,0,0,1)}
.tile:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.tile-shot{position:relative;height:240px;overflow:hidden;flex:0 0 auto}
.tile-shot.site img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:object-position 3s var(--ease),transform .6s var(--ease)}
.tile:hover .tile-shot.site img{object-position:bottom center}
.tile-shot.site::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--panel));pointer-events:none}
.tile-shot.app{display:grid;place-items:center;background:radial-gradient(120% 90% at 70% -12%,rgba(199,146,79,.16),transparent 55%),linear-gradient(160deg,#1b1e24,#0b0d10)}
.phone{position:relative;width:120px;height:216px;border-radius:22px;background:#0e1014;border:4px solid #23262d;overflow:hidden;
  box-shadow:0 28px 46px -20px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.05);transition:transform .5s var(--ease)}
.tile:hover .phone{transform:translateY(-5px) scale(1.03)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone-notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:38px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);z-index:2}
.tile-badge{position:absolute;left:16px;top:16px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);border:1px solid var(--line2);border-radius:20px;padding:5px 11px;background:rgba(8,9,11,.45)}
.tile-foot{padding:20px 22px;display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line)}
.tile-c{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.tile-t{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.9vw,26px);line-height:1.05;letter-spacing:-.01em}
.tile-go{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px;margin-top:2px}
.tile-go i{color:var(--brass);transition:transform .3s var(--ease);font-style:normal}
.tile:hover .tile-go{color:var(--ink)}.tile:hover .tile-go i{transform:translateX(6px)}
@media(max-width:900px){.work-grid{grid-template-columns:1fr;gap:14px}.tile{grid-column:auto !important}}

/* MY BRAIN — how I think (blueprint flow) */
#brain{position:relative;overflow:hidden}
#brain::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(199,146,79,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(199,146,79,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 28% 18%,#000,transparent 78%);mask-image:radial-gradient(circle at 28% 18%,#000,transparent 78%)}
#brain .wrap{position:relative;z-index:1}
.brain-flow{position:relative;max-width:760px;margin:0 auto;padding-left:6px}
.brain-flow::before{content:"";position:absolute;left:19px;top:18px;bottom:24px;width:2px;
  background:linear-gradient(var(--brass),rgba(199,146,79,.12));box-shadow:0 0 12px rgba(199,146,79,.35)}
.bf-step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:22px;align-items:flex-start;padding:0 0 26px}
.bf-node{width:40px;height:40px;border-radius:50%;border:2px solid var(--brass);background:var(--bg);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--brass);
  box-shadow:0 0 0 6px var(--bg),0 0 18px rgba(199,146,79,.45);position:relative;z-index:1;transition:.3s var(--ease)}
.bf-step:hover .bf-node{transform:scale(1.08);box-shadow:0 0 0 6px var(--bg),0 0 30px rgba(199,146,79,.8)}
.bf-card{padding-top:5px}
.bf-card b{display:block;font-family:var(--serif);font-weight:500;font-size:22px;margin-bottom:6px}
.bf-card p{font-size:14px;color:var(--ink-soft);line-height:1.6;max-width:440px}

/* ABOUT — story timeline */
.about-story{display:flex;flex-direction:column;gap:18px;position:relative;padding-left:4px}
.about-story::before{content:"";position:absolute;left:9px;top:7px;bottom:7px;width:1px;background:linear-gradient(var(--brass),transparent)}
.as-step{display:grid;grid-template-columns:16px 1fr;gap:13px;align-items:flex-start;position:relative}
.as-dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--brass);margin-top:5px;background:var(--bg);box-shadow:0 0 10px rgba(199,146,79,.5)}
.as-step b{display:block;font-family:var(--serif);font-weight:500;font-size:16px;color:var(--ink)}
.as-step p{font-size:12.5px;color:var(--mut);line-height:1.5;margin-top:2px}
@media(max-width:980px){.about-story{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:18px 30px}.about-story::before{display:none}.as-step{min-width:200px;flex:1}}

/* THE BUILDER — documentary timeline */
#builder{position:relative;overflow:hidden}
#builder::before{content:"";position:absolute;inset:0;z-index:0;background:url('../assets/builder-scene.jpg') center/cover no-repeat;opacity:.24;filter:contrast(1.05)}
#builder::after{content:"";position:absolute;inset:0;z-index:0;background:
  linear-gradient(90deg,rgba(8,9,11,.82),rgba(8,9,11,.48) 58%,rgba(8,9,11,.72)),
  linear-gradient(180deg,transparent 50%,rgba(255,168,82,.10))}
.builder-term{max-width:760px;margin:36px auto 0;background:#0A0B0D;border:1px solid var(--line2);border-radius:12px;
  overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.bt-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--mut)}
.bt-bar i{width:9px;height:9px;border-radius:50%;background:rgba(234,229,217,.16)}
.bt-bar i:nth-child(1){background:#e0655a}.bt-bar i:nth-child(2){background:#dbab4e}.bt-bar i:nth-child(3){background:#63b365}
.bt-bar span{margin-left:6px}
.bt-bar .bt-live{margin-left:auto;color:var(--green)}
.bt-log{margin:0;padding:16px 16px 18px;font-family:var(--mono);font-size:12px;line-height:1.9;color:#bcd6c0;white-space:pre-wrap;min-height:180px}
.bt-log .ok{color:var(--green)}.bt-log .cmd{color:var(--ink-soft)}.bt-log .dim{color:var(--mut)}
#builder .wrap{position:relative;z-index:1}
.builder-line{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:30px}
.builder-step{display:grid;grid-template-columns:160px 1fr;gap:26px;align-items:center}
.bt-img{width:160px;height:104px;border-radius:12px;background-size:cover;background-position:center;
  border:1px solid var(--line2);box-shadow:0 20px 44px -24px rgba(0,0,0,.95);filter:saturate(.95) contrast(1.05);
  transition:transform .5s var(--ease)}
.builder-step:hover .bt-img{transform:scale(1.04)}
.bt-txt .bt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--brass)}
.bt-txt p{font-family:var(--serif);font-size:clamp(17px,1.9vw,22px);color:var(--ink);line-height:1.45;margin-top:6px}
@media(max-width:600px){.builder-step{grid-template-columns:104px 1fr;gap:16px}.bt-img{width:104px;height:74px}}

/* MANIFESTO */
.manifesto{position:relative;min-height:62svh;display:flex;align-items:center;overflow:hidden;z-index:2}
.man-bg{position:absolute;inset:0;z-index:0}
.man-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.man-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,8,10,.92),rgba(7,8,10,.55) 55%,rgba(7,8,10,.2))}
.man-inner{position:relative;z-index:2}
.man-quote{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(24px,3.6vw,46px);line-height:1.25;letter-spacing:-.01em;max-width:880px}
.man-quote em{color:var(--brass);font-style:italic}

/* METHOD / TERMINAL */
.method-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,5vw,70px);align-items:center}
.terminal{background:#0A0B0D;border:1px solid var(--line2);border-radius:12px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.t-bar{display:flex;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.t-bar i{width:10px;height:10px;border-radius:50%;background:rgba(234,229,217,.16)}
.t-body{padding:18px 18px 8px;min-height:200px;font-family:var(--mono);font-size:12.5px;line-height:1.75}
.t-q{color:var(--ink);margin-bottom:12px}
.t-a{white-space:pre-wrap;color:#9aa0a0;font-family:var(--mono);font-size:12.5px;line-height:1.75;margin:0}
.t-chips{display:flex;flex-direction:column;gap:8px;padding:6px 18px 14px}
.t-chip{text-align:left;font-family:var(--mono);font-size:11.5px;color:#c0bbae;border:1px solid var(--line);border-radius:9px;padding:10px 13px;cursor:pointer;transition:.2s}
.t-chip::before{content:"> ";color:var(--brass)}
.t-chip:hover{border-color:var(--brass);color:var(--brass)}
.t-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--mut)}
.caret{display:inline-block;width:7px;height:13px;background:var(--green);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.rag{color:var(--green);letter-spacing:.12em;text-transform:uppercase}
@media(max-width:840px){.method-grid{grid-template-columns:1fr;gap:30px}}

/* ===== Knowledge engine (Ask my work) ===== */
.ke{background:#0A0B0D;border:1px solid var(--line2);border-radius:12px;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);display:flex;flex-direction:column;min-height:430px}
.ke-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.ke-bar i{width:10px;height:10px;border-radius:50%;background:rgba(234,229,217,.16)}
.ke-bar i:nth-child(1){background:#e0655a}.ke-bar i:nth-child(2){background:#dbab4e}.ke-bar i:nth-child(3){background:#63b365}
.ke-title{font-family:var(--mono);font-size:11px;color:var(--mut);margin-left:8px}
.ke-rag{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:6px}
.ke-rag b{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:scrPulse 1.6s ease-in-out infinite}
.ke-body{flex:1;padding:18px;overflow-y:auto;max-height:54vh;font-family:var(--mono);font-size:12.5px;line-height:1.7}
.ke-body::-webkit-scrollbar{width:8px}.ke-body::-webkit-scrollbar-thumb{background:rgba(234,229,217,.14);border-radius:8px}
.ke-intro{color:var(--mut);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.ke-list{display:flex;flex-direction:column;gap:8px}
.ke-rec{display:flex;align-items:center;gap:12px;text-align:left;background:rgba(255,255,255,.02);border:1px solid var(--line);
  border-radius:9px;padding:12px 14px;cursor:pointer;color:var(--ink-soft);font:inherit;transition:.2s var(--ease)}
.ke-rec:hover{border-color:var(--brass);color:var(--ink);background:rgba(199,146,79,.08);transform:translateX(3px)}
.ke-num{color:var(--brass);font-size:11px;flex:0 0 auto}
.ke-rq{flex:1}
.ke-rcat{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.ke-back{background:none;border:none;color:var(--brass);font-family:var(--mono);font-size:11px;cursor:pointer;padding:0 0 12px;letter-spacing:.04em}
.ke-back:hover{color:var(--brass-l)}
.ke-rethead{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.ke-rethead span{color:var(--brass)}
.ke-q{color:var(--ink);margin-bottom:12px}
.ke-log{margin-bottom:12px}
.ke-log .kl{color:var(--mut);font-size:11.5px;line-height:1.8}
.ke-log .kl.done::before{content:"✓ ";color:var(--green)}
.ke-a{white-space:pre-wrap;color:#cdd2cf;line-height:1.8;margin-bottom:14px}
.ke-code{background:#07080a;border:1px solid var(--line);border-radius:9px;padding:14px 14px 14px;position:relative;
  white-space:pre;overflow-x:auto;color:#bcd6c0;font-size:11.5px;line-height:1.65;margin:0 0 14px}
.ke-codetag{position:absolute;top:8px;right:10px;color:var(--brass);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.ke-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.ke-metric{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:8px;padding:11px}
.ke-metric b{display:block;font-family:var(--serif);font-size:20px;color:var(--brass);line-height:1}
.ke-metric span{font-size:10px;color:var(--mut);display:block;margin-top:4px}
.ke-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ke-action{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink);border:1px solid var(--line2);
  background:rgba(255,255,255,.02);border-radius:7px;padding:8px 12px;cursor:pointer;transition:.2s var(--ease)}
.ke-action:hover{border-color:var(--brass);color:var(--brass)}
.ke-action.ke-verify{color:var(--green);border-color:rgba(130,207,144,.3)}
.ke-action.ke-verify:hover{border-color:var(--green)}
.ke-sources{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:14px;font-size:11px;color:var(--ink-soft)}
.ke-sources b{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-right:2px}
.ke-sources span{color:#9fb3a2}
.ke-drawer{display:none;border:1px solid rgba(130,207,144,.25);border-radius:9px;padding:12px 14px;margin-bottom:14px;background:rgba(130,207,144,.04)}
.ke-drawer.open{display:block;animation:cmdkIn .2s ease}
.ke-drawhd{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.ke-evi{display:flex;align-items:center;gap:10px;padding:6px 0;color:var(--ink-soft);font-size:12px;border-bottom:1px solid rgba(255,255,255,.05)}
.ke-eviic{color:var(--brass);width:18px;text-align:center}
.ke-related b{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.ke-relchips{display:flex;flex-wrap:wrap;gap:7px}
.ke-rel{font-family:var(--mono);font-size:11px;color:#c0bbae;border:1px solid var(--line);border-radius:8px;padding:8px 11px;cursor:pointer;transition:.2s var(--ease)}
.ke-rel::before{content:"→ ";color:var(--brass)}
.ke-rel:hover{border-color:var(--brass);color:var(--brass)}
.ke-foot{display:flex;align-items:center;gap:9px;padding:12px 16px;border-top:1px solid var(--line)}
.ke-prompt{color:var(--brass);font-family:var(--mono);font-size:13px}
.ke-input{flex:1;background:transparent;border:none;outline:none;color:var(--ink);font-family:var(--mono);font-size:12.5px;caret-color:var(--brass);min-width:0}
.ke-input::placeholder{color:var(--mut)}
.ke-send{background:none;border:1px solid var(--line2);border-radius:7px;color:var(--brass);width:30px;height:30px;cursor:pointer;transition:.2s}
.ke-send:hover{border-color:var(--brass);background:rgba(199,146,79,.1)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:300px 1fr 220px;gap:clamp(34px,4vw,60px);align-items:center}
.about-portrait{position:relative;width:100%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 44px 90px -44px rgba(0,0,0,.95)}
.about-portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(.15) contrast(1.04)}
.about-h{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.06;letter-spacing:-.01em}
.about-p{margin-top:20px;color:var(--ink-soft);font-size:16px;line-height:1.8;max-width:560px}
.sig{margin-top:18px;font-family:var(--script);font-size:34px;color:var(--brass);line-height:1}
.about-values{display:flex;flex-direction:column;gap:24px}
.val b{font-family:var(--serif);font-weight:500;font-size:19px;display:block}
.val span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);display:block;margin-top:3px}
@media(max-width:980px){.about-grid{grid-template-columns:240px 1fr}.about-values{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:30px}}
@media(max-width:600px){.about-grid{grid-template-columns:1fr}}

/* ABOUT cinematic backdrop (AI studio scene) */
#about{position:relative;overflow:hidden}
#about::before{content:"";position:absolute;inset:0;z-index:0;background:url('../assets/studio-scene.jpg') center/cover no-repeat;opacity:.20;filter:contrast(1.04)}
#about::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(8,9,11,.86),rgba(8,9,11,.5) 55%,rgba(8,9,11,.78))}
#about .wrap{position:relative;z-index:1}

/* FIELD NOTES — engineering notebook */
.notes-list{display:flex;flex-direction:column;gap:10px;max-width:820px}
.note{border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.02);overflow:hidden;transition:border-color .25s}
.note:hover{border-color:var(--line2)}
.note summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:16px 18px}
.note summary::-webkit-details-marker{display:none}
.note summary::before{content:"›";color:var(--brass);font-family:var(--mono);transition:transform .25s var(--ease)}
.note[open] summary::before{transform:rotate(90deg)}
.note-t{font-family:var(--serif);font-weight:500;font-size:clamp(17px,1.7vw,20px);color:var(--ink);flex:1}
.note-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);border:1px solid var(--line2);border-radius:20px;padding:4px 9px;flex:0 0 auto}
.note p{margin:0;padding:2px 18px 18px 42px;color:var(--ink-soft);font-size:14.5px;line-height:1.65;max-width:680px}

/* THE JOURNEY — career/education timeline */
.jr-line{position:relative;max-width:760px;margin:0 auto}
.jr-line::before{content:"";position:absolute;left:93px;top:12px;bottom:26px;width:2px;background:linear-gradient(var(--brass),rgba(199,146,79,.12));box-shadow:0 0 12px rgba(199,146,79,.3)}
.jr-step{display:grid;grid-template-columns:64px 24px 1fr;gap:0 18px;align-items:start;padding:0 0 28px}
.jr-year{text-align:right;font-family:var(--mono);font-size:12px;color:var(--brass);letter-spacing:.02em;padding-top:4px}
.jr-dot{width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--brass);box-shadow:0 0 10px rgba(199,146,79,.5);margin:5px auto 0;position:relative;z-index:1}
.jr-c b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(17px,1.8vw,21px);color:var(--ink);line-height:1.3}
.jr-c b em{font-style:italic;color:var(--mut);font-weight:400;font-size:.8em}
.jr-c span{display:block;font-size:13px;color:var(--mut);margin-top:4px;line-height:1.5}
.jr-now .jr-year{color:var(--green)}
.jr-now .jr-dot{border-color:var(--green);box-shadow:0 0 12px rgba(130,207,144,.6);animation:pulse 2.4s ease-in-out infinite}
@media(max-width:560px){.jr-step{grid-template-columns:40px 20px 1fr;gap:0 12px}.jr-line::before{left:62px}.jr-year{font-size:11px}}

/* THE MISSIONS — experience */
.missions{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mission{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
.mission:hover{transform:translateY(-6px);border-color:var(--brass);box-shadow:0 34px 70px -38px rgba(0,0,0,1)}
.ms-tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.mission h3{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.2vw,27px);margin:10px 0 8px;line-height:1.05}
.ms-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ms-meta span{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);border-radius:20px;padding:4px 10px}
.mission p{font-size:14px;color:var(--ink-soft);line-height:1.65;flex:1}
.ms-built{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:16px}
.ms-built b{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-right:4px}
.ms-built span{font-family:var(--mono);font-size:11px;color:var(--ink-soft);border:1px solid var(--line);border-radius:6px;padding:5px 9px}
.ms-cta{align-self:flex-start;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--brass);
  border:1px solid var(--brass-d);background:rgba(199,146,79,.08);border-radius:8px;padding:9px 13px;cursor:pointer;transition:.2s var(--ease)}
.ms-cta:hover{background:rgba(199,146,79,.18);color:var(--brass-l);transform:translateY(-1px)}
.ms-cur{color:var(--green) !important;border-color:rgba(130,207,144,.35) !important}
@media(max-width:820px){.missions{grid-template-columns:1fr}}

/* THE TOOLKIT — skills */
.skill-d{font-size:12px;color:var(--mut);line-height:1.5;margin:0 0 12px}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.skill-col{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;transition:border-color .3s}
.skill-col:hover{border-color:var(--line2)}
.skill-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.skill-col .chips{display:flex;flex-wrap:wrap;gap:7px}
.skill-col .chips span{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);border:1px solid var(--line);border-radius:7px;padding:7px 11px;transition:.2s var(--ease)}
.skill-col .chips span:hover{border-color:var(--brass);color:var(--brass)}
@media(max-width:820px){.skills-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.skills-grid{grid-template-columns:1fr}}

/* THE RECORD — achievements / open source / now */
.record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rec-block{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.rec-block h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.rec-block ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.rec-block li{font-size:14px;color:var(--ink-soft);line-height:1.5;padding-left:18px;position:relative}
.rec-block li::before{content:"›";position:absolute;left:0;color:var(--brass)}
.rec-block a{color:var(--ink-soft)}.rec-block a:hover{color:var(--brass)}
.rec-block .link-arrow{margin-top:16px}
.now-list li span{display:inline-block;min-width:96px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.rec-now{background:radial-gradient(120% 90% at 80% -10%,rgba(199,146,79,.10),transparent 55%),var(--panel)}
@media(max-width:820px){.record-grid{grid-template-columns:1fr}}

/* ===== Ambient lighting per section (image-less sections only) ===== */
#work,#journey,#missions,#skills,#record,#notes{position:relative;overflow:hidden}
#work>.wrap,#journey>.wrap,#missions>.wrap,#skills>.wrap,#record>.wrap,#notes>.wrap{position:relative;z-index:1}
#work::before,#journey::before,#missions::before,#skills::before,#record::before,#notes::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
#work::before{background:radial-gradient(46% 50% at 18% 8%, rgba(199,146,79,.05), transparent 70%)}
#journey::before{background:radial-gradient(45% 55% at 20% 12%, rgba(199,146,79,.06), transparent 70%)}
#missions::before{background:radial-gradient(55% 45% at 50% 0%, rgba(224,181,124,.06), transparent 66%)}
#skills::before{background:
  radial-gradient(50% 60% at 82% 8%, rgba(120,160,210,.05), transparent 70%),
  linear-gradient(rgba(140,170,210,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(140,170,210,.025) 1px,transparent 1px);
  background-size:100% 100%,46px 46px,46px 46px}
#record::before{background:radial-gradient(48% 55% at 28% 10%, rgba(130,207,144,.045), transparent 70%),radial-gradient(40% 50% at 86% 92%, rgba(199,146,79,.05), transparent 70%)}
#notes::before{background:radial-gradient(45% 55% at 80% 12%, rgba(199,146,79,.045), transparent 72%)}
/* depth rhythm — slightly different shade on two sections */
#missions,#record{background:var(--bg2)}

/* ===== Cursor-follow card lighting ===== */
.tile,.mission,.skill-col,.rec-block,.note{--mx:50%;--my:50%}
.tile::after,.mission::after,.skill-col::after,.rec-block::after,.note::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--mx) var(--my), rgba(199,146,79,.10), transparent 60%)}
.tile:hover::after,.mission:hover::after,.skill-col:hover::after,.rec-block:hover::after,.note:hover::after{opacity:1}
.skill-col,.rec-block{transition:transform .35s var(--ease),border-color .3s,box-shadow .35s}
.skill-col:hover,.rec-block:hover,.note:hover{transform:translateY(-3px)}
.skill-col:hover,.rec-block:hover{box-shadow:0 24px 50px -34px rgba(0,0,0,1),0 0 0 1px rgba(199,146,79,.22)}

/* ===== Aurora behind section headings (very faint, slow) ===== */
.sec-title{position:relative;z-index:0}
.sec-title::before{content:"";position:absolute;z-index:-1;left:-8%;top:-40%;width:55%;height:180%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(199,146,79,.05), transparent 75%);animation:aurora 26s ease-in-out infinite}
@keyframes aurora{0%,100%{transform:translateX(0)}50%{transform:translateX(70%)}}
@media(prefers-reduced-motion:reduce){.sec-title::before{animation:none}.tile::after,.mission::after,.skill-col::after,.rec-block::after,.note::after{display:none}}

/* CONTACT MODAL — Start a project */
.cmf{position:fixed;inset:0;z-index:840;display:none;align-items:center;justify-content:center;padding:24px}
.cmf.open{display:flex;animation:cmdkIn .25s ease}
.cmf-scrim{position:absolute;inset:0;background:rgba(4,5,7,.7);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.cmf-box{position:relative;z-index:1;width:min(480px,94vw);max-height:90vh;overflow-y:auto;background:rgba(18,20,24,.98);
  border:1px solid var(--line2);border-radius:18px;padding:30px;box-shadow:0 40px 100px rgba(0,0,0,.65)}
.cmf-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:none;color:var(--ink);cursor:pointer;transition:.25s var(--ease)}
.cmf-close:hover{border-color:var(--brass);color:var(--brass);transform:rotate(90deg)}
.cmf-kick{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:8px}
.cmf-head h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,3vw,28px);line-height:1.12}
.cmf-head p{color:var(--ink-soft);font-size:14px;line-height:1.6;margin:8px 0 20px}
.cmf-form{display:flex;flex-direction:column;gap:14px}
.cmf-form label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.cmf-form input,.cmf-form select,.cmf-form textarea{background:rgba(8,9,11,.6);border:1px solid var(--line2);border-radius:9px;padding:11px 13px;color:var(--ink);font-family:var(--sans);font-size:14px;outline:none;transition:border-color .2s}
.cmf-form input:focus,.cmf-form select:focus,.cmf-form textarea:focus{border-color:var(--brass)}
.cmf-form textarea{resize:vertical;min-height:90px}
.cmf-send{margin-top:4px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#10110f;
  background:linear-gradient(180deg,var(--brass-l),var(--brass));border:none;border-radius:10px;padding:13px;cursor:pointer;transition:.25s var(--ease)}
.cmf-send:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(199,146,79,.4)}
.cmf-alt{font-family:var(--mono);font-size:11px;color:var(--mut);text-align:center;margin-top:6px}
.cmf-alt a{color:var(--brass-l)}
/* quick connect — WhatsApp / Call / Email */
.cmf-quick{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.cmf-q{flex:1;min-width:92px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);border:1px solid var(--line2);
  border-radius:10px;padding:12px 10px;background:rgba(255,255,255,.02);transition:.25s var(--ease)}
.cmf-q:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-2px)}
.cmf-q.wa{color:var(--green);border-color:rgba(130,207,144,.4)}
.cmf-q.wa:hover{border-color:var(--green);color:var(--green);background:rgba(130,207,144,.08)}
.cmf-q.wa i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:scrPulse 1.6s ease-in-out infinite}
.cmf-or{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.cmf-or span{flex:0 0 auto}
.cmf-or::before,.cmf-or::after{content:"";flex:1;height:1px;background:var(--line)}
.nm-links a{color:var(--mut)}
.cmf-sent{text-align:center;padding:18px 0}
.cmf-tick{width:54px;height:54px;border-radius:50%;border:2px solid var(--green);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px}
.cmf-sent h3{font-family:var(--serif);font-size:24px;margin-bottom:8px}
.cmf-sent p{color:var(--ink-soft);font-size:14px;line-height:1.6;max-width:340px;margin:0 auto 18px}
.cmf-sent a{color:var(--brass-l)}

/* FOOTER */
.foot{position:relative;z-index:2;border-top:1px solid var(--line);padding:clamp(56px,7vw,90px) 0 34px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.4))}
.foot-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.foot-lead{font-family:var(--serif);font-size:clamp(26px,3vw,40px);line-height:1.12;margin-bottom:24px}
.cta.big{padding:14px 24px;font-size:13.5px}
.foot-studio{display:flex;align-items:center;gap:9px;margin-top:22px;font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.foot-studio .fst-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(130,207,144,.18);animation:pulse 2.4s ease-in-out infinite}
.foot-studio .fst-dot.off{background:var(--mut);box-shadow:0 0 0 3px rgba(138,142,150,.15);animation:none}
.foot-studio b{font-weight:500;color:var(--ink)}
.foot-studio .fst-cur{display:inline-block;width:7px;height:13px;background:var(--brass);vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(1) infinite}
.foot-status{display:flex;flex-direction:column;gap:14px}
.fs{display:flex;gap:18px;align-items:baseline}
.fs span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);width:78px;flex:0 0 auto}
.fs b{font-weight:500;font-size:14px;color:var(--ink)}
.fs b a{color:var(--ink-soft)}.fs b a:hover{color:var(--brass)}
.fs .ok{color:var(--green);display:flex;align-items:center;gap:8px}
.fs .ok i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(130,207,144,.18);animation:pulse 2.4s ease-in-out infinite}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--mut)}
@media(max-width:760px){.foot-top{grid-template-columns:1fr;gap:30px}.foot-bottom{flex-direction:column;gap:8px}}

/* ============ FULL-SCREEN CASE STUDY ============ */
.case{position:fixed;inset:0;z-index:300;display:none}
.case.open{display:block}
.case-scrim{position:absolute;inset:0;background:rgba(4,5,7,.7);backdrop-filter:blur(6px);opacity:0;transition:opacity .4s}
.case.show .case-scrim{opacity:1}
.case-panel{position:absolute;inset:0;background:var(--bg);overflow:hidden;opacity:0;transform:scale(1.03);transition:opacity .5s var(--ease),transform .65s var(--ease)}
.case.show .case-panel{opacity:1;transform:none}
.case-close{position:fixed;top:22px;right:24px;z-index:20;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);
  background:rgba(13,15,18,.6);backdrop-filter:blur(10px);color:var(--ink);font-size:16px;cursor:pointer;transition:.3s var(--ease)}
.case-close:hover{border-color:var(--brass);color:var(--brass);transform:rotate(90deg)}
.case-scroll{position:absolute;inset:0;overflow-y:auto;scroll-behavior:smooth}
.case-scroll::-webkit-scrollbar{width:10px}.case-scroll::-webkit-scrollbar-thumb{background:rgba(234,229,217,.14);border-radius:8px;border:2px solid var(--bg)}

/* case — clean hero */
.cs-top{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(84px,11vw,140px) var(--gut) 0}
.cs-top::before{content:"";position:absolute;inset:0;background:radial-gradient(52% 70% at 84% 4%,rgba(199,146,79,.13),transparent 62%);pointer-events:none}
.cs-cat{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.cs-title{position:relative;font-family:var(--serif);font-weight:500;font-size:clamp(40px,6vw,88px);line-height:.98;letter-spacing:-.025em}
.cs-tag{position:relative;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.9vw,24px);color:var(--ink-soft);margin-top:18px;max-width:700px;line-height:1.42}
.cs-facts{position:relative;display:flex;flex-wrap:wrap;gap:38px;margin-top:32px}
.cs-fact span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.cs-fact b{font-weight:500;font-size:15px;color:var(--ink)}
.cs-cta{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:32px;font-size:14px;font-weight:600;color:#08090b;background:var(--brass);border-radius:9px;padding:14px 24px;transition:.25s var(--ease)}
.cs-cta:hover{background:var(--brass-l);transform:translateY(-2px)}
/* case — framed showcase */
.cs-show{display:flex;justify-content:center;padding:54px var(--gut) 18px}
.frame{position:relative;box-shadow:0 70px 140px -55px rgba(0,0,0,1);animation:rise 1s var(--ease) both}
.frame.browser{width:100%;max-width:980px;border-radius:13px;overflow:hidden;border:1px solid var(--line2);background:#0e1014}
.fr-bar{display:flex;align-items:center;gap:8px;padding:12px 15px;background:#16181d;border-bottom:1px solid var(--line)}
.fr-bar i{width:11px;height:11px;border-radius:50%}
.fr-bar i:nth-child(1){background:#e0655a}.fr-bar i:nth-child(2){background:#dbab4e}.fr-bar i:nth-child(3){background:#63b365}
.fr-url{margin-left:12px;font-family:var(--mono);font-size:11px;color:var(--mut);background:#0c0e12;border:1px solid var(--line);border-radius:6px;padding:5px 14px}
.fr-shot{position:relative;max-height:620px;overflow:hidden;background:#0e1014}
.fr-shot img{width:100%;display:block}
/* living product showcase: subtle sheen sweep + LIVE badge */
.fr-sheen{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.10) 48%,transparent 64%);
  transform:translateX(-110%);animation:frSheen 6.5s ease-in-out infinite}
@keyframes frSheen{0%,22%{transform:translateX(-110%)}58%,100%{transform:translateX(110%)}}
.fr-live{position:absolute;top:12px;right:14px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);background:rgba(8,9,11,.6);border:1px solid var(--line2);
  border-radius:20px;padding:4px 10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:scrPulse 2s ease-in-out infinite}
.frame.phone-lg{position:relative}
.frame.phone-lg .fr-live{top:18px;right:50%;transform:translateX(50%)}
@media(prefers-reduced-motion:reduce){.fr-sheen,.fr-live{animation:none}}

/* living product overlay — makes the real screenshot feel like a running product */
.lv{position:absolute;inset:0;z-index:4;pointer-events:none;font-family:var(--mono)}
.lv-toast{position:absolute;right:14px;background:rgba(10,12,15,.92);border:1px solid var(--line2);border-radius:10px;
  padding:9px 13px;font-size:11px;color:var(--ink);box-shadow:0 14px 34px rgba(0,0,0,.55);
  opacity:0;transform:translateX(24px);white-space:nowrap}
.lv-toast::before{content:"›";color:var(--brass);margin-right:7px}
.lv-t1{top:46px;animation:lvT1 7.5s ease-in-out infinite}
.lv-t2{top:94px;animation:lvT2 7.5s ease-in-out infinite}
@keyframes lvT1{0%,6%{opacity:0;transform:translateX(24px)}12%,40%{opacity:1;transform:none}46%,100%{opacity:0;transform:translateX(24px)}}
@keyframes lvT2{0%,50%{opacity:0;transform:translateX(24px)}56%,84%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateX(24px)}}
.lv-chip{position:absolute;left:14px;bottom:14px;background:rgba(10,12,15,.85);border:1px solid var(--line2);
  border-radius:20px;padding:6px 12px;font-size:10px;color:var(--green);letter-spacing:.06em;text-transform:uppercase}
.lv-chip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);
  margin-right:7px;vertical-align:1px;animation:scrPulse 1.6s ease-in-out infinite}
.lv-app .lv-chip{left:50%;transform:translateX(-50%);bottom:18px;font-size:9px}
@media(prefers-reduced-motion:reduce){.lv-toast{display:none}.lv-chip::before{animation:none}}

.frame.phone-lg{width:300px;border-radius:40px;border:10px solid #1b1e25;background:#0e1014;overflow:hidden}
.frame.phone-lg .pn{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:120px;height:24px;background:#1b1e25;border-radius:0 0 16px 16px;z-index:2}
.frame.phone-lg img{width:100%;display:block}
/* case — body */
.cs-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,76px);max-width:var(--maxw);margin:0 auto;padding:40px var(--gut) 120px;border-top:1px solid var(--line);margin-top:46px}
.cs-sec{margin-bottom:38px}
.cs-sec .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.cs-lead{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.7vw,23px);line-height:1.55;color:var(--ink)}
.cs-list{list-style:none;display:flex;flex-direction:column;gap:18px}
.cs-list li{display:flex;gap:18px;font-size:15px;color:var(--ink-soft);line-height:1.62}
.cs-list li .n{font-family:var(--serif);font-size:18px;color:var(--brass);flex:0 0 auto;width:24px;line-height:1.4}
.cs-arch{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cs-arch .node{font-family:var(--mono);font-size:11.5px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--ink);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,opacity .3s;animation:archPulse 3.4s ease-in-out infinite}
.cs-arch .ar{color:var(--brass);font-weight:600;animation:archFlow 3.4s ease-in-out infinite}
/* interactive architecture — hover a node for sub-details */
.cs-arch .node.has-tip{cursor:help;border-style:dashed}
.node-tip{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(5px);
  min-width:180px;max-width:240px;background:#0e1014;border:1px solid var(--line2);border-radius:9px;padding:9px 11px;
  font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--ink-soft);text-transform:none;letter-spacing:0;
  white-space:normal;box-shadow:0 16px 40px rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.2s var(--ease);pointer-events:none;z-index:6}
.node-tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--line2)}
.cs-arch .node.has-tip:hover .node-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* developer commentary — the "why" */
.cs-why{border:1px solid var(--line);border-radius:9px;margin-bottom:8px;background:rgba(255,255,255,.02);overflow:hidden}
.cs-why summary{cursor:pointer;list-style:none;padding:11px 14px;font-family:var(--mono);font-size:11.5px;color:var(--brass);letter-spacing:.02em}
.cs-why summary::-webkit-details-marker{display:none}
.cs-why summary::before{content:"▸ ";color:var(--brass)}
.cs-why[open] summary::before{content:"▾ "}
.cs-why p{padding:0 14px 13px;margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
@keyframes archPulse{0%,100%{border-color:var(--line);box-shadow:0 0 0 rgba(199,146,79,0)}50%{border-color:var(--brass);box-shadow:0 0 16px rgba(199,146,79,.32)}}
@keyframes archFlow{0%,100%{color:var(--brass-d);opacity:.5}50%{color:var(--brass-l);opacity:1;text-shadow:0 0 10px rgba(224,181,124,.6)}}
/* hover-to-focus: spotlight the hovered node, dim the rest */
.cs-arch:hover .node{opacity:.45}
.cs-arch .node:hover{opacity:1;transform:translateY(-3px) scale(1.05);border-color:var(--brass);box-shadow:0 0 24px rgba(199,146,79,.5);animation-play-state:paused;color:var(--brass-l)}
/* a packet of light travelling through the architecture */
.cs-arch::after{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--brass-l);box-shadow:0 0 14px var(--brass-l);opacity:0;animation:archPacket 3.4s linear infinite;pointer-events:none}
@keyframes archPacket{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.cs-arch .node,.cs-arch .ar,.cs-arch::after{animation:none}}
.cs-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cs-metric{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.cs-metric b{display:block;font-family:var(--serif);font-size:26px;color:var(--brass);line-height:1}
.cs-metric span{font-size:12px;color:var(--mut);display:block;margin-top:6px}
.cs-stack{display:flex;flex-wrap:wrap;gap:7px}
.cs-stack span{font-family:var(--mono);font-size:11px;color:var(--ink-soft);border:1px solid var(--line);border-radius:6px;padding:6px 10px}
/* case — Production metrics (real-usage proof) */
.cs-prod{max-width:var(--maxw);margin:0 auto;padding:10px var(--gut) 4px}
.cs-prod .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.cs-prodlive{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:10px;letter-spacing:.14em}
.cs-prodlive i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:scrPulse 1.6s ease-in-out infinite}
.cs-prodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cs-prodstat{position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:14px;padding:20px 18px;
  background:radial-gradient(120% 100% at 50% -20%,rgba(199,146,79,.10),transparent 60%),var(--panel)}
.cs-prodstat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--brass-l),var(--brass-d))}
.cs-prodstat b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.2vw,40px);color:var(--brass);line-height:1}
.cs-prodstat span{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);line-height:1.45}
.cs-prodfeats{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.cs-prodfeat{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);
  border:1px solid var(--line2);border-radius:999px;padding:8px 14px;background:rgba(255,255,255,.02)}
.cs-prodfeat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
@media(max-width:760px){.cs-prodgrid{grid-template-columns:1fr 1fr}}
@media(max-width:840px){.cs-grid{grid-template-columns:1fr;gap:30px}.frame.phone-lg{width:250px}}
/* case-study journey timeline */
.cs-journey{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 96px}
.cs-journey .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:26px}
.ct-row{position:relative;display:flex;flex-wrap:wrap}
.ct-row::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line2)}
.ct-step{position:relative;flex:1;min-width:150px;padding:0 18px 0 0;display:flex;flex-direction:column;gap:5px;opacity:0;animation:rise .7s var(--ease) forwards}
.ct-dot{width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--brass);box-shadow:0 0 0 4px var(--bg),0 0 12px rgba(199,146,79,.5)}
.ct-step b{font-family:var(--serif);font-weight:500;font-size:17px;margin-top:10px;color:var(--ink)}
.ct-step span{font-size:12.5px;color:var(--mut);line-height:1.5}
@media(max-width:760px){.ct-row::before{top:0;left:6px;right:auto;width:1px;height:100%}.ct-step{min-width:100%;flex-direction:row;align-items:baseline;gap:14px;padding:9px 0 9px 24px}.ct-step b{margin-top:0;flex:0 0 90px}}
@media(prefers-reduced-motion:reduce){.ct-step{opacity:1;animation:none}}

/* ===== CINEMATIC ENTRANCE / SPLASH ===== */
.splash{position:fixed;inset:0;z-index:900;overflow:hidden;background:#060708;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-align:center;
  clip-path:circle(150% at 50% 50%);
  animation:spSafety 8.5s forwards}                 /* JS-independent auto-dismiss safety net */
@keyframes spSafety{0%,88%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}
.splash.gone{animation:none}                         /* JS takes over the exit */
.splash.exit{clip-path:circle(0% at 50% 50%);opacity:0;
  transition:clip-path 1.05s cubic-bezier(.72,0,.2,1),opacity 1.05s ease;pointer-events:none}
.splash.hide{display:none}

.sp-bg{position:absolute;inset:-7%;background-size:cover;background-position:center;
  filter:brightness(.82) contrast(1.06);transform:scale(1.08);will-change:transform;
  animation:spKen 15s ease-out forwards}
@keyframes spKen{0%{transform:scale(1.16) translate(2%,-2%)}100%{transform:scale(1.0) translate(-2%,2%)}}
.sp-grain{position:absolute;inset:0;opacity:.06;pointer-events:none;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.8) .5px,transparent .6px);background-size:3px 3px}
.sp-spot{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle 340px at var(--mx,50%) var(--my,40%), rgba(255,200,130,.13), transparent 62%)}
.sp-vignette{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(135% 100% at 50% 46%, rgba(6,7,8,.32) 0%, rgba(6,7,8,.6) 52%, rgba(6,7,8,.95) 100%),
  linear-gradient(0deg, rgba(6,7,8,.88), transparent 50%)}
.sp-embers{position:absolute;inset:0;z-index:2;pointer-events:none}

.sp-core{position:relative;z-index:3;padding:0 24px;max-width:860px}
.sp-intro{font-family:var(--mono);font-size:clamp(10px,1.3vw,12.5px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--brass-l);min-height:1.4em;margin-bottom:6px;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.sp-intro .cur{display:inline-block;width:.5em;height:1em;background:var(--brass-l);vertical-align:-2px;
  margin-left:2px;animation:scrBlink 1s steps(1) infinite}
.sp-name{margin:10px 0 0;line-height:.92;animation:spBloom 3.4s ease .5s both}
@keyframes spBloom{
  0%{filter:drop-shadow(0 6px 26px rgba(0,0,0,.55)) drop-shadow(0 0 0 rgba(224,181,124,0))}
  45%{filter:drop-shadow(0 6px 26px rgba(0,0,0,.55)) drop-shadow(0 0 48px rgba(224,181,124,.6))}
  100%{filter:drop-shadow(0 6px 26px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(224,181,124,.3))}
}
.sp-fname{display:block;font-family:var(--serif);font-weight:500;letter-spacing:.01em;
  font-size:clamp(56px,14.5vw,168px);
  background:linear-gradient(100deg,#9a6a32 0%,#E0B57C 30%,#ffffff 47%,#E0B57C 64%,#9a6a32 100%);
  background-size:230% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;opacity:0;transform:translateY(40px);
  animation:spNameIn 1s cubic-bezier(.2,.7,.2,1) .35s forwards, spSheen 5s linear 1.5s infinite}
@keyframes spNameIn{from{opacity:0;transform:translateY(44px);filter:blur(16px)}60%{filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes spSheen{0%{background-position:215% 0}100%{background-position:-35% 0}}
.sp-lname{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(11px,1.7vw,15px);
  letter-spacing:.62em;text-transform:uppercase;color:var(--brass-l);margin-top:16px;padding-left:.62em;
  opacity:0;animation:spFade 1s ease 1.05s forwards;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.sp-tag{font-family:var(--serif);font-style:italic;font-size:clamp(15px,2vw,22px);color:var(--ink);
  margin-top:24px;opacity:0;animation:spFade 1s ease 1.35s forwards;text-shadow:0 2px 20px rgba(0,0,0,.75)}
.sp-tag .rot{color:var(--brass-l);font-style:normal;font-family:var(--mono);font-size:.82em;
  transition:opacity .35s ease}
.sp-tag .rot.swap{opacity:0}
.sp-loadwrap{width:min(280px,68vw);height:2px;background:rgba(255,255,255,.13);border-radius:2px;
  margin:38px auto 0;overflow:hidden;opacity:0;animation:spFade .6s ease 1.6s forwards}
.sp-load{height:100%;width:0;background:linear-gradient(90deg,var(--brass-d),var(--brass-l));
  box-shadow:0 0 12px rgba(199,146,79,.7);transition:width .2s ease}
.sp-status{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);margin-top:14px;min-height:1.4em;opacity:0;animation:spFade .6s ease 1.5s forwards}
.sp-enter{margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#120f0a;background:linear-gradient(180deg,var(--brass-l),var(--brass));border:none;border-radius:999px;
  padding:14px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(10px);pointer-events:none;box-shadow:0 10px 30px rgba(199,146,79,.3);
  transition:transform .3s,box-shadow .3s}
.sp-enter.show{opacity:1;transform:none;pointer-events:auto;animation:spPulse 2.2s ease-in-out infinite}
.sp-enter:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 16px 42px rgba(199,146,79,.5)}
.sp-enter i{transition:transform .3s;font-style:normal}
.sp-enter:hover i{transform:translateX(5px)}
@keyframes spPulse{0%,100%{box-shadow:0 10px 30px rgba(199,146,79,.3)}50%{box-shadow:0 12px 46px rgba(199,146,79,.62)}}
.sp-hint{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  margin-top:18px;opacity:0;animation:spFade 1s ease 2.2s forwards}
.sp-hint b{color:var(--ink-soft)}
@keyframes spFade{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .splash{animation:spSafety 4s forwards}
  .sp-bg,.sp-spot{animation:none;transform:scale(1.04)}
  .sp-fname,.sp-lname,.sp-intro,.sp-tag,.sp-loadwrap,.sp-status,.sp-hint{animation:none;opacity:1;transform:none;filter:none;-webkit-text-fill-color:initial;color:var(--brass-l)}
  .sp-load{width:100%}
}

/* ===== Scroll-progress bar (top) ===== */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--brass-d),var(--brass),var(--brass-l));
  box-shadow:0 0 12px rgba(199,146,79,.55);transition:width .08s linear}

/* ===== Living atmosphere (site-wide, behind content) ===== */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.atmos::before,.atmos::after{content:"";position:absolute;border-radius:50%}
.atmos::before{width:62vw;height:62vw;left:-12vw;top:-14vw;
  background:radial-gradient(circle,rgba(199,146,79,.12),transparent 70%);animation:atmosA 28s ease-in-out infinite}
.atmos::after{width:52vw;height:52vw;right:-10vw;bottom:-16vw;
  background:radial-gradient(circle,rgba(168,119,58,.10),transparent 70%);animation:atmosB 34s ease-in-out infinite}
@keyframes atmosA{0%,100%{transform:translate(0,0)}50%{transform:translate(7vw,6vh)}}
@keyframes atmosB{0%,100%{transform:translate(0,0)}50%{transform:translate(-6vw,-5vh)}}
/* sections stay opaque so the fixed atmosphere never re-composites on scroll (perf) */
.band{background:var(--bg)}
.about{background:var(--bg)}

/* ===== Hero WebGL particle layer ===== */
.hero-gl{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.8}

/* ===== AI assistant input (terminal) ===== */
.t-foot{display:flex;align-items:center;gap:9px}
.tp{color:var(--brass);font-family:var(--mono);font-size:13px}
.t-input{flex:1;background:transparent;border:none;outline:none;color:var(--ink);
  font-family:var(--mono);font-size:12.5px;caret-color:var(--brass);min-width:0}
.t-input::placeholder{color:var(--mut)}

/* ===== Command palette (⌘K) ===== */
.cmdk{position:fixed;inset:0;z-index:800;display:none;align-items:flex-start;justify-content:center;
  padding-top:13vh;background:rgba(6,7,8,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.cmdk.open{display:flex;animation:cmdkIn .22s ease}
@keyframes cmdkIn{from{opacity:0}to{opacity:1}}
.cmdk-box{width:min(580px,92vw);background:rgba(18,20,24,.97);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.65);overflow:hidden}
.cmdk-in{width:100%;box-sizing:border-box;background:transparent;border:none;outline:none;
  padding:19px 22px;color:var(--ink);font-family:var(--mono);font-size:15px;
  border-bottom:1px solid var(--line)}
.cmdk-in::placeholder{color:var(--mut)}
.cmdk-list{max-height:46vh;overflow:auto;padding:8px}
.cmdk-item{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:10px;cursor:pointer;
  color:var(--ink-soft);font-size:14px}
.cmdk-item .ic{width:20px;text-align:center;color:var(--brass);font-size:13px}
.cmdk-item .k{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--mut);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.cmdk-item.sel{background:rgba(199,146,79,.14);color:var(--ink)}
.cmdk-empty{padding:22px;color:var(--mut);font-family:var(--mono);font-size:13px;text-align:center}
.cmdk-hint{padding:10px 16px;border-top:1px solid var(--line);font-family:var(--mono);
  font-size:10px;color:var(--mut);letter-spacing:.1em;text-transform:uppercase}

/* ===== Sound toggle ===== */
.snd{position:fixed;left:20px;bottom:20px;z-index:200;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:rgba(18,20,24,.72);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);color:var(--brass-l);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:transform .25s,border-color .25s,opacity .4s;opacity:0}
.snd.ready{opacity:1}
.snd:hover{transform:scale(1.08);border-color:var(--brass)}
.snd .bars{display:flex;align-items:flex-end;gap:2px;height:15px}
.snd .bars i{width:2.5px;background:currentColor;border-radius:2px;height:38%}
.snd.on .bars i{animation:sndBar 1s ease-in-out infinite}
.snd.on .bars i:nth-child(2){animation-delay:.16s}
.snd.on .bars i:nth-child(3){animation-delay:.32s}
.snd.on .bars i:nth-child(4){animation-delay:.48s}
@keyframes sndBar{0%,100%{height:28%}50%{height:100%}}
.snd.off{color:var(--mut)}
.snd.off .bars i{height:30% !important;animation:none}
@media(max-width:760px){.snd{left:14px;right:auto;bottom:14px;width:40px;height:40px}}

/* ===== Discoverability: ⌘K nav chip + help button/panel ===== */
.kbd-chip{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-soft);
  border:1px solid var(--line2);border-radius:7px;padding:7px 11px;background:rgba(13,15,18,.5);
  cursor:pointer;transition:.25s var(--ease);display:inline-flex;align-items:center;gap:3px}
.kbd-chip span{color:var(--brass)}
.kbd-chip:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-2px)}
@media(max-width:760px){.kbd-chip{display:none}}

.help-fab{position:fixed;right:20px;bottom:20px;z-index:201;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line2);background:rgba(18,20,24,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--brass-l);font-family:var(--serif);font-size:19px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .25s,border-color .25s;opacity:0}
.help-fab.ready{opacity:1}
.help-fab:hover{transform:scale(1.08);border-color:var(--brass)}
.help-fab.nudge{animation:helpNudge 2.4s ease-in-out 2}
@keyframes helpNudge{0%,100%{box-shadow:0 0 0 rgba(199,146,79,0)}50%{box-shadow:0 0 0 8px rgba(199,146,79,.10)}}
.help-panel{position:fixed;right:20px;bottom:74px;z-index:202;width:300px;max-width:84vw;
  background:rgba(18,20,24,.97);border:1px solid var(--line2);border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);padding:8px;display:none}
.help-panel.open{display:block;animation:cmdkIn .2s ease}
.help-panel h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);padding:13px 12px 9px}
.help-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--ink-soft);font-size:13px}
.help-item:hover{background:rgba(199,146,79,.12);color:var(--ink)}
.help-item .ic{width:18px;text-align:center;color:var(--brass)}
.help-item .kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--mut);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
@media(max-width:760px){.help-fab{right:14px;bottom:64px;width:40px;height:40px}.help-panel{bottom:114px;right:14px}}

/* ===== Easter-egg toasts + golden theme ===== */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:850;
  background:rgba(18,20,24,.96);border:1px solid var(--line2);border-radius:999px;padding:12px 22px;
  font-family:var(--mono);font-size:12px;color:var(--ink);box-shadow:0 20px 50px rgba(0,0,0,.55);
  opacity:0;transition:opacity .3s,transform .45s var(--ease);pointer-events:none;max-width:84vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast b{color:var(--brass-l)}
body.gold-theme{--brass:#F4C249;--brass-l:#FFE7A6;--brass-d:#C99A2E}
/* coffee easter egg — the lamp clicks on */
body.lamp-on::after{content:"";position:fixed;inset:0;z-index:120;pointer-events:none;
  background:radial-gradient(circle at 72% 16%, rgba(255,184,92,.14), transparent 58%);animation:cmdkIn .6s ease}
body.gold-theme .hero-scrim{background:linear-gradient(90deg,rgba(7,8,10,.92),rgba(22,14,2,.5) 52%,transparent 84%)}

/* ===== Developer Mode overlay (live GitHub) ===== */
.dev{position:fixed;inset:0;z-index:870;display:none;background:rgba(4,5,6,.95);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:var(--mono);color:#cfe8d2;overflow:auto}
.dev.open{display:block;animation:cmdkIn .2s ease}
.dev-wrap{max-width:900px;margin:0 auto;padding:48px 26px 90px}
.dev-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;
  color:var(--mut);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.dev-bar b{color:var(--green)}
.dev h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:26px 0 12px}
.dev .ln{font-size:12.5px;line-height:1.85;white-space:pre-wrap;color:#bcd6c0}
.dev .ok{color:var(--green)} .dev .dim{color:var(--mut)} .dev .br{color:var(--brass-l)}
.dev-repo{display:grid;grid-template-columns:1fr auto auto;gap:10px 18px;font-size:12.5px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.dev-repo a{color:#cfe8d2;overflow-wrap:anywhere}.dev-repo a:hover{color:var(--brass-l)}
.dev-repo .lang{color:var(--brass)} .dev-repo .when{color:var(--mut)}
.dev-hint{margin-top:30px;color:var(--mut);font-size:11px}

/* ===== Builder Mode toggle (nav) ===== */
.mode-toggle{position:relative;display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:999px;
  background:rgba(13,15,18,.5);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;cursor:pointer;padding:0;overflow:hidden}
.mode-toggle .mt-l{position:relative;z-index:1;padding:7px 13px;color:var(--mut);transition:color .3s}
.mode-toggle .mt-l:first-child{color:var(--ink)}
.mode-toggle .mt-knob{position:absolute;top:2px;left:2px;bottom:2px;width:calc(50% - 2px);border-radius:999px;
  background:rgba(199,146,79,.16);border:1px solid var(--brass-d);transition:transform .3s var(--ease);z-index:0}
.mode-toggle.on .mt-knob{transform:translateX(100%)}
.mode-toggle.on .mt-l:first-child{color:var(--mut)}
.mode-toggle.on .mt-l:last-child{color:var(--brass)}
@media(max-width:760px){.mode-toggle{display:none}}

/* ===== Builder Mode dossier ===== */
.bld{position:fixed;inset:0;z-index:820;display:none;flex-direction:column;color:var(--ink);
  background:radial-gradient(90% 90% at 50% 0%,#0c0e12,#06070a)}
.bld.open{display:flex;animation:cmdkIn .25s ease}
.bld-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 26px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.bld-title b{color:var(--brass-l)}
.bld-close{font-family:var(--mono);font-size:11px;color:var(--ink);border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:999px;padding:8px 14px;cursor:pointer;transition:.25s}
.bld-close:hover{border-color:var(--brass);color:var(--brass)}
.bld-tabs{display:flex;gap:4px;padding:12px 26px 0;overflow-x:auto;border-bottom:1px solid var(--line)}
.bld-tab{font-family:var(--mono);font-size:11.5px;color:var(--mut);background:none;border:none;border-bottom:2px solid transparent;padding:8px 11px 12px;cursor:pointer;white-space:nowrap;transition:.2s}
.bld-tab:hover{color:var(--ink)}
.bld-tab.on{color:var(--brass);border-bottom-color:var(--brass)}
.bld-content{flex:1;overflow-y:auto;padding:28px 26px 80px;max-width:1000px;width:100%;margin:0 auto}
.bld-lead{font-family:var(--serif);font-size:clamp(18px,2vw,24px);color:var(--ink-soft);line-height:1.5;margin-bottom:24px}
.bld-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.bld-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bld-stat{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:20px}
.bld-stat b{display:block;font-family:var(--serif);font-size:30px;color:var(--brass);line-height:1}
.bld-stat span{font-size:12px;color:var(--mut);display:block;margin-top:7px}
.bld-tree{background:#07080a;border:1px solid var(--line);border-radius:10px;padding:18px;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:#cdd2cf;white-space:pre;overflow-x:auto}
.bld-tree .c{color:var(--mut)}.bld-tree .k{color:var(--brass-l)}.bld-tree .m{color:#82CF90}
.bld-note{margin-top:14px;color:var(--mut);font-size:13px;line-height:1.6}
.bld-archrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bld-arch{text-align:left;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:18px;cursor:pointer;color:var(--ink-soft);transition:.25s var(--ease)}
.bld-arch:hover{border-color:var(--brass);transform:translateY(-3px)}
.bld-arch b{display:block;font-family:var(--serif);font-size:19px;color:var(--ink);margin-bottom:5px}
.bld-arch span{display:block;font-size:12px;color:var(--mut);font-family:var(--mono)}
.bld-arch i{display:inline-block;margin-top:10px;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--brass)}
.bld-adr{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px;background:rgba(255,255,255,.02)}
.bld-adrid{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--brass)}
.bld-adr b{display:block;font-family:var(--serif);font-size:18px;margin:4px 0 6px}
.bld-adr p{font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.bld-table{width:100%;border-collapse:collapse;font-size:13.5px}
.bld-table td{padding:12px 4px;border-bottom:1px solid var(--line)}
.bld-table td:first-child{color:var(--ink-soft)}
.bld-table td:last-child{color:var(--brass);text-align:right;font-family:var(--mono);font-size:12.5px}
@media(max-width:700px){.bld-stats,.bld-archrow{grid-template-columns:1fr}}

/* ===== Build Replay ===== */
.rp{position:fixed;inset:0;z-index:880;display:none;color:var(--ink);
  background:radial-gradient(85% 85% at 50% 28%,#0c0e12,#060708)}
.rp.open{display:flex;flex-direction:column;animation:cmdkIn .25s ease}
.rp-top{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.rp-top b{color:var(--brass-l)}
.rp-close{background:none;border:1px solid var(--line2);color:var(--ink);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:14px;transition:.25s var(--ease)}
.rp-close:hover{border-color:var(--brass);color:var(--brass);transform:rotate(90deg)}
.rp-stage{flex:1;display:grid;grid-template-columns:1fr 330px;gap:24px;padding:0 26px;align-items:center;min-height:0}
.rp-svgwrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.rp svg{width:100%;height:auto;max-height:62vh}
.rp .edge{stroke:var(--line2);stroke-width:1.5;fill:none;stroke-dasharray:7 7;stroke-dashoffset:240;opacity:.22;
  transition:stroke-dashoffset 1.1s ease,opacity .6s,stroke .5s}
.rp .edge.on{stroke-dashoffset:0;opacity:.85;stroke:var(--accent,#C7924F)}
.rp .node{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s var(--ease)}
.rp .node.on{opacity:1;transform:none}
.rp .node rect{fill:rgba(20,22,26,.96);stroke:var(--accent,#C7924F);stroke-width:1.2}
.rp .node.on rect{filter:drop-shadow(0 0 7px rgba(199,146,79,.40))}
.rp .node text{fill:var(--ink);font-family:var(--mono);font-size:13px}
.rp .pkt{fill:var(--accent,#E0B57C);filter:drop-shadow(0 0 6px var(--accent,#E0B57C))}
.rp-title{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.12;margin-bottom:18px;min-height:1.2em}
.rp-log{font-family:var(--mono);font-size:13px;line-height:1.95;color:var(--ink-soft);min-height:170px}
.rp-log .l{opacity:0;transform:translateY(6px);animation:rpLine .5s ease forwards}
@keyframes rpLine{to{opacity:1;transform:none}}
.rp-log .bad{color:#e0655a}.rp-log .good{color:var(--green)}
.rp-bar{height:3px;background:rgba(255,255,255,.08);margin:0 26px 16px;border-radius:3px;overflow:hidden}
.rp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass-d),var(--brass-l));transition:width .6s ease}
.rp-foot{display:flex;justify-content:center;gap:12px;padding:0 22px 22px}
.rp-btn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line2);
  background:rgba(18,20,24,.7);color:var(--ink);border-radius:999px;padding:11px 20px;cursor:pointer;transition:.25s var(--ease);text-decoration:none}
.rp-btn:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-2px)}
.rp-btn.primary{background:var(--brass);color:#10110f;border-color:var(--brass)}
.rp-btn.primary:hover{background:var(--brass-l);color:#10110f}
.rp.accent-red{--accent:#e0655a}.rp.accent-green{--accent:#82CF90}.rp.accent-brass{--accent:#C7924F}
.rp-end{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;
  background:radial-gradient(75% 75% at 50% 42%,#0e1015 0%,#070809 100%)}
.rp-end.show{display:flex;animation:cmdkIn .35s ease}
.rp-end .rp-endtag{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--green)}
.rp-end h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.5vw,64px);line-height:1;
  background:linear-gradient(180deg,#fff,#E0B57C);-webkit-background-clip:text;background-clip:text;color:transparent}
.rp-endnote{color:var(--ink-soft);max-width:520px;font-size:15.5px;line-height:1.6;padding:0 20px}
.cs-replay{display:inline-flex;align-items:center;gap:9px;margin-top:18px;margin-left:14px;font-family:var(--mono);
  font-size:12px;letter-spacing:.04em;color:var(--ink);border:1px solid var(--line2);border-radius:9px;padding:13px 20px;cursor:pointer;transition:.25s var(--ease)}
.cs-replay:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-2px)}
@media(max-width:820px){.rp-stage{grid-template-columns:1fr;gap:10px}.rp svg{max-height:38vh}.rp-log{min-height:90px}}
@media(prefers-reduced-motion:reduce){.rp .edge,.rp .node{transition:none}}

/* ===== Room-to-room transition ===== */
.room{position:fixed;inset:0;z-index:860;transform:translateY(100%);pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(90% 90% at 50% 40%,#0b0d11,#060708)}
.room.cover{transform:translateY(0);transition:transform .5s var(--ease)}
.room.reveal{transform:translateY(-100%);transition:transform .58s var(--ease)}
.room .label{position:relative;font-family:var(--serif);font-weight:500;font-size:clamp(28px,5vw,60px);color:var(--ink);
  opacity:0;transform:translateY(12px);transition:opacity .3s ease .08s,transform .4s var(--ease) .08s;
  background:linear-gradient(180deg,#fff,#E0B57C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.room .label::after{content:"";position:absolute;left:50%;bottom:-16px;width:46px;height:2px;transform:translateX(-50%);
  background:var(--brass);opacity:.0;transition:opacity .3s ease .15s}
.room.cover .label{opacity:1;transform:none}
.room.cover .label::after{opacity:.8}

/* ===== Live metric (footer) ===== */
.gh-live .gh-dot{color:var(--green);font-size:.7em;vertical-align:1px;margin:0 2px;animation:scrPulse 2s ease-in-out infinite}

/* ===== Build Mode ===== */
.bm{position:fixed;inset:0;z-index:885;display:none;color:var(--ink);background:radial-gradient(82% 82% at 50% 20%,#0c0e12,#050607)}
.bm.open{display:flex;flex-direction:column;animation:cmdkIn .25s ease}
.bm-wrap{flex:1;display:grid;grid-template-columns:360px 1fr;gap:26px;padding:24px 30px 8px;min-height:0}
.bm-term{font-family:var(--mono);font-size:12.5px;align-self:center}
.bm-log .l{opacity:0;transform:translateY(6px);animation:rpLine .4s ease forwards;line-height:1.95;color:var(--ink-soft)}
.bm-log .l.ok{color:var(--green)}
.bm-canvas{position:relative;border:1px solid var(--line);border-radius:14px;background:rgba(13,15,18,.55);
  padding:20px;display:flex;flex-direction:column;gap:16px;align-self:center;min-height:60vh;justify-content:center}
.bm-blk{opacity:0;transform:translateY(10px) scale(.99);transition:opacity .5s,transform .5s var(--ease)}
.bm-blk.on{opacity:1;transform:none}
.b-nav{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:9px;background:rgba(8,9,11,.5)}
.b-nav .bn{font-weight:600;letter-spacing:.22em;font-size:13px;color:var(--ink)}
.b-nav .bnav{font-size:11px;color:var(--mut);margin-left:auto}
.b-nav .bcta{font-size:10px;color:var(--brass);border:1px solid var(--brass-d);border-radius:6px;padding:5px 10px}
.bm-hero{display:grid;grid-template-columns:1fr 210px;gap:18px;align-items:center;min-height:150px;
  opacity:0;transform:translateY(12px);transition:opacity .55s,transform .55s var(--ease)}
.bm-hero.on{opacity:1;transform:none}
.bm-eye{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--brass);margin-bottom:10px}
.bm-h1{font-family:var(--serif);font-size:clamp(20px,2.3vw,30px);line-height:1.12;color:var(--ink)}
.bm-h1 em{font-style:italic}
.bm-device{height:140px;border-radius:10px;border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;justify-content:center;gap:9px;
  background:radial-gradient(120% 90% at 72% -10%,rgba(199,146,79,.20),transparent 60%),#0e1014}
.bm-device .bd-l{height:7px;border-radius:4px;background:linear-gradient(90deg,rgba(224,181,124,.55),transparent)}
.bm-device .bd-l:nth-child(2){width:78%}.bm-device .bd-l:nth-child(3){width:56%}
.bm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bm-grid span{height:66px;border-radius:8px;border:1px solid var(--line);padding:10px;display:flex;align-items:flex-end;
  font-family:var(--mono);font-size:10px;color:var(--ink-soft);background:linear-gradient(160deg,rgba(199,146,79,.12),rgba(13,15,18,.45));
  opacity:0;transform:scale(.96);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.bm-grid span::after{content:attr(data-l)}
.bm-grid.on span{opacity:1;transform:none}
.bm-grid.on span:nth-child(2){transition-delay:.07s}.bm-grid.on span:nth-child(3){transition-delay:.14s}
.bm-grid.on span:nth-child(4){transition-delay:.21s}.bm-grid.on span:nth-child(5){transition-delay:.28s}.bm-grid.on span:nth-child(6){transition-delay:.35s}
.bm-end{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;
  background:radial-gradient(72% 72% at 50% 44%,#0e1015,#060708)}
.bm-end.show{display:flex;animation:cmdkIn .35s ease}
.bm-end h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.5vw,62px);
  background:linear-gradient(180deg,#fff,#E0B57C);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:820px){.bm-wrap{grid-template-columns:1fr;gap:14px}.bm-canvas{min-height:36vh}}

/* ===== Custom magnetic cursor (fine pointers only) ===== */
@media(pointer:fine){
  body.cur-on, body.cur-on a, body.cur-on button, body.cur-on .tile{cursor:none}
  .cur-dot{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;
    background:var(--brass-l);z-index:999;pointer-events:none;transform:translate(-50%,-50%);
    transition:opacity .3s,width .2s,height .2s}
  .cur-ring{position:fixed;top:0;left:0;width:30px;height:30px;border:1px solid rgba(199,146,79,.7);
    border-radius:50%;z-index:999;pointer-events:none;transform:translate(-50%,-50%);
    transition:width .26s ease,height .26s ease,background .26s ease,border-color .26s ease,opacity .3s}
  .cur-ring.hot{width:54px;height:54px;background:rgba(199,146,79,.10);border-color:var(--brass-l)}
  .cur-dot.hide,.cur-ring.hide{opacity:0}
}
@media(pointer:coarse){.cur-dot,.cur-ring{display:none}}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important}
  .splash{animation:spSafety 4s forwards !important}   /* keep the page-trap failsafe alive */
  .a1,.a2,.a3,.a4,.a5,.a6{opacity:1}
  .case-panel,.case-scrim,.frame{transition:none}
  .hero-screen{opacity:1}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE SYSTEM — handcrafted 320 → 1920
   The desktop layout is unchanged; everything below only refines
   tablet & mobile, prevents overflow, and adds the mobile menu.
   ============================================================ */

/* --- Heading overflow safety (no orphaned/overflowing words) --- */
.h-title,.sec-title,.about-h,.man-quote,.cs-title,.foot-lead,.note-t,.tile-t,.mission h3,.jr-c b,.bf-card b,.cmf-head h3{overflow-wrap:break-word}
.h-title{font-size:clamp(33px,5.2vw,76px)}
.sec-title{font-size:clamp(25px,3.4vw,46px)}

/* --- Mobile hamburger button --- */
.nav-burger{display:none;position:relative;width:46px;height:46px;border:1px solid var(--line2);border-radius:11px;
  background:rgba(13,15,18,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:border-color .25s}
.nav-burger:hover{border-color:var(--brass)}
.nav-burger:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.nav-burger span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px;transition:transform .32s var(--ease),opacity .2s}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Full-screen mobile menu overlay --- */
.navmenu{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--gut) 40px;background:rgba(7,8,10,.9);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility .35s}
body.nav-open .navmenu{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.navmenu-inner{display:flex;flex-direction:column;gap:2px;max-width:560px;width:100%}
.navmenu-inner a{display:flex;align-items:center;gap:18px;font-family:var(--serif);font-weight:500;
  font-size:clamp(30px,8.5vw,50px);color:var(--ink);line-height:1.18;padding:14px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease),transform .45s var(--ease),color .25s}
body.nav-open .navmenu-inner a{opacity:1;transform:none}
body.nav-open .navmenu-inner a:nth-child(1){transition-delay:.10s}
body.nav-open .navmenu-inner a:nth-child(2){transition-delay:.16s}
body.nav-open .navmenu-inner a:nth-child(3){transition-delay:.22s}
body.nav-open .navmenu-inner a:nth-child(4){transition-delay:.28s}
body.nav-open .navmenu-inner a:nth-child(5){transition-delay:.34s}
.navmenu-inner a:hover,.navmenu-inner a:focus-visible{color:var(--brass);outline:none}
.nm-no{font-family:var(--mono);font-size:13px;color:var(--brass);letter-spacing:.1em;flex:0 0 auto}
.nm-cta{color:var(--brass) !important;border-bottom:none !important}
.nm-cta i{font-style:normal;margin-left:auto}
.navmenu-foot{display:flex;justify-content:space-between;gap:16px;margin-top:30px;font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);max-width:560px;width:100%;
  opacity:0;transition:opacity .4s ease .4s}
body.nav-open .navmenu-foot{opacity:1}
.navmenu-foot a:hover{color:var(--brass)}
body.nav-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .navmenu,.navmenu-inner a,.navmenu-foot,.nav-burger span{transition:none}
  body.nav-open .navmenu-inner a{transform:none}
}

/* ===== Tablet (601–1024) ===== */
@media(min-width:601px) and (max-width:900px){
  /* project grid → tidy 2-up on tablet (overrides the 1-col rule above) */
  .work-grid{grid-template-columns:1fr 1fr;gap:16px}
  .tile{grid-column:auto !important}
  .tile-shot{height:clamp(190px,30vw,250px)}
}
@media(max-width:1024px){
  .nav{padding:18px var(--gut)}
  .nav.scrolled{padding:12px var(--gut)}
}

/* ===== Phone (≤760) ===== */
@media(max-width:760px){
  .links{display:none}
  .nav-burger{display:inline-flex}
  body.nav-open .nav{z-index:80;background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .sec-head{margin-bottom:32px}
  .h-stats{gap:20px 30px}
  .h-now{font-size:10px}
  /* generous touch targets (≥48px) */
  .ke-send{width:48px;height:48px}
  .cta,.cta.big,.ms-cta,.cs-cta,.cmf-send,.ke-rec,.t-chip,.ke-rel,.ke-action,.cmf-close,.nav-burger{min-height:48px}
  .cmf-close{min-width:48px}
  .ms-cta{display:inline-flex;align-items:center}
  /* prevent iOS focus-zoom: inputs ≥16px on phones */
  .cmf-form input,.cmf-form select,.cmf-form textarea,.ke-input,.cmdk-in{font-size:16px}
}
/* ===== Hero — tablet spacing (601–760, overlay layout kept) ===== */
@media(min-width:601px) and (max-width:760px){
  .hero-inner{padding-top:100px}
  .h-sub{margin-top:18px}
  .h-stats{margin-top:28px}
  .h-now{margin-top:24px}
  .scrollcue{bottom:18px}
}

/* ===== Hero — phones (≤600): STACKED, not cropped =====
   A wide cinematic stage can't `cover` a tall phone without slicing the device
   in half and stranding its blank screen behind the text. So on phones we stop
   cropping: the stage shows in its own aspect-ratio (whole scene visible), then
   the headline sits cleanly on the dark background below it. Fully fluid — the
   ratio comes from the image itself, the rest is flex; no per-device values. */
@media(max-width:600px){
  .hero{flex-direction:column;align-items:stretch;min-height:auto}
  /* square framing keeps the whole device + its live screen visible & large enough to read */
  .hero-bg{position:relative;inset:auto;width:100%;aspect-ratio:1/1;z-index:0}
  .hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;z-index:3;
    pointer-events:none;background:linear-gradient(transparent,var(--bg))}
  .hero-stage{position:absolute;inset:0}
  .hero-stage img{object-fit:cover;object-position:center}
  .hero-screen{display:block;z-index:4}      /* show the live "studio — shipping" feed on phones too */
  .hero-scrim{display:none}
  .hero-glow{position:absolute;inset:auto;left:0;right:0;top:0;height:100%;
    background:radial-gradient(70% 60% at 50% 36%, rgba(199,146,79,.16), transparent 72%)}
  .hero-inner{position:relative;z-index:2;width:100%;padding:24px var(--gut) 10px;background:var(--bg)}
  .eyebrow{margin-bottom:16px}
  .h-sub{margin-top:18px}
  .h-stats{margin-top:26px}
  .h-now{margin-top:22px}
  .scrollcue{position:static;left:auto;transform:none;margin:20px auto 26px;flex-direction:row;gap:10px}
  .scrollcue i{width:26px;height:1px}
}

/* press feedback on touch devices (no hover to rely on) */
@media(hover:none){
  .cta:active,.tile:active,.mission:active,.ms-cta:active,.cs-cta:active,.cmf-send:active,
  .skill-col:active,.rec-block:active,.note:active,.ke-rec:active,.navmenu-inner a:active{transform:scale(.985)}
  .sp-enter:active{transform:scale(.97)}
}

/* ===== Small phone (≤600) ===== */
@media(max-width:600px){
  :root{--gut:clamp(16px,5vw,80px)}
  .hero-inner{padding-top:104px}
  .cs-title{font-size:clamp(32px,9vw,88px)}
  .cs-facts{gap:18px 26px}
  .cs-metrics{grid-template-columns:1fr 1fr}
  .ke-metrics{grid-template-columns:1fr 1fr}
  .foot-bottom{font-size:10px}
}

/* ===== Tiny phone (≤400) ===== */
@media(max-width:400px){
  .nav{padding:15px var(--gut)}
  .bn{font-size:14px;letter-spacing:.26em}
  .h-stats .st b{font-size:21px}
  .tile-foot{padding:16px}
  .mission,.skill-col,.rec-block{padding:20px}
  .cmf-box{padding:24px 20px}
  .ke-metrics,.cs-metrics{grid-template-columns:1fr}
  .navmenu-inner a{font-size:clamp(27px,8.5vw,40px)}
}