@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap');
:root{--ink:#10272e;--deep:#0c1e25;--lime:#d5fc51;--paper:#f4f5ef;--muted:#a8b8bb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--deep);color:var(--paper);font:16px/1.7 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #ffbd57;outline-offset:5px}img,video{display:block;width:100%;object-fit:cover}header{height:98px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff20}.brand{font:800 32px 'Manrope',sans-serif;letter-spacing:-1.8px}.brand span{font-size:13px;vertical-align:top;margin-left:4px}nav{display:flex;gap:34px;font-size:14px}.nav-contact{font-size:14px;border:1px solid #789096;border-radius:40px;padding:9px 20px}.nav-contact span{margin-left:24px}.hero{padding:56px 5% 0;display:grid;grid-template-columns:1.1fr 1fr;gap:25px 6%}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:600;display:flex;align-items:center;gap:12px}.little-line{width:26px;height:1px;background:var(--lime)}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:'Manrope',sans-serif}h1{position:relative;font-size:clamp(64px,7.7vw,116px);line-height:1.04;letter-spacing:-6px;font-weight:600;margin:27px 0}h1 .lime{color:var(--lime)}.asterisk{display:inline-block;color:var(--lime);font-size:79px;margin-left:32px;vertical-align:middle}.hero-copy>p{max-width:420px;color:#bbcacd;font-size:17px;line-height:1.7}.button{display:inline-flex;justify-content:space-between;gap:30px;align-items:center;border-radius:100px;padding:17px 25px;font-size:14px;font-weight:700;border:0}.lime-button{background:var(--lime);color:var(--deep)}.hero .button{margin-top:29px}.button:hover{transform:translateY(-2px)}.hero-note{font-size:12px;color:var(--muted);margin-top:17px}.hero-visual{min-height:620px;position:relative;overflow:hidden;border-radius:150px 6px 6px 6px}.hero-visual video{height:100%;position:absolute;object-position:center}.visual-shade{position:absolute;inset:0;background:linear-gradient(180deg,#071b2920 40%,#071b29dd)}.video-top{position:absolute;top:28px;left:45px;right:25px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:2px}.video-top button{border:1px solid #ffffff70;background:#0c1e2580;color:white;border-radius:50%;width:38px;height:38px}.visual-caption{position:absolute;bottom:35px;left:35px;right:35px}.handwritten{font:44px/.95 'Caveat',cursive;display:block;transform:rotate(-7deg);margin-bottom:42px}.nameplate{border-top:1px solid #ffffff60;padding-top:20px;display:flex;justify-content:space-between;align-items:end;gap:15px}.nameplate strong{font-size:18px}.nameplate span{font-size:11px;max-width:120px;line-height:1.4}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;padding:25px 0 32px;font-size:11px;letter-spacing:1.4px}.ribbon{padding:23px 0;background:var(--lime);color:var(--deep);white-space:nowrap;overflow:hidden;font:700 clamp(15px,1.8vw,24px) 'Manrope';text-align:center}.ribbon span{margin:0 28px}.section{padding:110px 7%}h2{font-size:clamp(36px,4.6vw,66px);font-weight:500;letter-spacing:-2.8px;line-height:1.13}h2 em{font-style:normal;color:#8ba5a8}.section .eyebrow{margin-bottom:24px}.story{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:.85fr 1fr;gap:10%;align-items:center}.story-photo{position:relative;transform:rotate(-3deg)}.story-photo img{aspect-ratio:4/4.8;border-radius:4px}.photo-label{position:absolute;background:var(--lime);bottom:26px;right:-30px;padding:15px 24px;font:25px 'Caveat';transform:rotate(5deg)}.story h2 em{color:#708284}.story .lead{font-size:21px;line-height:1.5;margin:27px 0 17px}.story p:not(.lead){color:#506265;max-width:490px}.languages{border-top:1px solid #193d3b30;margin-top:30px;padding-top:20px;display:grid;gap:6px}.languages span{font-size:12px;color:#657776}.languages strong{font-size:14px;font-weight:500}.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:60px}.section-heading>p{max-width:330px;color:var(--muted);font-size:15px}.timeline article{display:grid;grid-template-columns:190px 1fr 50px;gap:30px;padding:33px 0;border-top:1px solid #ffffff25;align-items:center}.year{font:400 49px 'Manrope';color:var(--lime);letter-spacing:-2px}.location{font-size:10px;letter-spacing:2px;color:var(--muted)}.timeline h3{font-size:25px;font-weight:500;margin:5px 0}.timeline p{color:var(--muted);font-size:14px}.timeline-index{font-size:13px;color:#718d93;text-align:right}.work-section{background:#172f36;display:grid;grid-template-columns:1.1fr .8fr;gap:10%;align-items:center}.work-section figure{position:relative}.work-section img{aspect-ratio:3/4;border-radius:100px 4px 4px 4px}.work-section figcaption{padding:17px 0;font-size:12px;color:#aac1c4}.principle{display:flex;gap:22px;padding-top:25px;margin-top:24px;border-top:1px solid #ffffff20}.principle>span{font-size:12px;color:var(--lime)}.principle h3{font-size:19px;font-weight:500;margin-bottom:9px}.principle p{font-size:15px;color:var(--muted)}.perspectives{background:var(--paper);color:var(--ink)}.perspectives .section-heading>p{color:#627579}.quote-tabs{display:flex;gap:36px;border-bottom:1px solid #193d3b30;margin-bottom:35px}.quote-tabs button{border:0;background:none;padding:0 0 15px;color:#647574;font-size:14px}.quote-tabs button[aria-selected=true]{border-bottom:3px solid var(--ink);color:var(--ink)}.quote-panel{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center}.quote-art{position:relative}.quote-art img{aspect-ratio:4/4.1}.quote-art>span{position:absolute;bottom:24px;left:25px;color:white;letter-spacing:3px;font-size:11px}.quote-mark{font:80px/.8 Georgia;color:#839d86}.original{font-size:23px;margin:18px 0;line-height:1.5}.quote-text blockquote{font:500 clamp(24px,2.7vw,37px)/1.3 'Manrope';letter-spacing:-1px;margin:0 0 20px}.quote-credit{font-size:12px;color:#667d7e}.takeaway{border-top:1px solid #193d3b30;padding-top:22px;margin-top:25px}.takeaway>span{font-size:10px;letter-spacing:1.8px}.takeaway p{margin-top:9px;color:#4f6868;font-size:15px}.quote-text>a{display:inline-block;margin-top:20px;font-size:12px;text-decoration:underline;text-underline-offset:4px}.resume-section{display:flex;justify-content:space-between;align-items:center;gap:40px;border-bottom:1px solid #ffffff20}.resume-section h2{font-size:43px}.resume-section p{color:var(--muted);margin-top:20px}.resume-actions{display:grid;gap:15px;min-width:235px}.outline{border:1px solid #789096;color:white;background:transparent}.contact{background:var(--lime);color:var(--deep)}.contact h2{font-size:clamp(70px,11vw,158px);letter-spacing:-7px;line-height:1}.contact h2 em{color:#577932}.contact h2>span{float:right;font-size:160px}.contact-bottom{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-top:50px}.contact-bottom p{font-size:15px}.email{border-bottom:1px solid var(--ink);padding-bottom:10px;font-size:clamp(16px,2.1vw,29px)}footer{padding:38px 5%;display:flex;justify-content:space-between;align-items:center}footer>span,footer>a:last-child{font-size:12px;color:var(--muted)}.skip{position:fixed;top:-100px;background:white;color:black;padding:12px;z-index:100}.skip:focus{top:0}dialog{width:min(900px,95vw);height:90vh;border:0;border-radius:12px;background:var(--paper);padding:25px;color:var(--ink)}dialog::backdrop{background:#06151ee0}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.dialog-header h2{font-size:24px;letter-spacing:-1px}.dialog-header button{border:0;background:none;font-size:25px}dialog iframe{width:100%;height:calc(100% - 110px);border:1px solid #ccc}dialog>a{font-size:14px;display:block;margin-top:12px}a,button{transition:transform .2s,background .2s}
@media(min-width:1600px){body{max-width:1800px;margin:auto}}@media(max-width:900px){header{height:80px}nav{gap:18px}.hero{gap:30px;padding-top:40px}h1{font-size:72px;letter-spacing:-4px}.asterisk{font-size:45px;margin-left:12px}.hero-visual{min-height:560px;border-radius:90px 4px 4px 4px}.video-top{left:25px;font-size:8px}.nameplate{display:block}.nameplate span{display:block;max-width:100%;margin-top:6px}.section{padding:80px 6%}.story{gap:7%}.section-heading{gap:30px}.timeline article{grid-template-columns:120px 1fr 30px}.quote-tabs{gap:20px}.work-section{gap:6%}.contact h2>span{font-size:100px}.contact-bottom{align-items:start;flex-direction:column}}@media(max-width:600px){header{padding:0 6%;height:74px}.brand{font-size:27px}nav{display:none}.nav-contact{padding:7px 15px}.hero{grid-template-columns:1fr;padding:35px 6% 0;gap:30px}.hero .eyebrow{font-size:10px}h1{font-size:76px;letter-spacing:-4px;margin:25px 0}.hero-copy>p{font-size:16px}.hero-visual{min-height:460px;border-radius:100px 4px 4px 4px}.visual-caption{left:25px;bottom:25px}.nameplate{display:flex}.hero-bottom{padding:0 0 25px;gap:20px;font-size:9px}.hero-bottom>span{max-width:190px}.ribbon{text-align:left;padding:18px 20px;font-size:15px}.section{padding:65px 6%}.story{grid-template-columns:1fr;gap:50px}.story-photo{margin:0 20px 0 10px}.story-photo img{aspect-ratio:4/4.1;object-position:center 35%}h2{font-size:43px;letter-spacing:-2px}.section .eyebrow{font-size:10px}.section-heading{display:block;margin-bottom:35px}.section-heading>p{margin-top:22px;font-size:14px}.timeline article{grid-template-columns:73px 1fr;gap:17px}.year{font-size:30px;align-self:start;margin-top:15px}.timeline h3{font-size:22px}.timeline-index{display:none}.location{font-size:9px}.timeline p{font-size:13px}.work-section{grid-template-columns:1fr;gap:40px}.work-section img{max-height:500px;object-position:center 45%}.quote-tabs{gap:0;justify-content:space-between}.quote-tabs button{font-size:11px;max-width:30%;text-align:left}.quote-panel{grid-template-columns:1fr;gap:35px}.quote-art img{aspect-ratio:4/3}.quote-text blockquote{font-size:30px}.resume-section{flex-direction:column;align-items:stretch}.resume-section h2{font-size:38px}.resume-actions .button{justify-content:space-between}.contact h2{font-size:80px;letter-spacing:-4px}.contact h2>span{font-size:70px}.contact-bottom{margin-top:35px}.email{font-size:17px}footer{padding:30px 6%;flex-wrap:wrap;gap:20px}footer>span{order:3;width:100%}.handwritten{font-size:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.hero-portrait{height:100%;position:absolute;object-position:center 40%}.motion-interlude{position:relative;background:var(--deep);width:100%;margin:0}.motion-interlude video{width:100%;height:clamp(250px,42vw,580px);object-fit:cover;object-position:center top;border-radius:0;background:#b18dbb}.motion-caption{position:absolute;inset:auto 0 0;padding:28px 5% 16px;background:linear-gradient(transparent,rgba(12,30,37,.65));display:flex;gap:20px;justify-content:space-between;align-items:center;color:var(--paper);font-size:12px;letter-spacing:2px}.motion-caption button{flex-shrink:0;border:1px solid #789096;background:rgba(12,30,37,.45);color:white;width:44px;height:44px;border-radius:50%}
@media(min-width:601px) and (max-width:760px){nav{display:none}.hero{grid-template-columns:1fr}.hero-visual{min-height:600px}h1{font-size:85px}.section-heading{display:block}.section-heading>p{margin-top:20px}.quote-panel{grid-template-columns:1fr;gap:30px}.story,.work-section{grid-template-columns:1fr;gap:45px}.resume-section{flex-direction:column;align-items:stretch}}

/* ---------- Story / about (v2) ---------- */
.story{grid-template-columns:1fr 1fr;gap:8%;overflow:hidden;position:relative}
.story::before{content:"";position:absolute;width:520px;height:520px;left:-160px;top:-120px;border-radius:50%;background:radial-gradient(circle,#d5fc5160,transparent 65%);pointer-events:none}
.story-collage{position:relative;padding:0 14% 70px 0}
.story-main{position:relative;border-radius:220px 220px 6px 6px;overflow:hidden;box-shadow:0 40px 80px -30px #0c1e2570}
.story-main img{aspect-ratio:4/5;object-position:center 30%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.story-collage:hover .story-main img{transform:scale(1.04)}
.story-polaroid{position:absolute;right:0;bottom:0;width:46%;background:#fff;padding:10px 10px 0;box-shadow:0 25px 50px -18px #0c1e2570;transform:rotate(4deg);transition:transform .5s}
.story-polaroid:hover{transform:rotate(0) translateY(-6px)}
.story-polaroid img{aspect-ratio:1}
.story-polaroid figcaption{font:26px/1 'Caveat',cursive;padding:12px 4px 14px;color:var(--ink)}
.story-stamp{position:absolute;left:-28px;top:38%;width:118px;height:118px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center}
.story-stamp svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.story-stamp text{font:700 10.5px 'Manrope',sans-serif;letter-spacing:2.6px;fill:var(--lime)}
.story-stamp b{font-size:30px;font-weight:400}
@keyframes spin{to{transform:rotate(360deg)}}
.facts{display:flex;gap:44px;margin:34px 0 0;padding:0}
.facts div{display:flex;flex-direction:column-reverse}
.facts dt{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#657776}
.facts dd{margin:0;font:600 44px/1.05 'Manrope',sans-serif;letter-spacing:-2px;color:var(--ink)}

/* ---------- Life around yachts ---------- */
.water{background:linear-gradient(180deg,var(--deep),#0f2a33 60%,#18323a);position:relative;overflow:hidden}
.water::after{content:"";position:absolute;right:-200px;bottom:-260px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,#ff9a5a26,transparent 65%);pointer-events:none}
.water-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:280px 280px 190px;gap:18px;position:relative;z-index:1}
.water-grid figure{margin:0;position:relative;overflow:hidden;border-radius:6px;background:#10272e}
.water-grid img,.water-grid video{height:100%;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.water-grid figure:hover img{transform:scale(1.05)}
.water-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(transparent,#071b29c0);font-size:12px;letter-spacing:.4px;color:#e8efe9}
.w-video{grid-row:1/4;border-radius:160px 6px 6px 6px!important}
.w-video video{object-position:center 60%}
.w-video figcaption{display:flex;justify-content:space-between;align-items:center;letter-spacing:2px;font-size:11px;padding:60px 22px 20px}
.w-video button{border:1px solid #ffffff80;background:#0c1e2566;color:#fff;width:44px;height:44px;border-radius:50%;flex-shrink:0}
.w-selfie{grid-column:2;grid-row:1/3}
.w-selfie img{object-position:center 30%}
.w-guests{grid-column:3;grid-row:1/2}
.w-guests img{object-position:center 42%}
.w-crew{grid-column:3;grid-row:2/4}
.w-crew img{object-position:center 30%}
.w-note{grid-column:2;grid-row:3;margin:0;background:var(--lime);color:var(--deep);border-radius:6px;padding:24px 26px;display:flex;align-items:flex-end}
.w-note p{font:600 clamp(19px,1.8vw,25px)/1.2 'Manrope',sans-serif;letter-spacing:-.6px}

/* ---------- Hero polish ---------- */
.video-top{justify-content:flex-end;left:auto}
.hero h1,.hero-copy>p,.hero .button,.hero-note,.hero-copy .eyebrow{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.08s}.hero-copy>p{animation-delay:.2s}.hero .button{animation-delay:.3s}.hero-note{animation-delay:.38s}
.hero-visual{animation:unveil 1.3s cubic-bezier(.7,0,.2,1) both .1s}
.asterisk{animation:spin 14s linear infinite}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@keyframes unveil{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
.ribbon{text-align:left}
.ribbon-track{display:inline-block;animation:marquee 32s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Scroll reveal ---------- */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.water-grid .reveal:nth-child(2){transition-delay:.08s}.water-grid .reveal:nth-child(3){transition-delay:.16s}.water-grid .reveal:nth-child(4){transition-delay:.24s}.water-grid .reveal:nth-child(5){transition-delay:.32s}
.timeline article{transition:background .3s,padding .3s}
.timeline article:hover{background:#ffffff08;padding-left:18px}

@media(max-width:900px){
.story-stamp{width:96px;height:96px;left:-14px}
.facts{gap:28px}.facts dd{font-size:36px}
.water-grid{grid-template-columns:1fr 1fr;grid-template-rows:420px 260px 260px auto}
.w-video{grid-column:1/3;grid-row:1;border-radius:120px 6px 6px 6px!important}
.w-selfie{grid-column:1;grid-row:2/4}
.w-guests{grid-column:2;grid-row:2}
.w-crew{grid-column:2;grid-row:3}
.w-note{grid-column:1/3;grid-row:4}
}
@media(max-width:760px){.story{grid-template-columns:1fr;gap:50px}}
@media(max-width:600px){
.story-collage{padding:0 10% 60px 0;margin:0}
.story-main{border-radius:160px 160px 6px 6px}
.story-stamp{width:84px;height:84px;left:-8px;top:30%}
.story-stamp text{font-size:9.6px}
.water-grid{grid-template-rows:460px 220px 220px auto;gap:12px}
.w-video{border-radius:100px 6px 6px 6px!important}
}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}.hero-visual{clip-path:none}}
.ribbon .ribbon-track{margin:0}
.story-collage img,.water-grid img{height:auto}.water-grid img{height:100%}

/* ---------- Hero: name, roles, CV actions ---------- */
.hero h1{margin:22px 0 18px}
.hero-roles{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:10px;animation:rise .9s cubic-bezier(.2,.7,.2,1) both .14s}
.hero-roles li{border:1px solid #d5fc5166;color:var(--lime);border-radius:100px;padding:6px 16px;font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase}
.hero-motto{display:block;color:var(--paper);font-weight:600;margin-bottom:4px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}
.hero .hero-actions .button{margin-top:0}
.hero-note{display:flex;flex-wrap:wrap;gap:10px;font-size:13px}
.hero-note a{text-decoration:underline;text-underline-offset:4px;color:#d7e3e5}
.hero-note a:hover{color:var(--lime)}
/* ---------- Resume section ---------- */
.resume-actions{grid-template-columns:1fr 1fr}
.resume-actions [lang=ar],.resume-actions button[data-cv=ar]{font-family:'DM Sans',Tahoma,sans-serif}
.certs{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px;font-size:14px;color:#c9d6d8;max-width:560px}
.certs b{display:inline-block;background:var(--lime);color:var(--deep);font-size:10px;letter-spacing:1px;border-radius:4px;padding:1px 6px;margin-right:8px;vertical-align:2px}
/* ---------- Contact ---------- */
.contact-links{display:grid;gap:14px;justify-items:start}
footer>a[href^="tel:"]{font-size:12px;color:var(--muted)}
/* ---------- CV dialog ---------- */
.dialog-header{gap:16px}.dialog-header h2{margin-right:auto}
.cv-switch{display:flex;border:1px solid #10272e40;border-radius:100px;padding:3px}
.cv-switch button{border:0;background:none;border-radius:100px;padding:6px 14px;font-size:13px;color:var(--ink)}
.cv-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
/* ---------- Floating quick contact ---------- */
.fab{position:fixed;right:22px;bottom:22px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fab a{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:100px;box-shadow:0 12px 30px -8px #000a;font-weight:700;font-size:14px}
.fab svg{fill:currentColor}
.fab-wa{background:#25d366;color:#fff;height:58px;padding:0 22px 0 18px}
.fab-wa svg{width:28px;height:28px}
.fab-call{background:var(--lime);color:var(--deep);width:50px;height:50px}
.fab-call svg{width:22px;height:22px}
.fab a:hover{transform:translateY(-3px)}
@media(max-width:600px){
.hero-roles li{font-size:11px;padding:5px 12px}
.hero-actions .button{flex:1 1 100%}
.resume-actions{grid-template-columns:1fr}
.fab{right:14px;bottom:14px}
.fab-wa{width:56px;height:56px;padding:0}.fab-wa span{display:none}
footer{padding-bottom:90px}
}

/* ---------- Scroll motion ---------- */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:clip}.lenis [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-smooth dialog iframe{pointer-events:auto}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--lime);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
header{position:sticky;top:0;z-index:40;transition:transform .45s cubic-bezier(.2,.7,.2,1),background .35s,border-color .35s}
header.scrolled{background:#0c1e25cc;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-color:#ffffff14}
header.hide{transform:translateY(-100%)}
/* heading line mask */
h2.split .line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
h2.split .line>span{display:inline-block;transform:translateY(105%);transition:transform 1.05s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--i)*.1s + .05s)}
h2.split.in .line>span{transform:none}
/* parallax photos */
.parallax{will-change:transform;transform-origin:center}
.hero-visual,.story-main,.work-section figure,.quote-art{overflow:hidden}
.work-section figure{border-radius:100px 4px 4px 4px}.work-section figcaption{background:#172f36;position:relative}
/* timeline rail */
.timeline{position:relative}
.timeline article{padding-left:34px}
.timeline article:hover{padding-left:46px}
.timeline-rail{position:absolute;left:6px;top:0;bottom:0;width:2px;background:#ffffff18}
.timeline-rail::after{content:"";position:absolute;inset:0;background:var(--lime);transform-origin:top;transform:scaleY(var(--p,0));box-shadow:0 0 12px #d5fc5188}
.timeline article{position:relative}
.timeline article::before{content:"";position:absolute;left:1px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--deep);border:2px solid #ffffff40;transition:background .4s,border-color .4s,box-shadow .4s}
.timeline article.passed::before{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 5px #d5fc5122}
.contact h2{transform-origin:left bottom;will-change:transform}
@media(max-width:600px){.timeline article{padding-left:28px}.timeline article:hover{padding-left:28px}.timeline article::before{top:34px;margin-top:0}}
@media(prefers-reduced-motion:reduce){h2.split .line>span{transform:none}.parallax{transform:none!important}header.hide{transform:none}}