/* ─────────────────────────────────────────────────────────────────
   CRO Block 13 — Service Area / Map
   Token-only. Mobile-first. Self-contained.
   ───────────────────────────────────────────────────────────────── */

.block-cro-block-13 {
  background: var(--scheme-bg);
  color: var(--scheme-fg);
  font-family: var(--ds-font-body);
}
.block-cro-block-13 .container { max-width: var(--ds-container-xl); }

/* ── Container shell ──
   WAVE3-F08 (2026-05-08) — Pattern-B INVERTED local rebind: this is a
   light card (white --scheme-card-bg) that must remain LIGHT regardless
   of outer section scheme. On .scheme-ink/.scheme-steel/.scheme-accent/
   .scheme-trust the global guardrail flips --scheme-fg → #fff and
   --ds-ink → white inside this WHITE card, so descendants like
   `.section-title-dark`, `.selector-title-dark`, `.city-name-dark`,
   `.stat-num-block`, `.feature-item-block`, `.sidebar-title-block`,
   `.service-pill-card` (all reading var(--scheme-fg)) render white-on-white.
   Browser audit caught exactly this defect on .scheme-ink. Pin
   --scheme-fg* AND --ds-ink* locally to dark literals so the card stays
   self-contained. */
.block-cro-block-13 .service-area-container-dark {
  --scheme-fg: #0e0f0c;
  --scheme-fg-soft: #4a4842;
  --scheme-fg-mute: #76736a;
  --ds-ink: #0e0f0c;
  --ds-ink-soft: #4a4842;
  --ds-ink-mute: #76736a;
  --scheme-card-bg: #fff;
  --scheme-rule: rgba(14,15,12,.08);
  background: #fff;
  color: #0e0f0c;
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
  padding: var(--ds-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
}
@media (min-width: 768px) {
  .block-cro-block-13 .service-area-container-dark { padding: var(--ds-space-7); }
}

/* ── Section Header ── */
.block-cro-block-13 .section-header-dark {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--ds-space-3);
}
.block-cro-block-13 .live-activity-badge-dark {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  padding: var(--ds-space-1) var(--ds-space-3);
  background: color-mix(in srgb, var(--ds-trust) 18%, transparent);
  color: var(--ds-trust);
  border: 1px solid color-mix(in srgb, var(--ds-trust) 35%, transparent);
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
/* WAVE3-F08 (2026-05-08): the scheme-* override below was designed for
   when the card surface itself rendered dark on dark schemes. The
   Pattern-B inverted rebind on .service-area-container-dark (above) now
   forces the card to stay white on every scheme, so #b6cc97 (moss-light)
   would render light-moss on white (~1.7:1, fails). Removed override —
   the base rule color: var(--ds-trust) on the tinted-trust pill on white
   computes ~5.9:1, passes AA on every scheme. */
.block-cro-block-13 .pulse-dot-dark {
  width: 8px; height: 8px;
  background: var(--ds-trust);
  border-radius: 50%;
  animation: cro13-pulse 1.8s ease-in-out infinite;
}
@keyframes cro13-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}
.block-cro-block-13 .section-title-dark {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-lg);
  margin: 0;
  color: var(--scheme-fg);
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1;
}
.block-cro-block-13 .counter-inline-dark {
  display: inline-flex; align-items: baseline; gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-lg);
  color: var(--scheme-fg-soft);
  flex-wrap: wrap; justify-content: center;
}
.block-cro-block-13 .counter-number-dark,
.block-cro-block-13 .counter-suffix-dark {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-md);
  color: var(--ds-cta);
}

/* ── City Selector ── */
.block-cro-block-13 .city-selector-dark {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-5);
}
.scheme-paper .block-cro-block-13 .city-selector-dark,
.scheme-paper-2 .block-cro-block-13 .city-selector-dark,
.scheme-cream .block-cro-block-13 .city-selector-dark,
.scheme-sand .block-cro-block-13 .city-selector-dark {
  background: rgba(14,15,12,.04);
}
.block-cro-block-13 .selector-header-dark {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-4);
}
.block-cro-block-13 .selector-title-dark {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  margin: 0;
  color: var(--scheme-fg);
  text-transform: uppercase;
}
.block-cro-block-13 .selector-coverage-badge-dark {
  display: inline-flex; align-items: center;
  padding: var(--ds-space-1) var(--ds-space-3);
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

.block-cro-block-13 .city-grid-dark,
.block-cro-block-13 .city-grid-expanded-dark {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-2);
}
@media (min-width: 600px) {
  .block-cro-block-13 .city-grid-dark,
  .block-cro-block-13 .city-grid-expanded-dark { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .block-cro-block-13 .city-grid-dark,
  .block-cro-block-13 .city-grid-expanded-dark { grid-template-columns: repeat(3, 1fr); }
}

.block-cro-block-13 .city-card-dark {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
  padding: var(--ds-space-3);
  background: var(--scheme-card-bg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  transition: border-color var(--ds-duration-fast),
              transform var(--ds-duration-fast),
              background var(--ds-duration-fast);
}
.block-cro-block-13 .city-card-dark:hover {
  border-color: var(--ds-cta);
  transform: translateY(-2px);
}
.block-cro-block-13 .city-card-dark.active {
  border-color: var(--ds-cta);
  background: color-mix(in srgb, var(--ds-cta) 12%, transparent);
}
.block-cro-block-13 .city-name-dark {
  font-weight: 700;
  font-size: var(--ds-fs-body-sm);
  color: var(--scheme-fg);
  margin-bottom: var(--ds-space-1);
}
.block-cro-block-13 .city-region-dark {
  font-size: var(--ds-fs-eyebrow);
  color: var(--scheme-fg-mute);
  font-family: var(--ds-font-mono);
}
.block-cro-block-13 .city-indicator-dark {
  position: absolute;
  top: var(--ds-space-2); right: var(--ds-space-2);
  font-size: 14px;
}
.block-cro-block-13 .expand-cities-btn-dark {
  display: flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  width: 100%;
  margin-top: var(--ds-space-3);
  padding: var(--ds-space-3);
  background: transparent;
  border: 1px dashed var(--scheme-rule);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-cta);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--ds-duration-fast), background var(--ds-duration-fast);
}
.block-cro-block-13 .expand-cities-btn-dark:hover {
  border-color: var(--ds-cta);
  background: color-mix(in srgb, var(--ds-cta) 6%, transparent);
}
.block-cro-block-13 .city-grid-expanded-dark { margin-top: var(--ds-space-3); }

/* ── Response Panel ──
   WAVE3-F08 (2026-05-08) — Pattern-B local rebind: this is a self-styled
   DARK callout (orange-rust gradient bg) that ships inside an arbitrary
   parent scheme. Pin --scheme-fg* AND --ds-ink* to white-equivalents
   locally so descendants reading either token render as white over the
   gradient regardless of outer scheme. Was using var(--scheme-fg, #fff)
   fallback — fragile because --scheme-fg is always set on an outer
   scheme so the fallback never fires. Browser audit caught the white-text
   descendants here rendering ink-on-orange (≈4.5:1 lucky on paper, but
   inconsistent across schemes). */
.block-cro-block-13 .response-panel-dark {
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255,255,255,.85);
  --scheme-fg-mute: rgba(255,255,255,.7);
  --ds-ink: #fff;
  --ds-ink-soft: rgba(255,255,255,.85);
  --ds-ink-mute: rgba(255,255,255,.7);
  background: linear-gradient(135deg, var(--ds-cta) 0%, var(--ds-cta-dk) 100%);
  color: #fff;
  border-radius: var(--ds-radius);
  padding: var(--ds-space-5);
  display: flex; flex-direction: column; gap: var(--ds-space-4);
}
.block-cro-block-13 .response-header-dark {
  display: flex; align-items: center; gap: var(--ds-space-3);
  font-size: var(--ds-fs-body-lg);
  font-weight: 700;
}
.block-cro-block-13 .check-large-dark {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.block-cro-block-13 .check-large-dark svg { width: 20px; height: 20px; color: #fff; }
.block-cro-block-13 .service-icons-dark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-space-3);
}
@media (min-width: 600px) { .block-cro-block-13 .service-icons-dark { grid-template-columns: repeat(6, 1fr); } }
.block-cro-block-13 .service-icon-item-dark {
  display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-2);
  text-align: center;
}
.block-cro-block-13 .icon-sm-dark {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.block-cro-block-13 .icon-sm-dark svg,
.block-cro-block-13 .icon-sm-dark .icon-preset svg,
.block-cro-block-13 .icon-sm-dark .icon-svg svg { width: 18px; height: 18px; }
.block-cro-block-13 .label-xs-dark {
  font-size: var(--ds-fs-eyebrow);
  font-family: var(--ds-font-mono);
  color: rgba(255,255,255,.85);
}
.block-cro-block-13 .info-pills-grid-dark {
  display: flex; flex-wrap: wrap; gap: var(--ds-space-2);
}
.block-cro-block-13 .info-pill-dark {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: rgba(255,255,255,.18);
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  color: #fff;
}
.block-cro-block-13 .info-pill-dark .pill-icon-dark { width: 14px; height: 14px; display: inline-flex; }
.block-cro-block-13 .info-pill-dark .pill-icon-dark svg { width: 14px; height: 14px; }
.block-cro-block-13 .testimonial-badge-dark {
  background: rgba(255,255,255,.12);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-sm);
  border-left: 3px solid var(--scheme-fg, #fff);
}
.block-cro-block-13 .testimonial-quote-dark {
  display: block;
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-size: var(--ds-fs-body);
  margin-bottom: var(--ds-space-1);
}
.block-cro-block-13 .testimonial-author-dark {
  display: block;
  font-size: var(--ds-fs-eyebrow);
  color: rgba(255,255,255,.8);
}
/* WAVE3-F08 (2026-05-08): change color to --ds-cta-dk so the orange-on-white
   CTA reads at ~4.5:1 (was ~3.26:1 with --ds-cta, failing AA body for the
   16 px / 700w label which doesn't qualify as AA-Large). Pin background
   to literal #fff so the local Pattern-B rebind on .response-panel-dark
   (which set --ds-ink: #fff defensively) doesn't bleed through any
   --scheme-card-bg fallback path. */
.block-cro-block-13 .response-cta-dark {
  display: inline-flex; align-self: flex-start; align-items: center; gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-5);
  background: #fff; color: var(--ds-cta-dk, #b94e12);
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--ds-fs-body-sm);
  transition: transform var(--ds-duration-fast);
}
.block-cro-block-13 .response-cta-dark:hover { transform: translateY(-2px); }

/* ── Map Section (2 columns: map | sidebar) ── */
.block-cro-block-13 .map-section-dark {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-5);
}
@media (min-width: 992px) {
  .block-cro-block-13 .map-section-dark { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* Map Container */
.block-cro-block-13 .map-container-dark {
  position: relative;
  border-radius: var(--ds-radius);
  overflow: hidden;
  background: var(--ds-steel);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--scheme-rule);
  box-shadow: var(--ds-shadow-md);
}
@media (min-width: 992px) { .block-cro-block-13 .map-container-dark { aspect-ratio: auto; min-height: 540px; } }

.block-cro-block-13 .map-static-wrapper-dark,
.block-cro-block-13 .map-interactive-wrapper-dark {
  position: absolute; inset: 0;
}
.block-cro-block-13 .map-image-dark {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.block-cro-block-13 .cro-map-iframe {
  width: 100%; height: 100%;
  border: none; display: block;
}

.block-cro-block-13 .map-toggle-btn-dark {
  position: absolute;
  top: var(--ds-space-3); right: var(--ds-space-3);
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: rgba(14,15,12,.8);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  font-size: var(--ds-fs-eyebrow);
  font-family: var(--ds-font-mono);
  font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  z-index: 10;
  backdrop-filter: blur(6px);
  transition: background var(--ds-duration-fast);
}
.block-cro-block-13 .map-toggle-btn-dark:hover { background: var(--ds-cta-aa, var(--ds-cta-dk)); border-color: var(--ds-cta); }
.block-cro-block-13 .map-toggle-btn-dark .toggle-icon { width: 16px; height: 16px; display: inline-flex; }
.block-cro-block-13 .map-toggle-btn-dark .toggle-icon svg { width: 16px; height: 16px; }

.block-cro-block-13 .coverage-ring-overlay-dark {
  position: absolute;
  bottom: var(--ds-space-3); left: var(--ds-space-3);
  width: 88px; height: 88px;
  z-index: 5;
  pointer-events: none;
}
.block-cro-block-13 .ring-svg-dark { width: 100%; height: 100%; transform: rotate(-90deg); }
.block-cro-block-13 .ring-bg-dark { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 6; }
.block-cro-block-13 .ring-progress-dark {
  fill: none; stroke: var(--ds-cta); stroke-width: 6;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 50.24;
  stroke-linecap: round;
}
.block-cro-block-13 .ring-percentage-dark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  color: #fff;
}
.block-cro-block-13 .ring-label-dark {
  position: absolute; bottom: -18px; left: 0; right: 0;
  text-align: center;
  font-size: var(--ds-fs-eyebrow);
  font-family: var(--ds-font-mono);
  color: rgba(255,255,255,.85);
  font-weight: 700;
}

/* Branded loader */
.block-cro-block-13 .cro-map-branded-loader {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ds-space-3);
  background: linear-gradient(135deg, var(--loader-bg-start, var(--ds-steel)) 0%, var(--loader-bg-end, var(--ds-ink)) 100%);
  z-index: 8;
  color: #fff;
  transition: opacity var(--ds-duration-slow);
}
.block-cro-block-13 .cro-map-branded-loader.hidden { opacity: 0; pointer-events: none; }
.block-cro-block-13 .cro-map-loader-logo img { width: 64px; height: auto; }
.block-cro-block-13 .cro-map-loader-brand {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-md);
  text-transform: uppercase;
}
.block-cro-block-13 .cro-map-loader-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--ds-cta);
  border-radius: 50%;
  animation: cro13-spin 0.9s linear infinite;
}
@keyframes cro13-spin { to { transform: rotate(360deg); } }
.block-cro-block-13 .cro-map-loader-text {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.85);
}
.block-cro-block-13 .map-placeholder-dark {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-5);
  text-align: center;
  color: var(--scheme-fg-mute);
}
.block-cro-block-13 .upload-icon, .block-cro-block-13 .embed-icon { color: var(--ds-cta); }
.block-cro-block-13 .upload-icon svg, .block-cro-block-13 .embed-icon svg { width: 48px; height: 48px; }

/* ── Sidebar Blocks ── */
.block-cro-block-13 .sidebar-blocks-dark {
  display: flex; flex-direction: column;
  gap: var(--ds-space-4);
}
.block-cro-block-13 .sidebar-block-dark {
  background: var(--scheme-card-bg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-4);
}

/* Trust Badges */
.block-cro-block-13 .trust-badges-block {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-2);
}
.block-cro-block-13 .trust-badge-item {
  display: flex; align-items: center; gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: color-mix(in srgb, var(--ds-trust) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-trust) 30%, transparent);
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  color: var(--scheme-fg);
  font-weight: 700;
  font-size: var(--ds-fs-body-sm);
  transition: border-color var(--ds-duration-fast), transform var(--ds-duration-fast);
}
.block-cro-block-13 .trust-badge-item:hover {
  border-color: var(--ds-trust);
  transform: translateY(-1px);
}
.block-cro-block-13 .trust-badge-item .badge-icon-item {
  width: 18px; height: 18px;
  display: inline-flex; flex-shrink: 0;
  color: var(--ds-trust);
}
.block-cro-block-13 .trust-badge-item .badge-icon-item svg { width: 100%; height: 100%; }
.block-cro-block-13 .trust-badge-item .badge-check-item {
  margin-left: auto;
  width: 14px; height: 14px;
  color: var(--ds-trust);
  display: inline-flex;
}
.block-cro-block-13 .trust-badge-item .badge-check-item svg { width: 100%; height: 100%; }
/* WAVE3-F08 (2026-05-08): no longer needed — .service-area-container-dark
   Pattern-B-INVERTED locks --scheme-fg to dark on every scheme, so the
   base rule above (color: var(--scheme-fg)) renders dark-on-trust-tint
   correctly on every outer scheme. Override left commented for history.
.block-cro-block-13 .scheme-ink .trust-badge-item,
.scheme-ink .block-cro-block-13 .trust-badge-item,
.scheme-steel .block-cro-block-13 .trust-badge-item { color: #fff; }
*/

/* Activity Ticker */
.block-cro-block-13 .activity-ticker-block-improved { overflow: hidden; }
.block-cro-block-13 .ticker-header-improved {
  display: flex; align-items: center; gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--scheme-fg-soft);
}
.block-cro-block-13 .ticker-icon { width: 14px; height: 14px; color: var(--ds-trust); display: inline-flex; }
.block-cro-block-13 .ticker-icon svg { width: 100%; height: 100%; }
.block-cro-block-13 .ticker-wrapper-improved {
  position: relative; overflow: hidden;
  height: 28px;
}
.block-cro-block-13 .ticker-fade-left,
.block-cro-block-13 .ticker-fade-right {
  position: absolute; top: 0; bottom: 0; width: 30px;
  z-index: 2; pointer-events: none;
}
.block-cro-block-13 .ticker-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--scheme-card-bg), transparent);
}
.block-cro-block-13 .ticker-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--scheme-card-bg), transparent);
}
.block-cro-block-13 .ticker-track-improved {
  display: flex; gap: var(--ds-space-5);
  white-space: nowrap;
  animation: cro13-tick 26s linear infinite;
}
@keyframes cro13-tick {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.block-cro-block-13 .ticker-item-improved {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  font-size: var(--ds-fs-body-sm);
  color: var(--scheme-fg-soft);
}
.block-cro-block-13 .item-emoji { font-size: 16px; }

/* Stats / Metrics */
.block-cro-block-13 .stats-block {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-space-3);
  text-align: center;
}
.block-cro-block-13 .stat-item-block {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.block-cro-block-13 .stat-icon-block {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ds-cta);
  margin-bottom: var(--ds-space-1);
}
.block-cro-block-13 .stat-icon-block svg { width: 24px; height: 24px; }
.block-cro-block-13 .stat-num-block {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  color: var(--scheme-fg);
  line-height: 1;
}
.block-cro-block-13 .stat-lbl-block {
  font-size: var(--ds-fs-eyebrow);
  font-family: var(--ds-font-mono);
  color: var(--scheme-fg-mute);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Feature Badges */
.block-cro-block-13 .features-block {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-space-2);
}
.block-cro-block-13 .feature-item-block {
  display: flex; align-items: center; gap: var(--ds-space-2);
  padding: var(--ds-space-2);
  background: color-mix(in srgb, var(--ds-cta) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-cta) 30%, transparent);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  font-family: var(--ds-font-mono);
  color: var(--scheme-fg);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.block-cro-block-13 .feat-icon-block {
  width: 14px; height: 14px;
  color: var(--ds-cta);
  display: inline-flex; flex-shrink: 0;
}
.block-cro-block-13 .feat-icon-block svg { width: 100%; height: 100%; }

/* Service pills */
.block-cro-block-13 .sidebar-title-block {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  text-transform: uppercase;
  margin: 0 0 var(--ds-space-3) 0;
  color: var(--scheme-fg);
}
.block-cro-block-13 .service-pills-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-2);
}
.block-cro-block-13 .service-pill-card {
  display: flex; align-items: center; gap: var(--ds-space-2);
  padding: var(--ds-space-3);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  color: var(--scheme-fg);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  transition: border-color var(--ds-duration-fast), background var(--ds-duration-fast), transform var(--ds-duration-fast);
}
.scheme-paper .block-cro-block-13 .service-pill-card,
.scheme-paper-2 .block-cro-block-13 .service-pill-card,
.scheme-cream .block-cro-block-13 .service-pill-card,
.scheme-sand .block-cro-block-13 .service-pill-card {
  background: rgba(14,15,12,.04);
}
.block-cro-block-13 .service-pill-card:hover {
  border-color: var(--ds-cta);
  transform: translateX(2px);
}
.block-cro-block-13 .service-pill-card .pill-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--ds-cta);
  display: inline-flex;
}
.block-cro-block-13 .service-pill-card .pill-icon svg { width: 100%; height: 100%; }
.block-cro-block-13 .service-pill-card .pill-text { flex: 1; }
.block-cro-block-13 .service-pill-card .pill-arrow {
  margin-left: auto;
  color: var(--scheme-fg-mute);
  transition: transform var(--ds-duration-fast), color var(--ds-duration-fast);
}
.block-cro-block-13 .service-pill-card:hover .pill-arrow { color: var(--ds-cta); transform: translateX(2px); }

/* Proof metrics */
.block-cro-block-13 .metrics-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-3);
  text-align: center;
}
.block-cro-block-13 .metric-box-block {
  display: flex; flex-direction: column; gap: 2px;
}
.block-cro-block-13 .metric-num-block {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-md);
  color: var(--ds-cta);
  line-height: 1;
}
.block-cro-block-13 .metric-label-block {
  font-size: var(--ds-fs-eyebrow);
  font-family: var(--ds-font-mono);
  color: var(--scheme-fg-mute);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Testimonial slides */
.block-cro-block-13 .testimonial-block-fixed { min-height: 140px; }
.block-cro-block-13 .testimonial-header-fixed {
  display: flex; align-items: center; gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--scheme-fg-soft);
}
.block-cro-block-13 .quote-icon-fixed {
  font-family: var(--ds-font-serif);
  font-size: 1.5rem; line-height: 0.5;
  color: var(--ds-cta);
}
.block-cro-block-13 .testimonial-content-wrapper {
  position: relative;
  min-height: 80px;
}
.block-cro-block-13 .testimonial-slide-fixed {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity var(--ds-duration) var(--ds-ease-out);
}
.block-cro-block-13 .testimonial-slide-fixed.active { opacity: 1; pointer-events: auto; position: relative; }
.block-cro-block-13 .quote-text-fixed {
  margin: 0 0 var(--ds-space-1) 0;
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-size: var(--ds-fs-body);
  color: var(--scheme-fg);
  line-height: 1.5;
}
.block-cro-block-13 .quote-author-fixed {
  font-size: var(--ds-fs-eyebrow);
  color: var(--scheme-fg-mute);
}
.block-cro-block-13 .rotation-dots-fixed {
  display: flex; gap: var(--ds-space-1);
  margin-top: var(--ds-space-3);
}
.block-cro-block-13 .dot-fixed {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--scheme-rule);
  transition: background var(--ds-duration-fast), width var(--ds-duration-fast);
  cursor: pointer;
}
.block-cro-block-13 .dot-fixed.active { background: var(--ds-cta-aa, var(--ds-cta-dk)); width: 18px; border-radius: 999px; }

/* Global icon containment fallback */
.block-cro-block-13 .icon-preset,
.block-cro-block-13 .icon-svg,
.block-cro-block-13 .icon-custom {
  display: inline-flex;
  width: 1.25rem; height: 1.25rem;
  line-height: 0;
}
.block-cro-block-13 .icon-preset > svg,
.block-cro-block-13 .icon-svg > svg,
.block-cro-block-13 .icon-custom > img { width: 100%; height: 100%; }

/* ────────────────────────────────────────────────────────────────
   W2-A19 mobile overflow fix — cro-block-13 map view leaked
   1572 px past the 360-px viewport (5.4× horizontal overflow).
   Root cause: the absolutely-positioned `.map-static-wrapper-dark`
   contains an 1890 px-wide map image; the grid track default
   `min-width: auto` lets the container push wider than its 1fr
   slot. Fix: `min-width: 0` on the track item; clip overflow at
   every wrapping ancestor; constrain inner media to 100 % of the
   column. See: dev-files/audits-2026-05-04/team-07-visual-mobile.md (#1)
   ──────────────────────────────────────────────────────────── */
.block-cro-block-13 .map-section-dark,
.block-cro-block-13 .map-container-dark,
.block-cro-block-13 .service-area-container-dark,
.block-cro-block-13 .row,
.block-cro-block-13 .col-lg-12 {
  overflow-x: hidden;
}
.block-cro-block-13 .map-section-dark {
  min-width: 0;
  /* Override the section's `grid-template-columns: 1fr` so the
     mobile track shrinks below the 1890 px image's intrinsic
     width. `1fr` resolves to `minmax(auto, 1fr)` by spec; the
     `auto` lets the track grow to content. `minmax(0, 1fr)` fixes
     the floor at 0 so the image can be clipped. */
  grid-template-columns: minmax(0, 1fr);
}
.block-cro-block-13 .map-container-dark {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
@media (max-width: 768px) {
  .block-cro-block-13 .map-container-dark img,
  .block-cro-block-13 .map-container-dark svg,
  .block-cro-block-13 .map-container-dark iframe {
    max-width: 100%;
    height: auto;
  }
  /* If the block ever exposes a list-view fallback, swap to it on
     mobile; otherwise no-op (selectors not matched). */
  .block-cro-block-13 .map-section-dark .map-desktop {
    display: none;
  }
  .block-cro-block-13 .map-section-dark .map-mobile-list {
    display: block;
  }
}

/* Senior-UX T10 (W4-S10): defensive viewport-width cap on the map
   wrappers + iframe + ticker track. Earlier audit added overflow:hidden
   on outer wrappers but the absolutely-positioned static & interactive
   wrappers can still let inner media exceed the column. Pin every map
   media element to 100% / 100vw so the 1890 px image cannot leak past
   a 360 px viewport. */
.block-cro-block-13 .map-static-wrapper-dark,
.block-cro-block-13 .map-interactive-wrapper-dark {
  max-width: 100%;
  width: 100%;
}
.block-cro-block-13 .map-static-wrapper-dark img,
.block-cro-block-13 .map-static-wrapper-dark svg,
.block-cro-block-13 .map-interactive-wrapper-dark iframe,
.block-cro-block-13 .cro-map-iframe,
.block-cro-block-13 .map-image-dark {
  max-width: 100% !important;
  width: 100% !important;
}
/* Ticker track (animation translate) cannot overflow the wrapper. */
.block-cro-block-13 .ticker-wrapper-improved {
  max-width: 100%;
  overflow: hidden;
}

/* Senior-UX T10: coverage list (city cards) — bump font + tap height.
   Previously each card was --ds-fs-body-sm (16 px) name and 14 px region;
   AARP requires ≥18 px on row-level interactive labels and ≥48 px tap.
   Each .city-card-dark is now ≥48 px and the city name ≥18 px. */
.block-cro-block-13 .city-card-dark {
  min-height: var(--ds-touch-target, 48px);
  padding: var(--ds-space-3) var(--ds-space-4);
}
.block-cro-block-13 .city-name-dark {
  font-size: 18px;
  line-height: 1.3;
}
.block-cro-block-13 .city-region-dark {
  font-size: 14px;
  line-height: 1.4;
}
.block-cro-block-13 .city-card-dark:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring, 0 0 0 3px var(--ds-cta));
}

/* Senior-UX T10: trust-badge sidebar pills must hit 48 px tap target. */
.block-cro-block-13 .trust-badge-item {
  min-height: var(--ds-touch-target, 48px);
  font-size: 16px;
}
.block-cro-block-13 .trust-badge-item:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring, 0 0 0 3px var(--ds-cta));
}

/* Senior-UX T10: service pill cards (sidebar) — 48 px tap, 16 px label. */
.block-cro-block-13 .service-pill-card {
  min-height: var(--ds-touch-target, 48px);
  font-size: 16px;
}
.block-cro-block-13 .service-pill-card:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring, 0 0 0 3px var(--ds-cta));
}

/* Senior-UX T10: expand-cities-btn = primary action; bump to 56 px CTA
   spec, fill it for clear affordance, and underline-free filled style. */
.block-cro-block-13 .expand-cities-btn-dark {
  min-height: var(--ds-touch-target-primary, 56px);
  font-size: 16px;
  letter-spacing: .04em;
}

/* Senior-UX T10: response CTA — bump to primary CTA height (56 px). */
.block-cro-block-13 .response-cta-dark {
  min-height: var(--ds-touch-target-primary, 56px);
  font-size: 16px;
  padding: var(--ds-space-3) var(--ds-space-6);
}

/* Senior-UX T10: respect reduced motion on counter + ticker + ring */
@media (prefers-reduced-motion: reduce) {
  .block-cro-block-13 .pulse-dot-dark,
  .block-cro-block-13 .cro-map-loader-spinner,
  .block-cro-block-13 .ticker-track-improved {
    animation: none !important;
  }
}

/* BUG-T10 (W4-S10): on 375 px the global injected sticky CTA bar (the
   .acme-cta-call / .acme-cta-quote pair from acme-enhance.js) lands at
   viewport bottom and the audit detected a 112×48 / 110×48 px overlap
   with .expand-cities-btn-dark when the button is in-view. Source markup
   is out-of-slice. Defensive in-slice mitigation: reserve clearance on
   the bottom of the city-selector card + scroll-anchor the button so it
   never lands underneath the injected bar at any scroll position. */
/* SWEEP-T19 coord fix: replaced literal 56 / 80 px with shared
   `--ds-sticky-cta-clearance` token used across teams 02/07/10. Token
   defaults match prior literals so behaviour is unchanged when the host
   page does not provide one. */
@media (max-width: 600px) {
  .block-cro-block-13 .city-selector-dark {
    padding-bottom: calc(var(--ds-space-4) + var(--ds-sticky-cta-clearance, 56px));
  }
  .block-cro-block-13 .expand-cities-btn-dark {
    scroll-margin-block-end: var(--ds-sticky-cta-clearance, 80px);
  }
  /* Also protect the response-cta-dark from the sticky bar overlap. */
  .block-cro-block-13 .response-cta-dark {
    scroll-margin-block-end: var(--ds-sticky-cta-clearance, 80px);
  }
}

/* SWEEP-T19 BUG-FIX: defensive checkmark-leak guard. The service-area
   block currently renders no semantic <ul><li>, but its sidebar contains
   .trust-badge-item rows that ship an explicit `.badge-check-item` SVG
   tick. If a future restructure converts those to <li>, the global
   `theme.min.css #features ul li::before` orange ✓ glyph would
   double-stamp on top of the in-line SVG. Pre-empt that with a
   module-scoped reset so the cascade winner is always local. */
.block-cro-block-13 ul li::before,
.block-cro-block-13 ol li::before { content: none !important; }

/* ────────────────────────────────────────────────────────────────
   FIX-MAP-20260508-163000 — contact page contrast cleanup.
   1) `.map-upload-prompt` and `.map-embed-prompt` are editor-only
      empty-state placeholders rendered by the Twig when the page
      admin hasn't uploaded a static map image / set an embed URL.
      They expose internal "Go to Page Media → Upload..." copy to
      public visitors with 3.19 contrast ratio on .scheme-steel
      (rgb 118,115,106 fg on rgb 29,39,49 bg → FAIL WCAG AA).
      The contact page currently has no map media uploaded, so the
      placeholder is leaking onto production. Hide it on the public
      site — Grav admins still see/manage the page via /admin and
      these prompts duplicate the admin form copy.
   2) `.expand-cities-btn-dark` ("+ VIEW 14 MORE CITIES") sits at
      3.48 on white. The base button is already 16 px / 700 weight
      uppercase (large-bold AA threshold = 3.0) so the ratio is
      *technically* AA-passing for large text, but borderline. Bump
      fg to a darker brand orange (--ds-cta-dk) for a comfortable
      4.5+ ratio and a clearer "this is a primary affordance".
   3) `.city-region-dark` (e.g., "Central GTA" subtitle) is 14 px
      regular at 4.44 on cream — borderline AA. Pin to a darker
      tone for safer 5.5+ contrast across cream/sand/paper schemes.
   ──────────────────────────────────────────────────────────── */

/* (1) Hide editor-only empty-state placeholders on the public site. */
.block-cro-block-13 .map-placeholder-dark.map-upload-prompt,
.block-cro-block-13 .map-placeholder-dark.map-embed-prompt {
  display: none;
}

/* (2) Bolder brand-orange on expand-cities button for AA-safe contrast
       on white sidebar/card backgrounds. */
.block-cro-block-13 .expand-cities-btn-dark {
  color: var(--ds-cta-dk, #c54e0a);
}

/* (3) Darker city-region label for safer contrast on cream/paper. */
.block-cro-block-13 .city-region-dark {
  color: var(--ds-ink-soft, #5a5a5a);
}
/* Inside dark schemes the inherited --scheme-fg-mute is already
   light; restore the soft scheme token there so we don't flip
   the colour to ink-soft on dark. */
.scheme-ink .block-cro-block-13 .city-region-dark,
.scheme-steel .block-cro-block-13 .city-region-dark,
.scheme-charcoal .block-cro-block-13 .city-region-dark {
  color: var(--scheme-fg-soft, #d6d2c8);
}