@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#fff;--fg:#122d43;--muted:#567082;--line:#d5e5ed;--blue:#137dcc;--teal:#008d92;--surface:#eff8fc;--gradient:linear-gradient(120deg,#07859a,#177ddd)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--fg);font:16px/1.7 'DM Sans',sans-serif;background:var(--bg)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:5px}h1,h2,h3{font-family:'Space Grotesk',sans-serif;line-height:1.13}h1,h2,h3,p{margin-top:0}em{font-style:normal;color:var(--teal)}.scroll-progress{height:3px;background:var(--gradient);position:fixed;top:0;left:0;width:0;z-index:100}header{height:94px;padding:0 4%;display:flex;align-items:center;gap:24px;background:#ffffffec;backdrop-filter:blur(18px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.brand{font:600 20px/1.2 'Space Grotesk';letter-spacing:-.6px;white-space:nowrap}.brand span{display:block;font:9px/1.5 'DM Sans';letter-spacing:1.5px;color:var(--teal);margin-top:7px}nav{display:flex;gap:21px;margin-left:auto;font-size:14px}nav a{position:relative;padding:10px 0}nav a::after{content:'';height:2px;position:absolute;bottom:3px;left:0;width:0;background:var(--teal);transition:width .25s}nav a:hover::after,nav a[aria-current]::after{width:100%}nav a[aria-current]{color:var(--teal)}.cv{font-size:13px;border:1px solid #b7d2e0;padding:9px 14px;border-radius:8px;white-space:nowrap}.menu{display:none;border:0;background:none;color:var(--fg);font-size:26px}.hero{padding:70px 6% 60px;display:grid;grid-template-columns:1.1fr 1fr;gap:5%;align-items:center;min-height:760px;background:radial-gradient(ellipse at 90% 10%,#c9edff 0,transparent 50%),radial-gradient(ellipse at 0 90%,#dff9f3 0,transparent 45%),#f7fcff;overflow:hidden}.eyebrow,.micro,.date{font-family:'Space Grotesk';font-size:12px;letter-spacing:1.6px;color:var(--teal)}.intro{margin:30px 0 10px;font-size:20px;color:var(--muted)}.hero h1{font-size:clamp(50px,5.5vw,84px);letter-spacing:-3.8px;margin-bottom:25px;line-height:1.04}.hero h1 em{background:var(--gradient);color:transparent;background-clip:text}.hero h2{font-size:24px;letter-spacing:-.5px;margin-bottom:12px}.hero-sub{color:var(--muted);font-size:17px}.hero-sub strong{font-weight:500;color:var(--teal)}.hero-description{max-width:460px;color:var(--muted);font-size:16px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:27px 0}.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #b7d2e0;border-radius:9px;padding:12px 23px;font-size:14px;background:white;transition:transform .25s,box-shadow .25s}.button:hover{transform:translateY(-3px);box-shadow:0 8px 22px #14749a1a}.primary{background:var(--gradient);border:0;color:white;font-weight:600;box-shadow:0 8px 25px #137dcc26}.scroll-cue{display:flex;align-items:center;gap:16px;font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:35px}.scroll-cue span{font-size:22px;color:var(--teal);animation:bounce 2s infinite}.portrait-stage{position:relative;padding:40px 20px 80px;min-width:0;animation:arrive 1s both}.portrait-image{position:relative;border-radius:38% 38% 20px 20px;overflow:hidden;background:white;box-shadow:0 30px 70px #157db329;border:8px solid #ffffffd9;z-index:2;transform:rotate(2deg)}.portrait-image img{display:block;width:100%;aspect-ratio:1/1.06;object-fit:cover;object-position:center;transform:rotate(-2deg) scale(1.035)}.portrait-ring{position:absolute;inset:0 0 50px;border:1px dashed #0c8e9a4d;border-radius:48%;transform:rotate(-10deg);animation:orbit 50s linear infinite}.floating-label{position:absolute;z-index:3;padding:16px 22px;border:1px solid #d6edf5;background:#ffffffef;box-shadow:0 12px 32px #19567118;border-radius:12px;animation:float 5s ease-in-out infinite}.floating-label span{display:block;font-size:10px;letter-spacing:1.5px;color:var(--teal)}.floating-label strong{font-size:17px;font-weight:500}.fl-one{top:20px;right:-20px}.fl-two{left:-30px;bottom:120px;animation-delay:-2.5s}.portrait-name{position:absolute;bottom:14px;right:20px;text-align:right;font:600 19px 'Space Grotesk'}.portrait-name span{display:block;font-size:9px;letter-spacing:2px;font-weight:400;color:var(--teal);margin-top:9px}.stats{padding:33px 6%;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:white}.stats div{border-right:1px solid var(--line);padding-left:30px}.stats div:first-child{padding-left:0}.stats div:last-child{border:0}.stats strong{display:block;font:500 32px 'Space Grotesk';color:var(--blue)}.stats span{font-size:13px;color:var(--muted)}.section{padding:90px 6%}.section-top{display:flex;justify-content:space-between;margin-bottom:30px}.micro{color:var(--muted)}.section h2{font-size:clamp(36px,4vw,58px);font-weight:500;letter-spacing:-2px;margin-bottom:28px}.heading-row{display:flex;justify-content:space-between;align-items:end;gap:40px}.heading-row p,.muted{color:var(--muted)}.heading-row p{font-size:15px}.network-section{background:linear-gradient(180deg,white,#f3fbfd)}.signal-map{height:320px;position:relative;margin-top:30px}.signal-lines{position:absolute;width:100%;height:100%;inset:0;stroke:#2ba0bd;stroke-width:2;fill:none;stroke-dasharray:7 9;animation:signal 2s linear infinite}.signal-node{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--line);padding:18px 24px;border-radius:12px;box-shadow:0 6px 22px #1861770a;min-width:180px;transition:box-shadow .3s,border-color .3s}.signal-node span{display:block;color:var(--teal);font-size:10px;letter-spacing:1.5px}.signal-node strong{display:block;font:500 20px 'Space Grotesk';margin:7px 0}.signal-node small{font-size:12px;color:var(--muted)}.signal-node:hover,.signal-node.active{border-color:var(--teal);box-shadow:0 10px 26px #008d921a}.sensor{left:16%;top:22%}.board{left:50%;top:50%;background:var(--gradient);color:white;border:0}.board span,.board small{color:#e1ffff}.cloud{left:84%;top:22%}.circuit{left:16%;top:78%}.robot{left:84%;top:78%}.signal-detail{max-width:710px;text-align:center;margin:25px auto 0;color:var(--muted);min-height:58px}.projects{background:#eff7fc}.filters{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 32px}.filters button{padding:9px 20px;background:transparent;border:1px solid #b8d8e6;color:var(--muted);font-size:14px;border-radius:30px}.filters button.active{background:var(--teal);border-color:var(--teal);color:white}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.project-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .35s,box-shadow .35s}.project-card:hover{transform:translateY(-7px);box-shadow:0 20px 45px #16587617}.project-image{height:270px;position:relative;overflow:hidden}.project-image img{height:100%;width:100%;object-fit:cover;transition:transform .7s}.project-card:hover img{transform:scale(1.06)}.project-index{position:absolute;top:20px;left:20px;background:#ffffffeb;padding:6px 11px;border-radius:6px;font:11px monospace;color:var(--teal)}.project-body{padding:27px}.tags{font-size:11px;letter-spacing:1px;color:var(--teal)}.project-body h3{font-size:27px;letter-spacing:-.6px;font-weight:500;margin:12px 0}.project-body p{color:var(--muted);font-size:15px}.text-link,.case-button{color:var(--blue);border-bottom:1px solid #137dcc66;padding-bottom:3px;font-size:14px}.image-note{color:var(--muted);font-size:12px;margin:25px 0 0}.section-link{text-align:center;padding:0 6% 65px;background:#eff7fc}.journey-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:8%}.timeline{border-left:2px solid #bddce7;padding-left:35px}.timeline article{position:relative;padding-bottom:40px}.timeline article::before{content:'';position:absolute;left:-43px;top:7px;width:14px;height:14px;border:3px solid var(--teal);border-radius:50%;background:white;box-shadow:0 0 0 5px #e4f7f8}.timeline h3{font-size:26px;font-weight:500;margin:10px 0 6px}.timeline a{color:var(--blue)}.timeline p{font-size:15px;color:var(--muted);margin-top:14px}.timeline article:last-child{padding:0}.achievements{background:#f4fbfb}.awards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}.awards article{border:1px solid #d2e9e9;padding:26px;border-radius:14px;background:white;transition:transform .3s}.awards article:hover{transform:translateY(-7px)}.award-num{display:block;font:500 43px 'Space Grotesk';color:var(--teal);letter-spacing:-2px;margin-bottom:24px}.award-num span{font-size:22px}.award-num.smaller{font-size:30px;padding:8px 0}.awards h3{font-size:19px}.awards p{font-size:14px;color:var(--muted)}.awards .date{font-size:10px;letter-spacing:1px}.gallery-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px}figure{margin:0}figure img{height:290px;width:100%;object-fit:cover;border-radius:12px;transition:transform .4s}figure:hover img{transform:translateY(-5px)}figcaption{font-size:13px;color:var(--muted);margin-top:10px}.contact{background:var(--gradient);color:white;position:relative;overflow:hidden}.contact .eyebrow,.contact em{color:#a7ffea}.contact h2{font-size:clamp(48px,6vw,85px);letter-spacing:-3px;margin:28px 0 38px}.contact-row{display:flex;align-items:center;gap:35px}.contact-row .primary{background:white;color:var(--teal)}.contact-row .text-link{color:white;border-color:#ffffff90}.contact-row span{margin-left:auto;color:#e6f5ff;font-size:14px}.page-intro{padding:70px 6% 55px;background:radial-gradient(ellipse at right,#d1f0ff,transparent 65%),#f1faff;animation:arrive .7s both}.page-intro h1{font-size:clamp(44px,5.2vw,75px);letter-spacing:-3px;margin:24px 0}.page-intro p{color:var(--muted);font-size:18px;max-width:680px}.about-layout{display:grid;grid-template-columns:.8fr 1.1fr;gap:9%;align-items:center}.about-photo{position:relative}.about-photo img{width:100%;display:block;border-radius:20px}.photo-caption{background:white;border:1px solid var(--line);border-radius:12px;padding:18px 22px;position:relative;margin:-40px 25px 0;font:500 20px 'Space Grotesk';box-shadow:0 15px 35px #153e5710}.photo-caption span{display:block;font-size:12px;color:var(--teal);margin-top:7px}.about-layout p,.about-grid p{color:var(--muted)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:7%}.capabilities{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}.cap{border:1px solid var(--line);border-radius:12px;padding:25px;background:white;text-align:left;color:var(--fg)}.cap.active{border-color:var(--teal);background:#eefafb}.cap span{font-size:12px;color:var(--teal)}.cap h3{font-size:22px;margin:16px 0 9px}.cap p{margin:0;color:var(--muted);font-size:14px}.stack{margin-top:25px;color:var(--muted);min-height:55px}.process{background:#f5faff}.process h2{margin-top:25px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:40px}.process-grid article{border-top:2px solid #99d9e5;padding-top:20px}.process-grid span{font:32px 'Space Grotesk';color:var(--blue)}.process-grid h3{font-size:23px;margin:15px 0}.process-grid p{font-size:15px;color:var(--muted)}.story{max-width:1000px}.story p{color:var(--muted);font-size:18px}.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.contact-cards article{border:1px solid var(--line);border-radius:12px;padding:28px}.contact-cards h3{font-size:25px;margin:18px 0}.contact-cards p{color:var(--muted)}.case-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:7%}.case-main h2{font-size:32px;margin-top:30px}.case-main p{color:var(--muted)}.case-aside{background:var(--surface);padding:30px;border-radius:15px;align-self:start}.case-aside li{margin:14px 0}.case-visual{width:100%;border-radius:15px}footer{padding:50px 6%;display:grid;grid-template-columns:1.4fr .7fr 1fr;gap:35px;border-top:1px solid var(--line);background:#f7fbfd;font-size:14px}footer p{color:var(--muted);font-size:13px;margin-top:20px}.footer-nav{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:10px}.footer-nav a:hover,footer a:hover{color:var(--teal)}.skip{position:absolute;top:-100px}.skip:focus{top:10px;z-index:100;background:white;padding:10px}.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.js .reveal.visible{opacity:1;transform:none}@keyframes float{50%{transform:translateY(-10px)}}@keyframes bounce{50%{transform:translateY(7px)}}@keyframes orbit{to{transform:rotate(350deg)}}@keyframes signal{to{stroke-dashoffset:-32}}@keyframes arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media(min-width:1600px){.hero,.section,.page-intro,footer{padding-left:calc((100vw - 1400px)/2);padding-right:calc((100vw - 1400px)/2)}}@media(max-width:1150px){header{gap:18px}nav{gap:13px}.brand{font-size:17px}.brand span{font-size:8px}.cv{font-size:12px}.awards{grid-template-columns:repeat(2,1fr)}.fl-one{right:-5px}.fl-two{left:-15px}}@media(max-width:850px){header{height:80px}.cv{margin-left:auto}.menu{display:block}nav{display:none;position:absolute;left:0;right:0;top:80px;background:white;padding:20px 6%;border-bottom:1px solid var(--line);flex-direction:column}nav.open{display:flex}.hero{grid-template-columns:1fr;padding-top:40px;gap:20px}.hero h1{font-size:64px}.portrait-stage{max-width:520px;margin:auto;width:100%}.portrait-image{max-width:440px;margin:auto}.hero-copy{max-width:650px}.stats{grid-template-columns:repeat(2,1fr);gap:25px}.stats div:nth-child(2){border:0}.stats div:nth-child(3){padding-left:0}.section{padding:65px 6%}.heading-row{display:block}.signal-node{min-width:140px;padding:14px}.signal-node strong{font-size:17px}.signal-node small{font-size:10px}.journey-layout,.about-layout,.about-grid,.case-layout{grid-template-columns:1fr;gap:35px}.about-photo{max-width:450px;margin:auto}.process-grid{grid-template-columns:repeat(2,1fr)}.contact-cards{grid-template-columns:1fr}.capabilities{gap:12px}.cap{padding:18px}.cap h3{font-size:19px}.gallery-grid{grid-template-columns:1fr 1fr}.gallery-grid figure:last-child{grid-column:1/-1}.contact-row{flex-wrap:wrap}.contact-row span{margin-left:0;flex-basis:100%}footer{grid-template-columns:1fr 1fr}footer>div:first-child{grid-column:1/-1}}@media(max-width:560px){header{padding:0 5%;gap:10px}.brand{font-size:15px;letter-spacing:-.4px}.brand span{font-size:7px;letter-spacing:.8px}.cv{padding:8px 9px;font-size:10px}.hero{padding:35px 5% 40px}.hero h1{font-size:49px;letter-spacing:-2px}.hero h2{font-size:22px}.hero-sub{font-size:15px}.hero-description{font-size:15px}.intro{margin:22px 0 12px}.eyebrow{font-size:10px;letter-spacing:1px}.portrait-stage{padding:30px 14px 75px}.floating-label{padding:12px 15px}.floating-label strong{font-size:14px}.fl-one{right:0;top:18px}.fl-two{left:0;bottom:100px}.portrait-name{font-size:16px}.stats strong{font-size:26px}.stats span{font-size:12px}.stats div{padding-left:20px}.section h2{font-size:36px;letter-spacing:-1.5px}.micro{display:none}.signal-map{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.signal-lines{display:none}.signal-node{position:static;transform:none;min-width:0;min-height:110px;padding:13px 8px}.board{grid-column:1/-1;grid-row:1}.signal-node strong{font-size:17px}.signal-node small{font-size:11px}.signal-detail{font-size:14px}.project-grid{grid-template-columns:1fr;gap:25px}.project-image{height:220px}.project-body{padding:24px}.project-body h3{font-size:25px}.awards{gap:12px}.awards article{padding:20px}.award-num{font-size:34px}.award-num.smaller{font-size:24px}.awards h3{font-size:17px}.awards p{font-size:13px}.gallery-grid{grid-template-columns:1fr}.gallery-grid figure:last-child{grid-column:auto}.gallery-grid img{height:270px}.capabilities{grid-template-columns:1fr}.cap{padding:23px}.contact h2{font-size:49px;letter-spacing:-2px}.page-intro{padding:45px 6%}.page-intro h1{font-size:43px;letter-spacing:-2px}.page-intro p{font-size:16px}.timeline{padding-left:26px}.timeline article::before{left:-34px}.timeline h3{font-size:24px}.process-grid{gap:20px}.process-grid h3{font-size:20px}.process-grid p{font-size:14px}.story p{font-size:16px}footer{gap:30px}.footer-nav{grid-template-columns:1fr}.hero .scroll-cue{margin-top:22px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

@media(max-width:400px){header .cv{display:none}header .menu{margin-left:auto}.hero h1{font-size:44px}.hero h2{font-size:21px}}

/* Reliable mobile navigation: large touch target and a stable interactive layer. */
.menu{width:48px;height:48px;padding:0;border-radius:10px;line-height:1;place-items:center;position:relative;z-index:32;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.menu:hover{background:#edf8fc}.menu:focus-visible{outline:3px solid #0c8e9a55;outline-offset:2px}
@media(max-width:850px){
 header{isolation:isolate}
 .menu{display:grid;flex:0 0 48px}
 header nav{display:flex;position:fixed;left:0;right:0;top:80px;z-index:31;background:white;padding:20px 6%;border-bottom:1px solid var(--line);box-shadow:0 18px 38px #163b511f;flex-direction:column;max-height:calc(100dvh - 80px);overflow-y:auto;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
 header nav.open{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
 header .menu-toggle:checked~nav.mobile-links{display:flex;visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
 header nav.mobile-links a{width:100%;border-radius:8px;transition:background-color .18s ease,color .18s ease,padding-left .18s ease}
 header nav.mobile-links a:hover,header nav.mobile-links a:focus-visible{background:#edf8fc;color:var(--teal);padding-left:14px}
}

/* A complete home story, with a balanced three-word introduction. */
.hero{grid-template-columns:1.2fr 1fr;gap:4%;min-height:740px}
.hero h1.hero-words{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;font-size:clamp(22px,2.65vw,43px);letter-spacing:-1.2px;line-height:1.3;margin:20px 0 34px;padding:18px 0;border-top:1px solid #bddce7;border-bottom:1px solid #bddce7}
.hero-words span{text-align:center;padding:0 8px;color:var(--teal)}
.hero-words span+span{border-left:1px solid #bddce7}
.hero-words span:nth-child(2){color:var(--blue)}
.hero .intro{font:500 clamp(44px,4.5vw,68px)/1.12 'Space Grotesk',sans-serif;color:var(--fg);letter-spacing:-2px;margin-top:32px}
.portrait-image{border-radius:24px;transform:none}
.portrait-image img{aspect-ratio:1/1;object-position:center 30%;transform:none}
.portrait-ring{border-radius:28px;animation:float 7s ease-in-out infinite;transform:rotate(-5deg)}
.about-photo img{aspect-ratio:1/1;object-fit:cover;object-position:center 30%}
.skills-home{background:linear-gradient(125deg,#e9f8ff,#effcf8)}
.home-page-link{margin-top:35px;text-align:center}
.awards-link{margin:0;padding:0 6% 55px;background:#f4fbfb}
@media(min-width:1600px){.hero h1.hero-words{font-size:43px}}
@media(max-width:850px){.hero{grid-template-columns:1fr}.hero-copy{width:100%;max-width:650px}.hero h1.hero-words{font-size:clamp(22px,4.9vw,37px)}.hero .intro{font-size:58px}.portrait-stage{max-width:520px}}
@media(max-width:560px){.hero h1.hero-words{font-size:clamp(18px,4.8vw,27px);letter-spacing:-.7px}.hero-words span{padding:0 5px}.hero .intro{font-size:46px}.portrait-image{border-width:5px}.hero{min-height:0}.about-layout .about-photo{width:100%}}

/* Motion follows the engineering story, without blocking the content. */
.hero{position:relative;isolation:isolate}
.hero-copy,.portrait-stage{z-index:1}
.hero-motion{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-motion::before{content:'';position:absolute;width:60%;height:80%;right:-15%;top:-10%;background:radial-gradient(ellipse,#62ccff45,transparent 65%);animation:ambient-drift 14s ease-in-out infinite alternate}
.hero-motion i{position:absolute;width:6px;height:6px;border-radius:50%;background:#078e9b55;left:calc(7% + var(--i)*12%);top:calc(18% + var(--i)*7%);animation:particle-rise calc(6s + var(--i)*1s) ease-in-out infinite;animation-delay:calc(var(--i)*-.8s)}
.hero-words span{animation:word-enter .85s both}.hero-words span:nth-child(2){animation-delay:.16s}.hero-words span:nth-child(3){animation-delay:.32s}
.office-photo{overflow:visible}.office-photo img{aspect-ratio:646/659;object-fit:contain;object-position:center;border-radius:22px;box-shadow:0 24px 55px #122d4326;transform:perspective(1100px) rotateX(var(--photo-x,0deg)) rotateY(var(--photo-y,0deg));transition:transform .35s ease-out}
.office-photo .photo-caption{z-index:1;margin-top:-34px;font-size:22px}
.portrait-stage{translate:0 var(--portrait-scroll,0px);will-change:translate}
.signal-node.board::after{content:'';position:absolute;inset:-7px;border:1px solid #008d9266;border-radius:17px;animation:board-pulse 2.8s ease-out infinite;pointer-events:none}
.timeline{position:relative}.timeline::before{content:'';position:absolute;width:2px;left:-2px;top:0;height:calc(var(--journey-progress,0)*100%);background:var(--gradient);box-shadow:0 0 12px #008d9244;transition:height .12s linear}
.timeline article::before{transition:background .4s,box-shadow .4s}.timeline article.is-reached::before{background:var(--teal);box-shadow:0 0 0 6px #e4f7f8,0 0 18px #008d9266}
.js .motion-item{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--reveal-delay,0ms)}
.js .motion-item.visible{opacity:1;transform:none}
.project-card{animation:card-enter .65s both;animation-delay:calc(var(--card-order,0)*85ms)}
.gallery-grid figure{overflow:hidden;border-radius:12px}.gallery-grid figure img{transition:transform .65s}.gallery-grid figure:hover img{transform:scale(1.045)}
@keyframes ambient-drift{to{transform:translate(-15%,35%) scale(1.2)}}
@keyframes particle-rise{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(-35px);opacity:.8}}
@keyframes word-enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes board-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
@keyframes card-enter{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@media(max-width:850px){.portrait-stage{translate:none;will-change:auto}.hero-motion i:nth-child(n+5){display:none}}
@media(prefers-reduced-motion:reduce){.js .motion-item{opacity:1;transform:none}.portrait-stage{translate:none!important}.office-photo img{transform:none!important}.hero-motion{display:none}.timeline::before{height:100%}}

/* One square photo frame, with its caption outside the image. */
.office-frame{width:100%;aspect-ratio:1/1;position:relative;border-radius:22px;overflow:hidden;box-shadow:0 24px 55px #122d4326}
.office-photo .office-frame img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;box-shadow:none;border-radius:0;transform:none}
.office-frame{transform:perspective(1100px) rotateX(var(--photo-x,0deg)) rotateY(var(--photo-y,0deg));transition:transform .35s ease-out}
.office-photo .photo-caption{margin:18px 0 0;box-shadow:none;font-size:21px}




/* Animated data flow is confined to the interactive systems diagram. */
.signal-lines{animation:signal 2s linear infinite;overflow:visible;pointer-events:none}
.signal-particles circle{fill:#15bdcd;stroke:white;stroke-width:1;filter:drop-shadow(0 0 5px #13adbd);stroke-dasharray:none}
.signal-node:not(.board)::after{content:'';position:absolute;inset:-5px;border:1px solid #008d9266;border-radius:17px;pointer-events:none;animation:node-pulse 3.4s ease-out infinite}
.signal-node.sensor::after{animation-delay:-.5s}.signal-node.circuit::after{animation-delay:-1.6s}.signal-node.cloud::after{animation-delay:-2.2s}.signal-node.robot::after{animation-delay:-2.8s}
@keyframes node-pulse{0%,100%{opacity:0;box-shadow:none}35%{opacity:.8;box-shadow:0 0 16px #12aab42b}65%{opacity:0}}
@media(max-width:560px){.signal-map .signal-node::after{inset:-3px}.signal-map .signal-node{animation:mobile-node-glow 3.4s ease-in-out infinite}.signal-map .sensor{animation-delay:-.5s}.signal-map .circuit{animation-delay:-1.6s}.signal-map .cloud{animation-delay:-2.2s}.signal-map .robot{animation-delay:-2.8s}}
@keyframes mobile-node-glow{50%{box-shadow:0 0 22px #12aab430}}
@media(prefers-reduced-motion:reduce){.signal-lines{animation:none}.signal-particles{display:none}.signal-node::after{animation:none;opacity:0}.signal-map .signal-node{animation:none}}

/* Scroll-driven connected-system story. */
.system-stage{position:relative;isolation:isolate}
.system-stage::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 88% 16%,#35d3dc18 0,transparent 24%);opacity:0;transform:scale(.94);transition:opacity .8s ease,transform 1.2s ease}
.system-stage.is-in-view::after{opacity:1;transform:scale(1)}
.section-beacon{position:absolute;right:5.5%;top:28px;display:flex;align-items:center;gap:8px;z-index:4;color:#527485;font:600 9px/1 'Space Grotesk',sans-serif;letter-spacing:1.3px;opacity:.55;transition:color .4s,opacity .4s,transform .5s}
.section-beacon i{width:9px;height:9px;border:1px solid #79a9b7;border-radius:50%;background:#fff;box-shadow:0 0 0 0 #16bec966;transition:background .35s,border-color .35s,box-shadow .35s}
.section-beacon b{font-weight:500;color:#16819b;border-left:1px solid #bedce5;padding-left:8px}
.system-stage.is-system-active .section-beacon{color:#087d87;opacity:1;transform:translateX(-5px)}
.system-stage.is-system-active .section-beacon i{background:#22d6c8;border-color:#fff;box-shadow:0 0 0 5px #20bfc42b,0 0 22px #10b6c9}
.system-stage.is-system-active .section-beacon::after{content:'';position:absolute;left:4px;width:2px;height:2px;border-radius:50%;background:white;animation:beacon-flash 1.4s ease-out infinite}
.system-story{--system-progress:0;position:fixed;right:14px;top:50%;width:118px;height:min(68vh,610px);translate:0 -50%;z-index:18;pointer-events:none;color:#3a6375;font-family:'Space Grotesk',sans-serif}
.system-story__track{position:absolute;right:12px;top:0;bottom:0;width:2px;background:#b9dce5}
.system-story__energy{position:absolute;left:0;top:0;width:2px;height:calc(var(--system-progress)*100%);background:linear-gradient(#18c5b7,#1688dd,#51d7e0);box-shadow:0 0 12px #13aeba;transition:height .12s linear}
.system-story__node{position:absolute;right:-2px;top:calc(var(--node-position,0)*20%);width:104px;min-height:32px;display:flex;align-items:center;justify-content:flex-end;gap:7px;transform:translateY(-50%);opacity:.42;transition:opacity .4s,transform .4s,color .4s}
.system-story__node:nth-child(2){--node-position:0}.system-story__node:nth-child(3){--node-position:1}.system-story__node:nth-child(4){--node-position:2}.system-story__node:nth-child(5){--node-position:3}.system-story__node:nth-child(6){--node-position:4}.system-story__node:nth-child(7){--node-position:5}
.system-story__node i{order:3;width:12px;height:12px;flex:0 0 12px;border:2px solid #8fbcc9;border-radius:50%;background:white;transition:background .35s,box-shadow .35s,border-color .35s}
.system-story__node span{font-size:9px;color:#16819b}.system-story__node strong{font-size:8px;letter-spacing:.75px;text-align:right;white-space:nowrap;font-weight:600}
.system-story__node.is-active{opacity:1;color:#075f76;transform:translate(-3px,-50%)}
.system-story__node.is-active i{background:#1fd4c3;border-color:#fff;box-shadow:0 0 0 4px #1dbebf25,0 0 14px #13aebd}
.system-story__packet{position:absolute;left:-2px;width:6px;height:6px;border-radius:50%;background:white;border:1px solid #16b7c1;box-shadow:0 0 10px #0da8c5;animation:packet-flow 4.8s linear infinite}
.system-story__packet.packet-two{animation-delay:-2.4s}
.network-section.is-system-active .signal-node,.projects.is-system-active .project-card,.achievements.is-system-active .awards article{filter:saturate(1.08)}
.network-section.is-system-active .board{box-shadow:0 0 0 6px #33d6ce20,0 16px 35px #0a78943b}
.projects.is-system-active .project-card:nth-child(odd){animation:connected-card 3.2s ease-in-out infinite}
.projects.is-system-active .project-card:nth-child(even){animation:connected-card 3.2s ease-in-out -1.6s infinite}
.contact.is-system-active .section-beacon i{background:#baffdd;box-shadow:0 0 0 6px #baffdd2b,0 0 24px #baffdd}
@keyframes packet-flow{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
@keyframes beacon-flash{0%{transform:scale(1);opacity:1}100%{transform:scale(9);opacity:0}}
@keyframes connected-card{50%{box-shadow:0 18px 46px #0a829221;border-color:#8dd6dc}}
@media(max-width:1180px){.system-story{right:7px;width:32px}.system-story__node strong,.system-story__node span{display:none}.system-story__node{width:26px}.section-beacon{right:6%}}
@media(max-width:850px){.system-story{right:7px;top:auto;bottom:18px;height:150px;translate:none;opacity:.8}.section-beacon{top:17px;right:5%;font-size:8px}.section-beacon span{display:none}.system-stage{overflow:hidden}.projects.is-system-active .project-card{animation:none}}
@media(max-width:560px){.system-story{display:none}.section-beacon{top:14px}.section-beacon b{border-left:0;padding-left:0}.section{padding-top:72px}.page-intro+.section{padding-top:72px}}
@media(prefers-reduced-motion:reduce){.system-story__packet,.system-stage.is-system-active .section-beacon::after,.projects.is-system-active .project-card{animation:none}.system-story__energy{transition:none}.system-stage::after,.section-beacon,.system-story__node{transition:none}}