/* A single live film opens the page; the approved hero stays still afterwards. */
.hero .hero-topline{display:flex;gap:8px;align-items:center}
#hero-sound-toggle{display:flex;align-items:center;gap:8px;background:#082a3e65;border:1px solid #ffffff70;border-radius:30px;color:#fff;padding:8px 12px;font:500 10px var(--body);backdrop-filter:blur(8px);min-height:33px}
.sound-bars{display:flex;align-items:center;gap:2px;height:13px}
.sound-bars i{width:2px;height:4px;background:currentColor;border-radius:2px}
.sound-bars i:nth-child(2){height:12px}.sound-bars i:nth-child(3){height:8px}
#hero-sound-toggle[aria-pressed="false"] .sound-bars{opacity:.55}
.intro-skip{position:fixed;z-index:1000;right:24px;top:24px;border:1px solid #ffffff80;border-radius:999px;background:#102a3799;color:#fff;backdrop-filter:blur(12px);padding:11px 18px;font:500 12px var(--body)}
/* The entrance film stays behind the hero copy from the first frame (v26). */
.intro-active .hero{overflow:visible}
.intro-active .hero-scene{overflow:visible}
.intro-active .hero-backdrop,.intro-active .hero-scene-shade{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.intro-active .hero-scene-shade{opacity:0}
.intro-active .preview-ribbon{position:relative;z-index:2}
/* The stats band always sits above the film, including over the enlarged entrance frame (v26). */
.hero+.proof{position:relative;z-index:1}
.intro-active .hero+.proof{background:transparent}
.intro-active .hero #motion-toggle{display:none}
/* v35: let the two reels read as films, without a simulated phone frame. */
.work-item.is-portrait{width:min(100%,460px);justify-self:center}
.work-item.is-portrait:nth-child(2){justify-self:end}
.work-item.is-portrait:nth-child(3){justify-self:start}
.work-item.is-portrait .work-image{border:1px solid #d4dfe0;border-radius:clamp(22px,2.4vw,32px);background:#15242c;box-shadow:0 22px 54px -36px #102a3766}
.work-item.is-portrait .work-number,.work-item.is-portrait .work-category{top:24px;font-size:9px;letter-spacing:.1em}
html.motion-ready .work-item.is-portrait .work-image{clip-path:none}
@media(max-width:760px){
 .hero .hero-topline{left:23px;right:23px;justify-content:flex-end;gap:6px}
 #hero-sound-toggle,#motion-toggle{font-size:9px;padding:8px 10px}
 .intro-skip{right:18px;top:18px}
 .work-item.is-portrait{width:100%}
 .work-item.is-portrait .work-image{border-radius:24px}
}
@media(prefers-reduced-motion:reduce){.intro-skip{display:none}}