:root{--bg:#111110;--fg:#f3f3ec;--muted:#a0a09a;--line:#32332e;--lime:#d5ff70}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--bg);color:var(--fg);font-family:'Inter',Arial,sans-serif;font-size:16px;line-height:1.5}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--lime);outline-offset:7px}button,a{-webkit-tap-highlight-color:transparent}header,main,.footer{width:100%;max-width:none;margin:0}header{padding:32px 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-size:32px;font-weight:700;letter-spacing:-2px}.wordmark span{font-size:14px;vertical-align:top;margin-left:4px}nav{display:flex;gap:40px;align-items:center;font-size:14px}nav a{color:var(--muted)}nav a:hover,nav a.active{color:var(--fg)}nav a:last-child{margin-left:40px;color:var(--lime)}nav a span{margin-left:15px}.hero{position:relative;min-height:670px;padding:74px 6% 50px;overflow:hidden}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:500}.hero h1{font-size:clamp(68px,8.5vw,122px);line-height:1.03;letter-spacing:-7px;font-weight:450;margin:48px 0 40px;position:relative;z-index:2}.hero h1 em{font-style:normal;color:var(--lime)}.hero-bottom{display:flex;align-items:center;gap:75px;position:relative;z-index:2}.hero-bottom p{color:#b8b8b1;line-height:1.7}.circle-link{display:flex;align-items:center;gap:22px;font-size:14px}.circle-link b{border:1px solid #66685c;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:22px;font-weight:400;transition:.25s}.circle-link:hover b{background:var(--lime);color:var(--bg);transform:translateY(4px)}.art{position:absolute;width:49%;height:100%;right:-4%;top:0;z-index:0;mix-blend-mode:lighten}.art img{width:100%;height:100%;object-fit:contain}.hero-index{display:block;font-size:11px;letter-spacing:1.5px;color:#74766d;margin-top:68px}.work{padding:48px 6% 70px;border-top:1px solid var(--line)}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}.section-head h2{font-size:28px;font-weight:450;letter-spacing:-1px}.section-head h2 span{font-size:14px;color:var(--muted);vertical-align:top;letter-spacing:0;margin-left:8px}.section-head p{font-size:14px;color:var(--muted)}.projects{display:grid;grid-template-columns:1fr 1fr;gap:44px 28px}.large{grid-column:span 2}.project-image{height:410px;border-radius:5px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}.large .project-image{height:520px}.orbit{background:#c4ccbd}.dashboard{display:flex;background:#fafbf6;color:#252921;width:78%;height:390px;transform:rotate(-4deg) translateY(46px);border-radius:10px;box-shadow:0 32px 65px #46533c40;transition:transform .5s}.project:hover .dashboard{transform:rotate(-2deg) translateY(36px)}.dashboard aside{width:21%;border-right:1px solid #e1e6da;padding:27px 18px;font-size:12px;display:flex;flex-direction:column;gap:15px}.dashboard aside b{font-size:24px;letter-spacing:-1px;margin-bottom:24px}.dashboard small{font-size:10px;color:#808b78}.dashboard aside span{padding:6px 10px}.picked{background:#e5eccd;border-radius:5px}.dash-content{padding:26px 30px;flex:1}.dash-top{display:flex;justify-content:space-between;font-size:12px}.dash-content h3{font-size:25px;line-height:1.2;font-weight:500;letter-spacing:-1px}.metrics{display:flex;gap:14px}.metrics>div{border:1px solid #e0e4d7;border-radius:6px;flex:1;padding:13px;display:flex;flex-direction:column}.metrics strong{font-size:24px;font-weight:500}.metrics i{font-style:normal;font-size:9px;color:#6b8050}.chart{margin-top:20px;font-size:10px}.bars{height:90px;display:flex;align-items:flex-end;gap:12px;margin-top:12px}.bars i{flex:1;background:#b4d181;height:45%;border-radius:3px 3px 0 0}.bars i:nth-child(2n){height:65%}.bars i:nth-child(3n){height:85%}.bars i:nth-child(5n){height:100%;background:#6d913c}.project-caption{display:flex;justify-content:space-between;margin-top:19px;align-items:center}.project-caption h3{font-size:20px;font-weight:450;margin:0;letter-spacing:-.5px}.project-caption p{font-size:13px;color:var(--muted);margin:6px 0 0}.project-caption>span{font-size:25px;transition:transform .3s}.project:hover .project-caption>span{transform:translate(4px,-4px)}.folio{background:#b7a2d1}.phone{position:relative;color:#27212e;background:#f9f7fc;width:225px;height:360px;padding:35px 18px 20px;border:5px solid #27252c;border-radius:30px;transform:rotate(-9deg) translate(-45px,40px);box-shadow:20px 25px 45px #49395740;z-index:1;transition:.5s}.project:hover .phone{transform:rotate(-5deg) translate(-45px,30px)}.notch{position:absolute;top:8px;width:67px;height:14px;background:#27252c;border-radius:20px;left:74px}.phone small{font-size:9px}.phone h3{font-size:21px;line-height:1.1;margin:12px 0 17px;letter-spacing:-1px}.phone p{font-size:9px;margin:0}.phone strong{font-size:26px;letter-spacing:-1px}.phone strong span{color:#9a91a3}.mini-chart{height:42px;color:#8c61b8;font-size:40px;line-height:1;overflow:hidden;border-bottom:1px solid #ddd0ed}.phone-row{display:flex;gap:10px;margin:12px 0;font-size:10px}.phone-row span{background:#e1d4ee;border-radius:20px;padding:7px 12px}.transaction{font-size:8px;padding:10px 0;border-top:1px solid #e7e0ed;display:flex;justify-content:space-between}.visual-word{position:absolute;font-size:74px;color:#faf4ff;right:24px;top:36px;letter-spacing:-6px}.forma{background:#d1b496}.editorial{background:#f4f0e9;color:#342d25;width:77%;height:325px;transform:rotate(7deg) translate(0,38px);padding:22px;box-shadow:20px 20px 40px #67472630;transition:.5s}.project:hover .editorial{transform:rotate(3deg) translate(0,30px)}.editorial-nav{font-size:14px;letter-spacing:3px;display:flex;justify-content:space-between}.editorial-nav span{font-size:6px;letter-spacing:1px}.editorial h3{font-family:'Inter',Arial,sans-serif;font-size:37px;font-weight:400;line-height:1;margin:25px 0 10px;position:relative;z-index:2}.material{height:100px;background:#b9b09f;display:flex;justify-content:flex-end;align-items:center;overflow:hidden}.material span{font-size:160px;line-height:1;font-family:'Inter',Arial,sans-serif;color:#e4daca}.editorial footer{font-size:7px;display:flex;justify-content:space-between;margin-top:12px}.sample-note{font-size:12px;color:#85877e;margin-top:34px}.intro{padding:90px 6% 120px;display:grid;grid-template-columns:1fr 3fr;border-top:1px solid var(--line);gap:35px}.intro h2{font-size:clamp(30px,3.4vw,48px);line-height:1.2;letter-spacing:-1.6px;font-weight:450;margin:0 0 30px}.intro h2 span{color:#898b82}.intro p{color:var(--muted);max-width:500px;line-height:1.8;margin-bottom:30px}.text-link{display:inline-flex;border-bottom:1px solid #6c735b;padding-bottom:8px;gap:50px;color:var(--lime);font-size:14px}.footer{padding:60px 6% 24px;background:#191b16}.footer>p{font-size:12px;letter-spacing:1.5px;color:var(--muted)}.footer>a{font-size:clamp(32px,5.7vw,80px);letter-spacing:-3px;display:flex;justify-content:space-between;align-items:center;padding:10px 0 55px}.footer>a span{color:var(--lime)}.footer>div{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}.skip{position:absolute;top:-100px;left:20px;background:var(--lime);color:#111;padding:10px;z-index:10}.skip:focus{top:10px}.page{padding:65px 6% 100px}.page h1{font-size:clamp(52px,6.5vw,90px);letter-spacing:-4px;line-height:1.08;font-weight:450;margin:40px 0}.page h1 em{font-style:normal;color:var(--lime)}.page-lead{font-size:21px;color:var(--muted);max-width:650px;line-height:1.65}.metadata{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;border-top:1px solid var(--line);padding:30px 0 45px;margin-top:55px}.metadata small{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.case-section{display:grid;grid-template-columns:1fr 2.5fr;gap:45px;padding:75px 0;border-bottom:1px solid var(--line)}.case-section h2{font-size:36px;font-weight:450;line-height:1.2;letter-spacing:-1px;margin:0 0 25px}.case-section p{color:var(--muted);line-height:1.8}.process{display:flex;flex-wrap:wrap;gap:12px;margin-top:35px}.process span{border:1px solid #555b49;border-radius:80px;padding:20px;font-size:14px}.process span:nth-child(2){background:var(--lime);color:#111;border-color:var(--lime)}.about-block{display:grid;grid-template-columns:1.4fr 1fr;gap:70px;margin:60px 0 90px}.about-copy p{color:var(--muted);font-size:19px;line-height:1.85}.about-art{background:#191b16;display:flex;align-items:center;justify-content:center;min-height:340px;border-radius:5px;overflow:hidden}.about-art img{width:100%;mix-blend-mode:lighten}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;border-top:1px solid var(--line);padding-top:40px}.values h3{font-weight:450;font-size:23px}.values p{color:var(--muted)}.values small{color:var(--lime)}#connect{margin-top:90px;border-top:1px solid var(--line);padding-top:50px}#connect h2{font-size:38px;font-weight:450;letter-spacing:-1px}#connect p{color:var(--muted)}@media(min-width:1600px){.hero h1{font-size:122px}}@media(max-width:800px){header{padding:23px 6%}nav{gap:23px}nav a:last-child{margin-left:0}.hero{min-height:660px;padding-top:48px}.hero h1{font-size:76px;letter-spacing:-4.5px;margin-top:36px}.art{width:58%;right:-12%;top:70px;opacity:.7}.hero-bottom{gap:30px;align-items:flex-start;flex-direction:column}.hero-index{margin-top:40px}.large .project-image{height:390px}.dashboard{width:90%;height:340px}.dash-content{padding:20px}.dashboard aside{padding:20px 10px}.project-image{height:340px}.phone{transform:rotate(-9deg) translate(-15px,50px)}.visual-word{font-size:48px;right:15px;top:18px}.editorial{width:86%;padding:15px}.editorial h3{font-size:30px}.intro{grid-template-columns:1fr;padding-top:60px;padding-bottom:65px}.about-block{gap:30px}.metadata{grid-template-columns:1fr 1fr}.case-section{grid-template-columns:1fr;gap:20px}}@media(max-width:540px){nav{gap:20px;font-size:13px}nav a:last-child{display:none}.hero{min-height:720px}.hero h1{font-size:62px;letter-spacing:-3.7px;line-height:1.08}.hero-bottom p{font-size:15px}.hero-bottom{gap:12px}.art{width:72%;height:340px;top:auto;bottom:-25px;right:-15%;opacity:.85}.hero-index{position:absolute;bottom:25px;font-size:9px;max-width:130px;line-height:1.8}.section-head{align-items:flex-start;flex-direction:column;gap:0;margin-bottom:25px}.section-head h2{margin-bottom:5px}.section-head p{margin-top:0}.projects{grid-template-columns:1fr;gap:34px}.large{grid-column:auto}.project-image,.large .project-image{height:340px}.dashboard{width:125%;min-width:430px;transform:rotate(-5deg) translate(45px,35px);height:310px}.dashboard aside{width:23%}.dash-content h3{font-size:20px}.metrics strong{font-size:20px}.bars{height:60px}.project-caption h3{font-size:18px}.phone{transform:rotate(-9deg) translate(-35px,45px)}.visual-word{font-size:65px;right:20px;top:25px}.editorial{width:77%}.footer>a{letter-spacing:-1.5px}.footer>div{flex-wrap:wrap;font-size:11px}.footer>div span:nth-child(2){display:none}.page{padding-top:40px}.page h1{font-size:49px;letter-spacing:-2.5px}.page-lead{font-size:18px}.about-block{grid-template-columns:1fr;margin-top:35px;gap:20px}.about-art{min-height:280px;max-height:350px}.values{grid-template-columns:1fr;gap:20px}.case-section{padding:50px 0}.case-section h2{font-size:30px}.process span{padding:15px}.metadata{font-size:14px}.intro h2{font-size:31px}.page>.project-image{height:360px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.wordmark{display:flex;align-items:center;gap:13px}.wordmark .monogram{font-size:35px;letter-spacing:-3px;line-height:1;color:var(--lime);margin:0}.wordmark .brand-name{font-size:12px;font-weight:500;letter-spacing:0;line-height:1.2;margin:0}.pending-work{padding:55px 5%;background:#1b1f16;border-radius:5px;min-height:330px}.pending-work>span{font-size:12px;letter-spacing:1.5px;color:var(--lime)}.pending-work h3{font-size:48px;font-weight:450;letter-spacing:-2px;line-height:1.15}.pending-work p{color:var(--muted)}@media(max-width:540px){.pending-work h3{font-size:35px}}
.real-projects .project-image{height:auto;aspect-ratio:1.5;background:#222523}.real-projects .large .project-image{aspect-ratio:1.85}.real-projects .project-image>img{width:100%;height:100%;object-fit:cover;transition:transform .65s}.real-projects .project:hover img{transform:scale(1.025)}.view-case{position:absolute;bottom:20px;right:20px;background:#111e;color:#f3f3ec;border:1px solid #fff3;border-radius:50px;padding:10px 18px;font-size:13px;backdrop-filter:blur(10px)}.case-page{padding:50px 6% 0}.back-link{font-size:14px;color:var(--muted);display:inline-block;margin-bottom:60px}.back-link:hover{color:var(--lime)}.case-heading>.eyebrow{color:var(--lime);text-transform:uppercase}.case-heading h1{font-size:clamp(48px,6.5vw,92px);font-weight:450;line-height:1.06;letter-spacing:-4.5px;max-width:1000px;margin:28px 0}.case-summary{font-size:21px;line-height:1.7;color:#aaa;max-width:720px}.case-heading .metadata{margin-top:42px;margin-bottom:0;font-size:14px}.case-figure{margin:35px 0 0}.case-figure img{display:block;width:100%;height:auto;border-radius:5px;background:#252525}.case-figure figcaption{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.6}.case-cover{margin:0}.case-cover img{max-height:700px;object-fit:contain;background:#1b1d19}.outcome-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:48px 0;border-bottom:1px solid var(--line)}.outcome-strip>div{display:flex;flex-direction:column;gap:12px}.outcome-strip strong{font-size:39px;letter-spacing:-1.5px;font-weight:450;color:var(--lime)}.outcome-strip>div>span{font-size:14px;color:var(--muted);max-width:230px}.case-nav{display:flex;gap:30px;padding:24px 0;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}.case-nav a{color:var(--muted)}.case-nav a:hover{color:var(--lime)}.story-section{display:grid;grid-template-columns:1fr 3fr;gap:45px;padding:75px 0;border-bottom:1px solid var(--line)}.story-label{font-size:12px;letter-spacing:1.5px;color:var(--muted);padding-top:9px}.story-body{min-width:0}.story-body h2{font-size:40px;font-weight:450;letter-spacing:-1.7px;line-height:1.15;margin:0 0 26px}.story-body p{font-size:17px;line-height:1.9;color:#b3b5ab;margin:0 0 25px;max-width:760px}.story-body h3{font-size:25px;font-weight:450;line-height:1.3;letter-spacing:-.6px;margin:40px 0 18px}.solution-step{margin-top:60px}.solution-step:first-child{margin-top:42px}.solution-step h3{margin-top:12px}.step-number{color:var(--lime);font-size:13px}.next-project{display:block;padding:65px 0 85px}.next-project>span{font-size:12px;letter-spacing:1.5px;color:var(--muted)}.next-project strong{display:flex;justify-content:space-between;gap:25px;font-size:clamp(28px,4vw,52px);font-weight:450;letter-spacing:-1.5px;margin-top:20px;line-height:1.2}.next-project b{color:var(--lime);font-weight:400}.real-projects .project-caption h3{max-width:95%}@media(max-width:800px){.story-section{grid-template-columns:1fr;gap:25px}.case-heading h1{letter-spacing:-3px}.story-body h2{font-size:35px}.outcome-strip strong{font-size:30px}.case-nav{gap:24px}.case-cover img{max-height:none}}@media(max-width:540px){.case-page{padding-top:30px}.back-link{margin-bottom:40px}.case-heading h1{font-size:49px;letter-spacing:-2.5px}.case-summary{font-size:18px}.outcome-strip{gap:25px;grid-template-columns:1fr;padding:30px 0}.outcome-strip>div{gap:5px}.outcome-strip>div>span{max-width:none}.case-nav{gap:18px;font-size:12px}.story-section{padding:50px 0}.story-body h2{font-size:31px}.story-body p{font-size:16px}.view-case{font-size:12px;padding:8px 14px;bottom:12px;right:12px}.real-projects .large .project-image{aspect-ratio:1.5}.case-heading .metadata{gap:22px 18px}.next-project{padding:45px 0 60px}}
/* Portfolio refinements */
.showcase{background:#111110}.showcase .hero{min-height:500px;padding-top:52px;padding-bottom:18px}.showcase .hero h1{font-weight:650;letter-spacing:-5.5px;margin:30px 0 20px}.showcase .hero-bottom p{font-size:20px;line-height:1.5;font-weight:450;color:#d0d1c9}.showcase .hero-index{margin-top:26px}.showcase .work{border-top:0;padding-top:6px}.showcase .section-head{margin-bottom:24px}.showcase .art{width:44%;right:-2%;top:-25px;height:100%}.showcase .art img{object-fit:contain}.real-projects .project-image,.real-projects .project-image img{border-radius:20px}.real-projects .project-image{isolation:isolate}.real-projects .project-caption>div{flex:1;min-width:0}.real-projects .project-caption h3{font-size:clamp(23px,2.5vw,32px);font-weight:650;max-width:none;letter-spacing:-.8px;line-height:1.17}.real-projects .project.large .project-caption h3{font-size:clamp(27px,3vw,38px)}.real-projects .project-caption{gap:24px;align-items:flex-start}.real-projects .project-caption>span{flex:none}.case-figure img,.case-cover img,.about-art img{border-radius:20px}.case-figure{overflow:hidden;border-radius:20px}.intro{border-top:0;border-radius:20px;margin:18px 6% 80px;padding:72px 6% 100px;min-height:440px;background:linear-gradient(90deg,#10271f 0%,#10271fec 42%,#10271f22 78%),url('/assets/about-sculpture.png') center/cover no-repeat;position:relative;overflow:hidden}.intro .eyebrow,.intro>div{position:relative;z-index:1}.intro p{color:#d6d7d1}.intro h2 span{color:#bbc1ad}
@media(max-width:800px){.showcase .hero{min-height:540px}.showcase .hero h1{font-size:clamp(65px,8.4vw,80px);letter-spacing:-4px}.showcase .art{width:51%;right:-9%;top:40px}.showcase .hero-bottom p{font-size:18px}.intro{margin-left:6%;margin-right:6%;padding:56px 7% 70px;min-height:410px;background-position:58% center}.real-projects .project-caption h3{font-size:clamp(21px,2.7vw,27px)}}
@media(max-width:540px){.showcase .hero{min-height:600px;padding-top:40px}.showcase .hero h1{font-size:clamp(52px,11.5vw,68px);letter-spacing:-3.3px;font-weight:650;margin-top:36px}.showcase .hero-bottom p{font-size:17px}.showcase .hero-index{bottom:18px}.showcase .art{width:78%;height:305px;top:auto;bottom:-12px;right:-20%}.showcase .work{padding-top:12px}.showcase .section-head{margin-bottom:22px}.real-projects .project-caption h3,.real-projects .project.large .project-caption h3{font-size:23px}.intro{margin-bottom:45px;min-height:500px;background-image:linear-gradient(180deg,#10271f 0%,#10271fec 43%,#10271f33 100%),url('/assets/about-sculpture.png');background-position:69% center;padding:45px 7%}.intro p{max-width:95%}}
@media(min-width:801px){.showcase .hero{min-height:360px}.showcase .hero-index{display:none}}
.real-projects .project-image,.real-projects .large .project-image{height:auto;aspect-ratio:auto}.real-projects .project-image>img{display:block;width:100%;height:auto;object-fit:contain;transform:none!important}.art img{border-radius:20px}
@media(max-width:800px){.real-projects .project-image,.real-projects .large .project-image{height:auto;aspect-ratio:auto}}
@media(min-width:801px){.intro{display:block;background-image:linear-gradient(90deg,#10271f 0%,#10271ff7 34%,#10271fee 55%,#10271f77 76%,#10271f10 100%),url('/assets/about-sculpture.png')}.intro>div{max-width:57%;margin-top:42px}.intro h2{font-size:clamp(34px,3.4vw,48px)}.intro p{max-width:470px}}
@media(min-width:541px) and (max-width:800px){.intro{display:block;background-image:linear-gradient(90deg,#10271f 0%,#10271ff7 43%,#10271fbd 72%,#10271f55 100%),url('/assets/about-sculpture.png')}.intro>div{max-width:67%;margin-top:40px}}
.real-projects{grid-template-columns:1fr}.real-projects .project,.real-projects .project.large{grid-column:1}
/* Viewport hero with a slowly shifting green aurora. */
.home-page{--header-height:104px}.home-page>header{height:var(--header-height);padding-top:20px;padding-bottom:20px}.showcase .immersive-hero{height:calc(100svh - var(--header-height));min-height:480px;padding:32px 6% 100px;display:flex;justify-content:center;align-items:center;text-align:center;isolation:isolate;background:#080e0b;overflow:hidden}.hero-content{position:relative;z-index:2;transform:translateY(-5%)}.immersive-hero .eyebrow{font-size:11px;letter-spacing:2px;color:#c1cfbc}.showcase .immersive-hero h1{font-size:clamp(56px,7.2vw,100px);font-weight:650;line-height:1.04;letter-spacing:-.055em;margin:28px 0 22px}.immersive-hero h1 em{color:#d5ff91}.hero-description{font-size:clamp(18px,1.8vw,23px);line-height:1.5;color:#c3cec5;margin:0 0 26px}.hero-cta{display:inline-flex;gap:28px;align-items:center;border-radius:100px;background:#dcffae;color:#13200d;padding:13px 25px;font-size:14px;font-weight:600;transition:background .2s,transform .2s}.hero-cta:hover{background:#efffda;transform:translateY(-2px)}.scroll-cue{position:absolute;z-index:2;bottom:23px;left:50%;transform:translateX(-50%);display:flex;gap:13px;align-items:center;font-size:11px;letter-spacing:1.2px;color:#e2efdc;white-space:nowrap}.scroll-cue span{font-size:17px}.gradient-field{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.gradient-field::after{content:'';position:absolute;inset:0;background:linear-gradient(#080e0b00 45%,#080e0b00 82%,#080e0b80)}.gradient-field i{position:absolute;display:block;width:90%;height:60%;left:5%;bottom:-44%;border-radius:50%;background:#a3ee40;filter:blur(42px);box-shadow:0 -36px 70px #a5f23b99;animation:aurora-drift 14s ease-in-out infinite alternate;will-change:transform}.gradient-field i:nth-child(2){width:70%;height:48%;left:-24%;bottom:-31%;background:#10b77a;box-shadow:0 -30px 90px #21d38a88;animation:aurora-left 18s ease-in-out infinite alternate}.gradient-field i:nth-child(3){width:70%;height:45%;left:62%;bottom:-27%;background:#d3ef65;box-shadow:0 -25px 80px #b9ed5499;animation:aurora-right 16s ease-in-out infinite alternate}.showcase .immersive-hero+.work{padding-top:48px}
@keyframes aurora-drift{0%{transform:translate(-8%,8%) rotate(-7deg) scaleX(1.08)}50%{transform:translate(8%,-14%) rotate(5deg) scaleX(.92)}100%{transform:translate(-2%,-5%) rotate(-3deg) scaleX(1.18)}}@keyframes aurora-left{to{transform:translate(28%,-16%) rotate(16deg) scale(1.12)}}@keyframes aurora-right{to{transform:translate(-28%,18%) rotate(-14deg) scale(1.2)}}
@media(max-width:540px){.home-page{--header-height:82px}.showcase .immersive-hero{min-height:480px;padding:30px 6% 96px}.immersive-hero .eyebrow{font-size:9px;letter-spacing:1.3px}.showcase .immersive-hero h1{font-size:clamp(48px,12vw,64px);margin:25px 0 22px}.hero-description{font-size:18px}.gradient-field i{filter:blur(30px)}.hero-content{transform:translateY(-3%)}.scroll-cue{bottom:20px}}
@media(max-height:620px) and (min-width:541px){.showcase .immersive-hero{min-height:380px;padding-bottom:60px}.showcase .immersive-hero h1{font-size:54px;margin:15px 0}.hero-description{font-size:17px;margin-bottom:18px}.hero-content{transform:none}}
@media(prefers-reduced-motion:reduce){.gradient-field i{animation:none;will-change:auto}.hero-cta{transition:none}html{scroll-behavior:auto}}
.showcase .immersive-hero{min-height:0}
.immersive-hero .hero-content{width:100%;max-width:900px}.showcase .immersive-hero h1{width:700px;max-width:100%;margin-left:auto;margin-right:auto;font-weight:900}.immersive-hero .hero-description{font-size:24px;text-wrap:balance;max-width:800px;margin-left:auto;margin-right:auto}.employer-label{display:flex;align-items:center;justify-content:center;gap:14px;color:#b4bcb1;font-size:13px}.employer-label img{width:120px;height:auto;max-height:42px;object-fit:contain}.immersive-hero .gradient-field{opacity:.23}
@media(max-width:540px){.immersive-hero .hero-description{font-size:20px}.employer-label{font-size:11px;gap:10px}.employer-label img{width:120px}.showcase .immersive-hero h1{font-size:clamp(40px,11.4vw,60px)}}
@media(max-height:560px){.immersive-hero .hero-description{font-size:18px}.employer-label img{width:110px;max-height:30px}}
/* Deep olive aurora tuned to the portfolio's restrained black-and-lime palette. */
.immersive-hero .gradient-field{opacity:.17}.immersive-hero .gradient-field::before{background:radial-gradient(ellipse at 48% 18%,#31552b44 0%,#17291e26 35%,transparent 67%)}.immersive-hero .gradient-field i{background:#52792d;filter:blur(78px);box-shadow:0 -28px 80px #658d354d}.immersive-hero .gradient-field i:nth-child(2){background:#12533f;box-shadow:0 -24px 88px #1c684b42}.immersive-hero .gradient-field i:nth-child(3){background:#778b34;box-shadow:0 -24px 85px #879b3945}
@media(max-width:540px){.immersive-hero .gradient-field{opacity:.2}.immersive-hero .gradient-field i{filter:blur(52px)}}
.immersive-hero .hero-description{margin-bottom:40px}@media(max-width:540px){.immersive-hero .hero-description{margin-bottom:32px}}
.home-page>header{position:relative;z-index:3;border-bottom-color:transparent;background:transparent}.showcase .immersive-hero{background:transparent;overflow:visible}.immersive-hero .gradient-field{inset:calc(-1 * var(--header-height)) 0 -180px;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 68%,#0009 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 68%,#0009 82%,transparent 100%)}.immersive-hero .gradient-field::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 45% 12%,#73cf4933,transparent 55%)}.immersive-hero .gradient-field::after{background:none}.immersive-hero .gradient-field i{height:45%;bottom:-15%}.immersive-hero .gradient-field i:nth-child(2){height:36%;bottom:-3%}.immersive-hero .gradient-field i:nth-child(3){height:34%;bottom:-2%}.immersive-hero+.work{position:relative;z-index:1;background:transparent}
@media(max-height:560px){.home-page{--header-height:70px}.showcase .immersive-hero{padding:18px 6% 48px}.showcase .immersive-hero h1{font-size:clamp(32px,7vh,50px);margin:12px 0}.hero-description{font-size:15px;margin-bottom:14px}.hero-cta{padding:9px 20px;font-size:12px}.immersive-hero .eyebrow{font-size:9px}.hero-content{transform:none}.scroll-cue{bottom:12px;font-size:10px}}

/* Scroll-driven work gallery: a sticky stage inside a natural document runway. */
.showcase .work.scroll-work{padding:0 6%;height:var(--work-runway);border:0}
.work-stage{position:sticky;top:0;height:100svh;padding:28px 0 24px;display:flex;flex-direction:column;overflow:clip}
.scroll-work .section-head{flex:none;margin:0 0 24px;min-height:64px}
.scroll-work .section-head h2{margin-top:12px;margin-bottom:12px}
.scroll-work .projects{display:block;position:relative;flex:1;min-height:0;margin:0;overflow:clip}
.scroll-work .project{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;transform-origin:center;will-change:transform,opacity;transition:none;background:#111110;border-radius:20px}
.scroll-work .project-image,.scroll-work .large .project-image{height:calc(100% - 108px);max-height:640px;flex:none;background:transparent;aspect-ratio:auto}
.scroll-work .project-image>img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:20px}
.scroll-work .project-caption{margin-top:20px;flex:none}
.scroll-work .project-caption h3,.scroll-work .project.large .project-caption h3{font-size:clamp(23px,2.6vw,36px)}
@media(max-width:540px){.work-stage{padding:20px 0}.scroll-work .section-head{min-height:76px;margin-bottom:16px}.scroll-work .project-image,.scroll-work .large .project-image{height:auto;max-height:calc(100% - 140px)}.scroll-work .project-image>img{height:auto;max-height:calc(100svh - 290px)}.scroll-work .project-caption{margin-top:18px}.scroll-work .project-caption h3{font-size:23px}}

/* Fade card content over an opaque backing, never the whole stacked surface. */
.scroll-work .project{opacity:1;isolation:isolate;will-change:transform}
.scroll-work .project-image,.scroll-work .project-caption{opacity:var(--card-content-opacity,1)}

.scroll-work .project-caption,.scroll-work .view-case{opacity:var(--caption-opacity,1)}

/* Preserve each banner's complete native composition inside the pinned stage. */
.scroll-work .project-image,.scroll-work .large .project-image{width:var(--banner-width,100%);height:var(--banner-height,auto);max-height:none;align-self:center}
.scroll-work .project-image>img{width:100%;height:100%;max-height:none;object-fit:contain}

/* The card surface and caption follow the fitted banner, rather than the stage. */
.scroll-work .project{inset:auto;top:0;left:50%;width:var(--banner-width,100%);height:auto;margin-left:calc(var(--banner-width,100%) / -2);padding-bottom:16px;justify-content:flex-start;transform-origin:top center}
.scroll-work .project-image,.scroll-work .large .project-image{width:100%}
.scroll-work .project-caption{width:100%;margin-top:20px;gap:18px}

/* Keep the section heading on the same centered column as the case-study cards. */
.scroll-work .section-head{width:var(--work-column-width,100%);margin-left:auto;margin-right:auto}
.scroll-work .section-head{position:relative;z-index:1;padding-top:28px;margin-bottom:0}

/* Case-study covers always use their source proportions—no artificial canvas. */
.real-projects .project-image,.case-figure,.case-cover{background:transparent}
.case-figure img,.case-cover img{display:block;width:100%;height:auto;max-height:none;object-fit:initial;background:transparent}

/* Image lightbox */
.case-figure img,.about-art img{cursor:zoom-in}
.image-lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:28px;background:rgb(8 10 9 / .92);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.image-lightbox.is-open{opacity:1;visibility:visible}
.image-lightbox__image{display:block;max-width:min(92vw,1500px);max-height:88vh;width:auto;height:auto;border-radius:20px;box-shadow:0 25px 80px #0009;transform:scale(.98);transition:transform .2s ease}
.image-lightbox.is-open .image-lightbox__image{transform:scale(1)}
.image-lightbox__close{position:absolute;top:24px;right:24px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #ffffff3d;border-radius:50%;background:#151815;color:#f4f5ef;cursor:pointer}
.image-lightbox__close:hover{background:var(--lime);border-color:var(--lime);color:#111110}
.material-symbols-rounded{font-family:'Material Symbols Rounded';font-size:25px;line-height:1;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
body.lightbox-open{overflow:hidden}
@media(max-width:540px){.image-lightbox{padding:18px}.image-lightbox__image{max-width:100%;max-height:82vh;border-radius:14px}.image-lightbox__close{top:14px;right:14px;width:42px;height:42px}}

/* Footer contact links */
.footer .footer-links{display:flex;gap:34px;padding:18px 0 55px}
.footer .footer-links a{display:inline-flex;align-items:center;gap:12px;color:var(--fg);font-size:clamp(24px,3.2vw,46px);letter-spacing:-1.8px}
.footer .footer-links a:hover,.footer .footer-links a span{color:var(--lime)}
@media(max-width:540px){.footer .footer-links{flex-direction:column;gap:16px;padding:14px 0 42px}.footer .footer-links a{font-size:26px;letter-spacing:-1px}}

/* Typography tokens */
:root{--font-sans:'Inter',Arial,sans-serif;--type-display:clamp(56px,7.2vw,100px);--type-page-title:clamp(48px,6.5vw,92px);--type-section-title:clamp(30px,3.4vw,48px);--type-card-title:clamp(23px,2.5vw,32px);--type-subtitle:clamp(18px,1.8vw,24px);--type-body:17px;--type-small:12px;--type-caption:14px;--line-display:1.04;--line-heading:1.18;--line-body:1.8;--tracking-display:-.055em;--tracking-heading:-.8px;--tracking-label:1.5px;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:650;--weight-display:900}
body{font-family:var(--font-sans);font-size:var(--type-body);line-height:var(--line-body);font-weight:var(--weight-regular)}
.eyebrow,.story-label,.step-number,.next-project>span,.footer>p{font-size:var(--type-small);letter-spacing:var(--tracking-label);font-weight:var(--weight-medium)}
.showcase .immersive-hero h1{font-size:var(--type-display);font-weight:var(--weight-display);line-height:var(--line-display);letter-spacing:var(--tracking-display)}
.page h1,.case-heading h1{font-size:var(--type-page-title);font-weight:var(--weight-bold);line-height:var(--line-display);letter-spacing:var(--tracking-display)}
.intro h2,.story-body h2{font-size:var(--type-section-title);font-weight:var(--weight-bold);line-height:var(--line-heading);letter-spacing:var(--tracking-heading)}
.real-projects .project-caption h3,.scroll-work .project-caption h3,.scroll-work .project.large .project-caption h3{font-size:var(--type-card-title);font-weight:var(--weight-bold);line-height:var(--line-heading);letter-spacing:var(--tracking-heading)}
.hero-description,.case-summary{font-size:var(--type-subtitle);line-height:1.5}
.story-body p,.intro p,.about-copy p{font-size:var(--type-body);line-height:var(--line-body)}
.text-link,.hero-cta,.section-head p,.project-caption p,.case-nav,.footer>div{font-size:var(--type-caption)}
@media(max-width:540px){:root{--type-display:clamp(40px,11.4vw,60px);--type-page-title:49px;--type-section-title:31px;--type-card-title:23px;--type-subtitle:20px;--type-body:16px;--type-caption:12px}}

/* About-page recent work */
.about-work{margin-top:90px;border-top:1px solid var(--line);padding-top:46px}.about-work-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:32px}.about-work-head .eyebrow{color:var(--lime)}.about-work h2{font-size:var(--type-section-title);line-height:var(--line-heading);letter-spacing:var(--tracking-heading);margin:12px 0 0}.about-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.about-work-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding-bottom:4px}.about-work-card img{width:100%;aspect-ratio:1.6;object-fit:cover;border-radius:16px;grid-column:1 / -1;transition:transform .25s ease}.about-work-card span{font-size:var(--type-small);color:var(--muted);margin-top:8px}.about-work-card strong{font-size:20px;line-height:1.22;letter-spacing:-.5px;font-weight:var(--weight-bold);grid-column:1 / 2}.about-work-card b{align-self:end;font-size:22px;font-weight:var(--weight-regular);transition:transform .2s ease}.about-work-card:hover img{transform:translateY(-3px)}.about-work-card:hover b{color:var(--lime);transform:translate(3px,-3px)}
@media(max-width:800px){.about-work-grid{gap:14px}.about-work-card strong{font-size:18px}}@media(max-width:540px){.about-work{margin-top:60px;padding-top:38px}.about-work-head{align-items:start;flex-direction:column;margin-bottom:26px}.about-work-grid{grid-template-columns:1fr;gap:28px}.about-work-card img{border-radius:14px}.about-work-card strong{font-size:21px}}

/* About — connected product-design workflow */
.how-i-work{margin:100px 0 0;padding:58px 0 10px;border-top:1px solid var(--line)}
.workflow-intro{display:grid;grid-template-columns:1.25fr .75fr;gap:54px;align-items:end;margin-bottom:52px}
.workflow-intro .eyebrow{color:var(--lime)}
.workflow-intro h2{font-size:var(--type-section-title);line-height:var(--line-heading);letter-spacing:var(--tracking-heading);margin:12px 0 0}
.workflow-intro h2 em{font-style:normal;color:var(--lime)}
.workflow-intro>p{max-width:390px;margin:0;color:var(--muted);font-size:16px;font-weight:300;line-height:1.7}
.workflow-loop{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);overflow:hidden}
.workflow-stage{position:relative;min-height:178px;padding:24px;background:var(--bg);transition:background .25s ease,transform .25s ease}
.workflow-spacer{background:var(--line)}
.workflow-stage-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.workflow-stage-top span{color:var(--lime);font-size:var(--type-small);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label)}
.workflow-stage-top i{font-size:26px;font-style:normal;color:var(--lime);font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}
.workflow-stage h3{margin:0;font-size:var(--type-card-title);font-weight:var(--weight-bold);line-height:1.05;letter-spacing:var(--tracking-heading)}
.workflow-stage p{margin:9px 0 0;color:var(--muted);font-size:var(--type-caption);line-height:1.45}
.workflow-stage:hover{z-index:1;background:#181b15;transform:translateY(-5px)}
.workflow-stage:last-of-type{background:linear-gradient(135deg,#161b15,#111110)}
.workflow-return{position:absolute;left:0;bottom:-1px;display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--lime);background:var(--bg);border-top:1px solid #737b56;font-size:11px;letter-spacing:1.1px;text-transform:uppercase}
.workflow-return b{font-size:18px;font-weight:400;line-height:1;transform:rotate(-42deg)}
@media(max-width:800px){.how-i-work{margin-top:70px;padding-top:44px}.workflow-intro{grid-template-columns:1fr;gap:20px;margin-bottom:34px}.workflow-loop{grid-template-columns:repeat(2,1fr)}.workflow-stage:nth-of-type(5){grid-column:auto}.workflow-stage{min-height:160px}.workflow-return{position:relative;grid-column:1 / -1;bottom:auto;border-top:1px solid #737b56}}
@media(max-width:540px){.how-i-work{margin-top:58px;padding-top:38px}.workflow-loop{grid-template-columns:1fr}.workflow-spacer{display:none}.workflow-stage{min-height:0;padding:22px}.workflow-stage-top{margin-bottom:18px}.workflow-stage h3{font-size:27px}}

/* Homepage case-study cards share the header column and carry their copy on-image. */
.scroll-work .projects{width:100%}
.scroll-work .project,.scroll-work .project.large{width:100%;margin-left:-50%}
.scroll-work .project-image,.scroll-work .large .project-image{width:100%;position:relative}
.scroll-work .project-caption{position:absolute;z-index:2;inset:0 0 auto;width:100%;margin:0;padding:28px 28px 92px;align-items:start;background:linear-gradient(to bottom,rgba(7,8,7,.96) 0%,rgba(7,8,7,.78) 48%,rgba(7,8,7,0) 100%)}
.scroll-work .project-caption h3,.scroll-work .project.large .project-caption h3{color:var(--fg);text-shadow:0 1px 16px rgba(0,0,0,.38)}
.scroll-work .project-caption p{color:#c3c5bd}
.scroll-work .project-caption>span{display:none}
.scroll-work .view-case{z-index:3;bottom:28px;right:28px}
@media(max-width:540px){.scroll-work .project-caption{padding:20px 20px 76px}.scroll-work .view-case{display:none}.scroll-work .project-caption h3,.scroll-work .project.large .project-caption h3{font-size:22px}.scroll-work .project-caption p{margin-bottom:0}}
.footer .footer-links{border-top:0;padding:0 0 28px;justify-content:flex-start;gap:16px}
.footer .footer-links a{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--line);border-radius:50%;color:var(--fg);transition:color .2s,border-color .2s}
.footer .footer-links a:hover{color:var(--lime);border-color:var(--lime)}
.footer .footer-links svg{width:24px;height:24px}
.footer .footer-links .material-symbols-rounded{font-size:26px;color:inherit}
.footer .footer-links a{color:#fff}
.footer .footer-links a:hover,.footer .footer-links a:focus-visible{color:var(--lime);border-color:var(--lime);background:#d5ff700c}
.email-compose{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:20px;padding:40px;width:min(440px,90vw)}
.email-compose::backdrop{background:#000a;backdrop-filter:blur(6px)}
.email-compose h2{font-size:28px;margin:10px 0 12px;letter-spacing:-1px}
.email-compose p{color:var(--muted)}
.email-close{position:absolute;right:16px;top:16px;border:0;background:transparent;color:var(--fg);cursor:pointer}
.email-options{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.email-options a{padding:12px 16px;border:1px solid var(--line);border-radius:30px}
.email-options a:hover{color:var(--lime);border-color:var(--lime)}
.about-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.workflow-stage:nth-of-type(5){grid-column:auto}
.showcase .hero h1 em,.page h1 em,.workflow-intro h2 em,.outcome-strip strong{color:var(--fg)}
.workflow-intro .eyebrow,.about-work-head .eyebrow,.case-heading>.eyebrow,.step-number,.workflow-stage-top span,.workflow-stage-top i,.values small{color:var(--muted)}
@media(max-width:540px){.about-work-grid{grid-template-columns:1fr}}
.scroll-work .project-caption{align-items:center}
.scroll-work .project-caption>.view-case{display:inline-block;position:static;flex:none;opacity:1;font-size:14px}
/* Shared case-study navigation: each tab has the same treatment. */
/* Fade only the glass layer so header text stays crisp. */
:root{--glass-blur:22px;--glass-tint:rgba(30,32,29,.62);--glass-border:rgba(255,255,255,.18)}
body>header,.home-page>header{position:sticky;top:0;z-index:20;isolation:isolate;background:transparent;border-bottom-color:transparent;transition:transform .32s cubic-bezier(.22,1,.36,1)}
body>header.is-scroll-hidden{transform:translateY(calc(-100% - 36px));pointer-events:none}
body>header:has(:focus-visible){transform:none;pointer-events:auto}
body>header::before{content:"";position:absolute;z-index:-1;inset:-14px 0 -32px;pointer-events:none;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 100%)}
.footer .back-to-top{position:fixed;z-index:30;right:max(24px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid var(--glass-border);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.025)),var(--glass-tint);backdrop-filter:blur(var(--glass-blur)) saturate(125%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(125%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 28px rgba(0,0,0,.18);color:var(--fg);transition:color .2s,border-color .2s,transform .2s,background .2s}
.footer .back-to-top .material-symbols-rounded{font-size:24px}
.footer .back-to-top:hover,.footer .back-to-top:focus-visible{color:var(--lime);border-color:var(--lime);transform:translateY(-3px);background-color:rgba(40,46,32,.78)}
.footer>div:last-of-type{padding-right:72px}
@media(max-width:540px){.footer .back-to-top{width:48px;height:48px;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))}body>header::before{inset:-10px 0 -24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.footer .back-to-top{transition:none}.footer .back-to-top:hover,.footer .back-to-top:focus-visible{transform:none}}
.project-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.project-tags .category-tag{display:inline-flex;align-items:center;margin:0;padding:5px 12px;border:1px solid #ffffff24;border-radius:100px;background:#ffffff08;color:#c5c5bf;font-size:13px;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none}
.project-caption .project-tags{margin-top:12px}
.about-work-card>.project-tags{grid-column:1 / -1;margin:10px 0 4px}
.related-work{padding:65px 0 85px}
.related-work h2{font-size:var(--type-section-title);font-weight:var(--weight-bold);line-height:var(--line-heading);letter-spacing:var(--tracking-heading);margin:0}
.related-work .about-work-grid{gap:38px 24px}
.project-card-arrow{align-self:end;display:inline-flex;font-style:normal;transition:transform .2s,color .2s}
.project-card-arrow .material-symbols-rounded{margin:0;font-size:24px;color:inherit}
.about-work-card:hover .project-card-arrow,.about-work-card:focus-visible .project-card-arrow{transform:translate(3px,-3px);color:var(--lime)}
.back-link{display:inline-flex;align-items:center;gap:8px}
.back-link .material-symbols-rounded{font-size:20px}
header nav .resume-download{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
header nav .resume-download .material-symbols-rounded{font-size:20px;margin:0}
.text-link{align-items:center}
.text-link .material-symbols-rounded,.hero-cta .material-symbols-rounded{font-size:20px}
/* Primary action styling stays consistent at every viewport size. */
:root{--type-action:1rem;--on-action:#0f2305}
.hero-cta{background:var(--lime);color:var(--on-action);font-size:var(--type-action)}
@media(max-width:540px){header,.home-page>header{flex-wrap:wrap;row-gap:18px;height:auto;min-height:124px}.home-page{--header-height:124px}header nav{width:100%;justify-content:space-between;gap:12px}header nav .resume-download{display:inline-flex;margin:0;font-size:13px;gap:6px}.project-tags .category-tag{font-size:12px;padding:4px 10px}.related-work{padding:45px 0 60px}.related-work .about-work-grid{gap:30px}}
html:has(.case-page){scroll-padding-top:0}
.case-page{--case-nav-height:73px}
.case-page .case-nav{position:sticky;top:var(--site-header-offset,0px);z-index:10;display:flex;flex-wrap:nowrap;gap:clamp(20px,3vw,36px);padding:0;background:var(--bg);border-bottom:1px solid var(--line);overflow-x:auto;overscroll-behavior-x:contain;font-size:14px;scrollbar-width:thin;transition:top .32s cubic-bezier(.22,1,.36,1)}
.case-page .case-nav a{display:inline-flex;position:relative;flex:none;margin:0;padding:24px 0 22px;color:var(--muted);font-weight:var(--weight-regular);white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.case-page .case-nav a:hover,.case-page .case-nav a[aria-current="location"]{color:var(--lime)}
.case-page .case-nav a[aria-current="location"]{border-bottom-color:var(--lime)}
.case-page .case-nav a:focus-visible{outline-offset:-3px;border-radius:2px}
.case-page .story-section{scroll-margin-top:calc(var(--case-nav-height) + var(--site-header-offset,0px) + 16px)}
@media(max-width:540px){.case-page .case-nav{gap:24px}.case-page .case-nav a{padding:18px 0 16px}}
@media(prefers-reduced-motion:reduce){html:has(.case-page){scroll-behavior:auto}.case-page .case-nav a,.case-page .case-nav,body>header{transition:none}}
@media(max-width:540px){.scroll-work .project-caption{align-items:flex-start;flex-direction:column;gap:16px}.scroll-work .project-caption>.view-case{font-size:12px;margin:0}}

/* Recent responsive refinements apply only to mobile screens. */
@media(max-width:700px){
/* Responsive layout: readable content, full-width surfaces, touch-sized controls. */
header nav a{display:inline-flex;align-items:center;min-height:44px}
header{gap:24px}
.metadata>* , .about-block>*, .workflow-intro>*, .workflow-stage, .about-work-card{min-width:0}
.metadata,.about-work-card strong,.case-heading h1{overflow-wrap:anywhere}
.work:not(.scroll-work) .projects,.page>.real-projects{gap:40px}
.work:not(.scroll-work) .project-image,.page>.real-projects .project-image{display:flex;flex-direction:column;align-items:stretch;height:auto;overflow:hidden;background:#181b17}
.work:not(.scroll-work) .project-caption,.page>.real-projects .project-caption{order:-1;position:static;margin:0;padding:24px;align-items:center;flex-wrap:wrap}
.work:not(.scroll-work) .view-case,.page>.real-projects .view-case{position:static;display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.work:not(.scroll-work) .project-image>img,.page>.real-projects .project-image>img{height:auto;border-radius:0;object-fit:contain}
.footer .footer-links{flex-direction:row;flex-wrap:wrap}
.email-close{width:44px;height:44px;display:grid;place-items:center}
.email-compose{max-height:calc(100dvh - 32px);overflow:auto}
.text-link{min-height:44px}
@media(min-width:801px) and (max-width:1100px){.workflow-loop{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-intro{gap:28px}.about-block{gap:36px}}
@media(max-width:1023px){
 .showcase .immersive-hero{height:auto;min-height:calc(100svh - var(--site-header-height,124px));padding:56px 6% 64px}
 .hero-content{transform:none}
 .showcase .work{padding-top:32px;padding-bottom:48px}
 .intro{margin-top:24px;margin-bottom:56px;padding-top:48px;padding-bottom:48px}
 .intro>div{max-width:100%}
 .intro{background-image:linear-gradient(90deg,#10271ff7,#10271fe6 60%,#10271f99),url('/assets/about-sculpture.png')}
}
@media(max-width:700px){
 header,.home-page>header{flex-wrap:wrap;gap:8px;height:auto;min-height:0;padding:16px 6% 12px}
 header nav{width:100%;justify-content:space-between;gap:8px;font-size:14px}
 header nav a:last-child{margin-left:0}
 header nav .resume-download{font-size:14px;gap:6px}
 .about-block{grid-template-columns:1fr;gap:28px;margin:36px 0 56px}
 .about-art{min-height:0;max-height:none}
 .about-art img{max-height:440px;object-fit:contain}
 .metadata{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .about-work-head{align-items:flex-start;flex-direction:column;gap:18px}
 .page,.case-page{padding-top:32px}
 .back-link{margin-bottom:32px;min-height:44px}
 .story-section{gap:18px;padding:44px 0}
 .case-heading .metadata{margin-top:28px;padding-bottom:28px}
 .footer{padding-top:36px;padding-bottom:28px}
}
@media(max-width:540px){
 :root{--type-page-title:clamp(34px,9vw,49px);--type-caption:14px;--type-small:12px;--type-section-title:clamp(27px,7.5vw,31px)}
 .showcase .immersive-hero h1{font-size:clamp(38px,10.5vw,56px)}
 .immersive-hero .hero-description{font-size:20px}
 .employer-label{font-size:12px;gap:10px;flex-wrap:wrap}
 .work:not(.scroll-work) .project-caption,.page>.real-projects .project-caption{padding:20px;flex-direction:column;align-items:flex-start;gap:16px}
 .work:not(.scroll-work) .projects,.page>.real-projects{gap:28px}
 .intro{padding:32px 24px;min-height:0}
 .intro>div{margin-top:28px}
 .intro p{max-width:100%}
 .metadata{font-size:14px;gap:22px 16px}
 .outcome-strip strong{font-size:32px}
 .email-compose{padding:40px 24px 24px}
 .footer>div:last-of-type{padding-right:48px}
}
@media(max-height:600px){.showcase .immersive-hero{height:auto;min-height:420px;padding-top:40px;padding-bottom:40px}.hero-content{transform:none}}

}

/* Compact mobile navigation and image-first project cards. */
header nav .resume-label{margin:0}
@media(max-width:700px){
 header,.home-page>header{flex-wrap:nowrap;gap:8px;padding:14px 16px;min-height:72px}
 .home-page{--header-height:72px}
 header .wordmark{flex:none}
 header nav{width:auto;flex:none;gap:12px;justify-content:flex-end}
 header nav a{white-space:nowrap;justify-content:center;min-width:44px}
 header nav .resume-download{width:44px;height:44px;gap:0}
 header nav .resume-label{display:none}
 header nav .resume-download .material-symbols-rounded{font-size:24px}
}
@media(max-width:540px){
 .work:not(.scroll-work) .project-image,.page>.real-projects .project-image{background:transparent;border-radius:0;overflow:visible}
 .work:not(.scroll-work) .project-image>img,.page>.real-projects .project-image>img{border-radius:16px}
 .work:not(.scroll-work) .project-caption,.page>.real-projects .project-caption{order:0;background:none;padding:18px 0 0;margin:0}
 .real-projects .project-caption>.view-case,.work:not(.scroll-work) .view-case,.page>.real-projects .view-case{display:none}
 .intro{padding:44px 20px;margin-left:20px;margin-right:20px;margin-bottom:44px}
 .footer .footer-links{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:16px}
}
@media(max-width:350px){header nav{gap:6px}header .brand-name{font-size:11px}header,.home-page>header{padding-left:12px;padding-right:12px}}

/* Mobile homepage case-study rhythm. */
@media(max-width:700px){.home-page #work:not(.scroll-work) .projects.real-projects{row-gap:40px}}

/* About recent-work spacing and mobile presentation. */
#connect.about-work .about-work-grid{row-gap:60px}
@media(max-width:700px){
 #connect.about-work .about-work-grid{row-gap:4px}
 #connect .about-work-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
 #connect .about-work-card>img{grid-row:1;grid-column:1}
 #connect .about-work-card>strong{grid-row:2;grid-column:1;margin-top:10px}
 #connect .about-work-card>.project-tags{grid-row:3;grid-column:1;margin-top:4px}
 #connect .project-card-arrow{display:none}
 #connect .about-work-head{margin-bottom:40px}
 .case-page .case-nav{scrollbar-width:none;-ms-overflow-style:none}
 .case-page .case-nav::-webkit-scrollbar{display:none;width:0;height:0}
}

/* Keep the case-study control's label and Material icon on one visual centerline. */
.real-projects .project-caption>.view-case{display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1}
.real-projects .view-case .material-symbols-rounded{display:block;font-size:18px;line-height:1}
@media(max-width:700px){.real-projects .project-caption>.view-case{display:none}}

/* About: a viewport-sized portrait, overlapping headline, then a quiet reading column. */
.page.about-page{padding:0;overflow:visible}
.about-hero{--about-stage-height:calc(100svh - var(--site-header-height,108px));position:relative;height:calc(var(--about-stage-height) + 50svh);isolation:isolate}
.about-hero-stage{position:sticky;top:0;height:var(--about-stage-height);min-height:380px;isolation:isolate;overflow:hidden}
.about-portrait{position:absolute;inset:0 0 13%;z-index:-1;transform:translate3d(0,var(--portrait-y,0px),0) scale(var(--portrait-scale,1.06));transform-origin:50% 35%;opacity:var(--portrait-opacity,1);will-change:transform,opacity}
.about-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.about-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(17,17,16,.05) 0%,rgba(17,17,16,0) 35%,rgba(17,17,16,.3) 62%,var(--bg) 100%);pointer-events:none}
.about-hero-heading{position:absolute;inset:auto 6% 12px;text-align:center;max-width:1200px;margin:0 auto 40px}
.about-page .about-hero-heading h1{max-width:none;margin:0;font-size:clamp(30px,min(5.2vw,7.4svh),76px);line-height:1.07;letter-spacing:-.045em;font-weight:650;text-wrap:balance;color:var(--fg)}
.about-biography{position:relative;max-width:848px;padding:64px 24px 100px;margin-inline:auto;background:var(--bg)}
.about-biography .about-copy{max-width:800px;margin:0 auto}
.about-biography .about-copy p{font-size:clamp(18px,1.55vw,20px);line-height:1.8;color:#b9bcb3;margin:0 0 26px}
.about-biography .about-copy p:last-child{margin-bottom:0}
.about-page>.how-i-work,.about-page>.about-work{margin-inline:6%}
@media(min-width:1600px){.about-portrait img{object-position:50% 35%}}
@media(max-width:700px){
 .about-hero{--about-stage-height:calc(100svh - var(--site-header-height,72px));height:calc(var(--about-stage-height) + 32svh)}
 .about-portrait{bottom:17%;transform-origin:50% 25%}
 .about-portrait img{object-position:50% 30%}
 .about-hero-heading{left:20px;right:20px;bottom:80px;margin-bottom:0}
 .about-page .about-hero-heading h1{font-size:clamp(29px,min(7.5vw,5.7svh),44px);line-height:1.12;letter-spacing:-.035em}
 .about-biography{padding:44px 20px 64px}
 .about-page>.how-i-work,.about-page>.about-work{margin-inline:20px}
}
@media(max-height:580px) and (min-width:701px){.about-hero-stage{min-height:300px}.about-page .about-hero-heading h1{font-size:clamp(28px,5.8svh,42px)}}
@media(prefers-reduced-motion:reduce){.about-hero{height:auto}.about-hero-stage{position:relative}.about-portrait{transform:none;opacity:1;will-change:auto}}

/* Shared rhythm between page sections; card and text spacing stay independent. */
@media(min-width:701px){
 .showcase .editorial-work{height:auto;padding-bottom:0}
 .editorial-work .section-head{margin-bottom:64px}
 .editorial-work .projects.real-projects{display:block;overflow:visible}
 .editorial-work .projects>.project{display:block;position:relative;inset:auto;width:100%;margin:0 0 120px;transform:none;overflow:visible;isolation:isolate;background:transparent;border-radius:0}
 .editorial-work .projects>.project:last-child{margin-bottom:0}
 .editorial-work .project>.project-caption{position:sticky;top:112px;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:40px;min-height:0;margin:0;padding:28px 0 40px;background:none;opacity:1}
 .editorial-work .project-caption>div{max-width:850px}
 .editorial-work .project-caption h3,.editorial-work .project.large .project-caption h3{font-size:64px;font-weight:750;line-height:1.02;letter-spacing:-.055em;text-wrap:balance;text-shadow:none;max-width:100%;margin:0}
 .editorial-work .project-caption .project-tags{margin-top:28px;gap:10px}
 .editorial-work .project-caption>.view-case{position:static;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;padding:16px 22px;min-height:52px;border:1px solid var(--lime);border-radius:100px;background:transparent;color:var(--lime);font-size:15px;white-space:nowrap}
 .editorial-work .project>.project-image{position:relative;z-index:2;display:block;height:auto;aspect-ratio:auto;overflow:hidden;border-radius:24px;background:var(--bg);box-shadow:0 -20px 60px #0003;transform-origin:50% 0;will-change:transform}
 .editorial-work .project-image img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border-radius:24px;transform:none}
 .editorial-work .project:hover .project-image>img{transform:none}
}
@media(min-width:701px) and (max-width:1023px){.editorial-work .project>.project-caption{gap:24px;top:84px}.editorial-work .project-caption h3,.editorial-work .project.large .project-caption h3{font-size:clamp(38px,5.2vw,54px)}.editorial-work .project-caption>.view-case{padding:12px 16px;min-height:46px;font-size:13px}}
@media(min-width:701px) and (prefers-reduced-motion:reduce){.editorial-work .project>.project-caption{position:relative;top:auto;min-height:0}}
:root{--section-gap:120px}
.showcase>.work{margin-top:var(--section-gap)}
main>.intro{margin-top:var(--section-gap);margin-bottom:var(--section-gap)}
.about-hero{margin-bottom:var(--section-gap)}
.about-biography{padding-top:0;padding-bottom:0;margin-bottom:var(--section-gap)}
.about-page>.how-i-work{margin-top:0}
.about-page>.about-work{margin-top:var(--section-gap);margin-bottom:var(--section-gap)}
@media(max-width:700px){
 :root{--section-gap:60px}
 .about-biography{padding-top:0;padding-bottom:0}
 .about-page>.how-i-work{margin-top:0}
 .about-page>.about-work{margin-top:var(--section-gap)}
}

@media(min-width:701px){.editorial-work .project-thumbnail-link{display:block}.editorial-work .view-case:hover{border-color:var(--fg);color:var(--fg)}.editorial-work .view-case:focus-visible,.editorial-work .project-thumbnail-link:focus-visible{outline:2px solid var(--lime);outline-offset:5px}}

@media(min-width:701px){
 .editorial-work .project-thumbnail-link img{transition:transform .65s cubic-bezier(.2,.7,.2,1)}
 .editorial-work .project-thumbnail-link:hover img,.editorial-work .project-thumbnail-link:focus-visible img{transform:scale(1.045)}
}
@media(prefers-reduced-motion:reduce){.editorial-work .project-thumbnail-link img{transition:none}}

/* Homepage closing thought: typography and a single link on the page surface. */
main>.intro.simple-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:42px;min-height:0;margin:var(--section-gap) 6%;padding:100px 24px 120px;border:0;border-radius:0;background:none;box-shadow:none;text-align:center;overflow:visible}
.simple-intro h2{max-width:1100px;margin:0;font-size:64px;font-weight:750;line-height:1.07;letter-spacing:-.045em;text-wrap:balance}
.simple-intro h2 span{color:inherit}
.simple-intro .text-link{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;margin:0;color:var(--lime);font-size:16px;font-weight:600}
.simple-intro.intro-reveal-ready h2{opacity:0;transform:translateY(32px) scale(.88);transition:opacity .95s ease,transform .95s cubic-bezier(.16,1,.3,1)}
.simple-intro.intro-reveal-ready .text-link{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.simple-intro.intro-revealed h2,.simple-intro.intro-revealed .text-link{opacity:1;transform:none}
.simple-intro.intro-revealed .text-link{transition-delay:1.7s}
.simple-intro .ripple-word{display:inline-block;white-space:nowrap}
.simple-intro .ripple-char{display:inline-block;transform-origin:50% 80%}
.simple-intro.intro-revealed .ripple-char{animation:water-letter-wave 1.2s ease-in-out 1 both;animation-delay:var(--ripple-delay)}
@keyframes water-letter-wave{0%,100%{transform:translateY(0) rotate(0) scale(1)}24%{transform:translateY(-11px) rotate(-1.5deg) scale(1.055)}50%{transform:translateY(4px) rotate(.7deg) scale(.99)}75%{transform:translateY(-2px) rotate(0) scale(1)}}
@media(max-width:700px){main>.intro.simple-intro{margin:var(--section-gap) 20px;padding:72px 0 88px;gap:32px}.simple-intro h2{font-size:clamp(36px,8.5vw,54px)}}
@media(prefers-reduced-motion:reduce){.simple-intro.intro-reveal-ready h2,.simple-intro.intro-reveal-ready .text-link{opacity:1;transform:none;transition:none}.simple-intro .ripple-char{animation:none}}

/* Explicit keyframes ensure the first entrance runs even on a cached load. */
.immersive-hero.hero-reveal-ready:not(.hero-revealed) .hero-content > *{opacity:0}
.immersive-hero.hero-revealed .hero-content > *{animation:hero-stagger-in .4s cubic-bezier(.2,.75,.25,1) backwards}
.immersive-hero.hero-revealed .employer-label{animation-delay:.08s}
.immersive-hero.hero-revealed .hero-content h1{animation-delay:.2s}
.immersive-hero.hero-revealed .hero-description{animation-delay:.32s}
.immersive-hero.hero-revealed .hero-cta{animation-delay:.44s}
@keyframes hero-stagger-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.immersive-hero.hero-reveal-ready:not(.hero-revealed) .hero-content > *{opacity:1}.immersive-hero.hero-revealed .hero-content > *{animation:none}}

/* Viewport entrance runs once per content element; translate leaves scroll transforms intact. */
.section-reveal-pending:not(.section-reveal-visible){opacity:0}
.section-reveal-pending.section-reveal-visible{animation:section-stagger-in .4s cubic-bezier(.2,.75,.25,1) backwards;animation-delay:var(--section-reveal-delay,0s)}
.section-reveal-pending:focus-within{opacity:1;animation:none}
@keyframes section-stagger-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.section-reveal-pending:not(.section-reveal-visible){opacity:1}.section-reveal-pending.section-reveal-visible{animation:none}}

.metric-readable{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* About recent work: one featured tile, with focus and hover expansion. */
:is(#connect,.related-work) .about-work-grid{display:flex;gap:18px;row-gap:18px}
.about-work-grid .recent-work-tile{position:relative;display:block;flex:1 1 0;min-width:0;height:380px;overflow:hidden;border-radius:20px;isolation:isolate;background:#1b1d19;transition:flex-grow .65s cubic-bezier(.22,1,.36,1)}
.about-work-grid .recent-work-tile.is-expanded{flex-grow:2.4}
.recent-work-tile>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.recent-work-tile.is-expanded>img{transform:scale(1.035)}
.recent-work-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.88));opacity:.35;transition:opacity .45s ease;pointer-events:none}
.recent-work-tile.is-expanded::after{opacity:1}
.recent-work-caption{position:absolute;z-index:1;inset:auto 28px 30px;opacity:0;transform:translateY(28px);transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1);pointer-events:none}
.is-expanded>.recent-work-caption{opacity:1;transform:translateY(0);transition-delay:.12s}
.recent-work-caption>strong{display:block;color:#f3f3ec;font-size:clamp(24px,2.5vw,36px);line-height:1.12;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.recent-work-caption .project-tags{margin-top:18px;gap:8px;flex-wrap:wrap}
.recent-work-caption .category-tag{background:#171a17aa;border-color:#ffffff40;color:#eee;font-size:12px;backdrop-filter:blur(8px)}
.recent-work-tile:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
@media(min-width:701px) and (max-width:1000px){.about-work-grid .recent-work-tile{height:380px}.recent-work-caption{inset:auto 20px 24px}.recent-work-caption>strong{font-size:26px}}
@media(max-width:700px){:is(#connect,.related-work) .about-work-grid{flex-direction:column;gap:20px}.about-work-grid .recent-work-tile{flex:auto;height:380px}.about-work-grid .recent-work-tile.is-expanded{flex-grow:0}.recent-work-caption{inset:auto 22px 26px;opacity:1;transform:none}.recent-work-caption>strong{font-size:28px}.recent-work-tile::after{opacity:1}.recent-work-tile.is-expanded>img{transform:none}}
@media(hover:none){.recent-work-caption{opacity:1;transform:none}.recent-work-tile::after{opacity:1}}
@media(prefers-reduced-motion:reduce){.about-work-grid .recent-work-tile,.recent-work-tile>img,.recent-work-caption,.recent-work-tile::after{transition:none}}

/* Shared glass header without a gradient fade. */

@media(min-width:701px){.editorial-work .project-caption>.view-case{align-self:center;margin-top:0;padding:10px 16px;min-height:44px;font-size:13px;gap:8px}}

.about-biography .about-copy p:nth-of-type(1),.about-biography .about-copy p:nth-of-type(3){font-weight:300}

/* Align the action with the title row, independently of its category tags. */
@media(min-width:701px){
.editorial-work .project>.project-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;row-gap:0}
.editorial-work .project-caption>div{display:contents}
.editorial-work .project-caption h3{grid-column:1;grid-row:1}
.editorial-work .project-caption .project-tags{grid-column:1;grid-row:2}
.editorial-work .project-caption>.view-case{grid-column:2;grid-row:1;align-self:end}
}

/* Bottom-aligned banking hero with an open, animated upper field. */
.showcase .immersive-hero{height:auto;min-height:calc(100svh - var(--site-header-height,104px));padding:180px 6% 60px;align-items:flex-end;justify-content:flex-start;text-align:left;overflow:hidden}
.immersive-hero .hero-content{max-width:1280px;width:100%;transform:none;margin:0}
.showcase .immersive-hero h1{width:100%;max-width:1180px;margin:0 0 32px;font-size:clamp(48px,5.7vw,88px);font-weight:750;line-height:1.06;letter-spacing:-.05em;text-wrap:balance}
.immersive-hero .gradient-field{inset:0;opacity:.24;mask-image:linear-gradient(#000,transparent 85%);-webkit-mask-image:linear-gradient(#000,transparent 85%)}
.immersive-hero .gradient-field::before{background:none}
.immersive-hero .gradient-field i{width:75%;height:70%;left:5%;top:-45%;bottom:auto;background:#76983b;filter:blur(95px);box-shadow:none;animation:banking-glow 4s ease-in-out infinite alternate}
.immersive-hero .gradient-field i:nth-child(2){width:60%;height:60%;left:45%;top:-35%;bottom:auto;background:#17654c;animation-delay:-5s}
.immersive-hero .gradient-field i:nth-child(3){width:45%;height:50%;left:-15%;top:-20%;bottom:auto;background:#a1ad42;animation-delay:-8s}
@keyframes banking-glow{from{transform:translate3d(-18%,-8%,0) scale(.9)}to{transform:translate3d(24%,24%,0) scale(1.18)}}
.immersive-hero.hero-revealed .hero-content h1{animation-delay:0s}
.immersive-hero.hero-revealed .hero-cta{animation-delay:.08s}
@media(max-width:700px){.showcase .immersive-hero{padding:160px 6% 60px}.showcase .immersive-hero h1{font-size:clamp(36px,8.5vw,54px);line-height:1.1;margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){.immersive-hero .gradient-field i{animation:none}}

/* Clear header at the page top; retain glass when scrolling. */
body>header:not(.has-scrolled){background:transparent;box-shadow:none}
body>header::before{transition:opacity .3s ease}
body>header:not(.has-scrolled)::before{opacity:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* A cool, off-centre wash with a quieter blue accent. */
.immersive-hero .gradient-field{opacity:.28}
.immersive-hero .gradient-field i{background:#246e69;left:18%;top:-38%;width:65%;height:65%;filter:blur(100px)}
.immersive-hero .gradient-field i:nth-child(2){background:#344a83;left:62%;top:-28%;width:48%;height:55%}
.immersive-hero .gradient-field i:nth-child(3){background:#386552;left:-24%;top:-45%;width:48%;height:60%}

/* One continuous visual surface; keep the header's full-page sticky boundary. */
.home-page .showcase .immersive-hero{overflow:visible}
.home-page .immersive-hero .gradient-field{top:calc(-1 * var(--site-header-height,104px));bottom:0;left:0;right:0;mask-image:linear-gradient(to bottom,#000 0%,#000 24%,transparent 90%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 24%,transparent 90%)}

.home-page .showcase .immersive-hero h1{margin-bottom:40px}

/* Blend the About navigation into its portrait at the top and on scroll. */
.about-page>header::before,.about-page>header:not(.has-scrolled)::before{opacity:1;inset:-14px 0 -48px;background:color-mix(in srgb,var(--bg) 65%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);mask-image:linear-gradient(to bottom,#000 0%,#000 48%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,transparent 100%);box-shadow:none}

body:has(.case-page)>header{position:relative;top:auto;transform:none}
.case-page .case-nav{top:0;transition:none}

/* Captions sit outside the rounded image surface. */
.case-page .case-figure{overflow:visible;border-radius:0}
.case-page .case-figure figcaption{overflow:visible;white-space:normal;overflow-wrap:anywhere;padding:0 2px}
@media(min-width:801px){.outcome-strip:has(>div:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:541px) and (max-width:800px){.outcome-strip:has(>div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Transparent approved logo; ordinary alpha compositing preserves the header backdrop. */
header .wordmark{display:block;flex:none}
header .brand-logo-transparent{display:block;width:141px;height:auto}
@media(max-width:700px){header .brand-logo-transparent{width:125px}}
@media(max-width:350px){header .brand-logo-transparent{width:112px}}

/* Mobile contact actions match the footer; desktop keeps its full wordmark. */
header .brand-logo-symbol,header nav .mobile-call{display:none}
@media(max-width:700px){
 header .brand-logo-transparent{display:none}
 header .brand-logo-symbol{display:block;width:44px;height:44px;object-fit:contain}
 header nav .resume-download,header nav .mobile-call{display:inline-grid;place-items:center;flex-shrink:0;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--line);border-radius:50%;color:#fff;transition:color .2s,border-color .2s,background .2s}
 header nav .mobile-call svg{width:24px;height:24px}
 header nav .resume-download:hover,header nav .resume-download:focus-visible,header nav .mobile-call:hover,header nav .mobile-call:focus-visible{color:var(--lime);border-color:var(--lime);background:#d5ff700c}
}

/* Mobile navigation: text links together, then a separated action group. */
@media(max-width:700px){
 header nav{gap:8px;font-size:13px}
 header nav .mobile-call{margin-left:20px}
 header nav .mobile-call svg{width:20px;height:20px}
 header nav .resume-download .material-symbols-rounded{font-size:20px}
}

/* Preserve the original portrait; extend its dark setting with the hero background. */
.about-portrait:has(img[src="/assets/rehyan-about-photo-2026.png"]){background:#111110}
.about-portrait img[src="/assets/rehyan-about-photo-2026.png"]{object-fit:contain;object-position:center bottom;mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent)}

/* Landscape extension fills the hero while retaining the centered portrait on mobile. */
.about-portrait img[src="/assets/rehyan-about-landscape-v2.webp"]{object-fit:cover;object-position:center center}