/* Hero video enhancement. The ending image continues to own frame geometry. */
.hj-hero-film {
  isolation: isolate;
  --film-fade: 550ms;
}
.hj-hero-film .hj-hero-film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the factory/forecourt instead of centering the excess sky. */
  object-position: 50% 100%;
  transform: scale(1.025);
  transform-origin: 50% 100%;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hj-hero-film:is([data-film-state="loading"], [data-film-state="playing"], [data-film-state="paused"]) .hj-hero-film-video {
  opacity: 1;
  visibility: visible;
}
.hj-hero-film[data-film-state="settling"] .hj-hero-film-video {
  opacity: 0;
  visibility: visible;
  transition: opacity var(--film-fade) cubic-bezier(.22, .61, .36, 1);
}
.hj-hero-film-control {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  background: rgb(22 22 24 / 64%);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}
.hj-hero-film-control[hidden] { display: none; }
.hj-hero-film-control:hover { background: rgb(22 22 24 / 86%); }
.hj-hero-film-control:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hj-hero-film-control:disabled { cursor: default; opacity: .65; }
.hj-hero-film-control svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hj-hero-film-control svg g { display: none; }
.hj-hero-film[data-film-state="playing"] .film-icon-pause,
.hj-hero-film[data-film-state="loading"] .film-icon-pause,
.hj-hero-film[data-film-state="settling"] .film-icon-pause,
.hj-hero-film[data-film-state="paused"] .film-icon-play,
.hj-hero-film[data-film-state="still"] .film-icon-replay { display: inline; }
@media (max-width: 760px) {
  .hj-hero-film-control { right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hj-hero-film { --film-fade: 0ms; }
}