@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .hero-scroll-stage[data-sticky] {
    position: relative;
    height: 200svh;
    background: #f8faf7;
  }

  .hero-scroll-stage > .arch-hero {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
    opacity: var(--hero-fade, 1);
    will-change: opacity;
  }

  .hero-scroll-stage .arch-hero-shell {
    min-height: 100svh;
  }

  .hero-scroll-stage .arch-hero-copy,
  .hero-scroll-stage .arch-hero-footer {
    opacity: var(--hero-copy-fade, 1);
    transform: translate3d(0, var(--hero-copy-shift, 0px), 0);
    will-change: opacity, transform;
  }

  .hero-scroll-stage .arch-hero-visual {
    transform: translate3d(0, var(--hero-parallax, 0px), 0) scale(var(--hero-image-scale, 1.035));
    transform-origin: center center;
    will-change: transform;
  }

  .hero-scroll-stage + .audience-section {
    position: relative;
    z-index: 3;
    margin-top: -100svh;
  }
}