:root{
  --bg:#05080e;
  --bg-soft:#08111b;
  --surface:#0b1521;
  --surface-2:#101d2a;
  --surface-3:#152536;
  --text:#f3f7fb;
  --muted:#9fb0c0;
  --muted-2:#718395;
  --line:rgba(170,205,224,.15);
  --line-strong:rgba(105,224,255,.28);
  --cyan:#69e0ff;
  --cyan-2:#a2efff;
  --green:#72e6a5;
  --amber:#ffca70;
  --danger:#ff8f9b;
  --max:1320px;
  --gutter:clamp(20px,3.2vw,48px);
  --section:clamp(72px,8.5vw,132px);
  --radius-xl:36px;
  --radius-lg:26px;
  --radius-md:18px;
  --shadow:0 36px 100px rgba(0,0,0,.42);
  --shadow-soft:0 18px 54px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.62;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 15% 0%,rgba(52,199,235,.13),transparent 30rem),radial-gradient(circle at 88% 10%,rgba(47,120,255,.10),transparent 28rem),linear-gradient(180deg,#05080e 0%,#07101a 50%,#05080e 100%)}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(160,198,218,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(160,198,218,.11) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 45%,transparent 86%)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}
button{color:inherit}
::selection{background:rgba(105,224,255,.28);color:#fff}
:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:10px}
.skip{position:fixed;left:-999px;top:14px;z-index:9999;padding:12px 16px;background:white;color:#02060a;border-radius:12px;font-weight:800}.skip:focus{left:14px}
.container{width:min(var(--max),calc(100% - var(--gutter)*2));margin-inline:auto}
.section{padding-block:var(--section)}
.section-tight{padding-block:clamp(52px,7vw,92px)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);font-size:.73rem;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.kicker::before{content:"";width:30px;height:1px;background:var(--cyan)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--line-strong);background:rgba(105,224,255,.06);border-radius:999px;color:#d8f8ff;font-size:.74rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(114,230,165,.11),0 0 24px rgba(114,230,165,.55)}
.display{font-size:1rem;line-height:1;margin:22px 0 24px;max-width:none}
.display .name{display:block;max-width:10.5ch;color:#fff;font-size:clamp(3.65rem,6.15vw,6.55rem);line-height:.88;letter-spacing:-.078em}
.display .statement{display:block;max-width:13.2ch;margin-top:.28em;font-size:clamp(2.55rem,4.15vw,4.55rem);line-height:.94;letter-spacing:-.058em}
.display em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:var(--cyan-2);letter-spacing:-.045em}
.page-title{font-size:clamp(2.8rem,5.7vw,5.8rem);line-height:.9;letter-spacing:-.068em;margin:18px 0 24px;max-width:13ch}
.section-title{font-size:clamp(2.15rem,4.25vw,4.25rem);line-height:.98;letter-spacing:-.052em;margin:12px 0 20px;max-width:15ch}
.section-title em,.page-title em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:var(--cyan-2)}
.lead{font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.58;color:#b7c6d4;max-width:720px;margin:0}
.body-copy{font-size:1.02rem;color:var(--muted);max-width:700px}
.small{font-size:.88rem;color:var(--muted-2)}
.progress{position:fixed;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),#4e8cff);z-index:1000}
.site-header{position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;background:rgba(5,8,14,.68);backdrop-filter:blur(18px);transition:border-color .25s,background .25s}
.site-header.scrolled{border-color:var(--line);background:rgba(5,8,14,.9)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;color:#001219;background:linear-gradient(135deg,var(--cyan),#7db7ff);font-weight:950;box-shadow:0 10px 36px rgba(105,224,255,.16)}.brand-copy{line-height:1.06;min-width:0}.brand-copy strong{display:block;font-size:.98rem;white-space:nowrap}.brand-copy span{display:block;color:var(--muted-2);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:20px;color:#c5d0da;font-size:.88rem;font-weight:760}.nav-links a{position:relative}.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--cyan);transition:right .25s}.nav-links a:hover::after,.nav-links a.active::after{right:0}.nav-links a:hover,.nav-links a.active{color:#fff}.nav-cta{padding:10px 15px;border-radius:999px;background:#eefaff;color:#061019;font-weight:900}.nav-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:13px;padding:10px 12px}
.hero{padding:clamp(56px,6.5vw,94px) 0 clamp(60px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);gap:clamp(46px,5.5vw,84px);align-items:center}
.hero-copy{position:relative;z-index:2;min-width:0}.hero-copy::before{content:"01";position:absolute;left:-52px;top:8px;color:rgba(105,224,255,.22);font-size:.75rem;font-weight:900;letter-spacing:.2em}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:51px;padding:0 19px;border-radius:999px;border:1px solid var(--line);font-weight:900;transition:transform .22s,background .22s,border-color .22s}.btn:hover{transform:translateY(-3px)}.btn-primary{background:linear-gradient(135deg,var(--cyan),#8cb8ff);color:#031018;border-color:transparent;box-shadow:0 20px 50px rgba(105,224,255,.16)}.btn-secondary{background:rgba(255,255,255,.045)}.btn-secondary:hover{border-color:var(--line-strong);background:rgba(105,224,255,.07)}.btn-text{padding-inline:3px;border-color:transparent;color:var(--cyan)}
.hero-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.meta-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:#b9c7d2;font-size:.82rem;font-weight:750}.meta-chip b{color:#fff}
.portrait-shell{position:relative;justify-self:end;width:min(100%,450px)}.portrait-shell::before{content:"";position:absolute;inset:9% -9% -6% 12%;background:radial-gradient(circle,rgba(105,224,255,.18),transparent 66%);filter:blur(20px);z-index:-1}.portrait-card{position:relative;border:1px solid var(--line);border-radius:36px;padding:11px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:var(--shadow);transform:rotate(1.2deg)}.portrait-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:27px}.portrait-note{position:absolute;left:-24px;bottom:28px;padding:14px 16px;border:1px solid var(--line-strong);background:rgba(7,16,26,.9);backdrop-filter:blur(15px);border-radius:17px;box-shadow:var(--shadow-soft)}.portrait-note strong{display:block}.portrait-note span{color:var(--muted);font-size:.8rem}.portrait-flag{position:absolute;right:-14px;top:32px;padding:12px 14px;border-radius:16px;background:#eefaff;color:#061019;font-size:.78rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase;transform:rotate(3deg)}
.stat-band{border-block:1px solid var(--line);background:rgba(255,255,255,.018)}.stats{display:grid;grid-template-columns:repeat(4,1fr)}.stat{padding:24px clamp(16px,2.5vw,30px);border-right:1px solid var(--line)}.stat:last-child{border-right:0}.stat b{display:block;font-size:clamp(1.85rem,3.35vw,3.45rem);line-height:1;letter-spacing:-.055em}.stat span{display:block;margin-top:9px;color:var(--muted);font-size:.86rem;max-width:15ch}
.chapter-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,52px);align-items:end;margin-bottom:clamp(34px,5vw,64px)}.chapter-index{font-size:.72rem;letter-spacing:.18em;color:var(--muted-2);font-weight:900;text-transform:uppercase}.chapter-index b{color:var(--cyan)}
.intro-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,7vw,100px)}.quote-card{padding:clamp(26px,4vw,48px);border:1px solid var(--line-strong);border-radius:var(--radius-xl);background:linear-gradient(145deg,rgba(105,224,255,.09),rgba(255,255,255,.025));box-shadow:var(--shadow-soft)}.quote-card blockquote{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.55rem,3vw,2.65rem);line-height:1.15;margin:0;color:#e9faff}.quote-card footer{margin-top:24px;color:var(--muted);font-size:.87rem}
.timeline{position:relative;display:grid;gap:14px}.timeline::before{content:"";position:absolute;left:25px;top:26px;bottom:26px;width:1px;background:linear-gradient(var(--cyan),rgba(105,224,255,.08))}.timeline-item{position:relative;display:grid;grid-template-columns:52px 110px 1fr;gap:18px;align-items:start;padding:20px 22px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.025);transition:transform .25s,border-color .25s,background .25s}.timeline-item:hover{transform:translateX(6px);border-color:var(--line-strong);background:rgba(105,224,255,.045)}.timeline-dot{width:11px;height:11px;border-radius:50%;background:var(--cyan);margin:9px 0 0 20px;box-shadow:0 0 0 7px rgba(105,224,255,.09)}.timeline-year{color:var(--cyan-2);font-weight:900;font-size:.82rem;letter-spacing:.06em}.timeline-item h3{margin:0 0 5px;font-size:1.05rem}.timeline-item p{margin:0;color:var(--muted);font-size:.91rem}
.current-project{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:44px;background:var(--surface);box-shadow:var(--shadow)}.current-project img{width:100%;height:clamp(380px,58vw,700px);object-fit:cover;filter:brightness(.58) saturate(1.08)}.current-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,14,.94) 0%,rgba(3,8,14,.78) 46%,rgba(3,8,14,.12) 78%),linear-gradient(0deg,rgba(3,8,14,.78),transparent 45%)}.current-content{position:absolute;left:clamp(24px,6vw,76px);top:50%;transform:translateY(-50%);max-width:650px}.current-content h2{font-size:clamp(2.5rem,5vw,5rem);line-height:.94;letter-spacing:-.06em;margin:14px 0 18px}.current-content p{color:#c4d0da;max-width:600px}.scope-list{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}.scope-list span{padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(3,8,14,.45);font-size:.78rem;font-weight:800;color:#e4edf4}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.project-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:var(--shadow-soft);transition:transform .3s,border-color .3s}.project-card:hover{transform:translateY(-8px);border-color:var(--line-strong)}.project-card img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:brightness(.82);transition:transform .5s}.project-card:hover img{transform:scale(1.035)}.project-body{padding:23px}.project-meta{display:flex;justify-content:space-between;gap:10px;color:var(--cyan);font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.project-card h3{font-size:1.35rem;line-height:1.1;margin:14px 0 9px}.project-card p{color:var(--muted);font-size:.91rem;margin:0}.project-lesson{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);color:#dce7ef;font-size:.84rem}.project-lesson b{display:block;color:var(--muted-2);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.impact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.impact-card{padding:clamp(24px,4vw,36px);border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(255,255,255,.028)}.impact-num{color:rgba(105,224,255,.48);font-size:.72rem;font-weight:950;letter-spacing:.16em}.impact-card h3{font-size:1.3rem;margin:14px 0 8px}.impact-card p{color:var(--muted);margin:0}.impact-card:hover{border-color:var(--line-strong);background:rgba(105,224,255,.04)}
.principles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.principle{min-height:260px;padding:25px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));display:flex;flex-direction:column}.principle i{font-style:normal;color:var(--cyan);font-size:.72rem;font-weight:950;letter-spacing:.15em}.principle h3{margin:40px 0 10px;font-size:1.14rem}.principle p{color:var(--muted);font-size:.86rem;margin:auto 0 0}.principle:nth-child(2),.principle:nth-child(4){transform:translateY(22px)}
.skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.skill-card{padding:26px;border-left:2px solid var(--cyan);background:rgba(255,255,255,.025);border-radius:0 20px 20px 0}.skill-card h3{margin:0 0 9px}.skill-card p{margin:0;color:var(--muted);font-size:.9rem}
.credentials-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.credential-card{padding:clamp(25px,4vw,40px);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}.credential-card h3{margin:5px 0 8px;font-size:1.35rem}.credential-card p{margin:0;color:var(--muted)}.credential-row{display:grid;grid-template-columns:1fr auto;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.credential-row:last-child{border-bottom:0}.credential-row b{font-size:.95rem}.credential-row span{color:var(--muted);font-size:.85rem;text-align:right}.language-list{display:grid;gap:10px;margin-top:18px}.language{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center}.language-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}.language-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),#88a8ff)}.language small{color:var(--muted)}
.systems-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center}.system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}.system-card{padding:24px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.025);transition:.25s}.system-card:hover{transform:translateY(-5px);border-color:var(--line-strong)}.system-symbol{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(105,224,255,.09);border:1px solid var(--line-strong);font-weight:950;color:var(--cyan)}.system-card h3{margin:22px 0 9px}.system-card p{color:var(--muted);font-size:.9rem}.status{display:inline-flex;margin-top:18px;padding:7px 9px;border-radius:999px;background:rgba(114,230,165,.08);border:1px solid rgba(114,230,165,.2);color:#aaf4ca;font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.status.prototype{background:rgba(255,202,112,.08);border-color:rgba(255,202,112,.2);color:#ffe0a9}
.next-panel{position:relative;overflow:hidden;padding:clamp(34px,7vw,86px);border:1px solid var(--line-strong);border-radius:44px;background:linear-gradient(130deg,#0b1724,#08101a 58%,#10283a);box-shadow:var(--shadow)}.next-panel::after{content:"";position:absolute;right:-90px;top:-110px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(105,224,255,.18),transparent 65%)}.next-panel h2{font-size:clamp(2.4rem,5vw,5rem);line-height:.95;letter-spacing:-.06em;margin:12px 0 18px;max-width:12ch}.next-panel p{max-width:670px;color:#b9c7d3}.next-panel .hero-actions{position:relative;z-index:2}
.footer{padding:48px 0;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}.footer strong{font-size:1.1rem}.footer p{color:var(--muted);font-size:.87rem;margin:7px 0 0}.footer-links{display:flex;gap:18px;flex-wrap:wrap;color:#c9d5de;font-size:.85rem}.footer-links a:hover{color:var(--cyan)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .72s ease,transform .72s ease}.reveal.visible{opacity:1;transform:none}
/* Inner pages */
.page-hero{padding:clamp(70px,10vw,135px) 0 clamp(42px,6vw,82px)}.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,82px);align-items:end}.page-hero-aside{padding:24px;border-top:1px solid var(--line-strong);color:var(--muted)}.page-hero-aside b{display:block;color:#fff;font-size:1.15rem;margin-bottom:5px}
.detail-hero{position:relative;overflow:hidden;border-radius:42px;border:1px solid var(--line);box-shadow:var(--shadow)}.detail-hero img{width:100%;height:clamp(400px,57vw,700px);object-fit:cover}.detail-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,8,14,.86),transparent 62%)}.detail-caption{position:absolute;z-index:2;left:clamp(24px,5vw,62px);right:clamp(24px,5vw,62px);bottom:clamp(24px,5vw,52px);display:flex;justify-content:space-between;gap:24px;align-items:end}.detail-caption h1{font-size:clamp(2.5rem,5.5vw,5.6rem);line-height:.92;letter-spacing:-.065em;margin:12px 0 0;max-width:13ch}.detail-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.detail-tags span{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(4,8,14,.5);font-size:.73rem;font-weight:800}
.project-facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.022)}.fact{padding:22px;border-right:1px solid var(--line)}.fact:last-child{border-right:0}.fact b{display:block;font-size:1.05rem}.fact span{color:var(--muted);font-size:.78rem}
.article-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(30px,7vw,96px);align-items:start}.article-nav{position:sticky;top:110px;display:grid;gap:8px}.article-nav a{padding:10px 12px;border-left:1px solid var(--line);color:var(--muted);font-size:.86rem}.article-nav a:hover{border-color:var(--cyan);color:#fff}.article h2{font-size:clamp(1.9rem,3vw,3rem);letter-spacing:-.04em;margin:0 0 16px}.article section{padding:0 0 52px;margin-bottom:52px;border-bottom:1px solid var(--line)}.article p,.article li{color:var(--muted)}.article ul{padding-left:20px}.article li{margin-bottom:10px}.lesson-box{padding:30px;border:1px solid var(--line-strong);border-radius:24px;background:linear-gradient(135deg,rgba(105,224,255,.09),rgba(255,255,255,.02))}.lesson-box p{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.25;color:#e6f9ff;margin:0}.gallery{display:grid;grid-template-columns:1.4fr .6fr;gap:14px}.gallery-main,.gallery-side img{border-radius:22px;border:1px solid var(--line);width:100%;object-fit:cover}.gallery-main{height:520px}.gallery-side{display:grid;gap:14px}.gallery-side img{height:253px}.next-project{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:25px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.025)}.next-project:hover{border-color:var(--line-strong)}
.listing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.listing-card{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:rgba(255,255,255,.025)}.listing-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.listing-body{padding:25px}.listing-body h2{font-size:1.45rem;line-height:1.15;margin:12px 0}.listing-body p{color:var(--muted)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-card{padding:clamp(26px,4vw,44px);border:1px solid var(--line);border-radius:28px;background:var(--surface)}.contact-card h2{font-size:1.8rem;margin:0 0 18px}.contact-list{display:grid;gap:12px}.contact-item{padding:15px 0;border-bottom:1px solid var(--line)}.contact-item:last-child{border-bottom:0}.contact-item span{display:block;color:var(--muted-2);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}.contact-item b,.contact-item a{display:block;margin-top:4px;color:#fff}.contact-item a:hover{color:var(--cyan)}
@media(max-width:1180px){
  .display .name{font-size:clamp(3.5rem,6.4vw,5.6rem)}
  .display .statement{font-size:clamp(2.45rem,4.45vw,3.9rem)}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(330px,.68fr);gap:42px}
  .portrait-shell{width:min(100%,410px)}
  .principles{grid-template-columns:repeat(3,1fr)}
  .principle:nth-child(2),.principle:nth-child(4){transform:none}
  .project-grid,.listing-grid,.system-grid{grid-template-columns:repeat(2,1fr)}
  .project-grid .project-card:last-child,.listing-grid .listing-card:last-child{grid-column:span 2}
  .hero-copy::before{display:none}
}
@media(max-width:1020px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:fixed;top:78px;left:var(--gutter);right:var(--gutter);display:none;flex-direction:column;align-items:stretch;padding:18px;border:1px solid var(--line);border-radius:22px;background:rgba(7,15,24,.98);box-shadow:var(--shadow)}
  .nav-links.open{display:flex}.nav-links a{padding:10px}
  .hero{padding-top:52px}
  .hero-grid,.intro-grid,.chapter-head,.page-hero-grid,.systems-intro,.credentials-grid,.contact-grid{grid-template-columns:1fr}
  .hero-copy{max-width:820px}
  .display .name{max-width:11.5ch;font-size:clamp(3.6rem,9vw,5.8rem)}
  .display .statement{max-width:14ch;font-size:clamp(2.55rem,6.4vw,4.1rem)}
  .portrait-shell{width:min(82vw,560px);max-width:560px;margin:18px auto 0;justify-self:center}
  .chapter-head{align-items:start}
  .stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .principles{grid-template-columns:repeat(2,1fr)}.skill-grid{grid-template-columns:repeat(2,1fr)}
  .article-layout{grid-template-columns:1fr}.article-nav{position:static;grid-template-columns:repeat(4,1fr);overflow:auto}
  .gallery{grid-template-columns:1fr}.gallery-main{height:420px}.gallery-side{grid-template-columns:1fr 1fr}.gallery-side img{height:220px}
  .detail-caption{display:block}.detail-tags{justify-content:flex-start;margin-top:18px}
  .project-facts{grid-template-columns:repeat(2,1fr)}.fact:nth-child(2){border-right:0}.fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:680px){
  :root{--gutter:20px;--section:clamp(64px,17vw,92px)}
  .nav{height:72px}.nav-links{top:72px}
  .hero{padding:42px 0 60px}
  .eyebrow{font-size:.66rem;letter-spacing:.09em;padding:7px 10px}
  .display{margin:18px 0 22px}
  .display .name{max-width:10.7ch;font-size:clamp(3.15rem,15vw,4.75rem);line-height:.9}
  .display .statement{max-width:13.2ch;font-size:clamp(2.25rem,10.8vw,3.45rem);line-height:.97}
  .hero-actions{display:grid;margin-top:24px}.btn{width:100%;min-height:50px}
  .hero-meta{gap:7px}.meta-chip{font-size:.74rem}
  .portrait-shell{width:100%;margin-top:10px}.portrait-card{transform:none;border-radius:30px}.portrait-card img{border-radius:22px}
  .portrait-note{left:12px;bottom:18px}.portrait-flag{right:12px;top:20px}
  .timeline-item{grid-template-columns:44px 1fr}.timeline-year{grid-column:2}.timeline-item>div:last-child{grid-column:2}
  .project-grid,.listing-grid,.impact-grid,.principles,.skill-grid,.system-grid{grid-template-columns:1fr}
  .project-grid .project-card:last-child,.listing-grid .listing-card:last-child{grid-column:auto}
  .current-project img{height:680px}.current-overlay{background:linear-gradient(0deg,rgba(3,8,14,.95),rgba(3,8,14,.42))}.current-content{top:auto;bottom:28px;transform:none}
  .footer-grid{grid-template-columns:1fr}.article-nav{grid-template-columns:repeat(2,1fr)}
  .gallery-main{height:300px}.gallery-side img{height:170px}.next-project{grid-template-columns:1fr}
  .language{grid-template-columns:92px 1fr}.language small{grid-column:2}
  .project-facts{grid-template-columns:1fr}.fact{border-right:0;border-bottom:1px solid var(--line)}.fact:last-child{border-bottom:0}
  .detail-hero img{height:620px}.detail-caption{bottom:24px}.brand-copy span{display:none}
}
@media(max-width:390px){
  :root{--gutter:16px}
  .display .name{font-size:clamp(2.85rem,14.6vw,3.55rem)}
  .display .statement{font-size:clamp(2.05rem,10.5vw,2.65rem)}
  .brand-mark{width:38px;height:38px;border-radius:13px}
  .brand-copy strong{font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){
  .chapter-rail a span,
  .chapter-rail a i{transition:none!important}
html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.project-card,.system-card,.timeline-item,.btn{transition:none}}

/* Phase A: compact first viewport on common laptop screens */
@media (min-width:1021px) and (max-height:900px){
  .hero{padding-top:48px;padding-bottom:66px}
  .display{margin-top:18px;margin-bottom:20px}
  .display .name{font-size:clamp(3.7rem,5.55vw,5.6rem)}
  .display .statement{font-size:clamp(2.55rem,3.75vw,3.8rem)}
  .hero-actions{margin-top:22px}
  .hero-meta{margin-top:18px}
  .portrait-shell{width:min(100%,405px)}
}


/* =========================================================
   V14 — PHASE B: PREMIUM MOTION & MICRO-INTERACTIONS
   Native CSS/JS only. Motion is disabled when the visitor
   requests reduced motion.
   ========================================================= */

header,main,footer{position:relative;z-index:2}
main{overflow:clip}

/* Atmospheric depth */
.motion-atmosphere,
.cursor-aura{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.motion-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.18;will-change:transform}
.motion-orb:nth-child(1){width:42vw;height:42vw;min-width:420px;min-height:420px;left:-14vw;top:4vh;background:radial-gradient(circle,rgba(105,224,255,.38),rgba(105,224,255,0) 68%);animation:orbDriftOne 22s ease-in-out infinite alternate}
.motion-orb:nth-child(2){width:36vw;height:36vw;min-width:360px;min-height:360px;right:-10vw;top:32vh;background:radial-gradient(circle,rgba(92,120,255,.25),rgba(92,120,255,0) 68%);animation:orbDriftTwo 27s ease-in-out infinite alternate}
.motion-orb:nth-child(3){width:31vw;height:31vw;min-width:310px;min-height:310px;left:35vw;bottom:-17vw;background:radial-gradient(circle,rgba(114,230,165,.14),rgba(114,230,165,0) 70%);animation:orbDriftThree 25s ease-in-out infinite alternate}
.cursor-aura{width:440px;height:440px;inset:auto;border-radius:50%;background:radial-gradient(circle,rgba(105,224,255,.085),rgba(105,224,255,0) 67%);opacity:0;transform:translate3d(-50%,-50%,0);transition:opacity .35s ease;mix-blend-mode:screen;will-change:left,top}
.cursor-aura.active{opacity:1}
body::after{animation:gridDrift 34s linear infinite}

/* Header polish */
.site-header{transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.site-header.scrolled{box-shadow:0 16px 48px rgba(0,0,0,.18)}
.brand-mark{position:relative;overflow:hidden;isolation:isolate}
.brand-mark::after{content:"";position:absolute;inset:-60% -130%;z-index:-1;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.65) 50%,transparent 62%);transform:translateX(-55%) rotate(8deg);animation:brandSweep 7s ease-in-out infinite}
.nav-links a:not(.nav-cta)::after{height:2px;box-shadow:0 0 16px rgba(105,224,255,.45)}
.nav-cta{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(105,224,255,.15)}

/* Hero: cinematic layered entrance */
.js .hero .hero-copy.reveal,
.js .hero .portrait-shell.reveal{opacity:1;transform:none;translate:none;scale:1}
.js .hero .eyebrow,
.js .hero .display .name,
.js .hero .display .statement,
.js .hero .hero-copy>.lead,
.js .hero .hero-actions,
.js .hero .hero-meta,
.js .hero .portrait-shell{opacity:0}
.js body.motion-ready .hero .eyebrow{animation:heroBadgeIn .72s cubic-bezier(.2,.8,.2,1) .08s forwards}
.js body.motion-ready .hero .display .name{animation:heroTextIn .92s cubic-bezier(.18,.9,.22,1) .17s forwards}
.js body.motion-ready .hero .display .statement{animation:heroTextIn .98s cubic-bezier(.18,.9,.22,1) .29s forwards}
.js body.motion-ready .hero .hero-copy>.lead{animation:heroFadeIn .78s ease .48s forwards}
.js body.motion-ready .hero .hero-actions{animation:heroFadeIn .78s ease .58s forwards}
.js body.motion-ready .hero .hero-meta{animation:heroFadeIn .78s ease .68s forwards}
.js body.motion-ready .hero .portrait-shell{animation:portraitEntrance 1.08s cubic-bezier(.16,.84,.24,1) .22s forwards}

.display .statement{position:relative}
.display .statement::after{content:"";position:absolute;left:.03em;bottom:-.13em;width:3.2ch;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),transparent);transform-origin:left;scale:0 1}
body.motion-ready .display .statement::after{animation:lineDraw .9s cubic-bezier(.2,.8,.2,1) .95s forwards}
.display em{background:linear-gradient(100deg,var(--cyan-2) 10%,#fff 42%,var(--cyan-2) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:accentFlow 7s ease-in-out infinite}
.eyebrow i{animation:statusPulse 2.4s ease-in-out infinite}

/* Portrait depth and subtle motion */
.portrait-shell{perspective:1300px;transform-style:preserve-3d}
.portrait-shell::after{content:"";position:absolute;inset:-7% -10%;z-index:-1;border:1px solid rgba(105,224,255,.12);border-radius:44%;transform:rotate(-8deg);animation:orbitFrame 18s linear infinite}
.portrait-card{transform:perspective(1200px) rotateX(var(--portrait-rx,0deg)) rotateY(var(--portrait-ry,0deg)) rotateZ(1.2deg) translate3d(0,var(--portrait-y,0px),0);transform-style:preserve-3d;transition:transform .28s cubic-bezier(.2,.75,.25,1)}
.portrait-card::before{content:"";position:absolute;inset:11px;border-radius:27px;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.09) 48%,transparent 65%);background-size:250% 100%;animation:glassSweep 7.5s ease-in-out infinite}
.portrait-note,.portrait-flag{transform-style:preserve-3d}
body.motion-ready .portrait-note{animation:notePop .65s cubic-bezier(.2,.9,.2,1) 1s both}
body.motion-ready .portrait-flag{animation:flagPop .65s cubic-bezier(.2,.9,.2,1) 1.08s both}

/* Buttons: light sweep + magnetic movement */
.btn{position:relative;overflow:hidden;isolation:isolate;transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);transition:transform .25s cubic-bezier(.2,.75,.25,1),background .25s,border-color .25s,box-shadow .25s}
.btn:hover{transform:translate3d(var(--mag-x,0),calc(var(--mag-y,0) - 3px),0)}
.btn-primary::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.62) 47%,transparent 68%);transform:translateX(-130%);transition:transform .75s cubic-bezier(.2,.75,.25,1)}
.btn-primary:hover::before{transform:translateX(130%)}
.btn-primary:hover{box-shadow:0 24px 56px rgba(105,224,255,.24)}
.btn-text::after{content:"";position:absolute;left:4px;right:100%;bottom:9px;height:1px;background:currentColor;transition:right .3s ease}
.btn-text:hover::after{right:4px}

/* Refined scroll reveal system */
.reveal{opacity:1;transform:none}
.js .reveal{--reveal-x:0px;--reveal-y:28px;--rest-y:0px;opacity:0;transform:none;translate:var(--reveal-x) var(--reveal-y);scale:.985;filter:blur(4px);transition:opacity .78s cubic-bezier(.2,.75,.25,1),translate .78s cubic-bezier(.2,.75,.25,1),scale .78s cubic-bezier(.2,.75,.25,1),filter .78s ease;transition-delay:var(--reveal-delay,0ms)}
.js .reveal.motion-left{--reveal-x:-34px;--reveal-y:0px}
.js .reveal.motion-right{--reveal-x:34px;--reveal-y:0px}
.js .reveal.motion-scale{--reveal-x:0px;--reveal-y:0px;scale:.94}
.js .reveal.visible{opacity:1;translate:0 var(--rest-y);scale:1;filter:blur(0)}
.principle:nth-child(2),.principle:nth-child(4){transform:none;--rest-y:22px}
.chapter-head.reveal{overflow:hidden}
.chapter-head.reveal .chapter-index,
.chapter-head.reveal .section-title,
.chapter-head.reveal>.lead{opacity:0;translate:0 18px;transition:opacity .65s ease,translate .65s cubic-bezier(.2,.75,.25,1)}
.chapter-head.visible .chapter-index{opacity:1;translate:0;transition-delay:.05s}
.chapter-head.visible .section-title{opacity:1;translate:0;transition-delay:.13s}
.chapter-head.visible>.lead{opacity:1;translate:0;transition-delay:.23s}

/* Stats */
.stat{position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);transition:width .9s cubic-bezier(.2,.75,.25,1)}
.stat.visible::after{width:74%}
.stat b{font-variant-numeric:tabular-nums}

/* Timeline: animated progress path */
.timeline::before{background:rgba(105,224,255,.10)}
.timeline-progress{position:absolute;left:25px;top:26px;width:2px;height:var(--timeline-progress,0%);max-height:calc(100% - 52px);z-index:1;border-radius:999px;background:linear-gradient(var(--cyan),#7096ff 70%,rgba(112,150,255,.12));box-shadow:0 0 22px rgba(105,224,255,.3);transition:height .12s linear}
.timeline-item{z-index:2;transform:translateX(0)}
.timeline-item .timeline-dot{position:relative;z-index:3;transition:scale .35s ease,box-shadow .35s ease,background .35s ease}
.timeline-item.is-active .timeline-dot{scale:1.28;background:#d8faff;box-shadow:0 0 0 7px rgba(105,224,255,.13),0 0 24px rgba(105,224,255,.58)}
.timeline-item.is-active{border-color:rgba(105,224,255,.23)}

/* Large current project moment */
.current-project::before{content:"";position:absolute;inset:-25% auto -25% -35%;width:35%;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(105,224,255,.10),transparent);transform:skewX(-18deg) translateX(-100%);animation:projectScan 9s ease-in-out infinite}
.current-project img{transform:translate3d(0,var(--current-parallax,0px),0) scale(1.07);will-change:transform}
.current-project .current-content>*{opacity:0;translate:0 18px;transition:opacity .62s ease,translate .62s cubic-bezier(.2,.75,.25,1)}
.current-project.visible .current-content>*{opacity:1;translate:0}
.current-project.visible .current-content>*:nth-child(1){transition-delay:.1s}
.current-project.visible .current-content>*:nth-child(2){transition-delay:.18s}
.current-project.visible .current-content>*:nth-child(3){transition-delay:.27s}
.current-project.visible .current-content>*:nth-child(4){transition-delay:.35s}
.current-project.visible .current-content>*:nth-child(5){transition-delay:.43s}
.scope-list span{transition:transform .25s ease,border-color .25s ease,background .25s ease}
.scope-list span:hover{transform:translateY(-3px);border-color:rgba(105,224,255,.4);background:rgba(105,224,255,.10)}

/* 3D cards and directional shine */
.motion-tilt{--tilt-x:0deg;--tilt-y:0deg;--lift:0px;position:relative;transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translate3d(0,var(--lift),0);transform-style:preserve-3d;transition:transform .28s cubic-bezier(.2,.75,.25,1),border-color .28s ease,background .28s ease,box-shadow .28s ease}
.motion-tilt:hover{--lift:-7px;box-shadow:0 28px 72px rgba(0,0,0,.35)}
.motion-tilt::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.10),transparent 34%);opacity:0;transition:opacity .3s ease}
.motion-tilt:hover::after{opacity:1}
.project-card:hover{transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translate3d(0,var(--lift),0)}
.project-card img,.listing-card img{transition:transform .75s cubic-bezier(.2,.75,.25,1),filter .45s ease}
.project-card:hover img,.listing-card:hover img{transform:scale(1.055);filter:brightness(.92) saturate(1.08)}
.impact-card,.skill-card,.system-card,.listing-card,.contact-card,.credential-card,.quote-card,.next-project{transition:border-color .28s ease,background .28s ease,box-shadow .28s ease,transform .28s cubic-bezier(.2,.75,.25,1)}
.skill-card:hover{transform:translateX(6px);background:rgba(105,224,255,.04)}
.next-project:hover{transform:translateX(5px);background:rgba(105,224,255,.045)}
.system-symbol{transition:transform .45s cubic-bezier(.2,.85,.25,1),box-shadow .45s ease}
.system-card:hover .system-symbol{transform:rotate(-6deg) scale(1.08);box-shadow:0 14px 32px rgba(105,224,255,.12)}

/* Language-level animation */
.language-bar i{width:0!important;transition:width 1.25s cubic-bezier(.2,.75,.25,1)}
.credential-card.bars-ready .language-bar i{width:var(--level)!important}

/* Inner pages */
.page-hero-grid.reveal .kicker,
.page-hero-grid.reveal .page-title,
.page-hero-grid.reveal .lead,
.page-hero-grid.reveal .page-hero-aside{opacity:0;translate:0 18px;transition:opacity .65s ease,translate .65s cubic-bezier(.2,.75,.25,1)}
.page-hero-grid.visible .kicker{opacity:1;translate:0;transition-delay:.04s}
.page-hero-grid.visible .page-title{opacity:1;translate:0;transition-delay:.12s}
.page-hero-grid.visible .lead{opacity:1;translate:0;transition-delay:.2s}
.page-hero-grid.visible .page-hero-aside{opacity:1;translate:0;transition-delay:.28s}
.detail-hero img{transform:translate3d(0,var(--detail-parallax,0px),0) scale(1.05);will-change:transform;transition:filter .5s ease}
.detail-hero:hover img{filter:saturate(1.08) brightness(1.04)}
.detail-hero .detail-caption>*{opacity:0;translate:0 18px;transition:opacity .68s ease,translate .68s cubic-bezier(.2,.75,.25,1)}
.detail-hero.visible .detail-caption>*{opacity:1;translate:0}
.detail-hero.visible .detail-caption>*:nth-child(1){transition-delay:.2s}
.detail-hero.visible .detail-caption>*:nth-child(2){transition-delay:.32s}
.detail-tags span{transition:transform .22s ease,background .22s ease}
.detail-tags span:hover{transform:translateY(-3px);background:rgba(105,224,255,.12)}
.article-nav a{position:relative;transition:color .25s ease,border-color .25s ease,background .25s ease}
.article-nav a.active{color:#fff;border-color:var(--cyan);background:linear-gradient(90deg,rgba(105,224,255,.08),transparent)}
.article section.reveal h2{transition:color .35s ease}
.article section.visible h2{color:#f6fbff}
.gallery img{transition:transform .65s cubic-bezier(.2,.75,.25,1),filter .4s ease}
.gallery img:hover{transform:scale(1.018);filter:brightness(1.07) saturate(1.05)}
.lesson-box{position:relative;overflow:hidden}
.lesson-box::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(105,224,255,.08),transparent 65%);transform:translateX(-110%);animation:lessonSweep 8s ease-in-out infinite}

/* Mobile navigation motion */
@media(max-width:1020px){
  .nav-links{display:flex;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px) scale(.985);transform-origin:top;transition:opacity .25s ease,visibility .25s ease,transform .25s cubic-bezier(.2,.75,.25,1)}
  .nav-links.open{display:flex;opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
}
@media(max-width:680px){
  .cursor-aura{display:none}
  .portrait-card{transform:translate3d(0,var(--portrait-y,0px),0)}
  .principle:nth-child(2),.principle:nth-child(4){--rest-y:0px}
  .portrait-shell::after{inset:-3% -4%}
  .current-project img{transform:translate3d(0,var(--current-parallax,0px),0) scale(1.10)}
}

/* Animation keyframes */
@keyframes heroBadgeIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0}}
@keyframes heroTextIn{from{opacity:0;translate:0 42px;filter:blur(6px)}to{opacity:1;translate:0;filter:blur(0)}}
@keyframes heroFadeIn{from{opacity:0;translate:0 18px}to{opacity:1;translate:0}}
@keyframes portraitEntrance{from{opacity:0;translate:58px 18px;scale:.94;filter:blur(8px)}to{opacity:1;translate:0;scale:1;filter:blur(0)}}
@keyframes notePop{from{opacity:0;translate:-18px 12px;scale:.92}to{opacity:1;translate:0;scale:1}}
@keyframes flagPop{from{opacity:0;translate:16px -10px;scale:.9;rotate:8deg}to{opacity:1;translate:0;scale:1;rotate:0deg}}
@keyframes lineDraw{to{scale:1 1}}
@keyframes accentFlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 6px rgba(114,230,165,.11),0 0 20px rgba(114,230,165,.35)}50%{box-shadow:0 0 0 9px rgba(114,230,165,.04),0 0 32px rgba(114,230,165,.7)}}
@keyframes glassSweep{0%,58%{background-position:180% 0}82%,100%{background-position:-80% 0}}
@keyframes brandSweep{0%,68%{transform:translateX(-55%) rotate(8deg)}82%,100%{transform:translateX(55%) rotate(8deg)}}
@keyframes orbitFrame{to{rotate:360deg}}
@keyframes gridDrift{to{background-position:64px 64px}}
@keyframes orbDriftOne{to{transform:translate3d(10vw,8vh,0) scale(1.12)}}
@keyframes orbDriftTwo{to{transform:translate3d(-8vw,-10vh,0) scale(.9)}}
@keyframes orbDriftThree{to{transform:translate3d(5vw,-9vh,0) scale(1.16)}}
@keyframes projectScan{0%,68%{transform:skewX(-18deg) translateX(-120%)}83%,100%{transform:skewX(-18deg) translateX(500%)}}
@keyframes lessonSweep{0%,66%{transform:translateX(-110%)}84%,100%{transform:translateX(110%)}}

/* Full reduced-motion support */
@media(prefers-reduced-motion:reduce){
  body::after,.motion-orb,.brand-mark::after,.eyebrow i,.display em,.portrait-shell::after,.portrait-card::before,.current-project::before,.lesson-box::after{animation:none!important}
  .motion-atmosphere,.cursor-aura{display:none!important}
  .js .reveal,.js .hero .eyebrow,.js .hero .display .name,.js .hero .display .statement,.js .hero .hero-copy>.lead,.js .hero .hero-actions,.js .hero .hero-meta,.js .hero .portrait-shell,.current-project .current-content>*,.detail-hero .detail-caption>*,.chapter-head.reveal .chapter-index,.chapter-head.reveal .section-title,.chapter-head.reveal>.lead,.page-hero-grid.reveal .kicker,.page-hero-grid.reveal .page-title,.page-hero-grid.reveal .lead,.page-hero-grid.reveal .page-hero-aside{opacity:1!important;translate:0!important;scale:1!important;filter:none!important;animation:none!important;transition:none!important}
  .portrait-card,.motion-tilt,.project-card:hover,.btn,.btn:hover,.current-project img,.detail-hero img{transform:none!important;transition:none!important}
  .language-bar i{width:var(--level,100%)!important;transition:none!important}
  .timeline-progress{display:none}
}


/* =========================================================
   V15 — PHASE C: SIGNATURE WOW LAYER
   Cinematic entry, technical motion canvas, chapter rail,
   animated career route, page transitions, image lightbox
   and final interaction polish.
   ========================================================= */

/* First-load cinematic reveal */
.signature-intro{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:#04070c;overflow:hidden;pointer-events:none;
}
.signature-intro::before{
  content:"";position:absolute;inset:-30%;
  background:
    radial-gradient(circle at 30% 38%,rgba(105,224,255,.14),transparent 26%),
    radial-gradient(circle at 70% 64%,rgba(112,150,255,.10),transparent 24%);
  animation:introAtmosphere 1.45s ease both;
}
.signature-intro-inner{position:relative;text-align:center;display:grid;justify-items:center;gap:14px}
.signature-intro-mark{
  width:78px;height:78px;border-radius:25px;display:grid;place-items:center;
  background:linear-gradient(145deg,#79e5ff,#8ca8ff);color:#03101a;
  font-weight:950;font-size:26px;letter-spacing:-.06em;
  box-shadow:0 24px 70px rgba(105,224,255,.22);
  animation:introMark 1.05s cubic-bezier(.18,.9,.22,1) both;
}
.signature-intro-copy{overflow:hidden}
.signature-intro-copy strong,.signature-intro-copy span{display:block}
.signature-intro-copy strong{
  color:#f4fbff;font-size:clamp(18px,2vw,25px);letter-spacing:-.035em;
  animation:introText .8s cubic-bezier(.2,.8,.2,1) .2s both;
}
.signature-intro-copy span{
  color:var(--muted);font-size:11px;letter-spacing:.24em;text-transform:uppercase;margin-top:4px;
  animation:introText .8s cubic-bezier(.2,.8,.2,1) .32s both;
}
.signature-intro-line{
  width:180px;height:1px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px;
}
.signature-intro-line::after{
  content:"";display:block;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  transform:translateX(-100%);animation:introLine 1s ease .32s both;
}
.signature-intro.is-leaving{animation:introLeave .72s cubic-bezier(.76,0,.24,1) forwards}

/* Page navigation wipe */
.page-wipe{position:fixed;inset:0;z-index:9998;pointer-events:none;background:#05090f;transform:translateY(105%)}
.page-wipe::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 32px rgba(105,224,255,.45)}
.page-wipe.entry{animation:wipeReveal .72s cubic-bezier(.76,0,.24,1) both}
body.page-leaving .page-wipe{animation:wipeCover .42s cubic-bezier(.76,0,.24,1) forwards}

/* Hero technical network */
.hero{position:relative;isolation:isolate}
.hero-network{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.78;pointer-events:none}
.hero::before{
  content:"";position:absolute;z-index:-2;left:50%;top:0;width:1px;height:100%;
  background:linear-gradient(transparent,rgba(105,224,255,.10),transparent);
}
.hero-grid{position:relative;z-index:2}
.hero-copy::before{
  content:"PROJECT DELIVERY · ENGINEERING · LEADERSHIP";position:absolute;
  top:-32px;left:0;color:rgba(173,200,220,.16);font-size:9px;letter-spacing:.24em;white-space:nowrap;
}
.hero-copy{position:relative}

/* Portrait signature rings */
.portrait-shell .signature-orbits{position:absolute;inset:-11%;z-index:-1;pointer-events:none}
.signature-orbits span{position:absolute;inset:0;border:1px solid rgba(105,224,255,.12);border-radius:47%;animation:signatureOrbit 24s linear infinite}
.signature-orbits span:nth-child(2){inset:10%;border-color:rgba(112,150,255,.12);animation-direction:reverse;animation-duration:19s}
.signature-orbits span:nth-child(3){inset:22%;border-style:dashed;border-color:rgba(114,230,165,.12);animation-duration:31s}
.signature-orbits i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--cyan);left:7%;top:46%;animation:orbitNode 6s ease-in-out infinite alternate}

/* Moving expertise band */
.signal-band{position:relative;z-index:3;overflow:hidden;border-top:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055);background:rgba(5,9,15,.72);backdrop-filter:blur(14px)}
.signal-band::before,.signal-band::after{content:"";position:absolute;top:0;bottom:0;width:12vw;z-index:2;pointer-events:none}
.signal-band::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.signal-band::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.signal-track{display:flex;align-items:center;width:max-content;padding:16px 0;animation:signalMove 33s linear infinite}
.signal-track span{font-size:10px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:#a9bdcc;white-space:nowrap}
.signal-track i{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(105,224,255,.55);margin:0 30px}
.signal-band:hover .signal-track{animation-play-state:paused}

/* Story chapter backgrounds */
section[data-chapter]{position:relative;overflow:clip;isolation:isolate}
section[data-chapter]::before{
  content:attr(data-chapter);position:absolute;z-index:-1;right:max(2vw,20px);top:16%;
  font-size:clamp(140px,19vw,320px);font-weight:950;letter-spacing:-.09em;line-height:.72;
  color:rgba(133,175,205,.022);translate:0 var(--chapter-shift,0px);will-change:translate;
}
section[data-chapter]::after{
  content:"";position:absolute;z-index:-2;inset:8% -18% auto auto;width:52vw;height:52vw;border-radius:50%;
  background:radial-gradient(circle,rgba(105,224,255,.035),transparent 68%);
  translate:0 calc(var(--chapter-shift,0px) * -.4);
}
section[data-chapter]:nth-of-type(even)::after{inset:7% auto auto -22%;background:radial-gradient(circle,rgba(112,150,255,.04),transparent 68%)}

/* Fixed chapter navigation rail */
.chapter-rail{
  position:fixed;
  z-index:80;
  right:14px;
  top:50%;
  translate:0 -50%;
  display:grid;
  gap:7px;
  padding:5px 0;
}
.chapter-rail::before{
  content:"";
  position:absolute;
  left:50%;
  top:16px;
  bottom:16px;
  width:1px;
  translate:-50% 0;
  background:linear-gradient(
    180deg,
    transparent,
    rgba(132,160,180,.12) 12%,
    rgba(132,160,180,.12) 88%,
    transparent
  );
}
.chapter-rail a{
  position:relative;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:#dff8ff;
  text-decoration:none;
}
.chapter-rail a span{
  position:absolute;
  right:34px;
  top:50%;
  translate:8px -50%;
  min-width:max-content;
  padding:8px 10px;
  border:1px solid rgba(105,224,255,.12);
  border-radius:10px;
  background:rgba(5,10,17,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  color:#b9cfdb;
  font-size:9px;
  font-weight:820;
  letter-spacing:.1em;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .2s ease,
    visibility .2s ease,
    translate .24s cubic-bezier(.2,.75,.25,1);
}
.chapter-rail a span::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  width:6px;
  height:6px;
  border-top:1px solid rgba(105,224,255,.12);
  border-right:1px solid rgba(105,224,255,.12);
  background:rgba(5,10,17,.88);
  rotate:45deg;
  translate:-3px -50%;
}
.chapter-rail a i{
  position:relative;
  z-index:2;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#435865;
  box-shadow:0 0 0 4px rgba(5,9,15,.78);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    background .28s ease,
    box-shadow .28s ease;
}
.chapter-rail a:hover span,
.chapter-rail a:focus-visible span{
  opacity:1;
  visibility:visible;
  translate:0 -50%;
}
.chapter-rail a:hover i,
.chapter-rail a:focus-visible i{
  transform:scale(1.45);
  background:#8fa9b8;
}
.chapter-rail a.active i{
  transform:scale(1.65);
  background:var(--cyan);
  box-shadow:
    0 0 0 4px rgba(5,9,15,.82),
    0 0 0 7px rgba(105,224,255,.08),
    0 0 18px rgba(105,224,255,.72);
}
.chapter-rail a:focus-visible{
  outline:none;
}

/* Animated career route */
.journey-route{
  margin:0 0 clamp(42px,6vw,82px);padding:clamp(22px,3vw,34px);
  border:1px solid rgba(105,224,255,.13);border-radius:28px;overflow:hidden;
  background:
    linear-gradient(145deg,rgba(105,224,255,.055),transparent 40%),
    rgba(10,18,29,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 30px 90px rgba(0,0,0,.18);
}
.route-header,.route-footer{display:flex;align-items:center;justify-content:space-between;gap:18px}
.route-header h3{margin:6px 0 0;font-size:clamp(22px,3vw,36px);letter-spacing:-.045em}
.route-current{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid rgba(114,230,165,.18);border-radius:999px;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#c8f6dd;background:rgba(114,230,165,.06);white-space:nowrap}
.route-current i{width:7px;height:7px;border-radius:50%;background:#72e6a5;box-shadow:0 0 16px #72e6a5;animation:statusPulse 2.4s ease-in-out infinite}
.route-canvas{margin:18px -4px 12px}
.route-canvas svg{display:block;width:100%;height:auto;overflow:visible}
.route-grid path{stroke:rgba(137,174,201,.055);stroke-width:1}
.route-shadow{fill:none;stroke:rgba(105,224,255,.09);stroke-width:13;stroke-linecap:round}
.route-path{fill:none;stroke:url(#route-gradient);stroke-width:3;stroke-linecap:round;filter:url(#route-glow);stroke-dasharray:1;stroke-dashoffset:1}
.journey-route.visible .route-path{animation:routeDraw 2.3s cubic-bezier(.2,.75,.25,1) .25s forwards}
.route-node>circle:first-child{fill:rgba(5,14,24,.94);stroke:rgba(105,224,255,.28);stroke-width:1.5;opacity:0;scale:.3}
.route-node .route-core{fill:#69e0ff;filter:url(#route-glow);opacity:0}
.route-node text{fill:#d9edf7;font-size:13px;font-weight:850;letter-spacing:.1em;opacity:0}
.route-node text.route-year{fill:#7890a1;font-size:10px;font-weight:700}
.journey-route.visible .route-node>circle:first-child{animation:routeNodeIn .6s cubic-bezier(.2,.9,.2,1) calc(.55s + var(--node-delay)) forwards}
.journey-route.visible .route-node .route-core{animation:routeCoreIn .55s ease calc(.78s + var(--node-delay)) forwards}
.journey-route.visible .route-node text{animation:routeLabelIn .58s ease calc(.9s + var(--node-delay)) forwards}
.route-node-current>circle:first-child{stroke:#72e6a5;stroke-width:2}
.route-node-current .route-core{fill:#72e6a5}
.route-traveller{fill:#fff;filter:url(#route-glow);opacity:.9}
.route-footer{padding-top:18px;border-top:1px solid rgba(255,255,255,.06)}
.route-footer span{color:#7f94a4;font-size:11px}
.route-footer b{color:#eafaff;font-size:16px;margin-right:6px}

/* High-value project hovers */
.project-card,.listing-card{overflow:hidden}
.project-open,.listing-open{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.065);font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#92a9b9;transition:color .3s ease}
.project-open b,.listing-open b{font-size:16px;color:var(--cyan);transition:translate .3s ease}
.project-card:hover .project-open,.listing-card:hover .listing-open{color:#e9fbff}
.project-card:hover .project-open b,.listing-card:hover .listing-open b{translate:4px -4px}
.project-card::before,.listing-card::before{
  content:"";position:absolute;z-index:3;left:-10%;right:-10%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);scale:0 1;transform-origin:left;transition:scale .55s cubic-bezier(.2,.75,.25,1)
}
.project-card:hover::before,.listing-card:hover::before{scale:1 1}

/* Cinematic image reveal */
.current-project img,.detail-hero img{clip-path:inset(0 100% 0 0 round 28px);transition:clip-path 1.05s cubic-bezier(.76,0,.24,1),filter .5s ease}
.current-project.visible img,.detail-hero.visible img{clip-path:inset(0 0 0 0 round 28px)}
.gallery img{cursor:zoom-in}
.gallery img:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

/* Accessible lightbox */
.image-lightbox{
  position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:clamp(16px,4vw,52px);
  background:rgba(2,5,9,.94);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.image-lightbox.open{opacity:1;visibility:visible}
.lightbox-stage{position:relative;width:min(1280px,100%);height:min(82vh,860px);display:grid;place-items:center}
.lightbox-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:18px;box-shadow:0 40px 130px rgba(0,0,0,.6);scale:.94;opacity:0;transition:scale .38s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.image-lightbox.open .lightbox-stage img{scale:1;opacity:1}
.lightbox-caption{position:absolute;left:0;right:0;bottom:-32px;text-align:center;color:#9bb0bf;font-size:12px}
.lightbox-close,.lightbox-arrow{
  position:absolute;z-index:2;border:1px solid rgba(255,255,255,.12);background:rgba(8,15,24,.8);color:#eefbff;
  display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(12px);transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
.lightbox-close{right:18px;top:18px;width:46px;height:46px;border-radius:50%;font-size:20px}
.lightbox-arrow{top:50%;translate:0 -50%;width:50px;height:68px;border-radius:18px;font-size:24px}
.lightbox-prev{left:18px}.lightbox-next{right:18px}
.lightbox-close:hover,.lightbox-arrow:hover{transform:scale(1.06);background:rgba(105,224,255,.10);border-color:rgba(105,224,255,.34)}

/* Back to top */
.back-top{
  position:fixed;right:22px;bottom:22px;z-index:90;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(105,224,255,.16);background:rgba(6,12,20,.78);color:#e9fbff;
  display:grid;place-items:center;font-size:18px;cursor:pointer;backdrop-filter:blur(15px);
  opacity:0;visibility:hidden;translate:0 12px;transition:opacity .3s ease,visibility .3s ease,translate .3s ease,background .25s ease,transform .25s ease;
}
.back-top.visible{opacity:1;visibility:visible;translate:0}
.back-top:hover{background:rgba(105,224,255,.12);transform:translateY(-3px)}

/* Final CTA energy */
.next-panel{overflow:hidden;isolation:isolate}
.next-panel::before{
  content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;right:-180px;top:-270px;
  background:conic-gradient(from 0deg,rgba(105,224,255,.14),transparent 22%,rgba(112,150,255,.1),transparent 52%,rgba(114,230,165,.09),transparent 80%);
  animation:ctaOrbit 18s linear infinite;
}
.next-panel::after{
  content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 84% 40%,rgba(105,224,255,.075),transparent 37%);
}

/* Responsive guardrails */
@media(max-width:1180px){
  .chapter-rail{display:none}
}
@media(max-width:820px){
  .route-header,.route-footer{align-items:flex-start;flex-direction:column}
  .route-current{white-space:normal}
  .route-canvas{overflow-x:auto;overflow-y:hidden;padding-bottom:8px}
  .route-canvas svg{min-width:760px}
  .route-footer{gap:8px}
  .signal-track{animation-duration:26s}
}
@media(max-width:680px){
  .signature-intro-mark{width:66px;height:66px;border-radius:21px}
  .hero-copy::before{display:none}
  .route-footer span{font-size:10px}
  .lightbox-arrow{width:42px;height:58px}
  .lightbox-prev{left:7px}.lightbox-next{right:7px}
  .lightbox-close{right:10px;top:10px}
  .back-top{right:15px;bottom:15px;width:44px;height:44px}
  section[data-chapter]::before{font-size:135px;right:8px}
}

/* Signature keyframes */
@keyframes introMark{
  0%{opacity:0;scale:.72;rotate:-8deg;filter:blur(8px)}
  65%{opacity:1;scale:1.08;rotate:2deg;filter:blur(0)}
  100%{scale:1;rotate:0}
}
@keyframes introText{from{opacity:0;translate:0 24px}to{opacity:1;translate:0}}
@keyframes introLine{to{transform:translateX(100%)}}
@keyframes introAtmosphere{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
@keyframes introLeave{to{translate:0 -100%;border-radius:0 0 50% 50%}}
@keyframes wipeReveal{from{transform:translateY(0)}to{transform:translateY(-105%)}}
@keyframes wipeCover{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes signatureOrbit{to{rotate:360deg}}
@keyframes orbitNode{to{translate:30px -24px;opacity:.4}}
@keyframes signalMove{to{translate:-50% 0}}
@keyframes routeDraw{to{stroke-dashoffset:0}}
@keyframes routeNodeIn{to{opacity:1;scale:1}}
@keyframes routeCoreIn{0%{opacity:0;scale:0}65%{opacity:1;scale:1.8}100%{opacity:1;scale:1}}
@keyframes routeLabelIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0}}
@keyframes ctaOrbit{to{rotate:360deg}}

@media(prefers-reduced-motion:reduce){
  .signature-intro{display:none!important}
  .page-wipe{display:none!important}
  .hero-network{display:none!important}
  .signature-orbits span,.signature-orbits i,.signal-track,.route-current i,.next-panel::before{animation:none!important}
  .route-path{stroke-dashoffset:0!important;animation:none!important}
  .route-node>circle:first-child,.route-node .route-core,.route-node text{opacity:1!important;scale:1!important;animation:none!important}
  .route-traveller{display:none!important}
  section[data-chapter]::before,section[data-chapter]::after{translate:0!important}
}


/* =========================================================
   V17 — EDITORIAL CAREER CHAPTERS
   Replaces the route diagram with a clear, personal and
   responsibility-led career narrative.
   ========================================================= */

.career-section{overflow:visible!important}
.career-story{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.7fr);
  gap:clamp(36px,6vw,86px);
  align-items:start;
}
.career-story-aside{
  position:sticky;
  top:112px;
  min-height:calc(100vh - 150px);
  padding:30px 26px;
  border:1px solid rgba(105,224,255,.12);
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(105,224,255,.06),transparent 42%),
    rgba(8,15,24,.72);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 30px 90px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
}
.career-active-number{
  margin-top:28px;
  font-size:clamp(78px,9vw,130px);
  line-height:.72;
  font-weight:950;
  letter-spacing:-.09em;
  color:rgba(229,248,255,.96);
  text-shadow:0 0 38px rgba(105,224,255,.10);
  transition:opacity .25s ease,translate .3s ease;
}
.career-active-number.changing,
.career-story-aside h3.changing,
.career-active-role.changing,
.career-active-period.changing{opacity:0;translate:0 8px}
.career-active-period{
  margin:26px 0 8px;
  color:var(--cyan);
  font-size:11px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:opacity .25s ease,translate .3s ease;
}
.career-story-aside h3{
  margin:0;
  font-size:clamp(24px,2.7vw,36px);
  line-height:1.05;
  letter-spacing:-.045em;
  transition:opacity .25s ease,translate .3s ease;
}
.career-active-role{
  margin:12px 0 0;
  color:#91a7b7;
  font-size:13px;
  line-height:1.55;
  transition:opacity .25s ease,translate .3s ease;
}
.career-progress{
  position:relative;
  width:100%;
  height:2px;
  margin:28px 0 24px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.075);
}
.career-progress i{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--career-progress,0%);
  background:linear-gradient(90deg,var(--cyan),#8ca8ff,#72e6a5);
  box-shadow:0 0 20px rgba(105,224,255,.36);
  transition:width .55s cubic-bezier(.2,.75,.25,1);
}
.career-stage-list{
  display:grid;
  gap:7px;
  margin-top:auto;
}
.career-stage-list a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 9px;
  border-radius:12px;
  color:#647b8b;
  text-decoration:none;
  font-size:10px;
  font-weight:780;
  letter-spacing:.04em;
  transition:color .25s ease,background .25s ease,translate .25s ease;
}
.career-stage-list a i{
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#425765;
  transition:scale .25s ease,background .25s ease,box-shadow .25s ease;
}
.career-stage-list a b{color:#8ba0af;margin-right:4px}
.career-stage-list a:hover{color:#d8f7ff;background:rgba(105,224,255,.035);translate:4px 0}
.career-stage-list a.active{color:#eafcff;background:rgba(105,224,255,.06)}
.career-stage-list a.active i{
  scale:1.55;
  background:var(--cyan);
  box-shadow:0 0 15px rgba(105,224,255,.75);
}
.career-stage-list a.active b{color:var(--cyan)}

.career-chapters{
  display:grid;
  gap:clamp(22px,3vw,34px);
}
.career-chapter{
  position:relative;
  display:grid;
  grid-template-columns:minmax(240px,.86fr) minmax(0,1.14fr);
  min-height:430px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:30px;
  background:rgba(8,15,24,.62);
  box-shadow:0 22px 70px rgba(0,0,0,.18);
  opacity:.5;
  scale:.98;
  filter:saturate(.72);
  transition:
    opacity .55s ease,
    scale .55s cubic-bezier(.2,.75,.25,1),
    filter .55s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}
.career-chapter::before{
  content:"";
  position:absolute;
  z-index:5;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(transparent,var(--cyan),transparent);
  scale:1 0;
  transform-origin:center;
  transition:scale .6s cubic-bezier(.2,.75,.25,1);
}
.career-chapter.is-active{
  opacity:1;
  scale:1;
  filter:saturate(1);
  border-color:rgba(105,224,255,.22);
  box-shadow:0 34px 100px rgba(0,0,0,.32),0 0 0 1px rgba(105,224,255,.025);
}
.career-chapter.is-active::before{scale:1 1}
.career-chapter-current.is-active{border-color:rgba(114,230,165,.27)}

.career-visual{
  position:relative;
  min-height:430px;
  overflow:hidden;
  isolation:isolate;
  background:#08111c;
}
.career-visual::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 50%,rgba(3,8,14,.74)),
    linear-gradient(90deg,transparent 56%,rgba(3,8,14,.26));
}
.career-visual-image img{
  width:100%;
  height:100%;
  min-height:430px;
  object-fit:cover;
  scale:1.035;
  transition:scale 1.1s cubic-bezier(.2,.75,.25,1),filter .6s ease;
}
.career-chapter.is-active .career-visual-image img{scale:1.085;filter:saturate(1.06) brightness(1.02)}
.career-image-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(4,9,15,.05),rgba(4,9,15,.44)),
    radial-gradient(circle at 40% 35%,rgba(105,224,255,.08),transparent 38%);
}
.career-visual-grid{
  position:absolute;
  inset:0;
  opacity:.55;
  background-image:
    linear-gradient(rgba(105,224,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(105,224,255,.055) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,#000,transparent 88%);
}
.career-visual-code{
  position:absolute;
  z-index:1;
  left:28px;
  top:44%;
  translate:0 -50%;
  font-size:clamp(54px,7vw,102px);
  font-weight:950;
  line-height:.8;
  letter-spacing:-.085em;
  color:rgba(224,248,255,.94);
}
.career-visual-label{
  position:absolute;
  z-index:4;
  left:24px;
  bottom:22px;
  padding:10px 12px;
  border:1px solid rgba(105,224,255,.16);
  border-radius:999px;
  background:rgba(5,13,21,.74);
  backdrop-filter:blur(13px);
  color:#dff8ff;
  font-size:9px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.career-visual-foundation{
  background:
    radial-gradient(circle at 28% 30%,rgba(105,224,255,.14),transparent 28%),
    linear-gradient(150deg,#0a1826,#050b12 68%);
}
.career-circuit i{
  position:absolute;
  z-index:1;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 20px rgba(105,224,255,.72);
}
.career-circuit i:nth-child(1){left:25%;top:24%}
.career-circuit i:nth-child(2){left:72%;top:35%}
.career-circuit i:nth-child(3){left:52%;top:70%}
.career-circuit i:nth-child(4){left:18%;top:78%}
.career-circuit::before,.career-circuit::after{
  content:"";
  position:absolute;
  z-index:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  transform-origin:left;
}
.career-circuit::before{left:26%;top:25%;width:48%;rotate:13deg}
.career-circuit::after{left:20%;top:78%;width:42%;rotate:-13deg}
.career-visual-international{
  background:
    radial-gradient(circle at 68% 30%,rgba(112,150,255,.15),transparent 30%),
    linear-gradient(145deg,#0b1525,#060c15 66%);
}
.career-coordinates{
  position:absolute;
  z-index:1;
  right:24px;
  top:25px;
  display:grid;
  gap:4px;
  color:#71899a;
  font-size:10px;
  letter-spacing:.12em;
}
.career-visual-commercial{
  background:
    radial-gradient(circle at 32% 38%,rgba(114,230,165,.10),transparent 28%),
    linear-gradient(145deg,#091923,#050b11 72%);
}
.career-visual-commercial .career-visual-code{
  top:30%;
  font-size:clamp(28px,4vw,54px);
  color:#dbf9eb;
}
.career-bars{
  position:absolute;
  z-index:1;
  left:30px;
  right:30px;
  bottom:95px;
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:120px;
}
.career-bars i{
  flex:1;
  min-width:12px;
  border-radius:7px 7px 2px 2px;
  background:linear-gradient(180deg,rgba(114,230,165,.84),rgba(105,224,255,.15));
  box-shadow:0 0 18px rgba(114,230,165,.10);
  transform-origin:bottom;
  scale:1 .15;
  transition:scale .9s cubic-bezier(.2,.75,.25,1);
}
.career-bars i:nth-child(1){height:42%}
.career-bars i:nth-child(2){height:64%}
.career-bars i:nth-child(3){height:51%}
.career-bars i:nth-child(4){height:81%}
.career-bars i:nth-child(5){height:100%}
.career-chapter.is-active .career-bars i{scale:1 1}
.career-commercial-words{
  position:absolute;
  z-index:4;
  left:28px;
  right:28px;
  bottom:58px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#6f8b80;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.career-current-badge{
  position:absolute;
  z-index:5;
  right:18px;
  top:18px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(114,230,165,.26);
  border-radius:999px;
  background:rgba(8,22,17,.78);
  backdrop-filter:blur(14px);
  color:#d9fbea;
  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.career-current-badge i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#72e6a5;
  box-shadow:0 0 16px #72e6a5;
  animation:statusPulse 2.4s ease-in-out infinite;
}

.career-copy{
  position:relative;
  z-index:3;
  padding:clamp(26px,4vw,48px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.career-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 15px;
  margin-bottom:18px;
  color:#718898;
  font-size:9px;
  font-weight:820;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.career-meta span:first-child{color:var(--cyan)}
.career-copy h3{
  margin:0;
  font-size:clamp(25px,3.2vw,42px);
  line-height:1.03;
  letter-spacing:-.052em;
}
.career-copy>p{
  margin:19px 0 0;
  color:#9eb1bf;
  line-height:1.72;
  font-size:14px;
}
.career-shift{
  margin-top:25px;
  padding:17px 18px;
  border-left:2px solid rgba(105,224,255,.52);
  background:linear-gradient(90deg,rgba(105,224,255,.055),transparent);
}
.career-shift span{
  display:block;
  margin-bottom:6px;
  color:#dff8ff;
  font-size:9px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.career-shift p{
  margin:0;
  color:#8fa5b4;
  font-size:12px;
  line-height:1.62;
}
.career-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:22px;
}
.career-tags span{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;
  color:#8096a5;
  font-size:9px;
  font-weight:760;
}
.career-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.065);
  color:#a9bfcc;
  text-decoration:none;
  font-size:10px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:color .25s ease;
}
.career-link b{
  color:var(--cyan);
  font-size:17px;
  transition:translate .25s ease;
}
.career-link:hover{color:#ecfbff}
.career-link:hover b{translate:4px -4px}

.career-conclusion{
  position:relative;
  margin-top:clamp(42px,6vw,76px);
  padding:clamp(30px,5vw,58px);
  overflow:hidden;
  border:1px solid rgba(105,224,255,.14);
  border-radius:30px;
  background:
    radial-gradient(circle at 82% 32%,rgba(105,224,255,.085),transparent 30%),
    linear-gradient(145deg,rgba(105,224,255,.045),rgba(8,15,24,.58));
}
.career-conclusion::after{
  content:"06";
  position:absolute;
  right:26px;
  bottom:-24px;
  color:rgba(223,248,255,.035);
  font-size:clamp(110px,16vw,230px);
  line-height:.75;
  font-weight:950;
  letter-spacing:-.09em;
}
.career-conclusion h3{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  margin:10px 0 0;
  font-size:clamp(30px,4.5vw,60px);
  line-height:.98;
  letter-spacing:-.06em;
}
.career-conclusion p{
  position:relative;
  z-index:1;
  width:min(720px,100%);
  margin:22px 0 0;
  color:#96aab8;
  line-height:1.72;
}

@media(max-width:1100px){
  .career-story{grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr);gap:34px}
  .career-chapter{grid-template-columns:1fr}
  .career-visual{min-height:300px}
  .career-visual-image img{min-height:300px}
}
@media(max-width:820px){
  .career-story{grid-template-columns:1fr}
  .career-story-aside{
    position:relative;
    top:auto;
    min-height:0;
    padding:24px;
  }
  .career-active-number{font-size:78px}
  .career-stage-list{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding-bottom:5px;
    margin-top:24px;
    scrollbar-width:none;
  }
  .career-stage-list::-webkit-scrollbar{display:none}
  .career-stage-list a{flex:0 0 auto}
  .career-progress{margin-bottom:8px}
  .career-chapter{min-height:0}
  .career-visual{min-height:270px}
  .career-visual-image img{min-height:270px}
}
@media(max-width:560px){
  .career-story-aside{padding:20px}
  .career-active-number{font-size:66px}
  .career-copy{padding:24px 21px 28px}
  .career-copy h3{font-size:28px}
  .career-visual{min-height:235px}
  .career-visual-image img{min-height:235px}
  .career-commercial-words{display:none}
  .career-visual-code{left:21px}
  .career-visual-label{left:17px;bottom:16px}
  .career-conclusion{padding:30px 22px 42px}
}
@media(prefers-reduced-motion:reduce){
  .career-chapter{opacity:1!important;scale:1!important;filter:none!important}
  .career-bars i{scale:1 1!important;transition:none!important}
  .career-current-badge i{animation:none!important}
}