/* Muted background video loops (home hero + build page heroes) */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* Home hero */
.hero.has-video{isolation:isolate}
.hero.has-video .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero.has-video .hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,.66) 42%,rgba(10,10,10,.5) 68%,rgba(10,10,10,.42) 100%),
             linear-gradient(to top,#0a0a0a 0%,rgba(10,10,10,0) 22%)}
.hero.has-video::before{z-index:1}
.hero.has-video .hero-content{z-index:2}
@media (max-width:900px){
  .hero.has-video .hero-media::after{background:linear-gradient(to bottom,rgba(10,10,10,.5) 0%,rgba(10,10,10,.66) 30%,rgba(10,10,10,.68) 100%)}
}
/* Build page heroes: video sits over the still photo inside .hero-bg */
.page-hero.has-video .hero-bg{background:#0a0a0a}
.page-hero.has-video::before{background:linear-gradient(to top,#0a0a0a 6%,rgba(10,10,10,.66) 45%,rgba(10,10,10,.6) 62%,rgba(10,10,10,.34) 85%,rgba(10,10,10,.24))}
@media (max-width:768px){
  .page-hero.has-video::before{background:linear-gradient(to top,#0a0a0a 8%,rgba(10,10,10,.68) 55%,rgba(10,10,10,.62) 78%,rgba(10,10,10,.38))}
}
@media (prefers-reduced-motion:reduce){.hero-video{animation:none;transition:none}}
/* Chips/badges get an opaque dark base on video heroes so they read exactly as they do on the plain dark hero */
.has-video .hero-badge{background:linear-gradient(rgba(225,6,0,.15),rgba(225,6,0,.15)),#0a0a0a}
.has-video .trust-chip{background:linear-gradient(rgba(225,6,0,.1),rgba(225,6,0,.1)),#0a0a0a}
/* Home reel: two stacked videos crossfade (opacity transition is set in JS from data-fade) */
.hero-reel .hero-video{opacity:0;z-index:0}
.hero-reel .hero-video:first-child{opacity:1}
.hero.has-video .hero-reel::after{z-index:2}
@media (prefers-reduced-motion:reduce){.hero-reel .hero-video{transition:none!important}}
/* Lighter overlay (reel3): soft shadow keeps hero text crisp over bright frames */
.hero.has-video .hero-text h1,.hero.has-video .hero-sub,.page-hero.has-video .page-hero-inner h1,.page-hero.has-video .page-hero-inner p{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.6)}