/* ==========================================================================
   styles.css — Summit Coral theme (Design #3). Every color derives from the
   three seeds at the top of :root (--deep / --accent / --surface), which a
   client build sets through config `theme` — see CLAUDE.md "Theme".
   Reference: internal/design/DESIGN-NOTES.md
   ========================================================================== */

:root {
  /* ---- SEEDS — the only colors a rebrand needs to touch ------------------
     The whole palette derives from these three. Set `theme` in
     assets/js/config.js and build/partials.js emits them as an inline :root
     override that wins over the defaults here; it also reuses `accent` for
     the generated favicon, so the tab icon can't drift from the buttons.
     The defaults below are Summit Coral's own navy / coral / cream.

     `accent` carries white button text AND doubles as link color on the
     cream page, so it needs ~4.5:1 against both white and `surface`. Darken
     a client's brand color rather than shipping it raw. */
  --deep: #17324f;     /* header, dark bands, headings */
  --accent: #f2684c;   /* primary actions, icons, the accent period, favicon tile */
  --surface: #faf1e8;  /* page background — this design's page is cream, not white */

  /* ---- Ramp origin — internal, NOT a rebrand knob ------------------------
     Summit Coral's borders and deeper cream bands are a warm tan that a mix
     of the cream with black or navy can't reach (it drains the warmth). They
     mix toward this sand instead. The percentages below were fitted against
     the hand-picked literals they replaced — worst error 2 of 255 — so the
     seeded palette renders as the same design. */
  --sand: #c9a882;

  /* ---- Derived: brand --------------------------------------------------- */
  --coral: var(--accent);
  --coral-hover: color-mix(in oklab, var(--accent) 93%, #000);
  --coral-soft: color-mix(in oklab, var(--accent) 14%, #fff);  /* icon chips / pills */
  /* The accent as TEXT on dark surfaces (navy bands, hero titles, header).
     --accent is tuned to carry white button text, which makes a deep accent
     — teal, navy-adjacent blues — vanish on navy. The @supports block below
     lifts it in OKLCH (same hue and chroma, lightness >= 0.74); this mix is
     the fallback for engines without relative colour syntax. */
  --accent-on-dark: color-mix(in oklab, var(--accent) 55%, #fff);
  --navy: var(--deep);
  --navy-deep: color-mix(in oklab, var(--deep) 86%, #000);      /* testimonials band */
  --navy-hover: color-mix(in oklab, var(--deep) 90%, #fff);
  --navy-overlay-a: color-mix(in srgb, var(--navy-deep) 55%, transparent);
  --navy-overlay-b: color-mix(in srgb, var(--navy-deep) 78%, transparent);
  /* The engine's own components (hero quote form, feature cards) were written
     against the base master's names. Alias them rather than fork the rules. */
  --blue: var(--accent);
  --blue-hover: var(--coral-hover);

  /* ---- Derived: text ---------------------------------------------------- */
  --ink: var(--deep);
  --ink-strong: color-mix(in oklab, var(--deep) 90%, #fff);
  --body: color-mix(in oklab, var(--deep) 78%, var(--surface));
  /* Secondary text. Summit Coral's own literals ran 4.1:1 (muted) and 2.8:1
     (faint) on its cream page — under WCAG AA for the small text they carry
     (trust-bar subs, footer legal links, page leads). These mixes hold
     >= 4.5:1 on cream, white and the deeper cream band. */
  --muted: color-mix(in oklab, var(--deep) 75%, #fff);
  --faint: color-mix(in oklab, var(--deep) 68%, #fff);

  /* ---- Derived: surfaces ------------------------------------------------ */
  --bg: var(--surface);
  --card: #ffffff;
  --tint: color-mix(in oklab, var(--surface) 89%, var(--sand));  /* deeper cream band */
  --tint-blue: color-mix(in oklab, var(--surface) 55%, #fff);    /* near-white warm band */
  --tint-track: var(--tint);
  --tint-input: color-mix(in oklab, var(--accent) 2%, #fff);
  --tint-step: var(--coral-soft);

  /* ---- Derived: borders ------------------------------------------------- */
  --line: color-mix(in oklab, var(--surface) 72%, var(--sand));
  --line-card: color-mix(in oklab, var(--surface) 79%, var(--sand));
  --line-soft: color-mix(in oklab, var(--surface) 86%, var(--sand));
  --line-strong: color-mix(in oklab, var(--surface) 59%, var(--sand));
  --line-hover: color-mix(in oklab, var(--surface) 36%, var(--sand));
  --line-open: color-mix(in oklab, var(--accent) 52%, var(--surface));

  /* ---- States — deliberately NOT derived --------------------------------
     Green-means-included / red-means-excluded in the checklist tables and the
     gold review stars are semantic signals. Deriving them from a red or green
     brand seed would destroy the signal, so they stay literal. */
  --ok-bg: #e3f4ea;
  --ok: #17925a;
  --no-bg: #fbe9e9;
  --no: #de5454;
  --gold: #f5b02e;
  --na: color-mix(in oklab, var(--deep) 45%, #fff);

  /* ---- Derived: footer text (cream footer) ------------------------------ */
  --foot-link: var(--body);
  --foot-fine: var(--faint);
  --foot-body: color-mix(in oklab, var(--deep) 24%, #fff);   /* light copy on navy bands */

  /* ---- Shape + effects -------------------------------------------------- */
  --r-card: 14px;
  --r-hero: 20px;
  --r-btn: 10px;
  --r-pill: 999px;
  --shadow-btn: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent);
  --shadow-card: 0 1px 3px color-mix(in srgb, var(--deep) 5%, transparent);
  --shadow-card-hover: 0 12px 28px color-mix(in srgb, var(--deep) 10%, transparent);

  --font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Poppins", "Nunito Sans", system-ui, sans-serif;
  --wrap: 1240px;
}

@supports (color: oklch(from red l c h)) {
  :root { --accent-on-dark: oklch(from var(--accent) max(l, 0.74) c h); }
}

/* ---- Legacy safety net ----------------------------------------------------
   Custom properties are untyped, so an engine without color-mix() parses
   `--tint: color-mix(…)` happily and only fails at the USE site, where
   `background: var(--tint)` becomes invalid-at-computed-value-time and
   resolves to `unset` — transparent panels and inherited text, not a
   slightly-off palette. So re-declare every color-mix()-derived token as a
   literal.

   These are Summit Coral's hand-picked literals — the MASTER values,
   deliberately NOT updated per client. A pre-2023 browser then gets the
   master's derived tints beside the client's seeds, which is a mismatch for a
   small slice of traffic instead of a broken page.
   -------------------------------------------------------------------------- */
@supports not (color: color-mix(in oklab, red, blue)) {
  :root {
    --coral-hover: #e4573b;
    --coral-soft: #fdeae4;
    --accent-on-dark: #ffb3a0;
    --navy-deep: #122740;
    --navy-hover: #21456b;
    --navy-overlay-a: rgba(14, 31, 51, 0.55);
    --navy-overlay-b: rgba(14, 31, 51, 0.78);
    --blue-hover: #e4573b;

    --ink-strong: #2c4360;
    --body: #46586e;
    --muted: #64778e;
    --faint: #8494a7;

    --tint: #f5e9dd;
    --tint-blue: #fdf7f1;
    --tint-track: #f5e9dd;
    --tint-input: #fffdfa;
    --tint-step: #fdeae4;

    --line: #ecdccb;
    --line-card: #efe2d3;
    --line-soft: #f3e8da;
    --line-strong: #e5d3bf;
    --line-hover: #d9c2a8;
    --line-open: #f2b4a2;

    --na: #8e9dae;

    --foot-link: #46586e;
    --foot-fine: #8494a7;
    --foot-body: #b9c9dd;

    --shadow-btn: 0 8px 22px rgba(242, 104, 76, 0.35);
    --shadow-card: 0 1px 3px rgba(23, 50, 79, 0.05);
    --shadow-card-hover: 0 12px 28px rgba(23, 50, 79, 0.1);
  }
}

/* ---- Reset / base -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--coral); text-decoration: none; }
a:hover { color: var(--coral-hover); }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.25;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

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

/* The signature coral accents: highlighted hero phrase + the heading period */
.accent { color: var(--coral); font-style: normal; }
.dot { color: var(--coral); }

/* ---- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--coral-hover); color: #fff; }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-hover); color: #fff; }

.btn-outline {
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line-hover);
}
.btn-outline:hover { border-color: var(--coral); color: var(--coral); }

/* On photos / navy bands */
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  backdrop-filter: blur(4px);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

.btn-sm { padding: 11px 20px; font-size: 14px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }

.btn-phone svg { flex: none; }

/* "Or call us: (xxx) xxx-xxxx" — the text link beside every coral button.
   Navy on light surfaces; white inside heroes, navy bands, and CTA bands. */
.or-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-strong);
}
.or-call strong { color: var(--ink); font-weight: 800; }
.or-call:hover strong { color: var(--coral); }
.hero-card-copy .or-call,
.band-navy .or-call,
.band-navy-deep .or-call,
.cta-band .or-call { color: rgba(255, 255, 255, 0.85); }
.hero-card-copy .or-call strong,
.band-navy .or-call strong,
.band-navy-deep .or-call strong,
.cta-band .or-call strong { color: #fff; }
.hero-card-copy .or-call:hover strong,
.band-navy .or-call:hover strong,
.cta-band .or-call:hover strong { color: var(--coral); }

/* ---- Promo bar ------------------------------------------------------------ */

.promo-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 16px;
  background: var(--coral);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
}
.promo-bar a { color: #fff; text-decoration: underline; font-weight: 800; }
.promo-bar[hidden] { display: none; }

/* ---- Header (navy bar) ------------------------------------------------------ */

.site-header { position: sticky; top: 0; z-index: 50; }

.header-bar {
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px 24px;
  min-height: 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}

.brand { display: flex; align-items: center; gap: 10px; color: #fff; flex: none; }
.brand-chip {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 5px 10px;
}
.brand-logo { height: 44px; width: auto; }
.brand-mark {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral); color: #fff;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
}
.brand-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.15; color: #fff; }
.brand-sub { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

/* Logo far left; nav links + action buttons grouped on the right. */
.nav-desktop { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.nav-link {
  display: inline-block;
  padding: 8px 11px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
.nav-link:hover { color: #fff; }
.nav-link.is-active { color: var(--coral); }
.nav-desktop .nav-link.is-active { color: var(--accent-on-dark); }

/* Dropdowns (Services / Locations) */
.nav-item { position: relative; }
.nav-parent { display: flex; align-items: center; }
.nav-desktop .nav-parent > .nav-link { padding-right: 3px; }
.nav-caret {
  display: inline-flex; align-items: center; justify-content: center;
  /* 24x24 and not overlapping its link: the WCAG 2.5.8 minimum target, which
     Lighthouse flagged at the design's 22px with a -6px overlap. */
  width: 24px; height: 24px;
  margin-left: 0;
  border: 0; background: none; color: rgba(255, 255, 255, 0.6);
  border-radius: 6px; cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}
.nav-caret:hover { color: #fff; }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line-card);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(18, 39, 64, 0.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  z-index: 60;
  /* Hidden by default; shown on hover/focus with a short close delay so the
     panel stays up while the cursor travels to it. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.3s;
}
/* Invisible bridge covering the gap between the nav link and the panel. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown,
.nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
.nav-item.is-open .nav-caret,
.nav-item.has-dropdown:hover .nav-caret { transform: rotate(180deg); }

.nav-dropdown-link {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
}
.nav-dropdown-link:hover { background: var(--coral-soft); color: var(--coral); }
.nav-dropdown-link.is-active { color: var(--coral); }
.nav-dropdown-all {
  margin-top: 4px;
  padding: 9px 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--coral);
}

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.header-phone:hover { color: var(--accent-on-dark); }
.header-phone svg { flex: none; opacity: 0.85; }
.header-login { font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, 0.75); white-space: nowrap; }
.header-login:hover { color: #fff; }

.header-mobile { display: none; margin-left: auto; align-items: center; gap: 10px; }

.menu-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px;
  cursor: pointer;
}
.menu-toggle span { display: block; height: 2px; border-radius: 2px; background: #fff; }

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 10px 20px 18px;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu .nav-link { padding: 11px 4px; font-size: 16px; }
.mobile-menu .nav-item .nav-parent { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu .nav-dropdown {
  position: static;
  display: none;
  box-shadow: none;
  border: 0;
  border-left: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 0;
  padding: 0 0 6px 14px;
  margin: 0 0 4px 6px;
  background: transparent;
  /* The desktop hover show/hide doesn't apply in the accordion menu. */
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: none;
}
.mobile-menu .nav-dropdown::before { display: none; }
.mobile-menu .nav-item.is-open .nav-dropdown { display: flex; }
.mobile-menu .nav-dropdown-link { color: rgba(255, 255, 255, 0.85); }
.mobile-menu .nav-dropdown-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.mobile-menu .nav-dropdown-all { color: var(--accent-on-dark); border-top-color: rgba(255, 255, 255, 0.12); }
.mobile-menu-call {
  margin-top: 12px;
  padding: 13px;
  text-align: center;
  background: var(--coral);
  color: #fff;
  border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-weight: 600;
}
.mobile-menu-call:hover { color: #fff; background: var(--coral-hover); }

/* ---- Hero (full-bleed photo band with navy overlay) ------------------------- */

.hero-shell { padding: 0; }

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: var(--navy);
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Heroes backed by a real photo run taller so the picture isn't reduced to a
   thin over-zoomed slice. .hero-card-tall / .hero-card-full still win. */
.hero-card-photo { min-height: 480px; }
.hero-card-tall { min-height: 540px; }

/* Home hero: sized so header + hero fill exactly one screen on landing.
   --header-h is measured at runtime by app.js. */
.hero-shell-full { padding: 0; }
.hero-card-full {
  min-height: max(500px, calc(100vh - var(--header-h, 92px)));
}
@supports (height: 100svh) {
  .hero-card-full { min-height: max(500px, calc(100svh - var(--header-h, 92px))); }
}

.hero-card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--navy-overlay-a), var(--navy-overlay-b));
}
/* Empty image slot: small labeled chip so demos show what's missing */
.hero-card-ph {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 2;
  padding: 6px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(14, 31, 51, 0.4);
}

.hero-card-copy {
  position: relative;
  max-width: 960px;
  padding: 76px 32px;
  text-align: center;
  color: #fff;
}
.hero-card-copy h1 { color: #fff; }

.hero-stars-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 18px;
}
.stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; }

.hero-title {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.18;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.hero-card-copy h1:not(.hero-title):not(.hero-title-short) {
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.22;
  font-weight: 800;
  text-transform: uppercase;
}
.hero-title-short {
  font-size: clamp(34px, 5vw, 50px);
  font-weight: 800;
  text-transform: uppercase;
}

.hero-card-sub {
  margin: 18px auto 0;
  max-width: 660px;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.hero-card-actions {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: center;
  margin-top: 32px;
}

.hero-card-note {
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

/* Vertical "scroll" cue on the home hero's bottom edge */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.75);
}
.hero-scroll-text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll-line {
  width: 2px;
  height: 44px;
  background: linear-gradient(180deg, var(--accent-on-dark), transparent);
}

/* Breadcrumbs (rendered inside hero cards) */
.breadcrumbs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 14px;
  font-size: 13px; font-weight: 700;
}
.crumb { color: rgba(255, 255, 255, 0.75); }
.crumb:hover { color: #fff; }
.crumb-sep { color: rgba(255, 255, 255, 0.45); }
.crumb-here { color: #fff; }

/* ---- Sections --------------------------------------------------------------- */

.section { padding: 84px 0; }
.section-pad { padding: 44px 0; }
.section-flush { padding: 40px 0 80px; }

.band-white { background: var(--card); }
.band-tint { background: var(--tint); }
.band-blue { background: var(--tint-blue); }

.band-navy { background: var(--navy); }
.band-navy-deep { background: var(--navy-deep); }
.band-navy .section-title,
.band-navy-deep .section-title { color: #fff; }
.band-navy .section-lead,
.band-navy-deep .section-lead { color: var(--foot-body); }
.band-navy .cta-actions { margin-top: 40px; }

/* Kicker ABOVE the uppercase title (the design's heading stack) */
.section-head { text-align: center; margin-bottom: 46px; }
.kicker {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral);
}
.section-title {
  font-size: clamp(25px, 3.2vw, 36px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}
.section-lead {
  margin: 16px auto 0;
  max-width: 640px;
  font-size: 16px;
  color: var(--body);
}

.center-row { display: flex; justify-content: center; margin-top: 36px; }

/* ---- Trust strip ------------------------------------------------------------ */

.trust-strip { padding: 40px 0 8px; }
.trust-inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px 48px;
}
.trust-item { display: flex; align-items: flex-start; gap: 12px; max-width: 300px; }
.trust-icon,
.icon-tile {
  flex: none;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral-soft);
  color: var(--coral);
  border-radius: 12px;
}
.trust-title { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); }
.trust-sub { display: block; font-size: 13px; color: var(--muted); }

/* ---- Card grids ------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

/* ---- Review cards (city featured quote, misc.) -------------------------------- */

.review-card {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.review-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--line-hover); }

.review-head { display: flex; align-items: center; gap: 11px; margin: 0; }
.avatar {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  background: var(--coral);
}
.avatar-green { background: var(--navy); }
.avatar-blue { background: var(--coral); }
.avatar-amber { background: var(--gold); }
.author-name { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.author-meta { display: block; font-size: 12.5px; color: var(--na); }
.review-card .stars { font-size: 14px; }
.review-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
}
.review-featured { max-width: 760px; margin: 0 auto; padding: 32px; }
.review-text-lg { font-size: 17px; line-height: 1.75; }

/* ---- Testimonial carousel (navy-deep band) ------------------------------------ */

.quote-carousel { position: relative; }
.quote-slide {
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 8px 70px;
  color: #fff;
}
.quote-text {
  margin: 0;
  max-width: 820px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 23px);
  font-weight: 600;
  line-height: 1.55;
  color: #fff;
  text-wrap: balance;
}
.quote-author {
  font-size: 15px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.quote-meta { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.55); }

.band-navy-deep .work-nav,
.band-navy .work-nav {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow: none;
  top: 50%;
}
.band-navy-deep .work-nav:hover,
.band-navy .work-nav:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.band-navy-deep .work-nav[disabled]:hover,
.band-navy .work-nav[disabled]:hover { background: transparent; color: #fff; }

/* ---- Service cards ------------------------------------------------------------ */

.svc-card-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.svc-card-row .svc-card { flex: 0 1 356px; }

.svc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 32px 28px;
  color: var(--body);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.svc-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--line-hover);
  color: var(--body);
  transform: translateY(-3px);
}
.svc-card-icon { width: 58px; height: 58px; object-fit: contain; margin-bottom: 4px; }
.svc-card-head { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.svc-card-title { font-size: 16px; font-weight: 700; }
.svc-card-text { font-size: 14px; line-height: 1.65; }
.svc-card-more { margin-top: auto; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--coral); }
.svc-card:hover .svc-card-more { color: var(--coral-hover); }
/* Compact icon+name tiles (the reference's services grid) */
.svc-card-row .svc-card { flex: 0 1 260px; justify-content: center; padding: 30px 20px; }

/* ---- Long-form article sections (service + city pages) -------------------- */

.prose-wrap { max-width: 860px; }
.prose-title {
  font-size: clamp(22px, 2.9vw, 30px);
  margin-bottom: 26px;
}
.prose-item { margin-bottom: 26px; }
.prose-item-title { font-size: 18.5px; margin-bottom: 8px; }
.prose-item-text { font-size: 15.5px; line-height: 1.8; }
.prose-wrap .why-cta { margin-top: 8px; }

/* Service page "About + what's included" split */
.svc-about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 44px;
  align-items: start;
}
.svc-about-copy .prose-title { margin-bottom: 18px; }
.svc-about-text { font-size: 15.5px; line-height: 1.8; margin-bottom: 14px; }
.svc-about-best { font-size: 14.5px; color: var(--muted); margin-bottom: 24px; }
.svc-about-best strong { color: var(--ink); }
.svc-about-panel {
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 26px 28px;
  box-shadow: var(--shadow-card);
}

/* City page per-service blocks */
.city-svc-block { margin-bottom: 24px; }
.city-svc-title { font-size: 18.5px; margin-bottom: 8px; }
.city-svc-text { font-size: 15.5px; line-height: 1.8; }
.city-svc-text a { font-weight: 700; white-space: nowrap; }

.badge {
  display: inline-flex; align-items: center;
  background: var(--coral); color: #fff;
  border-radius: var(--r-pill);
  font-weight: 800;
}
.badge-sm { font-size: 11px; padding: 4px 10px; letter-spacing: 0.04em; }

/* ---- Why choose us: ghost numerals + photo collage ------------------------------ */

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.ghost-rows { display: flex; flex-direction: column; gap: 34px; }
.ghost-row { display: flex; gap: 24px; align-items: flex-start; }
.ghost-num {
  flex: none;
  /* One width for every numeral ("01." is narrower than "04."), so the
     titles and text line up in a single column. */
  width: 1.7em;
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 800;
  line-height: 1;
  color: rgba(23, 50, 79, 0.14);
  letter-spacing: -0.02em;
}
.ghost-num .dot { color: var(--coral); }
.ghost-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.ghost-text { font-size: 15px; line-height: 1.7; }

/* Tall photo left, two stacked right. The right tiles set the height (their
   own aspect ratio); the left tile stretches to exactly their combined height,
   so top and bottom edges line up and every gap is the same. The design's
   original offset margins overlapped tiles 2 and 3 and left a hole under 1. */
.why-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.collage-tile { position: relative; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card-hover); }
.collage-tile-1 { grid-row: span 2; min-height: 320px; }
.collage-img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 4.4; }
/* Out of flow, so the tall tile follows the stack instead of sizing it. */
.collage-tile-1 .collage-img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.collage-ph { aspect-ratio: 4 / 5; border-radius: var(--r-card); }

/* Collage absent (all three slots false): rows go full width, centered. */
.why-grid > .ghost-rows:only-child { max-width: 760px; margin: 0 auto; }
.why-grid:has(> .ghost-rows:only-child) { grid-template-columns: 1fr; }

/* ---- Steps (How it works: giant 01. 02. 03. cards) -------------------------------- */

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--card);
  border-radius: var(--r-card);
  padding: 38px 28px 34px;
  box-shadow: var(--shadow-card);
}
.step-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.step-title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
}
.step-text { font-size: 14.5px; line-height: 1.65; max-width: 340px; }

/* ---- Gallery ------------------------------------------------------------------------ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.gallery-img { border-radius: var(--r-card); width: 100%; height: auto; object-fit: cover; }
.gallery-ph { aspect-ratio: 4 / 3; }

/* ---- Guarantee band ----------------------------------------------------------------- */

.guarantee-band {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-left: 5px solid var(--coral);
  border-radius: var(--r-card);
  padding: 30px 32px;
  box-shadow: var(--shadow-card);
}
.guarantee-mark {
  flex: none;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral-soft);
  color: var(--coral);
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
}
.guarantee-copy { flex: 1 1 340px; }
.guarantee-copy h2 { font-size: 20px; margin-bottom: 6px; }
.guarantee-copy p { font-size: 14.5px; }

/* ---- CTA band (navy, full-width) ------------------------------------------------------ */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.cta-band-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cta-band-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 31, 51, 0.66), var(--navy-overlay-b));
}
.cta-band-inner { position: relative; padding: 80px 24px; max-width: 820px; }
.cta-band h2 {
  color: #fff;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800;
  text-transform: uppercase;
}
.cta-band p {
  margin: 16px auto 0;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--foot-body);
}
.cta-actions {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: center;
  margin-top: 30px;
}

/* ---- Switcher pills (checklist room tabs) ---------------------------------------------- */

.switcher-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 0 4px;
}
.switcher-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.switcher-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: 999px;
  padding: 5px;
}
.switch-pill {
  padding: 10px 20px;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.switch-pill:hover { color: var(--coral); }
.switch-pill.is-active {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.switch-pill.is-active:hover { color: #fff; }

/* ---- Services overview rows ------------------------------------------------------------ */

.service-list { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }

.service-row {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  gap: 28px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.service-row-img { border-radius: 12px; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 6 / 5; }
.service-row-ph { aspect-ratio: 6 / 5; border-radius: 12px; }
.service-row-name { font-size: 21px; }
.service-row-desc { margin-top: 10px; font-size: 15px; }
.service-row-best { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.service-row-best strong { color: var(--ink); }
.service-row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.service-row-panel {
  background: var(--tint-blue);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 20px 22px;
}
.panel-heading {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 12px;
}
.included-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.included-list li { display: flex; gap: 10px; font-size: 14px; color: var(--body); }

.tick {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral-soft);
  color: var(--coral);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

/* ---- Benefit cards (service page "what's included") -------------------------------------- */

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.benefit-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 20px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.benefit-card .tick-badge { width: 32px; height: 32px; font-size: 13px; }

.tick-badge {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral-soft);
  color: var(--coral);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
}

/* ---- Review-platform strip (service pages) -------------------------------------------------- */

.platform-strip { padding: 36px 0; background: var(--card); border-bottom: 1px solid var(--line-soft); }
.platform-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 48px;
}
.platform-tagline {
  max-width: 230px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}
.platform-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.platform-name { font-size: 16px; font-weight: 800; color: var(--muted); }
.platform-item .stars { color: var(--gold); letter-spacing: 2px; font-size: 13px; }

/* ---- Service page split sections (checkmark copy beside a before/after) --------------------- */

.svc-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: center;
}
.svc-split-rev { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.svc-split .why-item:last-of-type { margin-bottom: 0; }
.svc-split-copy .why-cta { margin-top: 24px; }

/* ---- Before / after pairs -------------------------------------------------------------------- */

.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ba-half { position: relative; }
.ba-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-card);
}
.ba-ph { aspect-ratio: 1 / 1; border-radius: var(--r-card); min-height: 0; font-size: 12.5px; }
.ba-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.ba-badge-before { background: var(--navy); }
.ba-badge-after { background: var(--coral); }

/* Pairs placed beside copy stretch to the text column's height. */
.svc-split > .ba-pair { align-self: stretch; }
.svc-split > .ba-pair .ba-img { height: 100%; aspect-ratio: auto; }
@media (min-width: 881px) {
  .svc-split > .ba-pair { min-height: 460px; }
}

/* ---- Before/after carousel (home + service pages) ---------------------------
   Paged: each slide is one full-width before/after SET — arrows page set by
   set, the scrollbar is hidden, and no neighboring slide peeks in. */
.work-carousel { position: relative; --work-h: min(43vw, 480px); }
.work-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.work-track::-webkit-scrollbar { display: none; }
.work-slide {
  margin: 0;
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.work-slide .ba-pair { grid-template-columns: auto auto; }
.work-slide .ba-img { width: auto; height: var(--work-h); }
.work-slide .ba-ph { width: var(--work-h); height: var(--work-h); }
.work-caption {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.work-nav {
  position: absolute;
  top: calc(var(--work-h) / 2);
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-card);
  background: var(--card);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(23, 50, 79, 0.16);
  transition: background 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.work-nav:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.work-nav[disabled] { opacity: 0.35; cursor: default; }
.work-nav[disabled]:hover { background: var(--card); color: var(--navy); }
.work-nav-prev { left: -10px; }
.work-nav-next { right: -10px; }
@media (max-width: 640px) {
  .work-nav { width: 40px; height: 40px; }
  .work-nav-prev { left: 2px; }
  .work-nav-next { right: 2px; }
}

/* ---- City page ---------------------------------------------------------------------------- */

/* Shared section photos beside intro / why copy */
.city-photo { align-self: stretch; }
.city-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--r-card);
}
.city-photo-ph { height: 100%; min-height: 320px; border-radius: var(--r-card); }

/* Vertical checkmark list under the city intro */
.city-checklist {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.city-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.city-checklist .tick-badge { width: 24px; height: 24px; font-size: 11px; flex: none; }

/* Centered "How can we help?" block */
.how-help {
  max-width: 760px;
  text-align: center;
}
.how-help .section-title { margin-bottom: 16px; }
.how-help p { margin: 0 0 26px; font-size: 15.5px; line-height: 1.8; }
.how-help .cta-actions { justify-content: center; }

/* Alternating text + media SEO rows */
.seo-row { margin-bottom: 52px; }
.seo-row:last-of-type { margin-bottom: 46px; }
.seo-block h2 {
  font-size: clamp(20px, 2.6vw, 25px);
  margin-bottom: 12px;
}
.seo-block p { margin: 0 0 14px; font-size: 15px; line-height: 1.8; }
.seo-block-center {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.city-map { width: 100%; }
.city-map .map-embed iframe { display: block; width: 100%; height: 340px; border: 0; }
.seo-list-label { font-weight: 800; color: var(--ink); }
.city-svc-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
}

/* ---- Why this service (checkmark list on service pages) --------------------------- */

.why-wrap { max-width: 900px; }
.why-title {
  font-size: clamp(22px, 2.8vw, 27px);
  color: var(--navy);
  margin-bottom: 30px;
  text-wrap: balance;
}
.why-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.why-item .tick-badge { flex: none; margin-top: 2px; width: 24px; height: 24px; font-size: 12px; }
.why-item p { margin: 0; font-size: 15px; line-height: 1.75; }
.why-item strong { color: var(--ink); }
.why-cta { margin-top: 10px; }

/* ---- FAQ accordion (single centered column, thin rules, "+" toggles) ------------------------ */

.faq-list {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--line-strong);
}

.faq-item {
  background: transparent;
  border-bottom: 1px solid var(--line-strong);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 6px;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.faq-q:hover { color: var(--coral); }
.faq-q::-webkit-details-marker { display: none; }
.faq-icon {
  flex: none;
  color: var(--coral);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.3s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a {
  padding: 0 6px 22px;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
}

.faq-more { flex-direction: column; align-items: center; gap: 14px; margin-top: 44px; display: flex; }
.faq-more-title { font-size: 22px; color: var(--navy); }

/* ---- Checklist tables -------------------------------------------------------------------------- */

.checklist-wrap {
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.cl-tabs { align-self: center; }
.cl-tabs .switch-pill { padding: 11px 24px; font-size: 14px; }

.cl-room {
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 16px;
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}
.cl-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; min-width: 560px; }

.cl-table thead th {
  background: var(--coral);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 13px 16px;
}
.cl-table thead th:first-child { text-align: left; border-radius: 12px 0 0 12px; padding-left: 20px; }
.cl-table thead th:last-child { border-radius: 0 12px 12px 0; }
.cl-table thead th:not(:first-child) { width: 130px; }

.cl-table tbody td {
  background: var(--tint-blue);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 11px 16px;
  text-align: center;
}
.cl-table tbody td:first-child { border-left: 1px solid var(--line-soft); border-radius: 10px 0 0 10px; padding-left: 20px; }
.cl-table tbody td:last-child { border-right: 1px solid var(--line-soft); border-radius: 0 10px 10px 0; }
.cl-task { text-align: left !important; font-size: 14.5px; font-weight: 600; color: var(--ink-strong); }

.cl-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 12.5px;
  font-weight: 700;
}
.cl-yes { background: var(--ok-bg); color: var(--ok); }
.cl-no { background: var(--no-bg); color: var(--no); }
.cl-na { background: transparent; color: var(--na); font-size: 9.5px; }

.cl-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
  padding: 6px 0 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.cl-legend > span { display: flex; align-items: center; gap: 7px; }
.cl-legend .cl-mark { width: 20px; height: 20px; font-size: 10px; }
.cl-legend .cl-na { font-size: 8px; }

/* ---- Service areas ------------------------------------------------------------------------------- */

/* Navy band: white pin cards */
.area-pin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.area-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: var(--r-card);
  padding: 26px 18px 22px;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.area-pin:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); color: var(--ink); }
.area-pin-icon { color: var(--coral); display: flex; }
.area-pin-icon svg { width: 26px; height: 26px; }
.area-pin-name { text-align: center; }

.band-navy .map-card { margin-top: 34px; }

/* Areas overview: alternating photo/copy rows */
.area-row { align-items: center; }
.area-row-media { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card-hover); }
.area-row-img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.area-row-ph { aspect-ratio: 3 / 2; border-radius: var(--r-card); }
.area-row-copy .area-pin-icon { display: inline-flex; margin-bottom: 10px; }
.area-row-copy .area-pin-icon svg { width: 30px; height: 30px; }
.area-row-city {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.area-row-text { font-size: 15.5px; line-height: 1.8; margin-bottom: 10px; }
.area-row-copy .area-card-popular { margin-bottom: 22px; }

/* Areas overview cards */
.area-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 22px;
  color: var(--body);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.area-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--line-hover); color: var(--body); }
.area-card-img { border-radius: 10px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 6px; }
.area-card-ph { aspect-ratio: 16 / 9; border-radius: 10px; margin-bottom: 6px; }
.area-card-city { font-size: 19px; }
.area-card-text { font-size: 14px; }
.area-card-popular { font-size: 13px; color: var(--muted); }
.area-card-popular strong { color: var(--ink); }
.area-card .svc-card-more { margin-top: 6px; }

.city-intro-wrap { max-width: 860px; }
.intro-title { font-size: clamp(23px, 2.9vw, 29px); margin-bottom: 16px; }
.city-intro { font-size: 15.5px; line-height: 1.8; }

.check-chip-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; }
.check-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 800; color: var(--ink);
}
.chip-tick {
  flex: none;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral-soft); color: var(--coral);
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
}

.nearby-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  justify-content: center;
}
.nearby-label { font-size: 14px; font-weight: 800; color: var(--muted); }
.link-arrow { font-size: 14.5px; font-weight: 800; }

/* ---- Map ------------------------------------------------------------------------------------------- */

.map-card {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line-card);
  box-shadow: 0 2px 12px rgba(23, 50, 79, 0.08);
  background: var(--card);
}
.map-embed iframe { display: block; width: 100%; height: 420px; border: 0; }
/* Click-to-load panel: same 420px as the iframe it becomes, so nothing shifts.
   The faint grid reads as "map" without loading one. */
.map-facade {
  height: 420px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
  background-color: var(--tint-blue);
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 40px 40px;
}
.map-facade-pin { color: var(--accent); }
.map-facade-pin svg { width: 40px; height: 40px; }
.map-facade-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.map-facade-link { font-size: 14px; font-weight: 600; text-decoration: underline; }
.map-card .media-placeholder { border-radius: 0; border: 0; min-height: 320px; }

/* ---- Page head (contact / booking intro) ------------------------------------------------------------ */

.page-head { padding: 64px 0 8px; text-align: center; }
.page-title {
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 800;
  text-transform: uppercase;
}
.page-lead {
  margin: 16px auto 0;
  max-width: 580px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
}

.step-chips {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 24px;
}
.step-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-strong);
}
.step-chip-num {
  flex: none;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral-soft);
  color: var(--coral);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

/* ---- Contact / booking layout ------------------------------------------------------------------------ */

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 26px;
  align-items: start;
  padding-top: 36px;
}
.booking-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }

.info-col { display: flex; flex-direction: column; gap: 14px; }

.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 20px 22px;
  color: var(--body);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
a.contact-card:hover { border-color: var(--coral); box-shadow: var(--shadow-card-hover); color: var(--body); }
.contact-card-icon {
  flex: none;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral-soft);
  color: var(--coral);
  border-radius: 12px;
}
.contact-card-title { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.contact-card-value { display: block; font-size: 16.5px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.contact-card-static { flex-direction: column; align-items: stretch; }
.contact-card-heading { font-size: 16px; margin-bottom: 8px; }
.hours-rows { display: flex; flex-direction: column; }
.hours-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.hours-row:last-child { border-bottom: 0; }
.hours-row b { color: var(--ink); font-weight: 800; }
.contact-area-note { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.contact-area-note b { color: var(--ink); }

.form-panel {
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 30px;
  box-shadow: 0 2px 12px rgba(23, 50, 79, 0.06);
}
/* Contact page: the form panel stands alone, centered (no info column). */
.form-panel-solo { max-width: 760px; margin: 0 auto; }
.form-panel-title { font-size: 22px; }
.form-panel-sub { margin: 6px 0 18px; font-size: 14px; color: var(--muted); }
.form-panel-alt { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* Third-party embed slots (GHL / Booking Koala). While empty they show the
   labeled placeholder; once app.js injects the snippet (.has-embed) the
   dashed frame disappears and the iframe takes over. */
.embed-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 320px;
  border: 1.5px dashed var(--line-hover);
  border-radius: var(--r-card);
  background: var(--tint-input);
  text-align: center;
  padding: 28px;
}
.embed-slot-tall { min-height: 480px; }
.embed-icon { font-size: 30px; }
.embed-label { font-size: 15px; font-weight: 800; color: var(--ink); }
.embed-hint { font-size: 12.5px; line-height: 1.6; color: var(--faint); }

.embed-slot.has-embed {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  min-height: 0;
  text-align: left;
}
.embed-slot.has-embed iframe { width: 100%; border: 0; }
/* A configured slot before app.js mounts the snippet: same reserved height
   (no layout shift), none of the placeholder's dashed-box styling. */
.embed-slot:has(> .embed-loading) { border: 0; background: none; }
.embed-loading { font-size: 14px; color: var(--muted); }

.aside-card {
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 24px;
}
.aside-card + .aside-card { margin-top: 14px; }
.aside-card-dark { background: var(--navy); border-color: var(--navy); color: var(--foot-body); }
.aside-card-dark .aside-heading { color: #fff; }
.aside-card-dark p { font-size: 14px; }
.aside-card-dark .btn { margin-top: 14px; }
.aside-heading { font-size: 17px; margin-bottom: 10px; }
.next-list { display: flex; flex-direction: column; gap: 12px; }
.next-item { display: flex; gap: 10px; font-size: 14px; }
.aside-call { margin-top: 10px; font-size: 13px; color: var(--faint); }
.aside-call a { color: #fff; font-weight: 800; }

/* ---- Customer login shell ------------------------------------------------------------------------------ */

.login-shell { padding: 40px 14px 56px; }
.login-card {
  border-radius: var(--r-hero);
  background: var(--card);
  border: 1px solid var(--line-card);
  box-shadow: var(--shadow-card);
  display: flex;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto;
}
.login-card-inner {
  width: 100%;
  max-width: 760px;
  padding: 56px 24px 64px;
  text-align: center;
}
.login-card-inner .page-lead { margin-bottom: 30px; }
.login-card-inner .form-panel { text-align: left; margin-top: 30px; border: 0; box-shadow: none; padding: 0; }

/* ---- Blog ------------------------------------------------------------------------------------------------ */

/* Index cards (inside .card-grid) */
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 22px;
  color: var(--body);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.blog-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--line-hover); color: var(--body); }
.blog-card-img { border-radius: 10px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 6px; }
.blog-card-ph { aspect-ratio: 16 / 9; border-radius: 10px; margin-bottom: 6px; min-height: 0; }
.blog-card-title { font-size: 18px; line-height: 1.35; }
.blog-card-text { font-size: 14px; }
.blog-card .svc-card-more { margin-top: 6px; }

/* Tag pill + date / read-time row (index cards and the post header) */
.blog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--faint);
}
.blog-tag {
  background: var(--coral-soft);
  color: var(--coral);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}

/* Post page: document-style article */
.blog-article { padding: 56px 0 8px; }
.blog-article-head { max-width: 848px; }
.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 22px;
}
.blog-article-head .blog-meta { margin-bottom: 14px; }
.blog-article-head h1 {
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.15;
  margin-bottom: 18px;
  text-wrap: balance;
}
.blog-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.blog-author-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.blog-author-lines { display: flex; flex-direction: column; }
.blog-author-name { font-size: 15px; font-weight: 800; color: var(--ink); }

.blog-feature {
  max-width: 800px;
  margin: 0 auto;
  border-radius: var(--r-hero);
  overflow: hidden;
}
.blog-feature-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-feature-ph { aspect-ratio: 16 / 9; }

.blog-body {
  max-width: 768px;
  margin: 0 auto;
  padding: 36px 24px 24px;
  font-size: 17px;
  line-height: 1.85;
}
.blog-body h2 { font-size: 23px; margin: 36px 0 12px; }
.blog-body p { margin: 0 0 24px; text-wrap: pretty; }

/* CTA band as a rounded card inside the container (blog post pages) */
.cta-band-card { border-radius: var(--r-hero); }

/* ---- Legal document -------------------------------------------------------------------------------------- */

.legal-doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 88px;
  font-size: 15px;
  line-height: 1.8;
}
.legal-title { font-size: clamp(30px, 4.2vw, 42px); margin-bottom: 14px; text-transform: uppercase; }
.legal-updated { font-size: 14px; color: var(--faint); }
.legal-draft {
  margin-top: 22px;
  padding: 12px 16px;
  background: #fdf6e3;
  border: 1px solid #f0dfae;
  border-radius: 10px;
  font-size: 13.5px;
  color: #7a6320;
}
.legal-heading { font-size: 22px; margin: 36px 0 12px; }
.legal-text { margin: 0; }
/* Legal bodies split on a blank line into multiple <p>s (components.js
   legalBody) — .legal-text is margin:0, so stacked paragraphs need a gap. */
.legal-text + .legal-text { margin-top: 14px; }

/* ---- SMS opt-in page (A2P 10DLC) --------------------------------------------------------------------------- */

.sms-prose { max-width: 820px; }
.sms-prose .legal-heading:first-child { margin-top: 0; }

.sms-samples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sms-samples li {
  padding: 12px 16px;
  background: var(--tint);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--blue);
  border-radius: 10px;
  font-size: 14.5px;
}

/* ---- Media placeholders ------------------------------------------------------------------------------------ */

.media-img { width: 100%; height: auto; }

.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  min-height: 120px;
  border-radius: var(--r-card);
  border: 1.5px dashed var(--line-hover);
  background: repeating-linear-gradient(
    -45deg,
    var(--tint-blue),
    var(--tint-blue) 12px,
    var(--tint) 12px,
    var(--tint) 24px
  );
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
}

/* ---- Footer (cream, 4 columns) -------------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line-strong);
  color: var(--foot-link);
}

.footer-top {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 64px 24px 16px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-col-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.footer-col-brand .footer-heading { margin-top: 20px; }

.footer-heading {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--foot-link);
}
.footer-link:hover { color: var(--coral); }
.footer-link svg { flex: none; color: var(--coral); }
.footer-email { word-break: break-all; }
.footer-line { display: inline-flex; align-items: flex-start; gap: 9px; font-size: 14px; }
.footer-line svg { flex: none; margin-top: 4px; color: var(--coral); }
.footer-social { display: flex; gap: 16px; margin-top: 4px; }

.footer-logo { height: 44px; width: auto; }
.footer-logo-chip {
  display: flex;
  align-items: center;
  background: var(--navy);
  border-radius: 10px;
  padding: 6px 12px;
}
.footer-brand-row { display: flex; align-items: center; gap: 10px; }
.footer-mark {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral); color: #fff;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
}
.footer-brand-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--navy); }

.footer-bottom { border-top: 1px solid var(--line-strong); margin-top: 40px; }
.footer-bottom-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px 24px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--foot-fine);
}
.footer-fine { display: flex; flex-direction: column; gap: 3px; color: var(--foot-link); font-weight: 600; }
.footer-fineprint { color: var(--foot-fine); font-weight: 400; }
/* Three links (Privacy, Terms, Text Message Opt-In) overflow a 375px row
   without wrapping. */
.footer-legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px 18px; }
.footer-legal-link { color: var(--foot-fine); }
.footer-legal-link:hover { color: var(--coral); }

/* ---- Sticky mobile CTA ------------------------------------------------------------------------------------------ */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.sticky-cta.is-visible { display: flex; }
.sticky-cta .btn { flex: 1; }
body.has-sticky-cta { padding-bottom: 76px; }

/* ---- Responsive ---------------------------------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .service-row { grid-template-columns: 1fr 1fr; }
  .service-row-media { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .nav-desktop, .header-actions { display: none; }
  .header-mobile { display: flex; }
  .mobile-menu.is-open { display: flex; }

  .hero-card-copy { padding: 56px 22px 72px; }
  .hero-card-tall { min-height: 480px; }

  .section { padding: 56px 0; }

  .two-col, .booking-grid { grid-template-columns: 1fr; }
  .svc-split, .svc-split-rev, .svc-about { grid-template-columns: 1fr; gap: 26px; }
  .svc-split-rev .ba-pair { order: 2; }
  .service-row { grid-template-columns: 1fr; gap: 18px; }

  .why-grid { grid-template-columns: 1fr; gap: 36px; }
  .ghost-row { gap: 16px; }
  .quote-slide { padding: 8px 8px 56px; }
  .band-navy-deep .work-nav, .band-navy .work-nav { top: auto; bottom: 0; transform: none; }
  .band-navy-deep .work-nav-prev, .band-navy .work-nav-prev { left: calc(50% - 52px); }
  .band-navy-deep .work-nav-next, .band-navy .work-nav-next { right: calc(50% - 52px); }

  .footer-legal { margin-left: 0; }
}

@media (max-width: 560px) {
  .hero-card-actions .btn { width: 100%; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .or-call { justify-content: center; }
  .switcher-track { border-radius: 22px; }
  .guarantee-band { padding: 24px 22px; }
  .form-panel { padding: 22px 18px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Reduced motion -------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   OPTIONAL: hero quote form + photo feature cards
   --------------------------------------------------------------------------
   Everything below is inert unless flags.heroQuoteForm is on (the .hero-card-
   form / .hero-quote / .hero-proof / .hero-card-foot classes) or
   images.featureCards is an array (.fcard). Every selector is scoped to one of
   those, so a site with both switched off renders exactly as it did before
   this block existed. Ported from the beacon-slate design master.
   ========================================================================== */


/* ---- Hero quote form -------------------------------------------------------
   The theme's premise: the lead form sits in the hero on every page. The card
   becomes two columns — copy left, form panel right — and the copy switches
   from centered to left-aligned. Below 880px (matching mqMobile in app.js) it
   stacks, copy first.

   Deliberately NO data-reveal on .hero-quote: wireReveal() sets opacity:0 on
   anything below innerHeight * 0.92, which on a stacked mobile hero would hide
   the primary CTA until the visitor scrolled. */

.hero-card-form { align-items: stretch; }

.hero-card-inner {
  position: relative;
  display: grid;
  gap: 28px;
  align-items: center;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px 24px;
}

/* .hero-card is a ROW flex (it centres a single child). With a foot it carries
   two stacked children, so it has to become a column — otherwise the foot lands
   beside the copy/form row instead of under it. The inner row takes the slack so
   its content stays vertically centred and the foot settles at the bottom. */
.hero-card-hasfoot {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.hero-card-hasfoot .hero-card-inner { flex: 1 1 auto; }

/* ---- Hero foot: trust bar + review platforms, inside the hero ---------------
   Both used to be white bands under the hero. In here they sit on the photo, so
   every colour token flips to a light-on-dark variant — the shared .trust-item /
   .platform-item markup is reused untouched and only recoloured from this scope.
   A hairline rule separates it from the copy/form row above. */
.hero-card-foot {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero-card-foot::before {
  content: "";
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.hero-trust { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.hero-card-foot .trust-item { max-width: 320px; }
.hero-card-foot .trust-icon {
  background: color-mix(in srgb, #fff 16%, transparent);
  color: #fff;
}
.hero-card-foot .trust-title { color: #fff; }
.hero-card-foot .trust-sub { color: rgba(255, 255, 255, 0.72); }

.hero-platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
}
.hero-card-foot .platform-tagline {
  max-width: 220px;
  color: rgba(255, 255, 255, 0.88);
}
.hero-card-foot .platform-name { color: rgba(255, 255, 255, 0.82); font-size: 15px; }
.hero-card-foot .platform-item { flex-direction: row; align-items: center; gap: 7px; }

@media (max-width: 880px) {
  .hero-card-foot { padding: 0 18px 28px; gap: 14px; }
  .hero-trust { gap: 12px 24px; }
  .hero-card-foot .trust-item { max-width: none; flex: 1 1 100%; }
}

.hero-card-form .hero-card-copy {
  max-width: none;
  padding: 0;
  text-align: left;
}
.hero-card-form .hero-stars-row { justify-content: flex-start; }
.hero-card-form .hero-card-actions { justify-content: flex-start; }
.hero-card-form .hero-card-note { text-align: left; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.hero-proof li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}
.hero-proof .tick-badge {
  flex: none;
  width: 22px;
  height: 22px;
  font-size: 12px;
  background: var(--accent);
  color: #fff;
}

/* A form makes the hero content-sized. Keeping the viewport floor would push
   the form's own submit button below the fold on short laptops — the opposite
   of the point. The .hero-card-full CLASS stays on the element either way,
   because app.js keys --header-h off it. */
.hero-card-full.hero-card-form,
.hero-card-photo.hero-card-form { min-height: 0; }

.hero-quote {
  position: relative;
  border-radius: var(--r-card);
  background: var(--bg);
  box-shadow: 0 24px 60px color-mix(in srgb, #000 28%, transparent);
  overflow: hidden;
}
.hero-quote-head {
  padding: 20px 24px 16px;
  background: var(--navy);
  text-align: center;
}
.hero-quote-title {
  color: #fff;
  font-size: 26px;
  margin-bottom: 6px;
}
/* The reference's hand-drawn underline under the panel title, as a rule. */
.hero-quote-title::after {
  content: "";
  display: block;
  width: 62px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.hero-quote-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.hero-quote-note {
  padding: 0 24px 16px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
}

/* Sizing: the SLOT is sized, never the provider's iframe. Empty and loaded
   states reserve the same height, so mounting the embed shifts nothing. The
   iframe rule is a FLOOR — GoHighLevel writes an inline pixel height that wins
   over the stylesheet, so a short form still collapses to its own size and a
   tall one still grows; this only catches the case where form_embed.js is
   blocked or slow and the iframe would otherwise fall back to ~150px.
   No max-height/overflow: a scrollport inside a hero kills conversions. */
/* Doubled class on purpose: the generic .embed-slot rules live further down
   the file and would otherwise win on source order, re-imposing the dashed
   placeholder border, the tinted background and a 320px min-height. */
.hero-quote { --quote-h: 409px; }
.embed-slot.hero-quote-slot,
.embed-slot.hero-quote-slot.has-embed {
  min-height: var(--quote-h);
  padding: 18px 22px 22px;
  border: 0;
  background: none;
}
.embed-slot.hero-quote-slot.has-embed { padding: 8px; }
.embed-slot.hero-quote-slot.has-embed iframe {
  display: block;
  width: 100%;
  height: var(--quote-h);
  border: 0;
}
.embed-slot.hero-quote-slot.has-embed .hero-quote-hint { display: none; }

/* Unconfigured state: an inert preview of the form's shape. Not a dashed
   placeholder box — this panel is on every page of the master demo. */
.hero-quote-preview { display: grid; gap: 10px; }
.hero-quote-field {
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--tint);
  font-size: 14px;
  color: var(--faint);
}
.hero-quote-btn {
  margin-top: 4px;
  padding: 14px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.hero-quote-hint {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--faint);
}

@media (min-width: 881px) {
  .hero-card-inner {
    grid-template-columns: minmax(0, 1fr) minmax(370px, 412px);
    gap: 48px;
    padding: 44px 32px;
  }
}

@media (max-width: 880px) {
  /* Stacked, the hero's call button sits directly above the quote panel and
     pushes it down a phone-screen's worth — while [data-sticky-cta] is already
     pinned to the viewport with the same call action below this exact width.
     Drop the duplicate so the form clears the fold. */
  .hero-card-form .hero-card-actions { display: none; }
  .hero-card-inner { padding: 32px 18px 36px; }
  .hero-quote-title { font-size: 23px; }
}

/* ---- Feature cards (home "Why choose us") ----------------------------------
   The theme's signature card: photo on top, the item's icon on a filled circle
   straddling the photo's bottom edge, copy on white below. Degrades to a plain
   icon-first card when that index has no photo. */

.fcard-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  background: var(--bg);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }

.fcard-media {
  overflow: hidden;
  border-radius: var(--r-card) var(--r-card) 0 0;
  aspect-ratio: 3 / 2;
  background: var(--tint);
}
.fcard-img { width: 100%; height: 100%; object-fit: cover; }
.fcard-ph { width: 100%; height: 100%; }

/* The badge straddles the photo's bottom edge on a photo card, and simply
   leads the card when there's no photo. Pulled up by half its own height in
   normal flow rather than positioned at a percentage — a percentage would
   resolve against the whole card, which is taller than its photo by a varying
   amount once titles wrap to two lines. */
/* Light fill, not the dark circle the reference uses: the icon set is
   detailed PNG illustration drawn for a pale tile (the same art the process
   steps run on). On a dark badge it has to be flattened to a white
   silhouette, which throws away every interior line and leaves a blob. */
.fcard-badge {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--tint-step);
  border: 1px solid var(--line-open);
}
.fcard-photo .fcard-badge {
  position: relative;
  z-index: 1;
  margin: -31px auto 0;
  box-shadow: 0 0 0 5px var(--bg);
}
.fcard:not(.fcard-photo) .fcard-badge { margin: 24px auto 0; }

.fcard-icon { width: 36px; height: 36px; object-fit: contain; }
.fcard-tick { color: var(--accent); font-size: 26px; font-weight: 700; line-height: 1; }

.fcard-body {
  padding: 16px 22px 26px;
  text-align: center;
}
.fcard-title { font-size: 19px; margin-bottom: 8px; }
.fcard-text { font-size: 14.5px; line-height: 1.65; color: var(--body); }

/* ---- Accent text on dark surfaces -----------------------------------------
   Titles, kickers and the accent period that sit DIRECTLY on navy (bands,
   hero cards, CTA bands, the mobile menu) take --accent-on-dark. White cards
   inside a navy band (step cards, area pins) keep the plain accent, so the
   selectors name the title / kicker, never every .dot in the band. */
.hero-card .accent,
.hero-card .dot,
.hero-card .kicker,
.band-navy .section-title .dot,
.band-navy-deep .section-title .dot,
.band-navy .kicker,
.band-navy-deep .kicker,
.cta-band h2 .dot,
.mobile-menu .nav-link.is-active,
.hero-card-copy .or-call:hover strong,
.band-navy .or-call:hover strong,
.band-navy-deep .or-call:hover strong,
.cta-band .or-call:hover strong { color: var(--accent-on-dark); }

/* ---- Phone header ------------------------------------------------------------
   Canopy Maid's lockup is wider (4.6:1) than the design's demo logo, so at
   44px the logo chip plus Quote + menu buttons overflow a phone row and the
   sticky header wraps to two rows. Tighten it to one row down to 320px. */
@media (max-width: 600px) {
  .header-inner { padding-left: 16px; padding-right: 16px; column-gap: 12px; }
  .brand-logo { height: 34px; }
  .header-mobile .btn { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 350px) {
  .header-inner { padding-left: 12px; padding-right: 12px; }
  .brand-chip { padding: 4px 8px; }
  .brand-logo { height: 26px; }
}

/* ---- Compact header below 1200px -----------------------------------------------
   Logo, full nav, phone number and quote button need about 1190px once a
   scrollbar is counted, so anything narrower would wrap to two rows. Collapse
   the nav into the menu instead and keep the number beside the quote button.
   Under 600px the row has no room: the number moves to the menu and sticky bar. */
@media (max-width: 1199px) {
  .nav-desktop, .header-actions { display: none; }
  .header-mobile { display: flex; }
  .mobile-menu.is-open { display: flex; }
}
@media (max-width: 600px) {
  .header-mobile .header-phone { display: none; }
}

/* ---- Home hero on phones -------------------------------------------------------
   The home hero photo puts the porch greeting in its right third, because the
   centred headline covers the middle. A phone's cover-crop keeps only a narrow
   centre strip, so shift that strip right to keep the greeting in frame. */
@media (max-width: 700px) {
  [data-page="home"] .hero-card-img { object-position: 90% center; }
}

/* ---- Home hero brand (flags.heroBrand) --------------------------------------------
   "line": the business name, bold, with the main city beside it, above a
   full-size headline. "logo": the reversed logo, large, with the headline a
   size smaller. The headline stays the H1 either way. */
.hero-brand-line {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin: 0 0 20px;
}
.hero-brand-mark {
  height: clamp(46px, 4.4vw, 60px);
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}
.hero-brand-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

/* Bigger header logo on wide screens: the brand is easy to spot where people
   look for it first. Narrower screens keep the sizes the nav needs. */
@media (min-width: 1100px) {
  .brand-logo { height: 56px; }
}

.hero-brand {
  display: block;
  height: clamp(130px, 13vw, 200px);
  width: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
}
.hero-card-copy:has(.hero-brand) .hero-title { font-size: clamp(21px, 2.5vw, 33px); }
@media (max-width: 600px) {
  .hero-brand { height: 124px; margin-bottom: 16px; }
}

/* The scroll cue needs open space under the hero copy. The sticky bar covers it
   on phones and tablets, and the large home logo leaves no room on short laptop
   screens, where it would run through the note under the buttons. */
@media (max-width: 880px) {
  .hero-scroll { display: none; }
}
@media (max-height: 820px) {
  [data-page="home"] .hero-scroll { display: none; }
}