/* ==========================================================================
   Hero Video — ambient stock-video backdrop
   A muted, looping video sits behind every hero, treated to feel like
   slow ambient texture rather than foreground footage. Opacity, desaturation,
   and a half-speed playback rate keep it well under hero copy.

   Mount inside the existing visual layer (landing-hero__bg /
   how-we-work__hero-visual) BEFORE the aurora/blob/glimmer stack so it
   sits at the bottom of the visual layering.
   ========================================================================== */

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: saturate(0.55) brightness(1.05) contrast(1.05);
  pointer-events: none;
  z-index: 0;
}

/* Soften the top edge so the fixed nav has room to breathe over light
   videos. The bottom edge fades into the next section the same way. */

.hero-video::before {
  /* The pseudo can't render on a replaced element, so we paint the same
     mask via a dedicated wrapper if needed. Kept for documentation. */
}

/* On the home hero (no built-in fade overlay) the video can feel hot
   against centered text. Pull opacity down a touch and warm it slightly
   so the cream background still reads. */

.landing-hero__bg .hero-video {
  opacity: 0.14;
  filter: saturate(0.5) brightness(1.08) contrast(1.02);
}

/* On the inner-page heroes the existing left-side fade already washes
   out the video where the headline lives, so we can run it a little
   stronger for visible motion on the right side. */

.how-we-work__hero-visual .hero-video {
  opacity: 0.20;
}

/* Reduce-motion + small viewports — drop the video entirely. Saves
   bandwidth on cellular and respects accessibility preferences. The
   aurora + ambient-glimmer layers keep the hero feeling alive. */

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

@media (max-width: 600px) {
  .hero-video {
    /* Mobile: keep the video but pull opacity to a quieter level so the
       blurry aesthetic doesn't fight the smaller heading text. Comment
       out the next line if you'd rather hide on mobile altogether. */
    opacity: 0.12;
  }
}