/* Zamax Website .87 — owner-review conversion and visual-authenticity finish.
   This last-loaded sheet is intentionally narrow: it restores previously good
   Commercial treatments and gives Residential the same visual grammar without
   changing accepted copy, routes, forms or runtime behaviour. */

:root {
  --zmx87-ink: #102520;
  --zmx87-green: #0b443c;
  --zmx87-green-deep: #062f2a;
  --zmx87-teal: #1f766a;
  --zmx87-gold: #d2a653;
  --zmx87-cream: #f5efe0;
  --zmx87-paper: #fffdf8;
}

/* Shared navigation: true desktop disclosure menus and a readable, flat
   mobile hierarchy. Native details keeps every destination available without
   introducing a second navigation runtime. */
.zmx-global-nav-group {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.zmx-global-nav-group > summary {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(16, 35, 32, .82);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.zmx-global-nav-group > summary::-webkit-details-marker { display: none; }
.zmx-global-nav-group > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.zmx-global-nav-group[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.zmx-global-nav-group[data-current="true"] > summary::before {
  content: "";
  position: absolute;
  inset: auto 0 -8px;
  height: 2px;
  border-radius: 2px;
  background: var(--zmx87-teal);
}
.zmx-global-nav-menu {
  position: absolute;
  z-index: 950;
  top: calc(100% + 11px);
  left: 50%;
  width: max-content;
  min-width: 255px;
  max-width: min(340px, calc(100vw - 32px));
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(16, 37, 32, .13);
  border-radius: 18px;
  background: rgba(255, 253, 248, .99);
  box-shadow: 0 22px 55px rgba(7, 47, 42, .18);
  transform: translateX(-50%);
}
.zmx-global-nav-menu a {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 11px;
  white-space: normal;
}
.zmx-global-nav-menu a:hover,
.zmx-global-nav-menu a[aria-current="page"] { background: #f1eadb; color: #0b443c; }
.zmx-global-nav-menu a[aria-current="page"]::after { display: none; }

.zmx-global-mobile-group {
  display: grid;
  gap: 7px;
  padding: 9px 0 13px;
  border-bottom: 1px solid rgba(16, 37, 32, .12);
}
.zmx-global-mobile-subnav {
  display: grid;
  gap: 4px;
  padding-left: 16px;
  border-left: 3px solid rgba(210, 166, 83, .62);
}
.zmx-global-mobile-subnav a { min-height: 42px !important; font-size: .88rem !important; }

/* Canonical light logo on the dark footer: no white tile, pixel halo, backing
   box or blend-mode treatment. */
.zmx-global-footer__identity {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}
.zmx-global-footer__identity::before { content: none !important; display: none !important; }
.zmx-global-footer__logo,
body[data-zmx-route="/about/"] .zmx-global-footer__logo {
  width: min(286px, 100%) !important;
  height: auto !important;
  max-height: 112px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  object-position: center !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.zmx-global-footer__identity > p { max-width: 39ch; margin-inline: auto !important; }

/* Commercial typography: hero scale is retained; supporting section headings
   stop behaving like second heroes. */
body:not([data-zmx-audience="residential"]) main :is(section, article, aside):not(.hero):not(.solution-hero):not(.service-hero):not(.about-hero) h2 {
  font-size: clamp(1.9rem, 3.55vw, 3.45rem) !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}
body:not([data-zmx-audience="residential"]) main :is(.card, article) h3 {
  font-size: clamp(1.18rem, 2vw, 1.75rem);
  line-height: 1.16;
  text-wrap: balance;
}

/* Owner-reviewed narrow supporting slots need a calmer sub-hero scale. The
   route heroes and the praised solution-detail gradients remain untouched. */
body:not([data-zmx-audience="residential"]) main :is(.hero-side, .avoid-copy, .about-coverage-heading, .cta-band, .roofing-decision-copy) h2,
body[data-zmx-route="/referrals/"] main :is(.referral-intro, .referral-final, .final-card, .cta-band) h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.65rem) !important;
  line-height: 1.08 !important;
}

/* The inherited route styles carry unusually specific !important selectors.
   These ID-anchored rules affect only headings identified by the focused
   pixel audit and therefore do not flatten the rest of the design system. */
body[data-zmx-route="/services/"] #main-content .hero-side h2 { font-size: 2.2rem !important; line-height: 1.09 !important; }
body[data-zmx-route="/solutions/solar-ready-roof-power/"] #main-content .avoid-copy h2 { font-size: 2.35rem !important; line-height: 1.08 !important; }

/* Plain gold process numerals replace the inherited boxed treatment. */
body:not([data-zmx-audience="residential"]) main :is(.process-no, .step-no, .process-number, .num, .scope-icon, .about-audience-number) {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 0 13px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--zmx87-gold) !important;
  box-shadow: none !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}

/* Hassan rejected the Referrals gradient number/symbol boxes. Keep the
   information, but present it as the same plain-gold grammar used elsewhere. */
body[data-zmx-route="/referrals/"] #main-content .card .icon {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--zmx87-gold) !important;
  font-size: clamp(1.85rem, 3.2vw, 2.65rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* One pill rhythm across Commercial proof points. */
body:not([data-zmx-audience="residential"]) main :is(.check-pill, .difference-points span, .assessment-chips span, .proof-pill) {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 13px !important;
  border: 1px solid rgba(16, 37, 32, .14) !important;
  border-radius: 999px !important;
  background: rgba(255, 253, 248, .86) !important;
  color: var(--zmx87-ink) !important;
  box-shadow: none !important;
}

/* Restore the authored full-width photographic Commercial closing moments.
   Solution-detail gradients are deliberately excluded and remain untouched. */
body[data-zmx-route="/"] .final-cta {
  min-height: 0 !important;
  padding: 0 !important;
  background: var(--zmx87-green-deep) !important;
}
body[data-zmx-route="/"] .final-cta > .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body[data-zmx-route="/"] .final-cta .cta-box {
  position: relative !important;
  isolation: isolate;
  min-height: clamp(520px, 58vw, 700px) !important;
  display: grid !important;
  place-content: center !important;
  gap: 16px !important;
  overflow: hidden;
  padding: clamp(78px, 9vw, 120px) max(22px, calc((100vw - 1180px) / 2)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  text-align: center !important;
}
body[data-zmx-route="/"] .final-cta .cta-bg-img {
  position: absolute !important;
  z-index: -2 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}
body[data-zmx-route="/"] .final-cta .cta-box::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 29, 26, .9), rgba(4, 29, 26, .58) 52%, rgba(4, 29, 26, .76));
}
body[data-zmx-route="/"] .final-cta .cta-box > :not(.cta-bg-img) { position: relative; z-index: 1; }
body[data-zmx-route="/"] .final-cta :is(h2, p) { margin-inline: auto !important; text-align: center !important; }
body[data-zmx-route="/"] .final-cta .cta-actions { justify-content: center !important; }

body[data-zmx-route="/services/"] .final,
body[data-zmx-route="/about/"] .about-final-card,
body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) .final-cta {
  position: relative !important;
  isolation: isolate;
  min-height: clamp(520px, 58vw, 680px) !important;
  display: grid !important;
  place-content: center !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  color: #fff !important;
  text-align: center !important;
}
body[data-zmx-route="/services/"] .final {
  background-image: linear-gradient(rgba(4,29,26,.73), rgba(4,29,26,.84)), url("/assets/generated/a39715652f1d2be7c8d0.webp") !important;
}
body[data-zmx-route="/about/"] .about-final-card {
  width: 100% !important;
  max-width: none !important;
  background-image: linear-gradient(rgba(4,29,26,.66), rgba(4,29,26,.84)), url("/assets/generated/a39715652f1d2be7c8d0.webp") !important;
}
body[data-zmx-route="/services/commercial-electrical/"] .final-cta {
  background-image: linear-gradient(rgba(4,29,26,.66), rgba(4,29,26,.85)), url("/assets/generated/dbd5dcbdd6f7b2ee3a74.webp") !important;
}
body[data-zmx-route="/services/commercial-roofing/"] .final-cta {
  background-image: linear-gradient(rgba(4,29,26,.66), rgba(4,29,26,.85)), url("/assets/generated/c8e6c8208707a2484626.webp") !important;
}
body[data-zmx-route="/services/renewables-ev-charging/"] .final-cta {
  background-image: linear-gradient(rgba(4,29,26,.66), rgba(4,29,26,.85)), url("/assets/generated/d2f2d718767c5630a471.webp") !important;
}
body[data-zmx-route^="/services/"] .final-cta :is(.container, .wrap, .cta-box),
body[data-zmx-route="/services/"] .final > :is(.container, .wrap),
body[data-zmx-route="/about/"] .about-final-content {
  width: min(900px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
  text-align: center !important;
}

/* Resource and referral closes are centred, image-led and visibly separate
   from the footer. */
body[data-zmx-route="/resources/"] .cta-band {
  min-height: clamp(500px, 55vw, 650px) !important;
  display: grid !important;
  place-content: center !important;
  margin-bottom: clamp(52px, 7vw, 88px) !important;
  border-radius: 0 !important;
  background-image: linear-gradient(rgba(4,29,26,.62), rgba(4,29,26,.86)), var(--cta-image) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}
body[data-zmx-route="/resources/"] .cta-band :is(.container, .wrap) { margin-inline: auto !important; }
body[data-zmx-route="/referrals/"] main > :last-child { margin-bottom: clamp(52px, 7vw, 88px) !important; }

/* The restored six-guide Commercial resource library reads as an intentional
   editorial system rather than six undifferentiated white text boxes. */
body[data-zmx-route="/resources/"] .zmx-dot85-resources {
  background:
    radial-gradient(circle at 88% 10%, rgba(31,118,106,.12), transparent 29%),
    radial-gradient(circle at 9% 92%, rgba(210,166,83,.16), transparent 32%),
    linear-gradient(145deg, #f5efe0 0%, #edf3ee 52%, #f8f3e7 100%) !important;
}
body[data-zmx-route="/resources/"] .zmx-dot85-resource-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(16,37,32,.13) !important;
  background: rgba(255,253,248,.92) !important;
  box-shadow: 0 18px 44px rgba(7,47,42,.08) !important;
}
body[data-zmx-route="/resources/"] .zmx-dot85-resource-card::before {
  content: "";
  width: 50px;
  height: 60px;
  display: block;
  margin-bottom: 22px;
  border: 2px solid currentColor;
  border-radius: 6px 12px 12px 6px;
  background:
    linear-gradient(currentColor,currentColor) 13px 17px / 22px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 13px 27px / 18px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 13px 37px / 23px 2px no-repeat,
    linear-gradient(145deg, #fffdf8, #eee2ca);
  color: var(--zmx87-teal);
  opacity: .86;
}
body[data-zmx-route="/resources/"] .zmx-dot85-resource-card:nth-child(3n + 2)::before { color: #a37426; }
body[data-zmx-route="/resources/"] .zmx-dot85-resource-card:nth-child(3n + 3)::before { color: #456981; }

/* Commercial service-entry blocks and checklist notes now follow one rhythm.
   Individual route palettes stay intact; only geometry and proof styling are
   normalised. */
body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) :is(.electrical-start-section, .roof-start-section, .energy-start-section) .requirement-strip {
  display: grid !important;
  grid-template-columns: minmax(0, .78fr) minmax(430px, 1.05fr) !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 30px !important;
  border-radius: 30px !important;
}
body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) .requirement-routes {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) :is(.hero-checklist-note, .final-checklist-note) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  font-size: .84rem !important;
  font-weight: 780 !important;
  line-height: 1.4 !important;
}
body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) :is(.hero-checklist-note, .final-checklist-note)::before {
  content: "✓" !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-grid !important;
  flex: 0 0 20px !important;
  place-items: center !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: rgba(210,166,83,.22) !important;
  color: #f1d98e !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* About hero proof and action share a single baseline, while retaining the
   accepted left-aligned commercial composition. */
body[data-zmx-route="/about/"] .about-proof-cta {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  gap: 12px 16px !important;
}
body[data-zmx-route="/about/"] .about-proof-pills {
  display: flex !important;
  flex: 1 1 520px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}
body[data-zmx-route="/about/"] .about-proof-cta .primary-btn {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
}

/* Residential supporting typography is deliberately one step below hero
   scale; long headings stay at two lines more often instead of four. */
body[data-zmx-audience="residential"] .zmx-res-section-heading h2,
body[data-zmx-audience="residential"] .zmx-res-heading h2 {
  max-width: 22ch !important;
  font-size: clamp(1.9rem, 3.7vw, 3.55rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}
body[data-zmx-audience="residential"] .zmx-res-card h3,
body[data-zmx-audience="residential"] .zmx-res-service-tiles h3 {
  font-size: clamp(1.2rem, 2.15vw, 1.7rem) !important;
  line-height: 1.16 !important;
  text-wrap: balance;
}

body[data-zmx-audience="residential"] :is(.zmx-res-split, .zmx-res-area-layout, .zmx-res-about-audience, .zmx-res-faq-layout) .zmx-res-section-heading h2,
body[data-zmx-audience="residential"] :is(.zmx-res-split, .zmx-res-area-layout, .zmx-res-about-audience, .zmx-res-faq-layout) .zmx-res-heading h2 {
  font-size: clamp(1.82rem, 3.15vw, 2.85rem) !important;
  line-height: 1.07 !important;
}

/* Consistent pill/tick grammar, horizontal where there is room. */
body[data-zmx-audience="residential"] .zmx-res-benefit-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body[data-zmx-audience="residential"] .zmx-res-benefit-pills li {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 13px !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  line-height: 1.25 !important;
}
body[data-zmx-audience="residential"] .zmx-res-section--cream .zmx-res-benefit-pills li,
body[data-zmx-audience="residential"] .zmx-res-area-layout .zmx-res-benefit-pills li,
body[data-zmx-audience="residential"] .zmx-res-section:not(.zmx-res-section--green):not(.zmx-res-section--dark) .zmx-res-benefit-pills li {
  border-color: rgba(16,37,32,.15) !important;
  background: #fffaf0 !important;
  color: var(--zmx87-ink) !important;
}
body[data-zmx-audience="residential"] .zmx-res-benefit-pills li > span {
  width: 20px !important;
  height: 20px !important;
  display: inline-grid !important;
  flex: 0 0 20px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--zmx87-gold) !important;
  color: var(--zmx87-green-deep) !important;
  font-size: .72rem !important;
  line-height: 1 !important;
}

body[data-zmx-audience="residential"] .zmx-res-process li > span,
body[data-zmx-audience="residential"] .zmx-res-card__number {
  width: auto !important;
  height: auto !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--zmx87-gold) !important;
  font-size: clamp(1.9rem, 4vw, 3rem) !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
}

/* Service cards use restrained, code-native technical icons instead of a wall
   of undifferentiated text. */
.zmx-res-service-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.zmx-res-service-card-grid .zmx-res-card {
  display: flex;
  min-height: 250px;
  flex-direction: column;
}
.zmx-res-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border: 1px solid rgba(31,118,106,.22);
  border-radius: 16px;
  background: linear-gradient(145deg, #fffdf8, #eee2ca);
  color: var(--zmx87-green);
}
.zmx-res-card__icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }

/* Purposeful guide images and a credible branded guide visual. */
.zmx-res-guide-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
.zmx-res-guide-card {
  overflow: hidden;
  border: 1px solid rgba(16,37,32,.14);
  border-radius: 25px;
  background: var(--zmx87-paper);
  box-shadow: 0 16px 38px rgba(7,47,42,.08);
}
.zmx-res-guide-card__media { height: 210px; margin: 0; overflow: hidden; }
.zmx-res-guide-card__media img { width: 100%; height: 100%; object-fit: cover; }
.zmx-res-guide-card__body { display: flex; min-height: 360px; flex-direction: column; padding: 26px; }
.zmx-res-guide-card__body .zmx-dot86-guide-request { width: fit-content; margin-top: auto !important; }
.zmx-res-guide-gate .zmx-dot86-guide-request,
.zmx-res-guide-card .zmx-dot86-guide-request {
  border-color: transparent !important;
  background: var(--zmx87-gold) !important;
  color: var(--zmx87-ink) !important;
}
.zmx-res-guide-hero-brand {
  position: absolute;
  z-index: -1;
  right: clamp(22px, 6vw, 92px);
  bottom: clamp(34px, 8vw, 94px);
  width: min(330px, 35vw);
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 22px;
  background: rgba(4,29,26,.72);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(7px);
}
.zmx-res-guide-hero-brand img { width: min(230px, 100%); margin-inline: auto; }
.zmx-res-guide-hero-brand span { color: #f4d989; font-size: .86rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }

/* Truthful north-up coordinate map. No synthetic service boundary is drawn. */
.zmx-res-coverage-map__field { fill: #e8eadf; stroke: rgba(210,166,83,.72); stroke-width: 3; }
.zmx-res-coverage-map__grid { opacity: .32; stroke: #8ba099; stroke-width: 1.3; fill: none; }
.zmx-res-coverage-map__north { fill: none; stroke: #0b443c; stroke-width: 3; }
.zmx-res-coverage-map__north text { fill: #0b443c; stroke: none; font: 900 18px Arial, sans-serif; }
.zmx-res-coverage-map__links { fill: none; stroke: rgba(31,118,106,.44); stroke-width: 4; stroke-dasharray: 9 11; }
.zmx-res-coverage-map__place circle { fill: var(--zmx87-gold) !important; stroke: #0b443c !important; stroke-width: 4 !important; }
.zmx-res-coverage-map__place text { fill: #102520 !important; font: 800 18px Arial, sans-serif !important; }
.zmx-res-coverage-map__place--base text { font-weight: 950 !important; }
.zmx-res-coverage-map__region { fill: rgba(16,37,32,.52); font: italic 800 18px Georgia, serif; }
.zmx-res-coverage-map__source {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.72);
  font-size: .76rem;
  line-height: 1.45;
}

/* Code-native roofline detail: technical, restrained and visibly illustrative. */
.zmx-res-roofline-diagram {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  background: #f5efe0;
  box-shadow: 0 24px 62px rgba(0,0,0,.18);
}
.zmx-res-roofline-diagram svg { display: block; width: 100%; height: auto; }
.zmx-res-roofline-diagram__roof-plane { stroke: #173f38; stroke-width: 4; stroke-linejoin: round; }
.zmx-res-roofline-diagram__roof-plane--left { fill: #9eb1aa; }
.zmx-res-roofline-diagram__roof-plane--right { fill: #708c83; }
.zmx-res-roofline-diagram__tile { fill: none; stroke: rgba(23,63,56,.5); stroke-width: 3; stroke-linecap: round; }
.zmx-res-roofline-diagram__wall { stroke: #bda77d; stroke-width: 3; }
.zmx-res-roofline-diagram__fascia { fill: #fffdf8; stroke: #355e56; stroke-width: 3; }
.zmx-res-roofline-diagram__soffit { fill: #e9dfca; stroke: #355e56; stroke-width: 3; }
.zmx-res-roofline-diagram__vents { fill: none; stroke: #6d817b; stroke-width: 4; stroke-linecap: round; }
.zmx-res-roofline-diagram__gutter,
.zmx-res-roofline-diagram__downpipe { fill: none; stroke: #193e37; stroke-width: 12; stroke-linecap: round; }
.zmx-res-roofline-diagram__light > path:first-child { stroke: #4b5f59; stroke-width: 5; }
.zmx-res-roofline-diagram__light circle { fill: #f2c75f; stroke: #7c5c19; stroke-width: 4; }
.zmx-res-roofline-diagram__glow { fill: rgba(240,199,96,.28); stroke: none; }
.zmx-res-roofline-diagram__labels { fill: none; stroke: #1f766a; stroke-width: 2.5; }
.zmx-res-roofline-diagram__labels text { fill: #102520; stroke: none; font: 800 17px Arial, sans-serif; }
.zmx-res-roofline-diagram figcaption { padding: 16px 20px; color: #536760; line-height: 1.55; text-align: center; }
.zmx-res-roofline-diagram figcaption strong { color: #143d35 !important; }

/* One consistent full-width Ready-to-Talk geometry. Image variants retain
   their own photography; Roofline deliberately uses a route-specific gradient
   because the rejected synthetic roof photos were not technically credible. */
body[data-zmx-audience="residential"] .zmx-res-final-cta {
  min-height: clamp(520px, 58vw, 680px) !important;
  display: grid !important;
  align-items: center !important;
  padding: clamp(78px, 9vw, 112px) 0 !important;
  background-position: center !important;
  background-size: cover !important;
}
body[data-zmx-audience="residential"] .zmx-res-final-cta > .zmx-res-container {
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
}
body[data-zmx-audience="residential"] .zmx-res-final-cta :is(h2, p) { text-wrap: balance; }
.zmx-res-final-cta--roofline-gradient {
  background:
    radial-gradient(circle at 82% 16%, rgba(111,151,159,.54), transparent 32%),
    radial-gradient(circle at 13% 92%, rgba(210,166,83,.38), transparent 34%),
    linear-gradient(130deg, #062f2a 0%, #0f5d54 46%, #76979d 100%) !important;
}

/* Keep related card actions aligned and visibly clickable. */
body[data-zmx-audience="residential"] .zmx-res-service-tiles__actions {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
body[data-zmx-audience="residential"] .zmx-res-service-tiles__actions .zmx-res-text-link {
  margin-top: 0 !important;
  text-decoration: none !important;
}

/* The owner explicitly asked for Residential to retain the same visible
   post-hero conversion affordance as Commercial on desktop as well as mobile. */
@media (min-width: 821px) {
  body[data-zmx-audience="residential"] .zmx-global-sticky {
    display: block !important;
  }
  body[data-zmx-audience="residential"] .zmx-global-sticky:not(.is-visible) {
    visibility: hidden !important;
    transform: translateY(calc(100% + 22px)) !important;
    pointer-events: none !important;
  }
  body[data-zmx-audience="residential"] .zmx-global-sticky.is-visible {
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  :is(.zmx-global-nav-menu a, .zmx-global-mobile-links a, .zmx-res-guide-card, .zmx-res-card__icon) { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
  .zmx-res-guide-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(7,47,42,.14); }
}

@media (max-width: 1100px) {
  .zmx-res-service-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .zmx-res-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) :is(.electrical-start-section, .roof-start-section, .energy-start-section) .requirement-strip,
  body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) .requirement-routes {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .zmx-global-footer__logo,
  body[data-zmx-route="/about/"] .zmx-global-footer__logo { width: min(250px, 86vw) !important; }
  body[data-zmx-route="/"] .final-cta .cta-box,
  body[data-zmx-route="/services/"] .final,
  body[data-zmx-route="/about/"] .about-final-card,
  body[data-zmx-route^="/services/"]:not([data-zmx-route="/services/"]) .final-cta,
  body[data-zmx-audience="residential"] .zmx-res-final-cta {
    min-height: 480px !important;
  }
  body[data-zmx-audience="residential"] .zmx-res-final-cta > .zmx-res-container { grid-template-columns: 1fr !important; }
  .zmx-res-service-card-grid,
  .zmx-res-guide-grid { grid-template-columns: 1fr !important; }
  .zmx-res-guide-card__body { min-height: 0; }
  .zmx-res-guide-hero-brand { display: none; }
  body[data-zmx-audience="residential"] .zmx-res-benefit-pills { align-items: stretch; flex-direction: column; }
  body[data-zmx-audience="residential"] .zmx-res-benefit-pills li { width: 100%; }
  .zmx-res-coverage-map__place text { font-size: 24px !important; }
  .zmx-res-roofline-diagram__labels text { font-size: 23px; }
  body:not([data-zmx-audience="residential"]) main :is(.hero-side, .avoid-copy, .about-coverage-heading, .cta-band, .roofing-decision-copy) h2,
  body[data-zmx-route="/referrals/"] main :is(.referral-intro, .referral-final, .final-card, .cta-band) h2 {
    font-size: 1.68rem !important;
    line-height: 1.12 !important;
  }
  body[data-zmx-audience="residential"] :is(.zmx-res-split, .zmx-res-area-layout, .zmx-res-about-audience, .zmx-res-faq-layout) .zmx-res-section-heading h2,
  body[data-zmx-audience="residential"] :is(.zmx-res-split, .zmx-res-area-layout, .zmx-res-about-audience, .zmx-res-faq-layout) .zmx-res-heading h2 {
    font-size: 1.72rem !important;
    line-height: 1.12 !important;
  }
  body[data-zmx-route="/about/"] #about-page .about-coverage-heading h2,
  body[data-zmx-route="/resources/"] #main-content .cta-band h2,
  body[data-zmx-route="/referrals/"] #main-content :is(.dark-band, .cta-band) h2,
  body[data-zmx-route="/services/commercial-roofing/"] #main-content .roofing-decision-copy h2 {
    font-size: 1.5rem !important;
    line-height: 1.13 !important;
  }
  body[data-zmx-route="/about/"] #about-page .about-coverage-heading h2 {
    font-size: 1.25rem !important;
    line-height: 1.15 !important;
  }
  body[data-zmx-route="/solutions/solar-ready-roof-power/"] #main-content :is(.avoid-copy, .lead-card) h2 {
    font-size: 1.38rem !important;
    line-height: 1.15 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zmx-global-nav-group > summary::after,
  .zmx-res-guide-card { transition: none !important; }
}