/* Keep the hero's complete orbit in a dedicated visual column. */
.hero-immersive .hero-backdrop {
  inset: 48px -2% 80px 52%;
  width: auto;
  height: auto;
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 1;
}
.hero-immersive .hero-backdrop::after {
  background: radial-gradient(ellipse at center, transparent 38%, rgba(8,29,50,.06) 64%, rgba(8,29,50,.3) 100%);
}
.hero-immersive .ambient-a {
  left: 5%;
  top: 20%;
  width: 90%;
  height: 65%;
  opacity: .28;
}
.hero-immersive .ambient-b {
  left: 25%;
  top: 15%;
  width: 60%;
  height: 65%;
  opacity: .19;
}
.hero-immersive .hero-grid-fade {
  mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
  background-size: 70px 70px;
  opacity: .1;
}
@media (max-width: 900px) {
  .hero-immersive {
    min-height: auto;
    gap: 24px;
    padding-bottom: 36px;
  }
  .hero-immersive .hero-copy { grid-row: 1; }
  .hero-immersive .hero-backdrop {
    position: relative;
    grid-row: 2;
    inset: auto;
    width: 100%;
    height: clamp(300px, 53vw, 420px);
    margin: 0;
    opacity: 1;
  }
  .hero-immersive .hero-meta-row {
    grid-row: 3;
    margin-top: 0;
  }
}
@media (max-width: 560px) {
  .hero-immersive { gap: 20px; padding-bottom: 29px; }
  .hero-immersive .hero-backdrop { height: clamp(270px, 80vw, 340px); }
}