/* Opening film floats above the unchanged hero, without taking layout space. */
.brand-film{position:fixed;inset:0;z-index:200;isolation:isolate;display:flex;flex-direction:column;justify-content:center;background:#0b1728;color:#fff;opacity:1;transition:opacity .55s ease,visibility .55s;overflow:hidden}
.brand-film[hidden]{display:none}.brand-film.is-dismissed{opacity:0;visibility:hidden;pointer-events:none}
.brand-film__title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.brand-film__screen{position:absolute;inset:0;background:#0b1728}
.brand-film__video{display:block;width:100%;height:100%;object-fit:contain;background:#0b1728}
.brand-film__footer{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gutter);z-index:1}
.brand-film__controls{display:flex;gap:10px;flex-wrap:wrap}
.brand-film__control{display:inline-flex;align-items:center;gap:9px;border:1px solid #ffffff40;border-radius:999px;background:#0b1728b3;backdrop-filter:blur(8px);color:#fff;padding:11px 17px;font-size:.82rem;line-height:1.2;min-height:44px;transition:background .2s,border-color .2s}
.brand-film__control:hover{background:#213046;border-color:#ffffff90}.brand-film__control:focus-visible{outline:2px solid #d45500;outline-offset:5px}
.brand-film__control svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:760px){.brand-film__footer{padding:0 18px;gap:10px;bottom:max(22px,env(safe-area-inset-bottom))}.brand-film__controls{gap:6px}.brand-film__control{font-size:.72rem;padding:10px;gap:6px}}
@media(prefers-reduced-motion:reduce){.brand-film{transition:none}}

/* Reuse the site's existing hero button, including its orange arrow. */
.brand-film__skip-wrap{flex-shrink:0}
.brand-film__skip-wrap .button{white-space:nowrap}
.brand-film__skip-wrap button:is(:hover,:focus-visible) .icon-primary{transform:translate3d(125%,-125%,0)}
.brand-film__skip-wrap button:is(:hover,:focus-visible) .icon-follow{transform:translate3d(0,0,0)}
@media(max-width:760px){.brand-film__footer{flex-wrap:wrap}.brand-film__skip-wrap .button{min-height:48px;padding:10px 15px;font-size:.82rem;gap:12px}}