/* =========================================================================
   SKELETON. Identical in every site built from the Remote360 pool template:
   diff this file against the template's copy and any output is real drift.
   The brand lives in tokens.css and a site's own look lives in skin.css.
   Design system. All colour and type comes from tokens.css.
   ========================================================================= */

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip`, never `hidden`. On a body, `overflow-x: hidden` computes to
     `hidden auto` and makes the BODY the scroll container instead of the
     document. Every anchor link then silently stops working: the browser
     scrolls a viewport that is not the one that scrolls, so `#some-id` and
     window.scrollTo() both do nothing and the visitor lands at the top of the
     page. `clip` gives the same protection against a stray horizontal
     scrollbar without creating a scroll container. */
  overflow-x: clip;
  /* Keeps the fixed mobile CTA bar from covering the footer. */
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--ctabar-h) + env(safe-area-inset-bottom)); }
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--surface-mist); }
/* That tint is a placeholder for a photograph that has not loaded yet. An
   image with an alpha channel must opt out of it, or the tint shows through
   every transparent pixel and a cutout logo sits in a pale blue box. */
img.img-alpha { background: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---- Type -------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--text-strong);
  text-wrap: balance;
}
/* The hero H1 is large and LIGHT. Weight is what made this feel bulky before. */
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  /* Tight tracking closes the spaces between words too, so add it back. */
  word-spacing: 0.06em;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-lead); font-weight: var(--fw-h3); line-height: var(--lh-h3); }

/* An accent phrase inside a heading, the way the reference site colours the
   middle words of a centred H2. */
.hl { color: var(--brand-primary); }
[data-surface="ink"] .hl, [data-surface="gradient"] .hl, .on-dark .hl { color: var(--brand-accent); }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--brand-primary-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-primary); }

strong { color: var(--text-strong); font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-ink); color: var(--text-on-dark);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* ---- Layout primitives ------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-s); }

.prose { max-width: var(--max-w-text); }
.prose h2 { margin-top: 1.9em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; }
.prose p, .prose ul, .prose ol { margin-top: 1em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.45em; }

.stack > * + * { margin-top: var(--stack-gap, 1rem); }

/* =========================================================================
   SURFACE RHYTHM
   The fix for the one-flat-background problem. A page alternates surfaces so
   the eye gets a boundary at every section. Pair with data-surface in the
   page builder, which enforces that two neighbours never match.
   ========================================================================= */
[data-surface="white"]    { background: var(--surface-white); }
[data-surface="paper"]    { background: var(--surface-paper); }
[data-surface="mist"]     { background: var(--surface-mist); }
[data-surface="sand"]     { background: var(--surface-sand); }
[data-surface="ink"]      { background: var(--surface-ink); }
[data-surface="gradient"] { background: var(--surface-gradient); }

/* Inverted surfaces flip every text token at once. */
[data-surface="ink"], [data-surface="gradient"], .on-dark {
  --text-strong: var(--text-on-dark);
  --text-body:   var(--text-on-dark-soft);
  --text-muted:  var(--text-on-dark-soft);
  --line:        var(--line-on-dark);
  --line-strong: rgba(255, 255, 255, 0.28);
  color: var(--text-on-dark-soft);
}
[data-surface="ink"] a:not(.btn),
[data-surface="gradient"] a:not(.btn),
.on-dark a:not(.btn) { color: var(--brand-white); }

/* Inverted sections carry a soft light source so they are not flat slabs. */
[data-surface="ink"]::before,
[data-surface="gradient"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 12% 0%,   rgba(var(--brand-accent-rgb), 0.16), transparent 60%),
    radial-gradient(52% 70% at 92% 100%, rgba(var(--brand-primary-rgb), 0.26),  transparent 62%);
}
[data-surface="ink"] > *, [data-surface="gradient"] > * { position: relative; z-index: 1; }

/* Hairline between two light neighbours, so the boundary reads even when the
   two surfaces are close in value. */
.section--edge-top { border-top: 1px solid var(--line); }

/* =========================================================================
   COMPONENTS
   ========================================================================= */

/* ---- Eyebrow ----------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 0.75rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--brand-accent);
}
.on-dark .eyebrow, [data-surface="ink"] .eyebrow, [data-surface="gradient"] .eyebrow {
  color: var(--brand-accent);
}

/* ---- Section head ------------------------------------------------------ */
.sec-head { max-width: 800px; margin-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow::before { display: none; }
.sec-head p { margin-top: 0.9rem; font-size: var(--fs-lead); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-head);
  font-weight: var(--fw-btn);
  font-size: var(--fs-small);
  line-height: 1;
  min-height: 52px;
  padding: 0.5rem 2rem;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
/* The lift only where a hover exists: on a phone a tap would leave the button
   stuck lifted. Press feedback everywhere, so the interface visibly hears the tap. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary {
  background: var(--brand-primary); color: var(--brand-white);
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover { background: var(--brand-primary-dk); color: var(--brand-white); }

.btn--accent {
  background: var(--brand-accent); color: var(--brand-ink);
  box-shadow: 0 6px 18px rgba(var(--brand-accent-rgb), 0.32);
}
.btn--accent:hover { background: var(--brand-accent-dk); color: var(--brand-ink); }

.btn--ghost {
  background: transparent; color: var(--text-strong); border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: transparent; }

.btn--on-dark { background: rgba(255,255,255,0.10); color: var(--brand-white); border-color: rgba(255,255,255,0.32); }
.btn--on-dark:hover { background: rgba(255,255,255,0.18); color: var(--brand-white); }

.btn--white { background: var(--brand-white); color: var(--brand-ink); }
.btn--white:hover { background: var(--surface-mist); color: var(--brand-ink); }

.btn--lg { min-height: 56px; padding: 0.6rem 2.25rem; font-size: var(--fs-lead); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* ---- Cards ------------------------------------------------------------- */
.card {
  background: var(--surface-white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.on-dark .card, [data-surface="ink"] .card, [data-surface="gradient"] .card {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--line-on-dark);
  backdrop-filter: blur(10px);
  box-shadow: none;
}
a.card { text-decoration: none; display: block; color: inherit; }
a.card:hover, .card--hover:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--brand-primary-rgb), 0.35);
}
@media (hover: hover) and (pointer: fine) {
  a.card:hover, .card--hover:hover { transform: translateY(-4px); }
}
.card h3 { margin-bottom: 0.55rem; }
.card p { font-size: var(--fs-body); }

.card__ico {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--surface-mist); color: var(--brand-primary);
}
.card__ico svg { width: 24px; height: 24px; }
.on-dark .card__ico, [data-surface="ink"] .card__ico, [data-surface="gradient"] .card__ico {
  background: rgba(var(--brand-accent-rgb), 0.16); color: var(--brand-accent);
}

.card__more {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.1rem; font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-fine); color: var(--brand-primary);
}
.card__more svg { width: 1em; height: 1em; transition: transform 0.22s var(--ease); }
a.card:hover .card__more svg { transform: translateX(4px); }

/* ---- Grid -------------------------------------------------------------- */
.grid { --grid-gap: clamp(1rem, 0.8rem + 0.7vw, 1.6rem); display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---- Media frame ------------------------------------------------------- */
.frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  background: var(--surface-mist);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--square { aspect-ratio: 1 / 1; }

.frame__tag {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--brand-ink);
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-fine); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.5rem 0.9rem; border-radius: var(--r-pill);
}

/* =========================================================================
   HEADER
   One row, not two. The reference site stacks a utility bar over a nav bar
   and burns 120px of a phone screen before any content appears.
   ========================================================================= */
.topbar {
  background: var(--brand-ink);
  color: var(--text-on-dark-soft);
  font-size: var(--fs-fine);
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 38px; padding-block: 0.4rem;
}
.topbar__item { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.topbar__item svg { width: 15px; height: 15px; color: var(--brand-accent); flex: none; }
.topbar a { color: var(--brand-white); text-decoration: none; }
@media (max-width: 860px) { .topbar { display: none; } }

.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, 0.96); }

.header__in {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand svg { height: 40px; width: auto; }
@media (max-width: 400px) { .brand svg { height: 34px; } }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
.nav__link {
  display: block; padding: 0.55rem 0.8rem; border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight: 650; font-size: var(--fs-fine);
  color: var(--text-strong); text-decoration: none; white-space: nowrap;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav__link:hover { color: var(--brand-primary); background: var(--surface-mist); }
.nav__link[aria-current="page"] { color: var(--brand-primary); }

.header__cta { display: flex; align-items: center; gap: 1.35rem; flex: none; }

/* Mobile drawer CTA. Hidden until the nav becomes a drawer. */
.nav__drawer-cta { display: none; }
.header__phone {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem;
  color: var(--brand-ink); text-decoration: none; white-space: nowrap;
  letter-spacing: -0.01em;
}
.header__phone svg { width: 17px; height: 17px; color: var(--brand-primary); flex: none; }
.header__phone:hover { color: var(--brand-primary); }
.header .btn { min-height: 46px; padding: 0.5rem 1.6rem; font-size: 0.9375rem; font-weight: 600; }

/* Mobile nav */
.nav__toggle {
  display: none;
  width: 44px; height: 44px; border: 1px solid var(--line-strong);
  border-radius: var(--r-md); background: transparent;
  align-items: center; justify-content: center; color: var(--brand-ink);
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .ico-close { display: none; }
.nav__toggle[aria-expanded="true"] .ico-open { display: none; }
.nav__toggle[aria-expanded="true"] .ico-close { display: block; }

/* Seven nav items plus the phone and the quote button need about 1250px of
   header to sit comfortably inside the content gutter. Below that the nav
   becomes a drawer, otherwise the CTA crowds the edge and eventually
   overflows the viewport entirely. */
@media (max-width: 1279px) {
  /* A backdrop-filter makes an element a containing block for fixed-position
     descendants, which trapped the drawer inside the 68px header box. Drop the
     frosted glass at drawer widths so .nav resolves against the viewport. */
  .header { backdrop-filter: none; background: var(--surface-white); }
  .header.is-stuck { background: var(--surface-white); }

  .nav__toggle { display: inline-flex; order: 3; }
  .header__cta .btn { display: none; }
  .header__phone span { display: none; }
  .header__phone {
    width: 44px; height: 44px; justify-content: center;
    border-radius: var(--r-md); background: var(--brand-primary); color: var(--brand-white);
  }
  .header__phone svg { color: var(--brand-white); width: 20px; height: 20px; }
  .header__cta { margin-left: auto; order: 2; }
  .nav {
    position: fixed; inset: calc(var(--header-h)) 0 0 0;
    height: calc(100dvh - var(--header-h));
    z-index: 89;
    background: var(--surface-white);
    padding: 1.25rem var(--gutter) 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    margin-left: 0;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: 1rem 0.25rem; font-size: var(--fs-lead);
    border-bottom: 1px solid var(--line); border-radius: 0;
  }
  .nav__link:hover { background: transparent; }
  .nav__drawer-cta { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
}

/* =========================================================================
   HERO
   Two variants, same markup, one class on <body>.
   ========================================================================= */
.hero { position: relative; overflow: hidden; }
.hero__in {
  display: grid; gap: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.75rem, 2rem + 3.6vw, 5.5rem);
}
@media (min-width: 900px) { .hero__in { grid-template-columns: 1.05fr 0.95fr; } }

.hero h1 { margin-bottom: 1.1rem; }
.hero__sub { font-size: var(--fs-lead); max-width: 34ch; }
.hero__badges {
  display: flex; flex-wrap: nowrap; justify-content: space-between;
  gap: 0.4rem; margin-top: 1.6rem;
}
@media (min-width: 900px) { .hero__badges { justify-content: flex-start; gap: 1.25rem; } }
.hero__badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: clamp(0.7rem, 0.6rem + 0.42vw, 0.875rem);
  font-weight: 600; white-space: nowrap; min-width: 0;
}
.hero__badge svg {
  width: clamp(13px, 11px + 0.55vw, 17px); height: clamp(13px, 11px + 0.55vw, 17px);
  color: var(--brand-accent); flex: none;
}
@media (min-width: 900px) { .hero__badge { gap: 0.45rem; } }

.rating-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.95rem; border-radius: var(--r-pill);
  background: var(--surface-white); border: 1px solid var(--line);
  font-size: var(--fs-fine); font-weight: 600; color: var(--text-strong);
  margin-bottom: 1.4rem; text-decoration: none; box-shadow: var(--shadow-sm);
}
.rating-chip .stars { color: #F5A623; letter-spacing: 1px; }
.on-dark .rating-chip,
body.hero--image .hero__copy .rating-chip {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.30);
  color: var(--brand-white);
  backdrop-filter: blur(8px);
  box-shadow: none;
}

/* Variant A: split, light background with a soft mesh so it is not flat */
body.hero--split .hero {
  background: var(--surface-paper);
  border-bottom: 1px solid var(--line);
}
body.hero--split .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(48% 62% at 88% 8%,  rgba(var(--brand-primary-rgb), 0.14), transparent 62%),
    radial-gradient(42% 56% at 4% 92%,  rgba(var(--brand-accent-rgb), 0.13), transparent 60%);
}
body.hero--split .hero__in { position: relative; z-index: 1; }
body.hero--split .hero__media { display: block; margin-bottom: 1.25rem; }
body.hero--split .hero__aside { display: flex; flex-direction: column; }

/* Variant B: full-bleed photograph with a scrim */
body.hero--image .hero { background: var(--brand-ink); }
body.hero--image .hero__bg { position: absolute; inset: 0; }
body.hero--image .hero__bg picture { display: block; width: 100%; height: 100%; }
body.hero--image .hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Optional timelapse clip over the still (site.heroVideo). Hidden until it is
   actually playing, so a refused autoplay or a slow fetch shows the still and
   nothing else. Fades in fast, fades back out slowly once it ends: the still
   is the sharper image and is what the visitor is left with. Never for
   reduced-motion; site.js does not even fetch it there. Not scoped to the
   image hero: the split hero's photo card can carry the phone clip too. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s ease; pointer-events: none;
}
.hero__video.is-playing { opacity: 1; transition-duration: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
/* Two clips can be declared: one over the full-bleed background, one over the
   photo card. Only the surface that is actually on screen at this width gets
   its clip, so a phone never fetches the desktop file and a desktop never
   fetches the phone one. The card's clip stays where the card itself stays
   on screen, which on the split hero is every width. */
@media (max-width: 899px) { .hero__video[data-when="wide"] { display: none; } }
@media (min-width: 900px) {
  body.hero--image .hero__video[data-when="narrow"] { display: none; }
  /* A split hero's card carries both encodes; from 900px the wide one plays. */
  .hero__video[data-when="wide"] ~ .hero__video[data-when="narrow"] { display: none; }
}
body.hero--image .hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(var(--brand-ink-rgb), 0.94) 0%, rgba(var(--brand-ink-rgb), 0.80) 38%, rgba(var(--brand-ink-rgb), 0.42) 68%, rgba(var(--brand-ink-rgb), 0.30) 100%),
    linear-gradient(to top, rgba(var(--brand-ink-rgb), 0.55), transparent 42%);
}
@media (max-width: 899px) {
  body.hero--image .hero__bg::after {
    background: linear-gradient(to bottom, rgba(var(--brand-ink-rgb), 0.80) 0%, rgba(var(--brand-ink-rgb), 0.90) 55%, rgba(var(--brand-ink-rgb), 0.96) 100%);
  }
}
body.hero--image .hero__in { position: relative; z-index: 1; }
body.hero--image .hero__copy { --text-strong: var(--text-on-dark); --text-body: var(--text-on-dark-soft); color: var(--text-on-dark-soft); }
body.hero--image .hero__badge svg { color: var(--brand-accent); }
body.hero--image .hero__media { display: none; }
body.hero--image .hero__stats { border-top-color: var(--line-on-dark); }

/* Variant B is carried by the photograph, so on a wide screen the form gets out
   of its way: capped well inside its column, pushed to the outer edge, and
   started lower under the header. That opens a band of open water through the
   middle of the frame, which is the whole reason to run a photo hero.
   The grid columns are deliberately left alone: widening the copy column
   reflows the headline, and the headline is not what is in the way.
   Below 900px the form IS the page, so none of this applies. */
@media (min-width: 900px) {
  body.hero--image .hero__in {
    /* Top aligned, not centred. With `align-items: center` the row centres the
       taller column, so any offset put on the form was halved and mostly
       cancelled: 22px of padding moved the card 6px. Aligning to the start
       makes the offset below mean what it says. */
    align-items: start;
    /* 2026-09-18: +3rem top and +5rem bottom over the first cut. The compact
       form took 145px out of the hero and the photo went with it; this puts
       15% back (851px to 979px at 1280), most of it under the form where the
       water is. */
    padding-block: clamp(6.75rem, 5.4rem + 4.2vw, 9.5rem) clamp(7.75rem, 7rem + 3.6vw, 10rem);
    /* The one place the 1280px container fights the design. On a wide screen it
       strands the photograph at the far edges and keeps the headline and the
       form crowded together in the middle, which is backwards for a hero whose
       whole point is the photo. Letting the hero alone run wider pushes the
       copy left and the form right and opens the water between them. Never
       narrower than the standard container, never wider than the viewport.
       Everything below the hero keeps the standard 1280. */
    max-width: clamp(1280px, 90vw, 1660px);
  }
  body.hero--image .hero__aside { padding-top: clamp(1.25rem, 0.2rem + 2.6vw, 3.25rem); }
  body.hero--image .hero__aside .quote-card {
    max-width: 470px;          /* ~15% narrower than the column it sits in */
    margin-inline-start: auto; /* hug the outer edge */
  }
}

/* Hero trust strip sits under both variants */
.hero-strip {
  border-top: 1px solid var(--line);
  background: var(--surface-white);
}
.hero-strip__in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem 1.5rem; padding-block: 1.4rem;
}
.hero-strip__item { display: flex; align-items: center; gap: 0.7rem; }
.hero-strip__item svg { width: 26px; height: 26px; color: var(--brand-primary); flex: none; }
.hero-strip__item b { display: block; font-family: var(--font-head); color: var(--text-strong); font-size: var(--fs-body); line-height: 1.3; }
.hero-strip__item span { font-size: var(--fs-fine); color: var(--text-muted); }

/* =========================================================================
   QUOTE FORM
   Three required fields on mobile. That is the ceiling.
   ========================================================================= */
.quote-card {
  background: var(--surface-white);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  --text-strong: var(--brand-ink);
  --text-body: #3F5570;
  --line: rgba(var(--brand-ink-rgb), 0.10);
  color: var(--text-body);
}
.quote-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.35rem 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
@media (max-width: 519px) {
  .quote-card__head { flex-direction: column; align-items: flex-start; }
}
.quote-card__head h2, .quote-card__head h3 { font-size: var(--fs-h3); color: var(--brand-ink); }
.quote-card__head p { font-size: var(--fs-fine); margin-top: 0.3rem; }
.quote-card__free {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-fine);
  /* Small bold text on a light surface, so it uses primary-dk rather than
     the accent: accent-dk measured 3.3:1 on the template and 2.7:1 on a gold
     brand, both under the 4.5:1 floor. */
  color: var(--brand-primary-dk); white-space: nowrap; flex: none;
}

.field { display: block; margin-bottom: 0.85rem; }
.field > span {
  display: block; font-size: var(--fs-fine); font-weight: 650;
  color: var(--brand-ink); margin-bottom: 0.35rem;
}
.field .opt { color: var(--text-muted); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  /* 16px minimum stops iOS Safari zooming the viewport on focus. */
  font-size: 16px;
  color: var(--brand-ink);
  background: var(--surface-paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--surface-white);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.14);
}
.field input:user-invalid, .field select:user-invalid { border-color: #D64545; }

.field-row { display: grid; gap: 0.85rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.form-fine { font-size: var(--fs-fine); color: var(--text-muted); margin-top: 0.9rem; text-align: center; }
.form-fine a {
  color: var(--text-muted);
  display: inline-block; padding: 0.45rem 0.15rem; margin: -0.45rem -0.15rem;
  font-weight: 600;
}

.form-status { margin-top: 0.9rem; border-radius: var(--r-md); padding: 1rem 1.1rem; font-size: var(--fs-fine); display: none; }
.form-status.is-shown { display: block; }
.form-status--ok { background: rgba(23, 195, 178, 0.13); border: 1px solid rgba(23, 195, 178, 0.4); color: #0A6D63; }
.form-status--err { background: rgba(214, 69, 69, 0.09); border: 1px solid rgba(214, 69, 69, 0.35); color: #8E2020; }
.form-status strong { display: block; margin-bottom: 0.25rem; color: inherit; font-size: var(--fs-body); }

.btn[aria-busy="true"] { opacity: 0.72; pointer-events: none; }

/* =========================================================================
   MOBILE CTA BAR  (required on every page, under 768px)
   ========================================================================= */
.ctabar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(var(--brand-ink-rgb), 0.10);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 767px) { .ctabar { display: grid; } }

.ctabar__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem; min-height: var(--ctabar-h);
  border: none; background: transparent;
  font-family: var(--font-head); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.02em; color: var(--brand-ink); text-decoration: none;
  border-right: 1px solid var(--line);
}
.ctabar__btn:last-child { border-right: none; }
.ctabar__btn svg { width: 21px; height: 21px; color: var(--brand-primary); }
.ctabar__btn:active { background: var(--surface-mist); }
.ctabar__btn--call { background: var(--brand-primary); color: var(--brand-white); }
.ctabar__btn--call svg { color: var(--brand-white); }
.ctabar__btn--call:active { background: var(--brand-primary-dk); }

/* Quote popup, opened by the Pricing button on mobile */
.qmodal {
  position: fixed; inset: 0; z-index: 120;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(var(--brand-ink-rgb), 0.55);
  backdrop-filter: blur(4px);
  padding: 1rem;
}
.qmodal.is-open { display: flex; }
.qmodal__panel {
  width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  animation: qslide 0.32s var(--ease);
}
@media (min-width: 560px) { .qmodal { align-items: center; } .qmodal__panel { border-radius: var(--r-xl); } }
@keyframes qslide { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qmodal__panel { animation: none; } }
.qmodal__close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 38px; height: 38px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-white);
  display: grid; place-items: center; color: var(--brand-ink);
}
.qmodal__close svg { width: 18px; height: 18px; }
.qmodal__panel { position: relative; }
body.is-locked { overflow: hidden; }

/* =========================================================================
   STATS
   ========================================================================= */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; }
.stat b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2rem, 1.6rem + 1.7vw, 2.75rem); line-height: 1;
  color: var(--text-strong); letter-spacing: -0.035em; font-weight: 600;
}
.on-dark .stat b, [data-surface="ink"] .stat b, [data-surface="gradient"] .stat b { color: var(--brand-accent); }
.stat span { display: block; margin-top: 0.5rem; font-size: var(--fs-fine); color: var(--text-muted); }

/* =========================================================================
   STEPS
   ========================================================================= */
.steps { counter-reset: step; display: grid; gap: clamp(1rem, 0.8rem + 0.8vw, 1.6rem); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 3.4rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-h2);
  line-height: 1; color: var(--brand-primary); opacity: 0.9;
}
.step::after {
  content: ""; position: absolute; top: 1.2rem; left: 0; width: 44px; height: 3px;
  border-radius: 3px; background: var(--brand-accent); transform: translateY(1.5rem);
}
.step h3 { margin-bottom: 0.5rem; }
.on-dark .step::before, [data-surface="ink"] .step::before, [data-surface="gradient"] .step::before { color: var(--brand-accent); }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { max-width: 860px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-white);
  margin-bottom: 0.7rem;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq details[open] { border-color: rgba(var(--brand-primary-rgb), 0.34); box-shadow: var(--shadow-sm); }
.on-dark .faq details, [data-surface="ink"] .faq details, [data-surface="gradient"] .faq details {
  background: rgba(255,255,255,0.055); border-color: var(--line-on-dark);
}
.faq summary {
  display: flex; align-items: flex-start; gap: 0.75rem; justify-content: flex-start;
  text-align: left;
  padding: clamp(0.85rem, 0.7rem + 0.6vw, 1.15rem) clamp(0.95rem, 0.75rem + 0.8vw, 1.3rem);
  cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: var(--fw-h3);
  font-size: clamp(0.94rem, 0.84rem + 0.42vw, 1.125rem);
  color: var(--text-strong); line-height: 1.38;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none;
  width: clamp(17px, 15px + 0.55vw, 22px); height: clamp(17px, 15px + 0.55vw, 22px);
  margin-top: 0.18rem; margin-left: auto;
  background: currentColor; color: var(--brand-primary);
  transition: transform 0.25s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq__body { padding: 0 clamp(0.95rem, 0.75rem + 0.8vw, 1.3rem) clamp(1rem, 0.8rem + 0.8vw, 1.3rem); }
.faq__body p { font-size: var(--fs-small); line-height: 1.6; }

/* =========================================================================
   CTA BAND
   ========================================================================= */
.ctaband { text-align: center; }
.ctaband h2 { margin-bottom: 1rem; }
.ctaband p { font-size: var(--fs-lead); max-width: 56ch; margin-inline: auto; }
.ctaband .btn-row { justify-content: center; margin-top: 2rem; }
.ctaband__phone {
  display: block; margin-top: 1.6rem;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-h2);
  color: var(--brand-white); text-decoration: none; letter-spacing: -0.02em;
}

/* =========================================================================
   BREADCRUMBS
   ========================================================================= */
.crumbs { font-size: var(--fs-fine); color: var(--text-muted); padding-block: 1.1rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.45; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-primary); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text-strong); font-weight: 600; }

/* =========================================================================
   PAGE HEAD (inner pages)
   ========================================================================= */
/* ---- Inner page head with a photograph ---------------------------------
   Service and city pages put a relevant photo behind the head, at the same
   height and with the same weight of scrim as the home hero, so the site
   reads as one thing. Three deliberate details:

   - The section keeps its `data-surface`, so the surface-rhythm rule and the
     on-dark text colours are untouched, and a head whose photo fails to load
     degrades to the gradient rather than to white text on white.
   - The scrim runs top to bottom, not left to right like the home hero. This
     head centres its text, so a side gradient would leave the heading over
     the bright half of the frame.
   - No media query. The photo carries to the phone, where the head is the
     first thing on the page.
   ---------------------------------------------------------------------- */
/* Deep-link target for every quote button on the site. Without the margin the
   sticky header covers the top of the form the visitor was just sent to. */
.quote-anchor { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

.pagehead { position: relative; overflow: hidden; }
.pagehead--photo .pagehead__bg { position: absolute; inset: 0; }
.pagehead--photo .pagehead__bg picture { display: block; width: 100%; height: 100%; }
.pagehead--photo .pagehead__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pagehead--photo .pagehead__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(var(--brand-ink-rgb), 0.70) 0%,
      rgba(var(--brand-ink-rgb), 0.80) 55%,
      rgba(var(--brand-ink-rgb), 0.88) 100%),
    radial-gradient(76% 86% at 50% 46%, rgba(var(--brand-ink-rgb), 0.30), transparent 72%);
}
.pagehead--photo > .wrap { position: relative; z-index: 1; }
.pagehead__in { padding-block: clamp(2.75rem, 2rem + 3vw, 4.75rem); }
.pagehead .crumbs + .pagehead__in { padding-top: 0; }
.pagehead__in--center { text-align: center; max-width: 820px; margin-inline: auto; }
.pagehead__in--center .eyebrow::before { display: none; }
.pagehead h1 { font-size: var(--fs-h1); margin-bottom: 1rem; }
.pagehead p { font-size: var(--fs-lead); max-width: 66ch; }
.pagehead__in--center p { margin-inline: auto; }
.pagehead__ico {
  /* Block level so the eyebrow sits on its own line beneath it. */
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: 1.25rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: var(--brand-accent);
}
.pagehead__ico svg { width: 26px; height: 26px; }
.pagehead__in--center .pagehead__ico { margin-inline: auto; }
/* Breadcrumbs stay left even when the head is centred. */
.pagehead .crumbs ol { justify-content: flex-start; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer {
  background: var(--brand-ink); color: var(--text-on-dark-soft);
  position: relative; overflow: hidden;
  /* Logo tokens re-pointed for a dark surface. */
  --logo-ink: var(--brand-white);
  --logo-primary: var(--brand-primary-lt);
}
.footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 70% at 82% 0%, rgba(var(--brand-primary-rgb), 0.20), transparent 62%);
}
.footer__in { position: relative; z-index: 1; padding-block: clamp(2.8rem, 2rem + 3vw, 4.5rem); }
.footer__grid { display: grid; gap: 2.25rem; }
@media (min-width: 720px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer svg.footer__logo { height: 62px; width: auto; margin-bottom: 1.1rem; }
.footer h4 {
  color: var(--brand-white); font-size: var(--fs-fine); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 1rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { font-size: var(--fs-fine); line-height: 1.5; }
.footer li + li { margin-top: 0.55rem; }
.footer a { color: var(--text-on-dark-soft); text-decoration: none; font-size: var(--fs-fine); }
.footer a:hover { color: var(--brand-white); text-decoration: underline; }
.footer__phone {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-head); font-weight: 700;
  color: var(--brand-white) !important; text-decoration: none !important; margin-bottom: 0.4rem;
  white-space: nowrap;
}
.footer__phone svg { width: 22px; height: 22px; flex: none; }
.footer__social { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.footer__social a {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--line-on-dark);
  display: grid; place-items: center;
}
.footer__social svg { width: 18px; height: 18px; }
.footer__social a:hover { background: rgba(255,255,255,0.12); }
.footer__bar {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line-on-dark);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: var(--fs-fine);
}
.footer__bar p { opacity: 0.8; }

.demo-note {
  background: rgba(var(--brand-accent-rgb), 0.12);
  border: 1px solid rgba(var(--brand-accent-rgb), 0.35);
  border-radius: var(--r-md);
  padding: 0.85rem 1.1rem; margin-top: 1.5rem;
  font-size: var(--fs-fine); color: var(--text-on-dark-soft);
  position: relative; z-index: 1;
}

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-group > * { opacity: 0; transform: translateY(18px); }
.reveal-group.is-in > * {
  opacity: 1; transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal-group.is-in > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-group.is-in > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-group.is-in > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-group.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-group.is-in > *:nth-child(6) { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, a.card:hover, .card--hover:hover { transform: none; }
}

/* No-JS safety: never hide content behind a script that did not run. */
.no-js .reveal, .no-js .reveal-group > * { opacity: 1; transform: none; }

/* =========================================================================
   PRINT
   ========================================================================= */
@media print {
  .header, .topbar, .ctabar, .qmodal, .footer__social { display: none !important; }
  body { padding-bottom: 0; }
  [data-surface] { background: #fff !important; }
}

/* =========================================================================
   STRUCTURE PATTERNS
   Modelled on the reference site's actual section anatomy: centred heads with
   an accent phrase, feature cards that carry a bulleted list and a full-width
   button, and CTAs as inset rounded cards rather than full-bleed bands.
   ========================================================================= */

/* ---- Feature card ------------------------------------------------------ */
.fcard { display: flex; flex-direction: column; }
.fcard__top { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.85rem; }
.fcard__ico {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--surface-mist); color: var(--brand-primary);
}
.fcard__ico svg { width: 20px; height: 20px; }
.on-dark .fcard__ico, [data-surface="ink"] .fcard__ico, [data-surface="gradient"] .fcard__ico {
  background: rgba(var(--brand-accent-rgb), 0.16); color: var(--brand-accent);
}
.fcard__top h3 { margin: 0; padding-top: 0.35rem; }
.fcard > p { font-size: var(--fs-small); }

.flist { list-style: none; padding: 0; margin: 1rem 0 0; }
.flist li {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: var(--fs-fine); line-height: 1.5; padding: 0.22rem 0;
}
.flist li::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 0.22rem;
  background: var(--brand-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.on-dark .flist li::before, [data-surface="ink"] .flist li::before,
[data-surface="gradient"] .flist li::before { background: var(--brand-accent); }

/* The button pinned to the bottom of every card, so a grid row lines up. */
.fcard__btn {
  margin-top: auto; padding-top: 1.15rem;
}
.fcard__btn .btn {
  width: 100%; min-height: 44px; font-size: var(--fs-fine);
  white-space: nowrap; text-align: center; line-height: 1.35;
  padding-inline: 1.1rem;
  background: var(--surface-paper); color: var(--brand-ink);
  border-color: var(--line);
}
.fcard__btn .btn:hover { background: var(--surface-mist); border-color: var(--brand-primary); color: var(--brand-primary); }
.on-dark .fcard__btn .btn, [data-surface="ink"] .fcard__btn .btn, [data-surface="gradient"] .fcard__btn .btn {
  background: rgba(255,255,255,0.08); color: var(--brand-white); border-color: var(--line-on-dark);
}

/* ---- Pill tags --------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.tag {
  font-size: 0.78rem; padding: 0.28rem 0.65rem; border-radius: var(--r-sm);
  background: var(--surface-mist); color: var(--brand-primary-dk); font-weight: 500;
}
.flabel {
  display: block; font-size: var(--fs-fine); font-weight: 600;
  color: var(--brand-primary-dk); margin-top: 1rem;
}

/* ---- Inset CTA card ----------------------------------------------------
   Their CTA is a rounded card sitting inside a light section, not a
   full-bleed dark band. It reads as a deliberate object on the page.
   ------------------------------------------------------------------------ */
.ctacard {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-gradient);
  padding: clamp(2rem, 1.6rem + 1.8vw, 3.25rem) clamp(1.35rem, 1rem + 1.6vw, 3rem);
  text-align: center;
  --text-strong: var(--text-on-dark);
  --text-body: var(--text-on-dark-soft);
  --line: var(--line-on-dark);
  color: var(--text-on-dark-soft);
}
.ctacard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 80% at 15% 0%, rgba(var(--brand-accent-rgb), 0.16), transparent 62%);
}
.ctacard > * { position: relative; z-index: 1; }
.ctacard h2 { font-size: clamp(1.45rem, 1.25rem + 0.9vw, 1.9rem); margin-bottom: 0.85rem; }
.ctacard h2 svg { width: 1em; height: 1em; vertical-align: -0.1em; margin-right: 0.35rem; color: var(--brand-accent); }
.ctacard p { font-size: var(--fs-small); max-width: 58ch; margin-inline: auto; }
.ctacard .btn-row { justify-content: center; margin-top: 1.75rem; }

/* ---- Trust bar --------------------------------------------------------- */
.trustbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 1rem; text-align: center;
}
.trustbar__item span.ico {
  display: grid; place-items: center; width: 48px; height: 48px;
  margin: 0 auto 0.7rem; border-radius: var(--r-pill);
  background: var(--surface-mist); color: var(--brand-primary);
}
.trustbar__item span.ico svg { width: 22px; height: 22px; }
.trustbar__item b { display: block; font-size: var(--fs-fine); font-weight: 600; color: var(--text-strong); }
.trustbar__item i { display: block; font-style: normal; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }

/* ---- Review card, with the decorative quote mark ----------------------- */
.review { position: relative; }
.review__q {
  position: absolute; top: 0.9rem; right: 1.1rem;
  font-family: Georgia, serif; font-size: 3.4rem; line-height: 1;
  color: var(--line-strong); opacity: 0.35; pointer-events: none; user-select: none;
}
.review__tag {
  margin-left: auto; font-size: 0.78rem; color: var(--brand-primary-dk); font-weight: 500;
}
.rating-row {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: 0 0 2rem; font-size: var(--fs-small);
}
.rating-row .stars { color: #C9A227; letter-spacing: 2px; }
.rating-row b { font-size: var(--fs-h3); font-weight: 700; color: var(--text-strong); }
.rating-row span { color: var(--text-muted); }

/* ---- Hero stat row ----------------------------------------------------- */
.hero__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 0.5rem; margin-top: 2rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero__stats b {
  display: block; font-size: clamp(1.15rem, 0.95rem + 0.85vw, 1.7rem);
  font-weight: 700; line-height: 1.1; color: var(--text-strong); letter-spacing: -0.025em;
}
.hero__stats span {
  display: block; font-size: clamp(0.66rem, 0.6rem + 0.25vw, 0.78rem);
  line-height: 1.3; color: var(--text-muted); margin-top: 0.2rem;
}

/* ---- Inset white panel ------------------------------------------------- */
.panel {
  background: var(--surface-white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
}
.panel--center { text-align: center; }

/* ---- Badge pill above a heading ---------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.9rem; border-radius: var(--r-pill);
  background: var(--surface-mist); color: var(--brand-primary-dk);
  font-size: var(--fs-fine); font-weight: 500; margin-bottom: 1rem;
}
.pill svg { width: 15px; height: 15px; }
.on-dark .pill, [data-surface="ink"] .pill, [data-surface="gradient"] .pill {
  background: rgba(255,255,255,0.12); color: var(--brand-white);
}

/* ---- Centred icon-top card ("Why X choose us" row) --------------------- */
.ccard { text-align: center; }
.ccard .ico {
  display: grid; place-items: center; width: 48px; height: 48px;
  margin: 0 auto 1rem; border-radius: var(--r-pill);
  background: var(--surface-mist); color: var(--brand-primary);
}
.ccard .ico svg { width: 22px; height: 22px; }
.ccard h3 { margin-bottom: 0.5rem; }
.ccard p { font-size: var(--fs-fine); }
.on-dark .ccard .ico, [data-surface="ink"] .ccard .ico, [data-surface="gradient"] .ccard .ico {
  background: rgba(var(--brand-accent-rgb), 0.16); color: var(--brand-accent);
}

/* ---- Location link panel ------------------------------------------------
   The internal-linking block that ties a service page to every city page.
   Two columns of quiet rows that reveal an arrow on hover.
   ------------------------------------------------------------------------ */
.locpanel {
  background: var(--surface-sand);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
}
[data-surface="sand"] .locpanel { background: var(--surface-white); }
.locpanel__grid {
  display: grid; gap: 0.15rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.locpanel__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0.85rem; border-radius: var(--r-md);
  font-size: var(--fs-fine); color: var(--text-body); text-decoration: none;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.locpanel__link svg { width: 15px; height: 15px; opacity: 0; transition: opacity 0.16s var(--ease), transform 0.16s var(--ease); }
.locpanel__link:hover { background: var(--surface-mist); color: var(--brand-primary-dk); }
.locpanel__link:hover svg { opacity: 1; transform: translateX(3px); }
.locpanel__foot {
  border-top: 1px solid var(--line); margin-top: 0.85rem; padding-top: 1.25rem; text-align: center;
}

/* ---- FAQ as open cards with a question glyph --------------------------- */
.faq--cards details { background: var(--surface-white); }
.faq--cards summary { gap: 0.7rem; align-items: flex-start; }
.faq--cards summary::before {
  content: ""; flex: none; width: 19px; height: 19px; margin-top: 0.2rem;
  background: var(--brand-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.3-2.4 3.6'/%3E%3Cpath d='M12 17.1h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.3-2.4 3.6'/%3E%3Cpath d='M12 17.1h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq--cards .faq__body { padding-left: clamp(2.3rem, 1.9rem + 1.6vw, 3.05rem); }

/* =========================================================================
   NAV DROPDOWNS
   Desktop: opens on hover and on focus-within, so it works from the keyboard
   without any JavaScript. Mobile: the caret button expands it inside the
   drawer, because 18 nested rows should not be open by default on a phone.
   ========================================================================= */
.nav__item { position: relative; }
.nav__caret { display: none; }

@media (min-width: 1280px) {
  /* Chevron affordance on the parent link itself. */
  .nav__link--parent { display: flex; align-items: center; gap: 0.3rem; }
  .nav__link--parent::after {
    content: ""; width: 13px; height: 13px; flex: none;
    background: currentColor;
    transition: transform 0.2s var(--ease);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .nav__item--menu:hover .nav__link--parent::after,
  .nav__item--menu:focus-within .nav__link--parent::after { transform: rotate(180deg); }

  .nav__menu {
    position: absolute; top: 100%; left: 50%;
    transform: translate(-50%, 6px);
    min-width: 300px;
    padding: 0.6rem;
    background: var(--surface-white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
    z-index: 10;
  }
  /* Bridges the gap between the link and the panel so the pointer can travel. */
  .nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

  .nav__item--menu:hover .nav__menu,
  .nav__item--menu:focus-within .nav__menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .nav__menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem; }
  #navmenu-services .nav__menu-grid, #navmenu-cities .nav__menu-grid { min-width: 420px; }
}

.nav__menu-grid a {
  display: block; padding: 0.6rem 0.75rem; border-radius: var(--r-md);
  font-size: var(--fs-fine); font-weight: 500; line-height: 1.35;
  color: var(--text-body); text-decoration: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.nav__menu-grid a:hover { background: var(--surface-mist); color: var(--brand-primary-dk); }

.nav__menu-all {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 0.4rem; padding: 0.7rem 0.75rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-fine); font-weight: 600;
  color: var(--brand-primary); text-decoration: none;
}
.nav__menu-all svg { width: 1em; height: 1em; transition: transform 0.18s var(--ease); }
.nav__menu-all:hover svg { transform: translateX(3px); }

/* ---- Mobile drawer ----------------------------------------------------- */
@media (max-width: 1279px) {
  .nav__item--menu { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .nav__item--menu .nav__link { border-bottom: none; }
  .nav__caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    border: none; background: transparent; color: var(--brand-ink);
  }
  .nav__caret svg { width: 20px; height: 20px; transition: transform 0.22s var(--ease); }
  .nav__caret[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav__item--menu { border-bottom: 1px solid var(--line); }

  .nav__menu {
    grid-column: 1 / -1;
    display: none;
    padding: 0.25rem 0 0.9rem 0.75rem;
  }
  .nav__item--menu.is-open .nav__menu { display: block; }
  .nav__menu-grid a { padding: 0.65rem 0.5rem; font-size: var(--fs-small); }
  .nav__menu-all { margin-top: 0.3rem; padding-left: 0.5rem; }
}

/* =========================================================================
   QUAD GRID
   For rows of exactly four cards. auto-fit is wrong here: it picks a column
   count from available width and lands on 3, which leaves a single orphan
   card on its own row. Explicit steps go 1 -> 2 -> 4 and never 3, so the row
   is always balanced.
   ========================================================================= */
/* Flex rather than grid, so a trailing partial row CENTRES instead of hanging
   off the left edge. A grid pins items to their tracks, which is what makes a
   10-item set render as 4 + 4 + 2-stuck-left. This way any count reads as
   deliberate, and rows still stretch to equal height. */
.grid--quad { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.grid--quad > * { flex: 1 1 100%; min-width: 0; }
@media (min-width: 620px) {
  .grid--quad > * { flex: 0 1 calc((100% - var(--grid-gap)) / 2); }
}
@media (min-width: 1040px) {
  .grid--quad > * { flex: 0 1 calc((100% - 3 * var(--grid-gap)) / 4); }
}

/* A group only uses a column count its item count divides by. Three cards
   in an auto-fit grid fell to two columns between 600px and 820px and left
   the third sitting alone under the other two, which reads as a mistake
   rather than a layout. A trio is one column or three, never two, and three
   across only starts at 900px, where the cards are wide enough to read. */
.grid--trio { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The photo-and-copy split had the mirror problem: it went to two columns
   at 700px, where the photograph is about 330px and looks like a thumbnail
   parked beside the text. It stacks until there is genuinely room for two.
   Where the photograph comes first in the markup, the copy moves above it
   when stacked, otherwise the eyebrow is marooned between the photograph
   and the heading it introduces. */
.split-row { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .split-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .split-row--media-first > :first-child { order: 2; }
  .split-row--media-first > :last-child  { order: 1; }
}

/* Icon above the title rather than beside it. At quarter width the title
   needs the full card, otherwise it wraps to three lines next to the icon. */
.fcard--stack .fcard__top { display: block; }
.fcard--stack .fcard__ico { margin-bottom: 0.85rem; }
.fcard--stack .fcard__top h3 { padding-top: 0; }

/* =========================================================================
   BEFORE / AFTER SLIDER
   Two stacked images of the SAME pool. The top one is clipped by a draggable
   divider, so dragging wipes between dirty and clean. Replaces a pair of
   side-by-side photos that doubled the section height for no benefit.

   The control is a real <input type="range">, laid over the image and made
   invisible. That gets keyboard support, touch dragging and screen reader
   semantics for free rather than reimplementing them with pointer events.
   ========================================================================= */
.ba {
  --pos: 50%;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-mist);
  touch-action: pan-y;          /* let the page scroll vertically over it */
  user-select: none;
}
.ba picture, .ba img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Bottom layer: the clean pool. */
.ba__after { display: block; }

/* Top layer: the green pool, clipped to the handle position. */
.ba__before {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* The divider. */
.ba__line {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 3px; margin-left: -1.5px;
  background: var(--brand-white);
  box-shadow: 0 0 0 1px rgba(var(--brand-ink-rgb), 0.18);
  pointer-events: none;
}
.ba__hit {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 44px; margin-left: -22px;
  touch-action: none;     /* a drag that starts here is always the slider */
  cursor: ew-resize;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--brand-white);
  box-shadow: var(--shadow-md);
  display: grid; place-items: center;
  color: var(--brand-ink);
}
.ba__grip svg { width: 20px; height: 20px; }

/* The real control, stretched over the image and made invisible. */
.ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  appearance: none; background: transparent;
  cursor: ew-resize;
  pointer-events: none;   /* pointer input is handled on .ba itself */
}
.ba { cursor: ew-resize; }
.ba__range::-webkit-slider-thumb {
  appearance: none; width: 48px; height: 100%; background: transparent; cursor: ew-resize;
}
.ba__range::-moz-range-thumb {
  width: 48px; height: 100%; background: transparent; border: 0; cursor: ew-resize;
}
.ba__range:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
.ba__range:focus-visible ~ .ba__line .ba__grip { box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.35); }

/* Corner labels. */
.ba__tag {
  position: absolute; bottom: 0.9rem; z-index: 2;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--brand-ink);
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.4rem 0.8rem; border-radius: var(--r-pill);
  pointer-events: none;
}
.ba__tag--l { left: 0.9rem; }
.ba__tag--r { right: 0.9rem; }

.ba__hint {
  margin-top: 0.7rem; font-size: var(--fs-fine); color: var(--text-muted); text-align: center;
}

/* Without JavaScript the handle cannot move, so hide the affordance and just
   show the two halves as a static split rather than implying it is draggable. */
.no-js .ba__grip, .no-js .ba__range, .no-js .ba__hint { display: none; }

/* =========================================================================
   REVIEWS, GoHighLevel widget anatomy
   Score and stars left, date right, three-line clamped body, avatar and
   source badge along the bottom. Clamping is what keeps every card the same
   height, which is what the grid needs to read as tidy.
   ========================================================================= */
.revhead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
}
.revhead__l { flex: 1 1 340px; }
.revhead__l p { margin-top: 0.75rem; font-size: var(--fs-lead); max-width: 56ch; }
.revhead__r { display: flex; align-items: center; gap: 1.25rem; flex: none; }
.revhead__score { text-align: right; line-height: 1.2; }
.revhead__score b {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem); letter-spacing: -0.03em;
  color: var(--text-strong);
}
.revhead__count { display: block; font-size: var(--fs-fine); color: var(--text-muted); }
@media (max-width: 599px) {
  .revhead__r { width: 100%; justify-content: space-between; }
  .revhead__score { text-align: left; }
}

.rev { display: flex; flex-direction: column; }
.rev__top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; }
.rev__score {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3);
  color: #E8A317; line-height: 1;
}
.rev__stars { color: #E8A317; letter-spacing: 1px; font-size: var(--fs-small); line-height: 1; }
.rev__date { margin-left: auto; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }

.rev__text {
  font-size: var(--fs-fine); line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.rev.is-open .rev__text { -webkit-line-clamp: unset; overflow: visible; }

.rev__more {
  align-self: flex-start; margin: 0.15rem 0 0 -0.5rem;
  padding: 0.4rem 0.5rem; min-height: 34px;
  border: 0; background: none;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-fine);
  color: var(--brand-primary);
}
.rev__more:hover { text-decoration: underline; }
/* Nothing to expand, or no JS to expand it with. */
.rev__more[hidden], .no-js .rev__more { display: none; }

.rev__by {
  display: flex; align-items: center; gap: 0.65rem;
  margin-top: auto; padding-top: 1.1rem;
}
.rev__av {
  width: 34px; height: 34px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center;
  background: #E3E7EC; color: #55606A;
  font-family: var(--font-head); font-weight: 600; font-size: 0.78rem;
}
.rev__name {
  font-size: var(--fs-fine); font-weight: 500; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rev__src { margin-left: auto; width: 18px; height: 18px; flex: none; }
.rev__src svg { width: 100%; height: 100%; }

.revfoot {
  margin-top: 1.5rem; text-align: right;
  font-size: 0.78rem; color: var(--text-muted);
}
.revfoot strong { color: var(--text-body); font-weight: 600; }

/* =========================================================================
   SERVICE COVERAGE MAP
   ========================================================================= */
.mappanel {
  background: var(--surface-white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
}
[data-surface="white"] .mappanel { background: var(--surface-paper); }
.mappanel > h2 { text-align: center; margin-bottom: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); }

.mappanel__map {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-mist);
  aspect-ratio: 16 / 7;
}
@media (max-width: 719px) { .mappanel__map { aspect-ratio: 4 / 3; } }
.mappanel__map iframe { display: block; width: 100%; height: 100%; border: 0; }

.mappanel__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.4rem;
}
.mappanel__note {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-fine); color: var(--text-body);
}
.mappanel__note svg { width: 17px; height: 17px; color: var(--brand-primary); flex: none; }
@media (max-width: 559px) {
  .mappanel__foot { flex-direction: column; align-items: stretch; }
  .mappanel__foot .btn { width: 100%; }
}

/* Dot bullets for the service-page feature lists, which read lighter than the
   circled checks used on the index cards. */
.flist--dot li::before {
  width: 5px; height: 5px; margin-top: 0.55rem; border-radius: 50%;
  background: var(--brand-primary); -webkit-mask: none; mask: none;
}

/* Explicit two-up. `auto-fit` picks its own column count and lands on 3 for a
   set of 4, leaving an orphan. The reference service pages run these cards
   two across, which also gives the bullet lists room to read. */
.grid--duo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .grid--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================================
   BLOG CARDS
   Source photos come back at different aspect ratios, so rendering them at
   natural size gave three different image heights and pushed every title to
   a different line. Pin the ratio and crop instead.
   ========================================================================= */
a.card.bcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.bcard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-mist); }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard__body { padding: clamp(1.2rem, 1rem + 0.6vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }
.bcard__body h3 { margin-bottom: 0.6rem; }
.bcard__body p { font-size: var(--fs-fine); }
.bcard__meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.9rem; }
/* Pin the read link to the bottom so a short excerpt does not float it up. */
.bcard__body .card__more { margin-top: auto; padding-top: 1rem; }

/* =========================================================================
   BLOG POST
   ========================================================================= */
.post { max-width: 860px; margin-inline: auto; }
.post__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  font-size: var(--fs-fine); color: var(--text-muted);
}
.post__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.post__meta svg { width: 15px; height: 15px; color: var(--brand-primary); }
.post__body { max-width: none; }
.post__lead { font-size: var(--fs-lead); color: var(--text-strong); }
.post__body h2 { font-size: clamp(1.45rem, 1.3rem + 0.7vw, 1.85rem); margin-top: 2.4em; }
.post__body h3 { font-size: var(--fs-h3); margin-top: 1.8em; }
.post__body ul, .post__body ol { padding-left: 1.3em; }
.post__body figure { margin: 1.75rem 0; }
.post__body blockquote {
  margin: 1.75rem 0; padding: 1rem 1.25rem;
  border-left: 3px solid var(--brand-accent);
  background: var(--surface-mist); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-small); color: var(--text-strong);
}
.post__body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: var(--fs-small); }
.post__body th, .post__body td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.post__body th { font-family: var(--font-head); font-weight: 600; color: var(--text-strong); background: var(--surface-paper); }
.post__body sup a { color: var(--brand-primary); text-decoration: none; font-size: 0.75em; }

.post__takeaways {
  margin: 2rem 0; padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  background: var(--surface-paper); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.post__takeaways-h { font-size: var(--fs-h3) !important; margin: 0 0 0.75rem !important; }
.post__takeaways .flist { margin: 0; }
.post__takeaways .flist li { font-size: var(--fs-small); }

.post__sources { max-width: 860px; margin-inline: auto; }
.post__sources h2 { font-size: var(--fs-h3); margin-bottom: 0.4rem; }
.post__sources > p { font-size: var(--fs-fine); color: var(--text-muted); margin-bottom: 1rem; }
.post__sources ol { padding-left: 1.3em; font-size: var(--fs-fine); }
.post__sources li + li { margin-top: 0.5rem; }
.post__sources li span { color: var(--text-muted); }

/* A three-column table does not fit a 375px phone. Let it scroll sideways
   inside its own box rather than forcing the whole page wider. */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
.tscroll table { margin: 0; min-width: 480px; }

/* =========================================================================
   SMS CONSENT
   Two checkboxes: transactional (required) and marketing (optional, and it
   must never be required). Carriers reject A2P 10DLC registration without
   demonstrable opt-in, so this is a prerequisite for any SMS automation.
   ========================================================================= */
.consent { margin: 0.2rem 0 0.9rem; display: grid; gap: 0.4rem; }
.consent__row {
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem;
  align-items: start; cursor: pointer;
}
.consent__row input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0.1rem 0 0; flex: none;
  accent-color: var(--brand-primary); cursor: pointer;
}
/* Small, but deliberately not tiny. Consent language has to stay conspicuous
   to hold up under carrier and TCPA review, so 10.4px is the floor rather
   than a style preference. Footprint is cut through spacing instead. */
.consent__row span {
  font-size: clamp(0.65rem, 0.62rem + 0.12vw, 0.6875rem);
  line-height: 1.32; color: var(--text-muted);
}
.consent__row input:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.consent__row a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.consent__row a:hover { color: var(--brand-primary); }

/* ---- Compact hero form --------------------------------------------------
   The hero form sits beside the headline on a wide screen and was running
   taller than it, which made the photograph feel crowded. Everything here is
   spacing, never type size or tap target, and it applies only from 900px up:
   on a phone the form IS the page, it competes with nothing, and shrinking
   a touch target there would be a straight downgrade. The consent text keeps
   its 10.4px floor at every width; its footprint came out of wording. */
@media (min-width: 900px) {
  .quote-card--compact { padding: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); }
  .quote-card--compact .quote-card__head { margin-bottom: 0.85rem; }
  .quote-card--compact .field { margin-bottom: 0.5rem; }
  .quote-card--compact .field > span { margin-bottom: 0.25rem; }
  .quote-card--compact .field input,
  .quote-card--compact .field select { padding-block: 0.72rem; }
  .quote-card--compact .consent { margin: 0.1rem 0 0.7rem; gap: 0.3rem; }
  .quote-card--compact .btn--block.btn--lg { padding-block: 0.85rem; }
  .quote-card--compact .form-fine { margin-top: 0.6rem; }
}

/* =========================================================================
   ICON CHIPS: round, dimensional, ringed. Not flat.
   The treatment the user chose on three sites in a row (the Goodies client
   build, then Horizon, then the first template on 2026-09-19), so it is the skeleton's
   default rather than a skin: a primary gradient disc, a white gap, an
   accent ring, a soft drop shadow and a hairline highlight along the top
   edge, so the chip reads as an object sitting on the card rather than a
   tinted square. The glyph is the duotone icon in white; its 20% layer
   becomes a faint inner shape on the disc. All colour comes from tokens, so
   a brand swap keeps the depth and changes the palette.
   ========================================================================= */
.card__ico, .fcard__ico, .ccard .ico, .trustbar__item span.ico, .pagehead__ico {
  border-radius: 50%; border-color: transparent;
  background: linear-gradient(160deg, var(--brand-primary-lt) 0%, var(--brand-primary) 55%, var(--brand-primary-dk) 100%);
  color: #FFFFFF;
  box-shadow:
    0 0 0 3px #FFFFFF,
    0 0 0 5px rgba(var(--brand-accent-rgb), 0.95),
    0 8px 18px rgba(var(--brand-primary-rgb), 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
/* On a dark surface the disc goes accent with an ink glyph, and the white gap
   becomes a faint one so the ring does not glow against the ink. */
.on-dark .card__ico, [data-surface="ink"] .card__ico, [data-surface="gradient"] .card__ico,
.on-dark .fcard__ico, [data-surface="ink"] .fcard__ico, [data-surface="gradient"] .fcard__ico,
.on-dark .ccard .ico, [data-surface="ink"] .ccard .ico, [data-surface="gradient"] .ccard .ico,
.pagehead__ico {
  background: linear-gradient(160deg, var(--brand-accent-lt) 0%, var(--brand-accent) 55%, var(--brand-accent-dk) 100%);
  color: var(--brand-ink);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.10),
    0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Check lists: a solid primary disc with a white check, same family as the
   chips. Replaces the masked outline check above. */
.flist li::before, .flist--dot li::before {
  content: ""; width: 19px; height: 19px; border-radius: 50%;
  background: var(--brand-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7.5'/%3E%3C/svg%3E") center / 60% no-repeat;
  -webkit-mask: none; mask: none;
  box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb), 0.30);
}