/* =============================================================================
   Tom's Garage Doors — site stylesheet (the signed-off "demo 12" design).

   Lifted verbatim from demo12.html so the live pages render identically to the
   demo. The sheet is layered: a base (demo 4) followed by the demo 7 → 12
   override blocks appended in order, so later rules win. demo12.html is kept
   in the root for reference; this file is the one the site loads.

   Loaded by segments/v3/header.php. Page-level behaviour is in assets/js/site.js.
   ============================================================================= */
/* =============================================================================
   BASE = demo 4 (demo 2's layout, type and funnel in demo 1's palette: warm cream,
   dark ink, orange reserved for the primary button, green for live status.
   Ticker and final CTA stay dark as contrast anchors). DEMO 7 overrides are
   appended at the END of this stylesheet. Condensed
   display type, one yellow accent for the primary action, photos full-bleed.
   Different funnel too: Call is still primary in hours, but the online path
   starts with a postcode in the hero (Pimlico-style two-field funnel) rather
   than a "Book online" text link.
   State: <body data-state="open|closed">.
   ============================================================================= */
:root {
  --bg: #f7f5f0;
  --sur: #ffffff;
  --sur2: #efebe3;
  --line: #e6e1d8;
  --line2: #d8d2c7;
  --ink: #14202b;
  --muted: #5b6770;
  --acc: #ef7a1b;
  --acc-d: #d6650b;
  --acc-ink: #ffffff;
  --acc-text: #d6650b;
  --green: #15a24a;
  --wa: #25d366;
  --pad: 18px;
  --max: 1100px;
  --r: 16px;
  --display: "Barlow Condensed", "Arial Narrow", Impact, -apple-system, sans-serif;
  --body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; font-family: var(--body); font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--bg); padding-bottom: 92px; }
b, strong { font-weight: 700; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { flex: 0 0 auto; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
body[data-state="open"]   .only-closed { display: none !important; }
body[data-state="closed"] .only-open   { display: none !important; }

/* Header — static on mobile */
.hdr { background: var(--bg); border-bottom: 1px solid var(--line); position: relative; z-index: 60; }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 66px; }
.logo-css { display: inline-flex; flex-direction: column; border-radius: 6px; overflow: hidden; font-family: "Arial Black", "Arial Bold", Arial, sans-serif; font-weight: 900; text-align: center; letter-spacing: 0.05em; text-decoration: none; flex: 0 0 auto; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.logo-top, .logo-bottom { background: #2c3b40; color: #fff; padding: 0.22rem 0.8rem; font-size: 0.5rem; line-height: 1; }
.logo-middle { background: repeating-linear-gradient(180deg, #e8721a 0 10%, #f38020 10% 20%); color: #fff; padding: 0.3rem 0.8rem; font-size: 1.2rem; line-height: 1; letter-spacing: 0.15em; }
.hdr-phone { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-decoration: none; line-height: 1; text-align: right; min-width: 0; margin-left: auto; flex: 1 1 auto; }
.hdr-phone b { font-family: var(--display); font-size: 1.32rem; font-weight: 800; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; }
.hdr-phone small { display: block; font-size: 0.68rem; font-weight: 700; color: var(--green); margin-top: 5px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.hdr-phone small .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
.hdr-phone--closed b { color: var(--muted); }
.hdr-phone--closed small { color: var(--acc-text); }
.hdr-nav { display: none; gap: 18px; font-size: 0.92rem; font-weight: 600; }
.hdr-nav a { text-decoration: none; color: var(--muted); }
.hdr-nav a:hover { color: var(--ink); }
.hdr-burger {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 0 0 6px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  flex: 0 0 40px;
}
.hdr-burger span,
.hdr-burger span::before,
.hdr-burger span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hdr-burger span::before,
.hdr-burger span::after {
  content: "";
  position: absolute;
  left: 0;
}
.hdr-burger span::before { top: -6px; }
.hdr-burger span::after { top: 6px; }
.hdr.is-open .hdr-burger span { background: transparent; }
.hdr.is-open .hdr-burger span::before { top: 0; transform: rotate(45deg); }
.hdr.is-open .hdr-burger span::after { top: 0; transform: rotate(-45deg); }
.hdr-drawer {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #1a2028;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  padding: 8px var(--pad) 16px;
}
.hdr.is-open .hdr-drawer { display: block; }
.hdr-drawer a {
  display: block;
  padding: 13px 4px;
  color: #e8eaed;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hdr-drawer a:last-child { border-bottom: 0; }
.hdr-drawer a:active { color: #f28b2a; }
.hdr-drawer__label {
  display: block;
  margin-top: 14px;
  padding: 0 4px 6px;
  color: #f28b2a;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hdr-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(10,12,16,0.45);
}
body.nav-open .hdr-scrim { display: block; }
body.nav-open { overflow: hidden; }
@media (max-width: 399px) {
  .logo-top, .logo-bottom { padding: 0.16rem 0.45rem; font-size: 0.38rem; }
  .logo-middle { padding: 0.18rem 0.45rem; font-size: 0.86rem; letter-spacing: 0.08em; }
  .hdr-phone b { font-size: 1.2rem; letter-spacing: 0; }
  .hdr-phone small { font-size: 0.62rem; margin-top: 4px; letter-spacing: 0.02em; }
  .hdr-burger { width: 38px; height: 38px; flex-basis: 38px; margin-left: 4px; }
}
@media (min-width: 600px) {
  .hdr-phone b { font-size: 1.45rem; }
  .hdr-phone small { font-size: 0.72rem; }
}
@media (min-width: 992px) {
  .hdr-phone b { font-size: 1.55rem; }
}

/* Hero — full-bleed photo */
.hero { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 0%; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,245,240,0.05) 0%, rgba(247,245,240,0.45) 18%, rgba(247,245,240,0.93) 32%, var(--bg) 46%); }
.hero .wrap { position: relative; z-index: 1; padding-top: 150px; padding-bottom: 8px; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,0.9); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 10px; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(20,32,43,0.12); }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,0.3); }
.h1 { font-family: var(--display); font-size: clamp(2.9rem, 13vw, 4.6rem); line-height: 0.92; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; margin-top: 14px; color: var(--ink); }
.h1 .y { background: linear-gradient(transparent 58%, #fbd6b4 58%, #fbd6b4 92%, transparent 92%); padding: 0 0.08em; margin: 0 -0.08em; }
.lead { font-size: 1rem; color: var(--muted); margin-top: 10px; max-width: 34rem; }
.lead b { color: var(--ink); }

/* Dispatch panel */
.panel { margin-top: 16px; background: var(--sur); border: 1px solid var(--line2); border-radius: var(--r); padding: 14px; box-shadow: 0 24px 50px rgba(20,32,43,0.14); }
.status { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.8rem; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.status b { color: var(--ink); font-weight: 700; }
.status .live { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
.status-copy b::before { content: "· "; }
.status-visit b::before { content: ": "; }
.status .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: blink 1.6s ease-in-out infinite; }
.status .live--off { color: var(--acc-text); }
.status .live--off .dot { background: var(--acc); animation: none; }
@keyframes blink { 50% { opacity: 0.35; } }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; padding: 0 16px; border-radius: 12px; border: 0; text-decoration: none; font-weight: 800; font-size: 1.2rem; line-height: 1.1; cursor: pointer; position: relative; font-family: var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
.btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-acc { background: linear-gradient(180deg, var(--acc) 0%, var(--acc-d) 100%); color: #fff; box-shadow: 0 10px 24px rgba(239,122,27,0.35); }
.btn-acc:active { filter: brightness(0.96); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost small { display: block; font-family: var(--body); font-size: 0.66rem; letter-spacing: 0.02em; text-transform: none; color: var(--acc-text); font-weight: 700; margin-top: 3px; }
.btn .two { display: flex; flex-direction: column; align-items: center; }
.or { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pcf label { display: block; font-size: 0.95rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.pcf label span { color: var(--muted); font-weight: 400; }
.pc-row { display: flex; gap: 8px; }
.pc-row input { flex: 1 1 auto; height: 54px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--bg); color: var(--ink); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--body); }
.pc-row input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; color: #98a2ab; }
.pc-row input:focus { outline: none; background: #fff; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(239,122,27,0.18); }
.pc-row button { flex: 0 0 auto; height: 54px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; font-weight: 800; font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; }
.pc-res { margin-top: 12px; padding: 12px; border-radius: 12px; background: #eaf7ee; border: 1px solid #bfe6cd; animation: reveal 0.3s ease-out both; }
.pc-res[hidden] { display: none; }
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pc-res > b { display: block; font-size: 0.95rem; color: var(--ink); }
.pc-res > b span { color: var(--green); }
.pc-res > small { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 4px; border-radius: 10px; background: #fff; border: 1.5px solid var(--line2); text-decoration: none; text-align: center; line-height: 1.1; min-height: 54px; }
.day b { font-family: var(--display); font-size: 1rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); }
.day span { font-size: 0.72rem; color: var(--muted); }
.day.is-first { border-color: var(--acc); background: #fff7ef; }
.day em { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 0.6rem; font-weight: 800; background: var(--acc); color: #fff; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.pc-foot { margin-top: 10px; font-size: 0.82rem; color: var(--muted); }
.pc-foot a { color: var(--ink); font-weight: 700; }
.fee { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--muted); line-height: 1.35; }
.fee svg { color: var(--green); margin-top: 2px; }
.fee b { color: var(--ink); }
.wa-link { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.84rem; color: var(--muted); text-decoration: none; min-height: 32px; }
.wa-link svg { color: var(--wa); }
.wa-link b { color: var(--ink); }
.tp-row { margin-top: 14px; display: flex; justify-content: center; }
.tpbox { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 300px; border: 1.5px dashed rgba(20,32,43,0.25); border-radius: 6px; background: rgba(20,32,43,0.03); color: var(--muted); font-size: 11px; font-weight: 600; padding: 0 8px; }
.tpbox--micro { height: 24px; }
.tpbox--mini { height: 150px; flex-direction: column; justify-content: center; margin: 0 auto; }
.tpbox .sq { width: 14px; height: 14px; border-radius: 3px; background: #00b67a; flex: 0 0 auto; }
.tpbox .bar { height: 7px; border-radius: 4px; background: rgba(20,32,43,0.12); }
.tpbox--mini .sq { width: 28px; height: 28px; border-radius: 6px; margin-bottom: 8px; }
.tpbox--mini .bar { width: 60%; margin-bottom: 6px; }
.tpbox--mini .bar + .bar { width: 40%; }
.tpbox--mini .lbl { margin-top: 10px; }

/* Ticker */
.ticker { margin-top: 26px; background: var(--ink); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker ul { display: flex; gap: 0; padding: 12px 0; }
.ticker li { display: inline-flex; align-items: center; gap: 10px; padding: 0 18px; font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.ticker li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
@keyframes tick { to { transform: translateX(-50%); } }

/* Sections */
.sec { padding: 34px 0 0; }
.sec-head { margin-bottom: 14px; }
.eyebrow { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc-text); margin-bottom: 6px; }
.h2 { font-family: var(--display); font-size: clamp(2rem, 8.5vw, 2.8rem); line-height: 0.95; font-weight: 800; text-transform: uppercase; color: var(--ink); }
.sub { font-size: 0.95rem; color: var(--muted); margin-top: 8px; }

/* Facts 2x2 — big figure, short label */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.facts li { background: var(--sur); border: 1px solid var(--line); border-top: 4px solid #fbd6b4; border-radius: var(--r); padding: 12px 14px 12px; box-shadow: 0 6px 20px rgba(20,32,43,0.05); }
.facts strong { display: block; font-family: var(--display); font-size: 2.3rem; line-height: 0.95; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.facts strong small { font-size: 1.1rem; margin-left: 2px; }
.facts b { display: block; font-size: 0.92rem; font-weight: 700; color: var(--ink); margin-top: 8px; line-height: 1.2; }
.facts span { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 3px; line-height: 1.3; }

/* Fault swipe strip */
.strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px var(--pad) 10px; margin: 0 calc(-1 * var(--pad)); }
.strip::-webkit-scrollbar { display: none; }
.fault { position: relative; flex: 0 0 72%; max-width: 300px; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; scroll-snap-align: start; text-decoration: none; color: #fff; background: var(--sur); }
.fault img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fault::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%); }
.fault > span { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.fault > span > span { display: block; min-width: 0; }
.fault b { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.fault small { display: block; font-size: 0.74rem; color: #cfd8e3; margin-top: 4px; font-family: var(--body); text-transform: none; letter-spacing: 0; }
.fault i { width: 34px; height: 34px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; flex: 0 0 34px; }
.strip-hint { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.strip-foot { margin-top: 8px; font-size: 0.9rem; color: var(--muted); }
.strip-foot a { color: var(--ink); font-weight: 700; }

/* Timeline */
.tl { position: relative; padding-left: 34px; }
.tl::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: var(--line2); }
.tl li { position: relative; padding: 0 0 20px; }
.tl li::before { content: ""; position: absolute; left: -30px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--bg); }
.tl b { display: block; font-family: var(--display); font-size: 1.35rem; line-height: 1; font-weight: 800; text-transform: uppercase; color: var(--ink); }
.tl p { font-size: 0.9rem; color: var(--muted); margin-top: 5px; }
.tl p em { font-style: normal; color: var(--ink); font-weight: 600; }

/* Before/after toggle */
.ba { margin-top: 10px; background: var(--sur); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; box-shadow: 0 10px 30px rgba(20,32,43,0.08); }
.ba-frame { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s ease; }
.ba-frame img.after { opacity: 0; }
.ba.is-after .ba-frame img.after { opacity: 1; }
.ba-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 10px; background: var(--sur2); border-radius: 10px; padding: 4px; }
.ba-seg button { min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-family: var(--display); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.ba-seg button.is-on { background: var(--ink); color: #fff; }
.ba-cap { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }

/* Receipt */
.receipt { background: #fff; color: #111; border-radius: var(--r); padding: 18px 16px; position: relative; font-family: var(--body); border: 1px solid var(--line2); box-shadow: 0 10px 30px rgba(20,32,43,0.08); }

.receipt h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px dashed #ddd; padding-bottom: 10px; }
.receipt ul { margin-top: 6px; }
.receipt li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #e5e5e5; font-size: 0.92rem; }
.receipt li > span:first-child { color: #333; }
.receipt li > span:first-child small { display: block; color: #777; font-size: 0.78rem; margin-top: 1px; }
.receipt li > b { text-align: right; white-space: nowrap; flex: 0 0 auto; }
.receipt .strike { text-decoration: line-through; color: #999; font-weight: 400; margin-right: 6px; }
.receipt .ok { color: #15803d; }
.receipt .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; font-family: var(--display); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.receipt .total span:last-child { color: #15803d; }
.receipt .slot { margin-top: 12px; border: 1.5px dashed #ccc; border-radius: 8px; padding: 8px 10px; font-size: 0.78rem; color: #666; }
.split { margin-top: 28px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.split-head b { display: block; font-family: var(--display); font-size: 1.6rem; line-height: 1; font-weight: 800; text-transform: uppercase; color: var(--ink); }
.split-head p { font-size: 0.88rem; color: var(--muted); margin-top: 6px; }
.plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plan div { background: var(--sur); border: 1px solid var(--line2); border-radius: 12px; padding: 10px 6px; text-align: center; }
.plan div.today { border-color: var(--acc); background: #fff7ef; }
.plan strong { display: block; font-family: var(--display); font-size: 1.6rem; line-height: 1; font-weight: 800; color: var(--ink); }
.plan span { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 3px; }
.cards-img { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.cards-img img { height: 26px; width: auto; max-width: 100%; object-fit: contain; object-position: left; }
.smallprint { font-size: 0.74rem; color: var(--muted); }

/* Trustpilot */
.tp-sec { background: var(--sur); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 16px; text-align: center; }
.tp-sec .sub { margin-bottom: 14px; }
.tp-sec a.more { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--ink); font-size: 0.92rem; }

/* WhatsApp */
.wa-card { background: linear-gradient(160deg, #e4f5ea 0%, var(--sur) 60%); border: 1px solid #bfe6cd; border-radius: var(--r); padding: 18px 16px; box-shadow: 0 10px 30px rgba(20,32,43,0.06); }
.wa-card h3 { font-family: var(--display); font-size: 1.8rem; line-height: 0.95; font-weight: 800; text-transform: uppercase; color: var(--ink); }
.wa-card h3 .g { color: var(--green); }
.wa-card p { font-size: 0.9rem; color: var(--muted); margin-top: 8px; }
.wa-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.wa-steps li { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; font-size: 0.76rem; line-height: 1.25; color: var(--ink); text-align: center; }
.wa-steps b { display: block; font-family: var(--display); font-size: 1.3rem; color: var(--green); margin-bottom: 2px; }
.btn-wa { background: var(--wa); color: #06260f; margin-top: 14px; box-shadow: 0 12px 30px rgba(37,211,102,0.2); }
.wa-note { font-size: 0.78rem; color: var(--muted); margin-top: 8px; text-align: center; }

/* FAQ */
.faq details { background: var(--sur); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.faq summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; font-weight: 700; font-size: 0.97rem; position: relative; line-height: 1.3; min-height: 48px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--sur2); color: var(--ink); display: grid; place-items: center; font-weight: 900; }
.faq details[open] summary::after { content: "–"; }
.faq .ans { padding: 0 16px 14px; font-size: 0.9rem; color: var(--muted); }
.faq .ans a { color: var(--ink); font-weight: 700; }

/* Final */
.final { position: relative; margin-top: 34px; border-radius: var(--r); overflow: hidden; background: var(--ink); color: #fff; }
.final .h2 { color: #fff; }
.final .sub { color: #c7d0d8; }
.final .eyebrow { color: #ffb36b; }
.final .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.final .btn-ghost small { color: #ffd2ad; }
.final .fee { color: #c7d0d8; border-top-color: rgba(255,255,255,0.2); }
.final .fee b { color: #fff; }
.final img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0.35; }
.final .in { position: relative; z-index: 1; padding: 26px 18px; background: linear-gradient(180deg, rgba(20,32,43,0.2), rgba(20,32,43,0.9) 55%); }
.final .btn-acc { margin-top: 16px; }
.final .btn-ghost { margin-top: 10px; }

/* Footer */
.ftr { padding: 28px 0 10px; color: var(--muted); font-size: 0.82rem; }
.ftr .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ftr .links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.ftr .links a { color: var(--ink); font-weight: 600; text-decoration: none; }
.ftr p { margin-top: 12px; }

/* Sticky bar */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line2); box-shadow: 0 -8px 30px rgba(20,32,43,0.08); padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform 0.25s ease; }
.sticky.is-shown { transform: none; }
.sticky .row { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; max-width: var(--max); margin: 0 auto; }
.sticky .btn { min-height: 52px; font-size: 1.05rem; }

/* Tablet */
@media (min-width: 600px) {
  :root { --pad: 24px; }
  .hero .wrap { padding-top: 200px; }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fault { flex-basis: 44%; }
  .split { grid-template-columns: 1fr 1fr; align-items: center; }
}
@media (min-width: 992px) {
  .hdr-burger,
  .hdr-drawer,
  .hdr-scrim { display: none !important; }
  .hdr-nav { display: flex; }
  .hdr.is-open .hdr-drawer { display: none; }
  body.nav-open { overflow: visible; }
}
/* Desktop */
@media (min-width: 992px) {
  body { padding-bottom: 0; }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: end; padding-top: 120px; padding-bottom: 48px; min-height: 640px; }
  .hero-bg img { object-position: 50% 50%; }
  .hero-bg::after { background: linear-gradient(90deg, rgba(247,245,240,0.97) 0%, rgba(247,245,240,0.85) 42%, rgba(247,245,240,0.15) 100%), linear-gradient(180deg, rgba(247,245,240,0) 55%, var(--bg) 100%); }
  .h1 { font-size: clamp(4rem, 6.5vw, 6rem); }
  .panel { margin-top: 0; max-width: 480px; justify-self: end; }
  .sec { padding-top: 52px; }
  .strip { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .strip-hint { display: none; }
  .fault { flex: 0 0 calc(25% - 8px); max-width: none; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .final .in { padding: 48px; display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: center; }
  .final .btn-acc { margin-top: 0; }
  .sticky { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track,
  .brands__track { animation: none !important; }
  .status .live .dot { animation: none; }
  .sticky { transition: none; }
}

/* =============================================================================
   DEMO 7 — "Body Shop". Same layout and copy in The Body Shop's palette:
     deep green  #0f4c3a  hero, primary button, final card
     cream       #f7f4ec  page, with warm white cards
     yellow      #f7e26b  tags ("Few left"), the highlighted word, fact rules
     no third promotional colour — green + yellow, with WhatsApp as the exception
   Type: headings in Fraunces (a soft serif, sentence case, like "Best Autumnal
   Skincare Products"); buttons, tags and labels stay condensed caps like their
   "ADD TO BAG" / "BODY CARE & HAIRCARE".
   ============================================================================= */
:root { --bg: #f7f4ec; --sur: #fffdf8; --sur2: #ece7db; --line: #e4ded1; --line2: #d3cbbb; --ink: #163b30; --muted: #5f6d66; --acc: #0f4c3a; --acc-d: #0a3a2c; --acc-ink: #ffffff; --acc-text: #0f4c3a; --green: #1f9d5a; --tbs: #0f4c3a; --tbs-d: #0a3a2c; --yellow: #f7e26b; --serif: "Fraunces", Georgia, "Times New Roman", serif; }

/* Serif headings, sentence case */
.h1 { font-family: var(--serif); font-weight: 500; text-transform: none; letter-spacing: -0.015em; line-height: 1.02; font-size: clamp(2.5rem, 10.5vw, 3.9rem); }
.h1 .y { background: none; padding: 0; margin: 0; font-style: italic; color: var(--yellow); }
.h2 { font-family: var(--serif); font-weight: 500; text-transform: none; letter-spacing: -0.01em; line-height: 1.05; font-size: clamp(1.85rem, 7.2vw, 2.5rem); }
.split-head b, .wa-card h3 { font-family: var(--serif); font-weight: 500; text-transform: none; letter-spacing: -0.01em; line-height: 1.08; font-size: 1.7rem; }
.eyebrow { color: var(--tbs); }

/* Green primary, terracotta/yellow accents */
.btn-acc { background: var(--tbs); color: #fff; box-shadow: 0 10px 24px rgba(15,76,58,0.28); }
.btn-acc:active { background: var(--tbs-d); filter: none; }
.btn-ghost { color: var(--tbs); border-color: var(--tbs); }
.btn-ghost small { color: var(--tbs); }
.status .live--off { color: var(--tbs); }
.status .live--off .dot { background: var(--tbs); }
.fault i { background: var(--tbs); color: #fff; }
.facts li { border-top-color: var(--yellow); }
.facts strong { color: var(--tbs); }
.tl li::before { background: var(--tbs); }
.ba-seg button.is-on { background: var(--tbs); }
.receipt .ok, .receipt .total span:last-child { color: var(--tbs); }
.faq summary::after { background: var(--tbs); color: #fff; }
.pc-row button { background: var(--tbs); border-color: var(--tbs); color: #fff; }
.pc-row input:focus { border-color: var(--tbs); box-shadow: 0 0 0 3px rgba(15,76,58,0.15); }
.pc-res { background: #eef5ee; border-color: #c5dcc9; }
.day.is-first { border-color: var(--tbs); background: #eaf2ea; }
.day em { background: var(--yellow); color: #163b30; }
.wa-card { background: linear-gradient(160deg, #e6f1e6 0%, var(--sur) 60%); border-color: #cfe0cf; }
.sticky { background: rgba(247,244,236,0.95); }

/* Final card — deep green, reversed button */
.final { background: var(--tbs); }
.final .in { background: linear-gradient(180deg, rgba(15,76,58,0.25), rgba(15,76,58,0.92) 55%); }
.final .eyebrow { color: var(--yellow); }
.final .sub, .final .fee { color: #d8e6dd; }
.final .btn-acc { background: #fff; color: var(--tbs); box-shadow: 0 10px 24px rgba(0,0,0,0.2); }
.final .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.6); }
.final .btn-ghost small { color: var(--yellow); }

/* Dark top: deep green header + hero, white dispatch panel */
.hdr, .hero { --bg: var(--tbs); --sur: #145a46; --sur2: #1a6a52; --line: rgba(255,255,255,0.12); --line2: rgba(255,255,255,0.22); --ink: #fbf8f0; --muted: #cfe0d7; }
.hdr { background: var(--bg); }
.hdr .logo-css { box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.14); }
/* Logo recoloured to the palette: deep green bars, cream striped band, green TOMS */
.logo-top, .logo-bottom { background: #0a3a2c; color: #fbf8f0; }
.logo-middle { background: repeating-linear-gradient(180deg, #fbf8f0 0 10%, #eee8d8 10% 20%); color: var(--tbs); }
.ftr .logo-css { box-shadow: 0 0 0 1px rgba(15,76,58,0.22); }
.hdr-nav a { color: var(--muted); }
.hdr .hdr-phone small { color: #9ff0bd; }
.hdr .hdr-phone small .dot { background: #9ff0bd; box-shadow: 0 0 0 3px rgba(159,240,189,0.25); }
.hdr .hdr-phone--closed small { color: var(--yellow); }
.hero { background: var(--bg); }
.hero-bg::after { background: linear-gradient(180deg, rgba(15,76,58,0.45) 0%, rgba(15,76,58,0.30) 30%, rgba(15,76,58,0.92) 62%, var(--bg) 100%); }
.hero .wrap { padding-bottom: 26px; }
.kicker { color: #163b30; box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
.lead { color: #d7e7de; }
.lead b { color: #fff; }
.panel { --bg: #f7f4ec; --sur: #fffdf8; --sur2: #ece7db; --line: #e4ded1; --line2: #d3cbbb; --ink: #163b30; --muted: #5f6d66; box-shadow: 0 30px 60px rgba(0,0,0,0.35); }
@media (min-width: 992px) {
  .hero .wrap { padding-bottom: 48px; }
  .hero-bg::after { background: linear-gradient(90deg, rgba(15,76,58,0.95) 0%, rgba(15,76,58,0.75) 45%, rgba(15,76,58,0.25) 100%), linear-gradient(180deg, rgba(15,76,58,0) 60%, var(--bg) 100%); }
}

/* Conversion-review changes: truthful availability, fewer exits and less repetition. */
body[data-availability="today"] .only-tomorrow { display: none !important; }
body[data-availability="tomorrow"] .only-today { display: none !important; }
body[data-state="closed"] .availability-control { display: none; }
.coverage { margin-top: 9px; color: #fff; font-size: 0.86rem; font-weight: 600; }
.coverage svg { vertical-align: -2px; margin-right: 5px; color: var(--yellow); }

/* All faults visible on mobile; each tile calls instead of leaving the PPC page. */
.strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  margin: 0;
  padding: 0;
}
.fault { width: 100%; max-width: none; aspect-ratio: 4 / 3; }
.strip-hint { display: none; }
.fault i {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
  background: #f28b2a;
  color: #222936;
  box-shadow: 0 4px 12px rgba(0,0,0,0.28);
}
.fault i svg { display: block; width: 17px; height: 17px; }

/* Tighter before/after treatment on phones. */
.ba-frame { aspect-ratio: 16 / 10; }

.brands {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sur);
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}
.brands b { color: var(--ink); }

.example-price {
  margin: 4px 0 14px;
  padding: 16px;
  border-radius: 12px;
  background: #eaf2ea;
  border: 1px solid #c5dcc9;
}
.example-price > span { display: block; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.example-price strong { display: block; margin-top: 3px; color: var(--tbs); font-family: var(--serif); font-size: 2.25rem; line-height: 1; font-weight: 600; }
.example-price strong small { font-family: var(--body); font-size: 0.78rem; font-weight: 700; }
.example-price p { margin-top: 8px; color: var(--muted); font-size: 0.82rem; }
.receipt .price-note { white-space: normal; max-width: 12rem; }

@media (min-width: 600px) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .ba-frame { aspect-ratio: 4 / 3; }
}

/* =============================================================================
   DEMO 9 — charcoal + orange.
   Demo 7's conversion-led content in the reference's construction palette:
   graphite structure, burnt-orange actions, warm-white content and cool grey.
   Angular details give it an engineered feel without making the page noisy.
   ============================================================================= */
:root {
  --bg: #f4f3f0;
  --sur: #ffffff;
  --sur2: #e8e8e6;
  --line: #d9dadd;
  --line2: #c5c8cc;
  --ink: #222936;
  --muted: #68707b;
  --acc: #f28b2a;
  --acc-d: #d97116;
  --acc-ink: #ffffff;
  --acc-text: #c85f10;
  --green: #f28b2a;
  --tbs: #f28b2a;
  --tbs-d: #d97116;
  --yellow: #f28b2a;
}

body { background: var(--bg); color: var(--ink); }

/* Industrial type treatment inspired by the reference, with the same wording. */
.h1, .h2 {
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.94;
}
.h1 { font-size: clamp(2.8rem, 12vw, 4.8rem); }
.h1 .y { color: var(--orange, #f28b2a); font-style: normal; }
.eyebrow { color: #c85f10; }

/* Recolour the badge without changing its recognisable construction. */
.logo-top, .logo-bottom { background: #222936; color: #fff; }
.logo-middle {
  background: repeating-linear-gradient(180deg, #eb7b1e 0 10%, #f28b2a 10% 20%);
  color: #fff;
}
.hdr .logo-css { box-shadow: 0 2px 10px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.10); }
.ftr .logo-css { box-shadow: 0 0 0 1px rgba(34,41,54,0.20); }

/* Graphite header and angular photographic hero. */
.hdr, .hero {
  --bg: #222936;
  --sur: #303744;
  --sur2: #3a424f;
  --line: rgba(255,255,255,0.12);
  --line2: rgba(255,255,255,0.22);
  --ink: #ffffff;
  --muted: #c9cdd2;
  background: #222936;
}
.hdr { border-bottom-color: rgba(255,255,255,0.10); }
.hdr .hdr-phone b { color: #fff; }
.hdr .hdr-phone small,
.hdr .hdr-phone--closed small { color: #f6a65c; }
.hdr .hdr-phone small .dot {
  background: #f28b2a;
  box-shadow: 0 0 0 3px rgba(242,139,42,0.22);
}
.hdr .hdr-nav a { color: #c9cdd2; }
.hdr .hdr-nav a:hover { color: #fff; }
.hdr .hdr-burger {
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}
.hero { position: relative; }
.hero-bg::after {
  background: linear-gradient(180deg, rgba(34,41,54,0.48) 0%, rgba(34,41,54,0.58) 34%, rgba(34,41,54,0.96) 72%, #222936 100%);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: linear-gradient(90deg, #f28b2a 0 18%, #fff 18% 23%, #222936 23% 100%);
  clip-path: polygon(0 70%, 16% 70%, 18% 0, 21% 70%, 24% 0, 27% 70%, 100% 70%, 100% 100%, 0 100%);
  pointer-events: none;
}
.kicker {
  color: #fff;
  background: rgba(34,41,54,0.78);
  border-color: rgba(255,255,255,0.24);
  box-shadow: none;
}
.kicker .dot,
.status .live .dot,
.status .live--off .dot { background: #f28b2a; box-shadow: 0 0 0 3px rgba(242,139,42,0.20); }
.lead { color: #d9dce0; }
.lead b { color: #fff; }
.coverage { color: #eef0f2; }
.coverage svg { color: #f28b2a; }

/* White dispatch card and orange primary action. */
.panel {
  --bg: #f4f3f0;
  --sur: #ffffff;
  --sur2: #e8e8e6;
  --line: #d9dadd;
  --line2: #c5c8cc;
  --ink: #222936;
  --muted: #68707b;
  border-radius: 5px;
  box-shadow: 0 28px 60px rgba(8,11,16,0.40);
}
.status .live, .status .live--off { color: #c85f10; }
.btn { border-radius: 3px; }
.btn-acc {
  background: #f28b2a;
  color: #222936;
  box-shadow: 0 10px 24px rgba(242,139,42,0.25);
}
.btn-acc:active { background: #d97116; }
.btn-ghost { color: #222936; border-color: #222936; }
.btn-ghost small { color: #b9520b; }
.pc-row input { background: #f3f3f1; }
.pc-row input:focus { border-color: #f28b2a; box-shadow: 0 0 0 3px rgba(242,139,42,0.16); }
.pc-row button { background: #222936; border-color: #222936; color: #fff; }
.pc-res { background: #fff2e6; border-color: #f0c49d; }
.pc-res > b span { color: #b9520b; }
.day.is-first { border-color: #f28b2a; background: #fff2e6; }
.day em { background: #f28b2a; color: #222936; }
.fee svg { color: #f28b2a; }

/* Crisp cards and small angular accents. */
.facts li {
  position: relative;
  border: 1px solid var(--line);
  border-top: 4px solid #f28b2a;
  border-radius: 4px;
  box-shadow: 0 7px 20px rgba(34,41,54,0.06);
}
.facts strong { color: #222936; }
.brands { border-radius: 4px; }
.fault { border-radius: 3px; }
.fault::after { background: linear-gradient(180deg, rgba(34,41,54,0.02) 38%, rgba(34,41,54,0.94) 100%); }
.fault i { background: #f28b2a; color: #222936; }
.tl li::before { background: #f28b2a; }
.ba, .ba-frame, .ba-seg { border-radius: 4px; }
.ba-seg button.is-on { background: #222936; }

.receipt { border-radius: 4px; border-top: 5px solid #f28b2a; }
.example-price {
  background: #fff2e6;
  border-color: #f0c49d;
  border-radius: 3px;
}
.example-price strong,
.receipt .ok,
.receipt .total span:last-child { color: #b9520b; }
.tp-sec, .faq details { border-radius: 4px; }
.faq summary::after { background: #f28b2a; color: #222936; }

/* WhatsApp keeps its recognisable brand colour; everything else stays two-colour. */
.wa-card {
  background: #e9eaeb;
  border-color: #d2d4d7;
  border-radius: 4px;
}
.wa-card h3 { color: #222936; }
.wa-card h3 .g { color: #4f5863; }
.wa-steps b { color: #c85f10; }

.final { background: #222936; border-radius: 4px; }
.final .in { background: linear-gradient(90deg, rgba(34,41,54,0.97), rgba(34,41,54,0.80)); }
.final .eyebrow { color: #f28b2a; }
.final .btn-acc { background: #f28b2a; color: #222936; box-shadow: 0 10px 24px rgba(0,0,0,0.20); }
.final .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.64); }
.final .fee svg { color: #f28b2a; }
.sticky { background: rgba(244,243,240,0.96); border-color: #d0d2d5; }
.sticky .btn-acc { color: #222936; }
.ftr .links a { color: #222936; }

@media (min-width: 992px) {
  .hero-bg::after {
    background: linear-gradient(112deg, rgba(34,41,54,0.98) 0%, rgba(34,41,54,0.96) 43%, rgba(34,41,54,0.76) 55%, rgba(34,41,54,0.12) 76%, rgba(34,41,54,0.06) 100%);
  }
  .hero::before { height: 18px; }
}

/* =============================================================================
   DEMO 10 — softened charcoal.
   Keeps demo 9's structure and energy, but removes the "three loud things":
   sentence-case type, neutral status/proof details, and a brighter photograph.
   Orange is reserved for primary actions and the single highlighted word.
   ============================================================================= */
:root {
  --tbs: #222936;
  --tbs-d: #171c25;
  --yellow: #f28b2a;
  --green: #68707b;
}

/* Sentence case removes the shout while retaining a confident weight. */
.h1 {
  font-family: var(--body);
  font-size: clamp(2.65rem, 10.8vw, 4.7rem);
  line-height: 0.98;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.035em;
}
.h1 .y {
  font-family: var(--serif);
  color: #f28b2a;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
}
.h2 {
  font-family: var(--body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.eyebrow { color: #4d5560; }
.fault b {
  font-family: var(--body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
}
.receipt h3 {
  font-family: var(--body);
  font-size: 1.18rem;
  text-transform: none;
  letter-spacing: -0.025em;
}

/* Quiet neutral badge: orange no longer competes in the header. */
.logo-top, .logo-bottom { background: #222936; color: #f5f5f3; }
.logo-middle {
  background: repeating-linear-gradient(180deg, #f2f2ef 0 11%, #dddfe1 11% 22%);
  color: #222936;
}

/* Let the photograph breathe; retain enough charcoal behind white text. */
.hero-bg img { filter: brightness(1.08) saturate(0.88); }
.hero-bg::after {
  background: linear-gradient(180deg, rgba(34,41,54,0.16) 0%, rgba(34,41,54,0.28) 32%, rgba(34,41,54,0.72) 68%, rgba(34,41,54,0.90) 100%);
}
.hero::before {
  background: linear-gradient(90deg, #c8cbd0 0 18%, #fff 18% 23%, #222936 23% 100%);
}
.kicker .dot {
  background: #e4e5e7;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}
.coverage svg { color: #e4e5e7; }

/* Status is information, not another call to action. */
.hdr .hdr-phone small,
.hdr .hdr-phone--closed small { color: #e4e5e7; }
.hdr .hdr-phone small .dot {
  background: #e4e5e7;
  box-shadow: 0 0 0 3px rgba(228,229,231,0.15);
}
.status .live,
.status .live--off { color: #4d5560; }
.status .live .dot,
.status .live--off .dot {
  background: #68707b;
  box-shadow: none;
}

/* Orange stays on primary call/book actions and the highlighted hero word. */
.btn-acc,
.final .btn-acc,
.sticky .btn-acc {
  background: #f28b2a;
  color: #222936;
}
.btn-acc:active,
.final .btn-acc:active,
.sticky .btn-acc:active { background: #d97116; }
.btn-ghost small { color: #68707b; }
.final .btn-ghost small { color: #d9dce0; }

/* All supporting UI becomes charcoal or neutral grey. */
.pc-row input:focus { border-color: #68707b; box-shadow: 0 0 0 3px rgba(104,112,123,0.15); }
.pc-res { background: #f1f1ef; border-color: #d1d3d6; }
.pc-res > b span { color: #222936; }
.day.is-first { border-color: #68707b; background: #f1f1ef; }
.day em { background: #222936; color: #fff; }
.fee svg { color: #4d5560; }
.facts li { border-top-color: #c9ccd0; }
.facts strong { color: #222936; }
.fault i { background: #f5f5f3; color: #222936; }
.tl li::before { background: #4d5560; }
.receipt { border-top-color: #c9ccd0; }
.example-price { background: #f1f1ef; border-color: #d1d3d6; }
.example-price strong,
.receipt .ok,
.receipt .total span:last-child { color: #222936; }
.faq summary::after { background: #222936; color: #fff; }
.wa-steps b { color: #4d5560; }
.final .eyebrow { color: #d9dce0; }
.final .fee svg { color: #d9dce0; }

@media (min-width: 992px) {
  .hero-bg::after {
    background: linear-gradient(112deg, rgba(34,41,54,0.90) 0%, rgba(34,41,54,0.86) 42%, rgba(34,41,54,0.56) 55%, rgba(34,41,54,0.08) 76%, rgba(34,41,54,0.02) 100%);
  }
}

/* =============================================================================
   DEMO 11 — warm charcoal.
   Demo 10 with warmth rather than more decorative colour: cream body, a more
   open photograph, orange restored only to the brand/actions, and green used
   solely as a semantic "live" signal.
   ============================================================================= */
:root {
  --bg: #f7f2e8;
  --sur: #fffdf8;
  --sur2: #eee8de;
  --line: #e2dbd1;
  --line2: #cec5b9;
  --muted: #6d675f;
}
html, body { background: #f7f2e8; }

/* Restore brand orange to the badge; structure around it stays charcoal. */
.logo-top, .logo-bottom { background: #222936; color: #fff; }
.logo-middle {
  background: repeating-linear-gradient(180deg, #eb7b1e 0 10%, #f28b2a 10% 20%);
  color: #fff;
}

/* The brick and render supply the extra colour for free. */
.hero-bg img { filter: brightness(1.13) saturate(0.98); }
.hero-bg::after {
  background: linear-gradient(180deg, rgba(34,41,54,0.10) 0%, rgba(34,41,54,0.18) 30%, rgba(34,41,54,0.62) 68%, rgba(34,41,54,0.82) 100%);
}
.hero::before { display: none; }

/* Green means live; closed states remain neutral. */
.hdr .hdr-phone.only-open small { color: #67d69f; }
.hdr .hdr-phone.only-open small .dot {
  background: #47c78a;
  box-shadow: 0 0 0 3px rgba(71,199,138,0.20);
}
.hdr .hdr-phone--closed small { color: #e4e5e7; }
.status .live:not(.live--off) { color: #147a4b; }
.status .live:not(.live--off) .dot {
  background: #1a9b61;
  box-shadow: 0 0 0 3px rgba(26,155,97,0.15);
}
.status .live--off { color: #5f6670; }
.status .live--off .dot { background: #7b828b; box-shadow: none; }

/* Warm the light UI without introducing another accent. */
.panel {
  --bg: #f7f2e8;
  --sur: #fffdf8;
  --sur2: #eee8de;
  --line: #e2dbd1;
  --line2: #cec5b9;
  --muted: #6d675f;
}
.pc-row input { background: #f7f3ec; }
.pc-res, .day.is-first, .example-price { background: #f4efe7; border-color: #d9d0c4; }
.facts li, .brands, .receipt, .tp-sec, .faq details { background: #fffdf8; }
.wa-card { background: #ebe7df; border-color: #d8d1c7; }
.sticky { background: rgba(247,242,232,0.96); border-color: #d8d0c5; }

/* Fault-tile phone circles are genuine calls to action. */
.fault i { background: #f28b2a; color: #222936; }

/* Real official TrustBox widgets, replacing the dashed design placeholders. */
.tp-row .trustpilot-widget {
  width: 100%;
  max-width: 300px;
  min-height: 24px;
}
.tp-sec .trustpilot-widget {
  width: 100%;
  min-height: 150px;
  margin: 0 auto;
}

/* Type hierarchy: Barlow for all actions/instructions, Fraunces italic once as
   the signature emotional accent, and condensed Barlow only for stat numerals. */
.h1 .y { font-weight: 600; }
.btn,
.pc-row button,
.day b,
.tl b,
.ba-seg button,
.receipt .total,
.wa-card h3 {
  font-family: var(--body);
  font-weight: 700;
}
.btn,
.pc-row button,
.ba-seg button,
.receipt .total {
  letter-spacing: 0.01em;
}
.tl b,
.wa-card h3 {
  text-transform: none;
  letter-spacing: -0.02em;
}
.facts li:nth-child(2) strong,
.facts li:nth-child(4) strong {
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* Mobile crops onto the pale door, so add a directional text-safety gradient.
   It is strongest behind the left-aligned headline and falls away over the
   brick on the right; desktop keeps its existing diagonal treatment below. */
@media (max-width: 991px) {
  .hero-bg::after {
    background:
      linear-gradient(100deg, rgba(34,41,54,0.74) 0%, rgba(34,41,54,0.58) 64%, rgba(34,41,54,0.20) 100%),
      linear-gradient(180deg, rgba(34,41,54,0.04) 0%, rgba(34,41,54,0.10) 28%, rgba(34,41,54,0.50) 72%, rgba(34,41,54,0.76) 100%);
  }
}

@media (min-width: 992px) {
  .hero-bg::after {
    background: linear-gradient(112deg, rgba(34,41,54,0.84) 0%, rgba(34,41,54,0.78) 41%, rgba(34,41,54,0.42) 54%, rgba(34,41,54,0.03) 75%, rgba(34,41,54,0) 100%);
  }
}

/* =============================================================================
   DEMO 12 — compact mobile hero + contextual local coverage.
   The fallback area list is complete and safe before personalisation. In the
   PHP build, the badge and this helper should be emitted from the same resolved
   campaign zone so they can never disagree or cause a first-paint layout shift.
   ============================================================================= */
.coverage-helper {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}
.coverage-helper b { color: var(--ink); }
.h1 .y {
  display: inline-block;
  font-size: 1.08em;
  line-height: 0.90;
}

/* Three shape classes keep the page consistent and easy to tune. */
:root {
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;
}
.panel,
.facts li,
.brands,
.fault,
.ba,
.receipt,
.tp-sec,
.wa-card,
.faq details,
.final {
  border-radius: var(--radius-card);
}
.btn,
.pc-row input,
.pc-row button,
.pc-res,
.day,
.ba-frame,
.ba-seg,
.ba-seg button,
.example-price,
.wa-steps li,
.cards-img {
  border-radius: var(--radius-control);
}
.kicker,
.day em {
  border-radius: var(--radius-pill);
}
.brands {
  overflow: visible;
  text-align: left;
}
.brands__title {
  display: block;
  color: var(--ink);
  text-align: center;
}
.brands__viewport {
  margin: 12px -14px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.brands__track {
  display: flex;
  width: max-content;
  gap: 28px;
  animation: brands-marquee 18s linear infinite;
  will-change: transform;
}
.brands__track:hover,
.brands__track:focus-within { animation-play-state: paused; }
.brands__logos {
  display: flex;
  gap: 28px;
  padding: 2px 0 8px;
  flex: 0 0 auto;
}
.brands__logo {
  display: grid;
  flex: 0 0 104px;
  height: 48px;
  place-items: center;
}
.brands__logo img {
  display: block;
  width: auto;
  max-width: 104px;
  max-height: 34px;
  height: auto;
  object-fit: contain;
}
.brands__logo--square img {
  max-height: 48px;
}
@keyframes brands-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.brands__more,
.brands__note {
  display: block;
  text-align: center;
}
.brands__more { margin-top: 5px; color: var(--muted); }
.brands__note { margin-top: 5px; color: #817a72; font-size: 0.68rem; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.wa-link svg {
  width: 19px;
  height: 19px;
  color: #25d366;
}

@media (max-width: 599px) {
  .hero .wrap {
    padding-top: 44px;
    padding-bottom: 20px;
  }
  .kicker {
    padding: 6px 9px;
    font-size: 0.74rem;
  }
  .h1 {
    margin-top: 8px;
    font-size: clamp(2.45rem, 10.5vw, 2.90rem);
    line-height: 0.97;
  }
  .lead {
    margin-top: 6px;
    font-size: 0.90rem;
    line-height: 1.35;
  }
  .panel { margin-top: 12px; }
  .status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    padding-bottom: 9px;
    margin-bottom: 9px;
  }
  .status .live {
    align-items: flex-start;
    padding-right: 12px;
  }
  .status .live .dot {
    flex: 0 0 8px;
    margin-top: 3px;
  }
  .status-copy,
  .status-visit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    line-height: 1.15;
  }
  .status-visit {
    justify-content: flex-start;
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }
  .status-copy > span,
  .status-visit > span {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .status-copy b,
  .status-visit b {
    font-size: 0.78rem;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
  }
  .status .live .status-copy b { color: inherit; }
  .status-copy b::before,
  .status-visit b::before { content: none; }
  .days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .day {
    min-height: 62px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .btn { min-height: 56px; }
  .or { margin: 9px 0; }
}
@media (min-width: 768px) {
  .brands__viewport {
    margin-left: 0;
    margin-right: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .brands__track {
    width: auto;
    animation: none;
    justify-content: center;
  }
  .brands__logos--clone { display: none; }
  .brands__logos {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 18px;
    width: 100%;
  }
  .brands__logo { flex-basis: 132px; }
  .brands__logo img { max-width: 132px; }
}

/* A proper fallback CTA for faults that do not match one of the tiles. */
.fault-help {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: #222936;
  color: #fff;
  box-shadow: 0 14px 32px rgba(34,41,54,0.18);
}
.fault-help__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #f28b2a;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fault-help h3 {
  font-family: var(--body);
  font-size: 1.18rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.fault-help p {
  margin-top: 4px;
  color: #cfd3d9;
  font-size: 0.84rem;
  line-height: 1.35;
}
.fault-help__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fault-help__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  text-decoration: none;
  text-align: left;
}
.fault-help__action > span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.fault-help__action b {
  font-size: 0.88rem;
  white-space: nowrap;
}
.fault-help__action small {
  margin-top: 3px;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
}
.fault-help__photo {
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.fault-help__photo svg { color: #56d795; }
.fault-help__photo small { color: #cfd3d9; }
.fault-help__call {
  background: #f28b2a;
  color: #222936;
}
.fault-help__call small { color: #5b3514; }
.fault-help__action:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .fault-help {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 18px 20px;
  }
  .fault-help h3 { font-size: 1.3rem; }
  .fault-help__actions {
    width: 410px;
  }
}

/* Fault detail sheet: the whole tile explains first, with one clear CTA inside. */
.fault-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fault-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(18,23,31,0.03) 28%, rgba(18,23,31,0.48) 64%, rgba(18,23,31,0.96) 100%),
    linear-gradient(90deg, rgba(18,23,31,0.24) 0%, rgba(18,23,31,0) 78%);
  pointer-events: none;
}
.fault-copy {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 12px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.fault-copy b { color: #fff; }
.fault-copy small { color: #f0f2f4; }
.fault-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10,14,20,0.62);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.fault-sheet {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 0;
  width: min(100%, 640px);
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: #fffdf8;
  color: #222936;
  box-shadow: 0 -24px 70px rgba(8,11,16,0.38);
  transform: translate(-50%, 105%);
  transition: transform 0.24s ease;
  overscroll-behavior: contain;
}
.fault-sheet-backdrop.is-open { opacity: 1; }
.fault-sheet.is-open { transform: translate(-50%, 0); }
.fault-sheet[hidden],
.fault-sheet-backdrop[hidden] { display: none; }
body.fault-sheet-open { overflow: hidden; }
.fault-sheet__handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #c9cbd0;
}
.fault-sheet__close {
  position: absolute;
  top: 14px;
  right: 16px;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid #d6d7d9;
  border-radius: 50%;
  background: #f3f1ec;
  color: #222936;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.fault-sheet__eyebrow {
  display: block;
  padding-right: 48px;
  color: #b9520b;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fault-sheet h2 {
  max-width: 520px;
  margin-top: 4px;
  padding-right: 44px;
  font-family: var(--body);
  font-size: clamp(1.65rem, 7vw, 2.15rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.fault-sheet__intro {
  margin-top: 12px;
  color: #555d67;
  font-size: 0.96rem;
  line-height: 1.45;
}
.fault-sheet__warning,
.fault-sheet__outcome {
  position: relative;
  margin-top: 12px;
  padding: 12px 12px 12px 40px;
  border-radius: 9px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.fault-sheet__warning {
  border: 1px solid #efc7a5;
  background: #fff1e5;
  color: #653813;
}
.fault-sheet__outcome {
  border: 1px solid #d5d7da;
  background: #f1f1ef;
  color: #424a54;
}
.fault-sheet__warning::before,
.fault-sheet__outcome::before {
  position: absolute;
  left: 13px;
  top: 12px;
  font-weight: 800;
}
.fault-sheet__warning::before { content: "!"; color: #b9520b; }
.fault-sheet__outcome::before { content: "✓"; color: #147a4b; }
.fault-sheet__actions {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}
.fault-sheet__actions .btn { min-height: 56px; }
.fault-sheet__secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 14px;
  border: 1.5px solid #222936;
  border-radius: var(--radius-control);
  color: #222936;
  text-decoration: none;
  font-weight: 700;
}
.fault-sheet__secondary svg { color: #1aaa59; }
.fault-sheet__text {
  display: block;
  padding: 5px;
  color: #414955;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
}
.fault-sheet__more {
  display: block;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid #ddd9d1;
  color: #626a73;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
}
@media (min-width: 700px) {
  .fault-sheet { padding: 12px 28px 26px; }
  .fault-sheet__actions {
    grid-template-columns: 1.2fr 1fr;
  }
  .fault-sheet__text { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .fault-sheet,
  .fault-sheet-backdrop { transition: none; }
}

/* =============================================================================
   Cookie consent. Neutral wording, Decline and Accept given equal weight so
   neither choice is pushed. Bottom card on mobile, centred card on desktop.
   ============================================================================= */
.cookie-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(10,14,20,0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.cookie-card {
  position: fixed;
  z-index: 130;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 640px;
  padding: 22px var(--pad) calc(18px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: #fffdf8;
  color: #222936;
  box-shadow: 0 -24px 70px rgba(8,11,16,0.38);
  transform: translateY(105%);
  transition: transform 0.24s ease;
  outline: none;
}
.cookie-backdrop.is-open { opacity: 1; }
.cookie-card.is-open { transform: translateY(0); }
.cookie-card[hidden],
.cookie-backdrop[hidden] { display: none; }
body.cookie-open { overflow: hidden; }
.cookie-card h2 {
  font-family: var(--body);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.cookie-card > p {
  margin-top: 8px;
  color: #555d67;
  font-size: 0.93rem;
  line-height: 1.45;
}
.cookie-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.cookie-btn {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.cookie-btn--decline {
  background: #fffdf8;
  color: #222936;
  border: 1.5px solid #c9ccd0;
}
.cookie-btn--decline:hover { border-color: #222936; }
.cookie-btn--accept {
  background: #222936;
  color: #fff;
  border: 1.5px solid #222936;
}
.cookie-btn--accept:hover { background: #343c4a; border-color: #343c4a; }
.cookie-btn:focus-visible { outline: 3px solid rgba(242,139,42,0.55); outline-offset: 2px; }
.cookie-card__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.78rem;
  color: #68707b;
}
.cookie-card__links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cookie-card__links a:hover { color: #222936; }
@media (min-width: 700px) {
  .cookie-card {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(100% - 36px, 440px);
    padding: 26px 28px 22px;
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(8,11,16,0.4);
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .cookie-card.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-card,
  .cookie-backdrop { transition: none; }
}

/* =============================================================================
   Site additions (not in demo12.html): live postcode lookup states.
   ============================================================================= */
.pc-res--bad { background: #fdf1ec; border-color: #f2c4b3; }
.pc-res--bad > b { color: #9a3b1c; }
.pc-res--bad a { color: #222936; font-weight: 700; }
.pc-row button.is-busy { opacity: 0.6; cursor: progress; }

/* =============================================================================
   Site additions: problem pages (/garage-door-repairs/<problem>) and the
   problems index. Reuses the home sections (hero, tl, faq, cta) and adds the
   few blocks those pages need.
   ============================================================================= */
.page-problem .hero .wrap { padding-top: 120px; }
.page-problem .h1 { font-size: clamp(2.3rem, 10vw, 3.6rem); }

.sec.intro { padding-top: 26px; }
.sec.intro p,
.prose p { max-width: 44rem; font-size: 1rem; line-height: 1.55; color: #3f4650; margin-top: 10px; }
.sec.intro p:first-child { font-size: 1.08rem; color: #222936; margin-top: 0; }
.sec.intro b { color: #222936; }
.prose p:first-of-type { margin-top: 10px; }
.h2--sm { font-size: clamp(1.45rem, 5.6vw, 1.9rem); }

/* Causes: numbered list, not cards (cards read as tappable, like the fault tiles) */
.causes { display: grid; grid-template-columns: 1fr; gap: 14px 24px; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.causes li { display: flex; align-items: flex-start; gap: 12px; }
.causes__n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #f28b2a; color: #222936;
  font-family: var(--display); font-size: 1.1rem; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 4px #fdeedd;
}
.causes__body { display: block; padding-top: 5px; }
.causes b { display: block; font-size: 1rem; line-height: 1.2; color: #222936; }
.causes small { display: block; margin-top: 3px; font-size: 0.86rem; line-height: 1.4; color: #6d675f; }
.causes small a { color: #222936; font-weight: 700; white-space: nowrap; }

/* Repair or replace */
.rvr-intro { max-width: 44rem; font-size: 0.98rem; line-height: 1.5; color: #3f4650; margin-bottom: 14px; }
.rvr { display: grid; gap: 12px; }
.rvr__card {
  background: #fffdf8; border: 1px solid #e2dbd1; border-top: 4px solid #c9ccd0;
  border-radius: var(--radius-card); padding: 16px; box-shadow: 0 6px 20px rgba(34,41,54,0.05);
}
.rvr__card--repair { border-top-color: #f28b2a; }
.rvr__card--replace { border-top-color: #4d5560; }
.rvr__card h3 { font-family: var(--display); font-size: 1.25rem; line-height: 1; text-transform: uppercase; font-weight: 800; color: #222936; }
.rvr__card ul { margin: 10px 0 0; padding-left: 0; list-style: none; }
.rvr__card li { position: relative; padding-left: 22px; font-size: 0.92rem; line-height: 1.4; color: #3f4650; margin-top: 7px; }
.rvr__card li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: #f28b2a; }
.rvr__card--replace li::before { background: #4d5560; }
.rvr__link { display: inline-block; margin-top: 12px; font-weight: 700; color: #222936; text-decoration: underline; text-underline-offset: 3px; }

/* Brand chips (any-brand page) */
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.chips li { background: #fffdf8; border: 1px solid #e2dbd1; border-radius: var(--radius-control); padding: 10px 12px; }
.chips b { display: block; font-size: 0.92rem; color: #222936; }
.chips small { display: block; font-size: 0.78rem; line-height: 1.3; color: #6d675f; margin-top: 2px; }

/* New doors: door type cards */
.doors { display: grid; gap: 12px; list-style: none; margin: 14px 0 0; padding: 0; }
.doors li {
  display: grid; grid-template-rows: auto 1fr auto;
  background: #fffdf8; border: 1px solid #e2dbd1; border-radius: var(--radius-card);
  overflow: hidden; box-shadow: 0 6px 20px rgba(34,41,54,0.05);
}
.doors__img { background: #222936; padding: 18px; }
.doors__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; }
.doors__body { padding: 14px 14px 10px; }
.doors__badge { display: inline-block; margin-bottom: 6px; padding: 3px 8px; border-radius: var(--radius-pill); background: #fdeedd; color: #c85f10; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.doors__body h3 { font-family: var(--display); font-size: 1.3rem; line-height: 1; text-transform: uppercase; font-weight: 800; color: #222936; }
.doors__body > p { margin-top: 6px; font-size: 0.88rem; line-height: 1.45; color: #3f4650; }
.doors__body ul { margin: 10px 0 0; padding: 0; list-style: none; }
.doors__body ul li { position: relative; padding-left: 18px; font-size: 0.84rem; line-height: 1.35; color: #3f4650; margin-top: 4px; }
.doors__body ul li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #f28b2a; }
.doors__best { padding: 10px 14px; background: #f1ece2; border-top: 2px solid #f28b2a; font-size: 0.82rem; line-height: 1.4; color: #3f4650; }
.doors__best b { color: #222936; }
.doors__note { margin-top: 14px; padding: 14px 16px; border: 1px dashed #d3cbbb; border-radius: var(--radius-card); background: #fffdf8; }
.doors__note a { color: #222936; font-weight: 700; }

/* Areas we cover: region jump chips + compact town cards. */
.area-jump { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.area-jump a {
  display: inline-block; padding: 7px 12px; border-radius: var(--radius-pill);
  border: 1px solid #cec5b9; background: #fffdf8; color: #222936;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
}
.area-jump a:hover { border-color: #222936; }
.area-region { scroll-margin-top: 16px; }
.areas { display: grid; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.areas a {
  display: flex; flex-direction: column; height: 100%; padding: 14px 14px 12px;
  background: #fffdf8; border: 1px solid #e2dbd1; border-radius: var(--radius-card);
  text-decoration: none; color: #222936; box-shadow: 0 6px 20px rgba(34,41,54,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.areas a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34,41,54,0.1); border-color: #cec5b9; }
.areas__town { font-family: var(--display); font-size: 1.35rem; line-height: 1; text-transform: uppercase; font-weight: 800; }
.areas__badge {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 8px; border-radius: var(--radius-pill);
  background: #fdeedd; color: #c85f10; font-family: var(--body); font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
}
.areas__villages { margin-top: 8px; font-size: 0.82rem; line-height: 1.45; color: #6d675f; }
.areas__link { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-size: 0.86rem; font-weight: 700; }
.areas__link::after { content: "→"; margin-left: auto; color: #f28b2a; }

/* Blog: listing cards + article page. */
.page-blog .h1 { font-size: clamp(2rem, 8.5vw, 3.2rem); }
.blog-grid { display: grid; gap: 14px; list-style: none; margin: 14px 0 0; padding: 0; }
.blog-grid a {
  display: grid; grid-template-rows: auto 1fr; height: 100%;
  background: #fffdf8; border: 1px solid #e2dbd1; border-radius: var(--radius-card);
  overflow: hidden; text-decoration: none; color: #222936; box-shadow: 0 6px 20px rgba(34,41,54,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.blog-grid a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34,41,54,0.1); }
.blog-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.blog-grid__body { display: flex; flex-direction: column; padding: 14px 14px 14px; }
.blog-grid__cat {
  align-self: flex-start; margin-bottom: 8px; padding: 3px 8px; border-radius: var(--radius-pill);
  background: #fdeedd; color: #c85f10; font-style: normal; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.blog-grid__title { font-family: var(--display); font-size: 1.45rem; line-height: 1; text-transform: uppercase; font-weight: 800; }
.blog-grid__excerpt { margin-top: 8px; font-size: 0.88rem; line-height: 1.45; color: #3f4650; }
.blog-grid__more { display: flex; align-items: center; margin-top: auto; padding-top: 12px; font-size: 0.86rem; font-weight: 700; }
.blog-grid__more::after { content: "→"; margin-left: auto; color: #f28b2a; }

.article { max-width: 46rem; }
.crumbs { font-size: 0.8rem; color: #6d675f; }
.crumbs a { color: #6d675f; text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: #222936; text-decoration: underline; }
.crumbs span { color: #cec5b9; padding: 0 6px; }
.article__date { margin-top: 6px !important; font-size: 0.82rem !important; color: #6d675f !important; }
.article__figure { margin: 18px 0 6px; border-radius: var(--radius-card); overflow: hidden; background: #eee8de; border: 1px solid #e2dbd1; }
.article__figure img { width: 100%; height: auto; display: block; }
.article__body { color: #3f4650; }
.article__body h2 { font-family: var(--display); font-size: clamp(1.6rem, 6.5vw, 2.1rem); line-height: 0.98; text-transform: uppercase; font-weight: 800; color: #222936; margin: 34px 0 6px; }
.article__body h3 { font-size: 1.12rem; font-weight: 700; color: #222936; margin: 24px 0 4px; }
.article__body h2 + p, .article__body h3 + p { margin-top: 6px; }
.article__body ul, .article__body ol { margin: 10px 0 0; padding-left: 22px; max-width: 44rem; font-size: 1rem; line-height: 1.55; }
.article__body li { margin-top: 5px; }
.article__body li::marker { color: #f28b2a; font-weight: 700; }
.article__body a { color: #222936; font-weight: 700; }
.article__body strong { color: #222936; }
.article__body hr { border: 0; border-top: 1px solid #e2dbd1; margin: 28px 0; }
.article__body blockquote { margin: 18px 0 0; padding: 12px 16px; border-left: 4px solid #f28b2a; background: #fffdf8; border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.article__body blockquote p { margin-top: 0; }
.article__body code { background: #eee8de; padding: 1px 6px; border-radius: 4px; font-size: 0.9em; }
.article__body .blog-table-wrap { overflow-x: auto; margin: 14px 0 0; }
.article__body .blog-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: #fffdf8; }
.article__body .blog-table th, .article__body .blog-table td { text-align: left; padding: 9px 12px; border: 1px solid #e2dbd1; vertical-align: top; }
.article__body .blog-table thead th { background: #222936; color: #fff; font-weight: 700; }
.article__body .blog-table tbody tr:nth-child(even) { background: #f7f2e8; }
.article__related { margin-top: 28px; }
.article__related a { color: #222936; font-weight: 700; }
.article__back { margin-top: 22px !important; font-size: 0.9rem !important; }
.article__back a { color: #222936; font-weight: 700; text-decoration: none; }
.article__back a:hover { text-decoration: underline; }
.chips--text { margin-top: 14px; }
.chips--text li { border-top: 3px solid #f28b2a; }
.chips--text small { margin-top: 4px; line-height: 1.4; }

/* Home: what we do */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; margin: 0; padding: 0; }
.services__main { grid-column: 1 / -1; }
.services a {
  display: grid; grid-template-rows: auto 1fr; height: 100%;
  background: #fffdf8; border: 1px solid #e2dbd1; border-radius: var(--radius-card);
  overflow: hidden; text-decoration: none; color: #222936; box-shadow: 0 6px 20px rgba(34,41,54,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.services a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34,41,54,0.1); }
.services img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block; }
.services__main img { aspect-ratio: 16 / 7; }
.services__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 14px; }
.services__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #147a4b; margin-bottom: 2px; }
.services__tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #1a9b61; box-shadow: 0 0 0 3px rgba(26,155,97,0.15); }
[data-state="closed"] .services__tag { color: #5f6670; }
[data-state="closed"] .services__tag .dot { background: #7b828b; box-shadow: none; }
.services b { font-family: var(--display); font-size: 1.35rem; line-height: 1; text-transform: uppercase; font-weight: 800; }
.services__main b { font-size: 1.7rem; }
.services__text { font-size: 0.84rem; line-height: 1.4; color: #6d675f; }
.services__more { margin-top: auto; padding-top: 8px; font-size: 0.86rem; font-weight: 700; color: #c85f10; }
.services__areas { margin-top: 14px; font-size: 0.92rem; line-height: 1.45; color: #3f4650; }
.services__areas a { color: #222936; font-weight: 700; }

/* Home: review carousel under the score widget */
.tp-carousel { margin-top: 18px; }

/* Problems index grid */
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; margin: 0; padding: 0; }
.problem-grid a {
  display: grid; grid-template-rows: auto 1fr; height: 100%;
  background: #fffdf8; border: 1px solid #e2dbd1; border-radius: var(--radius-card);
  overflow: hidden; text-decoration: none; color: #222936; box-shadow: 0 6px 20px rgba(34,41,54,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.problem-grid a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34,41,54,0.1); }
.problem-grid img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block; }
.problem-grid span { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.problem-grid span::after { content: "→"; margin-left: auto; color: #f28b2a; }

@media (min-width: 768px) {
  .sec.intro p, .prose p { font-size: 1.06rem; }
  .sec.intro p:first-child { font-size: 1.18rem; }
  .causes { grid-template-columns: 1fr 1fr; gap: 20px 32px; }
  .page-problem .two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 28px; align-items: start; }
  .page-problem .two-col .fault-help { margin-top: 56px; grid-template-columns: 1fr; }
  .page-problem .two-col .fault-help__actions { grid-template-columns: 1fr; width: auto; }
  .rvr { grid-template-columns: 1fr 1fr; gap: 16px; }
  .chips { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .problem-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .doors { grid-template-columns: 1fr 1fr; gap: 16px; }
  .doors__img img { aspect-ratio: 16 / 9; }
  .areas { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .areas a { padding: 18px 18px 14px; }
  .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .blog-grid__body { padding: 16px 18px 16px; }
  .article__body { font-size: 1.06rem; }
  .services { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .services__main { grid-column: 1 / -1; }
  .services__main a { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .services__main img { height: 250px; aspect-ratio: auto; }
  .services__main .services__body { padding: 22px; justify-content: center; }
  .services__text { font-size: 0.9rem; }
}

/* =============================================================================
   Site additions: hero price card (segments/v3/fee.php). Card 1 reuses .fee;
   cards 2 (fixed-price offer) and 3 (transparent price list) render this
   block in the hero panel. Uses the panel's own colour variables.
   ============================================================================= */
.price-card { margin-top: 12px; padding: 12px 12px 10px; border: 1px solid var(--line); border-top: 4px solid #f28b2a; border-radius: var(--radius-control); background: var(--sur); color: var(--ink); }
.price-card__eyebrow { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #b9520b; }
.price-card__heading { display: block; margin-top: 3px; font-size: 0.95rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.price-card__heading em { font-style: normal; font-weight: 800; color: #b9520b; white-space: nowrap; }
.price-card__heading small { font-weight: 600; color: var(--muted); }
.price-card__rows { list-style: none; margin: 8px 0 0; padding: 0; }
.price-card__rows li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.price-card__pill { flex: 0 0 auto; min-width: 3.5rem; text-align: center; background: #f28b2a; color: #222936; font-weight: 800; font-size: 0.9rem; padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.price-card__job { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.price-card__job b { font-size: 0.88rem; color: var(--ink); }
.price-card__job small { font-size: 0.73rem; color: var(--muted); }
.price-card__note { margin: 9px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink); }
.price-card__note--advice { margin-top: 4px; color: var(--muted); }
.price-card__note b { color: #b9520b; font-weight: 800; }
.price-card__points { list-style: none; margin: 8px 0 0; padding: 0; }
.price-card__points li { position: relative; padding: 4px 0 4px 18px; font-size: 0.8rem; line-height: 1.4; color: var(--ink); border-top: 1px solid var(--line); }
.price-card__points li::before { content: "✓"; position: absolute; left: 0; top: 4px; font-weight: 800; color: #b9520b; }

/* =============================================================================
   Site additions: page-top band (segments/v3/page_top.php) for secondary pages
   that don't carry the booking hero, and the legal pages that use it
   (/privacy-policy, /cookie-policy). Band mirrors the booking page's .book-top
   so the two secondary-page styles match.
   ============================================================================= */
.page-top { background: #222936; color: #fff; padding: 26px 0 22px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.page-top .wrap { display: flex; flex-direction: column; gap: 16px; }
.page-top .eyebrow { color: #f28b2a; margin-bottom: 8px; }
.page-top__h1 { font-family: var(--body); font-weight: 700; font-size: clamp(2.1rem, 8.5vw, 3.2rem); line-height: 0.98; letter-spacing: -0.035em; color: #fff; margin: 0; }
.page-top__h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: #f28b2a; }
.page-top__sub { margin: 10px 0 0; max-width: 560px; font-size: 0.98rem; line-height: 1.45; color: #d9dce0; }
.page-top__status { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.page-top__pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-pill); background: #303744; border: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: #e4e5e7; white-space: nowrap; text-decoration: none; }
.page-top__pill b { color: #fff; font-weight: 700; }
.page-top__pill svg { color: #f28b2a; flex: 0 0 auto; }
.page-top__pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #47c78a; box-shadow: 0 0 0 3px rgba(71,199,138,0.22); }
.page-top__pill--live { color: #67d69f; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; }
.page-top__pill--off { color: #f3c79f; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; }
.page-top__pill--off .dot { background: #f28b2a; box-shadow: none; }

/* Legal copy lives in modules/consent/*_policy_content.php and is shared with
   the old Bootstrap consent modal, so its classes (fw-bold, table-bordered…)
   are left alone and the raw tags are styled here instead. */
.legal { padding-top: 26px; }
.legal .prose > * { max-width: 44rem; } /* cap the copy, keep it on the band's left edge */
.legal .prose h2 { font-family: var(--body); font-weight: 700; font-size: clamp(1.35rem, 5vw, 1.7rem); line-height: 1.1; letter-spacing: -0.03em; color: #222936; margin: 30px 0 4px; }
.legal .prose h2:first-child { margin-top: 0; }
.legal .prose ul { list-style: disc; margin: 10px 0 0; padding-left: 1.25rem; font-size: 1rem; line-height: 1.55; color: #3f4650; }
.legal .prose li { margin-top: 6px; }
.legal .prose li strong { color: #222936; }
.legal .prose a { color: #222936; font-weight: 700; }
.legal .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: #ece9e2; padding: 1px 6px; border-radius: 4px; color: #222936; }
.legal .table-responsive { overflow-x: auto; margin-top: 12px; }
.legal table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; line-height: 1.45; background: #fffdf8; border: 1px solid #e2dbd1; border-radius: var(--radius-control); overflow: hidden; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e2dbd1; vertical-align: top; color: #3f4650; }
.legal th { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #4d5560; background: #f1ede5; }
.legal tr:last-child td { border-bottom: 0; }

@media (min-width: 768px) {
  .page-top { padding: 34px 0 30px; }
  .page-top .wrap { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .page-top__status { justify-content: flex-end; }
  .legal .prose ul { font-size: 1.06rem; }
}