/* The hero is intentionally independent from the sections below it. */
header.wasl-header,header.wasl-header.compact{position:absolute;inset:34px 4.2% auto;padding:0;background:transparent;box-shadow:none;color:#fff;gap:24px;transition:none}
.wasl-header .brand{font-size:32px;font-weight:500;letter-spacing:-1.6px}
nav.wasl-nav{position:static;display:flex;width:auto;margin-left:auto;padding:0;background:none;gap:30px;animation:none}
.wasl-nav a{display:block;border:0;padding:12px 0;font-size:14px;letter-spacing:.015em;transition:opacity .2s}
.wasl-nav a:hover{padding:12px 0;color:white;opacity:.65}
.hero{height:100vh;height:100dvh;min-height:0;isolation:isolate;clip-path:none;touch-action:pan-y;will-change:auto;background:#171917}
.project-images,.project-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.project-images{z-index:-2;overflow:hidden}
.project-image{object-fit:cover;opacity:0;transform:scale(1.016);transition:opacity 500ms ease,transform 600ms cubic-bezier(.2,.6,.3,1);pointer-events:none}
.project-image.is-active{opacity:1;transform:scale(1)}
.hero-shade{z-index:-1;background:linear-gradient(180deg,rgba(8,12,12,.28),rgba(8,12,12,.02) 37%,rgba(8,12,12,.18) 57%,rgba(8,12,12,.69))}
.hero .hero-content{left:4.2%;right:4.2%;bottom:8%;transform:none;will-change:auto;pointer-events:none}
.hero h1{font-family:'Manrope',Arial,sans-serif;font-weight:400;letter-spacing:-.055em;line-height:1.04;margin:0;animation:none}
.hero-wordmark{display:block;font-size:clamp(72px,9.8vw,158px);letter-spacing:-.065em;line-height:.95;margin-bottom:19px}
.hero-tagline{display:block;font-size:clamp(26px,3.6vw,60px);line-height:1.18;letter-spacing:-.045em}
.project-label{font-size:12px;letter-spacing:.15em;margin:35px 0 0;line-height:1.5}
.project-position{position:absolute;right:4.2%;bottom:8%;width:210px;color:white}
.position-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.project-count{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.04em}.project-count span{color:#fffa;margin-left:7px}
.project-help{font-size:10px;letter-spacing:.09em;color:#fffb}
.project-segments{display:flex;gap:5px;margin-top:13px}
.project-segments button{flex:1;min-width:0;height:24px;border:0;padding:10px 0;background:none;cursor:pointer}
.project-segments button::after{content:'';display:block;height:1px;background:#ffffff5c;transition:background 500ms}
.project-segments button[aria-pressed=true]::after{background:#fff;height:2px}
.hero:focus-visible{outline:2px solid white;outline-offset:-5px}
@media(max-width:850px){.project-position{width:150px}.project-help{display:none}.hero-tagline{max-width:75%}}
@media(max-width:600px){header.wasl-header,header.wasl-header.compact{inset:22px 6% auto;gap:16px}.wasl-header .brand{font-size:26px}nav.wasl-nav{gap:14px}.wasl-nav a{font-size:12px}.hero .hero-content{left:6%;right:6%;bottom:150px}.hero-wordmark{font-size:100px;margin-bottom:18px}.hero-tagline{font-size:34px;max-width:340px}.project-label{margin-top:26px;font-size:12px}.project-position{left:6%;right:6%;bottom:35px;width:auto}.project-help{display:block;font-size:12px}.project-segments{gap:8px}}
@media(max-height:520px) and (min-width:601px){.hero-wordmark{font-size:64px;margin-bottom:10px}.hero-tagline{font-size:30px}.hero .hero-content,.project-position{bottom:6%}.project-label{margin-top:18px}header.wasl-header{top:20px}}
@media(prefers-reduced-motion:reduce){.project-image{transition:none;transform:none}.project-segments button::after{transition:none}}
