/* ---------------------------------------------------------------------------
   Self-hosted fonts. Previously these came from fonts.googleapis.com, which
   cost a render-blocking round trip to a third party on every page load and
   handed every visitor's IP address to Google. Files live in /fonts and are
   cached for a year by _headers. Only the faces a page actually uses get
   downloaded. If you add a weight here, add the .woff2 to /fonts too.
   --------------------------------------------------------------------------- */
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/saira-condensed-500-normal.woff2") format("woff2")}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/saira-condensed-600-normal.woff2") format("woff2")}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/saira-condensed-700-normal.woff2") format("woff2")}
@font-face{font-family:"Asap";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/asap-400-normal.woff2") format("woff2")}
@font-face{font-family:"Asap";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/asap-500-normal.woff2") format("woff2")}
@font-face{font-family:"Asap";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/asap-600-normal.woff2") format("woff2")}
@font-face{font-family:"Asap";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/asap-700-normal.woff2") format("woff2")}
@font-face{font-family:"Asap";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/asap-400-italic.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-500-normal.woff2") format("woff2")}

/* ---------- tokens : light ---------- */
:root{
  /* SINGLE LIGHT PALETTE — the site is light for everyone, regardless of the
     visitor's OS setting. There is no dark theme: these are the only colour
     tokens, so changing one here changes it everywhere.
     Purple is reserved for buttons only. */
  color-scheme:light;
  --paper:#faf9f6;
  --surface:#ffffff;
  --surface-2:#f2f0eb;
  --ink:#1c1b1f;
  --ink-2:#4a4950;
  --ink-3:#6f6e75;
  --rule:#e3e0d9;
  --rule-strong:#c8c4bb;
  --accent:#9870c5;        /* purple — button fills only */
  --accent-deep:#865cb8;   /* button hover — a shade darker on a light page */
  --accent-ink:#1a1023;    /* text sitting on a button fill */
  --good:#2f8a5a;
  --alert:#c2384f;
  --shadow:0 1px 2px rgba(28,27,31,.06), 0 8px 24px -12px rgba(28,27,31,.18);
  --hatch:rgba(28,27,31,.04);
  --hero-veil:transparent;  /* no wash: the photo shows at full strength */
  --glass:rgba(255,255,255,.6);       /* frosted chip over the hero photo */

  --f-display:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Asap",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --wrap:1120px;
  --gutter:20px;
  /* height of the masthead — the hero photo is extended upward by this much
     so it sits behind the translucent header. Measured: 94-99px on desktop,
     70px at 720px and below, 68px on phones. Keep it at or a touch above. */
  --top-h:100px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(2.4rem,6.2vw,4.1rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.65rem)}
h3{font-size:1.22rem;letter-spacing:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(52px,7vw,90px)}
.band--tint{background:var(--surface-2)}
.band--edge{border-top:1px solid var(--rule)}

/* eyebrow — job-sheet field label */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 14px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}

.lede{color:var(--ink-2);font-size:1.06rem;max-width:62ch;margin-top:14px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-display);font-size:1.02rem;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;
  padding:13px 22px;border-radius:3px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn--solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--accent-ink)}
.btn--line{border-color:var(--rule-strong);color:var(--ink);background:transparent}
.btn--line:hover{border-color:var(--ink);background:var(--surface)}

/* ---------- header ---------- */

.masthead{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  /* translucent so the hero photo reads through at the top of the page;
     the blur keeps text legible once ordinary content scrolls under it */
  background:color-mix(in srgb, var(--paper) 56%, transparent);
  backdrop-filter:blur(20px) saturate(1.25);
  border-bottom:1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}
.masthead__in{display:flex;align-items:center;gap:18px;padding-block:12px}
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  min-width:0;        /* never shoves the phone button off-screen */
  margin-right:auto;  /* everything after the brand is locked to the right */
}
/* The logo is a one-colour silhouette used as a CSS mask, so it takes its
   colour from the theme: near-black on light, near-white on dark. To swap
   it, replace the data URI in both mask lines with your own PNG/SVG mask
   (artwork opaque, background transparent) and update aspect-ratio. */
.brand__logo{
  width:clamp(200px,24vw,270px);
  aspect-ratio:1200/282;
  flex:none;
  background:#000;   /* logo is pure black */
  -webkit-mask:url("/images/logo-2.png") left center/contain no-repeat;
          mask:url("/images/logo-2.png") left center/contain no-repeat;
}
.brand__tag{
  font-family:var(--f-display);font-size:.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;
  padding-left:12px;
  /* Not shown. It was previously colour-matched to the page ground, which
     stopped working once the header went translucent over the photo — and
     colour-matched text reads as cloaking to search engines anyway. The
     business name is on the link's aria-label, so nothing is lost.
     To show it: display:inline; color:var(--ink-3); border-left:1px solid var(--rule). */
  display:none;
  color:var(--ink-3);
  border-left:1px solid var(--rule);
}
@media (max-width:620px){ .brand__tag{display:none} }
/* step the logo down on small screens so it never crowds the phone button */
@media (max-width:720px){ .brand__logo{width:180px} :root{--top-h:72px} }
@media (max-width:420px){ .brand__logo{width:160px} :root{--top-h:68px} }
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{
  font-family:var(--f-display);font-size:1.08rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;text-decoration:none;color:#000;white-space:nowrap;
}
.nav a:hover{color:var(--ink-2)}
.masthead .btn{padding:9px 16px;font-size:.92rem;flex:none}

/* --- collapsed nav: menu button + dropdown panel --- */
.menu-btn{display:none;gap:9px}
.menu-panel{border-top:1px solid var(--rule);background:var(--surface)}
.menu-panel ul{list-style:none;margin:0;padding:6px 0 12px;display:flex;flex-direction:column}
.menu-panel a{
  display:block;padding:13px 0;text-decoration:none;color:#000;
  font-family:var(--f-display);font-size:1.08rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;
  border-bottom:1px solid var(--rule);
}
.menu-panel li:last-child a{border-bottom:0}
.menu-panel a:hover{color:var(--ink-2)}

/* Collapse point: the five header links (1.08rem, bold) need ~1100px to sit
   on one row next to the logo and phone button, so the menu button takes
   over below 1110px. */
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
}
/* Once the sticky Call/WhatsApp bar appears at the bottom, the phone button
   in the header is redundant — and dropping it stops the logo, Menu and
   phone from colliding on a narrow screen. */
@media (max-width:720px){ .masthead .btn--solid{display:none} }
@media (min-width:901px){
  .menu-panel{display:none}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding-block:clamp(44px,6vw,76px) clamp(48px,6.5vw,84px);
  border-bottom:1px solid var(--rule);
}
.hero > .wrap{position:relative;z-index:1}
/* Photo sits behind the hero under a translucent veil. Tune --hero-veil
   in the token blocks above, not this rule. Below about .50 the body
   text starts failing contrast against the foliage.
   FOR PRODUCTION: swap the inline data: URI below for a real file
   (e.g. url("/images/hero.jpg")) — a ~150KB image inlined in the HTML
   can't be cached and delays first paint. */
.hero__bg{
  position:absolute;
  top:calc(-1 * var(--top-h));   /* reach up behind the masthead */
  left:0;right:0;bottom:0;
  z-index:0;
  background:url("/images/hero-garden.jpg") center 45%/cover no-repeat;
}
/* Soft blur on the hero photo. Done with backdrop-filter on the overlay layer
   rather than filter:blur() on the photo itself: a plain blur fades the photo's
   edges to transparent, leaving a pale halo along the bottom and sides, while
   backdrop-filter clamps at the edges. --hero-blur sets the strength. */
:root{--hero-blur:3px}
.hero__bg::after{content:"";position:absolute;inset:0;background:var(--hero-veil);
  -webkit-backdrop-filter:blur(var(--hero-blur));backdrop-filter:blur(var(--hero-blur))}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){
  /* stacked: the copy sits above the checker, so centre it */
  .hero__grid{grid-template-columns:1fr}
  .hero__copy{text-align:center}
  .hero__copy .eyebrow{justify-content:center}
  .hero__copy .eyebrow::after{display:none}
  .hero__copy .hero__sub{margin-inline:auto}
  .hero__copy .ratingline{justify-content:center}
}
.hero h1 em{font-style:normal;color:inherit}
.hero__hook{
  display:block;
  font-size:clamp(3.1rem,8.6vw,5.4rem);
  line-height:.92;
  letter-spacing:-.025em;
  margin-bottom:.1em;
}
.hero__sub{font-size:1.12rem;color:var(--ink-2);max-width:50ch;margin-top:18px}

/* Hero copy sits over the photo, so it runs heavier and darker than the
   equivalent text elsewhere on the page. */
.hero__copy .hero__sub{font-weight:700;color:var(--ink)}
.hero__copy .eyebrow{font-weight:500;color:var(--ink-2)}
.hero__copy .ratingline{font-weight:600;color:var(--ink)}
.hero__copy .ratingline strong{font-weight:700}

.ratingline{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.82rem;color:var(--ink-2)}
.stars{color:var(--ink);letter-spacing:.1em;font-size:.95rem}

.pricetag{
  display:inline-flex;align-items:baseline;gap:8px;margin-top:18px;
  font-family:var(--f-mono);font-size:.84rem;
  background:var(--surface-2);color:var(--ink);
  border:1px solid var(--rule-strong);border-radius:3px;padding:7px 12px;
}
.pricetag b{font-size:1rem}

/* postcode check — the primary conversion device */
.checker{
  background:var(--surface);border:1px solid var(--rule);border-radius:5px;
  padding:clamp(20px,2.4vw,28px);box-shadow:var(--shadow);
}
.checker h2{font-size:1.5rem}
.checker__form{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.checker label{
  display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;
}
.checker__field{flex:1 1 180px;min-width:0}
.checker input{
  width:100%;font-family:var(--f-mono);font-size:1.06rem;text-transform:uppercase;
  padding:12px 14px;border:1.5px solid var(--rule-strong);border-radius:3px;
  background:var(--paper);color:var(--ink);
}
.checker input::placeholder{color:var(--ink-3);text-transform:none}
.checker__form .btn{flex:0 0 auto;align-self:end}
.result{margin-top:16px;border-left:3px solid var(--rule);padding:12px 0 12px 14px;font-size:.96rem}
.result[data-state="hit"]{border-color:var(--good)}
.result[data-state="miss"]{border-color:var(--alert)}
.result[data-state="error"]{border-color:var(--ink-3)}
.result strong{font-family:var(--f-display);font-size:1.15rem;display:block;letter-spacing:0}
.result .when{font-family:var(--f-mono);font-size:.84rem;color:var(--ink-2);margin-top:4px}
.checker__alt{margin-top:14px;font-size:.9rem;color:var(--ink-3)}
.checker__alt a{color:var(--ink);font-weight:600}

/* checker + its secondary action stack as one column */
.hero__aside{display:flex;flex-direction:column;gap:14px}
.hero__aside .btn{width:100%}

/* anchor links (#quote) clear the sticky header */
#quote{scroll-margin-top:132px}
:root{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ :root{scroll-behavior:auto} }

/* ---------- trust strip ---------- */
.trust{border-block:1px solid var(--rule);background:var(--surface)}
.trust__in{display:flex;flex-wrap:wrap;gap:0;padding:0}
.trust__item{
  flex:1 1 200px;padding:16px 20px;border-right:1px solid var(--rule);
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;gap:9px;
}
.trust__item:last-child{border-right:0}
.trust__item::before{content:"";width:7px;height:7px;background:var(--ink);flex:none;border-radius:50%}

/* ---------- quote form ---------- */
.qform{
  background:var(--surface);border:1px solid var(--rule);border-radius:5px;
  padding:clamp(20px,2.6vw,30px);box-shadow:var(--shadow);margin-top:28px;
}
.qform__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){ .qform__grid{grid-template-columns:1fr} }
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--wide{grid-column:1/-1}
.field label{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:1rem;
  padding:11px 13px;border:1.5px solid var(--rule-strong);border-radius:3px;
  background:var(--paper);color:var(--ink);
}
.field textarea{resize:vertical;min-height:112px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.req{color:var(--alert)}
.consent{
  display:flex;gap:11px;align-items:flex-start;margin-top:18px;
  font-size:.9rem;color:var(--ink-2);
}
.consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--accent)}
.consent a{color:var(--ink);font-weight:600}
.qform__privacy{margin-top:16px;font-size:.88rem;color:var(--ink-2);line-height:1.5}
.qform__privacy a{color:var(--ink);font-weight:600}
.qform__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.qform__note{font-family:var(--f-mono);font-size:.76rem;color:var(--ink-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- photo placeholders ---------- */
.shot{
  position:relative;width:100%;max-width:100%;
  background:var(--surface-2);
  background-image:repeating-linear-gradient(45deg,var(--hatch) 0 8px,transparent 8px 16px);
  border:1px dashed var(--rule-strong);border-radius:4px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;
}
.shot span{
  font-family:var(--f-mono);font-size:.7rem;line-height:1.5;color:var(--ink-3);
  letter-spacing:.04em;
}
/* real photo in a gallery slot — same footprint as a .shot placeholder */
.shot-img{
  width:100%;
  height:auto;          /* without this the height="" attribute wins and
                           aspect-ratio is ignored — the image then gets
                           cropped to a tall slice by object-fit */
  aspect-ratio:4/3;
  object-fit:contain;   /* contain, not cover: a before/after must never
                           lose an edge. Odd ratios letterbox instead. */
  border-radius:4px;border:1px solid var(--rule);
  background:var(--surface-2);
}
.shot--43{aspect-ratio:4/3}
.shot--32{aspect-ratio:3/2}
.shot--11{aspect-ratio:1/1}
.shot--169{aspect-ratio:16/9}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .gallery{grid-template-columns:1fr} }
/* two photos: give each half the width rather than two quarter slots */
.gallery--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:620px){ .gallery--2{grid-template-columns:1fr} }
.gallery figure{margin:0;display:flex;flex-direction:column;gap:9px}
.gallery figcaption{font-family:var(--f-mono);font-size:.76rem;color:var(--ink-2);letter-spacing:.02em}

/* ---------- reviews ---------- */
/* One column while there are only two reviews — a lone card in a two-up
   row reads as a gap. With three or more, switch to repeat(2,1fr) or
   repeat(3,1fr) and the lead card will still span the full width. */
.reviews{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px}
.review--lead{grid-column:1/-1}
.review--lead p{font-size:1.08rem}
.review{
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;
  padding:22px;display:flex;flex-direction:column;gap:12px;
}
.review p{font-size:.98rem;color:var(--ink-2)}
.review footer{
  margin-top:auto;font-family:var(--f-mono);font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.review footer b{color:var(--ink);font-weight:500}

/* ---------- about ---------- */
/* Text-only. To put a portrait back alongside it, make this a two-column
   grid again and add a .shot before the copy. */
.about{display:flex;flex-direction:column;gap:14px}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:28px}
@media (max-width:820px){ .services{grid-template-columns:1fr} }
.service{
  background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--ink);
  border-radius:0 0 4px 4px;padding:24px;text-decoration:none;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s ease, transform .12s ease;
}
.service:hover{transform:translateY(-2px);border-color:var(--rule-strong);border-top-color:var(--ink)}
.service p{color:var(--ink-2);font-size:.96rem}
.service .from{
  margin-top:auto;font-family:var(--f-mono);font-size:.85rem;color:var(--ink);
  padding-top:12px;border-top:1px solid var(--rule);
}
.service .from b{font-size:1.05rem}

/* ---------- reasons ---------- */
.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:28px}
@media (max-width:900px){ .reasons{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .reasons{grid-template-columns:1fr} }
.reason h3{margin-bottom:7px}
.reason p{color:var(--ink-2);font-size:.95rem}
.reason::before{content:"";display:block;width:34px;height:3px;background:var(--ink);margin-bottom:13px}

/* ---------- areas ---------- */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:28px}
@media (max-width:860px){ .areas{grid-template-columns:1fr} }
.area h3{margin-bottom:8px}
.area p{color:var(--ink-2);font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.chip{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.03em;
  border:1px solid var(--rule-strong);border-radius:99px;padding:4px 11px;color:var(--ink-2);
}
a.chip--link{
  text-decoration:none;color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
a.chip--link:hover,a.chip--link:focus-visible{
  border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);
}
.area > a{
  display:inline-block;margin-top:14px;font-family:var(--f-display);text-transform:uppercase;
  font-size:.92rem;letter-spacing:.04em;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--ink);padding-bottom:2px;
}

/* ---------- symptom routing ---------- */
.faults{margin-top:28px;border-top:1px solid var(--rule)}
.fault{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;
  gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;
}
.fault:hover .fault__name{color:var(--ink-2)}
.fault__name{font-family:var(--f-display);font-size:1.2rem;font-weight:600;transition:color .15s ease}
.fault__why{color:var(--ink-2);font-size:.95rem}
.fault__go{font-family:var(--f-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);white-space:nowrap}
@media (max-width:760px){
  .fault{grid-template-columns:1fr;gap:5px;padding:16px 0}
  .fault__go{display:none}
}

/* ---------- steps (a real sequence) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:28px;counter-reset:step}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }
.step{counter-increment:step;padding-top:18px;border-top:2px solid var(--ink)}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3);
  letter-spacing:.1em;display:block;margin-bottom:9px;
}
.step h3{margin-bottom:7px}
.step p{color:var(--ink-2);font-size:.95rem}

/* ---------- faq ---------- */
.faq{margin-top:28px;border-top:1px solid var(--rule);max-width:80ch}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-family:var(--f-display);font-size:1.13rem;font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:1.3rem;color:var(--ink-3);
}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 18px;color:var(--ink-2);max-width:68ch}

/* ---------- closing cta ---------- */
.closer{background:var(--surface-2);color:var(--ink)}
.closer h2{color:inherit}
.closer p{color:inherit;opacity:.78;margin-top:12px;max-width:52ch}
.closer .btn--line{border-color:currentColor;color:inherit}
.closer .btn--line:hover{background:var(--surface)}
.closer__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- footer ---------- */
.foot{background:var(--surface);border-top:1px solid var(--rule);padding-block:44px 28px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media (max-width:860px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot__grid{grid-template-columns:1fr} }
.foot h4{font-size:1.02rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:.04em}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
/* Twelve towns in one column would tower over the other footer columns, so
   split it in two once there is room. */
/* Multi-column rather than a 2-col grid: grid rows align to the tallest item,
   so a wrapping name like "Walton-on-Thames" left a gap beside its neighbour. */
.foot ul.foot__areas{display:block;columns:2;column-gap:18px}
.foot ul.foot__areas li{break-inside:avoid;margin-bottom:7px}
@media (max-width:520px){ .foot ul.foot__areas{columns:1} }
.foot a{color:var(--ink-2);text-decoration:none;font-size:.94rem}
.foot a:hover{color:var(--ink)}
.foot address{font-style:normal;color:var(--ink-2);font-size:.94rem;line-height:1.7}
.hours{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-2);margin-top:12px;line-height:1.8}
.foot__base{
  margin-top:34px;padding-top:18px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);letter-spacing:.04em;
}

/* ---------- sticky mobile call bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:1px;
  background:var(--rule);
  padding-bottom:env(safe-area-inset-bottom,0px);
  border-top:1px solid var(--rule);
}
.callbar a{
  flex:1;text-align:center;padding:14px 8px;background:var(--surface);
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em;
  font-weight:600;text-decoration:none;font-size:1rem;
}
.callbar a:first-child{background:var(--accent);color:var(--accent-ink)}
@media (max-width:720px){
  .callbar{display:flex}
  .foot{padding-bottom:78px}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- service subpages ---------- */
.crumb{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.phero{position:relative;border-bottom:1px solid var(--rule);padding-block:clamp(38px,5vw,62px) clamp(34px,4.5vw,54px)}
.phero > .wrap{position:relative;z-index:1}
/* subpage heroes reuse .hero__bg, so they carry the same photo + veil */
.phero .lede{font-weight:600;color:var(--ink)}
.phero h1{font-size:clamp(2rem,4.4vw,3.2rem);max-width:20ch}
.phero .lede{margin-top:16px}
.phero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
.phero__price{font-family:var(--f-mono);font-size:.85rem;color:var(--ink-2)}
.phero__price b{color:var(--ink);font-size:1rem}
.joblist{columns:2;column-gap:34px;margin:18px 0 0;padding:0;list-style:none}
@media (max-width:660px){ .joblist{columns:1} }
.joblist li{break-inside:avoid;position:relative;padding:8px 0 8px 22px;color:var(--ink-2);font-size:.98rem}
.joblist li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:2px;background:var(--ink-3)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.5vw,44px);align-items:center}
@media (max-width:820px){ .split{grid-template-columns:1fr} }

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
@media (max-width:820px){ .plans{grid-template-columns:1fr} }
.plan{
  background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--ink);
  border-radius:0 0 4px 4px;padding:24px;display:flex;flex-direction:column;gap:10px;
}
.plan__when{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.plan p{color:var(--ink-2);font-size:.96rem}
.plan__note{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);font-family:var(--f-mono);font-size:.8rem;color:var(--ink-2)}

/* frosted chip holding the call button + price, so they lift off the photo */
.phero__chip{
  display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--glass);
  border:1px solid var(--rule);
  border-radius:5px;padding:7px 14px;
  backdrop-filter:blur(8px);
}
.phero__chip .btn--line{border-color:var(--rule-strong);background:transparent}
.phero__chip .btn--line:hover{border-color:var(--ink);background:var(--surface)}

/* Text that sits straight on the hero photo. There is no wash over the photo
   (--hero-veil is transparent), so dark text would vanish into the foliage —
   it is white instead, with a soft shadow to lift it off the busy parts.
   Cards and chips on the photo (postcode checker, price tag, call chip) keep
   their own light backgrounds and dark text. */
:root{--photo-ink:#ffffff;--photo-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.45)}
.hero__copy h1,
.hero__copy .eyebrow,
.hero__copy .hero__sub,
.hero__copy .ratingline,
.hero__copy .stars,
.phero h1,
.phero .lede,
.phero .crumb,
.phero .crumb a{color:var(--photo-ink);text-shadow:var(--photo-shadow)}
.hero__copy .eyebrow::after,
.phero .eyebrow::after{background:rgba(255,255,255,.55)}
.pricetag,.phero__chip{text-shadow:none}

/* Homepage hero photo (the van). Same treatment as the service-page heroes;
   only the picture changes. */
.hero__bg--van{background-image:url("/images/hero-van.jpg");background-position:62% 60%}
/* the van is white, so white text over it needs a soft shade on the text side */
/* text is centred over the van, so the shade covers the whole photo */
.hero__bg--van::after{background:rgba(15,12,20,.48)}
.phero--home .phero__grid .phero__copy{max-width:640px}
.phero .eyebrow,.phero .ratingline,.phero .stars{color:var(--photo-ink);text-shadow:var(--photo-shadow)}
.phero .ratingline{margin-top:18px}

/* Every photo hero on the site is the same height. Content is centred in it;
   only a hero whose content is taller than this (a form inside the hero on
   a phone) grows past it. */
/* All hero text is centred: crumb, eyebrow, heading, intro, reviews line and
   buttons. Quote forms live in their own section below every hero. */
.phero{text-align:center}
.phero .phero__copy{margin-inline:auto}
.phero h1,.phero .lede{margin-inline:auto}
.phero .eyebrow,.phero .ratingline,.phero__cta{justify-content:center}
.phero .eyebrow::after{display:none}
.phero__chip{justify-content:center}
:root{--hero-h:500px}
@media (max-width:900px){ :root{--hero-h:470px} }
@media (max-width:640px){ :root{--hero-h:560px} }
.phero{padding-block:28px}
.phero{min-height:var(--hero-h);display:flex;align-items:center;box-sizing:border-box}
.phero > .wrap{width:100%}

/* Homepage hero has no photo: plain page background, so its copy goes back to
   the normal dark ink instead of white-on-photo. (Service pages keep the photo.) */
.hero--plain .hero__copy h1,
.hero--plain .hero__copy .eyebrow,
.hero--plain .hero__copy .ratingline,
.hero--plain .hero__copy .stars{color:var(--ink);text-shadow:none}
.hero--plain .hero__copy .hero__sub{color:var(--ink-2);text-shadow:none}
.hero--plain .hero__copy .eyebrow::after{background:var(--rule)}

/* quote form card on the right of a subpage hero (garden page) */
.phero__grid{display:grid;grid-template-columns:1fr minmax(340px,440px);gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:900px){ .phero__grid{grid-template-columns:1fr} }
.phero__grid--solo{grid-template-columns:1fr}
.phero__grid--solo .phero__copy{max-width:760px}
.phero__form{
  background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  padding:clamp(20px,2.4vw,28px);box-shadow:0 18px 40px rgba(0,0,0,.22);
  text-shadow:none;color:var(--ink);
}
.phero__form h2{font-size:1.55rem;margin-bottom:16px}
.phero__formsub{color:var(--ink-2);font-size:.95rem;margin:6px 0 16px}
.qform--hero{background:none;border:0;padding:0;box-shadow:none;margin:0}
.qform--hero .qform__grid{gap:12px}
.qform--hero .field textarea{min-height:76px}
.qform--hero .qform__foot{margin-top:16px;gap:12px}
.qform--hero .qform__foot .btn{width:100%;justify-content:center}
/* left-hand copy beside the hero form — sized up a step */
.phero__grid .crumb{font-size:.84rem}
.phero__grid h1{font-size:clamp(2.3rem,5vw,3.7rem)}
.phero__grid .lede{font-size:1.2rem}
.phero__grid .phero__chip .btn{font-size:1.08em}
.phero__grid .phero__price{font-size:.96rem}
/* no frosted box round the call button + note here: the button gets its own
   white fill, and the note goes white-on-photo like the rest of the copy */
.phero__grid .phero__chip{background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.phero__grid .phero__chip .btn--line{background:var(--surface);border-color:var(--surface);color:var(--ink)}
.phero__grid .phero__chip .btn--line:hover{background:var(--paper);border-color:var(--ink)}
.phero__grid .phero__price{color:var(--photo-ink);text-shadow:var(--photo-shadow)}

/* Hero buttons, every page: the call chip's box is dissolved so its button and
   the 'Free quotes' note sit directly in the button row. Flex wraps from the
   end, so as the page narrows the note drops to its own line first and
   'Request a quote' + 'Call' stay together. */
.phero .phero__chip{display:contents}
.phero .phero__cta .btn{white-space:nowrap}
.phero .phero__chip .btn--line{background:var(--surface);border-color:var(--surface);color:var(--ink)}
.phero .phero__chip .btn--line:hover{background:var(--paper);border-color:var(--ink)}
.phero .phero__price{color:var(--photo-ink);text-shadow:var(--photo-shadow)}
.phero__cta{row-gap:14px}
@media (max-width:380px){ .phero__cta{column-gap:8px} .phero__cta .btn{padding-inline:12px;font-size:.9rem} }

/* ---------- long-form text (privacy policy) ---------- */
.prose{max-width:68ch}
.prose h3{margin:30px 0 9px;font-size:1.16rem}
.prose h3:first-of-type{margin-top:6px}
.prose p{color:var(--ink-2);margin-bottom:14px}
.prose ul{color:var(--ink-2);margin:0 0 14px;padding-left:20px}
.prose li{margin-bottom:7px}
.prose a{color:var(--ink)}
.prose strong{color:var(--ink)}
.prose .updated{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3)}

/* in-page anchors clear the sticky header */
section[id], .service[id]{scroll-margin-top:132px}

/* ---------- header nav: Home · Services (dropdown) · Request a quote ---------- */
.nav{align-items:center;gap:28px;flex-wrap:nowrap}
.nav__dd{position:relative}
.nav__ddbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-display);font-size:1.08rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#000;white-space:nowrap}
.nav__ddbtn:hover{color:var(--ink-2)}
.nav__ddbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.nav__ddbtn svg{width:11px;height:11px;transition:transform .18s ease}
.nav__dd::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:16px}
.nav__menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);min-width:240px;padding:8px 0;
  background:var(--paper);border:1px solid var(--rule);border-radius:8px;box-shadow:0 14px 34px rgba(20,16,28,.16);
  display:none;flex-direction:column;z-index:60}
.nav__dd:hover .nav__menu,.nav__dd:focus-within .nav__menu{display:flex}
.nav__dd:hover .nav__ddbtn svg,.nav__dd:focus-within .nav__ddbtn svg{transform:rotate(180deg)}
.nav .nav__menu a{display:block;padding:11px 20px;font-size:1rem}
.nav .nav__menu a:hover,.nav .nav__menu a:focus-visible{background:var(--surface);color:#000}
.nav .nav__menu a[aria-current]{color:var(--accent-deep)}
/* mobile menu: Services group */
.menu-panel__label{display:block;padding:13px 0 6px;color:var(--ink-2);font-family:var(--f-display);font-size:.95rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.menu-panel ul ul{padding:0 0 0 18px}
.menu-panel ul ul a{font-size:1rem;padding:11px 0}
.menu-panel ul ul li:last-child a{border-bottom:1px solid var(--rule)}

/* ---------- hero v2: copy on the left over white that fades into the photo;
   on phones the photo sits on top and the copy goes in a box below ---------- */
.phero{text-align:left}
.phero .phero__copy,.phero--home .phero__grid .phero__copy{margin-inline:0;max-width:560px}
.phero h1,.phero .lede{margin-inline:0}
.phero .eyebrow,.phero .ratingline,.phero__cta,.phero__chip{justify-content:flex-start}
.phero h1,.phero .lede,.phero .eyebrow,.phero .ratingline,.phero .stars,.phero .crumb,.phero .crumb a,
.phero .phero__price,.phero__grid .phero__price{text-shadow:none}
.phero h1,.phero .ratingline,.phero .stars{color:var(--ink)}
.phero .lede{color:var(--ink-2);font-weight:500}
.phero .eyebrow,.phero .crumb,.phero .phero__price,.phero__grid .phero__price{color:var(--ink-3)}
.phero .crumb a{color:var(--ink-2)}
.phero .phero__chip .btn--line,.phero__grid .phero__chip .btn--line{border-color:var(--rule-strong)}
.phero .hero__bg::after,.phero .hero__bg--van::after{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(90deg,#fff 0%,#fff 30%,rgba(255,255,255,.92) 42%,rgba(255,255,255,.55) 56%,rgba(255,255,255,0) 72%)}
@media (max-width:640px){
  .phero{display:block;min-height:0;padding:0}
  .phero .hero__bg{position:relative;top:auto;height:230px;background-position:center 55%}
  .phero .hero__bg--van{background-position:70% 60%}
  .phero .hero__bg::after,.phero .hero__bg--van::after{display:none}
  .phero > .wrap{width:auto;box-sizing:border-box;margin:-26px 14px 22px;padding:22px 18px 24px;
    background:var(--surface);border:1px solid var(--rule);border-radius:10px;box-shadow:0 12px 28px rgba(20,16,28,.14)}
  .phero__cta{margin-top:20px;column-gap:8px}
  .phero .phero__cta .btn{padding-inline:13px;font-size:.9rem}
  .phero > .wrap{margin-inline:10px;padding-inline:16px}
}

/* homepage: keep the intro no wider than the heading so it stays on the white */
@media (min-width:641px){
  .phero--home .phero__grid .phero__copy{width:min-content;max-width:none}
  .phero--home h1{white-space:nowrap}
  .phero--home .phero__cta{flex-wrap:wrap}
}

/* five service cards sit on one row on wide screens */
.services{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* "Request a quote" buttons in bold */
a.btn--solid[href="#quote"],a.btn--solid[href="/quote/"]{font-weight:700}

/* phones: the photo stays at a fixed scale as the screen narrows; extra width
   is cropped off the left and extra height off the top (anchored bottom-right) */
@media (max-width:640px){
  .phero .hero__bg,.phero .hero__bg--van{height:250px;background-size:640px auto;background-position:right bottom}
}

/* locksmithing hero photo */
.hero__bg--lock{background-image:url("/images/hero-lock.jpg");background-position:right 30%}
@media (max-width:640px){ .phero .hero__bg--lock{background-position:right 30%} }

/* thin phone line above the header */
.topbar{position:relative;z-index:1;background:var(--ink);color:#fff;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.topbar__note{opacity:.75}
.topbar__tel{display:inline-flex;align-items:center;gap:7px;color:#fff;text-decoration:none;font-weight:500}
.topbar__tel:hover{text-decoration:underline}
.topbar__tel svg{width:13px;height:13px}
@media (max-width:420px){ .topbar__note{display:none} .topbar__in{justify-content:center} }

/* header "Request a quote" as a button */
.nav .nav__cta{color:var(--accent-ink);padding:10px 18px;font-size:1rem;margin-left:4px}
.nav .nav__cta:hover{color:var(--accent-ink)}

/* pricing page */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:26px}
.price{display:block;background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--ink);border-radius:4px;padding:22px 22px 20px;text-decoration:none;color:var(--ink)}
.price p{margin:0}
a.price:hover{border-color:var(--ink)}
.price--main{border-top-color:var(--accent)}
.price__label{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.price__amount{font-family:var(--f-display);font-weight:700;font-size:3rem;line-height:1.1;margin-top:8px!important}
.price__amount span{font-size:1.1rem;font-weight:600;color:var(--ink-2);margin-left:4px}
.price__amount--sm{font-size:1.6rem}
.price__note{color:var(--ink-2);margin-top:8px!important;font-size:.95rem}
.price__eg{margin-top:18px;color:var(--ink-2);max-width:62ch}
.prices--list{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media (max-width:640px){ .prices--list{grid-template-columns:1fr 1fr;gap:12px} .prices--list .price{padding:16px 14px} .prices--list .price__amount{font-size:2.3rem} .prices--list .price__amount--sm{font-size:1.25rem} }

/* ---------- homepage hero: quick-start box + "this week's list" card ---------- */
.qhero{background:color-mix(in srgb,var(--surface-2) 50%,var(--paper));border-bottom:1px solid var(--rule);padding-block:clamp(48px,7vw,92px)}
.qhero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,430px);gap:clamp(32px,5vw,72px);align-items:center}
.qhero h1{font-size:clamp(2.6rem,6.2vw,5rem);line-height:.98;letter-spacing:-.01em;margin:0;max-width:14ch}
.qhero h1 em{font-style:normal;color:var(--accent-deep)}
.qhero__lede{color:var(--ink-2);font-size:1.08rem;max-width:44ch;margin:18px 0 0}
.quickstart{margin-top:26px;max-width:480px}
.quickstart__label{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.quickstart__row{display:flex;gap:6px;background:var(--surface);border:1px solid var(--rule-strong);border-radius:5px;padding:5px}
.quickstart__row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.quickstart input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1rem;padding:10px 12px;color:var(--ink);outline:none}
.quickstart .btn{flex:none;padding:11px 18px;font-weight:700}
.qhero__or{margin:14px 0 0;color:var(--ink-2)}
.qhero__or a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent)}
.proof{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.proof li{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--rule-strong);border-radius:99px;padding:6px 12px}
.qlist{background:var(--ink);color:#edece8;border-radius:8px;padding:22px 22px 20px;box-shadow:0 30px 60px -36px rgba(20,16,28,.85)}
.qlist__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14)}
.qlist__head b{font-weight:500;color:#fff}
.qlist__head span{color:rgba(255,255,255,.55)}
.qlist ul{list-style:none;margin:0;padding:0}
.qlist .qjob{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.98rem}
.qlist .qjob.is-done .qjob__txt{color:rgba(255,255,255,.62)}
.qjob__box{flex:none;width:18px;height:18px;border-radius:3px;display:grid;place-items:center}
.qjob.is-done .qjob__box{background:var(--accent);color:var(--accent-ink)}
.qjob__box svg{width:12px;height:12px}
.qjob--yours{all:unset;box-sizing:border-box;cursor:text;width:100%;display:flex;align-items:center;gap:12px;margin-top:12px;padding:13px 12px;border:1px dashed rgba(255,255,255,.3);border-radius:4px;color:#fff;font-size:1rem}
.qjob--yours .qjob__box{border:1.5px dashed rgba(255,255,255,.55)}
.qjob--yours .qjob__txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qjob--yours:hover{border-color:rgba(255,255,255,.6)}
.caret{width:1.5px;height:1.1em;background:rgba(255,255,255,.9);margin-left:-8px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}
@media (max-width:900px){ .qhero__grid{grid-template-columns:1fr} .qlist{max-width:520px} }
@media (max-width:480px){ .quickstart__row{flex-direction:column} .quickstart .btn{width:100%} .qhero h1{max-width:none} }