/* Shared design rules, loaded last on every page (homepage included) so the whole site matches. 22 Oct 2026 */
:root{--org:#f7892e;--org2:#e2741b;--logo-blue:#005faf;--r:18px;--r2:28px;
--sh-s:0 1px 2px rgba(15,27,45,.06),0 12px 24px -16px rgba(15,27,45,.28);
--sh-m:0 1px 2px rgba(15,27,45,.05),0 24px 48px -28px rgba(15,27,45,.38);
--sh-l:0 2px 4px rgba(15,27,45,.06),0 36px 64px -30px rgba(15,27,45,.45);
--sh:var(--sh-m)}
/* page background: the homepage gradient that follows the scroll */
body{background:linear-gradient(160deg,#dbe8fb 0%,#eaf1fb 45%,#fdeadb 100%) fixed}
/* nav: homepage version (turns into the floating pill once you scroll past the hero) */
.nav{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:88px}
.nav{height:88px;transition:background .3s}
.nav .wrap{transition:all .35s cubic-bezier(.2,.8,.2,1)}
.nav.sc{background:transparent;pointer-events:none;padding-top:12px;box-sizing:border-box}
.nav.sc .wrap{pointer-events:auto;height:64px;max-width:1120px;background:var(--ink);border-radius:999px;padding:0 14px 0 28px;box-shadow:0 14px 34px -12px rgba(8,16,30,.5)}
.nav.sc .logo img{height:38px}
.nav.sc .btn{height:40px}
.nav .logo img{height:50px;width:auto}
.nav ul{display:flex;gap:17px;margin:0 14px;list-style:none;font-weight:600;font-size:14.5px;color:#c9d2e0}
.nav ul a:hover{color:#fff}
.nav .r{display:flex;align-items:center;gap:18px}
.nav .tel{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px}
.nav .tel i{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff}
.nav .btn{height:46px}
@media(max-width:960px){.nav ul,.nav .tel{display:none}}
@media(max-width:960px){.nav .wrap{height:72px}}
@media(max-width:960px){.nav .logo img{height:40px}}
.nav ul a,.nav .tel{white-space:nowrap}
.nav ul{gap:15px!important;margin:0 10px!important;font-size:14px!important}
.nav .tel{font-size:15px}
.nav .wrap{gap:28px}
.nav ul{gap:4px}
.nav li{position:relative}
.nav li>a{padding:10px 14px;border-radius:999px;font-weight:600;font-size:15px;display:flex;align-items:center;gap:6px;transition:background .2s}
.nav li>a:hover,.nav li.has-mega:hover>a{background:rgba(255,255,255,.08)}
.nav{top:0}
.nav .burger{display:none}
.nav.sc .wrap{max-width:1120px}
.burger{width:44px;height:44px;border:0;background:rgba(255,255,255,.08);border-radius:12px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger i{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
.nav.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none}
@media(max-width:960px){.nav .burger{display:flex}}
@media(max-width:960px){.nav .r .btn{display:none}}
@media(max-width:960px){.mnav{position:absolute;left:0;right:0;top:100%;background:var(--ink);border-top:1px solid rgba(255,255,255,.1);padding:8px 18px 18px;flex-direction:column;display:none;box-shadow:0 30px 40px -20px rgba(0,0,0,.6)}}
@media(max-width:960px){.nav.open .mnav{display:flex}}
@media(max-width:960px){.mnav a{padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:16px}}
@media(max-width:960px){.mnav a.mtel{margin-top:14px;border:0;background:var(--org);border-radius:999px;text-align:center;padding:14px}}
@media(max-width:960px){.nav.sc{padding-top:8px!important}}
@media(max-width:960px){.nav.sc .wrap{height:58px!important;padding:0 10px 0 18px!important;max-width:calc(100% - 20px)!important}}
@media(max-width:960px){.nav.sc .mnav{left:10px;right:10px;border-radius:0 0 22px 22px}}
.past-hero .mbar{transform:none}
@media(max-width:960px){.burger{position:relative;z-index:80;touch-action:manipulation;-webkit-tap-highlight-color:transparent}}
@media(max-width:960px){.burger i{pointer-events:none}}
@media(max-width:960px){.mnav{position:fixed!important;left:0!important;right:0!important;top:var(--nh,72px)!important;bottom:0;z-index:70;overflow-y:auto;border-radius:0!important}}
@media(max-width:960px){.nav.sc .mnav{top:70px!important;left:10px!important;right:10px!important;bottom:auto;border-radius:22px!important}}
@media(max-width:960px){html.menu-open .mbar{transform:translateY(140%)!important}}
@media(min-width:961px){.nav .wrap{position:relative}}
@media(min-width:961px){.nav li.has-mega{position:static!important}}
@media(min-width:961px){.nav .logo{flex-shrink:0}}
@media(min-width:961px) and (max-width:1023px){.nav .tel .tel-n{display:none}}
/* buttons: homepage version (flat orange, fill follows the cursor) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 24px;border-radius:999px;font-weight:700;font-size:15.5px;transition:background .2s,transform .15s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-o{background:var(--org);color:#fff}
.btn-o:hover{background:var(--org2)}
.btn-b{background:var(--ink);color:#fff}
.btn-b:hover{background:#1b2a42}
.btn-l{border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.btn-l:hover{border-color:var(--ink)}
.btn svg{width:18px;height:18px}
@media(hover:hover) and (pointer:fine){.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s,transform .15s!important}}
@media(hover:hover) and (pointer:fine){.btn .bfx{position:absolute;left:var(--x,50%);top:var(--y,50%);width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);background:var(--fill,#0f1b2d);z-index:-1;pointer-events:none;transition:width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1)}}
@media(hover:hover) and (pointer:fine){.btn.fx-on .bfx{width:var(--d,400px);height:var(--d,400px)}}
@media(hover:hover) and (pointer:fine){.btn-o{--fill:#c94b0c}}
@media(hover:hover) and (pointer:fine){.btn-o:hover{background:var(--org)!important}}
@media(hover:hover) and (pointer:fine){.btn-b{--fill:var(--org)}}
@media(hover:hover) and (pointer:fine){.btn-b:hover{background:var(--ink)}}
@media(hover:hover) and (pointer:fine){.btn-l{--fill:var(--org)}}
.btn{text-align:center}
.btn .bfx{position:absolute;width:0;height:0;pointer-events:none}
.btn{transition:background-color 0s,border-color 0s,color .15s,transform .2s,box-shadow .25s!important}
.btn.fx-on{background-color:var(--fill,#0f1b2d)!important;border-color:var(--fill,#0f1b2d)!important;transition:background-color 0s .4s,border-color 0s,color .15s,transform .2s,box-shadow .25s!important}
.btn-l{border:0!important;box-shadow:inset 0 0 0 1.5px var(--line),var(--sh-s)}
.btn-l:hover{box-shadow:inset 0 0 0 1.5px var(--line),0 5px 12px rgba(15,27,45,.18),0 18px 34px -10px rgba(15,27,45,.35)}
button.btn{border:0!important;font-family:inherit;cursor:pointer}
.btn-o:hover{transform:translateY(-2px)}
.btn-b{box-shadow:0 3px 8px rgba(15,27,45,.22),0 14px 30px -8px rgba(15,27,45,.55)}
.btn-b:hover{box-shadow:0 5px 12px rgba(15,27,45,.25),0 18px 34px -10px rgba(15,27,45,.45);transform:translateY(-2px)}
.btn-l{box-shadow:var(--sh-s)}
.btn-l:hover{box-shadow:0 5px 12px rgba(15,27,45,.18),0 18px 34px -10px rgba(15,27,45,.35);transform:translateY(-2px)}
.hero .btn-l{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn-l{box-shadow:var(--sh-s)}
.hero .btn-l:hover{box-shadow:0 5px 12px rgba(15,27,45,.18),0 18px 34px -10px rgba(15,27,45,.35)}/* ---- corners and shadows, one system for every page ---- */
/* big blocks 28 (22 on mobile), cards 22 (18 on mobile), small cards 18 */
.guar,.quote,.map,.fin,.band,.why .photo,.ph,.ba,.hero .visual .photo{border-radius:28px!important}
.bc,.work figure,.gal figure,.step,.ty,.rg,.card,.post,.sc:not(.nav),.proof .in{border-radius:22px!important}
.rc,.sy,.rs,.stat div,.q,.rt{border-radius:18px!important}
@media(max-width:960px){.guar,.quote,.map,.fin,.band,.why .photo,.ph,.ba,.hero .visual .photo{border-radius:22px!important}.bc,.work figure,.gal figure,.step,.ty,.rg,.card,.post,.sc:not(.nav){border-radius:18px!important}}
.bc,.work figure,.gal figure,.step,.ty,.rg,.card,.post,.sc:not(.nav),.guar,.sy,.rs,.stat div,.why .photo,.ph{box-shadow:var(--sh-m)}
.rc{box-shadow:var(--sh-s)}
.bc:hover,.work figure:hover,.gal figure:hover,.rg:hover,.post:hover,.sc:not(.nav):hover,.sy:hover{box-shadow:var(--sh-l)!important}
.hero .proof .in{box-shadow:none!important}
.mi-pic{box-shadow:var(--sh-s)}

/* ---- headings: homepage sizes ---- */
.prose h2.h2,.two h2.h2{font-size:clamp(30px,3.6vw,46px);margin-top:0;letter-spacing:-.02em}
.step h3,.ty h3,.rg h3,.card h3{font-size:22px;line-height:1.15}
.post h3{font-size:20px;line-height:1.2}
.hero h1{font-size:clamp(34px,3.55vw,52px);letter-spacing:-.025em}
@media(min-width:961px) and (max-width:1240px){.hero h1{font-size:clamp(30px,3.3vw,44px)}}
@media(max-width:960px){.hero h1{font-size:32px}}
@media(max-width:345px){.hero h1{font-size:25px}}
.hero h1 span,.hero h1 span.wm{color:#ff9a4d}.hero h1 span.cl{color:#6db3ff}
.hero .lead{color:#cfdcf5}

/* ---- hero on inner pages: homepage proportions ---- */
@media(min-width:961px){.pg .hero:has(.proof){min-height:calc(100vh - var(--nh,88px) - var(--sth,66px));padding-top:18px;padding-bottom:26px;display:flex;flex-direction:column;justify-content:center}
.pg .hero:has(.proof)>.wrap{width:100%}
.pg .hero .proof .in{padding:18px 26px}.pg .hero .proof .num b,.pg .hero .proof .num{font-size:40px}}
@media(max-width:960px){.pg .hero .grid{display:flex;flex-direction:column;align-items:stretch}.pg .hero .grid>*{width:100%}.pg .hero .grid>.visual{order:-1}}
@media(max-width:900px){.brands img{height:40px}.brands img.tall{height:56px}}

/* ---- secondary strip: homepage height ---- */
@media(max-width:900px){.strip2 a{font-size:14px}.strip2 a svg{width:26px;height:26px}}
@media(min-width:901px){.strip2 a{padding:15px 0;gap:12px}}

/* ---- photo grids with no gaps: photos keep their own shape ---- */
.gal{display:block!important;columns:3;column-gap:14px}
.gal figure,.gal figure.w{display:block;break-inside:avoid;margin:0 0 14px;aspect-ratio:auto!important;grid-column:auto}
.gal figure img{height:auto!important}
@media(max-width:700px){.gal{columns:2;column-gap:10px}.gal figure{margin-bottom:10px}}
@media(min-width:961px){.blog-grid .post.feat{grid-column:span 2}.blog-grid .post.feat .im{height:100%;min-height:190px}.blog-grid .post.feat{flex-direction:row}.blog-grid .post.feat .im{flex:0 0 55%}.blog-grid .post.feat .bd{justify-content:center;padding:28px}.blog-grid .post.feat h3{font-size:26px}}

/* first section straight after a short hero gets its top spacing back */
.hero+.sec.tight,.hero+section.sec.tight{padding-top:96px}
@media(max-width:900px){.hero+.sec.tight{padding-top:64px}}
/* ---- homepage fixes ---- */
#finance{padding-top:0}
@media(max-width:420px){.hero .cta .btn{white-space:normal!important;height:auto!important;min-height:54px;line-height:1.2;padding:8px 10px!important}}

/* ---- area map (OpenStreetMap data, drawn for Adal) ---- */
.map.amap{position:relative;padding:0!important;min-height:0!important;aspect-ratio:1000/722;overflow:hidden!important;background:#eef3fa!important;box-shadow:var(--sh-m)}
.amap>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.amap .aglow{position:absolute;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(247,137,46,.16),rgba(247,137,46,.06) 70%,transparent);border:1.5px dashed rgba(247,137,46,.45);pointer-events:none}
.apin{position:absolute;transform:translate(-7px,-50%);display:flex;align-items:center;gap:6px;z-index:2;text-decoration:none}
.apin i{width:14px;height:14px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 2px 6px rgba(15,27,45,.35);flex:none;transition:transform .2s,background .2s}
.apin span{background:#fff;color:var(--ink);font-size:12.5px;font-weight:700;padding:4px 9px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(15,27,45,.35);white-space:nowrap;transition:background .2s,color .2s}
.apin.l{flex-direction:row-reverse;transform:translate(calc(-100% + 7px),-50%)}
.apin:hover i,.apin.on i{background:var(--org);transform:scale(1.15)}
.apin:hover span,.apin.on span{background:var(--ink);color:#fff}
.apin.base i{width:20px;height:20px;background:var(--org);border-width:4px}
.apin.base{transform:translate(-10px,-50%)}
.apin.base span{background:var(--ink);color:#fff;font-size:13.5px;padding:5px 11px}
.apin.base i{animation:apulse 2.4s ease-out infinite}
@keyframes apulse{0%{box-shadow:0 0 0 0 rgba(247,137,46,.55),0 2px 6px rgba(15,27,45,.35)}80%,100%{box-shadow:0 0 0 16px rgba(247,137,46,0),0 2px 6px rgba(15,27,45,.35)}}
@media(prefers-reduced-motion:reduce){.apin.base i{animation:none}}
.amap .map-pin{z-index:3}
.amap .attr{position:absolute;right:8px;bottom:6px;font-size:10px;color:#6b7788;background:rgba(255,255,255,.75);padding:1px 6px;border-radius:6px;z-index:3}
@media(max-width:600px){.apin span{font-size:10.5px;padding:3px 7px}.apin i{width:11px;height:11px;border-width:2.5px}.apin.base i{width:16px;height:16px;border-width:3px}.apin.base span{font-size:11.5px}.amap .map-pin{display:none}}
.apin.b{flex-direction:column;gap:3px;transform:translate(-50%,-7px)}
.hero .lbl,.why .photo .chip{display:none!important}

/* ===== gauntlet round 1 (22 Oct) ===== */
/* service strip centred */
.strip2 .wrap{justify-content:center!important}
@media(min-width:901px){.strip2 a{padding:17px 0!important;letter-spacing:-.01em}}
/* trust bar: Gas Safe and the five points on one line */
@media(min-width:1101px){
.trust .wrap{flex-wrap:nowrap!important;gap:40px!important;justify-content:space-between}
.trust .t{flex:1;display:flex!important;justify-content:space-between;flex-wrap:nowrap!important;margin-left:0!important;gap:0!important;max-width:880px}
.trust .t span{border:0!important;padding:0!important;margin:0!important;white-space:nowrap;display:flex;align-items:center;gap:9px}
.trust .t span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--org);flex:none}}
@media(min-width:961px) and (max-width:1100px){.trust .wrap{justify-content:center}.trust .t{margin-left:0!important;justify-content:center}}
/* no pill chips: plain text with a tick */
.fin-facts span,.rev-head .pl a,.step .t,.ty .for span,.sc .tag{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
.fin-facts{gap:8px 22px!important}
.fin-facts span:before,.ty .for span:before{content:"";display:inline-block;width:10px;height:6px;border-left:2px solid var(--org);border-bottom:2px solid var(--org);transform:rotate(-45deg) translateY(-3px);margin-right:9px}
.ty .for{gap:6px 16px!important}
.step .t{color:var(--blue);font-weight:700}
.rev-head .pl{gap:8px 22px!important}
.apin span{border-radius:8px}
/* headings and links: exact homepage values */
section .h2,.guar h2,#faq h2{letter-spacing:-.02em}
.bc h3,.step h3,.rg h3,.post h3,.card h3{letter-spacing:-.02em}
.go,.prose .go{font-size:15px}
.btn-o{border-color:var(--org)}
.hero .lead{color:#cfdcf5}
@media(max-width:960px){
 .pg .hero .lead{font-size:16.5px;line-height:1.55}
 .pg .hero h1{letter-spacing:-.03em}
 .cta .btn{flex:1 1 0;min-width:0;padding-left:8px!important;padding-right:8px!important;font-size:14px!important;white-space:nowrap}
 .guar{padding:30px!important}
 .fin{padding:32px 24px!important}
 .pg .hero .proof .in{padding:20px!important}
 .pg .hero .proof .num{font-size:40px}
 .bc h3,.step h3,.rg h3,.card h3{font-size:21px}}
@media(min-width:901px){.pg .strip2 a svg{width:30px;height:30px}}
.pg .hero .lead{color:#cfdcf5!important}
.strip2 a{letter-spacing:-.01em}
/* Spark Brain: no dot lists in the banner, so dividers between the trust points */
@media(min-width:1101px){.trust .t span:before{display:none!important}.trust .t span+span{border-left:1px solid rgba(255,255,255,.18)!important;padding-left:22px!important}.trust .t{gap:22px!important;justify-content:flex-end}}
/* Spark Brain: headlines max 3 lines on phones */
@media(max-width:420px){.fin h2{font-size:26px!important;line-height:1.12}}
/* hero slides 2 and 3 are H2s (one H1 rule): same colours as the original homepage */
.hero .hero-h span{color:#8ec0ff!important}.hero .hero-h span.cl{color:#6db3ff!important}.hero .hero-h span.wm{color:#ff9a4d!important}
/* areas we cover page */
.town-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.town-card h3{font-size:22px}.town-card p{margin-top:8px}
.town-links{display:flex;flex-direction:column;gap:6px;margin-top:14px}
@media(max-width:960px){.town-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.town-grid{grid-template-columns:1fr}}
.town-card:first-child{grid-column:1/-1}
/* Spark logo: bottom right of the footer, level with the lowest line of links, a bit bigger */
body>footer .ft-top{position:relative}
body>footer .ft-row .spark.ft-mob{position:absolute;right:0;bottom:48px}
@media(max-width:960px){body>footer .ft-row .spark.ft-mob{bottom:36px}}
body>footer .ft-row .spark img{height:35px!important}
@media(max-width:960px){body>footer .ft-row .spark img{height:33px!important}}
/* phone strip: three exactly equal cells, no gaps (homepage had a desktop gap leaking in) */
@media(max-width:900px){.strip2 .wrap{gap:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;padding:0 8px!important}}
/* responsive QC 22 Oct */
@media(min-width:961px) and (max-width:1180px){.nav .tel .tel-n{display:none}.nav ul{margin:0 6px!important}.nav li>a{padding:10px 10px}}
.quote .tel,.ft-tel,.hero .proof .pl a,.rev-head .pl a{min-height:44px;display:inline-flex;align-items:center}
.fin-art span,.fin-art small,.fin-art b{font-size:max(12px,1em)}
.ix-temp small{font-size:12px}
.symptoms,.stat{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))!important}.sy{min-width:0}
@media(max-width:960px){.stat{--cols:3}}@media(max-width:600px){.symptoms{--cols:1}}
.card a[href^="tel:"],.sy a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
/* mobile menu: service tiles with icons, then plain links */
@media(max-width:960px){
.nav .mnav{padding:14px 16px 20px!important;gap:0}
.mnav .mlbl{color:#8ec0ff;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:4px 4px 10px}
.mnav .mtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mnav a.mt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:14px;background:rgba(255,255,255,.04);font-size:15px!important}
.mnav a.mt svg{width:30px;height:30px;fill:none;stroke:#8ec0ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mnav a.mt svg .acc{stroke:var(--org)}
.mnav a.mt:active{background:rgba(255,255,255,.1)}
.mnav .mlinks{display:flex;flex-direction:column;margin-top:14px}
.mnav .mlinks a{padding:13px 4px!important;border-bottom:1px solid rgba(255,255,255,.08)}
.mnav .mlinks a:last-child{border-bottom:0}
.mnav a.mtel{margin-top:12px!important}}
/* review notes 26 Oct: reviews counter never shifts the stars and text */
.proof .num [data-count]{display:inline-block;min-width:2.42em;font-variant-numeric:tabular-nums;white-space:nowrap}
.proof .num{align-items:center!important}
.proof .num .rvt{display:flex;flex-direction:column;justify-content:center;gap:3px}
.proof .num .rvt .stars{line-height:1;display:block}
.proof .num .rvt small{line-height:1.25;margin:0}
@media (min-width:961px){.proof .in{padding:20px 44px!important}}
/* map credit: required by OpenStreetMap's licence, kept small and quiet */
.attr{font-size:9.5px!important;opacity:.45!important}
.proof .num .rvt .stars{order:0!important}.proof .num .rvt small{order:1!important}
#reviews{padding-top:64px!important}
@media (min-width:961px){.proof .in{justify-content:center!important;gap:20px 72px!important;padding:22px 72px!important}.proof .pl{margin-left:0!important}}
/* finance heading sits on two tidy lines */
@media (min-width:961px){.fin-copy{max-width:660px!important}.fin-copy h2{font-size:42px!important;text-wrap:balance;max-width:none!important}}
.fin-copy h2{text-wrap:balance}
/* four-photo job grid: two tall, two stacked */
.work.w4 figure:nth-child(4){grid-column:3;grid-row:1 / span 2}
.work.w4 figure:nth-child(2),.work.w4 figure:nth-child(3){grid-column:2}
@media (max-width:760px){.work.w4 figure:nth-child(4){grid-column:span 2;grid-row:auto}.work.w4 figure:nth-child(2),.work.w4 figure:nth-child(3){grid-column:auto}}
details p a,.faq p a{color:var(--org,#f7892e);font-weight:700;text-decoration:underline;text-underline-offset:3px}
img[src*="quote-tool-screen"]{object-position:top center!important}

/* "New" badge on air conditioning in the menus */
.newb{display:inline-block;margin-left:6px;font-family:inherit;font-style:normal;font-weight:800;font-size:9px;line-height:1;letter-spacing:.08em;text-transform:uppercase;background:var(--org,#f7892e);color:#0b1220;padding:3px 5px 2px;border-radius:4px;position:relative;top:-8px}
.mi b .newb{top:-6px}
@media(max-width:900px){.strip2 a{position:relative}.strip2 .newb{position:absolute;top:9px;left:calc(50% + 20px);margin:0}}
.mt{position:relative}.mt .newb{position:absolute;top:8px;right:8px;margin:0}

/* review bar tidy (27 Oct): + level with 300, stars tight to their text, platform labels sized to the logos */
.proof .num .cnt{display:inline-flex;align-items:center;white-space:nowrap}
.proof .num .cnt [data-count]{min-width:1.85em;text-align:right;display:inline-block;font-variant-numeric:tabular-nums}
.proof .num .cnt .plus{display:inline-block;transform:translateY(-.1em);margin-left:.02em}
.proof .num .rvt .stars,.proof .num .stars{line-height:.8!important;display:block;margin:0 0 6px}
.proof .pl a,.rev-head .pl a{font-size:18px!important;font-weight:700!important;line-height:1}
.proof .pl img{height:28px!important}
@media(max-width:700px){.proof .pl a,.rev-head .pl a{font-size:17px!important}}
/* emergency "what to do first" and similar tiles: balanced, bold numbers stay inline */
.sy{align-items:center!important}
.sy span b{display:inline!important;font-size:inherit;white-space:nowrap}
.sy span{text-wrap:pretty}
/* how it works: the small tag always sits on the same line across cards */
.steps .step{display:flex;flex-direction:column}
.steps .step .bd{display:flex;flex-direction:column;flex:1}
.steps .step .bd .t{margin-top:auto;padding-top:14px}
/* repairs page call card and area links */
.card.callnow{text-align:left}
.card.callnow h3{font-size:28px;margin-bottom:6px}
.card.callnow .btn{width:100%;justify-content:center;margin-top:14px;font-size:18px;padding:18px 22px}
.arealink{display:block;margin-top:14px;text-align:center;font-weight:700;font-size:15px;color:var(--blue,#1f6fd6);text-decoration:underline;text-underline-offset:3px}
.faqlink{font-weight:700;text-decoration:underline;text-underline-offset:3px;color:inherit;white-space:nowrap}
.steps .step .bd p{margin-bottom:16px}
.proof .pl a{gap:8px!important}

.bt-s{display:none}
@media(max-width:600px){.bt-l{display:none}.bt-s{display:inline}.cta .btn{white-space:nowrap}}
.bt-s,.bt-l{white-space:nowrap}
@media(max-width:380px){.hero .cta,.slide .cta{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}.hero .cta .btn,.slide .cta .btn{width:100%!important}}

/* review bar (28 Oct): one design on every page */
.proof.prf .cdbar{background:#fff;color:#111a2b;border-radius:999px;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:30px;padding:16px 0 16px 44px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(0,0,0,.45)}
.proof.prf .n{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;display:grid;gap:8px;white-space:nowrap;color:#111a2b}
.proof.prf .n sup{font-size:.6em;vertical-align:.32em;margin-left:1px}
.proof.prf .n [data-count]{display:inline-block;min-width:1.85em;text-align:right;font-variant-numeric:tabular-nums}
.proof.prf .s{color:#f5a623;letter-spacing:2px;font-size:17px;line-height:.8}
.proof.prf blockquote{border-left:3px solid #f7892e;padding-left:22px;font-size:20px;font-weight:600;line-height:1.35;white-space:nowrap;margin:0;color:#111a2b}
.proof.prf cite{display:block;font-style:normal;font-size:13px;color:#5c6779;margin-top:6px;font-weight:600}
.proof.prf .mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);align-self:stretch;display:flex;align-items:center}
.proof.prf .tr{display:flex;gap:48px;width:max-content;animation:prfmq 16s linear infinite;padding:0 24px}

.proof.prf .pl{display:inline-flex!important;align-items:center;gap:8px;color:#1f2a3c;font-weight:700;font-size:17px;text-decoration:none;min-height:44px}
.proof.prf .pl img{height:24px;width:auto}.proof.prf .pl img.ct{height:22px}
@keyframes prfmq{to{transform:translateX(-33.333%)}}
@media(max-width:900px){.proof.prf .cdbar{grid-template-columns:auto 1fr;border-radius:28px;padding:16px 0 12px 22px;gap:18px}.proof.prf .mq{grid-column:1/-1;border-top:1px solid #edf0f5;padding-top:6px;margin-right:0}.proof.prf blockquote{white-space:normal;font-size:16px;padding-right:18px}.proof.prf .n{font-size:38px}}
@media(prefers-reduced-motion:reduce){.proof.prf .tr{animation:none}}
.proof.prf .cdbar{border-radius:999px!important;text-align:left}
.proof.prf .pl,.proof.prf .pl b{flex-direction:row!important;white-space:nowrap}
.proof.prf .pl b{display:inline!important;font-size:17px;font-weight:700}
.proof.prf .pl img{display:inline-block!important;flex:none}
.proof.prf .pl img.ct{display:inline-block!important;width:auto!important;opacity:1!important;visibility:visible!important}
@media(max-width:900px){.proof.prf .cdbar{border-radius:28px!important}}
.proof.prf .pl{flex-wrap:nowrap!important;flex:none!important;margin:0!important}.proof.prf .pl img{max-width:none!important}.proof.prf .pl img.ct{height:22px!important}
.proof.prf .n{justify-items:start;text-align:left!important}.proof.prf .n [data-count]{min-width:0!important;text-align:left!important}.proof.prf .cdbar{margin:0!important;width:100%}
.proof.prf .cdbar{padding:16px 0 16px 44px!important;gap:30px!important;justify-content:stretch!important}@media(max-width:900px){.proof.prf .cdbar{padding:16px 0 12px 22px!important;gap:18px!important}}
/* homepage bathroom slide: round photo (28 Oct) */
.vis[data-i="2"] .photo,.vis[data-i="2"] .photo img{border-radius:50%!important;aspect-ratio:1/1;object-fit:cover;overflow:hidden}
/* desktop service strip: underline spans the whole tab, so neighbouring tabs would join up (28 Oct) */
@media(min-width:901px){.strip2 .wrap{gap:0!important}.strip2 a{padding-left:18px!important;padding-right:18px!important}.strip2 a:after{left:0!important;right:0!important}}
@media(min-width:901px) and (max-width:1180px){.strip2 a{padding-left:13px!important;padding-right:13px!important}}
.proof.prf .n{justify-items:center!important;text-align:center!important}
.proof.prf .n>span:first-child{position:relative;display:inline-block}.proof.prf .n sup{position:absolute;left:100%;top:.12em;vertical-align:0!important;margin-left:2px}
.proof.prf svg.s{display:block;width:96px;height:19px;margin:0 auto}.proof.prf .n>span:first-child{margin-right:.28em}
.proof.prf .n sup{position:static!important;margin-left:1px!important;vertical-align:.32em!important}.proof.prf .n>span:first-child{margin-right:0!important}
.newb{border-radius:999px!important;padding:3px 7px 2px!important}
/* ===== tablet QC (28 Oct): hero visuals sized to fit, brush stroke kept behind the product, compact service tiles ===== */
@media(min-width:600px) and (max-width:960px){
 .visual{height:360px!important;overflow:hidden!important;margin-bottom:22px!important}
 .vis .stroke{width:78%!important;left:11%!important}
 .vis .prod{max-height:86%!important}
 .vis .prod.ac{width:min(66%,480px)!important}
 .vis .photo{height:84%!important}
 .bento{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
 .bc.big{grid-column:1/-1!important;flex-direction:row!important;min-height:0!important}
 .bc.big .tx{flex:1!important}
 .bc.big .pic{flex:0 0 42%!important;height:auto!important;min-height:240px!important}
 .bc.sm{grid-column:auto!important}
 .bc.sm .th{height:150px!important}
 .bc.sm .bt{padding:18px 18px 20px!important}
 .bc.sm h3{font-size:19px!important}
}
@media(max-width:599px){
 .visual{overflow:hidden!important}
 .vis .stroke{width:92%!important;left:4%!important}
 .vis .prod.ac{width:min(84%,420px)!important}
}
/* NEW badge sits above the end of "Air Conditioning" so it adds no width (desktop) */
@media(min-width:901px){.strip2 a .lg,.strip2 a>span:not(.sm){position:relative}.strip2 .newb{position:absolute!important;left:auto!important;right:-14px!important;top:-11px!important;margin:0!important;font-size:8.5px!important;padding:2px 6px 1px!important}}
@media(min-width:961px) and (max-width:1180px){.strip2 a{padding-left:9px!important;padding-right:9px!important;font-size:14px!important;gap:8px!important}.strip2 a svg{width:24px!important;height:24px!important}}
@media(min-width:961px){.vis .photo{height:78%!important;max-height:440px}}
/* inner page heroes, tablet: product and stroke in proportion */
@media(min-width:600px) and (max-width:960px){
 .hero .visual{height:340px!important;overflow:hidden!important}
 .hero .visual>.stroke{width:74%!important;left:13%!important;right:auto!important;top:50%!important;transform:translateY(-50%) rotate(-12deg)!important;max-width:none!important}
 .hero .visual>.prod{max-height:82%!important;width:auto!important;position:relative;z-index:2}
 .hero .visual>.prod.ac{width:min(62%,460px)!important;max-height:none!important}
 .hero .visual>.photo,.hero .visual .ph{height:86%!important;width:auto!important;aspect-ratio:4/3;margin:0 auto}
}
/* no hard clipping of the brush stroke: let it breathe, but keep it small enough to sit inside the space */
@media(max-width:960px){.visual,.hero .visual{overflow:visible!important}}
@media(min-width:600px) and (max-width:960px){.vis .stroke{width:66%!important;left:17%!important}.hero .visual>.stroke{width:66%!important;left:17%!important}}
@media(max-width:599px){.vis .stroke{width:84%!important;left:8%!important}}
@media(max-width:900px){.proof.prf .tr{gap:30px!important}}
@media(max-width:960px){
 .vis .stroke,.hero .visual>.stroke{left:50%!important;right:auto!important;width:min(80%,400px)!important}
 .vis .stroke{transform:translate(-50%,-50%) rotate(-14deg)!important}
 .vis .stroke.s1{transform:translate(-50%,-50%) rotate(-10deg) scaleX(-1)!important}
 .vis .stroke.s2{transform:translate(-50%,-50%) rotate(-18deg)!important}
 .hero .visual>.stroke{transform:translate(-50%,-50%) rotate(-12deg)!important}
}
@media(max-width:420px){.vis .stroke,.hero .visual>.stroke{width:84%!important}}
@media(max-width:960px){.vis .stroke.s2{width:min(72%,350px)!important;transform:translate(-50%,-50%) rotate(-12deg)!important}}
/* pill nav matches the normal nav exactly, so the switch is seamless both ways */
@media(min-width:961px){.nav.sc .wrap{max-width:1180px!important;height:88px!important;padding:0 24px!important}.nav.sc .logo img{height:50px!important}.nav.sc .btn{height:46px!important}}
@media(min-width:961px) and (max-width:1199px){.nav.sc .wrap{max-width:calc(100% - 20px)!important;padding:0 14px!important}}
@media(max-width:960px){.nav.sc .wrap{height:72px!important;padding:0 14px!important}.nav.sc .logo img{height:40px!important}.nav.sc .mnav{top:84px!important}}
.nav .wrap,.nav .logo img,.nav .btn{transition:background-color .3s,border-radius .3s,box-shadow .3s!important}
.nav{transition:background .3s,padding-top .3s!important}
.proof.prf .mq:hover .tr{animation-play-state:running!important}
/* review logos: same icon box, same text, all centred on one line */
.proof.prf .pl{gap:9px!important;align-items:center!important;line-height:1!important}
.proof.prf .pl img.ic{height:24px!important;width:24px!important;object-fit:contain;position:static!important;display:block!important}
.proof.prf .pl img.ct2{width:26px!important;height:20px!important}
.proof.prf .pl b{font-size:17px!important;line-height:24px!important;display:block!important}
.proof.prf .pl img.ic{position:relative!important;top:1px}
.proof.prf .pl img.ct2{width:31px!important;height:20.4px!important;top:1.5px}
/* QC 30 Oct: stat tiles. Four tiles sit 2 x 2 (as the inline 1fr 1fr intended); three tiles on phones go 2 + 1 wide so long words like "Doncaster" are not cut off */
.stat:has(> div:nth-child(4):last-child){--cols:2}
@media(max-width:599px){.stat:has(> div:nth-child(3):last-child){--cols:2}.stat > div:nth-child(3):last-child{grid-column:1/-1}}
/* QC: accreditation logos on phones wrap 3 + 2 instead of 3 + 1 + 1 */
@media(max-width:599px){.brands{gap:28px 24px!important;max-width:340px;margin-left:auto;margin-right:auto}.brands img:last-child:not(.tall){height:26px!important}}
/* QC: hero button labels such as "Get a plumbing quote" fit on one line at 390px */
@media(max-width:420px){.hero .cta .btn{padding-left:6px!important;padding-right:6px!important}}
/* QC: eight-photo galleries balance as 4 columns of 2 instead of 3 + 3 + 2 (desktop only; tablet keeps 3 so captions stay readable) */
@media(min-width:961px){.gal:has(> figure:nth-child(8):last-child){columns:4}}
/* QC: avoid single-word last lines in body copy */
p,li,blockquote,cite,figcaption{text-wrap:pretty}
/* repair or replace: call card taller and centred against the text */
@media(min-width:901px){#repair-or-replace .two{align-items:center}#repair-or-replace .sticky{position:static;align-self:center}#repair-or-replace .callnow{padding:60px 44px}#repair-or-replace .callnow h3{font-size:32px;margin-bottom:10px}#repair-or-replace .callnow p{font-size:18px}#repair-or-replace .callnow .btn{margin-top:26px}}
/* ---- 30 Oct review (Lewis) ---- */
/* tiles: hover shadow fades in instead of jumping (the reveal transition was overriding it) */
.sy.rv{transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.sy.rv.d1{transition-delay:.08s,.08s,0s}.sy.rv.d2{transition-delay:.16s,.16s,0s}
/* emergency: "What counts as an emergency?" text centred against the call-out card */
@media(min-width:901px){#what .two{align-items:center}#what .sticky{position:static;align-self:center}}
/* air con dial: no box behind the paint strokes */
#dial .visual .pane{display:none!important}
/* about: four tiles centred against the "About Adal" text; flame symbol instead of a photo */
@media(min-width:901px){#story .two{align-items:center}}
#why .photo.flame{background:none!important;box-shadow:none!important;overflow:visible;display:grid;place-items:center}
#why .photo.flame img{width:auto;height:min(380px,30vw);object-fit:contain;filter:drop-shadow(0 24px 32px rgba(15,27,45,.12))}
@media(max-width:960px){#why .photo.flame{aspect-ratio:auto!important;height:auto}#why .photo.flame img{height:220px}}
/* accreditation strip: Yell next to Checkatrade */
@media(min-width:600px){.brands:has(img.yell){gap:40px 44px}}
@media(max-width:599px){.brands:has(img.yell){gap:26px 18px!important;max-width:360px}.brands img.yell:last-child{height:30px!important}.brands img[alt="Checkatrade"]{height:22px!important}}
/* "How it works" with the online quote screenshot: step numbers sit on the photo edge so they never cover the logo or the question */
.steps:has(img[src*="quote-tool-screen"]) .step .im{position:static}
.steps:has(img[src*="quote-tool-screen"]) .step .n{top:178px;left:24px;z-index:2}
.steps:has(img[src*="quote-tool-screen"]) .step .bd{padding-top:38px}
/* contact: form straight after a short intro */
.contact-hero{padding-bottom:34px!important}
.contact-hero .grid{min-height:0}
#ways .sy a[href^="tel:"]{display:inline-block;min-height:0;padding:6px 0;margin:-6px 0;font-weight:700}
#ways .sy a[href^="mailto:"]{overflow-wrap:break-word}
#ways .proof{margin-top:30px}
/* areas: Google Maps button under the map */
.map-cta{display:flex;justify-content:center;margin-top:22px}
.map-cta .btn svg{width:18px;height:18px}
/* policies: headings and lists in the policy text */
.policy .prose h2{font-size:24px;margin:34px 0 10px;letter-spacing:-.01em}
.policy .prose h3{font-size:19px;margin:26px 0 8px}
.policy .prose ul{margin:10px 0 16px 22px;list-style:disc}
.policy .prose li{margin:4px 0}
.policy .prose .pmeta{color:var(--mute);font-size:15px}
.contact-hero+#quote{padding-top:44px!important}
@media(max-width:960px){.contact-hero+#quote{padding-top:24px!important}.contact-hero+#quote .quote>div:first-child p+p,.contact-hero+#quote .quote>div:first-child .tel{display:none}}
.policy .prose>:first-child{margin-top:0!important}.policy .prose>:last-child{margin-bottom:0!important}

/* responsive fixes 2 Nov 2026 */
@media (max-width:1024px),(hover:none){.form input,.form select,.form textarea{font-size:16px}}
@media (max-width:600px){.fin-copy .cta{flex-direction:column;align-items:stretch}.fin-copy .cta .btn{width:100%}}
@media (max-width:960px) and (max-height:900px){html body .hero .visual{height:min(330px,30vh)!important;margin-bottom:0!important}}
@media (max-width:960px) and (max-height:800px){html body .hero .visual{height:min(260px,26vh)!important}}
@media (max-width:960px) and (max-height:700px){html body .hero .visual{height:22vh!important}html body .hero h1,html body .slide h1{font-size:clamp(28px,8.2vw,34px)}html body .hero p.lead,html body .slide p.lead{margin:10px 0 16px}}
@media (min-width:961px) and (orientation:portrait){.hero{min-height:0!important}.hero .grid{min-height:0!important;padding:40px 0}}
.sy a,.sy span,.prose a,.prose li{overflow-wrap:anywhere}
.sy *{min-width:0}.sy a,.sy span{white-space:normal}a[href^="mailto:"]{overflow-wrap:anywhere}

/* 3 Nov 2026 (Lewis): mobile hero, paint, slider dashes and headline never overlap */
@media (max-width:960px){
 html body .hero .visual{height:clamp(190px,30vh,280px)!important;margin-bottom:40px!important}
 html body .hero .vis .prod{max-height:74%!important}
 html body .hero .vis .prod.ac{width:min(76%,380px)!important;max-height:none!important}
 html body .hero .vis .photo{height:76%!important}
 html body .hero .vis .stroke{width:min(70%,330px)!important}
 html body .hero .tabs{bottom:-27px!important}
}
/* 3 Nov 2026 (Lewis): review bar shows straight away, no fade in on scroll */
.proof.prf .cdbar.rv{opacity:1!important;transform:none!important;transition:none!important}
/* 3 Nov 2026 (Lewis): review logos sit closer, so two or more show at once on a phone */
.proof.prf .pl{width:auto!important;max-width:none!important}
@media (max-width:900px){.proof.prf .tr{gap:34px!important;padding:0 17px!important}}

/* 4 Nov 2026 (Lewis): responsive sweep fixes, batch 1 */
/* No scroll load-in animations anywhere. Also makes the second row of review cards show on phones (it never faded in). */
html body .rv,html body .rev:not(.mtrack){opacity:1!important;transform:none!important;transition:none!important}
html body .mtrack.rev{opacity:1!important}
/* Slider dashes: bigger invisible tap area, same look */
html body .hero .tabs .tab::after{content:"";position:absolute;left:-4px;right:-4px;top:-15px;bottom:-15px}
/* Pay monthly buttons were squashed to 22px tall on phones */
@media (max-width:600px){html body .fin-copy .cta .btn{flex:0 0 auto!important;min-height:52px}}
/* Review logos under the hero: at least two show at once on phones */
@media (max-width:480px){html body .proof.prf .tr{gap:18px!important;padding:0 10px!important}html body .proof.prf .pl{font-size:14px!important;gap:6px!important}html body .proof.prf .pl img{height:18px!important;width:18px!important}html body .proof.prf .mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)!important;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)!important}}
/* Review cards: narrower edge fades on phones so the text isn't washed out */
@media (max-width:600px){html body .marq::before,html body .marq::after{width:24px!important}}
/* Hero: the three slides share one space on phones and upright tablets, so the page no longer jumps when the slide changes */
@media (max-width:960px){html body .hero .slides{display:grid!important}html body .hero .slides>.slide{display:flex!important;grid-area:1/1;visibility:hidden}html body .hero .slides>.slide.on{visibility:visible}}
/* Guarantee card no longer spills out of its box on very small phones */
@media (max-width:400px){html body .guar{grid-template-columns:minmax(0,1fr)!important;padding:24px 20px!important}html body .guar .btn{white-space:normal}}
/* Fewer single words left alone on the last line of headings and paragraphs */
html body h1,html body h2,html body h3,html body p,html body li{text-wrap:pretty}

/* 4 Nov 2026 (Lewis): responsive sweep fixes, batch 2 */
/* Headings back to balanced wrapping (batch 1's "pretty" split the coloured phrases); a coloured phrase now never splits across two lines */
html body h1,html body h2,html body h3{text-wrap:balance}
html body h1 .wm,html body h1 .cl,html body .hero-h .wm,html body .hero-h .cl{display:inline-block}
/* Review logos under the hero: smaller on phones so two show at once (beats the older 17px and 24px rules) */
@media (max-width:480px){html body .proof.prf .pl b{font-size:14px!important;line-height:18px!important}html body .proof.prf .pl img.ic,html body .proof.prf .pl img.ct2{width:18px!important;height:18px!important}}
/* Recent work photo grid: no empty holes on upright iPads and phones turned sideways (the 2-column reset now matches the 900px switch) */
@media (max-width:900px){html body .work.w4 figure:nth-child(4){grid-column:span 2;grid-row:auto}html body .work.w4 figure:nth-child(2),html body .work.w4 figure:nth-child(3){grid-column:auto}}
/* Quote form: same padding on both sides on small phones and iPad Pro */
html body .form input:not([type=checkbox]):not([type=radio]),html body .form select,html body .form textarea{width:100%;min-width:0}
html body .quote>*,html body .form>*{min-width:0}
/* Pay monthly cards: "Warm now." no longer hidden behind the orange card on phones, and never splits onto two lines */
@media (max-width:600px){html body .fin-art{height:260px}html body .fin-now{top:0}html body .fin-later{bottom:0}}
html body .fin-art strong{white-space:nowrap}
/* "How it works" photos on upright iPads and sideways phones: show the photo instead of a thin strip that cuts heads off */
@media (min-width:601px) and (max-width:960px){html body .step .im{height:auto!important;aspect-ratio:16/9}html body .step .im img{object-position:50% 30%}}
/* Problem and contact cards: two per row on upright iPads instead of three squeezed ones */
@media (min-width:601px) and (max-width:900px){html body .symptoms{--cols:2}}
/* Reviews header: the paint stroke sits above the review counts instead of behind them */

/* Small tidy-ups: readable NEW badge, article text starts level with the side card, blog "Read" links line up */
html body .newb{font-size:10.5px!important}
html body .prose>:first-child{margin-top:0}
html body .post .go{margin-top:auto}
/* 4 Nov 2026 (Lewis): review logos on the smallest phones (360 and under) */
@media (max-width:360px){html body .proof.prf .tr{gap:12px!important;padding:0 6px!important}html body .proof.prf .pl b{font-size:12.5px!important}html body .proof.prf .pl img.ic,html body .proof.prf .pl img.ct2{width:16px!important;height:16px!important}html body .proof.prf .pl{gap:4px!important}}

/* 4 Nov 2026 (speed): images now carry width and height so the browser can hold their space while they load. This zero-specificity rule keeps every image drawn at exactly the size it was before. */
:where(img[width][height]){width:auto;height:auto}

/* 4 Nov 2026: review rows keep moving on hover; press to stop and drag (assets/marquee.js moves them) */
html body .marq.js .mtrack{animation:none!important;will-change:transform}
html body .marq.js{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
html body .marq.js.held{cursor:grabbing}
html body .marq.js img{-webkit-user-drag:none}

/* 4 Nov 2026: air con page dial, same look and feel as the homepage one, no box or outline */
.ac-dial{display:flex;align-items:center;gap:16px;margin-top:28px;font-weight:700;font-size:15px}
.ac-dial button{all:unset;cursor:pointer;padding:6px 2px;-webkit-tap-highlight-color:transparent}
.ac-dial .c{color:var(--blue)}.ac-dial .w{color:var(--org)}
.ac-dial input{flex:1;appearance:none;-webkit-appearance:none;height:40px;margin:0;background:transparent;cursor:pointer;outline:0;border:0;box-shadow:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.ac-dial input:focus{outline:0}
.ac-dial input::-webkit-slider-runnable-track{height:10px;border-radius:99px;background:linear-gradient(90deg,#6db3ff,#ffb46b);border:0}
.ac-dial input::-moz-range-track{height:10px;border-radius:99px;background:linear-gradient(90deg,#6db3ff,#ffb46b);border:0}
.ac-dial input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:#fff;border:0;box-shadow:0 6px 18px rgba(15,27,45,.28),0 0 0 6px rgba(255,255,255,.55);transition:transform .15s}
.ac-dial input::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 6px 18px rgba(15,27,45,.28),0 0 0 6px rgba(255,255,255,.55);transition:transform .15s}
.ac-dial input:active::-webkit-slider-thumb{transform:scale(1.12)}
.ac-dial input:active::-moz-range-thumb{transform:scale(1.12)}
.ac-dial input:focus-visible::-webkit-slider-thumb{box-shadow:0 6px 18px rgba(15,27,45,.28),0 0 0 4px var(--org)}
.ac-dial input:focus-visible::-moz-range-thumb{box-shadow:0 6px 18px rgba(15,27,45,.28),0 0 0 4px var(--org)}
#dial .visual .pane{transition:background .25s}
#dial .visual .stroke{transition:opacity .25s}

/* 4 Nov 2026: paint strokes alternate right and left down each page and never touch content.
   Checked at phone, iPad and desktop sizes: phones and tablets have no side margin, so every stroke ended up
   behind text or cards there, and they are switched off below 1025px. On desktop each stroke sits just outside
   the 1180px content column, so only the margin shows, and it stays inside its own section. */
html body .deco{z-index:-1!important}
@media (max-width:1024px){html body .deco,html body .dstroke{display:none!important}}
@media (min-width:1025px){
  html body section:has(>.deco){overflow-x:clip;overflow-y:clip}
  html body .deco{--dw:clamp(300px,24vw,620px);width:var(--dw)!important;top:clamp(40px,30%,260px)!important}
  /* 9 Nov 2026: strokes hang half off the screen edge, and grow on big screens; on smaller desktops they are pushed further out so they never reach the 1180px content column */
  html body .deco.dr{left:auto!important;right:min(calc(var(--dw) * -0.5),calc(50% - 590px - var(--dw)))!important}
  html body .deco.l{right:auto!important;left:min(calc(var(--dw) * -0.5),calc(50% - 590px - var(--dw)))!important}
}

/* 4 Nov 2026: "See an estimated price online" step: the whole card opens the quote tool */
a.step.step-link{color:inherit;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
a.step.step-link:hover{transform:translateY(-3px)}
a.step.step-link .step-foot{margin-top:auto;padding-top:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
a.step.step-link .step-foot .t{margin:0;padding:0}
a.step.step-link .step-btn{height:42px;padding:0 18px;font-size:14px;margin-bottom:-12px}

/* 4 Nov 2026: boiler range cards line up across the row: boiler, label, name, description and guarantee each share one row height */
@media (min-width:761px){
  html body .range{grid-template-rows:auto;row-gap:0}
  html body .range .rg{display:grid;grid-row:span 5;grid-template-rows:subgrid;justify-items:center;align-items:start;row-gap:8px}
  html body .range .rg h3{align-self:center;text-wrap:balance}
  html body .range .rg .gy{align-self:end}
}

/* 4 Nov 2026: menu and service bar words a touch more open (the font sits tight at this size) */
html body nav.nav ul>li>a,html body nav.nav ul>li>button,html body .strip2 a,html body .mega .mi b{letter-spacing:.012em!important}

/* 4 Nov 2026: bathroom page banner matches the homepage bathroom slide (round photo on the blue stroke) */
html body .hero .visual>.photo.circ{height:88%!important;width:auto!important;aspect-ratio:1/1!important;border-radius:50% 50% 50% 50%/48% 48% 52% 52%!important;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45)!important;margin:0 auto;position:relative;z-index:2}
html body .hero .visual>.photo.circ img{width:100%;height:100%;object-fit:cover}
/* 5 Nov 2026: round bathroom photo sits dead centre of the banner picture on every screen (it drifted right on phones) */
html body .hero .visual>.photo.circ{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important}
html body .gbrands img.wb-ap{height:34px!important;width:auto!important;max-height:none!important}
/* 5 Nov 2026 (Lewis): scrolled nav. Logo lifts so the words sit in the middle of the bar (the flame tip was doing the centring), and the quote button gets room from the edge */
.nav .logo img{transition:transform .35s cubic-bezier(.2,.8,.2,1)!important}
.nav.sc .logo img{transform:translateY(-4px)}
@media(max-width:960px){.nav.sc .logo img{transform:translateY(-3px)}}
@media(min-width:961px){.nav.sc .wrap{gap:16px!important;padding:0 22px 0 26px!important}}
/* mobile menu tiles: the scrolled bar turns off taps on everything but the bar, so turn them back on for the open menu */
.nav.sc .mnav{pointer-events:auto}
/* mobile service strip runs edge to edge */
@media(max-width:960px){.strip2 .wrap{padding:0!important;max-width:none!important}}
/* homepage air con dial: same white thumb as the air con page */
.ix-dial input{height:10px!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ix-dial input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border:0!important;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(15,27,45,.28),0 0 0 6px rgba(255,255,255,.55)!important;transition:transform .15s}
.ix-dial input::-moz-range-thumb{width:30px;height:30px;border:0!important;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(15,27,45,.28),0 0 0 6px rgba(255,255,255,.55)!important}
.ix-dial input:active::-webkit-slider-thumb{transform:scale(1.12)}
/* homepage tiles: air con unit a touch right, toilet centred with room above, service photo shows more of the analyser */
@media(min-width:961px){.bc.big.ix-ac .pic .ix-unit{transform:translateX(6%)}}
.ix-bath .th img.bath-photo{left:-6%!important;right:auto!important;width:106%!important;object-position:50% 50%!important}
.ix-svc .th img.svc-photo{object-position:50% 38%!important}
@media(max-width:960px){.ix-bath .th img.bath-photo{object-position:50% 45%!important}}

/* 9 Nov 2026: on tall big screens (1440p monitors) the full-height hero left a large empty band under the reviews card; cap it */
@media (min-width:1025px) and (min-height:1001px){.pg .hero:has(.proof){min-height:min(calc(100vh - var(--nh,88px) - var(--sth,66px)),900px)}}
/* 9 Nov 2026: footer links were 21px tall on phones, too small to tap reliably */
@media (max-width:700px){.ft-col a{display:inline-block;padding:7px 0}.ft-col .ft-soc a{display:grid;padding:0}}
/* 9 Nov 2026: service page heroes match the homepage: content centred in the space, reviews card sits at the bottom of the banner */
@media (min-width:961px){
  .pg .hero:has(.proof){justify-content:flex-start}
  .pg .hero:has(.proof)>.wrap{flex:1 1 0%;display:flex;flex-direction:column;width:100%}
  .pg .hero:has(.proof)>.wrap>.grid{flex:1 1 0%;align-content:center;align-items:center}
  .pg .hero:has(.proof)>.wrap>.proof{margin-top:30px}
}

/* FCA finance disclosure, shown on every page (Az, TradeHelp, 10 Nov 2026) */
body>footer .ft-fca{grid-column:1/-1;padding:22px 0 30px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.62);font-size:12.5px;line-height:1.6}
body>footer .ft-fca p{margin:0 0 6px;max-width:none}
body>footer .ft-fca b{color:rgba(255,255,255,.85);font-weight:600;letter-spacing:.02em}
/* trust bar below desktop: tidy grid with dots, no dividers (10 Nov 2026, "24 hour emergency call-out" is longer) */
@media(max-width:1100px){
.trust .wrap{justify-content:center}
.trust .t{display:grid!important;grid-template-columns:repeat(3,auto);justify-content:center;gap:12px 32px!important;margin-left:0!important;width:100%;max-width:none}
.trust .t span{border:0!important;padding:0!important;margin:0!important;display:flex!important;align-items:center;gap:9px;white-space:nowrap;line-height:1.35}
.trust .t span:before{content:""!important;display:block!important;width:6px;height:6px;border-radius:50%;background:var(--org);flex:none}}
@media(max-width:700px){
.trust .wrap{justify-content:flex-start}
.trust .t{grid-template-columns:1fr!important;justify-content:stretch;gap:11px!important}
.trust .t span{white-space:nowrap;align-items:center;font-size:15px}
.trust .t span:before{width:14px!important;height:8px!important;border-radius:0!important;background:none!important;border-left:2px solid var(--org);border-bottom:2px solid var(--org);transform:rotate(-45deg) translateY(-2px)}}
/* Emergency Plumber in the menus and trust bar (10 Nov 2026) */
.trust .t a.t-em{color:inherit;text-decoration:none}
.trust .t a.t-em:hover{color:#fff;text-decoration-color:var(--org)}
@media(min-width:961px){.mega-in{grid-template-columns:repeat(7,150px)!important}}
@media(min-width:961px) and (max-width:1180px){.mega-in{grid-template-columns:repeat(7,124px)!important}}
.mi-pic.em{background:linear-gradient(160deg,#fff1e6,#ffd2b0)!important}
.mi-badge.em247{position:absolute;top:8px;right:8px;background:var(--org);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:3px 7px;line-height:1}
.mnav a.mt[href*="emergency"]{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px;border-color:rgba(245,130,32,.45)!important;background:rgba(245,130,32,.1)}
.gal.eg{display:grid!important;columns:auto;grid-template-columns:repeat(4,1fr);gap:14px}
.gal.eg figure{margin:0;aspect-ratio:3/4}
@media(max-width:900px){.gal.eg{grid-template-columns:1fr 1fr;gap:10px}.gal.eg figcaption{font-size:12px;left:8px;right:8px;bottom:8px}}
/* emergency page: two real jobs told left to right with arrows (10 Nov 2026) */
.eg-job{margin-top:34px}
.eg-job+.eg-job{margin-top:44px}
.eg-lbl{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.eg-lbl:before{content:"";width:22px;height:3px;border-radius:3px;background:var(--org)}
.eg-row{display:grid;align-items:center;gap:0}
.eg-row.r4{grid-template-columns:1fr 56px 1fr 56px 1fr 56px 1fr}
.eg-row.r3{grid-template-columns:1fr 56px 1fr 56px 1fr}
@media(min-width:901px){.eg-job.r3{width:calc((100% - 168px)*.75 + 112px);margin-left:auto;margin-right:auto}}
.eg-row figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#dfe4ec;box-shadow:var(--sh-m)}
.eg-row figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.eg-row figure:hover img{transform:scale(1.04)}
.eg-row figcaption{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(15,27,45,.84);color:#fff;font-size:13px;font-weight:600;line-height:1.35;padding:8px 11px;border-radius:10px;backdrop-filter:blur(4px)}
.eg-arr{justify-self:center;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ff9a3c,#f26b0f);box-shadow:0 8px 18px -6px rgba(242,107,15,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.eg-arr svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
.eg-row.r4,.eg-row.r3{display:flex;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -24px;padding:4px 24px 14px;gap:0}
.eg-row:after{content:"";flex:0 0 24px}
.eg-row::-webkit-scrollbar{display:none}
.eg-row figure{flex:0 0 64vw;max-width:300px;scroll-snap-align:start;border-radius:18px}
.eg-arr{flex:0 0 auto;width:34px;height:34px;margin:0 8px}
.eg-arr svg{width:17px;height:17px}
.eg-row figcaption{font-size:12.5px;left:9px;right:9px;bottom:9px}}
/* seven items in the strip: keep one line on small laptops */
@media(min-width:901px){.strip2 .wrap{flex-wrap:nowrap!important}}
@media(min-width:901px) and (max-width:1080px){.strip2 a{padding-left:8px!important;padding-right:8px!important;gap:7px!important;font-size:13.5px!important}.strip2 a svg,.pg .strip2 a svg{width:22px!important;height:22px!important}}
@media(max-width:1000px){.strip2 a[href*="emergency"]{display:none!important}}
.h2+.prose{margin-top:18px}@media(max-width:600px){.h2+.prose{margin-top:14px}}
/* "What to do first" tiles are not links, so no hover shadow change (Lewis, 11 Nov) */
.sy:hover{box-shadow:var(--sh-m)!important}

/* servicing page: full strip-down service, three rows of three with arrows (11 Nov 2026) */
.eg-row.s3{grid-template-columns:1fr 56px 1fr 56px 1fr}
@media(min-width:901px){.eg-row.s3 figure{aspect-ratio:4/5}}
@media(max-width:900px){.eg-row.s3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;scrollbar-width:none;margin:0 -24px;padding:4px 24px 14px}.eg-row.s3::-webkit-scrollbar{display:none}.eg-row.s3:after{content:"";flex:0 0 24px}}
#stripdown .lead{max-width:640px;margin-top:12px}
.fin:before{background:radial-gradient(closest-side,rgba(238,122,47,.32),transparent)!important}
@media(max-width:900px){.fin:before{inset:auto -35% -12% auto!important;width:110%!important;height:auto!important;aspect-ratio:1;background:radial-gradient(closest-side,rgba(238,122,47,.26),transparent)!important}}
/* About us: Az's own wording from his old site (11 Nov) */
#values .ab-two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
#values .ab-three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
#values .ab-card{background:#fff;border:1px solid var(--line,#e6e9ef);border-radius:22px;padding:32px;box-shadow:var(--sh-s,0 8px 24px -16px rgba(16,24,40,.25))}
#values .ab-card p{color:var(--mut,#55607a);font-size:16px;line-height:1.65;margin-top:10px}
#values .ab-card h3,#values .h3x{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:4px}
#values .ab-card .eyebrow{margin-bottom:6px}
#values .ab-dark{background:var(--ink);border-color:var(--ink);color:#fff}#values .ab-dark p{color:#c9d2e0}#values .ab-dark .eyebrow{color:#ffb98a}
#values .ab-vals-head{margin:64px 0 24px;max-width:760px}#values .ab-vals-head .lead{margin-top:12px}
#values .ab-vals{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
#values .ab-val{border-top:3px solid var(--org);background:#f6f8fb;border-radius:0 0 18px 18px;padding:22px 22px 24px}
#values .ab-val b{font-size:18px;font-weight:800;display:block}#values .ab-val p{color:var(--mut,#55607a);font-size:15px;line-height:1.6;margin-top:8px}
#values .ab-thanks{margin:40px auto 0;max-width:720px;text-align:center;font-size:17px;color:var(--mut,#55607a);line-height:1.6}
@media(max-width:1000px){#values .ab-vals{grid-template-columns:1fr 1fr}#values .ab-three{grid-template-columns:1fr}}
@media(max-width:700px){#values .ab-two,#values .ab-vals{grid-template-columns:1fr}#values .ab-card{padding:24px}#values .ab-vals-head{margin-top:44px}}
/* Header strip, quote button, trust bar and stripdown captions fit at every width (11 Nov) */
@media(min-width:961px){.strip2 .wrap{justify-content:space-between!important;padding-left:24px!important;padding-right:24px!important}.strip2 .wrap>a{padding-left:0!important;padding-right:0!important;flex:none}}
@media(min-width:961px) and (max-width:1023px){.nav .wrap{gap:16px!important}.nav li>a,.nav li>button{padding-left:7px!important;padding-right:7px!important}.nav ul{margin:0!important}.nav .r{gap:10px!important}.nav .r .btn{padding-left:18px!important;padding-right:18px!important}}
@media(min-width:901px) and (max-width:960px){.strip2 a.dk{display:none!important}.strip2 a .lg{display:none!important}.strip2 a .sm{display:inline!important}
.strip2 .wrap{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;padding:0!important;max-width:none!important}
.strip2 a{flex-direction:column!important;justify-content:center!important;align-items:center!important;text-align:center!important;gap:5px!important;padding:10px 4px!important;font-size:14px!important;line-height:1.15!important;white-space:normal!important;border-left:1px solid rgba(255,255,255,.08);position:relative}
.strip2 a:first-child{border-left:0}.strip2 a:after{display:none!important}.strip2 a.on{background:rgba(142,192,255,.12)}
.strip2 a svg,.pg .strip2 a svg{width:26px!important;height:26px!important}
.strip2 .newb{position:absolute!important;top:9px!important;left:calc(50% + 20px)!important;right:auto!important;margin:0!important;font-size:10.5px!important;padding:3px 7px 2px!important}}
@media(max-width:379px){.strip2 .sm .newb{left:auto!important;right:3px!important}}
@media(min-width:1101px){.trust .wrap{justify-content:space-between!important;gap:36px!important}.trust .gs{flex:none}.trust .gs span{white-space:nowrap}.trust .t{flex:0 1 auto!important;max-width:none!important;margin-left:0!important;gap:18px!important}.trust .t span+span{padding-left:18px!important}}
@media(min-width:1101px) and (max-width:1180px){.trust .wrap{gap:28px!important}.trust .t{font-size:13.5px!important;gap:14px!important}.trust .t span+span{padding-left:14px!important}}
@media(min-width:1181px){.strip2 .wrap{padding-right:12px!important}}
.eg-row figcaption{font-size:14px!important;text-wrap:balance}
.eg-lbl{align-items:flex-start}.eg-lbl:before{flex:none;margin-top:10px}