.hero{isolation:isolate}

.hero-atmosphere{
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 58% 54% at 50% 47%, rgba(0,0,0,0) 0%, rgba(4,6,7,.18) 48%, rgba(3,4,5,.72) 100%),
    linear-gradient(180deg, rgba(3,5,7,.5) 0%, rgba(3,4,5,.08) 34%, rgba(3,4,5,.72) 100%),
    linear-gradient(90deg, rgba(2,4,5,.46), transparent 25%, transparent 75%, rgba(2,4,5,.4)),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:auto, auto, auto, 96px 96px, 96px 96px;
  opacity:.55;
  filter:none;
}

.hero-copy,.hero-side{z-index:2}

.hero-atmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.085) 1px,transparent 1px);
  background-size:88px 88px;
  background-position:center top;
  opacity:.42;
  /* Keep grid through the bottom edge (soft fade only — never to fully transparent). */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.55) 70%,rgba(0,0,0,.4));
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.55) 70%,rgba(0,0,0,.4));
}