/* ==========================================================================
   EGI Interiors — West London HQ design system
   Logo: charcoal EG + pure red I/star + red “Interiors”
   ========================================================================== */

/* Self-hosted DM Sans. One variable file covers 400–800, replacing a
   render-blocking third-party stylesheet plus a second connection. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Display serif for large headings only. Same superfamily as DM Sans, so the
   proportions and rhythm are designed to sit together. Single weight 400 is
   correct: bolding a high-contrast serif thickens the hairlines and destroys
   the contrast that makes it work. */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback so the swap from Georgia to DM Serif Display barely
   shifts the layout. Without this, a serif swap is a visible CLS jump. */
@font-face {
  font-family: "DM Serif Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* Brand — match logo */
  --brand-red: #e10600;
  --brand-red-hover: #c20500;
  --brand-red-press: #a00400;
  --brand-red-soft: #fff1f0;
  --brand-red-ring: rgba(225, 6, 0, 0.28);
  --brand-charcoal: #3a3a3a;   /* EG letters */
  --brand-black: #0a0a0a;

  /* Surfaces — warm neutrals (interiors, not SaaS grey) */
  --bg: #faf9f7;
  --surface: #ffffff;
  --soft: #f3f0eb;
  --soft-2: #ebe7e1;
  --line: #e4dfd7;
  --line-strong: #cdc6bc;

  /* Text */
  --ink: #1a1917;
  --ink-soft: #2c2a27;
  --muted: #6b6560;      /* 4.97:1 on --bg — AA for normal text */
  --muted-2: #78716a;    /* was #8a847c (3.5:1, failed AA); now 4.66:1 */
  --on-dark: #faf9f7;
  --on-dark-muted: #b8b2a8;

  /* Semantic */
  --star: #d4a017;
  --green: #1f7a4c;
  --map: #1c1b19;

  /* Effects */
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px rgba(26, 25, 23, 0.07);
  --shadow-md: 0 14px 40px rgba(26, 25, 23, 0.1);
  --shadow-btn: 0 2px 0 rgba(0, 0, 0, 0.06), 0 8px 20px rgba(225, 6, 0, 0.22);
  --shadow-btn-dark: 0 2px 0 rgba(0, 0, 0, 0.12), 0 8px 18px rgba(0, 0, 0, 0.18);
  --max: 1180px;
  --font: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-display: "DM Serif Display", "DM Serif Fallback", Georgia, serif;

  /* Back-compat aliases used across HTML */
  --red: var(--brand-red);
  --red-dark: var(--brand-red-hover);
  --red-soft: var(--brand-red-soft);
  --white: var(--surface);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
/* <picture> wraps every photo. It must be a block so it takes the full grid
   cell and the inner <img> (which carries width/aspect-ratio) fills it.
   Do NOT use display:contents here: that promotes BOTH children to grid items,
   and the <source> element then occupies a cell of its own, staggering the
   whole grid. */
picture { display: block; }
picture source { display: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; }

::selection {
  background: var(--brand-red-soft);
  color: var(--ink);
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--brand-black);
  color: var(--on-dark);
  text-align: center;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.topbar a {
  color: #ffb4ae;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 180, 174, 0.5);
  margin-left: 4px;
}
.topbar a:hover { color: #fff; border-color: #fff; }

/* Preview builds only — see EGI_DEMO in site_chrome.py */
.demo-flag {
  display: inline-block;
  background: var(--brand-red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: 1px;
}

/* ---------- Header / nav ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  /* Opaque, not translucent+blurred. backdrop-filter on a sticky element
     forces the compositor to re-blur the backdrop every scroll frame, which
     is the main cause of scroll stutter on mid-range Android. At 0.92 alpha
     the blur was invisible anyway. */
  background: #faf9f7;
  position: sticky;
  top: 0;
  z-index: 100;
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* Desktop compositors handle this comfortably, so keep the frosted look
     where it costs nothing. */
  @supports (backdrop-filter: blur(10px)) {
    .site-header {
      background: rgba(250, 249, 247, 0.86);
      backdrop-filter: blur(10px);
    }
  }
}
.nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  display: flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
}
.logo img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
}
/* Header: transparent logo on warm light background */
.logo-header img {
  height: 54px;
  max-width: 150px;
}
/* Footer: light logo mark on black */
.logo-footer img {
  height: 52px;
  max-width: 150px;
  margin-bottom: 4px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}
.nav-links a {
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active {
  color: var(--ink);
  border-color: var(--brand-red);
}
.nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.nav-toggle {
  display: none;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  border-radius: 10px;
  padding: 9px 14px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle:hover { border-color: var(--brand-charcoal); }

/* ==========================================================================
   Buttons — hierarchy
   Primary  = brand red (Book free visit)
   Secondary = charcoal solid (supporting actions)
   Ghost    = light outline (on light surfaces)
   Light    = on dark surfaces
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-red-ring);
}

/* Primary CTA */
.btn-red {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
  box-shadow: var(--shadow-btn);
}
.btn-red:hover {
  background: var(--brand-red-hover);
  border-color: var(--brand-red-hover);
  box-shadow: 0 4px 0 rgba(0,0,0,0.06), 0 12px 28px rgba(225, 6, 0, 0.3);
  color: #fff;
}
.btn-red:active {
  background: var(--brand-red-press);
  border-color: var(--brand-red-press);
  box-shadow: none;
}

/* Secondary solid */
.btn-dark {
  background: var(--ink);
  color: var(--on-dark);
  border-color: var(--ink);
  box-shadow: var(--shadow-btn-dark);
}
.btn-dark:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: #fff;
}

/* Ghost on light surfaces */
.btn-ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(26, 25, 23, 0.04);
}
.btn-ghost:hover {
  border-color: var(--brand-charcoal);
  background: var(--soft);
  color: var(--ink);
}

/* Outline red (secondary CTA when you want brand without full fill) */
.btn-outline-red {
  background: transparent;
  border-color: var(--brand-red);
  color: var(--brand-red);
}
.btn-outline-red:hover {
  background: var(--brand-red-soft);
  border-color: var(--brand-red-hover);
  color: var(--brand-red-hover);
}

/* On dark surfaces (offer banner, cta-band, map card) */
.btn-light {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.btn-light:hover {
  background: var(--soft);
  border-color: var(--soft);
  color: var(--ink);
}
.btn-ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: none;
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

/* Sizes */
.btn-lg {
  min-height: 52px;
  padding: 0 26px;
  font-size: 0.98rem;
  border-radius: 14px;
}
.btn-sm {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.82rem;
  border-radius: 10px;
}
.btn-block { width: 100%; }

/* Button groups */
.hero-ctas,
.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Text links */
.link {
  color: var(--brand-red);
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.link:hover { border-color: var(--brand-red); }
.card-body .link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--brand-red);
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.section-sm { padding: 40px 0; }
.section-soft { background: var(--soft); }
.section-ink { background: var(--brand-black); color: var(--on-dark); }
.section-ink .muted { color: var(--on-dark-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 15px;
  font-size: 0.74rem;
  font-weight: 600;
  /* Wide tracking echoes the "Interiors" lockup in the logo. */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--ink-soft);
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 0 3px var(--brand-red-soft);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin-bottom: 12px;
  color: var(--ink);
}
.section-lead {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 560px;
  margin-bottom: 28px;
  font-weight: 500;
}
.center { text-align: center; }
.center .section-lead { margin-left: auto; margin-right: auto; }
.muted { color: var(--muted); }
.text-red { color: var(--brand-red); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  padding: 48px 0 56px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.2vw, 3.1rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--ink);
}
.hero h1 span { color: var(--brand-red); }
.hero-lead {
  color: var(--muted);
  font-size: 1.08rem;
  margin-bottom: 28px;
  max-width: 480px;
  font-weight: 500;
}
.hero-ctas { margin-bottom: 24px; }
.postcodes { display: flex; flex-wrap: wrap; gap: 8px; }
.postcodes span {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

/* Map card */
.map-card {
  background: var(--map);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--on-dark);
  box-shadow: var(--shadow-md);
  border: 1px solid #2a2826;
}
/* .map-visual / .map-pin removed: they rendered egi-interiors.jpg, a collage on
   a transparent background rather than a photograph, so any cover-crop showed
   white gaps. The real Google map replaces it. */
.map-body { padding: 22px; }
.map-body h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
.map-body p { color: var(--on-dark-muted); font-size: 0.9rem; margin-bottom: 4px; }
.map-body .btn { margin-top: 16px; width: 100%; }

/* Page hero */
.page-hero {
  background: linear-gradient(180deg, var(--soft) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding: 48px 0;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 3.7vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin-bottom: 12px;
}
.page-hero p {
  color: var(--muted);
  max-width: 620px;
  font-size: 1.05rem;
  font-weight: 500;
}
.breadcrumb {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted-2);
  margin-bottom: 12px;
}
.breadcrumb a:hover { color: var(--brand-red); }

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gap-lg { gap: 40px; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.card:hover {
  border-color: #d4cec4;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card-img { aspect-ratio: 4/3; object-fit: cover; width: 100%; background: var(--soft); }
.card-body { padding: 18px; }
.card-body h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; }
.card-body p { font-size: 0.9rem; color: var(--muted); font-weight: 500; }

.area-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.area-card:hover {
  border-color: var(--brand-red);
  box-shadow: 0 8px 24px rgba(225, 6, 0, 0.08);
}
.area-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 4px; }
.area-card p { font-size: 0.82rem; color: var(--muted); font-weight: 500; }

.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.feature-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; margin-bottom: 14px;
  border: 1px solid rgba(225, 6, 0, 0.12);
}
.feature h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 8px; }
.feature p { font-size: 0.9rem; color: var(--muted); font-weight: 500; }

/* Lists */
.check-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  display: flex;
  gap: 10px;
  font-size: 0.95rem;
}
.check-list li::before {
  content: "✓";
  color: var(--brand-red);
  font-weight: 800;
  flex-shrink: 0;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
}
.step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(225, 6, 0, 0.25);
}
.step h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.step p { font-size: 0.88rem; color: var(--muted); font-weight: 500; }

/* Reviews */
.review {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--surface);
}
.stars { color: var(--star); margin-bottom: 10px; letter-spacing: 1px; }
.review p { font-size: 0.95rem; margin-bottom: 14px; color: var(--ink-soft); }
.review .who { font-size: 0.82rem; font-weight: 700; color: var(--muted); }

/* Machine blocks */
.machine {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.machine:nth-child(even) { direction: rtl; }
.machine:nth-child(even) > * { direction: ltr; }
.machine img {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--soft);
}
.machine h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.machine p { color: var(--muted); font-weight: 500; font-size: 0.95rem; }
.machine .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 8px;
}

/* Forms */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
  /* The card is white wherever it sits, including inside the dark .lp-hero.
     Without this reset the heading inherits #fff and vanishes. */
  color: var(--ink);
}
.form-card h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; }
.form-card .sub { color: var(--muted); font-size: 0.88rem; margin-bottom: 18px; }
.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 5px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  /* 16px minimum stops iOS Safari zooming the viewport when a field is
     focused, which on a booking form reads as the page "jumping". */
  font-size: 16px;
  min-height: 48px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #d0c9bf; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-red);
  background: #fff;
  box-shadow: 0 0 0 3px var(--brand-red-ring);
}
.form-note {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}
/* Underlined, not just red: colour alone is not a sufficient distinction for
   a link sitting inside a block of text (WCAG 1.4.1). */
.form-note a { color: var(--brand-red); font-weight: 700; text-decoration: underline; }

/* CTA band */
.cta-band {
  background: var(--brand-black);
  color: var(--on-dark);
  padding: 56px 0;
  text-align: center;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
  color: #fff;
}
.cta-band p {
  color: var(--on-dark-muted);
  max-width: 480px;
  margin: 0 auto 24px;
  font-weight: 500;
}
.cta-meta {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 24px;
  color: #d4cfc6;
}

/* Split content */
.prose h2 {
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 28px 0 12px;
}
.prose h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 22px 0 8px;
}
.prose p {
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 500;
}
.prose ul { margin: 0 0 16px 0; }
.prose ul li {
  position: relative;
  padding: 6px 0 6px 18px;
  color: var(--muted);
  font-weight: 500;
}
.prose ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand-red);
  font-weight: 800;
}

.rounded-img {
  border-radius: var(--radius-lg);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--soft);
}

/* Table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
th, td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
th {
  background: var(--soft);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
td { color: var(--ink); font-weight: 500; }
tr:last-child td { border-bottom: none; }

/* Notice */
.notice {
  background: var(--brand-red-soft);
  border-left: 3px solid var(--brand-red);
  padding: 14px 16px;
  border-radius: 0 10px 10px 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #7a1c16;
  margin: 16px 0;
}
.notice a { color: var(--brand-red); font-weight: 700; }

/* Footer */
.site-footer {
  background: var(--brand-black);
  color: var(--on-dark-muted);
  padding: 48px 0 28px;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
.site-footer .logo {
  margin-bottom: 14px;
  width: fit-content;
  background: transparent;
}
.site-footer .logo img { height: 50px; }

/* Embedded Google maps */
.map-embed {
  border: 0;
  width: 100%;
  height: 380px;
  border-radius: var(--radius-lg);
  display: block;
  background: var(--soft);
  box-shadow: var(--shadow);
}
.map-embed-sm {
  height: 200px;
  border-radius: var(--radius);
  border: 0;
  width: 100%;
  display: block;
  background: var(--soft);
}
.map-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.map-block-body {
  padding: 16px 18px 18px;
}
.map-block-body h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.map-block-body p {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.map-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.map-main-wrap {
  margin-top: 20px;
}
@media (max-width: 900px) {
  .map-grid-4 { grid-template-columns: 1fr; }
  .map-embed { height: 300px; }
}


/* h2, not h4: these are top-level sections of the page, and jumping straight
   from the last content h2 to an h4 breaks the heading outline a screen-reader
   user navigates by (WCAG 1.3.1). Sized here, so the level change is invisible. */
.site-footer h2 {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.site-footer a { color: var(--on-dark-muted); transition: color 0.15s; }
.site-footer a:hover { color: #fff; }
.site-footer ul li { margin-bottom: 8px; font-weight: 500; }
.footer-bottom {
  border-top: 1px solid #2e2c2a;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
}

/* Photo gallery & offer */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
  background: var(--soft);
}
.photo-grid.tight img { aspect-ratio: 1; }

.offer-banner {
  background:
    linear-gradient(120deg, #0a0a0a 0%, #1c1b19 55%, #2a1210 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid #332e2c;
  box-shadow: var(--shadow-md);
}
.offer-banner h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  margin-bottom: 10px;
  color: #fff;
}
.offer-banner p {
  color: var(--on-dark-muted);
  font-weight: 500;
  margin: 0;
}
.offer-banner .price-tag {
  background: var(--brand-red);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 16px 18px;
  border-radius: 14px;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 8px 24px rgba(225, 6, 0, 0.35);
  min-width: 160px;
}
.offer-banner .price-tag small {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  /* Full opacity: at 0.92 this blended to 4.32:1 on brand red, under AA. */
  margin-top: 4px;
  letter-spacing: 0.01em;
}

.hero-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--soft);
  border: 1px solid var(--line);
}
.hero-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.sample-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sample-row img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--soft);
}
.sample-row figcaption {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 6px;
  text-align: center;
}

/* Sticky mobile bar */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 120;
  /* Opaque for the same reason as the header. This bar is mobile-only, so
     the blur was pure cost with no upside. */
  background: #faf9f7;
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
  gap: 8px;
}
.mobile-cta-bar .btn { flex: 1; min-height: 48px; }

.book-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
/* The form follows you down the supporting copy instead of scrolling away.
   Only above 900px: on mobile the form is already the first thing you see. */
@media (min-width: 901px) {
  .book-layout .form-card {
    position: sticky;
    top: 96px;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 20px;
    gap: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-actions .btn-ghost { display: inline-flex; padding: 0 12px; min-height: 40px; }
  .nav-actions .btn-red { padding: 0 12px; min-height: 40px; font-size: 0.82rem; }
  .site-header { position: sticky; }
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 76px; }
  .hero,
  .grid-2,
  .grid-3,
  .grid-4,
  .steps,
  .machine,
  .footer-grid,
  .book-layout {
    grid-template-columns: 1fr;
  }
  .book-layout .form-card { order: -1; }
  .machine:nth-child(even) { direction: ltr; }
  .grid-4.areas { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .photo-grid, .sample-row { grid-template-columns: 1fr 1fr; }
  .offer-banner { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .grid-4.areas { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
  .nav-links { font-size: 0.95rem; }
}

@media (max-width: 430px) {
  /* Logo + Menu + Call + Book pushed the header past the viewport, which made
     the whole page scroll sideways. The sticky bottom bar already offers Call,
     so drop it from the header on the narrowest phones. */
  .nav-actions .btn-ghost { display: none; }
  .nav { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .wrap { padding: 0 16px; }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--brand-red);
  color: #fff;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 0 0 10px 10px;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* Buttons had :focus-visible; links did not. */
a:focus-visible,
summary:focus-visible,
.nav-links a:focus-visible,
.site-footer a:focus-visible {
  outline: 3px solid var(--brand-red);
  outline-offset: 3px;
  border-radius: 3px;
}
.site-footer a:focus-visible { outline-color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Rendering performance
   ========================================================================== */

/* Let the browser skip layout and paint for sections that are off screen.
   contain-intrinsic-size gives each one a placeholder height so the scrollbar
   and anchor links stay stable. Excludes the hero and the two sticky bars,
   which must always be rendered. */
.section:not(.hero),
.cta-band,
.trust-bar {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* Images and iframes get their own containment so a late-loading photo can
   never reflow the rest of the page. */
.photo-grid,
.map-embed,
.map-embed-sm {
  contain: layout paint;
}

/* Promote only what actually animates, and only while it animates. */
.mobile-cta-bar { will-change: transform; }

/* ==========================================================================
   Trust bar
   ========================================================================== */

.trust-bar {
  background: var(--brand-black);
  color: var(--on-dark);
  padding: 20px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 16px;
  border-left: 2px solid var(--brand-red);
}
.trust-item strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.trust-item span {
  font-size: 0.82rem;
  color: var(--on-dark-muted);
  font-weight: 500;
  line-height: 1.4;
}

/* ==========================================================================
   Reviews
   ========================================================================== */

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.rating-stars { display: inline-flex; gap: 2px; font-size: 1.15rem; line-height: 1; }
.rating-stars .star { color: var(--star); }
.rating-stars .is-empty { color: var(--line-strong); }
/* Part-filled star: a single character painted with a hard-stop gradient and
   clipped to the glyph, so a 4.4 shows as four and a bit rather than five.
   One character, so copied text and crawlers read five stars, not six. */
.rating-stars .is-part {
  background-image: linear-gradient(
    90deg,
    var(--star) var(--fill, 50%),
    var(--line-strong) var(--fill, 50%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rating-score { font-size: 1.05rem; color: var(--ink); font-weight: 600; }
.rating-score strong { font-size: 1.35rem; font-weight: 800; }
.rating-count { font-size: 0.9rem; color: var(--muted); font-weight: 600; }

.reviews-grid { align-items: start; }
.review blockquote { margin: 0; }
.review blockquote p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
  font-weight: 500;
}
.review .who { display: block; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.stars { font-size: 0.95rem; }

/* ==========================================================================
   FAQ — native <details>, keyboard accessible without JS
   ========================================================================== */

.faq-wrap { max-width: 780px; }
.faq-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  padding: 18px 52px 18px 20px;
  font-weight: 700;
  font-size: 0.98rem;
  position: relative;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--brand-red);
  line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { background: var(--soft); }
.faq-answer { padding: 0 20px 20px; }
.faq-answer p { color: var(--muted); font-weight: 500; font-size: 0.95rem; margin: 0; }

/* ==========================================================================
   Contact methods — three obvious ways to get in touch
   ========================================================================== */

.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.contact-method {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.contact-method:hover {
  border-color: var(--brand-red);
  box-shadow: 0 8px 24px rgba(225, 6, 0, 0.08);
  transform: translateY(-2px);
}
.contact-method .cm-label {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.contact-method .cm-value {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.contact-method .cm-note { font-size: 0.84rem; color: var(--muted); font-weight: 500; }
.contact-method.is-primary {
  background: var(--brand-black);
  border-color: var(--brand-black);
}
.contact-method.is-primary .cm-label { color: var(--on-dark-muted); }
.contact-method.is-primary .cm-value { color: #fff; }
.contact-method.is-primary .cm-note { color: var(--on-dark-muted); }

/* ==========================================================================
   Opening hours + directions
   ========================================================================== */

.hours-list { margin-top: 10px; }
.hours-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.hours-list dt { font-weight: 600; color: var(--muted); }
.hours-list dd { font-weight: 700; color: var(--ink); margin: 0; }
.hours-list .is-closed dd { color: var(--muted); font-weight: 600; }

.footer-hours {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid #2e2c2a;
  font-size: 0.82rem;
  line-height: 1.5;
}

.directions-list li {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.directions-list li strong {
  flex: 0 0 92px;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-top: 2px;
}

/* ==========================================================================
   Timeline — the 5-stage process, with a spine connecting the steps
   ========================================================================== */

.timeline { position: relative; max-width: 780px; margin: 0 auto; }
.timeline::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--line);
}
.tl-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 22px;
  padding-bottom: 30px;
  position: relative;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-weight: 800;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px var(--bg), 0 6px 16px rgba(225, 6, 0, 0.28);
  position: relative;
  z-index: 1;
}
.section-soft .tl-num { box-shadow: 0 0 0 6px var(--soft), 0 6px 16px rgba(225, 6, 0, 0.28); }
.tl-body { padding-top: 4px; }
.tl-body h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.01em; }
.tl-body p { color: var(--muted); font-weight: 500; font-size: 0.96rem; margin-bottom: 8px; }
.tl-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brand-red);
  background: var(--brand-red-soft);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
}

/* ==========================================================================
   Reassurance strip — the objections people have before booking
   ========================================================================== */

.reassure {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.reassure div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-align: center;
}
.reassure strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 3px;
}
.reassure span { font-size: 0.82rem; color: var(--muted); font-weight: 500; }

@media (max-width: 900px) {
  .contact-methods { grid-template-columns: 1fr; }
  .reassure { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .reassure { grid-template-columns: 1fr; }
  .directions-list li { flex-direction: column; gap: 2px; }
}

/* ==========================================================================
   Quick answer — featured-snippet / AI-citation block
   ========================================================================== */

.quick-answer { padding: 28px 0 0; }
.qa-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-red);
  border-radius: var(--radius);
  padding: 22px 26px;
  max-width: 760px;
}
.qa-question {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--ink);
}
.qa-text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0;
}

/* ==========================================================================
   Key facts — a <dl> so the term/value pairing survives text extraction
   ========================================================================== */

.key-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.key-facts .fact {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.key-facts .fact:nth-child(odd) { border-right: 1px solid var(--line); }
.key-facts dt {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  align-self: center;
}
.key-facts dd {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  align-self: center;
}

@media (max-width: 900px) {
  .key-facts { grid-template-columns: 1fr; }
  .key-facts .fact:nth-child(odd) { border-right: none; }
  .key-facts .fact { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   Forms
   ========================================================================== */

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* No opacity here — it dropped --muted below the 4.5:1 contrast threshold. */
.optional { font-weight: 600; text-transform: none; letter-spacing: 0; }
.form-privacy {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}
.form-privacy a { color: var(--muted); text-decoration: underline; }

.field-error {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-red);
  margin-top: 5px;
  text-transform: none;
  letter-spacing: 0;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--brand-red);
  background: var(--brand-red-soft);
}
.form-status {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.form-status[data-state="error"] {
  background: var(--brand-red-soft);
  color: #7a1c16;
  border-left: 3px solid var(--brand-red);
}
.form-status[data-state="sending"] { background: var(--soft); color: var(--muted); }
.enquiry-form[data-sending] button[type="submit"] { opacity: 0.6; pointer-events: none; }

/* ==========================================================================
   Hero / misc additions
   ========================================================================== */

.hero-reassure {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  margin: -14px 0 20px;
}
.eyebrow-light {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.terms-list {
  padding-left: 1.2rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.7;
}
.terms-list li { margin-bottom: 10px; }

.footer-legal {
  border-top: 1px solid #2e2c2a;
  padding-top: 18px;
  margin-bottom: 18px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #8f8a82;
}

/* ==========================================================================
   Thank you page
   ========================================================================== */

.thanks-wrap { max-width: 780px; }
.thanks-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 30px rgba(31, 122, 76, 0.3);
}

/* ==========================================================================
   Click-to-load maps — five eager iframes was the heaviest page on the site
   ========================================================================== */

.map-lazy {
  position: relative;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(10, 10, 10, 0.06), rgba(10, 10, 10, 0.14)),
    repeating-linear-gradient(45deg, var(--soft) 0 12px, var(--soft-2) 12px 24px);
  border: 1px solid var(--line);
  overflow: hidden;
}
.map-lazy iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-load {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 14px 22px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.map-load span { font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.map-load:hover { border-color: var(--brand-charcoal); }
.map-load:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 2px; }

/* ==========================================================================
   Landing pages (paid traffic) — no nav, form above the fold
   ========================================================================== */

.lp-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lp-header-actions { display: flex; align-items: center; gap: 12px; }
.lp-phone-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.lp-hero {
  background: linear-gradient(150deg, #0a0a0a 0%, #1c1b19 58%, #2a1210 100%);
  color: #fff;
  padding: 44px 0 52px;
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: start;
}
.lp-hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 3.8vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 14px;
  color: #fff;
}
.lp-hero-copy .hero-lead { color: #d4cfc6; max-width: none; }
.lp-bullets { margin: 20px 0 18px; }
.lp-bullets li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: #ece8e2;
}
.lp-bullets li::before {
  content: "✓";
  color: var(--brand-red);
  font-weight: 800;
  flex-shrink: 0;
}
.lp-reassure {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-dark-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 14px;
}
.lp-hero .form-card { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }

.lp-footer {
  background: var(--brand-black);
  color: var(--on-dark-muted);
  padding: 28px 0;
  font-size: 0.85rem;
  text-align: center;
}
.lp-footer a { color: #fff; }
.lp-legal { font-size: 0.76rem; margin-top: 8px; color: #8f8a82; }
.lp .mobile-cta-bar { display: none; }

@media (max-width: 900px) {
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Paid traffic converts on the form — put it first, copy second. */
  .lp-hero .form-card { order: -1; }
  .lp-phone-label { display: none; }
  .lp .mobile-cta-bar { display: flex; }
}

@media (max-width: 520px) {
  .trust-grid { grid-template-columns: 1fr; }
}

/* Sticky mobile bar now reveals on scroll rather than covering the hero CTA. */
.mobile-cta-bar {
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.mobile-cta-bar.is-visible { transform: translateY(0); }

/* ==========================================================================
   Cookie banner — reject is the same size and prominence as accept (PECR)
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  padding: 20px;
  display: grid;
  gap: 14px;
}
.cookie-text {
  font-size: 0.86rem;
  color: var(--ink-soft);
  font-weight: 500;
  line-height: 1.55;
}
.cookie-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-red);
  text-decoration: underline;
}
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions .btn { flex: 1; }

@media (max-width: 520px) {
  /* Clear the sticky CTA bar so the two never overlap. */
  .cookie-banner { bottom: 84px; }
  .cookie-actions { flex-direction: column; }
}