@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/fonts/karla-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* ===========================================================================
   St. Petersburg STR Cleaning — short-term-rental turnover cleaning template
   Skin: Airbnb, HUE-SHIFTED (see DESIGN.md, .design-source/airbnb.md). The
   structure is Airbnb's — warm white canvas, one voltage on every CTA, modest
   display weights, borderless cards with generous rounding, black rating stars.
   The voltage is NOT: Rausch (hue 349) is replaced by a deep teal
   (hue 186) so a cleaning company that serves Airbnb hosts never reads as an
   Airbnb product. See DESIGN.md §3 before changing the accent.
   Type: Figtree (display) + Karla (body).
   =========================================================================== */


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

/* Airbnb's neutrals verbatim; its voltage shifted 163 degrees off Rausch.
   Deep teal identifies, mid teal instructs. */
:root {
  --bg: #faf7f1;            /* canvas */
  --surface: #f0ece3;       /* surface-soft — tint bands, cards */
  --surface-2: #e5e5da;     /* hairline-soft as fill — chips, inset */
  --border: #d5d8cd;        /* hairline */

  --ink: #28352b;           /* 15.91:1 on --bg */
  --muted: #586155;         /* 5.41:1 on --bg, 5.05:1 on --surface */

  --brand: #303f32;         /* deep teal identifies: step numbers, marks, fills */
  --brand-ink: #303f32;     /* 8.42:1 on --bg, 7.29:1 on --brand-soft */
  --brand-soft: #e9ecdf;    /* teal at 10% — tags and pills */

  --cta: #9d482e;           /* the shifted voltage — white label 5.08:1 (WCAG AA) */
  --cta-press: #7c3723;     /* white label 8.42:1 */
  --on-cta: #ffffff;

  --band: #303f32;
  --on-band: #ffffff;       /* 15.91:1 on --band */
  --hl-on-dark: #e7d7b8;    /* 9.26:1 on --band */
  --star-on-dark: #ffffff;

  --dark: #28352b;          /* footer, dark bands */
  --dark-2: #354638;        /* proof band */
  --live: #157f3c;          /* white check 5.08:1 */
  --star-ink: #303f32;      /* Airbnb rates in black, not gold */

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Karla", "Karla Fallback", system-ui, sans-serif;

  --space-section: clamp(2.5rem, 5vw, 4rem);
  --radius: 14px;
  --radius-lg: 20px;
  --radius-btn: 8px;
  --radius-pill: 9999px;
  --shadow: 0 1px 2px rgb(34 34 34 / 0.05), 0 14px 34px rgb(34 34 34 / 0.11);
  --shadow-sm: 0 1px 2px rgb(34 34 34 / 0.06), 0 6px 16px rgb(34 34 34 / 0.08);
  --shadow-lg: 0 2px 4px rgb(34 34 34 / 0.08), 0 18px 40px rgb(34 34 34 / 0.15);
  --shadow-cta: 0 6px 18px rgb(0 122 135 / 0.26);
  --shadow-up: 0 -6px 20px rgb(34 34 34 / 0.18);
  --z-callbar: 40;
  --z-nav: 50;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

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

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

p { text-wrap: pretty; }

a { color: inherit; }

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

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

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

/* ---------------------------------------------------------------------------
   Focus indicator — TWO-TONE, and that is a WCAG requirement, not a style.

   SC 1.4.11 (Non-text Contrast, AA) wants 3:1 between the focus indicator and
   the colours next to it. A single accent ring cannot deliver that across this
   system, because the same ring has to land on a white card and on a saturated
   dark band. Measured across the fleet, a --cta-only ring failed on 9 of 13
   templates: the light accents (amber, yellow, lime, safety orange) vanish on
   white at 1.21-2.87:1, and the dark accents vanish on their own urgency band —
   water-damage's --band IS its --cta, so the ring measured 1.00:1 and was
   literally invisible.

   So the ring is two colours at once: --cta bracketed by --on-cta. The outline
   paints over the box-shadow, which leaves --on-cta showing as a band on each
   side of the accent. Those two already carry a guaranteed >=4.5:1 against each
   other (they are the button label pair, measured per template), so whichever
   ground the ring lands on, one of the two clears 3:1 while the pair stays
   legible as a ring. Nothing here is per-component: it is one treatment applied
   to every focusable thing.

   The element list is spelled out rather than wrapped in :where() on purpose.
   :where() contributes no specificity, so the old (0,1,0) rule tied with plain
   component classes and lost on source order — .urgency__btn and .btn--cta both
   set box-shadow later in this file and would have silently dropped the second
   tone off the two controls that matter most.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cta); outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--on-cta);
  border-radius: var(--radius-btn);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: oklch(1 0 0 / 0.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; gap: 1.25rem; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-size: 1.18rem; color: var(--ink); }
.brand__mark { width: 30px; height: 30px; flex-shrink: 0; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20120%20120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M60%2025%20L101%2060%20L90.5%2060%20L60%2034%20L29.5%2060%20L19%2060%20Z%22%20fill%3D%22%2300565E%22%2F%3E%3Cpath%20d%3D%22M60%2041%20L88%2064.5%20L88%2090%20C88%2092.2%2086.2%2094%2084%2094%20L36%2094%20C33.8%2094%2032%2092.2%2032%2090%20L32%2064.5%20Z%22%20fill%3D%22%23222222%22%2F%3E%3Cpath%20d%3D%22M53%2094%20L53%2074%20C53%2070.1%2056.1%2067%2060%2067%20C63.9%2067%2067%2070.1%2067%2074%20L67%2094%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M91%2014%20C92.8%2022.2%2094.8%2024.2%20103%2026%20C94.8%2027.8%2092.8%2029.8%2091%2038%20C89.2%2029.8%2087.2%2027.8%2079%2026%20C87.2%2024.2%2089.2%2022.2%2091%2014%20Z%22%20fill%3D%22%23007A87%22%2F%3E%3C%2Fsvg%3E"); }
.nav__links { display: flex; gap: 1.35rem; margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: 0.96rem; white-space: nowrap; transition: color 0.15s; }
.nav__links a:hover { color: var(--brand-ink); }
.nav__right { display: flex; align-items: center; gap: 0.85rem; margin-left: 1rem; }
.nav__phone { text-decoration: none; font-weight: 700; color: var(--brand-ink); font-size: 0.98rem; white-space: nowrap; }

/* Between the mobile collapse and full width, scale the links down so the row
   stays on one line instead of wrapping. */
@media (max-width: 1180px) {
  .nav__links { gap: 0.95rem; }
  .nav__links a { font-size: 0.9rem; }
  .nav__inner { gap: 1rem; }
  .nav__right { margin-left: 0.8rem; }
}

/* PRE-EXISTING BUG FIX (2026-08-19), not part of the skin: this template's nav
   carries seven links plus an inline phone number plus a CTA — more than any
   other template in the fleet — and the 1180px step above was not enough. The
   row overflowed the viewport between roughly 860px (where the nav collapses to
   the hamburger) and 930px, giving a horizontal scrollbar on small laptops and
   landscape tablets. One more tightening step closes that band. */
@media (max-width: 1000px) {
  .nav__links { gap: 0.7rem; }
  .nav__links a { font-size: 0.86rem; }
  .nav__inner { gap: 0.7rem; }
  .nav__right { margin-left: 0.5rem; gap: 0.6rem; }
  .nav__phone { font-size: 0.92rem; }
  .nav__right .btn { padding: 0.6rem 1rem; font-size: 0.94rem; }
}

.nav__toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: 0.35rem; padding: 0.4rem; background: none; border: 1px solid var(--border); border-radius: var(--radius-btn); color: var(--ink); cursor: pointer; }
@media (max-width: 860px) {
  .nav__inner { flex-wrap: wrap; height: auto; min-height: 66px; }
  .nav__links { display: none; order: 99; flex-basis: 100%; width: 100%; flex-direction: column; gap: 0; margin-left: 0; margin-top: 0.4rem; border-top: 1px solid var(--border); }
  .nav.nav--open .nav__links { display: flex; }
  .nav__links a { min-height: 44px; display: flex; align-items: center; padding: 0.7rem 0.25rem; font-size: 1rem; }
  .nav__right { margin-left: auto; gap: 0.7rem; }
  .nav__phone { display: inline; padding: 0.35rem 0; }
  .nav__toggle { display: inline-flex; }
}
@media (max-width: 520px) {
  /* Shrink the brand so brand + phone + CTA never overflow the bar. */
  .brand { font-size: 1rem; }
  .nav__phone { font-size: 0.9rem; }
  .nav__cta, .nav__right .btn { padding: 0.55rem 0.95rem; font-size: 0.92rem; }
}
/* Comfortable tap targets for the inline service links on touch screens. */
@media (max-width: 720px) {
  .scard__links .link { padding: 0.35rem 0; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5.5rem); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--bg) 97%, transparent) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 38%, color-mix(in srgb, var(--bg) 55%, transparent) 64%, color-mix(in srgb, var(--bg) 15%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 0%, transparent));
}
.hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__kicker { color: var(--brand-ink); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--brand-ink); }
.hero__lead { margin-top: 1.2rem; font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: var(--muted); max-width: 46ch; }
.hero__row { margin-top: 1.6rem; }
.rating { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.98rem; color: var(--muted); }
.rating__stars { color: var(--star-ink); letter-spacing: 1px; font-size: 1.05rem; }
.rating strong { color: var(--ink); }

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

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

/* Hidden honeypot.
 *
 * contact.html emits <input class="hp" name="company">, and the lead endpoint
 * SILENTLY drops any submission where "company" is filled — it returns ok, so
 * the visitor sees the success message and the lead is gone. Without this rule
 * the field renders as an empty box above "Full name", which is exactly where
 * somebody types their name. Four templates shipped without it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }


/* ---------- Proof band ---------- */
.proof { background: var(--ink); color: oklch(1 0 0 / 0.92); }
/* padding-BLOCK, not the `padding: X 0` shorthand: this element is also a
   .wrap, and the shorthand resets .wrap's padding-inline to 0, leaving its
   content flush against the viewport edge on narrow screens and 40px out of
   alignment with every other section on wide ones. */
.proof__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1.4rem; justify-content: space-between; }
.proof__lead { font-size: 1.05rem; }
.proof__lead strong { color: #fff; }
.proof__badges { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; list-style: none; }
.proof__badges li { font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); background: oklch(1 0 0 / 0.1); border: 1px solid oklch(1 0 0 / 0.16); }

/* ---------- Section scaffolding ---------- */
.section { padding-block: var(--space-section); }

/* A section whose only content is the page heading and its intro.
 *
 * .lede carries a bottom margin to separate it from the content that follows it
 * INSIDE the section. On the contact page nothing does, so that margin has no
 * job, and the section's full bottom padding then stacks on top of the next
 * section's own top padding. Measured on a live site at 1352px: 367px of
 * section holding 102px of content — 72% void, with 156px of dead space below
 * the last line. That also inverts the spacing rule the design system works to,
 * which wants more room above a heading than below it. */
.section--head { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section--head .lede { margin-bottom: 0; }

.section--tint { background: var(--surface); }
.lede { max-width: 56ch; margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }
.lede h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.lede p { margin-top: 0.8rem; color: var(--muted); font-size: 1.1rem; }

/* The <section class="section" aria-labelledby="stpete-host-planning"><div class="wrap">
<h2 id="stpete-host-planning">Plan your St. Petersburg rental reset</h2>
<p>Start with the visit you need: <a href="/airbnb-turnover-cleaning-st-petersburg">Airbnb cleaning</a>, <a href="/vrbo-vacation-rental-cleaning-st-petersburg">vacation rental cleaning</a> or a <a href="/short-term-rental-cleaning-st-petersburg">short-term rental cleaning plan</a>. Share the address, bed count and next arrival time to confirm the scope.</p>
<p>Compare a <a href="/same-day-turnover-st-petersburg">same-day turnover</a>, an occupied <a href="/mid-stay-cleaning-st-petersburg">mid-stay refresh</a> and a scheduled <a href="/deep-clean-resets-st-petersburg">deep clean</a>. Plan <a href="/linen-laundry-service-st-petersburg">linen</a>, <a href="/restocking-supplies-st-petersburg">supplies</a>, <a href="/damage-inspection-reporting-st-petersburg">photo reporting</a> and <a href="/trash-out-bin-service-st-petersburg">bins</a> as part of the agreed work.</p>
<p>Get direct answers about <a href="/answers/how-much-does-a-turnover-clean-cost">cleaning costs</a>, <a href="/answers/how-fast-is-a-same-day-turnover">turnover timing</a>, <a href="/answers/whats-included-in-a-turnover">what is included</a> and <a href="/answers/who-pays-for-guest-damage">damage reporting</a>, or browse the <a href="/blog/">host guides</a>.</p>
</div></section> slot carries authored prose — a heading and several
 * paragraphs — rather than template markup, so it arrives as bare <h2> and <p>.
 * This stylesheet styles classes and never bare elements inside .wrap, so every
 * one of these blocks rendered completely unstyled: browser-default 16px text at
 * a 128-character measure with zero space between paragraphs, and an h2 at 24px
 * against a headline ramp that starts at 30px. Measured on a live homepage at
 * 1352px. All 34 sites carrying city copy looked like this.
 *
 * Scoped to .city-note, which wraps the slot in index.html, so it cannot reach
 * any other section. */
.city-note h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; }
.city-note p { max-width: 66ch; margin-top: 1.5rem; color: var(--muted); font-size: clamp(1.05rem, 2.2vw, 1.22rem); line-height: 1.7; }
.city-note h2 + p { margin-top: 1.1rem; }

/* Wide viewports: heading left, prose right.
 * A single constrained column left roughly 500px of dead space on the right
 * of a 1160px row — readable, and visibly lopsided. The split uses the width
 * without widening the measure: heading column ~318px, prose ~695px, 67
 * characters per line. Measured live at 1352px. */
@media (min-width: 900px) {
  .city-note .wrap { display: grid; grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.75fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .city-note h2 { grid-column: 1; grid-row: 1; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
  .city-note p { grid-column: 2; }
  .city-note p:first-of-type { grid-row: 1; margin-top: 0; }
}
.center { text-align: center; margin-top: 1.5rem; }
.link { color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ---------- Services ---------- */
.services { display: grid; gap: clamp(1.3rem, 3vw, 2rem); }
/* Primary service — full-width banner, image beside copy */
.feature { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.feature__img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.feature__body { padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 0.7rem; align-content: center; }
.feature__body h3 { font-size: 1.4rem; }
.feature__body p { color: var(--muted); }
/* Supporting services — image cards (4 services → clean 2x2) */
.service-cards { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 560px) { .service-cards { grid-template-columns: repeat(2, 1fr); } }
.scard { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.scard__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.5s var(--ease); }
.scard:hover .scard__img { transform: scale(1.05); }
.scard__body { padding: 1.1rem 1.25rem 1.3rem; display: grid; gap: 0.28rem; }
.scard__body h3 { font-size: 1.12rem; }
.scard__body p { color: var(--muted); font-size: 0.96rem; }
@media (prefers-reduced-motion: reduce) { .scard, .scard__img { transition: none; } .scard:hover { transform: none; } .scard:hover .scard__img { transform: none; } }
/* Card feature bullets + per-card CTAs */
.scard__list { list-style: none; display: grid; gap: 0.3rem; margin-top: 0.55rem; }
.scard__list li { position: relative; padding-left: 1.2rem; font-size: 0.92rem; color: var(--muted); }
.scard__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand-ink); font-weight: 700; }
.scard__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 0.75rem; font-size: 0.95rem; }
/* Compact text-only service cards (services without photography) */
.svc-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.scard--plain { background: var(--bg); }
/* Fill the stretched card height and pin the Details/Get-a-quote row to the
   bottom, so cards of slightly different text length still align. */
.scard--plain .scard__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.35rem 1.4rem; }
.scard--plain .scard__list { margin-bottom: 0.25rem; }
.scard--plain .scard__links { margin-top: auto; }

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

/* ---------- Steps ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem); counter-reset: step; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
.step { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.step__num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-btn);
  background: var(--brand-soft); color: var(--brand-ink); font-family: var(--font-display);
  font-weight: 800; font-size: 1.2rem; margin-bottom: 1rem;
}
.step h3 { font-size: 1.2rem; }
.step p { color: var(--muted); margin-top: 0.4rem; }

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

/* ---------- Areas ---------- */
.areas { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.6rem; }
.areas li { font-size: 0.9rem; font-weight: 500; padding: 0.45rem 0.9rem; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); }
.areas li.areas__check { padding: 0; }
.areas__check a { display: flex; align-items: center; min-height: 44px; padding: 0.65rem 0.9rem; border-radius: inherit; color: inherit; text-underline-offset: 0.2em; }
.areas__check a:hover { color: var(--cta); }

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

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

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

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

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .book__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__scrim { background: linear-gradient(0deg, oklch(1 0 0 / 0.92) 30%, oklch(1 0 0 / 0.78) 100%); }
  .proof__inner { justify-content: flex-start; }
  .callbar { display: block; }
  body { padding-bottom: 56px; }
  .footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .form__row { grid-template-columns: 1fr; }
}

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

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

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


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

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

.areas__more { margin-top: 1.1rem; }

/* ── Cleaning checklist comparison ─────────────────────────────── */
.checklist { position: relative; overflow-x: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.checklist__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.96rem; }
.checklist__caption { caption-side: bottom; text-align: left; padding: 0.8rem 1.25rem; font-size: 0.82rem; color: var(--muted); }
.checklist__table th, .checklist__table td { padding: 0.65rem 1.25rem; border-bottom: 1px solid var(--border); text-align: left; }
.checklist__table thead th { font-family: var(--font-display); font-size: 0.95rem; background: var(--surface); white-space: nowrap; }
.checklist__table thead th + th, .checklist__table td.ck { text-align: center; width: 6.5rem; }
.checklist__table tbody th[scope="row"] { font-weight: 500; color: var(--ink); }
.checklist__room th { font-family: var(--font-display); font-size: 0.92rem; color: var(--brand-ink); background: var(--brand-soft); padding-block: 0.5rem; }
.ck { color: var(--muted); }
.ck--y { color: var(--brand-ink); font-weight: 700; }
.ck--n { opacity: 0.55; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.checklist__table tbody tr:last-child th, .checklist__table tbody tr:last-child td { border-bottom: 0; }

/* ── Add-on chips ──────────────────────────────────────────────── */
.addons-wrap { margin-top: clamp(2rem, 4vw, 3rem); }
.addons-wrap h3 { font-size: 1.25rem; }
.addons__sub { color: var(--muted); margin-top: 0.35rem; font-size: 0.98rem; }
.addons { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; }
.addons li { font-size: 0.9rem; font-weight: 500; padding: 0.45rem 0.95rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); color: var(--ink); }

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


/* Ratings & accreditations band — third-party trust badges in white tiles */
.certs-band { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.8rem 0; }
.certs-band__title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0 0 1.2rem; }
.certs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem 1rem; }
.cert-tile { display: flex; align-items: center; justify-content: center; height: 74px; padding: 0 1.4rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.cert-badge { height: 46px; width: auto; display: block; }
@media (max-width: 560px) { .cert-tile { height: 62px; padding: 0 1rem; } .cert-badge { height: 36px; } }

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

/* Reviews section hidden until the prospect has real Google reviews */
#reviews:not([data-has-reviews="1"]) { display: none; }
/* Blog teaser hidden only when the site actually has no posts. Four templates
   ship no default set in _partials/blog.json, so without this the homepage
   carried a heading and a "Visit the blog" link with a tall empty gap between
   them. expandSite drops blog/index.html in the same case, and the dead-link
   pruner then removes the nav and footer links to it.

   Tested on EMPTY, not on "1" — the reverse of how #reviews and #brands gate,
   and deliberately so. fillOne leaves an unknown {{TOKEN}} literal, so a re-seed
   that lands before the Worker carrying HAS_POSTS would ship
   data-has-posts="1". Under a :not([data-has-posts="1"]) rule that
   string fails the test and the blog section would vanish from every site in the
   fleet, including the nine whose blogs are full. Matching the empty string
   instead means a stale Worker degrades to exactly today's behaviour.

   The reviews and brands gates keep the opposite polarity on purpose: there the
   unconfirmed state is fabricated testimonials, so hiding is the safe failure. */
#blog[data-has-posts=""] { display: none; }

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

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

/* coverage map (MapLibre + Carto) fills the map card; the canvas is absolutely
   positioned so it fills #coverage-map regardless of flex/aspect-ratio height. */
#coverage-map { position: relative; }
#coverage-map .maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
#coverage-map .maplibregl-marker { cursor: pointer; }
#coverage-map .maplibregl-popup-content { font-weight: 700; font-size: 0.85rem; color: var(--ink); padding: 0.4rem 0.65rem; border-radius: var(--radius); }
#coverage-map .maplibregl-ctrl-attrib { font-size: 10px; }
/* areas split holds the coverage map in the media column — top-align it with the
   heading (the shared .split centres vertically) so the map card doesn't float. */
#areas .split { align-items: start; }


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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Skin: Airbnb (hue-shifted) ─────────────────────────────────────────────
   Two moves, no more. (1) Modest display weights: Airbnb sets display at 500/600
   rather than the 700+ that fintech and trade brands reach for — the confidence
   comes from space, not from weight — so the hero drops a step in size and
   weight. (2) The listing-card surface: borderless cards with generous rounding
   and a soft lift on a pure-white ground, separated by shadow and radius rather
   than by a hairline. Structure, motion contract and class vocabulary untouched.
   ─────────────────────────────────────────────────────────────────────────── */
.hero h1, .lede h2, .book__copy h2 { font-weight: 600; letter-spacing: -0.02em; }
.hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); }
.scard { border-color: transparent; box-shadow: var(--shadow-sm); }

/* Operator identity line — reconciles the site brand with the name on the
   Google Business Profile this site links to. Renders only when they differ. */
.operator-line { margin: 6px 0 0; font-size: .875em; color: var(--muted, inherit); }

/* Contact page: keep booking ahead of secondary details on small screens. */
.contact-page { --contact-field-border: #858585; }
.contact-page .section--head { padding-block: 2.5rem 2rem; }
.contact-page .lede { max-width: 48rem; }
.contact-page .lede h1 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; }
.contact-page .book { padding-block: clamp(2rem, 4vw, 3.5rem); }
.contact-page .book__inner { align-items: start; }
.contact-page .book__copy { order: -1; }
.contact-page .book__copy h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); max-width: 22ch; }
.contact-page .book__phone { margin-top: 1rem; font-size: clamp(1.8rem, 3vw, 2.2rem); }
.contact-page .contact-address { margin-top: 1.3rem; font-style: normal; line-height: 1.65; }
.contact-page .contact-directions { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; color: #fff; font-weight: 600; text-underline-offset: 0.2em; }
.contact-page .book__hours { margin-top: 1rem; font-size: 1rem; }
.contact-page .contact-email { overflow-wrap: anywhere; font-size: 1rem; }
.contact-page .contact-email a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-page .contact-weekly-hours { margin-top: 1rem; max-width: 25rem; }
.contact-page .contact-weekly-hours summary { padding-block: 0.65rem; cursor: pointer; min-height: 44px; font-weight: 600; }
.contact-page .contact-weekly-hours summary:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; box-shadow: 0 0 0 7px var(--on-cta); }
.contact-page .contact__hours > div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgb(255 255 255 / 25%); padding-block: 0.5rem; font-size: 0.95rem; }
.contact-page .contact__hours > div span:last-child { font-variant-numeric: tabular-nums; }
.contact-page .contact-coverage { font-size: 0.95rem; margin-top: 1.3rem; }
.contact-page .contact-coverage a { text-underline-offset: 0.2em; }
.contact-page .form--book { color: var(--ink); min-width: 0; }
.contact-page .form--book > *, .contact-page .field { min-width: 0; }
.contact-page .form--book .btn { white-space: normal; }
.contact-page .contact-form-intro h2 { font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.contact-page .contact-form-intro p { margin-top: 0.65rem; color: var(--muted); line-height: 1.55; font-size: 0.95rem; }
.contact-page .contact-required { font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.contact-page input:not(.hp):not([type="checkbox"]):not([type="radio"]), .contact-page select, .contact-page textarea { border-color: var(--contact-field-border); min-height: 46px; }
.contact-page input:focus, .contact-page select:focus, .contact-page textarea:focus { border-color: var(--cta); }
.contact-page #service-request { scroll-margin-top: 12rem; }
.contact-page .form--book:focus { outline: none; }
.contact-page .form--book:focus-visible { outline: 3px solid var(--cta); outline-offset: 5px; box-shadow: 0 0 0 9px var(--on-cta); }
@media(max-width: 860px) {
  .contact-page .book__inner { gap: 2rem; }
  .contact-page .form--book { order: -1; }
  .contact-page .book__copy { order: 0; border-top: 1px solid rgb(255 255 255 / 25%); padding-top: 2rem; }
  .contact-page .section--head { padding-block: 1.5rem; }
}
@media(max-width: 460px) {
  .contact-page .contact__hours > div { font-size: 0.875rem; gap: 0.5rem; }
}

.contact-page .book__hours:empty { display: none; }
.contact-page .contact-form-intro a { color: var(--ink); font-weight: 700; text-underline-offset: 0.2em; }

/* Compact supporting sections keep the next useful action within reach. */
.home-page :is(#reviews, #faq, #blog) { padding-block: clamp(2.5rem, 4vw, 3rem); }
.home-page :is(#reviews, #faq, #blog) .lede { margin-bottom: 1.5rem; }
.home-page #areas .areas__text { gap: 1.5rem; }
.home-page #areas .areas__more { margin-top: 0; }
@media (max-width: 560px) {
  .home-page .step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .4rem 1rem; padding: 1.25rem; }
  .home-page .step__num { grid-row: 1 / 3; width: 40px; height: 40px; margin-bottom: 0; }
  .home-page .step h3, .home-page .step p { grid-column: 2; margin: 0; }
}
@media (max-width: 560px) {
  .home-page #services .scard__img { aspect-ratio: 2 / 1; }
}

/* Arrival: linen, olive and terracotta; hospitality without visual clutter. */
.brand__mark { background-image: url("/img/arrival-mark.svg"); }
.brand__name { font-family: var(--font-body); font-weight: 700; letter-spacing: -.025em; }
h1,h2,h3 { font-weight: 500; }
.hero { display: flex; flex-direction: column; justify-content: space-between; min-height: min(730px, calc(100svh - 90px)); padding: 0; overflow: clip; background: var(--bg); color: var(--ink); }
.hero__media { position: absolute; inset: -48px 0 -48px 15%; z-index: -2; }
.hero__media picture,.hero__poster,.hero__video { display: block; width: 100%; height: 100%; }
.hero__poster,.hero__video { object-fit: cover; object-position: 70% center; }
.hero__video { position: absolute; inset: 0; opacity: 0; }
.hero__media.has-video .hero__video { opacity: 1; }
.hero__scrim { background: linear-gradient(90deg, #faf7f1 0%, rgb(250 247 241 / 98%) 22%, rgb(250 247 241 / 80%) 39%, transparent 68%), linear-gradient(0deg, rgb(250 247 241 / 90%), transparent 25%); }
.hero__inner { display: block; width: 100%; padding-block: clamp(2.5rem,5.2vw,4.75rem) 2.5rem; }
.hero__copy { max-width: 37rem; }
.hero__kicker { color: var(--brand-ink); font: 600 .85rem var(--font-body); letter-spacing: .03em; margin-bottom: 1.5rem; }
.hero h1 { font-size: clamp(3rem,5.3vw,4.6rem); line-height: 1.04; letter-spacing: -.025em; color: var(--ink); max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--cta); }
.hero__lead { color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 35ch; margin-top: 1.5rem; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 1.75rem; }
.hero__request { min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; color: var(--brand-ink); font-weight: 600; text-underline-offset: .25em; }
.hero__note { margin-top: 1rem; font-size: .83rem; color: var(--muted); }
.hero__rating { margin-top: 1rem; font-size: .85rem; }
.hero__rating:not([data-has-rating="1"]) { display: none; }
.hero__footer { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-block: 1.2rem 1.8rem; width: 100%; }
.arrival-note__label { font-size: .73rem; font-weight: 700; color: var(--cta); }
.arrival-note p { font-size: .91rem; margin-top: .3rem; }
.hero__motion { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 44px; padding: .6rem .85rem; flex-shrink: 0; border: 1px solid var(--muted); color: var(--ink); background: var(--bg); border-radius: 3px; font: inherit; font-size: .75rem; cursor: pointer; }
.hero__motion[hidden] { display: inline-flex; visibility: hidden; }
.hero__play,.hero__motion.is-paused .hero__pause { display: none; }
.hero__motion.is-paused .hero__play { display: block; }
.arrival-strip { border-block: 1px solid var(--border); background: var(--surface); }
.arrival-strip .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.15rem; }
.arrival-strip p { font: 500 clamp(.9rem,1.6vw,1.2rem) var(--font-display); }
.home-page .step { border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; background: transparent; }
.home-page .step__num { border-radius: 0; width: auto; height: auto; margin-bottom: 1rem; background: none; color: var(--brand); font-family: var(--font-display); font-size: 2.3rem; }
.home-page .scard { box-shadow: none; border-radius: 4px; }
.home-page .feature { border-radius: 4px; box-shadow: none; }
.footer .operator-line { color: rgb(255 255 255 / 78%); }
.btn--cta { box-shadow: none; }
@media (min-width: 721px) { .hero__rating { display: none; } .home-page .gbadge[data-has-rating="1"] { display: flex; } .hero__footer { padding-left: max(2.5rem, calc(21rem - max(0px, (100vw - 1160px) / 2))); } }
@media (min-width: 701px) and (max-height: 800px) { .hero__inner { padding-block: 2rem 1rem; } .hero h1 { font-size: clamp(3rem,5vw,4rem); } .hero__lead { margin-top: 1rem; } .hero__actions { margin-top: 1.2rem; } }
@media (max-width: 700px) {
 .hero { min-height: 0; }
 .hero__inner { order: 0; padding-block: 2.2rem 1.75rem; }
 .hero__copy { max-width: none; }
 .hero h1 { font-size: clamp(2.9rem,10.5vw,4.3rem); }
 .hero__media { position: relative; order: 1; inset: auto; width: 100%; aspect-ratio: 16/9; z-index: 0; overflow: clip; }
 .hero__media picture { height: calc(100% + 32px); margin-top: -16px; }
 .hero__video { height: calc(100% + 32px); top: -16px; }
 .hero__scrim { display: none; }
 .hero__footer { order: 2; gap: .75rem; padding-block: 1rem 1.3rem; }
 .arrival-note p { max-width: 24ch; font-size: .85rem; }
 .arrival-strip .wrap { gap: .75rem; }
 .arrival-strip p { max-width: 12ch; }
}
@media (max-width: 560px) { .nav__right { display: none; } .nav__toggle { margin-left: auto; } .brand { min-width: 0; max-width: calc(100% - 58px); } .brand__name { overflow-wrap: anywhere; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.js .reveal { opacity: 1; transform: none; } }

@media (max-width: 560px) {
 .nav__inner { column-gap: .75rem; row-gap: 0; padding-block: .5rem; }
 .brand { flex: 1 1 0; max-width: none; min-width: 0; }
 .nav__toggle { flex: 0 0 44px; margin-left: 0; }
}

@media (min-width: 721px) and (max-height: 700px) {
 .hero__inner { padding-block: 1.2rem .5rem; }
 .hero h1 { font-size: clamp(2.65rem, 4vw, 3.3rem); line-height: 1; }
 .hero__kicker { font-size: .7rem; margin-bottom: .6rem; }
 .hero__lead { font-size: .96rem; line-height: 1.48; max-width: 44ch; margin-top: .7rem; }
 .hero__actions { margin-top: .8rem; gap: .6rem 1rem; }
 .hero__actions .btn { font-size: .95rem; padding: .7rem 1.2rem; min-height: 48px; }
 .hero__note { display: none; }
}