.hero__background-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 0; pointer-events: none; transition: opacity 800ms ease; }
.has-hero-film .hero__background-video { opacity: 1; }
.hero-film-toggle { position: absolute; z-index: 3; inset-inline-end: var(--gutter); bottom: 1.7rem; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; padding: 0; border: 1px solid rgba(244,240,231,.7); border-radius: 50%; color: var(--ivory); background: rgba(21,22,18,.26); cursor: pointer; }
.hero-film-toggle::before { content: ''; width: .65rem; height: .8rem; border-inline: 2px solid currentColor; }
.hero-film-toggle[data-playing='false']::before { width: 0; height: 0; margin-inline-start: .15rem; border: .4rem solid transparent; border-inline-start: .6rem solid currentColor; border-inline-end: 0; }
.hero-film-toggle:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
.hero-film-toggle[hidden] { display: none; }
@media (max-width: 767px) { .hero-film-toggle { bottom: auto; top: calc(var(--header-height) + 1rem); } }
@media (prefers-reduced-motion: reduce) { .hero__background-video, .hero-film-toggle { display: none; transition: none; } }