/* A quieter opening and an always-visible, route-based language switch. */
.header-actions{display:flex;align-items:center;gap:18px}
.language-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #ffffff45;border-radius:30px;background:#10131345;font:500 12px var(--body)}
.language-switch a{display:grid;place-items:center;width:39px;min-height:35px;border-radius:25px;transition:background .25s,color .25s}
.language-switch a[aria-current]{color:var(--ink);background:var(--paper)}
.language-switch a:hover{color:var(--ink);background:var(--mint)}
.menu-open .language-switch{border-color:#10121250;background:transparent}
.menu-open .language-switch a[aria-current]{background:var(--ink);color:var(--paper)}
.desktop-nav{margin-left:0;gap:30px;font-size:14px}
.header-contact{font-size:14px}
.hero-kicker{top:150px;font-size:12px;letter-spacing:.07em}
.hero-kicker>span,.hero-kicker>span:last-child{background:none;padding:0;margin:0}
.hero-copy{right:var(--gutter);max-width:none;bottom:150px;display:grid;grid-template-columns:1.4fr .6fr;align-items:end;gap:5vw}
.hero h1{font-size:clamp(84px,9.25vw,164px);letter-spacing:-.065em;line-height:.98}
.hero-copy p{font-size:16px;line-height:1.7;margin:0 0 8px;max-width:29ch;justify-self:end;text-wrap:pretty}
.hero-bottom{bottom:36px}
.hero-credit{font-size:12px;line-height:1.75}
.scroll-link{font-size:14px}
.hero-shade{background:linear-gradient(180deg,#07120ebf 0%,#07100c10 30%,#07100c05 42%,#06100ce6 100%),linear-gradient(90deg,#09120f50,transparent 72%)}
.hero-film{transition:none}
.contact-headline h2{font-size:clamp(58px,8.1vw,144px);padding-block:.1em}
/* Keep both rolling copies inside equal cells with room for ascenders and descenders. */
.contact-headline .rolling-char{height:1.25em;line-height:1.25;margin-block:-.1em}

/* Hands-on sculpture. Native vertical scrolling remains available on touch. */
.experiment-heading .eyebrow{font-size:12px;line-height:1.6}
.experiment-heading p{font-size:16px}
.lab-stage{cursor:grab;user-select:none;isolation:isolate}
.lab-stage.dragging{cursor:grabbing}
.lab-stage:focus-visible{outline:3px solid #377959;outline-offset:6px}
.lab-stage canvas{position:relative;z-index:1}
.lab-cue{position:absolute;z-index:2;bottom:24px;left:calc(50% - 25px);width:50px;height:50px;border:1px solid #b8e1c845;border-radius:50%;display:grid;place-items:center;color:#d4eadd;font-size:23px;pointer-events:none;transition:opacity .3s,transform .3s;background:#131a1850}
.lab-stage:hover .lab-cue,.lab-stage:focus-visible .lab-cue{opacity:0;transform:scale(.85)}
.lab-orbit{position:absolute;inset:15%;z-index:2;pointer-events:none;border:1px solid #a3ffce60;border-radius:50%;opacity:0}
.lab-stage.impulse .lab-orbit{animation:lab-impulse 1s cubic-bezier(.16,.7,.25,1) both}
@keyframes lab-impulse{0%{opacity:0;transform:scale(.25)}15%{opacity:.7}100%{opacity:0;transform:scale(1.65)}}
.lab-foot{font-size:12px;letter-spacing:.02em;gap:20px}
.lab-foot p{text-align:center;line-height:1.6}
.lab-instruction-keyboard{display:none}
.experiment:has(.lab-stage:focus-visible) .lab-instruction-default{display:none}
.experiment:has(.lab-stage:focus-visible) .lab-instruction-keyboard{display:inline}

/* Outdoor photographs follow a restrained camera move, with no pixel distortion. */
.project-media.outdoor-motion>img,.case-media:hover .project-media.outdoor-motion>img,.project:hover .project-media.outdoor-motion>img{transform:translate3d(calc(var(--outdoor-x,0)*-14px),calc(var(--outdoor-y,0)*-9px),0) scale(calc(1 + var(--outdoor-active,0)*.065));transition:none;will-change:transform}
.outdoor-motion{touch-action:pan-y}
.outdoor-motion:after{content:'';position:absolute;inset:18px;border:1px solid #ffffff5c;clip-path:polygon(0 0,18px 0,18px 1px,1px 1px,1px 18px,0 18px,0 0,100% 0,100% 18px,calc(100% - 1px) 18px,calc(100% - 1px) 1px,calc(100% - 18px) 1px,calc(100% - 18px) 0,100% 0,100% 100%,calc(100% - 18px) 100%,calc(100% - 18px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 18px),100% calc(100% - 18px),100% 100%,0 100%,0 calc(100% - 18px),1px calc(100% - 18px),1px calc(100% - 1px),18px calc(100% - 1px),18px 100%,0 100%);opacity:var(--outdoor-active,0);pointer-events:none}

/* Verified client logos form a continuous line directly below the film. */
.clients{padding:35px 0 40px;border-bottom:1px solid var(--line);overflow:hidden;background:#151b18}
.clients-label{font-size:12px;letter-spacing:.1em;color:#acb9b0;text-align:center;margin-bottom:30px;padding:0 var(--gutter)}
.client-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.client-track{display:flex;width:max-content;animation:clients-travel 42s linear infinite}
.client-set{display:flex;align-items:center;justify-content:space-around;min-width:100vw;list-style:none;gap:65px;padding:0 32.5px;margin:0}
.client-set li{width:145px;height:65px;display:grid;place-items:center;flex-shrink:0}
.client-set img{max-width:145px;max-height:62px;width:auto;height:auto;object-fit:contain;opacity:.76;filter:brightness(0) invert(1);transition:opacity .25s}
.client-set img:hover{opacity:1}
.client-set img.logo-solid{filter:grayscale(1) invert(1);mix-blend-mode:screen}
.client-set li:has(.logo-solid){isolation:isolate;background:#151b18}
@keyframes clients-travel{to{transform:translateX(-50%)}}
.clients:hover .client-track,.clients:focus-within .client-track{animation-play-state:paused}
@media(max-width:1100px){.site-header{gap:18px}.wordmark.brand-image{width:145px}.desktop-nav{gap:22px}.header-actions{gap:12px}.header-contact{gap:15px;padding:12px 18px}.hero-copy{grid-template-columns:1.3fr .7fr;gap:4vw}.hero h1{font-size:clamp(76px,9.2vw,102px)}.hero-copy p{font-size:15px}.hero-credit{font-size:11px}}
@media(max-width:850px){.desktop-nav{display:none}.header-actions{margin-left:auto}.header-contact{display:none}.site-header{height:94px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;flex-shrink:0;width:32px;height:40px;padding:4px;background:none}.menu-toggle span{height:1px;background:currentColor;width:24px;transition:transform .25s}.menu-open .menu-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-open .menu-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.hero-copy{grid-template-columns:1fr;gap:25px;bottom:142px}.hero-copy p{justify-self:start;margin:0;max-width:none}.hero h1{font-size:clamp(65px,11vw,93px)}}
@media(max-width:650px){.wordmark.brand-image{width:112px}.site-header{gap:14px}.language-switch{font-size:12px;padding:2px}.language-switch a{width:35px;min-height:35px}.hero{min-height:690px}.hero-kicker{top:124px;font-size:11px;letter-spacing:.055em}.hero-copy{max-width:none;bottom:146px;gap:23px}.hero h1{font-size:clamp(52px,13vw,84px);line-height:1.01}.hero-copy p{font-size:14px;line-height:1.7}.hero-bottom{bottom:27px;display:grid;grid-template-columns:1fr;gap:17px;align-items:start}.scroll-link{font-size:13px}.hero-credit{font-size:10px;text-align:left;max-width:none;letter-spacing:0;line-height:1.5}.hero-credit br{display:none}.hero-credit span{font-size:10px;margin-left:8px}.hero-shade{background:linear-gradient(180deg,#07120ecc 0%,#07100c15 30%,#06100c50 50%,#06100cf0 100%)}.contact-headline h2{font-size:clamp(38px,8.9vw,58px)}.contact-headline>span{font-size:48px}.experiment-heading .eyebrow{font-size:11px}.lab-foot{font-size:11px;gap:10px}.lab-cue{bottom:20px;width:44px;height:44px;left:calc(50% - 22px)}.client-set{gap:40px;padding:0 20px}.client-set li{width:125px;height:55px}.client-set img{max-width:125px;max-height:52px}.clients{padding:29px 0 30px}.clients-label{font-size:11px;margin-bottom:24px}.client-track{animation-duration:38s}}
@media(prefers-reduced-motion:reduce){.client-track{animation:none}.client-marquee{overflow:auto;mask-image:none}.client-set{gap:30px}.client-set[aria-hidden]{display:none}.lab-cue,.lab-orbit,.lab-foot{display:none}.lab-stage{cursor:default}.project-media.outdoor-motion>img,.case-media:hover .project-media.outdoor-motion>img,.project:hover .project-media.outdoor-motion>img{transform:none;will-change:auto}.outdoor-motion:after{display:none}}

/* Slightly smaller media and a tighter rhythm through the homepage. */
.case-media{width:90%;margin-inline:auto;justify-self:center}
.case-row{min-height:560px}
.case-rows{gap:120px}
body:not(.subpage) .motion-grid>.video-frame{width:92%;max-width:345px}
body:not(.subpage) .studio-photo{width:94%;margin-inline:auto;justify-self:center}
@media(min-width:1600px){.case-row{min-height:700px}}
@media(min-width:651px) and (max-width:1000px){.case-row{min-height:470px}.case-rows{gap:84px}body:not(.subpage) .motion-grid>.video-frame{max-width:285px}}
@media(max-width:650px){.case-media{width:96%}.case-row,.case-row.reverse{min-height:0;gap:26px}.case-rows{gap:68px}body:not(.subpage) .motion-grid>.video-frame{width:74%;max-width:275px}body:not(.subpage) .studio-photo{width:96%}}

/* Keep the heading, interactive sculpture and cue together within one view. */
.experiment{display:grid;grid-template-rows:auto minmax(160px,1fr) auto;gap:16px;height:min(920px,calc(100svh - 32px),calc(max(57vw,440px) + 195px));min-height:min-content;padding-block:clamp(24px,4svh,40px) 16px}
.experiment-heading{margin-bottom:0}
.experiment .lab-stage{height:100%;min-height:0}
.experiment .lab-foot{padding-top:0;min-height:28px}
@media(max-width:650px){.experiment{height:min(700px,calc(100svh - 24px));gap:14px;padding-block:26px 14px}.experiment-heading h2{margin-top:18px}.experiment .lab-foot{min-height:28px}}
