/* The opening photograph arrives in the existing editorial layout on scroll. */
/* The source photograph fills the opening before the motion module loads.
   Its editorial content remains below it when JavaScript is unavailable. Once
   the module adds its stage, these direct-child selectors no longer apply. */
@media (prefers-reduced-motion: no-preference) {
  .data-centers-page main > [data-service-hero] {
    position: relative;
    width: 100%;
    max-width: none;
    padding: calc(100svh + 126px) 7% 0;
  }
  .data-centers-page main > [data-service-hero] :is(.dc-hero-photo, .pa-hero-photo) {
    position: absolute;
    z-index: 2;
    left: 14px;
    top: 14px;
    width: calc(100% - 28px);
    height: calc(100svh - 28px);
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 18px;
  }
  .data-centers-page main > [data-service-hero] :is(.dc-hero-photo, .pa-hero-photo) img {
    transform: scale(var(--service-opening-scale, 1));
  }
  .data-centers-page main > [data-service-hero] :is(.dc-hero-photo, .pa-hero-photo)::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #121b1929, #10181300 40%, #10181373);
  }
  .data-centers-page main > .dc-brand img {
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px #28473966);
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .data-centers-page main > [data-service-hero] { padding-top: calc(100svh + 106px); }
  .data-centers-page main > [data-service-hero] :is(.dc-hero-photo, .pa-hero-photo) {
    left: 8px;
    top: 8px;
    width: calc(100% - 16px);
    height: calc(100svh - 16px);
  }
}
.service-hero-scroll { position: relative; z-index: 1; }
.service-hero-stage { position: sticky; top: 0; display: flow-root; }
.service-hero-following { display: flow-root; }
.service-hero-viewport { position: absolute; width: 0; height: 100svh; visibility: hidden; pointer-events: none; }
.service-hero-stage .dc-hero { position: relative; }
.service-hero-stage .dc-breadcrumb,
.service-hero-stage .dc-intro-copy,
.service-hero-stage .pa-intro-copy,
.service-hero-stage .pa-consider { opacity: var(--service-copy-opacity, 0); }
.service-hero-target { visibility: hidden; }
.service-hero-stage.is-settled .service-hero-target { visibility: visible; }
.service-hero-visual {
  position: absolute;
  z-index: 2;
  inset: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  aspect-ratio: auto;
  overflow: hidden;
  pointer-events: none;
  will-change: left, top, width, height;
}
.service-hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #121b1929, #10181300 40%, #10181373);
  opacity: var(--service-shade-opacity, 1);
}
.service-hero-stage.is-settled .service-hero-visual { visibility: hidden; will-change: auto; }
.service-hero-label {
  position: absolute;
  z-index: 3;
  left: 3.2%;
  right: 3.2%;
  bottom: clamp(26px, 5.5vh, 78px);
  margin: 0;
  color: #fff;
  font-family: 'League Spartan', 'Arial Black', sans-serif;
  font-size: var(--service-label-size, 12vw);
  font-weight: 900;
  font-variation-settings: 'wght' 900;
  line-height: .86;
  letter-spacing: -.04em;
  white-space: nowrap;
  text-align: center;
  transform-origin: center bottom;
  opacity: var(--service-label-opacity, 1);
  text-shadow: 0 2px 24px #00000014;
}
.data-centers-page .service-hero-stage .dc-brand img { transition: filter .2s ease; }
.data-centers-page .service-hero-stage.is-photo-behind-brand .dc-brand img { filter: brightness(0) invert(1) drop-shadow(0 1px 3px #28473966); }
.service-hero-stage.is-photo-behind-brand .dc-brand:focus-visible { outline-color: #fff; }
.service-hero-stage.is-static { position: relative; }
.service-hero-stage.is-static .service-hero-visual { display: none; }
.service-hero-stage.is-static .service-hero-target { visibility: visible; }
@media (max-width: 760px) {
  .service-hero-label { left: 4%; right: 4%; bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-hero-stage { position: relative; }
  .service-hero-stage .dc-breadcrumb,
  .service-hero-stage .dc-intro-copy,
  .service-hero-stage .pa-intro-copy,
  .service-hero-stage .pa-consider { opacity: 1; }
  .service-hero-visual { display: none; }
  .service-hero-target { visibility: visible; }
}