/* NuRenewables Heating website styles. Started from the homepage design (23 Oct 2026); new page parts at the end.
   Manrope (variable, 200 to 800, SIL Open Font Licence), self-hosted; chosen by James 23 Oct 2026 */
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--motif-line:url("/assets/img/motif-line.svg");--motif:url("/assets/img/motif.svg");
  /* square corners everywhere (James, 23 Oct); only true circles stay round */
  /* from the logo SVG: Nu teal, Renewables navy, leaf green, strapline greys, and the N mark's gradient */
  --teal:#119E90; --teal-ink:#077580; --mint:#5CD6C4; --navy:#1C4472; --leaf:#3CAF55; --leaf-hi:#52BE69;--leaf-btn:#2E8541;--leaf-btn-hi:#2A7A3B; --grey:#82868B;
  /* --night is the main dark navy (James, 22 Oct: #203F65 darkened 20%, same hue and saturation). --ink keeps the old darker navy for text on the green, where #203F65 would fall below AA contrast */
  --night:#1A3251; --deep:#13263D; --ink:#0F2547;
  /* charcoal: the navy's own hue (212°) with saturation and lightness pulled down, so it reads as a near-black that belongs to the brand */
  --charcoal:#1C2027; --charcoal-2:#151920;
  --leaf-50:#EEF8F0; --leaf-100:#DCF0E0; --leaf-ink:#1D7533; --hg-pink:#E7217A;
  --text:#24344E; --soft:#55607A; --line:#E4E8ED; --stone:#FFFFFF; --stone-2:#EEF1F4; --mist:#F3F5F8; --white:#FFFFFF; --hg-black:#1F1F1F;
  --wrap:1200px; --gutter:clamp(16px,4vw,40px);
  --shadow:0 1px 0 rgba(15,37,71,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:#fff;color:var(--text);font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;font-weight:500;line-height:1.65;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}
a{color:var(--teal-ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-weight:900;line-height:1.12;letter-spacing:-0.015em;margin:0;color:var(--navy)}
h1{font-size:clamp(2.2rem,3.9vw,3.25rem);line-height:1.06;letter-spacing:-0.02em}
h2{font-size:clamp(1.8rem,3vw,2.55rem)}
h3{font-size:1.16rem;font-weight:700;letter-spacing:0;line-height:1.3}
p{margin:0}
b,strong{font-weight:700}
section{scroll-margin-top:16px}
.band{padding:clamp(64px,8vw,104px) 0}
.band-stone{background:#fff}
/* all sections are white now, so a hairline separates one from the next */
main>section.band+section.band{border-top:1px solid var(--line)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lead{font-size:1.1rem;color:var(--soft);max-width:38em}
.head{display:grid;gap:14px;max-width:46em;margin-bottom:clamp(32px,4vw,48px)}
.head.center{margin-left:auto;margin-right:auto;text-align:center;justify-items:center}

/* labels styled like the logo's HEATING LIMITED, with the N mark's two ribbons */
.label{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink);line-height:1.4}
.label::before{content:"";width:14px;height:17px;flex:none;margin-top:-2px;background:var(--motif) center/contain no-repeat}
.on-dark .label{color:var(--mint)}


/* buttons: leaf green with deep navy text, the only place this green is used as a fill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;white-space:nowrap;font:inherit;font-weight:700;font-size:1rem;text-decoration:none;border-radius:0;padding:.85em 1.5em;border:2px solid transparent;cursor:pointer;line-height:1.2;transition:background-color .15s,color .15s,border-color .15s}
.btn-go{background:var(--leaf-btn);color:#fff}
.btn-go:hover{background:var(--leaf-btn-hi)}
.btn-line{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-line:hover{background:var(--navy);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}

/* placeholders: clearly not real content yet */
.slot{position:relative;background:repeating-linear-gradient(135deg,#EEF1F4 0 12px,#F7F9FB 12px 24px);border:1.5px dashed #C3CBD5;color:#4E5A6B;display:flex;flex-direction:column;justify-content:flex-end;padding:18px 20px;font-size:.9rem;line-height:1.45}
.slot strong{display:block;font-weight:700;margin-bottom:2px}
.tbc{background:#FFF1D6;color:#6B4E00;border-radius:0;padding:0 .35em;font-weight:700;font-size:.86em;box-decoration-break:clone;-webkit-box-decoration-break:clone;letter-spacing:0;text-transform:none}

/* header */
/* header scrolls away with the page (James, 22 Oct: not sticky) */
.site-header{position:relative;z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:24px;height:92px}
.logo{flex:none;display:block}
.logo img{height:64px;width:auto;max-width:none}
@media (max-width:1280px){.logo img{height:54px}}
/* full-site navigation */
.head-row{position:relative}
.nav{margin-left:auto;align-self:stretch}
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:2px;height:100%}
.nav-item{display:flex;align-items:center}
.nav-item.small{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border:0;border-radius:0;background:none;font:inherit;font-weight:700;font-size:.95rem;line-height:1.2;color:var(--navy);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.nav-link:hover,.nav-item.open>.nav-link{background:var(--mist);color:var(--teal-ink)}
.chev{width:12px;height:12px;flex:none;transition:transform .2s}
.nav-item.open .chev{transform:rotate(180deg)}
.drop{position:absolute;top:100%;z-index:5;background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:0 1px 0 rgba(15,37,71,.06);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility 0s linear .16s}
.drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-item.open>.drop{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .16s,visibility 0s}
.mega{left:50%;width:min(1060px,calc(100% - 2 * var(--gutter)));margin-left:calc(min(1060px,calc(100% - 2 * var(--gutter))) / -2);top:calc(100% + 8px)}
/* Services menu (24 Oct 2026): grouped like the logo's motif. The leaf half marks heat pumps, the flame half marks
   boilers, and design sits underneath both. The one dark panel is the Bushey Heath readout. */
.drop{padding-top:3px;background:linear-gradient(90deg,var(--leaf),#00A89A 55%,var(--navy)) top/100% 3px no-repeat,#fff}
.mega-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0}
.mega-main{display:grid;align-content:start;padding:22px 26px 18px}
.mega-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.mcol-h{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:0 0 10px;border-bottom:1px solid var(--line);font-size:1rem;font-weight:800;letter-spacing:-.005em;color:var(--navy)}
.mcol-h svg{width:20px;height:24px;flex:none}
.mega-list{list-style:none;margin:0;padding:0;display:grid;gap:0;align-content:start}
.mlink{position:relative;display:grid;gap:2px;padding:10px 12px 10px 14px;text-decoration:none;color:var(--text);transition:background-color .15s}
.mlink::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;background:var(--line);transition:background-color .15s,top .15s,bottom .15s}
.mlink b{color:var(--navy);font-size:.97rem;font-weight:700;line-height:1.3}
.mlink small{color:var(--soft);font-size:.84rem;line-height:1.35}
.mlink:hover,.mlink:focus-visible{background:var(--mist)}
.mlink:hover::before,.mlink:focus-visible::before{top:0;bottom:0}
.mcol-leaf .mlink::before{background:var(--leaf-100)}
.mcol-flame .mlink::before{background:#CDEDEA}
.mcol-leaf .mlink:hover::before,.mcol-leaf .mlink:focus-visible::before,.mcol-leaf .mlink[aria-current="page"]::before{background:var(--leaf)}
.mcol-flame .mlink:hover::before,.mcol-flame .mlink:focus-visible::before,.mcol-flame .mlink[aria-current="page"]::before{background:#00A89A}
.mega-base .mlink:hover::before,.mega-base .mlink:focus-visible::before,.mega-base .mlink[aria-current="page"]::before{background:var(--navy)}
.mlink[aria-current="page"] b{color:var(--teal-ink)}
.mega-base{margin-top:16px;padding:14px 16px 6px;background:var(--mist)}
.mega-base .mcol-h{padding-bottom:8px;border-bottom-color:#DDE2E9;font-size:.9rem;color:var(--soft);font-weight:700}
.mega-base .mega-list{grid-template-columns:1fr 1fr;column-gap:26px}
.mega-base .mlink:hover,.mega-base .mlink:focus-visible{background:#fff}
.mega-feature{position:relative;display:flex;flex-direction:column;background:var(--night);color:#C9D4E2;text-decoration:none;overflow:hidden}
.mega-feature img{width:100%;height:150px;object-fit:cover;object-position:40% 55%;opacity:.92;transition:transform .5s,opacity .3s}
.mega-feature:hover img{transform:scale(1.04);opacity:1}
.mf-body{position:relative;display:grid;gap:8px;padding:16px 20px 20px}
.mf-body::after{content:"";position:absolute;right:-14px;bottom:-16px;width:96px;height:116px;background:var(--motif-line) center/contain no-repeat;opacity:.16;pointer-events:none}
.mf-body>*{position:relative;z-index:1}
.mf-k{font-size:.8rem;font-weight:700;color:var(--mint)}
.mf-body b{color:#fff;font-size:1.06rem;line-height:1.3}
.mf-temps{display:grid;grid-template-columns:auto 34px auto;align-items:center;justify-content:start;gap:10px;margin-top:4px}
.mf-temps>span{display:grid;gap:2px;font-size:.74rem;line-height:1.25;color:#A9B8CB}
.mf-temps i{font-style:normal;font-weight:800;font-size:1.7rem;line-height:1;letter-spacing:-.02em}
.mf-temps .was i{color:#76839B;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(118,131,155,.6)}
.mf-temps .now i{color:var(--leaf-hi)}
.mf-temps svg{width:34px;height:17px;fill:none;stroke:var(--mint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mf-note{font-size:.8rem;color:#A9B8CB}
.mf-link{display:inline-flex;align-items:center;gap:6px;margin-top:4px;color:#fff;font-weight:700;font-size:.9rem}
.mega-feature:hover .mf-link{text-decoration:underline;text-underline-offset:3px}
.mf-link svg,.drop-foot a svg{width:15px;height:15px}
.drop-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:13px 26px;background:#fff;border-top:1px solid var(--line);font-size:.92rem;color:var(--soft)}
.drop-foot a{display:inline-flex;align-items:center;gap:6px;color:var(--teal-ink);font-weight:700;text-decoration:none}
.drop-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.df-call a{color:var(--navy)}
/* Areas menu: same item style, with the leaf mark as the pin */
.areas-drop{left:50%;width:300px;margin-left:-150px;top:calc(100% + 8px)}
.areas-drop ul{list-style:none;margin:0;padding:10px 12px;display:grid;gap:0}
.areas-drop .mlink{padding-left:34px}
.areas-drop .mlink::before{background:transparent}
.areas-drop .mlink::after{content:"";position:absolute;left:12px;top:13px;width:13px;height:16px;background:var(--motif) center/contain no-repeat}
.areas-drop .mlink:hover::before,.areas-drop .mlink:focus-visible::before,.areas-drop .mlink[aria-current="page"]::before{background:var(--leaf)}
.areas-drop .drop-foot{padding:12px 20px}
.head-cta{display:flex;align-items:center;gap:18px}
.head-phone{display:flex;flex-direction:column;line-height:1.15;color:var(--navy);text-decoration:none;font-weight:900;font-size:1.05rem;white-space:nowrap}
.head-phone small{font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.menu-btn{display:none;align-items:center;gap:8px;background:none;border:1.5px solid var(--line);border-radius:0;padding:9px 16px;font:inherit;font-weight:700;color:var(--navy);cursor:pointer}
.menu-btn svg{width:18px;height:18px}
/* tablets and phones: the same pages in a drop-down panel */
.mnav{display:none}
@media (max-width:1099px){
  .nav{display:none}
  .head-cta{margin-left:auto}
  .menu-btn{display:inline-flex}
  .mnav.open{display:block;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 64px);overflow:auto;background:#fff;border-top:1px solid var(--line);box-shadow:0 1px 0 rgba(15,37,71,.06)}
  .mnav-in{padding-top:8px;padding-bottom:20px}
  .mnav-list{list-style:none;margin:0;padding:0}
  .mnav-list>li{border-bottom:1px solid var(--stone-2)}
  .mnav-list>li>a,.mnav-acc{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 0;background:none;border:0;font:inherit;font-size:1.08rem;font-weight:700;color:var(--navy);text-decoration:none;text-align:left;cursor:pointer}
  .mnav-acc[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .mnav-sub{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:2px}
  .mnav-sub[hidden]{display:none}
  .mnav-sub a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:0;color:var(--text);text-decoration:none;font-weight:700;font-size:.98rem}
  .mnav-sub a:hover{background:var(--mist)}
  .mnav-sub .mi{width:34px;height:34px;flex:none;border-radius:0;display:grid;place-items:center;background:#EAF7F5;color:var(--teal-ink)}
  .mnav-sub .mi svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mnav-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .mnav-list,.mnav-cta{max-width:640px}
}
@media (max-width:720px){
  .head-cta{display:none}.menu-btn{margin-left:auto}.head-row{height:72px}.logo img{height:48px}
  .mnav.open{max-height:calc(100vh - 72px - 74px)}
  .mnav-cta{display:none}
}

/* hero: words on the left in dark ink; Kirk's Vaillant heat pump as the background, fading into white towards the words and the foot of the hero
   (the light photo hero from the SolarSave site). One result card floats on the photo. "Get my quote" opens the form in a pop-up */
.hero{position:relative;overflow:hidden;isolation:isolate;background:#fff;display:flex;align-items:center;min-height:clamp(580px,calc(100vh - 128px),780px)}
.hero-bg{position:absolute;top:0;bottom:0;right:0;width:66%;z-index:-1;overflow:hidden;background:#fff}
/* the photo sits on a white canvas extended to its left, its own left edge fading softly into white (no blur), so it can be shown large with the whole unit in view. Right-aligned, 146% of the hero height, nudged right so the fade never touches the unit */
.hero-bg img{position:absolute;right:-12%;top:50%;height:146%;width:auto;min-width:100%;max-width:none;object-fit:cover;object-position:100% 50%;transform:translateY(-57%);filter:saturate(1.08) brightness(1.04);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0.00) 36.4%,rgba(0,0,0,0.01) 38.7%,rgba(0,0,0,0.04) 41.0%,rgba(0,0,0,0.10) 43.2%,rgba(0,0,0,0.21) 45.5%,rgba(0,0,0,0.35) 47.8%,rgba(0,0,0,0.50) 50.0%,rgba(0,0,0,0.65) 52.3%,rgba(0,0,0,0.79) 54.6%,rgba(0,0,0,0.90) 56.9%,rgba(0,0,0,0.96) 59.2%,rgba(0,0,0,0.99) 61.4%,rgba(0,0,0,1.00) 63.7%);mask-image:linear-gradient(90deg,rgba(0,0,0,0.00) 36.4%,rgba(0,0,0,0.01) 38.7%,rgba(0,0,0,0.04) 41.0%,rgba(0,0,0,0.10) 43.2%,rgba(0,0,0,0.21) 45.5%,rgba(0,0,0,0.35) 47.8%,rgba(0,0,0,0.50) 50.0%,rgba(0,0,0,0.65) 52.3%,rgba(0,0,0,0.79) 54.6%,rgba(0,0,0,0.90) 56.9%,rgba(0,0,0,0.96) 59.2%,rgba(0,0,0,0.99) 61.4%,rgba(0,0,0,1.00) 63.7%)}
.hr-stars{display:flex;gap:2px}
.hr-stars svg{width:20px;height:20px;fill:#F5A524}
@media (min-width:1181px) and (max-width:1280px){.hero-bg img{height:120%;right:-164px}}
@media (min-width:1281px) and (max-width:1365px){.hero-bg img{height:132%;right:-185px}}
@media (min-width:1366px) and (max-width:1535px){.hero-bg img{right:-208px}}
@media (min-width:1700px){.hero-bg img{right:-4%}}
.hero-bg::after{content:"";position:absolute;inset:0;background:none}
.hero-inner{position:relative;width:100%;padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(44px,5vw,72px)}
.hero-copy{display:grid;justify-items:start;gap:20px;max-width:min(640px,54vw)}
/* Eyebrow: Google rating as a precise readout. Hairline cells, tracked caps, tabular figures. Figures typed in as of 23 Oct 2026: keep in step with his Google profile */
.hero-eyebrow{display:inline-flex;align-items:stretch;max-width:100%;border:1px solid #D5DCE4;background:#fff;color:var(--navy);text-decoration:none;line-height:1;transition:border-color .2s}
.hero-eyebrow>span{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;border-left:1px solid #D5DCE4;white-space:nowrap}
.hero-eyebrow>span:first-child{border-left:0}
.he-g{padding:0 11px!important;background:#F5F7F9}
.he-g img{display:block;width:20px;height:20px}
.he-score b{font-size:1.14rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
.he-stars{display:flex;gap:2px}
.he-stars svg{width:14px;height:14px;fill:#F4B400}
.he-data{gap:6px!important;font-size:.69rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#56677D}
.he-data b{font-size:.86rem;font-weight:700;letter-spacing:0;color:var(--navy);font-variant-numeric:tabular-nums lining-nums}
.he-go{padding:0 12px!important;color:var(--navy)}
.he-go svg{width:15px;height:15px;transition:transform .2s}
.hero-eyebrow:hover{border-color:var(--navy)}
.hero-eyebrow:hover .he-go svg{transform:translate(2px,-2px)}
.hero-eyebrow:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media (max-width:560px){.he-pct{display:none!important}}
@media (max-width:400px){.hero-eyebrow>span{padding:0 11px}.he-gtxt{display:none}}
.hero h1{font-size:clamp(2.4rem,4.4vw,3.7rem);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.hero h1 .hl{color:var(--leaf-ink)}
.hero .lead{font-size:1.14rem;max-width:30em;color:var(--soft)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.hero-ctas .btn{padding:1em 1.7em;font-size:1.05rem}
.hero-ctas .btn-line{background:rgba(255,255,255,.85)}
/* the hero's white background outranked .btn-line:hover, so hover turned the text white on white (fixed 31 Oct 2026) */
.hero-ctas .btn-line:hover{background:var(--navy);color:#fff}
.hero-note{margin:-6px 0 0;font-size:.9rem;color:var(--soft)}
.hero-proof{list-style:none;margin:10px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px 26px}
.hero-proof li{display:flex;align-items:center;gap:12px}
.hero-proof img{height:36px;width:auto;flex:none}
.hero-proof strong{font-size:1.9rem;font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--leaf-ink)}
.hero-proof strong small{font-size:.48em;font-weight:700;margin-left:2px;color:var(--soft)}
.hero-proof span{display:grid;font-size:.82rem;line-height:1.3;color:var(--soft)}
.hero-proof span b{color:var(--navy);font-size:.92rem}
@keyframes hcin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ticks{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;align-items:center;gap:12px;color:#E6EEF8;font-size:1rem}
.ticks li::before{content:"";width:22px;height:22px;flex:none;border-radius:50%;background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A3251' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.ticks b{color:#fff}

/* enquiry form card */
.qcard{position:relative;background:#fff;color:var(--text);border-radius:0;padding:clamp(20px,2.4vw,30px);box-shadow:0 30px 60px -34px rgba(15,37,71,.35),0 0 0 1px rgba(15,37,71,.08)}
.qcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.qcard h2{font-size:1.45rem;letter-spacing:-.01em}
.qstep{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.qsub{color:var(--soft);font-size:.95rem;margin-top:4px}
.qbar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0 18px}
.qbar i{height:4px;border-radius:0;background:var(--stone-2);transition:background-color .3s}
.qbar i.on{background:linear-gradient(90deg,var(--teal),var(--leaf))}
.qpane{border:0;margin:0;padding:0;min-width:0}
.qpane[hidden]{display:none}
.qpane legend{padding:0;margin-bottom:12px;font-weight:900;font-size:1.06rem;color:var(--navy)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opts.one{grid-template-columns:1fr}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opt span{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:1.5px solid var(--line);border-radius:0;background:#fff;font-weight:700;font-size:.97rem;line-height:1.3;color:var(--navy);cursor:pointer;user-select:none;transition:border-color .15s,background-color .15s,box-shadow .15s}
.opt svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.opt span:hover{border-color:var(--teal)}
.opt input:checked+span{border-color:var(--teal);background:#EAF7F5;box-shadow:inset 0 0 0 1px var(--teal)}
.opt input:focus-visible+span{outline:3px solid var(--teal-ink);outline-offset:2px}
.opt.wide{grid-column:1/-1}
.opt.wide span{min-height:48px;justify-content:center;color:var(--soft)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{display:grid;gap:5px;align-content:start}
.fld label{font-weight:700;font-size:.9rem;color:var(--navy)}
.fld .hint{font-size:.78rem;color:var(--soft);line-height:1.35}
.fld input,.fld select,.fld textarea{font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid #8A8F96;border-radius:0;background:#fff;color:var(--text);width:100%}
.fld textarea{min-height:104px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--teal);background:#fff}
.fld.bad input,.fld.bad select{border-color:#C0392B;background:#FFF8F7}
.err{display:none;font-size:.8rem;font-weight:700;color:#B03A2E}
.fld.bad .err{display:block}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.qback{background:none;border:0;padding:6px 0;font:inherit;font-weight:700;color:var(--soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.qback[hidden],.qnext[hidden]{display:none}
.qnext{flex:1;padding:1em 1.5em;font-size:1.05rem}
.qpick{margin:12px 0 0;font-size:.85rem;font-weight:700;color:#B03A2E}
.qhp{margin:-2px 0 14px;padding:10px 12px;background:var(--leaf-50);border-left:3px solid var(--leaf);font-size:.9rem;line-height:1.4;color:var(--text)}
.qhp a{font-weight:700;color:var(--leaf-ink)}
.qpick[hidden]{display:none}
.qsend{width:100%;margin-top:14px;font-size:1.05rem;padding:1em 1.5em}
.privacy{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.84rem;color:var(--soft)}
.privacy svg{width:16px;height:16px;flex:none;stroke:var(--teal-ink);fill:none;stroke-width:2}
.qcall{margin-top:16px;padding-top:14px;border-top:1px solid var(--stone-2);font-size:.95rem;color:var(--soft);text-align:center}
.qcall a{color:var(--navy);font-weight:900;text-decoration:none;white-space:nowrap}
.qdone{display:none}
.qcard.sent form{display:none}
.qcard.sent .qdone{display:grid;gap:14px}
.qdone h3{font-size:1.35rem;font-weight:900}
.qdone ol{margin:0;padding-left:1.2em;display:grid;gap:6px;color:var(--text)}
/* the quote pop-up */
.qmodal{border:0;padding:0;background:transparent;width:min(560px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.qmodal::backdrop{background:rgba(19,38,61,.72);backdrop-filter:blur(3px)}
.qmodal[open]{animation:qin .22s ease-out}
@keyframes qin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.qmodal .qcard{padding:clamp(22px,4vw,32px);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.qmodal .qcard-top{padding-right:40px}
.qclose{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:0;background:var(--mist);color:var(--navy);display:grid;place-items:center;cursor:pointer;z-index:2}
.qclose:hover{background:var(--stone-2)}
.qclose svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.qmodal[open]{animation:none}}
@media (max-width:480px){
  h1{font-size:2.05rem}
  .fields{grid-template-columns:1fr}
  .qcard{border-radius:0}
  .qcard-top{flex-direction:column-reverse;gap:6px}
  .qcard h2{font-size:1.35rem}
  .opts:not(.one) .opt:not(.wide) span{flex-direction:column;justify-content:center;text-align:center;gap:6px;min-height:86px;padding:12px 8px}
}
/* small phones: a little tighter so the first answers show above the call/quote bar */
@media (max-width:400px){
  h1{font-size:1.9rem}
  .opts:not(.one) .opt:not(.wide) span{min-height:78px}
}

/* hero on tablets, small laptops and phones: words on white first, then the heat pump photo fading in from the top. Side by side only from 1181px, where the photo has room beside the words */
@media (max-width:1180px){
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .hero-inner{order:1;position:static;padding-top:32px;padding-bottom:8px}
  .hero-copy{max-width:640px;gap:16px}
  .hero-bg{order:2;position:relative;left:auto;right:auto!important;top:auto;bottom:auto;z-index:0;width:auto;height:auto;aspect-ratio:4 / 4.6;max-height:680px}
  .hero-bg::after{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.86) 8%,rgba(255,255,255,.6) 16%,rgba(255,255,255,.32) 25%,rgba(255,255,255,.12) 34%,rgba(255,255,255,0) 44%)}
  .hero-bg img{right:0;top:50%;width:171.43%;height:auto;min-width:0;transform:translateY(-55%);-webkit-mask-image:none;mask-image:none}
}
@media (min-width:901px) and (max-width:1180px){.hero-bg{max-height:860px}}
@media (max-width:480px){
  .hero .lead{font-size:1.02rem}
  .hero-ctas{width:100%}
  .hero-ctas .btn{flex:1 1 auto}
  .hero-proof{gap:14px 20px}
  .hero-proof img{height:30px}
  .hero-proof strong{font-size:1.6rem}
}
@media (max-width:480px){
}
/* trust bar: one open row under the hero, matching its clean, centred look. No boxes or cell rules: a quiet label, then the manufacturer logos evenly spaced and sized by eye to the same visual weight.
   Heat Geek and Gas Safe are in the hero cards straight above, so they aren't repeated here */
.accred{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.accred-row{display:flex;align-items:center;gap:16px clamp(28px,4vw,64px);min-height:100px;padding-top:20px;padding-bottom:20px}
.accred-h{flex:none;display:flex;align-items:center;gap:10px;margin:0;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.35;color:var(--soft);max-width:14em}
.accred-h::before{content:"";width:14px;height:17px;flex:none;background:var(--motif) center/contain no-repeat}
.creds{flex:1;list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:20px clamp(24px,3.4vw,48px)}
.creds li{display:flex;align-items:center;justify-content:center;height:46px}
.creds img{display:block;width:auto;height:auto;max-width:160px}
.creds .c-vaillant img{max-height:42px}
.creds .c-viessmann img{max-height:30px}
.creds .c-intergas img{max-height:22px}
.creds .c-atag img{max-height:30px}
/* Panasonic: his installer status, in plain text until the official installer logo arrives */
.creds .c-panasonic{flex-direction:column;gap:1px;line-height:1.1}
.creds .pana{color:#0B2E6E;font-weight:700;font-size:1.12rem;letter-spacing:.03em}
.creds .c-panasonic small{color:var(--soft);font-size:.74rem;letter-spacing:.02em}
@media (max-width:980px){
  .accred-row{flex-direction:column;gap:14px;padding-top:22px;padding-bottom:24px}
  .accred-h{max-width:none}
  .creds{width:100%;flex-wrap:wrap;justify-content:center;gap:18px 36px}
}
@media (max-width:480px){
  .creds{gap:16px 28px}
  .creds li{height:40px}
  .creds .c-vaillant img{max-height:36px}
  .creds .c-viessmann img,.creds .c-atag img{max-height:26px}
  .creds .c-intergas img{max-height:19px}
}

/* why choose: four rows, each point with its words on one side and a visual that shows it on the other. Square, hairline-ruled, same technical feel as the hero eyebrow */
.why-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 48px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.why-head>div{display:grid;gap:14px}
.why-head .lead{max-width:19em;font-size:1.06rem}
.wrows{border-top:1px solid var(--line)}
.wrow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(28px,3.6vw,44px) 0;border-bottom:1px solid var(--line)}
.wrow:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.wrow:nth-child(even) .wr-copy{order:2}
.wr-copy{display:grid;gap:14px;justify-items:start}
.wr-n{display:inline-flex;align-items:center;gap:12px;font-size:.78rem;font-weight:700;letter-spacing:.16em;color:var(--leaf-ink);font-variant-numeric:tabular-nums lining-nums}
.wr-n::after{content:none}
.wr-n i{font-style:normal;display:inline-flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.16em}
.wr-n i::before{content:"";width:24px;height:1px;background:currentColor}
.wr-copy h3{font-size:clamp(1.45rem,2.2vw,1.8rem);font-weight:900;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
.wr-copy>p{color:var(--soft);font-size:1.05rem;max-width:30em}
.wr-proof{width:100%;max-width:30em;margin-top:4px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:6px}
.wk{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink)}
.wfact{color:var(--text)}
.wfact b{color:var(--navy)}
.wlink{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:2px;color:var(--leaf-ink);font-weight:700;text-decoration:none}
.wlink svg{width:16px;height:16px;transition:transform .2s}
.wlink:hover{text-decoration:underline;text-underline-offset:3px}
.wlink:hover svg{transform:translateX(3px)}
/* the photo panel shared by all four: a real install */
.wr-vis{position:relative;margin:0;border:1px solid #D5DCE4;background:var(--stone-2)}
.wv-photo{aspect-ratio:3 / 2;overflow:hidden}
.wv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wtag{position:absolute;z-index:1;top:16px;left:16px;max-width:calc(100% - 32px);background:rgba(255,255,255,.96);color:var(--navy);font-weight:700;font-size:.78rem;line-height:1.3;padding:6px 12px;border:1px solid #D5DCE4}
.wk-leaf{color:var(--leaf-ink)}
.wk-gap{margin-top:8px}
/* Bushey flow temperatures, as figures */
.temps{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:10px clamp(12px,2vw,20px);margin-top:4px}
.t{display:grid;gap:6px;align-content:start}
.t b{font-size:clamp(2.2rem,3.2vw,2.8rem);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.t b small{display:inline-block;font-size:.45em;font-weight:700;margin-left:3px;color:var(--soft)}
.t span{font-size:.86rem;line-height:1.4;color:var(--soft)}
.t.was b{color:#76839B;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:rgba(118,131,155,.8)}
.t.now b{color:var(--leaf-ink)}
.t-arrow{width:40px;height:20px;margin-top:12px;color:var(--leaf)}
@media (max-width:900px){
  .wrow{grid-template-columns:minmax(0,1fr);gap:24px}
  .wrow:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .wrow:nth-child(even) .wr-copy{order:0}
}
@media (max-width:560px){
  .t-arrow{width:28px}
  .wtag{top:12px;left:12px;font-size:.74rem}
}

/* featured project */
.case{background:var(--stone)}
.case-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:center}
.case-photo{position:relative;margin:0;border-radius:0;overflow:hidden;aspect-ratio:4/5;background:var(--stone-2)}
.case-photo img{width:100%;height:100%;object-fit:cover;object-position:35% 45%}
.case-photo figcaption{position:absolute;left:14px;bottom:14px;right:14px;font-size:.82rem;color:#fff;background:rgba(19,38,61,.72);backdrop-filter:blur(6px);padding:6px 10px;border-radius:0}
.case-copy{display:grid;gap:18px}
.spec b small.pre{margin:0 4px 0 0}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:0;overflow:hidden;margin-top:6px}
.spec{background:#fff;padding:16px 16px 14px;display:grid;gap:4px;align-content:start}
.spec b{font-weight:900;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1;color:var(--navy);letter-spacing:-.01em;white-space:nowrap}
.spec b small{font-size:.55em;font-weight:700;color:var(--soft);margin-left:2px}
.spec span{font-size:.84rem;line-height:1.4;color:var(--soft)}
.spec.hi{background:var(--leaf-50)}
.spec.hi b{color:var(--leaf-ink)}
.note{font-size:.84rem;color:var(--soft)}
.quote{margin:4px 0 0;padding:18px 20px;border-radius:0;background:#fff;border:1px solid var(--line);border-left:3px solid var(--leaf)}
.quote blockquote{margin:0;color:var(--text);font-size:1.04rem;line-height:1.6}
.quote figcaption{margin-top:10px;font-size:.88rem;color:var(--soft)}
.quote figcaption a{color:var(--teal-ink)}
.case-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
@media (max-width:980px){.case-grid{grid-template-columns:1fr}.case-photo{aspect-ratio:16/11}.specs{grid-template-columns:1fr 1fr}}


/* Heat Geek: a full-width band in Heat Geek black, the one dark section on the page, so their offer stands out. Their light logo on their black, pink accents from their palette */
.zd{position:relative;overflow:hidden;background:var(--hg-black);color:#E6E9ED;padding:clamp(64px,8vw,104px) 0}
.zd::before{content:"";position:absolute;right:-12%;top:-30%;width:60%;height:160%;background:radial-gradient(closest-side,rgba(231,33,122,.22),rgba(231,33,122,0));pointer-events:none}
.zd-panel{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:center}
.zd-badge{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 30px}
.zd-badge img{height:clamp(64px,7vw,88px);width:auto;flex:none}
.zd-badge p{display:grid;gap:2px;padding-left:22px;border-left:3px solid var(--hg-pink);color:#E6E9ED;font-size:1rem;line-height:1.35}
.zd-badge b{color:#fff;font-size:1.15rem}
.zd-panel .zd-title{color:#fff;margin:0 0 16px;font-size:clamp(2rem,3.4vw,2.9rem)}
.zd-side h4{color:#1F1F1F;font-size:1.25rem;margin:0}
.zd-main p{max-width:38em}
.zd-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.zd-list li{position:relative;padding-left:32px;color:#fff;font-weight:700}
.zd-list li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--hg-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.zd-side{background:#fff;color:#1F1F1F;border-radius:0;padding:clamp(22px,3vw,34px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.zd-side h3{color:#1F1F1F;font-size:1.25rem}
.zd-steps{list-style:none;margin:14px 0 22px;padding:0;counter-reset:z}
.zd-steps li{counter-increment:z;display:grid;grid-template-columns:40px 1fr;gap:2px 12px;padding:12px 0;border-top:1px solid var(--line)}
.zd-steps li::before{content:counter(z);grid-row:1/span 2;width:30px;height:30px;border-radius:50%;background:var(--hg-pink);color:#fff;display:grid;place-items:center;font-weight:900;font-size:.9rem}
.zd-steps b{color:#1F1F1F}
.zd-steps span{font-size:.93rem;line-height:1.45;color:#4A5260}
.zd-ctas{display:flex;flex-wrap:wrap;gap:10px}
.zd-side small{display:block;margin-top:14px;font-size:.82rem;color:#68707C;line-height:1.45}
@media (max-width:900px){.zd-panel{grid-template-columns:1fr}.zd-badge p{padding-left:16px}}

/* how it works */
/* How it works: the brand navy, one run of pipe from leaf to mint that fills as it scrolls into view, ending at the
   logo's leaf and flame. Without scroll-driven animation support (or with reduced motion) it shows filled and lit. */
.how{position:relative;overflow:hidden;overflow:clip;background:var(--mist);color:var(--soft)}   /* clip, not hidden: a hidden box is a scroll container and would stop the scroll-driven fill */
.how::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--leaf),#00A89A 55%,var(--mint))}
.how::after{content:"";position:absolute;right:-70px;top:-50px;width:360px;height:432px;background:var(--motif-line) center/contain no-repeat;opacity:.9;pointer-events:none}
.how .wrap{position:relative;z-index:1}
.how-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24em);gap:20px 56px;align-items:end;margin-bottom:clamp(40px,5vw,60px)}
.how-top .head{margin:0}
.how-lead{margin:0;color:var(--text);font-size:1.05rem;line-height:1.55;padding-left:18px;border-left:3px solid var(--leaf)}
.how-run{position:relative}
.how-pipe{position:absolute;left:0;right:40px;top:27px;height:2px;background:#D5DCE4}
.how-pipe i{position:absolute;inset:0;background:linear-gradient(90deg,var(--leaf),#00A89A 60%,var(--mint));transform-origin:left center}
.how-pipe svg{position:absolute;right:-40px;top:50%;width:30px;height:36px;transform:translateY(-54%)}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:28px;position:relative}
.how-steps li{display:grid;gap:10px;align-content:start;justify-items:start}
.hs-node{width:56px;height:56px;display:grid;place-items:center;margin-bottom:8px;background:var(--leaf-btn);border:1.5px solid var(--leaf);color:#fff;font-weight:800;font-size:1.02rem;letter-spacing:.04em;box-shadow:0 0 0 8px var(--mist)}
.how-steps h3{margin:0;color:var(--navy);font-size:1.15rem}
.how-steps p{margin:0;color:var(--soft);font-size:.97rem;line-height:1.6;max-width:22em}
.after-steps{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(36px,4vw,52px);padding-top:24px;border-top:1px solid #D5DCE4}
.after-steps p{margin:0;color:var(--soft)}
@keyframes how-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes how-lit{from{background:#fff;border-color:#C3CBD5;color:var(--navy)}to{background:var(--leaf-btn);border-color:var(--leaf);color:#fff}}
@supports (animation-timeline:view()){
  .how-pipe i{animation:how-fill linear both;animation-timeline:view();animation-range:cover 12% cover 46%}
  .hs-node{animation:how-lit linear both;animation-timeline:view()}
  .how-steps .hs-node{animation-range:cover var(--lit,12%) cover calc(var(--lit,12%) + 3%)}
}
@media (max-width:900px){
  .how-top{grid-template-columns:minmax(0,1fr);align-items:start}
  .how-pipe{left:27px;right:auto;top:28px;bottom:46px;width:2px;height:auto}
  .how-pipe i{transform-origin:center top;animation:none!important}
  .how-pipe svg{right:auto;top:auto;left:50%;bottom:-46px;transform:translateX(-50%)}
  .how-steps{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:52px}
  .how-steps li{grid-template-columns:56px minmax(0,1fr);gap:4px 20px;padding-bottom:30px}
  .hs-node{grid-row:1/span 3;margin:0}
  .how-steps li>:not(.hs-node){grid-column:2}
  .how-steps li .hs-node{animation-range:cover 18% cover 24%}
  .how-pipe i{background:linear-gradient(180deg,var(--leaf),#00A89A 60%,var(--mint))}
}

/* meet Kirk */
.kirk-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:center}
.kirk-photo{min-height:520px;border-radius:0}
.kirk-copy{display:grid;gap:18px;max-width:40em}
.pull{font-size:clamp(1.25rem,2.1vw,1.55rem);font-weight:700;line-height:1.35;color:var(--navy);padding-left:20px;border-left:4px solid var(--leaf)}
.fact{font-size:1.06rem}
.fact b{color:var(--navy)}
.motto-line{margin-top:-6px;font-weight:700;font-size:1.05rem;letter-spacing:.01em;color:var(--leaf-ink)}
.motto-line,.motto{display:flex;align-items:center;gap:9px}
.motto-line::before,.motto::before{content:"";width:15px;height:18px;flex:none;background:var(--motif) center/contain no-repeat}
.sign{font-weight:900;color:var(--navy)}
.sign span{display:block;color:var(--soft);font-weight:400;font-size:.95rem}
@media (max-width:860px){.kirk-grid{grid-template-columns:1fr}.kirk-photo{min-height:340px}}
/* Kirk, home page (24 Oct 2026): photo with a nameplate, the paragraph split into three points, qualifications
   grouped under the logo's motif (flame for gas, leaf for heat pumps, the whole mark for manufacturers) */
.kirk-media{display:grid;align-self:start}
.kirk-media .kirk-photo{min-height:440px}
.kirk-plate{position:relative;overflow:hidden;background:var(--night);color:#C9D4E2;padding:20px 22px 22px;display:grid;gap:16px;border-top:3px solid var(--leaf)}
.kirk-plate::after{content:"";position:absolute;right:-22px;top:-26px;width:84px;height:100px;background:var(--motif-line) center/contain no-repeat;opacity:.1;pointer-events:none}
.kirk-plate>*{position:relative;z-index:1}
.kp-name{margin:0;display:grid;gap:2px}
.kp-name b{color:#fff;font-size:1.18rem;font-weight:800}
.kp-name span{font-size:.93rem;line-height:1.4}
.kp-stats{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kp-stats li{display:grid;gap:2px;align-content:start}
.kp-stats li+li{padding-left:16px;border-left:1px solid rgba(255,255,255,.14)}
.kp-stats b{color:#fff;font-size:1.55rem;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.kp-stats span{font-size:.88rem;line-height:1.35}
.kirk-intro{font-size:1.06rem;color:var(--text)}
.kirk-points{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kirk-points li{position:relative;display:grid;gap:2px;padding:8px 0 8px 18px}
.kirk-points li::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;background:#CDEDEA}
.kirk-points b{color:var(--navy);font-size:1.04rem;font-weight:800}
.kirk-points span{color:var(--soft);font-size:.98rem;line-height:1.55}
.quals{display:grid;gap:16px}
.qp-k{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink)}
.qwide{margin-top:clamp(44px,5.5vw,72px);padding:clamp(22px,3vw,34px);background:linear-gradient(90deg,var(--leaf),#00A89A 55%,var(--navy)) top/100% 3px no-repeat,var(--mist)}
.qgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.qstack{margin-top:6px;justify-self:stretch;width:100%}
.qstack .qgroups{grid-template-columns:minmax(0,1fr);gap:24px}
.qg-h{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:1.15rem;font-weight:800;color:var(--navy)}
.qg-h svg{width:17px;height:20px;flex:none}
.qg ul{list-style:none;margin:0;padding:0}
.qg li{position:relative;padding:9px 0 9px 16px;border-top:1px solid var(--line);font-size:.95rem;line-height:1.42;color:var(--text)}
.qg li::before{content:"";position:absolute;left:0;top:calc(9px + .52em);width:6px;height:6px;background:var(--leaf)}
.qg-flame li::before{background:#00A89A}
.qg-both li::before{background:var(--navy)}
.qg li small{display:block;margin-top:1px;color:var(--soft);font-size:.83rem;font-weight:600}
@media (max-width:980px){.qgroups{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.kirk-media .kirk-photo{min-height:320px}}

/* our work: a rotating gallery. One large photo at a time with its description; thumbnails to choose; moves on by itself and pauses on hover or focus */
.gv{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3.4vw,48px);align-items:stretch}
/* justify-self:stretch and min-width:0 keep the photo to its column. A grid item with an aspect ratio otherwise takes its width from its stretched height (the height of the thumbnail column), and the photo grew over the caption and thumbnails (James, 25 Oct 2026) */
.gv-stage{position:relative;aspect-ratio:5 / 4;justify-self:stretch;min-width:0;border-radius:0;overflow:hidden;background:var(--stone-2)}
.gv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .8s ease,transform 7s ease-out}
.gv-img.is-on{opacity:1;transform:scale(1)}
.gv-count{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.94);color:var(--soft);font-size:.82rem;font-weight:600;padding:5px 10px;border-radius:0;font-variant-numeric:tabular-nums}
.gv-count b{color:var(--leaf-ink)}
.gv-side{display:flex;flex-direction:column;gap:22px;justify-content:center}
.gv-cap{margin:0;display:grid;gap:8px;min-height:7.4em;align-content:start}
.gv-cap b{font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:900;line-height:1.2;letter-spacing:-.01em;color:var(--navy)}
.gv-cap span{color:var(--soft);font-size:1.04rem;line-height:1.6}
.gv-cap.swap{animation:gvcap .55s ease}
@keyframes gvcap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 8 photos: two full rows of four (James, 25 Oct 2026: rows of three left a gap and made the side taller than the photo) */
.gv-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gv-th{position:relative;aspect-ratio:4 / 3;padding:0;border:0;border-radius:0;overflow:hidden;background:var(--stone-2);cursor:pointer;outline-offset:3px}
.gv-th span{position:absolute;inset:0;background-size:cover;transition:transform .4s,filter .3s;filter:saturate(.75) brightness(.92)}
.gv-th:hover span{transform:scale(1.05);filter:none}
.gv-th[aria-selected="true"] span{filter:none}
.gv-th::after{content:"";position:absolute;inset:0;border-radius:0;box-shadow:inset 0 0 0 0 var(--leaf);transition:box-shadow .2s}
.gv-th[aria-selected="true"]::after{box-shadow:inset 0 0 0 3px var(--leaf)}
.gv-th i{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--leaf);transform:scaleX(0);transform-origin:left}
.gv.auto .gv-th[aria-selected="true"] i{animation:gvbar var(--gv-ms,6000ms) linear forwards}
.gv.paused .gv-th[aria-selected="true"] i{animation-play-state:paused}
@keyframes gvbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gv-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gv-btn{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:0;background:#fff;color:var(--navy);cursor:pointer;transition:border-color .2s,color .2s}
.gv-btn:hover{border-color:var(--leaf);color:var(--leaf-ink)}
.gv-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gv-hint{margin-left:6px;font-size:.88rem;color:var(--soft)}
@media (prefers-reduced-motion:reduce){.gv-img{transition:opacity .2s;transform:none!important}}
@media (max-width:900px){.gv{grid-template-columns:minmax(0,1fr)}.gv-cap{min-height:0}.gv-stage{aspect-ratio:4 / 3.4}}
@media (max-width:480px){.gv-thumbs{gap:6px}.gv-hint{flex-basis:100%;margin:2px 0 0}}

/* FAQ */
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px;font-weight:900;font-size:1.1rem;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:28px;height:28px;flex:none;border-radius:0;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C4472' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 4px 22px;color:var(--soft);max-width:44em}
.faq .ans p+p{margin-top:10px}

/* closing enquiry */
.contact{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--leaf-50),#F7FBF8 60%,#fff)}
.contact .wm{position:absolute;right:-60px;bottom:-90px;width:440px;height:auto;opacity:.09;pointer-events:none}
.contact .wrap{position:relative;z-index:1}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.contact .lead{margin-top:16px}
.facts{list-style:none;margin:30px 0 0;padding:0}
.facts li{padding:15px 0;border-top:1px solid rgba(29,117,51,.16);display:grid;grid-template-columns:100px 1fr;gap:12px}
.facts li:last-child{border-bottom:1px solid rgba(29,117,51,.16)}
.facts .k{color:var(--leaf-ink);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding-top:4px}
.facts a{color:var(--navy);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.facts a:hover{text-decoration:underline}
.cform h3{font-size:1.35rem;font-weight:900;margin-bottom:16px}
.cform .fld.full{grid-column:1/-1}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){.facts li{grid-template-columns:1fr;gap:2px}}

/* footer: frameless logo */
.foot{padding:56px 0 30px;background:#fff;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.foot h4{margin:0 0 12px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:var(--navy);text-decoration:none;font-size:.95rem}
.foot a:hover{color:var(--teal-ink)}
.foot .logo img{height:54px}
.foot .motto{margin-top:14px;font-weight:700;color:var(--navy);font-size:1rem}
.foot .motto+.areas{margin-top:6px}
.foot .areas{margin-top:14px;color:var(--soft);font-size:.92rem;max-width:22em}
.foot-hg{display:flex;align-items:center;gap:12px;margin-top:20px;max-width:24em}
.foot-hg img{height:34px;width:auto;flex:none}
.foot-hg span{font-size:.84rem;line-height:1.35;color:var(--soft)}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--soft);font-size:.84rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}

/* phones: call and quote always one tap away */
.mbar{display:none}
@media (max-width:720px){
  .mbar{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .mbar .btn{padding:.8em}
  .mbar{transition:transform .2s}
  body.typing .mbar{transform:translateY(110%)}
  body{padding-bottom:74px}
}

/* background motif: the leaf-flame as a pale outline peeking into the quote form and the Bushey quote, cut off by the edge */
.qcard{background-color:#fff;background-image:var(--motif-line);background-repeat:no-repeat;background-position:right -52px top -60px;background-size:190px auto}
.quote{background-color:#fff;background-image:var(--motif-line);background-repeat:no-repeat;background-position:right -26px bottom -78px;background-size:150px auto}
/* motto bar: Kirk's motto above the header, beside the logo on every page, without adding it back into the logo */
.motto-bar{background:var(--leaf-50);border-bottom:1px solid #DCEBE0;color:var(--leaf-ink)}
.mb-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px}
.mb-motto{display:flex;align-items:center;gap:9px;margin:0;font-size:.82rem;font-weight:700;letter-spacing:.01em}
.mb-motto::before{content:"";width:12px;height:15px;flex:none;background:var(--motif) center/contain no-repeat}
.mb-areas{display:flex;align-items:center;gap:7px;margin:0;font-size:.8rem;font-weight:600;color:var(--navy)}
.mb-areas svg{width:14px;height:14px;fill:none;stroke:var(--leaf-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.mb-areas{display:none}.mb-row{min-height:32px;justify-content:center}.mb-motto{font-size:.78rem}}

/* Heat Geek band under the header, on every page (James, 25 Oct 2026: Heat Geek "extremely prominent"). Heat Geek's
   black, their "In partnership with Heat Geek" lockup and logo as supplied, with clear space (brand rules in the brief).
   The button is a touch deeper than Heat Geek pink (#E7217A) so its white text passes contrast (AA). */
.hg-band{background:var(--hg-black);color:#fff}
.hgb-row{display:flex;align-items:center;gap:10px 26px;min-height:56px;padding-top:7px;padding-bottom:7px}
.hgb-lockup{display:block;height:32px;width:auto;flex:none}
.hgb-logo{display:none;height:22px;width:auto;flex:none}
.hgb-msg{flex:1;min-width:0;margin:0;font-size:.88rem;font-weight:600;line-height:1.3;color:#E6E9ED}
.hgb-msg a{color:inherit;text-decoration:none}
.hgb-msg b{color:#fff;font-weight:800}
.hgb-msg a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hgb-msg small{display:block;margin-top:1px;font-size:.72rem;font-weight:500;color:#A9AFB8}
.hgb-cta{flex:none;display:inline-flex;align-items:center;padding:8px 16px;background:#D81B70;color:#fff;font-size:.86rem;font-weight:800;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .15s}
.hgb-cta:hover{background:#BC145F}
.hg-band a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.mbo-short,.mbo-phone,.hgb-cta-s{display:none}
@media (max-width:1240px){.mbo-long{display:none}.mbo-short{display:inline}}
/* tablets and phones: the smaller Heat Geek logo, a short line and a short button, on one compact row */
@media (max-width:980px){
  .hgb-row{justify-content:space-between;gap:10px;min-height:46px;padding-top:6px;padding-bottom:6px}
  .hgb-lockup{display:none}.hgb-logo{display:block}
  .hgb-msg{font-size:.8rem;text-wrap:balance}
  .hgb-msg b,.hgb-msg small,.mbo-short{display:none}.mbo-phone{display:inline}
  .hgb-cta{padding:6px 11px;font-size:.78rem}
  .hgb-cta-l{display:none}.hgb-cta-s{display:inline}
}
@media (max-width:420px){.hgb-msg{font-size:.74rem}.hgb-cta{padding:6px 10px;font-size:.74rem}}

/* ======================================================================== the full site (23 Oct 2026) */

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;font-weight:700;padding:10px 16px;text-decoration:none}
.skip:focus{top:12px}
/* spam trap: hidden from people, left for bots */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.opt-l{font-weight:500;color:var(--soft)}
.qfail{margin-top:12px;font-size:.88rem;font-weight:700;color:#B03A2E}
.qfail[hidden]{display:none}
.qfail a{color:#B03A2E}
.pv-note{font-size:.84rem;color:var(--soft);border-top:1px solid var(--line);padding-top:10px}
.qsend.busy{opacity:.7;cursor:progress}
.privacy a{color:var(--soft);margin-left:4px}
/* the page you're on, in the menus */
.nav-link[aria-current="page"],.nav-link.is-cur{color:var(--teal-ink);box-shadow:inset 0 -3px 0 var(--leaf)}
.mlink[aria-current="page"]{background:var(--leaf-50)}
.mnav-list a[aria-current="page"]{color:var(--teal-ink)}

/* breadcrumbs */
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0;padding:0;font-size:.84rem;font-weight:600;color:var(--soft)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"";width:5px;height:5px;border-top:1.5px solid #AEB6C2;border-right:1.5px solid #AEB6C2;transform:rotate(45deg)}
.crumbs a{color:var(--soft);text-decoration:none}
.crumbs a:hover{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--navy)}

/* page hero (inner pages): words left, one of Kirk's photos right, in a hairline frame */
.phero{background:#fff;border-bottom:1px solid var(--line)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(24px,3.4vw,44px);padding-bottom:clamp(40px,5vw,72px)}
.phero-copy{display:grid;justify-items:start;gap:18px}
.phero h1{font-size:clamp(2.1rem,3.8vw,3.2rem);line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.phero h1 .hl{color:var(--leaf-ink)}
.phero .lead{font-size:1.12rem;max-width:33em}
.phero .hero-proof{margin-top:6px}
.phero-ph{position:relative;margin:0;aspect-ratio:4 / 3.5;overflow:hidden;border:1px solid #D5DCE4;background:var(--stone-2)}
.phero-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero-ph.slot{aspect-ratio:4 / 3.5;border-style:dashed}
@media (max-width:900px){.phero-grid{grid-template-columns:minmax(0,1fr)}.phero-ph{aspect-ratio:4 / 3}}
@media (max-width:480px){.phero .hero-ctas{width:100%}.phero .hero-ctas .btn{flex:1 1 auto}}
/* a plain page head (contact, legal, 404) */
.page-head{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#FAFBFC)}
.page-head .wrap{display:grid;justify-items:start;gap:16px;padding-top:clamp(24px,3.4vw,44px);padding-bottom:clamp(36px,4.5vw,60px)}
.page-head h1{font-size:clamp(2.1rem,3.6vw,3rem);letter-spacing:-.025em;text-wrap:balance}

/* photos in a hairline frame, with a tag */
.pic{position:relative;margin:0;border:1px solid #D5DCE4;background:var(--stone-2);overflow:hidden;aspect-ratio:3 / 2}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pic.tall{aspect-ratio:4 / 5}
.pic.square{aspect-ratio:1}
.pic.wide{aspect-ratio:16 / 9}

/* words beside a photo */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.rev>:first-child{order:2}
.split-copy{display:grid;gap:16px;justify-items:start}
.split-copy h2{text-wrap:balance}
.split-copy>p:not(.label){color:var(--soft);font-size:1.05rem;max-width:34em}   /* not the eyebrow label (hierarchy check, 25 Oct) */
.split-copy>p b,.split-copy>p strong{color:var(--navy)}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.split.rev>:first-child{order:0}}

/* long text */
.prose{max-width:44em;display:grid;gap:14px}
.prose h2{margin-top:18px}
.prose h3{margin-top:10px;font-size:1.25rem}
.prose p,.prose li{color:var(--text)}
.prose ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.prose a{font-weight:700}

/* numbered points in a ruled sheet */
.points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));border-top:1px solid var(--navy)}
.point{display:grid;gap:10px;align-content:start;padding:26px clamp(18px,2.4vw,30px) 28px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.point:nth-child(3n){border-right:0}
.points.p4{--cols:2}
.points.p4 .point:nth-child(3n){border-right:1px solid var(--line)}
.points.p4 .point:nth-child(2n){border-right:0}
.point .pn{font-size:.76rem;font-weight:700;letter-spacing:.16em;color:var(--leaf-ink);font-variant-numeric:tabular-nums lining-nums}
.point h3{font-size:1.2rem;font-weight:800}
.point p{color:var(--soft);font-size:.98rem}
.point p b{color:var(--navy)}
@media (max-width:900px){.points{--cols:1}.point,.points.p4 .point{border-right:0!important;padding-left:0;padding-right:0}}

/* ticks with the leaf-flame */
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.checks.one{grid-template-columns:1fr}
.checks li{position:relative;padding-left:24px;line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:.2em;width:13px;height:16px;background:var(--motif) center/contain no-repeat}
.checks li b{color:var(--navy)}
@media (max-width:620px){.checks{grid-template-columns:1fr}}

/* a note with a green edge */
.callout{padding:18px 22px;border:1px solid var(--line);border-left:3px solid var(--leaf);background:#fff;color:var(--text);max-width:44em}
.callout b{color:var(--navy)}

/* big figures */
.figs{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.fig{background:#fff;padding:20px 22px;display:grid;gap:6px;align-content:start}
.fig b{font-size:clamp(1.8rem,2.8vw,2.4rem);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.fig b small{font-size:.5em;font-weight:700;color:var(--soft);margin-left:3px}
.fig span{font-size:.9rem;color:var(--soft);line-height:1.45}
.fig.hi{background:var(--leaf-50)}.fig.hi b{color:var(--leaf-ink)}
@media (max-width:700px){.figs{--cols:1}}

/* other services, at the foot of a service page */
.rel-band{background:#FAFBFC}
.rels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.rel{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 20px;grid-template-areas:"i b go" "i s go";gap:2px 14px;align-items:center;padding:16px 18px;background:#fff;border:1px solid var(--line);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.rel:hover{border-color:var(--leaf);box-shadow:inset 3px 0 0 var(--leaf)}
.rel .mi{grid-area:i;width:44px;height:44px;display:grid;place-items:center;background:#EAF7F5;color:var(--teal-ink)}
.rel .mi svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rel b{grid-area:b;color:var(--navy);font-size:1rem;line-height:1.3;align-self:end}
.rel small{grid-area:s;color:var(--soft);font-size:.86rem;line-height:1.35;align-self:start}
.rel>svg{grid-area:go;width:18px;height:18px;color:#AEB6C2;transition:transform .2s,color .2s}
.rel:hover>svg{color:var(--leaf-ink);transform:translateX(3px)}

/* ---------- Google reviews: the score card, review cards and the walls they sit in ---------- */
.revs{background:#F5F7F8}
main>section.band.revs{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.revs-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.55fr);gap:clamp(32px,5vw,72px);align-items:start}
.rsum{position:sticky;top:24px;display:grid;gap:18px;justify-items:start}
.rsum h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.rsum .lead{font-size:1.04rem}
.rsum-note{font-size:.82rem;color:var(--soft)}
.gscore{display:grid;gap:14px;width:100%;max-width:400px;background:#fff;border:1px solid #D5DCE4;padding:20px 22px 22px;text-decoration:none;color:var(--navy);transition:border-color .2s}
.gscore:hover{border-color:var(--navy)}
.gscore:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.gs-top{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#56677D}
.gs-top img{width:30px;height:30px;flex:none}
.gs-go{margin-left:auto;display:flex;color:var(--navy)}
.gs-go svg{width:16px;height:16px;transition:transform .2s}
.gscore:hover .gs-go svg{transform:translate(2px,-2px)}
.gs-main{display:flex;align-items:center;gap:16px}
.gs-main b{font-size:clamp(3.2rem,5vw,4rem);font-weight:800;line-height:.9;letter-spacing:-.04em;font-variant-numeric:lining-nums}
.gs-stars{display:flex;gap:3px}
.gs-stars svg{width:clamp(22px,2.2vw,27px);height:clamp(22px,2.2vw,27px);fill:#F4B400}
.gs-count{font-size:.92rem;color:var(--soft)}
.gs-count b{color:var(--navy)}
.gs-bars{display:grid;gap:7px;padding-top:14px;border-top:1px solid var(--line)}
.gs-row{display:grid;grid-template-columns:12px minmax(0,1fr) 20px;align-items:center;gap:10px;font-size:.78rem;font-weight:700;color:#56677D}
.gs-row i{font-style:normal;font-variant-numeric:tabular-nums lining-nums}
.gs-row i:last-child{text-align:right}
.gs-bar{position:relative;height:6px;background:#E9EDF1}
.gs-bar span{position:absolute;left:0;top:0;bottom:0;background:#F4B400}
.rv-ctas{display:flex;flex-wrap:wrap;gap:10px}
.rv-ctas .btn svg{width:15px;height:15px}
.rwall{column-count:2;column-gap:20px}
.rwall-3{column-count:3}
.rcard{position:relative;display:grid;gap:12px;break-inside:avoid;margin:0 0 20px;background:#fff;border:1px solid #DDE3E9;padding:22px 24px 24px;transition:border-color .2s}
.rcard:hover{border-color:#C5CED8}
.rc-head{display:flex;align-items:center;gap:12px}
.rc-av{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.02rem}
.rc-who{display:grid;line-height:1.3}
.rc-who b{color:var(--navy);font-size:1rem}
.rc-who span{color:var(--soft);font-size:.82rem}
.rc-g{margin-left:auto;align-self:flex-start;width:20px;height:20px;flex:none}
.rc-stars{display:flex;gap:2px}
.rc-stars svg{width:17px;height:17px;fill:#F4B400}
.rc-text{margin:0;color:var(--text);font-size:1rem;line-height:1.65}
.rc-text p+p{margin-top:10px}
.rcard.clamp .rc-text{max-height:9.9em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.rc-toggle{justify-self:start;background:none;border:0;padding:0;font:inherit;font-weight:700;font-size:.9rem;color:var(--teal-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rv-all{margin-top:4px;width:100%}
@media (min-width:721px){.rv-all{display:none!important}}
@media (max-width:1100px){.rwall-3{column-count:2}}
@media (max-width:980px){.revs-grid{grid-template-columns:minmax(0,1fr)}.rsum{position:static}}
@media (max-width:720px){.rwall,.rwall-3{column-count:1}.rwall.folded .rc-more{display:none}.rcard{padding:20px}}
/* three reviews in a row on service pages */
.rs-top{display:flex;justify-content:space-between;align-items:flex-end;gap:18px 28px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.rs-top .head{margin:0}
.rs-score{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid #D5DCE4;background:#fff;color:var(--navy);text-decoration:none;font-size:.86rem;font-weight:600;transition:border-color .2s}
.rs-score:hover{border-color:var(--navy)}
.rs-score b{font-size:1.15rem;font-weight:800}
.rs-score>svg{width:16px;height:16px;transition:transform .2s}
.rs-score:hover>svg{transform:translateX(3px)}
.rwall-row{column-count:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.rwall-row .rcard{margin:0}
.rs-foot{margin-top:22px}
@media (max-width:980px){.rwall-row{grid-template-columns:minmax(0,1fr)}}
.rstrip{background:#F5F7F8}

/* projects page: every photo with its description */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}
.pg{margin:0;display:grid;gap:12px;align-content:start}
.pg .pic{aspect-ratio:4 / 3}
.pg figcaption{display:grid;gap:4px;font-size:.95rem;line-height:1.5;color:var(--soft)}
.pg figcaption b{color:var(--navy);font-size:1.02rem}
@media (max-width:980px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pgrid{grid-template-columns:minmax(0,1fr)}}

/* areas */
.area-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));border-top:1px solid var(--navy)}
.area{display:grid;align-content:start;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:26px 24px 28px 0;border-bottom:1px solid var(--line);scroll-margin-top:16px}
.area .mi{grid-row:1/span 3;width:44px;height:44px;display:grid;place-items:center;background:var(--leaf-50);color:var(--leaf-ink)}
.area .mi svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.area h3{font-size:1.4rem}
.area p{color:var(--soft)}
.area p b{color:var(--navy)}
.area:target{background:linear-gradient(90deg,var(--leaf-50),#fff 70%)}

/* about: company details as a datasheet */
.dsheet{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--navy);max-width:44em}
.dsheet div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.dsheet dt{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-ink);padding-top:3px}
.dsheet dd{margin:0;color:var(--text)}
@media (max-width:560px){.dsheet div{grid-template-columns:1fr;gap:2px}}

/* section spacing helpers */
.band-tint{background:#FAFBFC}
.mt-l{margin-top:clamp(28px,4vw,48px)}
.center-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(28px,4vw,40px)}
.err-404{padding:clamp(48px,8vw,120px) 0}
/* the featured review, large, at the top of the home reviews */
.rfeat{position:relative;display:grid;gap:20px;margin:0 0 20px;padding:clamp(26px,3.4vw,40px);background:#fff;border:1px solid #DDE3E9;border-top:3px solid var(--leaf)}
.rf-q{width:44px;height:36px;fill:var(--leaf)}
.rfeat blockquote{margin:0;color:var(--navy);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;line-height:1.4;letter-spacing:-.01em;text-wrap:pretty}
.rfeat .rc-head{padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.rfeat .rc-stars{margin-left:auto}
.rfeat .rc-g{margin-left:14px;align-self:center;width:24px;height:24px}
.rsum h2{font-size:clamp(2rem,2.9vw,2.5rem);text-wrap:balance}
.revs-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.5fr)}
@media (max-width:980px){.revs-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.rfeat .rc-stars{margin-left:0;flex-basis:100%;order:3}.rfeat .rc-g{margin-left:auto}}
.pic.phero-ph{aspect-ratio:4 / 3.5}
@media (max-width:900px){.pic.phero-ph{aspect-ratio:4 / 3}}
.slot.phero-ph{min-height:0}
.split .slot.kirk-photo{min-height:420px}
/* about: Kirk's own words, the logos he's accredited for */
.about-q{max-width:900px;margin:0 auto}
.about-q .label{font-size:.78rem}
.about-q .rc-head{justify-content:space-between}
.about-q .rc-head .wlink{margin:0}
.about-hg{margin:0}
.about-hg img{height:72px;width:auto}
.about-hg p{color:var(--soft);border-left-color:var(--leaf)}
.about-hg b{color:var(--navy)}
.about-logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px 32px;padding-top:24px;border-top:1px solid var(--line)}
.about-logos img{height:auto;width:auto;max-height:40px;max-width:150px}
.about-logos img[alt^="Intergas"]{max-height:22px}
.about-logos img[alt^="Viessmann"],.about-logos img[alt^="ATAG"]{max-height:28px}
.pana-l{display:grid;line-height:1.1}
.pana-l .pana{color:#0B2E6E;font-weight:700;font-size:1.12rem;letter-spacing:.03em}
.pana-l small{color:var(--soft);font-size:.74rem}
/* reviews page: the score card sits where the photo would */
.gscore.rv-hero{justify-self:end;max-width:440px;padding:26px 28px 28px}
@media (max-width:900px){.gscore.rv-hero{justify-self:start}}
.revs .wrap>.rwall-3{margin-bottom:-20px}
@media (max-width:900px){.points,.points.p4{--cols:1}}
.slot.phero-ph,.slot.kirk-photo{background:repeating-linear-gradient(135deg,#EEF1F4 0 12px,#F7F9FB 12px 24px);border:1.5px dashed #C3CBD5}
/* small laptops: the full menu still fits beside the phone number */
@media (min-width:1100px) and (max-width:1279px){.nav-link{padding:9px 8px}.head-row{gap:16px}.head-cta{gap:14px}.head-cta .btn{padding:.85em 1.1em}}
/* narrow phones (320 to 380px) */
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.prose a,.dsheet a,.callout a{overflow-wrap:anywhere}
@media (max-width:380px){.head-row{gap:12px}.logo img{height:42px}.menu-btn{padding:8px 12px}}
.phero-copy,.page-head .wrap{grid-template-columns:minmax(0,1fr)}
@media (max-width:380px){.hero-eyebrow>span{padding:0 9px}.he-go{display:none!important}.hero-eyebrow{max-width:100%;overflow:hidden}}
.split-copy{grid-template-columns:minmax(0,1fr)}
@media (max-width:400px){.btn{white-space:normal;text-align:center}}
.hero-eyebrow>span{flex:none}
@media (max-width:1180px){.phero .he-pct{display:none!important}}
/* home reviews: the score card above the reviews until there's room for both side by side */
@media (max-width:1180px){
  .revs-grid{grid-template-columns:minmax(0,1fr)}
  .rsum{position:static;grid-template-columns:minmax(0,1fr) minmax(0,400px);column-gap:48px;align-items:start}
  .rsum>*{grid-column:1}
  .rsum .gscore{grid-column:2;grid-row:1 / span 5}
}
@media (max-width:820px){.rsum{grid-template-columns:minmax(0,1fr)}.rsum .gscore{grid-column:1;grid-row:auto}}
/* about: Kirk's story beside his photo */
.kirk-split{align-items:start}
.pic.kirk-photo{aspect-ratio:auto}
.kirk-split>.pic.kirk-photo{position:sticky;top:24px;min-height:560px}
.kirk-split>.slot{position:sticky;top:24px;min-height:520px}
.kirk-open{font-size:1.14rem;color:var(--navy)!important;font-weight:600;line-height:1.55}
@media (max-width:900px){.kirk-split>.slot{position:static;min-height:340px}.kirk-split>.pic.kirk-photo{position:static;min-height:0;aspect-ratio:4 / 5}}
.lead .by{display:block;margin-top:8px;font-size:.9rem;font-weight:700;color:var(--navy)}
/* quote pop-up: "Not sure yet" sits beside Servicing, in a quieter style */
.opt.soft span{justify-content:center;color:var(--soft)}

/* ---- Advice (23 Oct 2026): article cards, the index, and the article page ---- */
.agrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.acard{position:relative;display:grid;gap:10px;align-content:start;padding:0 0 18px;background:#fff;border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.acard:hover{border-color:#C9D2DC;box-shadow:0 10px 26px -18px rgba(15,37,71,.45)}
.acard .pic{aspect-ratio:16 / 10;border:0;border-bottom:1px solid var(--line)}
.acard>:not(.pic){margin:0 20px}
.acard-k{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);margin-top:6px!important}
.acard-h{font-size:1.2rem;line-height:1.3}
.agrid-all .acard-h{font-size:1.3rem}
.acard-link{color:var(--navy);text-decoration:none}
.acard-link::after{content:"";position:absolute;inset:0;z-index:1}
.acard-link:focus-visible{outline:none}
.acard:has(.acard-link:focus-visible){outline:3px solid var(--teal-ink);outline-offset:3px}
.acard-p{color:var(--soft);font-size:.95rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acard-go{display:inline-flex;align-items:center;gap:6px;color:var(--leaf-ink);font-weight:700;font-size:.95rem}
.acard-go svg{width:16px;height:16px;transition:transform .2s}
.acard:hover .acard-go svg{transform:translateX(3px)}
.acard:hover .acard-link{text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){.agrid{grid-template-columns:repeat(2,minmax(0,1fr))}.adv-band .agrid .acard:nth-child(3){display:none}}
@media (max-width:640px){.agrid{grid-template-columns:minmax(0,1fr)}.adv-band .agrid .acard:nth-child(3){display:grid}}
.adv-band .rs-top .wlink{margin:0}

/* article page */
.art-wrap{max-width:calc(800px + 2 * var(--gutter))}
.art-head{background:linear-gradient(180deg,#fff,#FAFBFC);border-bottom:1px solid var(--line)}
.art-head .wrap{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:14px;padding-top:clamp(24px,3.4vw,44px);padding-bottom:clamp(30px,4vw,48px)}
.art-head h1{font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.025em;text-wrap:balance}
.art-head .lead{max-width:none;font-size:1.16rem}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 0;font-size:.88rem;color:var(--soft);font-weight:600}
.art-meta span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 12px 3px;background:var(--leaf);vertical-align:middle}
.art-photo{margin-top:clamp(24px,3vw,36px)}
.art-photo .pic{aspect-ratio:16 / 9}
.art-body{max-width:none;padding:clamp(28px,4vw,44px) 0 clamp(56px,7vw,88px);gap:16px;font-size:1.06rem;line-height:1.72}
.art-body h2{font-size:clamp(1.45rem,2.3vw,1.8rem);margin-top:26px;letter-spacing:-.015em}
.art-body h3{margin-top:12px}
.art-body ul,.art-body ol{margin:0;padding-left:1.25em;display:grid;gap:8px}
.art-body li::marker{color:var(--leaf-ink)}
.art-body strong{color:var(--navy)}
.art-short{border:1px solid var(--line);border-top:3px solid var(--leaf);background:#FAFBFC;padding:20px 24px;display:grid;gap:10px}
.art-short h2{margin:0!important;font-size:.8rem!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--teal-ink)}
.art-short ul{gap:6px}
.art-note{font-size:.92rem;color:var(--soft)}
.art-src{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.88rem;color:var(--soft)}
.art-src a{font-weight:600}
.art-cta{margin-top:18px;padding:clamp(22px,3vw,30px);background:var(--leaf-50);border:1px solid var(--leaf-100);border-left:3px solid var(--leaf);display:grid;gap:10px}
.art-body .art-cta-h{font-weight:900;font-size:1.3rem;line-height:1.25;color:var(--navy)}
.art-cta .hero-ctas{margin-top:6px}
/* heat in vs heat out: a simple, honest illustration of a SCOP of 4 */
.cop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:4px 0}
.cop div{background:#fff;padding:16px 16px 14px;display:grid;gap:6px;align-content:start}
.cop b{font-weight:900;font-size:clamp(1.5rem,3vw,2rem);line-height:1;color:var(--navy)}
.cop b small{font-size:.5em;color:var(--soft);margin-left:3px}
.cop span{font-size:.86rem;line-height:1.4;color:var(--soft)}
.cop .out{background:var(--leaf-50)}
.cop .out b{color:var(--leaf-ink)}
.cop-cap{font-size:.86rem;color:var(--soft)}
@media (max-width:560px){.cop{grid-template-columns:minmax(0,1fr)}}
.sum-tbl{width:100%;border-collapse:collapse;font-size:.96rem}
.sum-tbl th,.sum-tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.sum-tbl th{color:var(--navy);font-weight:800;background:#FAFBFC}
.sum-tbl td:last-child,.sum-tbl th:last-child{text-align:right;white-space:nowrap}
.tbl-wrap{overflow-x:auto}
@media (max-width:520px){.art-meta{gap:2px 16px}.art-meta span+span::before{display:none}}
.area h3 a{color:inherit;text-decoration:none}.area h3 a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Heat pump finance (NuRenewables navy and leaf, never Heat Geek's black and pink) ---------- */
.fin-card{position:relative;overflow:hidden;align-self:center;background:var(--ink);color:#D3DEEC;padding:clamp(26px,3.4vw,40px);display:grid;gap:18px;border-top:4px solid var(--leaf)}
.fin-card::after{content:"";position:absolute;right:-34px;bottom:-40px;width:170px;height:204px;background:var(--motif) center/contain no-repeat;opacity:.12;pointer-events:none}
.fin-card>*{position:relative;z-index:1;margin:0}
.fc-k{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.fc-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.fc-terms p{margin:0;padding:20px 0;display:grid;gap:4px}
.fc-terms p+p{padding-left:22px;border-left:1px solid rgba(255,255,255,.16)}
.fc-terms b{color:#fff;font-size:clamp(3rem,5.6vw,4.6rem);line-height:.92;font-weight:800;letter-spacing:-.04em;font-variant-numeric:lining-nums}
.fc-terms span{color:#fff;font-weight:700;font-size:1.02rem;line-height:1.3}
.fc-who{font-size:.98rem;line-height:1.5}
.fc-rep{font-size:.92rem;line-height:1.55}
.fin-strip{background:var(--leaf-50);border-top:1px solid var(--leaf-100);border-bottom:1px solid var(--leaf-100);padding:clamp(30px,4vw,44px) 0}
.fs-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3.4vw,40px);align-items:center}
.fs-terms{margin:0;display:grid;justify-items:center;gap:2px;min-width:118px;padding:16px 18px;background:#fff;border-left:4px solid var(--leaf)}
.fs-terms b{color:var(--navy);font-size:2.6rem;line-height:1;font-weight:800;letter-spacing:-.03em}
.fs-terms span{color:var(--leaf-ink);font-weight:700;font-size:.86rem;text-transform:uppercase;letter-spacing:.12em}
.fs-copy{display:grid;gap:8px}
.fs-copy h2{margin:0;font-size:clamp(1.3rem,2.2vw,1.7rem);text-wrap:balance}
.fs-copy p{margin:0}
.fs-rep{font-size:.88rem}
@media (max-width:820px){.fs-row{grid-template-columns:minmax(0,1fr);justify-items:start}.fs-terms{grid-auto-flow:column;align-items:baseline;gap:10px;min-width:0;padding:10px 16px}.fs-terms b{font-size:2rem}}
.slot.fin-embed{min-height:340px;justify-content:center;text-align:center;align-items:center}
.fin-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.fv{display:grid;gap:12px;align-content:start;padding:clamp(24px,3vw,36px)}
.fv>*{margin:0}
.fv-k{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.fv h3{font-size:1.4rem}
.fv-zd{background:var(--hg-black);color:#E6E9ED;border-top:4px solid var(--hg-pink)}
.fv-zd h3{color:#fff}
.fv-zd .fv-k{color:#F48BB9}
.fv-zd .wlink{color:#fff}
.fv-fin{background:#fff;border:1px solid var(--line);border-top:4px solid var(--leaf)}
.fv-fin .fv-k{color:var(--leaf-ink)}
@media (max-width:820px){.fin-vs{grid-template-columns:minmax(0,1fr)}}
.fin-legal{max-width:860px;margin:clamp(36px,5vw,56px) auto 0;padding:22px 24px;background:var(--mist);border:1px solid var(--line);display:grid;gap:10px;font-size:.93rem;color:var(--soft)}
.fin-legal h3{margin:0;font-size:1.15rem;color:var(--navy)}
.fin-legal p{margin:0}

/* ---------- Service pages (24 Oct 2026): hero > suitability > cost > process > proof > FAQs > areas > related > CTA ---------- */
.svc-hero .phero-copy{gap:16px}
.svc-proof{margin:2px 0 4px}
.svc-proof .pr-g a{display:flex;align-items:center;gap:10px;text-decoration:none}
.svc-proof .pr-g img{height:26px;width:26px}
.svc-proof .pr-g b{display:flex;align-items:center;gap:6px}
.svc-proof .he-stars{display:inline-flex;gap:1px}
.svc-proof .he-stars svg{width:13px;height:13px;fill:#F5B301}
.svc-proof .pr-tbc span{font-size:.86rem}
.svc-offer{margin:0;max-width:34em;padding-left:14px;border-left:3px solid var(--hg-pink);font-size:.95rem;line-height:1.5;color:var(--text)}
.svc-offer a{color:var(--navy);font-weight:700}
.suit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.sg{padding:clamp(22px,3vw,32px);display:grid;gap:14px;align-content:start}
.sg h3{margin:0;font-size:1.15rem}
.sg ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sg li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;line-height:1.5}
.sg li svg{width:28px;height:28px;padding:5px;box-sizing:border-box;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sg-yes{background:#fff;border:1px solid var(--line);border-top:4px solid var(--leaf)}
.sg-yes h3{color:var(--leaf-ink)}
.sg-yes li svg{background:var(--leaf-50);stroke:var(--leaf-ink)}
.sg-no{background:var(--mist);border:1px solid var(--line);border-top:4px solid #AEB8C4}
.sg-no h3{color:var(--soft)}
.sg-no li svg{background:#E4E8ED;stroke:#5C6878}
.sg a{color:var(--navy);font-weight:700}
.suit-note{display:flex;align-items:center;gap:10px;margin:24px 0 0;font-weight:700;color:var(--navy)}
.suit-note::before{content:"";width:15px;height:18px;flex:none;background:var(--motif) center/contain no-repeat}
.cost-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:start}
.price-card{position:relative;overflow:hidden;background:var(--night);color:#C9D4E2;padding:clamp(24px,3vw,34px);border-top:3px solid var(--leaf);display:grid;gap:10px}
.price-card::after{content:"";position:absolute;right:-26px;bottom:-30px;width:110px;height:132px;background:var(--motif-line) center/contain no-repeat;opacity:.1;pointer-events:none}
.price-card>*{position:relative;z-index:1;margin:0}
.pc-k{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.pc-big{color:#fff;font-size:1.1rem}
.pc-big b{display:block;font-size:clamp(2.6rem,4.4vw,3.4rem);line-height:1;font-weight:800;letter-spacing:-.03em}
.pc-sub{color:#fff;font-weight:700}
.pc-note,.pc-src{font-size:.9rem;line-height:1.5}
.pc-src a,.pc-more{color:#fff}
.pc-more{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.pc-more:hover{text-decoration:underline}
.pc-more svg{width:16px;height:16px}
.pc-ours{font-size:.92rem}
.cost-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
.cost-lists.solo{grid-template-columns:minmax(0,1fr)}
.cost-lists h3{margin:0 0 12px;font-size:1.15rem}
.cl-f{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cl-f li{position:relative;padding-left:20px;font-size:.96rem;line-height:1.5;color:var(--soft)}
.cl-f li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border:2px solid var(--navy)}
.cl-f b{color:var(--navy)}
.cost-lists .checks li{font-size:.96rem}
.offers{margin-top:clamp(40px,5vw,60px);display:grid;gap:16px}
.offers-h{margin:0;font-size:1.4rem}
.offers-sub{margin:-8px 0 4px;color:var(--soft)}
.oc-zd{padding:clamp(26px,4vw,48px)}
.oc-zd .zd-badge{margin-bottom:22px}
.oc-zd .zd-panel .zd-title{font-size:clamp(1.55rem,2.4vw,2.1rem)}   /* below the section's h2 (hierarchy check, 25 Oct) */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px}
.oc{padding:clamp(22px,3vw,30px);display:grid;gap:10px;align-content:start}
.oc>*{margin:0}
.oc h4{font-size:1.25rem;line-height:1.25}
.oc-k{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.oc-elig{font-size:.92rem;line-height:1.5}
.oc-src{font-size:.82rem}
.oc-bus{background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy)}
.oc-bus .oc-k{color:var(--teal-ink)}
.oc-bus h4{color:var(--navy)}
.oc-big{display:grid;gap:4px;color:var(--soft);font-size:.95rem;line-height:1.45}
.oc-big>b{color:var(--navy);font-size:2.4rem;line-height:1;font-weight:800;letter-spacing:-.03em}
.oc-big span b{color:var(--navy)}
.oc-bus .oc-elig{color:var(--soft)}
.oc-bus .oc-elig b{color:var(--navy)}
.oc-fin{background:var(--ink);color:#D3DEEC;border-top:4px solid var(--leaf)}
.oc-fin .oc-k{color:var(--mint)}
.oc-fin h4{color:#fff}
.oc-fin .oc-elig b{color:#fff}
.oc-fin .wlink{color:#fff}
.oc-zdalt{background:var(--hg-black);color:#E6E9ED;border-top:4px solid var(--hg-pink)}
.oc-zdalt .oc-k{color:#F48BB9}
.oc-zdalt h4,.oc-zdalt h3{color:#fff}
.oc-zdalt h3{font-size:1.25rem;line-height:1.25}
.oc-zdalt .oc-elig b{color:#fff}
.oc-zdalt .wlink{color:#fff}
.oc-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:6px}
.offers-alt{max-width:760px}
.how-steps .hs-time{margin:2px 0 0;font-size:.85rem;font-weight:700;line-height:1.45;color:var(--leaf-ink)}
.how-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(40px,5vw,56px)}
.how-more>div{background:var(--night);border:1px solid var(--night);border-top:3px solid var(--leaf);padding:clamp(20px,2.6vw,28px)}
.how-more h3{margin:0 0 14px;color:#fff;font-size:1.15rem}
.how-more ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hm-dis li{position:relative;padding-left:20px;color:#C9D4E2;font-size:.96rem;line-height:1.55}
.hm-dis li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--leaf)}
.hm-prom ul{grid-template-columns:minmax(0,1fr);gap:16px}
.hm-prom li{display:grid;gap:3px;padding-left:14px;border-left:3px solid var(--leaf)}
.hm-prom b{color:#fff;font-size:.98rem}
.hm-prom span{color:#B9C6D8;font-size:.9rem;line-height:1.5}
.how-gas{margin:24px 0 0;padding:16px 20px;background:#FFF8E6;border-left:4px solid #F5B301;color:var(--text);max-width:52em}
.how-gas b{color:var(--navy)}
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:stretch}
.ccard{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--line)}
.cc-pic{aspect-ratio:16 / 9;overflow:hidden;background:var(--stone-2)}
.cc-pic img{width:100%;height:100%;object-fit:cover}
.cc-body{padding:clamp(20px,2.6vw,28px);display:grid;gap:14px;align-content:start;justify-items:start}
.cc-k{margin:0;display:grid;gap:2px;font-weight:800;color:var(--navy);font-size:1.15rem}
.cc-k span{font-weight:600;font-size:.9rem;color:var(--soft)}
.cc-body dl{margin:0;display:grid;gap:4px}
.cc-body dt{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.cc-body dd{margin:0 0 8px;font-size:.96rem;line-height:1.55;color:var(--text)}
.cc-temps{padding:12px 16px;background:var(--night)}
.ccard-slot{min-height:340px}
.wu-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(16px,2.4vw,28px);margin-top:clamp(36px,4.5vw,52px)}
.wu-box{background:#fff;border:1px solid var(--line);padding:clamp(20px,2.6vw,28px)}
.wu-box h3{margin:0 0 12px;font-size:1.15rem}
.wu-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.wu-list li{position:relative;padding-left:22px;font-size:.96rem;line-height:1.45}
.wu-list li::before{content:"";position:absolute;left:0;top:.18em;width:12px;height:15px;background:var(--motif) center/contain no-repeat}
.wu-list b{color:var(--navy)}
.wu-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.wu-logos img{height:34px;width:auto}
.wu .points .point p{font-size:.97rem}
.ar-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ar{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;height:100%;box-sizing:border-box;padding:16px 40px 16px 16px;background:#fff;border:1px solid var(--line);text-decoration:none;transition:border-color .2s}
.ar:hover{border-color:var(--leaf)}
.ar .mi{grid-row:1/span 2;width:36px;height:36px;display:grid;place-items:center;background:#EAF7F5;color:var(--teal-ink)}
.ar .mi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ar b{color:var(--navy)}
.ar small{color:var(--soft);font-size:.84rem;line-height:1.35}
.ar>svg{position:absolute;right:14px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--leaf-ink)}
.ar-towns{margin:18px 0 10px}
.ct-lower{margin-top:26px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--leaf)}
.ct-lower p{margin:0 0 8px}
.ct-lower ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ct-lower a{display:inline-flex;align-items:center;gap:6px;color:var(--leaf-ink);font-weight:700;text-decoration:none}
.ct-lower a:hover{text-decoration:underline}
.ct-lower svg{width:15px;height:15px;flex:none}
@media (max-width:1080px){.ar-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cost-grid,.wu-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.suit-grid,.how-more,.cgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.cost-lists,.hm-prom ul{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.ar-list{grid-template-columns:minmax(0,1fr)}}
/* header: service pages carry a service-specific button ("Heat pump quote"), a few letters longer than "Get my quote" */
@media (min-width:1100px) and (max-width:1279px){.head-cta{gap:12px}.head-cta .btn{padding:.85em .85em;font-size:.94rem}}
@media (min-width:1280px) and (max-width:1439px){.head-cta .btn{padding:.85em 1.05em}}
@media (min-width:1100px) and (max-width:1179px){.nav-link{padding:9px 7px}}
/* Projects page: jump links, long case studies (story, result, client review) and the London projects list (24 Oct 2026) */
.jump{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:22px}
.jump a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:700;font-size:.92rem;text-decoration:none}
.jump a:hover{border-color:var(--navy)}
.cs-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(32px,4vw,52px);padding-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--line)}
.cs-col{display:grid;gap:14px;align-content:start}
.cs-col h3{margin:0;font-size:1.2rem;color:var(--navy)}
.cs-col p{margin:0;color:var(--text);line-height:1.65}
.cs-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cs-list li{position:relative;padding-left:22px;line-height:1.55;color:var(--text)}
.cs-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--leaf)}
.cs-result{display:grid;gap:8px;padding:18px 20px;background:var(--leaf-50,#EAF6EC);border-left:3px solid var(--leaf)}
.cs-result p{font-weight:600;color:var(--navy)}
.cs-review{display:grid;gap:12px;justify-items:start;margin-top:clamp(28px,3.5vw,40px)}
.cs-review .rcard{margin:0;max-width:820px;width:100%}
.proj-list{display:grid}
.proj{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,2.25fr);gap:clamp(18px,3vw,40px);align-items:start;padding:clamp(22px,3vw,32px) 0;border-top:1px solid var(--line)}
.proj:last-child{border-bottom:1px solid var(--line)}
.proj-copy{display:grid;gap:8px}
.proj-k{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.proj-copy h3{margin:0;font-size:1.25rem;line-height:1.3;color:var(--navy)}
.proj-copy p{margin:0;color:var(--soft)}
.proj-pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.proj-pics .pic{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--stone-2)}
.proj-pics img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.cs-story{grid-template-columns:minmax(0,1fr)}.proj{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.proj-pics{gap:8px}.proj-pics .pic{aspect-ratio:1/1}}
/* Home hero: a row of specialist work under the words, on tablets and phones only (James, 24 Oct 2026). On desktop
   it was tried as a column beside the heat pump and taken back out (James, 24 Oct): the desktop hero is the single
   heat pump photo again. The photos load lazily, so desktops never download them. */
.hero-strip{order:2;list-style:none;margin:0 auto;padding:22px var(--gutter) 24px;width:100%;max-width:var(--wrap);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hero-strip li{margin:0;min-width:0;min-height:0}
.hero-strip figure{position:relative;margin:0;aspect-ratio:4/3.3;overflow:hidden;background:var(--stone-2);box-shadow:0 12px 24px -16px rgba(19,38,61,.6)}
.hero-strip img{display:block;width:100%;height:100%;object-fit:cover}
.hero-strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-size:.74rem;font-weight:700;line-height:1.2;letter-spacing:.01em;color:#fff;background:linear-gradient(180deg,rgba(19,38,61,0),rgba(19,38,61,.86))}
@media (max-width:1180px){.hero-bg{order:3}}
@media (max-width:600px){.hero-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hero-strip figcaption{font-size:.72rem}}
@media (min-width:1181px){.hero-strip{display:none}}

/* Home services: eight tiles straight under the hero, grouped by what the visitor needs (James, 25 Oct 2026). One bold
   icon per service (no box behind it; James, 25 Oct), so the row can be scanned at a glance (the earlier pipe drawings were too
   detailed). Walls are hairlines; the whole tile is the link. */
.sx-band{background:#fff;--wall:#D8DFE7}   /* the logo bar above it gives the line */
.sx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(28px,3vw,40px)}
.sx-install{grid-column:1/-1}
/* group headings a step above the service names and a step below the section heading: the group is the first choice */
.sx-gh{display:flex;align-items:center;gap:16px;margin:0 0 16px;font-size:clamp(1.2rem,1.6vw,1.4rem);font-weight:800;line-height:1.25;letter-spacing:-.01em;color:var(--navy)}
.sx-gh::after{content:"";flex:1;height:1px;background:var(--wall)}
.sx-project .sx-gh{padding-right:28px}
.sx-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--wall);border-left:1px solid var(--wall)}
.sx-install .sx-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-service .sx-tiles{border-left:0}
.sx-tiles li{min-width:0;border-right:1px solid var(--wall);border-bottom:1px solid var(--wall)}
.sx-tile{display:grid;grid-template-rows:auto auto 1fr;align-content:start;height:100%;padding:24px 22px 24px;color:var(--navy);text-decoration:none;transition:background-color .2s}
.sx-ic{display:block;margin:0 0 16px}
.sx-ic svg{display:block;width:60px;height:60px;margin-left:-5px;overflow:visible}   /* the drawings start 4 units in: line them up with the names */
.sx-ic *{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sx-ic .e{stroke:var(--navy);stroke-width:2.25}
.sx-ic .a,.sx-ic .ad{stroke:var(--leaf);stroke-width:2.5}
.sx-ic .ad{stroke-dasharray:3.5 3}
.sx-ic .af{fill:var(--leaf);stroke:none}
.sx-ic .tk{stroke:#fff;stroke-width:2.5}
.sx-ic .wf{fill:#fff;stroke:none}
.sx-ic .nf{fill:var(--navy);stroke:none}
.sx-name{margin:0 0 6px;font-size:1.12rem;font-weight:800;line-height:1.25;color:var(--navy)}
/* the arrow sits after the name, and never drops onto a line of its own */
.sx-nw{white-space:nowrap}
.sx-go{display:inline-block;width:17px;height:17px;margin:0 0 -2px 8px;color:var(--teal-ink);transition:transform .2s,color .2s}
.sx-desc{font-size:.92rem;line-height:1.5;color:var(--soft)}
.sx-tile:hover,.sx-tile:focus-visible{background:var(--mist)}
.sx-tile:focus-visible{outline:3px solid var(--teal-ink);outline-offset:-3px}
.sx-tile:hover .sx-go,.sx-tile:focus-visible .sx-go{transform:translateX(4px);color:var(--leaf-ink)}
.sx-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:clamp(28px,3vw,40px)}
.sx-help p{color:var(--soft);max-width:40em}
.sx-help a:not(.btn){color:var(--teal-ink);font-weight:700}
@media (max-width:1180px){
  .sx-tile{padding-left:18px;padding-right:18px}
  .sx-name{font-size:1rem}
  .sx-desc{font-size:.88rem}
}
@media (max-width:899px){
  .sx{grid-template-columns:minmax(0,1fr)}
  .sx-install .sx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-service .sx-tiles{border-left:1px solid var(--wall)}
  .sx-project .sx-gh{padding-right:0}
  .sx-name{font-size:1.1rem}
  .sx-desc{font-size:.92rem}
}
@media (max-width:600px){
  .sx{row-gap:26px}
  .sx-tile{padding:16px 12px 16px}
  .sx-ic{margin-bottom:12px}
  .sx-ic svg{width:48px;height:48px;margin-left:-4px}
  .sx-name{font-size:.98rem;margin:0}
  .sx-gh{font-size:1.15rem;margin-bottom:12px}
  .sx-desc{display:none}
  .sx-help .btn{width:100%}
}

/* Kirk's own articles (25 Oct 2026): the formula, the worked table, the above / below ground comparison, pull lines,
   the "in progress" note, three figures in a row, the 10 commandments and the video links */
.art-formula{margin:4px 0;padding:14px 18px;background:var(--mist);border-left:3px solid var(--teal);color:var(--navy);font-weight:700;font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
.art-table{overflow-x:auto;border:1px solid var(--line)}
.art-table table{width:100%;border-collapse:collapse;font-size:.98rem;line-height:1.4}
.art-table caption{caption-side:top;text-align:left;padding:12px 16px;font-size:.9rem;font-weight:600;color:var(--soft);border-bottom:1px solid var(--line);background:#FAFBFC}
.art-table th{padding:10px 16px;text-align:left;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);border-bottom:1px solid var(--line)}
.art-table td{padding:10px 16px;border-bottom:1px solid var(--line);color:var(--text);font-variant-numeric:tabular-nums}
.art-table tr:last-child td{border-bottom:0}
.art-table td:first-child{font-weight:800;color:var(--navy)}
.art-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.art-compare>div{background:#fff;padding:16px 18px;display:grid;gap:4px;align-content:start}
.art-compare span{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.art-compare b{font-size:2.1rem;font-weight:900;line-height:1.05;color:var(--navy)}
.art-compare b small{font-size:.55em;font-weight:700;color:var(--soft)}
.art-compare div>small{font-size:.86rem;line-height:1.45;color:var(--soft)}
.art-compare .lo{background:var(--leaf-50)}.art-compare .lo b{color:var(--leaf-ink)}
.art-body .art-pull{margin:6px 0;padding-left:18px;border-left:3px solid var(--leaf);font-size:1.22rem;font-weight:800;line-height:1.4;color:var(--navy)}
.art-flag{padding:14px 18px;background:var(--mist);border-left:3px solid var(--teal);font-size:.98rem;line-height:1.55}
.art-flag b{color:var(--navy)}
.specs.s3{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.art-body .art-rules{list-style:none;padding:0;gap:0;counter-reset:rule;border-bottom:1px solid var(--line)}
.art-rules li{counter-increment:rule;position:relative;display:grid;gap:4px;padding:16px 0 16px 62px;border-top:1px solid var(--line)}
.art-rules li::before{content:counter(rule,decimal-leading-zero);position:absolute;left:0;top:16px;width:44px;height:36px;display:grid;place-items:center;background:var(--leaf-btn);color:#fff;font-weight:800;font-size:.95rem;letter-spacing:.04em}
.art-body .art-rules h3{margin:0;font-size:1.15rem;line-height:1.3;color:var(--navy)}
.art-rules p{margin:0;font-size:1rem;line-height:1.6}
.art-body .art-watch{list-style:none;padding:0;gap:10px}
.art-watch a{display:grid;gap:2px;padding:14px 18px;border:1px solid var(--line);text-decoration:none;font-weight:400;color:var(--text);line-height:1.5;transition:border-color .2s}
.art-watch a:hover,.art-watch a:focus-visible{border-color:var(--leaf)}
.art-watch b{color:var(--navy);font-weight:800}
@media (max-width:620px){.specs.s3{grid-template-columns:minmax(0,1fr)}.art-compare{grid-template-columns:minmax(0,1fr)}.art-rules li{padding-left:56px}}

/* "At handover": Kirk's passport for that kind of system, in the process section of the install pages (25 Oct 2026) */
.how-pass{display:grid;grid-template-columns:minmax(200px,340px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(16px,2.4vw,28px);padding:clamp(22px,3vw,36px);background:#fff;border:1px solid var(--line)}
.hp-doc{margin:0;transform:rotate(-1.5deg);border:5px solid #fff;box-shadow:0 18px 40px rgba(19,38,61,.22)}
.hp-doc img{display:block;width:100%;height:auto}
.hp-copy{display:grid;gap:10px;justify-items:start}
.hp-k{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink)}
.hp-copy h3{margin:0;color:var(--navy);font-size:1.3rem}
.hp-copy>p{margin:0;color:var(--soft);line-height:1.6;max-width:40em}
.hp-parts{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;width:100%}
.hp-parts li{display:grid;gap:3px;padding-left:14px;border-left:3px solid var(--leaf)}
.hp-parts b{color:var(--navy);font-size:.98rem}
.hp-parts span{color:var(--soft);font-size:.9rem;line-height:1.5}
.hp-extra{margin-top:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:14px 18px;background:var(--mist);border:1px solid var(--line);text-decoration:none;transition:border-color .2s}
.hp-extra b{color:var(--navy)}
.hp-extra span{grid-column:1;color:var(--soft);font-size:.9rem}
.hp-extra svg{grid-column:2;grid-row:1 / span 2;width:18px;height:18px;color:var(--leaf-ink)}
.hp-extra:hover,.hp-extra:focus-visible{border-color:var(--leaf)}
@media (max-width:860px){.how-pass{grid-template-columns:minmax(0,1fr)}.hp-doc{max-width:320px}}
@media (max-width:620px){.hp-parts{grid-template-columns:minmax(0,1fr)}}

/* Case card for a project in progress: its design figures where the photo would be */
.cc-figs{display:grid;align-content:center;gap:14px;padding:clamp(18px,2.4vw,26px);background:var(--night);color:#fff}
.cc-ip{margin:0;justify-self:start;padding:4px 10px;background:var(--leaf-btn);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cc-figs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cc-figs li{display:grid;gap:4px;align-content:start;padding-left:12px;border-left:2px solid var(--leaf)}
.cc-figs b{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:900;line-height:1;white-space:nowrap}
.cc-figs b small{font-size:.5em;font-weight:700;color:var(--mint);margin-left:2px}
.cc-figs span{font-size:.8rem;line-height:1.35;color:#B9C6D8}
.cc-note{margin:0;font-size:.86rem;line-height:1.5;color:var(--soft)}

/* Projects page: Kirk's current London new build (in progress, no photos yet) */
.ip-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,64px);align-items:center}
.ip-copy{display:grid;gap:16px;justify-items:start}
.ip-copy h2{margin:0}
.ip-quote{margin:0;padding-left:16px;border-left:3px solid var(--leaf);font-weight:800;font-size:1.12rem;line-height:1.45;color:var(--navy)}
.ip-note{margin:0;font-size:.88rem;color:var(--soft)}
.ip-specs{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
@media (max-width:980px){.ip-grid{grid-template-columns:minmax(0,1fr)}}

/* Heat Geek band: "Find out more" (to the ZeroDisrupt page) as the secondary button, before the pink one (James, 25 Oct
   2026). Phones keep the compact row: the line itself links to the page there */
.hgb-more{flex:none;display:inline-flex;align-items:center;margin-right:-14px;padding:6.5px 14.5px;border:1.5px solid rgba(255,255,255,.7);color:#fff;font-size:.86rem;font-weight:800;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s}
.hgb-more:hover{background:rgba(255,255,255,.1);border-color:#fff}
/* 981-1100px: the small Heat Geek logo instead of the lockup, so the offer and its small print keep to two lines */
@media (min-width:981px) and (max-width:1100px){.hgb-lockup{display:none}.hgb-logo{display:block;height:26px}}
@media (max-width:980px){.hgb-more{margin-right:0;padding:4.5px 10px;font-size:.78rem}}
@media (max-width:640px){.hgb-more{display:none}}

/* Heat Geek's ZeroDisrupt page (25 Oct 2026): Heat Geek's black and pink, their logo only on their black */
.btn-hg{background:#D81B70;color:#fff}
.btn-hg:hover{background:#BC145F}
.btn-ondark{border-color:rgba(255,255,255,.75);color:#fff;background:transparent}
.btn-ondark:hover{background:rgba(255,255,255,.08);border-color:#fff}
.zdp-hero{position:relative;overflow:hidden;background:var(--hg-black);color:#E6E9ED}
.zdp-hero::before{content:"";position:absolute;right:-14%;top:-40%;width:62%;height:170%;background:radial-gradient(closest-side,rgba(231,33,122,.22),rgba(231,33,122,0));pointer-events:none}
.zdp-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(24px,3.4vw,44px);padding-bottom:clamp(44px,6vw,80px)}
.zdp-copy{display:grid;justify-items:start;gap:18px}
.zdp-hero .crumbs ol,.zdp-hero .crumbs a{color:#A9AFB8}
.zdp-hero .crumbs a:hover{color:#fff}
.zdp-hero .crumbs [aria-current]{color:#fff}
.zdp-hero .crumbs li+li::before{border-color:#6E747C}
.zdp-badge{margin:4px 0 2px}
.zdp-badge img{height:clamp(52px,5.6vw,72px)}
.zdp-hero h1{color:#fff;font-size:clamp(2.1rem,3.8vw,3.2rem);line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.zdp-hero h1 .hl{color:var(--hg-pink)}
.zdp-hero .lead{color:#D5D9DF;font-size:1.12rem;max-width:33em}
.zdp-small{margin:0;font-size:.84rem;line-height:1.5;color:#A9AFB8;max-width:36em}
.zdp-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.zdp-facts li{display:grid;gap:6px;align-content:start;padding:clamp(18px,2.4vw,26px);background:var(--hg-black)}
.zdp-facts li:first-child{box-shadow:inset 0 3px 0 var(--hg-pink)}
.zdp-facts b{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:900;line-height:1;color:#fff;letter-spacing:-.01em;white-space:nowrap}
.zdp-facts b small{font-size:.5em;font-weight:700;color:#A9AFB8}
.zdp-facts span{font-size:.9rem;line-height:1.45;color:#C9CED6}
.zdp-cost{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.zdp-cost .split-copy>.btn{margin-top:6px}
.zdp-grant{padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-top:4px solid var(--hg-pink);display:grid;gap:14px}
.zdp-grant h3{margin:0;font-size:1.25rem}
.zdp-grant .dsheet div,.zdp-terms div{grid-template-columns:130px minmax(0,1fr)}
.zdp-note{margin:0;font-size:.88rem;color:var(--soft)}
.zdp-guar{position:relative;overflow:hidden;background:var(--hg-black);color:#E6E9ED;padding:clamp(64px,8vw,104px) 0}
.zdp-guar .label{color:#F48BB8}
.zdp-guar h2{color:#fff}
.zdp-guar .lead{color:#D5D9DF}
.zdp-gpoints{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.zdp-gpoints li{display:grid;gap:8px;align-content:start;padding-top:18px;border-top:3px solid var(--hg-pink)}
.zdp-gpoints b{color:#fff;font-size:1.1rem}
.zdp-gpoints span{color:#C9CED6;line-height:1.6}
.zdp-gnote{margin:clamp(24px,3vw,36px) 0 0;font-size:.88rem;color:#A9AFB8}
.zdp-gnote a{color:#fff}
.zdp-terms{align-self:center}
.zdp-src{max-width:860px;margin:28px auto 0;padding-top:16px;border-top:1px solid var(--line);font-size:.86rem;line-height:1.6;color:var(--soft)}
.zdp-src a{font-weight:600}
@media (max-width:980px){.zdp-grid,.zdp-cost{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.zdp-gpoints{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.zdp-hero .hero-ctas{width:100%}.zdp-hero .hero-ctas .btn{flex:1 1 auto}.zdp-grant .dsheet div,.zdp-terms div{grid-template-columns:minmax(0,1fr);gap:4px}}
.zdp-small a{color:#fff}

/* A case card showing the job before the work says so on the photo (photo review, 25 Oct 2026) */
.cc-pic{position:relative}
.cc-tag{position:absolute;left:12px;top:12px;padding:4px 10px;background:rgba(19,38,61,.82);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* 60/30/10 (James, 26 Oct), with no navy section backgrounds (James, 26 Oct, 04:28): 60% white and light grey
   sections, 30% navy as cards and panels inside them plus the headings and text, 10% green as the accent. Navy cards:
   "What to expect" and "Our promises", the contact details, Kirk's name panel, How we price, the case figures,
   the menu's featured project. */
.contact .facts{margin-top:30px;padding:6px 24px;background:var(--night);border-top:3px solid var(--leaf)}
.contact .facts li{border-top-color:rgba(255,255,255,.14)}
.contact .facts li:first-child{border-top:0}
.contact .facts li:last-child{border-bottom:0}
.contact .facts .k{color:var(--mint)}
.contact .facts a{color:#fff}
.contact .facts li>span:not(.k){color:#D3DEEC}
/* Green (the 10%): the accent, plus a pale tint of it behind the Google reviews */
.revs,.rstrip{background:var(--leaf-50)}
/* the Reviews page: the reviews are the page itself, so they stay on the light grey */
.phero+section.revs{background:#F5F7F8}
.contact .facts li{grid-template-columns:78px minmax(0,1fr)}
.contact .facts a{font-size:.96rem}
/* the contact band itself stays white, so the pale green is kept for the reviews (the 10%) */
.contact{background:#fff}
@media (max-width:520px){.contact .facts{padding:4px 18px}.contact .facts li{grid-template-columns:1fr}}

/* Kirk without a photo (James, 26 Oct): his navy name panel becomes a profile card (a card, never a section) */
.kirk-card{gap:18px;padding:clamp(24px,3vw,34px)}
.kirk-card .kc-mark{display:block;width:30px;height:36px}
.kc-quote{margin:0;color:#fff;font-size:clamp(1.15rem,1.7vw,1.32rem);font-weight:700;line-height:1.42;padding-left:16px;border-left:3px solid var(--leaf)}
.kirk-card .kp-name b{font-size:1.25rem}
.kc-list{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:10px}
.kc-list li{position:relative;padding-left:20px;color:#D3DEEC;font-size:.95rem;line-height:1.45}
.kc-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--leaf)}
.kc-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.kc-ctas .btn{flex:1 1 auto;justify-content:center}
.kirk-grid{align-items:start}
.kirk-split{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr)}
@media (min-width:901px){.kirk-media,.kirk-split>.kirk-card{position:sticky;top:24px}}
@media (max-width:900px){.kirk-split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.kirk-grid>.kirk-media{order:2}}