:root{--navy:#0b2232;--ink:#142a3b;--ice:#d7e9f5;--lime:#b6f56c;--muted:#496172;--line:#cad9e3;--mono:'Source Code Pro',monospace;--sans:'Space Grotesk',Arial,sans-serif;--radius:6px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:#fbfdff;font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--mono);font-weight:400;line-height:1.12;letter-spacing:-.055em}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #2758dc;outline-offset:6px}img{display:block;max-width:100%}.container{width:min(1240px,calc(100% - 96px));margin:auto}.section{padding-top:112px;padding-bottom:112px}.eyebrow,.small-label{font:11px/1.6 var(--mono);letter-spacing:.065em}.eyebrow{margin-bottom:28px}.small-label{color:var(--muted)}.site-header{position:absolute;top:24px;left:0;width:100%;z-index:10}.navigation{display:flex;justify-content:space-between;align-items:center;width:min(1240px,calc(100% - 96px));margin:auto;padding:8px 14px;background:#0b2232e8;border:1px solid #cee7f32e;border-radius:var(--radius);color:#f5faff}.identity{display:flex;align-items:center;gap:12px;font:600 13px var(--sans);letter-spacing:.03em}.identity img{object-fit:contain}.nav-links{display:flex;gap:30px;align-items:center;font-size:13px}.nav-links a{padding:10px 0}.nav-links a:hover{color:var(--lime)}.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#f5faff;min-height:900px}.gradient-field{position:absolute;inset:-15%;z-index:-2;background:radial-gradient(ellipse 24% 60% at 82% 24%,#d7e9f5 0%,#9cd5e9 15%,#259ebc 30%,#2e53b7 52%,transparent 77%),radial-gradient(ellipse 40% 75% at 98% 80%,#2e53b7 0%,transparent 65%);transform:rotate(-12deg);animation:flow 19s ease-in-out infinite alternate;opacity:.95}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b2232e8 0%,#0b22328c 47%,#0b223212 80%);z-index:-1}.hero-mark{position:absolute;right:-7%;top:12%;width:540px;height:540px;opacity:.07;pointer-events:none}.hero-content{position:relative;padding-top:164px;padding-bottom:32px}.hero-eyebrow{color:#d7e9f5;margin-bottom:42px;display:flex;gap:14px;align-items:center}.hero-eyebrow:before{content:'';width:22px;height:3px;background:var(--lime)}.hero-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:80px;align-items:end}.hero h1{font-size:clamp(56px,6.7vw,98px);line-height:1.06;letter-spacing:-.065em}.hero h1>span{color:var(--ice)}.hero-aside{padding:22px 26px 26px;background:#0b2232b3;border:1px solid #d7e9f533;border-radius:4px;max-width:390px;justify-self:end}.hero-aside .small-label{color:#c0d6e5}.capabilities{list-style:none;padding:0;margin:22px 0 28px;font-size:14px}.capabilities li{display:flex;gap:16px;padding:10px 0;border-top:1px solid #c8e0ef33}.capabilities li:last-child{border-bottom:1px solid #c8e0ef33}.capabilities span{font:11px/2 var(--mono);color:var(--lime);min-width:18px}.hero-copy{font-size:17px;line-height:1.55;margin-bottom:24px;color:#e4eff6}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:48px;padding:14px 20px;background:var(--lime);color:var(--navy);font:500 14px var(--sans);border-radius:4px;transition:background .2s,transform .2s}.button:hover{background:#cdfb9b;transform:translateY(-2px)}.button span{font-size:21px}.hero a:focus-visible,.contact a:focus-visible{outline-color:var(--lime)}.hero-foot{display:flex;justify-content:space-between;gap:30px;border-top:1px solid #d7e9f533;margin-top:76px;padding-top:22px;font:10px/1.6 var(--mono);letter-spacing:.07em;color:#c7dce9}.hero-foot a span{padding-left:24px;color:var(--lime)}.section-head{display:grid;grid-template-columns:1fr 2fr 1fr;gap:30px;align-items:end;margin-bottom:56px}.section-head .eyebrow{align-self:start;padding-top:12px}.section-head h2{font-size:clamp(44px,5vw,70px)}.section-note{font-size:15px;color:var(--muted);padding-bottom:5px}.lime-dot{color:#547c22}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px 32px}.featured{grid-column:1/-1}.project-image{display:block;overflow:hidden;border-radius:var(--radius);background:var(--ice)}.project-image img{width:100%;transition:transform .65s ease}.project-image:hover img{transform:scale(1.025)}.residential-image{aspect-ratio:1.9}.residential-image img{height:100%;object-fit:cover}.commercial-image,.ecosystem-image{aspect-ratio:1.35;height:auto}.commercial-image{padding:32px 50px 0;background:#dcebf4}.commercial-image img{box-shadow:0 12px 40px #142a3b25}.ecosystem-image{background:#142e3d;display:grid;place-items:center}.ecosystem-image img{height:100%;object-fit:contain}.project-caption{padding-top:26px;display:grid;gap:16px}.project-caption h3{font-size:clamp(23px,2.1vw,30px);margin-top:9px}.project-caption p:not(.small-label){font-size:16px;color:var(--muted);max-width:540px}.featured .project-caption{grid-template-columns:1fr 1fr;gap:64px}.text-link{display:inline-flex;gap:30px;align-items:center;font-size:14px;font-weight:500;border-bottom:1px solid #9eb2c1;padding-bottom:7px;width:fit-content;margin-top:8px}.text-link:hover{border-color:var(--ink)}.approach{background:#edf4f8}.approach-head{display:grid;grid-template-columns:1fr 3fr;gap:30px;margin-bottom:50px}.approach-head .eyebrow{padding-top:10px}.approach-head h2{font-size:clamp(34px,4vw,56px)}.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.bento article{border-radius:var(--radius);padding:34px;overflow:hidden;position:relative}.bento h3{font-size:clamp(24px,2.6vw,36px);line-height:1.2}.bento p:not(.small-label){font-size:16px;max-width:400px}.bento .small-label{margin-bottom:24px}.craft-card{grid-column:span 7;grid-row:span 2;background:#fff;min-height:620px}.craft-card>p:not(.small-label){margin-top:24px}.craft-screens{position:absolute;bottom:-55px;left:34px;right:34px;display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start;transform:rotate(-4deg)}.craft-screens>div{height:310px;overflow:hidden;border:1px solid #cad9e3;box-shadow:0 15px 35px #142a3b18;border-radius:3px}.craft-screens>div+div{margin-top:46px}.experience-card{grid-column:span 5;background:var(--navy);color:#f5faff;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}.experience-number{font:400 112px/1 var(--mono);letter-spacing:-.09em;color:var(--ice)}.experience-card h3{font-size:22px;letter-spacing:-.04em}.experience-card p{grid-column:1/-1;color:#c0d6e5}.connections-card{grid-column:span 5;background:#d7e9f5}.connection-words{display:grid;grid-template-columns:1fr 1fr;margin:28px 0;border-top:1px solid #8faaba}.connection-words span{padding:12px 0;border-bottom:1px solid #8faaba;font-size:14px}.connections-card h3{font-size:28px}.consistency-card{grid-column:span 5;background:var(--navy);color:#f5faff;min-height:320px}.consistency-card .small-label{color:#c0d6e5}.consistency-card p:not(.small-label){color:#c0d6e5;margin-top:24px;position:relative;z-index:1}.consistency-card img{position:absolute;right:-36px;bottom:-60px;width:220px;opacity:.08}.delivery-card{grid-column:span 7;background:#fff;min-height:320px}.delivery-card p:not(.small-label){margin-top:24px}.delivery-line{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:32px;padding-top:16px;font:11px var(--mono);color:var(--muted)}.manifesto>.eyebrow{margin-bottom:55px}.manifesto h2{font-size:clamp(42px,6.5vw,88px);line-height:1.13;max-width:1050px}.manifesto em{font-style:normal;background:var(--ice);padding:0 .12em}.manifesto-bottom{display:grid;grid-template-columns:1fr 1fr;gap:120px;margin-top:64px}.personal-note{font-size:20px;color:var(--muted);max-width:380px}.principles{list-style:none;padding:0;margin:0}.principles li{display:flex;gap:24px;border-top:1px solid var(--line);padding:16px 0;font-size:19px}.principles li:last-child{border-bottom:1px solid var(--line)}.principles span{font:12px/2 var(--mono);color:var(--muted)}.contact{padding:90px 0 32px;background:var(--navy);color:#f5faff;position:relative;overflow:hidden}.contact:before{content:'';position:absolute;right:-80px;bottom:-180px;width:600px;height:600px;border-radius:50%;background:radial-gradient(ellipse,#2e53b750,transparent 68%);pointer-events:none}.contact .container{position:relative}.contact .eyebrow{color:var(--lime)}.contact-main{display:grid;grid-template-columns:2fr 1fr;gap:64px;align-items:end}.contact-main h2{font-size:clamp(38px,5vw,70px)}.contact-main p{font-size:20px;margin-bottom:26px;color:#d7e9f5}footer{display:grid;grid-template-columns:1fr auto;gap:34px;border-top:1px solid #c8e0ef33;margin-top:80px;padding-top:28px}footer>div{display:flex;align-items:center;gap:28px;font-size:13px}footer>p{grid-column:1/-1;font:10px var(--mono);letter-spacing:.06em;color:#b5cedf}.skip{position:fixed;left:16px;top:-80px;background:white;color:var(--ink);padding:12px 20px;z-index:100}.skip:focus{top:16px}@keyframes flow{0%{transform:rotate(-12deg) translate(0,-2%) scale(1)}50%{transform:rotate(-4deg) translate(-6%,3%) scale(1.1,1.06)}100%{transform:rotate(-16deg) translate(3%,6%) scale(.98,1.15)}}@keyframes gentle-enter{from{transform:translateY(12px)}to{transform:none}}@media(prefers-reduced-motion:no-preference){.section.in-view{animation:gentle-enter .65s ease-out both}}@media(min-width:1600px){.hero{min-height:980px}.hero-content{padding-top:190px}}@media(max-width:1050px){.container,.navigation{width:calc(100% - 64px)}.hero-grid{gap:40px;grid-template-columns:1.35fr 1fr}.hero h1{font-size:clamp(54px,7.2vw,80px)}.hero-aside{padding:20px}.section-head{grid-template-columns:1fr 2fr}.section-note{grid-column:2}.experience-card{grid-template-columns:1fr}.experience-number{font-size:86px}.experience-card h3{font-size:20px}.manifesto-bottom{gap:60px}.bento article{padding:28px}}@media(max-width:700px){.container,.navigation{width:calc(100% - 40px)}.site-header{top:16px}.navigation{padding:6px 10px}.identity{font-size:11px;gap:7px}.identity img{width:30px;height:30px}.nav-links{gap:14px;font-size:11px}.hero{min-height:0}.hero-content{padding-top:124px}.hero-eyebrow{font-size:9px;max-width:290px;margin-bottom:32px}.hero-grid{grid-template-columns:1fr;gap:40px}.hero h1{font-size:clamp(43px,10.5vw,70px)}.hero-aside{justify-self:stretch;max-width:none;background:#0b2232bf;padding:24px}.hero-copy{max-width:360px}.gradient-field{background:radial-gradient(ellipse 65% 55% at 100% 30%,#d7e9f5 0%,#259ebc 28%,#2e53b7 49%,transparent 77%)}.hero-mark{width:320px;height:320px;top:100px;right:-120px}.hero-foot{margin-top:40px;font-size:8px;gap:20px}.hero-foot>span{max-width:160px}.hero-foot a span{padding-left:8px}.section{padding-top:72px;padding-bottom:72px}.section-head,.approach-head{grid-template-columns:1fr;gap:0;margin-bottom:36px}.section-head .eyebrow,.approach-head .eyebrow{padding:0;margin-bottom:20px}.section-head h2{font-size:44px}.section-note{grid-column:auto;margin-top:20px}.project-grid{grid-template-columns:1fr;gap:44px}.featured{grid-column:auto}.residential-image{aspect-ratio:1.45}.residential-image img{object-position:35% center}.commercial-image{padding:24px 32px 0;aspect-ratio:1.2}.ecosystem-image{aspect-ratio:1.45}.project-caption,.featured .project-caption{grid-template-columns:1fr;gap:16px;padding-top:20px}.project-caption h3{font-size:25px}.project-caption p:not(.small-label){font-size:16px}.approach-head h2{font-size:34px}.bento{grid-template-columns:1fr;gap:18px}.bento article{grid-column:auto;grid-row:auto;padding:28px}.craft-card{min-height:510px}.craft-screens{left:28px;right:28px;bottom:-64px;gap:16px}.experience-card{grid-template-columns:1fr 1fr}.experience-number{font-size:100px}.experience-card h3{font-size:22px}.connections-card{min-height:310px}.consistency-card,.delivery-card{min-height:300px}.manifesto>.eyebrow{margin-bottom:32px}.manifesto h2{font-size:clamp(32px,8.3vw,55px)}.manifesto-bottom{grid-template-columns:1fr;gap:32px;margin-top:36px}.personal-note{font-size:18px}.principles li{font-size:17px}.contact{padding-top:64px}.contact-main{grid-template-columns:1fr;gap:32px}.contact-main h2{font-size:42px}footer{grid-template-columns:1fr;gap:26px;margin-top:56px}footer>div{flex-wrap:wrap;gap:16px 24px}footer>p{font-size:9px}}@media(max-width:370px){.nav-links{gap:10px}.nav-links a{font-size:10px}.identity span{max-width:50px}.hero h1{font-size:40px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Layout directed by Megan's homepage sketch. */
.site-header{top:28px}.navigation{background:transparent;border:0;padding:0;gap:60px}.nav-links{background:#0b2232bb;border:1px solid #d7e9f54d;flex:1;max-width:820px;justify-content:flex-end;gap:36px;padding:3px 26px;border-radius:5px;min-height:50px}.identity img{width:42px;height:42px}.hero{min-height:780px}.hero-content{padding-top:154px;padding-bottom:28px}.hero-eyebrow{margin-bottom:28px;font-size:10px}.hero-skills{margin-bottom:35px}.hero-skills .small-label{color:#bcd3e3;margin-bottom:10px}.hero-skills ul{list-style:none;margin:0;padding:0;color:#e6f1f8;font-size:13px;line-height:1.8}.sketch-hero{display:grid;grid-template-columns:1fr 150px;align-items:end;gap:42px}.hero h1{font-size:clamp(44px,5.3vw,76px);max-width:1070px;line-height:1.12;letter-spacing:-.065em}.hero-copy{max-width:560px;margin:27px 0 25px;font-size:18px}.hero-project{align-self:center;padding-top:60px}.hero-project img{width:150px;height:95px;object-fit:cover;border:1px solid #d7e9f580;border-radius:3px;transition:transform .3s}.hero-project:hover img{transform:translateY(-4px)}.hero-project span{display:block;color:#d7e9f5;font-size:9px;margin-top:10px;text-align:right}.hero-foot{margin-top:52px}.hero-mark{width:660px;height:660px;right:-130px;top:75px;opacity:.035}.gradient-field{opacity:.85}.section-head{grid-template-columns:1fr 2fr;align-items:start;margin-bottom:32px}.section-head h2{font-size:38px}.section-head h2 br{display:none}.section-note{display:none}.project-grid{display:flex;flex-direction:column;gap:28px}.project{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:0;padding:16px;background:#eaf2f7;border:1px solid #d1e0eb;border-radius:6px}.project-image,.residential-image,.commercial-image,.ecosystem-image{height:390px;aspect-ratio:auto;border-radius:3px}.residential-image img{object-fit:cover}.commercial-image{padding:24px 70px 0;background:#cbdfea}.commercial-image img{width:100%;max-width:500px;margin:auto}.ecosystem-image img{width:100%;height:100%;object-fit:contain}.project-caption,.featured .project-caption{display:flex;flex-direction:column;padding:32px;gap:20px;align-items:flex-start;justify-content:center;border-radius:3px;background:#fbfdff;margin-left:16px}.project-caption h3{font-size:26px;line-height:1.25}.project-caption .text-link{margin-top:22px}.project-caption p:not(.small-label){font-size:16px}.link-arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}.personal-statement{padding-top:30px;padding-bottom:80px}.personal-statement h2{font-size:clamp(38px,5vw,68px);line-height:1.15}.personal-statement>p:last-child{font-size:clamp(20px,2.5vw,29px);line-height:1.5;max-width:940px;color:var(--muted);margin-top:32px}.approach{background:#fbfdff;padding-top:28px}.approach-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.approach-head .eyebrow{margin:0;padding:0}.approach-head h2{font-size:25px;max-width:550px}.approach-head h2 br{display:none}.bento{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:280px 300px;gap:22px}.bento article{padding:28px;border:1px solid #d1e0eb}.bento h3{font-size:27px}.bento .small-label{font-size:10px;margin-bottom:18px}.craft-card{grid-column:1/6;grid-row:1;min-height:0;background:#e9f3fa}.craft-card p:not(.small-label){font-size:15px;margin-top:18px;max-width:320px}.craft-screens{display:none}.experience-card{grid-column:6/9;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}.experience-number{font-size:90px}.experience-card h3{font-size:20px}.experience-card p{font-size:13px!important;color:#c0d6e5}.connections-card{grid-column:1/5;grid-row:2;background:#fff}.connections-card h3{font-size:23px}.connections-card p:not(.small-label){font-size:14px}.connection-words{margin:17px 0;font-size:12px}.connection-words span{font-size:12px;padding:9px 0}.consistency-card{grid-column:5/9;grid-row:2;min-height:0;background:#d7e9f5;color:var(--ink)}.consistency-card .small-label,.consistency-card p:not(.small-label){color:var(--muted)}.consistency-card h3{font-size:25px}.consistency-card p:not(.small-label){font-size:15px;margin-top:20px}.consistency-card img{filter:brightness(.2);opacity:.055;width:190px;bottom:-60px}.delivery-card{grid-column:9/13;grid-row:1/3;min-height:0;display:flex;flex-direction:column;background:var(--navy);color:#f5faff}.delivery-card .small-label{color:#c0d6e5}.delivery-card h3{font-size:34px;line-height:1.2;margin-top:70px}.delivery-card p:not(.small-label){color:#c0d6e5;font-size:17px;margin-top:30px}.delivery-line{margin-top:auto;display:flex;flex-direction:column;gap:18px;border-color:#d7e9f54d;color:#d7e9f5;padding-top:24px}.testimonial{padding-top:30px;padding-bottom:100px;border-top:1px solid var(--line)}.testimonial figure{margin:0}.testimonial .eyebrow{margin-top:24px;margin-bottom:40px}.testimonial blockquote{font:400 clamp(32px,4.3vw,58px)/1.3 var(--mono);letter-spacing:-.05em;margin:0;max-width:1100px}.testimonial em{font-style:normal;color:#365c77}.testimonial figcaption{margin-top:34px;display:flex;gap:12px 28px;align-items:center;font-size:13px;color:var(--muted);flex-wrap:wrap}.testimonial strong{font-weight:500;color:var(--ink)}.contact .button{gap:32px}.contact-main h2{font-size:clamp(38px,5vw,66px)}
@media(max-width:1050px){.hero h1{font-size:58px}.sketch-hero{grid-template-columns:1fr 100px;gap:20px}.hero-project img{height:72px;width:100px}.project{grid-template-columns:1.5fr 1fr}.project-caption,.featured .project-caption{padding:24px}.project-image,.residential-image,.commercial-image,.ecosystem-image{height:360px}.bento{grid-template-rows:300px 320px}.bento article{padding:22px}.bento h3{font-size:22px}.delivery-card h3{font-size:28px;margin-top:64px}.connection-words{grid-template-columns:1fr}.connection-words span{padding:4px 0}.experience-number{font-size:76px}}
@media(max-width:700px){.site-header{top:20px}.navigation{gap:20px}.nav-links{gap:16px;padding:3px 12px;min-height:44px;justify-content:center}.identity span{display:none}.identity img{width:36px;height:36px}.hero{min-height:0}.hero-content{padding-top:120px;padding-bottom:24px}.hero-skills{margin-bottom:30px}.hero-skills ul{font-size:12px}.hero-eyebrow{margin-bottom:24px;font-size:9px}.sketch-hero{grid-template-columns:1fr;gap:20px}.hero h1{font-size:clamp(34px,8.5vw,55px);line-height:1.13}.hero h1 br{display:none}.hero-copy{font-size:17px;margin-top:24px;max-width:350px}.hero-project{display:none}.hero-foot{margin-top:40px}.section-head{grid-template-columns:1fr;margin-bottom:24px}.section-head .eyebrow{margin-bottom:14px}.section-head h2{font-size:30px}.project-grid{gap:22px}.project{display:flex;flex-direction:column;padding:10px}.project-image,.residential-image,.commercial-image,.ecosystem-image{height:auto;aspect-ratio:1.5;min-height:0}.commercial-image{padding:20px 38px 0}.project-caption,.featured .project-caption{margin:10px 0 0;padding:24px;gap:16px}.project-caption h3{font-size:24px}.project-caption .text-link{margin-top:16px}.personal-statement{padding-top:0;padding-bottom:60px}.personal-statement h2{font-size:35px}.personal-statement h2 br{display:none}.personal-statement>p:last-child{font-size:21px;margin-top:24px}.approach{padding-top:10px}.approach-head{display:block}.approach-head .eyebrow{margin-bottom:15px}.approach-head h2{font-size:24px}.bento{grid-template-columns:1fr;grid-template-rows:none;gap:18px}.bento article{grid-column:auto;grid-row:auto;padding:28px;min-height:0}.bento h3{font-size:28px}.craft-card{order:1}.experience-card{order:2;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}.experience-card p{grid-column:1/-1}.experience-number{font-size:96px}.experience-card h3{font-size:20px}.connections-card{order:3}.connection-words{grid-template-columns:1fr 1fr;margin:24px 0}.connection-words span{padding:10px 0}.consistency-card{order:4}.delivery-card{order:5;min-height:340px!important}.delivery-card h3{font-size:32px;margin-top:18px}.delivery-card p:not(.small-label){margin:20px 0 35px}.delivery-line{flex-direction:row;gap:12px}.testimonial{padding-top:0;padding-bottom:66px}.testimonial .eyebrow{margin-bottom:30px}.testimonial blockquote{font-size:30px}.testimonial figcaption{display:grid;gap:6px;font-size:12px}.contact-main h2{font-size:40px}}
/* Full-image project stack and a quieter hero. */
.hero-content{padding-top:160px}.hero-skills{margin-bottom:44px}.sketch-hero .button{margin-top:32px}.hero:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#d7e9f550 .7px,transparent 1px);background-size:7px 7px;mask-image:linear-gradient(90deg,transparent 0%,#000 65%);opacity:.42}.hero-mark{display:none}.hero:after{background:linear-gradient(90deg,#0b2232e8 0%,#0b223280 47%,#0b223212 80%)}
.work{padding-bottom:80px}.project-grid.stacking-projects{display:block;position:relative;padding-bottom:20px}.stacking-projects .project{position:sticky;top:32px;display:block;padding:0;margin:0 0 min(42vh,360px);height:clamp(520px,43vw,650px);border:1px solid #aac4d650;border-radius:10px;overflow:hidden;isolation:isolate;background:var(--navy);box-shadow:0 -12px 44px #142a3b12}.stacking-projects .project:nth-child(1){z-index:1}.stacking-projects .project:nth-child(2){z-index:2;top:48px}.stacking-projects .project:nth-child(3){z-index:3;top:64px;margin-bottom:0}.stacking-projects .project-image{position:absolute;inset:0;width:100%;height:100%;padding:0;aspect-ratio:auto;border-radius:0;background:var(--navy);pointer-events:none}.stacking-projects .project-image img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:left center;transform:none;box-shadow:none;margin:0}.stacking-projects .project-residential .project-image img{object-position:20% center}.stacking-projects .project-ecosystem .project-image img{object-position:center}.stacking-projects .project-caption{position:absolute;top:0;bottom:0;right:0;width:47%;padding:clamp(30px,3.4vw,48px);margin:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;border-radius:0;background:linear-gradient(135deg,#0b2232dd,#142a3be8);color:#f5faff;border-left:1px solid #d7e9f54d;backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);box-shadow:-12px 0 32px #0b223224}.stacking-projects .project-caption h3{font:400 clamp(26px,2.6vw,36px)/1.2 var(--mono);margin:0;letter-spacing:-.045em}.stacking-projects .project-caption .small-label{color:#c0d6e5;font-size:10px}.stacking-projects .project-caption p:not(.small-label){font-size:16px;color:#d7e9f5}.stacking-projects .project-caption .project-headline{font-size:20px!important;color:#fff!important;line-height:1.35;margin-top:4px}.project-facts{list-style:none;padding:0;margin:2px 0 0;width:100%;font:11px/1.5 var(--mono);color:#d7e9f5}.project-facts li{padding:9px 0;border-top:1px solid #d7e9f530}.project-facts li:last-child{border-bottom:1px solid #d7e9f530}.stacking-projects .text-link{margin-top:8px;border-color:#d7e9f560;color:#fff}.stacking-projects a:focus-visible{outline-color:var(--lime)}.approach{padding-top:32px;padding-bottom:100px}.bento{grid-template-rows:300px 340px}.craft-card{background:linear-gradient(135deg,#edf7fd,#d7e9f5);display:flex;flex-direction:column;justify-content:center}.craft-card h3{font-size:32px}.connections-card{background:#f2f7fa}.consistency-card{background:linear-gradient(145deg,#d7e9f5,#c3dfef)}.scope-number{font:400 68px/1 var(--mono);letter-spacing:-.07em;display:block;margin-bottom:16px}.consistency-card h3{font-size:23px}.consistency-card p:not(.small-label){font-size:14px;margin-top:16px}.consistency-card img{display:none}.experience-card{background:var(--navy)}.delivery-card{background:radial-gradient(ellipse at 100% 100%,#2e53b760,transparent 70%),var(--navy)}.personal-statement{padding-top:0;padding-bottom:90px}
@media(max-width:1050px){.stacking-projects .project-caption{width:49%;padding:30px;gap:16px}.stacking-projects .project{height:560px}.bento{grid-template-rows:320px 370px}.scope-number{font-size:60px}.craft-card h3{font-size:27px}}
@media(max-width:700px){.hero-content{padding-top:128px}.hero-skills{margin-bottom:34px}.sketch-hero .button{margin-top:26px}.hero-foot{margin-top:52px}.hero:before{background-size:6px 6px;opacity:.3}.work{padding-bottom:64px}.stacking-projects .project{top:16px;height:650px;margin-bottom:100px;border-radius:7px}.stacking-projects .project:nth-child(2){top:24px}.stacking-projects .project:nth-child(3){top:32px}.stacking-projects .project-image{height:100%;aspect-ratio:auto}.stacking-projects .project-image img{object-fit:cover;object-position:left top}.stacking-projects .project-caption{width:100%;top:auto;bottom:0;padding:26px;gap:14px;height:425px;border-left:0;border-top:1px solid #d7e9f54d;background:linear-gradient(135deg,#0b2232e6,#142a3bee);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.stacking-projects .project-caption h3{font-size:25px}.stacking-projects .project-caption p:not(.small-label){font-size:15px}.stacking-projects .project-caption .project-headline{font-size:18px!important}.project-facts{font-size:10px}.project-facts li{padding:7px 0}.stacking-projects .project-ecosystem .project-image img{object-fit:contain;object-position:top;background:#142e3d}.approach{padding-top:12px;padding-bottom:64px}.bento{grid-template-rows:none}.craft-card h3{font-size:28px}.scope-number{font-size:75px}.consistency-card h3{font-size:26px}.personal-statement{padding-bottom:64px}}
@media(prefers-reduced-motion:reduce){.stacking-projects .project{position:relative;top:0!important;margin-bottom:28px}.stacking-projects .project:last-child{margin-bottom:0}}
@media(max-height:650px) and (min-width:701px){.stacking-projects .project{position:relative;top:0!important;margin-bottom:32px}}
@media(min-width:701px){.stacking-projects .project-caption{background:linear-gradient(135deg,#0b2232c4,#142a3bd4)}}.stacking-projects .project:focus-within{z-index:5}
/* Match the original portfolio's compact, unified glass navigation. */
.site-header{position:fixed;top:16px;left:0;z-index:40;padding:0 24px;pointer-events:none}.site-header>*{pointer-events:auto}.navigation{width:min(720px,100%);height:64px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#0d2232f0;border:1px solid #ffffff24;border-radius:999px;box-shadow:0 8px 24px #081b2d20;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.navigation .identity{min-height:44px;font-size:13px;gap:8px;flex-shrink:0}.navigation .identity img{width:28px;height:28px}.navigation .identity span{display:block}.navigation .nav-links{display:flex;gap:4px;flex:0 1 auto;max-width:none;padding:0;min-height:0;border:0;background:none;border-radius:0}.navigation .nav-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;font-size:13px;border:1px solid transparent;border-radius:999px;white-space:nowrap}.navigation .nav-links a:hover{background:#ffffff12;color:#f5faff}.navigation .nav-links .resume-link{background:#ffffff08;border-color:#ffffff30}.menu-toggle{display:none;width:44px;height:44px;flex-shrink:0;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:12px;border:1px solid #ffffff24;border-radius:999px;background:transparent;color:#f5faff;cursor:pointer}.menu-toggle span{width:18px;height:1px;background:currentColor;transition:transform .18s ease}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.menu-toggle:focus-visible{outline:2px solid var(--lime);outline-offset:4px}#mobile-menu{position:absolute;top:calc(100% + 8px);left:24px;right:24px;width:min(720px,calc(100% - 48px));margin:auto;padding:8px;border:1px solid #ffffff24;border-radius:12px;background:#0d2232f5;box-shadow:0 12px 28px #081b2d30;color:#f5faff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}#mobile-menu[hidden]{display:none}#mobile-menu:not([hidden]){display:grid}#mobile-menu a{display:flex;align-items:center;min-height:48px;padding:12px 16px;font-size:14px;border-radius:6px}#mobile-menu a:hover{background:#ffffff12}.site-header a:focus-visible{outline-color:var(--lime)}
.hero{min-height:850px}.hero-content{padding-top:190px;padding-bottom:42px}.hero-skills{margin-bottom:64px}.hero-skills ul{font-size:14px;line-height:2}.sketch-hero .button{margin-top:42px}.hero-foot{margin-top:90px}.gradient-field{animation:aura-drift 18s ease-in-out infinite alternate;will-change:transform;background:radial-gradient(ellipse 28% 65% at 78% 20%,#d7e9f5 0%,#9cd5e9 18%,#259ebc 34%,#2e53b7 57%,transparent 80%),radial-gradient(ellipse 44% 60% at 95% 80%,#2e53b7 0%,transparent 70%);opacity:.95}.aura-light{position:absolute;inset:-20%;pointer-events:none;z-index:-2;background:radial-gradient(ellipse 22% 45% at 70% 38%,#d7e9f585 0%,#9cd5e94d 25%,transparent 70%);animation:aura-breathe 13s ease-in-out infinite alternate;mix-blend-mode:screen;will-change:transform,opacity}.hero:after{background:linear-gradient(90deg,#0b2232e8 0%,#0b223275 45%,#0b22320d 80%)}@keyframes aura-drift{0%{transform:rotate(-14deg) translate(4%,-4%) scale(1,1.02)}50%{transform:rotate(-3deg) translate(-5%,4%) scale(1.14,1.06)}100%{transform:rotate(-18deg) translate(-8%,8%) scale(1.04,1.18)}}@keyframes aura-breathe{from{transform:translate(5%,-6%) rotate(9deg) scale(.9);opacity:.5}to{transform:translate(-9%,10%) rotate(-10deg) scale(1.24);opacity:.9}}
@media(max-width:760px){.site-header{top:12px;padding:0 12px}.navigation{height:60px;padding:0 16px;gap:16px}.navigation .nav-links{display:none}.menu-toggle{display:flex}.navigation .identity{font-size:13px}.navigation .identity span{display:block;max-width:none}#mobile-menu{left:12px;right:12px;width:calc(100% - 24px)}.hero{min-height:0}.hero-content{padding-top:154px;padding-bottom:30px}.hero-skills{margin-bottom:56px}.hero-skills ul{font-size:12px;line-height:2}.sketch-hero .button{margin-top:34px}.hero-foot{margin-top:74px}.gradient-field{background:radial-gradient(ellipse 62% 65% at 100% 30%,#d7e9f5 0%,#9cd5e9 15%,#259ebc 32%,#2e53b7 54%,transparent 79%)}.aura-light{background:radial-gradient(ellipse 35% 45% at 90% 28%,#d7e9f570,transparent 70%)}}
@media(prefers-reduced-motion:reduce){.gradient-field,.aura-light{animation:none;will-change:auto}}
@media(min-width:761px){.stacking-projects .project{top:104px}.stacking-projects .project:nth-child(2){top:120px}.stacking-projects .project:nth-child(3){top:136px}}@media(max-width:760px){.stacking-projects .project{top:88px}.stacking-projects .project:nth-child(2){top:96px}.stacking-projects .project:nth-child(3){top:104px}}@media(prefers-reduced-motion:reduce){.stacking-projects .project{top:0!important}}@media(max-height:650px) and (min-width:701px){.stacking-projects .project{top:0!important}}
/* Consilio-inspired split action: icy blue surface, navy arrow tile. */
.reference-button{padding:4px 4px 4px 26px;min-height:50px;gap:24px;background:var(--ice);color:var(--navy);border:1px solid transparent;border-radius:1px;box-shadow:none;transform:none;transition:background .25s ease}.reference-button:hover{background:#edf7fd;transform:none}.button-text{position:relative;display:block;overflow:hidden;height:22px;font:500 14px/22px var(--sans)}.button-text>span{display:block;font:inherit;transition:transform .35s cubic-bezier(.2,.7,.3,1)}.button-text>span+span{position:absolute;inset:100% 0 auto}.button-arrow{position:relative;display:block;overflow:hidden;width:40px;height:40px;background:var(--navy);color:var(--ice);flex-shrink:0}.button-arrow svg{position:absolute;width:20px;height:20px;top:10px;left:10px;transition:transform .35s cubic-bezier(.2,.7,.3,1)}.button-arrow svg+svg{transform:translate(-32px,32px)}.reference-button:is(:hover,:focus-visible) .button-text>span{transform:translateY(-100%)}.reference-button:is(:hover,:focus-visible) .button-arrow svg:first-child{transform:translate(32px,-32px)}.reference-button:is(:hover,:focus-visible) .button-arrow svg+svg{transform:translate(0,0)}
.about-reference{background:#edf4f8;padding:100px 0 84px}.about-reference-intro{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-bottom:58px}.about-reference-intro>.eyebrow{padding-top:12px}.about-reference-copy h2{font:400 clamp(28px,3.2vw,43px)/1.23 var(--mono);letter-spacing:-.055em;max-width:840px}.about-word{display:inline-block;color:var(--ink);transition:color .2s ease,filter .2s ease}.about-reference.is-enhanced .about-word{color:var(--muted);filter:blur(.65px)}.about-reference.is-enhanced .about-word.is-read{color:var(--ink);filter:none}.about-reference-actions{display:flex;flex-wrap:wrap;align-items:center;gap:38px;margin-top:34px}.button-light{background:#fbfdff}.button-light:hover{background:var(--ice)}.about-experience{display:flex;flex-direction:column;font-size:13px;color:var(--muted);line-height:1.4}.about-experience strong{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:3px}.about-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.about-principle{position:relative;isolation:isolate;overflow:hidden;min-height:350px;background:#fbfdff;padding:30px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid #99afbe;transition:background .35s,color .35s;outline-offset:5px}.principle-icon{width:48px;height:48px;display:grid;place-items:center;background:#e5f0f6;color:#365c77;position:relative;z-index:1}.principle-icon svg{width:24px;height:24px}.about-principle h3{font:400 23px/1.25 var(--sans);letter-spacing:-.04em;margin-bottom:14px;position:relative;z-index:1}.about-principle p{font-size:15px;color:var(--muted);line-height:1.55;position:relative;z-index:1}.about-principle:before{content:'';position:absolute;inset:0;z-index:-1;background:repeating-conic-gradient(from -90deg at 5% 0%,transparent 0deg 7deg,#d7e9f514 7deg 7.4deg,transparent 7.4deg 15deg);opacity:0;transform:scale(.92);transform-origin:top left;transition:opacity .4s,transform .6s}.about-principle:is(.is-featured,:hover,:focus-visible){background:var(--navy);color:#f5faff;border-color:var(--navy)}.about-principle:is(.is-featured,:hover,:focus-visible) p{color:#c0d6e5}.about-principle:is(.is-featured,:hover,:focus-visible) .principle-icon{color:var(--ice);background:#d7e9f512}.about-principle:is(.is-featured,:hover,:focus-visible):before{opacity:1;transform:scale(1.08)}.about-principle:focus-visible{outline:2px solid #2758dc}.about-principles:has(.about-principle:not(.is-featured):is(:hover,:focus-visible)) .is-featured{background:#fbfdff;color:var(--ink);border-color:#99afbe}.about-principles:has(.about-principle:not(.is-featured):is(:hover,:focus-visible)) .is-featured p{color:var(--muted)}.about-principles:has(.about-principle:not(.is-featured):is(:hover,:focus-visible)) .is-featured .principle-icon{background:#e5f0f6;color:#365c77}.about-principles:has(.about-principle:not(.is-featured):is(:hover,:focus-visible)) .is-featured:before{opacity:0}
@media(max-width:1050px){.about-principle{padding:26px;min-height:330px}.about-principle h3{font-size:21px}.about-reference-intro{grid-template-columns:.65fr 2fr}}
@media(max-width:700px){.about-reference{padding:64px 0}.about-reference-intro{grid-template-columns:1fr;gap:20px;margin-bottom:36px}.about-reference-intro>.eyebrow{margin:0;padding:0}.about-reference-copy h2{font-size:28px;line-height:1.3}.about-reference-actions{gap:24px;margin-top:28px}.about-principles{grid-template-columns:1fr;gap:14px}.about-principle{min-height:255px;padding:26px;gap:44px}.about-principle h3{font-size:23px}.about-principle p{max-width:400px}.reference-button{padding-left:22px;gap:22px}.about-experience{font-size:12px}.about-experience strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.about-reference.is-enhanced .about-word{color:var(--ink);filter:none}.reference-button:is(:hover,:focus-visible) .button-text>span{transform:none}.reference-button:is(:hover,:focus-visible) .button-arrow svg:first-child{transform:none}.button-text>span+span,.button-arrow svg+svg{display:none}.about-principle:before{transform:none!important}}
/* Selected-work proportions inspired by Overtake, in the existing brand. */
.about-reference{padding-bottom:76px}.about-reference-intro{margin-bottom:0}.stacking-projects .project{border-radius:22px;height:610px;margin-bottom:180px;border:0;box-shadow:0 -8px 32px #142a3b18}.stacking-projects .project-caption{inset:12px 12px 12px auto;bottom:12px;width:36%;padding:32px;border:1px solid #d7e9f533;border-radius:18px;background:linear-gradient(135deg,#0b2232d9,#142a3bf2);justify-content:flex-start;gap:20px}.stacking-projects .project-caption h3{font-size:29px}.stacking-projects .project-caption .project-headline{font-size:18px!important}.stacking-projects .project-caption .text-link{margin-top:auto;min-height:44px;width:100%;justify-content:space-between;border-bottom:0;border-top:1px solid #d7e9f533;padding:18px 0 0}.stacking-projects .project-caption p:not(.small-label){font-size:15px;line-height:1.5}.stacking-projects .project-image img{object-position:left center}.project-evidence{display:flex;align-items:center;gap:18px;border-top:1px solid #d7e9f533;padding-top:20px;width:100%}.project-evidence strong{font:400 55px/1 var(--mono);letter-spacing:-.07em;color:var(--ice)}.project-evidence span{font-size:12px;color:#d7e9f5}.project-facts{margin-top:auto}.project-evidence+.project-facts{margin-top:0}.stacking-projects .project:nth-child(3){margin-bottom:0}.stacking-projects .project:focus-within{z-index:5}
/* Detailed graphics show actual scope and the way the work connects. */
.bento{grid-template-rows:340px 420px;gap:20px}.bento article{border-radius:20px;padding:30px}.craft-card{position:relative;display:block;overflow:hidden}.craft-card h3{font-size:29px}.craft-card>p:not(.small-label){max-width:340px;font-size:14px}.craft-screens{display:grid;position:absolute;left:30px;right:20px;bottom:-95px;transform:none;gap:18px;grid-template-columns:1.4fr .75fr;align-items:start}.craft-screens>div{height:220px;border:5px solid #fbfdff;box-shadow:0 8px 22px #142a3b25;border-radius:8px;overflow:hidden;background:white}.craft-screens>div+div{height:190px;margin-top:24px;border-width:5px;border-radius:12px}.craft-screens img{width:100%;height:auto}.experience-card{gap:14px}.experience-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:12px 5px;margin-top:18px;font:9px var(--mono);color:#c0d6e5}.experience-track i{width:8px;height:8px;border-radius:50%;background:var(--ice);position:relative;z-index:1}.experience-track:after{content:'';position:absolute;left:0;right:18%;bottom:3px;height:1px;background:#d7e9f560}.connections-card{display:flex;flex-direction:column}.connections-card h3{font-size:26px}.connection-map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;padding:22px 0;margin-top:8px}.connection-map span{display:grid;place-items:center;background:#e1edf5;border:1px solid #aec8da;border-radius:5px;min-height:42px;font:10px var(--mono);position:relative;z-index:1}.connection-map strong{grid-column:1/-1;justify-self:center;padding:12px 18px;background:var(--navy);color:var(--ice);font:500 11px var(--sans);border-radius:5px;z-index:1}.connection-map:before{content:'';position:absolute;left:24%;right:24%;top:44px;bottom:44px;border:1px solid #8faaba;border-radius:5px}.connection-map:after{content:'';position:absolute;left:50%;top:65px;bottom:65px;width:1px;background:#8faaba}.connections-card>p:last-child{margin-top:auto;font-size:14px}.consistency-card .scope-number{font-size:72px}.consistency-card h3{font-size:25px}.brand-map{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:22px}.brand-map span{display:grid;place-items:center;min-height:34px;padding:5px;background:#f5faff80;border:1px solid #9ebdd0;border-radius:4px;font:10px var(--sans);color:var(--ink)}.delivery-card h3{margin-top:28px;font-size:34px}.delivery-card p:not(.small-label){margin-top:24px;font-size:16px}.delivery-map{list-style:none;padding:0;margin:56px 0 0;display:grid;gap:32px;position:relative}.delivery-map:before{content:'';position:absolute;left:19px;top:22px;bottom:22px;border-left:1px solid #d7e9f54d}.delivery-map li{display:flex;gap:18px;align-items:center;position:relative}.delivery-map li>span{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border:1px solid #d7e9f560;border-radius:10px;background:#122d42;color:var(--ice);font:12px var(--mono)}.delivery-map strong{font:400 16px var(--sans);display:block}.delivery-map small{display:block;font:11px var(--sans);color:#b5cedf;margin-top:6px}
@media(max-width:1050px) and (min-width:701px){.stacking-projects .project-caption{width:43%;padding:26px;gap:18px}.stacking-projects .project-caption h3{font-size:27px}.bento{grid-template-rows:380px 460px}.bento article{padding:24px}.craft-card h3{font-size:26px}.brand-map{grid-template-columns:1fr 1fr}.delivery-card h3{font-size:30px}.delivery-map strong{font-size:14px}.connection-map span{font-size:9px}.experience-track{font-size:8px}}
@media(max-width:700px){.about-reference{padding-bottom:64px}.stacking-projects .project{position:relative;top:0!important;height:auto;min-height:0;margin-bottom:26px;border-radius:18px;display:block;padding:0;background:var(--navy)}.stacking-projects .project-image{position:relative;inset:auto;width:100%;height:270px;min-height:0;aspect-ratio:auto}.stacking-projects .project-image img{width:100%;height:100%;object-fit:cover;object-position:left top}.stacking-projects .project-ecosystem .project-image img{object-fit:contain;object-position:center}.stacking-projects .project-caption{position:relative;inset:auto;top:auto;bottom:auto;width:auto;height:auto;margin:0 10px 10px;padding:26px;border-radius:13px;background:#102a3be8;gap:18px;border:1px solid #d7e9f530;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.stacking-projects .project-caption h3{font-size:27px}.stacking-projects .project-caption .text-link{margin-top:8px}.stacking-projects .project-caption .project-facts{margin-top:6px;font-size:11px}.project-evidence{padding-top:16px}.project-evidence strong{font-size:54px}.bento{grid-template-rows:none;gap:18px}.bento article{padding:28px;border-radius:18px}.craft-card{min-height:420px!important}.craft-card h3{font-size:29px}.craft-screens{left:28px;right:28px;bottom:-80px}.experience-card{grid-template-columns:1fr 1fr}.experience-track{grid-column:1/-1;max-width:300px;margin-top:8px;font-size:10px}.connections-card{min-height:380px!important}.connection-map{margin-top:22px}.connection-map span{font-size:11px}.consistency-card{min-height:390px!important}.brand-map{grid-template-columns:repeat(3,1fr);margin-top:26px}.delivery-card{min-height:500px!important}.delivery-map{margin-top:36px;gap:28px}.delivery-card h3{font-size:32px;margin-top:18px}.delivery-map strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){.stacking-projects .project{position:relative;top:0!important;margin-bottom:28px}}
:root{--columbia:#b9d9eb}
/* Compact web actions in Columbia blue. */
.reference-button{min-height:42px;height:42px;padding:3px 3px 3px 18px;gap:18px;background:var(--columbia);border-radius:3px}.reference-button:hover{background:#cce4f1}.button-text{height:20px;font-size:13px;line-height:20px}.button-arrow{width:34px;height:34px;border-radius:2px;color:var(--columbia)}.button-arrow svg{width:17px;height:17px;left:8.5px;top:8.5px}.button-light{background:var(--columbia)}.hero-skills ul{font-size:13px;line-height:1.9}.hero-skills li{white-space:nowrap}
/* Single lifestyle image fills every project container. */
.stacking-projects .project-image,.stacking-projects .project-ecosystem .project-image{position:absolute;inset:0;height:100%;width:100%;background:var(--navy)}.stacking-projects .project-image img,.stacking-projects .project-ecosystem .project-image img{width:100%;height:100%;object-fit:cover;object-position:center}.stacking-projects .project-residential .project-image img{object-position:center}.stacking-projects .project-caption{background:linear-gradient(135deg,#0b2232d4,#142a3be8)}
@media(max-width:700px){.reference-button{height:44px;min-height:44px;padding-left:18px;gap:18px}.button-arrow{width:36px;height:36px}.button-arrow svg{left:9.5px;top:9.5px}.hero-skills ul{font-size:12px;line-height:1.9}.stacking-projects .project{position:relative;height:auto;min-height:660px;padding-top:235px;isolation:isolate}.stacking-projects .project-image,.stacking-projects .project-ecosystem .project-image{position:absolute;inset:0;height:100%;width:100%}.stacking-projects .project-image img,.stacking-projects .project-ecosystem .project-image img{object-fit:cover;object-position:40% center}.stacking-projects .project-caption{position:relative;width:auto;margin:0 10px 10px;padding:26px;background:linear-gradient(135deg,#0b2232dc,#142a3bea)}.stacking-projects .project-ecosystem .project-image img{object-position:42% center}}
@media(prefers-reduced-motion:reduce){}
/* Restore the prior moving aura; make nested button typography explicit. */
.hero{background:var(--navy)}.hero .aura-light{display:block}.hero .gradient-field{filter:none}.hero:before{opacity:.3}.hero:after{background:linear-gradient(90deg,#0b2232e8 0%,#0b223275 45%,#0b22320d 80%)}
.reference-button .button-text,.reference-button .button-text>span{font:500 12px/18px var(--sans);letter-spacing:0}.reference-button .button-text{height:18px}.reference-button{gap:14px;padding-left:16px}.contact .button{font-size:12px}
/* Center the glass detail/stat panel over each full-container image. */
.stacking-projects .project{display:grid;place-items:center;padding:32px}.stacking-projects .project-caption{position:relative;inset:auto;top:auto;right:auto;bottom:auto;left:auto;margin:0;width:min(520px,100%);height:auto;padding:32px 38px;align-items:center;justify-content:center;text-align:center;gap:18px;background:linear-gradient(135deg,#0b2232d9,#142a3be8);border:1px solid #d7e9f54d;border-radius:16px;z-index:1}.stacking-projects .project-caption h3{font-size:29px}.stacking-projects .project-caption p{max-width:420px}.stacking-projects .project-caption .project-facts{margin:4px 0 0;max-width:380px}.stacking-projects .project-caption .text-link{justify-content:center;gap:20px;margin-top:8px;width:auto;min-width:200px}.project-evidence{justify-content:center}.stacking-projects .project-image{z-index:0}
@media(max-width:700px){.stacking-projects .project{min-height:640px;height:auto;padding:30px 16px;display:grid;place-items:center}.stacking-projects .project-caption{position:relative;inset:auto;margin:0;width:100%;height:auto;padding:28px 24px;text-align:center;gap:18px}.stacking-projects .project-caption h3{font-size:26px}.stacking-projects .project-caption .project-facts{font-size:11px}.reference-button .button-text,.reference-button .button-text>span{font-size:12px;line-height:18px}.hero .gradient-field{inset:-20%;opacity:.95}.hero .aura-light{display:block}.stacking-projects .project-image img{object-position:center}}
/* Concise project storytelling: context, action, scope, next step. */
.project-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;margin-bottom:4px}.project-tags span{display:inline-block;padding:5px 9px;border:1px solid #d7e9f526;background:#d7e9f50e;color:#d7e9f5;border-radius:4px;font:11px/1.4 var(--sans)}.stacking-projects .project-caption{gap:22px}.stacking-projects .project-caption .project-description{font-size:17px;line-height:1.5;margin:0;max-width:420px}.stacking-projects .project-caption .project-evidence{margin:14px 0 0;padding-top:24px;width:100%;max-width:420px;display:flex;justify-content:center;align-items:center;gap:22px}.project-evidence strong{font:400 clamp(38px,4vw,52px)/1.1 var(--mono);color:var(--columbia);letter-spacing:-.06em}.project-evidence span{max-width:180px;font-size:14px;line-height:1.4;color:#d7e9f5}.stacking-projects .project-caption .text-link{margin-top:10px;border-top:0;padding-top:0;min-height:44px;font-size:13px}
@media(max-width:700px){.stacking-projects .project-caption{gap:22px}.project-tags span{font-size:10px;padding:5px 8px}.stacking-projects .project-caption .project-description{font-size:16px;line-height:1.5}.stacking-projects .project-caption .project-evidence{gap:20px;padding-top:22px;margin-top:12px}.project-evidence strong{font-size:44px}.project-evidence span{font-size:13px}.stacking-projects .project-caption .text-link{font-size:13px}}
/* Technical skill labels and a continuous, feathered aura boundary. */
.hero-skills ul{font:400 12px/2 var(--mono);letter-spacing:.12em;text-transform:uppercase}.hero .gradient-field{inset:-40%;background:radial-gradient(ellipse 29% 52% at 75% 32%,#d7e9f5 0%,#9cd5e9 14%,#259ebc 31%,#2e53b780 50%,#2e53b724 64%,transparent 78%),radial-gradient(ellipse 40% 60% at 94% 74%,#2e53b770 0%,#2e53b729 35%,transparent 73%);filter:blur(26px);mask-image:radial-gradient(ellipse at 65% 50%,#000 32%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse at 65% 50%,#000 32%,transparent 85%);animation:aura-edge-drift 32s ease-in-out infinite alternate;opacity:.95}.hero .aura-light{inset:-40%;filter:blur(36px);mask-image:radial-gradient(ellipse at 65% 50%,#000 20%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at 65% 50%,#000 20%,transparent 80%);animation-duration:38s}.contact .reference-button{gap:14px;font-size:12px}.contact .reference-button .button-text,.contact .reference-button .button-text>span{font:500 12px/18px var(--sans)}
@keyframes aura-edge-drift{from{transform:translate(3%,-3%) rotate(-7deg) scale(1.03)}to{transform:translate(-4%,4%) rotate(3deg) scale(1.1,1.08)}}
@media(max-width:700px){.hero-skills ul{font-size:10px;letter-spacing:.1em;line-height:2.1}.hero .gradient-field{inset:-35% -65%;background:radial-gradient(ellipse 37% 55% at 77% 36%,#d7e9f5 0%,#9cd5e9 15%,#259ebc 30%,#2e53b778 50%,#2e53b725 65%,transparent 80%);filter:blur(22px);opacity:.9}.hero .aura-light{inset:-35% -50%;filter:blur(30px)}}
@media(prefers-reduced-motion:reduce){.hero .gradient-field,.hero .aura-light{animation:none;will-change:auto}}
/* An icy footer finish and a clearer distinction between read/unread words. */
.contact{background:radial-gradient(ellipse at 85% 15%,#6b99b044 0%,transparent 65%),linear-gradient(135deg,#17374d 0%,#21465e 65%,#2d526c 100%)}.contact:before{background:radial-gradient(ellipse,#b9d9eb24,transparent 70%)}.contact .eyebrow{color:var(--columbia)}.contact a:focus-visible{outline-color:var(--columbia)}.contact .button{background:var(--columbia);color:var(--navy)}.contact .button:hover{background:#cce4f1}.contact footer{border-color:#b9d9eb40}.contact footer>p{color:#c4dfef}
.about-reference.is-enhanced .about-word{filter:blur(4px);opacity:.24;color:var(--muted);transition:filter .3s ease,opacity .3s ease,color .3s ease}.about-reference.is-enhanced .about-word.is-read{filter:blur(0);opacity:1;color:var(--ink)}.stacking-projects .project-caption h3{margin-top:0}
@media(prefers-reduced-motion:reduce){.about-reference.is-enhanced .about-word{filter:none;opacity:1;color:var(--ink)}}

/* Selected work: one image, one concise caption, natural page flow. */
.work .section-head{grid-template-columns:1fr 2fr;margin-bottom:48px}
.selected-projects{display:grid;grid-template-columns:1fr;gap:72px}
.selected-projects .project{display:block;position:relative;top:auto;height:auto;min-height:0;padding:0;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--ink)}
.selected-projects .project-image{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:2/1;border-radius:12px;overflow:hidden;background:var(--ice)}
.selected-projects .project-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.selected-projects .project-caption{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 32px;width:100%;height:auto;margin:0;padding:24px 0 0;background:none;border:0;border-radius:0;backdrop-filter:none;text-align:left}
.selected-projects .project-caption h3{font-size:clamp(24px,2.5vw,32px);margin:0;letter-spacing:-.045em;line-height:1.2}
.selected-projects .project-caption .project-description{grid-column:1;font-size:16px;line-height:1.5;color:var(--muted);max-width:600px}
.selected-projects .project-caption .text-link{grid-column:2;grid-row:1/3;align-self:center;gap:16px;margin:0;padding:10px 0;min-height:44px;font-size:13px;border-top:0;border-bottom:1px solid var(--line);color:var(--ink)}
.selected-projects .link-arrow{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.hero{--hero-lift:0px;--hero-opacity:1}
.hero .hero-content{transform:translate3d(0,var(--hero-lift),0);opacity:var(--hero-opacity)}
.hero-scroll-shade{position:absolute;inset:0;pointer-events:none;background:var(--navy);opacity:var(--hero-shade,0);z-index:0}
@media(max-width:700px){.work .section-head{grid-template-columns:1fr;gap:8px;margin-bottom:32px}.work .section-head .eyebrow{margin:0;padding:0}.selected-projects{gap:44px}.selected-projects .project-image{aspect-ratio:4/3;border-radius:8px}.selected-projects .project-caption{grid-template-columns:1fr;gap:10px;padding-top:20px}.selected-projects .project-caption h3{font-size:24px}.selected-projects .project-caption .project-description{font-size:15px}.selected-projects .project-caption .text-link{grid-column:1;grid-row:auto;margin-top:2px;justify-self:start}}
@media(prefers-reduced-motion:reduce){.hero .hero-content{transform:none;opacity:1}.hero-scroll-shade{display:none}}

/* A brighter blue finish, grounded in dark navy. */
.contact{background:radial-gradient(ellipse 85% 120% at 100% 0%,#287ef0 0%,#1858c2 30%,transparent 76%),linear-gradient(120deg,#071d30 0%,#0b2232 48%,#123d81 100%)}
.contact:before{background:radial-gradient(ellipse,#3b8aff35,transparent 70%)}
/* An editorial pull quote with a quiet blue field and distinct attribution. */
.testimonial{border-top:0;padding-top:24px;padding-bottom:100px}
.testimonial .eyebrow{margin-top:0;margin-bottom:28px}
.testimonial figure{position:relative;isolation:isolate;padding:52px 56px 42px;border:1px solid #bfd6e6;border-radius:14px;background:radial-gradient(ellipse at 100% 0%,#b9d9eb80,transparent 65%),#edf4f8;overflow:hidden}
.testimonial .quote-mark{position:absolute;z-index:-1;right:32px;top:0;font:240px/1 Georgia,serif;color:#a4c6de55;pointer-events:none}
.testimonial blockquote{position:relative;max-width:1030px;font:400 clamp(28px,3.8vw,50px)/1.3 var(--mono);letter-spacing:-.05em}
.testimonial em{color:#1b5693;text-decoration:underline;text-decoration-color:#8ebcdd;text-decoration-thickness:2px;text-underline-offset:7px}
.testimonial figcaption{margin-top:36px;padding-top:24px;border-top:1px solid #b5cddd;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
.testimonial .reviewer-monogram{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--columbia);font:12px var(--mono)}
.testimonial .reviewer{display:grid;gap:4px}
.testimonial .reviewer strong{font-size:14px;font-weight:500}
.testimonial .review-source{margin-left:auto;font:10px/1.6 var(--mono);max-width:220px;text-align:right}
@media(max-width:700px){.testimonial{padding-top:8px;padding-bottom:64px}.testimonial figure{padding:30px 24px 26px;border-radius:10px}.testimonial blockquote{font-size:27px}.testimonial .quote-mark{font-size:160px;right:10px;top:4px}.testimonial figcaption{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;padding-top:20px}.testimonial .review-source{flex-basis:100%;margin-left:0;text-align:left;max-width:none;font-size:9px}.contact{background:radial-gradient(ellipse 140% 80% at 100% 0%,#287ef0 0%,#1858c2 30%,transparent 78%),linear-gradient(160deg,#0b2232,#071d30)}}

/* A single project headline and restrained skill tags. */
.selected-projects{gap:88px}
.selected-projects .project-caption{grid-template-columns:minmax(0,1fr) auto;gap:14px 40px;padding-top:26px;align-items:start}
.selected-projects .project-brand{grid-column:1;color:var(--muted);font:11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.selected-projects .project-caption h3{grid-column:1;max-width:850px;font-size:clamp(26px,3vw,40px);line-height:1.2}
.project-skills{grid-column:1;display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:4px 0 0;padding:0}
.project-skills li{border:1px solid #bfd3e1;border-radius:100px;padding:6px 12px;font:11px/1.5 var(--sans);background:#edf4f8;color:#36546b}
.selected-projects .project-caption .text-link{grid-row:1/4;grid-column:2;align-self:center}
.selected-projects .project-image{aspect-ratio:1.85;isolation:isolate}
.selected-projects .project-image img{transform:translate3d(0,var(--image-shift,0px),0) scale(1.1);transition:none;will-change:transform}
.selected-projects .project-image:hover img{transform:translate3d(0,var(--image-shift,0px),0) scale(1.1)}
.section.in-view{animation:none}
/* JS adds motion only after the observer is ready. */
.motion-ready [data-reveal]{opacity:0;transform:translate3d(0,12px,0);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal].is-visible,.motion-ready [data-reveal]:focus-within{opacity:1;transform:translate3d(0,0,0)}
@media(max-width:700px){.selected-projects{gap:52px}.selected-projects .project-image{aspect-ratio:1.2}.selected-projects .project-caption{grid-template-columns:1fr;gap:12px;padding-top:22px}.selected-projects .project-caption h3{font-size:27px}.selected-projects .project-caption .text-link{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}.project-skills{gap:6px;margin-top:2px}.project-skills li{font-size:10px;padding:5px 10px}.motion-ready [data-reveal]{transform:translate3d(0,8px,0)}}
@media(prefers-reduced-motion:reduce){.motion-ready [data-reveal]{opacity:1;transform:none;transition:none}.selected-projects .project-image img,.selected-projects .project-image:hover img{transform:none;will-change:auto}}

/* Visual strengths and expandable skills, in the existing portfolio palette. */
.benefits-heading{display:grid;grid-template-columns:1fr 2fr;gap:20px 48px;align-items:start;margin-bottom:48px}
.benefits-heading .eyebrow{padding-top:10px;margin:0}
.benefits-heading h2{font-size:clamp(34px,4.4vw,58px);max-width:760px;line-height:1.12}
.benefits-heading>p:last-child{grid-column:2;max-width:510px;color:var(--muted);font-size:16px}
.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.benefit-card{min-width:0;overflow:hidden;border:1px solid #c6d9e5;border-radius:14px;background:#fbfdff}
.benefit-art{height:238px;display:grid;place-items:center;padding:28px;overflow:hidden;border-bottom:1px solid #cadce8;background:radial-gradient(ellipse at 90% 0%,#b9d9eb88,transparent 70%),#e4eff6}
.benefit-copy{padding:28px}
.benefit-copy .small-label{font-size:10px;color:#496172}
.benefit-copy h3{font-size:25px;line-height:1.2;letter-spacing:-.045em;margin:14px 0}
.benefit-copy p{font-size:15px;line-height:1.6;color:var(--muted)}
.mini-path{width:100%;max-width:258px;display:flex;align-items:center;flex-direction:column;font:10px/1.4 var(--mono);text-align:center;transform:rotate(-3deg);transition:transform .5s}
.mini-path>span{padding:10px 20px;background:#fff;border:1px solid #b9cfde;border-radius:5px}
.mini-path i{height:16px;width:1px;background:#8ca9bc}
.mini-path>div{display:flex;gap:12px;width:100%}
.mini-path>div span{flex:1;padding:11px 5px;border:1px solid #adc6d8;background:#f8fcff;border-radius:5px}
.mini-path strong{width:100%;padding:15px;background:var(--navy);color:var(--ice);border-radius:5px;font-weight:400;text-align:left;box-shadow:0 12px 24px #102b3e18}
.mini-path b{float:right;color:var(--columbia);font-size:14px}
.system-art{background:#dceaf3}
.mini-system{width:100%;max-width:270px;padding:20px;background:#fbfdff;border:1px solid #b9d0df;border-radius:8px;box-shadow:0 14px 35px #142a3b12;transform:rotate(3deg);transition:transform .5s}
.system-swatches{display:flex;gap:7px}
.system-swatches i{width:26px;height:26px;border-radius:50%;background:var(--navy);border:1px solid #0b223220}
.system-swatches i:nth-child(2){background:#285eba}.system-swatches i:nth-child(3){background:var(--columbia)}.system-swatches i:nth-child(4){background:#eaf3f9}
.system-type{display:flex;align-items:center;gap:20px;font:34px/1 var(--mono);margin:18px 0;color:var(--ink)}
.system-type>span{font:11px/1.5 var(--sans);color:var(--muted)}
.system-controls{display:flex;gap:8px;align-items:center;font:9px var(--sans)}
.system-controls span{border:1px solid #a8c5d9;border-radius:3px;padding:8px 10px}
.system-controls span:first-child{background:var(--navy);color:var(--ice);border-color:var(--navy)}
.system-controls b{margin-left:12px;font-weight:400}
.system-note{display:flex;align-items:center;gap:6px;font:8px var(--mono);color:var(--muted);margin-top:16px}
.system-note i{width:5px;height:5px;border-radius:50%;background:#285eba}
.delivery-art{background:radial-gradient(ellipse at 100% 0%,#265aa1aa,transparent 90%),var(--navy)}
.mini-delivery{width:100%;max-width:260px;display:grid;gap:10px;transform:rotate(-3deg);transition:transform .5s}
.mini-delivery>div{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid #b9d9eb45;background:#b9d9eb0c;border-radius:5px;color:var(--ice)}
.mini-delivery span{font:9px var(--mono);color:#b9d9eb}
.mini-delivery strong{font:12px var(--sans);font-weight:400}
.mini-delivery b{margin-left:auto;font:14px var(--sans);color:var(--columbia)}
.mini-delivery>div:last-child{background:var(--columbia);border-color:var(--columbia);color:var(--navy)}
.mini-delivery>div:last-child span,.mini-delivery>div:last-child b{color:var(--navy)}
@media(hover:hover){.benefit-card:hover .mini-path,.benefit-card:hover .mini-system,.benefit-card:hover .mini-delivery{transform:rotate(0) translateY(-3px)}}
.skills-section{background:var(--navy);color:#f5faff}
.skills-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:100px;align-items:start}
.skills-intro .eyebrow{color:var(--columbia)}
.skills-intro h2{font-size:clamp(34px,4vw,54px);line-height:1.13}
.skills-intro>p:not(.eyebrow){margin-top:28px;color:#bbd0df;font-size:17px;line-height:1.7}
.skills-signature{display:flex;align-items:center;gap:20px;margin-top:56px}
.skills-signature img{filter:brightness(0) invert(1);width:64px;height:64px;opacity:.7}
.skills-signature span{font:9px var(--mono);letter-spacing:.08em;color:var(--columbia)}
.skill-list{border-top:1px solid #b9d9eb40;min-width:0}
.skill-item{border-bottom:1px solid #b9d9eb40}
.skill-item summary{display:flex;align-items:center;gap:18px;cursor:pointer;list-style:none;padding:26px 0;min-height:90px}
.skill-item summary::-webkit-details-marker{display:none}
.skill-item summary:focus-visible{outline:2px solid var(--columbia);outline-offset:5px;border-radius:3px}
.skill-number{font:10px var(--mono);color:#a6c4d9;flex:none}
.skill-item h3{font-size:clamp(21px,2.2vw,29px);line-height:1.25;letter-spacing:-.045em}
.skill-toggle{margin-left:auto;position:relative;flex:none;width:28px;height:28px;border:1px solid #b9d9eb55;border-radius:50%;transition:background .25s}
.skill-toggle:before,.skill-toggle:after{content:'';position:absolute;left:8px;top:12px;width:10px;height:1px;background:var(--columbia)}
.skill-toggle:after{transform:rotate(90deg);transition:transform .25s}
.skill-item[open] .skill-toggle:after{transform:rotate(0)}
.skill-item[open] h3{color:var(--columbia)}
.skill-item summary:hover .skill-toggle{background:#b9d9eb18}
.skill-body{padding:0 40px 30px 32px}
.skill-body p{font-size:15px;line-height:1.7;max-width:530px;color:#c1d5e3}
.skill-body ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:20px 0 0}
.skill-body li{font:10px/1.5 var(--sans);padding:6px 10px;border:1px solid #b9d9eb38;border-radius:100px;color:#d7e9f5;background:#b9d9eb08}
.testimonial{padding-top:96px}
@media(max-width:1050px){.benefit-grid{gap:16px}.benefit-art{padding:20px;height:220px}.benefit-copy{padding:22px}.benefit-copy h3{font-size:23px}.skills-layout{gap:48px;grid-template-columns:1fr 1.35fr}}
@media(max-width:760px){.benefits-heading{grid-template-columns:1fr;gap:20px;margin-bottom:32px}.benefits-heading>p:last-child{grid-column:1}.benefit-grid{grid-template-columns:1fr;gap:20px}.benefit-art{height:238px;padding:28px}.benefit-copy{padding:26px}.benefit-copy h3{font-size:26px;max-width:340px}.benefit-copy p{max-width:470px}.skills-layout{grid-template-columns:1fr;gap:40px}.skills-signature{display:none}.skills-intro>p:not(.eyebrow){margin-top:22px}.skill-item summary{gap:14px;padding:22px 0;min-height:84px}.skill-item h3{font-size:23px}.skill-body{padding:0 8px 28px 28px}.testimonial{padding-top:64px}}
@media(prefers-reduced-motion:reduce){.mini-path,.mini-system,.mini-delivery,.skill-toggle,.skill-toggle:after{transition:none}.benefit-card:hover .mini-path,.benefit-card:hover .mini-system,.benefit-card:hover .mini-delivery{transform:none}}

/* Benefits are open compositions: animated studies above freestanding copy. */
.approach{background:#edf4f8}
.benefit-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.benefit-toolbar .small-label{font-size:9px;letter-spacing:.08em}
.graphic-motion-toggle{border:0;background:transparent;color:var(--muted);font:11px var(--sans);padding:10px 0 10px 12px;min-height:44px;cursor:pointer}
.graphic-motion-toggle span{margin-left:8px}
.graphic-motion-toggle:focus-visible{outline:2px solid #285eba;outline-offset:4px}
.benefit-grid{gap:32px}
.benefit-card{background:none;border:0;border-radius:0;overflow:visible}
.benefit-art{position:relative;height:320px;border:0;border-radius:0;background:none;padding:28px 16px;isolation:isolate}
.benefit-art:before{content:'';position:absolute;inset:7%;border-radius:50%;background:radial-gradient(ellipse,#b9d9eb88,transparent 70%);z-index:-1}
.benefit-copy{padding:24px 0 0;border-top:1px solid #bbcfdd}
.benefit-copy h3{font-size:27px;margin:16px 0}
.benefit-copy p{max-width:340px}
.graphic-caption{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;font:8px var(--mono);letter-spacing:.05em;color:var(--muted)}
.graphic-caption>span{color:#245db0}
.mini-path{max-width:280px;transform:none;animation:path-float 7s ease-in-out infinite}
.mini-path>span{box-shadow:0 8px 20px #0b223210;padding:13px 24px}
.mini-path>div span{padding:15px 5px;background:#fbfdff;box-shadow:0 8px 18px #0b22320a}
.mini-path strong{padding:18px;animation:path-highlight 7s ease-in-out infinite}
.mini-path i{height:22px}
.graphic-cursor{position:absolute;right:0;bottom:28px;display:flex;align-items:center;gap:2px;color:#245db0;animation:cursor-route 7s ease-in-out infinite}
.graphic-cursor>span{margin-top:22px;background:#245db0;color:#fff;padding:7px 10px;border-radius:3px;font:9px var(--sans);white-space:nowrap}
.system-backplate{position:absolute;width:74%;height:200px;border:1px solid #8eb2cc;background:#d7e9f580;transform:rotate(-9deg);border-radius:8px}
.mini-system{max-width:286px;padding:24px;transform:rotate(4deg);animation:system-float 8s ease-in-out infinite;box-shadow:0 24px 40px #142a3b17}
.system-swatches i{width:30px;height:30px;animation:swatch-rise 6s ease-in-out infinite}
.system-swatches i:nth-child(2){animation-delay:.16s}.system-swatches i:nth-child(3){animation-delay:.32s}.system-swatches i:nth-child(4){animation-delay:.48s}
.system-type{font-size:42px;margin:22px 0}
.system-controls{font-size:10px}
.system-note{font-size:8px;margin-top:20px}
.component-chip{position:absolute;right:0;bottom:20px;font:9px var(--mono);background:var(--navy);color:var(--ice);padding:11px 15px;border-radius:4px;box-shadow:0 8px 20px #0b223220;animation:chip-float 8s ease-in-out infinite}
.component-chip>span{color:var(--columbia);margin-right:8px}
.delivery-art:before{background:radial-gradient(ellipse,#a8cbeeaa,transparent 70%)}
.mini-delivery{max-width:280px;gap:14px;transform:rotate(-4deg);animation:delivery-float 8s ease-in-out infinite}
.mini-delivery>div{background:#fbfdff;border:1px solid #b9d0df;color:var(--ink);padding:18px 16px;box-shadow:0 10px 20px #142a3b0a;animation:delivery-step 9s ease-in-out infinite}
.mini-delivery>div:nth-child(2){animation-delay:1.5s}.mini-delivery>div:nth-child(3){animation-delay:3s}
.mini-delivery span,.mini-delivery b{color:#285eba}
.mini-delivery strong{font-size:14px}
.mini-delivery>div:last-child{background:var(--navy);border-color:var(--navy);color:var(--ice)}
.mini-delivery>div:last-child span,.mini-delivery>div:last-child b{color:var(--columbia)}
.release-status{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;font:8px/1.5 var(--mono);color:var(--muted)}
.release-status>span{width:5px;height:5px;background:#285eba;border-radius:50%;animation:status-pulse 4s ease-in-out infinite}

/* Individually contained skill cards within one quiet blue panel. */
.skills-section{background:#e3eef6;color:var(--ink)}
.skills-layout{padding:44px;background:#f6faff;border:1px solid #bfd3e1;border-radius:20px;gap:56px}
.skills-intro .eyebrow{color:var(--muted)}
.skills-intro>p:not(.eyebrow){color:var(--muted)}
.skills-signature img{filter:none;opacity:.7}
.skills-signature span{color:var(--muted)}
.skill-list{border:0;display:grid;gap:12px}
.skill-item{border:1px solid #bdcfdd;border-radius:10px;background:#fbfdff;overflow:hidden;transition:background .25s,border-color .25s}
.skill-item[open]{background:var(--navy);color:#f5faff;border-color:var(--navy)}
.skill-item summary{padding:24px 20px;min-height:88px}
.skill-item summary:focus-visible{outline-offset:-4px}
.skill-item h3{font-size:25px}
.skill-number{color:#496172}
.skill-toggle{border-color:#8faec4}
.skill-toggle:before,.skill-toggle:after{background:var(--ink)}
.skill-item[open] .skill-number{color:var(--columbia)}
.skill-item[open] .skill-toggle:before,.skill-item[open] .skill-toggle:after{background:var(--columbia)}
.skill-body{padding:0 24px 28px 50px}
.skill-item summary:hover .skill-toggle{background:#b9d9eb44}

/* Whole-hero scroll shaping and a deeper image window for parallax. */
.hero{transform:scale(var(--hero-scale,1));transform-origin:center 58%;border-radius:var(--hero-radius,0px);will-change:transform,border-radius}
.selected-projects .project-image img,.selected-projects .project-image:hover img{transform:translate3d(0,var(--image-shift,0px),0) scale(1.4)}
@keyframes path-float{0%,100%{transform:none translateY(0)}50%{transform:rotate(-2deg) translateY(-7px)}}
@keyframes path-highlight{0%,30%,100%{box-shadow:0 12px 24px #102b3e18}50%,70%{box-shadow:0 0 0 5px #285eba18,0 18px 30px #102b3e20}}
@keyframes cursor-route{0%,100%{transform:translate(2px,0)}40%,65%{transform:translate(-24px,-16px)}}
@keyframes system-float{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(1deg) translateY(-8px)}}
@keyframes swatch-rise{0%,25%,75%,100%{transform:translateY(0)}45%,55%{transform:translateY(-5px)}}
@keyframes chip-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes delivery-float{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(-1deg)}}
@keyframes delivery-step{0%,15%,65%,100%{transform:translateX(0)}30%,45%{transform:translateX(10px)}}
@keyframes status-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.graphics-paused .benefit-art *{animation-play-state:paused!important}
@media(hover:hover){.benefit-card:hover .mini-path,.benefit-card:hover .mini-system,.benefit-card:hover .mini-delivery{animation-play-state:running}}
@media(max-width:1050px){.benefit-grid{gap:22px}.benefit-art{padding:24px 8px}.skills-layout{padding:32px;gap:32px}.skill-item h3{font-size:22px}.graphic-cursor>span{font-size:8px;padding:7px}.component-chip{font-size:8px;padding:10px}.benefit-copy h3{font-size:24px}}
@media(max-width:760px){.benefit-grid{gap:40px}.benefit-art{height:330px;max-width:460px;width:100%;margin:auto;padding:32px}.benefit-copy{padding-top:24px}.benefit-copy h3{font-size:27px}.benefit-copy p{max-width:470px}.graphic-caption{left:20px;right:20px}.graphic-cursor{right:16px}.component-chip{right:20px;bottom:20px;font-size:9px}.release-status{left:20px}.skills-layout{width:calc(100% - 24px);padding:28px 18px;gap:32px;border-radius:14px}.skill-item summary{padding:20px 16px;gap:12px;min-height:82px}.skill-item h3{font-size:22px}.skill-body{padding:0 20px 26px 38px}.skill-toggle{width:26px;height:26px}.skill-toggle:before,.skill-toggle:after{left:7px;top:11px}.benefit-toolbar .small-label{max-width:150px}.selected-projects .project-image img,.selected-projects .project-image:hover img{transform:translate3d(0,var(--image-shift,0px),0) scale(1.3)}}
@media(prefers-reduced-motion:reduce){.benefit-art *{animation:none!important}.hero{transform:none;border-radius:0;will-change:auto}.selected-projects .project-image img,.selected-projects .project-image:hover img{transform:none;will-change:auto}.graphic-motion-toggle{display:none}.skill-item{transition:none}}

/* Hero leaves in staggered rectangular blocks, with depth inside its frame. */
.hero{transform:none;border-radius:0;will-change:auto;--hero-lift:0px;--hero-opacity:1}
.hero .hero-content{transform:none;opacity:1}
.hero-parallax-field{position:absolute;inset:-10% 0;z-index:-2;transform:translate3d(0,var(--hero-depth,0px),0);pointer-events:none;will-change:transform}
.hero-parallax-field .gradient-field,.hero-parallax-field .aura-light{z-index:0}
.hero-project{overflow:hidden}
.hero-project img{transform:translate3d(0,var(--hero-image-depth,0px),0) scale(1.25);will-change:transform}



/* Screenshot-led skills: icon rows; only the expanded row has a blue field. */
.skills-section{background:#fbfdff}
.skills-layout{background:none;border:0;border-radius:0;padding:0;gap:80px}
.skills-intro .skills-signature{display:none}
.skill-list{gap:12px}
.skill-item{background:transparent;border:1px solid transparent;border-radius:16px}
.skill-item[open]{background:#eaf1f6;color:var(--ink);border:1px solid #cbdde8}
.skill-item summary{padding:24px;gap:20px;min-height:94px}
.skill-item h3{font:600 24px/1.3 var(--sans);letter-spacing:-.025em}
.skill-item[open] h3{color:var(--ink)}
.skill-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#e2edf7;flex:none;color:var(--ink)}
.skill-icon svg{width:24px;height:24px}
.skill-icon-2{background:#e7e8f5}.skill-icon-3{background:#e7f2ee}.skill-icon-4{background:#e4edf7}.skill-icon-5{background:#e3edf2}
.skill-item[open] .skill-icon{background:transparent}
.skill-toggle{display:none}
.skill-body{padding:0 28px 30px 88px}
.skill-body p{color:#344e61;font-size:16px;line-height:1.65}
.skill-body li{border-color:#bdcfdd;color:#36546b;background:#f6faff}
.skill-item summary:focus-visible{outline-color:#285eba;outline-offset:-5px}
.skill-item:not([open]) summary:hover{background:#edf4f880}

/* Keep every study level; motion comes from assembly, highlights, and detail. */
.mini-path,.mini-system,.mini-delivery,.system-backplate{rotate:none;transform:none}
.system-backplate{transform:translate(-12px,-8px)}
.system-type .type-specimen{font:42px/1 var(--mono);color:var(--ink)}
.system-type>span:not(.type-specimen){font:11px/1.5 var(--sans);color:var(--muted)}
.mini-path>div span:first-child{animation:route-choice 7s ease-in-out infinite}
.mini-path>div span:last-child{animation:route-choice 7s ease-in-out infinite 3.5s}
.mini-delivery b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#d7e9f580}
.mini-delivery>div:last-child b{background:#b9d9eb22}
.graphic-caption>span{display:inline-block;font-size:15px;animation:detail-spark 6s ease-in-out infinite}
.system-controls span:first-child{animation:component-focus 6s ease-in-out infinite}
@keyframes path-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes system-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes delivery-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes route-choice{0%,20%,80%,100%{border-color:#adc6d8;background:#fbfdff}40%,60%{border-color:#5289bf;background:#e2effa}}
@keyframes detail-spark{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
@keyframes component-focus{0%,25%,100%{box-shadow:0 0 0 0 #285eba00}45%,65%{box-shadow:0 0 0 4px #285eba18}}
@media(hover:hover){.benefit-card:hover .mini-path,.benefit-card:hover .mini-system,.benefit-card:hover .mini-delivery{transform:none}}
@media(max-width:1050px){.skills-layout{gap:40px}.skill-item summary{padding:20px;gap:16px}.skill-body{padding-left:80px}}
@media(max-width:760px){.skills-layout{width:calc(100% - 40px);gap:32px;padding:0}.skill-item summary{padding:22px 16px;gap:14px;min-height:92px}.skill-icon{width:40px;height:40px}.skill-icon svg{width:23px;height:23px}.skill-item h3{font-size:21px}.skill-body{padding:0 20px 28px 70px}.skill-body p{font-size:16px}.skill-body ul{gap:6px}.skill-body li{font-size:10px;padding:5px 8px}.hero-project img{transform:translate3d(0,var(--hero-image-depth,0px),0) scale(1.3)}}
@media(prefers-reduced-motion:reduce){.hero-parallax-field,.hero-project img{transform:none;will-change:auto}.benefit-art *{animation:none!important}}


/* Quiet hero exit, fine-line icons, and three closely related blue studies. */
.hero .hero-content{transform:translate3d(0,var(--hero-lift,0px),0);opacity:var(--hero-opacity,1)}
.skill-icon{color:var(--navy);background:#d7e9f5}
.skill-icon svg{stroke-width:1.2}
.skill-icon-2{background:#b9d9eb}
.skill-icon-3{background:#e3eff7}
.skill-icon-4{background:#c9e0ee}
.skill-icon-5{background:#d2e4f1}
.skill-item[open] .skill-icon{background:#d7e9f5}
.skill-item[open]{background:#edf4f8;border-color:#b9d9eb}
.benefit-art{border-radius:12px}
.clarity-art{background:#e3eff7}
.system-art{background:#d7e7f2}
.delivery-art{background:#c9dfed}
.benefit-art:before{opacity:.45}
.system-backplate{background:#b9d9eb55;border-color:#9ebed4}
@media(prefers-reduced-motion:reduce){.hero .hero-content{transform:none;opacity:1}}

/* White space around the blue studies; a related blue tone for each skill. */
.approach{background:#fff}
.skill-item:nth-child(1){--skill-tint:#edf5fa;--skill-open:#dfedf6;--skill-icon-fill:#cce2f0}
.skill-item:nth-child(2){--skill-tint:#edf2fa;--skill-open:#e0e9f6;--skill-icon-fill:#d2dff1}
.skill-item:nth-child(3){--skill-tint:#eef6f9;--skill-open:#e0eef4;--skill-icon-fill:#cee4ef}
.skill-item:nth-child(4){--skill-tint:#f0f4fa;--skill-open:#e4ebf6;--skill-icon-fill:#d6e2f1}
.skill-item:nth-child(5){--skill-tint:#eaf3f8;--skill-open:#dcebf4;--skill-icon-fill:#c5deed}
.skill-item{background:var(--skill-tint);border-color:transparent}
.skill-item[open]{background:var(--skill-open);border-color:#b9d2e3}
.skill-item .skill-icon,.skill-item[open] .skill-icon{background:var(--skill-icon-fill);color:var(--navy)}
.skill-item:not([open]) summary:hover{background:#b9d9eb22}

/* An airy horizontal nav with a clear contact action and compact mobile menu. */
.site-header{top:20px;padding:0 32px}
.navigation{width:min(1240px,100%);height:64px;padding:0 12px 0 22px;gap:30px;border-radius:12px;border-color:#d7e9f52b;background:#0b2232db;box-shadow:0 5px 24px #071d3012;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.navigation .identity{font:600 12px var(--sans);letter-spacing:.06em}
.navigation .identity img{width:26px;height:26px}
.navigation .nav-links{gap:8px}
.navigation .nav-links a{font-size:12px;padding:0 14px;min-height:42px;border-radius:6px}
.navigation .nav-links .resume-link{background:none;border:0;color:#c6dce9;gap:16px}
.navigation .nav-links .nav-contact{background:var(--columbia);color:var(--navy);gap:24px;padding:0 16px;margin-left:8px}
.navigation .nav-contact svg{width:16px;height:16px}
.navigation .nav-links .nav-contact:hover{background:#d7e9f5;color:var(--navy)}
.navigation a:focus-visible,.menu-toggle:focus-visible{outline-color:var(--columbia)}
.menu-toggle{width:auto;border-radius:6px;padding:0 12px;height:42px;gap:16px;flex-direction:row;border:1px solid #b9d9eb40}
.menu-toggle .menu-label{width:auto;height:auto;background:none;font:12px var(--sans);transform:none!important}
.menu-toggle .menu-lines{position:relative;display:grid;gap:5px;width:18px;height:auto;background:none;transform:none!important}
.menu-lines i{display:block;width:18px;height:1px;background:currentColor;transition:transform .2s}
.menu-toggle[aria-expanded=true] .menu-lines i:first-child{transform:translateY(3px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-lines i:last-child{transform:translateY(-3px) rotate(-45deg)}
#mobile-menu{width:min(1240px,calc(100% - 64px));left:32px;right:32px;border-radius:12px;padding:12px;background:#0b2232f5}
#mobile-menu a{justify-content:space-between;min-height:54px;padding:12px 16px;font:18px var(--sans)}
#mobile-menu a>span{font:10px var(--mono);color:var(--columbia)}
#mobile-menu .nav-contact{margin-top:8px;background:var(--columbia);color:var(--navy)}
#mobile-menu .nav-contact span{color:var(--navy)}

/* One open, editorial quote with simple attribution. */
.testimonial{display:grid;grid-template-columns:1fr 2fr;gap:48px;padding-top:104px;padding-bottom:112px}
.testimonial-label{position:relative}
.testimonial .eyebrow{font-size:10px;margin:0;max-width:210px;line-height:1.8}
.testimonial .quote-mark{position:static;display:block;opacity:1;font:140px/1 Georgia,serif;color:var(--columbia);margin-top:24px}
.testimonial figure{padding:0;margin:0;background:none;border:0;border-radius:0;overflow:visible;isolation:auto}
.testimonial blockquote{margin:0;max-width:850px;font:400 clamp(28px,3.2vw,44px)/1.4 var(--sans);letter-spacing:-.035em;color:var(--ink)}
.testimonial em{font-style:normal;color:#285a88;text-decoration:none}
.testimonial figcaption{display:block;margin-top:32px;padding-top:0;border:0}
.testimonial .reviewer{display:grid;gap:3px}
.testimonial .reviewer strong{font:500 14px var(--sans);color:var(--ink)}
.testimonial .reviewer>span{font:12px/1.6 var(--sans);color:var(--muted)}
.testimonial .review-source{display:block;margin:14px 0 0;text-align:left;max-width:none;font:9px/1.6 var(--mono);color:var(--muted)}

/* The footer uses the hero's navy, ice, blue aura and its slow drift. */
.contact{background:var(--navy);isolation:isolate}
.contact:before{display:none}
.footer-aura{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.contact>.container{z-index:1}
.contact:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b2232e8 0%,#0b223275 45%,#0b22320d 80%);z-index:0;pointer-events:none}
.contact .gradient-field{inset:-40%;background:radial-gradient(ellipse 29% 52% at 75% 32%,#d7e9f5 0%,#9cd5e9 14%,#259ebc 31%,#2e53b780 50%,#2e53b724 64%,transparent 78%),radial-gradient(ellipse 40% 60% at 94% 74%,#2e53b770 0%,#2e53b729 35%,transparent 73%);filter:blur(26px);mask-image:radial-gradient(ellipse at 65% 50%,#000 32%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse at 65% 50%,#000 32%,transparent 85%);animation:aura-edge-drift 32s ease-in-out infinite alternate;opacity:.95;z-index:0}
.contact .aura-light{inset:-40%;filter:blur(36px);mask-image:radial-gradient(ellipse at 65% 50%,#000 20%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at 65% 50%,#000 20%,transparent 80%);animation-duration:38s;z-index:0}
@media(max-width:760px){.site-header{top:12px;padding:0 20px}.navigation{height:58px;padding:0 10px 0 16px;gap:16px;border-radius:10px}.navigation .identity{font-size:11px}.navigation .nav-links{display:none}.menu-toggle{display:flex}.navigation .identity img{width:25px;height:25px}#mobile-menu{left:20px;right:20px;width:calc(100% - 40px)}.testimonial{grid-template-columns:1fr;gap:22px;padding-top:64px;padding-bottom:72px}.testimonial-label{display:flex;align-items:center;justify-content:space-between;gap:20px}.testimonial .eyebrow{max-width:none}.testimonial .quote-mark{font-size:70px;line-height:.65;margin:0;transform:translateY(12px)}.testimonial blockquote{font-size:29px;line-height:1.4}.testimonial figcaption{margin-top:26px}.contact .gradient-field{inset:-35% -65%;background:radial-gradient(ellipse 37% 55% at 77% 36%,#d7e9f5 0%,#9cd5e9 15%,#259ebc 30%,#2e53b778 50%,#2e53b725 65%,transparent 80%);filter:blur(22px);opacity:.9}.contact .aura-light{inset:-35% -50%;filter:blur(30px)}}
@media(prefers-reduced-motion:reduce){.contact .gradient-field,.contact .aura-light{animation:none}.menu-lines i{transition:none}}

/* Bright blue actions and precise linework inside the blue studies. */
:root{--electric-blue:#287ef0}
.bento-line-icon{display:block;width:17px;height:17px;flex:none}
.graphic-caption>span{color:var(--electric-blue)}
.graphic-caption .bento-line-icon{width:15px;height:15px}
.mini-path strong{background:var(--electric-blue);color:#fff}
.mini-path b{float:right;color:#fff}
.graphic-cursor{color:var(--electric-blue)}
.graphic-cursor>svg{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linejoin:round}
.graphic-cursor>span{background:var(--electric-blue)}
.system-controls span:first-child{background:var(--electric-blue);border-color:var(--electric-blue);color:#fff;display:flex;align-items:center}
.system-controls b .bento-line-icon{width:12px;height:12px}
.system-swatches i:nth-child(2){background:var(--electric-blue)}
.system-note i,.release-status>span{background:var(--electric-blue)}
.component-chip{display:flex;align-items:center;gap:8px;background:var(--electric-blue);color:#fff}
.component-chip>span{margin:0;color:#fff}
.component-chip .bento-line-icon{width:14px;height:14px}
.mini-delivery span,.mini-delivery b{color:var(--electric-blue)}
.mini-delivery>div:last-child{background:var(--electric-blue);border-color:var(--electric-blue);color:#fff}
.mini-delivery>div:last-child span,.mini-delivery>div:last-child b{color:#fff}
.mini-delivery>div:last-child b{background:#ffffff20}
@keyframes route-choice{0%,20%,80%,100%{border-color:#adc6d8;background:#fbfdff}40%,60%{border-color:#287ef0;background:#e2efff}}
@keyframes component-focus{0%,25%,100%{box-shadow:0 0 0 0 #287ef000}45%,65%{box-shadow:0 0 0 4px #287ef01c}}
@keyframes path-highlight{0%,30%,100%{box-shadow:0 12px 24px #287ef015}50%,70%{box-shadow:0 0 0 5px #287ef015,0 18px 30px #287ef022}}
.motion-ready .benefit-copy[data-reveal]{--reveal-delay:100ms}
@media(prefers-reduced-motion:reduce){.motion-ready [data-reveal]{opacity:1;transform:none;transition:none}}

/* Navy anchors the studies; vibrant blue supplies the small accents. */
.mini-path strong{background:var(--navy);color:var(--ice)}
.mini-path b{color:var(--columbia)}
.system-controls span:first-child{background:var(--navy);border-color:var(--navy);color:var(--ice)}
.component-chip{background:var(--navy);color:var(--ice)}
.component-chip>span{color:var(--columbia)}
.mini-delivery>div:last-child{background:var(--navy);border-color:var(--navy);color:var(--ice)}
.mini-delivery>div:last-child span{color:var(--columbia)}
.mini-delivery>div:last-child b{background:var(--electric-blue);color:#fff}


/* Explicit word gaps survive inline-span layout and HTML whitespace handling. */
.about-reference-copy h2{letter-spacing:-.03em;line-height:1.32}
.about-word:not(:last-child){margin-inline-end:.28em}
.benefit-copy h3,.skills-intro h2{letter-spacing:-.03em}
.system-type{column-gap:20px}
.mini-path strong{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mini-path strong b{float:none;flex:none}

/* Small continuous trajectories, phased so nothing stops and restarts together. */
.mini-path{animation:path-float 10.5s cubic-bezier(.45,0,.55,1) -3s infinite}
.mini-system{animation:system-float 12.5s cubic-bezier(.45,0,.55,1) -7s infinite}
.mini-delivery{animation:delivery-float 12s cubic-bezier(.45,0,.55,1) -5s infinite}
.graphic-cursor{animation:cursor-route 11s cubic-bezier(.45,0,.55,1) -4s infinite}
.component-chip{animation:chip-float 14s cubic-bezier(.45,0,.55,1) -9s infinite}
.system-swatches i{animation:swatch-rise 9.5s cubic-bezier(.45,0,.55,1) -2s infinite}
.system-swatches i:nth-child(2){animation-delay:-4s}.system-swatches i:nth-child(3){animation-delay:-6s}.system-swatches i:nth-child(4){animation-delay:-8s}
.mini-delivery>div{animation:delivery-step 11s cubic-bezier(.45,0,.55,1) -2s infinite}
.mini-delivery>div:nth-child(2){animation-delay:-5s}.mini-delivery>div:nth-child(3){animation-delay:-8s}
.mini-path>div span:first-child{animation:route-choice 11s ease-in-out -2s infinite}
.mini-path>div span:last-child{animation:route-choice 11s ease-in-out -9.5s infinite}
.mini-path strong{animation:path-highlight 12s ease-in-out -4s infinite}
.system-controls span:first-child{animation:component-focus 13.5s ease-in-out -6s infinite}
.graphic-caption>span{animation:detail-spark 10.5s ease-in-out -3s infinite}
.release-status>span{animation:status-pulse 8s ease-in-out -2s infinite}
@keyframes path-float{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-4px)}}
@keyframes system-float{0%,100%{transform:translate(0,0)}50%{transform:translate(-2px,-5px)}}
@keyframes delivery-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes cursor-route{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,-6px)}}
@keyframes chip-float{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-3px)}}
@keyframes swatch-rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes delivery-step{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes route-choice{0%,100%{border-color:#adc6d8;background:#fbfdff}50%{border-color:#74a4df;background:#edf5ff}}
@keyframes path-highlight{0%,100%{box-shadow:0 12px 24px #0b223212}50%{box-shadow:0 0 0 2px #287ef00c,0 14px 26px #0b223218}}
@keyframes component-focus{0%,100%{box-shadow:0 0 0 1px #287ef000}50%{box-shadow:0 0 0 3px #287ef014}}
@keyframes detail-spark{0%,100%{opacity:.65;transform:none}50%{opacity:1;transform:none}}
@keyframes status-pulse{0%,100%{opacity:.65}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.benefit-art *{animation:none!important}}


/* Comfortable word spacing, including at widths where manual breaks disappear. */
.hero h1{letter-spacing:-.035em;word-spacing:.07em;line-height:1.15}
.work .section-head h2{letter-spacing:-.035em;word-spacing:.06em;line-height:1.16}
.hero-foot{justify-content:flex-end}
.about-reference-intro{grid-template-columns:1fr}
.about-reference-copy{max-width:960px}
.about-reference-copy h2{max-width:960px}
.work .section-head{display:block;margin-bottom:40px}
.work .section-head h2{max-width:760px}
.benefits-heading{gap:16px 48px;margin-bottom:28px}
.benefits-heading h2{max-width:760px}
.benefit-toolbar{justify-content:flex-end;margin-bottom:16px}
.benefit-copy h3{margin-top:0}
.contact-main{align-items:center}
.contact-main>div{justify-self:end}
@media(max-width:760px){.hero h1{letter-spacing:-.025em;word-spacing:.055em;line-height:1.16}.work .section-head{margin-bottom:28px}.work .section-head h2{line-height:1.2}.benefits-heading{margin-bottom:16px}.contact-main>div{justify-self:start}}

/* Desktop work: open image-and-copy rows with natural scrolling. */
@media(min-width:1000px){
 .work.section{padding-top:80px;padding-bottom:88px}
 .work .section-head{margin-bottom:40px}
 .work .section-head h2{font-size:clamp(42px,4.5vw,64px)}
 .work .section-head h2 br{display:none}
 .work .selected-projects{display:flex;flex-direction:column;gap:72px;padding:0}
 .work .selected-projects .project{position:relative;top:auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:clamp(36px,4vw,64px);height:auto;min-height:0;padding:0;margin:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
 .work .selected-projects .project-image{position:relative;inset:auto;width:100%;height:clamp(360px,34vw,480px);aspect-ratio:auto;min-height:0;border-radius:10px;overflow:hidden;background:var(--ice)}
 .work .selected-projects .project-image img{width:100%;height:100%;object-fit:cover}
 .work .selected-projects .project-caption{position:relative;inset:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;width:100%;height:auto;padding:0;margin:0;border:0;border-radius:0;background:none;backdrop-filter:none;text-align:left}
 .work .selected-projects .project-brand{font:10px/1.5 var(--mono);letter-spacing:.065em;color:var(--muted)}
 .work .selected-projects .project-caption h3{font:400 clamp(28px,2.7vw,38px)/1.24 var(--mono);letter-spacing:-.035em;word-spacing:.025em;max-width:480px;margin:0}
 .work .selected-projects .project-skills{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;max-width:400px}
 .work .selected-projects .project-skills li{font-size:10px;padding:5px 10px;background:#edf4f8;border-color:#bfd3e1;color:#36546b}
 .work .selected-projects .project-caption .text-link{grid-row:auto;grid-column:auto;align-self:flex-start;justify-content:space-between;gap:28px;width:auto;margin:8px 0 0;padding:10px 0;min-height:44px;font-size:12px;border-bottom:1px solid #a5bdce}
 .work .selected-projects .text-link .link-arrow{transition:transform .25s}
 .work .selected-projects .text-link:hover .link-arrow{transform:translate(3px,-3px)}
}
@media(min-width:1000px) and (prefers-reduced-motion:reduce){
 .work .selected-projects .text-link .link-arrow{transition:none}
}

.hero-project .hero-feature-caption{display:none}
.hero-project .hero-feature-media{margin:0}
@media(min-width:1000px){
 .sketch-hero{grid-template-columns:minmax(0,1fr) 300px;align-items:end;gap:48px}
 .hero-project{position:relative;display:block;align-self:end;padding:6px;margin:0;overflow:hidden;border:1px solid #b9d9eb55;border-radius:24px;background:#0b2232c9;box-shadow:0 12px 32px #071d3026;isolation:isolate;transition:translate .5s cubic-bezier(.22,1,.36,1),border-color .5s,box-shadow .5s}
 .hero-project:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 100% 0%,#287ef055,transparent 65%);opacity:.35;transition:opacity .6s}
 .hero-project .hero-feature-media{display:block;position:relative;overflow:hidden;width:100%;height:198px;margin:0;border-radius:18px;background:#d7e9f5}
 .hero-project .hero-feature-media:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#ffffff22 50%,transparent 75%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.22,1,.36,1);pointer-events:none}
 .hero-project img{width:100%;height:100%;object-fit:cover;object-position:center;border:0;border-radius:0;transform:translate3d(0,var(--hero-image-depth,0px),0) scale(1.24);transition:transform .8s cubic-bezier(.22,1,.36,1)}
 .hero-project .hero-feature-caption{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 14px 12px;margin:0;color:#f5faff;text-align:left}
 .hero-project .hero-feature-title{display:block;margin:0;font:500 13px/1.4 var(--sans);text-align:left;color:#f5faff}
 .hero-project .hero-feature-kicker{display:block;margin:5px 0 0;color:#b9d9eb;font:9px/1.5 var(--mono);text-align:left}
 .hero-project .hero-feature-arrow{display:grid;place-items:center;flex:none;width:32px;height:32px;margin:0;border:1px solid #b9d9eb55;border-radius:50%;color:var(--columbia);transition:background .4s,color .4s,border-color .4s}
 .hero-feature-arrow svg{width:15px;height:15px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
 .hero-project:focus-visible{outline:2px solid var(--columbia);outline-offset:6px}
 .hero-project:focus-visible .hero-feature-arrow{background:var(--columbia);color:var(--navy)}
}
@media(min-width:1000px) and (hover:hover){
 .hero-project:hover{translate:0 -5px;border-color:#b9d9ebaa;box-shadow:0 18px 40px #071d3033,0 0 32px #287ef01c}
 .hero-project:hover:before{opacity:1}
 .hero-project:hover img{transform:translate3d(0,var(--hero-image-depth,0px),0) scale(1.3)}
 .hero-project:hover .hero-feature-media:after{transform:translateX(120%)}
 .hero-project:hover .hero-feature-arrow{background:var(--columbia);color:var(--navy);border-color:var(--columbia)}
 .hero-project:hover .hero-feature-arrow svg{transform:translate(2px,-2px)}
}
@media(min-width:1000px) and (prefers-reduced-motion:reduce){
 .hero-project,.hero-project:before,.hero-project img,.hero-project .hero-feature-media:after,.hero-feature-arrow,.hero-feature-arrow svg{transition:none}
 .hero-project:hover{translate:none}
 .hero-project img,.hero-project:hover img{transform:none}
 .hero-project .hero-feature-media:after{display:none}
}

/* More breathing room between the desktop headline and featured project. */
@media(min-width:1000px){
 .sketch-hero{grid-template-columns:minmax(0,1fr) 260px;gap:48px}
 .sketch-hero>div:first-child{width:88%;min-width:0}
 .hero h1{font-size:clamp(42px,4.4vw,64px);max-width:100%;line-height:1.16;word-break:normal;overflow-wrap:normal;text-wrap:balance}
 .hero h1 br{display:none}
 .hero-project{width:260px;justify-self:end;border-radius:22px}
 .hero-project .hero-feature-media{height:165px;border-radius:16px}
 .hero-project .hero-feature-caption{padding:13px 11px 10px;gap:10px}
 .hero-project .hero-feature-title{font-size:12px}
 .hero-project .hero-feature-kicker{font-size:8px;margin-top:4px}
 .hero-project .hero-feature-arrow{width:29px;height:29px}
}

/* The headline leads; the project is a quiet, lower-right preview. */
@media(min-width:1000px){
 .sketch-hero{grid-template-columns:minmax(0,1fr) 210px;gap:48px}
 .sketch-hero>div:first-child{width:95%}
 .hero-project{top:24px;width:210px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;transition:none}
 .hero-project:before{display:none}
 .hero-project .hero-feature-media{height:132px;border-radius:12px;opacity:.86;transition:opacity .5s}
 .hero-project .hero-feature-media:after{display:none}
 .hero-project .hero-feature-caption{display:flex;justify-content:flex-start;gap:10px;margin:0;padding:10px 0 0;background:none}
 .hero-project .hero-feature-title{font:400 10px/1.5 var(--sans);color:#bfd6e5}
 .hero-project .hero-feature-arrow{width:15px;height:15px;border:0;border-radius:0;background:none;color:#bfd6e5;transition:none}
 .hero-project .hero-feature-arrow svg{width:13px;height:13px;transform:none;transition:none}
 .hero-project:focus-visible .hero-feature-arrow{background:none;color:var(--columbia)}
}
@media(min-width:1000px) and (hover:hover){
 .hero-project:hover{translate:none;border-color:transparent;box-shadow:none;background:none}
 .hero-project:hover img{transform:translate3d(0,var(--hero-image-depth,0px),0) scale(1.28)}
 .hero-project:hover .hero-feature-media{opacity:1}
 .hero-project:hover .hero-feature-arrow{background:none;color:var(--columbia);border-color:transparent}
 .hero-project:hover .hero-feature-arrow svg{transform:none}
}
@media(min-width:1000px) and (prefers-reduced-motion:reduce){
 .hero-project .hero-feature-media{transition:none}
 .hero-project:hover img{transform:none}
}


/* Frameless page sheets keep the product experience itself prominent. */
.residential-pdp-composition{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:#e2e0dc;background:linear-gradient(135deg,#eeece8,#d9dcdf);isolation:isolate}
.pdp-desktop-sheet{display:block;position:absolute;left:7%;top:12%;width:79%;height:76%;overflow:hidden;border-radius:5px;background:#fff;box-shadow:0 15px 38px -12px #26313e38,0 3px 9px #26313e0c}
.pdp-mobile-sheet{display:block;position:absolute;right:6%;top:28%;width:23%;height:65%;overflow:hidden;border-radius:5px;background:#fff;box-shadow:0 16px 35px -10px #26313e40,0 2px 8px #26313e0a}
.project-image .residential-pdp-composition img,.hero-feature-media .residential-pdp-composition img{display:block;width:100%;height:auto;object-fit:initial;object-position:top;transform:none!important;filter:none;opacity:1;border:0;border-radius:0}
.hero-feature-media .pdp-desktop-sheet,.hero-feature-media .pdp-mobile-sheet{border-radius:2px}

/* Shared icy-blue palette, with the light direction turned between projects. */
.residential-pdp-composition,.project-preview-scene{--preview-angle:135deg;background:linear-gradient(var(--preview-angle),#eef7fd 0%,#d0e6f5 43%,#9ebfdb 100%)}
.project-preview-scene{display:block;position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate}
.commercial-preview{--preview-angle:225deg}.ecosystem-preview{--preview-angle:315deg}
.pdp-desktop-sheet{left:6%;top:9%;width:78%;height:82%;background:#f3f2ee}
.project-image .pdp-desktop-sheet>img,.hero-feature-media .pdp-desktop-sheet>img{height:100%;object-fit:contain}
.commercial-main-sheet,.commercial-detail-sheet,.ecosystem-overview-sheet{position:absolute;display:block;overflow:hidden;background:white;border-radius:5px;box-shadow:0 15px 38px -12px #263e5833,0 3px 9px #263e580b}
.commercial-main-sheet{left:6%;top:10%;width:75%;height:78%}
.commercial-detail-sheet{right:6%;top:36%;width:34%;height:57%}
.project-image .project-preview-scene img{display:block;width:100%;height:auto;transform:none!important;filter:none;opacity:1;object-fit:initial;border-radius:0}
.project-image .commercial-main-sheet>img{position:relative;width:119%;max-width:none;margin-left:-9.5%;margin-top:-5%}
.project-image .commercial-detail-sheet>img{position:absolute;width:119%;max-width:none;left:-9.5%;top:0;translate:0 -15.5%}
.ecosystem-overview-sheet{left:7%;top:12%;width:86%;height:76%;background:#142e3c}
.project-image .ecosystem-overview-sheet>img{width:100%;height:100%;object-fit:contain}

/* Work is an editorial spread: one lead story and two supporting studies. */
.work .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px}
.selected-projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:68px 40px;align-items:start;counter-reset:work}
.selected-projects .project{counter-increment:work}
.selected-projects .project-residential{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:48px;align-items:center;padding-bottom:52px;border-bottom:1px solid var(--line)}
.selected-projects .project-residential .project-image{aspect-ratio:1.35}
.selected-projects .project-caption{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:25px}
.selected-projects .project-residential .project-caption{padding:0}
.selected-projects .project-brand{display:flex;gap:14px;align-items:center;font:11px/1.6 var(--mono);letter-spacing:.05em}
.selected-projects .project-brand:before{content:'0' counter(work);color:#688399}
.selected-projects .project-caption h3{font-size:clamp(24px,2.3vw,33px);max-width:480px}
.selected-projects .project-residential .project-caption h3{font-size:clamp(30px,3vw,43px);line-height:1.13}
.selected-projects .project-caption .project-skills{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:11px;color:var(--muted)}
.selected-projects .project-caption .text-link{align-self:flex-start;margin-top:5px;min-height:44px;padding:8px 0;border-bottom:1px solid #96afc1;font-size:12px}
.selected-projects .project-commercial .project-image{aspect-ratio:1.28}
.selected-projects .project-ecosystem{padding-top:82px}
.selected-projects .project-ecosystem .project-image{aspect-ratio:1.5}

/* A distinct, integrated bento: copy and diagrams share the same dark panels. */
.approach{background:#0c2232;color:#e9f4fc;position:relative;padding-top:88px;padding-bottom:88px}
.approach .benefits-heading{display:flex;align-items:baseline;justify-content:space-between;gap:32px;margin-bottom:14px}
.approach .benefits-heading .eyebrow{color:#9dbed6;margin:0;font-size:10px}
.approach .benefits-heading h2{font-size:clamp(30px,3.5vw,46px)}
.approach .benefit-toolbar{margin-bottom:24px}
.approach .graphic-motion-toggle{color:#b6d4e8;border-color:#9bc2db40;background:none}
.approach .benefit-grid{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:repeat(2,minmax(250px,auto));gap:18px}
.approach .benefit-card{border:1px solid #b9d9eb24;border-radius:16px;overflow:hidden;background:#132d40;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-width:0}
.approach .benefit-card:first-child{grid-row:1/3;display:flex;flex-direction:column-reverse;justify-content:space-between;background:radial-gradient(ellipse at 5% 100%,#29537455,transparent 70%),#153247}
.approach .benefit-copy{border:0;padding:30px 24px;grid-column:1;grid-row:1}
.approach .benefit-copy h3{font-size:clamp(23px,2.1vw,29px);line-height:1.15;color:#eef7fd;margin:0 0 15px}
.approach .benefit-copy p{font-size:14px;line-height:1.6;color:#b6cbdc;max-width:340px}
.approach .benefit-card:first-child .benefit-copy{padding:38px 36px 0;width:100%}
.approach .benefit-card:first-child .benefit-copy h3{font-size:clamp(29px,3vw,39px);max-width:340px}
.approach .benefit-art{height:240px;width:100%;padding:24px 18px;margin:0;grid-column:2;grid-row:1;max-width:none;background:none;border:0;border-radius:0}
.approach .benefit-card:first-child .benefit-art{height:330px;padding:34px 44px}
.approach .benefit-art:before{opacity:.13}
.approach .graphic-caption{color:#a9c5d9;font-size:8px;left:20px;right:20px;top:16px}
.approach .mini-path{max-width:280px}
.approach .mini-system{padding:16px;max-width:220px;font-size:10px}
.approach .mini-system .type-specimen{font-size:40px}
.approach .system-backplate{opacity:.3}
.approach .component-chip{font-size:8px;bottom:12px;right:12px}
.approach .mini-delivery{gap:8px;max-width:230px}
.approach .mini-delivery>div{padding:11px 9px;gap:8px}
.approach .mini-delivery strong{font-size:11px}
.approach .release-status{font-size:8px;bottom:12px;left:10px;right:10px;color:#a9c5d9}
@media(max-width:960px){
 .selected-projects .project-residential{gap:28px;grid-template-columns:1.4fr 1fr}
 .selected-projects .project-residential .project-caption h3{font-size:29px}
 .approach .benefit-grid{grid-template-columns:1fr 1fr}
 .approach .benefit-card{display:flex;flex-direction:column-reverse;justify-content:space-between}
 .approach .benefit-card:first-child{grid-row:1/3}
 .approach .benefit-art{height:210px}
 .approach .benefit-card:first-child .benefit-art{height:300px;padding:30px 20px}
 .approach .benefit-copy{padding:24px 24px 0;width:100%}
}
@media(max-width:700px){
 .selected-projects{grid-template-columns:1fr;gap:44px}
 .selected-projects .project-residential{display:block;padding-bottom:32px}
 .selected-projects .project-residential .project-image{aspect-ratio:1.3}
 .selected-projects .project-residential .project-caption{padding-top:22px}
 .selected-projects .project-commercial .project-image{aspect-ratio:1.5}
 .selected-projects .project-ecosystem{padding-top:0}
 .selected-projects .project-ecosystem .project-image{aspect-ratio:1.6}
 .selected-projects .project-caption{gap:12px}
 .selected-projects .project-caption h3,.selected-projects .project-residential .project-caption h3{font-size:27px}
 .approach{padding:64px 0}
 .approach .benefits-heading{display:block}
 .approach .benefits-heading .eyebrow{margin-bottom:15px}
 .approach .benefit-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:14px}
 .approach .benefit-card:first-child{grid-row:auto}
 .approach .benefit-copy,.approach .benefit-card:first-child .benefit-copy{padding:28px 28px 0}
 .approach .benefit-copy h3,.approach .benefit-card:first-child .benefit-copy h3{font-size:29px;max-width:300px}
 .approach .benefit-art,.approach .benefit-card:first-child .benefit-art{height:245px;padding:25px 40px}
 .approach .mini-system{max-width:245px}
 .approach .mini-delivery{max-width:260px}
}

/* Bento cleanup: readable labels, fewer floating extras, deliberate sequences. */
.approach .benefit-card{border-color:#52738b80;border-radius:14px}
.approach .benefit-copy p{color:#c4d7e5}
.approach .graphic-caption,.approach .release-status{color:#c1d8e8;font-size:9px;line-height:1.6}
.approach .graphic-caption>span{color:#b9dfff}
.approach .benefit-art:before{display:none}
.approach .system-backplate{display:none}
.approach .mini-system{padding:18px;max-width:236px;border:1px solid #d4e4ef;background:#f5faff;box-shadow:0 14px 30px #06142033}
.approach .system-type{margin:18px 0;gap:15px}
.approach .system-type>span:not(.type-specimen),.approach .system-note{color:#3b5365}
.approach .system-type .type-specimen{font-size:38px;color:#102b3d}
.approach .system-swatches{gap:8px}
.approach .system-swatches i{width:26px;height:26px;flex:none;border:1px solid #57738b}
.approach .system-controls{font-size:10px;gap:6px}
.approach .system-controls span{padding:8px;color:#193347;background:#fff;border-color:#647f94}
.approach .system-controls span:first-child{color:#f2f8ff;background:#173b57;border-color:#173b57}
.approach .system-note{font-size:9px;line-height:1.5;margin-top:15px}
.approach .component-chip{display:none}
.approach .mini-path>span,.approach .mini-path>div span{background:#f5faff;color:#183347;border:1px solid #8dabbe;box-shadow:none}
.approach .mini-path strong{background:#244b67;color:#f5faff;border:1px solid #8dabbe}
.approach .mini-path b{color:#c6e8ff}
.approach .mini-path i{background:#789db9;width:2px}
.approach .graphic-cursor{color:#c9e8ff;right:20px;bottom:16px;gap:5px}
.approach .graphic-cursor>span{background:#e1f1fc;color:#123046;border:1px solid #abcde4;font-size:9px;margin-top:0;padding:6px 9px}
.approach .mini-delivery>div,.approach .mini-delivery>div:last-child{background:#1b3c54;border:1px solid #7899b1;color:#f1f8fd;box-shadow:none;padding:13px 10px;gap:10px}
.approach .mini-delivery strong{font-size:12px}
.approach .mini-delivery span,.approach .mini-delivery>div:last-child span{color:#c3dced;font-size:10px}
.approach .mini-delivery b,.approach .mini-delivery>div:last-child b{color:#d7efff;background:#305875}
.approach .release-status{left:18px;bottom:13px;font:9px/1.5 var(--sans)}
.approach .release-status>span{background:#b9dfff;width:6px;height:6px;flex:none}

/* Override earlier global motion resets; each graphic now tells a sequence. */
.approach .benefit-art *{animation:none!important}
@keyframes bento-light-node{
 0%,28%{background:#bde2ff;color:#102b3d;border-color:#eaf7ff;box-shadow:0 0 0 3px #a9d9ff30,0 0 22px #94cdff25;transform:translateY(-2px)}
 34%,94%{background:#f5faff;color:#183347;border-color:#8dabbe;box-shadow:none;transform:translateY(0)}
 100%{background:#bde2ff;color:#102b3d;border-color:#eaf7ff;box-shadow:0 0 0 3px #a9d9ff30;transform:translateY(-2px)}
}
@keyframes bento-link-light{0%,28%{background:#d2edff;box-shadow:0 0 9px #b9dfff}34%,94%{background:#789db9;box-shadow:none}100%{background:#d2edff;box-shadow:0 0 9px #b9dfff}}
@keyframes bento-component-ring{0%,26%{outline:2px solid #347cbb;outline-offset:5px;filter:brightness(1.06);transform:translateY(-2px)}34%,94%{outline:2px solid transparent;outline-offset:2px;filter:none;transform:none}100%{outline:2px solid #347cbb;outline-offset:5px;transform:translateY(-2px)}}
@keyframes bento-delivery-light{0%,28%{background:#c3e5ff;color:#102b3d;border-color:#ecf8ff;box-shadow:0 0 0 3px #a6d7ff22;transform:translateX(4px)}34%,94%{background:#1b3c54;color:#f1f8fd;border-color:#7899b1;box-shadow:none;transform:translateX(0)}100%{background:#c3e5ff;color:#102b3d;border-color:#ecf8ff;box-shadow:0 0 0 3px #a6d7ff22;transform:translateX(4px)}}
@keyframes bento-check-light{0%,28%,100%{background:#173b57;color:#fff;transform:scale(1.08)}34%,94%{background:#305875;color:#d7efff;transform:scale(1)}}
@keyframes bento-status{0%,70%,100%{box-shadow:0 0 0 0 #b9dfff00}78%,90%{box-shadow:0 0 0 4px #b9dfff33}}
.approach .mini-path>span{animation:bento-light-node 9s ease-in-out infinite!important}
.approach .mini-path>div span{animation:bento-light-node 9s ease-in-out -6s infinite!important}
.approach .mini-path strong{animation:bento-light-node 9s ease-in-out -3s infinite!important}
.approach .mini-path i:first-of-type{animation:bento-link-light 9s ease-in-out infinite!important}
.approach .mini-path i:last-of-type{animation:bento-link-light 9s ease-in-out -6s infinite!important}
.approach .system-swatches{animation:bento-component-ring 10.5s ease-in-out infinite!important;border-radius:4px}
.approach .system-type{animation:bento-component-ring 10.5s ease-in-out -7s infinite!important;border-radius:4px}
.approach .system-controls{animation:bento-component-ring 10.5s ease-in-out -3.5s infinite!important;border-radius:4px}
.approach .mini-delivery>div{animation:bento-delivery-light 9s ease-in-out infinite!important}
.approach .mini-delivery>div:nth-child(2){animation-delay:-6s!important}
.approach .mini-delivery>div:nth-child(3){animation-delay:-3s!important}
.approach .mini-delivery b{animation:bento-check-light 9s ease-in-out infinite!important}
.approach .mini-delivery>div:nth-child(2) b{animation-delay:-6s!important}
.approach .mini-delivery>div:nth-child(3) b{animation-delay:-3s!important}
.approach .release-status>span{animation:bento-status 9s ease-in-out infinite!important}
.approach.graphics-paused .benefit-art *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.approach .benefit-art *{animation:none!important;transform:none!important}}
@media(max-width:700px){.approach .benefit-art{padding-top:32px}.approach .graphic-caption{left:24px;right:24px;top:12px}.approach .mini-system{max-width:245px}}
/* Keep secondary labels and icons legible during the light phase. */
.approach .mini-path strong b{color:#173b57}
.approach .mini-delivery>div span,.approach .mini-delivery>div:last-child span{color:inherit}

/* Return to the original navy / cyan / icy-white atmosphere, with a broader white light. */
.residential-pdp-composition,.project-preview-scene{
 --light-x:24%;--light-y:18%;--blue-x:100%;--blue-y:100%;
 background-color:#17394f;
 background-image:radial-gradient(ellipse 105% 115% at var(--light-x) var(--light-y),#fff 0%,#f8fcff 20%,#e0f1fb 36%,#afd9ec 52%,#54a4c4a6 68%,#2e53b760 82%,transparent 100%),radial-gradient(ellipse 90% 110% at var(--blue-x) var(--blue-y),#2e53b7 0%,#234f79 46%,#102d42 100%);
}
.commercial-preview{--light-x:85%;--light-y:17%;--blue-x:0%;--blue-y:100%}
.ecosystem-preview{--light-x:75%;--light-y:88%;--blue-x:0%;--blue-y:0%}
.selected-projects .project-image{border:1px solid #e8f3fa;box-shadow:0 1px 0 #fff}
.pdp-desktop-sheet,.pdp-mobile-sheet,.commercial-main-sheet,.commercial-detail-sheet,.ecosystem-overview-sheet{box-shadow:0 18px 42px -14px #071e3a45,0 2px 9px #071e3a0d}

/* One shared hero atmosphere: exact color stops, soft edges, and dotted texture. */
:root{--portfolio-project-glow:radial-gradient(ellipse 29% 52% at 75% 32%,#d7e9f5 0%,#9cd5e9 14%,#259ebc 31%,#2e53b780 50%,#2e53b724 64%,transparent 78%),radial-gradient(ellipse 40% 60% at 94% 74%,#2e53b770 0%,#2e53b729 35%,transparent 73%)}
.hero .gradient-field{background:var(--portfolio-project-glow)}
.residential-pdp-composition,.project-preview-scene{--glow-turn:0deg;background:#0b2232;background-image:none}
.commercial-preview{--glow-turn:90deg}.ecosystem-preview{--glow-turn:180deg}
.residential-pdp-composition:before,.project-preview-scene:before{content:'';position:absolute;inset:-40%;z-index:0;background:var(--portfolio-project-glow);filter:blur(26px);mask-image:radial-gradient(ellipse at 65% 50%,#000 32%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse at 65% 50%,#000 32%,transparent 85%);opacity:.95;rotate:var(--glow-turn);translate:0 var(--project-glow-depth,0px);pointer-events:none}
.residential-pdp-composition:after,.project-preview-scene:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,#d7e9f550 .7px,transparent 1px);background-size:6px 6px;mask-image:linear-gradient(90deg,transparent 0%,#000 65%);opacity:.3}
.pdp-desktop-sheet,.pdp-mobile-sheet,.commercial-main-sheet,.commercial-detail-sheet,.ecosystem-overview-sheet{z-index:1}
.selected-projects .pdp-desktop-sheet,.selected-projects .commercial-main-sheet,.selected-projects .ecosystem-overview-sheet{translate:0 var(--project-depth,0px);will-change:translate}
.selected-projects .pdp-mobile-sheet,.selected-projects .commercial-detail-sheet{translate:0 var(--project-front-depth,0px);will-change:translate}
.selected-projects .project-image{border-color:#294658;box-shadow:none}
@media(max-width:700px){.hero .gradient-field{background:radial-gradient(ellipse 37% 55% at 77% 36%,#d7e9f5 0%,#9cd5e9 15%,#259ebc 30%,#2e53b778 50%,#2e53b725 65%,transparent 80%)}}
@media(prefers-reduced-motion:reduce){
 .selected-projects .pdp-desktop-sheet,.selected-projects .pdp-mobile-sheet,.selected-projects .commercial-main-sheet,.selected-projects .commercial-detail-sheet,.selected-projects .ecosystem-overview-sheet{translate:none;will-change:auto}
 .residential-pdp-composition:before,.project-preview-scene:before{translate:none}
}

/* Hero-only continuous wave flow; palette, texture, and foreground stay intact. */
.hero-flow-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;filter:blur(22px);opacity:0;transition:opacity .8s}
.hero.wave-ready .hero-flow-canvas{opacity:.95}
.hero.wave-ready .gradient-field,.hero.wave-ready .aura-light{opacity:0;animation:none}
@media(prefers-reduced-motion:reduce){.hero-flow-canvas{transition:none}}

/* Aspirational spaces lead the project stories; quiet depth stays within each image. */
.work .selected-projects .project-image{background:#d7e9f5;border:0}
.work .selected-projects .project-image>img.project-lifestyle{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translate3d(0,var(--project-depth,0px),0) scale(1.10);transition:none;will-change:transform;border:0;border-radius:0}
.hero-project .hero-feature-media>img.project-lifestyle{width:100%;height:100%;object-fit:cover;object-position:center;transform:none}
.hero:after{background:linear-gradient(90deg,#0b2232ed 0%,#0b2232b8 38%,#0b22328f 58%,#0b223222 84%,#0b223212 100%)}
@media(prefers-reduced-motion:reduce){.work .selected-projects .project-image>img.project-lifestyle{transform:none;will-change:auto}}

/* Give text, animated diagrams, and their annotations separate space. */
.approach .benefit-grid{gap:22px;grid-template-rows:repeat(2,minmax(320px,auto))}
.approach .benefit-card{column-gap:16px}
.approach .benefit-copy{min-width:0;padding:34px 0 34px 32px}
.approach .benefit-copy h3{line-height:1.22;margin-bottom:18px}
.approach .benefit-copy p{line-height:1.7}
.approach .benefit-card:first-child .benefit-copy{padding:40px 40px 0}
.approach .benefit-art,.approach .benefit-card:first-child .benefit-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;height:auto;min-height:320px;padding:32px 28px;overflow:visible}
.approach .benefit-card:first-child .benefit-art{min-height:370px;padding:32px 40px;gap:26px}
.approach .graphic-caption{position:static;inset:auto;display:flex;align-items:center;gap:12px;justify-content:space-between;width:100%;font-size:9px;line-height:1.6;flex:none}
.approach .graphic-cursor{position:static;inset:auto;align-self:flex-end;flex:none;max-width:100%}
.approach .graphic-cursor>span{white-space:normal}
.approach .release-status{position:static;inset:auto;max-width:100%;margin:0;line-height:1.6;gap:8px;flex:none}
.approach .mini-path,.approach .mini-delivery,.approach .mini-system{width:100%;flex:none;margin:0;min-width:0}
.approach .mini-path{max-width:270px}
.approach .mini-path>div{gap:12px}
.approach .mini-system{max-width:235px;padding:20px}
.approach .system-type{gap:14px}
.approach .system-controls{flex-wrap:wrap;gap:8px}
.approach .mini-delivery{max-width:250px;gap:12px}
.approach .mini-delivery>div{padding:14px 10px}
@media(max-width:960px){
 .approach .benefit-card{gap:12px}
 .approach .benefit-copy,.approach .benefit-card:first-child .benefit-copy{padding:32px 30px 0}
 .approach .benefit-art,.approach .benefit-card:first-child .benefit-art{padding:28px 30px;min-height:310px}
 .approach .benefit-card:first-child .benefit-art{min-height:360px}
}
@media(max-width:700px){
 .approach .benefit-grid{grid-template-rows:auto;gap:20px}
 .approach .benefit-card{gap:20px}
 .approach .benefit-copy,.approach .benefit-card:first-child .benefit-copy{padding:32px 28px 0}
 .approach .benefit-art,.approach .benefit-card:first-child .benefit-art{padding:16px 28px 32px;min-height:300px;gap:24px}
 .approach .benefit-card:first-child .benefit-art{min-height:350px}
 .work .selected-projects .project-image>img.project-lifestyle{transform:translate3d(0,var(--project-depth,0px),0) scale(1.14)}
}
@media(prefers-reduced-motion:reduce){.work .selected-projects .project-image>img.project-lifestyle{transform:none}}

/* A more legible, deliberate route sequence in the first bento. */
@keyframes bento-route-active{
 0%,27%,100%{background:#bde2ff;color:#102b3d;border-color:#f2faff;box-shadow:0 0 0 4px #bde2ff33,0 7px 20px #0003;transform:translateY(-4px) scale(1.035)}
 34%,94%{background:#244b67;color:#f1f8ff;border-color:#7195af;box-shadow:none;transform:none}
}
@keyframes bento-route-connector{0%,27%,100%{background:#e8f7ff;box-shadow:0 0 12px #b9dfff;scale:1.5 1}34%,94%{background:#577b97;box-shadow:none;scale:1}}
@keyframes bento-route-arrow{0%,27%,100%{color:#102b3d;transform:translate(3px,-3px)}34%,94%{color:#d9eeff;transform:none}}
.approach .mini-path>span{animation:bento-route-active 7.5s ease-in-out infinite!important}
.approach .mini-path>div span:first-child{animation:bento-route-active 7.5s ease-in-out -5s infinite!important}
.approach .mini-path>div span:last-child{animation:bento-route-active 7.5s ease-in-out -4.35s infinite!important}
.approach .mini-path strong{animation:bento-route-active 7.5s ease-in-out -2.5s infinite!important}
.approach .mini-path i:first-of-type{animation:bento-route-connector 7.5s ease-in-out -.8s infinite!important}
.approach .mini-path i:last-of-type{animation:bento-route-connector 7.5s ease-in-out -5.8s infinite!important}
.approach .mini-path strong b{animation:bento-route-arrow 7.5s ease-in-out -2.5s infinite!important}
.approach.graphics-paused .benefit-art *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.approach .benefit-art *{animation:none!important;transform:none!important}}

/* Typography system: expressive sans headlines, mono editorial labels. */
:root{--type-display:clamp(44px,5.2vw,72px);--type-section:clamp(34px,3.7vw,50px);--type-project:clamp(25px,2.2vw,30px)}
h1,h2,h3{font-family:var(--sans);word-spacing:normal}
.hero h1{font:600 var(--type-display)/1.06 var(--sans);letter-spacing:-.045em;word-spacing:normal;max-width:15ch;text-wrap:balance}
.hero h1 br{display:none}
.hero .hero-copy{font-size:18px;line-height:1.65;max-width:49ch;margin-top:30px}
.about-reference-copy h2{font:400 clamp(29px,3.15vw,42px)/1.3 var(--sans);letter-spacing:-.025em;word-spacing:normal;max-width:38ch}
.about-word:not(:last-child){margin-inline-end:.24em}
.work .section-head h2,.approach .benefits-heading h2,.skills-intro h2,.contact-main h2{
 font:500 var(--type-section)/1.12 var(--sans);letter-spacing:-.035em;word-spacing:normal;text-wrap:balance;
}
.work .section-head{margin-bottom:44px}
.work .section-head h2{max-width:19ch}
.work .selected-projects .project-caption h3,
.work .selected-projects .project-residential .project-caption h3{
 font:500 var(--type-project)/1.24 var(--sans);letter-spacing:-.025em;word-spacing:normal;text-wrap:pretty;max-width:24ch;margin:0;
}
.work .selected-projects .project-residential .project-caption h3{font-size:clamp(28px,2.6vw,36px);max-width:23ch}
.work .selected-projects .project-caption{gap:20px}
.work .selected-projects .project-commercial .project-caption,
.work .selected-projects .project-ecosystem .project-caption{padding-top:26px}
.work .selected-projects .project-caption .project-skills{font:400 13px/1.6 var(--sans);gap:6px 18px}
.work .selected-projects .project-caption .text-link{font:600 14px/1.5 var(--sans);margin-top:6px}
.approach .benefits-heading{align-items:flex-start;margin-bottom:30px}
.approach .benefits-heading .eyebrow{padding-top:10px}
.approach .benefit-copy h3,.approach .benefit-card:first-child .benefit-copy h3{
 font:600 clamp(25px,2.3vw,31px)/1.2 var(--sans);letter-spacing:-.025em;word-spacing:normal;text-wrap:pretty;margin-bottom:18px;
}
.approach .benefit-card:first-child .benefit-copy h3{font-size:clamp(29px,2.9vw,38px)}
.approach .benefit-copy p{font:400 16px/1.65 var(--sans)}
.skill-item h3{font:600 clamp(22px,2.25vw,28px)/1.25 var(--sans);letter-spacing:-.02em}
.skills-intro>p:not(.eyebrow),.skill-body p{font-size:16px;line-height:1.7}
.eyebrow{font:500 11px/1.6 var(--mono);letter-spacing:.08em}
.testimonial blockquote{font:400 clamp(28px,3.3vw,44px)/1.35 var(--sans);letter-spacing:-.025em}
.testimonial .reviewer strong{font-weight:600}
@media(max-width:700px){
 :root{--type-display:clamp(40px,9.8vw,60px);--type-section:clamp(31px,7.5vw,40px);--type-project:clamp(23px,5.9vw,26px)}
 .hero h1{max-width:15ch;line-height:1.08;letter-spacing:-.035em}
 .hero .hero-copy{font-size:17px;line-height:1.65;margin-top:26px}
 .work .section-head{margin-bottom:30px}
 .work .selected-projects .project-caption h3,
 .work .selected-projects .project-residential .project-caption h3{font-size:var(--type-project);line-height:1.28;max-width:100%}
 .work .selected-projects .project-caption{gap:17px}
 .work .selected-projects .project-residential .project-caption{padding-top:24px}
 .approach .benefits-heading .eyebrow{padding-top:0}
 .approach .benefit-copy h3,.approach .benefit-card:first-child .benefit-copy h3{font-size:28px}
}

/* Punctuation follows its headline color. */
.work .lime-dot{color:inherit}

/* Section introduction leads; individual project titles sit one level below. */
@media(max-width:700px){
 .work .section-head h2{font-size:clamp(32px,8.5vw,38px);line-height:1.12;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
}

/* Compact project actions use the established Columbia-blue button treatment. */
.work .selected-projects .project-caption .case-study-button{
 display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:46px;padding:12px 16px;margin-top:6px;
 background:var(--columbia,#b9d9eb);color:var(--navy);border:1px solid transparent;border-radius:5px;font:600 13px/1.5 var(--sans);transition:background .2s;
}
.work .selected-projects .project-caption .case-study-button:hover{background:#a6cde5}
.work .selected-projects .project-caption .case-study-button .link-arrow{width:18px;height:18px;flex:none}

/* Quiet introductory skills above the hero headline. */
.hero .hero-skills ul{font-size:11px;line-height:1.95;letter-spacing:.09em;color:#b9d9eb}
.hero .hero-skills li{display:flex;align-items:baseline;gap:9px}
.hero .hero-skills li:before{content:'/';color:inherit;flex:none}
@media(max-width:700px){.hero .hero-skills ul{font-size:9px;line-height:2;letter-spacing:.08em}}

/* Project metadata precedes the title in the reading order. */
.work .selected-projects .project-caption .project-skills{margin:0 0 2px}
.contact-main h2{max-width:19ch}
@media(max-width:700px){.work .selected-projects .project-caption{gap:18px}}

/* A tighter rhythm through selected work, with the same image sizes and type scale. */
.work.section{padding-top:60px;padding-bottom:64px}
.work .section-head{margin-bottom:30px}
.work .selected-projects{row-gap:44px}
.work .selected-projects .project-caption{gap:13px}
.work .selected-projects .project-caption .project-skills{margin-bottom:0}
.work .selected-projects .project-commercial .project-caption,
.work .selected-projects .project-ecosystem .project-caption{padding-top:20px}
.work .selected-projects .project-caption .case-study-button{margin-top:2px}
@media(min-width:701px) and (max-width:999px){
 .work .selected-projects .project-residential{padding-bottom:32px}
 .work .selected-projects .project-ecosystem{padding-top:40px}
}
@media(max-width:700px){
 .work.section{padding-top:44px;padding-bottom:48px}
 .work .section-head{margin-bottom:24px}
 .work .selected-projects{row-gap:32px}
 .work .selected-projects .project-residential{padding-bottom:22px}
 .work .selected-projects .project-residential .project-caption{padding-top:20px}
 .work .selected-projects .project-caption{gap:12px}
}

/* Hiring review: make scope and ownership clear without adding long sections. */
.hero-positioning{font:400 17px/1.6 var(--sans);color:#d7e9f5;max-width:47ch;margin:26px 0 28px}
.work .selected-projects .project-image{position:relative}
.work .selected-projects .project-image-label{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:fit-content;max-width:calc(100% - 36px);padding:10px 13px;background:#0b2232ed;color:#f2f8fc;border:1px solid #d7e9f533;border-radius:5px;font:400 11px/1.5 var(--sans);pointer-events:none}
.project-image-label strong{font-size:12px;font-weight:600}
.project-image-label>span{color:#bdd7e9}
.work .selected-projects .project-caption .project-summary{font:400 16px/1.6 var(--sans);color:var(--muted);max-width:52ch;margin:0}
.expertise-strip{padding-top:48px;padding-bottom:48px}
.expertise-strip>.eyebrow{font:500 11px/1.6 var(--mono);letter-spacing:.08em;margin-bottom:24px}
.expertise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.expertise-grid>div{border-top:1px solid var(--line);padding-top:18px}
.expertise-grid h3{font:600 19px/1.3 var(--sans);letter-spacing:-.02em;margin:0 0 10px}
.expertise-grid p{font:400 14px/1.7 var(--sans);color:var(--muted)}
.testimonial .review-takeaway{margin:0;max-width:850px;font:400 clamp(28px,3.3vw,44px)/1.35 var(--sans);letter-spacing:-.025em;color:var(--ink)}
@media(max-width:700px){
 .hero-positioning{font-size:16px;max-width:36ch;margin:24px 0}
 .work .selected-projects .project-image-label{left:12px;right:12px;bottom:12px;padding:8px 11px;max-width:calc(100% - 24px)}
 .work .selected-projects .project-caption .project-summary{font-size:15px}
 .expertise-strip{padding-top:36px;padding-bottom:36px}
 .expertise-grid{grid-template-columns:1fr;gap:20px}
 .expertise-grid>div{padding-top:14px}
 .testimonial .review-takeaway{font-size:28px}
}

/* Restore the curved, slightly angled shrink as the homepage hero exits. */
.hero{transform:scale(var(--hero-scale,1)) rotate(var(--hero-angle,0deg));transform-origin:center 58%;border-radius:var(--hero-radius,0px);will-change:transform,border-radius}
@media(prefers-reduced-motion:reduce){.hero{transform:none;border-radius:0;will-change:auto}}

/* Continue the About section's light blue behind the hero exit. */
body:not(.case-page)>main{background:#edf4f8}
.hero{transform:translateZ(0) scale(var(--hero-scale,1)) rotate(var(--hero-angle,0deg));backface-visibility:hidden;will-change:transform}
@media(prefers-reduced-motion:reduce){.hero{transform:none;will-change:auto}}

/* Straight device composition over a softly blurred fractal gradient. */
.work .selected-projects .device-preview{isolation:isolate;background:#f1f2f3;perspective:none}
.device-preview .device-atmosphere{position:absolute;inset:-4%;z-index:0;background:radial-gradient(ellipse 75% 110% at 98% 15%,#b8cbed 0%,#c6d7ee 38%,transparent 78%),radial-gradient(ellipse 65% 100% at 12% 88%,#d2e4f2 0%,transparent 80%),linear-gradient(110deg,#eef3fc 0%,#dce8f6 48%,#c3d4ee 100%);animation:none;transform:translate3d(0,calc(var(--project-glow-depth,0px) * .3),0)}
.device-preview .device-layer{position:absolute;display:block;pointer-events:none;z-index:1}
.work .selected-projects .device-preview .device-layer img{display:block;width:100%;height:auto;object-fit:contain;transform:none;transition:none;border:0;border-radius:0;filter:drop-shadow(0 12px 12px #18253016)}
.device-preview .device-laptop{width:79%;left:6%;top:16%;transform:translate3d(0,calc(var(--project-depth,0px) * .35),0);transform-origin:50% 60%}
.device-preview .device-phone{width:20%;right:8%;top:29%;z-index:2;transform:translate3d(0,calc(var(--project-front-depth,0px) * .35),0)}
@media(max-width:760px){.work .selected-projects .device-preview{height:auto;aspect-ratio:1.25;min-height:0}.device-preview .device-laptop{width:84%;left:1%;top:18%}.device-preview .device-phone{width:23%;right:7%;top:32%}}
@media(prefers-reduced-motion:reduce){.device-preview .device-laptop{transform:none}.device-preview .device-phone{transform:none}}

/* Fine dots dissolve softly across the icy blue field. */
.device-preview .device-atmosphere::before{content:none}
.device-preview .device-atmosphere::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(48,79,118,.28) .65px,transparent .95px);background-size:6px 6px;opacity:.48;mask-image:linear-gradient(115deg,#000 0%,rgba(0,0,0,.6) 28%,transparent 72%);-webkit-mask-image:linear-gradient(115deg,#000 0%,rgba(0,0,0,.6) 28%,transparent 72%)}
.work .selected-projects .device-preview .device-laptop img{filter:drop-shadow(0 14px 14px rgba(24,42,64,.18))}
.work .selected-projects .device-preview .device-phone img{filter:drop-shadow(0 10px 10px rgba(24,42,64,.2))}

/* Slow, soft color travel adds depth without moving the devices together. */
.device-preview .device-atmosphere{background:radial-gradient(ellipse 65% 90% at 88% 12%,#b4c5ec 0%,transparent 76%),radial-gradient(ellipse 60% 85% at 5% 90%,#c2e0ed 0%,transparent 78%),radial-gradient(ellipse 55% 85% at 48% 62%,#d7dff5 0%,transparent 82%),linear-gradient(115deg,#edf4fc,#c4d8ef);background-size:125% 120%;animation:device-color-flow 20s ease-in-out infinite alternate}
@keyframes device-color-flow{from{background-position:0% 15%;}to{background-position:90% 80%;}}
.project-commercial .device-atmosphere{background:radial-gradient(ellipse 75% 90% at 5% 15%,#c3d5f0 0%,transparent 76%),radial-gradient(ellipse 65% 90% at 95% 88%,#bcdde4 0%,transparent 78%),radial-gradient(ellipse 60% 90% at 52% 48%,#e1e5f6 0%,transparent 82%),linear-gradient(120deg,#eaf2fb,#cbdcf0);background-size:125% 120%;animation-delay:-8s}
.commercial-laptop{filter:drop-shadow(0 14px 14px #182a402e)}
.commercial-laptop-lid{position:relative;display:block;width:90%;margin:auto;padding:2.2% 1.4% 1.5%;background:linear-gradient(135deg,#40576b,#14283d 55%,#3b5068);border:1px solid #778b9e;border-radius:9px 9px 3px 3px}
.commercial-laptop-camera{position:absolute;width:3px;height:3px;border-radius:50%;background:#08141e;top:2%;left:50%}
.commercial-laptop-screen{display:block;aspect-ratio:1.58;overflow:hidden;background:#17191c}
.work .selected-projects .device-preview .commercial-laptop-screen img{width:100%;height:auto;filter:none}
.commercial-laptop-base{display:block;position:relative;height:10px;border-radius:1px 1px 60% 60%;background:linear-gradient(#8493a2,#41586e 55%,#172e43);border-top:1px solid #a3b0bc}
.commercial-laptop-base:before{content:"";display:block;width:17%;height:3px;margin:auto;background:#263d51;border-radius:0 0 5px 5px}
@media(prefers-reduced-motion:reduce){.device-preview .device-atmosphere{animation:none}}

/* One modern, thin-bezel MacBook Air with a scrolling homepage viewport. */
.work .selected-projects .commercial-device-preview .macbook-air{width:88%;left:6%;top:20%;filter:drop-shadow(0 15px 16px rgba(28,39,53,.2))}
.macbook-air .commercial-laptop-lid{width:88%;padding:1.1% 1.05% 1.2%;background:linear-gradient(140deg,#777b80,#474b50 44%,#8b8e92);border:1px solid #a8aaac;border-radius:12px 12px 5px 5px;box-shadow:inset 0 0 0 1px #24262a}
.macbook-air .commercial-laptop-screen{position:relative;aspect-ratio:1.54;border:4px solid #101114;border-radius:8px 8px 3px 3px;overflow:hidden;background:#17191c}
.macbook-air .commercial-laptop-camera{top:1.5%;left:44.5%;width:11%;height:4.3%;background:#101114;border-radius:0 0 5px 5px;z-index:2}
.macbook-air .commercial-laptop-camera:after{content:"";position:absolute;left:48%;top:28%;width:3px;height:3px;border-radius:50%;background:#263343;box-shadow:0 0 1px #758089}
.macbook-air .commercial-laptop-base{height:8px;background:linear-gradient(#a0a2a5 0%,#777b80 30%,#54575c 72%,#34373c 100%);border-top:1px solid #b3b5b8;border-radius:1px 1px 45% 45%;box-shadow:0 2px 2px #18212a20}
.macbook-air .commercial-laptop-base:before{width:13%;height:3px;background:#4b4f54;border-radius:0 0 5px 5px}
.work .selected-projects .device-preview .macbook-air .commercial-laptop-screen img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;filter:none;transform:translateY(0);animation:none;transition:transform 1.8s cubic-bezier(.22,.61,.36,1);will-change:auto}

@media(max-width:760px){.work .selected-projects .commercial-device-preview .macbook-air{width:94%;left:3%;top:22%}.macbook-air .commercial-laptop-screen{border-width:3px}.macbook-air .commercial-laptop-lid{border-radius:9px 9px 4px 4px}.macbook-air .commercial-laptop-base{height:6px}}
@media(prefers-reduced-motion:reduce){.work .selected-projects .device-preview .macbook-air .commercial-laptop-screen img{animation:none}}

/* A project-specific view of brands supported by a shared web foundation. */
.work .selected-projects .ahf-system-preview{display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;padding:clamp(22px,3vw,42px);background:radial-gradient(ellipse at 90% 5%,#35566d88,transparent 65%),radial-gradient(ellipse at 0% 100%,#294e7b88,transparent 65%),#102a3d;color:#edf7ff}
.ahf-system-graphic{display:flex;flex-direction:column;width:100%;max-width:560px;transform:translateY(calc(var(--project-depth,0px) * .3))}
.ahf-system-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}
.ahf-system-label{font:9px/1.4 var(--mono);letter-spacing:.1em;color:#b4d0e3}
.ahf-system-count{font:10px var(--mono);padding:6px 10px;border:1px solid #b4d0e340;border-radius:20px;color:#d9eaff}
.ahf-system-hub{align-self:center;display:flex;flex-direction:column;align-items:center;padding:15px 30px;background:linear-gradient(125deg,#e8f5ff,#c7dfef);border:1px solid #f4fbff;border-radius:10px;box-shadow:0 9px 25px #04111e30;color:#17374c}
.ahf-system-hub>strong{font:600 25px/1 var(--sans);letter-spacing:.02em}.ahf-system-hub strong>span{font-size:11px;letter-spacing:.16em}.ahf-system-hub>small{font:10px/1.5 var(--sans);margin-top:8px;color:#426076}
.ahf-system-connector{width:1px;height:23px;align-self:center;background:linear-gradient(#d6efff,#7099b5)}
.ahf-system-brands{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:15px;border-top:1px solid #92b5ce66}
.brand-system-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;padding:14px 6px;min-height:66px;border:1px solid #9cbdd34a;border-radius:8px;background:linear-gradient(135deg,#27465c,#1a3549);box-shadow:0 5px 14px #04111c18;animation:brand-system-glow 12s ease-in-out infinite}
.brand-system-tile>strong{font:500 clamp(12px,1.3vw,18px)/1.2 var(--sans);letter-spacing:-.025em}.brand-system-tile>small{font:8px/1.35 var(--sans);color:#b6cfdf}
.brand-system-tile:nth-child(2){animation-delay:-2s}.brand-system-tile:nth-child(3){animation-delay:-4s}.brand-system-tile:nth-child(4){animation-delay:-6s}.brand-system-tile:nth-child(5){animation-delay:-8s}.brand-system-tile:nth-child(6){animation-delay:-10s}
.ahf-system-foundation{display:flex;justify-content:space-around;gap:8px;padding-top:16px;margin-top:16px;border-top:1px solid #92b5ce40;font:9px/1.5 var(--mono);color:#c4ddeb}
@keyframes brand-system-glow{0%,35%,100%{border-color:#9cbdd34a;background-color:#1a3549;box-shadow:0 5px 14px #04111c18}12%,22%{border-color:#c3e5fcaa;box-shadow:0 0 18px #9bcfff22}}
/* Multiple soft blue currents resolve into a deep navy base. */
.approach{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 75% 45% at -5% 10%,#30617e99 0%,transparent 75%),radial-gradient(ellipse 60% 60% at 105% 35%,#284e8c80 0%,transparent 75%),radial-gradient(ellipse 65% 40% at 30% 70%,#1c536e66 0%,transparent 78%),radial-gradient(ellipse 60% 45% at 90% 100%,#223e6755 0%,transparent 75%),linear-gradient(160deg,#142f45 0%,#10283b 35%,#0b2232 65%,#081b2a 100%)}
.approach:before{content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 35% 40% at 20% 35%,#5794ba24,transparent 75%),radial-gradient(ellipse 38% 45% at 80% 68%,#4864ae26,transparent 75%);animation:bento-atmosphere-drift 24s ease-in-out infinite alternate}
@keyframes bento-atmosphere-drift{from{transform:translate(-2%,-2%)}to{transform:translate(3%,4%)}}
@media(max-width:700px){.work .selected-projects .ahf-system-preview{min-height:370px;height:auto;aspect-ratio:auto;padding:26px 22px}.ahf-system-top{margin-bottom:20px}.brand-system-tile{min-height:62px;padding:12px 4px}.brand-system-tile>strong{font-size:13px}.ahf-system-foundation{font-size:8px}}
@media(prefers-reduced-motion:reduce){.brand-system-tile,.approach:before{animation:none}.ahf-system-graphic{transform:none}}

/* Match the work-image atmosphere while giving the brand diagram a light finish. */
.work .selected-projects .ahf-system-preview{background:#dce8f6;color:#17374c}
.ahf-system-preview .ahf-system-graphic{position:relative;z-index:1}
.ahf-system-preview .ahf-system-label{color:#47657e}
.ahf-system-preview .ahf-system-count{color:#294b67;border-color:#6689aa55;background:#f4f9ff60}
.ahf-system-preview .ahf-system-hub{background:linear-gradient(125deg,#23475e,#102b40);border-color:#496980;box-shadow:0 10px 24px #26496825;color:#f0f8ff}
.ahf-system-preview .ahf-system-hub>small{color:#c3dcec}
.ahf-system-preview .ahf-system-connector{background:linear-gradient(#527692,#8ca9c2)}
.ahf-system-preview .ahf-system-brands{border-color:#6e91ae66}
.ahf-system-preview .brand-system-tile{background:linear-gradient(135deg,#f8fcffed,#e5eff9dd);border-color:#a3bcd4b3;color:#19394f;box-shadow:0 6px 16px #34547312;animation-name:brand-system-light-glow}
.ahf-system-preview .brand-system-tile>small{color:#526e83}
.ahf-system-preview .ahf-system-foundation{color:#3f607a;border-color:#6e91ae55}
@keyframes brand-system-light-glow{0%,35%,100%{border-color:#a3bcd4b3;box-shadow:0 6px 16px #34547312}12%,22%{border-color:#668cba;box-shadow:0 0 20px #7ba4d444}}

/* Brighter perimeter light, with a quiet dark dot texture above the color. */
.contact .gradient-field{inset:-12%;background:radial-gradient(ellipse 38% 80% at 103% 16%,#d7e9f5 0%,#9cd5e9 20%,#259ebc88 43%,transparent 76%),radial-gradient(ellipse 50% 65% at 86% 110%,#95b9efb3 0%,#2e53b799 38%,transparent 76%),radial-gradient(ellipse 36% 60% at -5% 100%,#9cd5e973 0%,#259ebc42 38%,transparent 78%);filter:blur(26px);mask-image:none;-webkit-mask-image:none;opacity:1}
.contact:after{background:linear-gradient(90deg,#0b2232b3 0%,#0b22325c 45%,#0b223208 85%)}
.contact .footer-aura:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(circle,rgba(5,24,39,.5) .65px,transparent 1px);background-size:6px 6px;opacity:.38;mask-image:radial-gradient(ellipse 70% 100% at 100% 45%,#000 12%,transparent 90%),radial-gradient(ellipse 45% 60% at 0% 100%,#000 0%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse 70% 100% at 100% 45%,#000 12%,transparent 90%),radial-gradient(ellipse 45% 60% at 0% 100%,#000 0%,transparent 90%)}
@media(max-width:760px){.contact .gradient-field{inset:-10% -25%;filter:blur(22px);opacity:1}}

/* A quiet still preview; reveal a little more only with a deliberate hover. */
@media(hover:hover) and (pointer:fine) and (min-width:761px) and (prefers-reduced-motion:no-preference){
 .work .selected-projects .commercial-device-preview:hover .macbook-air .commercial-laptop-screen img,
 .work .selected-projects .commercial-device-preview:focus-visible .macbook-air .commercial-laptop-screen img{transform:translateY(-7%)}
}
@media(prefers-reduced-motion:reduce){.work .selected-projects .device-preview .macbook-air .commercial-laptop-screen img{transition:none;transform:none}}

/* Anchor the selected work introduction with an eyebrow and desktop centering. */
.work .work-heading{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.work .work-heading .eyebrow{margin:0;padding:0;color:var(--muted)}
@media(min-width:761px){.work .work-heading{align-items:center;text-align:center}.work .work-heading h2{margin-inline:auto}}

/* Featured work: a compact project preview in the same palette as the work cards. */
.hero-project .hero-feature-work{display:flex;align-items:center;justify-content:center;opacity:1;isolation:isolate;background:radial-gradient(ellipse at 80% 20%,#80afdb 0%,#315d9a 30%,transparent 70%),radial-gradient(ellipse at 0% 100%,#56839e,transparent 65%),#102a43;border:1px solid #b9d9eb33}
.hero-project .hero-feature-work>img.hero-feature-device{width:94%;height:auto;max-height:95%;object-fit:contain;object-position:center;border:0;border-radius:0;filter:drop-shadow(0 8px 9px #06172955);transform:none}
.hero-project .hero-feature-title{font-size:10px;line-height:1.5;text-align:left}
/* Center the bento introduction while preserving the card layout. */
.approach .benefits-heading{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:14px}
.approach .benefits-heading .eyebrow{margin:0;padding:0}
.approach .benefits-heading h2{margin:0 auto}

/* Consistent section markers and a calm featured-work backdrop. */
.eyebrow:before{content:'/';display:inline-block;margin-right:.65em;opacity:.7}
.hero-project .hero-feature-work{background:radial-gradient(ellipse at 85% 18%,#b4ccdb30 0%,transparent 62%),radial-gradient(ellipse at 15% 100%,#42677d24,transparent 65%),#0c2436;border-color:#b9d9eb26}
@media(min-width:761px){.work .work-heading{align-items:center;text-align:center}.work .work-heading h2{max-width:none;white-space:nowrap;font-size:clamp(28px,4.1vw,52px)}}
/* An editorial close: direct contact, a small sitemap, and a restrained bottom line. */
.contact-editorial{padding-top:76px;padding-bottom:28px}
.footer-editorial-main{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(100px,.65fr) minmax(100px,.65fr);gap:48px;padding-bottom:64px}
.contact-editorial .eyebrow{color:#c0d6e6;font-size:10px;margin:0 0 24px;padding:0}
.footer-invitation h2{font:400 clamp(44px,6.8vw,88px)/1.05 var(--sans);letter-spacing:-.055em;margin:0 0 28px;color:#f3f9fd}.footer-invitation h2>span{color:#b9d9eb}
.footer-email{display:inline-flex;align-items:center;gap:24px;font-size:clamp(17px,2.2vw,25px);letter-spacing:-.025em;border-bottom:1px solid #d7e9f54a;padding:0 0 9px}.footer-email svg{width:23px;height:23px;flex-shrink:0;transition:transform .25s}.footer-email:hover svg{transform:translate(2px,-2px)}
.footer-link-group{display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding-top:10px;font-size:14px}.footer-link-group .eyebrow{margin-bottom:8px}.footer-link-group a:hover{text-decoration:underline;text-underline-offset:5px}
.contact-editorial .footer-editorial-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #d7e9f52e;padding-top:24px;margin-top:0}.footer-editorial-bottom .identity img{width:28px;height:28px}.footer-editorial-bottom p,.footer-return{font:11px/1.5 var(--sans);color:#d0e0eb}.footer-return{padding:10px 0}
@media(max-width:760px){.contact-editorial{padding-top:52px}.footer-editorial-main{grid-template-columns:1fr 1fr;gap:34px 24px;padding-bottom:38px}.footer-invitation{grid-column:1/-1}.footer-invitation h2{margin-bottom:22px}.footer-link-group{padding-top:0}.contact-editorial .footer-editorial-bottom{flex-wrap:wrap;gap:18px}.footer-editorial-bottom .identity{flex-basis:100%}.footer-email{gap:16px}.contact-editorial .eyebrow{margin-bottom:18px}.footer-link-group .eyebrow{margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.footer-email svg{transition:none}}

/* Softer bento sequences: longer fades and quiet staggered peaks. */
@keyframes bento-light-node{0%,100%{background:#f5faff;color:#183347;border-color:#8dabbe;box-shadow:0 0 0 0 #a9d9ff00;transform:translateY(0)}45%,55%{background:#dcefff;color:#183347;border-color:#cce9ff;box-shadow:0 0 0 2px #a9d9ff16,0 0 20px #94cdff12;transform:translateY(-1px)}}
@keyframes bento-link-light{0%,100%{background:#789db9;box-shadow:0 0 0 #b9dfff00}45%,55%{background:#bddcef;box-shadow:0 0 8px #b9dfff33}}
@keyframes bento-component-ring{0%,100%{outline:1px solid #347cbb00;outline-offset:3px;filter:brightness(1);transform:translateY(0)}45%,55%{outline:1px solid #347cbb70;outline-offset:5px;filter:brightness(1.025);transform:translateY(-1px)}}
@keyframes bento-delivery-light{0%,100%{background:#1b3c54;color:#f1f8fd;border-color:#7899b1;box-shadow:0 0 0 0 #a6d7ff00;transform:translateX(0)}45%,55%{background:#294f6b;color:#f1f8fd;border-color:#b3d4eb;box-shadow:0 0 18px #a6d7ff10;transform:translateX(2px)}}
@keyframes bento-check-light{0%,100%{background:#305875;color:#d7efff;transform:scale(1)}45%,55%{background:#44718f;color:#fff;transform:scale(1.035)}}
@keyframes bento-status{0%,100%{box-shadow:0 0 0 0 #b9dfff00;opacity:.65}50%{box-shadow:0 0 0 3px #b9dfff16;opacity:1}}
@keyframes bento-dark-node{0%,100%{background:#244b67;color:#f5faff;border-color:#8dabbe;box-shadow:0 0 0 #94cdff00;transform:translateY(0)}45%,55%{background:#315c78;color:#f5faff;border-color:#b5d8ef;box-shadow:0 0 18px #94cdff18;transform:translateY(-1px)}}
@media(prefers-reduced-motion:no-preference){
 .approach .benefit-art *{animation-timing-function:cubic-bezier(.45,0,.55,1)!important}
 .approach .mini-path>span,.approach .mini-path>div span,.approach .mini-path strong,.approach .mini-path i{animation-duration:14s!important}
 .approach .mini-path>div span{animation-delay:-9.3s!important}.approach .mini-path strong{animation-name:bento-dark-node!important;animation-delay:-4.6s!important}.approach .mini-path i:last-of-type{animation-delay:-4.6s!important}
 .approach .system-swatches,.approach .system-type,.approach .system-controls{animation-duration:17s!important}.approach .system-type{animation-delay:-11.3s!important}.approach .system-controls{animation-delay:-5.6s!important}
 .approach .mini-delivery>div,.approach .mini-delivery b{animation-duration:16s!important}.approach .mini-delivery>div:nth-child(2),.approach .mini-delivery>div:nth-child(2) b{animation-delay:-10.6s!important}.approach .mini-delivery>div:nth-child(3),.approach .mini-delivery>div:nth-child(3) b{animation-delay:-5.3s!important}.approach .release-status>span{animation-duration:16s!important}
}
/* Featured project: an image-first card with quiet metadata. */
@media(min-width:1000px){.sketch-hero{grid-template-columns:minmax(0,1fr) 250px}.hero-project{width:250px;top:10px;padding:7px;border:1px solid #b9d9eb32;border-radius:17px;background:#0b223270;overflow:hidden}.hero-project .hero-feature-media{height:158px;border-radius:11px}.hero-project .hero-feature-caption{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:13px 6px 9px}.hero-project .hero-feature-label{margin:0;text-align:left;font:8px/1.5 var(--mono);letter-spacing:.09em;color:#a9c8dc}.hero-project .hero-feature-title{margin:0;font:400 12px/1.4 var(--sans);color:#eff7fc}.hero-project .hero-feature-arrow{display:none}.hero-project:hover{background:#0b223270;border-color:#b9d9eb50;box-shadow:none}}
/* Shared Open affordance: hover, keyboard, and a quiet touch fallback. */
.hero-project .hero-feature-media{position:relative}.project-image .project-open,.hero-project .project-open{position:absolute;z-index:5;left:var(--open-x,50%);top:var(--open-y,50%);display:flex;align-items:center;justify-content:center;gap:12px;width:94px;height:44px;margin:0;padding:0;border:1px solid #e5f3fb88;border-radius:50px;background:#eff7f5f0;box-shadow:0 6px 24px #071d3026;color:#0b2232;font:500 12px/1 var(--sans);text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.88);transition:opacity .35s ease,transform .55s cubic-bezier(.22,1,.36,1),left .25s cubic-bezier(.22,1,.36,1),top .25s cubic-bezier(.22,1,.36,1)}
.hero-project .project-open>span,.project-image .project-open>span{display:inline;margin:0;color:inherit;font-size:16px}
.project-image:focus-visible .project-open,.hero-project:focus-visible .project-open{opacity:1;transform:translate(-50%,-50%) scale(1);left:50%;top:50%}
@media(hover:hover) and (pointer:fine){.project-image:hover .project-open,.hero-project:hover .project-open{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(hover:none){.project-image .project-open,.hero-project .project-open{left:auto;top:auto;right:12px;bottom:12px;opacity:1;transform:none;width:78px;height:36px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.project-image .project-open,.hero-project .project-open{transition:none}}

/* Keep each eyebrow centered over its centered section headline at every width. */
.work .work-heading,.approach .benefits-heading{align-items:center;text-align:center}
.work .work-heading>.eyebrow,.approach .benefits-heading>.eyebrow{align-self:center;width:100%;text-align:center;margin:0 auto;padding:0}
.work .work-heading h2,.approach .benefits-heading h2{align-self:center;margin-inline:auto;text-align:center}

/* Give the header identity a little more presence. */
.site-header .navigation .identity{font-size:14px;line-height:1.25}
.site-header .navigation .identity img{width:32px;height:32px}
/* Put the IA label with the card introduction and retain its line icon. */
.approach .benefit-card:first-child .bento-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px;font:10px/1.6 var(--mono);letter-spacing:.065em;color:#c1d8e8;text-align:left}
.approach .bento-eyebrow .bento-line-icon{display:block;width:19px;height:19px;color:#b9dfff}
.approach .benefit-art:before{display:block;content:'';position:absolute;inset:12% 2%;border-radius:50%;background:radial-gradient(ellipse at center,#75b8ee2b 0%,#4b88b916 42%,transparent 72%);filter:blur(16px);opacity:1;z-index:-1;pointer-events:none}
.approach .benefit-card:first-child .benefit-art{padding:24px 32px 32px;min-height:370px;gap:28px}
.approach .clarity-art .mini-path{max-width:350px;width:100%}
.approach .clarity-art .mini-path>span{padding:16px 28px;font-size:14px}
.approach .clarity-art .mini-path>div span{padding:18px 8px;font-size:13px}
.approach .clarity-art .mini-path strong{padding:21px 20px;font-size:14px}
.approach .clarity-art .mini-path i{height:28px}
@media(max-width:960px){.approach .benefit-card:first-child .benefit-art{padding:24px 28px 32px}}
@media(max-width:760px){.site-header .navigation .identity{font-size:12px}.site-header .navigation .identity img{width:29px;height:29px}}
@media(max-width:700px){.approach .benefit-card:first-child .benefit-art{padding:12px 28px 30px;min-height:340px;gap:24px}.approach .benefit-card:first-child .bento-eyebrow{font-size:9px;margin-bottom:22px}.approach .clarity-art .mini-path{max-width:350px}.approach .clarity-art .mini-path>div span{font-size:12px;padding:16px 6px}}

/* IA card: a clean eyebrow and deep navy contrast behind the route. */
.approach .bento-eyebrow:before{content:none;display:none}
.approach .clarity-art:before{inset:0 -4%;border-radius:0;background:radial-gradient(ellipse 68% 62% at 50% 46%,#061521 0%,#091d2bd9 36%,#0b223278 61%,#0b223200 88%);filter:none;opacity:1}

/* IA: dark at the top, a quiet circular light rising from the base. */
.approach .benefit-card:first-child{background:radial-gradient(circle at 50% 106%,#b8defe36 0%,#6aa8d526 25%,#3b73990e 46%,transparent 62%),linear-gradient(180deg,#06141f 0%,#0c2334 50%,#17394f 100%)}
.approach .clarity-art:before{display:none}
.approach .clarity-art .graphic-cursor{color:#78b5ff}
.approach .clarity-art .graphic-cursor>span{background:#185ae7;color:#fff;border-color:#578cff;box-shadow:0 5px 18px #05122640}
@keyframes ia-callout-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-3px,-4px,0)}}
@media(prefers-reduced-motion:no-preference){.approach .clarity-art .graphic-cursor{animation:ia-callout-drift 8s cubic-bezier(.45,0,.55,1) infinite!important}.approach.graphics-paused .clarity-art .graphic-cursor{animation-play-state:paused!important}}
@media(prefers-reduced-motion:reduce){.approach .clarity-art .graphic-cursor{animation:none!important;transform:none!important}}

/* IA refinement: a gradual navy fade, contained light, and saturated nodes. */
.approach .benefit-card:first-child{background:linear-gradient(180deg,#081b29 0%,#0a2030 32%,#0d2638 68%,#102c3e 100%)}
.approach .clarity-art .mini-path>span,.approach .clarity-art .mini-path>div span,.approach .clarity-art .mini-path strong{background:#12354f;color:#f2f8ff;border:1px solid #719abb;box-shadow:0 5px 14px #04101c33}
@keyframes ia-node-contrast{0%,100%{background:#b9d9eb;color:#102b3d;border-color:#9ec5df;box-shadow:0 6px 18px #04101c30;transform:translateY(0)}45%,55%{background:#9fcbea;color:#0b2232;border-color:#c5e5fa;box-shadow:0 7px 20px #04101c38,0 0 0 2px #9acfff16;transform:translateY(-2px)}}
@media(prefers-reduced-motion:no-preference){.approach .clarity-art .mini-path>span,.approach .clarity-art .mini-path>div span,.approach .clarity-art .mini-path strong{animation-name:ia-node-contrast!important}}
.approach .clarity-art .mini-path strong b{color:#dbf0ff!important}

/* A responsive circular glow, centered halfway below the IA card. */
.approach .benefit-card:first-child{position:relative;isolation:isolate}
.approach .benefit-card:first-child:before{content:'';position:absolute;left:50%;bottom:0;width:86%;aspect-ratio:2.2;border-radius:50%;transform:translate(-50%,50%);background:radial-gradient(ellipse closest-side,#add9fc2b 0%,#80b8e31c 28%,#5994c10e 58%,#5994c103 82%,transparent 100%);z-index:-1;pointer-events:none}

/* Clearer IA labels against the deeper diagram surfaces. */
.approach .benefit-card:first-child .bento-eyebrow{color:#e5f3ff}
.approach .clarity-art .mini-path>span,.approach .clarity-art .mini-path>div span,.approach .clarity-art .mini-path strong{background:#0d2b44;color:#fff;border-color:#91b9d7;font-weight:500}
.approach .clarity-art .graphic-cursor>span{font-weight:500}

/* Columbia blue distinguishes the IA diagram from the adjacent white graphic. */
.approach .clarity-art .mini-path>span,.approach .clarity-art .mini-path>div span,.approach .clarity-art .mini-path strong{background:var(--columbia);color:#102b3d;border-color:#9ec5df;box-shadow:0 6px 18px #04101c30}
.approach .clarity-art .mini-path strong b{color:#173b57!important}

/* A separate, quiet wash fades from the top without changing the bottom glow. */
.approach .benefit-card:first-child{background:linear-gradient(180deg,#b9d9eb0e 0%,#b9d9eb06 18%,transparent 44%),linear-gradient(180deg,#081b29 0%,#0a2030 32%,#0d2638 68%,#102c3e 100%)}

/* Carry the IA atmosphere into the component card and give its graphic more room. */
.approach .benefit-card:nth-child(2){position:relative;isolation:isolate;background:linear-gradient(180deg,#b9d9eb0e 0%,#b9d9eb06 18%,transparent 44%),linear-gradient(180deg,#081b29 0%,#0a2030 32%,#0d2638 68%,#102c3e 100%);grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:12px}
.approach .benefit-card:nth-child(2):before{content:'';position:absolute;left:50%;bottom:0;width:86%;aspect-ratio:2.2;border-radius:50%;transform:translate(-50%,50%);background:radial-gradient(ellipse closest-side,#add9fc2b 0%,#80b8e31c 28%,#5994c10e 58%,#5994c103 82%,transparent 100%);z-index:-1;pointer-events:none}
.approach .benefit-card:nth-child(2) .system-art:before{display:none}
.approach .benefit-card:nth-child(2) .system-art{padding:24px 18px;min-height:320px}
.approach .benefit-card:nth-child(2) .mini-system{max-width:320px;width:100%;padding:24px;font-size:12px}
.approach .benefit-card:nth-child(2) .system-type{margin:24px 0;gap:16px}
.approach .benefit-card:nth-child(2) .system-type .type-specimen{font-size:48px}
.approach .benefit-card:nth-child(2) .system-controls{font-size:11px;gap:8px}
.approach .benefit-card:nth-child(2) .system-controls span{padding:10px}
.approach .benefit-card:nth-child(2) .system-note{font-size:10px;margin-top:20px}
@media(max-width:960px){.approach .benefit-card:nth-child(2) .system-art{padding:24px 24px 32px}}
@media(max-width:700px){.approach .benefit-card:nth-child(2) .system-art{padding:16px 24px 32px;min-height:300px}.approach .benefit-card:nth-child(2) .mini-system{padding:22px}}

/* Restore continuous graphic motion after the legacy descendant reset. */
@keyframes bento-graphic-drift{0%,100%{transform:translate3d(0,2px,0)}50%{transform:translate3d(0,-5px,0)}}
@keyframes bento-component-focus{0%,100%{outline:1px solid #347cbb00;outline-offset:3px;transform:translateY(0);box-shadow:0 0 0 #347cbb00}40%,60%{outline:1px solid #347cbb99;outline-offset:5px;transform:translateY(-2px);box-shadow:0 0 14px #347cbb14}}
@media(prefers-reduced-motion:no-preference){
 .approach .clarity-art .mini-path{animation:bento-graphic-drift 8s cubic-bezier(.45,0,.55,1) -2s infinite!important}
 .approach .system-art .mini-system{animation:bento-graphic-drift 9.5s cubic-bezier(.45,0,.55,1) -5s infinite!important}
 .approach .clarity-art .mini-path>span{animation:ia-node-contrast 10s cubic-bezier(.45,0,.55,1) infinite!important}
 .approach .clarity-art .mini-path>div span:first-child{animation:ia-node-contrast 10s cubic-bezier(.45,0,.55,1) -6.6s infinite!important}
 .approach .clarity-art .mini-path>div span:last-child{animation:ia-node-contrast 10s cubic-bezier(.45,0,.55,1) -5.8s infinite!important}
 .approach .clarity-art .mini-path strong{animation:ia-node-contrast 10s cubic-bezier(.45,0,.55,1) -3.3s infinite!important}
 .approach .system-art .system-swatches{animation:bento-component-focus 10.5s cubic-bezier(.45,0,.55,1) infinite!important}
 .approach .system-art .system-type{animation:bento-component-focus 10.5s cubic-bezier(.45,0,.55,1) -7s infinite!important}
 .approach .system-art .system-controls{animation:bento-component-focus 10.5s cubic-bezier(.45,0,.55,1) -3.5s infinite!important}
}
.approach.graphics-paused .benefit-card .benefit-art *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.approach .benefit-grid .benefit-card .benefit-art *{animation:none!important;transform:none!important}}

/* Delivery card: consistent eyebrow and atmosphere, a brighter blue sequence. */
.approach .benefit-card:nth-child(3){position:relative;isolation:isolate;background:linear-gradient(180deg,#b9d9eb0e 0%,#b9d9eb06 18%,transparent 44%),linear-gradient(180deg,#081b29 0%,#0a2030 32%,#0d2638 68%,#102c3e 100%)}
.approach .benefit-card:nth-child(3):before{content:'';position:absolute;left:50%;bottom:0;width:86%;aspect-ratio:2.2;border-radius:50%;transform:translate(-50%,50%);background:radial-gradient(ellipse closest-side,#add9fc2b 0%,#80b8e31c 28%,#5994c10e 58%,#5994c103 82%,transparent 100%);z-index:-1;pointer-events:none}
.approach .benefit-card:nth-child(3) .bento-eyebrow{margin:0 0 24px;font:10px/1.6 var(--mono);letter-spacing:.065em;color:#e5f3ff;text-align:left}
.approach .delivery-art:before{display:none}
.approach .delivery-art .mini-delivery>div,.approach .delivery-art .mini-delivery>div:last-child{background:#163e60;border-color:#6599c3;color:#fff;box-shadow:0 5px 16px #04101c30}
.approach .delivery-art .mini-delivery strong{font-weight:500}
.approach .delivery-art .mini-delivery b,.approach .delivery-art .mini-delivery>div:last-child b{background:#2f6ef0;color:#fff}
.approach .delivery-art .release-status{color:#dfedfa}
.approach .delivery-art .release-status>span{background:#78b5ff}
@keyframes delivery-blue-node{0%,100%{background:#163e60;color:#fff;border-color:#6599c3;box-shadow:0 5px 16px #04101c30;transform:translateX(0)}45%,55%{background:#245ed2;color:#fff;border-color:#a7ccff;box-shadow:0 6px 18px #04101c40,0 0 15px #428aff22;transform:translateX(3px)}}
@keyframes delivery-blue-check{0%,100%{background:#2f6ef0;color:#fff;transform:scale(1)}45%,55%{background:#4c8aff;color:#fff;transform:scale(1.04)}}
@media(prefers-reduced-motion:no-preference){
 .approach .delivery-art .mini-delivery>div{animation:delivery-blue-node 12s cubic-bezier(.45,0,.55,1) infinite!important}
 .approach .delivery-art .mini-delivery b{animation:delivery-blue-check 12s cubic-bezier(.45,0,.55,1) infinite!important}
 .approach .delivery-art .mini-delivery>div:nth-child(2),.approach .delivery-art .mini-delivery>div:nth-child(2) b{animation-delay:-8s!important}
 .approach .delivery-art .mini-delivery>div:nth-child(3),.approach .delivery-art .mini-delivery>div:nth-child(3) b{animation-delay:-4s!important}
}
@media(max-width:700px){.approach .benefit-card:nth-child(3) .bento-eyebrow{font-size:9px;margin-bottom:22px}}

/* Icy blue atmosphere for the brand ecosystem, without the lavender cast. */
.project-ecosystem .device-atmosphere{background:radial-gradient(ellipse 65% 90% at 88% 12%,#b1d2e6 0%,transparent 76%),radial-gradient(ellipse 60% 85% at 5% 90%,#bde1ec 0%,transparent 78%),radial-gradient(ellipse 55% 85% at 48% 62%,#d3e6f1 0%,transparent 82%),linear-gradient(115deg,#edf6fc,#c0dce9);background-size:125% 120%}
/* Let the testimonial's named strengths carry the blue accent. */
.testimonial .review-takeaway em{color:#245ed2;font-style:normal}
.testimonial .testimonial-context{max-width:650px;margin:26px 0 0;font:400 17px/1.7 var(--sans);color:#36566e;letter-spacing:-.01em}
.testimonial .reviewer strong{color:#173b57}
@media(max-width:760px){.testimonial .testimonial-context{font-size:16px;margin-top:24px}}

/* Stroke-based arrows render consistently across desktop and mobile. */
.inline-arrow{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.12em;overflow:visible}
.project-open>span .inline-arrow{width:17px;height:17px;display:block}
.project-open>span{display:inline-flex!important;align-items:center}
.case-back .inline-arrow,.resume-link .inline-arrow{width:16px;height:16px}
.footer-link-group a{display:inline-flex;align-items:center;gap:7px}
#mobile-menu .inline-arrow{width:18px;height:18px}
/* Softer dots and blue project backgrounds, keeping their existing movement. */
.device-preview .device-atmosphere:after{opacity:.24}
.device-preview:not(.ahf-system-preview) .device-atmosphere{background:radial-gradient(ellipse 65% 90% at 88% 12%,#b1d2e6 0%,transparent 76%),radial-gradient(ellipse 60% 85% at 5% 90%,#bde1ec 0%,transparent 78%),radial-gradient(ellipse 55% 85% at 48% 62%,#d3e6f1 0%,transparent 82%),linear-gradient(115deg,#edf6fc,#c0dce9);background-size:125% 120%}
/* Slightly clearer bento motion, still eased and restrained. */
@keyframes bento-graphic-drift{0%,100%{transform:translate3d(0,3px,0)}50%{transform:translate3d(0,-7px,0)}}
@keyframes bento-component-focus{0%,100%{outline:1px solid #347cbb00;outline-offset:3px;transform:translateY(0);box-shadow:0 0 0 #347cbb00}40%,60%{outline:1px solid #347cbbbb;outline-offset:5px;transform:translateY(-3px);box-shadow:0 0 16px #347cbb20}}
@media(prefers-reduced-motion:no-preference){
 .approach .clarity-art .mini-path{animation-duration:7s!important}
 .approach .system-art .mini-system{animation-duration:8s!important}
 .approach .delivery-art .mini-delivery{animation:bento-graphic-drift 8.5s cubic-bezier(.45,0,.55,1) -3s infinite!important}
 .approach .delivery-art .mini-delivery>div,.approach .delivery-art .mini-delivery b{animation-duration:10.5s!important}
}
.approach.graphics-paused .benefit-card .benefit-art *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.approach .benefit-grid .benefit-card .benefit-art *{animation:none!important;transform:none!important}}

/* Navy project calls to action. */
.work .selected-projects .project-caption .case-study-button{background:var(--navy);color:#f5faff;border-color:var(--navy)}
.work .selected-projects .project-caption .case-study-button:hover{background:#214c69;border-color:#214c69}

/* Fill the display edge to edge; overscan removes the source capture's scrollbar. */
.work .selected-projects .device-preview .macbook-air .commercial-laptop-screen img{display:block;position:absolute;inset:0 auto auto 0;width:calc(100% + 12px);height:auto;min-height:100%;max-height:none;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:top left;border-radius:0;filter:none}
@media(prefers-reduced-motion:no-preference){
 .work .selected-projects .device-preview .macbook-air .commercial-laptop-screen img{transition:transform 2.2s cubic-bezier(.25,.1,.25,1)}
 .motion-ready [data-reveal]{transition-timing-function:cubic-bezier(.2,.65,.25,1)}
 .approach .benefit-art *{animation-timing-function:cubic-bezier(.4,0,.35,1)!important}
 .device-preview .device-atmosphere{animation-duration:23s;animation-timing-function:cubic-bezier(.4,0,.35,1)}
 .brand-system-tile{animation-duration:13.7s;animation-timing-function:cubic-bezier(.4,0,.35,1)}
 .project-image .project-open,.hero-project .project-open{transition:opacity .4s ease,transform .65s cubic-bezier(.2,.65,.25,1),left .38s cubic-bezier(.2,.65,.25,1),top .38s cubic-bezier(.2,.65,.25,1)}
}
@keyframes bento-graphic-drift{0%,100%{transform:translate3d(0,3px,0)}32%{transform:translate3d(1px,-3px,0)}65%{transform:translate3d(-1px,-7px,0)}}

/* Invert the hero CTA: navy label area, Columbia-blue arrow tile. */
.work .selected-projects .project-caption .case-study-button{padding:4px 4px 4px 16px;gap:20px;min-height:44px}
.work .selected-projects .project-caption .case-study-button .link-arrow{width:34px;height:34px;padding:8px;border-radius:2px;background:var(--columbia);color:var(--navy);transition:background .25s ease}
.work .selected-projects .project-caption .case-study-button:is(:hover,:focus-visible) .link-arrow{background:#cce4f1}

/* Original icy palette, softly breathing over a quiet printed texture. */
.work .selected-projects .device-preview .device-atmosphere{background:radial-gradient(ellipse 65% 90% at 88% 12%,#b1d2e6 0%,transparent 76%),radial-gradient(ellipse 60% 85% at 5% 90%,#bde1ec 0%,transparent 78%),radial-gradient(ellipse 55% 85% at 48% 62%,#d3e6f1 0%,transparent 82%),linear-gradient(115deg,#edf6fc,#c0dce9);background-size:125% 120%;opacity:1}
.work .selected-projects .device-preview .device-atmosphere:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.work .selected-projects .device-preview .device-atmosphere:after{background-image:radial-gradient(circle,#f7fbff99 .45px,transparent .8px),radial-gradient(circle,#31557830 .4px,transparent .75px);background-position:0 0,2px 2px;background-size:4px 4px;opacity:.18;mask-image:linear-gradient(125deg,#0009, #0005 40%,transparent 76%);-webkit-mask-image:linear-gradient(125deg,#0009, #0005 40%,transparent 76%)}
@keyframes project-gradient-breathe{0%,100%{opacity:1}50%{opacity:.48}}
@media(prefers-reduced-motion:no-preference){
 .work .selected-projects .device-preview .device-atmosphere{animation:device-color-flow 23s cubic-bezier(.4,0,.35,1) infinite alternate,project-gradient-breathe 14s cubic-bezier(.4,0,.6,1) infinite}
 .work .selected-projects .project-commercial .device-atmosphere{animation-delay:-8s,-4s}
 .work .selected-projects .project-ecosystem .device-atmosphere{animation-delay:-15s,-8s}
}
@media(prefers-reduced-motion:reduce){.work .selected-projects .device-preview .device-atmosphere{animation:none;opacity:1}}

/* Hero text enters on page load, independently of scroll observation. */
@media(prefers-reduced-motion:no-preference){
 .hero .sketch-hero h1,.hero .sketch-hero .hero-positioning{animation:hero-text-load 1000ms cubic-bezier(.22,1,.36,1) both}
 .hero .sketch-hero h1{animation-delay:180ms}
 .hero .sketch-hero .hero-positioning{animation-delay:460ms}
 .hero .sketch-hero>div>.button{animation:hero-text-load 850ms cubic-bezier(.22,1,.36,1) 650ms both}
}
@keyframes hero-text-load{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
/* More expressive scroll entrances below the hero; retain the separate load sequence. */
@media(prefers-reduced-motion:no-preference){
 .motion-ready main>section:not(.hero) [data-reveal]{transform:translate3d(0,32px,0);transition-duration:.85s,1.1s;transition-timing-function:cubic-bezier(.2,.75,.25,1)}
 .motion-ready main>section:not(.hero) [data-reveal].is-visible,.motion-ready main>section:not(.hero) [data-reveal]:focus-within{opacity:1;transform:translate3d(0,0,0)}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 .motion-ready main>section:not(.hero) [data-reveal]{transform:translate3d(0,24px,0)}
 .motion-ready main>section:not(.hero) [data-reveal].is-visible,.motion-ready main>section:not(.hero) [data-reveal]:focus-within{transform:translate3d(0,0,0)}
}

/* Work establishes the evidence before the personal statement. */
.work-proof-transition{padding:60px 0}
.work-proof-transition .about-reference-intro{display:block;margin:0}
.work-proof-transition .about-reference-copy{max-width:900px;margin:0 auto}
.work-proof-transition .about-reference-copy h2{max-width:38ch}
.work-proof-transition .about-reference-actions{margin-top:24px}
@media(max-width:700px){.work-proof-transition{padding:42px 0}.work-proof-transition .about-reference-actions{margin-top:22px}}