/* DW Plumbing and Heating: one stylesheet for every page */
@font-face{font-family:"Cinzel";font-weight:600;font-display:swap;src:url(/assets/fonts/cinzel-600.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:600;font-display:swap;src:url(/assets/fonts/playfair-display-600.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url(/assets/fonts/instrument-sans.woff2) format("woff2")}

:root{
  --navy:#20283E;        /* the navy of Dean's logo */
  --navy-deep:#171D2E;   /* header and footer */
  --gold:#D8C242;        /* the DW box in Dean's logo */
  --gold-hover:#E3D063;
  --gold-ink:#8A6D12;    /* gold dark enough for icons on white */
  --champagne:#C9BCA6;   /* crown, tap and rules in the logo */
  --tile:#F1F2F4;        /* white metro tile */
  --white:#FFFFFF;
  --ink:#1C2640;
  --body:#39415A;
  --muted:#646B7E;
  --rule:#DADDE3;
  --on-navy:#C9CFDB;
  --ct-red:#FF3F3F;      /* Checkatrade's red, from its logo (checked 14 Oct 2026) */
  --ct-navy:#040154;     /* Checkatrade's navy, from its logo */
  --fb-blue:#0866FF;     /* Facebook's blue, from its logo */
  --display:"Cinzel", "Trajan Pro", Georgia, serif;
  --head:"Playfair Display", Georgia, serif;
  --text:"Instrument Sans", "Segoe UI", Arial, sans-serif;
  --wrap:1200px;
  --gutter:clamp(16px, 4vw, 40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--body);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{color:var(--ink);margin:0}
h1,h2{font-family:var(--head);font-weight:600;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(34px,4vw,54px);line-height:1.1}
h2{font-size:clamp(28px,3vw,40px);line-height:1.15}
h3{font-family:var(--text);font-size:21px;line-height:1.3;font-weight:650}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.nowrap{white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--gold);color:var(--navy-deep);padding:10px 16px;border-radius:6px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* Placeholders: details Dean still needs to send */
.ph{background:rgba(226,192,68,.2);outline:1.5px dashed #B8962E;outline-offset:1px;border-radius:3px;padding:0 .3em;margin:0 .18em;white-space:nowrap}
.on-navy .ph{background:rgba(226,192,68,.14);outline-color:var(--gold)}
.ph-wrap{white-space:normal}
.ph-block{position:relative;border:2px dashed #B8962E;border-radius:8px;background:rgba(226,192,68,.1);padding:22px 22px 20px;margin-top:22px}
.ph-block::before{content:"To add";position:absolute;top:-12px;left:16px;background:#B8962E;color:var(--white);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:3px}
.ph-block.confirm::before{content:"To confirm"}
.on-navy .ph-block{border-color:var(--gold);background:rgba(226,192,68,.07)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:6px;font:600 16.5px/1.2 var(--text);text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .15s ease}
.btn svg{width:20px;height:20px;flex:none}
.btn-gold{background:var(--gold);color:var(--navy-deep)}
.btn-gold:hover{background:var(--gold-hover)}
.btn-line{border-color:rgba(216,200,168,.7);color:var(--white)}
.btn-line:hover{background:rgba(255,255,255,.08)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:#26324F}
.btn-ghost{border-color:#BFC4CF;color:var(--ink)}
.btn-ghost:hover{border-color:var(--navy)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid var(--gold)}
.text-link svg{width:18px;height:18px}
.text-link:hover{color:#5B4A0E}
.on-navy .text-link{color:var(--white)}

/* Logo */
.logo{display:inline-block;line-height:0;text-decoration:none}
.logo img{width:320px;height:auto}
.site-foot .logo img{width:340px;max-width:100%}

/* Header */
.site-head{background:var(--navy-deep);color:var(--white)}
.head-in{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:18px;padding-bottom:16px}
.head-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 36px;width:100%;padding-top:14px;border-top:1px solid rgba(201,188,166,.22)}
.head-right{display:flex;align-items:center;gap:22px}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(201,188,166,.55);background:transparent;color:var(--white);place-items:center;cursor:pointer;padding:0}
.menu-btn svg{width:22px;height:22px}
.menu-btn .i-close{display:none}
.site-head.open .menu-btn .i-open{display:none}
.site-head.open .menu-btn .i-close{display:block}
.menu-btn span{display:grid;place-items:center}
.nav{display:flex;gap:26px;font-size:15.5px;white-space:nowrap}
.nav a{text-decoration:none;color:var(--on-navy);padding:6px 0;border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--white);border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{color:var(--white);border-bottom-color:var(--gold)}
.head-call{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:16px;color:var(--white)}
.head-call svg{width:18px;height:18px;color:var(--gold)}
.head-quote{min-height:44px;padding:0 18px;font-size:15.5px}
.head-call-icon{display:none}

/* Home hero */
.hero{background:var(--navy);color:var(--on-navy);padding:64px 0 76px}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:64px;align-items:center}
.hero h1{color:var(--white)}
.hero .lead{font-size:19.5px;line-height:1.55;margin-top:22px;max-width:33em;color:var(--on-navy)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-points{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:10px;font-size:16px}
.hero-points li{display:flex;gap:12px;align-items:flex-start}
.hero-points svg{width:20px;height:20px;color:var(--gold);flex:none;margin-top:3px}

/* Inner page hero */
.phero{background:var(--navy);color:var(--on-navy);padding:40px 0 64px}
.phero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:64px;align-items:center}
.phero.solo .phero-in{grid-template-columns:minmax(0,1fr)}
.phero.solo .phero-text{max-width:760px}
.phero h1{color:var(--white);font-size:clamp(32px,3.6vw,50px)}
.phero .lead{font-size:19px;line-height:1.55;margin-top:20px;max-width:34em}
.phero .hero-points{margin-top:28px}
.phero-photo{border-radius:8px;overflow:hidden;aspect-ratio:4/5;background:#0F1524}
.phero-photo img{width:100%;height:100%;object-fit:cover}
.phero figcaption{font-size:15px;line-height:1.5;margin-top:12px;color:var(--on-navy)}
.crumbs{margin:0 0 26px;font-size:14.5px}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li + li::before{content:"";width:6px;height:6px;border-top:1.5px solid var(--champagne);border-right:1.5px solid var(--champagne);transform:rotate(45deg);opacity:.8}
.crumbs a{color:var(--on-navy);text-decoration:none}
.crumbs a:hover{color:var(--white);text-decoration:underline}
.crumbs [aria-current]{color:var(--white)}

/* Before and after slider */
.ba{position:relative;margin:0}
.ba-frame{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:8px;background:#0F1524;--pos:50%;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--gold);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--pos);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--gold);color:var(--navy-deep);display:grid;place-items:center;box-shadow:0 2px 10px rgba(10,14,25,.35);pointer-events:none}
.ba-knob svg{width:26px;height:26px}
.ba-tag{position:absolute;top:14px;padding:4px 11px;border-radius:4px;font-size:13.5px;font-weight:600;letter-spacing:.02em;pointer-events:none}
.ba-tag-before{left:14px;background:rgba(20,27,46,.82);color:var(--white)}
.ba-tag-after{right:14px;background:var(--gold);color:var(--navy-deep)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.ba-frame:has(.ba-range:focus-visible){outline:3px solid var(--gold);outline-offset:4px}
.ba figcaption{font-size:15px;line-height:1.5;margin-top:14px;color:var(--muted)}
.on-navy .ba figcaption{color:var(--on-navy)}
.ba-wide .ba-frame{aspect-ratio:4/5}

/* Sections */
section{scroll-margin-top:16px}
.band{padding:88px 0}
.band-tile{background:var(--tile)}
.band-navy{background:var(--navy);color:var(--on-navy)}
.band-navy h2{color:var(--white)}
.intro{max-width:660px;margin-bottom:44px}
.intro p{margin-top:14px;font-size:18px}
.intro-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.intro-row .intro{margin-bottom:0}

/* Two ways in */
.paths{padding:56px 0;border-bottom:1px solid var(--rule)}
.paths-in{display:grid;grid-template-columns:1fr 1fr}
.path{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;align-content:start;padding:8px 48px 8px 0}
.path + .path{border-left:1px solid var(--rule);padding:8px 0 8px 48px}
.path-icon{grid-row:span 3;width:52px;height:52px;border-radius:50%;background:var(--tile);color:var(--navy);display:grid;place-items:center}
.path-icon svg{width:26px;height:26px}
.path h2{font-size:clamp(24px,2.3vw,30px)}
.path p{margin:4px 0 18px}
.path .btn{justify-self:start}

/* Before and after grid */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.work-grid .ba-frame{aspect-ratio:4/5}
.work-grid figcaption{color:var(--body)}
.work-grid figcaption b{color:var(--ink);font-weight:650;display:block;font-size:17px;margin-bottom:2px}

/* Services on the homepage */
.feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:56px;align-items:center;padding-bottom:64px;border-bottom:1px solid var(--rule)}
.feature-photo{border-radius:8px;overflow:hidden;aspect-ratio:4/5}
.feature-photo img{width:100%;height:100%;object-fit:cover}
.feature h3{font-family:var(--head);font-weight:600;font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.005em}
.feature p{margin-top:16px;font-size:18px;max-width:34em}
.feature .btns{margin-top:0}
.ticks{list-style:none;padding:0;margin:24px 0 32px;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-weight:550}
.ticks svg{width:20px;height:20px;color:var(--gold-ink);flex:none;margin-top:3px}
.ticks.one{grid-template-columns:1fr}
.on-navy .ticks li{color:var(--white)}
.on-navy .ticks svg{color:var(--gold)}
.svc-list{list-style:none;padding:0;margin:0}
.svc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr) auto;align-items:center;gap:12px 48px;padding:30px 4px;border-bottom:1px solid var(--rule)}
.svc h3{font-family:var(--head);font-weight:600;font-size:clamp(22px,2.1vw,28px);letter-spacing:-.005em;line-height:1.2}
.svc h3 a{text-decoration:none}
.svc h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.svc p{max-width:34em}
.svc .svc-ticks{margin:14px 0 0;gap:10px 24px}
.svc-ticks li{font-weight:500}
.svc-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;padding:8px 0;border-bottom:2px solid var(--gold)}
.svc-link svg{width:18px;height:18px}
.svc-link:hover{color:#5B4A0E}
.svc-urgent{background:var(--navy);color:var(--on-navy);border:0;border-radius:8px;padding:30px 32px;margin-top:20px;grid-template-columns:auto minmax(0,1fr) auto}
.svc-urgent h3,.svc-urgent h3 a{color:var(--white)}
.svc-urgent h3{white-space:nowrap}
.svc-urgent .btn{min-height:48px}

/* Process */
.process-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.process-intro{position:sticky;top:32px}
.process-intro p{margin:16px 0 28px;font-size:18px;max-width:26em}
.steps{list-style:none;padding:0;margin:0;counter-reset:step;position:relative}
.step{counter-increment:step;position:relative;display:grid;grid-template-columns:56px 1fr;gap:4px 24px;padding:0 0 36px}
.step:last-child{padding-bottom:0}
.step::before{content:counter(step);grid-row:span 2;position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font:700 22px/1 var(--text);box-shadow:0 0 0 6px var(--tile)}
.band:not(.band-tile) .step::before{box-shadow:0 0 0 6px var(--white)}
.step::after{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,#B8A36A 0 6px,transparent 6px 12px)}
.step:last-child::after{display:none}
.step h3{font-size:20px;margin-top:13px}
.step p{max-width:32em}
.step-done::before{content:"";background:var(--gold) no-repeat center/26px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171D2E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* Reviews placeholder */
.reviews-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.reviews-in .intro{margin:0}
.reviews-in .intro p{color:var(--on-navy)}
.review-slot{border:2px dashed var(--gold);border-radius:8px;padding:36px;background:rgba(226,192,68,.06)}
.review-slot h3{color:var(--white);font-size:20px}
.review-slot p{margin-top:10px;color:var(--on-navy)}
.review-ghosts{display:grid;gap:12px;margin-top:24px}
.review-ghost{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:6px;background:rgba(255,255,255,.05)}
.review-ghost .stars{display:flex;gap:2px;color:rgba(226,192,68,.5)}
.review-ghost .stars svg{width:16px;height:16px}
.review-ghost > span:last-child{height:8px;border-radius:4px;background:rgba(201,207,219,.22);flex:1}

/* About and areas */
.about-in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:64px;align-items:center}
.photo-slot{aspect-ratio:1/1;border:2px dashed #B8962E;border-radius:8px;background:var(--tile);display:grid;place-items:center;text-align:center;color:var(--muted);padding:24px}
.photo-slot svg{display:block;width:40px;height:40px;color:#B8962E;margin:0 auto 12px}
.photo-slot small{display:block;margin-top:8px;font-size:14px}
.about-in p{margin-top:16px;font-size:18px;max-width:34em}
.areas{margin-top:36px;padding-top:28px;border-top:1px solid var(--rule)}
.areas p{margin-top:8px;font-size:17px}
.areas .text-link{margin-top:16px}

/* Cards: kinds of job */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.card{background:var(--white);border:1px solid var(--rule);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.card-photo{aspect-ratio:16/11;overflow:hidden}
.card-photo img{width:100%;height:100%;object-fit:cover}
.card-body{padding:26px 28px 30px;display:grid;gap:12px;align-content:start}
.card-body h3{font-family:var(--head);font-weight:600;font-size:clamp(22px,2vw,26px);letter-spacing:-.005em}
.card-body .text-link{justify-self:start;margin-top:6px}

/* Lists of jobs with icons */
.jobs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}
.jobs li{display:grid;grid-template-columns:48px 1fr;gap:4px 18px;align-items:start;padding:20px 0;border-top:1px solid var(--rule)}
.jobs .ji{grid-row:span 2;width:48px;height:48px;border-radius:50%;background:var(--tile);color:var(--navy);display:grid;place-items:center}
.band-tile .jobs .ji{background:var(--white)}
.jobs .ji svg{width:23px;height:23px}
.jobs b{color:var(--ink);font-weight:650;font-size:18px;line-height:1.35;padding-top:2px}
.jobs span:last-child{font-size:16px}

/* Split: words and a photo */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.split-photo{border-radius:8px;overflow:hidden;aspect-ratio:4/5}
.split-photo img{width:100%;height:100%;object-fit:cover}
.split p{margin-top:16px;font-size:18px;max-width:34em}

/* Urgent strip */
.urgent{background:var(--navy-deep);color:var(--on-navy)}
.urgent-in{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px}
.urgent-in p{display:flex;align-items:center;gap:14px;font-size:17px}
.urgent-in p b{color:var(--white)}
.urgent-in p svg{width:26px;height:26px;color:var(--gold);flex:none}
.urgent-in .btns{margin:0}
.urgent-in .btn{min-height:48px}

/* Emergency: what to do now */
.now{background:var(--white);color:var(--body);border-radius:10px;padding:32px 34px;box-shadow:0 12px 32px rgba(8,12,22,.25)}
.now h2{font-family:var(--text);font-size:21px;font-weight:650;letter-spacing:0;margin-bottom:6px}
.now > p{color:var(--muted);font-size:15.5px;margin-bottom:18px}
.now ol{list-style:none;padding:0;margin:0;counter-reset:n;display:grid;gap:16px}
.now li{counter-increment:n;display:grid;grid-template-columns:32px 1fr;gap:14px;font-size:16px;line-height:1.5}
.now li::before{content:counter(n);width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:700;font-size:15px}
.now li b{color:var(--ink)}
.now .btn{width:100%;margin-top:24px}
.facts{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px;font-size:16.5px}
.facts li{display:flex;gap:12px;align-items:flex-start}
.facts svg{width:20px;height:20px;color:var(--gold);flex:none;margin-top:3px}
.facts b{color:var(--white);font-weight:600}

/* Our work: projects */
.projects{display:grid;gap:96px}
.proj{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:56px;align-items:start}
.proj:nth-child(even) .proj-ba{order:2}
.proj-meta{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-bottom:14px;font-size:14px;font-weight:600}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--tile);color:var(--ink);letter-spacing:.02em}
.proj h2{font-size:clamp(26px,2.6vw,34px)}
.proj-text > p{margin-top:16px;font-size:17.5px;max-width:34em}
.proj .ticks{margin:22px 0 26px}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:440px}
.thumb{position:relative;display:block;padding:0;border:0;border-radius:6px;overflow:hidden;aspect-ratio:3/4;cursor:zoom-in;background:var(--tile)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.thumb:hover img{transform:scale(1.04)}
.thumb span{position:absolute;left:6px;bottom:6px;font-size:12px;font-weight:600;padding:2px 7px;border-radius:3px;background:rgba(20,27,46,.85);color:var(--white)}
.thumb span.after{background:var(--gold);color:var(--navy-deep)}
.thumbs-label{font-weight:650;color:var(--ink);font-size:15.5px;margin-bottom:10px}

/* Lightbox */
.lb{border:0;padding:0;background:rgba(9,12,20,.94);max-width:none;max-height:none;width:100vw;height:100vh;margin:0;overflow:hidden}
.lb::backdrop{background:rgba(9,12,20,.92)}
.lb-in{position:relative;width:100%;height:100%;display:grid;grid-template-rows:1fr auto;place-items:center;padding:56px 72px 20px}
.lb-in img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;min-height:0}
.lb-cap{color:var(--on-navy);font-size:15px;text-align:center;padding-top:12px;max-width:44em}
.lb-cap b{color:var(--white)}
.lb-btn{position:absolute;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:var(--white);display:grid;place-items:center;cursor:pointer}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-btn svg{width:26px;height:26px}
.lb-close{top:14px;right:14px}
.lb-prev{left:12px;top:50%;margin-top:-26px}
.lb-next{right:12px;top:50%;margin-top:-26px}

/* Towel rail gallery */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.trio figure{margin:0}
.trio .ph-img{border-radius:8px;overflow:hidden;aspect-ratio:3/4}
.trio img{width:100%;height:100%;object-fit:cover}
.trio figcaption{font-size:15px;color:var(--muted);margin-top:10px}

/* Areas */
.counties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.county h3{font-family:var(--head);font-weight:600;font-size:22px;letter-spacing:-.005em;margin-bottom:14px}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:7px 14px;border-radius:999px;background:var(--white);border:1px solid var(--rule);color:var(--ink);font-weight:550;font-size:15.5px}
.chips li.home{background:var(--navy);border-color:var(--navy);color:var(--white)}
.ph-block .counties{margin-top:4px}

/* Trust facts on the About page */
.trust{padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.trust li{list-style:none;display:grid;grid-template-columns:44px 1fr;gap:4px 16px;align-items:start;background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:20px 22px}
.trust .ji{grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center}
.trust .ji svg{width:21px;height:21px}
.trust b{color:var(--ink);font-size:17px}
.trust span:last-child{font-size:16px}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;cursor:pointer;list-style:none;font-weight:650;font-size:18.5px;color:var(--ink);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:22px;height:22px;flex:none;color:var(--gold-ink);transition:transform .2s ease}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .ans{padding:0 2px 24px;max-width:44em}
.faq .ans p + p{margin-top:12px}

/* Long text */
.prose{max-width:760px}
.prose h2{font-size:clamp(22px,2.2vw,28px);margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul{margin:0 0 14px}
.prose ul{padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--ink);text-decoration-color:var(--gold);text-underline-offset:3px}

/* Quote band and quote form */
.quote-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:64px;align-items:start}
.quote-in .intro{margin-bottom:28px}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.contact-list li{display:flex;gap:14px;align-items:center;font-size:17px}
.contact-list a{text-decoration:none;font-weight:600;color:var(--ink)}
.contact-list .ci{width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;flex:none}
.contact-list svg{width:20px;height:20px}
.contact-list small{display:block;font-size:14px;color:var(--muted)}
.qform{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:32px 36px 30px;box-shadow:0 10px 30px rgba(20,27,46,.06)}
.qform h3{font-size:21px;margin-bottom:4px}
.qfields{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:15.5px;color:var(--ink)}
.field input,.field select{font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1.5px solid #C3C8D2;border-radius:6px;padding:12px 14px;min-height:50px;width:100%}
.field select{appearance:none;-webkit-appearance:none;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2640' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/20px;padding-right:44px}
.field input:focus,.field select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(226,192,68,.55)}
.field .err{display:none;color:#A12B1F;font-size:14px;font-weight:550}
.field.bad input,.field.bad select{border-color:#A12B1F}
.field.bad .err{display:block}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.qgo{width:100%;min-height:58px;font-size:17.5px;margin-top:4px}
.qgo[disabled]{opacity:.7;cursor:progress}
.qnote{text-align:center;font-size:14.5px;color:var(--muted);margin-top:-4px}
.qnote a{color:inherit}
.qfail{display:none;background:#FBEAE7;color:#7A2016;border-radius:6px;padding:12px 14px;font-size:15px}
.qfail.show{display:block}
.done{display:none;text-align:center;padding:24px 8px}
.done.show{display:block}
.done:focus{outline:none}
.done-tick{width:72px;height:72px;border-radius:50%;background:var(--gold);color:var(--navy-deep);display:grid;place-items:center;margin:0 auto 22px}
.done-tick svg{width:36px;height:36px}
.done h2,.done h3{font-family:var(--head);font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.005em}
.done p{margin:14px auto 0;max-width:30em;font-size:17.5px}
.done .preview-note{font-size:14px;color:var(--muted);margin-top:22px}
.done .btn{margin-top:24px}

/* Quote page */
.q-hero{background:var(--navy);color:var(--on-navy);padding:40px 0 60px}
.q-hero h1{color:var(--white);font-size:clamp(32px,3.6vw,48px)}
.q-hero p{margin-top:14px;font-size:19px;max-width:36em}
.q-body{background:var(--tile);padding:56px 0 88px}
.q-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:40px;align-items:start}
.qaside{display:grid;gap:20px;position:sticky;top:24px}
.qcard{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:28px}
.qcard h2{font-family:var(--text);font-size:19px;font-weight:650;letter-spacing:0;margin-bottom:16px}
.next{list-style:none;padding:0;margin:0;display:grid;gap:16px;counter-reset:n}
.next li{counter-increment:n;display:grid;grid-template-columns:30px 1fr;gap:12px;font-size:16px}
.next li::before{content:counter(n);width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:700;font-size:14px}
.next b{color:var(--ink);display:block}
.qphoto{border-radius:10px;overflow:hidden;position:relative;aspect-ratio:4/3;background:var(--navy)}
.qphoto img{width:100%;height:100%;object-fit:cover}
.qphoto span{position:absolute;left:12px;bottom:12px;background:rgba(20,27,46,.85);color:var(--white);font-size:14px;padding:6px 10px;border-radius:4px}
.qtalk{background:var(--navy);color:var(--on-navy);border:0}
.qtalk h2{color:var(--white)}
.qtalk ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.qtalk li{display:flex;align-items:center;gap:12px}
.qtalk a{text-decoration:none;color:var(--white);font-weight:600}
.qtalk svg{width:20px;height:20px;color:var(--gold);flex:none}
@media (min-width:961px){ .q-in{max-width:1000px} .q-hero .wrap{max-width:1000px} }

/* 404 */

/* Footer */
.site-foot{background:var(--navy-deep);color:var(--on-navy);padding:64px 0 28px;font-size:15.5px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:40px;align-items:start}
.foot-in h3{color:var(--white);font-size:16px;margin-bottom:12px}
.foot-in ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot-in a{text-decoration:none}
.foot-in a:hover{color:var(--white);text-decoration:underline}
.foot-blurb{margin-top:18px;max-width:22em}
.foot-base{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-top:48px;padding-top:22px;border-top:1px solid rgba(216,200,168,.25);font-size:14px}
.foot-base a{text-decoration:none}
.foot-base a:hover{color:var(--white);text-decoration:underline}
.foot-base nav{display:flex;gap:20px;flex-wrap:wrap}

/* Phone bar */
.mbar{display:none}

@media (max-width:1060px){
  .hero-in,.phero-in{gap:40px}
  .process-in{gap:48px}
  .foot-in{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
  .foot-in > div:first-child{grid-column:1/-1}
}
@media (max-width:980px){
  body{font-size:16.5px}
  .head-in{display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:10px;padding-top:12px;padding-bottom:12px}
  .menu-btn{display:grid;grid-column:1;grid-row:1}
  .head-in .logo{grid-column:2;grid-row:1;justify-self:center}
  .head-call-icon{grid-column:3;grid-row:1}
  .head-bar{display:none;grid-column:1/-1;grid-row:2;flex-direction:column;align-items:stretch;gap:0;margin-top:8px;padding-top:4px}
  .site-head.open .head-bar{display:flex}
  .nav{flex-direction:column;gap:0;font-size:18px}
  .nav a{padding:14px 2px;border-bottom:1px solid rgba(201,188,166,.16)}
  .nav a:hover,.nav a[aria-current="page"]{border-bottom-color:rgba(201,188,166,.16)}
  .nav a[aria-current="page"]{color:var(--gold)}
  .head-right{flex-direction:column;align-items:stretch;gap:12px;padding:18px 0 8px}
  .head-call{justify-content:center;min-height:50px;border:1.5px solid rgba(201,188,166,.55);border-radius:6px}
  .head-quote{min-height:50px}
  .logo img{width:min(230px, calc(100vw - 150px))}
  .head-call-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--navy-deep)}
  .head-call-icon svg{width:21px;height:21px}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--navy-deep);box-shadow:0 -4px 16px rgba(10,14,25,.25)}
  .mbar .btn{min-height:50px;padding:0 12px}
  .mbar-one{grid-template-columns:1fr}
  body{padding-bottom:76px}
}
@media (max-width:960px){
  .q-in{grid-template-columns:1fr}
  .qaside{position:static}
  .qphoto{display:none}
}
@media (max-width:860px){
  .hero{padding:32px 0 44px}
  .phero{padding:24px 0 44px}
  .crumbs{margin-bottom:18px}
  h1{font-size:clamp(30px,8.4vw,38px)}
  .phero h1{font-size:clamp(30px,8.2vw,38px)}
  h2{font-size:clamp(26px,7vw,32px)}
  .hero .lead,.phero .lead{margin-top:16px;font-size:17.5px}
  .hero-ctas{margin-top:24px;gap:12px}
  .hero-points{margin-top:24px;font-size:15.5px}
  .hero-in,.phero-in{grid-template-columns:minmax(0,1fr)}
  .hero-ctas .btn,.phero .btns .btn{flex:1 1 100%}
  .btns{margin-top:24px;gap:12px}
  .phero-photo{aspect-ratio:4/3}
  .band{padding:52px 0}
  .intro{margin-bottom:28px}
  .intro p{font-size:17px}
  .intro-row{display:block;margin-bottom:28px}
  .intro-row .text-link{margin-top:14px}
  .paths{padding:40px 0}
  .paths-in{grid-template-columns:1fr}
  .path{padding:0 0 32px}
  .path + .path{border-left:0;border-top:1px solid var(--rule);padding:32px 0 0}
  .work-grid{grid-template-columns:1fr;gap:36px}
  .feature{grid-template-columns:1fr;gap:24px;padding-bottom:32px}
  .feature p{font-size:17px}
  .ticks{margin:20px 0 24px}
  .svc{grid-template-columns:1fr;gap:8px;padding:24px 2px}
  .svc-link,.svc-urgent .btn{justify-self:start;margin-top:4px}
  .svc-urgent{padding:26px 22px}
  .process-in{grid-template-columns:1fr;gap:28px}
  .process-intro{position:static}
  .process-intro p{font-size:17px;margin-bottom:20px}
  .feature-photo{aspect-ratio:4/3}
  .reviews-in,.about-in,.quote-in,.split{grid-template-columns:1fr;gap:36px}
  .split-photo{aspect-ratio:4/3}
  .split p{font-size:17px}
  .photo-slot{aspect-ratio:16/9}
  .about-in p{font-size:17px}
  .cards{grid-template-columns:1fr;gap:24px}
  .jobs{grid-template-columns:1fr;gap:0}
  .projects{gap:72px}
  .proj{grid-template-columns:1fr;gap:26px}
  .proj:nth-child(even) .proj-ba{order:0}
  .trio{grid-template-columns:1fr 1fr;gap:16px}
  .trio figure:last-child{display:none}
  .counties{grid-template-columns:1fr;gap:24px}
  .trust{grid-template-columns:1fr}
  .now{padding:26px 22px}
  .site-foot{padding:48px 0 24px}
  .site-foot .logo img{width:260px}
  .ba figcaption{font-size:14.5px}
  .ba-knob{width:46px;height:46px;margin:-23px 0 0 -23px}
  .foot-in{grid-template-columns:1fr 1fr;gap:32px}
  .lb-in{padding:60px 8px 16px}
  .lb-prev,.lb-next{top:auto;bottom:14px;margin:0}
  .lb-in{grid-template-rows:1fr auto 64px}
  .q-hero{padding:24px 0 36px}
  .q-hero p{font-size:17px}
  .q-body{padding:32px 0 56px}
  .faq summary{font-size:17px;padding:18px 2px}
  
}
@media (max-width:520px){
  .ticks{grid-template-columns:1fr}
  .step{grid-template-columns:46px 1fr;gap:2px 16px;padding-bottom:28px}
  .step::before{width:46px;height:46px;font-size:19px}
  .step::after{left:22px;top:46px}
  .step-done::before{background-size:22px}
  .step h3{font-size:19px;margin-top:9px}
  .svc-urgent .btn,.urgent-in .btn{width:100%}
  .urgent-in .btns{width:100%}
  .qform{padding:24px 18px 22px}
  .qcard{padding:22px 20px}
  .review-slot{padding:26px 22px}
  .review-ghosts{display:none}
  .contact-list{gap:12px}
  .path{grid-template-columns:1fr;gap:10px}
  .path-icon{grid-row:auto}
  .path .btn{justify-self:stretch}
  .card-body{padding:22px 20px 24px}
  .foot-in{grid-template-columns:1fr}
  .svc-urgent h3{white-space:normal}
}

/* Small fixes */
.about-in .text-link{margin-top:18px}
.ph-block p{margin-top:0!important;font-size:16.5px;max-width:none}
.split .ticks{margin-bottom:8px}
.phero .ba .phero-photo + figcaption{margin-top:12px}
@media (max-width:400px){
  .btn{padding:0 16px}
  .now{padding:22px 16px}
  .now .btn{padding:0 12px;gap:8px}
}
@media (max-width:520px){
  .btns .btn{flex:1 1 100%}
}
.split .ticks{grid-template-columns:1fr}
.proj .ticks{grid-template-columns:1fr;gap:10px}
.qemerg{display:flex;gap:12px;align-items:flex-start;background:var(--navy);color:var(--on-navy);border-radius:8px;padding:14px 16px;font-size:15.5px}
.qemerg[hidden]{display:none}
.qemerg svg{width:20px;height:20px;color:var(--gold);flex:none;margin-top:3px}
.qemerg b{color:var(--white)}
.qemerg a{color:var(--white);font-weight:600}
.now-gas{margin-top:18px;font-size:15px;color:var(--muted)}
.now-gas a{color:var(--ink);font-weight:600}
.band-rule{border-top:1px solid var(--rule)}

/* Town pages, the areas list and the price table */
.towns{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.town{display:grid;gap:10px;align-content:start;background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:24px 24px 26px}
.town h3{font-family:var(--head);font-weight:600;font-size:24px;letter-spacing:-.005em;line-height:1.2}
.town h3 a{text-decoration:none}
.town h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.town p{font-size:16px}
.town .text-link{justify-self:start;margin-top:4px}
.town-home{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.town-home h3,.town-home h3 a,.town-home .text-link{color:var(--white)}
.dist{font-size:14px;font-weight:650;letter-spacing:.03em;color:var(--gold-ink)}
.town-home .dist{color:var(--gold)}
.postcodes{margin-top:18px;font-size:16px;color:var(--muted)}
.chips-gap{margin-top:22px}
.jobs span a{color:var(--ink);font-weight:600;text-decoration-color:var(--gold);text-underline-offset:3px;white-space:nowrap}
.prices{width:100%;border-collapse:collapse;font-size:16.5px}
.prices th,.prices td{text-align:left;vertical-align:top;padding:18px 20px 18px 0;border-bottom:1px solid var(--rule)}
.prices thead th{font-size:13.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:0}
.prices tbody th{color:var(--ink);font-weight:650;width:28%}
.prices tbody th a{text-decoration-color:var(--gold);text-underline-offset:3px}
.prices td:last-child{white-space:nowrap;padding-right:0}
@media (max-width:980px){ .towns{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){
  .foot-in{grid-template-columns:1fr 1fr}
  .prices thead{display:none}
  .prices tr{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--rule)}
  .prices th,.prices td{border:0;padding:0;width:auto}
}
@media (max-width:600px){ .towns{grid-template-columns:1fr} }
@media (max-width:520px){ .foot-in{grid-template-columns:1fr} }

/* Real reviews from Checkatrade */
.stars{display:inline-flex;gap:3px;color:var(--gold);line-height:0}
.stars svg{width:18px;height:18px}
.rv-band{padding:96px 0;background:var(--navy);border-top:3px solid var(--gold)}
.rv-top{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px;align-items:center}
.rv-card{background:var(--navy-deep);border:1px solid rgba(216,194,66,.5);border-radius:14px;padding:34px 30px 30px;text-align:center;box-shadow:0 20px 44px rgba(5,8,15,.38)}
.rv-big{font-family:var(--display);font-weight:600;font-size:92px;line-height:.95;color:var(--gold)}
.rv-big small{font-size:34px;color:var(--champagne);margin-left:4px}
.rv-card .stars{gap:5px;margin-top:16px}
.rv-card .stars svg{width:28px;height:28px}
.rv-count{margin-top:12px;font-size:17.5px;color:var(--on-navy)}
.rv-count b{color:var(--white)}
.rv-subs{list-style:none;padding:0;margin:22px 0 26px;display:grid;text-align:left;font-size:15px}
.rv-subs li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid rgba(201,188,166,.18);color:var(--on-navy)}
.rv-subs b{color:var(--gold)}
.rv-card .btn{width:100%}
.rv-lead h2{color:var(--white)}
.rv-feature{margin:30px 0 0}
.rv-feature blockquote{margin:0;position:relative;padding-top:40px}
.rv-feature blockquote::before{content:"\201C";position:absolute;left:-4px;top:-18px;font-family:var(--display);font-size:120px;line-height:1;color:var(--gold)}
.rv-feature blockquote p{font-size:clamp(23px,2.3vw,31px);line-height:1.38;color:var(--white);font-weight:500;max-width:30em}
.rv-feature figcaption{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--on-navy);font-size:15.5px}
.rv-feature figcaption b{color:var(--white);font-weight:650}
.reviews{display:grid;gap:20px;margin-top:56px}
.reviews-1{grid-template-columns:minmax(0,1fr)}
.reviews-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.reviews-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.review{margin:0;display:flex;flex-direction:column;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(201,188,166,.22);border-top:3px solid var(--gold);border-radius:10px;padding:24px 24px 22px}
.review blockquote{margin:0}
.review blockquote p{color:var(--white);font-size:17px;line-height:1.55}
.review figcaption{margin-top:auto;display:grid;gap:3px;font-size:14.5px;line-height:1.45;color:var(--on-navy)}
.review figcaption b{color:var(--white);font-weight:650}
.rev-note{margin-top:24px;font-size:14px;color:var(--on-navy)}
.rv-rec{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:14.5px;font-weight:600;line-height:1.2}
.rv-rec svg{width:19px;height:19px;flex:none}
.rv-fbline{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(201,188,166,.18);color:var(--on-navy);font-size:15px;line-height:1.35;text-decoration:none}
.rv-fbline b{color:var(--white)}
.rv-fbline small{display:block;font-size:13.5px;margin-top:2px}
.rv-fbline{text-align:left}
.rv-fbline svg{width:20px;height:20px;flex:none;color:var(--gold)}
.rv-fbline:hover span{text-decoration:underline}

/* Rating badge and quote in the home page hero */
.hero-rating{margin-top:30px;display:grid;gap:16px;justify-items:start;max-width:34em}
.hr-badge{display:inline-flex;align-items:center;gap:16px;text-decoration:none;background:rgba(255,255,255,.06);border:1.5px solid rgba(216,194,66,.6);border-radius:12px;padding:12px 20px 12px 16px;transition:background-color .15s ease}
.hr-badge:hover{background:rgba(255,255,255,.11)}
.hr-score{font-family:var(--display);font-weight:600;font-size:42px;line-height:1;color:var(--gold);padding-right:16px;border-right:1px solid rgba(216,194,66,.4)}
.hr-score small{font-size:19px;color:var(--champagne);margin-left:2px}
.hr-text{display:grid;gap:5px;color:var(--on-navy);font-size:15.5px;line-height:1.3}
.hr-text b{color:var(--white)}
.hr-quote{border-left:3px solid var(--gold);padding:2px 0 2px 16px;color:var(--white);font-size:17px;line-height:1.5}
.hr-quote span{display:block;margin-top:6px;font-size:14px;color:var(--on-navy)}
.hero-rating + .hero-points{margin-top:24px}
.hr-badges{display:flex;flex-wrap:wrap;gap:12px}
.hr-text{gap:4px}
.hr-src{font-size:14px;font-weight:600;color:var(--champagne);line-height:1.2}
.hr-rec{display:inline-flex;align-items:center;gap:6px;height:18px;color:var(--gold);font-weight:650}
.hr-rec svg{width:18px;height:18px;flex:none}
.hero-rating{container-type:inline-size}
@container (max-width:539px){
  .hr-badges{justify-self:stretch;gap:10px}
  .hr-badges .hr-badge{flex:1 1 0;min-width:0;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 14px 13px}
  .hr-badges .hr-score{border-right:0;padding-right:0;font-size:34px}
  .hr-badges .stars svg{width:16px;height:16px}
}

@media (max-width:1060px){ .rv-top{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:44px} }
@media (max-width:980px){ .reviews-3{grid-template-columns:1fr 1fr} .reviews-3 .review:nth-child(3){grid-column:1/-1} }
@media (max-width:860px){
  .rv-band{padding:56px 0}
  .rv-top{grid-template-columns:1fr;gap:36px}
  .rv-lead{order:-1}
  .rv-big{font-size:76px}
  .rv-feature{margin-top:22px}
  .reviews{margin-top:36px}
  .reviews-2{grid-template-columns:1fr}
  .hero-rating{margin-top:24px}
  .hr-score{font-size:36px}
  .hr-quote{font-size:16px}
}
@media (max-width:640px){ .reviews-3{grid-template-columns:1fr} .reviews-3 .review:nth-child(3){grid-column:auto} }

/* Reviews page */
.rvp-hero .phero-in{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:center}
.src-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.src-card{display:flex;flex-direction:column;align-items:flex-start;background:var(--navy-deep);border:1px solid rgba(216,194,66,.5);border-radius:14px;padding:26px 24px 22px;box-shadow:0 20px 44px rgba(5,8,15,.38)}
.src-name{font-weight:650;font-size:16px;color:var(--white)}
.src-score{margin-top:10px;font-family:var(--display);font-weight:600;font-size:64px;line-height:1;color:var(--gold)}
.src-score small{font-size:26px;color:var(--champagne);margin-left:3px}
.src-card .stars{margin-top:14px;gap:4px}
.src-card .stars svg{width:22px;height:22px}
.src-rec{margin-top:14px;display:inline-flex;align-items:center;gap:7px;min-height:22px;color:var(--gold);font-weight:650}
.src-rec svg{width:22px;height:22px;flex:none}
.src-count{margin-top:10px;font-size:15.5px;line-height:1.4;color:var(--on-navy)}
.src-count b{color:var(--white)}
.src-subs{list-style:none;padding:0;margin:14px 0 0;width:100%;font-size:14.5px}
.src-subs li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid rgba(201,188,166,.18);color:var(--on-navy)}
.src-subs b{color:var(--gold)}
.src-link{margin-top:auto;padding-top:18px;font-weight:600;font-size:15.5px;color:var(--white);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.src-link:hover{color:var(--gold)}

.fast{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:3px solid var(--gold)}
.fast li{padding:24px 22px 4px 0;display:flex;flex-direction:column;gap:12px}
.fast li + li{padding-left:22px;border-left:1px solid var(--rule)}
.fast-what{font-size:15px;font-weight:600;color:var(--muted);line-height:1.4;min-height:2.8em}
.fast-q{margin:0}
.fast-q p{font-family:var(--head);font-weight:600;font-size:clamp(21px,1.75vw,25px);line-height:1.24;color:var(--ink)}
.fast-q p::before{content:"\201C"}
.fast-q.cut p::before{content:"\201C\2026"}
.fast-q p::after{content:"\201D"}
.fast-who{margin-top:auto;font-size:14px;line-height:1.45;color:var(--muted);display:grid}
.fast-who b{color:var(--ink);font-weight:650}

.rw-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:28px}
.rw-head .intro{margin:0}
.rw-head .intro p{margin-top:12px}
.rw-filters{display:flex;flex-wrap:wrap;gap:8px}
.rw-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid #C4C9D3;background:var(--white);color:var(--ink);font:600 15px/1 var(--text);cursor:pointer}
.rw-chip span{font-weight:500;color:var(--muted)}
.rw-chip:hover{border-color:var(--navy)}
.rw-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.rw-chip[aria-pressed="true"] span{color:var(--gold)}
.rw-count{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.rw-grid{columns:3 300px;column-gap:20px}
.rw-card{break-inside:avoid;margin:0 0 20px;display:flex;flex-direction:column;gap:12px;background:var(--white);border:1px solid var(--rule);border-top:3px solid var(--gold);border-radius:10px;padding:22px 22px 20px}
.rw-card[hidden]{display:none}
.rw-title{font-size:17.5px;line-height:1.35}
.rw-card blockquote{margin:0}
.rw-card blockquote p{font-size:16.5px;line-height:1.6;color:var(--body)}
.rw-card figcaption{display:grid;gap:2px;font-size:14px;line-height:1.45;color:var(--muted)}
.rw-card figcaption b{color:var(--ink);font-weight:650;font-size:15px}
.rw-src{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--gold-ink);font-weight:600}
.rw-src svg{width:16px;height:16px;flex:none}

.rvp-where{align-items:center}
.rvp-where p{margin-top:16px;max-width:34em}
.ra-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ra-list li{display:grid;grid-template-columns:minmax(0,15.5em) minmax(0,1fr) 2.2em;align-items:center;gap:14px}
.ra-name{font-weight:600;color:var(--ink);font-size:15.5px;line-height:1.3}
.ra-name small{font-weight:500;color:var(--muted);font-size:13.5px;margin-left:4px}
.ra-bar{height:12px;background:var(--tile);border-radius:6px;overflow:hidden}
.ra-bar span{display:block;height:100%;background:var(--gold);border-radius:6px}
.ra-list b{font-family:var(--display);font-size:20px;color:var(--ink);text-align:right}

@media (max-width:1060px){
  .fast{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
  .fast li:nth-child(4){padding-left:0;border-left:0}
}
@media (max-width:960px){ .rvp-hero .phero-in{grid-template-columns:minmax(0,1fr)} .src-cards{max-width:640px} }
@media (max-width:700px){
  .fast{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fast li:nth-child(n){padding-left:0;border-left:0;padding-right:16px}
  .fast li:nth-child(even){padding-left:16px;border-left:1px solid var(--rule)}
  .ra-list li{grid-template-columns:minmax(0,10em) minmax(0,1fr) 2em;gap:10px}
}
@media (max-width:520px){
  .src-cards{grid-template-columns:1fr 1fr;gap:10px}
  .src-card{padding:18px 14px 16px}
  .src-score{font-size:46px}
  .src-score small{font-size:20px}
  .src-card .stars svg{width:16px;height:16px}
  .src-rec svg{width:18px;height:18px}
  .src-rec{font-size:15px}
  .src-subs{font-size:12.5px}
  .src-subs li{gap:6px}
  .fast{grid-template-columns:1fr;border-top-width:3px}
  .fast li:nth-child(n){padding:18px 0 14px;border-left:0}
  .fast-what{min-height:0}
  .fast li + li{border-top:1px solid var(--rule)}
  .rw-filters{gap:6px}
  .rw-chip{padding:0 13px;font-size:14.5px}
  .ra-list li{grid-template-columns:minmax(0,1fr) 2em;gap:6px 10px}
  .ra-list .ra-bar{grid-column:1/-1;grid-row:2}
}
@media (max-width:380px){ .src-cards{grid-template-columns:1fr} }

/* Review sources in their own colours: Checkatrade navy and red, Facebook blue */
.src-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 8px;border-radius:999px;font:650 13.5px/1.2 var(--text);white-space:nowrap;letter-spacing:0}
.src-chip svg{width:15px;height:15px;flex:none;stroke-width:3}
.src-chip.ct{background:var(--ct-navy);color:var(--white)}
.src-chip.ct svg{color:var(--ct-red)}
.src-chip.fb{background:var(--fb-blue);color:var(--white)}
.src-chip.fb svg{color:var(--white);stroke-width:2.4}
.on-navy .src-chip.ct,.hr-badge .src-chip.ct,.src-card .src-chip.ct{background:var(--white);color:var(--ct-navy)}

.hr-badge.ct{border-color:rgba(255,63,63,.85)}
.hr-badge.fb{border-color:rgba(8,102,255,.95)}
.hr-badge .hr-score{color:var(--white)}
.hr-badge .hr-score small{color:var(--on-navy)}
.hr-badge .src-chip{justify-self:start}
.hr-badge.fb .hr-rec{color:var(--white)}
.hr-badge.fb .hr-rec svg{color:#5C9BFF}

.rv-card{border-color:rgba(255,63,63,.6)}
.rv-src{margin-bottom:14px}
.rv-big{color:var(--white)}
.rv-big small{color:var(--on-navy)}
.rv-fbline .src-chip{flex:none}
.rv-mark{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.rv-mark .rv-rec{color:var(--on-navy);font-size:14.5px;font-weight:600}
.review.ct{border-top-color:var(--ct-red)}
.review.fb{border-top-color:var(--fb-blue)}
.rv-feature figcaption .rv-mark{justify-content:flex-start}

.src-card.ct{border-color:rgba(255,63,63,.6)}
.src-card.fb{border-color:rgba(8,102,255,.85)}
.src-card .src-score{color:var(--white)}
.src-card .src-score small{color:var(--on-navy)}
.src-card.fb .src-rec{color:var(--white)}
.src-card.fb .src-rec svg{color:#5C9BFF}
.src-name{line-height:1}

.rw-card.ct{border-top-color:var(--ct-red)}
.rw-card.fb{border-top-color:var(--fb-blue)}
.rw-src{color:var(--muted);font-weight:600;gap:10px;flex-wrap:wrap}
.fast-who .src-chip{justify-self:start;margin-top:8px}
.rw-chip[data-filter="facebook"][aria-pressed="true"]{background:var(--fb-blue);border-color:var(--fb-blue)}
.rw-chip[data-filter="facebook"][aria-pressed="true"] span{color:var(--white)}
.hr-quote .hr-by{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px}
.hr-quote .hr-by span{margin-top:0}
.hr-quote .src-chip{display:inline-flex;margin-top:0;font-size:12.5px;padding:3px 9px 3px 7px}
.hr-quote .src-chip svg{width:13px;height:13px}

/* Home page hero, split layout (14 Oct 2026): the finished bathroom runs to the right edge of the screen,
   the text lines up with the rest of the site, and one review sits on the photo. Old version in
   ../../archive/2026-10-14_home-hero-before-redesign/ */
.hero.hero-split{padding:0;container-type:inline-size}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);min-height:clamp(560px,66vh,720px)}
.hero-copy{align-self:center;padding:64px clamp(32px,4vw,72px) 72px var(--gutter);padding-left:max(var(--gutter),calc((100cqw - var(--wrap)) / 2 + var(--gutter)))}
.hero-mark{display:flex;align-items:center;gap:12px;width:max-content;color:var(--champagne);margin-bottom:20px}
.hero-mark::before,.hero-mark::after{content:"";width:46px;height:1px;background:currentColor;opacity:.75}
.hero-mark svg{width:22px;height:22px}
.hero-split h1{font-size:clamp(40px,3.6vw,58px);line-height:1.08}
.hero-split .lead{max-width:31em}
.hero-split .hero-rating{margin-top:32px}
.hero-family{margin-top:18px;font-size:15.5px;color:var(--champagne)}
.hero-media{position:relative;background:#0F1524;min-height:100%}
.hero-media .ba{position:absolute;inset:0}
.hero-media .ba-frame{height:100%;aspect-ratio:auto;border-radius:0}
.hero-media .ba figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.hero-media .ba-tag{top:20px}
.hero-media .ba-tag-before{left:20px}
.hero-media .ba-tag-after{right:20px}
.hero-quote{position:absolute;left:28px;bottom:28px;z-index:2;width:min(380px,calc(100% - 56px));margin:0;background:var(--white);border-radius:10px;padding:20px 22px 18px;box-shadow:0 18px 40px rgba(6,9,18,.38);border-top:3px solid var(--gold)}
.hero-quote blockquote{margin:0}
.hero-quote p{font-size:18px;line-height:1.45;color:var(--ink);font-weight:550}
.hero-quote figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:13.5px;line-height:1.3;color:var(--muted)}
@media (max-width:860px){
  .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-copy{padding:28px var(--gutter) 36px}
  .hero-mark{margin-bottom:16px}
  .hero-mark::before,.hero-mark::after{width:34px}
  .hero-split h1{font-size:clamp(30px,8.4vw,38px)}
  .hero-split .hero-rating{margin-top:24px}
  .hero-media{min-height:0;padding-bottom:28px;background:var(--navy)}
  .hero-media .ba{position:relative;inset:auto}
  .hero-media .ba-frame{aspect-ratio:4/5;height:auto}
  .hero-quote{position:relative;left:auto;bottom:auto;width:auto;margin:-64px var(--gutter) 0}
  .hero-quote p{font-size:17px}
}

/* Reviews and trust bar under the home page hero (15 Oct 2026, fourth version). One slim row, no cards: the
   Checkatrade and Facebook ratings, then three facts that are all Dean's own (24/7 call-outs, 15+ years family
   run, guaranteed up to 12 months). The hero is sized so the hero and this bar both fit on the first screen of a
   laptop (header 212px on desktop, the bar about 96px). */
.proof{background:var(--white);border-top:3px solid var(--gold);border-bottom:1px solid var(--rule)}
.proof-row{list-style:none;margin:0 auto;display:flex;align-items:stretch;justify-content:space-between}
.pb{display:flex;align-items:center;gap:12px;padding:16px 18px;flex:0 1 auto}
.pb:first-child{padding-left:0}
.pb:last-child{padding-right:0}
.pb + .pb{border-left:1px solid var(--rule)}
.pb a{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.pb a:hover .pb-count{text-decoration:underline;text-underline-offset:3px}
.pb-fig{font-family:var(--display);font-weight:600;font-size:30px;line-height:1;color:var(--ink);white-space:nowrap}
.pb-fig small{font-size:15px;color:var(--muted);margin-left:2px}
.pb-ico{width:40px;height:40px;flex:none;border-radius:50%;background:var(--tile);color:var(--navy);display:grid;place-items:center}
.pb-ico svg{width:19px;height:19px}
.pb-txt{display:grid;gap:4px;justify-items:start;line-height:1.25;white-space:nowrap}
.pb-txt b{color:var(--ink);font-size:15.5px;font-weight:650}
.pb-txt>span{font-size:13.5px;color:var(--muted)}
.pb-meta{display:inline-flex;align-items:center;gap:7px;font-size:13.5px}
.pb .stars{color:#D0A92E}
.pb .stars svg{width:14px;height:14px}
.pb-count{color:var(--ink);font-weight:600}
.pb .src-chip{font-size:12.5px}
@media (min-width:861px){
  .hero-fold{display:flex;flex-direction:column;min-height:min(calc(100svh - 100px),980px)}
  .hero-fold>.hero{flex:1 0 auto;display:flex}
  .hero-fold>.hero>.hero-grid{flex:1;min-height:0;width:100%}
}
@media (min-width:981px){
  .hero-fold{min-height:min(calc(100svh - var(--head-h)),1008px)}
}
@media (min-width:861px) and (max-height:940px){
  .hero-split .hero-copy{padding-top:36px;padding-bottom:40px}
  .hero-split .hero-mark{margin-bottom:14px}
  .hero-split h1{font-size:clamp(34px,3vw,46px)}
  .hero-split .lead{font-size:17.5px;margin-top:16px}
  .hero-split .hero-ctas{margin-top:24px}
  .hero-quote{left:20px;bottom:20px;width:min(330px,calc(100% - 40px));padding:14px 16px 13px}
  .hero-quote p{font-size:16px}
  .hero-quote figcaption{margin-top:8px}
}
@media (max-width:1180px){
  .proof-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
  .pb,.pb:first-child,.pb:last-child{padding:16px 14px;justify-content:center}
  .pb + .pb{border-left:0}
  .pb-rate{grid-column:span 3}
  .pb:not(.pb-rate){grid-column:span 2;border-top:1px solid var(--rule)}
  .pb-rate + .pb-rate,.pb:not(.pb-rate) + .pb:not(.pb-rate){border-left:1px solid var(--rule)}
}
@media (max-width:600px){
  .proof-row{padding:0}
  .pb,.pb:first-child,.pb:last-child{padding:16px 8px;flex-direction:column;gap:8px;text-align:center}
  .pb a{flex-direction:column;gap:8px}
  .pb-txt{justify-items:center;white-space:normal}
  .pb-fig{font-size:28px}
  .pb-ico{width:38px;height:38px}
  .pb-ico svg{width:18px;height:18px}
  .pb-txt b{font-size:15px}
  .pb-txt>span{font-size:13px}
}

/* Home hero: a short selling line, then Dean's services as ticks (15 Oct 2026) */
.hero-split .lead{max-width:30em}
.hero-ticks{margin:24px 0 0;gap:11px 24px;font-size:16px;max-width:660px}
.hero-ticks li{font-weight:550}
.hero-split .hero-ctas{margin-top:30px}
@media (min-width:861px) and (max-height:940px){
  .hero-ticks{margin-top:18px;gap:8px 24px;font-size:15.5px}
  .hero-split .hero-ctas{margin-top:24px}
}
@media (max-width:860px){
  .hero-ticks{grid-template-columns:1fr;gap:9px;margin-top:20px;font-size:16px}
}
@media (min-width:861px) and (max-height:820px){
  .hero-split .hero-mark{display:none}
  .hero-split .hero-copy{padding-top:26px;padding-bottom:30px}
  .hero-split h1{font-size:clamp(32px,2.8vw,42px)}
  .hero-split .lead{font-size:17px;margin-top:12px}
  .hero-ticks{margin-top:14px;gap:6px 22px;font-size:15px}
  .hero-split .hero-ctas{margin-top:20px}
}

/* Home hero: the H1 is now a small line above the headline (keeps "plumber and bathroom fitter in St Neots" as
   the page's main heading for Google), and the big line is a selling headline (15 Oct 2026). */
.hero-split h1.hero-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-family:var(--text);font-size:16px;font-weight:600;line-height:1.3;letter-spacing:.01em;color:var(--champagne);text-wrap:wrap}
.hero-eyebrow svg{width:21px;height:21px;flex:none;color:var(--gold)}
.hero-title{margin:0;font-family:var(--head);font-weight:600;color:var(--white);font-size:clamp(40px,3.6vw,58px);line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
@media (min-width:861px) and (max-height:940px){
  .hero-title{font-size:clamp(34px,3vw,46px)}
}
@media (min-width:861px) and (max-height:820px){
  .hero-split h1.hero-eyebrow{margin-bottom:10px;font-size:15px}
  .hero-title{font-size:clamp(32px,2.8vw,42px)}
}
@media (max-width:860px){
  .hero-split h1.hero-eyebrow{font-size:14.5px;margin-bottom:12px}
  .hero-eyebrow svg{width:19px;height:19px}
  .hero-title{font-size:clamp(30px,8.4vw,38px)}
}
@media (min-width:861px) and (max-height:820px){
  .hero-split .hero-copy{padding-top:18px;padding-bottom:22px}
  .hero-split h1.hero-eyebrow{margin-bottom:8px}
  .hero-split .lead{margin-top:10px}
  .hero-ticks{margin-top:12px}
  .hero-split .hero-ctas{margin-top:16px}
}

/* One-row header on desktop (15 Oct 2026): Dean's full logo, unchanged, on the left at the same size phones
   already use, with the menu, phone and quote button on the right. Saves about 110px of screen height on every
   page. Old two-row header in ../../archive/2026-10-15_header-before-one-row/ */
:root{--head-h:100px}
@media (min-width:981px){
  .head-in{flex-direction:row;justify-content:space-between;align-items:center;gap:24px;padding-top:12px;padding-bottom:12px}
  .head-in .logo{flex:none}
  .head-in .logo img{width:230px}
  .head-bar{width:auto;flex-wrap:nowrap;justify-content:flex-end;gap:28px;padding-top:0;border-top:0}
  .nav{gap:22px;font-size:15px}
  .head-right{gap:18px}
  .head-call{white-space:nowrap}
}
@media (min-width:1261px) and (max-width:1440px){
  .nav{gap:18px}
  .head-bar{gap:22px}
}
@media (min-width:981px) and (max-width:1260px){
  .head-in{gap:18px}
  .head-in .logo img{width:196px}
  .head-bar{gap:18px}
  .nav{gap:15px;font-size:14.5px}
  .head-right{gap:14px}
  .head-call{font-size:15px}
  .head-quote{padding:0 14px;font-size:15px}
}
@media (min-width:981px) and (max-width:1120px){
  .head-right .head-call{display:none}
  .head-in .head-call-icon{display:grid;place-items:center;order:3;width:44px;height:44px;flex:none;border-radius:50%;background:var(--gold);color:var(--navy-deep)}
  .head-in .head-call-icon svg{width:20px;height:20px}
  .head-in .head-bar{order:2;margin-left:auto}
}

/* Home hero, version with more room (15 Oct 2026): the photo column is a little wider and gets a strip of Dean's
   bathrooms to flick between; the review moves into the text column under the buttons. Previous version in
   ../../archive/2026-10-15_home-hero-before-project-switcher/ */
@media (min-width:861px){
  .hero-split .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,46%)}
  .hero-split .hero-copy{padding-right:clamp(32px,4.5vw,80px)}
}
.hero-copy .hero-quote{position:static;width:auto;max-width:34em;margin:30px 0 0;padding:4px 0 4px 18px;background:transparent;border:0;border-left:3px solid var(--gold);border-radius:0;box-shadow:none}
.hero-copy .hero-quote p{color:var(--white);font-size:16.5px;font-weight:450;line-height:1.5}
.hero-copy .hero-quote figcaption{margin-top:8px;color:var(--on-navy);font-size:13.5px}
.hero-proj{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;background:linear-gradient(to top,rgba(15,21,36,.92),rgba(15,21,36,.72));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:1px solid rgba(216,194,66,.35)}
.hero-proj-cap{display:grid;gap:2px;margin:0;line-height:1.25;min-width:0}
.hero-proj-cap b{color:var(--white);font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.01em}
.hero-proj-cap span{color:var(--on-navy);font-size:13.5px}
.hero-proj-thumbs{display:flex;gap:8px;flex:none}
.hp-thumb{width:56px;height:56px;padding:0;border:2px solid rgba(201,188,166,.35);border-radius:8px;overflow:hidden;background:#0F1524;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.hp-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.72;transition:opacity .15s ease}
.hp-thumb:hover img,.hp-thumb[aria-pressed="true"] img{opacity:1}
.hp-thumb:hover{border-color:rgba(216,194,66,.7)}
.hp-thumb[aria-pressed="true"]{border-color:var(--gold);transform:translateY(-2px)}
.hp-thumb:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hero-media .ba-knob{top:46%}
@media (min-width:861px) and (max-height:940px){
  .hero-copy .hero-quote{margin-top:22px}
  .hero-copy .hero-quote p{font-size:15.5px}
}
@media (min-width:861px) and (max-height:730px){
  .hero-copy .hero-quote{display:none}
}
@media (min-width:861px) and (max-width:1100px){
  .hero-copy .hero-quote{display:none}
}
@media (min-width:861px) and (max-height:820px){
  .hero-copy .hero-quote{margin-top:18px}
  .hero-copy .hero-quote p{font-size:15px}
  .hp-thumb{width:48px;height:48px}
  .hero-proj{padding:10px 16px}
  .hero-proj-cap b{font-size:16px}
}
@media (max-width:860px){
  .hero-copy .hero-quote{display:none}
  .hero-media{padding-bottom:0}
  .hero-proj{position:relative;background:var(--navy-deep);-webkit-backdrop-filter:none;backdrop-filter:none;padding:12px var(--gutter)}
  .hp-thumb{width:50px;height:50px}
  .hero-proj-cap b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.hp-thumb,.hp-thumb img{transition:none}.hp-thumb[aria-pressed="true"]{transform:none}}

/* Hero service ticks, tidied (15 Oct 2026): four short items in a 2 by 2 grid, each on one line. 24/7 call-outs
   are in the trust bar and the area is in the heading line, so they're not repeated here. */
.hero-split .hero-ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(2,max-content);gap:10px 40px;max-width:none;font-size:16.5px}
.hero-split .hero-ticks li{display:flex;align-items:center;gap:10px;color:var(--white);font-weight:550;white-space:nowrap}
.hero-split .hero-ticks svg{width:18px;height:18px;flex:none;color:var(--gold);margin:0}
@media (min-width:861px) and (max-height:940px){
  .hero-split .hero-ticks{margin-top:18px;gap:8px 36px;font-size:16px}
}
@media (min-width:861px) and (max-height:820px){
  .hero-split .hero-ticks{margin-top:14px;gap:6px 32px;font-size:15.5px}
}
@media (max-width:420px){
  .hero-split .hero-ticks{grid-template-columns:1fr;gap:8px}
}

/* Hero review as a white card so it stands out (15 Oct 2026). Red top edge for Checkatrade, as on the review
   cards elsewhere on the site. */
.hero-copy .hero-quote{max-width:540px;margin-top:28px;padding:18px 22px 16px;background:var(--white);border:0;border-top:3px solid var(--ct-red);border-radius:12px;box-shadow:0 18px 44px rgba(6,9,18,.38)}
.hq-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.hero-quote .stars{color:#D0A92E}
.hero-quote .stars svg{width:18px;height:18px}
.hero-copy .hero-quote .src-chip.ct{background:var(--ct-navy);color:var(--white)}
.hero-copy .hero-quote .src-chip.ct svg{color:var(--ct-red)}
.hero-copy .hero-quote p{color:var(--ink);font-size:17px;font-weight:550;line-height:1.5}
.hero-copy .hero-quote figcaption{margin-top:10px;color:var(--muted);font-size:13.5px}
@media (min-width:861px) and (max-height:940px){
  .hero-copy .hero-quote{margin-top:22px;padding:14px 18px 13px}
  .hero-copy .hero-quote p{font-size:16px}
  .hq-top{margin-bottom:8px}
}
@media (min-width:861px) and (max-height:820px){
  .hero-copy .hero-quote{margin-top:18px;padding:12px 16px 11px}
  .hero-copy .hero-quote p{font-size:15px}
  .hero-quote .stars svg{width:15px;height:15px}
  .hero-copy .hero-quote figcaption{margin-top:6px}
}

/* Trust bar facts lead with a figure like the ratings do (15 Oct 2026): 10/10, 100%, 24/7, 15+, 12 read as one
   row, so the grey icon circles are gone. A thin gold rule sits between figure and text on every item. */
.pb-fig{position:relative;padding-right:14px}
.pb-fig::after{content:"";position:absolute;right:0;top:4px;bottom:4px;width:1px;background:rgba(160,128,38,.45)}
.pb a{gap:14px}
.pb{gap:14px}
@media (max-width:600px){
  .pb-fig{padding-right:0}
  .pb-fig::after{display:none}
}
@media (min-width:1181px){
  .pb{padding:16px 14px;gap:12px}
  .pb a{gap:12px}
  .pb-fig{font-size:28px;padding-right:12px}
  .pb-txt b{font-size:15px}
  .pb-txt>span{font-size:13px}
}
.pb-fig small.pb-pre{font-family:var(--text);font-size:12.5px;font-weight:600;color:var(--muted);margin:0 5px 0 0;letter-spacing:0}

/* Hero review card moved onto the before-and-after photo (15 Oct 2026): bottom left, over the "before" side, just
   above the bathroom strip, so the finished room stays clear. */
.hero-media{--strip-h:88px}
.hero-proj{height:var(--strip-h);box-sizing:border-box}
.hero-media .hero-quote{position:absolute;z-index:3;left:20px;bottom:calc(var(--strip-h) + 16px);width:min(360px,calc(100% - 40px));margin:0;padding:15px 18px 13px;background:var(--white);border:0;border-top:3px solid var(--ct-red);border-radius:12px;box-shadow:0 18px 44px rgba(6,9,18,.45)}
.hero-media .hero-quote .src-chip.ct{background:var(--ct-navy);color:var(--white)}
.hero-media .hero-quote .src-chip.ct svg{color:var(--ct-red)}
.hero-media .hero-quote p{color:var(--ink);font-size:15.5px;font-weight:550;line-height:1.45}
.hero-media .hero-quote figcaption{margin-top:8px;color:var(--muted);font-size:12.5px}
.hero-media .hero-quote .hq-top{margin-bottom:8px}
.hero-media .hero-quote .stars svg{width:16px;height:16px}
@media (min-width:861px) and (max-height:820px){
  .hero-media{--strip-h:72px}
  .hero-media .hero-quote{left:16px;bottom:calc(var(--strip-h) + 12px);width:min(320px,calc(100% - 32px));padding:12px 15px 11px}
  .hero-media .hero-quote p{font-size:14.5px}
  .hero-media .hero-quote figcaption{margin-top:6px}
}
@media (max-width:860px){
  .hero-media{--strip-h:auto;padding-bottom:24px}
  .hero-proj{height:auto}
  .hero-media .hero-quote{position:relative;left:auto;bottom:auto;width:auto;margin:16px var(--gutter) 0}
}

/* Horizontal logo (15 Oct 2026): the same crown, DW box, wordmark and tap laid out in one line, from James. Lets the
   header drop to a slim bar. */
.logo img{width:300px}
.site-foot .logo img{width:340px;max-width:100%}
:root{--head-h:72px}
@media (min-width:981px){
  .head-in{padding-top:14px;padding-bottom:14px}
  .head-in .logo img{width:280px}
}
@media (min-width:981px) and (max-width:1260px){
  .head-in .logo img{width:236px}
}
@media (max-width:980px){
  .head-in{padding-top:14px;padding-bottom:14px}
  .head-in .logo img{width:min(250px, calc(100vw - 140px))}
}
@media (min-width:981px) and (max-width:1120px){
  .head-in .logo img{width:200px}
}

/* One phrase in the hero intro picked out (15 Oct 2026): the full-renovation point Dean wants made. */
.hero-split .lead strong{color:var(--white);font-weight:600}

/* The home hero design carried to Bathroom fitters (15 Oct 2026): breadcrumbs sit at the top of the text column. */
.hero-split .crumbs{margin:0 0 18px}
@media (min-width:861px) and (max-height:820px){
  .hero-split .crumbs{margin-bottom:10px;font-size:13.5px}
}
@media (min-width:861px) and (max-height:700px){
  .hero-split .crumbs{display:none}
}


/* Review line above the hero eyebrow (15 Oct 2026): plain text on the navy, no pill. Checkatrade (28, all 10/10)
   and Facebook (20, 100% recommend) together are 48 reviews, all positive. */
.rating-line{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:10px;margin:0 0 14px;color:var(--on-navy);font-size:15px;line-height:1.3;text-decoration:none}
.rating-line .stars{color:var(--gold)}
.rating-line .stars svg{width:17px;height:17px}
.rating-line b{color:var(--white);font-weight:650}
.rating-line:hover .rl-txt{text-decoration:underline;text-underline-offset:3px}
@media (min-width:861px) and (max-height:820px){
  .rating-line{margin-bottom:10px;font-size:14px}
  .rating-line .stars svg{width:15px;height:15px}
}
@media (max-width:860px){ .rating-line{font-size:14.5px;align-items:flex-start} .rating-line .stars{flex:none;margin-top:1px} }

/* Hero hierarchy pass (15 Oct 2026): headline bigger where there's room; reviewer initials lead the review line
   (one rating line instead of two); review line set apart, eyebrow tight to the headline; ticks quieter than the
   intro; smaller review card on the photo; ticks hidden on phones so the photo reaches the first screen. */
.av-stack{display:flex;flex:none}
.av-stack span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--navy-deep);border:2px solid var(--navy);margin-left:-7px}
.av-stack span:first-child{margin-left:0}
.av-stack span:nth-child(1){background:var(--gold)}
.av-stack span:nth-child(2){background:var(--champagne)}
.av-stack span:nth-child(3){background:#FFFFFF}
.av-stack span:nth-child(4){background:#E3D063}
.rating-line{gap:12px;margin:0 0 24px}
.hero-split h1.hero-eyebrow{margin-bottom:8px}
.hero-title{font-size:clamp(44px,4vw,64px);line-height:1.06}
.hero-split .hero-ticks li{color:var(--on-navy);font-weight:500}
.hero-split .hero-ticks{font-size:16px}
.hero-media .hero-quote{width:min(330px,calc(100% - 40px));padding:13px 16px 12px}
.hero-media .hero-quote p{font-size:14.5px}
.hero-media .hero-quote .stars svg{width:14px;height:14px}
@media (min-width:861px) and (max-height:940px){
  .hero-title{font-size:clamp(38px,3.6vw,54px)}
  .rating-line{margin-bottom:20px}
}
@media (min-width:861px) and (max-height:820px){
  .hero-title{font-size:clamp(34px,3.2vw,46px)}
  .rating-line{margin-bottom:14px}
  .av-stack span{width:28px;height:28px;font-size:10px}
  .hero-split h1.hero-eyebrow{margin-bottom:6px}
  .hero-media .hero-quote{width:min(300px,calc(100% - 32px))}
  .hero-media .hero-quote p{font-size:14px}
}
@media (max-width:860px){
  .hero-split .hero-ticks{display:none}
  .rating-line{margin-bottom:18px;align-items:center}
  .av-stack span{width:30px;height:30px;font-size:10.5px}
  .hero-title{font-size:clamp(32px,9vw,40px)}
}

/* Hierarchy pass, follow-up: the Bathroom fitters headline is longer, so it tops out at 48px (three lines, not five);
   on phones the hero's own call button is hidden because the sticky bar and the header already offer Call. */
@media (max-width:860px){
  .hero-split .hero-ctas a.btn-line[href^="tel:"]{display:none}
}

/* Review line as two short lines: "Rated 10/10 on Checkatrade" over "Recommended by all 20 on Facebook". */
.rl-txt > span{display:block}
.rl-txt > span + span{margin-top:2px}
@media (max-width:860px){
  .rating-line{font-size:14px;gap:10px}
  .av-stack span{width:28px;height:28px;font-size:10px;margin-left:-8px}
}
@media (max-width:374px){ .rating-line{font-size:13px} }

/* The new hero on the service pages (15 Oct 2026). Radiators and Repairs have no before-and-after photos, so the
   photo side is one photo with thumbnails to swap it. Emergencies keeps its "Do this now" steps on that side. */
.hero-media .hero-pic{position:absolute;inset:0;margin:0}
.hero-pic img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:861px) and (max-height:940px){
}
@media (min-width:861px) and (max-height:760px){
}
@media (max-width:860px){
  .hero-media .hero-pic{position:relative;inset:auto;aspect-ratio:4/5}
}

/* Headings in Playfair Display across the site (15 Oct 2026), not Cinzel capitals: easier to scan, still a classic
   serif that suits the Cinzel logo. Cinzel stays for the logo, the trust bar figures, the score figures and the
   project captions. Hero headlines a touch bigger, as lowercase reads smaller than capitals. */
.hero-title{letter-spacing:-.005em;line-height:1.08;font-size:clamp(46px,4.2vw,60px)}
@media (min-width:861px) and (max-height:940px){ .hero-title{font-size:clamp(42px,3.9vw,58px)} }
@media (min-width:861px) and (max-height:820px){ .hero-title{font-size:clamp(38px,3.5vw,50px)} }
@media (max-width:860px){ .hero-title{font-size:clamp(34px,9.4vw,42px)} }

/* Dean's own "about me" (15 Oct 2026): sign-off line under his text on the About page. */
.about-in p.signoff{margin-top:22px;font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:21px;line-height:1.35;color:var(--ink)}
.about-in p.signoff .so-by{display:block;margin-top:4px;font-family:var(--text);font-size:15px;font-weight:500;color:var(--muted)}
.about-in .btns{margin-top:26px}

/* Emergency "Do this now" card on narrow desktop screens (861 to 1100px wide): tighter, so the trust bar stays on the
   first screen. */
@media (min-width:861px) and (max-width:1100px){
}

/* Emergency hero, redesigned (15 Oct 2026). Not a showcase page, so no photo: the left side leads with a big
   tap-to-call number, the right side is a light panel with the steps as a numbered timeline and the gas warning in
   its own alert box. */
.hero-em{--alert:#C2372C}
.em-call{display:flex;align-items:center;gap:16px;width:fit-content;max-width:100%;margin-top:28px;padding:12px 26px 12px 12px;background:var(--gold);color:var(--navy-deep);border-radius:14px;text-decoration:none;box-shadow:0 14px 34px rgba(6,9,18,.35);transition:transform .15s ease,box-shadow .15s ease}
.em-call:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(6,9,18,.45)}
.em-call:focus-visible{outline:3px solid var(--white);outline-offset:3px}
.em-call-ic{position:relative;flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--navy-deep);color:var(--gold)}
.em-call-ic svg{width:26px;height:26px}
.em-call-ic::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--navy-deep);opacity:0;animation:emPulse 2.4s ease-out infinite}
@keyframes emPulse{0%{opacity:.55;transform:scale(.92)}100%{opacity:0;transform:scale(1.3)}}
.em-call-txt{display:grid;gap:3px;line-height:1.1}
.em-call-txt small{font-size:14px;font-weight:650;letter-spacing:.02em}
.em-call-txt b{font-size:clamp(28px,2.5vw,36px);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.hero-em .em-alt{display:flex;align-items:center;gap:10px;margin:18px 0 0;color:var(--on-navy);font-size:16px}
.em-alt svg{width:20px;height:20px;color:var(--gold);flex:none}
.em-alt a{color:var(--white);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.hero-media.hero-media-now{display:flex;align-items:center;justify-content:center;background:var(--tile);padding:40px clamp(28px,4vw,72px)}
.hero-media-now .now{width:100%;max-width:560px;padding:0;background:transparent;box-shadow:none;border-radius:0}
.hero-media-now .now-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:5px 12px 5px 10px;border-radius:999px;background:var(--alert);color:var(--white);font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.hero-media-now .now-tag svg{width:15px;height:15px}
.hero-media-now .now h2{font-family:var(--head);font-size:clamp(30px,2.5vw,38px);font-weight:600;letter-spacing:-.005em;margin:0 0 22px;color:var(--ink)}
.hero-media-now .now ol{gap:0}
.hero-media-now .now li{position:relative;padding-bottom:18px;grid-template-columns:34px 1fr;gap:16px;font-size:16px;line-height:1.5;color:var(--body)}
.hero-media-now .now li:last-child{padding-bottom:0}
.hero-media-now .now li::before{position:relative;z-index:1;width:34px;height:34px;background:var(--navy);color:var(--gold);font-size:15px}
.hero-media-now .now li:not(:last-child)::after{content:"";position:absolute;left:16px;top:38px;bottom:4px;width:2px;border-radius:2px;background:#CFD3DB}
.hero-media-now .now-gas{display:flex;gap:14px;align-items:flex-start;margin-top:24px;padding:14px 16px;background:#FBECEA;border:1px solid #F0C8C3;border-left:4px solid var(--alert);border-radius:10px}
.hero-media-now .now-gas svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--alert)}
.hero-media-now .now-gas p{margin:0;color:var(--ink);font-size:14.5px;line-height:1.5}
.hero-media-now .now-gas a{color:var(--alert);font-weight:700;white-space:nowrap}
@media (min-width:861px) and (max-height:940px){
  .em-call{margin-top:22px}
  .hero-media.hero-media-now{padding-top:28px;padding-bottom:28px}
  .hero-media-now .now h2{font-size:30px;margin-bottom:16px}
  .hero-media-now .now li{font-size:15px;line-height:1.45;padding-bottom:14px}
  .hero-media-now .now-gas{margin-top:18px;padding:12px 14px}
  .hero-media-now .now-gas p{font-size:14px}
}
@media (min-width:861px) and (max-height:800px), (min-width:861px) and (max-width:1100px){
  .em-call{margin-top:18px;padding:10px 22px 10px 10px}
  .em-call-ic{width:48px;height:48px}
  .em-call-ic svg{width:22px;height:22px}
  .em-call-txt b{font-size:28px}
  .hero-em .em-alt{margin-top:12px;font-size:15px}
  .hero-media.hero-media-now{padding:20px clamp(20px,2.6vw,40px)}
  .hero-media-now .now-tag{margin-bottom:8px}
  .hero-media-now .now h2{font-size:26px;margin-bottom:12px}
  .hero-media-now .now li{font-size:14px;line-height:1.4;padding-bottom:10px;grid-template-columns:28px 1fr;gap:12px}
  .hero-media-now .now li::before{width:28px;height:28px;font-size:13px}
  .hero-media-now .now li:not(:last-child)::after{left:13px;top:31px}
  .hero-media-now .now-gas{margin-top:14px;padding:10px 12px;gap:10px}
  .hero-media-now .now-gas p{font-size:13.5px;line-height:1.45}
  .hero-media-now .now-gas svg{width:20px;height:20px}
}
@media (max-width:860px){
  .em-call{width:100%;margin-top:24px}
  .em-call-txt b{font-size:clamp(24px,7.4vw,30px)}
  .hero-media.hero-media-now{display:block;padding:32px var(--gutter) 36px;background:var(--tile)}
  .hero-media-now .now h2{font-size:28px}
}
.hero-em .hero-title .ht-cta{display:block;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.em-call-ic::after{animation:none}.em-call{transition:none}}
/* A town page with one confirmed job (15 Oct 2026): the job's write-up sits beside its before-and-after. */
.proj-one{align-items:center}
.proj-one h3{font-family:var(--head);font-weight:600;font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.005em}

/* Optional email box on the quote form: the (optional...) part of the label is lighter */
.field label .opt{font-weight:400;color:var(--muted);font-size:14.5px}

/* Thank-you after the quote form: who calls and from which number; a call-now line for emergencies */
.done .done-from{display:flex;gap:10px;align-items:flex-start;justify-content:center;text-align:left;font-size:15.5px;color:var(--muted);max-width:26em;margin-top:16px}
.done .done-from svg{width:18px;height:18px;color:var(--gold);flex:none;margin-top:3px}
.done .done-from b{color:var(--ink);white-space:nowrap}
.done .done-urgent{background:var(--navy);color:var(--on-navy);border-radius:8px;padding:12px 16px;font-size:15.5px;max-width:26em}
.done .done-urgent[hidden]{display:none}
.done .done-urgent b{color:var(--white)}
.done .done-urgent a{color:var(--gold);font-weight:700;white-space:nowrap}
.done .done-from a{color:var(--ink);font-weight:700;white-space:nowrap}
.done .done-from[hidden]{display:none}

/* 404: "404" drawn as pipework on navy, every end capped except one that drips; then links to the main pages */
.nf{background:var(--navy);color:var(--on-navy);padding:72px 0 88px}
.nf-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.nf h1{color:var(--white);font-size:clamp(38px,4.2vw,58px);line-height:1.08}
.nf-lead{margin:18px 0 0;font-size:19px;max-width:30em}
.nf-now{display:flex;gap:10px;align-items:flex-start;margin:26px 0 0;font-size:16.5px}
.nf-now svg{width:20px;height:20px;color:var(--gold);flex:none;margin-top:3px}
.nf-now a{color:var(--white);font-weight:700;white-space:nowrap}
.nf-art{display:block;width:100%;max-width:520px;height:auto;justify-self:end;overflow:visible}
.nf-art .p{stroke:var(--gold);stroke-width:18}
.nf-art .s{stroke:#F4EBB0;stroke-width:5;opacity:.5}
.nf-art .sh{stroke:#0E1322;stroke-width:18;opacity:.45}
.nf-art .f{fill:var(--champagne)}
.nf-art .drip{fill:var(--on-navy);transform-box:fill-box;transform-origin:50% 0;animation:nfDrip 2.8s cubic-bezier(.5,0,.9,.5) infinite}
@keyframes nfDrip{0%{transform:translateY(-12px) scale(.2);opacity:0}30%{transform:translateY(0) scale(1);opacity:1}72%{opacity:1}100%{transform:translateY(30px) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.nf-art .drip{animation:none}}
.nf-go{padding:64px 0 88px}
.nf-go h2{font-size:clamp(26px,2.6vw,34px)}
.nf-links{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
.nf-links li{border-top:1px solid var(--rule)}
.nf-links a{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:18px 0 20px;text-decoration:none}
.nf-links svg{width:22px;height:22px;color:var(--gold-ink);grid-row:span 2;margin-top:2px}
.nf-links b{color:var(--ink);font-size:17.5px;font-weight:650;line-height:1.3}
.nf-links span{color:var(--muted);font-size:15.5px;line-height:1.45}
.nf-links a:hover b{text-decoration:underline;text-underline-offset:3px}
.nf-links a:focus-visible{outline:3px solid var(--gold-ink);outline-offset:4px;border-radius:4px}
@media (max-width:860px){
  .nf{padding:40px 0 60px}
  .nf-in{grid-template-columns:1fr;gap:28px}
  .nf-art{order:-1;max-width:300px;justify-self:start}
  .nf-lead{font-size:18px}
  .nf-links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .nf-go{padding:48px 0 64px}
}
@media (max-width:560px){.nf-links{grid-template-columns:1fr}}

/* Before/After labels on the sliders are buttons: tap one to slide all the way to that photo */
.ba-tag{pointer-events:auto;border:0;font-family:var(--text);line-height:1.3;cursor:pointer;z-index:2;transition:background-color .15s ease}
.ba-tag::before{content:"";position:absolute;inset:-10px -8px}
.ba-tag-before:hover{background:rgba(20,27,46,.95)}
.ba-tag-after:hover{background:var(--gold-hover)}
/* Bigger labels, so they read as something to tap */
.ba-tag{padding:8px 16px;font-size:15.5px;font-weight:650;border-radius:6px;box-shadow:0 2px 8px rgba(10,14,26,.28)}
@media (max-width:600px){.ba-tag{padding:7px 14px;font-size:14.5px}}

/* Our work: the links under each project to its service and town pages */
.proj-more{font-size:15.5px;color:var(--muted);margin-top:14px}
.proj-more a{color:var(--ink);font-weight:600;text-decoration-color:var(--gold);text-underline-offset:3px}
/* Areas: the "Ask us" card spans the row, so seven cards sit evenly */
.towns .town-ask{grid-column:1/-1}
.towns .town-ask p{max-width:46em}
.proj{scroll-margin-top:16px}