/* ==========================================================================
   styles.css — Harbor Gold theme (deep petrol blue, aqua pill CTAs, gold
   accents). Reference: internal/design/DESIGN-NOTES.md

   COLOR IS SEEDED, NOT LISTED. Three seeds drive the palette; every other
   color token derives from them with color-mix(). Rebranding a client copy =
   set `theme` in assets/js/config.js (build/partials.js emits those three
   seeds as an inline :root override and reuses the accent for the generated
   favicon). Editing the seeds here changes the design's own default.
   ========================================================================== */

:root {
  /* ---- SEEDS — the only colors a rebrand needs to touch ------------------
     `deep` is the petrol: dark tiles and bands, the footer, headings, and
     link text. `accent` is the aqua: pill CTAs, hover states, and the pale
     teal tints. Links in this design are `deep`, not `accent`, so the accent
     only has to work as a button fill and a hover color. */
  --deep: #063f60;     /* petrol — tiles, bands, footer, headings, links */
  --accent: #6fc5ca;   /* aqua — pill CTAs, hovers, teal tints, favicon tile */
  --surface: #ffffff;  /* page background */

  /* ---- Ramp origins — internal, NOT rebrand knobs ------------------------
     Three points along the deep→accent axis. Borders, tints, and footer text
     in this design sit at different distances from the petrol, and these
     reproduce that from the seeds. Every percentage below was fitted against
     the hand-picked Harbor Gold literals this block replaced: average error
     about 3 of 255, worst 15 (--petrol-hover). Re-fit only when redesigning. */
  --shade: color-mix(in oklab, var(--deep) 28%, var(--accent));
  --band:  color-mix(in oklab, var(--deep) 51%, var(--accent));
  --cool:  color-mix(in oklab, var(--deep) 79%, var(--accent));

  /* ---- Derived: brand --------------------------------------------------- */
  --aqua: var(--accent);                /* primary actions (pill CTAs) */
  --aqua-hover: color-mix(in oklab, var(--accent) 83%, var(--deep));
  --aqua-soft: color-mix(in oklab, var(--accent) 15.5%, var(--surface));
  --aqua-light: color-mix(in oklab, var(--accent) 65%, var(--surface));  /* top of the teal band gradient */
  --petrol: var(--deep);                /* dark tiles, bands, footer, headings */
  --petrol-hover: color-mix(in oklab, var(--deep) 83%, var(--accent));
  --petrol-deep: color-mix(in oklab, #000 22%, var(--deep));  /* footer bottom, overlay depths */
  --petrol-overlay-a: color-mix(in srgb, color-mix(in oklab, #000 34%, var(--deep)) 50%, transparent);
  --petrol-overlay-b: color-mix(in srgb, color-mix(in oklab, #000 34%, var(--deep)) 72%, transparent);

  /* ---- Signature accents — deliberately NOT derived ----------------------
     The gold (section-heading accents, stars, step numerals) and the cream
     (blob shapes and background of the reserve band) are what make this
     design Harbor Gold. They are warm on purpose and sit against whatever
     the seeds are, so a rebrand leaves them alone. */
  --gold: #dea728;
  --cream: #f4e9d7;
  --cream-bg: #fdfaf4;

  /* ---- Engine vocabulary --------------------------------------------------
     Components shared with the base master (the hero quote form, the photo
     feature cards, the SMS opt-in page) are written against these names.
     Aliased here so they pick up this design's palette. */
  --blue: var(--aqua);
  --blue-hover: var(--aqua-hover);
  --navy: var(--petrol);
  --navy-hover: var(--petrol-hover);
  --navy-overlay-a: var(--petrol-overlay-a);
  --navy-overlay-b: var(--petrol-overlay-b);
  --tint-blue: var(--tint-teal);

  /* ---- Derived: text ----------------------------------------------------- */
  --ink: color-mix(in oklab, #000 36%, var(--cool));
  --ink-strong: color-mix(in oklab, var(--ink) 87%, var(--surface));
  --body: color-mix(in oklab, var(--ink) 75%, var(--surface));
  --muted: color-mix(in oklab, var(--ink) 61%, var(--surface));
  --faint: color-mix(in oklab, var(--ink) 47.5%, var(--surface));

  /* ---- Derived: surfaces ------------------------------------------------- */
  --bg: var(--surface);
  --tint: color-mix(in oklab, var(--cool) 3.5%, var(--surface));
  --tint-teal: color-mix(in oklab, var(--accent) 13%, var(--surface));
  --tint-track: color-mix(in oklab, var(--band) 7.5%, var(--surface));
  --tint-input: color-mix(in oklab, var(--accent) 3%, var(--surface));
  --tint-step: color-mix(in oklab, var(--accent) 17.5%, var(--surface));

  /* ---- Derived: borders -------------------------------------------------- */
  --line: color-mix(in oklab, var(--cool) 10%, var(--surface));
  --line-card: color-mix(in oklab, var(--cool) 12.5%, var(--surface));
  --line-soft: color-mix(in oklab, var(--cool) 7.5%, var(--surface));
  --line-strong: color-mix(in oklab, var(--band) 19%, var(--surface));
  --line-hover: color-mix(in oklab, var(--band) 29%, var(--surface));
  --line-open: color-mix(in oklab, var(--shade) 49.5%, var(--surface));
  --line-teal: color-mix(in oklab, var(--accent) 26.5%, var(--surface));  /* card edges on teal tints */

  /* ---- States — deliberately NOT derived ---------------------------------
     Green-means-included / red-means-excluded in the checklist tables is a
     semantic signal. Deriving it from a red or green brand seed would destroy
     the signal, so these stay literal. */
  --ok-bg: #e3f4ea;
  --ok: #17925a;
  --no-bg: #fbe9e9;
  --no: #de5454;
  --na: color-mix(in oklab, var(--deep) 70%, var(--surface));  /* checklist N/A marks: 5.8:1 on white (51% was 3.3:1) */

  /* ---- Derived: footer text (sits on --deep) ----------------------------- */
  --foot-link: color-mix(in oklab, var(--shade) 40.5%, var(--surface));
  --foot-fine: color-mix(in oklab, var(--cool) 47%, var(--surface));
  --foot-body: color-mix(in oklab, var(--band) 46.5%, var(--surface));

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

  --font: "Urbanist", "Urbanist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Headings: Outfit, the client's logo typeface (their request). */
  --font-head: "Outfit", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
}

/* ---- Fallback face for Urbanist -------------------------------------------
   Urbanist loads without blocking first paint, so text appears in a local
   sans-serif first and swaps when the web font arrives. Unadjusted, Arial is
   ~3% wider at regular weight and ~7% wider in bold, with shorter ascenders,
   so the swap re-wrapped the hero text and moved the page (Lighthouse CLS
   0.06). These faces scale Arial (or its metric twins) to Urbanist's
   measured widths and line metrics — ascent 0.95em, descent 0.25em — so the
   swap changes the letterforms but not the layout.
   Measured in Chrome: average width over the home page's own text, Urbanist
   vs Arial, at 400 and at 600/700. Re-measure if the font changes. */
@font-face {
  font-family: "Urbanist Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  font-weight: 100 549;
  size-adjust: 97.3%;
  ascent-override: 97.6%;
  descent-override: 25.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Urbanist Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 550 900;
  size-adjust: 92.9%;
  ascent-override: 102.3%;
  descent-override: 26.9%;
  line-gap-override: 0%;
}

/* ---- Fallback face for Outfit (headings) --------------------------------
   Same idea for the heading font. Measured in Chrome over the home page's
   own heading text: Outfit 600 is 0.934x Arial Bold's width, Outfit 700 is
   0.948x; h1/h2 are 600 and carry most of the layout, so 93.8%. Outfit's
   line metrics are ascent 1.00em, descent 0.26em; the overrides are scaled
   by size-adjust, hence 1.00/0.938 and 0.26/0.938. Headings use 600/700
   only, so one bold face covers them. */
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 100 900;
  size-adjust: 93.8%;
  ascent-override: 106.6%;
  descent-override: 27.7%;
  line-gap-override: 0%;
}

/* ---- 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 derived token as a literal.

   These are the exact literals this design shipped before its palette was
   seeded, and they are the MASTER values — deliberately NOT updated per
   client. A pre-2023 browser then gets Harbor Gold's own colors rather than
   the client's brand, 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 {
    --shade: #519dac;
    --band: #397e93;
    --cool: #1d5976;

    --aqua-hover: #55b4ba;
    --aqua-soft: #eaf6f7;
    --aqua-light: #a5d9dd;
    --petrol-hover: #0a5580;
    --petrol-deep: #042b42;
    --petrol-overlay-a: rgba(4, 32, 50, 0.5);
    --petrol-overlay-b: rgba(4, 32, 50, 0.72);

    --ink: #0e2a3d;
    --ink-strong: #2c4356;
    --body: #46596b;
    --muted: #5f7689;
    --faint: #7f92a3;

    --tint: #f7f9fa;
    --tint-teal: #eef7f8;
    --tint-track: #f0f5f6;
    --tint-input: #fbfdfd;
    --tint-step: #e8f4f5;

    --line: #e7edf1;
    --line-card: #e2e9ee;
    --line-soft: #edf1f5;
    --line-strong: #d9e4ec;
    --line-hover: #c4d6e2;
    --line-open: #a9cdd8;
    --line-teal: #dceef0;

    --na: #8296ad;

    --foot-link: #bcd2e2;
    --foot-fine: #8fabc2;
    --foot-body: #a3bdd1;

    --shadow-btn: 0 8px 22px rgba(111, 197, 202, 0.42);
    --shadow-card: 0 1px 3px rgba(6, 63, 96, 0.05);
    --shadow-card-hover: 0 10px 28px rgba(6, 63, 96, 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: 16.5px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  color: var(--petrol);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.18;
  text-wrap: balance;
}
h3, h4 { font-weight: 700; }

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;
}

.accent { color: var(--gold); font-style: normal; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 15.5px;
  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;
}

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

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

.btn-outline {
  background: #fff;
  color: var(--petrol);
  border: 1.5px solid var(--line-hover);
}
.btn-outline:hover { border-color: var(--aqua); color: var(--aqua-hover); }

/* On photos / dark bands */
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.14);
  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.24); color: #fff; }

.btn-sm { padding: 11px 22px; font-size: 14.5px; }
.btn-lg { padding: 15px 32px; font-size: 16.5px; }

.btn-phone svg { flex: none; }

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

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

/* ---- Header ---------------------------------------------------------------- */

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

.header-bar {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

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

.brand { display: flex; align-items: center; gap: 10px; color: var(--petrol); flex: none; }
.brand-logo { height: 52px; width: auto; }
/* This logo is a wide lockup (the client's horizontal version, 3.79:1). At
   full height it is 197px across, which on a narrow phone pushes the Book
   button and menu toggle onto a second header row. Below 480px its height tracks the room left beside those
   two controls: 48px of padding + a 20px gap + 129px of buttons is 197px, and
   216 leaves slack for a scrollbar. Holds one row down to 320px wide. */
@media (max-width: 480px) {
  .brand-logo { height: clamp(24px, calc((100vw - 216px) / 3.79), 52px); }
}
.brand-mark {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--petrol); color: #fff;
  border-radius: 12px;
  font-size: 21px; font-weight: 800;
}
.brand-name { display: block; font-weight: 800; font-size: 18px; line-height: 1.15; color: var(--petrol); }
.brand-sub { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua-hover); }

/* Reference placement: logo left, nav links centered, phone number + aqua
   quote pill on the right — the two auto margins split the leftover space. */
.nav-desktop { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.nav-link {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-strong);
  white-space: nowrap;
}
.nav-link:hover { color: var(--aqua-hover); }
.nav-link.is-active { color: var(--aqua-hover); }

/* Dropdowns (Services / Locations) */
.nav-item { position: relative; }
.nav-parent { display: flex; align-items: center; }
.nav-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;   /* WCAG 2.5.8 minimum tap target */
  margin-left: -7px;
  border: 0; background: none; color: var(--muted);
  border-radius: 6px; cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}
.nav-caret:hover { color: var(--aqua-hover); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--line-card);
  border-radius: 14px;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--deep) 14%, transparent);
  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, so
   hover isn't lost on the way down. */
.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: 14.5px;
  font-weight: 600;
  color: var(--ink-strong);
}
.nav-dropdown-link:hover { background: var(--tint-teal); color: var(--petrol); }
.nav-dropdown-link.is-active { color: var(--aqua-hover); }
.nav-dropdown-all {
  margin-top: 4px;
  padding: 9px 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  font-weight: 700;
  color: var(--aqua-hover);
}

.header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.header-login { font-size: 14.5px; font-weight: 600; color: var(--ink-strong); white-space: nowrap; }
.header-login:hover { color: var(--aqua-hover); }
.header-phone {
  font-size: 16px;
  font-weight: 800;
  color: var(--petrol);
  white-space: nowrap;
}
.header-phone:hover { color: var(--aqua-hover); }

.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 var(--line-strong); border-radius: 12px;
  cursor: pointer;
}
.menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--petrol); }

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 10px 20px 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.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 var(--line-card);
  border-radius: 0;
  padding: 0 0 6px 14px;
  margin: 0 0 4px 6px;
  /* 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-call {
  margin-top: 12px;
  padding: 12px;
  text-align: center;
  background: var(--petrol);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 700;
}
.mobile-menu-call:hover { color: #fff; background: var(--petrol-hover); }

/* ---- Hero -------------------------------------------------------------------
   Full-bleed photo heroes with a deep petrol overlay and centered white copy
   (the reference treatment). Photo-less heroes render as a plain petrol band. */

.hero-shell { padding: 0; }

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: var(--petrol);
  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 below still win. */
.hero-card-photo { min-height: 500px; }
.hero-card-tall { min-height: 560px; }

/* Home hero: sized so header + hero fill exactly one screen on landing.
   --header-h is measured at runtime by app.js (promo bar on/off, nav
   wrapping); the fallback approximates promo + bar. */
.hero-shell-full { padding: 0; }
.hero-card-full {
  border-radius: 0;
  min-height: max(480px, calc(100vh - var(--header-h, 118px)));
}
@supports (height: 100svh) {
  /* Small-viewport units keep mobile URL bars from hiding the hero bottom. */
  .hero-card-full { min-height: max(480px, calc(100svh - var(--header-h, 118px))); }
}

.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(--petrol-overlay-a), var(--petrol-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: color-mix(in srgb, var(--petrol-deep) 40%, transparent);
}

.hero-card-copy {
  position: relative;
  max-width: 920px;
  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-size: 15px; font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 16px;
}
.stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; }

.hero-title {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.12;
  font-weight: 700;
}
.hero-card-copy h1:not(.hero-title):not(.hero-title-short) { font-size: clamp(28px, 4vw, 44px); line-height: 1.16; font-weight: 700; }
.hero-title-short { font-size: clamp(36px, 5vw, 52px); font-weight: 700; }

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

.hero-card-actions {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 30px;
}

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

/* Breadcrumbs (rendered inside heroes) */
.breadcrumbs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 14px;
  font-size: 13px; font-weight: 600;
}
.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 / bands -------------------------------------------------------- */

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

.band-tint { background: var(--tint); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

/* Dark petrol band (reviews, other-services) */
.band-dark { background: var(--petrol); }
.band-dark .section-title,
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .section-lead { color: var(--foot-body); }
.band-dark .kicker { color: var(--gold); }

/* Light-teal gradient band (service areas) */
/* The white band title needs >=3:1 (large text) from the top of the
   gradient. --aqua-light (65% accent) gave 2.5:1 with this client's accent;
   85% gives ~3.5:1 at the top edge, rising to 4.5:1. */
.band-teal { background: linear-gradient(180deg, color-mix(in oklab, var(--aqua) 85%, var(--surface)), var(--aqua)); }
.band-teal .section-title { color: #fff; }
.band-teal .kicker { color: rgba(255, 255, 255, 0.85); }
.band-teal .section-lead { color: rgba(255, 255, 255, 0.92); }

/* The services band: white with the gold headline (reference treatment). */
.band-services .section-title { color: var(--gold); font-weight: 700; }

.section-head { text-align: center; margin-bottom: 44px; }
.section-title { font-size: clamp(28px, 3.6vw, 42px); }
.kicker {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.section-lead {
  margin: 14px auto 0;
  max-width: 640px;
  font-size: 16.5px;
  color: var(--body);
}

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

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

.trust-strip { padding: 36px 0 6px; }
.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: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint-step);
  color: var(--petrol);
  border-radius: 50%;
}
.trust-title { display: block; font-size: 15px; font-weight: 800; color: var(--petrol); }
.trust-sub { display: block; font-size: 13.5px; color: var(--muted); }

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

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

/* ---- Review cards (kept for featured-quote fragments) ------------------------- */

.review-card {
  margin: 0;
  background: #fff;
  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);
}
.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-weight: 700;
  font-size: 15px;
  background: var(--aqua);
}
.avatar-green { background: var(--ok); }
.avatar-blue { background: var(--aqua); }
.avatar-amber { background: var(--gold); }
.author-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--petrol); }
.author-meta { display: block; font-size: 12.5px; color: var(--na); }
.review-card .stars { font-size: 14px; }
.review-text { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--body); }
.review-featured { max-width: 760px; margin: 0 auto; padding: 32px; }
.review-text-lg { font-size: 17px; line-height: 1.7; }

/* ---- Service tiles (home 3x3 petrol grid) -------------------------------------- */

.svc-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
/* A lone tile on the last row (seven services = 3 + 3 + 1) sits in the middle
   column rather than stranded on the left. Three-column layout only; the
   two-column case is handled in the responsive block. */
@media (min-width: 1081px) {
  .svc-tile-grid > .svc-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}

.svc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  background: var(--petrol);
  border: 0;
  border-radius: var(--r-tile);
  padding: 28px 24px;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.svc-card:hover {
  background: var(--petrol-hover);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--deep) 28%, transparent);
  transform: translateY(-2px);
}
.svc-card-icon {
  width: 54px; height: 54px; object-fit: contain;
  margin-bottom: 4px;
  filter: brightness(0) invert(1);   /* stock icons render white on petrol */
  opacity: 0.95;
}
.svc-card-head { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.svc-card-title { font-size: 19px; color: #fff; }
.svc-card-text { font-size: 14px; line-height: 1.6; }
/* The lighter aqua, not the accent itself: this link sits on the dark tile,
   and an accent dark enough to carry white button text is too dark to read
   on the petrol. */
.svc-card-more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--aqua-light); }
.svc-card:hover .svc-card-more { color: #fff; }

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

/* ---- Feature cards (why choose us, white band) ---------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.feature-card {
  background: #fff;
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--line-hover); }
.feature-icon { width: 72px; height: 72px; object-fit: contain; }
.feature-title { font-size: 17.5px; }
.feature-text { font-size: 14.5px; line-height: 1.6; }

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

/* ---- Process band + steps ----------------------------------------------------------- */

.process-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 44px;
  align-items: center;
}
.process-head .section-title { margin-bottom: 22px; }
.process-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
}
.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.step-num {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold);
  color: #fff;
  border-radius: 50%;
  font-size: 26px;
  font-weight: 800;
}
.step-img { width: 110px; height: 110px; object-fit: contain; }
.step-title { font-size: 19px; }
.step-text { font-size: 14.5px; line-height: 1.65; max-width: 320px; }

/* ---- 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 ----------------------------------------------------------------- */

.section-pad > .wrap > .guarantee-band { margin: 0; }
.guarantee-band {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--tint-teal);
  border: 1px solid var(--line-teal);
  border-radius: 18px;
  padding: 30px 32px;
}
.guarantee-mark {
  flex: none;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--aqua);
  color: #fff;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
}
.guarantee-copy { flex: 1 1 340px; }
.guarantee-copy h2 { font-size: 21px; margin-bottom: 6px; font-weight: 700; }
.guarantee-copy p { font-size: 15px; }

/* ---- CTA band (the light "reserve" band with cream blobs) ---------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--cream-bg);
  border-top: 1px solid var(--line-soft);
  color: var(--body);
  text-align: center;
}
.cta-blob {
  position: absolute;
  border-radius: 50%;
  background: var(--cream);
  pointer-events: none;
}
.cta-blob-a { width: 560px; height: 560px; left: -180px; bottom: -300px; }
.cta-blob-b { width: 640px; height: 640px; right: -220px; top: -360px; }
.cta-band-inner { position: relative; padding: 84px 24px; max-width: 860px; }
.cta-stars-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 16px;
  font-size: 14.5px; font-weight: 700;
  color: var(--muted);
}
.cta-band h2 { color: var(--petrol); font-size: clamp(28px, 4vw, 42px); }
.cta-band p {
  margin: 16px auto 0;
  max-width: 540px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--body);
}
.cta-actions {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 30px;
}
/* CTA band as a rounded card inside the container (blog post pages) */
.cta-band-card { border-radius: var(--r-hero); border: 1px solid var(--line-soft); }

/* ---- Switcher pills --------------------------------------------------------------------- */

.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: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.switcher-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  background: var(--tint-track);
  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: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.switch-pill:hover { color: var(--aqua-hover); }
.switch-pill.is-active {
  background: var(--petrol);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--deep) 30%, 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: #fff;
  border: 1px solid var(--line-card);
  border-radius: 18px;
  padding: 28px;
}
.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: 23px; font-weight: 700; }
.service-row-desc { margin-top: 10px; font-size: 15.5px; }
.service-row-best { margin-top: 10px; font-size: 14px; color: var(--muted); }
.service-row-best strong { color: var(--petrol); }
.service-row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.service-row-panel {
  background: var(--tint);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 20px 22px;
}
.panel-heading {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
  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: 14.5px; color: var(--body); }

.tick {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ok-bg);
  color: var(--ok);
  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: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 20px 22px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--petrol);
}
.benefit-card .tick-badge { width: 32px; height: 32px; font-size: 13px; }

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

.platform-strip { padding: 36px 0; }
.platform-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 48px;
}
.platform-tagline {
  max-width: 230px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--petrol);
  line-height: 1.4;
}
.platform-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.platform-name { font-size: 17px; font-weight: 700; color: var(--muted); }
.platform-item .stars { color: var(--gold); letter-spacing: 2px; font-size: 13px; }

/* ---- 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-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.ba-badge-before { background: var(--petrol); }
.ba-badge-after { background: var(--aqua); }

/* Pairs placed beside copy (service benefits/why, city SEO rows) stretch to
   the text column's height — tall portrait crops, like the reference site.
   Collapsed to one column (<=880px) the height falls back to the natural
   square. Pairs inside the .work-carousel keep square tiles. */
.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; }
}

/* ---- Reviews carousel (dark band: before/after + client quote) ---------------
   Paged: each slide is one full-width set (media beside quote), so exactly
   one shows at a time — arrows page slide by slide, the scrollbar is hidden,
   and no neighboring slide peeks in. Swiping still works on touch
   (scroll-snap). */
.reviews-band .section-head { margin-bottom: 0; }
.reviews-head { margin-bottom: 40px; }
.reviews-head .section-title { color: #fff; }

.work-carousel { position: relative; }
.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: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 44px;
  align-items: center;
  padding: 0 56px;
}
.work-media .ba-pair { grid-template-columns: 1fr 1fr; }
.work-media .ba-img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.work-media .ba-ph { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.75); }

.work-quote { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.work-quote-text {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.55;
  font-weight: 600;
  color: #fff;
}
.work-quote .stars { font-size: 17px; }
.work-quote-author { font-size: 14.5px; font-weight: 600; color: var(--foot-body); }

.work-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.work-nav:hover { background: var(--aqua); border-color: var(--aqua); color: #fff; }
.work-nav[disabled] { opacity: 0.35; cursor: default; }
.work-nav[disabled]:hover { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.work-nav-prev { left: -8px; }
.work-nav-next { right: -8px; }
@media (max-width: 640px) {
  .work-nav { width: 40px; height: 40px; }
  .work-nav-prev { left: 0; }
  .work-nav-next { right: 0; }
}

/* ---- 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: 18px;
}
.city-photo-ph { height: 100%; min-height: 320px; border-radius: 18px; }

/* 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: 15.5px;
  font-weight: 600;
  color: var(--petrol);
}
.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: 16px; line-height: 1.75; }
.how-help .cta-actions { justify-content: center; margin-top: 0; }

/* Alternating text + media SEO rows */
.seo-row { margin-bottom: 52px; }
/* A long-form row whose media slot is empty (no before/after photos): the
   text takes the row instead of leaving the second column blank. */
.seo-row-solo { grid-template-columns: minmax(0, 1fr); }
.seo-row-solo .seo-block { max-width: 820px; }
.seo-row:last-of-type { margin-bottom: 46px; }
.seo-block h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 700;
  margin-bottom: 12px;
}
.seo-block p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; }
.seo-block a { color: var(--aqua-hover); font-weight: 600; }
.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: 700; color: var(--petrol); }
.city-svc-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15.5px;
}

/* ---- Service page article sections (the reference's long-form treatment) ---- */

.svc-article { max-width: 880px; }
.svc-article-block { margin-bottom: 44px; }
.svc-article-block:last-child { margin-bottom: 0; }
.svc-article-block h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  margin-bottom: 16px;
}
.svc-article-block h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 26px 0 8px;
}
.svc-article-block p { margin: 0 0 14px; font-size: 16px; line-height: 1.75; }
.svc-article-block p strong { color: var(--petrol); }
.svc-article-block a { color: var(--aqua-hover); font-weight: 600; }
.svc-article-link { margin-top: 4px; }
.svc-article-cta { margin-top: 34px; }

.svc-included-list {
  list-style: none;
  margin: 18px 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px 28px;
}
.svc-included-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--petrol);
}
.svc-included-list .tick { margin-top: 3px; }

/* Centered FAQ (service pages): pill label + single accordion column */
.faq-center { max-width: 880px; }
.faq-pill-row { display: flex; justify-content: center; margin-bottom: 30px; }
.faq-pill {
  display: inline-flex;
  padding: 10px 24px;
  background: var(--aqua);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

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

.why-wrap { max-width: 900px; }
.why-title {
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 700;
  color: var(--petrol);
  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: 15.5px; line-height: 1.7; }
.why-item strong { color: var(--petrol); }
.why-cta { margin-top: 10px; }

/* ---- FAQ (split layout + accordion) ---------------------------------------------------------- */

.faq-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 52px;
  align-items: start;
}
.faq-split-head .section-title { margin-bottom: 16px; }
.faq-split-lead { font-size: 15.5px; line-height: 1.7; margin-bottom: 22px; }
.faq-split-contacts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.faq-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--petrol);
  overflow-wrap: anywhere;
}
.faq-contact:hover { color: var(--aqua-hover); }
.faq-contact-chip {
  flex: none;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint-step);
  color: var(--petrol);
  border-radius: 50%;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}
.faq-grid-single { grid-template-columns: 1fr; }
.faq-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.faq-item {
  background: #fff;
  border: 1px solid var(--line-card);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease;
}
.faq-item[open] { border-color: var(--line-open); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 700;
  color: var(--petrol);
  cursor: pointer;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-icon {
  flex: none;
  color: var(--gold);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.3s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a {
  padding: 0 22px 18px;
  font-size: 15px;
  line-height: 1.65;
  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(--petrol); }

/* ---- 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: 15px; }

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

.cl-table thead th {
  background: var(--aqua);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  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: #fff;
  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: 15px; font-weight: 500; 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: 13px;
  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 ------------------------------------------------------------------------------- */

.area-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 22px;
  color: var(--body);
  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: 20px; }
.area-card-text { font-size: 14.5px; }
.area-card-popular { font-size: 13.5px; color: var(--muted); }
.area-card-popular strong { color: var(--petrol); }
.area-card .svc-card-more { margin-top: 6px; color: var(--aqua-hover); }

/* Pin cards on the teal band (home / service / city cross-links) */
.area-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.area-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--deep) 8%, transparent);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--petrol);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.area-link:hover { transform: translateY(-3px); box-shadow: 0 10px 24px color-mix(in srgb, var(--deep) 16%, transparent); color: var(--petrol); }
.area-link-pin {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint-step);
  color: var(--aqua-hover);
  border-radius: 50%;
}
.area-link-pin svg { width: 18px; height: 18px; }
.area-link-city { text-align: center; }

.areas-band .map-card { margin-top: 36px; }

.city-intro-wrap { max-width: 860px; }
.intro-title { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin-bottom: 16px; }
.city-intro { font-size: 16px; line-height: 1.75; }

.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: 14.5px; font-weight: 700; color: var(--petrol);
}
.chip-tick {
  flex: none;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ok-bg); color: var(--ok);
  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: 14.5px; font-weight: 700; color: var(--muted); }
.link-arrow { font-size: 15px; font-weight: 700; color: var(--aqua-hover); }

/* ---- Other-services band (teal, white icon tile cards) ------------------------------------------------------ */

.other-svc-band .section-head { margin-bottom: 34px; }
.other-svc-row {
  /* Flex rather than an auto-fill grid so a short last row is centred:
     with six services the band holds five tiles, and the grid left the
     fifth stranded at the left edge under a row of four. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.other-svc-row > .other-svc-card { flex: 0 1 calc(25% - 12px); min-width: 190px; }
.other-svc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--deep) 8%, transparent);
  font-size: 15px;
  font-weight: 700;
  color: var(--petrol);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.other-svc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px color-mix(in srgb, var(--deep) 16%, transparent); color: var(--petrol); }
.other-svc-icon { width: 44px; height: 44px; object-fit: contain; }
.other-svc-name { line-height: 1.3; }

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

.map-card {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-card);
  background: #fff;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--deep) 7%, transparent);
}
.map-embed iframe { display: block; width: 100%; height: 420px; border: 0; }
.map-card .media-placeholder { border-radius: 0; border: 0; min-height: 320px; }

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

.page-head { padding: 60px 0 8px; text-align: center; }
.page-title { font-size: clamp(32px, 4.6vw, 46px); font-weight: 700; }
.page-lead {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.65;
  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: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
}
.step-chip-num {
  flex: none;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold);
  color: #fff;
  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: #fff;
  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(--aqua); 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(--tint-step);
  color: var(--petrol);
  border-radius: 12px;
}
.contact-card-title { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.contact-card-value { display: block; font-size: 16.5px; font-weight: 700; color: var(--petrol); 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: 14.5px;
}
.hours-row:last-child { border-bottom: 0; }
.hours-row b { color: var(--petrol); font-weight: 700; }
.contact-area-note { margin-top: 10px; font-size: 14px; color: var(--muted); }
.contact-area-note b { color: var(--petrol); }

.form-panel {
  background: #fff;
  border: 1px solid var(--line-card);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--deep) 5%, transparent);
}
/* 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; font-weight: 700; }
.form-panel-sub { margin: 6px 0 18px; font-size: 14.5px; color: var(--muted); }
.form-panel-alt { margin-top: 16px; font-size: 14.5px; color: var(--muted); }
.form-panel-alt a { color: var(--aqua-hover); font-weight: 600; }

/* 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: 14px;
  background: var(--tint-input);
  text-align: center;
  padding: 28px;
}
.embed-slot-tall { min-height: 480px; }
.embed-icon { font-size: 30px; }
.embed-label { font-size: 15.5px; font-weight: 700; color: var(--petrol); }
.embed-hint { font-size: 13px; 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; }

.aside-card {
  background: #fff;
  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(--petrol); border-color: var(--petrol); color: var(--foot-body); }
.aside-card-dark .aside-heading { color: #fff; }
.aside-card-dark p { font-size: 14.5px; }
.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: 14.5px; }
.aside-call { margin-top: 10px; font-size: 13.5px; color: var(--foot-fine); }
.aside-call a { color: #fff; font-weight: 700; }

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

.login-shell { padding: 16px 14px; }
.login-card {
  border-radius: var(--r-hero);
  background: var(--tint-teal);
  border: 1px solid var(--line-teal);
  display: flex;
  justify-content: center;
}
.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; }

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

/* Index cards (inside .card-grid) */
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 22px;
  color: var(--body);
  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: 19px; line-height: 1.3; }
.blog-card-text { font-size: 14.5px; }
.blog-card .svc-card-more { margin-top: 6px; color: var(--aqua-hover); }

/* 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: 600;
  color: var(--faint);
}
.blog-tag {
  background: var(--tint-step);
  color: var(--petrol);
  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: 14.5px;
  font-weight: 700;
  color: var(--aqua-hover);
  margin-bottom: 22px;
}
.blog-article-head .blog-meta { margin-bottom: 14px; }
.blog-article-head h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  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(--petrol);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}
.blog-author-lines { display: flex; flex-direction: column; }
.blog-author-name { font-size: 15px; font-weight: 700; color: var(--petrol); }

.blog-feature {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 18px;
  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.8;
}
.blog-body h2 { font-size: 24px; font-weight: 700; margin: 36px 0 12px; }
.blog-body p { margin: 0 0 24px; text-wrap: pretty; }

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

.legal-doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 88px;
  font-size: 15.5px;
  line-height: 1.75;
}
.legal-title { font-size: clamp(32px, 4.4vw, 44px); font-weight: 700; margin-bottom: 14px; }
.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: 23px; font-weight: 700; 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; }
/* Links in this design are the petrol, close to the body text beside them.
   This page is read by a carrier reviewer who has to find and click the
   Privacy and Terms links, so underline the inline ones here. */
.sms-prose a { text-decoration: underline; text-underline-offset: 3px; }

.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: 14px;
  border: 1.5px dashed var(--line-hover);
  background: repeating-linear-gradient(
    -45deg,
    var(--tint),
    var(--tint) 12px,
    var(--tint-teal) 12px,
    var(--tint-teal) 24px
  );
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
}

/* ---- Footer -------------------------------------------------------------------------------------------------- */

.site-footer {
  background: var(--petrol);
  color: var(--foot-link);
}

.footer-top {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 64px 24px 24px;
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(160px, 1fr));
  gap: 40px;
}
.footer-col-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-blurb { font-size: 14.5px; line-height: 1.65; color: var(--foot-body); max-width: 320px; }

.footer-heading { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; 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: 10px;
  font-size: 14.5px;
  color: var(--foot-link);
}
.footer-link:hover { color: #fff; }
.footer-link svg { flex: none; }
.footer-email { word-break: break-all; }
.footer-line { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; }
.footer-line svg { flex: none; }
.footer-chip {
  flex: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--aqua);
  border-radius: 50%;
}
.footer-contact { gap: 12px; }
.footer-social { flex-direction: row; gap: 18px; margin-top: 2px; }

/* Locations column: two sub-columns like the reference footer */
.footer-areas-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 18px;
}
.footer-areas-links .footer-link { font-size: 14px; color: var(--foot-fine); }
.footer-areas-links .footer-link:hover { color: #fff; }

.footer-bottom { background: var(--petrol-deep); margin-top: 26px; }
.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-logo-chip {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 6px 12px;
}
.footer-logo { height: 40px; width: auto; }
.footer-brand-row { display: flex; align-items: center; gap: 10px; }
.footer-mark {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--aqua); color: #fff;
  border-radius: 9px;
  font-size: 17px; font-weight: 800;
}
.footer-brand-name { font-size: 15px; font-weight: 700; color: #fff; }
.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: #fff; }

/* ---- 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) {
  /* Logo + five nav items + number + quote button need ~1010px of row; below
     that the actions wrapped to a second line and the header grew from 75 to
     124px, which also throws off the Booking Koala pop-up offsets (tuned to a
     75px header). The number stays in the hero's call button and the footer. */
  .header-phone { display: none; }
  .service-row { grid-template-columns: 1fr 1fr; }
  .service-row-media { display: none; }
  .svc-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd tile count leaves one on its own row; let it span both columns. */
  .svc-tile-grid > .svc-card:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .process-inner { grid-template-columns: 1fr; gap: 34px; }
  .process-head { text-align: center; }
  .process-actions { justify-content: center; }
}

/* Just above the 880px switch to the menu button, logo + nav + quote button
   overran the row by ~18px and the header wrapped. Tighter link padding buys
   30px; the links stay well over the 24px tap-target minimum. */
@media (max-width: 960px) {
  .nav-link { padding-left: 9px; padding-right: 9px; }
}

@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; }
  .hero-card-tall { min-height: 480px; }

  .section { padding: 60px 0; }

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

  .work-slide { grid-template-columns: 1fr; gap: 26px; padding: 0 44px; }

  .faq-split { grid-template-columns: 1fr; gap: 34px; }

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

@media (max-width: 640px) {
  .svc-tile-grid { grid-template-columns: 1fr; }
  .work-slide { padding: 0 40px; }
}

@media (max-width: 560px) {
  .login-shell { padding: 10px 8px; }
  .hero-card-actions .btn { width: 100%; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .switcher-track { border-radius: 22px; }
  .guarantee-band { padding: 24px 22px; }
  .form-panel { padding: 22px 18px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .cta-blob-a { width: 380px; height: 380px; left: -160px; bottom: -220px; }
  .cta-blob-b { width: 420px; height: 420px; right: -180px; top: -260px; }
}

/* ---- 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); }