@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
:root{color-scheme:dark;--white:#f5f5f5;--muted:#bcbcbc;--line:#ffffff29}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:#262626;color:var(--white);font-family:Poppins,Arial,sans-serif;font-weight:400;line-height:1.6}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:6px}a:focus-visible{outline:2px solid white;outline-offset:6px}.wrap{width:min(1248px,calc(100% - 96px));margin-inline:auto}.navigation{display:flex;justify-content:space-between;align-items:center;position:absolute;top:32px;left:0;right:0;z-index:3}.brand{font-size:26px}.navigation nav{display:flex;gap:40px;font-size:14px}.section{position:relative;overflow:hidden;isolation:isolate;background:repeating-linear-gradient(135deg,transparent 0 3px,#00000017 3px 4px),linear-gradient(#404040,#2e2e2e)}.section>.wrap{position:relative;z-index:1}.intro{padding:190px 0 100px}.intro-grid{display:grid;grid-template-columns:minmax(0,760px) minmax(260px,400px);gap:70px;align-items:center}.eyebrow{text-transform:uppercase;letter-spacing:1.8px;color:var(--muted);font-size:11px;margin:0 0 22px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,6vw,80px);line-height:1.1;font-weight:400;letter-spacing:-2.5px;margin-bottom:28px}.positioning{font-size:clamp(22px,2.3vw,32px);line-height:1.4;margin-bottom:22px}.muted{color:var(--muted);font-size:17px;max-width:660px}.actions{display:flex;align-items:center;gap:30px;margin-top:32px;font-size:14px}.button{background:var(--white);color:#262626;padding:14px 22px;font-weight:500}.portrait-area{position:relative;--parallax:0px;transform:translate3d(0,var(--parallax),0)}.asset{background-repeat:no-repeat;background-position:center;background-size:contain;display:flex;justify-content:center;align-items:center;color:#aaa;font-size:12px;border:1px solid var(--line)}.asset.has-image{border:0}.asset.has-image span{display:none}.portrait{width:100%;aspect-ratio:1;background-size:cover;background-color:#ffffff05}.diagonals{position:absolute;right:-16px;top:-28px;width:106px;height:106px;background:repeating-linear-gradient(135deg,transparent 0 18px,#ffffffb3 18px 19px);clip-path:polygon(48% 0,100% 50%,52% 100%,0 50%);pointer-events:none}.pluses{position:absolute;right:-24px;bottom:-36px;font-size:23px;line-height:1.3;letter-spacing:10px;color:#ffffff80;pointer-events:none}.orb{position:absolute;z-index:0;right:-340px;top:-180px;width:1000px;height:1000px;border-radius:50%;background:linear-gradient(135deg,#ffffff12,transparent 72%);transform:translate3d(0,var(--parallax,0px),0);pointer-events:none}.work-index{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;padding-top:40px;margin-top:80px;border-top:1px solid var(--line)}.work-index h2{font-size:26px;font-weight:500;margin-bottom:8px}.work-index .eyebrow{margin-bottom:12px}.work-index .muted{font-size:14px}.story-index{display:flex;flex-direction:column;gap:10px;padding-top:6px;font-size:14px}.story-index span{color:var(--muted)}.platform{padding:70px 0 32px;background:repeating-linear-gradient(135deg,transparent 0 3px,#00000017 3px 4px),linear-gradient(#2e2e2e,#262626)}.project-title{font-size:clamp(52px,7vw,96px);letter-spacing:-3px;line-height:1.15;font-weight:400;margin-bottom:22px}.project-subtitle{font-size:clamp(22px,2.3vw,30px);line-height:1.4;max-width:1000px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-top:20px;min-height:650px}.project-copy{padding-top:120px}.project-copy h3{font-size:23px;line-height:1.5;font-weight:400}.role{margin-top:100px}.role .eyebrow{margin-bottom:12px}.role h3{margin-bottom:4px}.role .muted{font-size:14px}.phones{position:relative;height:690px}.phone{position:absolute;width:53%;aspect-ratio:284 / 586.4;transform:translate3d(0,var(--parallax,0px),0);background-color:#ffffff04}.phone.has-image{background-color:transparent}.rear{left:6%;top:0}.front{right:0;top:100px;z-index:1}.phones .diagonals{top:-22px;right:-15px}.phones .pluses{left:-20px;right:auto;bottom:20px}.evidence{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:24px;margin-top:25px;font-size:12px;color:var(--muted)}.evidence span:first-child{text-transform:uppercase;font-size:10px}.closing{padding-block:64px;border-top:1px solid var(--line)}.closing h2{font-weight:400;font-size:30px}.closing a{font-size:16px}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.intro-grid{gap:40px;grid-template-columns:1.4fr 1fr}.desktop-break{display:none}.project-grid{gap:35px}.phones{height:590px}.project-copy{padding-top:70px}.role{margin-top:65px}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.navigation{top:22px}.brand{font-size:21px}.navigation nav{gap:16px;font-size:11px}.intro{padding:125px 0 56px}.intro-grid{grid-template-columns:1fr;gap:48px}.portrait-area{width:min(100%,350px);justify-self:center}.positioning{font-size:24px}.muted{font-size:15px}.actions{gap:22px;font-size:12px}.work-index{grid-template-columns:1fr;gap:20px;margin-top:68px}.story-index{font-size:12px}.platform{padding-top:52px}.project-title{letter-spacing:-2px}.project-grid{grid-template-columns:1fr;gap:35px;min-height:0;margin-top:32px}.project-copy{padding-top:0}.project-copy h3{font-size:20px}.role{margin-top:32px}.phones{width:min(100%,440px);height:560px;margin:12px auto 0}.front{top:80px}.phones .pluses{bottom:0;left:0}.evidence{flex-direction:column;gap:10px;margin-top:40px}.closing h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-parallax]{transform:none!important}}

/* Exported Figma decorations; independent scroll layers. */
.decoration{object-fit:contain;transform:translate3d(0,var(--parallax,0px),0)}.diagonals.decoration{background:none;clip-path:none;width:130px;height:130px}.pluses.decoration{width:140px;height:95px}.portrait-area{transform:none}.portrait-area>.portrait{transform:translate3d(0,var(--portrait-parallax,0px),0)}

@media(max-width:700px),(prefers-reduced-motion:reduce){.portrait-area>.portrait{transform:none}}
/* Progressive enhancement: text remains visible if JavaScript is unavailable. */
.reveal-enabled .scroll-reveal{opacity:0;transform:translate3d(0,20px,0);transition:opacity 600ms ease-out,transform 700ms cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0ms)}
.reveal-enabled .scroll-reveal.is-revealed{opacity:1;transform:translate3d(0,0,0)}
@media(prefers-reduced-motion:reduce){.reveal-enabled .scroll-reveal{opacity:1;transform:none;transition:none}}
@media print{.reveal-enabled .scroll-reveal{opacity:1;transform:none;transition:none}}
/* Fixed navigation: visible at the top, returns when scrolling upward. */
.navigation{position:fixed;top:0;left:0;right:0;width:100%;margin:0;padding:24px max(48px,calc((100vw - 1248px)/2));z-index:100;transition:transform 240ms ease,background-color 200ms ease,box-shadow 200ms ease;transform:translateY(0)}
.navigation.is-scrolled{background-color:rgba(38,38,38,.95);box-shadow:0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(12px)}
.navigation.is-hidden{transform:translateY(-110%);pointer-events:none}
html{scroll-padding-top:110px}
@media(max-width:1000px){.navigation{padding-inline:32px}}
@media(max-width:700px){.navigation{top:0;padding:18px 20px}html{scroll-padding-top:90px}}
@media(prefers-reduced-motion:reduce){.navigation{transition:none}}
@media print{.navigation{position:static;transform:none!important}}
/* Compact glass navigation; keep a readable fallback without backdrop-filter. */
.navigation{padding-block:14px;min-height:64px;background:rgba(38,38,38,.88);box-shadow:0 1px 0 rgba(255,255,255,.06);transition:transform 240ms ease,background-color 200ms ease,box-shadow 200ms ease}
.navigation.is-scrolled{background:rgba(38,38,38,.88);box-shadow:0 1px 0 rgba(255,255,255,.10)}
.navigation .brand{font-size:22px;line-height:1.35;letter-spacing:-.4px}
.navigation nav{gap:32px;font-size:13px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.navigation,.navigation.is-scrolled{background:rgba(28,28,28,.36);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}}
html{scroll-padding-top:88px}
@media(max-width:700px){.navigation{padding-block:12px;min-height:56px}.navigation .brand{font-size:19px}.navigation nav{gap:16px;font-size:11px}html{scroll-padding-top:76px}}
@media(prefers-reduced-motion:reduce){.navigation{transition:none}}
.navigation .brand{display:flex;flex-direction:column;gap:3px;line-height:1.2;letter-spacing:0}
.brand-name{font-size:18px;font-weight:500;letter-spacing:-.3px}
.brand-role{font-size:10px;font-weight:400;letter-spacing:.25px;color:rgba(255,255,255,.68)}
@media(max-width:700px){.brand-name{font-size:16px}.brand-role{font-size:9px}}
/* Tighter introduction and continuous tonal field across both sections. */
main{background:linear-gradient(165deg,#414141 0%,#343434 30%,#292929 65%,#262626 100%)}
.section,.platform{background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(0,0,0,.085) 3px 4px)}
.intro{padding-top:140px;padding-bottom:64px}
.work-index{margin-top:44px;padding-top:32px}
.platform{padding-top:56px}
.orb{width:940px;height:940px;top:90px;right:-240px;background:radial-gradient(ellipse at 32% 27%,rgba(255,255,255,.12) 0%,rgba(255,255,255,.07) 27%,rgba(255,255,255,.025) 52%,transparent 72%);border-radius:50%}
.intro>.orb{top:40px;right:-220px}
.platform>.orb{left:-330px;right:auto;top:120px;width:1000px;height:1000px;background:radial-gradient(ellipse at 63% 38%,rgba(255,255,255,.11) 0%,rgba(255,255,255,.065) 30%,rgba(255,255,255,.02) 54%,transparent 73%)}
@media(max-width:1000px){.intro{padding-top:124px}.work-index{margin-top:40px}.orb{width:780px;height:780px}.platform>.orb{left:-400px;top:160px;width:900px;height:900px}}
@media(max-width:700px){.intro{padding-top:112px;padding-bottom:42px}.work-index{margin-top:44px;padding-top:26px}.platform{padding-top:44px}.intro>.orb{top:110px;right:-420px}.platform>.orb{left:-460px;top:120px}.intro-grid{gap:36px}}
/* Let the remaining circle flow across the section boundary, without horizontal spill. */
main{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible}
.intro{overflow:visible;isolation:auto;z-index:auto}
.intro>.orb{z-index:0;pointer-events:none}
.platform{overflow:visible;isolation:auto;z-index:auto}
.section>.wrap{position:relative;z-index:1}
/* Compact Platform rhythm and raise imagery alongside the chapter introduction. */
.platform .eyebrow{margin-bottom:14px}
.platform .project-title{margin-bottom:14px}
.platform .project-subtitle{margin-bottom:0}
.platform .project-grid{margin-top:16px;min-height:540px}
.platform .project-copy{padding-top:48px}
.platform .project-copy>h3{margin-bottom:12px}
.platform .project-copy>.muted{margin-bottom:0}
.platform .role{margin-top:48px}
.platform .role .eyebrow{margin-bottom:10px}
.platform .role h3{margin-bottom:4px}
.platform .phones{margin-top:-100px;height:630px}
.platform .evidence{margin-top:16px}
@media(max-width:1000px){.platform .project-copy{padding-top:36px}.platform .phones{margin-top:-64px;height:560px}.platform .role{margin-top:36px}}
@media(max-width:700px){.platform .project-grid{min-height:0;gap:24px;margin-top:28px}.platform .project-copy{padding-top:0}.platform .role{margin-top:28px}.platform .phones{margin:8px auto 0;height:560px}.platform .evidence{margin-top:30px}}
/* Warm champagne: restrained brand accent, neutral imagery and reading text. */
:root{--accent:#C9B78D;--accent-bright:#DECEAA}
.eyebrow{color:var(--accent)}
.navigation .brand-role{color:var(--accent)}
a:hover{color:var(--accent-bright)}
a:focus-visible{outline-color:var(--accent)}
.button{border:1px solid transparent;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease}
.button:hover{background:var(--accent);color:#262626;border-color:var(--accent);text-decoration:none}
.navigation nav a:hover{text-decoration-color:var(--accent);text-decoration-thickness:1px}
.story-index>a{border-left:1px solid rgba(201,183,141,.65);padding-left:12px}
.decoration{filter:brightness(0) saturate(100%) invert(79%) sepia(18%) saturate(548%) hue-rotate(3deg) brightness(92%) contrast(89%);opacity:.72}
@media(prefers-reduced-motion:reduce){.button{transition:none}}
/* Raise the Platform phone composition further on larger screens. */
.platform .phones{margin-top:-170px}
@media(max-width:1000px){.platform .phones{margin-top:-100px}}
@media(max-width:700px){.platform .phones{margin-top:8px}}

/* Keep decorative SVGs in their original white colour. */
.decoration{filter:none;opacity:1}


/* About and contact: two-column desktop exploration. */
.about,.contact{padding:88px 0 64px;border-top:1px solid var(--line)}
.about-intro{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);gap:64px;align-items:start;margin-bottom:64px}
.about h2,.contact h2{font-size:clamp(30px,3vw,44px);font-weight:400;line-height:1.35;letter-spacing:-.8px;margin-bottom:24px}
.about-lead{font-size:20px;line-height:1.5;max-width:900px;color:var(--white)}
.about-links{display:flex;align-items:center;gap:32px;margin-top:28px;font-size:14px}.about-links .muted{font-size:13px;margin:0}
.about-portrait{position:relative}.about-lines{position:absolute;width:100px;height:100px;right:-20px;top:-20px}
.about-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.column-heading,.supporting-section h3{font-size:28px;font-weight:400;line-height:1.4;margin-bottom:16px}.small{font-size:14px}
.experience-role{border-bottom:1px solid var(--line);padding:24px 0}
.experience-role summary{position:relative;display:flex;flex-direction:column;gap:6px;padding-right:32px;cursor:pointer;list-style:none}.experience-role summary::-webkit-details-marker{display:none}
.experience-role summary::after{content:'+';position:absolute;right:0;top:22px;font-size:24px;color:var(--white)}.experience-role[open] summary::after{content:'−'}
.role-date,.project-date{font-size:12px;color:var(--accent);margin:0 0 8px}
.role-title{font-size:20px;line-height:1.4}.role-company{font-size:13px;color:var(--muted)}.role-detail{padding-top:18px}.role-detail .muted{font-size:15px}.role-detail a{font-size:14px}
.experience-role summary:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.supporting-section{border-top:1px solid var(--line);padding-top:28px;margin-bottom:48px}.supporting-section:first-child{border-top:0;padding-top:0}
.supporting-section .eyebrow{margin-bottom:12px}.side-project{margin-top:28px}.project-image-slot{width:100%;aspect-ratio:16/9;background-color:#ffffff04;background-size:cover;margin-bottom:20px}
.side-project h4,.qualification h4{font-size:20px;line-height:1.45;font-weight:400;margin:0 0 8px}.side-project .muted,.qualification .muted{font-size:15px;margin-bottom:12px}.side-project a{font-size:14px}
.qualification{margin-top:24px}.credential{font-size:12px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;margin-top:48px}.contact-details{position:relative}.contact-details .eyebrow{margin-bottom:10px}.contact-email{display:inline-block;font-size:26px;margin-bottom:32px}.contact-details>.muted{font-size:14px;margin-top:28px}.contact-lines{position:relative;width:90px;height:90px;margin-top:40px}
#contact-form{display:flex;flex-direction:column;align-items:start}#contact-form label{font-size:14px;margin-bottom:8px}#contact-form input,#contact-form textarea{width:100%;font:inherit;font-size:15px;color:var(--white);background:#ffffff04;border:1px solid #ffffff35;border-radius:0;padding:16px 18px;margin-bottom:22px;resize:vertical}
#contact-form input:focus,#contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:2px}#contact-form .button{font:inherit;font-size:14px;cursor:pointer;border-radius:0}
.form-note,#contact-status{color:var(--muted);font-size:12px;margin-top:16px}.contact-footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);margin-top:56px;padding-top:24px;font-size:14px;color:var(--muted)}
@media(max-width:900px){.about-intro{gap:32px}.about-columns{gap:32px}.contact-grid{gap:32px}.role-title{font-size:18px}}
@media(max-width:700px){.about,.contact{padding:56px 0}.about-intro,.about-columns,.contact-grid{grid-template-columns:1fr;gap:36px}.about-intro{margin-bottom:44px}.about-portrait{max-width:350px}.about-lead{font-size:18px}.supporting-section:first-child{border-top:1px solid var(--line);padding-top:28px}.contact-footer{flex-direction:column;gap:12px}.contact-email{font-size:23px}}

/* Dedicated About and Contact pages, shared site navigation. */
.subpage .about,.subpage .contact{padding-top:132px;min-height:100vh;border-top:0}
.navigation nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--accent)}
.experience-role summary{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;row-gap:6px;align-items:start}
.experience-role summary>.experience-logo{grid-column:1;grid-row:1/4;width:40px;height:40px;aspect-ratio:1;background-color:#ffffff05;background-size:contain;background-position:center;border:1px solid var(--line);font-size:13px;color:var(--muted);letter-spacing:.5px;flex:none}
.experience-role summary>.experience-logo.has-image{background-color:transparent;border:0}
.experience-role summary>.role-date,.experience-role summary>.role-title,.experience-role summary>.role-company{grid-column:2;margin-bottom:0}
.experience-role .role-detail{padding-left:58px}
@media(max-width:700px){.subpage .about,.subpage .contact{padding-top:108px}.experience-role summary{grid-template-columns:32px minmax(0,1fr);column-gap:14px}.experience-role summary>.experience-logo{width:32px;height:32px;font-size:11px}.experience-role .role-detail{padding-left:46px}.role-title{font-size:17px}}

/* About uses a compact portrait-led introduction, distinct from Home. */
.about-page .about{padding-top:112px}
.about-page .about-intro{grid-template-columns:180px minmax(0,1fr);gap:40px;align-items:center;margin-bottom:40px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.about-page .about-portrait{width:180px;align-self:start;margin-top:4px}
.about-page .about-portrait .portrait{aspect-ratio:4/5;background-position:center 35%;border-radius:0}
.about-page .about-intro .eyebrow{margin-bottom:12px}
.about-page .about-intro h2{font-size:clamp(26px,2.4vw,34px);line-height:1.3;max-width:820px;margin-bottom:16px;letter-spacing:-.6px}
.about-page .about-intro .about-lead{font-size:17px;line-height:1.6;max-width:860px;margin-bottom:12px}
.about-page .about-intro .muted{font-size:15px;line-height:1.6;max-width:860px;margin-bottom:0}
.about-page .about-links{margin-top:18px;gap:24px;font-size:13px}
.about-page .about-links .muted{font-size:12px}
@media(max-width:700px){.about-page .about{padding-top:100px}.about-page .about-intro{grid-template-columns:80px minmax(0,1fr);gap:20px;align-items:start;margin-bottom:30px;padding-bottom:28px}.about-page .about-portrait{width:80px}.about-page .about-intro h2{font-size:26px}.about-page .about-intro .about-lead{font-size:15px}.about-page .about-intro-copy{display:contents}.about-page .about-intro-copy>.eyebrow{grid-column:2;grid-row:1;margin-top:4px}.about-page .about-intro-copy>h2{grid-column:2;grid-row:1;margin-top:34px}.about-page .about-intro-copy>.about-lead,.about-page .about-intro-copy>.muted,.about-page .about-intro-copy>.about-links{grid-column:1/-1}.about-page .about-portrait{grid-row:1}}

/* Separate supporting content from the experience timeline. */
.about-page .supporting-section{background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.07);padding:28px 30px;margin-bottom:24px}
.about-page .supporting-section:first-child{padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.about-page .supporting-section:last-child{margin-bottom:0}
.about-page .about-intro{grid-template-columns:var(--about-portrait-size,260px) minmax(0,1fr);align-items:start}
.about-page .about-portrait{width:100%;margin-top:0}
.about-page .about-portrait .portrait{aspect-ratio:1;background-position:center center}
@media(max-width:1000px) and (min-width:701px){.about-page .about-intro{grid-template-columns:180px minmax(0,1fr)}}
@media(max-width:700px){.about-page .about-intro{grid-template-columns:80px minmax(0,1fr)}.about-page .about-portrait{width:80px}.about-page .supporting-section,.about-page .supporting-section:first-child{padding:24px 20px}}

.role-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.role-actions .button{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;font-size:13px;line-height:1.5}.role-actions .role-button-secondary{background:transparent;color:var(--white);border-color:rgba(255,255,255,.3)}.role-actions .role-button-secondary:hover{background:rgba(255,255,255,.08);border-color:var(--accent)}

/* Compact project banners and education rows */
.supporting-section .project-image-slot{width:min(100%,280px);margin-bottom:16px}.qualification{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start}.qualification-logo{width:40px;height:40px;background-size:contain;border:0}.qualification-copy{min-width:0}.learning-divider{border-top:1px solid var(--line);margin:28px 0 24px}.supporting-section .courses-heading{font-size:22px;margin-bottom:20px}@media(max-width:700px){.qualification{grid-template-columns:32px minmax(0,1fr);gap:14px}.qualification-logo{width:32px;height:32px}.supporting-section .project-image-slot{width:min(100%,240px)}}

/* About image motion is separate from the text reveal transforms. */
.about-page .about-portrait .portrait[data-parallax],.about-page .project-image-slot[data-parallax]{transform:translate3d(0,var(--parallax,0px),0)}@media(prefers-reduced-motion:reduce){.about-page .about-portrait .portrait[data-parallax],.about-page .project-image-slot[data-parallax]{transform:none}}

.side-project + .side-project{border-top:1px solid var(--line);padding-top:28px;margin-top:28px}