/* A compact control and a fluid first screen, from phone to wide desktop. */
:root{--hero-inset:max(var(--gutter),calc((100vw - 1640px)/2 + var(--gutter)))}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,390px);grid-template-rows:1fr auto;column-gap:24px;min-height:max(760px,100svh);padding:88px var(--hero-inset) 0;overflow:clip}
.hero-content{grid-column:1;grid-row:1;align-self:center;width:100%;min-width:0;max-width:none;margin:0;padding:clamp(50px,8svh,110px) 0 clamp(66px,10svh,130px)}
.hero h1{font-size:clamp(47px,5.1vw,84px);line-height:1.32;letter-spacing:-.04em}
.hero h1 .hero-line{display:block;white-space:nowrap;color:var(--ink);font-weight:490}
.hero h1 .hero-accent{color:var(--brand);font-weight:590}
.hero .eyebrow{font-size:clamp(9px,.72vw,11px);letter-spacing:.12em}
.hero-copy{font-size:clamp(13px,1.05vw,16px);color:#526574}
.hero-actions{flex-wrap:wrap;gap:16px 24px}
.hero-bottom{grid-column:1/-1;grid-row:2;position:relative;inset:auto;max-width:none;margin:0 calc(-1 * var(--hero-inset));padding:30px var(--hero-inset);grid-template-columns:1.3fr repeat(3,1fr)}
.hero-showcase{grid-column:2;grid-row:1;align-self:end;justify-self:end;position:relative;inset:auto;width:100%;max-width:390px;margin:0 0 clamp(54px,9svh,110px);padding:12px 17px 7px;border-radius:12px;background:linear-gradient(115deg,#ffffffb3,#edf5f882);box-shadow:0 8px 32px #1a344315,inset 0 1px 0 #ffffffa1;backdrop-filter:blur(11px) saturate(115%);-webkit-backdrop-filter:blur(11px) saturate(115%)}
.hero-project{gap:15px;padding:0;min-height:43px}
.project-info strong{font-size:14px;font-weight:550;line-height:1.65;color:#243742}
.project-open{width:28px;height:28px;flex-shrink:0;background:#ffffff26;font-size:15px}
.showcase-bottom{margin-top:2px;gap:14px}
.showcase-controls{gap:0}
.showcase-controls button{width:34px;height:34px;border:0;background:transparent;font-size:16px;color:#324b5a}
.showcase-controls #hero-pause{font-size:10px}
.showcase-controls button:hover{background:#ffffff8c;transform:none}
.hero-dots{display:flex;align-items:center;gap:3px}
.hero-dot{display:grid;place-items:center;width:22px;min-height:34px;padding:0;background:none}
.hero-dot span{width:5px;height:5px;border-radius:10px;background:#778c9a80;transition:width .4s var(--ease),background .3s,transform .3s}
.hero-dot[aria-pressed="true"] span{width:18px;background:var(--brand)}
.hero-dot:hover span{background:var(--brand);transform:scale(1.12)}
.carousel-track{height:1px;opacity:.6}

/* Only the home section carries the translucent navigation halo. */
.site-header{color:#253844;transition:background .4s,box-shadow .4s}
.site-header.on-home,.site-header.on-home.scrolled{background:transparent;box-shadow:none;backdrop-filter:none}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#f7fafc91,#f7fafc00);pointer-events:none;opacity:0;transition:opacity .4s}
.site-header.on-home::before{opacity:1}
.desktop-nav{position:relative;gap:clamp(18px,1.8vw,30px);padding:7px 23px;margin-left:auto;margin-right:clamp(18px,2.2vw,38px);isolation:isolate;font-size:14px;font-weight:600;color:#263a48;white-space:nowrap}
.desktop-nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:60px;background:linear-gradient(120deg,#ffffffa3,#f4f8fb66);border:1px solid #ffffff87;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 24px #23374613,inset 0 1px 0 #ffffff8c;opacity:0;transition:opacity .4s}
.on-home .desktop-nav::before{opacity:1}
.on-home .desktop-nav a{text-shadow:0 1px 12px #ffffffd9}
.desktop-nav a{transition:color .25s;letter-spacing:.015em}
.desktop-nav a[aria-current="location"]{color:var(--brand)}
.desktop-nav a[aria-current="location"]::after{transform:scaleX(1)}
.mobile-nav a[aria-current="location"]{color:var(--brand)}
.site-header:not(.on-home){background:#f8fafbf2;backdrop-filter:blur(16px);box-shadow:0 1px 0 #dce3e7}
.pill.primary{position:relative;overflow:hidden;isolation:isolate}
.pill.primary::before{content:"";position:absolute;inset:-100% -50%;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#ffffff26 50%,transparent 60%);transform:translateX(-65%);transition:transform .7s var(--ease)}
.pill.primary:hover::before{transform:translateX(65%)}
.about-picture{overflow:hidden}
.hero-showcase,.site-header,.desktop-nav{container-type:normal}
@media(max-width:1150px){.hero{grid-template-columns:minmax(0,1fr) minmax(280px,330px);min-height:max(750px,100svh)}.hero h1{font-size:clamp(44px,5.1vw,62px)}.hero-showcase{max-width:330px}.desktop-nav{gap:18px;padding-inline:18px;font-size:13px}.hero-bottom{padding-block:27px}.hero-bottom>div:not(:first-child){padding-left:24px}}
@media(max-width:960px){.desktop-nav{display:none}.menu-button{display:block}.site-header{height:78px}.header-action{gap:12px}.header-action>span{display:none}.mobile-nav.open{display:flex;position:fixed;top:78px;left:0;right:0;background:#f8fafbf5;backdrop-filter:blur(20px);padding:22px var(--gutter);flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}.mobile-nav a{padding:10px 0;font-size:16px;min-height:44px;color:#253c4a}.hero{grid-template-columns:1fr;grid-template-rows:auto minmax(160px,1fr) auto;min-height:max(850px,100svh);padding-top:78px}.hero-content{grid-column:1;grid-row:1;padding-top:55px;padding-bottom:35px;max-width:680px}.hero h1{font-size:clamp(42px,7.7vw,68px)}.hero-copy{font-size:14px}.hero-showcase{grid-column:1;grid-row:2;max-width:380px;margin-bottom:28px}.hero-bottom{grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:25px}.hero-bottom>div:first-child{display:none}.hero-bottom>div:nth-child(2){padding-left:0;border:0}.hero-photo{inset:22% 0 0;opacity:1}.hero-photo .hero-frame{background-position:62% 50%}.hero-wash{background:linear-gradient(180deg,#f4f7f9 0%,#f4f7f9fa 30%,#f4f7f9a3 49%,#f4f7f91a 72%,#edf2f5d9 100%)}.on-home .header-action{border-radius:50px;background:#ffffff6e;box-shadow:0 5px 20px #2337460c;backdrop-filter:blur(10px)}.header-action .menu-button{width:44px;height:44px}}
@media(max-width:640px){.hero{min-height:100svh;padding-top:72px;grid-template-rows:auto minmax(160px,1fr) auto;column-gap:0}.hero-content{padding-top:clamp(38px,7svh,64px);padding-bottom:36px}.hero h1{font-size:clamp(32px,8.8vw,50px);line-height:1.38;letter-spacing:-.035em;margin-left:-2px}.hero .eyebrow{font-size:7px;line-height:1.6;letter-spacing:.09em;margin-bottom:22px;gap:7px}.hero .eyebrow::before{width:5px;height:5px;flex-shrink:0}.hero-copy{font-size:12.5px;line-height:1.95;margin-top:20px}.hero-actions{gap:14px;margin-top:25px;flex-wrap:nowrap}.hero-actions .pill.primary{padding:11px 14px;font-size:11px;gap:9px;min-height:46px}.hero-actions .pill .circle{width:23px;height:23px}.play-button{font-size:11px;gap:8px;min-height:44px;white-space:nowrap}.play-button i{width:32px;height:32px}.hero-showcase{justify-self:stretch;max-width:none;width:100%;margin-bottom:24px;padding:9px 13px 4px;border-radius:11px}.hero-project{min-height:40px}.project-info strong{font-size:12px}.project-open{width:25px;height:25px;font-size:14px}.hero-dot{min-height:40px;width:22px}.showcase-controls button{width:40px;height:40px}.showcase-bottom{margin-top:0}.hero-bottom{padding:22px var(--hero-inset);gap:10px}.hero-bottom>div:not(:first-child){padding-left:13px}.hero-bottom>div:nth-child(2){padding-left:0}.hero-bottom strong{font-size:clamp(26px,7.2vw,34px)}.hero-bottom p{font-size:9px;line-height:1.75}.hero-bottom .bottom-label{font-size:7px;letter-spacing:.1em;margin-bottom:9px}.hero-photo{inset:28% 0 0}.hero-wash{background:linear-gradient(180deg,#f4f7f9 0%,#f4f7f9 32%,#f4f7f9d9 43%,#f4f7f920 64%,#edf2f5bf 100%)}.site-header{height:72px;padding-inline:var(--gutter)}.mobile-nav.open{top:72px}.brand{gap:8px}.brand-text strong{font-size:18px}.brand-text small{font-size:6px;letter-spacing:.1em}.brand-logo{width:34px;height:34px}.header-action{gap:3px}.header-action .pill{padding:9px 12px;font-size:10px;min-height:36px}.header-action .pill .arrow{display:none}.menu-button span{left:10px;width:22px;top:18px}.menu-button span+span{top:25px}}
@media(max-width:359px){.hero-actions{gap:10px}.hero-actions .pill.primary{font-size:10px;padding-inline:11px;gap:7px}.hero-actions .pill .circle{width:20px;height:20px}.play-button{font-size:10px;gap:6px}.play-button i{width:28px;height:28px}.header-action .pill{padding:9px 10px;font-size:9px}.brand-text strong{font-size:16px}.brand-logo{width:30px;height:30px}.hero-bottom p{font-size:8px}.hero-bottom .bottom-label{font-size:6px}.hero-bottom>div:not(:first-child){padding-left:10px}}
@media(prefers-reduced-motion:reduce){.desktop-nav::before,.site-header::before,.hero-dot span,.pill.primary::before{transition:none}.pill.primary::before{display:none}}
@media(min-width:961px) and (max-width:1080px){.desktop-nav{display:none}.menu-button{display:block}.mobile-nav.open{display:flex;position:fixed;top:78px;left:0;right:0;background:#f8fafbf5;backdrop-filter:blur(20px);padding:22px var(--gutter);flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}.mobile-nav a{padding:10px 0;font-size:16px;min-height:44px;color:#253c4a}.mobile-nav a[aria-current="location"]{color:var(--brand)}}
@media(max-width:640px){.hero h1{font-size:clamp(32px,10vw,54px)}.client-strip{display:block;padding:23px var(--gutter)}.client-caption{display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:.04em}.client-caption br{display:none}.client-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;overflow:visible;margin-top:18px}.client-logos .client-name{font-size:clamp(10px,2.9vw,13px);letter-spacing:-.025em;white-space:nowrap}}