/* ==========================================================================
   Moston Roofing Limited — website styles
   Designed and built by Revonik Ltd · Brand: logo red #E31D24 / logo charcoal #1E1E1D
   ========================================================================== */

:root{
  --red:#E31D24;          /* Moston logo red (sampled from master artwork) */
  --red-deep:#B8151B;     /* hover / text-on-white */
  --red-light:#FF6B70;    /* tint for text on dark backgrounds */
  --ink:#141719;
  --ink-2:#1E2225;
  --ink-3:#2A2F33;
  --paper:#F4F6F7;
  --white:#ffffff;
  --grey:#5D6A72;
  --line:#E2E7EA;
  --radius:10px;
  --w-enter:cubic-bezier(.16,1,.3,1);   /* widget show / collapse */
  --w-ease:cubic-bezier(.22,.61,.36,1);  /* widget fades */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;letter-spacing:-.02em;line-height:1.12}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.btn{display:inline-block;font-family:'Archivo',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:.01em;padding:14px 28px;border-radius:8px;transition:.2s;cursor:pointer;border:0}
.btn-red{background:var(--red);color:var(--white)}
.btn-red:hover{background:var(--red-deep)}
.btn-areas{background:var(--red);color:var(--white)}
.btn-areas:hover{background:var(--ink)}
.btn-ghost{border:2px solid #fff;color:#fff;padding:12px 26px;background:rgba(255,255,255,.06)}
.btn-ghost:hover{background:var(--white);color:var(--ink)}
.btn-outline{border:2px solid var(--line);color:var(--ink);padding:12px 26px;background:var(--white)}
.btn-outline:hover{border-color:var(--red);color:var(--red-deep)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);color:var(--ink);font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:7px 15px;border-radius:999px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--red);flex:none}
.eyebrow-dark{background:rgba(227,29,36,.16);border-color:rgba(255,107,112,.42);color:#ffd7d8}
.section-title{font-size:clamp(29px,3.6vw,44px);font-weight:800;margin:14px 0 14px}
.lede{color:var(--grey);font-size:17px;max-width:640px}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------- top bars ---------- */
/* Red bar: tagline, hours, area coverage — one centred, evenly balanced row. */
.topbar-alert{background:var(--red);font-size:13px;font-weight:600;letter-spacing:.02em}
.topbar-alert .wrap{display:flex;justify-content:center;align-items:center;min-height:38px;flex-wrap:wrap;row-gap:4px;padding:7px 0;text-align:center}
.topbar-alert span{color:#fff}
.topbar-alert span:not(:last-child)::after{content:"\00b7";margin:0 14px;color:#fff;opacity:.65}

/* Black bar: the two contact channels — centred, evenly balanced row. */
.topbar{background:var(--ink);font-size:13.5px}
.topbar .wrap{display:flex;justify-content:center;align-items:center;min-height:40px;flex-wrap:wrap;row-gap:4px;padding:7px 0}
.topbar a{color:#fff;font-weight:600}
.topbar a:hover{color:#c3ccd2}
.topbar a:not(:last-child)::after{content:"\00b7";margin:0 14px;color:#c3ccd2}

/* ---------- header ---------- */
header{background:var(--white);position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--line),0 6px 24px rgba(20,23,25,.06)}
header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:128px;gap:20px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:100px;width:auto}
nav>ul{display:flex;list-style:none;gap:2px}
nav a{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;padding:10px 13px;border-radius:7px;color:var(--ink);white-space:nowrap}
nav a:hover,nav a.active{background:var(--paper);color:var(--red-deep)}
.has-sub{position:relative}
.has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.subnav{position:absolute;left:0;top:calc(100% + 6px);min-width:246px;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 44px rgba(20,23,25,.16);padding:8px;list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:none}
.subnav a{font-weight:500;font-size:14.5px;padding:9px 12px}
.hdr-cta{display:flex;align-items:center;gap:16px}
.hdr-phone{text-align:right;line-height:1.2}
.hdr-phone small{display:block;font-size:11px;color:var(--grey);text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.hdr-phone strong{font-family:'Archivo',sans-serif;font-size:21px;font-weight:800;letter-spacing:-.02em}
.hdr-phone strong:hover{color:var(--red-deep)}
/* Both are mobile-only (revealed at ≤960px) — accent red with white marks. */
.navtoggle{display:none;background:var(--red);border:1px solid var(--red);border-radius:8px;width:46px;height:44px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.navtoggle span{width:20px;height:2px;background:#fff;display:block}
.hdr-call{display:none;width:46px;height:46px;border-radius:8px;background:var(--red);border:1px solid var(--red);align-items:center;justify-content:center;font-size:20px;color:#fff;flex:none}
.hdr-call:hover,.navtoggle:hover{background:var(--red-deep);border-color:var(--red-deep)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden}
.hero-bg{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hero-bg.is-active{opacity:1}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:64% center;opacity:.55}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,17,19,.96) 0%,rgba(15,17,19,.86) 38%,rgba(15,17,19,.30) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:78px;padding-bottom:150px}
.hero-title{font-size:clamp(36px,5.2vw,62px);font-weight:800;max-width:16ch;margin:22px 0 0;color:#fff}
.hero-title em{font-style:normal;color:var(--red)}
.hero-slider{min-height:0}
.hero-slide{display:none}
.hero-slide.is-active{display:block;animation:heroFade .5s ease}
.hero-slide p{margin:20px 0 0;font-size:18px;max-width:600px;color:#ccd4d9}
@keyframes heroFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-dots{display:flex;gap:10px;margin-top:26px}
.hero-dot{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.45);background:transparent;padding:0;cursor:pointer;transition:.2s}
.hero-dot:hover{border-color:#fff}
.hero-dot.is-active{background:var(--red);border-color:var(--red)}
@media(prefers-reduced-motion:reduce){.hero-slide.is-active{animation:none}.hero-bg{transition:none}}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.hero-badges{margin-top:44px}
.hero-badges h4{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#93a0a8;margin-bottom:14px;font-weight:700}
.badge-row{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:flex;flex-direction:column;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:10px 16px;min-width:118px;transition:.2s}
a.badge:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.badge b{font-family:'Archivo',sans-serif;font-size:15px;font-weight:800;color:var(--white);line-height:1.25}
.badge span{font-size:11.5px;color:#9dabb3;letter-spacing:.05em;text-transform:uppercase;margin-top:2px}

/* inline quick-enquiry card overlapping the hero */
.quickform{position:relative;z-index:3;margin-top:-92px;margin-bottom:0}
.quickform .card{background:var(--white);border-radius:14px;box-shadow:0 22px 60px rgba(20,23,25,.22);padding:26px 28px}
.qf-head{display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap;margin-bottom:18px}
.qf-head h2{font-size:23px;font-weight:800;margin-right:6px}
.qf-tick{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--grey)}
.qf-tick i{width:17px;height:17px;border-radius:50%;background:var(--red);color:#fff;font-size:10px;font-style:normal;display:flex;align-items:center;justify-content:center;flex:none}
.qf-grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:center}
.qf-grid input,.qf-grid select{width:100%;font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:13px 14px}
.qf-grid input:focus,.qf-grid select:focus{outline:0;border-color:var(--red);background:var(--white);box-shadow:0 0 0 3px rgba(227,29,36,.14)}
.qf-grid .btn{white-space:nowrap;padding:14px 24px}

/* ---------- accreditation strip ---------- */
.accred{padding:56px 0 6px;background:var(--white)}
.accred .wrap{text-align:center}
.accred h2{font-size:clamp(23px,2.6vw,30px);font-weight:800;max-width:32ch;margin:0 auto}
.accred p{color:var(--grey);max-width:600px;margin:12px auto 30px;font-size:16px}
.accred-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* Six chips can't sit on one 1152px row, and left unconstrained they wrap 5 + 1 with a
   lone orphan underneath. Capping the homepage strip forces a balanced 3 + 3 instead.
   Scoped to .accred so the Contact page's left-aligned row is unaffected. */
.accred .accred-row{max-width:900px;margin-left:auto;margin-right:auto}
.acc-chip{border:1px solid var(--line);border-radius:12px;padding:16px 22px;min-width:172px;background:var(--white);transition:.2s}
.acc-chip:hover{border-color:#c9d2d7;box-shadow:0 10px 26px rgba(20,23,25,.07)}
.acc-chip b{display:block;font-family:'Archivo',sans-serif;font-size:16px;font-weight:800}
.acc-chip span{display:block;font-size:12.5px;color:var(--grey);margin-top:3px}
.acc-chip .score{color:var(--red-deep);font-weight:800}

/* ---- the homepage accreditation strip carries real accreditation artwork ------
   An explicit 3-up grid rather than wrapped flex. Six chips of differing content
   widths wrapped 4 + 2 and stranded a pair — the same orphan the case-study meta
   boxes had, and the same fix. Scoped to .accred throughout so the
   Contact page's left-aligned row is untouched. */
.accred .accred-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.accred .acc-chip{min-width:0;padding:18px 14px 16px;text-align:center;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center}
/* The mark sits in a fixed-height stage so every caption lines up across the row
   whatever the artwork's aspect ratio. It is an <i>, NEVER a <span>: .acc-chip span
   above sets colour, size and display, and out-specifies a single class on a span —
   which is exactly how the claim glyphs first came out grey instead of brand red. */
.acc-mark{height:56px;display:grid;place-items:center;margin-bottom:13px}
.acc-mark img{display:block;max-width:100%}
/* Per-logo heights, set by eye for equal optical weight — a wide wordmark reads far
   bigger than a square seal at the same height, so these are deliberately not uniform.
   The widths are each file's true ratio and are mirrored on the <img> element. */
.m-corc img{height:56px;width:59px}
.m-nfrc img{height:52px;width:47px}
.m-which img{height:54px;width:68px}
.m-checkatrade img{height:33px;width:96px}
/* The two claim chips have no licensed badge, so they carry a generic ring mark that
   fills the same 56px stage: 46px ring + 5px above + 5px of the 13px below. */
.acc-claim{width:46px;height:46px;border-radius:50%;border:2px solid var(--red);
  color:var(--red);margin:5px 0 18px}
.acc-claim svg{width:24px;height:24px;display:block}
@media(max-width:760px){
  .accred .accred-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:380px){
  .accred .accred-row{grid-template-columns:1fr}
}

/* ---------- why band ---------- */
.why{padding:84px 0;background:var(--white)}
.why .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.clip-shot{position:relative}
.clip-shot img{width:100%;aspect-ratio:4/3.35;object-fit:cover;clip-path:polygon(0 0,86% 0,100% 12%,100% 100%,14% 100%,0 88%)}
.clip-shot .stat{position:absolute;right:-14px;bottom:26px;background:var(--red);color:#fff;border-radius:12px;padding:18px 22px;box-shadow:0 16px 40px rgba(227,29,36,.32)}
.clip-shot .stat b{display:block;font-family:'Archivo',sans-serif;font-size:34px;font-weight:900;line-height:1}
.clip-shot .stat span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;opacity:.95}
.ticklist{list-style:none;margin:26px 0 30px;display:grid;gap:15px}
.ticklist li{display:flex;gap:13px;align-items:flex-start}
.ticklist i{width:23px;height:23px;border-radius:6px;background:rgba(227,29,36,.1);color:var(--red);font-style:normal;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;margin-top:3px}
.ticklist b{display:block;font-family:'Archivo',sans-serif;font-size:16px;font-weight:700}
.ticklist p{font-size:14.5px;color:var(--grey);margin-top:1px}

/* ---------- services ---------- */
.services{padding:84px 0;background:var(--paper)}
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.svc-head .lede{margin-top:6px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.22s}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(20,23,25,.11);border-color:#d4dde1}
.svc-card .shot{aspect-ratio:16/10;overflow:hidden}
.svc-card .shot img{width:100%;height:100%;object-fit:cover;transition:.4s}
.svc-card:hover .shot img{transform:scale(1.05)}
.svc-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.svc-card h3{font-size:20px;font-weight:800;margin-bottom:8px}
.svc-card p{font-size:14.8px;color:var(--grey);margin-bottom:18px;flex:1}
.svc-link{font-family:'Archivo',sans-serif;font-weight:700;font-size:14.5px;color:var(--red-deep);display:inline-flex;align-items:center;gap:7px}
.svc-link::after{content:"→";transition:.2s}
.svc-card:hover .svc-link::after{transform:translateX(4px)}
.svc-more{text-align:center;margin-top:34px}

/* wide split service cards (services hub) */
.svc-wide{display:grid;gap:20px}
.wide-card{display:grid;grid-template-columns:1fr 1fr;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wide-card:nth-child(even) .wc-shot{order:-1}
.wc-body{padding:38px 40px}
.wc-body h3{font-size:25px;font-weight:800;margin:12px 0 10px}
.wc-body p{color:var(--grey);font-size:15.5px;margin-bottom:16px}
.wc-body ul{list-style:none;display:grid;gap:8px;margin-bottom:22px}
.wc-body li{font-size:14.5px;display:flex;gap:10px;align-items:flex-start}
.wc-body li::before{content:"✓";color:var(--red);font-weight:800;flex:none}
.wc-shot img{width:100%;height:100%;min-height:280px;object-fit:cover}

/* ---------- marquee ---------- */
.marquee{background:var(--ink);color:var(--white);overflow:hidden;padding:15px 0}
.marquee-track{display:flex;gap:26px;white-space:nowrap;width:max-content;animation:mq 38s linear infinite;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;letter-spacing:.09em;text-transform:uppercase}
.marquee-track span{display:flex;align-items:center;gap:26px}
.marquee-track span::after{content:"✦";color:var(--red-light)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- story ---------- */
.story{padding:84px 0;background:var(--white)}
.story .wrap{display:grid;grid-template-columns:1fr 1.02fr;gap:60px;align-items:center}
.story p{color:var(--grey);margin-bottom:16px;font-size:16px}
.story .clip-shot img{clip-path:polygon(12% 0,100% 0,100% 88%,88% 100%,0 100%,0 12%)}

/* ---------- gallery bento ---------- */
.work{padding:84px 0;background:var(--paper)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:182px;gap:16px;margin-top:36px}
.bento a{border-radius:12px;overflow:hidden;position:relative;display:block}
.bento img{width:100%;height:100%;object-fit:cover;transition:.45s}
.bento a:hover img{transform:scale(1.06)}
.bento .tall{grid-row:span 2}
.bento .wide{grid-column:span 2}
.bento .more{background:var(--ink)}
.bento .more img{opacity:.34}
.bento .more .plus{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center}
.bento .more .plus i{width:52px;height:52px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:21px}
.bento .more .plus b{font-family:'Archivo',sans-serif;font-size:14.5px;letter-spacing:.04em}

/* ---------- service area map ---------- */
.areas{padding:84px 0;background:var(--white)}
.maparea{position:relative;border-radius:16px;overflow:hidden;background:var(--ink-2);margin-top:34px;border:1px solid var(--line)}
.maparea svg{display:block;width:100%;height:auto}
.map-chips{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);background:var(--white);border-radius:999px;padding:8px 15px 8px 11px;font-size:13.5px;font-weight:600;box-shadow:0 8px 22px rgba(0,0,0,.28);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:.18s;color:var(--ink)}
.chip:hover{transform:translate(-50%,-50%) scale(1.06)}
.chip i{width:13px;height:13px;flex:none;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--grey)}
.chip.is-active{background:var(--red);color:#fff}
.chip.is-active i{background:#fff}
.map-note{text-align:center;font-size:13px;color:var(--grey);margin-top:16px}
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.area-cell{border:1px solid var(--line);border-radius:10px;padding:15px 17px;background:var(--white);transition:.18s;display:flex;align-items:center;justify-content:space-between;gap:8px}
.area-cell:hover{border-color:var(--red);color:var(--red-deep)}
.area-cell b{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px}
.area-cell small{color:var(--grey);font-size:12px;display:block;font-weight:400}
.area-cell.is-hub{background:var(--red);color:#fff;border-color:var(--red)}
.area-cell.is-hub small{color:#fff}
.area-cell.is-hub:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}

/* ---------- process ---------- */
.process{padding:84px 0;background:var(--paper)}
.proc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:46px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:center;position:relative}
.step i{width:64px;height:64px;border-radius:50%;background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-style:normal;font-family:'Archivo',sans-serif;font-weight:900;font-size:21px;color:var(--red);box-shadow:0 8px 20px rgba(20,23,25,.06)}
.step h3{font-size:18px;font-weight:800;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--grey);max-width:30ch;margin:0 auto}

/* ---------- testimonials ---------- */
.reviews{padding:84px 0;background:var(--paper)}
.rev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rev{border:1px solid var(--line);border-radius:12px;padding:26px 24px;background:var(--white);display:flex;flex-direction:column;box-shadow:0 10px 28px rgba(20,23,25,.08);transition:.2s}
.rev:hover{box-shadow:0 16px 38px rgba(20,23,25,.13);transform:translateY(-3px)}
.stars{color:#F5A623;letter-spacing:2px;font-size:15px;margin-bottom:12px}
.rev h3{font-size:16.5px;font-weight:800;margin-bottom:8px}
.rev p{font-size:14.6px;color:var(--grey);flex:1}
.rev footer{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font-size:13.5px;font-weight:600}
.rev footer span{display:block;color:var(--grey);font-weight:400;font-size:12.5px}

/* ---------- FAQ ---------- */
.faq{padding:84px 0;background:var(--paper)}
.faq .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.acc{display:grid;gap:12px}
.acc details{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.acc summary{list-style:none;cursor:pointer;padding:17px 52px 17px 20px;font-family:'Archivo',sans-serif;font-weight:700;font-size:15.5px;position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:20px;top:22px;width:9px;height:9px;border-right:2px solid var(--grey);border-bottom:2px solid var(--grey);transform:rotate(45deg);transition:.2s}
.acc details[open]{background:var(--ink);border-color:var(--ink)}
.acc details[open] summary{color:#fff}
.acc details[open] summary::after{transform:rotate(-135deg);border-color:var(--red-light);top:26px}
.acc .ans{padding:0 22px 20px;color:#b9c3c9;font-size:14.8px}
.faq-aside .btn{margin-top:22px}

/* ---------- CTA band ---------- */
.ctaband{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.ctaband .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:64px;padding-bottom:64px;position:relative;z-index:2}
.ctaband h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;margin-bottom:14px}
.ctaband p{color:#c3ccd2;margin-bottom:26px;max-width:44ch}
.cta-shot{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:1;overflow:visible}
.cta-shot::before{content:"";position:absolute;left:-86px;top:50%;width:260px;height:260px;background:var(--red);border-radius:44px;transform:translateY(-50%) rotate(45deg);z-index:0}
.cta-shot img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:22px 0 0 22px;box-shadow:-18px 0 40px rgba(0,0,0,.35)}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-call{display:inline-flex;align-items:center;gap:9px}

/* ---------- page hero (inner pages) ---------- */
.pagehero{color:#fff;position:relative;overflow:hidden}
.pagehero .bg{position:absolute;inset:0}
.pagehero .bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.pagehero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,17,19,.94),rgba(15,17,19,.62))}
.pagehero .wrap{position:relative;z-index:2;padding-top:58px;padding-bottom:62px}
.pagehero h1{font-size:clamp(30px,4.4vw,50px);font-weight:800;margin:16px 0 14px;max-width:20ch}
.pagehero p{color:#ccd4d9;max-width:60ch;font-size:17px}
.crumbs{font-size:13px;color:#93a0a8}
.crumbs a:hover{color:#fff}
.pagehero .btn{margin-top:26px}

/* ---------- generic prose blocks ---------- */
.prose{padding:76px 0}
.prose .wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:start}
.prose h2{font-size:clamp(24px,2.9vw,33px);font-weight:800;margin:0 0 14px}
.prose h3{font-size:20px;font-weight:800;margin:32px 0 10px}
.prose p{color:var(--grey);margin-bottom:15px;font-size:16px}
.prose ul{margin:0 0 20px;padding-left:0;list-style:none;display:grid;gap:9px}
.prose ul li{display:flex;gap:11px;font-size:15.5px;color:var(--grey)}
.prose ul li::before{content:"✓";color:var(--red);font-weight:800;flex:none}
.aside-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:26px;position:sticky;top:110px}
.aside-card h3{font-size:18px;font-weight:800;margin-bottom:8px}
.aside-card p{font-size:14.5px;color:var(--grey);margin-bottom:16px}
.aside-card .btn{width:100%;text-align:center}
.aside-card .callnum{display:block;text-align:center;margin-top:12px;font-size:14px;color:var(--grey)}
.aside-card .callnum a{color:var(--red-deep);font-weight:700}
.aside-list{list-style:none;margin-top:26px;border-top:1px solid var(--line);padding-top:20px;display:grid;gap:2px}
.aside-list a{display:block;padding:9px 12px;border-radius:7px;font-size:14.5px;font-weight:500}
.aside-list a:hover,.aside-list a.active{background:var(--white);color:var(--red-deep);font-weight:700}

/* ---------- case studies ---------- */
.cases{padding:80px 0;background:var(--white)}
.case{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;padding:44px 0;border-bottom:1px solid var(--line)}
.case:last-child{border-bottom:0}
.case:nth-child(even) .case-shot{order:-1}
.case-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.case-tag{display:inline-block;background:rgba(227,29,36,.1);color:var(--red-deep);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.case h2{font-size:26px;font-weight:800;margin:14px 0 12px}
.case dl{display:grid;gap:14px;margin-top:6px}
.case dt{font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red-deep)}
.case dd{font-size:15.2px;color:var(--grey);margin-top:3px}
/* four equal tiles on one row — as a flex row of auto-width pills the four labels need
   ~708px but the text column is only 478–609px, so they wrapped to two rows at every
   desktop width. Equal columns let the labels wrap inside their own tile instead. */
.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px}
.case-meta span{display:grid;place-items:center;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;font-weight:600;line-height:1.32;text-wrap:balance}

/* ---------- gallery page ---------- */
.gal{padding:70px 0}
.gal-filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.gal-filters button{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:.18s}
.gal-filters button:hover{border-color:#c3ccd2}
.gal-filters button.is-on{background:var(--red);border-color:var(--red);color:#fff}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal-grid figure{border-radius:12px;overflow:hidden;position:relative;background:var(--paper)}
.gal-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:.4s}
.gal-grid figure:hover img{transform:scale(1.05)}
.gal-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 13px;background:linear-gradient(transparent,rgba(15,17,19,.88));color:#fff;font-size:13.5px;font-weight:600}

/* ---------- contact page ---------- */
.contact{padding:76px 0}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cdetails{display:grid;gap:14px;margin:24px 0 30px}
/* The email address has no break opportunity, so its min-content width set a ~329px floor on
   the whole left column and pushed the page sideways below ~377px. min-width:0 lets the text
   block shrink; overflow-wrap lets the address itself break rather than forcing the column. */
.cdetail{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:16px 18px}
.cdetail>div{min-width:0;overflow-wrap:anywhere}
.cdetail i{width:40px;height:40px;border-radius:10px;background:rgba(227,29,36,.1);color:var(--red);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:17px;flex:none}
/* the pin and clock marks are inline SVGs, matching the footer's contact list */
.cdetail i svg{width:20px;height:20px;display:block}
.cdetail b{display:block;font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);font-weight:700}
.cdetail span{font-size:16px;font-weight:600}
.cdetail a{font-size:16px;font-weight:600}
.cdetail a:hover{color:var(--red-deep)}
.formcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:30px}
.formcard h2{font-size:23px;font-weight:800;margin-bottom:6px}
.formcard>p{color:var(--grey);font-size:15px;margin-bottom:22px}

/* ---------- footer ---------- */
/* Safety net: a subtle seam if a dark section (marquee/CTA) ever ends up directly
   above the footer again, so two identical blacks never merge into one mass. */
.marquee + footer.site,.ctaband + footer.site{border-top:1px solid rgba(255,255,255,.12)}
footer.site{background:var(--ink);color:#a9b4bb;padding:66px 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px}
.foot-grid h4{color:#fff;font-size:14px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:18px;font-weight:800}
.foot-grid ul{list-style:none;display:grid;gap:10px;font-size:14.5px}
.foot-grid a:hover{color:#fff}
.foot-logo{display:inline-block;margin-bottom:18px}
.foot-logo img{height:100px;width:auto;display:block}
.foot-about{font-size:14.5px;max-width:36ch}
.foot-contact li{display:flex;gap:13px;align-items:center;font-size:14.5px;margin-bottom:12px}
.foot-contact li i{width:34px;height:34px;border-radius:9px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:15px;flex:none}
.foot-contact li i svg{width:18px;height:18px;display:block}
.foot-linklist a{display:flex;align-items:center;gap:9px}
.foot-linklist a::before{content:"→";color:var(--red-light);font-weight:700;flex:none}
.socials{display:flex;gap:9px;margin-top:20px}
.socials a{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}
.socials a:hover{background:var(--red)}
.socials a svg{width:18px;height:18px}
/* the Which? wordmark is wider than it is tall — give it room so the "?" isn't clipped */
.socials a svg.which{width:26px;height:18px}
.socials a img{width:22px;height:22px;object-fit:contain}
.foot-bar{border-top:1px solid rgba(255,255,255,.1);margin-top:52px;padding:22px 0;font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- floating Checkatrade rating widget ---------- */
/* Icon is the client-supplied Checkatrade accreditation badge (assets/img/checkatrade-badge.png).
   Wordmark colours as specified by the client: "Checka" #E30613, "trade.com" #0E4194. */
.ckwidget{position:fixed;left:20px;bottom:20px;z-index:120;background:var(--white);border-radius:8px;box-shadow:0 6px 26px rgba(4,1,84,.22);width:216px;overflow:hidden;font-family:'Inter',sans-serif;display:block;transform-origin:left bottom}
.ckwidget::before{content:"";display:block;height:5px;background:#E30613}
.ckwidget-in{display:flex;gap:11px;align-items:center;padding:12px 13px}
.ck-icon{width:40px;height:40px;flex:none;object-fit:contain}
.ck-txt{line-height:1.28}
.ck-word{font-family:'Archivo',sans-serif;font-weight:800;font-size:14.5px;letter-spacing:-.01em}
.ck-word-a{color:#E30613}
.ck-word-b{color:#0E4194}
.ck-pill{display:inline-flex;align-items:center;gap:7px;background:#F1F3F5;border-radius:20px;padding:3px 10px 3px 8px;margin-top:5px}
.ck-pill b{display:flex;align-items:baseline;gap:2px;font-size:14px;font-weight:800;color:#1A1A1A;font-family:'Archivo',sans-serif}
.ck-pill b span{font-size:11px;font-weight:600;color:#5D6A72}
.ck-revlink{font-size:11.5px;font-weight:700;color:#0E4194;font-style:normal}

/* ---------- floating Google Business Profile rating widget ---------- */
/* Mirrors the Checkatrade widget but sits bottom-right, in Google's own four brand colours. */
.gwidget{position:fixed;right:20px;bottom:20px;z-index:120;background:var(--white);border-radius:8px;box-shadow:0 6px 26px rgba(60,64,67,.22);width:208px;overflow:hidden;font-family:'Inter',sans-serif;display:block;transform-origin:right bottom}
.gwidget::before{content:"";display:block;height:5px;background:linear-gradient(90deg,#4285F4 0 25%,#EA4335 25% 50%,#FBBC05 50% 75%,#34A853 75% 100%)}
.gwidget-in{display:flex;gap:11px;align-items:center;padding:12px 13px}
.gwidget svg{width:34px;height:34px;flex:none}
.gw-txt{line-height:1.28}
.gw-word{font-family:'Archivo',sans-serif;font-weight:800;font-size:14.5px;color:#3c4043;letter-spacing:-.01em}
.gw-stars{margin-top:3px;font-size:13px;letter-spacing:1px;line-height:1}
.gstar{position:relative;display:inline-block;color:#dadce0}
.gstar::before{content:"\2605";position:absolute;left:0;top:0;width:var(--fill);overflow:hidden;color:#FBBC05;white-space:nowrap}
.gw-sub{font-size:11.5px;color:#70757a;margin-top:3px}
.gw-sub b{color:#3c4043;font-weight:700}
.gw-x{position:absolute;top:8px;right:6px;width:19px;height:19px;border:0;background:rgba(255,255,255,.85);color:#5D6A72;font-size:15px;line-height:1;cursor:pointer;border-radius:50%;z-index:3}
.gw-x:hover{background:#f1f3f4;color:#3c4043}
.gwidget.is-in:not(.is-collapsed):hover{box-shadow:0 10px 32px rgba(60,64,67,.3);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.gwidget{animation:none}}
.ck-x{position:absolute;top:8px;right:6px;width:19px;height:19px;border:0;background:rgba(255,255,255,.85);color:#5D6A72;font-size:15px;line-height:1;cursor:pointer;border-radius:50%;z-index:3}
.ck-x:hover{background:#f1f3f4;color:#040154}
.ckwidget.is-in:not(.is-collapsed):hover{box-shadow:0 10px 32px rgba(4,1,84,.3);transform:translateY(-2px)}

/* ---------- rating-widget show / collapse / reopen ----------
   Dismissing a widget collapses it into a circular brand-mark button rather than removing
   it, so there is always an obvious way to bring it back. The easing curves, durations and
   the 0.12s reopen delay are tuned together — change them as a set. */
.ckwidget,.gwidget{
  opacity:0;transform:translateY(24px) scale(.9);
  max-width:420px;max-height:170px;
  transition:opacity .55s var(--w-enter),transform .55s var(--w-enter),
             max-width .5s var(--w-enter),max-height .5s var(--w-enter),
             border-radius .5s var(--w-enter),box-shadow .5s var(--w-ease)
}
.ckwidget.is-in,.gwidget.is-in{opacity:1;transform:none}

/* the inner link and the × fade out as the card closes down to a disc */
.ckwidget-in,.gwidget-in{transition:opacity .28s var(--w-ease),transform .45s var(--w-enter);transform-origin:inherit}
.wx{transition:opacity .25s var(--w-ease),transform .35s var(--w-enter),background .2s,color .2s}

/* the reopen button sits centred under the card, revealed only once collapsed */
.wreopen{position:absolute;inset:0;margin:auto;width:54px;height:54px;padding:10px;border:0;
  border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center;z-index:2;
  opacity:0;transform:scale(.4) rotate(-25deg);pointer-events:none;
  transition:opacity .3s var(--w-ease),transform .45s var(--w-enter)}
.wreopen img,.wreopen svg{width:100%;height:100%;display:block;object-fit:contain}

.ckwidget.is-collapsed,.gwidget.is-collapsed{max-width:54px;max-height:54px;border-radius:50%}
.ckwidget.is-collapsed{box-shadow:0 12px 26px -14px rgba(4,1,84,.9)}
.gwidget.is-collapsed{box-shadow:0 12px 26px -14px rgba(60,64,67,.9)}
.is-collapsed .ckwidget-in,.is-collapsed .gwidget-in{opacity:0;transform:scale(.85);pointer-events:none}
.is-collapsed .wx{opacity:0;transform:scale(.4);pointer-events:none}
.is-collapsed .wreopen{opacity:1;transform:none;pointer-events:auto;transition-delay:.12s}
/* the coloured top strip would clip to an odd arc on a disc */
.ckwidget::before,.gwidget::before{transition:opacity .3s var(--w-ease)}
.is-collapsed::before{opacity:0}

@media(prefers-reduced-motion:reduce){
  .ckwidget,.gwidget,.ckwidget-in,.gwidget-in,.wreopen,.wx{transition:none}
  .ckwidget,.gwidget{transform:none}
}

/* ---------- enquiry modal ---------- */
.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto}
.modal.is-open{display:flex}
.modal-veil{position:fixed;inset:0;background:rgba(10,12,14,.74);backdrop-filter:blur(3px);animation:mfade .25s ease}
.modal-card{position:relative;z-index:1;width:100%;max-width:640px;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:mrise .3s cubic-bezier(.2,.8,.3,1)}
@keyframes mfade{from{opacity:0}to{opacity:1}}
@keyframes mrise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.modal-head{background:linear-gradient(180deg,#262c30,#171b1e);padding:26px 30px 24px;text-align:center;position:relative}
.modal-head img{width:190px;max-width:60%;margin:0 auto 16px}
.modal-head h2{color:var(--white);font-size:26px;font-weight:800;margin-bottom:6px}
.modal-head p{color:#c1cbd1;font-size:14.5px;margin:0}
.modal-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.18s}
.modal-x:hover{background:rgba(255,255,255,.26)}
.modal-x:focus-visible{outline:2px solid var(--red-light);outline-offset:2px}
.modal-body{padding:28px 30px 30px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.field label .req{color:var(--red)}
.field label .opt{color:var(--grey);font-weight:400;text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{width:100%;font-family:'Inter',sans-serif;font-size:15.5px;color:var(--ink);background:var(--white);border:1px solid #cfd9de;border-radius:8px;padding:12px 14px;transition:.18s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(227,29,36,.15)}
.field .hint{font-size:13px;color:var(--grey);margin-top:5px}
.field input.is-bad,.field select.is-bad,.field textarea.is-bad{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
/* The enquiry forms' marketing-consent tickbox. Named .form-consent, NOT .consent:
   the round-23 cookie bar owns .consent (and the whole .consent-* family), and when
   both shared the name the bar's position:fixed / translateY(110%) landed on this
   label, pushing a *required* tickbox off the bottom of the screen. Keep them apart. */
.form-consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--grey);margin:4px 0 20px}
.form-consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--red)}
.form-consent.is-bad{color:#c0392b;font-weight:600}
.form-consent input.is-bad{outline:2px solid #c0392b;outline-offset:3px;border-radius:3px}
.form-error{background:#fdecea;border:1px solid #f2b8b2;color:#a5281c;font-size:14px;padding:11px 14px;border-radius:8px;margin:0 0 18px}
/* Honeypot. Moved off-screen rather than display:none, because the better bots
   skip hidden fields — and left in the accessibility tree's shadow with
   aria-hidden + tabindex="-1" on the input so no real person can reach it. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.modal-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.modal-actions .btn{border:0;cursor:pointer;font-size:16px}
.btn-quiet{background:transparent;color:var(--grey);font-family:'Archivo',sans-serif;font-weight:700;padding:14px 18px;cursor:pointer;border:0}
.btn-quiet:hover{color:var(--ink)}
.modal-call{margin-left:auto;font-size:14.5px;color:var(--grey)}
.modal-call a{color:var(--red-deep);font-weight:700}
.modal-done{display:none;padding:44px 34px 48px;text-align:center}
.modal-done .tickbig{width:64px;height:64px;border-radius:50%;background:#e8f6ee;color:#1e8e5a;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px}
.modal-done h3{font-size:25px;margin-bottom:10px}
.modal-done p{color:var(--grey);margin-bottom:22px}
.modal.is-done .modal-body{display:none}
.modal.is-done .modal-done{display:block}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  /* The desktop header needs ~1001px for logo + nav + phone + CTA, so between the 960px
     mobile breakpoint and ~1000px it overflowed the viewport and put a horizontal
     scrollbar on every page. Trimming the logo and the nav padding buys back the 40px. */
  .logo img{height:88px}
  header .wrap{min-height:112px}
  nav a{padding:10px 9px;font-size:14.5px}
  .qf-grid{grid-template-columns:1fr 1fr;}
  .qf-grid .btn{grid-column:1/-1}
  .rev-grid{grid-template-columns:1fr 1fr}
  .area-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:960px){
  .navtoggle{display:flex}
  nav{position:absolute;left:0;right:0;top:100%;background:var(--white);border-top:1px solid var(--line);box-shadow:0 18px 40px rgba(20,23,25,.14);display:none;padding:12px 24px 20px}
  nav.is-open{display:block}
  nav>ul{flex-direction:column;gap:2px}
  nav a{padding:12px 10px;font-size:16px}
  .subnav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin:2px 0 6px 12px;padding:0 0 0 6px}
  .has-sub>a::after{float:right;margin-top:7px}
  .hdr-phone{display:none}
  .hdr-call{display:flex}
  .hdr-cta .btn{padding:12px 18px;font-size:14.5px}
  header .wrap{min-height:92px;gap:12px}
  .logo img{height:68px}
  .why .wrap,.story .wrap,.faq .wrap,.prose .wrap,.contact .wrap,.ctaband .wrap{grid-template-columns:1fr;gap:38px}
  .story .clip-shot,.case:nth-child(even) .case-shot,.wide-card:nth-child(even) .wc-shot{order:0}
  .svc-grid{grid-template-columns:1fr 1fr}
  .wide-card,.case{grid-template-columns:1fr}
  .cta-shot{position:relative;width:100%;height:250px}
  .cta-shot img{border-radius:0;box-shadow:none}
  .cta-shot::before{display:none}
  .ctaband .wrap{padding-bottom:0}
  .aside-card{position:static}
  .gal-grid{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .topbar-alert{font-size:11.5px}
  .topbar-alert .wrap,.topbar .wrap{padding:6px 0}
  .hero .wrap{padding-top:52px;padding-bottom:120px}
  .qf-grid{grid-template-columns:1fr}
  .svc-grid,.rev-grid,.steps,.gal-grid,.area-grid,.foot-grid{grid-template-columns:1fr}
  .clip-shot .stat{right:12px;bottom:12px;padding:14px 16px}
  .clip-shot .stat b{font-size:27px}
  .chip{font-size:11.5px;padding:6px 11px 6px 8px}
  .topbar .wrap{font-size:12.5px}
  .foot-bar{flex-direction:column;text-align:center}
  /* Each widget takes half the viewport less 25px, so they can never overlap — at 320px the
     old fixed 170px pair overlapped by 36px, which is what cropped the Checkatrade card.
     The card stays display:block so the coloured ::before strip sits flush against the top
     edge: it must NOT become a flex column with justify-content:center, which turns the strip
     into a centred flex item and leaves white space above it. The shared height goes on the
     inner box instead, which also keeps the two cards level. */
  .ckwidget,.gwidget{width:calc(50% - 14px);bottom:10px}
  .ckwidget{left:8px}
  .gwidget{right:8px}
  .ckwidget-in,.gwidget-in{gap:9px;padding:10px;min-height:80px}
  .ck-icon{width:28px;height:28px}
  .gwidget svg{width:26px;height:26px}
  /* The badge sits left of the text, so the wordmark shares the row with it AND has to stop
     short of the × button (which sits 25px in from the card's right edge). Fluid sizing takes
     it as large as that clearance allows at each width, up to the desktop 14.5px. */
  .ckwidget .ck-word,.gwidget .gw-word{font-size:clamp(10px,calc(4.6vw - 5.6px),14.5px)}
  .ck-pill{padding:3px 9px 3px 7px;gap:6px;margin-top:5px}
  .ck-pill b{font-size:13px}
  .ck-pill b span{font-size:10.5px}
  .ck-revlink{font-size:11px}
  .gw-stars{font-size:13px}
  .gw-sub{font-size:11px}
}
/* On phones the badge and the wordmark can't share a row without squeezing the type down to
   the point of illegibility — and the × button sits over the card's padding, so padding can
   never clear it. Stacking the badge above the text gives the wordmark the full card width,
   which is what lets the type sit close to its desktop size again. */
/* Below ~341px the mobile header row (logo + menu + call + CTA) was wider than the viewport
   and scrolled sideways — 320px is still a live phone width, so trim the logo and button. */
@media(max-width:400px){
  .logo img{height:56px}
  header .wrap{gap:8px;min-height:80px}
  .hdr-cta{gap:10px}
  .hdr-cta .btn{padding:11px 13px;font-size:13.5px}
  .hdr-call{width:42px;height:42px;font-size:18px}
  .navtoggle{width:42px;height:40px}
}
@media(max-width:345px){
  .ckwidget-in,.gwidget-in{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:9px 10px;min-height:112px}
  .ck-icon{width:32px;height:32px}
  .gwidget svg{width:30px;height:30px}
  /* Fluid so the wordmark uses the full card width at every phone size without ever
     outgrowing it: ~12.5px at 320px, back to the desktop 14.5px from about 355px up. */
  .ckwidget .ck-word,.gwidget .gw-word{font-size:clamp(12.5px,calc(5.4vw - 5px),14.5px)}
  .ck-pill{padding:3px 10px 3px 8px;gap:7px;margin-top:5px}
  .ck-pill b{font-size:13.5px}
  .ck-pill b span{font-size:11px}
  .ck-revlink{font-size:11px}
  .gw-stars{font-size:13px}
  .gw-sub{font-size:11.5px}
}
@media(max-width:560px){
  /* four across stops being readable once each tile drops under ~120px — go 2 x 2 */
  .case-meta{grid-template-columns:repeat(2,1fr)}
  .f-row{grid-template-columns:1fr}
  .modal-body{padding:24px 20px 26px}
  .modal-head{padding:22px 20px 20px}
  .modal-call{margin-left:0;width:100%}
}

/* =====================================================================
   Cookie consent
   Accept and Reject are the same size, weight and prominence — the ICO
   expects refusing to be as easy as agreeing. No close button: dismissing
   without choosing is not an answer. Once answered, the bar collapses to
   a bubble above the Checkatrade panel, which is the permanent way back
   in (the footer no longer carries a Cookie settings link).
   ===================================================================== */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  /* the 20px strip of page that used to show under the bar came from the form
     tickbox rule that also matched .consent (now .form-consent) — zeroed
     explicitly so no future inherited margin can unstick it */
  margin:0;
  background:linear-gradient(180deg,#262c30,#171b1e);
  border-top:4px solid var(--red);
  box-shadow:0 -18px 50px rgba(0,0,0,.35);
  color:#c1cbd1;
  /* translate by more than its own height so nothing peeps out mid-transition,
     and pad for the home indicator on iOS so the bar is genuinely flush */
  transform:translateY(110%);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  transition:transform .42s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.consent.is-in{ transform:translateY(0); }
.consent-in{
  max-width:1152px; margin:0 auto; padding:22px 24px;
  display:flex; gap:26px; align-items:center; flex-wrap:wrap;
}
.consent-txt{ flex:1 1 420px; min-width:0; }
.consent-txt h2{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:19px;
  color:#fff; letter-spacing:-.01em; margin:0 0 6px;
}
.consent-txt p{ margin:0; font-size:14.5px; line-height:1.55; }
.consent-txt a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.consent-txt a:hover{ color:var(--red-light); }

.consent-btns{ display:flex; gap:12px; flex:0 0 auto; flex-wrap:wrap; }
.consent-btn{
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
  padding:13px 22px; border-radius:8px; cursor:pointer;
  border:2px solid transparent; white-space:nowrap; line-height:1.2;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.consent-yes{ background:var(--red); border-color:var(--red); color:#fff; }
.consent-yes:hover{ background:var(--red-deep); border-color:var(--red-deep); }
.consent-no{ background:transparent; border-color:#5c686f; color:#fff; }
.consent-no:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.consent-btn:focus-visible{ outline:3px solid var(--red-light); outline-offset:2px; }

/* the rating panels share these corners — hold them back while the bar is up */
.has-consent .ckwidget,
.has-consent .gwidget{ display:none; }

/* ---- the collapsed bubble, stacked above the Checkatrade panel ---------- */
.consent-bubble{
  position:fixed; left:20px; z-index:118;
  bottom:calc(20px + var(--ck-h, 74px) + 12px);
  width:54px; height:54px; padding:13px; border:0; border-radius:50%;
  background:var(--red); color:#fff; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 12px 26px -12px rgba(4,1,84,.75);
  opacity:0; transform:scale(.4) rotate(-25deg);
  transition:opacity .3s var(--w-ease), transform .45s var(--w-enter),
             background .18s ease, box-shadow .18s ease;
}
.consent-bubble.is-in{ opacity:1; transform:none; }
.consent-bubble svg{ width:100%; height:100%; display:block; }
.consent-bubble:hover{ background:var(--red-deep); box-shadow:0 14px 30px -12px rgba(4,1,84,.9); }
.consent-bubble:focus-visible{ outline:3px solid var(--red-light); outline-offset:3px; }

/* the re-open button inside the privacy policy */
.consent-reopen-wrap{ margin:18px 0 22px; }

/* footer credit — pale red on hover, no underline */
.foot-bar a{ text-decoration:none; transition:color .18s ease; }
.foot-bar a:hover{ color:#ff6b70; }

@media(max-width:760px){
  .consent-in{ padding:18px 18px 20px; gap:16px; }
  .consent-txt h2{ font-size:17.5px; }
  .consent-txt p{ font-size:14px; }
  .consent-btns{ width:100%; }
  .consent-btn{ flex:1 1 100%; text-align:center; padding:14px 18px; }
  /* the panels go half-width and taller on a phone; keep the bubble clear of them */
  .consent-bubble{ left:14px; bottom:calc(14px + var(--ck-h, 88px) + 10px); }
}
@media(prefers-reduced-motion:reduce){
  .consent, .consent-bubble{ transition:none; }
}

/* =====================================================================
   Gradient dithering on the page heroes
   The overlay is a 90deg ramp from rgba(15,17,19,.94) to .62 across the
   full viewport width. Over ~1900px that is far too few 8-bit steps and
   the browser renders visible vertical bands. A faint noise layer breaks
   the steps up — the standard dither fix, and cheaper than adding stops.
   ===================================================================== */
.pagehero .bg::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  opacity:.035;
  mix-blend-mode:overlay;
}
.pagehero .bg::after{ z-index:2; }
@media(prefers-reduced-motion:no-preference){}

/* The two rating panels are fixed to the bottom corners, so at the very foot of the
   page they sat on top of the copyright row — the Revonik credit was not even
   clickable. Give the footer enough bottom padding for the last row to clear them. */
footer.site{ padding-bottom:96px; }
@media(max-width:760px){ footer.site{ padding-bottom:120px; } }