/* Load before legacy styles: important declarations in this first layer keep
   the service layouts consistent across older page-specific stylesheets. */
@layer service-layout {
  body.unified-service { --service-section-space: 32px !important; }

  body.unified-service section {
    margin-block: 0 !important;
    padding-block: var(--service-section-space) !important;
    min-height: 0 !important;
    scroll-margin-top: 112px;
  }

  body.unified-service section:first-of-type { padding-top: 128px !important; }

  body.unified-service section > :is(.container, .remaining-container) > :first-child {
    margin-top: 0 !important;
  }

  body.unified-service section > :is(.container, .remaining-container) > :last-child {
    margin-bottom: 0 !important;
  }

  body.unified-service :is(.service-photo-row, .service-design-grid, .photo-balanced-grid, .channel-hero-grid, .channel-section-grid) {
    align-items: start !important;
    gap: 28px !important;
  }

  body.unified-service :is(.service-photo-row, .service-design-grid, .photo-balanced-grid, .channel-hero-grid, .channel-section-grid) > * {
    min-width: 0 !important;
    align-self: start !important;
    margin-top: 0 !important;
  }

  body.unified-service :is(.channel-photo, .service-design-photo, .tight-photo-frame) {
    align-self: start !important;
    margin-block: 0 !important;
  }

  body.unified-service .channel-photo.service-natural-photo {
    width: min(100%, var(--service-photo-width)) !important;
    justify-self: center !important;
  }

  body.unified-service .channel-photo.service-natural-photo img {
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

  /* Content remains visible even when JavaScript cannot initialize. */
  body.unified-service .animate-on-scroll {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  @media (max-width: 991px) {
    body.unified-service section:first-of-type { padding-top: 108px !important; }
    body.unified-service :is(.service-photo-row, .service-design-grid, .photo-balanced-grid, .channel-hero-grid, .channel-section-grid) {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 22px !important;
    }
  }

  @media (max-width: 600px) {
    body.unified-service { --service-section-space: 24px !important; }
    body.unified-service section:first-of-type { padding-top: 100px !important; }
    body.unified-service :is(.local-sec7-outcome-grid, .smm-clusters-2x2-grid) {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    body.unified-service .cluster-title {
      white-space: normal !important;
      overflow-wrap: anywhere;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.unified-service *,
    body.unified-service *::before,
    body.unified-service *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
}