/* Zamax Website .94 — owner visual-conversion, map, guide and transformation refinement. */

/* Commercial hub and detail heroes retain one readable hierarchy per family. */
@media (min-width: 981px) {
  body[data-zmx-route^="/solutions/"]:not([data-zmx-route="/solutions/"]) .hero-copy h1,
  body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) .hero-copy h1 {
    max-width: 15ch !important;
    font-size: clamp(3.2rem, 4.35vw, 4.35rem) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    text-wrap: balance !important;
  }
}

/* The Services overview proof pills need to read as deliberate proof, not pale dividers. */
body[data-zmx-route="/services/"] .hero-copy > .hero-pills > span {
  border-color: rgba(239, 210, 132, .38) !important;
  background: rgba(7, 47, 42, .72) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  color: #fffdf8 !important;
}
body[data-zmx-route="/services/"] .hero-copy > .hero-pills > span::before {
  background: #e4bd5c !important;
  color: #0b443c !important;
}

/* Close inherited same-page content-hash reuse without disturbing the praised
   full-width closing treatment. Each replacement is a relevant accepted asset. */
body[data-zmx-route="/about/"] .about-audience-grid article:nth-child(2) {
  background-image:
    linear-gradient(100deg,rgba(252,253,253,.99) 0%,rgba(252,253,253,.95) 52%,rgba(238,242,244,.48) 100%),
    url("/assets/images/06_referral_hero_warm_introduction.webp") !important;
  background-position: center,68% center !important;
  background-size: 100% 100%,cover !important;
}

/* Every Commercial service uses one centred “Start with…” rhythm and three
   compact, equal proof routes. Route palettes remain untouched. */
body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"])
  :is(.electrical-start-section,.roof-start-section,.energy-start-section) .requirement-strip {
  display: block !important;
  padding: clamp(26px, 3.4vw, 42px) !important;
  text-align: center !important;
}
body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) .requirement-copy {
  max-width: 790px !important;
  margin-inline: auto !important;
}
body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) .requirement-copy :is(.eyebrow,h2,p) {
  margin-inline: auto !important;
  text-align: center !important;
}
body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) .requirement-routes {
  width: min(100%, 930px) !important;
  margin: 26px auto 0 !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 10px !important;
}
body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) .requirement-routes button {
  min-height: 72px !important;
  height: auto !important;
  overflow: visible !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 14px !important;
  font-size: .78rem !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

/* Residential overview and detail pages now use stable family tokens. Funnel
   landing pages intentionally keep their separate conversion template. */
@media (min-width: 721px) {
  body:is(
    [data-zmx-route="/residential/"],
    [data-zmx-route="/residential/transformations/"],
    [data-zmx-route="/residential/services/"],
    [data-zmx-route="/residential/guides/"],
    [data-zmx-route="/residential/about/"],
    [data-zmx-route="/residential/referrals/"]
  ) .zmx-res-hero h1 {
    max-width: 15ch !important;
    font-size: clamp(3.35rem, 4.7vw, 4.625rem) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
  }
  body:is(
    [data-zmx-route="/residential/transformations/roofline-transformation/"],
    [data-zmx-route="/residential/transformations/conservatory-to-room/"],
    [data-zmx-route="/residential/transformations/roofpower-home/"],
    [data-zmx-route="/residential/services/roofing/"],
    [data-zmx-route="/residential/services/electrical/"],
    [data-zmx-route="/residential/services/solar-battery-ev/"]
  ) .zmx-res-hero h1 {
    max-width: 17ch !important;
    font-size: clamp(3.05rem, 4.25vw, 4.2rem) !important;
    line-height: .97 !important;
    letter-spacing: -.052em !important;
  }
}

/* Residential checklist proof matches the Commercial circled-check grammar. */
body[data-zmx-audience="residential"] .zmx-res-hero-checklist-line span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  margin-right: 7px;
  border-radius: 50%;
  background: #e4bd5c;
  color: #0b443c !important;
  font-size: .68rem !important;
  font-weight: 950;
}

/* A restrained code-native cover makes the free checklist visibly Zamax-owned
   without pretending the prospective PDF already exists. */
body[data-zmx-route="/residential/"] .zmx-dot82-card__visual--property { position: relative; }
body[data-zmx-route="/residential/"] .zmx-dot82-card__visual--property::after {
  content: "ZAMAX  •  HOME\A 18-POINT ROOF & GUTTER\A CHECKLIST";
  white-space: pre;
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: min(210px, 58%);
  padding: 16px 16px 18px;
  border: 1px solid rgba(210,166,83,.65);
  border-radius: 5px 14px 14px 5px;
  background: linear-gradient(145deg,rgba(255,253,248,.97),rgba(241,231,207,.96));
  box-shadow: 0 16px 34px rgba(4,29,26,.25);
  color: #0b443c;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.55;
  text-align: left;
}

/* Paired Residential pathways and About actions share a centred baseline. */
body[data-zmx-route="/residential/"] .zmx-res-home-path :is(.zmx-res-section-heading,.zmx-res-button),
body[data-zmx-route="/residential/about/"] .zmx-res-route-buttons {
  margin-inline: auto;
  text-align: center;
}
body[data-zmx-route="/residential/"] .zmx-res-home-path .zmx-res-button { justify-self: center; }

/* One official ONS/OS map: readable labels, restrained hierarchy and no faux
   “coverage boundary” treatment. Geometry and attribution stay byte-identical. */
body[data-zmx-route="/residential/"] .zmx-res-area-layout {
  grid-template-columns: minmax(290px,.72fr) minmax(520px,1.28fr) !important;
  align-items: center !important;
}
.zmx-res-coverage-map--official { background: #fffdf8 !important; }
.zmx-res-coverage-map--official svg { padding: 14px 14px 2px; }
.zmx-res-coverage-map--official .zmx-res-coverage-map__field { fill: #eef2e9; }
.zmx-res-coverage-map--official .zmx-res-coverage-map__region-shape { fill: #dfe8df; stroke: #8da59a; stroke-width: 2; }
.zmx-res-coverage-map--official .zmx-res-coverage-map__county-shape { fill: #e8cf8e; stroke: #0b5b51; stroke-width: 3; }
.zmx-res-coverage-map--official :is(.zmx-res-coverage-map__region,.zmx-res-coverage-map__county) {
  fill: #0b443c;
  font: 850 18px/1.2 Arial,sans-serif;
}
.zmx-res-coverage-map--official .zmx-res-coverage-map__place text {
  font-size: 13px !important;
  paint-order: stroke;
  stroke: #fffdf8;
  stroke-width: 4px;
}
.zmx-res-coverage-map--official > figcaption {
  background: #072f2a !important;
  color: rgba(255,255,255,.84) !important;
}
.zmx-res-coverage-map--official > figcaption > strong { color: #fffdf8 !important; }
.zmx-res-coverage-map--official .zmx-res-coverage-map__source {
  border-top-color: rgba(255,255,255,.24) !important;
  color: #e7eee9 !important;
}
.zmx-res-coverage-map--official .zmx-res-coverage-map__source a {
  color: #ffe19a !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.zmx-res-coverage-map--official .zmx-res-coverage-map__source a:focus-visible {
  outline: 3px solid #ffe19a;
  outline-offset: 3px;
}
.zmx-res-coverage-map--official .zmx-res-coverage-map__places { display: none !important; }

/* Matched-property comparisons: large equal media, immediate cues and one
   concise truthful disclosure. */
.zmx94-transformation-comparison .zmx92-comparison-grid { align-items: stretch; }
.zmx94-transformation-comparison .zmx92-comparison-grid figure {
  display: grid;
  grid-template-rows: minmax(330px, 42vw) auto;
}
.zmx94-transformation-comparison .zmx92-comparison-grid img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
}
.zmx94-transformation-comparison .zmx92-comparison-grid figcaption {
  min-height: 92px;
  display: flex;
  align-items: center;
}
.zmx94-transformation-comparison .zmx93-comparison-disclosure {
  width: fit-content;
  margin: 16px auto 0;
  padding: 11px 15px;
  border: 1px solid rgba(11,68,60,.18);
  border-radius: 999px;
  background: #fffdf8;
  color: #334c44;
  text-align: center;
}
.zmx94-transformation-guide-support {
  display: grid;
  grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr);
  gap: 18px;
  align-items: stretch;
}
.zmx94-transformation-guide-support .zmx-res-illustration { min-height: 330px; }
.zmx94-transformation-guide-support .zmx-res-guide-gate { margin: 0; }

/* Twelve truthful guide concepts with real local filter state. */
.zmx94-guide-filter button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(11,68,60,.22);
  border-radius: 999px;
  background: #fffdf8;
  color: #0b443c;
  font: inherit;
  font-size: .82rem;
  font-weight: 850;
  cursor: pointer;
}
.zmx94-guide-filter button[aria-pressed="true"] {
  border-color: #0b443c;
  background: #0b443c;
  color: #fffdf8;
}
.zmx94-guide-filter button:focus-visible,
.zmx94-guide-overview summary:focus-visible,
.zmx94-guide-more:focus-visible { outline: 3px solid #d2a653; outline-offset: 3px; }
.zmx94-guide-result-count { margin: 14px 0 20px; color: #4f645d; font-size: .84rem; font-weight: 750; }
body[data-zmx-route="/residential/guides/"] .zmx-res-guide-card[hidden] { display: none !important; }
body[data-zmx-route="/residential/guides/"] .zmx94-guide-more[hidden] { display: none !important; }
.zmx94-guide-overview { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(11,68,60,.12); }
.zmx94-guide-overview summary { color: #0b443c; font-weight: 900; cursor: pointer; }
.zmx94-guide-overview p { margin-top: 10px !important; }
.zmx94-guide-overview small { color: #5e706a; }
.zmx94-guide-more { display: flex; width: fit-content; margin: 22px auto 0; }

/* Keep the accepted booklet completely inside frame on both breakpoints. */
body[data-zmx-route="/residential/guides/"] .zmx-res-hero::before {
  background-size: cover;
  background-position: 44% 50% !important;
}

/* The closing conversion unit remains full-width but no longer overwhelms the
   page family. */
body[data-zmx-audience="residential"] .zmx-res-final-cta {
  min-height: 520px !important;
  padding-block: 68px !important;
}
body[data-zmx-audience="residential"] .zmx-res-final-cta > .zmx-res-container { min-height: 0 !important; }

@media (max-width: 980px) {
  body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) .requirement-routes { grid-template-columns: 1fr !important; }
  body.roofing-page[data-zmx-route="/services/commercial-roofing/"]:not([data-zmx-route="/services/"]) .roof-start-section .requirement-routes button {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: normal !important;
  }
  body[data-zmx-route="/residential/"] .zmx-res-area-layout { grid-template-columns: 1fr !important; }
  .zmx94-transformation-guide-support { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body:is(
    [data-zmx-route^="/residential/transformations/"],
    [data-zmx-route^="/residential/services/"],
    [data-zmx-route="/residential/"],
    [data-zmx-route="/residential/guides/"],
    [data-zmx-route="/residential/about/"],
    [data-zmx-route="/residential/referrals/"]
  ) .zmx-res-hero h1 {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 10vw, 2.7rem) !important;
    line-height: .99 !important;
    letter-spacing: -.045em !important;
  }
  body[data-zmx-route="/residential/"] .zmx-dot82-card__visual--property::after {
    left: 12px;
    bottom: 12px;
    width: min(178px, 64%);
    padding: 12px;
    font-size: .61rem;
  }
  .zmx-res-coverage-map--official svg { min-height: 360px; padding: 8px; }
  .zmx-res-coverage-map--official .zmx-res-coverage-map__place text { font-size: 15px !important; }
  .zmx94-transformation-comparison .zmx92-comparison-grid figure { grid-template-rows: 300px auto; }
  .zmx94-transformation-comparison .zmx92-comparison-grid img { min-height: 300px; }
  .zmx94-transformation-comparison .zmx93-comparison-disclosure { border-radius: 16px; }
  body[data-zmx-route="/residential/guides/"] .zmx-res-hero::before {
    background-position: right 10px bottom 10px !important;
    background-size: auto 43% !important;
  }
  .zmx94-guide-filter { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .zmx94-guide-filter button { flex: 0 0 auto; scroll-snap-align: start; }
  body[data-zmx-audience="residential"] .zmx-res-final-cta { min-height: 420px !important; padding-block: 54px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .zmx94-guide-filter button { scroll-behavior: auto; }
}

/* Dot94 Correction-1: keep the accepted ONS/OS geometry, data, attribution and
   layout byte-for-byte while removing the inherited same-colour text stroke
   that made the north label unreadable. */
.zmx-res-coverage-map--official .zmx-res-coverage-map__north text {
  stroke: none !important;
  paint-order: normal !important;
}