/* ==========================================================================
   Muhammad Sarowar Hossain — personal portfolio
   Concept: "Survey line". A night site read through a laser level:
   carbon black, laser lime, glass panels and structural line work.

   Contents
   01 Fonts            06 Hero              11 Projects
   02 Tokens           07 Numbers           12 Expertise
   03 Base             08 About             13 Ventures / credentials
   04 Ambient layer    09 Career            14 Contact / footer
   05 Navigation       10 Retrofitting      15 Motion, tiers, reduced motion
   ========================================================================== */

/* 01 Fonts ---------------------------------------------------------------- */
@font-face{font-family:"Big Shoulders Display";src:url("../assets/fonts/big-shoulders-display.woff2") format("woff2");font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../assets/fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../assets/fonts/jetbrains-mono.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
/* Metric-matched fallbacks keep the layout still while the web fonts load */
@font-face{font-family:"Display Fallback";src:local("Arial Narrow"),local("Arial");size-adjust:86%;ascent-override:112%;descent-override:26%}
@font-face{font-family:"Body Fallback";src:local("Arial");size-adjust:98%;ascent-override:97%;descent-override:25%}

/* 02 Tokens --------------------------------------------------------------- */
:root{
  --bg:#060807;
  --bg-2:#0c100e;
  --ink:#f1f5f2;
  --ink-2:#c5cfc8;
  --muted:#8f9c95;
  --laser:#c6ff3a;
  --laser-rgb:198,255,58;
  --aqua:#58f0d0;
  --aqua-rgb:88,240,208;
  --line:rgba(241,245,242,.12);
  --line-2:rgba(241,245,242,.22);
  --glass:linear-gradient(140deg,rgba(255,255,255,.085),rgba(255,255,255,.022) 55%,rgba(255,255,255,.04));
  --blur:18px;
  --r:22px;
  --gut:clamp(18px,4.6vw,56px);
  --wrap:min(1240px,100% - var(--gut)*2);
  --f-display:"Big Shoulders Display","Display Fallback","Arial Narrow",Impact,sans-serif;
  --f-body:"Instrument Sans","Body Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --nav-h:64px;
}

/* 03 Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink-2);font:400 1rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
strong,b{font-weight:600;color:var(--ink)}
::selection{background:var(--laser);color:#07100a}
:focus-visible{outline:2px solid var(--laser);outline-offset:3px;border-radius:6px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--laser);color:#07100a;padding:10px 16px;border-radius:10px;font-weight:600;transition:top .3s var(--ease)}
.skip:focus{top:12px}

/* Shared: glass panel with a pointer-tracked light (see data-spot in main.js) */
.glass{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 60px -30px rgba(0,0,0,.8);
  transition:border-color .5s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
[data-spot]::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(var(--laser-rgb),.13),transparent 62%)}
[data-spot]:hover::after,[data-spot].is-lit::after{opacity:1}
[data-spot]:hover{border-color:rgba(var(--laser-rgb),.32)}

/* Shared: buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;min-height:50px;padding:0 1.5em;border-radius:999px;border:1px solid var(--line-2);
  font:600 .95rem/1 var(--f-body);color:var(--ink);overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),border-color .4s,color .4s;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--laser);transform:translateY(101%);transition:transform .5s var(--ease);border-radius:inherit}
.btn:hover,.btn:focus-visible{color:#07100a;border-color:var(--laser)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:active{transform:scale(.96)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--laser);color:#07100a;border-color:var(--laser);box-shadow:0 0 34px -6px rgba(var(--laser-rgb),.55)}
.btn--primary::before{background:var(--ink)}
.btn--sm{min-height:40px;padding:0 1.15em;font-size:.86rem}
.linkbtn{color:var(--laser);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(var(--laser-rgb),.4);transition:text-decoration-color .3s}
.linkbtn:hover{text-decoration-color:var(--laser)}

/* Shared: section scaffolding */
.sec{position:relative;width:var(--wrap);margin-inline:auto;padding-block:clamp(72px,11vw,150px)}
.sec-head{margin-bottom:clamp(34px,5vw,64px)}
.sheet{display:flex;align-items:center;gap:14px;font:500 .74rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.sheet::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);transform-origin:left;transition:transform 1.2s var(--ease) .15s}
.bubble{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--laser);color:var(--laser);font:600 .82rem/1 var(--f-mono);letter-spacing:0;
  box-shadow:0 0 18px -4px rgba(var(--laser-rgb),.6),inset 0 0 10px -4px rgba(var(--laser-rgb),.5)}
.sec-title{font:800 clamp(2.5rem,6.6vw,5.4rem)/.94 var(--f-display);letter-spacing:.005em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.sec-title em{font-style:normal;color:var(--laser)}
.ln{display:block;overflow:hidden;padding-block:.04em}
.ln>span{display:block;transition:transform 1.1s var(--ease)}
.ln:nth-child(2)>span{transition-delay:.09s}
.ln:nth-child(3)>span{transition-delay:.18s}
.sec-lede{max-width:62ch;margin-top:22px;font-size:1.08rem;color:var(--ink-2)}
.sub{font:700 clamp(1.35rem,2.6vw,1.9rem)/1.1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin:clamp(44px,6vw,76px) 0 22px;display:flex;align-items:center;gap:14px}
.sub::before{content:"";width:22px;height:2px;background:var(--laser);box-shadow:0 0 12px rgba(var(--laser-rgb),.8)}
.panel-tag{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--laser);margin-bottom:14px}
.card{padding:clamp(22px,3vw,34px)}
.card__h{font:700 1.3rem/1.15 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.ticks li{position:relative;padding-left:26px;margin-top:10px}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:1px;background:var(--laser)}
.ticks li::after{content:"";position:absolute;left:14px;top:calc(.72em - 3px);width:1px;height:7px;background:var(--laser)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{font:500 .72rem/1 var(--f-mono);letter-spacing:.04em;padding:8px 11px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:rgba(255,255,255,.03);transition:border-color .4s,color .4s,transform .4s var(--ease)}
.chips span:hover{border-color:rgba(var(--laser-rgb),.6);color:var(--laser);transform:translateY(-2px)}
.chips--lg span{font-size:.78rem;padding:10px 14px}

/* 04 Ambient layer -------------------------------------------------------- */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  radial-gradient(120% 80% at 50% -10%,#101713 0%,var(--bg) 60%)}
.ambient__grid{position:absolute;inset:-2px;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 35%,#000 0%,transparent 78%);mask-image:radial-gradient(ellipse 85% 70% at 50% 35%,#000 0%,transparent 78%)}
.ambient__orb{position:absolute;width:70vmax;height:70vmax;border-radius:50%;will-change:transform}
.ambient__orb--a{left:-28vmax;top:-30vmax;background:radial-gradient(circle,rgba(var(--laser-rgb),.11),transparent 62%);animation:orbA 26s var(--ease-io) infinite alternate}
.ambient__orb--b{right:-30vmax;bottom:-34vmax;background:radial-gradient(circle,rgba(var(--aqua-rgb),.1),transparent 62%);animation:orbB 32s var(--ease-io) infinite alternate}
@keyframes orbA{to{transform:translate3d(16vmax,12vmax,0) scale(1.15)}}
@keyframes orbB{to{transform:translate3d(-14vmax,-16vmax,0) scale(1.1)}}
.ambient__canvas{position:absolute;inset:0;width:100%;height:100%}
.ambient__grain{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Scroll progress */
.laser-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:120;pointer-events:none}
.laser-progress span{display:block;height:100%;background:var(--laser);box-shadow:0 0 14px 1px rgba(var(--laser-rgb),.9);transform:scaleX(0);transform-origin:left}
.staff{display:none}
@media (min-width:1280px){
  .staff{display:block;position:fixed;right:18px;top:50%;height:44vh;width:44px;margin-top:-22vh;z-index:60;pointer-events:none}
  .staff__rail{position:absolute;right:6px;top:0;bottom:0;width:9px;
    background:repeating-linear-gradient(var(--line-2) 0 1px,transparent 1px 10px);border-right:1px solid var(--line-2)}
  .staff__fill{position:absolute;right:-1px;top:0;width:2px;height:100%;background:var(--laser);box-shadow:0 0 10px rgba(var(--laser-rgb),.9);transform:scaleY(0);transform-origin:top}
  .staff__mark{position:absolute;right:0;top:0;will-change:transform}
  .staff__mark span{position:absolute;right:22px;top:-9px;white-space:nowrap;font:500 .62rem/1 var(--f-mono);letter-spacing:.1em;color:var(--laser);padding:4px 6px;border:1px solid rgba(var(--laser-rgb),.4);border-radius:4px;background:rgba(6,8,7,.8)}
  .staff__mark::after{content:"";position:absolute;right:0;top:-1px;width:18px;height:2px;background:var(--laser)}
}

/* Cursor reticle (desktop pointers only, enabled by main.js) */
.reticle{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;z-index:150;pointer-events:none;opacity:0;transition:opacity .4s;will-change:transform}
.reticle.is-live{opacity:1}
.reticle i{position:absolute;inset:0;border:1px solid rgba(var(--laser-rgb),.55);border-radius:50%;transition:transform .45s var(--ease),background .45s,border-color .45s}
.reticle i::before,.reticle i::after{content:"";position:absolute;background:rgba(var(--laser-rgb),.7)}
.reticle i::before{left:50%;top:-5px;bottom:-5px;width:1px;-webkit-mask:linear-gradient(#000 0 7px,transparent 7px calc(100% - 7px),#000 0);mask:linear-gradient(#000 0 7px,transparent 7px calc(100% - 7px),#000 0)}
.reticle i::after{top:50%;left:-5px;right:-5px;height:1px;-webkit-mask:linear-gradient(90deg,#000 0 7px,transparent 7px calc(100% - 7px),#000 0);mask:linear-gradient(90deg,#000 0 7px,transparent 7px calc(100% - 7px),#000 0)}
.reticle.is-hot i{transform:scale(1.7);background:rgba(var(--laser-rgb),.1);border-color:var(--laser)}

/* 05 Navigation ----------------------------------------------------------- */
.nav{position:fixed;left:50%;top:12px;z-index:100;width:min(1240px,100% - 24px);height:var(--nav-h);transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;padding:0 10px 0 14px;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(18,24,21,.72),rgba(10,13,12,.6));
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 40px -22px #000;
  transition:transform .6s var(--ease),border-color .4s}
.nav.is-hidden{transform:translate(-50%,-120%)}
.nav__brand{display:flex;align-items:center;gap:10px;min-height:44px}
.mark{width:36px;height:36px}
.mark__tile{fill:#0b0f0d;stroke:rgba(var(--laser-rgb),.5);stroke-width:1.5}
.mark__m{fill:none;stroke:var(--laser);stroke-width:4;stroke-linejoin:miter;stroke-linecap:square}
.mark__lvl{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3}
.nav__name{font:800 1.25rem/1 var(--f-display);letter-spacing:.12em;color:var(--ink)}
.nav__links{display:none;margin-inline:auto;gap:2px}
.nav__links a{position:relative;padding:12px 13px;font-size:.86rem;font-weight:500;color:var(--ink-2);border-radius:999px;transition:color .35s}
.nav__links a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:1px;background:var(--laser);box-shadow:0 0 8px var(--laser);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav__links a:hover,.nav__links a.is-on{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-on::after{transform:none}
.nav__read{margin-left:auto;font:500 .72rem/1 var(--f-mono);letter-spacing:.1em;color:var(--laser);min-width:3.4ch;text-align:right}
.nav__cta{display:none}
.nav__burger{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);flex:none;transition:border-color .4s,background .4s}
.nav__burger span{position:absolute;left:13px;right:13px;height:2px;background:var(--ink);border-radius:2px;transition:transform .5s var(--ease),top .5s var(--ease)}
.nav__burger span:first-child{top:18px}.nav__burger span:last-child{top:26px}
.nav__burger[aria-expanded="true"]{background:var(--laser);border-color:var(--laser)}
.nav__burger[aria-expanded="true"] span{background:#07100a;top:22px}
.nav__burger[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
@media (min-width:1080px){
  .nav__links{display:flex}.nav__burger{display:none}.nav__cta{display:inline-flex}.nav__read{margin-left:0}
}

.menu{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 40px) var(--gut) 34px;
  background:rgba(6,8,7,.82);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s;overflow-y:auto}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
.menu__list{display:grid;gap:2px}
.menu__list a{display:flex;align-items:baseline;gap:16px;padding:8px 0;font:800 clamp(2rem,9.5vw,3.4rem)/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink);
  border-bottom:1px solid var(--line);opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease),color .3s}
.menu__list a span{font:500 .72rem/1 var(--f-mono);letter-spacing:.1em;color:var(--laser)}
.menu__list a:active{color:var(--laser)}
.menu.is-open .menu__list a{opacity:1;transform:none}
.menu.is-open .menu__list a:nth-child(1){transition-delay:.05s}.menu.is-open .menu__list a:nth-child(2){transition-delay:.09s}
.menu.is-open .menu__list a:nth-child(3){transition-delay:.13s}.menu.is-open .menu__list a:nth-child(4){transition-delay:.17s}
.menu.is-open .menu__list a:nth-child(5){transition-delay:.21s}.menu.is-open .menu__list a:nth-child(6){transition-delay:.25s}
.menu.is-open .menu__list a:nth-child(7){transition-delay:.29s}.menu.is-open .menu__list a:nth-child(8){transition-delay:.33s}
.menu__foot{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font:500 .8rem/1.4 var(--f-mono);color:var(--muted)}
.menu__foot a{padding:8px 0}

/* 06 Hero ----------------------------------------------------------------- */
.hero{position:relative;width:var(--wrap);margin-inline:auto;min-height:100vh;min-height:100svh;padding:calc(var(--nav-h) + 34px) 0 74px;
  display:grid;align-content:center;gap:26px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 .72rem/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--laser);box-shadow:0 0 0 0 rgba(var(--laser-rgb),.7);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 12px rgba(var(--laser-rgb),0)}}
.hero__name{margin:16px 0 18px;font:900 clamp(3.7rem,20.5vw,7.4rem)/.84 var(--f-display);letter-spacing:-.005em;text-transform:uppercase;color:var(--ink)}
.hero__name .ln{padding-block:.03em}
.hero__last{color:transparent;-webkit-text-stroke:1.5px var(--laser);text-shadow:0 0 34px rgba(var(--laser-rgb),.35)}
.hero__title{font:700 clamp(1.25rem,3.4vw,1.75rem)/1.15 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--laser)}
.hero__title strong{color:var(--ink);font-weight:800}
.hero__lede{max-width:52ch;margin-top:14px;font-size:clamp(1rem,1.5vw,1.12rem);color:var(--ink-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__cue{position:absolute;left:0;bottom:18px;display:flex;align-items:center;gap:12px;font:500 .66rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:10px 0}
.hero__cue i{position:relative;width:54px;height:1px;background:var(--line-2);overflow:hidden}
.hero__cue i::after{content:"";position:absolute;inset:0;background:var(--laser);animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* Portrait lens */
.lens{position:relative;justify-self:center;width:min(64vw,300px,40svh);aspect-ratio:1;order:-1;--px:0px;--py:0px}
.lens__ticks,.lens__cross{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
.lens__ticks{animation:spin 80s linear infinite}
.lens__ticks .t1{stroke:var(--line-2);stroke-width:5;stroke-dasharray:.6 4.48}
.lens__ticks .t2{stroke:rgba(var(--laser-rgb),.5);stroke-width:.5}
.lens__ticks .t3{stroke:var(--laser);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--laser))}
.lens__cross{stroke:rgba(var(--laser-rgb),.7);stroke-width:.7;transform:translate3d(calc(var(--px)*-.6),calc(var(--py)*-.6),0)}
@keyframes spin{to{transform:rotate(360deg)}}
.lens__glass{position:absolute;inset:8%;border-radius:50%;overflow:hidden;isolation:isolate;background:#111;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 0 7px rgba(255,255,255,.035),0 0 0 8px rgba(255,255,255,.08),0 30px 70px -18px #000,0 0 70px -12px rgba(var(--laser-rgb),.35);
  transform:translate3d(var(--px),var(--py),0);will-change:transform}
.lens__glass picture,.lens__img{display:block;width:100%;height:100%}
.lens__img{object-fit:cover;transform:scale(1.08) translate3d(calc(var(--px)*-.9),calc(var(--py)*-.9),0);will-change:transform}
.lens__grade{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 50% 38%,transparent 34%,rgba(6,8,7,.5) 74%,rgba(6,8,7,.88) 100%),
  linear-gradient(200deg,rgba(var(--aqua-rgb),.16),transparent 42%,rgba(var(--laser-rgb),.14))}
.lens__scan{position:absolute;left:0;right:0;top:0;height:26%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(var(--laser-rgb),.16) 92%,rgba(var(--laser-rgb),.95) 100%);
  transform:translateY(-110%);animation:scan 6.5s var(--ease-io) 1.4s infinite}
@keyframes scan{0%{transform:translateY(-110%)}46%,100%{transform:translateY(400%)}}
.lens__glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.22),transparent 34%)}
.lens__chip{position:absolute;z-index:2;display:flex;align-items:baseline;gap:7px;padding:9px 13px;border-radius:14px;border:1px solid var(--line-2);white-space:nowrap;
  font:500 .64rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  background:linear-gradient(140deg,rgba(24,30,27,.7),rgba(10,13,12,.55));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 14px 30px -14px #000;animation:float 7s ease-in-out infinite}
.lens__chip b{font:800 1.35rem/1 var(--f-display);color:var(--laser);letter-spacing:.02em}
.lens__chip--a{left:-6%;bottom:9%;translate:calc(var(--px)*1.6) calc(var(--py)*1.6)}
.lens__chip--b{right:-9%;top:5%;animation-delay:-3.5s;translate:calc(var(--px)*2.2) calc(var(--py)*2.2)}
@keyframes float{50%{transform:translateY(-9px)}}

@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(20px,4vw,70px);padding-bottom:60px}
  .hero__name{font-size:clamp(4.6rem,min(9.4vw,19svh),9.2rem)}
  .lens{order:0;width:min(100%,62svh,520px)}
  .lens__chip{font-size:.7rem;padding:11px 15px}
  .lens__chip b{font-size:1.7rem}
}

/* 07 Numbers -------------------------------------------------------------- */
.numbers{width:var(--wrap);margin-inline:auto;padding-block:8px clamp(30px,5vw,60px)}
.numbers__row{display:grid;grid-template-columns:repeat(2,1fr);overflow:hidden}
.num{padding:22px 18px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.num__v{display:flex;align-items:flex-start;font:900 clamp(3rem,10vw,4.6rem)/.9 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.num__v i{font-style:normal;color:var(--laser);font-size:.6em;margin-left:2px}
.num__l{display:block;margin-top:10px;font-size:.84rem;line-height:1.4;color:var(--muted)}
.num:nth-child(2n){border-right:0}.num:nth-last-child(-n+2){border-bottom:0}
@media (min-width:700px){
  .numbers__row{grid-template-columns:repeat(3,1fr)}
  .num:nth-child(2n){border-right:1px solid var(--line)}.num:nth-child(3n){border-right:0}
  .num:nth-last-child(-n+3){border-bottom:0}
}
@media (min-width:1100px){
  .numbers__row{grid-template-columns:repeat(6,1fr)}
  .num{border-bottom:0!important;border-right:1px solid var(--line)!important;padding:28px 20px 30px}
  .num:last-child{border-right:0!important}
}

/* 08 About ---------------------------------------------------------------- */
.about__grid{display:grid;gap:clamp(30px,5vw,70px)}
.about__text>*+*{margin-top:18px}
.lead{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5;color:var(--ink)}
.pull{padding:clamp(20px,3vw,30px);margin-block:26px!important;border-left:2px solid var(--laser)}
.pull p{font:600 clamp(1.25rem,2.4vw,1.65rem)/1.25 var(--f-display);letter-spacing:.02em;color:var(--ink)}

/* Photo frame */
.frame{position:relative;width:min(100%,400px);justify-self:center;--rx:0deg;--ry:0deg;--gx:50%;--gy:0%}
.frame__inner{position:relative;aspect-ratio:4/5;border-radius:26px 26px 26px 4px;overflow:hidden;isolation:isolate;background:#111;
  border:1px solid rgba(255,255,255,.2);box-shadow:0 40px 80px -30px #000,0 0 60px -20px rgba(var(--laser-rgb),.3);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease),clip-path 1.3s var(--ease-io);will-change:transform}
.frame__inner picture,.frame__inner img{display:block;width:100%;height:100%;object-fit:cover}
.frame__grade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,rgba(6,8,7,.85),rgba(6,8,7,.1) 46%,transparent 60%),
  linear-gradient(120deg,rgba(var(--aqua-rgb),.14),transparent 50%,rgba(var(--laser-rgb),.1));box-shadow:inset 0 0 90px rgba(6,8,7,.7)}
.frame__glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(255,255,255,.2),transparent 60%);mix-blend-mode:soft-light}
.frame__laser{position:absolute;left:0;right:0;top:0;height:2px;background:var(--laser);box-shadow:0 0 18px 3px rgba(var(--laser-rgb),.8);opacity:0}
.frame.in .frame__laser{animation:wipe 1.3s var(--ease-io) both}
@keyframes wipe{0%{transform:translateY(0);opacity:1}92%{opacity:1}100%{transform:translateY(min(500px,125vw));opacity:0}}
.frame__corner{position:absolute;width:26px;height:26px;border:solid var(--laser);border-width:0;pointer-events:none}
.frame__corner--tl{left:-9px;top:-9px;border-left-width:2px;border-top-width:2px}
.frame__corner--br{right:-9px;bottom:26px;border-right-width:2px;border-bottom-width:2px}
.frame__cap{display:flex;gap:12px;margin-top:14px;font:500 .68rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.frame__cap span{color:var(--laser)}
@media (min-width:900px){
  .about__grid{grid-template-columns:minmax(260px,400px) 1fr;align-items:start}
  .frame{position:sticky;top:calc(var(--nav-h) + 40px)}
}

.values{display:grid;gap:14px}
.value{padding:24px 22px 26px;overflow:hidden}
.value__no{font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;color:var(--laser)}
.value h4{margin:16px 0 8px;font:700 1.35rem/1.1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.value p{font-size:.94rem;color:var(--ink-2)}
.value:hover{transform:translateY(-6px)}
@media (min-width:640px){.values{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.values{grid-template-columns:repeat(4,1fr)}}

.marquee{margin-top:clamp(44px,6vw,80px)}
.marquee__label{font:500 .7rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.marquee__viewport{display:flex;overflow:hidden;border-block:1px solid var(--line);padding-block:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee__track{display:flex;flex:none;animation:marquee 46s linear infinite}
.marquee__viewport:hover .marquee__track{animation-play-state:paused}
.marquee__track li{display:flex;align-items:center;white-space:nowrap;font:700 clamp(1.3rem,3vw,2rem)/1 var(--f-display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.marquee__track li::after{content:"";width:8px;height:8px;margin-inline:26px;background:var(--laser);transform:rotate(45deg)}
@keyframes marquee{to{transform:translateX(-100%)}}

/* 09 Career --------------------------------------------------------------- */
.career__grid{display:grid;gap:22px}
.career__viz{position:sticky;top:calc(var(--nav-h) + 22px);z-index:5}
.elev{padding:12px 16px;border-radius:16px;background:linear-gradient(140deg,rgba(20,26,23,.86),rgba(10,13,12,.8))}
.elev svg{display:none}
.elev__read{display:flex;justify-content:space-between;align-items:center;font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.elev__read span:first-child{color:var(--laser)}
.elev__segs{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.elev__segs i{height:4px;border-radius:2px;background:var(--line-2);transition:background .5s var(--ease),box-shadow .5s}
.elev__segs i.on{background:var(--laser);box-shadow:0 0 10px rgba(var(--laser-rgb),.7)}
.career__list{display:grid;gap:16px}
.role{padding:clamp(22px,3vw,32px);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .5s}
.js .role{opacity:.5}
.js .role.is-on{opacity:1;border-color:rgba(var(--laser-rgb),.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 60px -30px #000,-3px 0 0 0 var(--laser)}
.role__when{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--laser)}
.role__title{margin-top:12px;font:800 clamp(1.7rem,3.6vw,2.5rem)/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.role__org{margin:6px 0 14px;font-weight:600;color:var(--ink)}
.role__pts{margin-top:12px}
.role__pts li{position:relative;padding-left:20px;margin-top:7px;font-size:.95rem}
.role__pts li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;border:1px solid var(--laser);transform:rotate(45deg)}
.role--crown{background:linear-gradient(140deg,rgba(var(--laser-rgb),.14),rgba(255,255,255,.02) 60%)}

@media (min-width:900px){
  .career__grid{grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(30px,5vw,70px);align-items:start}
  .career__viz{top:calc(var(--nav-h) + 40px)}
  .elev{padding:22px 22px 18px;border-radius:var(--r);background:var(--glass)}
  .elev svg{display:block;width:100%;height:auto;max-height:58vh;overflow:visible}
  .elev__segs{display:none}
  .career__list{gap:22px;padding-bottom:6vh}
  .role{min-height:34vh}
}
.elev__ground{stroke:var(--ink-2);stroke-width:1.5;fill:none}
.elev__hatch{stroke:var(--muted);stroke-width:1;fill:none}
.lvl text{font:500 11px var(--f-mono);letter-spacing:.14em;fill:var(--muted);text-anchor:middle;opacity:.35;transition:fill .6s,opacity .6s}
.lvl__line{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-io),stroke .6s}
.lvl__fill{fill:rgba(var(--laser-rgb),1);opacity:0;transition:opacity .7s var(--ease)}
.lvl__beacon{fill:var(--laser);opacity:0;transition:opacity .6s .5s}
.lvl.on .lvl__line{stroke-dashoffset:0}
.lvl.on text{opacity:1}
.lvl.on .lvl__fill{opacity:.05}
.lvl.cur .lvl__line{stroke:var(--laser);filter:drop-shadow(0 0 5px rgba(var(--laser-rgb),.8))}
.lvl.cur .lvl__fill{opacity:.2}
.lvl.cur text{fill:var(--laser)}
.lvl.on .lvl__beacon{opacity:1;animation:beacon 1.8s ease-in-out infinite}
@keyframes beacon{50%{opacity:.25}}
html:not(.js) .lvl__line{stroke-dashoffset:0}

/* 10 Retrofitting --------------------------------------------------------- */
.retro__grid{display:grid;gap:clamp(26px,4vw,60px)}
.jacket{padding:clamp(20px,3vw,30px);color:var(--ink-2)}
.jacket svg{width:100%;height:auto;max-width:420px;margin-inline:auto;overflow:visible}
.jk-old{stroke:var(--ink);stroke-width:1.6;color:var(--ink)}
.jk-oldbars circle{fill:var(--bg);stroke:var(--ink);stroke-width:1.6}
.jk-tie{fill:none;stroke:var(--aqua);stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease-io)}
.jk-bars circle{fill:var(--aqua);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s var(--ease)}
.jk-bars circle:nth-child(2){transition-delay:.06s}.jk-bars circle:nth-child(3){transition-delay:.12s}.jk-bars circle:nth-child(4){transition-delay:.18s}
.jk-bars circle:nth-child(5){transition-delay:.24s}.jk-bars circle:nth-child(6){transition-delay:.3s}.jk-bars circle:nth-child(7){transition-delay:.36s}.jk-bars circle:nth-child(8){transition-delay:.42s}
.jk-new{color:var(--laser);opacity:0;transition:opacity 1s var(--ease)}
.jk-newline{fill:rgba(var(--laser-rgb),.07);fill-opacity:0;stroke:var(--laser);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease-io),fill-opacity 1s;filter:drop-shadow(0 0 6px rgba(var(--laser-rgb),.6))}
.jk-dim{stroke:var(--muted);stroke-width:1;fill:none}
.jk-lab{font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;text-anchor:middle;fill:var(--ink);opacity:0;transition:opacity .5s}
.jacket[data-stage="0"] .jk-lab--0,.jacket[data-stage="1"] .jk-lab--1,.jacket[data-stage="2"] .jk-lab--2{opacity:1}
.jacket[data-stage="1"] .jk-tie,.jacket[data-stage="2"] .jk-tie{stroke-dashoffset:0}
.jacket[data-stage="1"] .jk-bars circle,.jacket[data-stage="2"] .jk-bars circle{transform:scale(1)}
.jacket[data-stage="2"] .jk-new{opacity:1}
.jacket[data-stage="2"] .jk-newline{stroke-dashoffset:0;fill-opacity:1}
.jacket__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.jacket__steps button{min-height:48px;padding:8px 6px;border-radius:12px;border:1px solid var(--line);text-align:center;font:600 .8rem/1.2 var(--f-body);color:var(--ink-2);transition:background .4s,border-color .4s,color .4s,transform .3s var(--ease)}
.jacket__steps button i{display:block;font:500 .62rem/1 var(--f-mono);font-style:normal;letter-spacing:.14em;color:var(--muted);margin-bottom:5px;transition:color .4s}
.jacket__steps button:hover{border-color:var(--line-2)}
.jacket__steps button:active{transform:scale(.96)}
.jacket__steps button.is-on{background:rgba(var(--laser-rgb),.12);border-color:rgba(var(--laser-rgb),.6);color:var(--ink)}
.jacket__steps button.is-on i{color:var(--laser)}
.jacket__note{margin-top:14px;font-size:.82rem;color:var(--muted)}
.process .sub{margin-top:0}
.steps{position:relative;display:grid;gap:4px}
.steps::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:1px;background:linear-gradient(var(--line-2) 43%,var(--laser) 43%)}
.step{position:relative;display:grid;grid-template-columns:44px 1fr;gap:16px;padding:12px 14px 12px 0;border-radius:16px;transition:background .5s,opacity .9s var(--ease),transform .9s var(--ease)}
.step__no{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg-2);font:600 .85rem/1 var(--f-mono);color:var(--ink-2);z-index:1;transition:transform .5s var(--ease),box-shadow .5s}
.step h4{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:700 1.3rem/1.1 var(--f-display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:9px 0 4px}
.step h4 b{font:600 .6rem/1 var(--f-mono);letter-spacing:.12em;padding:5px 8px;border-radius:999px;background:var(--laser);color:#07100a}
.step p{font-size:.95rem}
.step--me .step__no{border-color:var(--laser);color:var(--laser);box-shadow:0 0 18px -4px rgba(var(--laser-rgb),.7)}
.step:hover{background:rgba(255,255,255,.035)}
.step:hover .step__no{transform:scale(1.1)}
.retro__lower{display:grid;gap:16px;margin-top:clamp(30px,4vw,56px)}
@media (min-width:900px){
  .retro__grid{grid-template-columns:minmax(300px,440px) 1fr;align-items:start}
  .jacket{position:sticky;top:calc(var(--nav-h) + 40px)}
  .retro__lower{grid-template-columns:1fr 1fr}
}

/* 11 Projects ------------------------------------------------------------- */
.bridge{display:grid;gap:clamp(22px,4vw,50px);padding:clamp(22px,3.6vw,44px);overflow:hidden}
.bridge__h{font:800 clamp(2rem,4.6vw,3.3rem)/1 var(--f-display);letter-spacing:.015em;text-transform:uppercase;color:var(--ink)}
.bridge__meta{margin:10px 0 16px;font:500 .72rem/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bridge__hard{margin-top:12px}
.bridge__parts{display:grid;gap:6px;margin-top:20px}
.bridge__parts button{display:block;width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--line);transition:background .45s,border-color .45s}
.bridge__parts b{display:flex;align-items:center;gap:10px;font:700 1.12rem/1.1 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);transition:color .4s}
.bridge__parts b::before{content:"";width:9px;height:9px;border:1px solid var(--muted);transform:rotate(45deg);transition:background .4s,border-color .4s,box-shadow .4s}
.bridge__parts span{display:block;font-size:.92rem;color:var(--ink-2);padding-top:6px}
.js .bridge__parts span{max-height:0;overflow:hidden;opacity:0;padding-top:0;transition:max-height .6s var(--ease),opacity .5s,padding .5s}
.js .bridge__parts .is-on span{max-height:7em;opacity:1;padding-top:6px}
.bridge__parts button:hover{border-color:var(--line-2)}
.bridge__parts .is-on{background:rgba(var(--laser-rgb),.09);border-color:rgba(var(--laser-rgb),.5)}
.bridge__parts .is-on b{color:var(--ink)}
.bridge__parts .is-on b::before{background:var(--laser);border-color:var(--laser);box-shadow:0 0 10px var(--laser)}
.bridge__viz{align-self:center}
.bridge__viz svg{width:100%;height:auto;overflow:visible}
.br-ctx path{fill:rgba(255,255,255,.03);stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4}
.br path{fill:rgba(255,255,255,.045);stroke:var(--ink-2);stroke-width:1.3;stroke-linejoin:round;transition:fill .5s,stroke .5s,filter .5s;cursor:pointer}
.br.is-on path{fill:rgba(var(--laser-rgb),.22);stroke:var(--laser);filter:drop-shadow(0 0 7px rgba(var(--laser-rgb),.75))}
.br.is-on{animation:partPulse 2.2s ease-in-out infinite}
@keyframes partPulse{50%{opacity:.72}}
.br-cl{stroke:rgba(var(--laser-rgb),.35);stroke-width:1;stroke-dasharray:14 4 2 4;fill:none}
.bridge__note,.plot__note{margin-top:12px;font-size:.8rem;color:var(--muted)}
@media (min-width:960px){.bridge{grid-template-columns:1fr 1.05fr;align-items:center}}

.explorer{display:grid;gap:22px;margin-top:clamp(30px,4vw,56px)}
.plot{padding:clamp(18px,2.6vw,28px)}
.plot svg{width:100%;height:auto;max-height:520px;margin-inline:auto;overflow:visible}
.plot__grat path{stroke:var(--line);stroke-width:1;fill:none;stroke-dasharray:2 5}
.plot__gratlab text{font:500 9px var(--f-mono);letter-spacing:.1em;fill:var(--muted);opacity:.7}
.plot__lines path{fill:none;stroke:rgba(var(--laser-rgb),.4);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-io)}
.plot.in .plot__lines path{stroke-dashoffset:0}
html:not(.js) .plot__lines path{stroke-dashoffset:0}
.node{cursor:pointer;transition:opacity .5s}
.node text{font:500 10.5px var(--f-mono);letter-spacing:.06em;fill:var(--ink-2);transition:fill .4s}
.node__dot{fill:var(--bg);stroke:var(--laser);stroke-width:1.8;transition:fill .4s,transform .5s var(--ease);transform-box:fill-box;transform-origin:center}
.node__pulse{fill:none;stroke:var(--laser);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:pulse 3s ease-out infinite}
.node:nth-child(3n) .node__pulse{animation-delay:-1s}.node:nth-child(3n+1) .node__pulse{animation-delay:-2s}
@keyframes pulse{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(2.8);opacity:0}}
.node__hit{fill:transparent}
.node:hover .node__dot,.node.is-on .node__dot{fill:var(--laser);transform:scale(1.25)}
.node:hover text,.node.is-on text{fill:var(--laser)}
.plot.has-pick .node:not(.is-on){opacity:.35}
.filters{display:grid;gap:18px;align-content:start}
.filters__group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters__label{flex:0 0 100%;font:500 .68rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);font:500 .86rem/1 var(--f-body);color:var(--ink-2);
  transition:background .4s var(--ease),border-color .4s,color .4s,transform .35s var(--ease)}
.chip i{font:500 .68rem/1 var(--f-mono);font-style:normal;color:var(--muted);transition:color .4s}
.chip:hover{border-color:rgba(var(--laser-rgb),.6);color:var(--ink)}
.chip:active{transform:scale(.94)}
.chip.is-on{background:var(--laser);border-color:var(--laser);color:#07100a;font-weight:600}
.chip.is-on i{color:#2c3a10}
.filters__count{font:500 .76rem/1.4 var(--f-mono);letter-spacing:.08em;color:var(--laser)}
@media (min-width:960px){.explorer{grid-template-columns:minmax(300px,440px) 1fr;align-items:start;gap:clamp(26px,4vw,56px)}}

.pjs{display:grid;gap:12px;margin-top:clamp(24px,3vw,40px);align-items:start;counter-reset:none}
@media (min-width:860px){.pjs{grid-template-columns:1fr 1fr;gap:14px}}
.pj{transition:opacity .35s var(--ease),transform .5s var(--ease)}
.pj.is-out{opacity:0;transform:translateY(14px) scale(.985)}
.pj[hidden]{display:none}
.pj__card{position:relative;border-radius:18px;border:1px solid var(--line);background:linear-gradient(140deg,rgba(255,255,255,.055),rgba(255,255,255,.015));overflow:hidden;
  transition:border-color .45s,background .45s,transform .5s var(--ease)}
.pj__card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--laser);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.pj__card:hover{border-color:rgba(var(--laser-rgb),.35);transform:translateY(-3px)}
.pj.is-open .pj__card{border-color:rgba(var(--laser-rgb),.5);background:linear-gradient(140deg,rgba(var(--laser-rgb),.08),rgba(255,255,255,.02))}
.pj.is-open .pj__card::before{transform:none}
.pj__toggle{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;width:100%;padding:18px 18px 16px;align-items:start}
.pj__no{grid-row:1/3;font:500 .7rem/1 var(--f-mono);letter-spacing:.1em;color:var(--laser);padding-top:6px}
.pj__name{font:700 clamp(1.22rem,2.2vw,1.5rem)/1.08 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.pj__meta{grid-column:2;font-size:.84rem;color:var(--muted)}
.pj__tags{grid-column:2/4;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{font:500 .62rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)}
.tag--r{border-color:rgba(var(--laser-rgb),.5);color:var(--laser)}
.tag--n{border-color:rgba(var(--aqua-rgb),.5);color:var(--aqua)}
.tag--live{background:var(--laser);border-color:var(--laser);color:#07100a}
.tag--first{background:rgba(255,255,255,.1)}
.pj__chev{grid-column:3;grid-row:1/3;position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);transition:transform .6s var(--ease),background .4s,border-color .4s}
.pj__chev::before,.pj__chev::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--ink);transition:transform .6s var(--ease),background .4s}
.pj__chev::after{transform:rotate(90deg)}
.pj.is-open .pj__chev{background:var(--laser);border-color:var(--laser);transform:rotate(180deg)}
.pj.is-open .pj__chev::before,.pj.is-open .pj__chev::after{background:#07100a}
.pj.is-open .pj__chev::after{transform:rotate(0)}
.pj__body{display:grid;grid-template-rows:1fr}
.js .pj__body{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s var(--ease),visibility 0s .6s}
.js .pj.is-open .pj__body{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s var(--ease),visibility 0s}
.pj__inner{overflow:hidden;min-height:0;padding-inline:18px}
.pj__inner dl{border-top:1px solid var(--line);padding-top:6px}
.pj__inner dl>div{display:grid;gap:2px;padding:10px 0;border-bottom:1px dashed var(--line)}
.pj__inner dt{font:500 .64rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pj__inner dd{font-size:.95rem;color:var(--ink-2)}
.pj__inner::after{content:"";display:block;height:16px}
.pj__link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;font-weight:600;font-size:.9rem;color:var(--laser)}
.pj__link::after{content:"↗";transition:transform .4s var(--ease)}
.pj__link:hover::after{transform:translate(3px,-3px)}
@media (min-width:560px){.pj__inner dl>div{grid-template-columns:130px 1fr;gap:14px}}
.pjs__empty{margin-top:20px;padding:22px;border:1px dashed var(--line-2);border-radius:16px;text-align:center}

/* 12 Expertise ------------------------------------------------------------ */
.life{position:relative;padding:10px clamp(14px,2.4vw,26px);overflow:hidden}
.life__beam{display:none}
.stage{border-bottom:1px solid var(--line)}
.stage:last-child{border-bottom:0}
.stage__tab{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:12px 4px;font:700 clamp(1.1rem,2.2vw,1.35rem)/1.1 var(--f-display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);transition:color .4s,transform .5s var(--ease)}
.stage__tab i{flex:none;font:500 .68rem/1 var(--f-mono);font-style:normal;letter-spacing:.1em;color:var(--muted);transition:color .4s}
.stage__tab::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .5s var(--ease),border-color .4s}
.stage__tab:hover,.stage.is-on .stage__tab{color:var(--ink)}
.stage.is-on .stage__tab i{color:var(--laser)}
.stage.is-on .stage__tab::after{transform:rotate(225deg);border-color:var(--laser)}
.stage__panel{display:grid;grid-template-rows:1fr}
.js .stage__panel{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s var(--ease),visibility 0s .6s,opacity .5s}
.js .stage.is-on .stage__panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s var(--ease),visibility 0s,opacity .5s}
.stage__panel>ul{overflow:hidden;min-height:0}
.stage__panel>ul::after{content:"";display:block;height:18px}
@media (min-width:900px){
  .js .life{display:grid;grid-template-columns:minmax(280px,400px) 1fr;column-gap:clamp(26px,4vw,60px);padding:26px clamp(22px,3vw,40px) 26px 46px;align-items:start}
  .js .life__beam{display:block;position:absolute;left:24px;top:36px;bottom:36px;width:2px;background:var(--line)}
  .js .life__beam span{display:block;width:100%;height:100%;background:var(--laser);box-shadow:0 0 12px rgba(var(--laser-rgb),.8);transform:scaleY(.143);transform-origin:top;transition:transform .7s var(--ease)}
  .js .stage{display:contents}
  .js .stage h3{grid-column:1;border-bottom:1px solid var(--line)}
  .js .stage:last-child h3{border-bottom:0}
  .js .stage__tab::after{transform:rotate(-45deg)}
  .js .stage.is-on .stage__tab{transform:translateX(8px)}
  .js .stage.is-on .stage__tab::after{transform:rotate(-45deg) translate(3px,3px)}
  .js .stage__panel{grid-column:2;grid-row:1/span 7;grid-template-rows:1fr;align-self:center;opacity:0;transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s .45s;transform:translateY(14px);font-size:1.06rem}
  .js .stage.is-on .stage__panel{opacity:1;transform:none;transition:opacity .6s var(--ease) .12s,transform .7s var(--ease) .12s,visibility 0s}
  .js .stage__panel .ticks li{margin-top:16px}
}

.edge{display:grid;gap:14px}
.edge__item{padding:24px 22px;overflow:hidden}
.edge__item h4{font:700 1.4rem/1.08 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.edge__why{margin:12px 0 14px;font-size:.92rem;color:var(--muted)}
.edge__mine{position:relative;padding-top:14px;font-size:.95rem;color:var(--ink)}
.edge__mine::before{content:"";position:absolute;left:0;top:0;width:36px;height:2px;background:var(--laser);transition:width .7s var(--ease)}
.edge__item:hover{transform:translateY(-6px)}
.edge__item:hover .edge__mine::before{width:100%}
@media (min-width:640px){.edge{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.edge{grid-template-columns:repeat(6,1fr)}.edge__item{grid-column:span 2}.edge__item:nth-child(4){grid-column:2/span 2}}

.skills{display:grid;gap:22px 34px}
.skillset h4{font:500 .7rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--laser)}
.skillset .chips{margin-top:12px}
@media (min-width:860px){.skills{grid-template-columns:1fr 1fr}.skillset:first-child{grid-column:1/-1}}

/* 13 Ventures / credentials ---------------------------------------------- */
.ventures__grid{display:grid;gap:16px}
.venture{padding:clamp(24px,3.4vw,40px);overflow:hidden}
.venture__h{font:800 clamp(1.9rem,4vw,3rem)/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.venture .ticks{margin-top:14px}
.venture--main{background:linear-gradient(150deg,rgba(var(--laser-rgb),.13),rgba(255,255,255,.02) 55%)}
.venture__link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:18px;font:500 .8rem/1 var(--f-mono);letter-spacing:.08em;color:var(--laser)}
.venture__link::after{content:"↗";transition:transform .4s var(--ease)}
.venture__link:hover::after{transform:translate(3px,-3px)}
@media (min-width:960px){.ventures__grid{grid-template-columns:1.15fr 1fr}.venture--main{grid-row:span 2}}

.degrees{display:grid;gap:16px}
.degree{padding:clamp(22px,3vw,32px);overflow:hidden}
.degree__yr{font:800 clamp(2.2rem,5vw,3.2rem)/1 var(--f-display);color:transparent;-webkit-text-stroke:1px var(--laser);letter-spacing:.02em}
.degree h3{margin:14px 0 6px;font:700 1.45rem/1.1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.degree__org{font:500 .72rem/1.5 var(--f-mono);letter-spacing:.06em;color:var(--laser);margin-bottom:12px}
.degree p:last-child{font-size:.94rem}
.degree:hover{transform:translateY(-6px)}
@media (min-width:960px){.degrees{grid-template-columns:repeat(3,1fr)}}
.certs{display:grid;border-top:1px solid var(--line)}
.cert{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:16px 10px;border-bottom:1px solid var(--line);overflow:hidden}
.cert::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--laser-rgb),.1),transparent 70%);transform:translateX(-101%);transition:transform .7s var(--ease);pointer-events:none}
.cert:hover::before{transform:none}
.cert__org{grid-column:1/-1;font:500 .68rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--laser)}
.cert__name{font-weight:500;color:var(--ink)}
.cert__name b{display:inline-block;margin-left:6px;font:600 .62rem/1 var(--f-mono);letter-spacing:.08em;padding:4px 7px;border-radius:999px;background:var(--laser);color:#07100a;vertical-align:middle}
.cert__date{font:500 .72rem/1.6 var(--f-mono);color:var(--muted);white-space:nowrap}
@media (min-width:860px){.certs{grid-template-columns:1fr 1fr;column-gap:34px}}
.creds__foot{display:grid;gap:16px;margin-top:clamp(26px,4vw,44px)}
@media (min-width:760px){.creds__foot{grid-template-columns:1fr 1.6fr}}

/* 14 Contact / footer ----------------------------------------------------- */
.contact{padding-bottom:clamp(40px,6vw,80px)}
.contact__panel{padding:clamp(24px,5vw,70px);overflow:hidden;background:linear-gradient(150deg,rgba(var(--laser-rgb),.12),rgba(255,255,255,.025) 46%,rgba(var(--aqua-rgb),.07))}
.contact__top{display:grid;gap:24px;align-items:center}
.contact__h{font-size:clamp(2.3rem,6.2vw,5rem)}
.contact__lede{max-width:56ch;margin-top:22px;font-size:1.08rem}
.avatar{position:relative;width:132px;aspect-ratio:1;--rx:0deg;--ry:0deg}
.avatar picture,.avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.avatar picture{position:relative;transform:perspective(600px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease);border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.3)}
.avatar__grade{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 38%,transparent 40%,rgba(6,8,7,.6) 100%)}
.avatar__ring{position:absolute;inset:-10px;border-radius:50%;border:1px dashed rgba(var(--laser-rgb),.6);animation:spin 40s linear infinite}
.avatar__ring::after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--laser);box-shadow:0 0 12px var(--laser)}
@media (min-width:760px){.contact__top{grid-template-columns:auto 1fr;gap:40px}.avatar{width:168px}}
.contact__list{display:grid;gap:0;margin-top:clamp(26px,4vw,44px);border-top:1px solid var(--line-2)}
.cta{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;padding:20px 6px;border-bottom:1px solid var(--line-2);overflow:hidden;transition:padding .6s var(--ease),color .4s}
.cta::before{content:"";position:absolute;inset:0;background:var(--laser);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1}
.cta__k{grid-column:1;font:500 .68rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--laser);transition:color .4s}
.cta__v{grid-column:1;font:800 clamp(1.45rem,6.4vw,3.4rem)/1.05 var(--f-display);letter-spacing:.01em;color:var(--ink);overflow-wrap:anywhere;transition:color .4s}
.cta svg{grid-column:2;grid-row:1/3;width:clamp(30px,5vw,48px);height:auto;fill:none;stroke:var(--laser);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease),stroke .4s}
.cta:hover,.cta:focus-visible{padding-inline:22px}
.cta:hover::before,.cta:focus-visible::before{transform:none}
.cta:hover .cta__k,.cta:hover .cta__v,.cta:focus-visible .cta__k,.cta:focus-visible .cta__v{color:#07100a}
.cta:hover svg,.cta:focus-visible svg{stroke:#07100a;transform:translate(4px,-4px) rotate(45deg)}
.contact__copy{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:18px;font-size:.9rem;min-height:44px}
.contact__copy .linkbtn{min-height:44px}
#copyMsg{color:var(--ink);font:500 .76rem/1 var(--f-mono)}
.foot{width:var(--wrap);margin-inline:auto;padding:26px 0 calc(34px + env(safe-area-inset-bottom));display:grid;gap:8px;font-size:.84rem;color:var(--muted);border-top:1px solid var(--line)}
.foot strong{color:var(--ink)}
.foot__top{justify-self:start;min-height:44px;display:inline-flex;align-items:center;color:var(--laser);font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
@media (min-width:760px){.foot{grid-template-columns:1fr auto;align-items:center}.foot p:nth-child(2){grid-row:2}.foot__top{grid-row:1/3;grid-column:2}}

/* 15 Motion, tiers, reduced motion --------------------------------------- */
/* Scroll reveals. Hidden states apply only when scripts run (html.js). */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .sec-head:not(.in) .ln>span,.js .contact__top:not(.in) .ln>span,.js .hero:not(.is-ready) .ln>span{transform:translateY(108%)}
.js .sec-head:not(.in) .sheet::after,.js .contact__top:not(.in) .sheet::after{transform:scaleX(0)}
.js .frame:not(.in) .frame__inner{clip-path:inset(0 0 100% 0)}
.frame__inner{clip-path:inset(0)}
.js .hero .eyebrow,.js .hero__title,.js .hero__lede,.js .hero__actions,.js .hero__cue,.js .lens{opacity:0;transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.js .hero__title,.js .hero__lede,.js .hero__actions{transform:translateY(22px)}
.js .lens{transform:scale(.86)}
.js .hero.is-ready .eyebrow,.js .hero.is-ready .hero__title,.js .hero.is-ready .hero__lede,.js .hero.is-ready .hero__actions,.js .hero.is-ready .hero__cue,.js .hero.is-ready .lens{opacity:1;transform:none}
.js .hero.is-ready .hero__title{transition-delay:.35s}.js .hero.is-ready .hero__lede{transition-delay:.45s}
.js .hero.is-ready .hero__actions{transition-delay:.55s}.js .hero.is-ready .hero__cue{transition-delay:.9s}.js .hero.is-ready .lens{transition-delay:.15s}

/* Anything scrolled out of view stops animating (class set by main.js) */
.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}

/* Lite tier: mid-range phones and data-saver. Same design, cheaper paint. */
.lite{--blur:0px}
.lite .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(140deg,rgba(26,33,29,.92),rgba(13,17,15,.92))}
.lite .lens__chip{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,18,16,.92)}
.lite .menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,8,7,.97)}
.lite .ambient__orb{animation:none}
.lite .ambient__grain{display:none}

@media (hover:none){
  .value:hover,.edge__item:hover,.degree:hover,.pj__card:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important}
  .js .reveal,.js .hero__title,.js .hero__lede,.js .hero__actions,.js .lens{transform:none}
  .lens__scan,.frame__laser,.node__pulse,.reticle{display:none}
  .marquee__viewport{overflow-x:auto}
  .marquee__track[aria-hidden]{display:none}
}

@media print{
  .ambient,.nav,.menu,.staff,.laser-progress,.reticle,.hero__cue{display:none!important}
  body{background:#fff;color:#000}
}

/* Adjustments after browser review ---------------------------------------- */
.lvl text.lvl__side{text-anchor:start}
@media (min-width:900px){.role{min-height:0}}
.frame__inner img{filter:brightness(.9) contrast(1.06) saturate(.88)}
.frame__grade{background:
  radial-gradient(120% 90% at 62% 36%,transparent 38%,rgba(6,8,7,.62) 100%),
  linear-gradient(to top,rgba(6,8,7,.9),rgba(6,8,7,.12) 46%,transparent 62%),
  linear-gradient(120deg,rgba(var(--aqua-rgb),.16),transparent 50%,rgba(var(--laser-rgb),.12))}
/* Phone hero: keep the name and copy inside the viewport */
.hero{grid-template-columns:minmax(0,1fr)}
.hero__name{font-size:clamp(3.3rem,18.2vw,7.4rem)}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}.hero__name{font-size:clamp(4.6rem,min(9.4vw,19svh),9.2rem)}}
/* Phone: contact lines stay on one line; level bar tucks under the nav only while it shows */
.cta__v{font-size:clamp(1.12rem,5.5vw,3.4rem)}
.chips span{line-height:1.3}
@media (max-width:899px){
  .career__viz{top:10px;transition:top .6s var(--ease)}
  .nav:not(.is-hidden) ~ main .career__viz{top:calc(var(--nav-h) + 22px)}
  .contact__panel{padding:22px 18px}
}
/* Large monitors: cap the name so it always fits its column */
@media (min-width:900px){.hero__name{font-size:clamp(4.4rem,min(9.2vw,18.5svh),8.4rem)}}
html{overflow-x:clip}