/* PC wide-stage unification: full visual fields, restrained reading measures. */
@media (min-width: 1440px) {
  :root {
    --zf-pc-stage: calc(100vw - 72px);
    --zf-pc-stage-soft: calc(100vw - 144px);
  }

  /* Homepage */
  html body[data-page="home"] main #landing .zf-home-system-reveal,
  html body[data-page="home"] main #landing .zf-home-capability-spectrum {
    width: var(--zf-pc-stage) !important;
    max-width: none !important;
  }

  html body[data-page="home"] main > #home.zf-home-story {
    width: var(--zf-pc-stage) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  html body[data-page="home"] main #landing .zf-home-narrative-bridge {
    width: var(--zf-pc-stage-soft) !important;
    max-width: none !important;
  }

  html body[data-page="home"] main #home.zf-home-story > :is(
    .zf-home-evidence,
    .zf-home-consult
  ) {
    width: var(--zf-pc-stage) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  html body[data-page="home"] main #landing .zf-home-narrative-bridge > div:first-child {
    justify-self: start;
  }

  html body[data-page="home"] main #landing .zf-home-narrative-copy {
    justify-self: end;
  }

  /* Philosophy: widen the scene, not the paragraph measure. */
  html body[data-page="philosophy"] main > #home.zf-home-story,
  html body[data-page="philosophy"] main #home > :is(
    .zf-philosophy-opening,
    .zf-home-human,
    .zf-home-senses
  ) {
    width: var(--zf-pc-stage) !important;
    max-width: none !important;
  }

  /* Delivery: one continuous wide visual stage. */
  html body[data-page="delivery"] main > #fit,
  html body[data-page="delivery"] main > :is(
    #constraints,
    #delivery-brief,
    #integration,
    #delivery,
    #team-execution,
    #delivery-commissioning,
    #process,
    #delivery-result
  ),
  html body[data-page="delivery"] :is(
    .zf-delivery-product-logic,
    .zf-delivery-method,
    .zf-delivery-outputs,
    #delivery-stages
  ) {
    width: var(--zf-pc-stage) !important;
    max-width: none !important;
  }

  html body[data-page="delivery"] #delivery-stages.zf-scene-browser {
    width: var(--zf-pc-stage) !important;
    max-width: none !important;
  }

  /* Project access solution selector. */
  html body[data-page="project-access"] #project-access-solutions.zf-access-solutions {
    width: var(--zf-pc-stage) !important;
    max-width: none !important;
  }

  /* Basement opening: a slightly taller cinematic crop avoids a flattened wide-screen read. */
  html body[data-page="basement-system"] main > #basement-definition .basement-context-media--ground {
    aspect-ratio: 16 / 10 !important;
  }

  html body[data-page="basement-system"] main > #basement-definition .basement-context-media--ground > img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }

  /* Route openings: protect left-side white copy without greying the whole image. */
  html body[data-page="water-supply-drainage"] main #water-problem#water-problem .zf-route-opening-copy.zf-route-opening-copy::after,
  html body[data-page="basement-system"] main #basement-definition#basement-definition .zf-route-opening-copy.zf-route-opening-copy::after {
    background:
      linear-gradient(
        90deg,
        rgba(7, 13, 23, 0.96) 0%,
        rgba(7, 13, 23, 0.76) 28%,
        rgba(7, 13, 23, 0.16) 48%,
        rgba(7, 13, 23, 0) 66%,
        rgba(7, 13, 23, 0) 100%
      ),
      linear-gradient(
        0deg,
        rgba(7, 13, 23, 0.24) 0%,
        rgba(7, 13, 23, 0.03) 28%,
        rgba(7, 13, 23, 0) 48%
      ) !important;
  }

  /* Footer follows the same stage on every route. */
  html body .site-footer-premium {
    width: var(--zf-pc-stage) !important;
    max-width: none !important;
  }
}

/* Desktop route imagery: keep the mask under copy only, including 1280px PC viewports. */
@media (min-width: 1024px) {
  html body[data-page="water-supply-drainage"] main #water-problem#water-problem .zf-route-opening-copy.zf-route-opening-copy::after,
  html body[data-page="basement-system"] main #basement-definition#basement-definition .zf-route-opening-copy.zf-route-opening-copy::after {
    background:
      linear-gradient(
        90deg,
        rgba(7, 13, 23, 0.96) 0%,
        rgba(7, 13, 23, 0.76) 28%,
        rgba(7, 13, 23, 0.16) 48%,
        rgba(7, 13, 23, 0) 66%,
        rgba(7, 13, 23, 0) 100%
      ),
      linear-gradient(
        0deg,
        rgba(7, 13, 23, 0.24) 0%,
        rgba(7, 13, 23, 0.03) 28%,
        rgba(7, 13, 23, 0) 48%
      ) !important;
  }
}