/* ==========================================================
   Home page video: fit, captions and sound button.
   Headline on top, then the video in a box that always matches the
   video's shape (5:2), so the whole picture shows with nothing cut off.
   ========================================================== */
.hero-video{transform:none}

/* ---------- Sound button ---------- */
.hero-sound{position:absolute;z-index:5;top:clamp(16px,2.6vw,34px);right:clamp(16px,2.6vw,38px);
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:999px;
  border:1.5px solid rgba(241,195,92,.75);background:rgba(4,12,31,.72);color:#fff;
  font:600 .9rem/1 var(--sans);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.35)}
.hero-sound[hidden]{display:none}
.hero-sound:hover{background:rgba(18,41,92,.9)}
.hero-sound svg{width:22px;height:22px;flex:none}
.hero-sound .ic-on{display:none}
.hero-sound.is-on .ic-on{display:block}
.hero-sound.is-on .ic-off{display:none}
.hero-sound.is-on{color:var(--gold-light)}
.hero-sound:not(.is-on){animation:hero-sound-pulse 2.4s ease-in-out 3}
@keyframes hero-sound-pulse{50%{box-shadow:0 0 0 6px rgba(241,195,92,.28),0 6px 18px rgba(0,0,0,.35)}}

/* ---------- Captions ---------- */
.hero-caption{position:absolute;z-index:4;right:clamp(16px,2.6vw,38px);top:calc(clamp(16px,2.6vw,34px) + 54px);
  max-width:min(46%,560px);padding:14px 20px 16px;border-radius:16px;
  background:linear-gradient(160deg,rgba(6,20,48,.8),rgba(4,12,31,.74));
  border:1px solid rgba(241,195,92,.45);box-shadow:0 12px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.hero-caption[hidden]{display:none}
.hero-caption.is-on{opacity:1;transform:none}
.hero-caption-label{display:block;margin:0 0 6px;color:var(--gold-light);font:700 clamp(.72rem,.95vw,.86rem)/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.hero-caption-label[hidden]{display:none}
.hero-caption-text{display:block;color:#fff;font:700 clamp(1.3rem,2.05vw,2.05rem)/1.25 var(--sans);letter-spacing:-.005em;text-wrap:balance;
  text-shadow:0 2px 12px rgba(0,0,0,.55)}

/* No topic word above captions */
.hero-caption-label{display:none!important}

/* ---------- Layout (all screens): headline on top, then the video in its own
   box. The box is always the video's exact 5:2 shape, so nothing is zoomed or
   cut. Frame, headline, video and panel share one surface so they blend. ---------- */
.hero-frame{border-color:rgba(241,195,92,.5);
  background:linear-gradient(175deg,#0d2250 0%,#081735 55%,var(--navy-950) 100%);
  box-shadow:0 0 0 1px rgba(241,195,92,.06),0 0 40px rgba(241,195,92,.08),0 24px 60px rgba(0,0,0,.45)}
.hero-stage{aspect-ratio:auto;min-height:0;max-height:none;display:flex;flex-direction:column;overflow:visible;background:none;border-radius:0}
.hero-stage::after,.hero-shade{display:none}
.hero-title{position:relative;inset:auto;order:0;z-index:1;
  padding:clamp(18px,2.4vw,34px) clamp(14px,2.6vw,40px) clamp(16px,2vw,26px)}
.hero h1{font-size:clamp(2.1rem,3.5vw,3.7rem);line-height:1.06;max-width:none;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-media{position:relative;inset:auto;order:1;flex:none;width:100%;aspect-ratio:5/2;
  border-radius:clamp(14px,1.8vw,22px);overflow:hidden;isolation:isolate;background:#0a1d44;
  box-shadow:0 0 0 1px rgba(241,195,92,.28),0 16px 36px rgba(0,0,0,.4)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;margin:0;border-radius:0;box-shadow:none;transform:none}
/* soft inner edge so the picture melts into the page instead of a hard cut */
.hero-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 clamp(18px,3vw,44px) clamp(4px,.8vw,12px) rgba(8,23,53,.85)}
/* darker lower band so captions always read */
.hero-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(4,12,31,.88) 0%,rgba(4,12,31,.5) 45%,rgba(4,12,31,0) 100%)}
.hero-caption{position:absolute;z-index:2;left:6%;right:6%;top:auto;bottom:clamp(10px,2.4vw,30px);max-width:none;min-height:0;margin:0;padding:0;
  background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-align:center;display:block}
.hero-caption[hidden]{display:none}
.hero-caption-text{font-size:clamp(1.1rem,2.3vw,2.1rem);line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8)}
.hero-sound{z-index:3;top:clamp(10px,1.4vw,18px);right:clamp(10px,1.4vw,18px)}
/* the panel sits just under the video (no overlap) in the same colors */
.hero-panel{margin:clamp(12px,1.4vw,18px) 0 0;border-color:rgba(241,195,92,.2);
  background:linear-gradient(160deg,rgba(18,41,92,.5),rgba(6,17,40,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

@media (max-width:860px){
  .hero h1{font-size:clamp(1.9rem,5.4vw,2.6rem);max-width:none}
  .hero-title{padding:20px 14px 16px}
  .hero-sound{height:36px;padding:0 12px 0 10px;font-size:.82rem}
  .hero-sound svg{width:19px;height:19px}
  .hero-caption{left:14px;right:14px;bottom:12px}
  .hero-caption-text{font-size:clamp(1.05rem,2.9vw,1.45rem)}
}
@media (max-width:600px){
  .hero h1{font-size:clamp(1.7rem,7.6vw,2.2rem)}
  .hero-title{padding:14px 8px 12px}
  .hero-media{border-radius:12px}
  .hero-caption{left:10px;right:10px;bottom:8px}
  .hero-caption-text{font-size:clamp(.98rem,4.3vw,1.1rem);line-height:1.22}
  .hero-sound{top:8px;right:8px;height:32px;padding:0 10px 0 8px;font-size:.76rem;gap:6px}
  .hero-sound svg{width:17px;height:17px}
  .hero-panel{margin:10px 0 0}
}
@media (max-width:359px){
  .hero h1{font-size:1.6rem}
  .hero-sound{width:32px;padding:0;justify-content:center}
  .hero-sound-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hero-caption-text{font-size:.92rem}
}

@media (prefers-reduced-motion:reduce){
  .hero-caption{transition:none;transform:none}
  .hero-sound{animation:none}
}