/* Shared, decorative blueprint grid for every primary hero. */
:is(#opening-hero, .wd-service-intro) {
  isolation: isolate;
  position: relative;
}

/* Service subpages already had a separate animated grid layer. Keep only the shared hero grid. */
.wd-service-intro::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

:is(#opening-hero, .wd-service-intro) > .shared-hero-grid {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(40, 100, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 100, 255, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 56%, transparent 88%);
  mask-image: radial-gradient(ellipse at center, #000 0 56%, transparent 88%);
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  :is(#opening-hero, .wd-service-intro) > .shared-hero-grid {
    background-size: 42px 42px;
  }
}

@media (max-width: 600px) {
  :is(#opening-hero, .wd-service-intro) > .shared-hero-grid {
    background-image:
      linear-gradient(rgba(40, 100, 255, .04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(40, 100, 255, .04) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0 52%, transparent 90%);
    mask-image: radial-gradient(ellipse at center, #000 0 52%, transparent 90%);
  }
}