/* Nero's main pages (scripts/build_main.py): About Us, Contact Us, Reviews, Maintenance Plans, Areas We Serve, Pricing,
   Privacy Policy. Loaded after hero-centre.css and inner.css; the reused homepage / inner objects keep their own CSS.
   Same kit: Antonio display + Sofia Sans, night / page / alt tones, flame + ice, the flame-tip cut corner on cards and
   photos, white cards that lift, glass on the dark bands, bowls on every dark band, no decorative dashes, numbers only
   on real sequences (the three maintenance steps). */

/* ---------- shared heads ---------- */
.mhead { max-width: 880px; margin-bottom: 44px; }
.mhead--c { margin-inline: auto; text-align: center; }
.mhead--c .h2 { margin-inline: auto; }
.mhead__h3, .ab__h3 { margin-top: 2px; font: 700 26px/1.2 var(--fd); letter-spacing: .01em; color: #E8541F; }
.mhead .lead { margin-top: 14px; color: var(--muted); }
.sec--dark .h2 { color: #FFFFFF; }
.sec--dark .lead { color: rgba(247, 249, 251, .86); }

/* ---------- hero: this page's pieces in the inner split hero ---------- */
.hi__kicker { margin: 4px 0 10px; font: 700 15px/1.3 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: #FFC9A6; }
.hi__sub { margin-top: 18px; max-width: 620px; font: 700 30px/1.15 var(--fd); letter-spacing: .01em; color: #FFFFFF; text-wrap: balance; }
.hi__lede { max-width: 640px; margin-top: 18px; font-size: 17.5px; line-height: 1.7; color: rgba(247, 249, 251, .9); text-wrap: pretty; }
.hero--split .actions { flex-wrap: wrap; gap: 14px; }
.hero--big2 .hc2__l1 { font-size: 38px; }
.hero--big2 .hc2__l2 { font-size: 92px; line-height: .95; color: #5FB3EC; }
.hero--small2 .hc2__l2 { font-size: 28px; line-height: 1.15; max-width: 640px; }
@media (max-width: 1279px) { .hero--big2 .hc2__l1 { font-size: 34px; } .hero--big2 .hc2__l2 { font-size: 80px; } .hero--small2 .hc2__l2 { font-size: 26px; } }
@media (max-width: 767px) { .hi__sub { font-size: 24px; } .hi__lede { font-size: 16px; }
  .hero--big2 .hc2__l1 { font-size: 24px; } .hero--big2 .hc2__l2 { font-size: 56px; } .hero--small2 .hc2__l2 { font-size: 19px; } }

/* the legal hero: a compact centred band */
.hero--legal { padding-bottom: 92px; }
.hero--legal .hero__bg::after { background: linear-gradient(180deg, rgba(8, 24, 41, .9), rgba(8, 24, 41, .82) 60%, rgba(8, 22, 38, .95)); }
.lg__hero { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; padding-block: 64px 24px; }
.lg__h1 { margin-top: 6px; font: 700 84px/1 var(--fd); letter-spacing: .01em; text-transform: uppercase; color: #FFFFFF; }
.lg__date { margin-top: 14px; font: 600 17px/1.4 var(--fb); color: #CFE6F7; }
@media (max-width: 767px) { .lg__h1 { font-size: 50px; } .lg__hero { padding-block: 36px 16px; } }

/* ---------- About: the story (the homepage Who object) ---------- */
.ab-story .ab__h3 { margin-top: 0; }
.ab__p { max-width: 620px; margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.ab-story .quotebox { margin-top: 26px; }

/* ---------- About: who runs it (dark band, the founder's real photo) ---------- */
.ow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "fig head" "fig bio"; gap: 26px 64px; align-items: start; }
.ow__head { grid-area: head; }
.ow__h3 { margin-top: 4px; font: 700 26px/1.2 var(--fd); letter-spacing: .01em; color: #F58A3C; }
.ow__head .lead { margin-top: 14px; }
.ow__fig { grid-area: fig; position: relative; margin: 0; align-self: stretch; min-height: 560px; }
.ow__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: 20px;
  clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9); }
.ow__plate { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 18px 22px; border-radius: 14px; color: #FFFFFF;
  background: rgba(11, 22, 34, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 3px 0 #F0641E; }
.ow__name { font: 700 34px/1.05 var(--fd); letter-spacing: .01em; }
.ow__role { margin-top: 6px; font: 700 15.5px/1.35 var(--fb); color: #FFC9A6; }
.ow__bio { grid-area: bio; display: grid; gap: 14px; padding: 26px 28px; border-radius: 18px; background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ow__bio p { font-size: 16.5px; line-height: 1.7; color: rgba(247, 249, 251, .9); }
@media (max-width: 1023px) { .ow { grid-template-columns: 1fr; grid-template-areas: "head" "fig" "bio"; } .ow__fig { min-height: 0; aspect-ratio: 4 / 5; max-width: 460px; width: 100%; } }

/* ---------- About: why homeowners choose us (six white cards) ---------- */
.wy__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wy__card { position: relative; display: grid; align-content: start; gap: 12px; padding: 30px 28px; border-radius: 18px; background: #FFFFFF;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .3s var(--ease); }
.wy__card:hover { transform: translateY(-4px); }
.wy__ic { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; color: #FFFFFF; background: linear-gradient(145deg, #F7934A, #F0641E 50%, #C4411A); }
.wy__card:nth-child(even) .wy__ic { background: linear-gradient(145deg, #5FB3EC, #1E88D6 48%, #0E67A8); }
.wy__t { font: 700 23px/1.18 var(--fd); letter-spacing: .01em; color: var(--night); }
.wy__card p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
@media (max-width: 1023px) { .wy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .wy__grid { grid-template-columns: 1fr; } }

/* ---------- About: licenses (alt band; one row per credential, the protection on its own tinted panel) ---------- */
.lc__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.lc__row { display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; padding: 22px 24px 22px 22px; border-radius: 18px;
  background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 18px 34px -28px rgba(11, 22, 34, .4); }
.lc__row--solo { grid-template-columns: 88px minmax(0, 2fr); }
.lc__badge { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; }
.lc__badge .dt { width: 38px; height: 38px; --d2: #FFFFFF; --d2o: .35; }
.lc__badge--flame { background: linear-gradient(145deg, #F7934A, #F0641E 50%, #C4411A); }
.lc__badge--ice { background: linear-gradient(145deg, #5FB3EC, #1E88D6 48%, #0E67A8); }
.lc__badge--bbb { width: 88px; height: auto; border-radius: 10px; }
.lc__seal { width: 88px; height: auto; }
.lc__t { font: 700 24px/1.15 var(--fd); letter-spacing: .01em; color: var(--night); }
.lc__what p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.lc__why { align-self: stretch; display: block; padding: 16px 20px; border-radius: 12px; font-size: 15.5px; line-height: 1.6; color: #3B4652; background: #F2F7FC; box-shadow: inset 3px 0 0 #1E88D6; }
.lc__why b { color: #0E67A8; }
@media (max-width: 1023px) { .lc__row, .lc__row--solo { grid-template-columns: 76px minmax(0, 1fr); } .lc__why { grid-column: 1 / -1; } }
@media (max-width: 559px) { .lc__row, .lc__row--solo { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; } .lc__badge { width: 64px; height: 64px; } }

/* ---------- reviews deck: one review (the controls go) ---------- */
.rd--single .rd__ctrl { display: none; }
.reviews .gal__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .reviews .gal__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .reviews .gal__row { grid-template-columns: 1fr; } }

/* ---------- About: talk (the homepage emergency band, phone + address under the path) ---------- */
.tk__list { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.tk__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 16.5px; color: rgba(247, 249, 251, .86); }
.tk__ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 18px; color: #F58A3C; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.tk__l { font-weight: 700; color: #FFFFFF; }
.tk__list a { display: inline-flex; align-items: center; min-height: 44px; font: 700 18px/1.2 var(--fb); color: #FFFFFF; text-decoration: none; }
.tk__list a:hover, .tk__list a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- About: explore more (link pills) ---------- */
.ex-sec { padding-block: 72px; }
.ex { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 48px; align-items: center; }
.ex__h { font-size: 40px; }
.ex__list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ex__a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; font: 700 16px/1 var(--fb); color: var(--night); text-decoration: none;
  background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s var(--ease), color .2s var(--ease); }
.ex__a .arr { display: inline-flex; color: #E8541F; transition: transform .2s var(--ease); }
.ex__a:hover, .ex__a:focus-visible { color: #0E67A8; box-shadow: inset 0 0 0 2px #1E88D6; }
.ex__a:hover .arr, .ex__a:focus-visible .arr { transform: translateX(3px); }
@media (max-width: 1023px) { .ex { grid-template-columns: 1fr; } .ex__h { font-size: 34px; } }

/* ---------- the CTA band with a paragraph (Reviews, Maintenance, Pricing) ---------- */
.cta--main .cta__h { max-width: 1000px; }
.cta__p { max-width: 760px; margin: 18px auto 0; font-size: 18px; line-height: 1.65; font-weight: 300; color: rgba(247, 249, 251, .9); text-wrap: pretty; }
.cta--main .actions { flex-wrap: wrap; justify-content: center; }
.cta__by { margin-top: 26px; font: 600 15px/1.4 var(--fb); color: rgba(247, 249, 251, .74); }
@media (max-width: 767px) { .cta__p { font-size: 16.5px; } }

/* ---------- Contact: the copy + three plates ---------- */
.rc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.rc__p { max-width: 640px; font-size: 18px; line-height: 1.7; color: var(--muted); }
.rc__p + .rc__p { margin-top: 16px; }
.rc__p:first-child { font: 700 26px/1.3 var(--fd); letter-spacing: .01em; color: var(--night); }
.rc__p b { color: var(--night); }
.rc__plates { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rc__plate { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 92px; padding: 16px 22px 16px 18px; border-radius: 16px;
  color: #FFFFFF; text-decoration: none; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); transition: transform .25s var(--ease); }
.rc__plate:hover, .rc__plate:focus-visible { transform: translateX(4px); }
.rc__plate--flame { background: linear-gradient(150deg, #F0641E 0%, #CC4719 60%, #B83C16 100%); }
.rc__plate--ice { background: linear-gradient(150deg, #0A4F80 0%, #0E67A8 55%, #1670B8 100%); }
.rc__plate--night { background: linear-gradient(150deg, #1E3D5C, #0B1622); }
.rc__ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.rc__t { display: grid; gap: 4px; }
.rc__t b { font: 700 28px/1 var(--fd); letter-spacing: .01em; }
.rc__v { font: 700 17px/1.2 var(--fb); color: rgba(255, 255, 255, .9); }
.rc__plate .arr { display: inline-flex; font-size: 22px; }
@media (max-width: 1023px) { .rc { grid-template-columns: 1fr; gap: 36px; } .rc__plates { max-width: 560px; } }
@media (max-width: 767px) { .rc__p:first-child { font-size: 22px; } .rc__p { font-size: 16.5px; } }

/* ---------- Reviews: the four tiles hang over the platforms band (the AC hub's INM plate) ---------- */
.mt-tiles { padding-top: 64px; }
.mt-tiles .st { margin-top: 0; }
.mt-tiles .st th b { font-size: 46px; }
.mt-tiles .st tbody tr:last-child th b { font-size: 40px; }
@media (max-width: 1099px) { .mt-tiles .st th b { font-size: 38px; } .mt-tiles .st tbody tr:last-child th b { font-size: 34px; } }
@media (max-width: 767px) { .mt-tiles { padding-top: 48px; } }

/* ---------- Reviews: the six platforms (white card, dark band) ---------- */
.pf__head { max-width: 880px; }
.pf__card { margin-top: 34px; overflow: hidden; border-radius: 18px; background: #FFFFFF; box-shadow: 0 40px 60px -36px rgba(0, 0, 0, .8); }
.pf__t { width: 100%; border-collapse: collapse; font-size: 16px; color: var(--ink); }
.pf__t thead th { padding: 16px 22px; text-align: left; font: 700 15px/1.2 var(--fb); letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF;
  background: linear-gradient(150deg, #1E3D5C, #0B1622); }
.pf__t tbody th, .pf__t tbody td { padding: 14px 22px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line); }
.pf__t tbody tr:hover { background: #F7FAFD; }
.pf__name { display: inline-flex; align-items: center; gap: 14px; font: 700 21px/1.1 var(--fd); letter-spacing: .01em; color: var(--night); }
.pf__logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }
.pf__logo--bbb { width: 58px; height: auto; border-radius: 4px; }
.pf__n { font: 700 30px/1 var(--fd); color: #E8541F; }
.pf__na { color: var(--muted); }
.pf__t td { color: var(--muted); line-height: 1.5; }
.pf__go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 16px/1 var(--fb); color: #0E67A8; text-decoration: none; white-space: nowrap; }
.pf__go .arr { display: inline-flex; color: #E8541F; transition: transform .2s var(--ease); }
.pf__go:hover, .pf__go:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.pf__go:hover .arr { transform: translateX(3px); }
@media (max-width: 899px) {
  .pf__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pf__t, .pf__t tbody, .pf__t tr, .pf__t tbody th, .pf__t tbody td { display: block; width: auto; }
  .pf__t tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 18px 18px 14px; border-top: 1px solid var(--line); }
  .pf__t tbody tr:first-child { border-top: 0; }
  .pf__t tbody th, .pf__t tbody td { padding: 0; border: 0; }
  .pf__t tbody th { grid-column: 1 / -1; }
  .pf__t tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 700 14px/1.2 var(--fb); letter-spacing: .03em; text-transform: uppercase; color: #0E67A8; }
  .pf__t tbody td:nth-child(4), .pf__t tbody td:last-child { grid-column: 1 / -1; }
}

/* ---------- Reviews: what homeowners say (2 x 2) ---------- */
.th__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.th__card { display: grid; align-content: start; gap: 14px; padding: 30px 30px 26px; border-radius: 18px; background: #FFFFFF;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px var(--line); }
.th__h { font: 700 26px/1.18 var(--fd); letter-spacing: .01em; color: var(--night); }
.gap { display: inline-block; margin-right: 4px; padding: 2px 8px; border-radius: 6px; font: 700 15px/1.3 var(--fb); letter-spacing: .03em; color: #8A4B00; background: #FFE9B8; vertical-align: 4px; }
.th__p { font-size: 16px; line-height: 1.65; color: var(--muted); }
.th__q { position: relative; margin: 4px 0 0; padding: 22px 22px 18px; border-radius: 14px; background: linear-gradient(160deg, #0F2338, #0B1622); color: #F7F9FB; }
.th__mk { position: absolute; right: 16px; top: 10px; font-size: 40px; color: #F0641E; opacity: .25; }
.th__q blockquote p { position: relative; font: 600 17px/1.55 var(--fb); }
.th__q figcaption { display: flex; align-items: center; gap: 12px; margin-top: 14px; font: 700 15px/1.3 var(--fb); color: #CFE6F7; }
.th__q figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #F0641E; }
.th__rel { font: 600 15.5px/1.4 var(--fb); color: var(--muted); }
.th__rel a { display: inline-flex; align-items: center; min-height: 44px; color: #0E67A8; font-weight: 700; }
.th__all { margin-top: 26px; text-align: center; }
@media (max-width: 899px) { .th__grid { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .th__card { padding: 24px 20px 20px; } .th__h { font-size: 23px; } }

/* ---------- Reviews: the button band (three buttons, no prose) ---------- */
.bb-band.sec--dark.has-bowl { padding-block: 96px; }
.bb__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (max-width: 767px) { .bb-band.sec--dark.has-bowl { padding-block: 64px; } .bb__row .btn { width: 100%; max-width: 420px; } }

/* ---------- Reviews: the towns ---------- */
.tw__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; }
.tw__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px 0 14px; border-radius: 999px; font: 700 16px/1 var(--fb); color: var(--night);
  text-decoration: none; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s var(--ease), color .2s var(--ease); }
.tw__chip .i { color: #E8541F; }
.tw__chip:hover, .tw__chip:focus-visible { color: #0E67A8; box-shadow: inset 0 0 0 2px #1E88D6; }
.tw__close { margin-top: 26px; text-align: center; font: 700 22px/1.3 var(--fd); letter-spacing: .01em; color: var(--night); }

/* ---------- Maintenance: the intro ---------- */
.mi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.mi__p { max-width: 660px; font-size: 17.5px; line-height: 1.75; color: var(--muted); }
.mi__p + .mi__p { margin-top: 18px; }
.mi__p--lead { font: 700 28px/1.3 var(--fd); letter-spacing: .01em; color: var(--night); }
.mi__p b { color: var(--night); }
.mi__ph { margin: 0; filter: drop-shadow(0 30px 34px rgba(11, 22, 34, .22)); }
.mi__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
@media (max-width: 1023px) { .mi { grid-template-columns: 1fr; gap: 36px; } .mi__ph { max-width: 560px; } }
@media (max-width: 767px) { .mi__p--lead { font-size: 23px; } }

/* ---------- Maintenance: the difference (a two-column comparison, ours lit) ---------- */
.df__head { max-width: 880px; margin: 0 auto; text-align: center; }
.df__kicker { margin-bottom: 8px; font: 700 15px/1.3 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: #FFC9A6; }
.df__head .h2 { margin-inline: auto; }
.df__head .lead { margin-top: 14px; }
.df__vs { width: 100%; max-width: 1000px; margin: 40px auto 0; border-collapse: separate; border-spacing: 20px 0; table-layout: fixed; }
.df__vs th, .df__vs td { padding: 24px 28px; text-align: left; vertical-align: top; }
.df__vs th { font: 700 24px/1.15 var(--fd); letter-spacing: .01em; border-radius: 16px 16px 0 0; }
.df__vs td { font-size: 17px; line-height: 1.65; border-radius: 0 0 16px 16px; }
.df__vs .df__a { color: rgba(247, 249, 251, .78); background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.df__vs th.df__a { color: rgba(247, 249, 251, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.df__vs .df__b { color: var(--ink); background: #FFFFFF; }
.df__vs th.df__b { color: #FFFFFF; background: linear-gradient(150deg, #F0641E 0%, #CC4719 70%, #B83C16 100%); }
@media (max-width: 767px) {
  .df__vs, .df__vs thead, .df__vs tbody, .df__vs tr { display: block; border-spacing: 0; }
  .df__vs thead { display: none; }
  .df__vs td { display: block; margin-top: 14px; border-radius: 16px; }
  .df__vs td::before { display: block; margin-bottom: 8px; font: 700 22px/1.15 var(--fd); letter-spacing: .01em; }
  .df__vs td.df__a::before { content: "A Quick Seasonal Tune-Up"; color: #FFFFFF; }
  .df__vs td.df__b::before { content: "Our HVAC Maintenance Visit"; color: #E8541F; }
}

/* ---------- Maintenance: the agreement (the plan, then the two checklist graphics) ---------- */
.ag__plan { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; gap: 28px 40px; align-items: center; padding: 34px 38px; border-radius: 20px; color: #F7F9FB;
  background: radial-gradient(70% 120% at 0% 0%, rgba(240, 100, 30, .3), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(30, 136, 214, .32), transparent 60%), linear-gradient(160deg, #13283D, #0B1622);
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); box-shadow: 0 40px 70px -46px rgba(11, 22, 34, .7); }
.ag__h3 { display: grid; gap: 10px; font: 700 26px/1.15 var(--fd); letter-spacing: .01em; color: #FFFFFF; }
.ag__sep { display: none; }
.ag__price { font: 700 96px/.9 var(--fd); letter-spacing: .005em; color: #F58A3C; }
.ag__pts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ag__pts li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 16px; line-height: 1.5; color: rgba(247, 249, 251, .84); }
.ag__pts b { color: #FFFFFF; }
.ag__ck { width: 24px; height: 24px; display: grid; place-items: center; margin-top: 1px; border-radius: 50%; font-size: 13px; color: #FFFFFF; background: #1E88D6; }
.ag__acts { display: grid; gap: 12px; }
.ag__acts .btn--line { color: #FFFFFF; border-color: rgba(247, 249, 251, .5); }
.ag__acts .btn--line:hover, .ag__acts .btn--line:focus-visible { background: #FFFFFF; color: var(--night); border-color: #FFFFFF; }
.ag__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
.ag__list { overflow: hidden; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 24px 40px -32px rgba(11, 22, 34, .45); }
.ag__lh { display: flex; align-items: center; gap: 16px; padding: 22px 26px; color: #FFFFFF; }
.ag__list--cool .ag__lh { background: linear-gradient(150deg, #0A4F80 0%, #0E67A8 55%, #1670B8 100%); }
.ag__list--heat .ag__lh { background: linear-gradient(150deg, #F0641E 0%, #CC4719 60%, #B83C16 100%); }
.ag__lic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.ag__lt { font: 700 26px/1.1 var(--fd); letter-spacing: .01em; }
.ag__checks { display: grid; gap: 0; margin: 0; padding: 10px 26px 18px; list-style: none; }
.ag__checks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 11px 0; font-size: 16px; line-height: 1.5; color: var(--ink); border-top: 1px solid var(--line); }
.ag__checks li:first-child { border-top: 0; }
.ag__list--heat .ag__ck, .cv__card--heat .ag__ck { background: #F0641E; }
@media (max-width: 1099px) { .ag__plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .ag__acts { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; } }
@media (max-width: 767px) { .ag__plan { grid-template-columns: 1fr; padding: 28px 22px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
  .ag__acts { grid-auto-flow: row; } .ag__price { font-size: 72px; } .ag__lists { grid-template-columns: 1fr; } .ag__checks { padding-inline: 20px; } .ag__lh { padding: 18px 20px; } .ag__lt { font-size: 23px; } }

/* ---------- Maintenance: twice a year (six glass cards on the band) ---------- */
.tw2__head { max-width: 900px; margin: 0 auto; text-align: center; }
.tw2__head .h2 { margin-inline: auto; }
.tw2__h3 { margin-top: 4px; font: 700 26px/1.2 var(--fd); letter-spacing: .01em; color: #F58A3C; }
.tw2__head .lead { margin-top: 14px; }
.tw2__head .lead b { color: #FFFFFF; font-weight: 700; }
.tw2__grid, .qt__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.tw2__card, .qt__card, .ch__panel { display: grid; align-content: start; gap: 12px; padding: 28px 26px; border-radius: 18px; color: #F7F9FB;
  background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .22); }
.tw2__ic, .qt__ic, .ch__ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; color: #FFFFFF; background: linear-gradient(145deg, #F7934A, #F0641E 50%, #C4411A); }
.tw2__card:nth-child(even) .tw2__ic, .qt__card:nth-child(even) .qt__ic, .ch__panel:nth-child(even) .ch__ic { background: linear-gradient(145deg, #5FB3EC, #1E88D6 48%, #0E67A8); }
.tw2__t, .qt__t { font: 700 23px/1.18 var(--fd); letter-spacing: .01em; color: #FFFFFF; }
.tw2__card p, .qt__card p { font-size: 15.5px; line-height: 1.65; color: rgba(247, 249, 251, .86); }
@media (max-width: 1023px) { .tw2__grid, .qt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .tw2__grid, .qt__grid { grid-template-columns: 1fr; } }

/* ---------- Maintenance: the three steps (a real sequence) as the AC hub's STAIRCASE with night cards (Shoaib 11-04:
   "this section steps need to be like stairs and box should be dark"). Each card a step lower than the last, the
   flame-tip cut top right (the homepage card shape), the Notion "Step N." pill on the top edge (deep flame / plaque
   blue in turn, >= 4.6:1 under white 15 px), each pill drawing the hand-off line from the card before, level with its
   own top edge; it draws in as the card arrives. Under 900 px the cards stack and the hand-off runs down. ---------- */
.s3__list { --gap: 30px; --rise: 48px; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gap); align-items: start;
  margin: 64px 0 0; padding: 0; list-style: none; counter-reset: none; }
.s3__step { --cut: 30px; position: relative; z-index: 0; display: grid; align-content: start; gap: 10px; margin-top: calc(var(--i, 0) * var(--rise));
  padding: 44px 28px 32px; color: rgba(247, 249, 251, .86); filter: drop-shadow(0 26px 30px rgba(11, 22, 34, .32)); }
/* the card face is a pseudo, so the cut corner does not clip the pill or the hand-off line */
.s3__step::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 16px;
  background: radial-gradient(120% 80% at 100% 0%, rgba(30, 136, 214, .16), transparent 60%), linear-gradient(165deg, #16293C, #0B1622 70%);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.s3__k { position: absolute; z-index: 2; top: -19px; left: 24px; display: inline-flex; align-items: center; justify-content: center; min-width: 92px; min-height: 38px; padding: 0 16px;
  border-radius: 999px; background: linear-gradient(150deg, #CC4719, #C4411A 55%, #B83C16); color: #FFFFFF; font: 700 15px/1 var(--fb); letter-spacing: .04em;
  box-shadow: 0 0 0 4px #FFFFFF, 0 12px 22px -10px rgba(11, 22, 34, .55); }
.s3__step:nth-child(even) .s3__k { background: linear-gradient(150deg, #1670B8, #0E67A8 50%, #0A4F80); }
.s3__t { font: 700 25px/1.14 var(--fd); letter-spacing: .01em; color: #FFFFFF; text-wrap: balance; }
.s3__step p { font-size: 15.5px; line-height: 1.65; }
.s3__step + .s3__step .s3__k::before { content: ""; position: absolute; right: 100%; top: 50%; width: calc(24px + var(--gap)); height: 3px; margin-top: -1.5px;
  background: linear-gradient(90deg, #1E88D6, #F0641E); transform-origin: left center; transition: transform .5s var(--ease) calc(.25s + var(--d, 0) * 120ms); }
.s3__step:nth-child(even) .s3__k::before { background: linear-gradient(90deg, #F0641E, #1E88D6) !important; }
.js .s3__step[data-reveal]:not(.is-in) .s3__k::before { transform: scaleX(0); }
.js .s3__step[data-reveal] { transition-delay: calc(var(--d, 0) * 120ms); }
@media (max-width: 1279px) { .s3__list { --gap: 24px; --rise: 40px; } .s3__step { padding: 42px 24px 28px; } .s3__t { font-size: 24px; } }
@media (max-width: 899px) {
  .s3__list { --gap: 44px; grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .s3__step { margin-top: 0; padding: 42px 24px 28px; }
  .s3__step + .s3__step .s3__k::before { right: auto; left: 50%; top: auto; bottom: 100%; width: 3px; height: calc(var(--gap) - 19px); margin: 0 0 0 -1.5px;
    background: linear-gradient(180deg, #1E88D6, #F0641E); transform-origin: center top; }
  .s3__step:nth-child(even) .s3__k::before { background: linear-gradient(180deg, #F0641E, #1E88D6) !important; }
  .js .s3__step[data-reveal]:not(.is-in) .s3__k::before { transform: scaleY(0); }
}
@media (prefers-reduced-motion: reduce) { .s3__k::before { transform: none !important; transition: none !important; } }

/* ---------- Maintenance: a bigger issue (three cards on the band) ---------- */
.bg2__head { max-width: 880px; }
.bg2__head .lead { margin-top: 14px; }
.bg2__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.bg2__card { display: grid; align-content: start; gap: 12px; padding: 30px 28px; border-radius: 18px; background: #FFFFFF; color: var(--ink);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
.bg2__ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; font-size: 23px; color: #FFFFFF; }
.bg2__card--ice .bg2__ic { background: linear-gradient(145deg, #5FB3EC, #1E88D6 48%, #0E67A8); }
.bg2__card--flame .bg2__ic { background: linear-gradient(145deg, #F7934A, #F0641E 50%, #C4411A); }
.bg2__card--night .bg2__ic { background: linear-gradient(145deg, #1E3D5C, #0B1622); }
.bg2__t { font: 700 25px/1.15 var(--fd); letter-spacing: .01em; color: var(--night); }
.bg2__card p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.bg2__card b { color: var(--night); }
.bg2__card a { color: #0E67A8; font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 1023px) { .bg2__grid { grid-template-columns: 1fr; max-width: 640px; } }

/* ---------- Areas: the intro ---------- */
.ai { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.ai__p { max-width: 640px; margin-top: 16px; font-size: 17.5px; line-height: 1.7; color: var(--muted); }
.ai__line { display: flex; align-items: center; gap: 12px; margin-top: 22px; font: 700 20px/1.3 var(--fd); letter-spacing: .01em; color: var(--night); }
.ai__line .i { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 50%; color: #E8541F; background: var(--tint-flame); }
.ai__acts { margin-top: 24px; }
.ai__ph { margin: 0; filter: drop-shadow(0 30px 34px rgba(11, 22, 34, .22)); }
.ai__ph img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 20px; clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
@media (max-width: 1023px) { .ai { grid-template-columns: 1fr; gap: 36px; } .ai__ph { max-width: 560px; } }

/* ---------- Areas: is your town on our route (county list left, the county's panel right) ---------- */
.rt__head { max-width: 880px; }
.rt__box { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; margin-top: 36px; align-items: start; }
.rt__tabs { position: sticky; top: 110px; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rt__tab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 18px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  font: 700 19px/1.15 var(--fd); letter-spacing: .01em; color: rgba(247, 249, 251, .88);
  background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: background-color .2s var(--ease), color .2s var(--ease); }
.rt__tab .i { flex: none; font-size: 18px; color: #F58A3C; }
.rt__tab:hover { background: rgba(255, 255, 255, .13); color: #FFFFFF; }
.rt__tab[aria-selected="true"] { color: #FFFFFF; background: linear-gradient(150deg, #F0641E 0%, #CC4719 70%, #B83C16 100%); box-shadow: 0 16px 30px -18px rgba(240, 100, 30, .8); }
.rt__tab[aria-selected="true"] .i { color: #FFFFFF; }
.rt__panel { padding: 30px 32px 32px; border-radius: 20px; background: #FFFFFF; color: var(--ink); clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.rt__h3 { font: 700 34px/1.1 var(--fd); letter-spacing: .01em; color: var(--night); }
.rt__h3 a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.rt__h3 a .i { font-size: 22px; color: #E8541F; transition: transform .2s var(--ease); }
.rt__h3 a:hover, .rt__h3 a:focus-visible { color: #0E67A8; }
.rt__h3 a:hover .i { transform: translateX(4px); }
.rt__svc { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-top: 4px; font: 700 15px/1.2 var(--fb); }
.rt__svc a { display: inline-flex; align-items: center; min-height: 44px; color: #0E67A8; text-decoration: none; }
.rt__svc a:hover, .rt__svc a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.rt__bar { color: #B9C4CF; font-weight: 400; }
.rt__p { max-width: 780px; margin-top: 8px; font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.rt__towns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.rt__town { padding: 20px 22px 22px; border-radius: 16px; background: #F5F8FB; box-shadow: inset 0 0 0 1px var(--line); }
.rt__t { font: 700 24px/1.1 var(--fd); letter-spacing: .01em; }
.rt__t a { display: inline-flex; align-items: center; min-height: 44px; color: var(--night); text-decoration: none; }
.rt__t a:hover, .rt__t a:focus-visible { color: #0E67A8; text-decoration: underline; text-underline-offset: 5px; }
.rt__town .rt__svc { margin-top: 0; }
.rt__town p:last-child { margin-top: 6px; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.rt__more { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.rt__ml { font: 700 16px/1.3 var(--fb); color: var(--night); }
.rt__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.rt__chips li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font: 600 15px/1 var(--fb); color: var(--ink); background: #EEF2F6; }
@media (max-width: 1023px) {
  .rt__box { grid-template-columns: 1fr; }
  .rt__tabs { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt__tab { font-size: 17px; padding: 0 14px; }
}
@media (max-width: 767px) { .rt__towns { grid-template-columns: 1fr; } .rt__panel { padding: 24px 20px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); } .rt__h3 { font-size: 28px; } }
@media (max-width: 419px) { .rt__tabs { grid-template-columns: 1fr; } }

/* ---------- Areas: not sure (the book band) + the GBP map band ---------- */
.ns .lead { margin-top: 16px; color: var(--muted); }
.ns .lead a { color: #0E67A8; font-weight: 700; }
.gb__map { margin: 0 auto; max-width: 1100px; overflow: hidden; border-radius: 20px; background: #0B1622; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.gb__map iframe { display: block; width: 100%; height: 460px; border: 0; }
@media (max-width: 767px) { .gb__map iframe { height: 360px; } }

/* ---------- Pricing: service fees (copy left, the fee card right) ---------- */
.fe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.fe__p { max-width: 520px; margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.fe__card { overflow: hidden; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 30px 50px -38px rgba(11, 22, 34, .5);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.fe__t, .np__t { width: 100%; border-collapse: collapse; }
.fe__t thead th, .np__t thead th { padding: 16px 24px; text-align: left; font: 700 15px/1.2 var(--fb); letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF;
  background: linear-gradient(150deg, #1E3D5C, #0B1622); }
.fe__t thead th:last-child, .np__t thead th:last-child { text-align: right; }
.fe__t tbody th, .fe__t tbody td, .np__t tbody th, .np__t tbody td { padding: 14px 24px; border-top: 1px solid var(--line); vertical-align: middle; }
.fe__t tbody th, .np__t tbody th { text-align: left; font: 600 16px/1.45 var(--fb); color: var(--ink); }
.fe__t tbody th a, .np__t tbody th a { color: #0E67A8; font-weight: 700; text-underline-offset: 3px; }
.fe__t tbody td, .np__t tbody td { text-align: right; }
.fe__v { font: 700 26px/1.1 var(--fd); letter-spacing: .01em; }
.fe__v--flame { color: #E8541F; } .fe__v--ice { color: #0E67A8; } .fe__v--night { color: var(--night); }
.fe__t tbody tr:last-child .fe__v { font: 700 16px/1.35 var(--fb); color: #0E67A8; }
@media (max-width: 1023px) { .fe { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 559px) { .fe__t tbody th, .fe__t tbody td, .np__t tbody th, .np__t tbody td { padding: 12px 16px; } .fe__t thead th, .np__t thead th { padding: 14px 16px; } .fe__v { font-size: 22px; } }

/* ---------- Pricing: new system prices (white card on the band) ---------- */
.np__head { max-width: 880px; }
.np__card { margin-top: 34px; overflow: hidden; border-radius: 20px; background: #FFFFFF; box-shadow: 0 40px 60px -36px rgba(0, 0, 0, .8); }
.np__t thead th { background: linear-gradient(150deg, #F0641E 0%, #CC4719 70%, #B83C16 100%); }
.np__t tbody tr:nth-child(even) { background: #F7FAFD; }
.np__v { font: 700 26px/1.1 var(--fd); letter-spacing: .01em; color: var(--night); white-space: nowrap; }
.np__note { margin-top: 18px; font-size: 16px; line-height: 1.6; color: rgba(247, 249, 251, .8); }
@media (max-width: 559px) { .np__v { font-size: 21px; } }

/* ---------- Pricing: the cost guides (five cards, a photo on each) ---------- */
.gd__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.gd__card { grid-column: span 2; position: relative; display: grid; align-content: start; gap: 12px; padding: 30px 28px; border-radius: 18px; background: #FFFFFF;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px var(--line); }
.gd__card:nth-child(4) { grid-column: 2 / span 2; }
.gd__card .svc-ic { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; }
.gd__card .svc-ic .eq { width: 30px; height: 30px; fill: currentColor; }
.svc-ic--red { background: linear-gradient(145deg, #F27272 0%, #D63A3F 50%, #A8202A 100%); }
.gd__t { font: 700 25px/1.15 var(--fd); letter-spacing: .01em; color: var(--night); }
.gd__card p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.gd__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; }
.gd__go { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 700 15.5px/1 var(--fb); color: #6B7785; cursor: default; }
.gd__go .arr { display: inline-flex; color: #B9C4CF; }
/* the photo replaces the icon (Shoaib 11-04: "this section need to have images instead of icons"): the finalized
   /services/ page's family photo full-bleed at the top, under the card's flame-tip cut; the words below */
.gd__card--ph { grid-template-rows: auto 1fr; align-content: stretch; padding: 0; gap: 0; overflow: hidden; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 18px 34px -26px rgba(11, 22, 34, .38); }
.gd__card--ph .gd__links { align-self: end; }
.gd__ph { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--night); }
.gd__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.gd__card--ph:hover .gd__ph img { transform: scale(1.04); }
.gd__body { display: grid; grid-template-rows: auto auto 1fr; align-content: stretch; gap: 12px; padding: 24px 28px 22px; }
@media (prefers-reduced-motion: reduce) { .gd__ph img { transition: none; } .gd__card--ph:hover .gd__ph img { transform: none; } }
@media (max-width: 1023px) { .gd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd__card, .gd__card:nth-child(4) { grid-column: auto; } }
@media (max-width: 639px) { .gd__grid { grid-template-columns: 1fr; } .gd__body { padding: 22px 22px 18px; } }

/* ---------- Pricing: two quotes (three glass cards) ---------- */
.qt__head { max-width: 900px; }
.qt__head .lead { margin-top: 12px; }
.qt__close { max-width: 880px; margin-top: 30px; font: 700 22px/1.35 var(--fd); letter-spacing: .01em; color: #FFFFFF; }

/* ---------- Pricing: what a quote covers (two lists) ---------- */
.cv__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1040px; margin: 0 auto; }
.cv__card { overflow: hidden; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 24px 40px -32px rgba(11, 22, 34, .45); }
.cv__t { padding: 20px 26px; font: 700 28px/1.1 var(--fd); letter-spacing: .01em; color: #FFFFFF; }
.cv__card--cool .cv__t { background: linear-gradient(150deg, #0A4F80 0%, #0E67A8 55%, #1670B8 100%); }
.cv__card--heat .cv__t { background: linear-gradient(150deg, #F0641E 0%, #CC4719 60%, #B83C16 100%); }
.cv__close { margin-top: 26px; text-align: center; font: 700 22px/1.3 var(--fd); letter-spacing: .01em; color: var(--night); }
@media (max-width: 767px) { .cv__grid { grid-template-columns: 1fr; } }

/* ---------- Pricing: repair or replace + GreenSky (two glass panels) ---------- */
.ch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ch__panel { padding: 34px 32px; gap: 14px; }
.ch__h { font: 700 34px/1.08 var(--fd); letter-spacing: .01em; color: #FFFFFF; text-wrap: balance; }
.ch__panel p { font-size: 16.5px; line-height: 1.7; color: rgba(247, 249, 251, .88); }
.ch__panel a { color: #FFC9A6; font-weight: 700; text-underline-offset: 3px; }
.ch__panel a:hover, .ch__panel a:focus-visible { color: #FFFFFF; }
@media (max-width: 899px) { .ch { grid-template-columns: 1fr; } .ch__h { font-size: 30px; } }

/* ---------- Privacy: the index + the policy ---------- */
.lg { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.lg__index { position: sticky; top: 110px; padding: 22px 20px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.lg__il { margin-bottom: 8px; font: 700 15px/1.2 var(--fb); letter-spacing: .05em; text-transform: uppercase; color: #E8541F; }
.lg__index ol { display: grid; margin: 0; padding: 0; list-style: none; }
.lg__index a { display: flex; align-items: center; min-height: 40px; font: 600 15.5px/1.3 var(--fb); color: var(--ink); text-decoration: none; }
.lg__index a:hover, .lg__index a:focus-visible { color: #0E67A8; text-decoration: underline; text-underline-offset: 4px; }
.lg__body { max-width: 780px; }
.lg__body > p, .lg__body li { font-size: 17px; line-height: 1.75; color: #36414C; }
.lg__body > p + p, .lg__body ul + p { margin-top: 14px; }
.lg__body a { color: #0E67A8; font-weight: 700; text-underline-offset: 3px; word-break: break-word; }
.lg__h2 { margin: 44px 0 14px; padding-top: 4px; font: 700 34px/1.1 var(--fd); letter-spacing: .01em; color: var(--night); }
.lg__body ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.lg__body li { position: relative; padding-left: 26px; }
.lg__body li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #F0641E, #1E88D6); }
.lg__body ul + p { margin-top: 16px; }
.lg__mail { margin-top: 14px; }
@media (max-width: 1023px) { .lg { grid-template-columns: 1fr; gap: 28px; } .lg__index { position: static; } .lg__index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } }
@media (max-width: 559px) { .lg__index ol { grid-template-columns: 1fr; } .lg__h2 { font-size: 28px; } .lg__body > p, .lg__body li { font-size: 16px; } }

@media (prefers-reduced-motion: reduce) { .wy__card, .rc__plate, .ex__a, .tw__chip { transition: none; } .wy__card:hover, .rc__plate:hover { transform: none; } }

/* the gallery heading sits in the .h2 max-width box; centre the box too (the text-align alone centred it in 820 px) */
.reviews .gal__h { margin-inline: auto; }

/* table heads: one gradient across the row, not one per cell */
.fe__t thead tr { background: linear-gradient(150deg, #1E3D5C, #0B1622); }
.np__t thead tr { background: linear-gradient(100deg, #F0641E 0%, #CC4719 60%, #B83C16 100%); }
.pf__t thead tr { background: linear-gradient(150deg, #1E3D5C, #0B1622); }
.fe__t thead th, .np__t thead th, .pf__t thead th { background: none; }

/* review themes: the quote sits at the foot of each card, its mark clear of the text */
.th__card { display: flex; flex-direction: column; }
.th__q { margin-top: auto; }
.th__p { margin-bottom: 4px; }
.th__q blockquote p { padding-right: 34px; }

/* tap floor: the links in table rows and the policy index get the 44 px row (links inside a sentence stay inline, WCAG 2.5.8) */
.fe__t tbody th a, .np__t tbody th a { display: inline-flex; align-items: center; min-height: 44px; }
.lg__index a { min-height: 44px; }
.th__all .link, .lg__mail a { display: inline-flex; align-items: center; min-height: 44px; }

/* =====================================================================================================================
   About, round 2 (Shoaib 11-04)
   ===================================================================================================================== */

/* the centred hero (the homepage one), shorter for an inner page; the proof pill sits under the buttons */
.hero--mid { padding-bottom: 104px; }
.hero--mid .hc2 { padding-block: 52px 36px; }
.hero--mid .crumbs { margin-bottom: 14px; }
.hero--mid .hc2__l1 { font-size: 80px; }
.hero--mid .hc2__l2 { font-size: 40px; }
.hero--mid .hi__proof { margin: 0 0 22px; }
@media (max-width: 1279px) { .hero--mid .hc2__l1 { font-size: 66px; } .hero--mid .hc2__l2 { font-size: 34px; } }
@media (max-width: 767px) { .hero--mid .hc2 { padding-block: 30px 24px; } .hero--mid .hc2__l1 { font-size: 40px; } .hero--mid .hc2__l2 { font-size: 23px; } }

/* why homeowners choose us: one light, one dark, a checkerboard at every column count */
.wy .mhead--c { margin-bottom: 48px; }
.wy__grid { gap: 18px; }
.wy__card { gap: 14px; min-height: 100%; padding: 34px 30px 32px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line), 0 22px 40px -32px rgba(11, 22, 34, .45); }
.wy__card .wy__ic { width: 56px; height: 56px; margin-bottom: 4px; font-size: 25px; box-shadow: 0 12px 22px -10px rgba(240, 100, 30, .55); }
.wy__card p { font-size: 16px; line-height: 1.68; }
.wy__grid > .wy__card:nth-child(even) {
  color: #F7F9FB; background: radial-gradient(80% 90% at 100% 0%, rgba(30, 136, 214, .28), transparent 62%), linear-gradient(160deg, #13283D 0%, #0B1622 100%);
  box-shadow: 0 30px 50px -34px rgba(11, 22, 34, .8); }
.wy__grid > .wy__card:nth-child(even) .wy__t { color: #FFFFFF; }
.wy__grid > .wy__card:nth-child(even) p { color: rgba(247, 249, 251, .82); }
.wy__grid > .wy__card:nth-child(even) .wy__ic { background: linear-gradient(145deg, #5FB3EC, #1E88D6 48%, #0E67A8); box-shadow: 0 12px 22px -10px rgba(30, 136, 214, .6); }
.wy__grid > .wy__card:nth-child(odd) .wy__ic { background: linear-gradient(145deg, #F7934A, #F0641E 50%, #C4411A); }
@media (min-width: 640px) and (max-width: 1023px) {
  /* two columns: rows go light-dark, dark-light, light-dark */
  .wy__grid > .wy__card:nth-child(3), .wy__grid > .wy__card:nth-child(6) {
    color: #F7F9FB; background: radial-gradient(80% 90% at 100% 0%, rgba(30, 136, 214, .28), transparent 62%), linear-gradient(160deg, #13283D 0%, #0B1622 100%); box-shadow: 0 30px 50px -34px rgba(11, 22, 34, .8); }
  .wy__grid > .wy__card:nth-child(3) .wy__t, .wy__grid > .wy__card:nth-child(6) .wy__t { color: #FFFFFF; }
  .wy__grid > .wy__card:nth-child(3) p, .wy__grid > .wy__card:nth-child(6) p { color: rgba(247, 249, 251, .82); }
  .wy__grid > .wy__card:nth-child(4) { color: var(--ink); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 22px 40px -32px rgba(11, 22, 34, .45); }
  .wy__grid > .wy__card:nth-child(4) .wy__t { color: var(--night); }
  .wy__grid > .wy__card:nth-child(4) p { color: var(--muted); }
}

/* the credential viewer: the list left, the certificate panel right */
.lc2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.lc2__side .lead { margin-top: 14px; color: var(--muted); }
.lc2__tabs { display: grid; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.lc2__tab { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 8px 18px 8px 8px;
  border: 0; border-radius: 16px; cursor: pointer; text-align: left; font: 700 20px/1.15 var(--fd); letter-spacing: .01em; color: var(--night);
  background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.lc2__tab:hover { transform: translateX(4px); box-shadow: inset 0 0 0 2px #1E88D6; }
.lc2__ti { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px; color: #E8541F; background: var(--tint-flame); }
.lc2__ti .dt { width: 26px; height: 26px; --d2: #F0641E; --d2o: .3; }
.lc2__ti--bbb { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.lc2__ti--bbb img { width: 42px; height: auto; }
.lc2__cr { font-size: 16px; color: #9AA6B2; transition: transform .25s var(--ease), color .25s var(--ease); }
.lc2__tab[aria-selected="true"] { color: #FFFFFF; transform: none;
  background: radial-gradient(80% 120% at 100% 0%, rgba(30, 136, 214, .3), transparent 60%), linear-gradient(160deg, #13283D, #0B1622); box-shadow: 0 18px 30px -18px rgba(11, 22, 34, .7); }
.lc2__tab[aria-selected="true"] .lc2__ti:not(.lc2__ti--bbb) { color: #FFFFFF; background: linear-gradient(145deg, #F7934A, #F0641E 50%, #C4411A); }
.lc2__tab[aria-selected="true"] .lc2__ti .dt { --d2: #FFFFFF; --d2o: .35; }
.lc2__tab[aria-selected="true"] .lc2__cr { color: #F58A3C; transform: translateX(3px); }
.lc2__stage { position: sticky; top: 110px; display: grid; }
.lc2__panel { grid-area: 1 / 1; position: relative; overflow: hidden; display: grid; align-content: start; gap: 18px; padding: 46px 46px 42px; border-radius: 24px; color: #F7F9FB;
  background: radial-gradient(70% 90% at 100% 0%, rgba(30, 136, 214, .36), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(240, 100, 30, .3), transparent 62%), linear-gradient(160deg, #13283D, #0B1622);
  clip-path: polygon(0 0, calc(100% - 52px) 0, 100% 52px, 100% 100%, 0 100%); box-shadow: 0 50px 80px -50px rgba(11, 22, 34, .85);
  transition: opacity .35s var(--ease), translate .35s var(--ease); }
.lc2__panel[hidden] { display: grid; visibility: hidden; opacity: 0; translate: 0 8px; }
.lc2__mark { position: absolute; right: -46px; bottom: -46px; width: 300px; height: 300px; opacity: .07; pointer-events: none; }
.lc2__mark .dt { width: 100%; height: 100%; color: #FFFFFF; --d2: #FFFFFF; --d2o: .5; }
.lc2__seal { position: relative; width: 108px; height: 108px; padding: 4px; border-radius: 50%; background: linear-gradient(135deg, #F7934A, #F0641E 40%, #1E88D6 100%); box-shadow: 0 18px 36px -18px rgba(240, 100, 30, .7); }
.lc2__seal > span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(160deg, #13283D, #0B1622); }
.lc2__seal .dt { width: 52px; height: 52px; color: #FFFFFF; --d2: #F58A3C; --d2o: .7; }
.lc2__bbb { display: inline-block; width: fit-content; }
.lc2__bbb img { width: 170px; height: auto; }
.lc2__t { position: relative; font: 700 42px/1.04 var(--fd); letter-spacing: .01em; color: #FFFFFF; text-wrap: balance; }
.lc2__what { position: relative; max-width: 620px; font-size: 17px; line-height: 1.7; color: rgba(247, 249, 251, .86); }
.lc2__why { position: relative; margin-top: 6px; padding: 20px 22px; border-radius: 14px; font-size: 16.5px; line-height: 1.65; color: rgba(247, 249, 251, .92);
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 3px 0 #F0641E, inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lc2__why b { display: block; margin-bottom: 6px; font: 700 15px/1.2 var(--fb); letter-spacing: .05em; text-transform: uppercase; color: #FFC9A6; }
@media (max-width: 1023px) { .lc2 { grid-template-columns: 1fr; gap: 28px; } .lc2__stage { position: static; } }
@media (max-width: 899px) {
  /* phones and small tablets: no tabs, every certificate in turn */
  .lc2__tabs { display: none; }
  .lc2__stage { gap: 16px; }
  .lc2__panel, .lc2__panel[hidden] { grid-area: auto; visibility: visible; opacity: 1; translate: none; }
}
@media (max-width: 559px) { .lc2__panel { padding: 30px 22px 26px; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); } .lc2__t { font-size: 32px; } .lc2__seal { width: 84px; height: 84px; } .lc2__seal .dt { width: 40px; height: 40px; } }

/* the gallery, its own light section: a bento of the real job photos */
.ga__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 270px 270px; gap: 18px; }
.ga__ph { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: #DDE5ED; box-shadow: 0 26px 44px -32px rgba(11, 22, 34, .55); }
.ga__ph:nth-child(1) { grid-row: 1 / 3; clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); }
.ga__ph:nth-child(4) { grid-column: 2 / 4; }
.ga__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ga__ph::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg, #F0641E, #1E88D6); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.ga__ph:hover img { transform: scale(1.05); }
.ga__ph:hover::after { transform: scaleX(1); }
@media (max-width: 767px) {
  .ga__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 190px 210px; gap: 12px; }
  .ga__ph:nth-child(1) { grid-row: auto; grid-column: 1 / 3; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
  .ga__ph:nth-child(4) { grid-column: 1 / 3; }
}

/* where we work: the H2 left, the paragraph right at a reading width */
.area--split .ap__head { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 16px 56px; align-items: center; justify-items: start; max-width: none; text-align: left; }
.area--split .ap__head .h2 { margin: 0; padding-bottom: 0; }
.area--split .ap__head .lead { margin-top: 0; max-width: 720px; text-wrap: pretty; }
@media (max-width: 1023px) { .area--split .ap__head { grid-template-columns: 1fr; } }

/* explore more: the H2 on a flame block, then the seven links as tiles, light and dark in a checkerboard */
.ex2-sec { padding-block: 96px; }
.ex2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ex2__list { display: contents; }
.ex2__list > li { display: block; }
.ex2__head { display: flex; align-items: flex-end; min-height: 176px; padding: 26px 28px; border-radius: 20px;
  background: radial-gradient(80% 100% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(150deg, #F0641E 0%, #CC4719 60%, #B83C16 100%);
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.ex2__h { font-size: 46px; line-height: 1; color: #FFFFFF; }
.ex2__tile { position: relative; display: grid; align-content: space-between; gap: 22px; height: 100%; min-height: 176px; padding: 24px 24px 26px; border-radius: 20px;
  text-decoration: none; color: var(--night); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 20px 36px -30px rgba(11, 22, 34, .45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ex2__ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; font-size: 23px; color: #FFFFFF; background: linear-gradient(145deg, #F7934A, #F0641E 50%, #C4411A); }
.ex2__t { font: 700 26px/1.1 var(--fd); letter-spacing: .01em; }
.ex2__go { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 17px; color: #E8541F; background: var(--tint-flame);
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.ex2__list > li:nth-child(even) .ex2__tile { color: #FFFFFF; background: radial-gradient(80% 100% at 100% 0%, rgba(30, 136, 214, .3), transparent 60%), linear-gradient(160deg, #13283D, #0B1622); box-shadow: 0 26px 44px -30px rgba(11, 22, 34, .8); }
.ex2__list > li:nth-child(even) .ex2__ic { background: linear-gradient(145deg, #5FB3EC, #1E88D6 48%, #0E67A8); }
.ex2__list > li:nth-child(even) .ex2__go { color: #FFFFFF; background: rgba(255, 255, 255, .12); }
.ex2__tile:hover, .ex2__tile:focus-visible { transform: translateY(-4px); }
.ex2__tile:hover .ex2__go, .ex2__tile:focus-visible .ex2__go { transform: rotate(45deg); color: #FFFFFF; background: #E8541F; }
@media (max-width: 1023px) {
  .ex2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex2__head { grid-column: 1 / -1; min-height: 120px; }
  .ex2__list > li:last-child { grid-column: 1 / -1; }
  .ex2__tile { min-height: 150px; }
}
@media (max-width: 479px) { .ex2__t { font-size: 22px; } .ex2__tile { padding: 20px 18px 22px; } .ex2__go { top: 16px; right: 16px; } .ex2__h { font-size: 38px; } }

/* the CTA panel: the question white, "Book a visit." orange */
.cta--panel .cp2 { display: grid; justify-items: center; }
.cp2__panel { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; width: 100%; max-width: 1000px; padding: 54px 56px 46px; border-radius: 28px; text-align: center;
  background: rgba(11, 22, 34, .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .24), 0 60px 100px -60px rgba(0, 0, 0, .95); }
.cp2__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 60% at 0% 100%, rgba(240, 100, 30, .32), transparent 70%), radial-gradient(45% 60% at 100% 0%, rgba(30, 136, 214, .32), transparent 70%); }
.cp2__torch { width: 34px; height: auto; margin-bottom: 18px; filter: drop-shadow(0 0 16px rgba(240, 100, 30, .6)); }
.cp2__h { display: grid; gap: 8px; max-width: 860px; font: 700 52px/1.06 var(--fd); letter-spacing: .01em; color: #FFFFFF; text-wrap: balance; }
.cp2__q { color: #FFFFFF; }
.cp2__go { font-size: 88px; line-height: .95; color: transparent; background: linear-gradient(180deg, #FFB066 0%, #F47A2C 45%, #E0501C 100%); -webkit-background-clip: text; background-clip: text; }
.cp2__acts { justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.cp2__panel .hi__proof { margin: 26px 0 0; }
@media (max-width: 1023px) { .cp2__h { font-size: 44px; } .cp2__go { font-size: 72px; } }
@media (max-width: 767px) { .cp2__panel { padding: 38px 20px 32px; border-radius: 22px; } .cp2__h { font-size: 32px; } .cp2__go { font-size: 54px; } .cp2__acts .btn { width: 100%; } }
@media (forced-colors: active) { .cp2__go { color: CanvasText; background: none; } }

/* where we work, split: the head clears the van parked on the seam */
.area--split .ap__head { margin: 64px auto 0; align-items: end; }
@media (max-width: 1023px) { .area--split .ap__head { margin-top: 40px; } }
.lc2__mark { right: -70px; bottom: -70px; opacity: .045; }
.area--split .ap__pills { margin-top: 44px; }

/* =====================================================================================================================
   Contact, on KO HVAC's contact structure (Shoaib 11-04)
   ===================================================================================================================== */
/* the how-to-reach card in the hero's right column: dark glass, a row per way in, the booking button */
.hk { align-self: center; padding: 30px 30px 28px; border-radius: 22px; color: #F7F9FB;
  background: rgba(11, 22, 34, .66); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 3px 0 #F0641E, inset 0 0 0 1px rgba(255, 255, 255, .14), 0 50px 80px -50px rgba(0, 0, 0, .9);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.hk__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.hk__rows li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.hk__rows li:first-child { border-top: 0; padding-top: 0; }
.hk__ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; font-size: 21px; color: #F58A3C; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hk__rows li:nth-child(2) .hk__ic { color: #5FB3EC; }
.hk__tx { display: grid; gap: 2px; min-width: 0; }
.hk__l { font: 700 14px/1.2 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: rgba(247, 249, 251, .66); }
.hk__tx a { display: inline-flex; align-items: center; min-height: 44px; font: 700 26px/1.15 var(--fd); letter-spacing: .01em; color: #FFFFFF; text-decoration: none; overflow-wrap: anywhere; }
.hk__rows li:last-child .hk__tx a { font: 600 17px/1.4 var(--fb); }
.hk__tx a:hover, .hk__tx a:focus-visible { color: #FFC9A6; text-decoration: underline; text-underline-offset: 4px; }
.hk__acts { margin-top: 18px; }
.hk__acts .btn { width: 100%; }
.hero--split .hk { margin: 0; }
@media (max-width: 559px) { .hk { padding: 24px 20px 22px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); } .hk__tx a { font-size: 23px; } }

/* the copy + note left, the form right */
.ct .ib__copy .h2 { max-width: 620px; }
.ct__p { max-width: 620px; margin-top: 16px; font-size: 17.5px; line-height: 1.7; color: var(--muted); }
.ct__p b { color: var(--night); }
.ct__note { max-width: 620px; margin-top: 26px; padding: 20px 24px; border-radius: 16px; font-size: 17px; line-height: 1.65; color: #34404B;
  background: #EEF4FA; box-shadow: inset 4px 0 0 #1E88D6; }
.ct__note b { color: #0E67A8; }
.ct__form .quote--side { box-shadow: inset 0 4px 0 #F0641E, inset 0 0 0 1px var(--line), 0 40px 70px -46px rgba(11, 22, 34, .55); }
.ct__form .quote__title { padding: 26px 28px 0; font-size: 30px; }

/* the map with the business tag */
.mp-sec { padding-block: 96px; }
.mp__card { position: relative; overflow: hidden; border-radius: 24px; background: #DCE5EE; box-shadow: 0 40px 70px -46px rgba(11, 22, 34, .55), inset 0 0 0 1px var(--line); }
.mp__card iframe { display: block; width: 100%; height: 480px; border: 0; }
.mp__tag { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 48px); padding: 14px 20px 14px 14px; border-radius: 16px;
  background: #FFFFFF; box-shadow: 0 20px 40px -20px rgba(11, 22, 34, .5); }
.mp__tag img { width: 48px; height: 48px; border-radius: 12px; }
.mp__tag div { display: grid; gap: 2px; min-width: 0; }
.mp__tag b { font: 700 20px/1.1 var(--fd); letter-spacing: .01em; color: var(--night); }
.mp__tag a { display: inline-flex; align-items: center; min-height: 44px; font: 600 15.5px/1.3 var(--fb); color: #0E67A8; text-underline-offset: 3px; }
@media (max-width: 767px) { .mp-sec { padding-block: 64px; } .mp__card iframe { height: 380px; } .mp__tag { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
.ct__form .quote__title { padding: 0; font-size: 30px; }

/* =====================================================================================================================
   Reviews, on CityLine's reviews structure (Shoaib 11-04)
   ===================================================================================================================== */
/* four ticks wrap in two rows */
.hc2__checks--four { max-width: 640px; }

/* the stat plate in the hero's right column: the four Notion tiles, white and blue (the INM plate the AC hub uses) */
.rs { align-self: center; padding: 18px; border-radius: 24px; background: rgba(11, 22, 34, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 50px 80px -50px rgba(0, 0, 0, .9); }
.rs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rs__tile { display: grid; align-content: start; gap: 8px; min-height: 132px; padding: 22px 20px; border-radius: 16px; color: #4A5663; background: linear-gradient(180deg, #FFFFFF 0%, #EDF3F9 100%); }
.rs__tile b { font: 700 46px/1 var(--fd); letter-spacing: .01em; color: #E8541F; }
.rs__tile span { font: 600 15px/1.4 var(--fb); }
.rs__tile:nth-child(2), .rs__tile:nth-child(3) { color: #E9F2FA; background: radial-gradient(90% 120% at 0% 0%, rgba(255, 255, 255, .12), transparent 62%), linear-gradient(165deg, #0A4F80 0%, #0E67A8 55%, #1670B8 100%); }
.rs__tile:nth-child(2) b, .rs__tile:nth-child(3) b { color: #FFFFFF; }
.rs__tile:last-child b { font-size: 36px; }
@media (max-width: 1023px) { .rs { max-width: 560px; } }
@media (max-width: 479px) { .rs { padding: 12px; } .rs__tile { min-height: 116px; padding: 18px 16px; } .rs__tile b { font-size: 38px; } .rs__tile:last-child b { font-size: 28px; } }

/* every site: one dark card per platform */
/* AM 11-05: the four profiles that hold reviews, on one row */
.pf2__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.pf2__card { display: grid; align-content: start; gap: 16px; padding: 24px 24px 22px; border-radius: 20px; color: #F7F9FB;
  background: radial-gradient(80% 100% at 100% 0%, rgba(30, 136, 214, .28), transparent 60%), linear-gradient(160deg, #13283D, #0B1622);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); box-shadow: 0 30px 50px -36px rgba(11, 22, 34, .8); }
.pf2__top { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.pf2__logo { width: 48px; height: 48px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #FFFFFF; }
.pf2__logo img { width: 40px; height: 40px; object-fit: contain; }
.pf2__logo--bbb { width: 84px; }
.pf2__logo--bbb img { width: 76px; height: auto; }
.pf2__name { font: 700 26px/1.1 var(--fd); letter-spacing: .01em; color: #FFFFFF; }
.pf2__dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; margin: 0; }
.pf2__dl div { display: grid; align-content: start; gap: 4px; }
.pf2__dl dt { font: 700 14px/1.2 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: rgba(247, 249, 251, .62); }
.pf2__dl dd { margin: 0; }
.pf2__n { font: 700 46px/1 var(--fd); letter-spacing: .01em; color: #F58A3C; }
.pf2__na { font: 600 17px/1.3 var(--fb); color: rgba(247, 249, 251, .86); }
.pf2__r { font: 600 17px/1.35 var(--fb); color: #FFFFFF; }
.pf2__what { font-size: 15.5px; line-height: 1.55; color: rgba(247, 249, 251, .78); }
.pf2__go { display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; font: 700 16px/1 var(--fb); color: #FFFFFF; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(245, 138, 60, .7); }
.pf2__go .i { color: #F58A3C; transition: transform .2s var(--ease); }
.pf2__go:hover .i, .pf2__go:focus-visible .i { transform: translate(2px, -2px); }
@media (max-width: 1023px) { .pf2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pf2__grid { grid-template-columns: 1fr; } }

/* what homeowners say: CityLine's topic cards (a coloured top edge, the excerpt on a tinted block with a left rule) */
.th-sec .mhead { margin-inline: auto; text-align: center; }
.th-sec .mhead .h2 { margin-inline: auto; }
.th__card { gap: 12px; padding: 30px 30px 24px; border-radius: 18px; clip-path: none; background: #FFFFFF; box-shadow: inset 0 4px 0 #1E88D6, inset 0 0 0 1px var(--line), 0 22px 40px -32px rgba(11, 22, 34, .45); }
.th__card:nth-child(even) { box-shadow: inset 0 4px 0 #F0641E, inset 0 0 0 1px var(--line), 0 22px 40px -32px rgba(11, 22, 34, .45); }
.th__q { padding: 20px 22px 18px; border-radius: 12px; color: var(--ink); background: #EEF4FA; box-shadow: inset 4px 0 0 #1E88D6; }
.th__card:nth-child(even) .th__q { background: #FDF1EA; box-shadow: inset 4px 0 0 #F0641E; }
.th__mk { color: #1E88D6; opacity: .18; }
.th__q blockquote p { font: 600 17px/1.55 var(--fb); color: var(--night); }
.th__q figcaption { color: #4A5663; }
.th__q figcaption img { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #F0641E; }

/* the towns beside the map */
.tw2s { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.tw2s__copy .lead { margin-top: 14px; color: var(--muted); }
.tw__chips--l { justify-content: flex-start; margin-top: 26px; }
.tw__close--l { text-align: left; }
.tw2s__map iframe { height: 520px; }
@media (max-width: 1023px) { .tw2s { grid-template-columns: 1fr; gap: 36px; } .tw2s__map iframe { height: 380px; } }

/* the CTA panel's paragraph */
.cp2__p { max-width: 720px; margin-top: 18px; font-size: 18px; line-height: 1.65; font-weight: 300; color: rgba(247, 249, 251, .9); text-wrap: pretty; }
.cp2__panel .cta__by { margin-top: 22px; }
@media (max-width: 767px) { .cp2__p { font-size: 16.5px; } }
.rs__tile:last-child b { font-size: 30px; }
.cp2__go { line-height: 1.06; padding-bottom: .08em; }

/* =====================================================================================================================
   Areas We Serve, on Innovative Mechanical's service-areas structure (Shoaib 11-04)
   ===================================================================================================================== */
/* the hero: copy on the photo, the right side left to the photo */
.hero--open .hi { grid-template-columns: minmax(0, 720px); padding-block: 64px 40px; }
.hero--open .hero__bg::after { background: linear-gradient(90deg, rgba(8, 24, 41, .96) 0%, rgba(8, 24, 41, .86) 38%, rgba(8, 24, 41, .35) 68%, rgba(8, 24, 41, .08) 100%),
  linear-gradient(180deg, rgba(8, 24, 41, .35) 0%, transparent 30%, transparent 72%, rgba(8, 22, 38, .85) 100%); }
.hero--open { min-height: 600px; }
@media (max-width: 1023px) { .hero--open .hero__bg::after { background: linear-gradient(180deg, rgba(8, 24, 41, .82), rgba(8, 24, 41, .9)); } .hero--open { min-height: 0; } }

/* the finder card: "Is my area served?", the town search, Call */
.fd { position: relative; z-index: 2; max-width: 980px; margin: -8px auto 72px; padding: 26px 30px 28px; border-radius: 22px; background: #FFFFFF;
  box-shadow: inset 0 4px 0 #F0641E, inset 0 0 0 1px var(--line), 0 40px 70px -46px rgba(11, 22, 34, .55); }
.fd__l { display: block; font: 700 28px/1.15 var(--fd); letter-spacing: .01em; color: var(--night); }
.fd__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin-top: 14px; }
.fd__in { position: relative; display: flex; align-items: center; }
.fd__in .i { position: absolute; left: 18px; font-size: 20px; color: #E8541F; pointer-events: none; }
.fd__in input { width: 100%; min-height: 58px; padding: 0 18px 0 50px; border: 0; border-radius: 14px; font: 600 18px/1 var(--fb); color: var(--ink); background: #F1F5F9;
  box-shadow: inset 0 0 0 1px var(--line); }
.fd__in input:focus { outline: none; box-shadow: inset 0 0 0 2px #1E88D6; background: #FFFFFF; }
.fd__res { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.fd__hit { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font: 700 16px/1 var(--fb); color: #FFFFFF;
  background: linear-gradient(150deg, #0A4F80, #0E67A8 55%, #1670B8); }
.fd__hit:hover, .fd__hit:focus-visible { background: linear-gradient(150deg, #F0641E, #CC4719); }
.fd__none { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 600 16.5px/1.4 var(--fb); color: var(--night); }
.fd__none .i { flex: none; color: #E8541F; }
.fd__none[hidden], .fd__res[hidden] { display: none; }
@media (max-width: 599px) { .fd { padding: 22px 18px 22px; margin-bottom: 52px; } .fd__row { grid-template-columns: 1fr; } .fd__row .btn { width: 100%; } .fd__l { font-size: 24px; } }

/* the intro beside the map */
.ai2-sec { padding-top: 96px; }
.ai--map { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.ai__map iframe { height: 520px; }
@media (max-width: 1023px) { .ai__map iframe { height: 380px; } }

/* the county directory: the sticky county list left, every county in turn right */
.dr__head { max-width: 880px; margin-bottom: 36px; }
.dr__grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: start; }
.dr__side { position: sticky; top: 110px; padding: 14px; border-radius: 20px; background: linear-gradient(160deg, #13283D, #0B1622); box-shadow: 0 40px 70px -46px rgba(11, 22, 34, .7); }
.dr__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dr__nav { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 12px; font: 700 18px/1.15 var(--fd); letter-spacing: .01em; color: rgba(247, 249, 251, .86); text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease); }
.dr__nav:hover, .dr__nav:focus-visible { color: #FFFFFF; background: rgba(255, 255, 255, .08); }
.dr__nav[aria-current] { color: #FFFFFF; background: rgba(255, 255, 255, .12); box-shadow: inset 3px 0 0 #F0641E; }
.dr__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.dr__dot--flame { background: #F0641E; box-shadow: 0 0 10px rgba(240, 100, 30, .7); }
.dr__dot--ice { background: #1E88D6; box-shadow: 0 0 10px rgba(30, 136, 214, .7); }
.dr__body { display: grid; gap: 44px; min-width: 0; }
.dr__group { display: grid; gap: 16px; scroll-margin-top: 110px; }
.dr__h { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 22px 10px 12px; border-radius: 16px; font: 700 26px/1.1 var(--fd); letter-spacing: .01em; color: #FFFFFF;
  background: linear-gradient(160deg, #13283D, #0B1622); box-shadow: inset 4px 0 0 #1E88D6, 0 24px 40px -30px rgba(11, 22, 34, .7); }
.dr__group--flame .dr__h { box-shadow: inset 4px 0 0 #F0641E, 0 24px 40px -30px rgba(11, 22, 34, .7); }
.dr__pin { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; font-size: 18px; color: #5FB3EC; background: rgba(255, 255, 255, .08); }
.dr__group--flame .dr__pin { color: #F58A3C; }
.dr__h a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.dr__h a .i { font-size: 20px; color: #F58A3C; transition: transform .2s var(--ease); }
.dr__h a:hover .i, .dr__h a:focus-visible .i { transform: translateX(4px); }
.dr__towns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dr__card { position: relative; display: grid; align-content: start; gap: 10px; padding: 24px 24px 22px; border-radius: 16px; background: #FFFFFF;
  box-shadow: inset 0 3px 0 #1E88D6, inset 0 0 0 1px var(--line), 0 20px 36px -30px rgba(11, 22, 34, .4); transition: box-shadow .3s var(--ease); scroll-margin-top: 140px; }
.dr__group--flame .dr__card { box-shadow: inset 0 3px 0 #F0641E, inset 0 0 0 1px var(--line), 0 20px 36px -30px rgba(11, 22, 34, .4); }
.dr__t { font: 700 25px/1.1 var(--fd); letter-spacing: .01em; }
.dr__t a { display: inline-flex; align-items: center; min-height: 44px; color: var(--night); text-decoration: none; }
.dr__t a:hover, .dr__t a:focus-visible { color: #0E67A8; text-decoration: underline; text-underline-offset: 5px; }
.dr__p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.dr__card--wide .dr__p { font-size: 16.5px; }
.dr__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dr__tag { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; font: 700 14px/1 var(--fb); letter-spacing: .03em; text-transform: uppercase; color: #0E67A8;
  background: #E8F1FA; text-decoration: none; }
.dr__tag:hover, .dr__tag:focus-visible { color: #FFFFFF; background: #0E67A8; }
.dr__more { padding-top: 14px; border-top: 1px solid var(--line); }
.dr__more--card { padding: 20px 22px; border: 0; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.dr__ml { font: 700 16px/1.3 var(--fb); color: var(--night); }
.dr__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.dr__chips li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font: 600 15px/1 var(--fb); color: var(--ink); background: #EEF2F6;
  transition: background-color .3s var(--ease), color .3s var(--ease); scroll-margin-top: 160px; }
.is-hit { animation: dr-hit 2.4s var(--ease); }
.dr__chips li.is-hit { color: #FFFFFF; background: #F0641E; }
@keyframes dr-hit { 0%, 70% { box-shadow: 0 0 0 4px rgba(240, 100, 30, .55), 0 20px 36px -30px rgba(11, 22, 34, .4); } 100% { } }
@media (prefers-reduced-motion: reduce) { .is-hit { animation: none; outline: 3px solid #F0641E; } }
@media (max-width: 1023px) {
  .dr__grid { grid-template-columns: 1fr; }
  .dr__side { position: static; }
  .dr__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) { .dr__towns { grid-template-columns: 1fr; } .dr__h { font-size: 22px; } }
@media (max-width: 419px) { .dr__list { grid-template-columns: 1fr; } }

/* the closing band: copy left, the form right, on the night photo */
.ns2 .emg__lead { margin-top: 16px; }
.ns2 .emg__lead a { color: #FFC9A6; font-weight: 700; }
.ns2-band .ec__formcol .quote--side .quote__title { font-size: 30px; }

/* =====================================================================================================================
   Pricing: the fee tickets and the price-range chart (Shoaib 11-04)
   ===================================================================================================================== */
/* tickets: a bite out of each side (no perforation dashes), the cost large over the booking line */
.fe2__big, .fe2__small { display: grid; gap: 18px; margin: 0; }
.fe2__big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fe2__small { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; }
.fe2__t { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 28px 26px 26px; border-radius: 18px;
  -webkit-mask: radial-gradient(circle 13px at 0 62%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 62%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 13px at 0 62%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 62%, transparent 98%, #000) right / 51% 100% no-repeat;
  transition: transform .3s var(--ease); }
.fe2__t:hover { transform: translateY(-4px); }
.fe2__k { font: 600 16px/1.45 var(--fb); }
.fe2__k a { font-weight: 700; text-underline-offset: 3px; }
.fe2__v { margin: 0; font: 700 64px/1 var(--fd); letter-spacing: .01em; }
.fe2__big .fe2__t { min-height: 196px; justify-content: flex-start; }
.fe2__big .fe2__v { font-size: 92px; }
.fe2__big .fe2__k { font-size: 18px; }
.fe2__big .fe2__t--flame { color: #FFFFFF; background: radial-gradient(70% 100% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(160deg, #F0641E 0%, #CC4719 60%, #B83C16 100%); }
.fe2__big .fe2__t--night { color: #FFFFFF; background: radial-gradient(70% 100% at 100% 0%, rgba(30, 136, 214, .3), transparent 60%), linear-gradient(160deg, #13283D, #0B1622); }
.fe2__big .fe2__t--ice { color: #FFFFFF; background: radial-gradient(70% 100% at 100% 0%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(165deg, #0A4F80 0%, #0E67A8 55%, #1670B8 100%); }
.fe2__big .fe2__k { color: rgba(255, 255, 255, .9); }
.fe2__small .fe2__t { padding: 24px 20px 22px; color: var(--ink); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.fe2__small .fe2__k { color: var(--muted); font-size: 15px; }
.fe2__small .fe2__k a { color: #0E67A8; }
.fe2__small .fe2__v { font-size: 40px; }
.fe2__small .fe2__t--flame .fe2__v { color: #E8541F; }
.fe2__small .fe2__t--ice .fe2__v { color: #0E67A8; }
.fe2__small .fe2__t--night .fe2__v { color: var(--night); }
.fe2__small .fe2__t:nth-child(4) .fe2__v { font-size: 30px; }
.fe2__small .fe2__t:nth-child(5) .fe2__v { font: 700 22px/1.2 var(--fd); }
.fe2__note { display: flex; align-items: flex-start; gap: 14px; max-width: 900px; margin: 30px auto 0; padding: 20px 24px; border-radius: 16px; font-size: 16.5px; line-height: 1.65; color: #34404B;
  background: #FFFFFF; box-shadow: inset 4px 0 0 #F0641E, inset 0 0 0 1px var(--line); }
.fe2__note .i { flex: none; margin-top: 3px; font-size: 22px; color: #E8541F; }
@media (max-width: 1099px) { .fe2__small { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fe2__big .fe2__v { font-size: 76px; } }
@media (max-width: 767px) { .fe2__big { grid-template-columns: 1fr; } .fe2__small { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fe2__big .fe2__t { min-height: 0; } .fe2__big .fe2__v { font-size: 64px; } }
@media (max-width: 459px) { .fe2__small { grid-template-columns: 1fr; } }

/* the price-range chart: one row per system, its range as a bar on one shared scale */
.np2__head { max-width: 880px; }
.np2__card { margin-top: 34px; padding: 10px 30px 18px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 40px 60px -36px rgba(0, 0, 0, .8);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.np2__t { width: 100%; border-collapse: collapse; }
.np2__t thead th { padding: 16px 0 12px; text-align: left; font: 700 14px/1.2 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: #6B7785; border-bottom: 1px solid var(--line); }
.np2__t tbody th { width: 34%; padding: 16px 20px 16px 0; text-align: left; font: 600 16.5px/1.4 var(--fb); color: var(--ink); border-bottom: 1px solid var(--line); }
.np2__t tbody th a { display: inline-flex; align-items: center; min-height: 44px; color: #0E67A8; font-weight: 700; text-underline-offset: 3px; }
.np2__t tbody td { padding: 16px 0; border-bottom: 1px solid var(--line); }
.np2__t tbody tr:last-child > * { border-bottom: 0; }
.np2__cell { display: grid; grid-template-columns: minmax(0, 1fr) 172px; align-items: center; gap: 22px; }
.np2__track { position: relative; height: 14px; border-radius: 999px; background: #EDF2F7; }
.np2__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 999px;
  transform-origin: left center; transition: transform .9s var(--ease) calc(var(--i) * 70ms); }
.np2__r--ice .np2__bar { background: linear-gradient(90deg, #5FB3EC, #0E67A8); }
.np2__r--flame .np2__bar { background: linear-gradient(90deg, #F7934A, #C4411A); }
.np2__r--split .np2__bar { background: linear-gradient(90deg, #F0641E, #1E88D6); }
.np2__r--red .np2__bar { background: linear-gradient(90deg, #F27272, #A8202A); }
.js .np2__card[data-reveal]:not(.is-in) .np2__bar { transform: scaleX(0); }
.np2__v { font: 700 26px/1 var(--fd); letter-spacing: .01em; color: var(--night); text-align: right; white-space: nowrap; }
.np2__note { margin-top: 18px; font-size: 16px; line-height: 1.6; color: rgba(247, 249, 251, .8); }
@media (max-width: 767px) {
  .np2__card { padding: 6px 18px 12px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
  .np2__t thead { display: none; }
  .np2__t, .np2__t tbody, .np2__t tr { display: block; }
  .np2__t tbody tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .np2__t tbody th, .np2__t tbody td { display: block; width: auto; padding: 0; border: 0; }
  .np2__cell { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin-top: 6px; }
  .np2__v { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .np2__bar { transition: none; } .js .np2__card[data-reveal]:not(.is-in) .np2__bar { transform: none; } .fe2__t { transition: none; } }
.dr__tag { min-height: 44px; padding: 0 14px; }

/* phones: the hero column never grows past the screen; long hero buttons wrap and take the full width */
@media (max-width: 1023px) { .hero--split .hi { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559px) { .hero--split .actions .btn { width: 100%; white-space: normal; text-align: center; } }

/* =====================================================================================================================
   Round 3 (Shoaib 11-04)
   ===================================================================================================================== */
/* Areas hero: the location glimpse box (every area, a few of its towns, a jump into the directory) */
.gl { align-self: center; padding: 14px; border-radius: 22px; background: rgba(11, 22, 34, .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 3px 0 #F0641E, inset 0 0 0 1px rgba(255, 255, 255, .14), 0 50px 80px -50px rgba(0, 0, 0, .9);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.gl__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gl__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 6px 14px 6px 8px; border-radius: 12px;
  color: #FFFFFF; text-decoration: none; transition: background-color .2s var(--ease); }
.gl__row:hover, .gl__row:focus-visible { background: rgba(255, 255, 255, .1); }
.gl__pin { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; font-size: 16px; color: #F58A3C; background: rgba(255, 255, 255, .08); }
.gl__list li:nth-child(even) .gl__pin { color: #5FB3EC; }
.gl__tx { display: grid; gap: 2px; min-width: 0; }
.gl__tx b { font: 700 19px/1.15 var(--fd); letter-spacing: .01em; }
.gl__tx span { overflow: hidden; font: 600 14px/1.3 var(--fb); color: rgba(247, 249, 251, .7); white-space: nowrap; text-overflow: ellipsis; }
.gl__go { font-size: 16px; color: #F58A3C; transition: transform .2s var(--ease); }
.gl__row:hover .gl__go, .gl__row:focus-visible .gl__go { transform: translateX(3px); }
.hero--split .gl { margin: 0; }

/* Areas directory: the search on top of the county list */
.dr__side { display: grid; gap: 12px; }
.dr__find { padding: 6px 4px 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.dr__fl { display: block; margin: 0 0 10px; font: 700 20px/1.15 var(--fd); letter-spacing: .01em; color: #FFFFFF; }
.dr__find .fd__in input { min-height: 50px; color: var(--ink); background: #FFFFFF; box-shadow: none; }
.dr__find .fd__in input:focus { box-shadow: inset 0 0 0 2px #F0641E; }
.dr__find .fd__res { margin-top: 10px; }
.dr__find .fd__none { margin-top: 10px; color: #FFFFFF; font-size: 15px; }
.dr__find .fd__none .i { color: #F58A3C; }
.dr__side nav { display: block; }
@media (max-width: 1023px) { .dr__find { padding: 4px 2px 12px; } }

/* =====================================================================================================================
   Option pages (two misses -> ask): licenses A / B / C, new-system prices A / B. Review labels exist on those pages only.
   ===================================================================================================================== */
.opt-label { position: relative; z-index: 5; padding: 14px 0; text-align: center; background: #FFE9B8; }
.opt-label span { font: 700 18px/1.2 var(--fb); letter-spacing: .02em; color: #6A3B00; }
.opt-jump { position: fixed; z-index: 60; left: 16px; bottom: 90px; display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(11, 22, 34, .9); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); }
.opt-jump a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 10px; font: 700 15px/1 var(--fb); color: #FFFFFF; text-decoration: none; background: rgba(255, 255, 255, .1); }
.opt-jump a:hover { background: #E8541F; }

/* licenses A: CityLine's rows */
.lA__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.lA__row { display: grid; grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; border-radius: 16px; background: #FFFFFF;
  box-shadow: inset 0 4px 0 #1E88D6, inset 0 0 0 1px var(--line), 0 20px 36px -30px rgba(11, 22, 34, .45); }
.lA__row:nth-child(even) { box-shadow: inset 0 4px 0 #F0641E, inset 0 0 0 1px var(--line), 0 20px 36px -30px rgba(11, 22, 34, .45); }
.lA__row--solo { grid-template-columns: 300px minmax(0, 2fr); }
.lA__name { display: flex; align-items: center; gap: 18px; padding: 28px 40px 28px 26px; color: #FFFFFF;
  background: linear-gradient(160deg, #13283D, #0B1622); clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%); }
.lA__name h4 { font: 700 22px/1.15 var(--fd); letter-spacing: .01em; }
.lA__ic { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.lA__ic .dt { width: 28px; height: 28px; color: #FFFFFF; --d2: #F58A3C; --d2o: .6; }
.lA__name--bbb img { width: 96px; height: auto; flex: none; }
.lA__what { align-self: center; padding: 26px 28px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.lA__why { align-self: center; margin: 22px 26px 22px 0; padding-left: 20px; border-left: 3px solid #1E88D6; }
.lA__row:nth-child(even) .lA__why { border-left-color: #F0641E; }
.lA__why b { display: block; margin-bottom: 6px; font: 700 14px/1.2 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: #0E67A8; }
.lA__row:nth-child(even) .lA__why b { color: #C4411A; }
.lA__why p { font-size: 16px; line-height: 1.65; color: var(--ink); }
@media (max-width: 1023px) { .lA__row, .lA__row--solo { grid-template-columns: 1fr; } .lA__name { clip-path: none; } .lA__why { margin: 0 24px 24px; } .lA__what { padding: 22px 24px 14px; } }

/* licenses B: KO's cards */
.lB__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.lB__card { grid-column: span 2; display: grid; align-content: start; gap: 14px; padding: 30px 28px; border-radius: 18px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line), 0 22px 40px -32px rgba(11, 22, 34, .45); }
.lB__card:nth-child(n + 4) { grid-column: span 3; }
.lB__ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; }
.lB__ic .dt { width: 30px; height: 30px; }
.lB__ic--flame { background: var(--tint-flame); color: #E8541F; --d2: #F0641E; --d2o: .3; }
.lB__ic--ice { background: #E3F1FB; color: #0E67A8; --d2: #1E88D6; --d2o: .3; }
.lB__ic .dt { --d2: currentColor; }
.lB__seal img { width: 140px; height: auto; border-radius: 8px; background: #0E3A5F; padding: 6px; }
.lB__t { font: 700 24px/1.15 var(--fd); letter-spacing: .01em; color: var(--night); }
.lB__what { font-size: 16px; line-height: 1.65; color: var(--muted); }
.lB__why { padding: 16px 18px; border-radius: 12px; font-size: 15.5px; line-height: 1.6; color: #34404B; background: #F2F6FA; box-shadow: inset 3px 0 0 #F0641E; }
.lB__card:nth-child(even) .lB__why { box-shadow: inset 3px 0 0 #1E88D6; }
.lB__why b { color: var(--night); }
@media (max-width: 1023px) { .lB__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lB__card, .lB__card:nth-child(n + 4) { grid-column: auto; } .lB__card:last-child { grid-column: 1 / -1; } }
@media (max-width: 639px) { .lB__grid { grid-template-columns: 1fr; } }

/* licenses C: INM's rows with a round stamp */
.lC__list { display: grid; gap: 18px; max-width: 1140px; margin: 0 auto; padding: 0; list-style: none; }
.lC__row { display: grid; grid-template-columns: 320px minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; border-radius: 20px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line), 0 26px 44px -34px rgba(11, 22, 34, .55); }
.lC__row--solo { grid-template-columns: 320px minmax(0, 2fr); }
.lC__name { display: flex; align-items: center; gap: 18px; padding: 28px 24px; color: #FFFFFF; background: linear-gradient(170deg, #13283D, #0A1C30); }
.lC__name h4 { font: 700 22px/1.15 var(--fd); letter-spacing: .01em; }
.lC__stamp { position: relative; width: 104px; height: 104px; flex: none; }
.lC__stamp svg { width: 100%; height: 100%; }
.lC__ring { fill: #FFFFFF; stroke: #F0641E; stroke-width: 3; }
.lC__stamp text { font: 700 9.4px/1 var(--fb); letter-spacing: .08em; fill: #0E3A5F; }
.lC__core { position: absolute; inset: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(160deg, #13283D, #0B1622); }
.lC__core .dt { width: 24px; height: 24px; color: #FFFFFF; --d2: #F58A3C; --d2o: .7; }
.lC__bbb img { width: 104px; height: auto; flex: none; }
.lC__what { align-self: center; padding: 26px 28px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.lC__why { align-self: center; margin: 22px 28px 22px 0; padding-left: 22px; border-left: 2px solid #F0A066; }
.lC__why b { display: block; margin-bottom: 6px; font: 700 14px/1.2 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: #C4411A; }
.lC__why p { font-size: 16px; line-height: 1.65; color: var(--ink); }
@media (max-width: 1023px) { .lC__row, .lC__row--solo { grid-template-columns: 1fr; } .lC__why { margin: 0 24px 24px; } .lC__what { padding: 22px 24px 14px; } }

/* prices A: Precision's installed-price table */
.pP1__card { max-width: 900px; margin: 0 auto; overflow: hidden; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 30px 50px -36px rgba(11, 22, 34, .5); }
.pP1__t { width: 100%; border-collapse: collapse; }
.pP1__t thead th { padding: 18px 28px; text-align: left; font: 700 14px/1.2 var(--fb); letter-spacing: .08em; text-transform: uppercase; color: #FFFFFF; background: #0F2A44; }
.pP1__t thead th:last-child, .pP1__t tbody td { text-align: right; }
.pP1__t tbody th, .pP1__t tbody td { padding: 16px 28px; border-top: 1px solid var(--line); }
.pP1__t tbody th { text-align: left; font: 600 17px/1.4 var(--fb); color: var(--ink); }
.pP1__t tbody th a { display: inline-flex; align-items: center; min-height: 44px; color: #0E67A8; font-weight: 700; text-underline-offset: 3px; }
.pP1__t tbody td { font: 700 20px/1 var(--fb); color: var(--night); white-space: nowrap; }
.pP1__lo { color: #6B7785; }
.pP1__note { max-width: 760px; margin: 18px auto 0; text-align: center; font-size: 16px; line-height: 1.6; color: var(--muted); }
@media (max-width: 559px) { .pP1__t tbody th, .pP1__t tbody td, .pP1__t thead th { padding-inline: 16px; } .pP1__t tbody td { font-size: 17px; } }

/* prices B: Precision's guide cards with the range */
.pP2__head { max-width: 880px; }
.pP2__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.pP2__card { display: grid; align-content: start; gap: 12px; padding: 26px 26px 24px; border-radius: 18px; background: #FFFFFF; color: var(--ink);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.pP2__card .svc-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; }
.pP2__card .svc-ic .eq { width: 27px; height: 27px; fill: currentColor; }
.pP2__t { font: 700 22px/1.2 var(--fd); letter-spacing: .01em; color: var(--night); }
.pP2__t a { color: #0E67A8; text-underline-offset: 4px; }
.pP2__v { font: 700 38px/1 var(--fd); letter-spacing: .01em; color: #E8541F; }
.pP2__card--big { grid-column: span 2; color: #FFFFFF; background: radial-gradient(70% 100% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(160deg, #F0641E 0%, #CC4719 60%, #B83C16 100%); }
.pP2__card--big .pP2__t, .pP2__card--big .pP2__t a { color: #FFFFFF; }
.pP2__card--big .pP2__v { font-size: 72px; color: #FFFFFF; }
.pP2__card--big .svc-ic { background: rgba(255, 255, 255, .2); }
@media (max-width: 1023px) { .pP2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pP2__grid { grid-template-columns: 1fr; } .pP2__card--big { grid-column: auto; } .pP2__card--big .pP2__v { font-size: 52px; } }
.gl__peek i { font-style: normal; }
.gl__peek i + i::before { content: " · "; }

/* New System Prices: option A (Precision table) on the dark band (Shoaib 11-04) */
.pP1d-band .pP1__card { box-shadow: 0 40px 60px -36px rgba(0, 0, 0, .8); }
.pP1d-band .pP1__t thead th { background: linear-gradient(150deg, #F0641E 0%, #CC4719 60%, #B83C16 100%); }
.pP1d-band .pP1__note { color: rgba(247, 249, 251, .8); }
.pP1d-band .pP1__t thead tr { background: linear-gradient(100deg, #F0641E 0%, #CC4719 60%, #B83C16 100%); }
.pP1d-band .pP1__t thead th { background: none; }
.lC__bbb { flex: none; }

/* where we work, split: the H2 and the paragraph start on one line (Shoaib 11-04 "This need to be fixed") */
.area--split .ap__head { align-items: start; }
.area--split .ap__head .h2 { margin-top: -6px; }

/* the town search's typing placeholder */
.fd__in input::placeholder { color: #8A96A3; font-weight: 600; opacity: 1; }

/* Explore More, option A: CityLine's photo feature card + photo rows */
.exA { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: stretch; }
.exA__feat { position: relative; display: block; min-height: 420px; overflow: hidden; border-radius: 20px; color: #FFFFFF; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.exA__feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.exA__feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11, 22, 34, .85) 100%); }
.exA__ft { position: absolute; z-index: 1; left: 28px; bottom: 28px; right: 96px; font: 700 34px/1.05 var(--fd); letter-spacing: .01em; }
.exA__go { position: absolute; z-index: 1; right: 26px; bottom: 26px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; font-size: 22px;
  color: #FFFFFF; background: #E8541F; transition: transform .3s var(--ease); }
.exA__feat:hover img { transform: scale(1.05); }
.exA__feat:hover .exA__go { transform: translateX(4px); }
.exA__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.exA__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 100%; min-height: 108px; padding: 10px 20px 10px 10px; border-radius: 16px;
  color: var(--night); text-decoration: none; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 18px 32px -28px rgba(11, 22, 34, .45); transition: box-shadow .25s var(--ease); }
.exA__row img { width: 96px; height: 86px; object-fit: cover; border-radius: 12px; }
.exA__row span { font: 700 22px/1.15 var(--fd); letter-spacing: .01em; }
.exA__ar { font-size: 20px; color: #E8541F; transition: transform .25s var(--ease); }
.exA__row:hover, .exA__row:focus-visible { box-shadow: inset 0 0 0 2px #1E88D6, 0 18px 32px -28px rgba(11, 22, 34, .45); }
.exA__row:hover .exA__ar { transform: translateX(4px); }
@media (max-width: 1023px) { .exA { grid-template-columns: 1fr; } .exA__feat { min-height: 300px; } }
@media (max-width: 599px) { .exA__list { grid-template-columns: 1fr; } .exA__row { grid-template-columns: 80px minmax(0, 1fr) auto; min-height: 92px; } .exA__row img { width: 80px; height: 72px; } }

/* Explore More, option B: INM's photo cards with a curved foot (Nero's bowl thread) */
.exB__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.exB__item--wide { grid-column: span 2; }
.exB__card { display: grid; height: 100%; overflow: hidden; border-radius: 20px; color: var(--night); text-decoration: none; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 40px -32px rgba(11, 22, 34, .5); transition: transform .3s var(--ease); }
.exB__card:hover, .exB__card:focus-visible { transform: translateY(-4px); }
.exB__ph { position: relative; display: block; height: 190px; overflow: hidden; }
.exB__item--wide .exB__ph { height: 190px; }
.exB__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.exB__card:hover .exB__ph img { transform: scale(1.06); }
.exB__curve { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 34px; }
.exB__fill { fill: #FFFFFF; }
.exB__line { fill: none; stroke: url(#bowl-thread); stroke-width: 3; vector-effect: non-scaling-stroke; }
.exB__ic { position: absolute; left: 18px; top: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; color: #FFFFFF;
  background: linear-gradient(145deg, #F7934A, #F0641E 50%, #C4411A); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .5); }
.exB__item:nth-child(even) .exB__ic { background: linear-gradient(145deg, #5FB3EC, #1E88D6 48%, #0E67A8); }
.exB__bd { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 20px 22px; }
.exB__t { font: 700 24px/1.12 var(--fd); letter-spacing: .01em; }
.exB__go { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 18px; color: #E8541F; box-shadow: inset 0 0 0 2px #F3C5AC;
  transition: background-color .25s var(--ease), color .25s var(--ease); }
.exB__card:hover .exB__go, .exB__card:focus-visible .exB__go { color: #FFFFFF; background: #E8541F; box-shadow: none; }
@media (max-width: 1023px) { .exB__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .exB__item--wide { grid-column: 1 / -1; } }
@media (max-width: 559px) { .exB__grid { grid-template-columns: 1fr; } .exB__item--wide { grid-column: auto; } }

/* ---------- QA 2026-11-04: the Areas intro stacks on phones and tablets like every other split; the profile links sit at the card foot ---------- */
@media (max-width: 1023px) { .ai--map { grid-template-columns: 1fr; } }
.pf2__card { display: flex; flex-direction: column; }
.pf2__go { margin-top: auto; }