:root{--site-header-height:88px;--project-stack-top:236px}
html{scroll-padding-top:calc(var(--site-header-height) + 24px)}
.header{position:fixed;z-index:60;max-width:none;padding-inline:max(var(--gutter),calc((100vw - 1840px)/2 + var(--gutter)));transition:background .25s,box-shadow .25s;isolation:isolate}
.header.is-scrolled{background:#11141af0;box-shadow:0 1px 0 #ffffff14;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.header .desktop-nav{font-size:17px;gap:30px}
.header .header-contact{font-size:15px}
.mobile-nav{z-index:55;top:var(--site-header-height);max-height:calc(100svh - var(--site-header-height) - 16px);overflow:auto}
.mobile-nav a{font-size:25px}
.header .header-status-label{white-space:nowrap}
@media(max-width:500px){
 .header{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
 .header .header-contact{justify-self:end;font-size:clamp(8.5px,2.6vw,10.5px);gap:5px;white-space:nowrap}
 .header .header-status-label,.header .header-status-label>.status-start{display:inline;white-space:nowrap}
}
@media(max-width:360px){.header .brand{font-size:16px;gap:5px}.header .brand img{width:28px}.header .header-contact{font-size:8.5px}.header .menu-toggle{width:24px}}
.header .desktop-nav a[aria-current="location"]{color:#8cabff}
.header .desktop-nav a[aria-current="location"]:after{right:0;background:currentColor}
.mobile-nav a[aria-current="location"]{color:#a4bbff;background:#245bff20;border-radius:12px;padding-inline:14px;margin-inline:-14px}
@media(min-width:801px) and (max-width:960px){
 .header{grid-template-columns:minmax(0,1fr) auto auto;gap:24px}
 .header .desktop-nav{display:none}
 .menu-toggle{display:flex;background:none;width:28px;height:36px;flex-direction:column;justify-content:center;gap:6px;padding:0}
 .menu-toggle>span{width:24px;height:1px;background:currentColor;transition:transform .25s}
 .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)}
 .mobile-nav{position:fixed;inset:var(--site-header-height) 14px auto;border-radius:24px;border:1px solid #ffffff29;background:#181d28f5;color:#fff;padding:20px 30px 30px;backdrop-filter:blur(24px)}
 .mobile-nav a{display:block;padding-block:10px}
}
.projects{padding-top:72px}
.projects-heading{position:sticky;top:var(--site-header-height);z-index:40;grid-template-columns:auto minmax(0,1fr) minmax(220px,300px);align-items:center;gap:28px;padding:42px 0 22px;background:var(--paper);isolation:isolate}
.projects-heading:before{content:'';position:absolute;inset:0 calc(-1 * var(--gutter));z-index:-1;background:var(--paper)}
.projects-toolbar{display:contents}
.projects-title{position:relative}
.projects-title .eyebrow{position:absolute;left:0;bottom:calc(100% + 9px);margin:0}
.projects-heading h2{font-size:clamp(42px,4.5vw,72px)}
.projects-heading>p{padding:0;font-size:14px;max-width:300px;justify-self:end}
.projects-heading .project-filters{grid-column:auto;grid-row:auto;align-self:center}
.project-stack{overflow-anchor:none}
@media(min-width:801px){
 .project-card{top:var(--project-stack-top)}
 /* Optical alignment with the visible Manrope letters in the section title. */
 .projects-heading .project-filters,.projects-heading>p{transform:translateY(clamp(4px,.45vw,7px))}
}
@media(min-width:801px) and (max-width:1150px){
 .header .desktop-nav{font-size:16px;gap:19px}
 .header .header-contact{font-size:13px}
 .projects-heading{grid-template-columns:auto minmax(0,1fr) minmax(170px,210px);gap:20px}
 .projects-heading>p{font-size:12px}
 .projects-heading .project-filter-track button{padding:10px 11px}
}
@media(max-width:800px){
 .header .header-contact{font-size:13px}
 .projects{padding-top:52px}
 .projects-heading{display:contents}
 .projects-heading:before{display:none}
 .projects-toolbar{position:sticky;top:var(--site-header-height);z-index:40;display:grid;gap:12px;padding:16px 0;background:var(--paper);isolation:isolate}
 .projects-toolbar:before{content:'';position:absolute;inset:0 calc(-1 * var(--gutter));z-index:-1;background:var(--paper)}
 .projects-title .eyebrow{position:static;font-size:9px;margin-bottom:6px}
 .projects-heading h2{font-size:32px}
 .projects-heading .project-filters{order:initial;margin-block:-5px;align-self:stretch}
 .projects-heading>p{font-size:14px;margin:12px 0 28px;max-width:100%;justify-self:start}
}
@media(max-width:500px){.header .header-contact{font-size:11.5px}}
@media(max-width:800px) and (max-height:700px){
 .header{height:56px}
 .projects-toolbar{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:8px 0}
 .projects-title .eyebrow{display:none}
 .projects-heading h2{font-size:24px}
 .projects-heading .project-filter-track button{font-size:11px;padding:8px 9px}
 .mobile-project-stack .project-card>.project-intro,.mobile-project-stack .project-card>.project-info{padding:16px;gap:8px}
 .mobile-project-stack .project-info-bottom{gap:8px}
 .mobile-project-stack .project-info h4{font-size:23px}
 .mobile-project-stack .project-info .project-work{font-size:13px;line-height:1.5}
 .mobile-project-stack .project-result{padding-top:11px}
 .mobile-project-stack .project-client{min-height:32px;font-size:20px}
 .mobile-project-stack .project-client img,.mobile-project-stack .project-logo{max-height:32px}
}

@media(max-width:500px){.header .header-contact{font-size:clamp(8.5px,2.6vw,10.5px);gap:5px;white-space:nowrap}}
@media(max-width:360px){.header .brand{font-size:16px;gap:5px}.header .brand img{width:28px}.header .header-contact{font-size:8.5px}}