/* Play / Pause for the hero's background loop, added by ../js/hero-video.js.
   It appears once the loop fails to start (a phone that blocks autoplay, or one set to reduce motion)
   and then stays as Play/Pause, bottom-left in the same row as "Watch the reel", with that badge's look. The hero is
   always dark footage, so it uses the badge's fixed colours rather than the light/dark tokens. */
.hero .heroplay{
  position:absolute;left:24px;bottom:26px;z-index:3;
  font-family:inherit;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(8,12,15,.4);border:1px solid rgba(255,255,255,.32);border-radius:30px;
  padding:7px 14px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  cursor:pointer;transition:background .2s,border-color .2s;
}
.hero .heroplay:hover{background:rgba(8,12,15,.7);border-color:#fff;}
.hero .heroplay:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.hero .heroplay[hidden]{display:none;}
/* iOS draws its own play button on a blocked autoplay video; under the scrim and text it can't be tapped */
.hero video.reel::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none;}