/* Only the selected studio direction: still first, film on intent. */
.studio .hover-frame{position:relative;display:block;z-index:0;isolation:isolate;aspect-ratio:16/9;overflow:hidden;background:#141516;border-radius:inherit}
/* Put decoded video above its intact poster, on its own composited surface.
   Fading a transformed poster above video can leave a black layer in Chromium. */
.studio .hover-frame>img{position:relative;z-index:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:transform 650ms var(--ease)}
.studio .hover-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;pointer-events:none;background:#141516;visibility:hidden;transform:translateZ(0)}
.studio .is-previewing .hover-video{visibility:visible}
.studio .hover-frame::after{content:"";position:absolute;inset:auto 0 0;height:2px;z-index:2;background:#ebedef;transform:scaleX(var(--snippet-progress,0));transform-origin:left;opacity:0;transition:opacity 180ms ease,transform 260ms linear;pointer-events:none}
.studio .is-previewing .hover-frame::after{opacity:.8}
.studio .film-window .hover-frame{height:100%;width:100%}
.studio .campaign-track figure>a,.studio .collection-images figure>a{display:block}
.studio .campaign-track .hover-frame{aspect-ratio:auto;height:clamp(320px,37vw,550px);border-radius:3px}
.studio .campaign-track .hover-frame>img{height:100%}
.studio .collection-images .hover-frame{aspect-ratio:.8}
.studio .expertise-video{display:block;max-width:360px;margin-top:36px;border-radius:3px}
.studio .expertise-video .expertise-preview{margin:0;max-width:100%;height:100%}
.studio .navigation-video{display:block;border-radius:6px}
@media(min-width:1024px) and (min-height:660px){.studio .travelling .campaign-track .hover-frame{height:clamp(270px,calc(100svh - 420px),520px)}}
@media(max-width:800px){.studio .expertise-video{max-width:420px}}
.studio .has-hover-preview{transition:transform 360ms var(--ease),box-shadow 360ms var(--ease)}
.studio .has-hover-preview .play-tag{transition:transform 320ms var(--ease),background 200ms ease}
.studio .has-hover-preview .play-tag>span{transition:transform 320ms var(--ease)}
.studio .film-selector a>span,.studio .collection-films a>span{transition:transform 320ms var(--ease)}
.studio .expertise-row summary{transition:padding 280ms var(--ease),background 280ms ease}
.studio .site-header nav>a:not(.nav-contact){position:relative}
.studio .site-header nav>a:not(.nav-contact)::after{content:"";position:absolute;bottom:5px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--ease)}
@media(hover:hover) and (pointer:fine){
 /* Keep the hit area still so entering near an edge cannot cancel playback. */
 .studio .has-hover-preview:hover .hover-frame>img,.studio .has-hover-preview:focus-visible .hover-frame>img{transform:scale(1.025)}
 .studio .has-hover-preview:hover .play-tag,.studio .has-hover-preview:focus-visible .play-tag{transform:translateY(-3px);background:#c9d6ea}
 .studio .has-hover-preview:hover .play-tag>span,.studio .has-hover-preview:focus-visible .play-tag>span{transform:translate(2px,-2px)}
 .studio .film-selector a:hover>span,.studio .collection-films a:hover>span{transform:translateX(4px)}
 .studio .expertise-row summary:hover{padding-left:10px;background:#14151606}
 .studio .site-header nav>a:hover::after{transform:scaleX(1)}
}
.studio .site-header nav>a:focus-visible::after{transform:scaleX(1)}
html.motion-paused .studio .has-hover-preview,html.motion-paused .studio .has-hover-preview *,html.motion-paused .studio .expertise-row summary{transform:none!important}
@media(prefers-reduced-motion:reduce){.studio .has-hover-preview,.studio .has-hover-preview *, .studio .expertise-row summary{transform:none!important}}