/* JE Plastering — generated by je_build.py. Do not hand-edit.
   Component set ported from the Birkdale Plastering and Rendering site;
   the palette is burgundy + brass on stone rather than navy + red. */
@font-face{font-family:'Poppins';src:url('fonts/poppins-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('fonts/poppins-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/inter.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;}

:root{
  --charcoal:#43101D;
  --charcoal-2:#5C1B2A;
  --grey:#7C6A6E;
  --line:#E7DCD0;
  --red:#C9A227;           /* brass: fills, active pills, rules */
  --red-dark:#AD8919;
  --red-text:#8A6B10;      /* brass dark enough to read as text on white */
  --on-brass:#2C210A;      /* type that sits ON a brass fill */
  --paper:#FFFFFF;
  --stone:#F8F3EC;
  --white:#fff;
  --gold:#E0A80B;
  --wrap:1360px;
  --r:8px;
  --shadow:0 1px 2px rgba(45,20,25,.07);
}
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--charcoal);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:17px;line-height:1.65;overflow-x:hidden}
h1,h2,h3{font-family:'Poppins','Inter',system-ui,sans-serif;font-weight:600;
  line-height:1.18;letter-spacing:-.015em;margin:0 0 .6em;color:var(--charcoal)}
h1{font-size:clamp(2.15rem,4.9vw,3.55rem);font-weight:700;letter-spacing:-.022em;line-height:1.12}
h2{font-size:clamp(1.55rem,3vw,2.25rem)}
h3{font-size:1.16rem}
p{margin:0 0 1.1em}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.sec{padding:clamp(3.2rem,6vw,5.2rem) 0}
.sec-tight{padding:clamp(2.2rem,4vw,3.4rem) 0}
.lede{font-size:1.12rem;color:var(--grey);max-width:62ch}
.eyebrow{font-size:.88rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--red-text);margin:0 0 1rem}
.center{text-align:center}
.center .lede{margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--charcoal);color:#fff;
  padding:.7rem 1.1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}
.ic{width:22px;height:22px;flex:0 0 auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.875rem;line-height:1;
  text-transform:uppercase;letter-spacing:.05em;
  padding:1.15rem 1.8rem;border-radius:5px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background-color .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red);color:var(--on-brass)}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{background:var(--white);color:var(--charcoal);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--charcoal)}
.btn-dark{background:var(--charcoal);color:#fff}
.btn .ic{width:19px;height:19px}
.btn-row{display:flex;flex-wrap:wrap;gap:1.1rem}

/* ---------- header ---------- */
/* 34px utility bar: phone + email left, socials right, inside the 1360 container */
.util{background:#3B0D18;color:rgba(255,255,255,.82);font-size:12px}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:34px;padding-block:0}
.util a{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:inherit;
  white-space:nowrap}
.util a:hover{color:#fff}
.util .ic{width:15px;height:15px;color:inherit}
.util .soc{width:15px;height:15px;flex:0 0 auto}
.util-r{display:flex;align-items:center;gap:34px}
.util-l{display:flex;align-items:center;gap:38px}

header.site{position:sticky;top:0;z-index:100;background:var(--white);
  border-bottom:1px solid #ECE2D7}
.bar{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{width:auto;height:80px;max-height:80px;object-fit:contain;
  object-position:left center}
nav.main{margin-left:auto;display:flex;align-items:center;gap:38px}
nav.main a{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;color:#3B0D18;padding:0;border-radius:0;
  transition:color .18s ease}
nav.main a:hover{color:var(--red)}
nav.main a[aria-current]{color:var(--red)}
.bar .btn{margin-left:42px;width:154px;height:48px;padding:0;border-radius:7px;
  background:var(--red);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;padding:.5rem;color:var(--charcoal)}
.burger .ic{width:24px;height:24px}
.drawer{display:none}
/* chevrons carry no intrinsic size — give them one globally so a stale or
   half-loaded stylesheet can never blow one up to full container width */
.ddc{width:16px;height:16px;flex:0 0 auto}
summary.drw-t,.drw-gr > summary{list-style:none}
.drw-gr > summary::-webkit-details-marker{display:none}

/* ---------- hero ----------
   One white stage. The house sits as an absolute visual layer down the right,
   and a separate white gradient washes over its left edge so the photograph
   reveals itself gradually — there is no column, card or vertical seam. */
.hero{position:relative;overflow:hidden;background:#fff;height:635px}
.hero-photo{position:absolute;top:0;right:0;bottom:0;left:auto;width:61%;height:100%;
  z-index:0;margin:0;border-radius:0;border:0;box-shadow:none}
/* pulled up off centre so the roof, gable and full elevation stay in frame.
   Every slide is absolutely positioned inside .hero-photo, which is already a
   fixed-size box here (and gets an explicit aspect-ratio on mobile, below), so
   however many layers the slideshow adds it can never move anything: the box is
   the same size with one image or six, before any of them have loaded. */
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 45%;border-radius:0;border:0;box-shadow:none}
/* The first slide is in the HTML, is the LCP element, and is never faded — it
   sits under the stack so a transition can dissolve back to it without ever
   passing through a transparent frame. Slides 2+ are injected by site.js. */
.hero-photo .hs{opacity:0;transition:opacity 1.1s ease-in-out}
.hero-photo .hs.on{opacity:1}
@media (prefers-reduced-motion:reduce){
  /* site.js never starts the cycle here, but if a layer is already on screen
     when the preference changes, kill the animation rather than the image. */
  .hero-photo .hs{transition:none}
}
/* the fade layer — above the photo, beneath the text */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    #FFFFFF 0%,
    #FFFFFF 29%,
    rgba(255,255,255,.98) 35%,
    rgba(255,255,255,.90) 41%,
    rgba(255,255,255,.60) 48%,
    rgba(255,255,255,.18) 56%,
    rgba(255,255,255,0) 64%)}
.hero-grid{position:relative;z-index:2;height:100%;display:block;padding:82px 0 0}
.hero-copy{width:590px;max-width:100%}
.hero .eyebrow{color:var(--red);font-size:14px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;margin:0 0 24px}
.hero h1{width:620px;max-width:620px;font-size:64px;line-height:.99;font-weight:700;
  letter-spacing:-.045em;color:#3B0D18;margin:0}
.hero h1 .accent{color:var(--red)}
.hero p.sub{width:522px;max-width:100%;font-size:17px;line-height:1.58;font-weight:400;
  color:#6B585C;margin:25px 0 0}
.hero .btn-row{margin-top:34px;gap:18px;flex-wrap:nowrap}
.hero .btn-row .btn-primary{width:250px;height:60px;padding:0;border-radius:7px;
  background:var(--red);color:#fff;font-size:14px;font-weight:700;gap:18px;letter-spacing:.04em}
.hero .btn-row .btn-ghost{width:225px;height:60px;padding:0;border-radius:7px;
  background:#fff;border:1.5px solid #C4B0A2;color:#43101D;
  font-size:15px;font-weight:600;gap:14px;text-transform:none;letter-spacing:0}
.hero .btn-row .btn-ghost:hover{border-color:#43101D}
/* four benefits pinned to the bottom of the white stage, aligned with the heading */
.trust-inline{list-style:none;margin:0;padding:0;position:absolute;left:0;bottom:43px;
  width:760px;display:flex;flex-wrap:nowrap;gap:40px}
.trust-inline li{display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:13px;font-weight:500;color:#5C4A4E}
.trust-inline .ic{width:19px;height:19px;stroke-width:1.6;color:#5C4A4E;opacity:.9}
/* tablet — same overlay construction, scaled down. Never a hard split. */
@media (max-width:1199px){
  .hero{height:auto}
  .hero-photo{width:58%}
  .hero-grid{padding:clamp(2.6rem,5vw,4.2rem) 0 clamp(2.2rem,4vw,3rem)}
  .hero-copy{width:min(50%,560px)}
  .hero h1{width:auto;max-width:100%;font-size:clamp(2.35rem,4.6vw,3.4rem)}
  .hero p.sub{width:auto;font-size:1.02rem}
  .hero .btn-row{flex-wrap:wrap;gap:14px}
  .hero .btn-row .btn-primary{width:auto;min-width:210px;padding-inline:1.4rem;gap:14px}
  .hero .btn-row .btn-ghost{width:auto;min-width:195px;padding-inline:1.4rem}
  .trust-inline{position:static;width:auto;margin-top:2.4rem;flex-wrap:wrap;gap:.9rem 1.8rem}
}
/* colour is set explicitly, never inherited — this badge sits on both the white
   homepage hero and the dark page hero, and inherit made it white on white */
.rating-badge{display:inline-flex;align-items:center;gap:.7rem;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:.55rem .95rem;
  box-shadow:0 6px 20px rgba(45,20,25,.10);text-decoration:none;color:var(--charcoal)}
.rating-badge .g{width:22px;height:22px;flex:0 0 auto}
.rating-badge b{font-family:'Poppins',sans-serif;font-size:.95rem}
.rating-badge span{font-size:.82rem;color:var(--grey)}
.rating-badge .stars{color:var(--gold);letter-spacing:.05em;font-size:.85rem}

/* trust row */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  border-top:1px solid var(--line);padding:1.5rem 0}
.trust div{display:flex;align-items:flex-start;gap:.7rem}
.trust .ic{color:var(--charcoal);margin-top:2px}
.trust b{display:block;font-family:'Poppins',sans-serif;font-size:.95rem;font-weight:600}
.trust small{color:var(--grey);font-size:.84rem;line-height:1.45;display:block}

/* navy trust strip — sits flush under the hero, no gap */
.band{background:#3B0D18;color:#fff}
/* min-height, never a fixed height — a fixed one clipped the third cell on narrow
   screens and spilled the text out onto the section below */
.band .wrap{display:grid;grid-template-columns:repeat(3,1fr);min-height:150px}
.band .cell{position:relative;display:flex;align-items:center;gap:1.5rem;
  padding:1.5rem clamp(1.2rem,2.6vw,2.4rem)}
.band .cell:first-child{padding-left:0}
.band .cell + .cell::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);height:56%;width:1px;background:rgba(255,255,255,.17)}
.band .ic{color:#fff;width:42px;height:42px;stroke-width:1.15}
.band b{display:block;font-family:'Poppins',sans-serif;font-size:13px;letter-spacing:.11em;
  font-weight:700;text-transform:uppercase;color:#fff;margin-bottom:.35rem}
.band p{margin:0;color:rgba(255,255,255,.82);font-size:15px;line-height:1.45;max-width:23ch}
@media (max-width:1199px){.band .ic{width:38px;height:38px}.band .cell{gap:1.15rem}}

/* ---------- section heading ---------- */
.head-rule{width:52px;height:3px;background:var(--red);border-radius:2px;margin:.1rem 0 1.4rem}
.center .head-rule{margin-inline:auto}

/* ---------- cards ---------- */
.grid{display:grid;gap:1.1rem;align-items:stretch;grid-auto-rows:1fr}
/* for counts that do not divide by the column count: flex so the short last row
   centres instead of leaving cards stranded against the left edge */
.flexgrid{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;align-items:stretch}
.flexgrid > *{flex:0 1 calc((100% - 2.2rem)/3);min-width:260px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit;transition:transform .18s ease,border-color .18s ease}
a.card:hover{transform:translateY(-3px);border-color:#D8C7B6}
.card .ic{color:var(--charcoal);width:26px;height:26px;margin-bottom:.9rem}
.card h3{margin-bottom:.4rem}
.card p{color:var(--grey);font-size:.93rem;margin:0}
.card .more{margin-top:auto;padding-top:1rem;color:var(--red-text);font-weight:600;font-size:.88rem;
  display:inline-flex;align-items:center;gap:.4rem}
.card .more .ic{width:16px;height:16px;color:var(--red-text);margin:0}

/* ---------- alternating text/image ---------- */
.alt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
  margin-bottom:clamp(2.4rem,5vw,4rem)}
.alt:last-child{margin-bottom:0}
.alt img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.alt.rev .alt-text{order:2}
.alt h2{margin-bottom:.7rem}
/* Sections we have no honest photograph for yet. The two-column grid would leave
   the text stranded in one half with a hole beside it, so drop to a single column
   and cap the measure — it reads as a deliberate prose block, not a missing image.
   Used on the garage-conversion page and the loft "dormers" section until the
   client sends real photographs of that work. */
.alt.noimg{grid-template-columns:1fr;margin-bottom:clamp(2rem,4vw,3rem)}
.alt.noimg .alt-text{max-width:78ch}

/* ---------- list with red ticks ---------- */
ul.ticks{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.65rem}
ul.ticks li{display:flex;gap:.65rem;align-items:flex-start;font-size:.98rem}
ul.ticks .ic{width:19px;height:19px;color:var(--red-text);margin-top:3px}

/* ---------- gallery ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.6rem}
.filters button{font:inherit;font-size:.84rem;font-weight:600;padding:.5rem 1.05rem;
  border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--charcoal);
  cursor:pointer;transition:background-color .18s ease,color .18s ease}
.filters button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--on-brass)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tiles img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--line)}
.tiles figure{margin:0}
.tiles figcaption{font-size:.82rem;color:var(--grey);margin-top:.5rem}
.tiles [hidden]{display:none}

/* ---------- before / after ---------- */
.ba{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;background:#fff}
.ba figure{margin:0}
.ba img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.ba figcaption{margin-top:.55rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--charcoal)}
.ba figcaption.after{color:var(--red-text)}
.ba-wrap h3{margin-bottom:.5rem}
.ba-note{color:var(--grey);font-size:.9rem;margin:.8rem 0 0}
/* Reserved text boxes — INSIDE the filtered gallery only, so the plain before/after
   blocks on the service and gallery pages are untouched. Titles, stage labels and
   notes each get room for their worst-case line count, so every pair card is the
   same height whichever service is showing and switching a pill cannot move the
   sections underneath. */
.ba-filter .ba-wrap h3{min-height:2.36em}
.ba-filter .ba figcaption{min-height:3.3em}
.ba-filter .ba-note{min-height:4.95em}

/* service filter pills. Inactive and active differ ONLY in background-color and
   colour — same font-weight, same padding, same 1px border — so nothing reflows
   between states and no ghost-label spacer is needed. */
.ba-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.ba-tab{font:inherit;font-size:.84rem;font-weight:600;padding:.5rem 1.05rem;
  border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--charcoal);
  cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.ba-tab .n{font-variant-numeric:tabular-nums;color:var(--grey);
  transition:color .15s ease}
.ba-tab:hover{background:#F5EFE7}
.ba-tab[aria-selected="true"]{background:var(--red);border-color:var(--red);color:var(--on-brass)}
.ba-tab[aria-selected="true"] .n{color:rgba(44,33,10,.6)}
.ba-tab[aria-selected="true"]:hover{background:var(--red-dark);border-color:var(--red-dark)}
.ba-panel[hidden]{display:none}
.ba-panel:focus-visible{outline:3px solid var(--red);outline-offset:6px;border-radius:4px}
/* a lone approved pair sits centred in the same half-width column the paired
   panels use, so the panel height is identical and no card is orphaned */
.ba-solo{grid-template-columns:minmax(0,calc(50% - .55rem));justify-content:center}
/* transform/opacity only, 150ms */
@keyframes ba-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ba-panel:not([hidden]) .ba-wrap{animation:ba-in .15s ease both}
@media (prefers-reduced-motion:reduce){
  .ba-panel:not([hidden]) .ba-wrap{animation:none}
}

/* ---------- reviews ---------- */
/* flex, not grid: 10 reviews in 3 columns would strand one card alone on the
   last row. Flex-wrap + justify-content:center puts the short row in the middle. */
.reviews-grid{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;
  align-items:flex-start}
.reviews-grid > *{flex:0 1 calc((100% - 2.2rem)/3);min-width:270px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;
  box-shadow:var(--shadow);margin:0}
.review blockquote{margin:0}
.review .stars{margin-bottom:.5rem}
.review .top{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--charcoal);color:#fff;
  display:grid;place-items:center;font-family:'Poppins',sans-serif;font-size:1rem;flex:0 0 auto}
.review .who b{display:block;font-family:'Poppins',sans-serif;font-size:.95rem}
.review .who small{color:var(--grey);font-size:.8rem}
.review .stars{color:var(--gold);letter-spacing:.08em}
.review p{margin:0;font-size:.98rem}
.review .g{width:20px;height:20px;margin-left:auto;flex:0 0 auto}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{position:absolute;right:0;top:1.15rem;color:var(--red-text);
  transition:transform .2s ease}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq .a{padding:0 0 1.25rem;color:var(--grey);max-width:70ch}
.faq .a p{margin:0}

/* ---------- jump bar ---------- */
.jump{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:78px;z-index:50}
.jump .wrap{display:flex;gap:.35rem;overflow-x:auto;padding:.55rem 0;scrollbar-width:thin}
.jump a{white-space:nowrap;font-size:.82rem;font-weight:600;text-decoration:none;
  padding:.45rem .85rem;border-radius:999px;color:var(--grey)}
.jump a:hover{background:#F5EFE7;color:var(--charcoal)}

/* ---------- page hero (service / area pages) ---------- */
.phero{position:relative;background:var(--charcoal);color:#fff;overflow:hidden}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(59,13,24,.94) 0%,rgba(59,13,24,.86) 46%,
  rgba(59,13,24,.55) 100%)}
.phero .wrap{z-index:2}
.phero .wrap{position:relative;padding:clamp(3rem,7vw,5.4rem) 0 clamp(2.4rem,5vw,3.6rem)}
.phero h1{color:#fff;max-width:19ch}
.phero p{color:#EDDDD8;max-width:56ch;font-size:1.06rem}
.phero .btn-row{margin-top:1.5rem;align-items:center}
.phero .rating-badge{background:#fff}
.crumbs{font-size:.8rem;color:#C9B4AE;margin-bottom:1.1rem}
.crumbs a{color:#F2E7E2;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{opacity:.6;padding:0 .35rem}

/* ---------- areas ---------- */
.pills{display:flex;flex-wrap:wrap;gap:.55rem}
.pills a,.pills span{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;
  font-weight:600;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);
  background:#fff;text-decoration:none;color:var(--charcoal)}
.pills a:hover{border-color:var(--red);color:var(--red-text);background:#FCF8EE}
.pills span{color:var(--grey);font-weight:500}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.6rem,4vw,3.2rem)}
.info-list{display:grid;gap:1rem;margin:1.4rem 0 0;padding:0;list-style:none}
.info-list li{display:flex;gap:.8rem;align-items:flex-start}
.info-list .ic{color:var(--red-text);margin-top:3px}
.info-list b{display:block;font-family:'Poppins',sans-serif;font-size:.92rem}
.info-list a{color:var(--charcoal);text-decoration:none}
.info-list a:hover{color:var(--red)}
.info-list small{color:var(--grey);font-size:.86rem;display:block}
form.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.3rem,3vw,2rem)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:.35rem}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:.96rem;
  padding:.8rem .95rem;border:1px solid var(--line);border-radius:6px;background:#fff;
  color:var(--charcoal)}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;
  border-color:var(--red);box-shadow:0 0 0 3px rgba(201,162,39,.26)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.82rem;color:var(--grey);margin:.2rem 0 1rem}
.form-msg{margin-top:1rem;padding:.9rem 1.1rem;border-radius:6px;font-size:.92rem;display:none}
.form-msg.ok{display:block;background:#ecfdf3;border:1px solid #abefc6;color:#067647}
.form-msg.err{display:block;background:#fef3f2;border:1px solid #fecdc9;color:#b42318}
.map{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:1.4rem}
.map iframe{display:block;width:100%;height:320px;border:0}

/* ---------- CTA band ---------- */
.cta{background:var(--charcoal);color:#fff}
.cta h2{color:#fff}
.cta p{color:#E3D0CB;max-width:56ch}
.cta .wrap{display:grid;grid-template-columns:1.2fr auto;gap:2rem;align-items:center;
  padding:clamp(2.6rem,5vw,3.8rem) 0}

/* ---------- footer ---------- */
footer.site{background:var(--charcoal);color:#C6AFAA;font-size:.9rem}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;
  gap:clamp(1.6rem,4vw,3rem);padding:clamp(2.8rem,5vw,4rem) 0 2.4rem}
footer.site img.logo{width:auto;height:58px;object-fit:contain;
  object-position:left center;margin-bottom:1rem}
footer.site h3{color:#fff;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  margin:0 0 .55rem}
footer.site h3::after{content:"";display:block;width:26px;height:2px;background:var(--red);
  margin-top:.5rem}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
footer.site a{color:#C6AFAA;text-decoration:none}
footer.site a:hover{color:#fff}
footer.site .tag{max-width:34ch;line-height:1.6}
footer.site .fcontact li{display:flex;gap:.6rem;align-items:flex-start}
footer.site .fcontact .ic{width:16px;height:16px;color:var(--red-l,#E3C356);margin-top:4px}
.copy{border-top:1px solid rgba(255,255,255,.10);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;
  justify-content:space-between;padding:1.2rem 0;font-size:.82rem}

/* ---------- sticky mobile call bar ---------- */
.callbar{display:none}

/* ---------- reveal on scroll (failsafe: visible unless JS says otherwise) ---- */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.in{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  nav.main a{padding:.6rem .5rem;font-size:.74rem}
  .brand img{height:64px}
}
@media (max-width:900px){
  body{font-size:16px}
  .bar{height:72px}
  /* the socials eat the top of the screen on a phone; let the rest breathe */
  .util-r{display:none}
  .util .wrap{justify-content:flex-start;height:auto;min-height:34px;
    flex-wrap:wrap;padding-block:.35rem}
  .util-l{flex-wrap:wrap;gap:.25rem 1.3rem}
  nav.main,.bar > .btn{display:none}
  .burger{display:inline-flex}
  .drawer{display:block;position:fixed;inset:0 0 0 auto;width:min(86vw,340px);
    background:#fff;z-index:150;transform:translateX(100%);
    transition:transform .28s ease;padding:1.2rem;overflow-y:auto;
    box-shadow:-20px 0 40px rgba(45,20,25,.18)}
  .drawer.open{transform:none}
  .drawer .x{display:flex;justify-content:flex-end;margin-bottom:.6rem}
  .drawer .x button{background:none;border:1px solid var(--line);border-radius:8px;
    padding:.45rem;color:var(--charcoal)}
  .drawer nav{display:grid;gap:.15rem;margin-bottom:1rem}
  .drawer nav > a{padding:.75rem .4rem;text-decoration:none;font-weight:600;font-size:.95rem;
    border-bottom:1px solid var(--line)}
  .drawer nav > a[aria-current]{color:var(--red-text)}
  /* collapsible groups — native <details> so they still open with JS disabled,
     mirroring the Services / Areas dropdowns on desktop */
  .drawer .drw-gr{border-bottom:1px solid var(--line)}
  .drawer .drw-gr > summary{display:flex;align-items:center;justify-content:space-between;
    gap:.6rem;padding:.75rem .4rem;font-family:'Inter',sans-serif;font-weight:600;
    font-size:.95rem;color:var(--charcoal);cursor:pointer;list-style:none}
  .drawer .drw-gr > summary::-webkit-details-marker{display:none}
  .drawer .drw-gr > summary::marker{content:""}
  .drawer .drw-gr > summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
  .drawer .drw-gr .ddc{width:18px;height:18px;flex:0 0 18px;color:var(--grey);
    transition:transform .22s ease}
  .drawer .drw-gr[open] > summary{color:var(--red-text)}
  .drawer .drw-gr[open] .ddc{transform:rotate(180deg);color:var(--red-text)}
  .drawer .drw-p{display:grid;gap:.1rem;margin:0 0 .55rem .45rem;padding-left:.85rem;
    border-left:2px solid var(--line)}
  .drawer .drw-p a{padding:.5rem .4rem;text-decoration:none;font-weight:500;
    font-size:.885rem;color:var(--grey);border-bottom:0}
  .drawer .drw-p a[aria-current]{color:var(--red-text);font-weight:600}
  .drawer .btn{width:100%}
  .scrim{position:fixed;inset:0;background:rgba(45,20,25,.5);z-index:140;opacity:0;
    pointer-events:none;transition:opacity .28s ease}
  .scrim.open{opacity:1;pointer-events:auto}
  .brand img{height:70px}
  .band .cell + .cell::before{display:none}
  .band .cell + .cell{border-top:1px solid rgba(255,255,255,.14)}
  .trust{grid-template-columns:1fr 1fr;gap:1.1rem}
  /* stacked: every cell flush to the same left edge, icons and text aligned */
  .band .wrap{grid-template-columns:1fr;min-height:0}
  .band .cell{padding:1.35rem 0;gap:1.15rem}
  .band .ic{width:34px;height:34px;flex:0 0 34px}
  .band p{max-width:none}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .reviews-grid > *{flex-basis:calc((100% - 1.1rem)/2)}
  .alt{grid-template-columns:1fr;gap:1.4rem}
  .alt.rev .alt-text{order:0}
  .alt-media{order:-1}
  .contact-grid{grid-template-columns:1fr}
  .cta .wrap{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .jump{top:66px}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:#fff;border-top:1px solid var(--line);padding:.6rem .8rem;gap:.6rem;
    padding-bottom:calc(.6rem + env(safe-area-inset-bottom))}
  /* nowrap labels + 1.8rem side padding pushed this bar off the right edge on a
     390px screen — trim the padding and let the buttons actually shrink */
  .callbar a{flex:1 1 0;min-width:0}
  .callbar .btn{padding:1rem .55rem;font-size:.8rem;letter-spacing:.03em;gap:.4rem}
  .callbar .ic{width:17px;height:17px;flex:0 0 17px}
  body{padding-bottom:74px}
}
/* mobile — text first, photograph underneath */
@media (max-width:767px){
  /* column-reverse puts the copy above the photograph without moving the markup */
  .hero{height:auto;background:#fff;display:flex;flex-direction:column-reverse}
  .hero::before{display:none}
  .hero-grid{padding:1.8rem 0 0}
  .hero-copy{width:100%}
  /* The box carries the aspect ratio, not the image — so the space is reserved
     from first paint, before any slide has loaded, and the absolutely-positioned
     slides have something to anchor to. position:relative behaves identically to
     static in the flex flow. */
  .hero-photo{position:relative;width:auto;height:auto;aspect-ratio:16/10;
    margin:1.8rem 0 0}
  .hero-photo img{aspect-ratio:auto;height:100%}
  .hero h1{font-size:clamp(2.05rem,8.4vw,2.75rem)}
  .hero p.sub{width:auto;max-width:none}
  .hero .btn-row{flex-wrap:wrap;gap:12px}
  .hero .btn-row .btn-primary,.hero .btn-row .btn-ghost{width:100%;min-width:0}
  .trust-inline{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.2rem;margin-top:2rem}
  .trust-inline li{white-space:normal}
}
@media (max-width:640px){
  .tiles{grid-template-columns:1fr 1fr}
  .reviews-grid > *{flex-basis:100%}
  .g3,.g4,.g2{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr}
  .ba-solo{grid-template-columns:1fr}
  .ba-filter .ba figcaption{min-height:0}
  footer.site .cols{grid-template-columns:1fr}
  .brand img{height:56px}
}
@media (max-width:400px){
  .brand img{height:48px}
  .tiles{grid-template-columns:1fr}
}


/* --- nav dropdowns ------------------------------------------------------
   The menu is position:absolute inside a position:relative wrapper, so it
   OVERLAYS and can never push the logo or the other nav items sideways.
   The trigger's box is identical open or closed: no weight change, no
   letter-spacing change, no padding change on hover — only colour moves. */
.navdd{position:relative;display:flex;align-items:center}
.navdd > .navdd-t{display:inline-flex;align-items:center;gap:5px}
.navdd .ddc{width:14px;height:14px;flex:0 0 auto;transition:transform .18s ease}
.navdd.open > .navdd-t .ddc{transform:rotate(180deg)}
.navdd-m{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:248px;background:#fff;border:1px solid var(--line,#E7DCD0);border-radius:10px;
  box-shadow:0 18px 40px rgba(45,20,25,.14);padding:8px;z-index:120;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.navdd:hover > .navdd-m,
.navdd.open > .navdd-m,
.navdd:focus-within > .navdd-m{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
/* the dropdown links must NOT inherit the uppercase 13px nav-item styling */
nav.main .navdd-m a{display:block;padding:9px 12px;border-radius:7px;font-size:14px;
  font-weight:500;letter-spacing:0;text-transform:none;color:#43101D;white-space:nowrap;
  border-bottom:0}
nav.main .navdd-m a:hover,
nav.main .navdd-m a:focus-visible{background:#F8F2EB;color:var(--red,var(--red))}
nav.main .navdd-m a.navdd-all{margin-top:6px;border-top:1px solid var(--line,#E7DCD0);
  border-radius:0 0 7px 7px;font-weight:600;color:var(--red,var(--red))}
/* a bridge so the pointer can travel from trigger to menu without it closing */
.navdd::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
@media (prefers-reduced-motion:reduce){
  .navdd-m,.navdd .ddc{transition:none}
}
@media (max-width:900px){
  .navdd-m{display:none}
}


/* --- reviews marquee ----------------------------------------------------
   Same mechanism as the accreditation marquee used elsewhere in the template
   set: a flex track translated with a CSS keyframe, paused on hover. The card
   set is duplicated in the markup and the track moves exactly -50%, so the
   loop is seamless. transform-only, so it cannot cause layout shift. */
.rev-marquee{overflow:hidden;position:relative;margin-inline:calc(50% - 50vw);
  /* No side padding. Lining the first card up with the content column looked
     tidier at rest, but it inset the track by 40px inside a full-bleed box, so
     at the start of every cycle there was a 40px strip of bare background down
     the left edge — measured, not guessed. A belt that is always moving has no
     "at rest", so the alignment bought nothing and the gap was real. Cards now
     run edge to edge and the fades at either side do the framing. */
  padding-inline:0}
.rev-marquee::before,.rev-marquee::after{content:"";position:absolute;top:0;bottom:0;
  width:70px;z-index:2;pointer-events:none}
.rev-marquee::before{left:0;background:linear-gradient(90deg,var(--paper,#FFFFFF),transparent)}
.rev-marquee::after{right:0;background:linear-gradient(270deg,var(--paper,#FFFFFF),transparent)}
/* One card-gap of bleed on the leading edge. Coverage measures exactly 0px
   overhang at translateX(0) — pixel-flush, so no gap — but "exactly zero" is a
   bad place to sit when transforms round to subpixels, so the track starts
   slightly left of the frame and never touches the boundary. */
.rev-track{margin-inline-start:calc(var(--rev-gap) * -2);display:flex;
  gap:var(--rev-gap);width:max-content;
  animation:revscroll var(--rev-dur) linear infinite;will-change:transform}
.rev-marquee:hover .rev-track,
.rev-marquee:focus-within .rev-track{animation-play-state:paused}

/* Seamless loop, done by arithmetic rather than by -50%.
   The old rule translated the track -50%, which is only seamless if the two
   halves are separated by no gap. They are not: N cards in a row carry N-1
   gaps, so the duplicate set started one gap early and the belt visibly jumped
   — and with only five reviews the track was barely wider than the window, so
   the tail ran out and left dead space before the loop came round.

   Instead the set is repeated --rev-sets times in the markup and the animation
   shifts by exactly ONE set: N x (card + gap). That distance is identical to
   the width of the set that has just left, gap included, so the frame after
   the reset is pixel-identical to the frame before it. Repeating four times
   guarantees the belt still overflows the widest viewport after the shift, so
   there is never a bare patch at the trailing edge. */
.rev-marquee{--rev-card:340px; --rev-gap:18px; --rev-n:5; --rev-dur:21s}
.rev-track .review{flex:0 0 var(--rev-card);width:var(--rev-card);height:270px;margin:0;
  overflow:hidden;display:flex;flex-direction:column}
.rev-track .review blockquote{margin:0;overflow:hidden}
.rev-track .review blockquote p{display:-webkit-box;-webkit-line-clamp:6;
  -webkit-box-orient:vertical;overflow:hidden;font-size:.93rem;line-height:1.55}
@keyframes revscroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * (var(--rev-card) + var(--rev-gap)) * var(--rev-n)),0,0)}
}
@media (max-width:640px){
  /* the card is narrower here, so a set is shorter; the build hands down a
     matching duration to keep the px/s identical to desktop */
  .rev-marquee{--rev-card:290px; --rev-dur:var(--rev-dur-sm,18s)}
  .rev-track .review{height:290px}
}
/* reduced motion: no animation, becomes a normal swipeable row */
@media (prefers-reduced-motion:reduce){
  .rev-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rev-track{animation:none;width:auto}
  /* one set only: the repeats exist to feed the animation, and with it off
     they would just be the same reviews over and over in a scroll strip */
  .rev-track .rev-rep{display:none}
}




/* ============================ QUOTE MODAL ============================
   Multi-step enquiry form opened by the "Get a free quote" CTAs. Progressive
   enhancement: the buttons still link to contact.html, and site.js only
   intercepts the click when JS is available, so nothing breaks without it. */
.qm-back{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(59,13,24,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s ease;padding:0}
.qm-back.is-open{opacity:1}
@media(min-width:641px){.qm-back{align-items:center;padding:1.5rem}}
.qm{background:var(--paper);width:100%;max-width:560px;position:relative;
  border-radius:14px 14px 0 0;box-shadow:0 24px 60px rgba(59,13,24,.28);
  transform:translateY(18px);transition:transform .24s ease;
  /* One question per screen + a pinned footer: the sheet never grows past this,
     so Next is always on screen and the page behind never scrolls away. */
  height:min(86vh,720px);display:flex;flex-direction:column;overflow:hidden}
.qm-back.is-open .qm{transform:none}
@media(min-width:641px){.qm{border-radius:14px}}
.qm-head{flex:0 0 auto;background:var(--paper);z-index:2;position:relative;
  padding:1rem 1.35rem .7rem;border-bottom:1px solid var(--line)}
.qm-head h2{margin:0;font-family:'Poppins',system-ui,sans-serif;font-size:1.1rem;
  color:var(--charcoal);line-height:1.25;padding-right:2.4rem}
.qm-head p{margin:.3rem 0 0;font-size:.87rem;color:var(--grey)}
.qm-x{position:absolute;top:.75rem;right:.75rem;width:38px;height:38px;border:0;
  z-index:4;/* above .qm-head (sticky, z-index:2) or the header paints over it */
  border-radius:50%;background:#F5EFE7;color:var(--charcoal);font-size:1.35rem;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qm-x:hover{background:#E7DCD0}
.qm-x:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.qm-bar{height:4px;background:var(--line);border-radius:99px;margin:.85rem 0 0;overflow:hidden}
.qm-bar i{display:block;height:100%;background:var(--red);width:25%;
  transition:width .28s ease;border-radius:99px}
.qm-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:1.1rem 1.35rem 1.2rem}
.qm-foot{flex:0 0 auto;border-top:1px solid var(--line);background:var(--paper);
  padding:.8rem 1.35rem calc(.8rem + env(safe-area-inset-bottom))}
.qm-foot .qm-nav{margin-top:0}
.qm-screen{min-height:100%}
.qm-step{display:none}
.qm-step.is-on{display:block}
.qm-legend{font-weight:600;font-size:.95rem;color:var(--charcoal);margin:0 0 .7rem}
.qm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
/* Deliberately stays 2-up on the smallest phones: a single column turned ten
   options into a scroll marathon. Cards shrink instead of stacking. */
@media(max-width:420px){
  .qm-opt{padding:.62rem .6rem;font-size:.85rem;border-radius:9px}
  .qm-grid{gap:.45rem}
}
.qm-opt{display:flex;align-items:center;gap:.6rem;padding:.8rem .85rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;font-size:.9rem;
  font-weight:500;color:var(--charcoal);text-align:left;transition:border-color .14s,background .14s}
.qm-opt:hover{border-color:var(--charcoal-2)}
.qm-opt.is-sel{border-color:var(--red);background:#FBF5E3}
.qm-opt input{position:absolute;opacity:0;pointer-events:none}
.qm-f{margin-bottom:.85rem}
.qm-f label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem;color:var(--charcoal)}
.qm-f .req{color:var(--red-text)}
.qm-f input,.qm-f textarea,.qm-f select{width:100%;font:inherit;font-size:.95rem;
  padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--charcoal)}
.qm-f textarea{min-height:88px;resize:vertical}
.qm-f input:focus,.qm-f textarea:focus,.qm-f select:focus{outline:none;border-color:var(--red)}
.qm-f input[aria-invalid="true"]{border-color:var(--red);background:#FBF5E3}
.qm-err{color:var(--red-text);font-size:.8rem;margin:.25rem 0 0;min-height:1em}
.qm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qm-nav{display:flex;gap:.6rem;margin-top:1.1rem}
.qm-nav .btn{flex:1;justify-content:center}
.qm-note{font-size:.78rem;color:var(--grey);margin:.85rem 0 0;text-align:center}
.qm-done{text-align:center;padding:1.5rem .5rem}
.qm-done .tick{width:56px;height:56px;border-radius:50%;background:#DCFCE7;color:#15803D;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.8rem}
.qm-done h3{margin:0 0 .4rem;font-family:'Poppins',system-ui,sans-serif;color:var(--charcoal)}
.qm-done p{margin:0;color:var(--grey);font-size:.92rem}
body.qm-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .qm-back,.qm,.qm-bar i{transition:none}
}

/* ---- curated per-service questions + photo upload ---- */
.qm-q{margin-bottom:1.15rem}
.qm-qlabel{font-weight:600;font-size:.9rem;color:var(--charcoal);margin:0 0 .5rem}
.qm-q textarea,.qm-q input[type=text]{width:100%;font:inherit;font-size:.95rem;
  padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:8px;background:#fff}
.qm-q textarea{min-height:92px;resize:vertical}
.qm-q textarea:focus,.qm-q input[type=text]:focus{outline:none;border-color:var(--red)}
.qm-hint{font-size:.78rem;color:var(--grey);margin:.4rem 0 0}
.qm-opt-tag{font-weight:400;font-size:.78rem;color:var(--grey)}
.qm-drop{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;cursor:pointer;
  border:1.5px dashed var(--line);border-radius:10px;background:#fff;
  color:var(--charcoal);transition:border-color .14s,background .14s}
.qm-drop:hover{border-color:var(--red);background:#FBF5E3}
.qm-drop svg{width:26px;height:26px;flex:0 0 auto;color:var(--red-text)}
.qm-drop b{display:block;font-size:.92rem}
.qm-drop small{display:block;font-size:.78rem;color:var(--grey)}
.qm-thumbs{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.7rem}
.qm-thumb{position:relative;width:74px;height:74px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:#F5EFE7}
.qm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.qm-thumb.is-busy img{opacity:.45}
.qm-thumb-x{position:absolute;top:2px;right:2px;width:20px;height:20px;border:0;
  border-radius:50%;background:rgba(59,13,24,.78);color:#fff;font-size:.95rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.qm-thumb-x:hover{background:var(--red)}
.qm-spin{position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(59,13,24,.2);border-top-color:var(--red);animation:qmspin .7s linear infinite}
@keyframes qmspin{to{transform:rotate(360deg)}}
/* Prefer-to-talk row: call + WhatsApp side by side */
.qm-talk{display:flex;gap:.6rem;margin:.5rem 0 .2rem}
.qm-talk-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.62rem .7rem;border-radius:8px;border:1.5px solid var(--line);background:#fff;
  color:var(--charcoal);font-size:.88rem;font-weight:600;text-decoration:none}
.qm-talk-btn svg{width:17px;height:17px;flex:0 0 auto}
.qm-talk-btn:hover{border-color:var(--charcoal-2)}
.qm-wa{background:#25D366;border-color:#25D366;color:#fff}
.qm-wa:hover{background:#1DA851;border-color:#1DA851;color:#fff}
@media(prefers-reduced-motion:reduce){.qm-spin{animation:none}}

/* ---- "fill the form in first?" WhatsApp interstitial ---- */
.qm-ask{position:absolute;inset:0;z-index:6;display:flex;align-items:center;
  justify-content:center;padding:1.2rem;background:rgba(59,13,24,.55);
  opacity:0;transition:opacity .18s ease}
.qm-ask.is-on{opacity:1}
.qm-ask-in{background:#fff;border-radius:12px;padding:1.4rem 1.3rem;max-width:400px;
  width:100%;box-shadow:0 18px 44px rgba(59,13,24,.3);text-align:center}
.qm-ask-in h3{margin:0 0 .5rem;font-family:'Poppins',system-ui,sans-serif;
  font-size:1.08rem;color:var(--charcoal)}
.qm-ask-in p{margin:0 0 1.1rem;font-size:.88rem;line-height:1.55;color:var(--grey)}
.qm-ask-in .btn{width:100%;justify-content:center;margin-bottom:.55rem}
.qm-ask-in .btn:last-child{margin-bottom:0}
.qm-done-wa{display:inline-flex;margin-top:1.2rem;flex:0 0 auto;padding:.7rem 1.1rem}
@media(prefers-reduced-motion:reduce){.qm-ask{transition:none}}

/* one-question-per-screen tuning */
.qm-legend{font-size:1.02rem;line-height:1.35;margin:0 0 .85rem}
.qm-hint-top{margin:-.55rem 0 .8rem}
.qm-x{top:.6rem;right:.6rem}
.qm-bar{margin:.7rem 0 0}
@media(max-width:640px){
  .qm-back{align-items:flex-end}
  .qm{height:min(88vh,760px);border-radius:16px 16px 0 0}
  .qm-legend{font-size:1rem}
  .qm-body{padding:1rem 1.05rem 1.1rem}
  .qm-head,.qm-foot{padding-left:1.05rem;padding-right:1.05rem}
  .qm-talk{margin-bottom:0}
  .qm-talk-btn{padding:.5rem .6rem;font-size:.83rem}
}

/* [hidden] loses to .btn{display:inline-flex} — without this the Back/Next
   buttons stay on screen after JS hides them. */
.qm-nav .btn[hidden]{display:none}

/* "Quote for <service> — change" strip on the pre-selected service pages */
.qm-chosen{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .7rem;
  font-size:.82rem;color:var(--grey)}
.qm-chosen b{color:var(--charcoal);font-weight:600}
.qm-change{background:none;border:0;padding:0;margin-left:auto;cursor:pointer;
  font:inherit;font-weight:600;color:var(--red-text);text-decoration:underline}
.qm-change:hover{color:var(--red-dark)}


/* ======================================================================
   JE-only components. Birkdale has no numbered process rail, no service
   spec strip and no guide pages, so these are additions in the same
   visual language rather than ports.
   ====================================================================== */
.sec-alt{background:var(--stone);border-block:1px solid var(--line)}

/* ---------- numbered process rail ---------- */
.steps{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem;counter-reset:s}
.steps li{position:relative;min-width:0}
.steps li::before{content:"";position:absolute;left:46px;right:-1.5rem;top:22px;height:1px;
  background:var(--line)}
.steps li:last-child::before{display:none}
.steps .n{position:relative;z-index:2;width:44px;height:44px;border-radius:50%;
  background:var(--red);color:var(--on-brass);font-family:'Poppins',sans-serif;
  font-weight:700;font-size:1.05rem;display:grid;place-items:center;margin-bottom:1rem}
.steps b{font-family:'Poppins',sans-serif;font-size:1.02rem;display:block;
  margin-bottom:.35rem}
.steps p{margin:0;font-size:.93rem;color:var(--grey);line-height:1.55}
@media (max-width:1080px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps li::before{display:none}}
@media (max-width:640px){.steps{grid-template-columns:1fr;gap:1.2rem}}

/* ---------- service spec strip ---------- */
.spec-strip{background:#3B0D18;color:#fff}
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;margin:0}
.spec>div{border-left:2px solid var(--red);padding-left:1rem;min-width:0}
.spec dt{font-family:'Poppins',sans-serif;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:#E3C356;margin-bottom:.35rem;font-weight:600}
.spec dd{margin:0;font-size:.94rem;line-height:1.5;color:#EDDDD8}
@media (max-width:900px){.spec{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.spec{grid-template-columns:1fr}}

/* ---------- guide article ---------- */
.article{display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:start}
.toc{position:sticky;top:130px;border-left:3px solid var(--red);padding-left:1.2rem}
.toc ol{margin:0 0 1.4rem;padding-left:1.1rem;font-size:.93rem}
.toc li{margin-bottom:.5rem}
.toc a{color:var(--grey);text-decoration:none}
.toc a:hover{color:var(--charcoal)}
.toc .btn{width:100%}
.gsec{margin-bottom:2.6rem;max-width:74ch}
.gsec h2{font-size:clamp(1.35rem,2.6vw,1.9rem)}
.cite{font-size:.86rem;color:var(--grey);border-left:3px solid var(--line);
  padding-left:.9rem;margin-top:1.2rem}
.sources ul{padding-left:1.15rem;font-size:.94rem}
.sources li{margin-bottom:.5rem}
@media (max-width:900px){.article{grid-template-columns:1fr}
  .toc{position:static;margin-bottom:2rem}}

/* ---------- sitemap ---------- */
.sitemap h2{font-size:1.15rem}
.sitemap ul{list-style:none;padding:0;margin:0;font-size:.96rem}
.sitemap li{padding:.32rem 0;border-bottom:1px solid var(--line)}
.sitemap a{text-decoration:none;color:var(--grey)}
.sitemap a:hover{color:var(--charcoal)}

/* ---------- footer extras ---------- */
footer.site .frate{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:.86rem;margin:0}
footer.site .frate .g{width:17px;height:17px;flex:0 0 auto}
footer.site .frate .stars{color:var(--gold);letter-spacing:.06em}
footer.site .frate b{color:#fff;font-family:'Poppins',sans-serif;font-weight:600}
footer.site .cols-contact{grid-template-columns:1fr;padding-top:0;padding-bottom:2rem;
  border-top:1px solid rgba(255,255,255,.10)}
footer.site .cols-contact .fcontact{grid-auto-flow:column;grid-template-columns:repeat(3,auto);
  justify-content:start;gap:.6rem 2.6rem}
@media (max-width:900px){footer.site .cols-contact .fcontact{grid-auto-flow:row;
  grid-template-columns:1fr}}

/* ---------- util bar / hero tweaks for this site ---------- */
.util .g{width:15px;height:15px;flex:0 0 auto}
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(45,20,25,.06)}
.tiles figcaption{min-height:2.9em}
@media (max-width:640px){.tiles figcaption{min-height:0}}

/* rating badge + the verbatim promise on one line, so the section does not
   open by stating the same number twice */
.rev-head{display:flex;align-items:center;gap:1.2rem 1.6rem;flex-wrap:wrap;
  margin:0 0 1.8rem}
.rev-head .lede{margin:0;max-width:52ch}
@media (max-width:640px){.rev-head{gap:.9rem}}

/* ---------- Checkatrade belt ----------
   Second review source, same belt mechanism as the Google one. Checkatrade
   scores out of 10 and anonymises most reviewers, so the card leads with the
   score and the job rather than with a name and a star row. */
.cat-badge{gap:.55rem}
.cat-badge .ic{width:19px;height:19px;color:var(--red-text);flex:0 0 auto}
.cat-badge b{font-family:'Poppins',sans-serif;font-size:.95rem}
.cat-badge span{font-size:.82rem;color:var(--grey)}
.rev-head-2{margin-top:2.6rem}

.review-cat .top{align-items:flex-start}
.cat-score{flex:0 0 auto;min-width:52px;height:40px;padding:0 .5rem;border-radius:8px;
  background:var(--red);color:var(--on-brass);display:grid;place-items:center;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.9rem;line-height:1}
.cat-mark{margin-left:auto;flex:0 0 auto;font-family:'Poppins',sans-serif;font-weight:600;
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);
  border:1px solid var(--line);border-radius:99px;padding:.24rem .5rem;white-space:nowrap}
.cat-job{margin:0 0 .5rem;font-family:'Poppins',sans-serif;font-weight:600;font-size:.86rem;
  color:var(--charcoal);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.cat-foot{margin-top:auto;padding-top:.7rem;display:flex;align-items:center;gap:.45rem .9rem;
  flex-wrap:wrap;font-size:.76rem;color:var(--grey);border-top:1px solid var(--line)}
.cat-ver{display:inline-flex;align-items:center;gap:.3rem}
.cat-ver .ic,.cat-loc .ic{width:13px;height:13px;color:var(--red-text);flex:0 0 auto}
.cat-loc{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem}
.rev-track .review-cat{height:314px}
.rev-track .review-cat blockquote{flex:1 1 auto;min-height:0}
.rev-track .review-cat blockquote p{-webkit-line-clamp:5}
@media (max-width:640px){.rev-track .review-cat{height:330px}}

/* the full grid on the reviews page: no clamping, nothing hidden */
.reviews-grid .review-cat{height:auto}
.reviews-grid .review-cat .cat-job,
.reviews-grid .review-cat blockquote p{-webkit-line-clamp:unset;display:block;overflow:visible}

/* the two belts run against each other: Google left, Checkatrade right */
.rev-marquee[data-dir="reverse"] .rev-track{animation-direction:reverse}

/* Checkatrade's own mark */
.cat-logo{flex:0 0 auto;display:block}
.cat-badge .cat-logo{width:24px;height:24px}
.cat-mark{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:.32rem;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey);border:1px solid var(--line);border-radius:99px;
  padding:.2rem .5rem .2rem .28rem;white-space:nowrap}
.cat-mark .cat-logo{width:20px;height:20px}

/* the Checkatrade pill squeezes the name column, and a two-word date was
   wrapping onto a second line and pushing the card contents down */
.review-cat .who{flex:1 1 auto;min-width:0}
.review-cat .who b,.review-cat .who small{display:block;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cat-mark{font-size:.62rem;letter-spacing:.05em;padding:.18rem .45rem .18rem .24rem;
  gap:.28rem}
.cat-mark .cat-logo{width:18px;height:18px}