/* The navigation curtain follows the flowing transition in the reference. */
.site-menu{background:transparent;transform:none;opacity:1;transition:none}
.site-menu::backdrop{background:rgb(11 11 11 / .2)}
.menu-wave{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.menu-wave path{fill:var(--ink)}
.menu-inner{opacity:0;transform:translateY(35px);transition:opacity .45s var(--ease),transform .65s var(--ease)}
.is-open .menu-inner{opacity:1;transform:none;transition-delay:.4s}
.menu-brand{z-index:2}
.client-disc img{filter:brightness(0);opacity:.85}
@media(prefers-reduced-motion:reduce){.menu-inner{transition:none}.is-open .menu-inner{transition-delay:0s}}

/* The recorded typographic hero carries the homepage; the rest stays spare. */
.hero-keyword{color:#ffe800}
.site-header .breadcrumb{margin-left:78px;margin-right:auto}
.hero-bottom .hero-line{white-space:nowrap}
.services{align-items:start}
.service-lede{max-width:18ch}
.service-intro .muted{max-width:49ch;line-height:1.55}
.service-link{overflow:hidden}
.service-link span{display:inline-block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.service-link:hover span,.service-link:focus-visible span{transform:translateX(16px)}
.service-link:hover,.service-link:focus-visible{color:#ffe800}
.service-link:hover i,.service-link:focus-visible i{transform:translate(5px,-5px)}
.studio-section,.editorial-break{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center;border-top:1px solid rgba(255,255,255,.15)}
.studio-media,.editorial-break-image{position:relative;overflow:hidden;background:#111;min-height:560px}
.studio-media img,.editorial-break-image img{display:block;width:100%;height:100%;min-height:560px;object-fit:cover;filter:grayscale(.08) contrast(1.05);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.studio-media:hover img,.editorial-break-image:hover img{transform:scale(1.045)}
.studio-media img{object-position:42% 50%}
.editorial-break-image img{object-position:center 60%}
.studio-copy h2,.editorial-break h2{font:600 clamp(44px,5.4vw,92px)/.98 'General Sans',sans-serif;letter-spacing:-.055em;max-width:13ch;margin:40px 0 30px}
.studio-copy>p:not(.eyebrow),.editorial-break>div>p:not(.eyebrow){font:400 clamp(18px,1.65vw,24px)/1.48 'Satoshi',sans-serif;color:#b7b6b2;max-width:47ch}
.text-arrow{display:inline-flex;gap:3em;align-items:center;border-bottom:1px solid #ffe800;padding:22px 0;margin-top:35px;text-decoration:none;color:#f5f3ec;text-transform:uppercase;letter-spacing:.14em;font:600 13px 'Satoshi',sans-serif;transition:color .35s,border-color .35s}
.text-arrow span{font-size:23px;line-height:0;color:#ffe800;transition:transform .4s}
.text-arrow:hover span{transform:translate(5px,-5px)}
.approach-section{position:relative;overflow:hidden;border-block:1px solid rgba(255,255,255,.14);background:#0b0b0b;color:#f5f3ec}
.approach-track{position:absolute;left:0;top:8%;width:200%;white-space:nowrap;overflow:hidden;color:rgba(255,232,0,.16);font:600 clamp(75px,13vw,210px)/1 'General Sans',sans-serif;letter-spacing:-.06em;pointer-events:none;transform:translateX(-10%)}
.approach-track span{display:block;animation:approach-drift 32s linear infinite}
.approach-inner{position:relative;z-index:1;padding-block:clamp(150px,23vh,290px)}
.approach-inner h2{font:600 clamp(65px,10vw,160px)/.9 'General Sans',sans-serif;letter-spacing:-.065em;max-width:13ch;margin:42px 0 50px}
.approach-inner h2 em{color:#ffe800;font-weight:500;font-style:normal}
.approach-inner>p:not(.eyebrow){max-width:44ch;margin-left:auto;font:400 clamp(20px,2vw,29px)/1.4 'Satoshi',sans-serif;color:#cbc9c3}
.approach-inner .text-arrow{margin-left:auto;display:flex;width:max-content}
.editorial-break{min-height:900px}
.client-heading{align-items:end}
.client-heading>p{max-width:13ch;font:600 clamp(36px,4vw,70px)/1 'General Sans',sans-serif;letter-spacing:-.05em;text-transform:none}
.client-intro{max-width:43ch;margin:0 0 64px auto;color:#b7b6b2;font:400 clamp(18px,1.7vw,24px)/1.45 'Satoshi',sans-serif}
.client-rail{overflow:hidden;border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.28);padding:38px 0;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.client-rail-track{display:flex;width:max-content;animation:client-flow 31s linear infinite}
.client-rail:hover .client-rail-track{animation-play-state:paused}
.client-rail-set{display:flex;align-items:center;gap:clamp(70px,8vw,145px);padding-right:clamp(70px,8vw,145px)}
.client-rail-set img{width:auto;max-width:240px;height:68px;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.86;flex:none;animation:logo-sway 4s ease-in-out infinite alternate}
.client-rail-set img:nth-child(3),.client-rail-set img:nth-child(4){height:82px}
.client-rail-set img:nth-child(6){height:88px}
.client-rail-set img:nth-child(even){animation-delay:-1.6s}
.contact-sub{max-width:54ch}
.footer-nav{gap:14px}
@keyframes client-flow{to{transform:translateX(-50%)}}
@keyframes logo-sway{from{transform:translateY(-4px) rotate(-2deg)}to{transform:translateY(4px) rotate(2deg)}}
@keyframes approach-drift{to{transform:translateX(-50%)}}
@media(max-width:900px){.studio-section,.editorial-break{grid-template-columns:1fr;min-height:0}.studio-media,.studio-media img,.editorial-break-image,.editorial-break-image img{min-height:500px}.editorial-break-image{order:-1}.client-heading{display:block}.client-heading>p{margin:36px 0;max-width:17ch}.client-intro{margin-left:0}}
@media(max-width:650px){.site-header .breadcrumb{display:none}.hero-bottom .hero-line{white-space:normal}.studio-media,.studio-media img,.editorial-break-image,.editorial-break-image img{min-height:400px}.studio-copy h2,.editorial-break h2{font-size:clamp(40px,12vw,65px)}.approach-inner h2{font-size:clamp(52px,14vw,82px)}.client-rail-set img{height:50px}.client-rail-set img:nth-child(3),.client-rail-set img:nth-child(4),.client-rail-set img:nth-child(6){height:65px}.client-rail{padding:26px 0}.contact-heading{font-size:clamp(48px,12vw,72px)}}
@media(prefers-reduced-motion:reduce){.approach-track span,.client-rail-track,.client-rail-set img{animation:none}.studio-media img,.editorial-break-image img{transition:none}}

/* Creo loop (from "The Creo v3"): a fixed WebGL canvas behind the whole homepage. Content sits above it. */
#creo{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none;opacity:.36}
#main,.footer{position:relative;z-index:1}

/* Section flow (home-flow.js): sections hand off over the Creo loop. Layers are promoted only mid-transition. */
#main>section,.footer{transform-origin:50% 40%}
.is-flowing{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){#main>section,.footer{transform:none!important;opacity:1!important}}