/* Homepage hero background video (client, 2026-10-28): the promo film from the original site's hero
   (Vimeo 1197896918), self-hosted as assets/video/hero-1080.mp4 (desktop) and hero-720.mp4 (<=900px),
   black fade-in/out trimmed so the loop restarts cleanly. The first frame is the poster
   (assets/img/hero-video/poster-*.webp) and also replaces the old still plate in the .pha__background img,
   so the page paints the exact frame the film starts on while it loads. The video fades in once it is playing.
   A cream scrim on the copy side keeps the headline readable over moving footage (the old plate had this
   fade baked into the image). No video for prefers-reduced-motion or Data Saver: the poster stays. */
.hero-video .pha__video{
  position:absolute;z-index:-2;inset:0;display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 50%;pointer-events:none;user-select:none;
  opacity:0;transition:opacity .9s ease;
}
.hero-video .pha__video.is-playing{opacity:1}
.hero-video .pha__background{object-fit:cover;object-position:50% 50%}
@media(min-width:901px){
  .hero-video .pha::before{
    content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(250,247,240,.9) 0%,rgba(250,247,240,.78) 26%,rgba(250,247,240,.42) 46%,rgba(250,247,240,.08) 64%,rgba(250,247,240,0) 78%);
  }
}
@media(max-width:900px){
  .hero-video .pha__video,.hero-video .pha__background{object-position:56% 50%}
}
@media(prefers-reduced-motion:reduce){
  .hero-video .pha__video{display:none}
}