/* ===========================================================================
   Los Angeles Water Damage — water damage restoration template
   Skin: Vodafone (see DESIGN.md, .design-source/vodafone.md). Photography-first
   hero bands, massive uppercase display, clean white content bands, and one
   scarlet that carries every next action AND the emergency band.
   This replaced a Stripe skin that was technically correct and semantically
   wrong: every dark band, the topbar and the "urgency" band were the same navy,
   so nothing on a 24/7 emergency page was louder than the chrome, and a
   four-layer gradient mesh buried the crew photograph that is the strongest
   trust signal on the page. Both faults are fixed structurally here.
   Type: Chivo (uppercase display) + Mulish (body).
   =========================================================================== */


/* Metric-matched fallbacks: web fonts load async (non-blocking), so text first
   paints in a size-adjusted local font that closely matches the web font's box
   — the swap-in then reflows almost nothing (kills font-swap CLS). */
@font-face {
  font-family: "Chivo Fallback";
  src: local("Arial");
  size-adjust: 99%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Mulish Fallback";
  src: local("Arial");
  size-adjust: 98%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%;
}

/* Vodafone's palette on the fleet's token names. Charcoal identifies, scarlet
   instructs — and unlike the previous skin, the emergency band is scarlet too,
   because on this trade the band IS the urgency. */
:root {
  --bg: #ffffff;            /* canvas */
  --surface: #f2f2f2;       /* canvas-soft — tint bands, cards */
  --surface-2: #e8e8e8;     /* chips, inset */
  --border: #dcdcdc;

  --ink: #25282b;           /* 14.82:1 on --bg */
  --muted: #5f6265;         /* 6.14:1 on --bg, 5.48:1 on --surface, 5.01:1 on --surface-2.
                               Vodafone's own body grey (#7e7e7e) is 4.06:1 and fails AA,
                               so it is darkened here. Do not restore it. */

  --brand: #25282b;         /* charcoal identifies: step numbers, marks, dark bands */
  --brand-ink: #c8102e;     /* scarlet as TYPE — 5.88:1 on --bg, 5.26:1 on --surface */
  --brand-soft: #fde7e9;    /* scarlet at 10% — tags and pills */

  --cta: #e60000;           /* Vodafone scarlet — white label 4.81:1 (WCAG AA) */
  --cta-press: #b3000b;     /* white label 7.19:1 */
  --on-cta: #ffffff;

  --band: #e60000;          /* the emergency band is SCARLET, not chrome */
  --on-band: #ffffff;       /* 4.81:1 on --band */
  --hl-on-dark: #ff6b6e;    /* 5.35:1 on --dark */
  --star-on-dark: #f5b301;  /* 8.00:1 on --dark */

  --dark: #25282b;          /* hero scrim base, footer, topbar */
  --dark-2: #3a3e42;        /* proof band */
  --live: #1a7a3f;          /* white check 5.39:1 */
  --star-ink: #8a6100;      /* 5.54:1 on --bg (>=3:1) */

  --font-display: "Chivo", "Chivo Fallback", system-ui, sans-serif;
  --font-body: "Mulish", "Mulish Fallback", system-ui, sans-serif;

  --space-section: clamp(3.5rem, 8vw, 7rem);
  --radius: 6px;
  --radius-lg: 6px;
  --radius-btn: 6px;
  --radius-pill: 60px;      /* Vodafone's pill, reserved for chips */
  --shadow: 0 1px 2px rgb(37 40 43 / 0.05), 0 12px 30px rgb(37 40 43 / 0.10);
  --shadow-sm: 0 1px 2px rgb(37 40 43 / 0.06), 0 6px 16px rgb(37 40 43 / 0.07);
  --shadow-lg: 0 2px 4px rgb(37 40 43 / 0.08), 0 18px 40px rgb(37 40 43 / 0.14);
  --shadow-cta: 0 6px 18px rgb(230 0 0 / 0.26);
  --shadow-up: 0 -6px 20px rgb(37 40 43 / 0.20);
  --z-callbar: 40;
  --z-nav: 50;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, .brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: inherit; }

.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }

.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 var(--radius) 0; }
.skip:focus { left: 0; }

/* Pulsing "live / available" dot */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); animation: pulse 1.8s var(--ease) infinite; vertical-align: middle; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); } 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--live) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  padding: 0.75rem 1.4rem; border-radius: var(--radius-btn); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn--cta { background: var(--cta); color: var(--on-cta); box-shadow: var(--shadow-cta); }
.btn--cta:hover { background: var(--cta-press); transform: translateY(-2px); }
.btn--cta:active { transform: translateY(0); }
.btn--ghost { background: oklch(1 0 0 / 0.08); color: #fff; border-color: oklch(1 0 0 / 0.3); }
.btn--ghost:hover { background: oklch(1 0 0 / 0.16); }
.btn--lg { font-size: 1.1rem; padding: 0.95rem 1.8rem; }
.btn--block { width: 100%; }

:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; border-radius: var(--radius-btn); }

/* Top bar */
.topbar { background: var(--dark); color: oklch(1 0 0 / 0.85); font-size: 0.86rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; }
.topbar__status { display: inline-flex; align-items: center; gap: 0.5rem; }
.topbar__phone { color: #fff; text-decoration: none; font-weight: 700; font-family: var(--font-display); }

/* Nav */
.nav { position: sticky; top: 0; z-index: var(--z-nav); background: oklch(1 0 0 / 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav__inner { display: flex; align-items: center; gap: 1.25rem; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-size: 1.2rem; color: var(--ink); }
.brand__mark { width: 30px; height: 30px; flex-shrink: 0; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%2325282B%22%20fill-rule%3D%22evenodd%22%20d%3D%22M46.6%209.9a5%205%200%200%201%206.8%200l36%2032.4A5%205%200%200%201%2091%2046v40a5%205%200%200%201-5%205H14a5%205%200%200%201-5-5V46a5%205%200%200%201%201.6-3.7Z%20M50%2022.5%2021%2048.6V79h58V48.6Z%22%2F%3E%3Cpath%20fill%3D%22%23E60000%22%20d%3D%22M50%2034c7%209.4%2014%2017.6%2014%2025.5C64%2068%2057.7%2074%2050%2074s-14-6-14-14.5C36%2051.6%2043%2043.4%2050%2034Z%22%2F%3E%3C%2Fsvg%3E"); }
.nav__links { display: flex; gap: 1.35rem; margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.96rem; white-space: nowrap; transition: color 0.15s; }
/* Between the mobile collapse and full width, scale the links down so the
   row stays on one line instead of wrapping. */
@media (max-width: 1180px) {
  .nav__links { gap: 0.95rem; }
  .nav__links a { font-size: 0.9rem; }
  .nav__inner { gap: 1rem; }
}
.nav__links a:hover { color: var(--brand-ink); }
.nav__cta { margin-left: 1.25rem; }
.nav__toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: 0.35rem; padding: 0.4rem; background: none; border: 1px solid var(--border); border-radius: var(--radius-btn); color: var(--ink); cursor: pointer; }
@media (max-width: 860px) {
  .nav__inner { flex-wrap: wrap; height: auto; min-height: 66px; }
  .nav__links { display: none; order: 99; flex-basis: 100%; width: 100%; flex-direction: column; gap: 0; margin-left: 0; margin-top: 0.4rem; border-top: 1px solid var(--border); }
  .nav.nav--open .nav__links { display: flex; }
  .nav__links a { min-height: 44px; display: flex; align-items: center; padding: 0.7rem 0.25rem; font-size: 1rem; }
  .nav__cta { margin-left: auto; }
  .nav__toggle { display: inline-flex; }
}

/* Hero — dark, image-led */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0; color: #fff; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, color-mix(in srgb, var(--dark) 88%, transparent) 0%, color-mix(in srgb, var(--dark) 78%, transparent) 38%, color-mix(in srgb, var(--dark) 40%, transparent) 68%, color-mix(in srgb, var(--dark) 12%, transparent) 100%); }
.hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__kicker { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--hl-on-dark); font-weight: 700; font-size: 0.95rem; margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2.5rem, 6.5vw, 4.2rem); font-weight: 700; letter-spacing: -0.03em; max-width: 16ch; }
.hero h1 .hl { color: var(--hl-on-dark); }
.hero__lead { margin-top: 1.2rem; font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: oklch(1 0 0 / 0.84); max-width: 48ch; }
.hero__rating { margin-top: 0.9rem; display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.98rem; color: oklch(1 0 0 / 0.86); }
.hero__rating-stars { color: var(--star-on-dark); letter-spacing: 0.12em; }
.hero__rating strong { color: #fff; }
.hero__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero__points { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.6rem; font-size: 0.95rem; color: oklch(1 0 0 / 0.82); }
.hero__points li { position: relative; padding-left: 1.3rem; }
.hero__points li::before { content: "✓"; position: absolute; left: 0; color: var(--live); font-weight: 800; }

/* Quote card (light card over dark hero) */
.quote { background: var(--bg); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.4rem, 3vw, 2rem); }
.quote__title { font-size: 1.5rem; }
.quote__sub { color: var(--muted); margin-top: 0.4rem; font-size: 0.98rem; }
.quote .form { margin-top: 1.2rem; }

/* Forms */
.form { display: grid; gap: 0.9rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.field { display: grid; gap: 0.35rem; }
.field__label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.field__opt { color: var(--muted); font-weight: 400; }
input, select, textarea { font-family: inherit; font-size: 1rem; color: var(--ink); padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--bg); width: 100%; transition: border-color 0.15s, box-shadow 0.15s; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }
textarea { resize: vertical; }
.form__fine { font-size: 0.82rem; color: var(--muted); text-align: center; }
.form__fine a { color: var(--brand-ink); font-weight: 700; }
.form__msg { font-size: 0.95rem; font-weight: 600; text-align: center; }
.form__msg[data-state="ok"] { color: var(--brand-ink); }
.form__msg[data-state="err"] { color: var(--cta-press); }

/* SMS-consent checkbox + hidden honeypot */
.consent { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.8rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.consent input { width: auto; flex: none; margin-top: 0.15rem; accent-color: var(--brand); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Proof band */
.proof { background: var(--dark-2); color: oklch(1 0 0 / 0.92); }
.proof__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 1.4rem 0; justify-content: space-between; }
.proof__lead { font-size: 1.05rem; }
.proof__lead strong { color: #fff; }
.proof__badges { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; list-style: none; }
.proof__badges li { font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); background: oklch(1 0 0 / 0.1); border: 1px solid oklch(1 0 0 / 0.16); }
/* Certification band: logo-style tiles (acronym mark + descriptor) */
.certs-band { background: var(--surface); border-bottom: 1px solid var(--border); padding: 1.6rem 0 1.8rem; }
.certs-band__title { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 1.1rem; }
.certs { list-style: none; display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.65rem; overflow-x: auto; }
.cert { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.4rem; padding: 0.75rem 0.55rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.cert__logo { height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.cert__mark { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 44px; letter-spacing: 0.04em; color: var(--brand); }
.cert__label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.2; }
/* Below tablet, let the certifications wrap instead of cramming one row. */
@media (max-width: 720px) { .certs { flex-wrap: wrap; } .cert { flex: 0 1 auto; min-width: 6.5rem; } }

/* Floating Google-reviews badge (bottom-left, desktop only) */
.gbadge { position: fixed; left: 1rem; bottom: 1rem; z-index: var(--z-callbar); display: flex; align-items: center; gap: 0.7rem; background: var(--bg); color: var(--ink); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.65rem 0.95rem; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.gbadge:not([data-has-rating="1"]) { display: none; }
.gbadge:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.gbadge__g { flex-shrink: 0; }
.gbadge__text { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.8rem; line-height: 1.25; }
.gbadge__text strong { font-size: 0.84rem; }
.gbadge__row { color: var(--muted); }
.gbadge__stars { color: var(--star-ink); letter-spacing: 0.1em; }
@media (max-width: 720px) { .gbadge { display: none; } }
@media (prefers-reduced-motion: reduce) { .gbadge { transition: none; } .gbadge:hover { transform: none; } }

/* Insurance carriers strip — "we bill your insurer directly" */
.carriers { background: var(--surface); border-bottom: 1px solid var(--border); }
.carriers__inner { display: grid; gap: 1.1rem; justify-items: center; text-align: center; padding-block: clamp(1.6rem, 3.5vw, 2.4rem); }
.carriers__lead { font-size: 1.02rem; color: var(--muted); max-width: 62ch; }
.carriers__lead strong { color: var(--ink); font-weight: 700; }
.carriers__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.9rem; }
.carriers__list li { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--muted); }

/* Sections */
.section { padding-block: var(--space-section); }
.section--tint { background: var(--surface); }
.section--dark { background: var(--dark); color: oklch(1 0 0 / 0.86); }
.section--dark h2 { color: #fff; }
.lede { max-width: 56ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lede--left { margin-bottom: 0; }
.lede h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.lede p { margin-top: 0.8rem; color: var(--muted); font-size: 1.1rem; }
.section--dark .lede p { color: oklch(1 0 0 / 0.72); }
.center { text-align: center; margin-top: 2.5rem; }
.link { color: var(--brand-ink); font-weight: 700; text-decoration: none; font-family: var(--font-display); }
.link:hover { text-decoration: underline; }

/* Services */
.services { display: grid; gap: clamp(1.3rem, 3vw, 2rem); }
/* Primary service — full-width banner, image beside copy */
.feature { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.feature__img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.feature__body { padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 0.7rem; align-content: center; }
.feature__body h3 { font-size: 1.45rem; }
.feature__body p { color: var(--muted); }
/* Supporting services — image cards (capped 1 -> 2 -> 3 per row) */
.service-cards { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 560px) { .service-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .service-cards { grid-template-columns: repeat(3, 1fr); } }
.scard { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.scard__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.5s var(--ease); }
.scard:hover .scard__img { transform: scale(1.05); }
.scard__body { padding: 1.05rem 1.2rem 1.25rem; display: grid; gap: 0.28rem; }
.scard__body h3 { font-size: 1.1rem; }
.scard__body p { color: var(--muted); font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .scard, .scard__img { transition: none; } .scard:hover { transform: none; } .scard:hover .scard__img { transform: none; } }
/* Cards that are links to their per-service page */
.scard--link { color: inherit; text-decoration: none; }
.scard--link .scard__body .link { margin-top: 0.35rem; font-size: 0.9rem; }
.scard--link:hover .scard__body h3 { color: var(--brand); }
.scard--link:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.services__list { list-style: none; display: grid; gap: 0.9rem; align-content: start; }
.services__list li { padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.services__list h3 { font-size: 1.1rem; }
.services__list p { color: var(--muted); font-size: 0.95rem; margin-top: 0.2rem; }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.split__body h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.split__intro { color: oklch(1 0 0 / 0.78); font-size: 1.1rem; margin-top: 0.9rem; max-width: 50ch; }
.reasons { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.reasons dt { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.reasons dd { color: oklch(1 0 0 / 0.72); margin-top: 0.15rem; }

/* Steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 1.8rem); }
.steps--5 { grid-template-columns: repeat(5, 1fr); }
.step { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.3rem, 3vw, 1.8rem); box-shadow: var(--shadow-sm); }
.step__num { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-btn); background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; }
.step h3 { font-size: 1.18rem; }
.step p { color: var(--muted); margin-top: 0.4rem; font-size: 0.97rem; }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.2rem, 2.5vw, 1.8rem); }
.review { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.review__stars { color: var(--star-ink); letter-spacing: 1px; margin-bottom: 0.8rem; }
.review blockquote { font-size: 1.05rem; }
.review figcaption { margin-top: auto; padding-top: 1rem; font-weight: 700; color: var(--brand-ink); font-size: 0.92rem; font-family: var(--font-display); }

/* Areas */
.areas__inner { display: grid; gap: 1.6rem; }
.areas { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.areas li { font-size: 0.9rem; font-weight: 600; padding: 0.45rem 0.9rem; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); }

/* Booking */
.book { background: var(--brand); color: oklch(1 0 0 / 0.95); padding-block: var(--space-section); }
.book__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.book__copy h2 { color: #fff; font-size: clamp(2rem, 4vw, 2.8rem); }
.book__copy p { margin-top: 0.9rem; font-size: 1.1rem; color: oklch(1 0 0 / 0.9); max-width: 42ch; }
.book__phone { display: inline-block; margin-top: 1.4rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.5rem); color: #fff; text-decoration: none; }
.book__hours { margin-top: 0.4rem; font-size: 0.95rem; color: oklch(1 0 0 / 0.82); }
.form--book { background: var(--bg); padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* Urgency band — deep-coral punctuation between service area and FAQ */
.urgency { background: var(--band); color: var(--on-band); }
.urgency__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 2.5rem; padding-block: clamp(2.2rem, 5vw, 3.2rem); }
.urgency__text { max-width: 62ch; }
.urgency h2 { color: var(--on-band); font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.urgency .hl { color: var(--hl-on-dark); }
.urgency p { margin-top: 0.6rem; color: color-mix(in srgb, var(--on-band) 88%, transparent); }
.urgency__btn { flex: none; background: var(--on-band); color: var(--band); box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 34%, transparent); }
.urgency__btn:hover { background: color-mix(in srgb, var(--on-band) 94%, var(--ink)); transform: translateY(-2px); }
.urgency__btn:active { transform: translateY(0); }

/* Footer */
.footer { background: var(--dark); color: oklch(1 0 0 / 0.72); }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.footer__brand .brand__name { color: #fff; font-size: 1.35rem; }
.footer__brand p { margin-top: 0.6rem; max-width: 32ch; }
.footer__col h2, .footer__col h3 { font-family: var(--font-display); color: #fff; font-size: 1rem; margin-bottom: 0.8rem; }
.footer__col a, .footer__col span { display: block; text-decoration: none; color: oklch(1 0 0 / 0.72); font-size: 0.95rem; margin-bottom: 0.5rem; }
.footer__col a:hover { color: #fff; }
.footer__legal { border-top: 1px solid oklch(1 0 0 / 0.12); padding-block: 1.2rem; font-size: 0.85rem; color: oklch(1 0 0 / 0.6); }

/* Sticky mobile call bar */
.callbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-callbar); background: var(--cta); color: var(--on-cta); text-align: center; font-family: var(--font-display); font-weight: 700; padding: 0.95rem; text-decoration: none; box-shadow: var(--shadow-up); }

/* Motion */
.reveal { opacity: 1; }
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
html.gsap .reveal { opacity: 1; transform: none; transition: none; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } .btn, .nav__links a, input, select, textarea { transition: none; } }

/* Responsive */
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .book__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hero__inner { grid-template-columns: 1fr; }
  .proof__inner { justify-content: flex-start; }
  .callbar { display: block; }
  body { padding-bottom: 56px; }
  .footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .form__row { grid-template-columns: 1fr; } }

/* ── FAQ accordion ─────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); align-items: start; gap: 0.85rem 1rem; }
.faq__item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq__item[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); box-shadow: var(--shadow); }
.faq__item > summary {
  list-style: none; cursor: pointer; padding: 1.15rem 1.35rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:focus-visible { outline: 2px solid var(--cta); outline-offset: -3px; }
.faq__item > summary::after {
  content: "+"; flex: none; display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: 1.3rem; font-weight: 700; line-height: 1;
  transition: transform 0.25s var(--ease), background-color 0.2s var(--ease);
}
.faq__item[open] > summary::after { transform: rotate(45deg); }
.faq__item > summary:hover { color: var(--brand-ink); }
.faq__item > summary:hover::after { background: color-mix(in srgb, var(--brand) 20%, var(--brand-soft)); }
.faq__a { margin: 0 1.35rem; padding: 0.9rem 0 1.35rem; border-top: 1px solid var(--border); color: var(--muted); line-height: 1.65; }
.faq__a p { max-width: none; margin: 0; }
.faq__a p + p { margin-top: 0.7rem; }

/* ── Blog cards ────────────────────────────────────────────────── */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.post-card {
  display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.4rem; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post-card__tag {
  align-self: flex-start; font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand-ink);
  background: var(--brand-soft); border-radius: var(--radius-pill); padding: 0.2rem 0.7rem;
}
.post-card h2, .post-card h3 { color: var(--ink); font-size: 1.15rem; line-height: 1.3; }
.post-card p { color: var(--muted); flex: 1; }
.post-card .link { margin-top: 0.25rem; }

/* ── Article (blog post) ───────────────────────────────────────── */
.crumbs { font-size: 0.9rem; color: var(--muted); padding: 1.5rem 0 0; }
.crumbs a { color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.article { max-width: 46rem; margin: 0 auto; padding: 1.5rem 0 var(--space-section); }
.article__head { margin-bottom: 2rem; }
.article__tag {
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--brand-ink); background: var(--brand-soft); border-radius: var(--radius-pill); padding: 0.2rem 0.7rem;
}
.article h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.1; margin: 0.9rem 0 0.6rem; }
.article__meta { color: var(--muted); font-size: 0.92rem; }
.article__body > * + * { margin-top: 1.1rem; }
.article__body h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-top: 2.2rem; }
.article__body p, .article__body li { color: var(--ink); font-size: 1.08rem; line-height: 1.7; }
.article__body ul, .article__body ol { padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.article__cta {
  margin-top: 2.5rem; background: var(--brand-soft); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.6rem; text-align: center;
}
.article__cta h2 { margin-top: 0; }
.article__cta p { color: var(--muted); margin: 0.5rem 0 1.2rem; }
.post-list { display: grid; gap: 1.1rem; max-width: 46rem; margin: 0 auto; padding-bottom: 1rem; }

.contact__line { margin-top: 0.4rem; }
.contact__line a { color: inherit; }

/* Service-area page */
.area-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.area-block { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.area-block h2 { font-size: 1.2rem; line-height: 1.25; }
.area-block p { color: var(--muted); margin: 0.5rem 0 0.8rem; font-size: 0.97rem; }
.map-embed { margin-top: 1.5rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16 / 7; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.areas__more { margin-top: 1.1rem; }

/* Internal cross-links on area / service pages */
.xsection { max-width: 46rem; margin: 2.5rem auto 0; }
.xsection h2 { font-size: 1.2rem; margin-bottom: 0.8rem; }
.xlinks { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.5rem 1.25rem; padding: 0; }
.xlinks a { color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.xlinks a:hover { text-decoration: underline; }

/* Reviews section hidden until the prospect has real Google reviews */
#reviews:not([data-has-reviews="1"]) { display: none; }

/* reviews carousel — exactly 3 up (2 tablet, 1 mobile), circular arrow nav */
.reviews-carousel { position: relative; padding-inline: 54px; }
.reviews-carousel .reviews {
  --rgap: clamp(0.9rem, 2vw, 1.4rem);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--rgap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews-carousel .reviews::-webkit-scrollbar { display: none; }
.reviews-carousel .review {
  flex: 0 0 calc((100% - 2 * var(--rgap)) / 3);
  scroll-snap-align: start;
}
@media (max-width: 860px) { .reviews-carousel .review { flex-basis: calc((100% - var(--rgap)) / 2); } }
@media (max-width: 560px) { .reviews-carousel .review { flex-basis: 100%; } }
.reviews-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.reviews-nav:hover { transform: translateY(-50%) scale(1.06); }
.reviews-nav--prev { left: 0; }
.reviews-nav--next { right: 0; }
.reviews-nav[hidden] { display: none; }
@media (max-width: 560px) {
  .reviews-carousel { padding-inline: 42px; }
  .reviews-nav { width: 38px; height: 38px; font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-carousel .reviews { scroll-behavior: auto; }
  .reviews-nav { transition: none; }
}

/* service-area (#areas): two-column; the map card stretches to the text column
   height and the map fills it (no dead space, top-aligned with the heading).
   Scoped to #areas so shared .areas__inner sections (e.g. #makes) are untouched. */
#areas .areas__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
#areas .areas__text { display: grid; gap: clamp(1.3rem, 3vw, 2rem); align-content: start; }
.map-card { margin: 0; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.map-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border); }
.map-card__label { display: block; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.map-card__addr { display: block; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.map-card__link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 700; color: var(--brand); text-decoration: none; white-space: nowrap; }
.map-card__link:hover { text-decoration: underline; }
.map-card .map-embed { margin: 0; border: 0; border-radius: 0; flex: 1 1 auto; min-height: 340px; aspect-ratio: auto; }
.map-card .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 780px) {
  #areas .areas__inner { grid-template-columns: 1fr; align-items: start; }
  .map-card .map-embed { flex: none; aspect-ratio: 16 / 11; min-height: 0; }
}

/* coverage map (MapLibre + Carto) fills the map card; the canvas is absolutely
   positioned so it fills #coverage-map regardless of flex/aspect-ratio height. */
#coverage-map { position: relative; }
#coverage-map .maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
#coverage-map .maplibregl-marker { cursor: pointer; }
#coverage-map .maplibregl-popup-content { font-weight: 700; font-size: 0.85rem; color: var(--ink); padding: 0.4rem 0.65rem; border-radius: var(--radius); }
#coverage-map .maplibregl-ctrl-attrib { font-size: 10px; }


/* ============================================================================
   BLOG POST LAYOUT v2 — shared, color-agnostic post template
   Structure + typography only. Every colour is pulled from this template's own
   tokens (--bg / --surface / --surface-2 / --border / --ink / --muted /
   --brand / --brand-ink / --brand-soft / --cta / --on-cta / --live), so each
   site keeps its own identity. --live falls back to --brand where a palette
   defines no success colour. Fonts inherit --font-display / --font-body.
   Used by _partials/blog-post.html (fanned out to blog/<slug>.html).
   ========================================================================== */
.post { --post-measure: 45rem; }

/* Hero — centered, with an optional soft accent glow behind it */
.post__hero { position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(2.4rem, 6vw, 4.2rem) 0 clamp(1.4rem, 4vw, 2.2rem); }
.post__hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 66% at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 72%); }
.post__hero-inner { max-width: var(--post-measure); text-align: center; }

.post__kicker { display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-ink);
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: var(--radius-pill); padding: 0.32rem 0.85rem; }
.post__title { font-family: var(--font-display); font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.08; letter-spacing: -0.02em; margin: 1.1rem auto 0.7rem; max-width: 20ch; text-wrap: balance; }
.post__subhead { color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.5;
  max-width: 52ch; margin: 0 auto; text-wrap: pretty; }

/* Byline meta row: avatar + author + category + read time */
.post__byline { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.6rem; text-align: left; }
.post__avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--brand-ink); color: var(--on-cta); font-family: var(--font-display); font-weight: 800;
  font-size: 0.95rem; letter-spacing: 0.01em; flex: none; }
.post__byline-lines { display: flex; flex-direction: column; gap: 0.12rem; }
.post__author { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); line-height: 1.2; }
.post__byline-meta { font-size: 0.82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; }
.post__cat { color: var(--brand-ink); font-weight: 600; }
.post__dot { opacity: 0.55; }

/* At-a-glance stat row (server omits it when a post has no key numbers) */
.stat-row { max-width: var(--post-measure); display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 2vw, 1.1rem); margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.4rem) 1rem; text-align: center; box-shadow: var(--shadow-sm); }
.stat-card__num { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.35rem); line-height: 1; letter-spacing: -0.02em; color: var(--brand-ink); }
.stat-card__label { display: block; margin-top: 0.45rem; font-size: 0.82rem; color: var(--muted); line-height: 1.3; }

/* Body column — single centered measure, ~18px body, generous line-height */
.post__wrap { max-width: var(--post-measure); padding-top: clamp(2rem, 5vw, 3rem); padding-bottom: var(--space-section); }
.prose { font-size: 1.125rem; line-height: 1.7; color: var(--ink); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.9vw, 1.8rem);
  line-height: 1.18; letter-spacing: -0.01em; font-weight: 700; margin-top: 2.4rem; }
.prose h3 { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.45rem); font-weight: 700; margin-top: 1.9rem; }
.prose p, .prose li { color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--brand-ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: 0.55rem; }
.prose li::marker { color: var(--brand); }
.prose img { border-radius: var(--radius); border: 1px solid var(--border); }
/* Larger opening paragraph (auto-applied; .lede also available explicitly) */
.prose > p:first-of-type, .prose .lede { font-size: clamp(1.18rem, 2.4vw, 1.38rem); line-height: 1.55; color: var(--ink); }

/* Reusable content blocks (colour-agnostic; usable inside the post body) */
/* Callout — takeaway box with an accent left-bar; bare <blockquote> gets it too */
.prose blockquote, .callout { margin-top: 1.6rem; padding: 1.1rem 1.3rem; background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink); }
.prose blockquote { font-size: 1.08rem; }
.prose blockquote > :first-child, .callout > :first-child { margin-top: 0; }

/* Requirement checklist — success-tinted cards, each with a check icon */
.checklist { list-style: none; padding: 0; display: grid; gap: 0.7rem; margin-top: 1.6rem; }
.checklist li { position: relative; padding: 0.85rem 1rem 0.85rem 2.9rem;
  background: color-mix(in srgb, var(--live) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--live) 24%, var(--border));
  border-radius: var(--radius); color: var(--ink); }
.checklist li::before { content: "\2713"; position: absolute; left: 0.9rem; top: 0.82rem;
  display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--live); color: var(--bg); font-size: 0.82rem; font-weight: 800; line-height: 1; }

/* Emphasis box — a filled surface panel for a key point or big stat */
.emphasis { margin-top: 1.6rem; padding: clamp(1.2rem, 3vw, 1.6rem); border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); }
.emphasis > :first-child { margin-top: 0; }
.emphasis__big { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; color: var(--brand-ink); }

/* CTA panel — filled rounded card with an accent phone button (also restyles
   any .article__cta a post body embeds, so both match) */
.post__cta, .article__cta { margin-top: clamp(2.2rem, 5vw, 3rem); text-align: center;
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.4rem); }
.post__cta h2, .article__cta h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-top: 0; color: var(--ink); }
.post__cta p, .article__cta p { color: var(--muted); margin: 0.6rem auto 1.3rem; max-width: 44ch; }
.post__cta .post__cta-sub { margin: 0.9rem auto 0; max-width: none; font-size: 0.85rem; font-weight: 600; color: var(--muted); }

/* Related posts foot (reuses the shared .xlinks list styling) */
.post__more { margin-top: clamp(2.2rem, 5vw, 3rem); padding-top: 1.8rem; border-top: 1px solid var(--border); }
.post__more > h2 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 1rem; }

/* "Not legal advice" note in the footer (law/pricing posts only) */
.post__disclaimer { padding-block: 1rem; }
.post__disclaimer .wrap { font-size: 0.82rem; font-style: italic; }

@media (max-width: 640px) { .stat-row { grid-template-columns: 1fr; } }
/* end BLOG POST LAYOUT v2 */


/* ── MOTION SYSTEM ─────────────────────────────────────────────────
   Thesis: an estimate is written, then handed over. Three registers, one
   curve (--ease), and nothing here is load-bearing — the page is complete
   and readable before a script runs.

     written    section headings are laid down left-to-right, like ink
     settle     content arrives quietly; siblings that read as a list
                stagger as one, with the total delay capped
     handoff    the lead form's success is the one authored sequence,
                and it is CSS-only so it never depends on the GSAP CDN

   `html.motion` is set by main.js only when it takes over motion, so a
   reduced-motion visitor gets the native, un-animated behavior instead of
   a half-applied one. Feedback states below stay under 200ms. */

/* Press: the surface acknowledges the tap before the network does. */
.btn:active { transform: scale(0.985); }
.btn--cta:active { transform: translateY(0) scale(0.985); }
.callbar { transition: background-color 0.15s var(--ease), transform 0.15s var(--ease); }
.callbar:active { background: var(--cta-press); transform: translateY(1px); }
.reviews-nav:active { transform: translateY(-50%) scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn--cta:active, .callbar:active { transform: none; }
  .callbar { transition: none; }
  .reviews-nav:active { transform: translateY(-50%); }
}

/* Working: the submit button holds a drawn arc while the lead is in flight,
   so a slow network reads as progress rather than a dead control. */
.btn[data-busy] { pointer-events: none; }
.btn[data-busy]::before {
  content: ""; flex: none; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: btn-working 0.7s linear infinite;
}
@keyframes btn-working { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[data-busy]::before { animation-duration: 2.2s; } }

/* Sticky nav: the frame earns its shadow only once the page moves under it. */
.nav { transition: box-shadow 0.24s var(--ease); }
.nav.is-stuck { box-shadow: var(--shadow-sm); }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* Mobile nav: the links deal out on open. Closing is instant — an exit
   should never make someone wait, and display:none keeps the closed links
   out of the tab order entirely. */
@media (max-width: 860px) {
  html.motion .nav--open .nav__links a { animation: nav-deal 0.3s var(--ease) both; }
  html.motion .nav--open .nav__links a:nth-child(2) { animation-delay: 0.03s; }
  html.motion .nav--open .nav__links a:nth-child(3) { animation-delay: 0.06s; }
  html.motion .nav--open .nav__links a:nth-child(4) { animation-delay: 0.09s; }
  html.motion .nav--open .nav__links a:nth-child(5) { animation-delay: 0.11s; }
  html.motion .nav--open .nav__links a:nth-child(n + 6) { animation-delay: 0.13s; }
}
@keyframes nav-deal { from { opacity: 0; transform: translateY(-7px); } }

/* FAQ: <details> keeps the semantics and the no-JS behavior; when main.js
   takes over, the item's own height is animated so the answer opens instead
   of snapping. main.js animates the <details> box rather than the answer
   inside it: the UA wraps disclosure content in a ::details-content box that
   is render-skipped while closed, and animations on anything inside it report
   stale geometry and never tick. .faq__item already clips with overflow:hidden.
   The + turns back the moment a collapse starts, not when it finishes. */
html.motion .faq__item[data-collapsing] > summary::after { transform: none; }

/* Reviews carousel: the wrap from last back to first is a jump, so dim the
   track across it — the reset reads as deliberate instead of as a glitch. */
.reviews-carousel .reviews { transition: opacity 0.15s var(--ease); }
.reviews-carousel[data-wrapping] .reviews { opacity: 0.25; }
@media (prefers-reduced-motion: reduce) {
  .reviews-carousel .reviews { transition: none; }
  .reviews-carousel[data-wrapping] .reviews { opacity: 1; }
}

/* ── The handoff ───────────────────────────────────────────────────
   The one authored sequence on the page, and the only place it could be
   worth ~700ms: the form is handed back, the receipt is stamped, the
   check is drawn, and the phone number is the last thing to land. */
html.motion .form.is-handing-off { opacity: 0; transform: translateY(-6px); transition: opacity 0.17s var(--ease), transform 0.17s var(--ease); }

.form-success { text-align: center; padding: 1.75rem 0.5rem; }
.form-success:focus { outline: none; }
.form-success:focus-visible { outline: 3px solid var(--cta); outline-offset: 4px; border-radius: var(--radius); }
.form-success__ring { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 50%; background: var(--live); }
.form-success h3 { font-size: 1.4rem; margin: 0 0 0.5rem; }
.form-success p { color: var(--muted); margin: 0 0 0.35rem; }
.form-success p:last-child { margin-bottom: 0; }
.form-success a { color: inherit; font-weight: 700; }
.section--dark .form-success p, .book .form-success p { color: var(--muted); }

html.motion .form-success__ring { animation: fs-stamp 0.42s var(--ease) both; }
html.motion .form-success__check { stroke-dasharray: 30; stroke-dashoffset: 30; animation: fs-draw 0.4s var(--ease) 0.22s both; }
html.motion .form-success__line { animation: fs-land 0.42s var(--ease) both; }
html.motion .form-success__line:nth-child(2) { animation-delay: 0.3s; }
html.motion .form-success__line:nth-child(3) { animation-delay: 0.37s; }
html.motion .form-success__line:nth-child(4) { animation-delay: 0.44s; }
@keyframes fs-stamp { from { opacity: 0; transform: scale(0.72); } }
@keyframes fs-draw { to { stroke-dashoffset: 0; } }
@keyframes fs-land { from { opacity: 0; transform: translateY(9px); } }
/* end MOTION SYSTEM */

/* Answer block — the AEO extraction unit.
   The first paragraph of a generated area page is a 40-60 word, self-contained
   answer written to be quoted whole by an answer engine. Giving it a visible
   identity serves both readers (the answer is above the fold, not buried) and
   the `speakable` SpeakableSpecification in the page schema, which points at
   this exact selector. Colours come from each template's own tokens so the
   block belongs to its site rather than importing a foreign accent. */
.answer {
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1rem 1.2rem;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink);
}
.article__body > .answer:first-child { margin-top: 0; }

/* "We also cover" card on the service-areas grid.
   Areas without their own page are listed here rather than each getting a card
   with an identical generic paragraph — that repeated the same sentence once per
   area (11 times on a 17-area site) and made the grid look half-finished, with
   some cards linking and some not for reasons a visitor can't see. */
.area-block--list { grid-column: 1 / -1; }
.area-list {
  list-style: none; margin: 0.6rem 0 0.9rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem;
}
.area-list li {
  background: var(--brand-soft); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 0.3rem 0.75rem;
  font-size: 0.92rem; color: var(--ink);
}

/* Citable fact table on answer pages.
   Answer engines quote numbers, and marked-up rows are the most liftable shape
   for a set of them. Scrolls inside its own container so a wide price table on a
   phone never makes the whole page scroll sideways. */
.fact-table__scroll { overflow-x: auto; margin: 1.4rem 0; -webkit-overflow-scrolling: touch; }
.fact-table { width: 100%; min-width: 22rem; border-collapse: collapse; font-size: 0.97rem; }
.fact-table caption {
  caption-side: top; text-align: left; padding-bottom: 0.6rem;
  font-size: 0.9rem; color: var(--muted); line-height: 1.45;
}
.fact-table th, .fact-table td {
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); text-align: left;
  font-variant-numeric: tabular-nums;
}
.fact-table thead th {
  font-family: var(--font-display); background: var(--surface);
  white-space: nowrap; font-size: 0.9rem;
}
.fact-table tbody th { font-weight: 600; }
.fact-table tbody tr:last-child th, .fact-table tbody tr:last-child td { border-bottom: 0; }

/* ── Skin: Vodafone ─────────────────────────────────────────────────────────
   Two moves, no more, and both exist to fix what the previous skin got wrong.
   (1) PHOTOGRAPHY-FIRST HERO: the scrim drops back hard on the right so the
   crew-and-equipment photograph reads as the hero instead of sitting under an
   abstract wash. It stays heavy on the left, where the headline lives, so the
   contrast is unchanged — legibility is bought with a gradient, not with a
   blanket. (2) Massive uppercase display against a scarlet emergency band: on
   a 24/7 trade the band has to be the loudest thing on the page, and under the
   previous skin it was the same navy as the topbar and the footer.
   Structure, motion contract and class vocabulary are untouched.
   ─────────────────────────────────────────────────────────────────────────── */
.hero__scrim {
  background: linear-gradient(95deg,
    color-mix(in srgb, var(--dark) 88%, transparent) 0%,
    color-mix(in srgb, var(--dark) 78%, transparent) 38%,
    color-mix(in srgb, var(--dark) 40%, transparent) 68%,
    color-mix(in srgb, var(--dark) 12%, transparent) 100%);
}
.hero h1, .lede h2, .book__copy h2 { text-transform: uppercase; font-weight: 800; letter-spacing: -0.005em; line-height: 0.98; }
.hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.8rem); }
.btn, .callbar { text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em; }