/* Home hero slideshow: slow cross-fade between real programme photos. */
.hero.has-slides{background-image:none!important}
.hero.has-slides .motion-hero-bg{display:none}
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden;background:#004F9E}
.hero-slide{position:absolute;inset:-2%;background-size:cover;background-position:center;opacity:0;transform:scale(1.02);transition:opacity 1.6s ease}
.hero-slide.on{opacity:1;animation:heroKen 8s ease-out forwards}
@keyframes heroKen{from{transform:scale(1.02)}to{transform:scale(1.09)}}
/* Same blue wash as the inner page banners, so the white text stays readable */
.hero-slides::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,79,158,.94) 0%,rgba(0,79,158,.74) 45%,rgba(0,79,158,.28) 100%),linear-gradient(0deg,rgba(0,79,158,.75),transparent 55%)}
.hero-ctrl{position:absolute;right:max(24px,calc((100% - 1200px)/2));bottom:150px;z-index:3;display:flex;align-items:center;gap:10px}
.hero-dot{width:10px;height:10px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:width .4s,background .4s}
.hero-dot.on{width:30px;background:#ED7B3B}
.hero-pause{margin-left:6px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.15);color:#fff;font:700 12px/1 system-ui;cursor:pointer}
@media (max-width:760px){.hero-ctrl{bottom:auto;top:16px;right:16px}}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}.hero-slide.on{animation:none}}