:root{color-scheme:dark;--ink:#061324;--sky:#26c5f7;--mint:#5eead4;--line:rgba(148,163,184,.17);--radius:22px}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{overflow-x:hidden;isolation:isolate;background-color:#06101e!important;}
body::selection{background:#22d3ee;color:#03111f}
body:has(.lightbox.open){overflow:hidden}
body,.glass-nav,.project-card{transition:background-color .35s,color .35s,border-color .35s}
#scroll-progress{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,#0ea5e9,#5eead4,#818cf8);width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:100;box-shadow:0 0 24px #22d3ee99;pointer-events:none}
.ambient-orb{position:fixed;width:500px;height:500px;border-radius:50%;background:#0ea5e910;filter:blur(85px);z-index:-2;pointer-events:none}.orb-one{left:-280px;top:32vh}
.glass-nav{background:#071321cf!important;backdrop-filter:blur(24px)!important;border-color:#25405d8c!important;box-shadow:0 16px 40px #03101b22;transition:box-shadow .3s,border-color .3s}
.glass-nav.scrolled{box-shadow:0 12px 34px #0006;border-color:#1c56777a!important}
.glass-nav nav a{font-size:12px!important;letter-spacing:.02em}
.glass-nav a.nav-active{color:#67e8f9!important;background:#0ea5e925;border-radius:9px}
#overview{min-height:790px;position:relative;background:linear-gradient(90deg,#061323fa 0%,#061324f0 47%,#061324b8 75%,#061324cc 100%),url('images/control-room.webp') center 46%/cover no-repeat!important;border-bottom:1px solid #19435a!important;padding-top:54px;padding-bottom:100px}
#overview::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 78% 18%,#0495d520,transparent 40%),linear-gradient(180deg,transparent 60%,#06101e 99%);pointer-events:none}
#overview::after{content:"";position:absolute;inset:0;opacity:.12;background-image:linear-gradient(0deg,transparent 96%,#7dd3fc25 97%),linear-gradient(90deg,transparent 96%,#7dd3fc25 97%);background-size:100px 100px;mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none}
#overview .max-w-7xl{position:relative;z-index:1}
#overview h1{font-size:clamp(3.6rem,6.5vw,6.85rem);letter-spacing:-.075em;line-height:.99;margin-top:6px;text-shadow:0 12px 30px #001c2e;max-width:780px}
#overview #hero-subtitle{font-size:clamp(1.18rem,1.7vw,1.5rem);font-weight:650;line-height:1.55;color:#7dd3fc!important;max-width:820px}
#overview #hero-summary{font-size:14.5px;line-height:1.92;color:#c3d3e3!important;max-width:760px}
#overview #hero-summary strong{color:#f8fafc!important}
#overview .hero-copy>div:first-child:not(.hero-overline){margin-bottom:0}
#overview .hero-copy{position:relative;padding-top:8px}
.hero-overline{color:#72dcef;display:flex;justify-content:center;gap:16px;align-items:center;letter-spacing:.27em;font-size:10px;font-weight:750;margin:0 0 28px}
.overline-line{height:1px;width:38px;background:linear-gradient(90deg,transparent,#49d8e3)}.overline-line:last-child{transform:rotate(180deg)}
#overview #mode-hybrid,#overview #mode-it,#overview #mode-broadcast{font-size:11px}
.hero-side{display:flex;flex-direction:column;gap:18px;align-self:start}
.hero-portrait-card{min-height:395px;max-height:460px;position:relative;overflow:hidden;border-radius:25px;border:1px solid #67e8f944;background:linear-gradient(155deg,#133456,#031120);box-shadow:0 28px 65px #03070caa,0 0 40px #0891b21f;isolation:isolate}
.hero-portrait-card::after{content:"";position:absolute;inset:0;border:1px solid #ffffff18;border-radius:inherit;pointer-events:none}
.hero-portrait-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.hero-portrait-card:hover>img{transform:scale(1.06)}
.hero-portrait-wash{position:absolute;inset:0;background:linear-gradient(180deg,#00101a00 38%,#03121bdc 100%),linear-gradient(90deg,#0b466d16,#0a1e3900)}
.hero-portrait-caption{position:absolute;bottom:22px;left:24px;font-size:9px;letter-spacing:.19em;color:#e0f2fe;font-weight:800;display:flex;gap:9px;align-items:center}
.signal-dot{display:block;width:8px;height:8px;border-radius:100%;background:#5eead4;box-shadow:0 0 13px #5eead4}
.hero-portrait-floating{position:absolute;right:16px;top:19px;display:flex;flex-direction:column;padding:12px 16px;border:1px solid #ffffff44;border-radius:14px;background:#061524b5;backdrop-filter:blur(13px);box-shadow:0 8px 30px #0005}
.hero-portrait-floating strong{font-size:28px;line-height:1;color:#fff}.hero-portrait-floating span{font-size:10px;margin-top:4px;color:#8ad8ec}
.hero-side>.rounded-2xl{background:#09182de3!important;backdrop-filter:blur(12px);border-color:#284c61!important;padding:21px!important;box-shadow:0 10px 40px #0004!important}
.hero-side .rounded-xl.bg-slate-50{background:#ffffff0d!important;border-color:#3a52633b!important}
.hero-side .rounded-xl.dark\:bg-slate-800\/60{background:#ffffff0d!important}
.hero-side .text-xs{color:#a6c6d4}
.hero-side h2,.hero-side .text-slate-900{color:#f7fbff!important}
.hero-scroll-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;color:#9ab4c8;letter-spacing:.22em;font:700 9px Inter,sans-serif;z-index:3}
.scroll-mouse{width:15px;height:24px;border-radius:10px;border:1.5px solid #77cadb;position:relative}.scroll-mouse:before{content:"";position:absolute;width:3px;height:5px;left:5px;top:4px;background:#5eead4;border-radius:5px;animation:scrollwheel 1.7s infinite}
@keyframes scrollwheel{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(7px);opacity:0}}
main>section:not(#overview):not(.visual-showcase):not(.gallery-section){position:relative}
main>section h2{letter-spacing:-.04em}
.visual-showcase{background:linear-gradient(180deg,#06101e,#0a1c2c);padding:85px 24px 90px;position:relative;border-bottom:1px solid #21415588}
.visual-showcase-inner{max-width:1248px;margin:auto}
.showcase-intro{text-align:center;max-width:610px;margin:0 auto 30px}
.micro-label{display:block;font-size:11px;color:#38bdf8;letter-spacing:.24em;font-weight:850;margin-bottom:15px}
.showcase-intro h2,.gallery-heading h2{font-size:clamp(2rem,4.2vw,3.5rem);color:#f5fbff;font-weight:850;letter-spacing:-.06em;line-height:1.07}
.showcase-intro h2 em,.gallery-heading h2 em{font-style:normal;color:#5eead4}
.showcase-intro p{font-size:14px;color:#aec3d3;margin-top:14px;line-height:1.7}
.visual-showcase-cards{display:grid;grid-template-columns:1.4fr .9fr .9fr;gap:17px}
.showcase-frame{height:260px;border-radius:23px;position:relative;overflow:hidden;border:1px solid #71b9d43d;box-shadow:0 20px 36px #0005}
.showcase-frame-primary{height:280px;transform:translateY(-10px)}
.showcase-frame img{width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.2,.65,.2,1)}
.showcase-frame:hover img{transform:scale(1.08)}
.showcase-frame::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#071422d9)}
.showcase-frame span{position:absolute;left:22px;bottom:22px;z-index:2;font-weight:750;font-size:11px;color:#fff;letter-spacing:.06em}
#leadership{padding-top:90px;padding-bottom:100px}
#leadership::before,#experience::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 6% 50%,#0ea5e90b,transparent 40%);pointer-events:none}
#projects{padding-top:100px;padding-bottom:105px}
#projects,#tech-stack{background:linear-gradient(145deg,#0a1b2c 0%,#0c1a2b 45%,#081523 100%)!important;border-color:#21445b88!important}
#projects-grid{gap:24px}
.project-card{overflow:hidden;border-radius:24px!important;border-color:#264457cc!important;background:linear-gradient(160deg,#0c2232,#091725)!important;box-shadow:0 18px 38px #0002!important;transform-origin:center}
.project-card:hover{border-color:#3ccce388!important;box-shadow:0 28px 50px #0005,0 0 0 1px #0ea5e923!important}
.project-card-img{width:100%;height:220px;overflow:hidden;position:relative;background:#102d40}
.project-card-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.04);transition:transform .9s cubic-bezier(.2,.72,.15,1)}
.project-card:hover .project-card-img img{transform:scale(1.07)}
.project-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#07162808 45%,#091725f5)}
.project-image-kicker{position:absolute;bottom:16px;left:22px;font-size:9px;font-weight:750;letter-spacing:.22em;color:#9be8ee}
.project-card-content{padding:23px 23px 25px;display:flex;flex:1;flex-direction:column;justify-content:space-between}
.project-card-content .text-slate-900{color:#f8fafc!important}
.project-card-content p,.project-card-content li{color:#b3c5d5!important}
.project-card-content li{line-height:1.65}
.project-card-content h3{line-height:1.45;font-size:18px}
.project-card-content .border-slate-100{border-color:#243f53!important}
.project-card-content .bg-slate-100{background:#183248!important;color:#b5d5e3!important}
.project-card-content>div:first-child{margin-bottom:20px}
.gallery-section{padding:104px 22px 110px;background:#06111f;position:relative}
.gallery-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 0,#0284c71c,transparent 37%);pointer-events:none}
.section-shell{max-width:1248px;margin:auto;position:relative}
.gallery-heading{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:33px}
.gallery-heading p{color:#aabccf;font-size:13.5px;line-height:1.85;max-width:420px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:215px;gap:15px}
.gallery-tile{position:relative;display:block;overflow:hidden;border-radius:21px;background:#122b3f;border:1px solid #37546c94;padding:0;text-align:left;cursor:zoom-in;box-shadow:0 16px 35px #0003;transition:border-color .3s,box-shadow .3s}
.gallery-tile:focus-visible{outline:3px solid #5eead4;outline-offset:3px}
.gallery-tile.wide{grid-column:span 2}
.gallery-tile.tall{grid-row:span 2}
.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.17,.7,.24,1);display:block}
.gallery-tile:hover img{transform:scale(1.08)}
.gallery-shade{position:absolute;inset:0;background:linear-gradient(transparent 35%,#02101ff0 100%)}
.gallery-text{position:absolute;left:20px;right:18px;bottom:17px;color:#fff;z-index:2;display:flex;flex-direction:column;gap:3px}
.gallery-text strong{font-size:15px;line-height:1.25}
.gallery-text small{font-size:10px;color:#cbdae8;line-height:1.5}
.gallery-expand{position:absolute;top:14px;right:15px;background:#071929a8;border:1px solid #b6ebfa60;border-radius:50%;display:grid;place-items:center;width:34px;height:34px;color:#fff;font-size:17px;transition:transform .3s}
.gallery-tile:hover .gallery-expand{transform:rotate(45deg)}
.gallery-note{color:#7b95a7;font-size:10px;margin-top:17px}
.lightbox{position:fixed;inset:0;z-index:300;background:#020811f5;display:none;align-items:center;justify-content:center;backdrop-filter:blur(20px);padding:32px 70px}
.lightbox.open{display:flex}
.lightbox figure{max-width:min(1150px,90vw);max-height:91vh;text-align:center;color:#cbd5e1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px}
.lightbox figure img{max-height:77vh;max-width:100%;object-fit:contain;border-radius:12px;box-shadow:0 22px 70px #000b}
.lightbox figure figcaption{font-size:12px;letter-spacing:.06em}
.lightbox button{position:absolute;background:#123249c7;border:1px solid #60c5e566;color:#fff;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .25s}
.lightbox button:hover{background:#1b5775}
.lightbox-close{right:28px;top:23px;width:46px;height:46px;font-size:30px;line-height:1}
.lightbox-control{top:50%;width:45px;height:45px;font-size:32px;transform:translateY(-50%)}
.lightbox-prev{left:25px}.lightbox-next{right:25px}
#experience{padding-top:100px;padding-bottom:110px}
#tech-stack{padding-top:105px;padding-bottom:100px}
#tech-stack>.max-w-7xl>.grid>.rounded-2xl{background:#0d2435!important;border-color:#2e4d64cc!important;box-shadow:0 17px 34px #0002!important}
#tech-stack>.max-w-7xl>.grid>.rounded-2xl:hover{border-color:#4ec5df90!important;transform:translateY(-4px);transition:transform .28s,border-color .28s}
#education{background:#102536!important;border-color:#244760!important}
#contact{padding-top:95px;padding-bottom:65px;background:radial-gradient(ellipse at 50% 0,#0a557d36,transparent 55%),#060f1c!important}
#contact h2{max-width:790px;margin:auto;line-height:1.19}
#contact a:hover{transform:translateY(-3px);box-shadow:0 14px 34px #0b61831c}
#contact a{background:#0c2132!important;border-color:#214b63!important}
#contact .text-slate-900{color:#f8fafc!important}
#contact .text-slate-600{color:#bed0dd!important}
#contact .text-slate-500{color:#95adbd!important}
#contact .text-slate-400{color:#a7bdc8!important}
.reveal-ready{opacity:0;transform:translate3d(0,37px,0) scale(.99);filter:blur(3px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1),filter .85s;transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
.reveal-ready.revealed{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
.project-card.reveal-ready.revealed:hover{transform:translateY(-8px) scale(1.005)}
#overview .hero-copy{animation:hero-copy-enter .85s ease-out both}
#overview .hero-side{animation:hero-side-enter 1.1s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes hero-copy-enter{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-side-enter{from{opacity:0;transform:translateX(37px)}to{opacity:1;transform:translateX(0)}}
/* Consistent accessible light theme, with intentional cinematic hero/gallery kept dark. */
html:not(.dark){color-scheme:light}
html:not(.dark) body{background:#f7fbfe!important;color:#0e2335!important}
html:not(.dark) .glass-nav{background:#fffffff0!important;border-color:#d4e6ed!important}
html:not(.dark) .glass-nav nav a.nav-active{color:#0369a1!important;background:#d8f4fc}
html:not(.dark) #leadership,html:not(.dark) #experience{background:#f7fbfe!important}
html:not(.dark) #projects,html:not(.dark) #tech-stack{background:#eaf3fa!important}
html:not(.dark) .project-card{background:#fff!important;border-color:#c4dbe8!important}
html:not(.dark) .project-card-content .text-slate-900,html:not(.dark) .project-card-content h3{color:#11263a!important}
html:not(.dark) .project-card-content p,html:not(.dark) .project-card-content li{color:#475d70!important}
html:not(.dark) #tech-stack>.max-w-7xl>.grid>.rounded-2xl,html:not(.dark) #education{background:#fff!important;border-color:#d1e1ed!important}
html:not(.dark) #overview{background:linear-gradient(90deg,#061323f8 0%,#061324ec 50%,#061324b8 100%),url('images/control-room.webp') center/cover no-repeat!important}
html:not(.dark) #overview,html:not(.dark) .visual-showcase,html:not(.dark) .gallery-section,html:not(.dark) #contact{color:#fff!important}
html:not(.dark) #overview .text-slate-600{color:#cfdae5!important}
html:not(.dark) #overview h1{color:#fff!important}
html:not(.dark) #overview .hero-copy strong{color:#f8fafc!important}
html:not(.dark) #overview .hero-copy .text-slate-700{color:#cee4ed!important}
html:not(.dark) #overview .hero-copy .bg-slate-200\/80{background:#0d2036f2!important}
html:not(.dark) #overview .hero-copy button:not(.bg-sky-600){color:#a7d3e3!important}
html:not(.dark) #overview .hero-copy .bg-white{background:#142637!important}
html:not(.dark) .hero-side h2{color:#fff!important}
html:not(.dark) #contact h2{color:#fff!important}
@media (max-width:1100px){#overview h1{font-size:clamp(3.15rem,6.1vw,5rem)}.hero-side .hero-portrait-card{min-height:380px}.glass-nav nav a{padding:8px!important;font-size:11px!important}}
@media (max-width:1023px){#overview{min-height:unset;padding-bottom:90px}.hero-side{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}.hero-portrait-card{min-height:450px;max-height:500px}.hero-side>.rounded-2xl{height:100%}.hero-overline{justify-content:flex-start}}
@media (max-width:760px){#overview{padding-top:45px;padding-bottom:90px;background-position:65% center!important}#overview h1{font-size:clamp(3.25rem,13vw,5.1rem)}#overview .hero-copy{padding:0}#overview #hero-summary{font-size:14px;line-height:1.8}.hero-side{display:flex;flex-direction:column}.hero-portrait-card{min-height:400px;max-height:550px}.hero-side>.rounded-2xl{height:auto}.hero-overline{font-size:8px;letter-spacing:.15em;gap:9px}.visual-showcase{padding:70px 18px}.visual-showcase-cards{grid-template-columns:repeat(2,1fr);gap:12px}.showcase-frame-primary{grid-column:span 2;transform:none}.showcase-frame{height:210px}.showcase-frame-primary{height:240px}.gallery-heading{flex-direction:column;align-items:start;gap:14px}.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px;gap:10px}.gallery-tile.wide{grid-column:span 2}.gallery-tile.tall{grid-row:span 2}.gallery-text{left:12px;bottom:12px}.gallery-text strong{font-size:12px}.gallery-text small{font-size:9px}.gallery-expand{width:29px;height:29px;font-size:14px;top:8px;right:8px}.gallery-section{padding:80px 13px}.lightbox{padding:24px 10px}.lightbox-control{top:auto;bottom:10px;transform:none}.lightbox-prev{left:30px}.lightbox-next{right:30px}.lightbox-close{top:14px;right:14px}#projects,#tech-stack,#leadership,#experience,#contact{padding-top:76px;padding-bottom:80px}.project-card-img{height:195px}}
@media (max-width:430px){.visual-showcase-cards{grid-template-columns:1fr}.showcase-frame-primary{grid-column:span 1}.showcase-frame{height:210px}.gallery-grid{grid-auto-rows:155px}#overview h1{font-size:3.3rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal-ready{opacity:1!important;transform:none!important;filter:none!important}}
@media print{#scroll-progress,.ambient-orb,.hero-scroll-hint,.visual-showcase,.gallery-section,.lightbox{display:none!important}.reveal-ready{opacity:1!important;transform:none!important;filter:none!important}#overview{min-height:unset!important;background:white!important;color:#0f172a!important;padding:20px!important}#overview h1{color:#111827!important;text-shadow:none!important;font-size:38px!important}#overview #hero-summary,#overview #hero-subtitle{color:#111827!important}.hero-side .hero-portrait-card{display:none!important}.hero-side>.rounded-2xl{background:#eef6fa!important;color:#0f172a!important}.project-card{break-inside:avoid;background:#fff!important}.project-card-img{height:120px}.project-card-content *{color:#0f172a!important}#projects,#tech-stack,#contact{background:white!important}#contact *{color:#0f172a!important}section{padding-top:24px!important;padding-bottom:24px!important}}


/* V2 — photographic backdrops, not illustrative project-card thumbnails. */
#overview{background:linear-gradient(96deg,rgba(3,14,28,.95) 0%,rgba(5,20,37,.88) 53%,rgba(6,20,36,.75) 100%), url('images/control-room.webp') center 45%/cover no-repeat!important;min-height:690px}
#overview h1{font-size:clamp(3.6rem,6.7vw,6.6rem)}
.hero-side{align-self:center!important;gap:0!important}
.hero-side>.rounded-2xl{padding:27px!important;background:rgba(7,24,42,.88)!important;border-color:rgba(104,213,247,.28)!important;box-shadow:0 28px 90px rgba(0,0,0,.42)!important}
.visual-interlude{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;padding:100px 26px;isolation:isolate;overflow:hidden;text-align:center;background:linear-gradient(100deg,rgba(1,13,25,.8),rgba(4,20,39,.67),rgba(2,13,30,.8)),url('images/audio-console.webp') center 52%/cover no-repeat;box-shadow:inset 0 32px 70px rgba(1,10,20,.38),inset 0 -32px 65px rgba(1,10,20,.5)}
.visual-interlude::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 52% 55%,rgba(7,154,197,.15),transparent 58%)}
.visual-interlude-inner{position:relative;max-width:850px;margin:auto}
.interlude-rule{display:block;width:64px;height:2px;background:linear-gradient(90deg,#38bdf8,#5eead4);margin:0 auto 26px;border-radius:3px}
.interlude-overline{font-size:11px;font-weight:750;letter-spacing:.25em;color:#b0e9f8;margin:0 0 16px}
.visual-interlude h2{font-size:clamp(2.2rem,5vw,4.6rem);font-weight:850;line-height:1.11;letter-spacing:-.07em;color:#fff;text-shadow:0 8px 32px #0008}
.visual-interlude h2 em{font-style:normal;color:#70f0e0}
.interlude-subtitle{margin:24px auto 0;max-width:700px;color:#e2ecf5;font-size:14px;line-height:1.9}
/* Photo backgrounds apply to entire sections, never individual project cards. */
#projects{background:linear-gradient(105deg,rgba(3,16,30,.96),rgba(7,25,43,.9) 47%,rgba(3,16,29,.92)),url('images/studio-workflow.webp') center 42%/cover fixed!important}
#tech-stack{background:linear-gradient(115deg,rgba(6,19,34,.97),rgba(6,23,40,.91) 50%,rgba(6,20,35,.95)),url('images/studio-operations.webp') center 42%/cover fixed!important}
#contact{background:linear-gradient(110deg,rgba(3,15,27,.96),rgba(5,19,33,.88),rgba(4,18,33,.94)),url('images/field-transmission.webp') center 45%/cover fixed!important}
#projects::after,#tech-stack::after,#contact::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(97,223,241,.14) .6px,transparent .7px);background-size:23px 23px;opacity:.17}
#projects>.max-w-7xl,#tech-stack>.max-w-7xl,#contact>.max-w-5xl{position:relative;z-index:1}
#projects-grid{gap:20px}
.project-card-text-only{background:linear-gradient(145deg,rgba(9,30,49,.93),rgba(7,22,40,.94))!important;backdrop-filter:blur(14px);border:1px solid rgba(111,196,226,.24)!important;min-height:330px;position:relative;overflow:hidden;box-shadow:0 19px 38px rgba(0,0,0,.2)!important}
.project-card-text-only::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#38bdf8 27%,#5eead4 68%,transparent);opacity:.6}
.project-card-text-only::after{content:'';pointer-events:none;position:absolute;top:-100px;right:-125px;width:280px;height:280px;border:1px solid rgba(105,216,234,.12);border-radius:50%;box-shadow:0 0 0 40px rgba(105,216,234,.035),0 0 0 80px rgba(105,216,234,.019)}
.project-card-text-only:hover{background:linear-gradient(145deg,rgba(12,41,64,.96),rgba(7,25,44,.98))!important;border-color:rgba(78,214,237,.64)!important;box-shadow:0 24px 60px rgba(0,0,0,.35)!important}
.project-card-text-only .project-card-content{position:relative;z-index:1;padding:27px 28px 25px;min-height:100%}
.project-text-ornament{width:28px;height:2px;background:#67e8f9;margin:0 0 21px;box-shadow:0 0 18px #22d3ee99}
.project-card-content>div:first-child{margin-bottom:18px}
.project-card-text-only h3{font-size:18px;line-height:1.37}
.project-card-text-only .text-xs{line-height:1.7}
/* Dark photographs remain readable regardless of selected light/dark theme. */
html:not(.dark) #projects,html:not(.dark) #tech-stack,html:not(.dark) #contact,html:not(.dark) .visual-interlude{color-scheme:dark;color:#fff!important}
html:not(.dark) #projects h2,html:not(.dark) #projects h3,html:not(.dark) #tech-stack h2,html:not(.dark) #tech-stack h3,html:not(.dark) #contact h2{color:#f8fafc!important}
html:not(.dark) #projects p,html:not(.dark) #projects li,html:not(.dark) #tech-stack p{color:#bdd0de!important}
html:not(.dark) #projects .project-card-text-only{background:linear-gradient(145deg,rgba(9,30,49,.95),rgba(7,22,40,.95))!important;border-color:rgba(106,194,226,.28)!important}
html:not(.dark) #projects .project-card-content .text-slate-900{color:#f8fafc!important}
html:not(.dark) #projects .project-card-content li,html:not(.dark) #projects .project-card-content p{color:#bccfdd!important}
html:not(.dark) #projects .project-card-content .bg-slate-100{background:#183248!important;color:#bad5e4!important}
html:not(.dark) #tech-stack>.max-w-7xl>.grid>.rounded-2xl,html:not(.dark) #education{background:rgba(9,31,49,.93)!important;border-color:#30566a!important}
html:not(.dark) #tech-stack .text-slate-900,html:not(.dark) #education .text-slate-900{color:#eef8ff!important}
html:not(.dark) #tech-stack .text-slate-600,html:not(.dark) #education .text-slate-600,html:not(.dark) #tech-stack .text-slate-700{color:#c3d5e4!important}
html:not(.dark) #tech-stack .bg-slate-100{background:#153248!important}
/* Preserve full-page screenshot readability even before reveal intersection. */
.reveal-ready:not(.revealed){opacity:.84;filter:none;transform:translate3d(0,28px,0) scale(.995)}
.reveal-ready.revealed{opacity:1;filter:none;transform:translate3d(0,0,0) scale(1)}
@media (max-width:1023px){.hero-side{display:block!important}.hero-side>.rounded-2xl{max-width:100%}#overview{min-height:unset}}
@media (max-width:760px){#overview{background-position:58% center!important}.visual-interlude{min-height:380px;padding:80px 20px}.interlude-overline{font-size:9px;letter-spacing:.15em}.project-card-text-only .project-card-content{padding:23px 20px}.project-card-text-only{min-height:unset}#projects,#tech-stack,#contact{background-attachment:scroll!important}}
@media (prefers-reduced-motion:reduce){.reveal-ready:not(.revealed){opacity:1!important;transform:none!important;filter:none!important}#projects,#tech-stack,#contact{background-attachment:scroll!important}}
@media print{.visual-interlude{display:none!important}.project-card-text-only{background:#fff!important;min-height:unset!important;box-shadow:none!important}.project-card-text-only::before,.project-card-text-only::after{display:none!important}#projects,#tech-stack,#contact{background:#fff!important}}


/* V3 — focused section navigation and auto-retracting header. */
.glass-nav{transform:translate3d(0,0,0);transition:transform .34s cubic-bezier(.22,.7,.2,1), background-color .25s, box-shadow .25s;will-change:transform}
.glass-nav.header-hidden{transform:translate3d(0,calc(-100% - 2px),0)}
#scroll-progress{z-index:60}
.portfolio-all-link{color:#84e9f3!important;border:1px solid rgba(56,189,248,.22);background:rgba(56,189,248,.06);font-weight:700}
.portfolio-all-link:hover,.portfolio-all-link.nav-active{background:rgba(10,154,200,.22)!important;color:#c5faff!important;border-color:rgba(56,189,248,.55)}
.glass-nav nav a.nav-active:not(.portfolio-all-link){background:rgba(56,189,248,.14)!important;color:#61dcfa!important}
#mobile-menu a.nav-active{background:rgba(14,165,233,.2)!important;color:#9cecff!important}
main > section[hidden],#tech-stack>.max-w-7xl>[hidden],#section-view-toolbar[hidden]{display:none!important}
.section-view-toolbar{max-width:1280px;margin:0 auto;padding:24px 32px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;position:relative;z-index:5}
.section-view-label{display:inline-flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:.16em;color:#7ea7bf}
.section-view-label strong{color:#d7f6ff;font-size:12px;letter-spacing:.035em;margin-left:4px}
.section-view-indicator{height:7px;width:7px;border-radius:50%;background:#40dcd6;box-shadow:0 0 0 4px rgba(64,220,214,.11),0 0 22px rgba(64,220,214,.5)}
.section-return-link{font-size:12px;color:#b7eaff;font-weight:750;white-space:nowrap;border:1px solid rgba(72,196,236,.35);padding:10px 15px;border-radius:11px;background:rgba(9,36,56,.7);transition:background .2s,transform .2s}
.section-return-link:hover{background:rgba(9,106,148,.35);transform:translateY(-1px)}
body.section-isolated main{min-height:calc(100svh - 64px);display:flex;flex-direction:column}
body.section-isolated main > section:not([hidden]){flex:1 0 auto;min-height:calc(100svh - 137px)}
body.section-isolated #overview{min-height:calc(100svh - 137px)!important}
body.section-isolated #leadership,body.section-isolated #experience,body.section-isolated #projects,body.section-isolated #tech-stack,body.section-isolated #contact{padding-top:48px;padding-bottom:80px}
body.section-isolated[data-active-section="contact"] #contact{display:flex;align-items:center;justify-content:center}
body.section-isolated[data-active-section="contact"] #contact>.max-w-5xl{width:100%}
body.section-isolated[data-active-section="education"] #tech-stack{display:flex;align-items:center;justify-content:center}
body.section-isolated[data-active-section="education"] #tech-stack>.max-w-7xl{width:100%;padding-top:20px;padding-bottom:35px}
body.section-isolated[data-active-section="education"] #education{margin-top:0!important;padding:35px 35px!important;box-shadow:0 30px 80px rgba(0,0,0,.22)}
body.section-isolated[data-active-section="education"] #education>.grid{gap:28px}
body.section-isolated[data-active-section="education"] #tech-stack>.max-w-7xl>[hidden]{display:none!important}
body.section-isolated[data-active-section="tech-stack"] #education{display:none!important}
@media (max-width:760px){.section-view-toolbar{padding:18px 18px 0;align-items:flex-start;flex-direction:column;gap:11px}.section-view-label{font-size:9px}.section-view-label strong{font-size:11px}.section-return-link{padding:9px 12px}body.section-isolated main > section:not([hidden]){min-height:calc(100svh - 185px)}body.section-isolated #overview{min-height:unset!important}body.section-isolated #leadership,body.section-isolated #experience,body.section-isolated #projects,body.section-isolated #tech-stack,body.section-isolated #contact{padding-top:34px;padding-bottom:60px}body.section-isolated[data-active-section="education"] #education{padding:24px 19px!important}}
@media (prefers-reduced-motion:reduce){.glass-nav{transition:none!important}}
@media print{#section-view-toolbar{display:none!important}main>section[hidden]{display:block!important}#tech-stack>.max-w-7xl>[hidden]{display:block!important}body.section-isolated #education{display:block!important}body.section-isolated main{min-height:unset!important;display:block!important}body.section-isolated main>section{min-height:unset!important;display:block!important}}


/* V4 — cinematic documentary/editorial photographs, with no photo/project captions. */
#overview{background-image:linear-gradient(98deg,rgba(3,15,29,.97) 0%,rgba(4,16,31,.91) 56%,rgba(5,20,35,.76) 100%),url('images/broadcast-wide.webp')!important;min-height:740px}
#overview .hero-side{gap:14px;max-width:100%}
.hero-editorial-image{height:312px;width:100%;overflow:hidden;position:relative;border-radius:23px;background:#132838;border:1px solid rgba(105,204,236,.32);box-shadow:0 22px 53px rgba(0,0,0,.35),0 0 60px rgba(32,172,225,.08)}
.editorial-image-frame{isolation:isolate}
.hero-editorial-image img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;filter:saturate(.94) contrast(1.05);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.hero-editorial-image:hover img{transform:scale(1.04)}
.hero-editorial-image::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,10,22,.02) 40%,rgba(4,22,38,.5) 100%),linear-gradient(90deg,rgba(12,42,59,.1),transparent)}
.hero-editorial-image .frame-glint{position:absolute;inset:10px;border:1px solid rgba(255,255,255,.2);border-radius:17px;pointer-events:none;z-index:1}
#overview .hero-side>.rounded-2xl{padding:18px!important}
#overview .hero-side>.rounded-2xl .space-y-2.pt-1{margin-top:8px}
#overview .hero-side>.rounded-2xl .grid .text-2xl{font-size:1.28rem}
#overview .hero-side>.rounded-2xl .grid{gap:8px}
#overview .hero-side>.rounded-2xl .grid>div{padding:11px!important}
#overview .hero-side>.rounded-2xl .text-xs{font-size:10px}
#overview .hero-side>.rounded-2xl>.border-b{padding-bottom:10px!important}
#overview .hero-copy{align-self:center}

/* Side image sits alongside leadership content without being assigned to one project. */
#leadership{position:relative}
#leadership>.flex:first-child,#leadership>.grid{position:relative;z-index:1}
.editorial-wide-feature{display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;min-height:260px;margin-bottom:30px;border-radius:22px;border:1px solid rgba(85,171,205,.25);background:#0a2338;box-shadow:0 20px 65px rgba(0,0,0,.17)}
.editorial-wide-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:38px 45px;background:linear-gradient(90deg,#0c2337 0%,#0c2337 74%,rgba(12,35,55,.5) 100%)}
.editorial-overline{color:#66e1ee;font:750 10px Inter,sans-serif;letter-spacing:.21em;margin-bottom:15px}
.editorial-wide-copy h3{font-size:clamp(1.65rem,2.5vw,2.7rem);letter-spacing:-.06em;font-weight:850;line-height:1.14;color:#f5fbff}
.editorial-wide-copy h3 em{font-style:normal;color:#86e8d9}
.editorial-wide-copy p{color:#b6cad9;max-width:430px;font-size:13px;line-height:1.85;margin-top:18px}
.editorial-wide-image{position:relative;min-height:245px;overflow:hidden}
.editorial-wide-image img{width:100%;height:100%;object-fit:cover;object-position:center 45%;position:absolute;inset:0;filter:saturate(.92);transition:transform 1s ease}
.editorial-wide-image::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0c2337 0%,rgba(12,35,55,.2) 30%,transparent 70%),linear-gradient(0deg,rgba(3,14,25,.35),transparent 70%)}
.editorial-wide-feature:hover img{transform:scale(1.035)}

/* Decorative panoramic photo between project heading and text-only project cards. */
#projects{background-image:linear-gradient(112deg,rgba(2,13,26,.91),rgba(5,21,38,.80) 46%,rgba(2,13,26,.87)),url('images/studio-mixer.webp')!important;background-attachment:scroll!important;background-position:center 40%!important;background-size:cover!important}
.project-photo-accent{height:148px;position:relative;display:flex;align-items:center;gap:24px;margin:0 0 28px;overflow:hidden;border-radius:18px;border:1px solid rgba(105,195,216,.25);background:#0b2037}
.project-photo-accent img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:saturate(.83) brightness(.75);mask-image:linear-gradient(90deg,transparent 2%,black 30%,black 75%,transparent 100%)}
.project-photo-accent:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#071b2ff0 0%,transparent 42%,transparent 70%,#071b2fcc 100%);pointer-events:none}
.project-photo-accent .accent-line{height:1px;background:linear-gradient(90deg,#4ae3ea,transparent);width:15%;position:relative;z-index:2;opacity:.75}
.project-photo-accent .accent-line:last-child{margin-left:auto;transform:rotate(180deg)}

/* Career story: true sidebar photographs, not a photo-to-job mapping. */
.timeline-editorial-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:32px;align-items:start}
.timeline-editorial-layout .timeline-progression{min-width:0}
.timeline-visual-rail{position:relative;min-width:0;align-self:stretch}
.timeline-sticky-art{position:sticky;top:95px;display:grid;gap:15px}
.timeline-sticky-art>div{overflow:hidden;border-radius:23px;border:1px solid rgba(105,191,221,.25);background:#10283c;box-shadow:0 20px 45px rgba(0,0,0,.17)}
.timeline-photo-large{height:390px}
.timeline-photo-small{height:195px}
.timeline-sticky-art img{height:100%;width:100%;object-fit:cover;display:block;filter:saturate(.94);transition:transform .85s ease}
.timeline-sticky-art>div:hover img{transform:scale(1.04)}
.timeline-photo-large img{object-position:53% 45%}
.timeline-photo-small img{object-position:center 55%}

/* Systems & Credentials: neutral contextual visuals separate from actual projects. */
#tech-stack{background-image:linear-gradient(112deg,rgba(5,19,32,.92),rgba(5,22,37,.83),rgba(5,19,32,.90)),url('images/engineering-desk.webp')!important;background-size:cover!important;background-attachment:scroll!important}
.technology-side-feature{height:138px;margin:0 0 27px;border-radius:18px;overflow:hidden;position:relative;border:1px solid rgba(103,196,216,.2)}
.technology-side-feature img{height:100%;width:100%;object-fit:cover;object-position:50% 53%;filter:brightness(.74) saturate(.85)}
.technology-side-feature:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#071b2bdc,transparent 25%,transparent 75%,#071b2bdc)}
#education.has-credential-photo{position:relative;overflow:hidden;isolation:isolate}
#education.has-credential-photo>.grid{position:relative;z-index:2}
.credentials-photo{position:absolute;right:0;top:0;bottom:0;width:36%;z-index:0;background:linear-gradient(90deg,#0b2337 0%,rgba(11,35,55,.46) 44%,rgba(11,35,55,.48) 100%),url('images/electronics-work.webp') center / cover;opacity:.52;mask-image:linear-gradient(90deg,transparent,black 28%)}
body.section-isolated[data-active-section="education"] #tech-stack{background-image:linear-gradient(100deg,rgba(4,17,31,.93),rgba(5,22,39,.88)),url('images/engineering-hands.webp')!important;background-position:center 45%!important}

/* Contact: a genuine side visual, without any photo/project association. */
#contact{min-height:620px;overflow:hidden;isolation:isolate;background-image:linear-gradient(110deg,rgba(3,15,27,.94),rgba(5,19,33,.89),rgba(4,18,33,.93)),url('images/field-engineering.webp')!important;background-size:cover!important;background-position:center 45%!important;background-attachment:scroll!important}
.contact-photo-side{position:absolute;left:max(2vw,calc((100vw - 1330px) / 2));top:55px;width:clamp(160px,25vw,380px);height:calc(100% - 110px);max-height:515px;overflow:hidden;border-radius:24px;border:1px solid rgba(88,192,221,.26);opacity:.93;box-shadow:0 20px 70px rgba(0,0,0,.28)}
.contact-photo-side img{height:100%;width:100%;object-fit:cover;object-position:center 38%}
.contact-photo-side:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,17,29,.05),rgba(4,17,30,.2)),linear-gradient(0deg,#06101abf,transparent 60%)}
#contact>.max-w-5xl{padding-left:clamp(190px,26vw,365px);max-width:1190px}
body.section-isolated[data-active-section="contact"] #contact{min-height:calc(100svh - 170px)}

/* Images are decorative and noninteractive; no misleading image captions are present. */
@media(min-width:1024px){#overview .grid.lg\:grid-cols-12{align-items:center}#overview .hero-side{transform:translateY(4px)}}
@media(max-width:1023px){.timeline-editorial-layout{grid-template-columns:1fr}.timeline-visual-rail{display:grid;gap:12px}.timeline-sticky-art{position:relative;top:0;grid-template-columns:1fr 1fr}.timeline-photo-large,.timeline-photo-small{height:240px}#contact>.max-w-5xl{padding-left:clamp(120px,19vw,240px)}}
@media(max-width:767px){
 #overview{min-height:unset!important;background-position:53% center!important}
 .hero-editorial-image{height:345px;max-width:420px;margin:0 auto 14px}
 .editorial-wide-feature{grid-template-columns:1fr;min-height:unset}
 .editorial-wide-copy{padding:28px 26px 32px}
 .editorial-wide-image{min-height:205px}
 .editorial-wide-image::after{background:linear-gradient(0deg,#0c2337 0%,transparent 35%)}
 .project-photo-accent{height:100px}
 .timeline-sticky-art{grid-template-columns:1fr 1fr;gap:10px}.timeline-photo-large,.timeline-photo-small{height:180px}
 .technology-side-feature{height:105px}
 .credentials-photo{width:58%;opacity:.25}
 .contact-photo-side{position:relative;left:auto;top:auto;width:min(100% - 42px,390px);height:230px;margin:0 auto 23px;border-radius:18px;max-height:none}
 #contact>.max-w-5xl{padding-left:16px!important;padding-right:16px!important}
 #contact{min-height:0!important;padding-top:40px!important}
 .hero-editorial-image,.timeline-sticky-art>div,.editorial-wide-feature{box-shadow:0 14px 40px rgba(0,0,0,.2)}
}
@media(max-width:420px){.hero-editorial-image{height:280px}.timeline-photo-large,.timeline-photo-small{height:135px}}
@media(prefers-reduced-motion:reduce){.hero-editorial-image img,.timeline-sticky-art img,.editorial-wide-image img{transition:none!important}}
@media print{.hero-editorial-image,.editorial-wide-image,.project-photo-accent,.timeline-visual-rail,.technology-side-feature,.credentials-photo,.contact-photo-side{display:none!important}.editorial-wide-feature{display:block!important;box-shadow:none!important;background:white!important}.editorial-wide-copy{background:white!important}.editorial-wide-copy h3,.editorial-wide-copy p{color:#111827!important}.timeline-editorial-layout{display:block!important}#contact>.max-w-5xl{padding-left:0!important}}