/* Nero's cluster hubs (Heating, Indoor Air Quality): what the AC hub's kit (inner.css) does not cover.
   Colours are the homepage's: flame #F0641E / #C4411A, ice #1E88D6 / #0E67A8, IAQ green and water-heater red from the
   homepage service cards (Shoaib's per-service scheme). Built by scripts/build_clusters.py. */

/* ---------- spokes: the IAQ green and the water-heater red discs (the homepage service-card gradients) ---------- */
.svc-ic--air { background: linear-gradient(145deg, #5FCF86 0%, #2E9E5B 50%, #1E7A43 100%); }
.svc-ic--water { background: linear-gradient(145deg, #F27272 0%, #D63A3F 50%, #A8202A 100%); }

/* seven spokes: four over three on desktop, the seventh full width in the two-column range */
@media (min-width: 1024px) {
  .sp__grid--7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sp__grid--7 > .sp__card { grid-column: span 3; padding-inline: 24px; }
  .sp__grid--7 > .sp__card:nth-child(n + 5) { grid-column: span 4; }
}
@media (min-width: 768px) and (max-width: 1023px) { .sp__grid--7 > .sp__card:last-child { grid-column: 1 / -1; } }

/* the Notion callout under the spokes, as a glass plate on the band */
.sp__close--call { max-width: 900px; padding: 22px 30px; border-radius: 18px; background: rgba(11, 22, 34, .58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 3px 0 #F0641E; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- stats ahead of the intro (IAQ: Notion's order) ---------- */
.in2--top .st { margin: 0 0 64px; }
.st__u--pre { margin-right: .18em; }

/* ---------- cost: no bold closing line on these pages ---------- */
.cs--plain .cs__copy p:last-child { font-weight: 400; color: var(--muted); }
.cs__copy b { color: var(--night); }

/* ---------- comparison: the column heads in the page's two sides (flame = heat, ice = cool / humid) ---------- */
.wh--cols-flame-ice .wh__t thead th:nth-child(2), .wh--cols-ice-flame .wh__t thead th:nth-child(3) {
  background: linear-gradient(150deg, #F0641E, #CC4719 55%, #B83C16); }
.wh--cols-flame-ice .wh__t thead th:nth-child(3), .wh--cols-ice-flame .wh__t thead th:nth-child(2) {
  background: linear-gradient(150deg, #1E88D6, #0E67A8 55%, #0A4F80); }
@media (max-width: 767px) {
  .wh--cols-flame-ice .wh__t tbody td::before { color: #C4411A; }
  .wh--cols-flame-ice .wh__t tbody td + td::before { color: #0E67A8; }
  .wh--cols-ice-flame .wh__t tbody td + td::before { color: #C4411A; }
}

/* ---------- how: the Notion H3 under the H2 (the booking band's H3 style) ---------- */
.hw__h3 { margin-top: 10px; font: 700 26px/1.2 var(--fd); letter-spacing: .01em; color: #E8541F; }

/* ---------- IAQ question band: copy + the three Notion actions left, a photo right ---------- */
.ask__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ask__acts .btn { padding-inline: 22px; }
.ask__acts .btn .i { width: 18px; height: 18px; }
.ask__ph img { aspect-ratio: 4 / 5; }

/* ---------- gallery: portrait job photos; two-up when only two real frames exist ---------- */
.gal--tall .gal__ph img { aspect-ratio: 3 / 4; }
.gal__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; margin-inline: auto; }
@media (max-width: 1023px) { .gal--tall .gal__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 767px) { .gal--tall .gal__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .gal--tall .gal__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- reviews: a page with no fitting review yet shows the gap card alone, no deck controls ---------- */
.reviews--gap .rd__ctrl { display: none; }
.rd__card--gap blockquote p { font-style: normal; }

/* the gallery heading: .h2 is an 820 px box; centred in the band, not pinned left */
.gal__h { margin-inline: auto; }

/* stat figures with a word label: the label on its own small line (under, or above for "Climate Zone 4A") */
.st th b .st__u--long { display: block; margin-top: 8px; font-size: .5em; line-height: 1.1; letter-spacing: .02em; }
.st th b .st__u--pre { display: block; margin: 0 0 6px; font-size: .5em; line-height: 1.1; letter-spacing: .02em; }

/* ---------- AC-hub parity (Shoaib 11-04: "other cluster pages need to be like air condition contractor one") ---------- */
/* photo spoke cards in the seven-card grid: the photo runs edge to edge as on the AC hub (no side padding on the card) */
@media (min-width: 1024px) { .sp__grid--7 > .sp__card--ph, .sp__grid--7 > .sp__card--night { padding-inline: 0; } }
/* the gallery band with portrait job photos: one row of four (Heating), the before / after pair side by side (IAQ) */
.gl__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 400px; }
.gl__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 460px; max-width: 880px; margin-inline: auto; }
@media (max-width: 1023px) { .gl__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 380px; } .gl__grid--2 { grid-auto-rows: 400px; } }
@media (max-width: 767px) { .gl__grid--4, .gl__grid--2 { grid-auto-rows: 260px; } }
/* IAQ's dark question band: a photo where the AC hub's form card sits (Notion gives the block buttons, no form) */
.ec__formcol .ask2__ph { position: relative; margin: 0; height: 100%; min-height: 540px; overflow: hidden; border-radius: 18px; background: #0B1622;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.ask2__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 1023px) { .ec__formcol .ask2__ph { height: auto; min-height: 0; aspect-ratio: 4 / 3; } }