/* Water page only: added scene sizing and text/image alignment lock. */
html body[data-page="water-supply-drainage"] main > section#water-supply-drainage {
  --water-proof-width: var(--zf-scene-media-width, var(--zf-canon-media-width, min(1320px, calc(100vw - 120px)))) !important;
}

html body[data-page="water-supply-drainage"] main > section#water-supply-drainage > :is(
  .water-proof-heading,
  .water-proof-scene,
  .water-proof-closing
) {
  box-sizing: border-box !important;
  width: var(--water-proof-width) !important;
  max-width: var(--water-proof-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body[data-page="water-supply-drainage"] main > section#water-supply-drainage .water-proof-scene {
  display: block !important;
  grid-template-columns: none !important;
}

html body[data-page="water-supply-drainage"] main > section#water-supply-drainage .water-proof-copy {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

html body[data-page="water-supply-drainage"] main > section#water-supply-drainage .water-proof-copy :is(.eyebrow, h3, p) {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

html body[data-page="water-supply-drainage"] main > section#water-supply-drainage .water-proof-copy h3 {
  max-width: 20em !important;
  font-size: clamp(24px, 1.75vw, 34px) !important;
  line-height: 1.36 !important;
}

html body[data-page="water-supply-drainage"] main > section#water-supply-drainage .water-proof-copy p:not(.eyebrow) {
  max-width: 36em !important;
  font-size: 14px !important;
  line-height: 1.76 !important;
}

html body[data-page="water-supply-drainage"] main > section#water-supply-drainage .water-proof-media {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
}

html body[data-page="water-supply-drainage"] main > section#water-supply-drainage .water-proof-media img {
  display: block !important;
  width: 100% !important;
  height: clamp(500px, 34vw, 680px) !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 900px) {
  html body[data-page="water-supply-drainage"] main > section#water-supply-drainage {
    --water-proof-width: calc(100vw - 36px) !important;
  }

  html body[data-page="water-supply-drainage"] main > section#water-supply-drainage .water-proof-media {
    border-radius: 22px !important;
  }

  html body[data-page="water-supply-drainage"] main > section#water-supply-drainage .water-proof-media img {
    height: clamp(280px, 72vw, 460px) !important;
  }
}

/* 2026-06-26 water page final lock: align copy to scene media, reduce poster type, clean simulator media. */
html body[data-page="water-supply-drainage"] {
  --water-page-media-width: var(--zf-scene-media-width, var(--zf-canon-media-width, min(1320px, calc(100vw - 120px)))) !important;
}

html body[data-page="water-supply-drainage"] main > #water-problem :is(
  .water-system-definition-copy,
  .water-system-journey
),
html body[data-page="water-supply-drainage"] main > #water-logic :is(
  .water-system-signal-disclosure
),
html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry :is(
  .water-system-simulator-intro,
  .water-system-simulator-shell,
  .water-system-simulator-heading,
  .water-system-simulator-scene-rail,
  .water-system-simulator-stage
),
html body[data-page="water-supply-drainage"] main > #water-supply-drainage > :is(
  .water-proof-heading,
  .water-proof-scene,
  .water-proof-closing
) {
  box-sizing: border-box !important;
  width: var(--water-page-media-width) !important;
  max-width: var(--water-page-media-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

html body[data-page="water-supply-drainage"] main > #water-problem :is(
  .water-system-definition-copy,
  .water-system-journey-head,
  .water-system-journey-panel-copy
) > :is(.eyebrow, h1, h2, h3, p),
html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry :is(
  .water-system-simulator-intro,
  .water-system-simulator-heading,
  .water-system-simulator-heading > div
) > :is(.eyebrow, h2, h3, p),
html body[data-page="water-supply-drainage"] main > #water-supply-drainage .water-proof-copy > :is(.eyebrow, h3, p) {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

html body[data-page="water-supply-drainage"] main > #water-problem .water-lifestyle-ribbon {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(56px, 78px)) !important;
  justify-content: start !important;
  column-gap: clamp(24px, 3vw, 52px) !important;
  row-gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body[data-page="water-supply-drainage"] main > #water-problem .water-lifestyle-ribbon > span {
  width: auto !important;
  min-width: 0 !important;
}

html body[data-page="water-supply-drainage"] main > #water-problem .water-system-journey-rail {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(92px, 124px)) !important;
  justify-content: start !important;
  column-gap: clamp(42px, 5vw, 86px) !important;
  row-gap: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body[data-page="water-supply-drainage"] main > #water-problem .water-system-definition-copy h1 {
  max-width: 24em !important;
  font-size: clamp(32px, 3vw, 48px) !important;
  line-height: 1.2 !important;
}

html body[data-page="water-supply-drainage"] main > #water-problem .water-system-journey-head h2 {
  max-width: 12em !important;
  font-size: clamp(28px, 2.55vw, 40px) !important;
  line-height: 1.24 !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry {
  margin-top: clamp(46px, 5vw, 76px) !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-intro h3 {
  max-width: 17em !important;
  font-size: clamp(30px, 3.1vw, 48px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-heading h2 {
  max-width: 16em !important;
  font-size: clamp(28px, 2.8vw, 44px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-intro p:not(.eyebrow),
html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-heading p {
  max-width: 42em !important;
  font-size: 16px !important;
  line-height: 1.86 !important;
}

html body[data-page="water-supply-drainage"] main > #water-supply-drainage > .water-proof-heading {
  display: none !important;
}

html body[data-page="water-supply-drainage"] main > #water-supply-drainage > .water-proof-scene:first-of-type {
  margin-top: clamp(18px, 2.4vw, 34px) !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-stage {
  grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr) !important;
  gap: 20px !important;
  overflow: visible !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-stage > img {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  filter: saturate(1.02) contrast(1) brightness(1) !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry :is(
  .water-system-sim-veil,
  .water-system-sim-scan,
  .water-system-sim-bloom,
  .water-system-sim-riskmap,
  .water-system-sim-flowmap,
  .water-system-sim-particles
) {
  display: none !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-sim-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  justify-self: start !important;
  z-index: 6 !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 0 20px 20px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-sim-copy > :is(
  .water-system-sim-kicker,
  h3,
  .water-system-sim-text
),
html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-sim-progress {
  display: none !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-sim-actions {
  margin: 0 !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-sim-launch {
  box-shadow: 0 14px 32px rgba(14, 57, 52, 0.2) !important;
}

@media (max-width: 900px) {
  html body[data-page="water-supply-drainage"] {
    --water-page-media-width: calc(100vw - 36px) !important;
  }

  html body[data-page="water-supply-drainage"] main > #water-problem .water-lifestyle-ribbon,
  html body[data-page="water-supply-drainage"] main > #water-problem .water-system-journey-rail {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
  }

  html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-stage {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-sim-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-sim-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 0 14px 14px !important;
  }
}


/* 2026-06-26 water page typography refinement: reduce poster-like headings only on water page. */
html body[data-page="water-supply-drainage"] main > #water-problem .water-system-definition-copy h1 {
  max-width: 24em !important;
  font-size: clamp(28px, 2.45vw, 40px) !important;
  line-height: 1.24 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html body[data-page="water-supply-drainage"] main > #water-problem .water-system-journey-head h2 {
  max-width: 13em !important;
  font-size: clamp(26px, 2.15vw, 34px) !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-intro h3 {
  max-width: 18em !important;
  font-size: clamp(30px, 2.55vw, 42px) !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-heading h2 {
  max-width: 18em !important;
  font-size: clamp(26px, 2.2vw, 36px) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html body[data-page="water-supply-drainage"] main > #water-problem .water-lifestyle-ribbon {
  grid-template-columns: repeat(8, minmax(52px, 72px)) !important;
  column-gap: clamp(18px, 2.2vw, 38px) !important;
}

html body[data-page="water-supply-drainage"] main > #water-problem .water-system-journey-rail {
  grid-template-columns: repeat(5, minmax(86px, 112px)) !important;
  column-gap: clamp(28px, 3.6vw, 62px) !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry {
  margin-top: clamp(34px, 4vw, 58px) !important;
}

@media (max-width: 900px) {
  html body[data-page="water-supply-drainage"] main > #water-problem .water-system-definition-copy h1,
  html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-intro h3 {
    font-size: clamp(26px, 8vw, 34px) !important;
  }

  html body[data-page="water-supply-drainage"] main > #water-problem .water-system-journey-head h2,
  html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-heading h2 {
    font-size: clamp(24px, 7vw, 30px) !important;
  }

  html body[data-page="water-supply-drainage"] main > #water-problem .water-lifestyle-ribbon {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 14px !important;
  }

  html body[data-page="water-supply-drainage"] main > #water-problem .water-system-journey-rail {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(104px, 1fr) !important;
    column-gap: 12px !important;
  }
}

@media (max-width: 700px) {
  html body[data-page="water-supply-drainage"] main > #water-problem .water-lifestyle-ribbon {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* 2026-06-26 water page second typography pass: make path and simulator headings quieter. */
html body[data-page="water-supply-drainage"] main > #water-problem .water-system-journey-head h2 {
  max-width: 15em !important;
  font-size: clamp(22px, 1.65vw, 28px) !important;
  line-height: 1.34 !important;
  font-weight: 650 !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-intro h3 {
  max-width: 18em !important;
  font-size: clamp(25px, 1.95vw, 34px) !important;
  line-height: 1.3 !important;
  font-weight: 650 !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-intro .eyebrow {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
}

html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-intro p:not(.eyebrow) {
  max-width: 44em !important;
  font-size: 15px !important;
  line-height: 1.82 !important;
}

@media (max-width: 900px) {
  html body[data-page="water-supply-drainage"] main > #water-problem .water-system-journey-head h2 {
    font-size: clamp(22px, 6.6vw, 28px) !important;
  }

  html body[data-page="water-supply-drainage"] main > #water-system-simulator-entry .water-system-simulator-intro h3 {
    font-size: clamp(24px, 7vw, 30px) !important;
  }
}