/* Shared responsive artwork treatment for the six primary service-page heroes. */
.about-landing-hero {
  background-color: #0a4033;
  background-image: none;
}

/* The page-specific image replaces the generic grid placeholder. Keeping the
   same dark base colour avoids a visual jump while the WebP is decoded. */
.about-landing-hero::after {
  opacity: 0;
  animation: none;
}

.service-landing-hero__media,
.service-landing-hero__media picture {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.service-landing-hero__media {
  z-index: 0;
}

.service-landing-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 420ms ease-out;
}

.service-landing-hero__media img.is-ready {
  opacity: 0.94;
}

/* Art-directed service heroes share the Ethos reveal and continuous drift
   tokens. Their responsive compositions leave room for the headline. */
.service-landing-hero--planning .service-landing-hero__media img.is-ready {
  opacity: 1;
  transition: none;
  transform-origin: center;
  animation:
    ethosHeroImageReveal var(--hero-image-reveal-duration) var(--hero-image-reveal-ease) both,
    ethosHeroImageDrift var(--hero-image-drift-pass-duration) var(--hero-image-drift-ease) infinite alternate;
  will-change: opacity, transform;
}

@media (max-width: 820px) {
  .service-landing-hero__media img {
    object-position: center top;
  }

  .service-landing-hero--planning .service-landing-hero__media img.is-ready {
    animation:
      ethosHeroImageReveal var(--hero-image-reveal-duration) var(--hero-image-reveal-ease) both,
      ethosHeroImageDriftMobile var(--hero-image-drift-pass-duration) var(--hero-image-drift-ease) infinite alternate;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-landing-hero__media img {
    animation: none;
    transition: none;
  }

  .service-landing-hero--planning .service-landing-hero__media img.is-ready {
    opacity: 1;
    animation: none;
  }
}