/* 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;}

/* Defender character hero — the Defender's own holographic character video floats above the hero
   text (object-fit contain + mix-blend lighten over the dark section, like the homepage Athena).
   Used on /athena /aegis /vigil /citadel. The video keeps class .hero-vid so hero-video.js plays
   it once and forces muted under React. The section must carry isolation:isolate for the blend. */
.dch-glow{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:880px;height:880px;max-width:130vw;background:radial-gradient(circle,rgba(62,224,240,0.13) 0%,rgba(62,224,240,0.03) 36%,transparent 64%);pointer-events:none;z-index:0;}
.dch-fig{position:relative;width:min(80vw,400px);aspect-ratio:3/4;margin:0 auto -4%;}
.dch-figglow{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);width:66%;height:46%;background:radial-gradient(circle,rgba(62,224,240,0.20) 0%,transparent 68%);pointer-events:none;z-index:0;}
.dch-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;pointer-events:none;z-index:1;}
@media(max-width:760px){.dch-fig{width:min(82vw,330px);}}

/* ── Unified character hero (athena / aegis / vigil / citadel) ─────────────────────
   ONE layout for all four pages so the holographic character renders at the SAME size,
   with the page heading overlaid IN FRONT of the figure (z-index above the lighten-
   blended video), rising to just below the knees, on a soft dark vignette + layered
   shadow so it reads as floating 3D in front. No dead space above the figure; the main
   heading is visible on load. Sibling clips are 1:1 (960x960), Athena's is ~3:4
   (828x1108); a square box with object-fit:contain fits both to the same height. */
.dch-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:82px 22px 32px;overflow:hidden;isolation:isolate;background:#05080D;}
.dch-hero .dch-fig{position:relative;width:min(94vw,64vh);height:auto;aspect-ratio:1/1;margin:0;}
.dch-copy{position:relative;z-index:3;width:min(92vw,820px);margin-top:clamp(-220px,-20vh,-140px);pointer-events:none;}
.dch-copy a{pointer-events:auto;}
.dch-copy::before{content:"";position:absolute;inset:-46px -16% -64px;z-index:-1;background:radial-gradient(126% 100% at 50% 60%,rgba(5,8,13,0.95) 0%,rgba(5,8,13,0.86) 36%,rgba(5,8,13,0.32) 66%,rgba(5,8,13,0) 82%);pointer-events:none;}
.dch-kicker{display:inline-block;padding:8px 18px;margin-bottom:18px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:0.26em;color:#3EE0F0;text-transform:uppercase;background:linear-gradient(#070b14,#070b14) padding-box,linear-gradient(120deg,#3EE0F0,#2A9DFF,#5B4AB7) border-box;border:1px solid transparent;border-radius:10px;box-shadow:0 0 18px rgba(62,224,240,0.16);}
.dch-kicker svg{width:13px;height:13px;vertical-align:-2px;margin-right:7px;display:inline-block;}
.dch-h1{margin:0;font-size:clamp(32px,4.3vw,58px);line-height:1.05;font-weight:700;letter-spacing:-0.035em;color:#fff;text-shadow:0 1px 0 rgba(5,8,13,0.9),0 3px 26px rgba(5,8,13,0.92),0 0 44px rgba(62,224,240,0.20);}
.dch-h1 i{font-style:normal;color:#3EE0F0;}
.dch-sub{margin:20px auto 0;font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:#cfd9e6;max-width:600px;text-shadow:0 1px 16px rgba(5,8,13,0.96);}
.dch-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px;}
.dch-btn-p{font-size:15px;font-weight:600;color:#05080D;background:#3EE0F0;padding:14px 28px;border-radius:999px;text-decoration:none;box-shadow:0 0 0 1px rgba(62,224,240,0.4),0 10px 30px -8px rgba(62,224,240,0.6);transition:all .15s;}
.dch-btn-p:hover{box-shadow:0 0 0 1px rgba(62,224,240,0.75),0 12px 34px -6px rgba(62,224,240,0.85);transform:translateY(-1px);}
.dch-btn-g{font-size:15px;font-weight:600;color:#EDF2F7;background:rgba(255,255,255,0.05);padding:14px 28px;border-radius:999px;text-decoration:none;border:1px solid rgba(38,52,79,0.9);transition:all .15s;}
.dch-btn-g:hover{background:rgba(255,255,255,0.09);border-color:rgba(62,224,240,0.5);}
@media(max-width:760px){.dch-hero{padding-top:74px;}.dch-hero .dch-fig{width:min(88vw,54vh);}.dch-copy{margin-top:clamp(-150px,-15vh,-94px);width:94vw;}.dch-h1{font-size:clamp(28px,7.4vw,38px);}.dch-sub{font-size:15px;}}

/* ── Generic video hero for the bespoke centered hub heroes (co/oc/tc/def-hero) ──────
   Those heroes are a max-width:1000px centered box, so the clip + veil are bleed to the
   full viewport width (left:50% + translateX(-50%) + 100vw) behind the centered, legible
   heading. Adds a min-height so the hero has presence; content sits above the video. */
.has-vid{position:relative;}
.has-vid>.hero-vid{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;object-fit:cover;z-index:0;border:0;background:#05080D;}
.has-vid>.hero-veil{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;z-index:1;}
.has-vid>:not(.hero-vid):not(.hero-veil){position:relative;z-index:2;}
.has-vid:not(.pg-hero):not(.fl-hero){min-height:clamp(360px,48vh,480px);display:flex;flex-direction:column;justify-content:center;align-items:center;}
.has-vid:not(.pg-hero):not(.fl-hero)>:not(.hero-vid):not(.hero-veil){width:100%;}