/* Pin hero imagery in the browser compositor, without scroll-time JS updates.
   This covers the homepage and every primary navigation page. */
@supports (clip-path: inset(0)) {
  @media (prefers-reduced-motion: no-preference) {
    main > :is(.hero, .page-hero, .listing-hero, .projects-hero, .support-hero, .contact-hero) {
      clip-path: inset(0);
    }
    main > .hero > .hero__image,
    main > .page-hero > .page-hero__image {
      position: fixed;
      inset: 0 auto auto 0;
      width: 100%;
      height: inherit;
      transform: none;
    }
    main > :is(.listing-hero, .projects-hero, .support-hero, .contact-hero)::before {
      position: fixed;
      inset: 0 auto auto 0;
      width: 100%;
      height: inherit;
    }
  }
}