/* Main hero media fix — stable desktop/tablet/mobile composition. */
body[data-page="main"] .hero-panorama{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#07111c;
}
body[data-page="main"] .hero-panorama .hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  overflow:hidden;
  pointer-events:none;
}
body[data-page="main"] .hero-panorama .hero-media picture{
  display:block;
  width:100%;
  height:100%;
}
body[data-page="main"] .hero-panorama .hero-scene{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:55% center;
  transform:none !important;
  transition:none !important;
  will-change:auto;
}
body[data-page="main"] .hero-panorama:after{
  display:block;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(4,12,20,.88) 0%,rgba(4,12,20,.66) 32%,rgba(4,12,20,.28) 52%,rgba(4,12,20,.05) 72%,transparent 100%),
    linear-gradient(0deg,rgba(7,17,28,.42),transparent 28%);
}
body[data-page="main"] .hero-panorama:before{z-index:1}
body[data-page="main"] .hero-panorama .hero-inner{position:relative;z-index:2}

/* Tablet: keep the whole panorama visible instead of forcing a tall cover crop. */
@media (min-width:701px) and (max-width:1050px){
  body[data-page="main"] .hero-panorama{
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  body[data-page="main"] .hero-panorama .hero-inner{
    order:0;
    width:100%;
    padding:42px 0 30px;
  }
  body[data-page="main"] .hero-panorama .hero-copy{
    width:100%;
    max-width:760px;
  }
  body[data-page="main"] .hero-panorama .hero-facts{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:760px;
  }
  body[data-page="main"] .hero-panorama .hero-facts div{
    display:grid;
  }
  body[data-page="main"] .hero-panorama .hero-media{
    position:relative;
    inset:auto;
    order:1;
    width:100%;
    height:auto;
    overflow:hidden;
  }
  body[data-page="main"] .hero-panorama .hero-media picture{
    height:auto;
  }
  body[data-page="main"] .hero-panorama .hero-scene{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center;
  }
  body[data-page="main"] .hero-panorama:after,
  body[data-page="main"] .hero-panorama:before{display:none !important}
}

/* Phones: text first, then a dedicated portrait photo with no stretching/cropping. */
@media (max-width:700px){
  body[data-page="main"] .hero-panorama{
    display:flex;
    flex-direction:column;
    min-height:0 !important;
  }
  body[data-page="main"] .hero-panorama .hero-inner{
    order:0;
    width:100%;
    padding:32px 0 24px;
  }
  body[data-page="main"] .hero-panorama .hero-copy{
    width:100%;
    max-width:100%;
  }
  body[data-page="main"] .hero-panorama .hero-media{
    position:relative;
    inset:auto;
    order:1;
    width:100%;
    height:auto;
    overflow:hidden;
    background:#07111c;
  }
  body[data-page="main"] .hero-panorama .hero-media picture{
    display:block;
    width:100%;
    height:auto;
  }
  body[data-page="main"] .hero-panorama .hero-scene{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center;
  }
  body[data-page="main"] .hero-panorama .hero-media:before{
    content:"";
    position:absolute;
    z-index:1;
    left:0;
    right:0;
    top:0;
    height:46px;
    pointer-events:none;
    background:linear-gradient(180deg,#07111c 0%,rgba(7,17,28,.72) 26%,transparent 100%);
  }
  body[data-page="main"] .hero-panorama:after,
  body[data-page="main"] .hero-panorama:before{display:none !important}
}

/* On wider phones, the panorama is more balanced than an extra-tall portrait. */
@media (min-width:481px) and (max-width:700px){
  body[data-page="main"] .hero-panorama .hero-scene{
    width:100%;
    height:auto;
  }
}

/* Desktop fallback-free render: the panorama is the section background itself. */
@media (min-width:1051px){
  body[data-page="main"] .hero-panorama{
    background-image:
      linear-gradient(90deg,rgba(4,12,20,.90) 0%,rgba(4,12,20,.68) 31%,rgba(4,12,20,.30) 50%,rgba(4,12,20,.06) 70%,rgba(4,12,20,0) 100%),
      linear-gradient(0deg,rgba(7,17,28,.40),transparent 28%),
      url('assets/hero-panorama.webp');
    background-size:cover,cover,cover;
    background-position:center,center,55% center;
    background-repeat:no-repeat;
  }
  body[data-page="main"] .hero-panorama .hero-media{display:none}
  body[data-page="main"] .hero-panorama:after{display:none !important}
}

/* Preserve the standard content gutters when the hero switches to stacked media. */
@media (min-width:701px) and (max-width:1050px){
  body[data-page="main"] .hero-panorama .hero-inner{
    width:min(1180px,calc(100% - 32px));
    margin-inline:auto;
  }
}
@media (max-width:700px){
  body[data-page="main"] .hero-panorama .hero-inner{
    width:min(1180px,calc(100% - 24px));
    margin-inline:auto;
  }
}


/* v3 mobile hero tweak: on phones the girl is shifted a bit to the right so the hand is fully visible */
@media (max-width:700px){
  body[data-page="main"] .hero-panorama .hero-media{
    background:#07111c;
  }
  body[data-page="main"] .hero-panorama .hero-scene{
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:54% center;
  }
}


/* v4 — crisp mobile main-page photo with no artificial blur or edge smearing */
@media (max-width:700px){
  body[data-page="main"] .hero-panorama .hero-media{
    background:#07111c;
    border-top:1px solid rgba(255,255,255,.05);
  }
  body[data-page="main"] .hero-panorama .hero-scene{
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center top;
    image-rendering:auto;
  }
  body[data-page="main"] .hero-panorama .hero-media:before{
    background:linear-gradient(180deg,#07111c 0%, rgba(7,17,28,.76) 18%, transparent 38%);
  }
}