/* ============================================================================
   custom.css — per-client bespoke design layer for Sprinkler Contractors of the
   Palm Beaches (prefix: scpb). The engine enqueues this file LAST (after
   primitives.css, main.css, and the derived/font tokens) ONLY if it exists and
   is non-empty — see Hozio-Studio/hozio-studio.php. It is ADDITIVE: reuse .hzo-*
   first, never redefine .hzo-* or the token values, page-scope every rule under a
   .scpb-* wrapper so nothing bleeds, and use tokens for every value.

   Per page-build.md Phase 2: bespoke per-section CSS lives here, not in inline
   <style> blocks. Migration status: FAQ + Contact + About live here. The older
   front-page / service-page / hub / town templates still carry inline <style>
   (separate .scpb-home / .scpb-svc / .scpb-hub namespaces) — migrate in a later pass.
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════════
   BRAND OVERRIDES (client-wide). custom.css loads after tokens.derived.css, so
   these :root values override the engine's generated accent family. The brand
   green was corrected to #3EA550 (the previous #a3e635 lime was wrong). The Monday
   accent_color should be updated to match on the next token regeneration.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --accent: #3EA550;
  --accent-text: #2E7D32;            /* darker green — AA text contrast on white */
  --text-on-accent: #ffffff;         /* white text on the green */
  --accent-hover-on-light: #2E7D32;
  --accent-hover-on-dark: #5BBE70;
  --accent-pale: #E7F4EA;            /* light green tint (badges, pills, fills) */
}

/* Brand: every content photo gets a 15px radius. Excludes the logo, full-bleed
   hero photos (they fill their scrim container edge-to-edge), and Leaflet map
   tiles/markers (rounding each tile would break the map). */
img { border-radius: 15px; }
.hzo-site-logo img, .scpb-footer-brand img,
.scpb-page-hero__media img, .scpb-svc-hero__media img, .scpb-hub-hero__media img,
.leaflet-container img, .leaflet-tile, .leaflet-marker-icon, .leaflet-control img { border-radius: 0 !important; }

/* Brand: lead/intro paragraphs render at 17px in the body font (Inter), not the
   oversized engine default. */
.hzo-lead { font-family: var(--font-body); font-size: 17px; line-height: 1.65; }

/* ───────────────────────── Green button hover (client-wide) ─────────────────
   The engine fills the on-dark primary hover with --accent-pale (near-white); with
   white button text that washes out on dark sections. Unify the green-button hover
   to a deeper, readable green (--accent-hover-on-light) + a subtle lift and soft
   green glow on BOTH light and dark backgrounds. Equal specificity + !important +
   later cascade beats the engine's same-selector rules. (The Fluent Form submit is
   intentionally left flat by the engine to avoid a hover flash — not touched here.) */
.hzo-btn--primary:hover, .hzo-btn--primary.is-hover,
.hzo-btn--on-dark.hzo-btn--primary:hover, .hzo-btn--on-dark.hzo-btn--primary.is-hover {
  background: var(--accent-hover-on-light) !important;
  border-color: var(--accent-hover-on-light) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(46, 125, 50, 0.32);
}
.hzo-btn--primary:active, .hzo-btn--on-dark.hzo-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(46, 125, 50, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .hzo-btn--primary:hover, .hzo-btn--on-dark.hzo-btn--primary:hover { transform: none; }
}

/* ───────────────────────── FAQ / accordion (client-wide upgrade) ────────────
   Restyles the engine .hzo-accordion into elevated rounded cards with a clear
   chevron and hover/open states. Used on the FAQ page and the service-page FAQ. */
.hzo-accordion { display: flex; flex-direction: column; gap: var(--space-md); }
.hzo-accordion__item { background: #fff; border: 1px solid var(--border); border-radius: 15px; box-shadow: 0 6px 18px rgba(2,14,36,0.06); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; }
.hzo-accordion__item[open] { border-color: var(--accent); box-shadow: 0 16px 38px rgba(2,14,36,0.12); }
.hzo-accordion__item > summary, .hzo-accordion__question { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg) var(--space-xl); margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.08rem; color: var(--brand); line-height: 1.3; }
.hzo-accordion__item > summary::-webkit-details-marker, .hzo-accordion__question::-webkit-details-marker { display: none; }
/* No hover state on the question — neutralize the engine's grey (--brand-pale) hover bg. */
.hzo-accordion__question:hover, .hzo-accordion__item:hover > summary { background: transparent; color: var(--brand); }
.hzo-accordion__icon { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-pale); color: var(--accent-text); padding: 7px; box-sizing: border-box; transition: transform .25s ease, background .2s ease, color .2s ease; }
.hzo-accordion__item[open] .hzo-accordion__icon { transform: rotate(180deg); background: var(--accent); color: var(--text-on-accent); }
/* Open answer: clear separation from the question + generous padding all round. */
.hzo-accordion__item[open] > summary, .hzo-accordion__item[open] .hzo-accordion__question { padding-bottom: var(--space-md); }
.hzo-accordion__answer { padding: var(--space-lg) var(--space-xl) var(--space-xl); color: var(--text-muted); line-height: 1.75; }
.hzo-accordion__answer a { color: var(--accent-text); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .hzo-accordion__item, .hzo-accordion__icon { transition: none; } }

/* ───────────────────────── Shared page scaffold ─────────────────────────────
   Used by the simple content pages (.scpb-page on <main>): FAQ, Contact, About. */

/* Restore symmetric top padding on stacked sections. The engine collapses it
   (.hzo-section + .hzo-section { padding-top: 0 }); our bands alternate surfaces,
   so each needs its own breathing room. Higher specificity beats the engine rule. */
.scpb-page .hzo-section + .hzo-section { padding-top: var(--space-xl); }
@media (min-width: 768px)  { .scpb-page .hzo-section + .hzo-section { padding-top: var(--space-2xl); } }
@media (min-width: 1250px) { .scpb-page .hzo-section + .hzo-section { padding-top: var(--space-3xl); } }

.scpb-page-head { max-width: 720px; }
.scpb-page-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.scpb-page-head .hzo-visual-h2 { margin-top: var(--space-xs); }
.scpb-page-head .hzo-lead { margin-top: var(--space-md); }

/* Hero — photo plate + navy scrim, centered. */
.scpb-page-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(320px, 40vh, 440px); background-color: var(--brand); text-align: center; }
.scpb-page-hero__media { position: absolute; inset: 0; z-index: 0; }
.scpb-page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scpb-page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(2,14,36,0.58) 0%, rgba(11,45,92,0.5) 100%); }
.scpb-page-hero__inner { position: relative; z-index: 2; width: 100%; }
.scpb-page-hero .hzo-display { color: #fff; max-width: 760px; margin-left: auto; margin-right: auto; }
.scpb-page-hero .hzo-subtitle { color: rgba(255,255,255,0.92); max-width: 600px; margin-left: auto; margin-right: auto; }

/* Final CTA — layout only; each page sets its own background image. */
.scpb-page-final { background-size: cover; background-position: center; text-align: center; }
.scpb-page-final__body { max-width: 620px; margin: var(--space-md) auto 0; }
.scpb-page-final__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-xl); }

/* Footer + grass band. */
.scpb-footer { background: var(--brand-deep); padding: 56px 0 140px; position: relative; overflow: hidden; }
/* Footer background — solid deep navy on every footer (incl. the legacy inline-styled
   footers, hence !important). The lawn photo now lives in the final-CTA section instead. */
.hzo-site-footer { position: relative; overflow: hidden; background: #020e24 !important; }
/* Final-CTA background photo — the lawn shot, on EVERY page's CTA. !important to beat
   the legacy inline-styled CTAs (home / service / hubs); migrated pages set lawn in their
   own per-page rules below. */
.scpb-home-final, .scpb-svc-final, .scpb-hub-final {
  background-image: linear-gradient(118deg, rgba(11,45,92,0.88) 0%, rgba(2,14,36,0.82) 100%), url('https://sprinklercontractorsfl.com/wp-content/uploads/2026/06/scpb-footer-lawn.webp') !important;
  background-size: cover !important; background-position: center !important;
}
.scpb-footer-brand { max-width: 400px; }
/* Footer logo: bigger (wide wordmark → size by width; override the shortcode's inline
   height:40px) + linked to home (wrapped in .scpb-footer-brand__link by custom.js) */
.scpb-footer-brand__link { display: inline-block; margin-bottom: 18px; }
.scpb-footer-brand img { height: auto !important; width: auto !important; max-width: 360px !important; margin-bottom: 0 !important; }
.scpb-footer__legal-bar { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 48px; padding: 18px 0; }

/* Footer responsive: the 360px brand logo blew out the 4-col grid on tablet
   (Contact column pushed offscreen) and overflowed the viewport on mobile.
   Wrap the grid + shrink the logo down-breakpoint. */
@media (max-width: 1023px) {
  .scpb-footer .hzo-site-footer__grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-2xl) var(--space-lg) !important; }
  .scpb-footer-brand img { max-width: 280px !important; }
}
@media (max-width: 560px) {
  .scpb-footer .hzo-site-footer__grid { grid-template-columns: 1fr !important; }
  .scpb-footer-brand { max-width: 100%; }
  .scpb-footer-brand img { max-width: 230px !important; }
}

/* Offcanvas (mobile menu): shrink the logo so it clears the close (X) button. */
.hzo-mobile-menu .hzo-site-logo img { max-width: 190px !important; }
.scpb-footer__legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.scpb-grass { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 92px; display: block; pointer-events: none; background: url('https://sprinklercontractorsfl.com/wp-content/uploads/2026/06/scpb-grass.webp') repeat-x bottom center / auto 100%; }
@media (min-width: 768px) { .scpb-grass { height: 124px; } }

/* ───────────────────────────── About page ──────────────────────────────────
   Hero + navy glass trust band + photo-split story + pale value cards + CTA. */

/* Hero — taller plate, depth-weighted scrim, CTA + lime-check trust strip. */
.scpb-about .scpb-page-hero { min-height: clamp(440px, 56vh, 580px); }
.scpb-about .scpb-page-hero::after { background: linear-gradient(180deg, rgba(2,14,36,0.55) 0%, rgba(2,14,36,0.42) 45%, rgba(11,45,92,0.62) 100%); }
.scpb-about-hero__cta { margin-top: var(--space-xl); }
.scpb-about-hero__trust { list-style: none; max-width: 760px; margin: var(--space-xl) auto 0; padding: var(--space-lg) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md) var(--space-lg); border-top: 1px solid rgba(255,255,255,0.18); }
.scpb-about-hero__trust li { display: inline-flex; align-items: center; gap: var(--space-xs); color: rgba(255,255,255,0.92); font-weight: 600; font-size: 0.95rem; }
.scpb-about-hero__trust svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }

/* Why choose us — navy glass trust cards (homepage motif). */
.scpb-about-trust { background: var(--brand); }
.scpb-about-trust .hzo-eyebrow { color: var(--accent); }
.scpb-about-trust .hzo-visual-h2 { color: #fff; }
.scpb-about-trust__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-2xl); }
@media (min-width: 600px)  { .scpb-about-trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .scpb-about-trust__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } }
.scpb-about-trust__item { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-card); padding: var(--space-lg); transition: var(--transition-base, all .2s ease); }
.scpb-about-trust__item:hover { background: rgba(255,255,255,0.10); transform: translateY(-3px); }
.scpb-about-trust__icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(62,165,80,0.22); border: 1px solid rgba(110,217,138,0.42); color: #74d78d; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); }
.scpb-about-trust__icon svg { width: 24px; height: 24px; }
.scpb-about-trust__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.12rem; line-height: 1.2; color: #fff; margin: 0 0 6px; }
.scpb-about-trust__desc { margin: 0; color: rgba(255,255,255,0.72); font-size: 0.92rem; line-height: 1.55; }

/* Our story — photo split + stat row. */
.scpb-about-story__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) { .scpb-about-story__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }
.scpb-about-story__media { position: relative; }
.scpb-about-story__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); box-shadow: 0 22px 50px rgba(2,14,36,0.18); display: block; }
.scpb-about-story__badge { position: absolute; left: var(--space-lg); bottom: var(--space-lg); max-width: 72%; background: #fff; border-left: 4px solid var(--accent); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg); box-shadow: 0 18px 40px rgba(2,14,36,0.22); display: flex; flex-direction: column; }
.scpb-about-story__badge-eyebrow { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
.scpb-about-story__badge-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--brand); line-height: 1.1; margin-top: 3px; }
.scpb-about-story__badge-role { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }
.scpb-about-story__body .hzo-lead { margin-top: var(--space-md); }
.scpb-about-story__stats { display: flex; flex-wrap: wrap; gap: var(--space-xl) var(--space-2xl); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--border); }
.scpb-about-story__stat-num { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 2.4rem; color: var(--brand); line-height: 1; }
.scpb-about-story__stat-label { display: block; margin-top: 6px; color: var(--text-muted); font-size: 0.9rem; max-width: 15ch; }

/* What you can count on — pale band, lime-icon value cards. */
.scpb-about-values { background: var(--brand-pale); }
.scpb-about-values__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-2xl); }
@media (min-width: 600px)  { .scpb-about-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .scpb-about-values__grid { grid-template-columns: repeat(4, 1fr); } }
.scpb-about-value { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-lg); box-shadow: 0 10px 30px rgba(2,14,36,0.06); transition: var(--transition-base, all .2s ease); }
.scpb-about-value::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.scpb-about-value:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(2,14,36,0.13); }
.scpb-about-value:hover::before { transform: scaleX(1); }
.scpb-about-value__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-pale); color: var(--accent-text); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); }
.scpb-about-value__icon svg { width: 24px; height: 24px; }
.scpb-about-value__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.08rem; color: var(--brand); margin: 0 0 6px; }
.scpb-about-value__desc { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

/* Final CTA background (layout comes from shared .scpb-page-final). */
.scpb-about-final { background-image: linear-gradient(118deg, rgba(11,45,92,0.88) 0%, rgba(2,14,36,0.82) 100%), url('https://sprinklercontractorsfl.com/wp-content/uploads/2026/06/scpb-footer-lawn.webp'); }

/* Respect reduced-motion for the About hover micro-interactions. */
@media (prefers-reduced-motion: reduce) {
  .scpb-about-trust__item, .scpb-about-value, .scpb-about-value::before { transition: none; }
  .scpb-about-trust__item:hover, .scpb-about-value:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SHARED — Service-area interactive map + searchable city list.
   Used by the homepage (front-page.html) and the Service Areas page
   (service-areas-page.html). Markup: .scpb-area-layout > (.scpb-area-map#scpb-map
   + .scpb-area-aside with #scpb-area-search and #scpb-area-list of .scpb-area-item
   buttons). Behaviour lives in assets/js/custom.js.
   ════════════════════════════════════════════════════════════════════════════ */
.scpb-area-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-top: var(--space-xl); }
@media (min-width: 1024px) { .scpb-area-layout { grid-template-columns: 1.55fr 1fr; align-items: stretch; } }
.scpb-area-map { width: 100%; height: 380px; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 2px 14px rgba(2,14,36,0.10); background: var(--brand-pale); z-index: 0; }
@media (min-width: 1024px) { .scpb-area-map { height: auto; min-height: 480px; } }
.scpb-area-aside { display: flex; flex-direction: column; min-height: 480px; }
.scpb-area-aside__label { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: var(--brand-text); margin: 0 0 var(--space-sm); }
.scpb-area-search { position: relative; margin-bottom: var(--space-sm); }
.scpb-area-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.scpb-area-search__input { width: 100%; padding: 12px 16px 12px 42px; border: 1px solid var(--border); border-radius: var(--radius-pill, 999px); font: inherit; font-size: 0.95rem; background: #fff; color: var(--brand-text); }
.scpb-area-search__input::placeholder { color: var(--text-muted); }
.scpb-area-search__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,45,92,0.12); }
.scpb-area-list { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px; align-content: start; overflow-y: auto; flex: 1 1 auto; min-height: 0; max-height: 420px; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: inset 0 -10px 14px -12px rgba(2,14,36,0.18); }
.scpb-area-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: transparent; border-radius: 8px; font: inherit; font-size: 0.9rem; line-height: 1.3; color: var(--brand-text, #1f2937); cursor: pointer; transition: background .15s ease, color .15s ease; }
.scpb-area-item:hover { background: var(--brand-pale); }
.scpb-area-item.is-active { background: var(--brand); color: #fff; }
.scpb-area-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.scpb-area-empty { color: var(--text-muted); font-size: 0.9rem; margin: var(--space-sm) 0 0; }
.scpb-area-aside__cta { margin-top: var(--space-md); align-self: flex-start; }
.leaflet-container { font: inherit; }
.scpb-area-map .leaflet-popup-content { font-weight: 700; color: var(--brand); margin: 8px 12px; }
@media (prefers-reduced-motion: reduce) { .scpb-area-item { transition: none; } }

/* Shared hero CTA + lime-check trust strip (centered heroes: About, Service Areas). */
.scpb-page-hero__cta { margin-top: var(--space-xl); }
.scpb-page-hero__trust { list-style: none; max-width: 800px; margin: var(--space-xl) auto 0; padding: var(--space-lg) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md) var(--space-lg); border-top: 1px solid rgba(255,255,255,0.18); }
.scpb-page-hero__trust li { display: inline-flex; align-items: center; gap: var(--space-xs); color: rgba(255,255,255,0.92); font-weight: 600; font-size: 0.95rem; }
.scpb-page-hero__trust svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }

/* ───────────────────────── Service Areas page ──────────────────────────────
   Hero + shared map component + reassurance callout + CTA. */

/* Reassurance callout — "don't see your town?" — horizontal card on a pale band:
   accent-pale pin badge + eyebrow/title/text + inline lime CTA. */
.scpb-areas-reassure { background: var(--brand-pale); }
.scpb-areas-reassure__card { display: flex; align-items: center; gap: var(--space-xl); max-width: 1000px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: var(--radius-card); padding: var(--space-xl) var(--space-2xl); box-shadow: 0 22px 50px rgba(2,14,36,0.10); text-align: left; }
.scpb-areas-reassure__icon { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-pale); color: var(--accent-text); display: flex; align-items: center; justify-content: center; }
.scpb-areas-reassure__icon svg { width: 30px; height: 30px; }
.scpb-areas-reassure__body { flex: 1 1 auto; }
.scpb-areas-reassure__body .hzo-eyebrow { margin: 0 0 4px; }
/* element-qualified to beat the engine's .hzo-section h2:not(.hzo-eyebrow) margin-top (0,2,1). */
.scpb-areas-reassure h2.scpb-areas-reassure__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; line-height: 1.15; color: var(--brand); margin: 0 0 8px; }
.scpb-areas-reassure__text { margin: 0; color: var(--text-muted); line-height: 1.6; max-width: 58ch; }
.scpb-areas-reassure__cta { flex: 0 0 auto; }
/* Stack the callout below ~lg — the 3-part horizontal row is too cramped on
   tablet/phone (icon + text squeeze the CTA); centred stack reads cleanly. */
@media (max-width: 991px) {
  .scpb-areas-reassure__card { flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); padding: var(--space-xl); border-left: 1px solid var(--border); border-top: 5px solid var(--accent); }
  .scpb-areas-reassure__text { max-width: 60ch; }
  .scpb-areas-reassure__cta { width: 100%; }
}
@media (max-width: 480px) { .scpb-areas-reassure__cta .hzo-btn { width: 100%; } }

/* Final CTA background (layout from shared .scpb-page-final). */
.scpb-areas-final { background-image: linear-gradient(118deg, rgba(11,45,92,0.88) 0%, rgba(2,14,36,0.82) 100%), url('https://sprinklercontractorsfl.com/wp-content/uploads/2026/06/scpb-footer-lawn.webp'); }

/* ─────────────────────────────── Blog index ────────────────────────────────
   Posts page (templates/home.html). The card grid is filled by the infinite-
   scroll module in custom.js (WP REST API, no pagination). Card titles are
   element-qualified (h2.) to beat the engine's .hzo-section h2:not(.hzo-eyebrow)
   margin-top. */
.scpb-blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-top: var(--space-2xl); }
@media (min-width: 600px)  { .scpb-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .scpb-blog-grid { grid-template-columns: repeat(3, 1fr); } }
.scpb-blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 10px 30px rgba(2,14,36,0.06); transition: transform .25s ease, box-shadow .25s ease; }
.scpb-blog-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(2,14,36,0.13); }
.scpb-blog-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand-pale); }
.scpb-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.scpb-blog-card:hover .scpb-blog-card__media img { transform: scale(1.05); }
.scpb-blog-card__media--empty { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); }
.scpb-blog-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--space-lg); }
.scpb-blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.scpb-blog-card__cat { background: var(--accent-pale); color: var(--accent-text); font-weight: 700; border-radius: 999px; padding: 3px 10px; text-transform: uppercase; letter-spacing: .03em; font-size: 0.72rem; }
.scpb-blog-card__date { color: var(--text-muted); font-size: 0.82rem; }
.scpb-blog-card h2.scpb-blog-card__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; line-height: 1.25; margin: 0 0 var(--space-sm); }
.scpb-blog-card__title a { color: var(--brand); text-decoration: none; }
.scpb-blog-card__title a:hover { color: var(--accent-text); }
.scpb-blog-card__excerpt { margin: 0 0 var(--space-md); color: var(--text-muted); line-height: 1.6; font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.scpb-blog-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--brand); text-decoration: none; font-size: 0.92rem; }
.scpb-blog-card__more svg { width: 16px; height: 16px; transition: transform .2s ease; }
.scpb-blog-card:hover .scpb-blog-card__more svg { transform: translateX(3px); }
.scpb-blog-card__more:hover { color: var(--accent-text); }
.scpb-blog-sentinel { height: 1px; width: 100%; }
.scpb-blog-status { text-align: center; color: var(--text-muted); font-size: 0.95rem; margin-top: var(--space-2xl); min-height: 1.6em; }
.scpb-blog-status[data-loading="1"]::before { content: ""; display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: scpb-spin .7s linear infinite; vertical-align: -4px; margin-right: 8px; }
@keyframes scpb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .scpb-blog-card, .scpb-blog-card__media img, .scpb-blog-card__more svg { transition: none; }
  .scpb-blog-card:hover, .scpb-blog-card:hover .scpb-blog-card__media img { transform: none; }
  .scpb-blog-status[data-loading="1"]::before { animation: none; }
}
.scpb-blog-final { background-image: linear-gradient(118deg, rgba(11,45,92,0.88) 0%, rgba(2,14,36,0.82) 100%), url('https://sprinklercontractorsfl.com/wp-content/uploads/2026/06/scpb-footer-lawn.webp'); }

/* ─────────────────────────── Single blog post ──────────────────────────────
   Rich (blog-post.html, ACF body) + standard (single.html, post-content body)
   share this layer. Post title/date/featured-image are core blocks; the article
   body is either [acf_*] (.scpb-post-body) or wp:post-content (.scpb-post-content). */
.scpb-post-hero { background: var(--brand); color: #fff; padding: var(--space-3xl) var(--space-lg) var(--space-2xl); text-align: center; }
.scpb-post-hero__inner { max-width: 900px; margin: 0 auto; }
.scpb-post-hero__inner .hzo-eyebrow { color: var(--accent); margin: 0 0 var(--space-sm); }
.scpb-post-hero .wp-block-post-title { font-family: var(--font-heading); font-weight: 800; color: #fff; font-size: clamp(1.9rem, 4vw, 2.85rem); line-height: 1.15; margin: 0 0 var(--space-md); }
.scpb-post-hero .wp-block-post-date { color: rgba(255,255,255,0.72); font-size: 0.95rem; margin: 0; }

.scpb-post-main { max-width: 1160px; margin: 0 auto; padding: var(--space-2xl) var(--space-lg) var(--space-3xl); }
.scpb-post-main .wp-block-post-featured-image { margin: 0 0 var(--space-2xl); }
.scpb-post-main .wp-block-post-featured-image img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: 0 22px 50px rgba(2,14,36,0.16); display: block; }

/* Shared article column + typography */
.scpb-post-body, .scpb-post-content { max-width: 860px; margin: 0 auto; color: var(--text-body, #374151); font-size: 1.09rem; line-height: 1.78; }
.scpb-post-lead { margin: 0 0 var(--space-lg); }
.scpb-post-lead p { font-size: 1.2rem; line-height: 1.6; color: var(--brand); font-weight: 500; margin: 0 0 var(--space-md); }
.scpb-post-lead p:last-child { margin-bottom: 0; }
.scpb-post-body > p { margin: 0 0 var(--space-lg); }
.scpb-post-body a, .scpb-post-content a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.scpb-post-h2, .scpb-post-content h2 { font-family: var(--font-heading); font-weight: 800; font-size: 1.6rem; line-height: 1.2; color: var(--brand); margin: var(--space-2xl) 0 var(--space-md); }
.scpb-post-h3, .scpb-post-content h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--brand); margin: var(--space-xl) 0 var(--space-sm); }
.scpb-post-figure { margin: var(--space-2xl) 0; }
.scpb-post-figure img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: 0 16px 36px rgba(2,14,36,0.12); display: block; }
/* standard post-content blocks */
.scpb-post-content > p, .scpb-post-content > ul, .scpb-post-content > ol, .scpb-post-content > figure, .scpb-post-content > blockquote { margin: 0 0 var(--space-lg); }
.scpb-post-content ul, .scpb-post-content ol { padding-left: 1.4em; }
.scpb-post-content li { margin-bottom: 8px; }
.scpb-post-content img { max-width: 100%; height: auto; border-radius: var(--radius-card); }
.scpb-post-content blockquote { border-left: 4px solid var(--accent); padding-left: var(--space-lg); margin-left: 0; color: var(--brand); font-style: italic; }

/* ───────────────────────────── Thank-you page ──────────────────────────────
   Success hero (lime check) + what-happens-next steps (shared .scpb-steps) +
   NAP "reach us" card. */
.scpb-ty-hero { background: var(--brand); text-align: center; }
.scpb-ty-hero .hzo-eyebrow { color: var(--accent); }
.scpb-ty-hero .hzo-display { color: #fff; margin: var(--space-xs) 0 0; }
.scpb-ty-hero .hzo-subtitle { color: rgba(255,255,255,0.9); max-width: 560px; margin: var(--space-md) auto 0; }
.scpb-ty-check { width: 88px; height: 88px; margin: 0 auto var(--space-lg); border-radius: 50%; background: rgba(62,165,80,0.16); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.scpb-ty-check svg { width: 46px; height: 46px; }
.scpb-ty-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-xl); }
.scpb-ty-next { background: var(--brand-pale); }
.scpb-ty-reach { text-align: center; }
.scpb-ty-card { display: inline-block; text-align: left; margin-top: var(--space-md); background: var(--brand); border-radius: 15px; padding: var(--space-lg) var(--space-xl); }
.scpb-ty-card .hzo-footer-nap__name { color: #fff; }
.scpb-ty-card .hzo-footer-nap a { color: rgba(255,255,255,0.92); }
.scpb-ty-card .hzo-footer-nap__icon { color: var(--accent); }

/* ───────────────────────────── Reviews page ────────────────────────────────
   TrustIndex widget container + CTA background. */
.scpb-reviews-widget { max-width: 1100px; margin: var(--space-2xl) auto 0; min-height: 220px; }
/* Reviews teaser (home + town) — the TrustIndex widget is URL-restricted to /reviews/,
   so other pages show a star row + link to /reviews/ instead of an empty embed. */
.scpb-reviews-stars { display: flex; justify-content: center; gap: 6px; margin: var(--space-lg) auto 0; color: #f5a623; }
.scpb-reviews-stars svg { width: 30px; height: 30px; }
.scpb-home-reviews__teaser { max-width: 620px; margin: var(--space-md) auto 0; text-align: center; color: var(--text-muted); }
.scpb-home-reviews__cta { display: flex; justify-content: center; margin-top: var(--space-lg); }
.scpb-reviews-final { background-image: linear-gradient(118deg, rgba(11,45,92,0.88) 0%, rgba(2,14,36,0.82) 100%), url('https://sprinklercontractorsfl.com/wp-content/uploads/2026/06/scpb-footer-lawn.webp'); }

/* ───────────────────────────── FAQ page ────────────────────────────────────
   Hero + accordion + still-have-questions CTA (shared scaffold above). */
.scpb-faq { max-width: 840px; margin: var(--space-2xl) auto 0; }
.scpb-faq-final { background-image: linear-gradient(118deg, rgba(11,45,92,0.88) 0%, rgba(2,14,36,0.82) 100%), url('https://sprinklercontractorsfl.com/wp-content/uploads/2026/06/scpb-footer-lawn.webp'); }

/* ─────────────────────────── Contact page ──────────────────────────────────
   Two-column form + NAP/hours aside, then what-happens-next steps.
   SOURCE ORDER NOTE: the aside (hzo_nap / hzo_hours) is placed BEFORE the Fluent
   Form in markup on purpose — the engine runs do_shortcode once per core/html
   block, left-to-right, and the fluentform callback mutates the global
   shortcode_tags while it renders, so any engine shortcode AFTER it in the same
   block stops resolving. Rendering nap/hours first sidesteps that; visual order
   (form left/first) is restored with order + grid-column below. */
.scpb-contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: stretch; }
@media (min-width: 1024px) { .scpb-contact-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-2xl); } .scpb-contact-form { order: 0; grid-column: 1; } .scpb-contact-aside { order: 0; grid-column: 2; } }
.scpb-contact-form { order: -1; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-xl); box-shadow: 0 22px 50px rgba(2,14,36,0.10); }
.scpb-contact-form > .hzo-visual-h3 { margin: 0 0 var(--space-md); }
.scpb-contact-aside { background: var(--brand); color: #fff; border-radius: var(--radius-card); padding: var(--space-xl); }
.scpb-contact-aside .hzo-visual-h3 { color: #fff; margin: 0 0 var(--space-md); }
.scpb-contact-aside .hzo-nap a, .scpb-contact-aside .hzo-nap { color: rgba(255,255,255,0.92); }
.scpb-contact-aside .hzo-nap svg { color: var(--accent); }
.scpb-contact-aside__divider { border: 0; border-top: 1px solid rgba(255,255,255,0.16); margin: var(--space-lg) 0; }
.scpb-contact-aside .hzo-hours { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-md); margin: 0; }
.scpb-contact-aside .hzo-hours dt { font-weight: 700; color: #fff; }
.scpb-contact-aside .hzo-hours dd { margin: 0; color: rgba(255,255,255,0.78); text-align: right; }
.scpb-contact-aside__hours-label { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-heading); font-weight: 800; color: #fff; margin: 0 0 var(--space-sm); }
.scpb-contact-aside__hours-label svg { width: 18px; height: 18px; color: var(--accent); }
/* Quote page — reassurance "what you get" list inside the navy aside (reuses .scpb-contact-aside). */
.scpb-quote-points { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: var(--space-sm); }
.scpb-quote-points li { display: flex; gap: var(--space-sm); align-items: flex-start; color: rgba(255,255,255,0.9); font-size: 0.95rem; line-height: 1.5; }
.scpb-quote-points svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); margin-top: 3px; }
.scpb-contact-next { background: var(--brand-pale); }
.scpb-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-2xl); counter-reset: step; }
@media (min-width: 768px) { .scpb-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } }
.scpb-step { text-align: center; }
.scpb-step__num { width: 56px; height: 56px; margin: 0 auto var(--space-md); border-radius: 50%; background: var(--accent); color: var(--text-on-accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem; }
.scpb-step__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; margin: 0 0 6px; color: var(--brand); }
.scpb-step__desc { margin: 0; color: var(--text-muted); line-height: 1.6; }


/* Service-page benefit icons: per-page themed line-icons (CSS masks).
   Replaces the generic checkmark; each page-id maps its 6 bullets to fitting
   icons. Generated by scratchpad/gen_icons.py. */
:root {
  --svci-coverage: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
  --svci-controller: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.55a11%2011%200%200%201%2014.08%200%22%2F%3E%3Cpath%20d%3D%22M8.53%2016.11a6%206%200%200%201%206.95%200%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2220%22%20x2%3D%2212.01%22%20y2%3D%2220%22%2F%3E%3C%2Fsvg%3E");
  --svci-parts: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%200%201-4%200v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06a1.65%201.65%200%200%200%20.33-1.82%201.65%201.65%200%200%200-1.51-1H3a2%202%200%200%201%200-4h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06a1.65%201.65%200%200%200%201.82.33H9a1.65%201.65%200%200%200%201-1.51V3a2%202%200%200%201%204%200v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06a1.65%201.65%200%200%200-.33%201.82V9a1.65%201.65%200%200%200%201.51%201H21a2%202%200%200%201%200%204h-.09a1.65%201.65%200%200%200-1.51%201z%22%2F%3E%3C%2Fsvg%3E");
  --svci-soil: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%204%205v6c0%205%203.4%208.5%208%2010%204.6-1.5%208-5%208-10V5z%22%2F%3E%3C%2Fsvg%3E");
  --svci-savings: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%2223%22%2F%3E%3Cpath%20d%3D%22M17%205H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6%22%2F%3E%3C%2Fsvg%3E");
  --svci-warranty: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%204%205v6c0%205%203.4%208.5%208%2010%204.6-1.5%208-5%208-10V5z%22%2F%3E%3Cpolyline%20points%3D%229%2012%2011%2014%2015%2010%22%2F%3E%3C%2Fsvg%3E");
  --svci-inspect: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E");
  --svci-fast: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2213%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202%22%2F%3E%3C%2Fsvg%3E");
  --svci-head: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.7s6.5%206.8%206.5%2011.5a6.5%206.5%200%200%201-13%200C5.5%209.5%2012%202.7%2012%202.7z%22%2F%3E%3C%2Fsvg%3E");
  --svci-valve: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%2221%22%20x2%3D%224%22%20y2%3D%2214%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%2210%22%20x2%3D%224%22%20y2%3D%223%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%228%22%20x2%3D%2212%22%20y2%3D%223%22%2F%3E%3Cline%20x1%3D%2220%22%20y1%3D%2221%22%20x2%3D%2220%22%20y2%3D%2216%22%2F%3E%3Cline%20x1%3D%2220%22%20y1%3D%2212%22%20x2%3D%2220%22%20y2%3D%223%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2214%22%20x2%3D%227%22%20y2%3D%2214%22%2F%3E%3Cline%20x1%3D%229%22%20y1%3D%228%22%20x2%3D%2215%22%20y2%3D%228%22%2F%3E%3Cline%20x1%3D%2217%22%20y1%3D%2216%22%20x2%3D%2223%22%20y2%3D%2216%22%2F%3E%3C%2Fsvg%3E");
  --svci-leak: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2222%2012%2018%2012%2015%2021%209%203%206%2012%202%2012%22%2F%3E%3C%2Fsvg%3E");
  --svci-advice: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z%22%2F%3E%3C%2Fsvg%3E");
  --svci-schedule: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E");
  --svci-rain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2216%22%20y1%3D%2213%22%20x2%3D%2216%22%20y2%3D%2221%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%2213%22%20x2%3D%228%22%20y2%3D%2221%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2215%22%20x2%3D%2212%22%20y2%3D%2223%22%2F%3E%3Cpath%20d%3D%22M20%2016.58A5%205%200%200%200%2018%207h-1.26A8%208%200%201%200%204%2015.25%22%2F%3E%3C%2Fsvg%3E");
  --svci-lifespan: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2223%206%2013.5%2015.5%208.5%2010.5%201%2018%22%2F%3E%3Cpolyline%20points%3D%2217%206%2023%206%2023%2012%22%2F%3E%3C%2Fsvg%3E");
  --svci-permit: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpolyline%20points%3D%229%2014%2011%2016%2015%2011%22%2F%3E%3C%2Fsvg%3E");
  --svci-phased: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%202%207%2012%2012%2022%207%2012%202%22%2F%3E%3Cpolyline%20points%3D%222%2017%2012%2022%2022%2017%22%2F%3E%3Cpolyline%20points%3D%222%2012%2012%2017%2022%2012%22%2F%3E%3C%2Fsvg%3E");
  --svci-contact: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2018v-5a9%209%200%200%201%2018%200v5%22%2F%3E%3Cpath%20d%3D%22M21%2019a2%202%200%200%201-2%202h-1a2%202%200%200%201-2-2v-3a2%202%200%200%201%202-2h3z%22%2F%3E%3Cpath%20d%3D%22M3%2019a2%202%200%200%200%202%202h1a2%202%200%200%200%202-2v-3a2%202%200%200%200-2-2H3z%22%2F%3E%3C%2Fsvg%3E");
  --svci-cycle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2223%204%2023%2010%2017%2010%22%2F%3E%3Cpolyline%20points%3D%221%2020%201%2014%207%2014%22%2F%3E%3Cpath%20d%3D%22M3.51%209a9%209%200%200%201%2014.85-3.36L23%2010M1%2014l4.64%204.36A9%209%200%200%200%2020.49%2015%22%2F%3E%3C%2Fsvg%3E");
}
.scpb-svc-checks__icon::before { content: ''; display: block; width: 18px; height: 18px; background-color: var(--accent-text); -webkit-mask: var(--svci-warranty) center / contain no-repeat; mask: var(--svci-warranty) center / contain no-repeat; }
.page-id-443 .scpb-svc-checks > li:nth-child(1) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-coverage); mask-image: var(--svci-coverage); }
.page-id-443 .scpb-svc-checks > li:nth-child(2) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-controller); mask-image: var(--svci-controller); }
.page-id-443 .scpb-svc-checks > li:nth-child(3) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-parts); mask-image: var(--svci-parts); }
.page-id-443 .scpb-svc-checks > li:nth-child(4) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-soil); mask-image: var(--svci-soil); }
.page-id-443 .scpb-svc-checks > li:nth-child(5) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-savings); mask-image: var(--svci-savings); }
.page-id-443 .scpb-svc-checks > li:nth-child(6) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-warranty); mask-image: var(--svci-warranty); }
.page-id-444 .scpb-svc-checks > li:nth-child(1) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-inspect); mask-image: var(--svci-inspect); }
.page-id-444 .scpb-svc-checks > li:nth-child(2) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-fast); mask-image: var(--svci-fast); }
.page-id-444 .scpb-svc-checks > li:nth-child(3) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-head); mask-image: var(--svci-head); }
.page-id-444 .scpb-svc-checks > li:nth-child(4) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-valve); mask-image: var(--svci-valve); }
.page-id-444 .scpb-svc-checks > li:nth-child(5) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-leak); mask-image: var(--svci-leak); }
.page-id-444 .scpb-svc-checks > li:nth-child(6) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-warranty); mask-image: var(--svci-warranty); }
.page-id-445 .scpb-svc-checks > li:nth-child(1) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-cycle); mask-image: var(--svci-cycle); }
.page-id-445 .scpb-svc-checks > li:nth-child(2) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-parts); mask-image: var(--svci-parts); }
.page-id-445 .scpb-svc-checks > li:nth-child(3) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-coverage); mask-image: var(--svci-coverage); }
.page-id-445 .scpb-svc-checks > li:nth-child(4) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-controller); mask-image: var(--svci-controller); }
.page-id-445 .scpb-svc-checks > li:nth-child(5) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-soil); mask-image: var(--svci-soil); }
.page-id-445 .scpb-svc-checks > li:nth-child(6) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-advice); mask-image: var(--svci-advice); }
.page-id-446 .scpb-svc-checks > li:nth-child(1) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-inspect); mask-image: var(--svci-inspect); }
.page-id-446 .scpb-svc-checks > li:nth-child(2) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-coverage); mask-image: var(--svci-coverage); }
.page-id-446 .scpb-svc-checks > li:nth-child(3) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-schedule); mask-image: var(--svci-schedule); }
.page-id-446 .scpb-svc-checks > li:nth-child(4) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-savings); mask-image: var(--svci-savings); }
.page-id-446 .scpb-svc-checks > li:nth-child(5) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-rain); mask-image: var(--svci-rain); }
.page-id-446 .scpb-svc-checks > li:nth-child(6) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-lifespan); mask-image: var(--svci-lifespan); }
.page-id-447 .scpb-svc-checks > li:nth-child(1) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-coverage); mask-image: var(--svci-coverage); }
.page-id-447 .scpb-svc-checks > li:nth-child(2) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-parts); mask-image: var(--svci-parts); }
.page-id-447 .scpb-svc-checks > li:nth-child(3) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-controller); mask-image: var(--svci-controller); }
.page-id-447 .scpb-svc-checks > li:nth-child(4) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-permit); mask-image: var(--svci-permit); }
.page-id-447 .scpb-svc-checks > li:nth-child(5) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-phased); mask-image: var(--svci-phased); }
.page-id-447 .scpb-svc-checks > li:nth-child(6) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-savings); mask-image: var(--svci-savings); }
.page-id-448 .scpb-svc-checks > li:nth-child(1) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-fast); mask-image: var(--svci-fast); }
.page-id-448 .scpb-svc-checks > li:nth-child(2) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-inspect); mask-image: var(--svci-inspect); }
.page-id-448 .scpb-svc-checks > li:nth-child(3) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-schedule); mask-image: var(--svci-schedule); }
.page-id-448 .scpb-svc-checks > li:nth-child(4) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-leak); mask-image: var(--svci-leak); }
.page-id-448 .scpb-svc-checks > li:nth-child(5) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-contact); mask-image: var(--svci-contact); }
.page-id-448 .scpb-svc-checks > li:nth-child(6) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-warranty); mask-image: var(--svci-warranty); }
.page-id-449 .scpb-svc-checks > li:nth-child(1) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-cycle); mask-image: var(--svci-cycle); }
.page-id-449 .scpb-svc-checks > li:nth-child(2) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-coverage); mask-image: var(--svci-coverage); }
.page-id-449 .scpb-svc-checks > li:nth-child(3) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-savings); mask-image: var(--svci-savings); }
.page-id-449 .scpb-svc-checks > li:nth-child(4) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-controller); mask-image: var(--svci-controller); }
.page-id-449 .scpb-svc-checks > li:nth-child(5) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-rain); mask-image: var(--svci-rain); }
.page-id-449 .scpb-svc-checks > li:nth-child(6) .scpb-svc-checks__icon::before { -webkit-mask-image: var(--svci-phased); mask-image: var(--svci-phased); }
/* ───────────────────────────── 404 page ────────────────────────────────────
   Navy hero with big 404 code + popular-page link grid. */
.scpb-404-hero { background: var(--brand); text-align: center; }
.scpb-404-hero .hzo-eyebrow { color: var(--accent); }
.scpb-404-hero .hzo-display { color: #fff; }
.scpb-404-hero .hzo-subtitle { color: rgba(255,255,255,0.9); max-width: 560px; margin: var(--space-md) auto 0; }
.scpb-404__code { font-family: var(--font-heading); font-weight: 800; font-size: clamp(5rem, 18vw, 11rem); line-height: 0.9; color: var(--accent); letter-spacing: -0.02em; margin: 0 0 var(--space-sm); }
.scpb-404__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-xl); }
.scpb-404-links { background: var(--brand-pale); }
.scpb-404-links__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin: var(--space-xl) auto 0; max-width: 760px; }
@media (min-width: 600px) { .scpb-404-links__grid { grid-template-columns: repeat(3, 1fr); } }
.scpb-404-link { display: block; background: #fff; border: 1px solid var(--border); border-radius: 15px; padding: var(--space-lg); text-align: center; text-decoration: none; color: var(--brand); font-family: var(--font-heading); font-weight: 700; box-shadow: 0 6px 18px rgba(2,14,36,0.06); transition: transform .2s ease, box-shadow .2s ease, color .2s ease; }
.scpb-404-link:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(2,14,36,0.12); color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .scpb-404-link { transition: none; } .scpb-404-link:hover { transform: none; } }

/* ───────────────────────────── Town / Location page ────────────────────────
   Enriched: hero + trust strip + stats band + icon-led alternating photo-splits
   + trust chips + mid-page CTA + FAQ + GMB map & local links. Town Page Fields NEW. */
.scpb-town .scpb-page-hero { min-height: clamp(440px, 56vh, 580px); }
.scpb-town-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-xl); }

/* Trust stats band */
.scpb-town-stats { background: var(--brand-pale); }
.scpb-town-stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-2xl); }
@media (min-width: 900px) { .scpb-town-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.scpb-town-stat { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: var(--space-xl) var(--space-lg); text-align: center; box-shadow: 0 10px 30px rgba(2,14,36,0.06); }
.scpb-town-stat__num { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 2.1rem; line-height: 1; color: var(--accent-text); }
.scpb-town-stat__label { display: block; margin-top: 8px; color: var(--text-muted); font-size: 0.9rem; }

/* Photo-split sections (icon-led, alternating, big shadowed images) */
/* Every grey town section carries a subtle halftone-dot texture overlay. */
.scpb-town-alt { background: var(--brand-pale); position: relative; z-index: 0; }
.scpb-town-alt::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('https://sprinklercontractorsfl.com/wp-content/uploads/2026/07/scpb-town-grey.webp') center / cover no-repeat; opacity: 0.9; }
.scpb-town-split__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) { .scpb-town-split__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } .scpb-town-split--reverse .scpb-town-split__media { order: -1; } }
.scpb-town-split__ico { width: 54px; height: 54px; border-radius: 15px; background: var(--accent-pale); color: var(--accent-text); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); }
.scpb-town-split__ico svg { width: 27px; height: 27px; }
.scpb-town-split__text .hzo-eyebrow { color: var(--accent-text); }
.scpb-town-split__text .hzo-lead { margin-top: var(--space-md); }
.scpb-town-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 60px rgba(2,14,36,0.20); display: block; }
.scpb-town-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.scpb-town-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-pale); color: var(--accent-text); border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; font-weight: 700; }
.scpb-town-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Mid-page CTA band — green-lawn photo under a navy scrim */
.scpb-town-midcta { background-color: var(--brand-deep); background-image: linear-gradient(118deg, rgba(11,45,92,0.86) 0%, rgba(2,14,36,0.82) 100%), url('https://sprinklercontractorsfl.com/wp-content/uploads/2026/07/scpb-town-cta.webp'); background-size: cover; background-position: center; text-align: center; }
.scpb-town-midcta__body { max-width: 620px; margin: var(--space-md) auto 0; }
.scpb-town-midcta__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-xl); }

/* ── Reusable navy "abstract" background (sprinkler-spray webp) for blue sections ── */
.scpb-abstract { background-color: var(--brand-deep); background-image: linear-gradient(118deg, rgba(11,45,92,0.58) 0%, rgba(2,14,36,0.66) 100%), url('https://sprinklercontractorsfl.com/wp-content/uploads/2026/06/scpb-abstract-navy.webp'); background-size: cover; background-position: center; }

/* ── Reusable grey "abstract overlay" (grass + sprinkler-spray webp) for ONE pale
   section per page. Sits as a soft, low-opacity overlay over the section's existing
   pale background; content stays above it. Apply to a single grey section per page. */
.scpb-grey-abstract { position: relative; z-index: 0; }
.scpb-grey-abstract::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url('https://sprinklercontractorsfl.com/wp-content/uploads/2026/06/scpb-grey-overlay.webp'); background-repeat: no-repeat; background-position: bottom center; background-size: cover; opacity: 0.6; }

/* ── Reviews band (directly under hero) ── */
.scpb-town-reviews__intro { max-width: 620px; margin: var(--space-md) auto 0; color: var(--text-muted); }
.scpb-town-reviews .scpb-reviews-widget { margin-top: var(--space-2xl); }
.scpb-town-reviews__cta { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-2xl); }

/* ── Split-section inline CTA ── */
.scpb-town-split__cta { margin-top: var(--space-lg); }

/* ── Free-estimate form section (navy abstract + white form card) ── */
#estimate { scroll-margin-top: 96px; }
.scpb-town-form__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center; }
@media (min-width: 960px) { .scpb-town-form__grid { grid-template-columns: 1.02fr 0.98fr; gap: var(--space-3xl); } }
.scpb-town-form__lead { max-width: 520px; margin-top: var(--space-md); }
.scpb-town-form__points { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.scpb-town-form__points li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.92); font-weight: 600; }
.scpb-town-form__points svg { width: 20px; height: 20px; color: var(--accent-hover-on-dark, #5BBE70); flex: 0 0 auto; }
.scpb-town-form__card { background: #fff; border-radius: 20px; padding: var(--space-2xl); box-shadow: 0 40px 80px rgba(2,14,36,0.35); }
.scpb-town-form__card .scpb-town-form__card-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--brand); margin: 0 0 var(--space-lg); }
@media (max-width: 600px) { .scpb-town-form__card { padding: var(--space-xl); } }

.scpb-town-faq { max-width: 840px; margin: var(--space-2xl) auto 0; }

/* ── Combined "Serving [location]" — town map + local links + other services ── */
.scpb-town-local__intro { max-width: 620px; margin: var(--space-md) auto 0; color: var(--text-muted); }
.scpb-town-local__sub { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--brand); margin: 0 0 var(--space-md); }

/* top row: map + resource links */
.scpb-town-local__top { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: stretch; margin-top: var(--space-2xl); }
@media (min-width: 900px) { .scpb-town-local__top { grid-template-columns: 1.15fr 0.85fr; } }
.scpb-town-local__map { border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px rgba(2,14,36,0.16); background: #fff; min-height: 360px; }
.scpb-town-local__map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }

/* resource links — clickable cards w/ icon badge + external arrow */
.scpb-town-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.scpb-town-link { position: relative; display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 13px 16px; color: var(--brand); font-weight: 600; box-shadow: 0 4px 14px rgba(2,14,36,0.05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.scpb-town-link:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(2,14,36,0.12); border-color: rgba(62,165,80,0.45); }
.scpb-town-link__src { display: none; }
.scpb-town-link__hit { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.scpb-town-link:focus-within { border-color: rgba(62,165,80,0.55); box-shadow: 0 0 0 3px rgba(62,165,80,0.25); }
.scpb-town-link__ico { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--accent-pale); color: var(--accent-text); }
.scpb-town-link__ico svg { width: 21px; height: 21px; }
.scpb-town-link__txt { flex: 1 1 auto; line-height: 1.3; }
.scpb-town-link__arrow { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent-text); opacity: .5; transition: transform .2s ease, opacity .2s ease; }
.scpb-town-link:hover .scpb-town-link__arrow { opacity: 1; transform: translate(2px, -2px); }

/* other services — restyle the engine [hzo_town_services] grid to clickable cards */
.scpb-town-local__services { margin-top: var(--space-2xl); }
.scpb-town-local__services .hzo-tos-section { padding: 0; background: transparent; }
.scpb-town-local__services .hzo-tos-section .hzo-container { max-width: none; padding-left: 0; padding-right: 0; }
.scpb-town-local__services .hzo-tos__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .scpb-town-local__services .hzo-tos__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .scpb-town-local__services .hzo-tos__grid { grid-template-columns: repeat(3, 1fr); } }
.scpb-town-local__services .hzo-tos__card { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--brand); font-weight: 600; line-height: 1.35; box-shadow: 0 4px 14px rgba(2,14,36,0.05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.scpb-town-local__services .hzo-tos__card .scpb-tos-ico { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-pale); color: var(--accent-text); }
.scpb-town-local__services .hzo-tos__card .scpb-tos-ico svg { width: 22px; height: 22px; }
.scpb-town-local__services .hzo-tos__card::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 18px; height: 18px; background-color: var(--accent-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; opacity: .5; transition: transform .2s ease, opacity .2s ease; }
.scpb-town-local__services .hzo-tos__card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(2,14,36,0.12); border-color: rgba(62,165,80,0.45); }
.scpb-town-local__services .hzo-tos__card:hover::after { opacity: 1; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .scpb-town-link, .scpb-town-link__arrow, .scpb-town-local__services .hzo-tos__card, .scpb-town-local__services .hzo-tos__card::after { transition: none; } .scpb-town-link:hover, .scpb-town-local__services .hzo-tos__card:hover { transform: none; } }