/* Animated product-hero backgrounds. The looping <video> sits behind the hero
   content (negative z-index), with .hero-veil carrying the legibility gradient
   above it. The poster still shows until the video plays (and under reduced
   motion, where hero-video.js pauses playback). */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;border:0;background:#05080D;}
.hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(115% 70% at 50% 54%,rgba(5,8,13,0.55) 0%,rgba(5,8,13,0.18) 55%,rgba(5,8,13,0) 100%),linear-gradient(180deg,rgba(5,8,13,0.88) 0%,rgba(5,8,13,0.60) 42%,rgba(5,8,13,0.56) 70%,rgba(5,8,13,0.90) 100%);}

/* Section-hero backgrounds (News / Leadership / Partners / Careers) reuse the one-shot
   .hero-vid playback (hero-video.js plays each reveal once, then freezes — no constant loop).
   Unlike the product .fl-hero (transparent), .pg-hero paints its own dark background, so the
   video is layered ABOVE it (z-index 0), with the legibility veil (1) and the .pg-main
   content (2) stacked over it. */
.pg-hero.has-vid{position:relative;overflow:hidden;}
.pg-hero.has-vid .hero-vid{z-index:0;}
.pg-hero.has-vid .hero-veil{z-index:1;}
.pg-hero.has-vid>.pg-main{position:relative;z-index:2;}