/* S367 · Press play on the scene (Steven's pick C, Nov 4): one Watch the film button in the hero, and the hero itself becomes
   the player, in place, with sound and captions; it turns back into the beach when the film ends or is closed. */
.hb-fw{margin-top:clamp(20px,2.4vw,32px)}
.hb-film{position:relative;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 22px 0 7px;border:0;border-radius:999px;background:#fff;color:#0b1730;font:600 16px/1 Rubik,system-ui,sans-serif;letter-spacing:0;cursor:pointer;box-shadow:0 14px 34px -14px rgba(11,23,48,.55);transition:transform .15s cubic-bezier(.22,1,.36,1),box-shadow .2s;-webkit-appearance:none;appearance:none}
.hb-film small{font:500 13px/1 "IBM Plex Mono",ui-monospace,monospace;color:#55637a}
.hb-film-i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#1559f5}
.hb-film-i svg{width:12px;height:13px;margin-left:3px;fill:#fff}
.hb-film::before{content:"";position:absolute;inset:-7px;border-radius:999px;box-shadow:0 0 0 2px rgba(255,255,255,.6);opacity:0;animation:hbring 2.8s ease-out 1s 3;pointer-events:none}
@keyframes hbring{0%{opacity:.9;transform:scale(.97)}100%{opacity:0;transform:scale(1.14)}}
.hb-film:hover{box-shadow:0 18px 40px -14px rgba(11,23,48,.6)}
.hb-film:active{transform:scale(.97)}
.hb-film:focus-visible{outline:3px solid #fff;outline-offset:4px}
/* the hero as the player */
.hb-player{position:absolute;inset:0;z-index:30;background:#0b1730;opacity:0;transition:opacity .45s ease}
.hb-player.on{opacity:1}
.hb-player video{display:block;width:100%;height:100%;object-fit:cover;background:#0b1730}
.hb-player .hb-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font:400 24px/44px Rubik,system-ui,sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hb-player .hb-x:hover{background:rgba(255,255,255,.26)}
.hb-player .hb-x:focus-visible{outline:3px solid #fff;outline-offset:2px}
header.hb.hb-playing .hb-copy,header.hb.hb-playing .hb-rocket{visibility:hidden}
@media (prefers-reduced-motion:reduce){.hb-film::before{animation:none}.hb-player{transition:none}.hb-film{transition:none}}
@media (max-width:640px){.hb-fw{display:flex}.hb-film{width:100%;justify-content:flex-start}}
/* On blue (Steven, Nov 4): the hero's buttons follow the on-blue system. White primary for the one action, glass for the rest. */
html body header.hb .hb-film{font:600 16px/1 Rubik,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#0b1730!important}
html body header.hb .hb-film small{font:500 13px/1 "IBM Plex Mono",ui-monospace,monospace!important;letter-spacing:0!important;color:#55637a!important}
html body header.hb .s4-paths a,html body header.hb .s4-paths a:first-child{min-height:44px;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.4)!important;color:#fff!important;font:600 15px/1 Rubik,system-ui,sans-serif!important;letter-spacing:0!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html body header.hb .s4-paths a:hover{background:rgba(255,255,255,.24)!important}
html body header.hb .s4-paths{margin-top:14px!important}
/* phones: the tab bar already carries these places, so the hero keeps one action */
@media (max-width:640px){html body header.hb .s4-paths{display:none!important}}
/* S369 (Steven, Nov 4: "when you open the video it looks bad", "too much dark area", "have it open as movie screen the size of the video"):
   on tap the hero itself becomes a movie screen exactly the film's shape, 16:9, then grows back into the beach when it closes. */
header.hb.hb-movie{transition:height .55s cubic-bezier(.22,1,.36,1),min-height .55s cubic-bezier(.22,1,.36,1)}
header.hb.hb-playing .hb-copy,header.hb.hb-playing .hb-rocket{visibility:hidden}
@media (prefers-reduced-motion:reduce){header.hb.hb-movie{transition:none}}