@font-face{font-family:Epilogue;src:url(fonts/Epilogue-Latin.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root{--bg:#04123d;--bg2:#071c5a;--ink:#efe6d4;--muted:#c3b9a6;--accent:#8fb0ff;--accent2:#e9c98f;--line:rgba(239,230,212,.14);--glass:rgba(16,38,110,.42);--m:clamp(20px,4vw,32px);--r:18px;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:radial-gradient(1200px 800px at 80% -10%,#0d2c86 0,transparent 60%),var(--bg);color:var(--ink);font:400 1.0625rem/1.6 Epilogue,system-ui,sans-serif;overflow-x:hidden}
a{color:var(--accent)}a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent2);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px}.skip:focus{top:12px}
.muted{color:var(--muted)}
/* nav */
.nav{position:fixed;inset:14px var(--m) auto;z-index:50;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.nav>*{pointer-events:auto}
.nav nav{position:relative;display:flex;gap:2px;padding:5px;border-radius:999px;background:rgba(4,18,61,.55);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav nav a{position:relative;z-index:1;color:var(--ink);text-decoration:none;font-size:.9375rem;font-weight:500;padding:9px 14px;border-radius:999px;transition:color .2s}
.nav nav a[aria-current="true"]{color:var(--bg)}
.nav-ind{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--ink);transition:transform .3s var(--ease),width .3s var(--ease),opacity .2s;opacity:0}
.logo img{display:block;border-radius:10px}
/* intro */
.intro{position:fixed;inset:0;z-index:90;background:var(--bg);display:grid;place-items:center;animation:introOut .35s ease-out .55s forwards;pointer-events:none}
.intro-pulse{width:min(60vw,420px)}.intro-pulse path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:520;stroke-dashoffset:520;animation:draw .55s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes introOut{to{opacity:0;visibility:hidden}}
/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--m) 18px;overflow:hidden;isolation:isolate}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-row{display:grid;grid-template-columns:1fr auto;gap:16px 32px;align-items:end;max-width:1400px;width:100%;margin:0 auto 8px}
.eyebrow{grid-column:1/-1;margin:0;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.lead{margin:0;max-width:34ch;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem)}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:500;text-decoration:none;cursor:pointer;padding:12px 20px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);transition:transform .2s var(--ease),background .2s,color .2s}
@media (hover:hover) and (pointer:fine){.btn:hover{color:var(--bg);background:#fff;transform:translateY(-2px)}}.btn:active{transform:scale(.97);transition-duration:.1s}
.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:rgba(239,230,212,.1);color:var(--ink)}
.btn .icon{width:18px;height:18px}
.monument{margin:0;max-width:1400px;width:100%;margin-inline:auto;font-weight:900;letter-spacing:-.05em;line-height:.85;transform-origin:50% 100%;will-change:transform}
.hey{display:block;font-size:clamp(1.25rem,1rem + 1.2vw,2rem);font-weight:500;letter-spacing:0;color:var(--muted);margin-bottom:.2em}
.mono-word{display:block;font-size:clamp(4.5rem,21vw,19rem);white-space:nowrap}


/* sections */
.section{max-width:1100px;margin:0 auto;padding:clamp(72px,12vw,140px) var(--m) 0}
.section h2{font-weight:900;letter-spacing:-.04em;line-height:.95;font-size:clamp(2.5rem,1.2rem + 5vw,5.5rem);margin:0 0 .5em}
.section h3{margin:0;font-size:1.1875rem;font-weight:700;letter-spacing:-.01em}
.glass{background:linear-gradient(160deg,rgba(40,70,170,.35),rgba(10,26,80,.35));border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 50px -24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.about-intro{display:grid;grid-template-columns:160px 1fr;gap:28px;align-items:start;margin-bottom:28px}
.about-intro p{margin:0;max-width:62ch;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}
.headshot{border-radius:50%;width:160px;height:160px;object-fit:cover;border:2px solid var(--line);box-shadow:0 0 0 6px rgba(143,176,255,.12)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{padding:24px;position:relative;overflow:hidden}
.card p{margin:.4em 0 0}
.badge{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(143,176,255,.14);color:var(--accent);margin-bottom:14px}
.badge .icon{width:22px;height:22px}
/* experience timeline */
.xp-list{list-style:none;margin:0;padding:0 0 0 28px;position:relative;display:grid;gap:14px}
.xp-list::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--accent),var(--accent2) 40%,transparent)}
.xp{padding:20px 22px;position:relative}
.xp::before{content:"";position:absolute;left:-26px;top:26px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.xp-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;align-items:baseline}
.xp-date{font-size:.875rem}
.xp-org{margin:.3em 0 0;color:var(--accent2)}
.xp-duties{margin:.7em 0 0;padding-left:1.1em}.xp-duties li{margin:.25em 0}
.xp-roles{list-style:none;margin:.8em 0 0;padding:0;display:grid;gap:8px}
.xp-roles>li>span:first-child{font-weight:500;margin-right:10px}
.xp-toggle{margin-top:20px}
/* project tilt */
.project{transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s;max-width:560px;padding:32px}
.project::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(143,176,255,.22),transparent 45%);pointer-events:none;opacity:0;transition:opacity .3s}
.project:hover::after{opacity:.6}
.project h3{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);font-weight:900;letter-spacing:-.03em}
.project-links{display:flex;gap:18px;margin-top:18px!important}
.project-links a{font-weight:500;padding:8px 0}
/* contact */
#contact{padding-bottom:120px}
.contact-body>p{max-width:60ch}
.form{display:grid;gap:16px;padding:28px;margin-top:28px;max-width:640px}
.form label{display:grid;gap:6px;font-weight:500;font-size:.9375rem}
.form input,.form textarea{font:inherit;color:var(--ink);background:rgba(4,18,61,.6);border:1px solid rgba(239,230,212,.3);border-radius:12px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(143,176,255,.25)}
.form .btn{justify-self:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.contact-body{overflow:hidden;transition:height .35s var(--ease),opacity .2s}.contact-body.closing{opacity:0}
.thanks-msg{font-size:clamp(1.5rem,1rem + 2vw,2.5rem);font-weight:900;letter-spacing:-.03em}
/* footer */
.footer{position:relative;overflow:hidden;background:var(--ink);color:var(--bg);padding:48px var(--m) 0}
.footer a{color:var(--bg);font-weight:500}
.foot-row{margin:0 auto;max-width:1400px;font-size:.9375rem}
.foot-name{margin:12px 0 0;font-weight:900;letter-spacing:-.06em;line-height:.8;font-size:clamp(5rem,28vw,26rem);white-space:nowrap;transform:translateY(22%);color:var(--bg)}
/* cursor glow */
.cursor-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(143,176,255,.14),transparent 60%);opacity:0;transition:opacity .4s;will-change:transform}
.has-cursor .cursor-glow{opacity:1}
main,.footer{position:relative;z-index:1}
/* reveals */
.js .fade-up{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .fade-up.in{opacity:1;transform:none}
.js .d2{transition-delay:.08s}.js .d3{transition-delay:.16s}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:720px){
 .nav nav a{padding:8px 9px;font-size:.875rem}.logo img{width:32px;height:32px}
 .hero-row{grid-template-columns:1fr}.cta .btn{flex:1;justify-content:center}
 .about-intro{grid-template-columns:1fr}.headshot{width:120px;height:120px}
 .xp-list{padding-left:22px}.xp::before{left:-20px}.xp-list::before{left:5px}
}
@media (max-width:400px){.nav nav a{padding:8px 7px;font-size:.8125rem}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .intro,.cursor-glow,.hero-canvas{display:none}
 .js .fade-up{opacity:1;transform:none}
 .monument{transform:none!important}.project{transform:none!important}

}
@media (hover:none){.cursor-glow{display:none}}
/* ===== r2 motion ===== */
.mono-word .ch{display:inline-block;background:linear-gradient(100deg,var(--ink) 0 30%,var(--accent) 45%,var(--accent2) 55%,var(--ink) 70% 100%);background-size:700% 100%;background-position:calc(100% - var(--i)*14%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sweep 12s ease-in-out infinite;animation-delay:calc(var(--i)*-.25s)}
@keyframes sweep{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.js .mono-word .ch{animation:chIn .6s var(--ease) calc(.35s + var(--i)*.045s) both,sweep 12s ease-in-out calc(var(--i)*-.25s) infinite}
@keyframes chIn{from{opacity:0;transform:translateY(40%) rotate(6deg)}to{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){.mono-word .ch.wob{animation:wob .6s var(--ease),sweep 12s ease-in-out calc(var(--i)*-.25s) infinite}}
@keyframes wob{0%{transform:none}30%{transform:translateY(-10%) rotate(-5deg) scale(1.04)}60%{transform:translateY(3%) rotate(3deg)}100%{transform:none}}
/* background */
.bg-fx{position:fixed;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(40% 35% at 20% 30%,rgba(60,100,230,.28),transparent 70%),radial-gradient(35% 30% at 80% 70%,rgba(233,201,143,.10),transparent 70%);animation:drift 26s ease-in-out infinite alternate}
.bg-fx::after{content:"";position:absolute;inset:0;opacity:.07;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 baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{to{transform:translate3d(6%,-5%,0) rotate(8deg)}}
/* marquee */
.marquee{position:relative;z-index:1;overflow:hidden;border-block:1px solid var(--line);padding:16px 0;background:rgba(4,18,61,.5)}
.marquee-track{display:flex;gap:28px;width:max-content;font-weight:700;font-size:clamp(1.0625rem,1rem + .6vw,1.5rem);white-space:nowrap;animation:marq 38s linear infinite}
.marquee .sep{color:var(--accent2)}
@keyframes marq{to{transform:translateX(-50%)}}
/* scroll heartbeat */
.pulse-rule{position:relative;z-index:1;display:block;width:100%;height:clamp(60px,9vw,120px);margin-top:24px}
.pulse-rule path{fill:none;stroke:var(--accent2);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,1))}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:0 0 16px}
.stat{padding:20px 22px;margin:0}.stat dt{color:var(--muted);font-size:.9375rem}
.stat dd{margin:4px 0 0;font-weight:900;letter-spacing:-.04em;font-size:clamp(2.5rem,2rem + 2vw,3.5rem);line-height:1;font-variant-numeric:tabular-nums}
/* section titles */
.js .section h2.fade-up{clip-path:inset(0 100% 0 0);transform:translateX(-12px);transition:clip-path .6s var(--ease),transform .6s var(--ease),opacity .4s}
.js .section h2.fade-up.in{clip-path:inset(0 0 0 0);transform:none}
/* stagger */
.js .fade-up{transition-delay:calc(var(--stg,0)*70ms)}
/* timeline grows */
.xp-list::before{transform-origin:top;transform:scaleY(var(--tl,1))}
.xp::before{transition:background .3s,box-shadow .3s}.xp.lit::before{background:var(--accent);box-shadow:0 0 0 5px rgba(143,176,255,.2)}
/* magnetic */
.mono-word.off .ch{animation-play-state:paused}
/* page wipe */
.wipe{position:fixed;inset:0;z-index:80;background:linear-gradient(120deg,var(--bg2),var(--bg));transform:scaleY(0);transform-origin:bottom;pointer-events:none}
.wipe.on{transition:transform .32s cubic-bezier(.7,0,.3,1);transform:scaleY(1)}
.wipe.off{transition:transform .38s cubic-bezier(.7,0,.3,1);transform:scaleY(0);transform-origin:top}
/* flip mini card */
.flip{float:right;width:140px;height:90px;perspective:600px;margin:0 0 12px 16px}
.flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:flipit 5s var(--ease) infinite}
.flip-f,.flip-b{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:8px;border-radius:12px;font-weight:700;font-size:.875rem;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-f{background:var(--ink);color:var(--bg)}.flip-b{background:var(--accent);color:var(--bg);transform:rotateY(180deg)}
@keyframes flipit{0%,40%{transform:none}50%,90%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@media (max-width:420px){.flip{width:112px;height:76px}}
@media (prefers-reduced-motion:reduce){.js .mono-word .ch,.mono-word .ch{animation:none!important;opacity:1;transform:none}.bg-fx{animation:none}.marquee-track{animation:none;flex-wrap:wrap;width:auto;padding:0 var(--m)}.marquee-track>:nth-child(n+23){display:none}.js .section h2.fade-up{clip-path:none}.wipe{display:none}.xp-list::before{transform:none}.flip-in{animation:none}}