/* V13: final hero element positioning, mouse-edge carousel, cinematic video */
/* V12.1 accidentally made the footer relative: restore position inside hero. */
.hero .hero-bottom {
  position: absolute !important;
  bottom: 34px; top: auto;
  inset-inline: 0;
  margin-inline: auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 5;
  pointer-events: none;
}
.hero .hero-bottom > *{pointer-events:auto}
.hero .hero-caption {
  position: relative;
  flex: 0 1 260px;
  align-self: end;
  min-width: 0;
  max-width: min(33vw,260px);
  margin:0;
  padding-inline-start:15px;
  text-align:start;
  background:none;
}
.hero .hero-caption #hero-caption{line-height:1.5;overflow-wrap:anywhere}
.hero .scroll-cue{
  position: relative;
  align-self: end;
  flex:0 0 auto;
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
  font-size:10px;
  letter-spacing:.13em;
  color:#e7f4ff;
  text-decoration:none;
  border-bottom:1px solid #b6ddf866;
  padding:0 0 6px;
}
.hero .hero-selector{
  position:absolute !important;
  top:50% !important;
  bottom:auto !important;
  inset-inline-end:clamp(20px,3.4vw,65px) !important;
  inset-inline-start:auto !important;
  transform:translateY(-50%) !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:26px;
  gap:12px;
  padding:14px 0;
  z-index:6;
  max-height:none;
  overflow:visible;
  direction:ltr;
}
.hero .hero-selector::before{opacity:.45}
.hero .hero-selector .hero-choice{
  flex:0 0 11px;
  width:11px;height:11px;min-width:11px;min-height:11px;
  margin:0; padding:0;
  border-radius:999px;
  background:#b6d7e236;
  border:1px solid #eff9ff8e;
  opacity:.82;
  box-shadow:0 0 0 3px #06101c13;
}
.hero .hero-selector .hero-choice[aria-pressed="true"]{
  transform:scale(1.16);
  background:#f5fbff;
  border-color:#7bcfff;
  box-shadow:0 0 0 4px #69bce75e,0 0 18px #70cafa5b;
}
.hero .hero-selector .hero-choice:hover{transform:scale(1.14);opacity:1}
/* Make a small visible edge zone for the deck's auto-cycling interaction. */
.v10-stage{cursor:ew-resize}
.v10-panel{transition:transform 1.05s cubic-bezier(.22,1,.36,1),opacity .82s ease,filter .85s ease,box-shadow .7s ease}
.v10-stage::before,.v10-stage::after{content:"";position:absolute;top:0;bottom:0;width:16%;z-index:1;pointer-events:none;opacity:.2}
.v10-stage::before{left:0;background:linear-gradient(90deg,#6ecfff16,transparent)}
.v10-stage::after{right:0;background:linear-gradient(270deg,#6ecfff16,transparent)}
/* Video: preserve original film colour and let gradient protect heading readability. */
.home-film{position:relative;overflow:hidden;background:#07111c;isolation:isolate}
.home-film .moving-stories-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  display:block;z-index:0;
  background:#07111c;
}
.home-film::before{z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,10,20,.91),rgba(4,16,28,.58) 55%,rgba(5,16,25,.14))}
html[dir=rtl] .home-film::before{background:linear-gradient(270deg,rgba(3,10,20,.91),rgba(4,16,28,.58) 55%,rgba(5,16,25,.14))}
.home-film > .wrap{position:relative;z-index:2}
.home-film .moving-stories-sound{
  position:absolute;inset-inline-end:clamp(20px,4vw,70px);
  bottom:clamp(22px,4vw,48px);z-index:4;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;border:1px solid #f6fbff55;
  background:rgba(7,19,30,.7);color:#f5f9fc;
  padding:11px 16px;min-height:46px;
  box-shadow:0 10px 35px #0005;backdrop-filter:blur(12px);
  font:600 11px/1.2 Manrope,'IBM Plex Sans Arabic',sans-serif;
  cursor:pointer;transition:background .3s,transform .3s,border-color .3s;
}
.home-film .moving-stories-sound:hover{background:rgba(20,56,80,.86);border-color:#a7dbffab;transform:translateY(-2px)}
.home-film .moving-stories-sound:focus-visible{outline:2px solid #91d8ff;outline-offset:4px}
.moving-stories-sound svg{width:20px;height:20px;flex:none}
.moving-stories-sound .sound-on{display:none}
.moving-stories-sound[aria-pressed="true"] .sound-muted{display:none}
.moving-stories-sound[aria-pressed="true"] .sound-on{display:block}
@media(max-width:900px){
  .hero .hero-bottom{bottom:30px}
  .hero .hero-selector{top:50%!important;bottom:auto!important;inset-inline-end:18px!important;transform:translateY(-50%)!important;flex-direction:column!important;width:24px!important;gap:9px!important;overflow:visible}
  .hero .hero-selector .hero-choice{width:10px;height:10px;min-width:10px;min-height:10px}
  .hero .scroll-cue{display:none}
  .home-film .moving-stories-video{object-position:53% center}
}
@media(max-width:600px){
  .hero .hero-bottom{bottom:clamp(94px,13vh,125px);padding-inline:22px}
  .hero .hero-caption{max-width:50vw;flex-basis:185px}
  .hero .hero-selector{inset-inline-end:9px!important;gap:8px!important}
  .hero .hero-selector .hero-choice{width:9px;height:9px;min-width:9px;min-height:9px}
  .home-film .moving-stories-sound{inset-inline-end:18px;bottom:19px;padding:10px 12px;font-size:10px}
  .home-film > .wrap{padding-bottom:52px}
  .home-film .moving-stories-video{object-position:53% center}
}
@media(prefers-reduced-motion:reduce){
 .v10-panel{transition:none!important}
}