/* Shared hero video backdrop (matches About.html) */
.bg-backdrop {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: hsl(var(--background));
  pointer-events: none;
}
.bg-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 45%, rgba(0,0,0,0.30) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.55) 100%);
}
/* The wrapping div keeps the video constrained to the top region */
.hero-wrap { position: relative; isolation: isolate; }
/* Force the video + vignette to sit BEHIND the nav and hero. They keep
   their absolute positioning from .bg-backdrop / .bg-vignette. */
.hero-wrap > #bgVideo { z-index: 0 !important; }
.hero-wrap > .bg-vignette { z-index: 1 !important; }
/* Lift everything else (nav, hero section) above the video. */
.hero-wrap > nav,
.hero-wrap > section { position: relative; z-index: 2; }

/* Readability boost over video for nav + hero text */
.hero-wrap nav a,
.hero-wrap nav button,
.hero-wrap section {
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 28px rgba(0,0,0,0.2);
}