/*
Theme Name: Milner Pro Gen6
Theme URI: https://themilnerteamfl.com
Author: The Milner Team
Author URI: https://themilnerteamfl.com
Description: Custom WordPress theme for The Milner Team - SWFL real estate. W1 first-screen: Cormorant Garamond + Manrope, navy/sky/foam. Gold unused on marketing chrome.
Version: 6.0.1.1
License: GPL v2 or later
Text Domain: milner-pro
Tags: real-estate, blue-light, lead-capture, responsive

MOVE 3 skin migration (2026-07-05, doc-28 IDX skin-unify, owner-approved
token+font re-value only - no markup/layout restructure):
  - ink/sky ramp repointed to the exact --ms-* IDX hex values (was a
    close-but-different blue/navy pair; now unified).
  - Fonts swapped to the IDX pairing: Playfair Display (was Cormorant
    Garamond) + Inter (was Manrope) - see wp_enqueue_style in functions.php.
  - --shadow-soft/strong/editorial repointed to the IDX dual-shadow
    --msx-elev-* elevation system; --radius-* scale aligned to the IDX
    8/12/18/24 (msx) + 10px card scale.
  - --msx-gold* token names kept (IDX call-site compatibility) but revalued
    2026-08-23 to navy/steel. Gold is MIRA Player only — not themilnerteamfl.com.
  - --success/--error kept (2 genuine call sites triaged - see functions.php-
    adjacent MOVE-3 notes / build report); comparison-table check/cross
    marks were decorative marketing chrome, not form validation, and were
    repointed off --success/--error onto the IDX-safe gold/muted pair
    (see .comparison-table .check/.cross below) per the IDX "no red/green
    in chrome" rule. --success/--error variables themselves are LEFT
    DEFINED (unused elsewhere today, kept for any future genuine
    form-validation need) rather than deleted, to avoid breaking anything
    that references them at runtime (widgets/plugins/inline styles).
*/

:root {
  /* Ink foundations - repointed to the IDX --ms-navy-ink / --ms-navy-footer /
     --ms-steel-deep triplet (doc-28). ink-900 = IDX primary CTA/headline ink. */
  --ink-900: #095e93;
  --ink-800: #095e93;
  --ink-700: #095e93;
  /* Brand blues - repointed to the IDX --ms-steel / --ms-steel-deep pair.
     sky-400/300/200 have no literal doc-28 counterpart (IDX only specifies
     steel + steel-deep, no mid-light tint ramp) - these are tints of the
     new sky-500 hue (#4a7fa5) at increasing lightness, same hue family,
     not an invented new color. */
  --sky-500: #2b80bb;
  --sky-400: #2b80bb;
  --sky-300: #60c3ef;
  --sky-200: #d2e4f5;
  --foam-100: #eaf4fc;
  --sand-100: #eef6fc;
  --slate-100: #e2e8f0;
  --slate-200: #b9c6d6;
  --text: #2c3e50;
  --text-soft: #56698a; /* 2026-09-28: was #56698a (~4.1:1), now AA on white/cream */
  --white: #ffffff;
  /* Kept defined (see file-header MOVE-3 note); repointed call sites off these,
     see .comparison-table .check/.cross below. */
  --success: #169c61;
  --error: #dc3545;
  /* IDX --ms-steel-deep (doc-28 explicit delta target) */
  --sky-700: #095e93;
  --cream-100: #f4f9fd;
  --sand-200: #dde6ef;
  --sand-300: #b9c6d6;
  --charcoal: #08111f;

  /* --- IDX champagne-gold accent (doc-28 --msx-gold* ramp), promoted from the
     MOVE-1/2 scoped .listings-strip/.service-band block to site-wide :root.
     2026-08-23 owner: gold is NOT our color. Token names kept; values are
     steel-blue so every var(--msx-gold*) call site follows navy/sky. */
  --msx-gold: #2b80bb;
  --msx-gold-bright: #2b80bb;
  --msx-gold-deep: #095e93;
  --msx-gold-ink: #095e93;
  --msx-gold-soft: rgba(43, 128, 187, 0.14);
  --msx-gold-line: rgba(43, 128, 187, 0.55);
  --msx-gold-metal: linear-gradient(140deg, #dce8f5 0%, #7ba3c9 30%, #2b80bb 55%, #095e93 100%);

  /* IDX ink-depth ramp (doc-28 --msx-ink-900/500 anchors) */
  --msx-ink-900: #08111f;
  --msx-ink-500: #095e93;

  /* Radius scale aligned to the IDX msx radius scale + dedicated card radius
     (doc-28 --ms-radius-card 10px). Old --radius-sm/md/lg/xl kept as the
     call-site names (no markup change) but re-valued down to the IDX numbers. */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --msx-radius-sm: 8px;
  --msx-radius: 12px;
  --msx-radius-lg: 18px;
  --msx-radius-xl: 24px;
  --msx-radius-card: 10px;

  /* Dual-shadow elevation system (doc-28 --msx-elev-1/2), replacing the old
     flat single shadow-soft/strong pairs with the IDX's layered look.
     shadow-editorial scales the same rgba family up for modal/popover use
     (doc-28 elev-3/float were not given exact values - extrapolated in the
     same family/ratio as elev-1->elev-2, not invented from scratch). */
  --msx-elev-1: 0 1px 2px rgba(8, 17, 31, 0.06), 0 2px 8px rgba(8, 17, 31, 0.06);
  --msx-elev-2: 0 2px 4px rgba(8, 17, 31, 0.07), 0 10px 26px rgba(8, 17, 31, 0.1);
  --msx-elev-3: 0 4px 8px rgba(8, 17, 31, 0.08), 0 24px 56px rgba(8, 17, 31, 0.14);
  --shadow-soft: var(--msx-elev-1);
  --shadow-strong: var(--msx-elev-2);
  --shadow-editorial: var(--msx-elev-3);

  /* Motion rhythm (doc-28 --msx-dur-1..4) - added for future use; existing
     transition declarations are untouched (no markup/behavior change). */
  --msx-dur-1: 120ms;
  --msx-dur-2: 200ms;
  --msx-dur-3: 320ms;
  --msx-dur-4: 520ms;

  --container: 1200px;
  --container-wide: 1440px;
  --header-h: 88px;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', sans-serif;
  --font-eyebrow: 'Manrope', sans-serif;
  --tracking-wide: 0.18em;
  --tracking-xwide: 0.28em;
  --focus-ring: 0 0 0 3px rgba(74, 127, 165, 0.22), 0 0 0 6px rgba(27, 45, 79, 0.1);
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-med: 500ms;
  --dur-slow: 900ms;
  --reveal-offset: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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

body {
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(circle at 12% 10%, rgba(96, 195, 239, 0.18), transparent 36%),
    radial-gradient(circle at 84% 14%, rgba(43, 128, 187, 0.14), transparent 30%),
    linear-gradient(180deg, #f7fbff 0%, #f0f6fb 50%, #e8f2fa 100%);
  line-height: 1.6;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image: linear-gradient(rgba(16, 38, 61, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 38, 61, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: -1;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; color: var(--ink-900); }

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--sky-500);
  outline-offset: 4px;
  box-shadow: var(--focus-ring);
}

.btn-lux:focus-visible,
.btn-lux-outline:focus-visible,
.service-band-link:focus-visible,
.inline-link:focus-visible,
.hero-ed-badge--link:focus-visible,
.carousel-dot:focus-visible,
.vh-filter-btn:focus-visible,
.vh-featured__play:focus-visible,
.vh-card__play:focus-visible,
.vh-dd-card__play:focus-visible,
.city-hero-nav-strip a:focus-visible,
.city-hero-welcome-badge__link:focus-visible {
  outline: 2px solid var(--sky-500);
  outline-offset: 5px;
  box-shadow: var(--focus-ring);
}

.container {
  width: min(var(--container), calc(100% - 2.4rem));
  margin: 0 auto;
}

section { padding: 6.5rem 0; }

.content-box {
  background: #ffffff;
  border: 1px solid rgba(24, 74, 115, 0.08);
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  box-shadow: var(--shadow-soft);
}

.luxury-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

.text-center { text-align: center; }
.text-center h2 { margin-left: auto; margin-right: auto; }
.text-white { color: #fff; }
.text-accent { color: var(--sky-500); }
.bg-sand { background: var(--sand-100); }
.bg-foam { background: var(--foam-100); }
.bg-off-white { background: var(--foam-100); }
.bg-primary { background: var(--ink-900); color: #fff; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-bottom: 1px solid rgba(24, 74, 115, 0.14);
}

.site-header.header-transparent {
  background: transparent;
  border-bottom-color: transparent;
}

.site-header.header-transparent.scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-bottom-color: rgba(24, 74, 115, 0.14);
}

.site-header.scrolled {
  box-shadow: 0 4px 12px rgba(16, 38, 61, 0.06);
  height: 70px;
}

.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.header-phone {
  display: none;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-900);
  text-decoration: none;
  padding: 0.45rem 0.15rem;
  line-height: 1.2;
}
.header-phone:hover,
.header-phone:focus-visible {
  color: var(--sky-500);
}
@media (min-width: 1020px) {
  .header-phone { display: inline-flex; align-items: center; }
}
.header-actions .btn-primary {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 700;
  min-height: 48px;
  padding: 0.7rem 1.2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.brand-logo {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.18);
  box-shadow: 0 8px 20px rgba(16, 38, 61, 0.12);
  padding: 0.35rem;
  object-fit: contain;
}

.brand-logo--wordmark {
  display: none;
  height: 54px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.brand-copy { min-width: 0; }

.brand-kicker {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.2;
}

.brand-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.38rem;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  line-height: 1.15;
  white-space: nowrap;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.72rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-700);
  position: relative;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  text-decoration: none;
}

.nav-link:hover, .nav-link:focus-visible {
  color: var(--ink-900);
  background: transparent;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.25rem;
  height: 1px;
  background: var(--sky-700);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.active::after {
  transform: scaleX(1);
}

.nav-link-arrow {
  width: 10px;
  height: 10px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.nav-item.dropdown:hover .nav-link-arrow,
.nav-item.dropdown.open .nav-link-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 220px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(16, 38, 61, 0.18);
  border: 1px solid rgba(24, 74, 115, 0.1);
  padding: 0.6rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 51;
}

.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown-item {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-700);
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.dropdown-item:hover, .dropdown-item:focus-visible {
  background: var(--foam-100);
  color: var(--sky-500);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.85rem 1.14rem;
  min-height: 44px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  gap: 0.5rem;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--ink-900);
  color: #fff;
  box-shadow: 0 8px 20px rgba(16, 38, 61, 0.25);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--ink-900);
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sky-700);
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: -1;
}
.btn-primary:hover {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--sky-700);
  box-shadow: 0 14px 32px rgba(43, 128, 187, 0.35);
}
.btn-primary:hover::before {
  transform: translateY(0);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-800);
  border-color: rgba(24, 74, 115, 0.24);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(24, 74, 115, 0.35);
}

.btn-accent {
  background: var(--sky-500);
  color: #fff;
  border-color: var(--sky-500);
}

.btn-accent:hover {
  background: var(--sky-400);
  border-color: var(--sky-400);
}

.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.btn-outline-light:hover {
  background: #fff;
  color: var(--ink-900);
}

.btn-secondary {
  background: #fff;
  color: var(--ink-800);
  border-color: rgba(24, 74, 115, 0.24);
}

.btn-secondary:hover {
  background: var(--foam-100);
  border-color: rgba(24, 74, 115, 0.35);
}

.btn-full { width: 100%; }
.btn-lg { padding: 1.25rem 2.5rem; font-size: 1rem; }
.btn-sm { padding: 0.75rem 1.5rem; font-size: 0.72rem; }

.mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(24, 74, 115, 0.2);
  background: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 51;
}

.mobile-toggle span {
  width: 24px;
  height: 2.5px;
  background: var(--ink-800);
  transition: transform 0.24s ease, opacity 0.24s ease;
}

.mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 45;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s ease;
}

.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-inner { padding: 1.5rem; }

/* P2 2026-07-05: overflow:hidden alone doesn't stop the underlying page from
   scrolling behind the open mobile drawer (content bleeds through above the
   menu, iOS Safari touch-scroll in particular). Lock via position:fixed +
   restore scrollY on close (see header.php openMenu/closeMenu). */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.mobile-nav-item { border-bottom: 1px solid rgba(24, 74, 115, 0.1); }

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-700);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.mobile-nav-link:hover { color: var(--sky-500); }

.mobile-nav-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.mobile-nav-item.open .mobile-nav-arrow { transform: rotate(180deg); }

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-nav-item.open .mobile-submenu { max-height: 600px; }
.mobile-submenu-inner { padding: 0 0 1rem 1rem; }

.mobile-submenu-item {
  display: block;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-soft);
  border-bottom: 1px solid rgba(24, 74, 115, 0.05);
  text-decoration: none;
}

.mobile-submenu-item:last-child { border-bottom: none; }
.mobile-submenu-item:hover { color: var(--sky-500); }

.mobile-drawer .btn-primary {
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem;
  font-size: 0.85rem;
}

.mobile-drawer__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding: 0.85rem 1rem;
  background: rgba(24, 74, 115, 0.06);
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-700);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.mobile-drawer__phone:hover { color: var(--sky-500); }
.mobile-drawer__phone svg { flex-shrink: 0; color: var(--sky-500); }

.mobile-drawer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(24, 74, 115, 0.1);
}
.mobile-drawer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(24, 74, 115, 0.07);
  color: var(--ink-600);
  transition: background 0.2s, color 0.2s;
}
.mobile-drawer__social a:hover {
  background: var(--sky-500);
  color: #fff;
}

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 3rem;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
}

.hero-copy {
  padding-left: 1rem;
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.hero h1 em, .section-head em { color: var(--sky-500); font-style: italic; }

.page-hero {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
  color: #fff;
  padding: calc(var(--header-h, 88px) + 4rem) 0 3.5rem;
  text-align: center;
}

.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: #fff;
  margin-bottom: 0.75rem;
}

.page-hero p {
  font-size: 1.1rem;
  opacity: 0.85;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

.hero-lead, .hero-caption, .page-hero p, .section-head p {
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.72;
}

.hero-points, .stats-row, .metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.35rem 0;
}

.hero-points span, .metric, .stat-pill, .stats-row article {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(24, 74, 115, 0.14);
  border-radius: 999px;
  padding: 0.65rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-700);
}

.hero-actions, .final-actions, .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.15rem;
}

.hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(24, 74, 115, 0.18);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-800);
  font-weight: 700;
  margin-top: 1rem;
}

.visual-stack {
  position: relative;
  min-height: 520px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-strong);
}

/* P1 2026-07-05 root-cause fix: `height:100%` on a non-absolute <img> can't
   resolve against a `min-height`-only parent, so the img fell back to its
   intrinsic aspect ratio (16:9) scaled to container width — leaving an
   empty void below the photo inside the /buy/ canal-taxonomy card (photo
   only filled ~60% of the 520px box). Absolutely positioning the img with
   inset:0 makes it actually fill the card; object-fit:cover keeps it
   uncropped-looking. */
.visual-stack > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.floating-card {
  position: absolute;
  background: rgba(16, 38, 61, 0.88);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 0.8rem 0.95rem;
  min-width: 180px;
  z-index: 2;
}

.floating-card small { display: block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; opacity: 0.9; }
.floating-card strong { display: block; font-size: 1.15rem; line-height: 1.25; margin-top: 0.2rem; }
.floating-one { top: 1rem; right: 1rem; }
.floating-two { left: 1rem; bottom: 1rem; }

.section-head { margin-bottom: 2rem; }

.section-kicker, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(24, 74, 115, 0.14);
  border-radius: 999px;
}

.section-head h2, .hero h1, .page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  color: var(--ink-900);
  margin: 0.9rem 0 1rem;
  letter-spacing: -0.01em;
}

.lead-panel, .form-card, .contact-card, .path-card, .intel-card, .proof-card,
.resource-card, .service-card, .process-card, .social-card, .faq-item,
.team-featured, .map-info {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  padding: 1.25rem;
}

.lead-panel h3, .form-card h3, .contact-card h3, .service-card h3,
.process-card h3, .path-card h3, .intel-card h3, .resource-card h3, .faq-item h3 {
  color: var(--ink-900);
  margin-bottom: 0.55rem;
  line-height: 1.3;
}

.mini-form, .contact-form, .lead-form, .form-grid {
  display: grid;
  gap: 0.6rem;
}

.mini-form input, .mini-form select, .mini-form textarea,
.contact-form input, .contact-form select, .contact-form textarea,
.lead-form input, .lead-form select, .lead-form textarea,
.form-input, .form-textarea, .form-select {
  width: 100%;
  border: 1px solid rgba(24, 74, 115, 0.2);
  border-radius: 12px;
  padding: 0.78rem 0.9rem;
  font: inherit;
  color: var(--ink-800);
  background: #fff;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--sky-500);
  box-shadow: 0 0 0 3px rgba(24, 146, 216, 0.16);
}

.form-textarea { min-height: 120px; resize: vertical; }

.mini-form button, .contact-form button, .lead-form button,
.form-submit, .submit-btn {
  border: 0;
  border-radius: 12px;
  padding: 0.86rem 1rem;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--sky-500), var(--ink-700));
  cursor: pointer;
}

.form-grid { grid-template-columns: repeat(2, 1fr); }
.mini-form p, .form-helper, .fine-print, .form-disclaimer {
  font-size: 0.86rem;
  color: var(--text-soft);
}

.stats-section {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 100%);
  color: #fff;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.stat-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 2rem 1.4rem;
  transition: transform 0.23s ease, box-shadow 0.23s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.12);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(24, 146, 216, 0.18);
  border: 1px solid rgba(24, 146, 216, 0.3);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  margin: 0 auto 1rem;
  color: var(--sky-400);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.stats-row article {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(24, 74, 115, 0.14);
  padding: 0.8rem;
}

.comparison-section { padding: 6.5rem 0; }

.comparison-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--ink-900);
  text-align: center;
  margin-bottom: 0.5rem;
}

.comparison-subtitle {
  text-align: center;
  color: var(--text-soft);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(24, 74, 115, 0.08);
}

.comparison-table th {
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  border-bottom: 2px solid rgba(24, 74, 115, 0.1);
  background: var(--foam-100);
}

.comparison-table th:first-child { width: 55%; }

.comparison-table td {
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(24, 74, 115, 0.06);
  color: var(--text);
}

.comparison-table td:first-child { font-weight: 600; color: var(--ink-900); }
.comparison-table tr:last-child td { border-bottom: none; }
/* MOVE 3 (2026-07-05): repointed off --success/--error - this is a decorative
   marketing feature-comparison table (us vs. competitors), not a form-
   validation status, so red/green chrome is out per the IDX "no red/orange/
   green in chrome" rule. Check = an earned differentiator -> steel-ink text.
   Cross = neutral absence,
   not an alarm -> muted text, not red. */
.comparison-table .check { color: var(--msx-gold-ink); font-weight: 700; font-size: 1.1rem; }
.comparison-table .cross { color: var(--text-soft); font-weight: 700; font-size: 1.1rem; }
.comparison-table tr.is-highlight { background: var(--foam-100); }
.comparison-table tr.is-highlight td:first-child { color: var(--sky-700); }

.trust-marquee {
  border-top: 1px solid rgba(24, 74, 115, 0.1);
  border-bottom: 1px solid rgba(24, 74, 115, 0.1);
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 2.2rem;
  padding: 0.65rem 1rem;
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--ink-700);
  animation: scroll 40s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 1.1rem)); }
}

.testimonial-section {
  background: linear-gradient(180deg, #fff 0%, var(--sand-100) 100%);
}

.testimonial-card {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.testimonial-stars {
  color: var(--sky-500);
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

.testimonial-text {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  color: var(--ink-900);
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 1.2rem;
}

.testimonial-author strong { display: block; color: var(--ink-700); font-size: 0.95rem; }
.testimonial-author span { display: block; font-size: 0.82rem; color: var(--text-soft); margin-top: 0.2rem; }

.testimonial-source { display: block; font-size: 0.72rem; color: var(--text-soft); margin-top: 0.25rem; letter-spacing: 0.04em; text-transform: uppercase; }
.testimonial-source a { color: inherit; text-decoration: underline; }
.testimonial-source a:hover { color: var(--ink-700); }

.cta-section {
  background:
    linear-gradient(122deg, rgba(16, 38, 61, 0.95), rgba(24, 74, 115, 0.95)),
    url('images/live/2025/05/CanalWithNewLogo-scaled.jpg') center/cover no-repeat;
  color: #fff;
}

.cta-section h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.02;
  color: #fff;
  margin-bottom: 0.8rem;
}

.cta-section p { color: rgba(255, 255, 255, 0.85); }

.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.final-cta {
  background: linear-gradient(135deg, var(--ink-900), var(--ink-700));
  color: #fff;
  text-align: center;
}

.final-cta h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.final-cta p { color: rgba(255, 255, 255, 0.86); max-width: 760px; margin: 0.85rem auto 0; }

.video-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.12);
  box-shadow: var(--shadow-soft);
}

.video-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 180px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--foam-100), var(--sand-100));
}

.video-card .info { padding: 0.8rem 0.95rem 0.95rem; }

.video-card .play {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(16, 38, 61, 0.82);
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(16, 38, 61, 0.82);
  border: 2px solid rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  z-index: 2;
}

.play-btn::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

.video-info { padding: 0.85rem 1rem; }
.video-info h4 { color: var(--ink-900); font-size: 1rem; margin-bottom: 0.25rem; }
.video-info p { color: var(--text-soft); font-size: 0.88rem; line-height: 1.5; }

.video-grid, .video-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Home page content engine: text left, videos stacked right */
.content-wrap-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: start;
}
.content-wrap-home .home-video-cards {
  grid-template-columns: 1fr;
  gap: 1rem;
}
.content-wrap-home .home-video-cards .video-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: stretch;
  min-height: 132px;
}
.content-wrap-home .home-video-cards .video-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 120px;
}
.content-wrap-home .home-video-cards .video-card .info {
  padding: 1rem 1.25rem;
}
@media (max-width: 960px) {
  .content-wrap-home { grid-template-columns: 1fr; gap: 2.25rem; }
  .content-wrap-home .home-video-cards .video-card { grid-template-columns: 120px 1fr; }
}
@media (max-width: 560px) {
  .content-wrap-home .home-video-cards .video-card { grid-template-columns: 1fr; }
  .content-wrap-home .home-video-cards .video-card img { min-height: 180px; }
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  counter-reset: step;
}

.process-step { text-align: center; position: relative; }

.process-step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky-500), var(--ink-700));
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 auto 1rem;
}

.process-step h4 { font-family: var(--font-heading); font-size: 1.15rem; color: var(--ink-900); margin-bottom: 0.4rem; }
.process-step p { font-size: 0.9rem; color: var(--text-soft); line-height: 1.6; }

.team-roster-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.team-member-card {
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.team-member-card:nth-child(even) { flex-direction: row-reverse; }

.team-member-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }

.team-member-photo {
  width: 260px;
  min-width: 260px;
  height: auto;
  min-height: 360px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  flex-shrink: 0;
}
.team-member-card--susan-milner .team-member-photo { object-position: 50% 15%; }
.team-member-card--loretta-macdonald .team-member-photo { object-position: 55% 15%; }

.team-member-photo-placeholder {
  width: 260px;
  min-width: 260px;
  min-height: 360px;
  background: linear-gradient(135deg, var(--foam-100), var(--sand-100));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.4;
  flex-shrink: 0;
}

.team-member-info {
  padding: 2rem 2.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-member-info h3 { font-family: var(--font-heading); font-size: 1.4rem; color: var(--ink-900); margin-bottom: 0.25rem; }

.team-member-info .role,
.team-member-info .member-role {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sky-500);
  font-weight: 700;
  margin-bottom: 1rem;
}

.team-member-info p { font-size: 0.95rem; color: var(--text-soft); line-height: 1.65; }

.neighborhoods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.neighborhood-card {
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s, box-shadow 0.25s;
}

.neighborhood-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
.neighborhood-card img { width: 100%; height: 220px; object-fit: cover; }

.neighborhood-card-body { padding: 1.5rem; }
.neighborhood-card-body h3 { font-family: var(--font-heading); font-size: 1.4rem; color: var(--ink-900); margin-bottom: 0.5rem; }
.neighborhood-card-body p { color: var(--text-soft); font-size: 0.95rem; line-height: 1.65; margin-bottom: 1rem; }

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.contact-info-card {
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.1);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: var(--shadow-soft);
}

.contact-info-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--foam-100);
  border: 1px solid rgba(24, 146, 216, 0.15);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--sky-500);
  font-size: 1.1rem;
}

.contact-info-card h4 { font-size: 0.95rem; color: var(--ink-900); margin-bottom: 0.25rem; }
.contact-info-card p, .contact-info-card a { font-size: 0.9rem; color: var(--text-soft); }
.contact-info-card a:hover { color: var(--sky-500); }

.contact-icon, .stat-icon, .service-icon, .resource-icon, .calendar-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--sky-500);
  background: var(--foam-100);
  border: 1px solid rgba(24, 146, 216, 0.22);
  margin-bottom: 0.6rem;
  flex: 0 0 auto;
}

.contact-icon svg, .stat-icon svg, .service-icon svg, .resource-icon svg, .calendar-icon svg {
  width: 22px;
  height: 22px;
}

.map-container {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(24, 74, 115, 0.14);
  min-height: 420px;
}

.map-container iframe { width: 100%; height: 100%; min-height: 420px; border: 0; }

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(24, 74, 115, 0.1);
  box-shadow: var(--shadow-soft);
}

.map-embed iframe { width: 100%; height: 400px; border: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-size: 0.84rem;
  color: var(--ink-700);
}

.badge svg { width: 14px; height: 14px; flex: 0 0 auto; }
.path-link, .directions-btn, .text-link { color: var(--sky-500); font-weight: 700; }

.intel-card ul, .resource-card ul, .marketing-list, .contact-card ul { padding-left: 1.1rem; }
.intel-card li, .resource-card li, .marketing-list li, .contact-card li { margin: 0.3rem 0; }

.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* ---------- SITE FOOTER - editorial rebuild ---------- */
.site-footer {
  position: relative;
  background:
    radial-gradient(circle at 85% 10%, rgba(43, 128, 187, 0.22), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(96, 195, 239, 0.14), transparent 40%),
    linear-gradient(180deg, #1b2d4f 0%, #0b1f36 55%, #081627 100%);
  color: rgba(235, 244, 252, 0.78);
  font-family: var(--font-body);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><circle cx='1' cy='1' r='0.8' fill='%23ffffff' opacity='0.05'/></svg>");
  opacity: 0.4;
  pointer-events: none;
}

.footer-newsletter {
  position: relative;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid rgba(96, 195, 239, 0.14);
}
.footer-newsletter-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.footer-newsletter-kicker {
  font-family: var(--font-eyebrow, var(--font-body));
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sky-300);
  margin-bottom: 1.2rem;
  display: inline-block;
}
.footer-newsletter-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 1rem;
}
.footer-newsletter-title em {
  font-style: italic;
  color: var(--sky-300);
  font-weight: 400;
}
.footer-newsletter-lede {
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(235, 244, 252, 0.7);
  max-width: 38ch;
}
.footer-newsletter-form .form-card,
.footer-newsletter-form form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(96, 195, 239, 0.22);
  border-radius: 14px;
  padding: 1.6rem;
  backdrop-filter: blur(6px);
}
.footer-newsletter-form .form-title,
.footer-newsletter-form .form-subtitle { display: none; }
.footer-newsletter-form .form-label {
  color: rgba(235, 244, 252, 0.65);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-newsletter-form .form-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(96, 195, 239, 0.25);
  color: #fff;
}
.footer-newsletter-form .form-input::placeholder { color: rgba(235, 244, 252, 0.4); }
.footer-newsletter-form .form-input:focus {
  border-color: var(--sky-300);
  background: rgba(255, 255, 255, 0.1);
}
.footer-newsletter-form .btn,
.footer-newsletter-form button[type="submit"] {
  background: var(--sky-500);
  color: #fff;
  border: none;
}
.footer-newsletter-form .btn:hover,
.footer-newsletter-form button[type="submit"]:hover {
  background: var(--sky-300);
  color: var(--ink-900);
}

.footer-main {
  padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 4rem);
}
.footer-col {
  min-width: 0;
}
.footer-col--brand { padding-right: 1rem; }
.footer-brand {
  display: inline-block;
  margin-bottom: 1.25rem;
}
.footer-logo {
  width: 220px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(96, 195, 239, 0.18);
}
.footer-tagline {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(235, 244, 252, 0.78);
  margin: 0 0 1.5rem;
  letter-spacing: 0.005em;
}

.footer-contact-quick {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}
.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: rgba(235, 244, 252, 0.72);
  font-size: 0.88rem;
  line-height: 1.55;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-contact-row:hover { color: #fff; }
.footer-contact-row svg {
  color: var(--sky-300);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(96, 195, 239, 0.28);
  color: rgba(235, 244, 252, 0.75);
  transition: all 0.25s ease;
}
.footer-social a:hover {
  background: var(--sky-500);
  border-color: var(--sky-500);
  color: #fff;
  transform: translateY(-2px);
}

.footer-heading {
  font-family: var(--font-eyebrow, var(--font-body));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.3rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(96, 195, 239, 0.2);
  position: relative;
}
.footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 28px;
  height: 1px;
  background: var(--sky-300);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer-list li a {
  color: rgba(235, 244, 252, 0.7);
  font-size: 0.93rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
.footer-list li a:hover {
  color: var(--sky-300);
  transform: translateX(3px);
}

.footer-list--posts li a {
  display: block;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(96, 195, 239, 0.08);
}
.footer-list--posts li:last-child a { border-bottom: none; }
.footer-post-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(235, 244, 252, 0.85);
  margin-bottom: 0.25rem;
  letter-spacing: 0.005em;
}
.footer-post-meta {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(96, 195, 239, 0.7);
}
.footer-list--posts li a:hover .footer-post-title { color: #fff; }
.footer-list--posts li a:hover { transform: none; }

.footer-all-posts {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky-300);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.footer-all-posts:hover {
  gap: 0.75rem;
  color: #fff;
}

.footer-bottom {
  position: relative;
  padding: 1.35rem 0 1.5rem;
  border-top: 1px solid rgba(96, 195, 239, 0.14);
  background: rgba(0, 0, 0, 0.15);
  margin: 0;
}
.footer-bottom-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.footer-copyright {
  font-size: 0.82rem;
  color: rgba(235, 244, 252, 0.55);
  letter-spacing: 0.01em;
}
.footer-legal-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  padding: 0;
  margin: 0;
}
.footer-legal-links li a {
  color: rgba(235, 244, 252, 0.55);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal-links li a:hover { color: var(--sky-300); }

.footer-equal-housing {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  color: rgba(235, 244, 252, 0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-equal-housing svg { color: var(--sky-300); flex-shrink: 0; }

.footer-broker-line {
  width: 100%;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(235, 244, 252, 0.08);
}
.footer-broker {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(235, 244, 252, 0.55);
  letter-spacing: 0.02em;
}
.footer-broker strong { color: rgba(235, 244, 252, 0.78); font-weight: 600; }

.footer-disclaimer {
  margin: 0.6rem 0 0;
  font-size: 0.74rem;
  line-height: 1.6;
  color: rgba(235, 244, 252, 0.45);
  letter-spacing: 0.01em;
}

/* ---------- Footer: Meet Mira (quiet editorial story block) ---------- */
.footer-mira-story {
  position: relative;
  padding: clamp(2.25rem, 4vw, 3rem) 0;
  border-top: 1px solid rgba(96, 195, 239, 0.14);
  text-align: center;
}
.footer-mira-story .container {
  max-width: 62ch;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.footer-mira-eyebrow {
  font-family: var(--font-eyebrow, var(--font-body));
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sky-300);
  display: inline-block;
  margin-bottom: 0.9rem;
}
.footer-mira-copy {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(235, 244, 252, 0.62);
  margin: 0;
  letter-spacing: 0.005em;
}

/* ---------- Per-image AI-representation corner tag (helper shipped, not yet applied) ---------- */
.milner-img-disclaimer-badge {
  position: absolute;
  z-index: 2;
  bottom: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(9, 94, 147, 0.62);
  backdrop-filter: blur(3px);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-eyebrow, var(--font-body));
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.milner-img-disclaimer-badge svg { width: 10px; height: 10px; flex-shrink: 0; }

@media (max-width: 960px) {
  .footer-newsletter-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .footer-col--brand { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-grid { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .footer-disclaimer { font-size: 0.7rem; }
  .footer-legal-links { gap: 0.3rem 1rem; }
}

/* ---------- AREA MAP - interactive city quadrant picker ---------- */
.area-map {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
  margin-top: 2.5rem;
}
.area-map-canvas {
  position: relative;
  background: linear-gradient(145deg, #f2f8fd 0%, #e5f1fa 100%);
  border: 1px solid rgba(43, 128, 187, 0.14);
  border-radius: 18px;
  padding: clamp(1rem, 2vw, 1.5rem);
  box-shadow: 0 20px 60px rgba(9, 94, 147, 0.08);
  overflow: hidden;
}
.area-map-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 90%, rgba(43, 128, 187, 0.12), transparent 50%),
    radial-gradient(circle at 90% 10%, rgba(96, 195, 239, 0.18), transparent 45%);
  pointer-events: none;
}
.area-map-canvas svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

.cc-region { cursor: pointer; outline: none; }
.cc-region-shape {
  fill: rgba(9, 94, 147, 0.04);
  stroke: rgba(9, 94, 147, 0.32);
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
  transition: fill 0.28s ease, stroke 0.28s ease, stroke-dasharray 0.2s ease, filter 0.28s ease;
}
.cc-region:hover .cc-region-shape,
.cc-region:focus .cc-region-shape,
.cc-region.is-active .cc-region-shape {
  fill: rgba(9, 94, 147, 0.88);
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 0;
  filter: drop-shadow(0 10px 22px rgba(9, 94, 147, 0.28));
}
.cc-region-label {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
  fill: #1b2d4f;
  text-anchor: middle;
  letter-spacing: 0.01em;
  pointer-events: none;
  transition: fill 0.28s ease;
}
.cc-region:hover .cc-region-label,
.cc-region:focus .cc-region-label,
.cc-region.is-active .cc-region-label {
  fill: #fff;
}
.cc-region-label--sm { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; font-family: var(--font-body); }
.cc-region-sub {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: rgba(9, 94, 147, 0.62);
  text-anchor: middle;
  pointer-events: none;
  transition: fill 0.28s ease;
}
.cc-region:hover .cc-region-sub,
.cc-region:focus .cc-region-sub,
.cc-region.is-active .cc-region-sub {
  fill: rgba(255, 255, 255, 0.92);
}
.cc-water-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  fill: rgba(9, 94, 147, 0.55);
  pointer-events: none;
}
.cc-water-sub {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: rgba(9, 94, 147, 0.4);
  pointer-events: none;
}
.fm-river-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  fill: rgba(9, 94, 147, 0.55);
  pointer-events: none;
}
.cc-road-label {
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: rgba(120, 90, 40, 0.75);
  pointer-events: none;
}
.cc-poi-dot {
  fill: #4a7fa5;
  stroke: #fff;
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 2px rgba(9, 94, 147, 0.18));
}
.cc-poi-label {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: rgba(9, 94, 147, 0.78);
  pointer-events: none;
}

/* Leaflet real map container */
.leaflet-realmap {
  width: 100%;
  height: 560px;
  min-height: 480px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(9, 94, 147, 0.12);
  position: relative;
  z-index: 1;
  background: #e5f1fa;
}
.leaflet-realmap .leaflet-container {
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: #e5f1fa;
}
.leaflet-realmap .leaflet-control-zoom a {
  font-family: var(--font-body);
  color: var(--ink-900);
  border: 1px solid rgba(9, 94, 147, 0.15);
}
.cc-leaflet-tooltip {
  background: #1b2d4f;
  color: #fff;
  border: 1px solid rgba(184, 134, 58, 0.5);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.3;
  box-shadow: 0 14px 32px rgba(9, 94, 147, 0.3);
}
.cc-leaflet-tooltip strong {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.01em;
}
.cc-leaflet-tooltip::before { display: none; }
.leaflet-tooltip-top.cc-leaflet-tooltip::before,
.leaflet-tooltip-bottom.cc-leaflet-tooltip::before { border: none; }

@media (max-width: 860px) {
  .leaflet-realmap { height: 420px; min-height: 380px; }
}

/* Compass rose */
.area-map-compass {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 38px;
  height: 38px;
  z-index: 3;
  pointer-events: none;
}
.area-map-compass-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(9, 94, 147, 0.28);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(9, 94, 147, 0.08);
}
.area-map-compass-ring::before,
.area-map-compass-ring::after {
  content: "";
  position: absolute;
  background: rgba(9, 94, 147, 0.35);
}
.area-map-compass-ring::before {
  top: 4px;
  bottom: 50%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #4a7fa5 0%, rgba(43, 128, 187, 0.35) 100%);
}
.area-map-compass-ring::after {
  top: 50%;
  bottom: 4px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}
.area-map-compass-n {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-900);
  background: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(9, 94, 147, 0.18);
}

.area-map-legend {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(9, 94, 147, 0.55);
  z-index: 2;
  background: rgba(255, 255, 255, 0.78);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(43, 128, 187, 0.14);
  backdrop-filter: blur(4px);
}
.area-map-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky-500);
}

.area-map-preview {
  display: flex;
}
.area-map-preview-inner {
  position: relative;
  width: 100%;
  padding: clamp(1.8rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid rgba(43, 128, 187, 0.14);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(9, 94, 147, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  overflow: hidden;
}
.area-map-preview-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sky-500), var(--sky-300));
}
.area-map-preview-kicker {
  font-family: var(--font-eyebrow, var(--font-body));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-500);
}
.area-map-preview-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.01em;
}
.area-map-preview-lede {
  font-size: 0.97rem;
  line-height: 1.65;
  color: rgba(9, 94, 147, 0.75);
  margin: 0;
}
.area-map-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.7rem 1.3rem;
  background: var(--ink-900);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.2s ease, gap 0.2s ease;
}
.area-map-preview-link:hover {
  background: var(--sky-500);
  gap: 0.75rem;
  transform: translateY(-1px);
}

.service-band-card.is-flashed {
  animation: card-flash 1.4s ease;
}
@keyframes card-flash {
  0%, 100% { box-shadow: 0 2px 20px rgba(9, 94, 147, 0.06); }
  30%      { box-shadow: 0 0 0 3px var(--sky-300), 0 20px 48px rgba(43, 128, 187, 0.22); }
}

@media (max-width: 860px) {
  .area-map { grid-template-columns: 1fr; }
  .area-map-preview-inner { min-height: auto; }
}

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

.card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(24, 74, 115, 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }

.card-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--sky-500), var(--ink-700));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: white;
}

.card-title { font-family: var(--font-heading); font-size: 1.25rem; margin-bottom: 0.5rem; }
.card-text { color: var(--text-soft); font-size: 0.875rem; line-height: 1.7; }

.services-grid, .process-grid, .proof-grid,
.resource-grid, .resources-grid, .contact-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.intel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 860px) {
  .intel-grid { grid-template-columns: 1fr; }
}
.path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1100px) {
  .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.services-grid, .process-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.proof-item {
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 0.2rem;
}

.proof-item strong { font-size: 1.1rem; color: var(--ink-900); }
.proof-item span { font-size: 0.86rem; color: var(--text-soft); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.objection-card {
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.08);
  border-left: 3px solid var(--sky-500);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.objection-card h4 { font-size: 1rem; margin-bottom: 0.25rem; }
.objection-card p { font-size: 0.92rem; color: var(--text-soft); }

.check-list { list-style: none; }
.check-list li { padding: 0.75rem 0 0.75rem 2rem; position: relative; color: var(--text-soft); }
.check-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--sky-500); font-weight: 700; }

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.quick-link-card {
  background: linear-gradient(135deg, var(--foam-100), #fff);
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

.quick-link-card h4 { font-family: var(--font-heading); font-size: 1.15rem; margin-bottom: 0.25rem; }
.quick-link-card p { color: var(--text-soft); margin-bottom: 1rem; font-size: 0.9rem; }

.form-card {
  background: #fff;
  padding: 3rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(24, 74, 115, 0.08);
}

.form-title { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--ink-900); opacity: 1; visibility: visible; }
.form-subtitle { font-size: 0.875rem; color: var(--text-soft); margin-bottom: 1.5rem; opacity: 1; visibility: visible; }
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--text); }

/* LP Landing Page styles */
.page-header {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
  color: #fff;
  padding: calc(var(--header-h) + 6rem) 0 4rem;
  text-align: center;
}

.page-title { color: #fff; margin-bottom: 0.5rem; }
.page-subtitle { font-size: 1.25rem; opacity: 0.8; max-width: 700px; margin: 0 auto; line-height: 1.6; }

.section-header { text-align: center; max-width: 700px; margin: 0 auto 4rem; }
.section-label { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--sky-500); margin-bottom: 0.5rem; }
.section-title { margin-bottom: 1rem; }
.section-intro { font-size: 1.125rem; color: var(--text-soft); line-height: 1.7; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.split-layout.reverse { direction: rtl; }
.split-layout.reverse > * { direction: ltr; }

.booking-embed-card {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(24, 74, 115, 0.08);
  box-shadow: var(--shadow-strong);
  overflow: hidden;
  background: #fff;
}

.booking-embed { width: 100%; min-height: 700px; border: 0; display: block; }

/* ═══ City Map / Waterway Map ═══ */
.city-map-module {
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.city-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(24, 74, 115, 0.12);
  background: var(--foam-100);
}

.city-tab {
  border: 1px solid rgba(24, 74, 115, 0.2);
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  background: #fff;
  transition: 0.2s;
}

.city-tab.is-active, .city-tab:hover { border-color: var(--sky-500); color: var(--sky-500); }

.city-panel { display: none; padding: 1.25rem; }
.city-panel.is-active { display: block; }

.city-map-wrap {
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 420px;
  background: var(--foam-100);
}

.city-map-frame { width: 100%; min-height: 420px; border: 0; display: block; }

.canal-grid { display: grid; gap: 0.65rem; }

.canal-note {
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-left: 3px solid var(--sky-500);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  background: #fff;
}

.canal-note p { margin: 0; color: var(--text-soft); font-size: 0.93rem; }

.resource-links-list { margin: 0; padding-left: 1rem; }
.resource-links-list li { margin-bottom: 0.4rem; }
.resource-links-list a { color: var(--ink-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   Milner Canal Map - Enterprise Edition (v2)
   Authoritative data from City of Cape Coral GIS. Beat iBoatMap.
   ═══════════════════════════════════════════════════════════════════ */

.canal-hud {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem;
  margin: 0 0 1.5rem;
  border: 1px solid rgba(24, 74, 115, 0.14);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

@media (max-width: 860px) {
  .canal-hud { grid-template-columns: 1fr; padding: 1.1rem; gap: 1rem; }
}

.canal-hud-search { min-width: 0; position: relative; }

.canal-hud-label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.canal-hud-label--inline {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0;
}

.canal-hud-search-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.canal-hud-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(24, 74, 115, 0.18);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.canal-hud-input:focus {
  outline: none;
  border-color: var(--sky-500);
  box-shadow: 0 0 0 3px rgba(24, 146, 216, 0.15);
}

.canal-hud-input-small {
  width: 78px;
  padding: 0.5rem 0.55rem;
  border: 1px solid rgba(24, 74, 115, 0.18);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: #fff;
}

.canal-hud-btn {
  padding: 0.85rem 1.3rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.canal-hud-btn:hover { background: var(--ink-700); transform: translateY(-1px); }
.canal-hud-btn:active { transform: translateY(0); }

.canal-hud-suggestions {
  position: absolute;
  z-index: 60;
  margin-top: 0.3rem;
  border: 1px solid rgba(24, 74, 115, 0.18);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  max-height: 280px;
  overflow-y: auto;
  left: 0;
  right: 0;
}
.canal-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(24, 74, 115, 0.06);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-800);
  cursor: pointer;
  text-align: left;
  gap: 0.6rem;
}
.canal-suggest-item:last-child { border-bottom: 0; }
.canal-suggest-item:hover,
.canal-suggest-item:focus { background: rgba(93, 167, 217, 0.08); outline: none; }
.canal-suggest-addr {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.canal-suggest-tag {
  flex: 0 0 auto;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
}
.canal-suggest-tag--salt { background: rgba(30, 111, 184, 0.14); color: #1e6fb8; }
.canal-suggest-tag--bridge { background: rgba(245, 158, 11, 0.16); color: #92400e; }
.canal-suggest-tag--fresh { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.canal-suggest-tag--none { background: rgba(100, 116, 139, 0.14); color: #475569; }

.canal-hud-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  align-items: center;
}

.canal-hud-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink-700);
  cursor: pointer;
  user-select: none;
}
.canal-hud-toggle input[type="checkbox"] {
  accent-color: var(--sky-500);
  width: 16px; height: 16px;
  cursor: pointer;
}

.canal-legend-modern {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(24, 74, 115, 0.08);
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-soft);
}
.canal-legend-modern span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1;
}
.canal-legend-modern i {
  display: inline-block;
  font-style: normal;
}
.canal-sw-salt { width: 22px; height: 4px; background: #1e6fb8; border-radius: 2px; }
.canal-sw-fresh { width: 22px; height: 4px; background: #0FA3B1; border-radius: 2px; }
.canal-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35); }
.canal-dot--ok   { background: #16a34a; }
.canal-dot--warn { background: #2E6FA3; }
.canal-dot--low  { background: #dc2626; }
.canal-dot--weir { background: #991b1b; border-radius: 2px; }
.canal-dot--exit { background: #16283E; }
.canal-legend-route i { width: 22px; height: 4px; background: #ff6b1a; border-radius: 2px; display: inline-block; box-shadow: 0 0 0 2px rgba(255, 181, 138, 0.45); }

/* Map + side panel workspace */
.canal-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1rem;
  align-items: stretch;
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-strong);
}

@media (max-width: 980px) {
  .canal-workspace { grid-template-columns: 1fr; }
}

.canal-map-frame {
  min-height: 620px;
  background: #eef2f6;
}
@media (max-width: 980px) { .canal-map-frame { min-height: 460px; } }

.canal-panel {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.25rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  border-left: 1px solid rgba(24, 74, 115, 0.1);
  max-height: 620px;
  overflow-y: auto;
}
@media (max-width: 980px) {
  .canal-panel {
    border-left: 0;
    border-top: 1px solid rgba(24, 74, 115, 0.1);
    max-height: none;
  }
}

/* Canal-map mobile packing rules superseded 2026-07-02 (MOBILE-PACK) — consolidated
   into the single "WATERWAY MAP — MOBILE PACK" @media (max-width: 860px) block at the
   end of this file, which now owns .canal-hud/.canal-hud-controls/.canal-hud-toggle/
   .canal-legend-*/.canal-map-frame/.canal-panel mobile behavior. See that block. */

.canal-panel-head { margin-bottom: 0.75rem; }
.canal-panel-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-500);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.canal-panel-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink-900);
  margin: 0 0 0.4rem;
}
.canal-panel-lede {
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0;
}

.canal-panel-body { flex: 1 1 auto; margin-top: 0.35rem; }
.canal-panel-status {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(24, 74, 115, 0.15);
  font-size: 0.72rem;
  color: var(--text-soft);
  font-family: var(--font-body);
}

/* Result / Detail cards */
.canal-result, .canal-detail {
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  font-family: var(--font-body);
}
.canal-result + .canal-result,
.canal-detail + .canal-detail { margin-top: 0.7rem; }

.canal-result-head, .canal-detail-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.3rem;
}
.canal-result-head h3, .canal-detail-head h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--ink-900);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
}
.canal-result-tag, .canal-detail-tag {
  flex: 0 1 auto;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(24, 146, 216, 0.12);
  color: #1e6fb8;
  line-height: 1.25;
  max-width: 100%;
  white-space: normal;
}
.canal-result-tag--sw-a, .canal-result-tag--sw-b, .canal-result-tag--sw-c,
.canal-result-tag--sw-d, .canal-result-tag--sw-e,
.canal-result-tag--salt { background: rgba(24, 111, 184, 0.14); color: #134a7a; }
.canal-result-tag--bridge { background: rgba(245, 158, 11, 0.16); color: #92400e; }
.canal-detail-tag--salt { background: rgba(24, 111, 184, 0.14); color: #134a7a; }
.canal-detail-tag--fresh { background: rgba(168, 181, 191, 0.2); color: #475569; }
.canal-detail-tag--bridge { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.canal-detail-tag--weir { background: rgba(153, 27, 27, 0.12); color: #991b1b; }
.canal-detail-tag--exit { background: rgba(46, 111, 163, 0.15); color: #16283E; }

@media (max-width: 520px) {
  .canal-result-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
  .canal-result-tag {
    width: 100%;
  }
}

.canal-result-sub, .canal-detail-sub {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.canal-result-grid, .canal-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
}
.canal-result-grid > div, .canal-detail-grid > div {
  background: #f7fafc;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
}
.canal-result-grid > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.canal-result-grid span, .canal-detail-grid span {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 700;
}
.canal-result-grid strong, .canal-detail-grid strong {
  display: block;
  font-size: 1rem;
  color: var(--ink-900);
  margin-top: 0.15rem;
}
.text-warn { color: #b45309 !important; }
.text-danger { color: #b91c1c !important; }

.canal-result-exit {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  background: rgba(46, 111, 163, 0.1);
  border-left: 3px solid #16283E;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--ink-700);
  flex-wrap: wrap;
}
.canal-result-exit span:first-child { color: var(--text-soft); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.canal-result-exit strong { color: var(--ink-900); font-family: var(--font-heading); font-size: 1rem; }

.canal-chip {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.canal-chip--warn { background: #fee2e2; color: #991b1b; }

.canal-result-bridges {
  margin-top: 0.7rem;
  background: #f7fafc;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}
.canal-result-bridges summary {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
}
.canal-result-bridges ul, .canal-detail-bridges {
  list-style: none;
  padding: 0.45rem 0 0;
  margin: 0;
  font-size: 0.85rem;
}
.canal-result-bridges li, .canal-detail-bridges li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-bottom: 1px dashed rgba(24, 74, 115, 0.1);
}
.canal-result-bridges li:last-child, .canal-detail-bridges li:last-child { border-bottom: 0; }
.canal-result-bridges li.is-warn span { color: #b45309; font-weight: 700; }
.canal-result-bridges li.is-low span { color: #b91c1c; font-weight: 700; }
.canal-result-bridges li.is-blocked { background: #fee2e2; }
.canal-result-bridges li.is-blocked strong { color: #991b1b; }
.canal-result-bridges li.is-unknown span { color: #64748b; font-style: italic; }

.canal-result-warn {
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: #fee2e2;
  border-left: 3px solid #b91c1c;
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
  color: #7f1d1d;
}

.canal-result-note, .canal-detail-note {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--text-soft);
  font-style: italic;
}

.canal-result-error {
  padding: 0.8rem 1rem;
  background: #fef2f2;
  border-left: 3px solid #b91c1c;
  border-radius: var(--radius-sm);
  color: #7f1d1d;
  font-size: 0.92rem;
}

/* Map icons */
.milner-weir-icon .milner-weir-dot {
  width: 14px; height: 14px;
  background: #991b1b;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.5);
}
.milner-exit-icon .milner-exit-pin {
  width: 26px; height: 34px;
  background: #16283E;
  border: 2px solid #fff;
  border-radius: 13px 13px 13px 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgba(15,23,42,0.35);
  display: flex; align-items: center; justify-content: center;
}
.milner-exit-icon .milner-exit-pin > span {
  transform: rotate(45deg);
  color: #78350f;
  font-weight: 800;
  font-size: 0.85rem;
}
.milner-address-icon .milner-address-pin {
  width: 22px; height: 30px;
  background: #ff6b1a;
  border: 2.5px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(15,23,42,0.4);
}

.canal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.5rem;
  padding: 0.95rem 1.1rem;
  margin: 0 0 1rem;
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: var(--radius-lg);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink-700);
  letter-spacing: 0.02em;
}

.canal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}

.canal-legend-swatch {
  display: inline-block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: #93c5e8;
}

.canal-legend-swatch--gulf {
  background: #1f7ccf;
  height: 4px;
}

.canal-legend-swatch--fresh {
  background: transparent;
  height: 4px;
  background-image: linear-gradient(to right, #93c5e8 0 6px, transparent 6px 12px);
  background-size: 12px 100%;
  background-repeat: repeat-x;
}

.canal-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35);
}

.canal-legend-dot--exit { background: #0f766e; }
.canal-legend-dot--clear { background: #16a34a; }
.canal-legend-dot--low { background: #2E6FA3; }
.canal-legend-dot--block { background: #dc2626; }

.waterway-field-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.waterway-field-inline .waterway-label {
  margin-bottom: 0;
}

.marine-map-card {
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-strong);
}

.marine-map-frame { width: 100%; min-height: 560px; border: 0; display: block; }

.marine-map-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1rem;
  border-top: 1px solid rgba(24, 74, 115, 0.12);
  background: var(--foam-100);
}

.waterway-toolbar {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr 0.78fr 0.95fr auto;
  gap: 0.75rem;
  align-items: end;
  padding: 1rem;
  border-bottom: 1px solid rgba(24, 74, 115, 0.12);
  background: linear-gradient(180deg, rgba(24, 146, 216, 0.05) 0%, transparent 100%), #fff;
}

.general-map-toolbar {
  display: grid;
  grid-template-columns: 2fr 1.4fr auto;
  gap: 0.75rem;
  align-items: end;
  padding: 1rem;
  border-bottom: 1px solid rgba(24, 74, 115, 0.12);
  background: linear-gradient(180deg, rgba(24, 146, 216, 0.05) 0%, transparent 100%), #fff;
}

.waterway-field { position: relative; min-width: 0; }
.waterway-field-small { max-width: 190px; }

.waterway-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.waterway-actions { display: flex; gap: 0.55rem; align-items: center; flex-wrap: wrap; }
.waterway-actions .btn { min-width: 150px; }

.waterway-address-suggestions {
  position: absolute;
  top: calc(100% + 0.28rem);
  left: 0;
  right: 0;
  z-index: 51;
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-strong);
  max-height: 270px;
  overflow-y: auto;
}

.waterway-address-suggestion {
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid rgba(24, 74, 115, 0.08);
  background: transparent;
  transition: background 0.15s;
}

.waterway-address-suggestion:last-child { border-bottom: 0; }
.waterway-address-suggestion:hover, .waterway-address-suggestion.is-active { background: var(--foam-100); }

.waterway-address-main { display: block; color: var(--ink-900); font-size: 0.82rem; font-weight: 600; line-height: 1.35; }
.waterway-address-subtitle { display: block; color: var(--text-soft); font-size: 0.73rem; line-height: 1.32; }
.waterway-results { width: 100%; }
.waterway-results-title { margin-bottom: 0.65rem; color: var(--text-soft); font-size: 0.92rem; }

.waterway-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}

.waterway-metric {
  border: 1px solid rgba(24, 74, 115, 0.12);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 0.65rem 0.75rem;
}

.waterway-metric-label { display: block; color: var(--text-soft); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 0.2rem; }
.waterway-metric strong { display: block; color: var(--ink-900); font-size: 1.02rem; }

.waterway-bridge-list { border: 1px solid rgba(24, 74, 115, 0.12); border-radius: var(--radius-md); background: #fff; padding: 0.75rem; }
.waterway-bridge-items { display: grid; gap: 0.45rem; margin: 0; padding-left: 1rem; font-size: 0.9rem; color: var(--text-soft); }
.waterway-bridge-items li { line-height: 1.45; }
.waterway-note { margin: 0; color: var(--text-soft); font-size: 0.9rem; }
.waterway-mode-note { padding: 0 1rem 0.85rem; border-bottom: 1px solid rgba(24, 74, 115, 0.12); }
.waterway-error { margin: 0; color: #b91c1c; font-weight: 600; font-size: 0.9rem; }

.waterway-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.18rem 0.52rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 0.35rem;
}

.waterway-badge-ok { background: #dcfce7; color: #166534; }
.waterway-badge-blocked { background: #fee2e2; color: #991b1b; }
.waterway-badge-unknown { background: #e2e8f0; color: #334155; }
.waterway-data-meta { margin-top: 0.7rem; color: var(--text-soft); font-size: 0.75rem; }

/* ═══ AI Chat Widget ═══ */
.ai-chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
}

.ai-chat-button {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--sky-500), var(--ink-700));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(24, 146, 216, 0.35);
  color: #fff;
  font-size: 1.5rem;
  transition: transform 0.25s, box-shadow 0.25s;
}

.ai-chat-button:hover { transform: scale(1.1); box-shadow: 0 12px 28px rgba(24, 146, 216, 0.5); }

.ai-chat-tooltip {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink-900);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.ai-chat-widget:hover .ai-chat-tooltip { opacity: 1; }
.mira-widget--open .ai-chat-tooltip { display: none; }

/* ═══ MIRA Chat Panel ═══ */
.mira-chat-panel {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100dvh - 120px);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(14, 34, 56, 0.25);
  display: flex;
  flex-direction: column;
  z-index: 49;
  overflow: hidden;
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.mira-chat-panel--open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.mira-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--ink-900), var(--sky-700, #0e6fa3));
  color: #fff;
  flex-shrink: 0;
}

.mira-chat-header-info { display: flex; align-items: center; gap: 0.75rem; }

.mira-chat-logo {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.mira-chat-header-info strong { display: block; font-size: 0.95rem; line-height: 1.2; }
.mira-chat-header-info span { font-size: 0.72rem; opacity: 0.75; letter-spacing: 0.03em; }

.mira-chat-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.mira-chat-close:hover { opacity: 1; }

.mira-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--foam-50, #f5faff);
  scroll-behavior: smooth;
}

.mira-msg {
  max-width: 85%;
  padding: 0.65rem 1rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  word-break: break-word;
}

.mira-msg--user {
  background: var(--sky-500);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
}

.mira-msg--assistant {
  background: #fff;
  color: var(--text);
  align-self: flex-start;
  border: 1px solid rgba(14, 34, 56, 0.1);
  border-bottom-left-radius: 0.25rem;
  box-shadow: 0 1px 3px rgba(14, 34, 56, 0.06);
}

.mira-msg--typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0.75rem 1rem;
}

.mira-msg--typing span {
  width: 7px;
  height: 7px;
  background: var(--text-soft);
  border-radius: 50%;
  animation: mira-bounce 1.2s infinite;
}
.mira-msg--typing span:nth-child(2) { animation-delay: 0.2s; }
.mira-msg--typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes mira-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-6px); opacity: 1; }
}

.mira-chat-input-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(14, 34, 56, 0.1);
  background: #fff;
  flex-shrink: 0;
}

.mira-chat-input {
  flex: 1;
  border: 1px solid rgba(14, 34, 56, 0.2);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s;
}
.mira-chat-input:focus { border-color: var(--sky-500); }

.mira-chat-send {
  width: 40px;
  height: 40px;
  background: var(--sky-500);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.mira-chat-send:hover { background: var(--ink-700); }
.mira-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 480px) {
  .mira-chat-panel { right: 8px; bottom: 80px; width: calc(100vw - 16px); }
}

/* ═══ Scroll to Top ═══ */
.scroll-to-top {
  position: fixed;
  bottom: 24px;
  right: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink-900);
  color: #fff;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
  z-index: 50;
}

.scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-to-top:hover { background: var(--sky-500); transform: translateY(-2px); }

/* ═══ Animations ═══ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in-up { animation: fadeInUp 0.6s ease forwards; }

/* ═══ WordPress Specific ═══ */
.alignwide { max-width: 1400px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-block-image img { border-radius: var(--radius-lg); }

.fluentform input, .fluentform textarea, .fluentform select,
.wpforms-form input, .wpforms-form textarea, .wpforms-form select,
.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select {
  font-family: var(--font-body) !important;
  padding: 0.78rem 0.9rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(24, 74, 115, 0.2) !important;
}

.fluentform button, .wpforms-form button, .wpcf7-form .wpcf7-submit {
  background: var(--ink-900) !important;
  color: #fff !important;
  padding: 0.7rem 1.5rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}

.fluentform button:hover, .wpforms-form button:hover, .wpcf7-form .wpcf7-submit:hover {
  background: var(--sky-500) !important;
}

/* ═══ Responsive ═══ */
/* P2 2026-07-05 defect fix: the header nav/hamburger swap and the
   content-grid collapse used to share the max-width:1100px breakpoint,
   but the desktop nav (Buyers/Sellers/Areas/Listings/About + Book a Call)
   doesn't actually fit next to the full wordmark logo until ~1190px wide.
   That left two bugs: (1) a 1021-1100px dead zone where BOTH the desktop
   nav and the mobile-toggle were hidden (min-width:1021 forced the toggle
   off with !important while max-width:1100 hid the nav), and (2) an
   1101-~1185px zone where the nav rendered but visually overlapped the
   brand wordmark ("BUYERS" over "...Future Realty"). Fix: give the
   header its own breakpoint at 1200px (verified clear with margin at
   1180/1190/1200/1250px renders) so the hamburger takes over before the
   collision range starts. The unrelated content-grid collapse below
   keeps its original 1100px breakpoint untouched. */
@media (min-width: 1201px) {
  .mobile-toggle { display: none !important; }
}

@media (max-width: 1200px) {
  .nav { display: none; }
  .header-inner { grid-template-columns: 1fr auto auto; }
  .mobile-toggle { display: inline-flex; }
  .mobile-drawer { display: block; }
  .brand-copy { display: none; }
  .brand-logo--icon { display: none; }
  .brand-logo--wordmark { display: block; }
}

@media (max-width: 1019px) {
  .header-actions { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
}

@media (max-width: 1100px) {

  .hero-grid, .content-wrap, .team-wrap, .map-wrap, .form-wrap,
  .cta-grid, .footer-grid, .split-section, .split-layout {
    grid-template-columns: 1fr;
  }

  .video-grid, .video-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visual-stack { min-height: 410px; }
  .path-grid, .intel-grid, .proof-grid, .resource-grid, .resources-grid,
  .services-grid, .process-grid, .contact-options { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .neighborhoods-grid { grid-template-columns: 1fr; }
  .proof-strip { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr; }

  .waterway-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .waterway-actions { grid-column: span 3; }
  .general-map-toolbar { grid-template-columns: 1fr 1fr; }
  .general-map-toolbar .waterway-actions { grid-column: span 2; }
  .waterway-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --header-h: 76px; }

  .container { width: min(var(--container), calc(100% - 1.4rem)); }

  .header-inner { grid-template-columns: 1fr auto; }
  .brand-title { font-size: 1.1rem; }
  .brand-kicker { font-size: 0.57rem; }
  .brand-logo--wordmark { height: 50px; }
  .header-actions { display: none; }

  .hero { padding-top: calc(var(--header-h) + 1.5rem); min-height: auto; }
  .hero h1 { font-size: clamp(1.9rem, 6.5vw, 2.6rem); }
  .hero-points { grid-template-columns: 1fr; }
  .hero-points span { font-size: 0.78rem; }

  section { padding: 3.2rem 0; }
  .section-head { margin-bottom: 1.4rem; }

  .hero-actions, .final-actions { flex-direction: column; }
  .hero-actions .btn, .final-actions .btn { width: 100%; }

  .path-grid, .intel-grid, .proof-grid, .video-grid, .video-cards { grid-template-columns: 1fr; }

  .floating-card { min-width: 145px; padding: 0.65rem 0.75rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; }
  .neighborhoods-grid { grid-template-columns: 1fr; }
  .proof-strip { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .waterway-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .general-map-toolbar { grid-template-columns: 1fr; }
  .waterway-field-small { max-width: none; }
  .waterway-actions { grid-column: span 2; width: 100%; }
  .general-map-toolbar .waterway-actions { grid-column: span 1; width: 100%; }
  .waterway-metrics { grid-template-columns: 1fr; }

  .booking-embed, .city-map-frame, .marine-map-frame { min-height: 520px; }

  .ai-chat-widget { bottom: 10px; right: 10px; opacity: 0.82; }
  .ai-chat-widget:focus-within, .ai-chat-widget:hover { opacity: 1; }
  .ai-chat-button { width: 44px; height: 44px; }
  .ai-chat-tooltip { display: none; }
  .scroll-to-top { right: 16px; bottom: 80px; }
}

@media (max-width: 576px) {
  .form-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 2rem; }
}

@media (max-width: 400px) {
  .brand-kicker { display: none; }
  .brand-title { font-size: 1.1rem; }
  .brand-logo--wordmark { height: 46px; }
}

/* Skip Link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sky-500);
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 10000;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top 0.15s;
}

.skip-link:focus { top: 0; color: #fff; }

/* Mortgage Calculator */
.mortgage-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.comparison-table th, .comparison-table td { white-space: nowrap; }
.comparison-table { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--slate-100); }
.comparison-table td { font-size: 0.88rem; }

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ''; }

/* ==========================================================================
   YOUTUBE SOCIAL PROOF BAND - content authority signal right under hero
   ========================================================================== */
.youtube-proof-band {
  padding: 1.5rem 0;
  background: linear-gradient(90deg, #0b1e33 0%, #10263d 50%, #0b1e33 100%);
  position: relative;
  overflow: hidden;
}

.youtube-proof-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255, 0, 51, 0.18), transparent 45%),
              radial-gradient(circle at 85% 50%, rgba(24, 146, 216, 0.22), transparent 45%);
  pointer-events: none;
}

.youtube-proof-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 40%, rgba(255, 255, 255, 0.04) 0px, transparent 2px),
    radial-gradient(circle at 45% 70%, rgba(255, 255, 255, 0.03) 0px, transparent 1.5px),
    radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.04) 0px, transparent 2px);
  background-size: 180px 180px;
  pointer-events: none;
  opacity: 0.6;
}

.yt-proof-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  color: #fff;
  transition: transform 0.35s ease;
}

.yt-proof-grid:hover { transform: translateX(-3px); }

.yt-proof-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.yt-proof-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.25;
}

.yt-proof-stats {
  display: flex;
  gap: 2.2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.yt-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
}

.yt-stat strong {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.01em;
}

.yt-stat span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.35rem;
}

.yt-proof-cta {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  transition: all 0.25s ease;
  color: #fff;
  white-space: nowrap;
}

.yt-proof-grid:hover .yt-proof-cta {
  background: #ff0033;
  border-color: #ff0033;
}

@media (max-width: 900px) {
  .yt-proof-grid { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
  .yt-proof-badge { justify-content: center; }
  .yt-proof-stats { gap: 1.25rem; }
  .yt-stat strong { font-size: 1.35rem; }
}

/* ==========================================================================
   REVIEWS CAROUSEL - editorial single-quote spotlight
   ========================================================================== */
.reviews-carousel {
  position: relative;
  max-width: 820px;
  margin: 2.5rem auto 0;
  padding: 0 3.5rem;
}

.carousel-track {
  position: relative;
  min-height: 320px;
  display: grid;
}

.review-slide {
  grid-area: 1 / 1;
  position: relative;
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.1);
  border-radius: var(--radius-lg);
  padding: 3rem 3rem 2.5rem;
  box-shadow: 0 30px 70px rgba(16, 38, 61, 0.08);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.review-slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.review-quote-mark {
  position: absolute;
  top: -0.35em;
  left: 1.25rem;
  font-family: var(--font-heading);
  font-size: 7rem;
  line-height: 1;
  color: var(--sky-300);
  opacity: 0.45;
  user-select: none;
  pointer-events: none;
}

.review-slide .stars {
  color: #2E6FA3;
  font-size: 1rem;
  letter-spacing: 0.18em;
}

.review-body {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  line-height: 1.45;
  color: var(--ink-900);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
}

.review-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(24, 74, 115, 0.08);
}

.review-meta strong {
  font-size: 0.95rem;
  color: var(--ink-900);
  font-weight: 700;
}

.review-meta span {
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.14);
  color: var(--ink-900);
  font-size: 1.6rem;
  font-family: var(--font-heading);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(16, 38, 61, 0.1);
  transition: transform 0.25s ease, background 0.25s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
}

.carousel-arrow:hover { background: var(--sky-500); color: #fff; transform: translateY(-50%) scale(1.08); }
.carousel-prev { left: 0; }
.carousel-next { right: 0; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.4rem;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(24, 74, 115, 0.18);
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
  padding: 0;
}

.carousel-dot.is-active {
  background: var(--sky-500);
  width: 28px;
  border-radius: 4px;
}

.carousel-dot:focus-visible {
  transform: scale(1.25);
}

.reviews-aggregate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 1.25rem 2rem;
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.1);
  border-radius: 999px;
  max-width: 960px;
  margin-inline: auto;
  margin-top: 3rem;
  box-shadow: var(--shadow-soft);
  flex-wrap: nowrap;
}

.aggregate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
}

.aggregate-item strong {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  color: var(--ink-900);
  line-height: 1;
}

.aggregate-item span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 0.3rem;
}

.aggregate-item-link {
  text-decoration: none;
  cursor: pointer;
}

.aggregate-item-link:hover strong {
  color: var(--brand-blue, #4a7fa5);
}

.aggregate-divider {
  width: 1px;
  height: 34px;
  background: rgba(24, 74, 115, 0.14);
}

@media (max-width: 700px) {
  .reviews-carousel { padding: 0; }
  .carousel-arrow { position: static; transform: none; display: inline-flex; margin: 1rem 0.5rem 0; }
  .carousel-arrow:hover { transform: scale(1.08); }
  .carousel-prev, .carousel-next { display: inline-flex; }
  .review-slide { padding: 2rem 1.5rem; }
  .review-body { font-size: 1.2rem; }
  .review-quote-mark { font-size: 5rem; left: 0.5rem; }
  .reviews-aggregate { gap: 1rem; padding: 1rem 1.25rem; flex-wrap: nowrap; }
  .aggregate-item strong { font-size: 1.3rem; }
  .aggregate-divider { display: none; }
}

/* ==========================================================================
   US VS TRADITIONAL AGENT TABLE - clear differentiation
   ========================================================================== */
.vs-table-wrapper {
  max-width: 980px;
  margin: 2.5rem auto 0;
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(16, 38, 61, 0.08);
}

.vs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.vs-table thead th {
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  background: var(--foam-100);
  color: var(--ink-900);
  border-bottom: 1px solid rgba(24, 74, 115, 0.1);
}

.vs-table thead th.vs-milner {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 100%);
  color: #fff;
  position: relative;
}

.vs-table thead th.vs-milner::before {
  content: "\2605";
  /* 2026-08-23: steel accent (gold retired on the marketing site). */
  color: var(--msx-gold);
  margin-right: 0.5rem;
}

.vs-table thead th.vs-other {
  color: var(--text-soft);
  font-style: italic;
  font-weight: 500;
}

.vs-table tbody tr {
  border-bottom: 1px solid rgba(24, 74, 115, 0.06);
  transition: background 0.2s ease;
}

.vs-table tbody tr:hover { background: rgba(238, 248, 255, 0.45); }
.vs-table tbody tr:last-child { border-bottom: none; }

.vs-table td {
  padding: 1.1rem 1.5rem;
  vertical-align: top;
  line-height: 1.5;
}

.vs-table td.vs-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  width: 180px;
  padding-top: 1.35rem;
}

.vs-table td.vs-milner {
  font-weight: 600;
  color: var(--ink-900);
  background: rgba(24, 146, 216, 0.035);
  position: relative;
}

/* MOVE 3 (2026-07-05): this "us vs average agent" table is decorative
   marketing chrome (not form validation/status data), so its checkmark
   circle is repointed off hardcoded green onto the IDX gold-metal finish -
   an earned-differentiator moment, per the doc-28 "no red/green in chrome"
   rule. The cross stays a neutral navy-ink circle rather than alarm-red. */
.vs-table td.vs-milner::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  background: var(--msx-gold-metal);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 900;
  margin-right: 0.6rem;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
}

.vs-table td.vs-other {
  color: var(--text-soft);
  font-style: italic;
}

.vs-table td.vs-other::before {
  content: "✕";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  background: var(--ink-700);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 900;
  margin-right: 0.6rem;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
}

@media (max-width: 800px) {
  .vs-table thead { display: none; }
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table td { display: block; width: 100%; }
  .vs-table tr { padding: 1.25rem; border-bottom: 1px solid rgba(24, 74, 115, 0.08); }
  .vs-table td { padding: 0.35rem 0; display: flex; align-items: flex-start; gap: 0.5rem; }
  .vs-table td.vs-label { width: auto; padding-top: 0; margin-bottom: 0.25rem; display: block; }
  .vs-table td.vs-milner { background: transparent; }
  .vs-table td.vs-milner::before,
  .vs-table td.vs-other::before { flex-shrink: 0; margin-right: 0; margin-top: 0.1rem; }
}

/* ==========================================================================
   IMPECCABLE REFINEMENTS - scroll reveals, micro-motion, subtle grain
   ========================================================================== */
/* P0 2026-07-05: reveal choreography REMOVED site-wide. The IntersectionObserver
   threshold/unobserve mechanism left below-the-fold sections ghosted at partial
   opacity on /relocate/, /neighborhoods/, /cape-coral/, /sell/ and others after
   real scrolling. Content must never be invisible (content > choreography) -
   .reveal-section and its cards are now unconditionally fully visible with no
   dependency on scroll/JS at all. See js/theme.js initSectionReveals(). */
.reveal-section { opacity: 1; transform: none; }
.reveal-section .service-band-grid > .service-band-card { opacity: 1; transform: none; }
.review-slide { transition: none; }

/* Refined hover on path/intel/proof cards - very subtle lift, not floaty */
.path-card, .intel-card, .card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.path-card:hover, .intel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(16, 38, 61, 0.12);
  border-color: rgba(24, 146, 216, 0.35);
}

/* Subtle animated underline on section-kicker for editorial polish */
.section-kicker {
  position: relative;
  display: inline-block;
}

/* Refined hero headline italic emphasis */
.hero h1 em {
  font-style: italic;
  color: var(--sky-500);
  font-weight: 500;
  position: relative;
}

/* Staggered reveal for hero points */
.hero-points span {
  opacity: 0;
  animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-points span:nth-child(1) { animation-delay: 0.3s; }
.hero-points span:nth-child(2) { animation-delay: 0.4s; }
.hero-points span:nth-child(3) { animation-delay: 0.5s; }
.hero-points span:nth-child(4) { animation-delay: 0.6s; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-actions .btn {
  animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
  animation-delay: 0.65s;
}

.hero-actions .btn:nth-child(2) { animation-delay: 0.75s; }
.hero-actions .btn:nth-child(3) { animation-delay: 0.85s; }

@media (prefers-reduced-motion: reduce) {
  .hero-points span, .hero-actions .btn { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
  .mortgage-calc-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BUYER PAGE - editorial + FL reality
   ========================================================================== */
.buy-hero {
  padding: calc(var(--header-h) + 3rem) 0 4rem;
  background:
    radial-gradient(ellipse at top right, rgba(67, 183, 239, 0.25), transparent 50%),
    linear-gradient(180deg, #f3f9ff 0%, #eef5fd 100%);
  position: relative;
  overflow: hidden;
}

.buy-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(16, 38, 61, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.buy-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: center;
}

.buy-hero-copy .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky-500);
  font-weight: 700;
  background: rgba(24, 146, 216, 0.1);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.buy-hero-copy h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.08;
  color: var(--ink-900);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

.buy-hero-copy h1 em {
  font-style: italic;
  color: var(--sky-500);
  font-weight: 500;
}

.buy-hero-lead {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 1.75rem;
  max-width: 560px;
}

.buy-hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
/* P2 2026-07-05 align sweep: /buy/ hero 3-CTA row ("Browse Active Listings" /
   "Book Your Relocation Gameplan" / "Run the Numbers") wrapped 2+1 at 1440 —
   third button orphaned. Same fix pattern as .hero-ed-actions: tighten to fit
   one row at real desktop widths, stack below that instead of a 2+1 wrap. */
.buy-hero-actions:has(> :nth-child(3)) { gap: 0.4rem; }
.buy-hero-actions:has(> :nth-child(3)) .btn {
  padding: 0.75rem 0.8rem;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
}
@media (max-width: 1300px) {
  .buy-hero-actions:has(> :nth-child(3)) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.buy-hero-trust {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(24, 74, 115, 0.14);
  max-width: 500px;
}

.buy-hero-trust > div { display: flex; flex-direction: column; }

.buy-hero-trust strong {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--ink-900);
  line-height: 1;
}

.buy-hero-trust span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 0.35rem;
}

.buy-hero-visual {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 50px 100px rgba(16, 38, 61, 0.18);
}

.buy-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.buy-hero-visual:hover img { transform: scale(1.03); }

.buy-hero-float {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  background: rgba(16, 38, 61, 0.88);
  backdrop-filter: blur(16px);
  color: #fff;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.buy-float-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.25rem;
}

.buy-hero-float strong {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  display: block;
  color: #fff;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.buy-hero-float strong em {
  font-style: italic;
  color: var(--sky-300);
  font-weight: 500;
}

.buy-hero-float small {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 900px) {
  .buy-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .buy-hero-trust { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
  .buy-hero-trust strong { font-size: 1.2rem; }
  .buy-hero-visual { aspect-ratio: 16 / 10; }
}

/* Buyer Paths */
.buy-paths { padding: 5rem 0; }

.buy-path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.buy-path-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.1);
  border-radius: 20px;
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
}

.buy-path-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(24, 146, 216, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.buy-path-card:hover {
  transform: translateY(-6px);
  border-color: var(--sky-500);
  box-shadow: 0 28px 60px rgba(16, 38, 61, 0.1);
}

.buy-path-card:hover::before { opacity: 1; }

.buy-path-card--featured {
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 100%);
  color: #fff;
  border-color: var(--ink-900);
}

.buy-path-card--featured h3, .buy-path-card--featured p { color: #fff; }
.buy-path-card--featured .buy-path-num { color: var(--sky-300); }
.buy-path-card--featured:hover { border-color: var(--sky-400); }

.buy-path-num {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--sky-500);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.buy-path-card h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--ink-900);
  margin: 0.25rem 0 0.5rem;
}

.buy-path-card p {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.buy-path-card--featured h3 { color: #fff; }
.buy-path-card--featured p { color: rgba(255, 255, 255, 0.75); }

.buy-path-mini {
  display: grid;
  gap: 0.65rem;
  padding-top: 0.35rem;
}

.buy-path-mini span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky-500);
}

.buy-path-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.buy-path-list li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-soft);
}

.buy-path-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--sky-500);
}

.buy-path-card--featured .buy-path-mini span { color: var(--sky-300); }
.buy-path-card--featured .buy-path-list li { color: rgba(255, 255, 255, 0.78); }
.buy-path-card--featured .buy-path-list li::before { background: var(--sky-300); }

.buy-path-cta {
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-500);
}

.buy-path-card--featured .buy-path-cta { color: var(--sky-300); }

@media (max-width: 900px) {
  .buy-path-grid { grid-template-columns: 1fr; }
}

/* Reality Check */
.reality-check { padding: 5rem 0; background: #fff; }

.reality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

.reality-card {
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.1);
  border-radius: 14px;
  padding: 1.4rem 1.35rem 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  /* P2 2026-07-05 align sweep: grid rows already stretch these cards to equal
     height, but the tag link wasn't pinned to the card bottom, so its Y
     position tracked each card's own paragraph length instead of a shared
     baseline. Flex column + margin-top:auto on the tag pins all three tags
     to the same bottom edge. */
  display: flex;
  flex-direction: column;
}

.reality-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--sky-500), var(--sky-400));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s ease;
}

.reality-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(16, 38, 61, 0.1);
}

.reality-card:hover::before { transform: scaleY(1); }

.reality-amount {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink-900);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.reality-amount span {
  font-size: 0.95rem;
  color: var(--text-soft);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.reality-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--ink-900);
  margin-bottom: 0.5rem;
}

.reality-card p {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* FLAT TAG TOKEN (owner 07-05 de-buttonize pass, §3 affordance law): the
   buy-page cost-card + reviewer caption chips read as dead buttons — flatten
   to a left-rule label, no bg/radius. */
.reality-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-500);
  font-weight: 600;
  padding: 0.1rem 0 0.1rem 0.65rem;
  background: none;
  border-left: 2px solid rgba(24, 146, 216, 0.35);
  border-radius: 0;
  /* P2 2026-07-05: pins the tag to the shared card bottom (see .reality-card
     flex-column above), so QUOTE EARLY / FEMA ZONE / VERIFY STATUS all sit
     on one baseline instead of tracking each card's own paragraph length. */
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 1024px) {
  .reality-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reality-grid { grid-template-columns: 1fr; }
  .team-member-card,
  .team-member-card:nth-child(even) { flex-direction: column; }
  .team-member-photo,
  .team-member-photo-placeholder {
    width: 100%;
    min-width: unset;
    height: 280px;
    min-height: unset;
    object-position: center 15%;
  }
  .team-member-info { padding: 1.5rem; }
}

/* Buyer Form Split */
.buyer-form-section { padding: 5rem 0; background: var(--foam-100); }

.buyer-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: start;
}

.buyer-form-copy .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky-500);
  font-weight: 700;
  background: rgba(24, 146, 216, 0.1);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.buyer-form-copy h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  color: var(--ink-900);
  margin-bottom: 1rem;
  line-height: 1.15;
}

.buyer-form-copy p {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.buyer-form-card {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 30px 70px rgba(16, 38, 61, 0.1);
  border: 1px solid rgba(24, 74, 115, 0.08);
}

.buyer-form-card h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--ink-900);
  margin-bottom: 0.25rem;
}

@media (max-width: 900px) {
  .buyer-form-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Loan Compare Table */
.loan-compare { padding: 5rem 0; }

.loan-table-wrap {
  max-width: 980px;
  margin: 2.5rem auto 0;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(24, 74, 115, 0.1);
  box-shadow: 0 30px 70px rgba(16, 38, 61, 0.08);
}

.loan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.loan-table thead th {
  padding: 1.2rem 1rem;
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 100%);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  text-align: left;
}

.loan-table thead th:first-child {
  background: var(--foam-100);
  color: var(--ink-900);
  font-weight: 600;
}

.loan-table tbody th {
  text-align: left;
  padding: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--foam-100);
  white-space: nowrap;
  vertical-align: middle;
}

.loan-table tbody td {
  padding: 1rem;
  color: var(--ink-900);
  font-weight: 500;
  border-bottom: 1px solid rgba(24, 74, 115, 0.06);
  border-left: 1px solid rgba(24, 74, 115, 0.04);
}

.loan-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 900px) {
  .loan-table-wrap { overflow-x: auto; }
  .loan-table { min-width: 720px; }
}

@media (max-width: 600px) {
  .loan-table-wrap { overflow-x: visible; border-radius: 0; box-shadow: none; background: transparent; border: none; }
  .loan-table { min-width: 0; display: block; }
  .loan-table thead { display: none; }
  .loan-table tbody { display: block; }
  .loan-table tbody tr {
    display: block;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(24, 74, 115, 0.12);
    background: #fff;
    box-shadow: 0 4px 20px rgba(16, 38, 61, 0.06);
  }
  .loan-table tbody th {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 100%);
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    padding: 0.75rem 1rem;
    white-space: normal;
  }
  .loan-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    border-left: none;
    border-bottom: 1px solid rgba(24, 74, 115, 0.06);
    gap: 0.75rem;
  }
  .loan-table tbody tr:last-child td:last-child { border-bottom: none; }
  .loan-table tbody td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-soft);
    flex-shrink: 0;
    min-width: 90px;
  }
}

/* Process Steps V2 */
.process-section { padding: 5rem 0; }

.process-steps-v2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

.process-step-v2 {
  padding: 1.75rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.08);
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
}

.process-step-v2:hover {
  transform: translateY(-3px);
  border-color: var(--sky-500);
  box-shadow: 0 20px 40px rgba(16, 38, 61, 0.08);
}

.step-num {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--sky-500);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.process-step-v2 h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--ink-900);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.process-step-v2 p {
  color: var(--text-soft);
  font-size: 0.85rem;
  line-height: 1.55;
}

@media (max-width: 1000px) {
  .process-steps-v2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .process-steps-v2 { grid-template-columns: 1fr; }
}

/* FAQ List */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

.faq-item {
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.1);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  transition: all 0.3s ease;
}

.faq-item[open] {
  border-color: var(--sky-500);
  box-shadow: 0 16px 40px rgba(16, 38, 61, 0.06);
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--ink-900);
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--sky-500);
  font-weight: 400;
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
  content: "\2212";
  transform: translateY(-50%) rotate(0);
}

.faq-item p {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(24, 74, 115, 0.08);
}

/* Related cards with hover CTA */
.card-link {
  text-decoration: none;
  color: inherit;
  text-align: center;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-link-cta {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky-500);
}

.card-link:hover .card-link-cta { letter-spacing: 0.14em; }

/* Lead paragraph emphasis */
.lead {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 1.25rem;
}

/* ============================================================
   EDITORIAL LUXURY UPGRADE - AgentFire-grade patterns
   ============================================================ */

/* Luxury eyebrow - used above editorial H2s */
.eyebrow-lux {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--sky-700);
  margin-bottom: 1.25rem;
  position: relative;
  padding-left: 44px;
}
.eyebrow-lux::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--sky-700);
}
.eyebrow-lux--dark {
  color: var(--ink-900);
}
.eyebrow-lux--dark::before {
  background: var(--ink-900);
}
.eyebrow-lux--light {
  color: var(--sky-300);
}
.eyebrow-lux--light::before {
  background: var(--sky-300);
}

/* Editorial H2 - larger serif, tight tracking */
.h-editorial {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.h-editorial em {
  font-style: italic;
  color: var(--sky-700);
  font-weight: 400;
}

/* Luxury display H1 - hero-scale */
.h-display {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(3rem, 7.5vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.h-display em {
  font-style: italic;
  color: var(--sky-700);
  font-weight: 400;
}
.h-display-light {
  color: #fff;
}
.h-display-light em {
  color: var(--sky-500);
}

/* ---------- LUXURY ALL-CAPS HEADER NAV ---------- */
.site-header--lux .nav-main-link,
.site-header--lux .nav-menu-item > a {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.74rem;
  font-weight: 600;
}
.site-header--lux .nav-btn-primary {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.72rem;
}

/* Subtle brand-blue underline on nav hover */
.nav-main-link {
  position: relative;
}
.nav-main-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--sky-700);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-main-link:hover::after,
.nav-main-link.is-active::after {
  transform: scaleX(1);
}

/* ---------- EDITORIAL HERO (full-bleed, AgentFire-scale) ---------- */
.hero-editorial {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  padding: clamp(7rem, 9vw, 9rem) 0 clamp(4rem, 7vw, 7rem);
  background:
    radial-gradient(circle at 80% 10%, rgba(96, 195, 239, 0.18), transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(43, 128, 187, 0.14), transparent 40%),
    linear-gradient(180deg, #f7fbff 0%, #f6f8fb 55%, #eef8ff 100%);
  overflow: hidden;
}
.hero-editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(16, 38, 61, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 38, 61, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  pointer-events: none;
}
.hero-editorial .container {
  position: relative;
  z-index: 2;
}
.hero-ed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 960px) {
  /* minmax(0,1fr) allows the track to shrink below content min-width — prevents overflow */
  .hero-ed-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .hero-editorial { overflow-x: clip; }
}
.hero-ed-copy {
  max-width: 640px;
}
.hero-ed-h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.8rem, 5.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  margin: 1.1rem 0 1.75rem;
  text-wrap: pretty;
}
.hero-ed-h1--keyword {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  margin-bottom: 1.1rem;
}
.hero-ed-h1 em {
  font-style: italic;
  color: var(--sky-700);
  font-weight: 400;
  display: inline-block;
}
/* 2026-08-23 audit fix: two mobile H1 rules lived in an earlier media block and
   lost the cascade to the base rule below (equal specificity, source order), so
   phones rendered the 44.8px desktop floor and the inline-block em could clip
   mid-word (seen on /fort-myers/). Kept after the base rule so they apply. */
@media (max-width: 768px) {
  .hero-ed-h1 { font-size: clamp(1.75rem, 6.5vw, 2.4rem); }
  .hero-ed-h1 em { display: inline; }
}
.hero-ed-lede {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 520px;
  margin-bottom: 0.5rem;
}
.hero-tagline {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  font-weight: 700;
  color: var(--text);
  max-width: 520px;
  margin-bottom: 2.25rem;
}
.hero-ed-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}
/* P2 2026-07-05 align sweep: home/relocate hero 3-CTA groups wrapped 2+1 at
   1440 — the third button orphaned on its own line because the hero-ed-copy
   column (~600px at 1440) is narrower than 3 full-size .btn-lux pills need.
   Scope to :has(3rd child) only, so the 2-button midroll CTA row (relocate
   "Get the Guide" / "Book the Call") is untouched. Tighten padding/tracking
   just enough to fit all 3 on one row at real desktop widths (>=1300px);
   below that, stack instead of risking a 2+1 wrap in the mid-range. */
.hero-ed-actions:has(> :nth-child(3)) { gap: 0.5rem; }
.hero-ed-actions:has(> :nth-child(3)) .btn-lux,
.hero-ed-actions:has(> :nth-child(3)) .btn-lux-outline {
  padding: 0.8rem 1.05rem;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
}
@media (max-width: 1300px) {
  .hero-ed-actions:has(> :nth-child(3)) {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* SPEEDCACHE2 mobile CTA fix (2026-07-07, web-seat): tiered hero CTA
   hierarchy (primary button / secondary button / compact tertiary link
   row), replacing the old 3-equal-weight-button row that stacked with NO
   visual hierarchy on mobile (owner: "stack on top of each other").
   Scoped to .hero-ed-actions--tiered so the plain .hero-ed-actions used
   elsewhere (relocate 2-CTA row, signature feature actions, etc.) is
   untouched. */
.hero-ed-actions--tiered {
  align-items: flex-start;
  gap: 0.85rem;
}
.hero-ed-actions--tiered .hero-cta-primary,
.hero-ed-actions--tiered .hero-cta-secondary {
  flex: 0 0 auto;
}
.hero-ed-actions--tiered .hero-cta-secondary {
  opacity: 0.88;
  font-size: 0.7rem;
  padding: 0.85rem 1.6rem;
}
.hero-ed-actions--tiered .hero-cta-tertiary {
  flex-basis: 100%;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-top: 0.15rem;
}
.hero-ed-actions--tiered .hero-cta-tertiary a {
  color: var(--sky-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-ed-actions--tiered .hero-cta-tertiary a:hover,
.hero-ed-actions--tiered .hero-cta-tertiary a:focus-visible {
  color: var(--ink-900);
}
@media (max-width: 640px) {
  .hero-ed-actions--tiered {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-ed-actions--tiered .hero-cta-primary,
  .hero-ed-actions--tiered .hero-cta-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .hero-ed-actions--tiered .hero-cta-secondary {
    font-size: 0.78rem;
  }
  .hero-ed-actions--tiered .hero-cta-tertiary {
    justify-content: center;
    margin-top: 0.35rem;
  }
}
.hero-ed-proof {
  display: grid;
  /* P1 2026-07-05: minmax(0,1fr) (not bare 1fr) so a long value (e.g. agent
     BROKERAGE "Florida Future Realty") can't blow the grid tracks past
     max-width and run under the portrait / "Back to roster" chip at 1440,
     or clip off-screen at 768. Bare `1fr` uses min-width:auto, which lets
     nowrap content force the track wider than its share. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(16, 38, 61, 0.12);
  max-width: 560px;
}
.hero-ed-proof-item .num {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.15;
  margin-bottom: 0.35rem;
  /* P1 2026-07-05: was `nowrap` — forced long values (agent BROKERAGE) to
     overflow their grid cell instead of wrapping. Short values (3 Gen,
     2008, 400+ mi) never needed a full line anyway, so normal is safe. */
  white-space: normal;
  /* P2 2026-07-05 align sweep: break-word was breaking mid-word inside long
     single/hyphenated words at the narrow 3-col track ("Hand-pick/ed",
     "Third-Generatio/n") — only wrap at real word boundaries now. min-height
     reserves 2 lines and bottom-aligns the value so the .lbl sublabel below
     always starts at the same row position, whether the value wrapped or not. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  min-height: 2.5em;
  display: flex;
  align-items: flex-end;
}
@media (max-width: 600px) {
  /* 2026-08-23: compact 3-col stat bar instead of the full-height 1-col stack;
     stacked proof items pushed the hero photo below the fold and read sparse. */
  .hero-ed-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; gap: 0.75rem; padding-top: 1.25rem; }
  .hero-ed-proof-item .num { white-space: normal; font-size: 1.05rem; min-height: 0; }
  .hero-ed-proof-item .lbl { font-size: 0.56rem; letter-spacing: 0.08em; }
}
.hero-ed-proof-item .lbl {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
}

/* Editorial hero visual - layered images, parallax feel */
.hero-ed-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 540px;
  margin-left: auto;
  justify-self: stretch;
}
.hero-ed-visual::before {
  content: "";
  position: absolute;
  inset: -24px -24px 24px 24px;
  border: 1px solid var(--sky-500);
  border-radius: 2px;
  opacity: 0.8;
  transform: translate(0, 0);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.hero-ed-visual:hover::before {
  transform: translate(6px, 6px);
}
.hero-ed-visual-frame {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ink-900), var(--ink-700));
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-editorial);
}
.hero-ed-visual-frame img,
.hero-ed-visual-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  animation: milner-cinema-zoom 20s var(--ease-lux, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
@keyframes milner-cinema-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ed-visual-frame img,
  .hero-ed-visual-frame video { animation: none; }
}
}
.hero-ed-badge {
  position: absolute;
  left: -28px;
  bottom: 48px;
  background: #fff;
  padding: 1.1rem 1.4rem;
  border-radius: 2px;
  box-shadow: var(--shadow-strong);
  max-width: 220px;
  z-index: 3;
}
.hero-ed-badge-kicker {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sky-700);
  margin-bottom: 0.35rem;
  font-weight: 700;
}
.hero-ed-badge-text {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink-900);
  font-weight: 500;
}
@media (max-width: 960px) {
  /* Mobile first fold was all-text (photo stacked below the fold). Photo-first
     with a landscape crop puts the owned aerial in the first viewport. */
  .hero-ed-visual { order: -1; aspect-ratio: 16 / 10; max-width: 100%; margin-left: 0; }
}
@media (max-width: 768px) {
  .hero-ed-visual::before { inset: -8px -8px 8px 8px; }
  .hero-ed-badge { left: 8px; bottom: 16px; max-width: calc(100% - 32px); }
  .hero-ed-actions { margin-bottom: 2rem; }
}
@media (max-width: 600px) {
  /* On a ~230px-tall photo the white badge card is clutter, not charm */
  .hero-ed-badge { display: none; }
}

/* Scroll hint */
.hero-ed-scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-soft);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.hero-ed-scroll::before {
  content: "";
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, var(--sky-700));
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* ---------- LUXURY LEAD CAPTURE (persistent pattern) ---------- */
.lux-lead-capture {
  padding: clamp(4rem, 7vw, 7rem) 0;
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 50%, var(--ink-900) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.lux-lead-capture::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(96, 195, 239, 0.16), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(43, 128, 187, 0.20), transparent 45%);
  pointer-events: none;
}
.lux-lead-capture .container {
  position: relative;
  z-index: 2;
}
.lux-lead-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) {
  .lux-lead-grid { grid-template-columns: 1fr; }
}
.lux-lead-copy h2 {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}
.lux-lead-copy h2 em {
  color: var(--sky-500);
  font-weight: 400;
}
.lux-lead-copy p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.lux-lead-bullets {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: grid;
  gap: 0.85rem;
}
.lux-lead-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.98rem;
  line-height: 1.55;
}
.lux-lead-bullets li::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  background: var(--sky-500);
  transform: rotate(45deg);
}
.lux-lead-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  padding: clamp(2rem, 3.5vw, 3rem);
  border-radius: 2px;
  position: relative;
}
.lux-lead-form::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--sky-500), var(--sky-500));
}
.lux-lead-form-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sky-500);
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.lux-lead-form h3 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.lux-lead-form p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}
.lux-lead-form .form-card {
  background: #fff;
  color: var(--text);
}
.lux-lead-form .form-card h3,
.lux-lead-form .form-title {
  color: var(--ink-900);
}
.lux-lead-form .form-card p,
.lux-lead-form .form-subtitle {
  color: var(--text-soft);
}

.section-lux--cream .lux-lead-copy h2,
.section-lux--cream .lux-lead-form h3 {
  color: var(--ink-900);
}
.section-lux--cream .lux-lead-copy h2 em {
  color: var(--sky-700);
}
.section-lux--cream .lux-lead-copy p,
.section-lux--cream .lux-lead-bullets li {
  color: var(--ink-700);
}
.section-lux--cream .lux-lead-form {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(24, 74, 115, 0.14);
  box-shadow: 0 22px 60px -36px rgba(10, 30, 60, 0.32);
  backdrop-filter: none;
}
.section-lux--cream .lux-lead-form p {
  color: var(--text-soft);
}

/* ---------- SELL PAGE - editorial rebuild styles ---------- */
.sell-hero {
  position: relative;
  padding: clamp(5rem, 8vw, 8rem) 0 clamp(4rem, 6vw, 6rem);
  background:
    radial-gradient(circle at 80% 10%, rgba(96, 195, 239, 0.18), transparent 40%),
    linear-gradient(180deg, #f7fbff 0%, #f6f8fb 60%, #eef8ff 100%);
  overflow: hidden;
}
.sell-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(16, 38, 61, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 38, 61, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  pointer-events: none;
}
.sell-hero .container { position: relative; z-index: 2; }
.sell-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 960px) {
  .sell-hero-grid { grid-template-columns: 1fr; }
}
.sell-hero-copy h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.8rem, 6.5vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 1rem 0 1.5rem;
}
.sell-hero-copy h1 em {
  font-style: italic;
  color: var(--sky-700);
  font-weight: 400;
}
.sell-hero-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 2rem;
  max-width: 560px;
}
.sell-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.sell-hero-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(16, 38, 61, 0.12);
  max-width: 560px;
}
@media (max-width: 560px) {
  .sell-hero-proof { grid-template-columns: repeat(2, 1fr); }
  .sell-hero-proof-item .num { min-height: 0; }
}
.sell-hero-proof-item .num {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.15;
  margin-bottom: 0.3rem;
  /* P2 2026-07-05 align sweep: shares the hero-ed-proof baseline bug — when
     one value wraps to 2 lines ("Since 2008") and its neighbors stay on 1
     ("3-P", "12 days", "30 days"), the sublabels below sit at mismatched
     baselines across the row. Reserve 2-line height, bottom-align the value. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  min-height: 2.3em;
  display: flex;
  align-items: flex-end;
}
.sell-hero-proof-item .lbl {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
}
.sell-hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 500px;
  margin-left: auto;
  justify-self: stretch;
}
.sell-hero-visual::before {
  content: "";
  position: absolute;
  inset: -20px -20px 20px 20px;
  border: 1px solid var(--sky-500);
  opacity: 0.7;
  pointer-events: none;
}
.sell-hero-visual-frame {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ink-900), var(--ink-700));
  overflow: hidden;
  box-shadow: var(--shadow-editorial);
}
.sell-hero-visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sell-hero-badge {
  position: absolute;
  right: -24px;
  top: 40px;
  background: #fff;
  padding: 1rem 1.3rem;
  box-shadow: var(--shadow-strong);
  max-width: 200px;
  z-index: 3;
}
.sell-hero-badge-kicker {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-700);
  margin-bottom: 0.3rem;
  font-weight: 700;
}
.sell-hero-badge-text {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink-900);
  font-weight: 500;
}
@media (max-width: 768px) {
  .sell-hero-visual::before { display: none; }
  .sell-hero-badge { right: 12px; top: 20px; }
}

/* Sell valuation split */
.sell-valuation-section { padding: clamp(4rem, 7vw, 7rem) 0; background: var(--cream-100); }
.sell-val-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .sell-val-grid { grid-template-columns: 1fr; } }
.sell-val-copy h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--ink-900);
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}
.sell-val-copy h2 em {
  font-style: italic;
  color: var(--sky-700);
  font-weight: 400;
}
.sell-val-copy p {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}
.sell-val-form {
  background: #fff;
  padding: clamp(2rem, 3.5vw, 3rem);
  box-shadow: var(--shadow-strong);
  border-top: 3px solid var(--sky-700);
}

/* Sell 3P system */
.sell-3p { padding: clamp(4rem, 7vw, 7rem) 0; }
.sell-3p-intro { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; }
.sell-3p-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .sell-3p-grid { grid-template-columns: 1fr; } }
.sell-3p-card {
  background: #fff;
  padding: clamp(2rem, 3vw, 2.75rem);
  border: 1px solid rgba(16, 38, 61, 0.08);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.sell-3p-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
}
.sell-3p-card--featured {
  background: linear-gradient(180deg, var(--ink-900), var(--ink-800));
  color: #fff;
  border: none;
  transform: translateY(-12px);
}
.sell-3p-card--featured:hover { transform: translateY(-18px); }
.sell-3p-num {
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 1;
  color: var(--sky-700);
  margin-bottom: 1rem;
  font-weight: 400;
  font-style: italic;
}
.sell-3p-card--featured .sell-3p-num { color: var(--sky-500); }
.sell-3p-card h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: var(--ink-900);
}
.sell-3p-card--featured h3 { color: #fff; }
.sell-3p-lead {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-soft);
  margin-bottom: 1.25rem;
}
.sell-3p-card--featured .sell-3p-lead { color: rgba(255, 255, 255, 0.78); }
.sell-3p-card ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.sell-3p-card ul li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.sell-3p-card ul li::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  background: var(--sky-700);
  border-radius: 50%;
  margin-top: 8px;
}
.sell-3p-card--featured ul li { color: rgba(255, 255, 255, 0.78); }
.sell-3p-card--featured ul li::before { background: var(--sky-500); }

/* Sell timeline */
.sell-timeline-section {
  padding: clamp(4rem, 7vw, 7rem) 0;
  background: var(--cream-100);
}
.sell-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
  position: relative;
}
@media (max-width: 900px) { .sell-timeline { grid-template-columns: 1fr; } }
.sell-timeline::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, var(--sky-700), var(--sky-500));
  z-index: 0;
}
@media (max-width: 900px) { .sell-timeline::before { display: none; } }
.sell-timeline-item {
  position: relative;
  z-index: 1;
  padding-top: 3rem;
  background: var(--cream-100);
}
.sell-timeline-item::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: var(--sky-700);
  border: 3px solid var(--cream-100);
  border-radius: 50%;
  z-index: 2;
}
.sell-timeline-week {
  font-family: var(--font-eyebrow);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 700;
  margin-bottom: 0.65rem;
  text-align: center;
}
.sell-timeline-item h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink-900);
  margin-bottom: 0.65rem;
  text-align: center;
}
.sell-timeline-item p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-soft);
  text-align: center;
}

/* Sell marketing channel grid */
.sell-marketing { padding: clamp(4rem, 7vw, 7rem) 0; }
.sell-mkt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (max-width: 900px) { .sell-mkt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sell-mkt-grid { grid-template-columns: 1fr; } }
.sell-mkt-card {
  background: #fff;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(16, 38, 61, 0.08);
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.sell-mkt-card:hover {
  transform: translateY(-4px);
  border-color: var(--sky-500);
}
.sell-mkt-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: var(--sky-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sell-mkt-icon svg { width: 100%; height: 100%; }
.sell-mkt-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink-900);
  margin-bottom: 0.5rem;
}
.sell-mkt-card p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ---------- GUIDE / LEAD MAGNET PAGE ---------- */
.guide-hero {
  padding: clamp(5rem, 8vw, 8rem) 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(96, 195, 239, 0.16), transparent 40%),
    linear-gradient(180deg, var(--cream-100) 0%, #f6f8fb 100%);
  position: relative;
  overflow: hidden;
}
.guide-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .guide-hero-grid { grid-template-columns: 1fr; } }
.guide-cover {
  aspect-ratio: 3 / 4;
  max-width: 420px;
  margin-left: auto;
  position: relative;
  transform: rotate(-3deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.guide-cover:hover { transform: rotate(0deg) translateY(-8px); }
.guide-cover-inner {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
  border-radius: 2px;
  box-shadow: var(--shadow-editorial);
  overflow: hidden;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}
.guide-cover-inner::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  border: 1px solid rgba(43, 128, 187, 0.35);
  pointer-events: none;
}
.guide-cover-kicker {
  font-family: var(--font-eyebrow);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sky-500);
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.guide-cover-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: #fff;
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.guide-cover-title em {
  color: var(--sky-500);
  font-weight: 400;
}
.guide-cover-foot {
  font-family: var(--font-eyebrow);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  position: relative;
  z-index: 1;
}

/* ---------- PRODUCTIZED SERVICE BAND ---------- */
.service-band {
  padding: clamp(4rem, 7vw, 7rem) 0;
  background: #fff;
}
.service-band-head {
  max-width: 720px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.service-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.service-band-grid--4up { grid-template-columns: repeat(4, 1fr); }
.service-band-grid--2up { grid-template-columns: repeat(2, 1fr); }
/* P2 2026-07-05 align sweep: /relocate/ "four local levers" — 4-up at desktop
   crammed each card into ~180px columns (long-copy paragraphs read as a
   ragged wall). 2x2 at wider columns is far more readable; row height still
   auto-equalizes per CSS grid default stretch, so each row's two cards match. */
.service-band-grid--levers { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (max-width: 1100px) {
  .service-band-grid--4up { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .service-band-grid,
  .service-band-grid--4up,
  .service-band-grid--2up { grid-template-columns: 1fr; }
}
.service-band-card {
  position: relative;
  padding: clamp(2rem, 3vw, 2.75rem);
  background: var(--cream-100);
  overflow: hidden;
  /* Skin-unify (2026-07-05): dual-shadow elevation, additive — same family
     as the IDX card finish. Navy/type untouched. */
  box-shadow: var(--msx-elev-1);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
@media (max-width: 900px) {
  .service-band-card { min-height: 0; }
}
.service-band-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--msx-elev-2);
}
/* Steel top-rule (2026-08-23 de-gold): thin static keyline, not a hover
   reveal, so it reads as finish rather than motion. */
.service-band-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--msx-gold-metal);
}
.service-band-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--sky-700), var(--sky-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.service-band-card:hover::after { transform: scaleX(1); }
.service-band-kicker {
  font-family: var(--font-eyebrow);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.service-band-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink-900);
  margin-bottom: 1rem;
}
.service-band-title em {
  font-style: italic;
  color: var(--sky-700);
}
.service-band-lead {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-soft);
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.service-band-tags {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: auto;
}
/* FLAT TAG TOKEN (owner 07-05 de-buttonize pass, §3 affordance law): these
   sit inside a whole-card <a> (.service-band-card) — a pill-inside-a-button
   read as double affordance. Left-rule accent, no bg/border/radius. */
.service-band-tag {
  font-family: var(--font-eyebrow, var(--font-body));
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-900);
  padding: 0.1rem 0 0.1rem 0.65rem;
  background: none;
  border: 0;
  border-left: 2px solid rgba(43, 128, 187, 0.35);
  border-radius: 0;
}
.service-band-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-eyebrow);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-900);
  font-weight: 700;
  transition: gap 0.3s ease;
}
.service-band-link:hover { gap: 0.9rem; color: var(--sky-500); }
.service-band-link::after {
  content: "→";
  font-size: 1rem;
  letter-spacing: 0;
}

/* ---------- EDITORIAL STAT STRIP ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(16, 38, 61, 0.1);
  border-bottom: 1px solid rgba(16, 38, 61, 0.1);
  padding: 0;
  background: #fff;
}
@media (max-width: 720px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}
.stat-strip-item {
  padding: 2.5rem 1.5rem;
  text-align: center;
  border-right: 1px solid rgba(16, 38, 61, 0.08);
}
.stat-strip-item:last-child { border-right: none; }
@media (max-width: 720px) {
  .stat-strip-item:nth-child(2) { border-right: none; }
  .stat-strip-item:nth-child(-n+2) { border-bottom: 1px solid rgba(16, 38, 61, 0.08); }
}
.stat-strip-num {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.5vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-900);
  margin-bottom: 0.5rem;
}
.stat-strip-num em {
  font-style: italic;
  color: var(--sky-700);
  font-weight: 400;
}
.stat-strip-lbl {
  font-family: var(--font-eyebrow);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
}

/* ---------- BTN-LUX (brand-blue accented) ---------- */
.btn-lux {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 1.6rem;
  min-height: 48px;
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid var(--ink-900);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
}
.btn-lux::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sky-700);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 0;
}
.btn-lux > * { position: relative; z-index: 1; }
.btn-lux:hover::before, .btn-lux:focus-visible::before { transform: translateY(0); }
.btn-lux:hover, .btn-lux:focus-visible { border-color: var(--sky-700); color: #fff; }
.btn-lux:active { transform: translateY(1px); transition-duration: 0.08s; }

.btn-lux-outline {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
  border-radius: 999px;
}
.btn-lux-outline::before { background: var(--ink-900); }
.btn-lux-outline:hover, .btn-lux-outline:focus-visible { color: #fff; border-color: var(--ink-900); }

/* On dark backgrounds */
.on-dark .btn-lux {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.on-dark .btn-lux::before { background: #fff; }
.on-dark .btn-lux:hover, .on-dark .btn-lux:focus-visible { color: var(--ink-900); border-color: #fff; }

/* ---------- REFINED SECTION PADDING SCALE ---------- */
.section-lux { padding: clamp(5rem, 8vw, 8rem) 0; }
.section-lux--tight { padding: clamp(3rem, 5vw, 5rem) 0; }
.section-lux--cream { background: var(--cream-100); }
.section-lux--ink {
  background: var(--ink-900);
  color: #fff;
}
.section-lux--ink h1,
.section-lux--ink h2,
.section-lux--ink h3 { color: #fff; }

/* =====================================================================
   CITY RESOURCES - landmark finder (distinct from canal routing engine)
   ===================================================================== */

.civic-section {
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
}

.civic-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
  border-bottom: 1px solid rgba(9, 94, 147, 0.1);
}

@media (max-width: 880px) {
  .civic-intro { grid-template-columns: 1fr; gap: 1rem; }
}

.civic-intro__heading .section-label { margin-bottom: 0.6rem; }

.civic-intro__title {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.civic-intro__lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 52ch;
}

.civic-intro__lede a {
  color: var(--sky-700);
  border-bottom: 1px solid rgba(43, 128, 187, 0.3);
  transition: border-color 0.2s;
}
.civic-intro__lede a:hover { border-bottom-color: var(--sky-700); }

/* ---- finder shell ---- */
.civic-finder {
  background: #fff;
  border: 1px solid rgba(9, 94, 147, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.civic-finder__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 1.35rem;
  background: linear-gradient(180deg, #fbfcfd 0%, #fff 100%);
  border-bottom: 1px solid rgba(9, 94, 147, 0.08);
  flex-wrap: wrap;
}

.civic-finder__compare {
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.civic-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 220px;
}

.civic-field__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.civic-field__select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.6rem 2.1rem 0.6rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-900);
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23095e93'><path d='M1 1l5 5 5-5' stroke='%23095e93' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px 7px;
  border: 1px solid rgba(9, 94, 147, 0.18);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.civic-field__select:hover { border-color: rgba(9, 94, 147, 0.35); }
.civic-field__select:focus {
  outline: none;
  border-color: var(--sky-700);
  box-shadow: 0 0 0 3px rgba(43, 128, 187, 0.15);
}

.civic-field__arrow {
  font-size: 1rem;
  color: var(--text-soft);
  padding-bottom: 0.7rem;
}

.civic-field__reset {
  padding: 0.6rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-900);
  background: transparent;
  border: 1px solid rgba(9, 94, 147, 0.18);
  border-radius: 10px;
  cursor: pointer;
  margin-top: 1rem;
  transition: background 0.2s, border-color 0.2s;
}
.civic-field__reset:hover {
  background: rgba(9, 94, 147, 0.04);
  border-color: rgba(9, 94, 147, 0.3);
}

.civic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.civic-chip {
  --chip-color: #1b2d4f;
  padding: 0.4rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid rgba(9, 94, 147, 0.14);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.civic-chip::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip-color);
  margin-right: 0.5rem;
  vertical-align: middle;
}
.civic-chip:hover {
  border-color: var(--chip-color);
  transform: translateY(-1px);
}
.civic-chip.is-active {
  background: var(--chip-color);
  color: #fff;
  border-color: var(--chip-color);
  box-shadow: 0 4px 12px rgba(9, 94, 147, 0.15);
}
.civic-chip.is-active::before { background: #fff; }

/* ---- stage: list + map ---- */
.civic-finder__stage {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: 620px;
}

@media (max-width: 980px) {
  .civic-finder__stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

.civic-finder__list {
  border-right: 1px solid rgba(9, 94, 147, 0.08);
  max-height: 620px;
  overflow-y: auto;
  background: #fbfcfd;
}

@media (max-width: 980px) {
  .civic-finder__list { max-height: 400px; border-right: none; border-bottom: 1px solid rgba(9, 94, 147, 0.08); }
}

.civic-list {
  padding: 1rem 0.25rem 1rem 0;
}

.civic-list__section + .civic-list__section { margin-top: 1.1rem; }

.civic-list__heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 1.1rem 0.4rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin: 0 0 0.4rem;
}

.civic-list__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.civic-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.civic-list__item + .civic-list__item {
  border-top: 1px solid rgba(9, 94, 147, 0.06);
}

.civic-list__btn {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.7rem 1.1rem;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  gap: 0.15rem;
  transition: background 0.2s;
  border-left: 3px solid transparent;
}
.civic-list__btn:hover {
  background: #fff;
  border-left-color: var(--sky-500);
}

.civic-list__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.25;
}
.civic-list__addr {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-soft);
}

.civic-list__empty {
  padding: 1.5rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-soft);
}

.civic-finder__map {
  position: relative;
  display: flex;
  flex-direction: column;
}

.civic-map {
  flex: 1 1 auto;
  min-height: 500px;
  background: #f0f4f8;
}

.civic-finder__compare-result {
  border-top: 1px solid rgba(9, 94, 147, 0.08);
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
}

.civic-compare__empty {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-soft);
  text-align: center;
}

.civic-compare {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.civic-compare__flow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: 1 1 380px;
  min-width: 0;
}

.civic-compare__node {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.civic-compare__node--to { text-align: right; margin-left: auto; }

.civic-compare__tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.civic-compare__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.civic-compare__line {
  position: relative;
  flex: 1 1 100px;
  min-width: 80px;
  height: 1px;
  background-image: linear-gradient(to right, rgba(9, 94, 147, 0.3) 50%, transparent 0%);
  background-size: 10px 1px;
  background-repeat: repeat-x;
  background-position: 0 50%;
}

.civic-compare__miles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.65rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid rgba(9, 94, 147, 0.14);
  border-radius: 999px;
  white-space: nowrap;
}

.civic-compare__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  background: var(--ink-900);
  border-radius: 10px;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}
.civic-compare__cta:hover {
  background: var(--ink-700);
  transform: translateY(-1px);
  color: #fff;
}

.civic-compare__hint {
  flex: 1 0 100%;
  margin: 0.4rem 0 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-soft);
  font-style: italic;
}

.civic-finder__disclaimer {
  margin: 0;
  padding: 0.9rem 1.35rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-soft);
  background: #fbfcfd;
  border-top: 1px solid rgba(9, 94, 147, 0.08);
  text-align: center;
}

/* ---- Leaflet markers + popups ---- */
.civic-marker-wrap { background: transparent; border: 0; }

.civic-marker {
  --mk-color: #1e6fb8;
  --mk-ring: rgba(30, 111, 184, 0.22);
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
}
.civic-marker__dot {
  position: absolute;
  inset: 6px;
  background: var(--mk-color);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(9, 94, 147, 0.3);
  z-index: 2;
}
.civic-marker__halo {
  position: absolute;
  inset: 0;
  background: var(--mk-ring);
  border-radius: 50%;
  animation: civicPulse 2.6s ease-out infinite;
  z-index: 1;
}

@keyframes civicPulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  80%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.civic-popup-wrap .leaflet-popup-content-wrapper {
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(9, 94, 147, 0.18), 0 4px 12px rgba(9, 94, 147, 0.08);
  border: 1px solid rgba(9, 94, 147, 0.06);
}
.civic-popup-wrap .leaflet-popup-content {
  margin: 0;
  padding: 1rem 1.15rem 1rem;
  font-family: var(--font-body);
  color: var(--ink-900);
  line-height: 1.45;
  min-width: 240px;
}
.civic-popup-wrap .leaflet-popup-tip { box-shadow: 0 4px 8px rgba(9, 94, 147, 0.08); }

.civic-popup__cat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.civic-popup__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0.2rem 0 0.45rem;
  line-height: 1.2;
}

.civic-popup__blurb {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.5;
}

.civic-popup__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
}
.civic-popup__dl dt {
  color: var(--text-soft);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.civic-popup__dl dd {
  margin: 0;
  color: var(--ink-900);
}

.civic-popup__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.civic-popup__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: #fff;
  background: var(--ink-900);
  border-radius: 8px;
  transition: background 0.2s;
}
.civic-popup__btn:hover { background: var(--ink-700); color: #fff; }

.civic-popup__link {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--sky-700);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.civic-popup__link:hover { border-bottom-color: var(--sky-700); }

/* =====================================================================
   Canal 101 cards - editorial refresh
   ===================================================================== */

.canal-101-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 920px) { .canal-101-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .canal-101-grid { grid-template-columns: 1fr; } }

.canal-101-card {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
  background: #fff;
  border: 1px solid rgba(9, 94, 147, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s, box-shadow 0.3s;
}
.canal-101-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
}

.canal-101-card__index {
  display: inline-block;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--sky-500);
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.canal-101-card__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.canal-101-card__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-soft);
}
.canal-101-card__body a {
  color: var(--sky-700);
  font-weight: 600;
  border-bottom: 1px solid rgba(43, 128, 187, 0.3);
}
.canal-101-card__body a:hover { border-bottom-color: var(--sky-700); }

/* ---- deep-dive CTA ---- */
.civic-deepdive {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
  border-radius: var(--radius-lg);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 1.5rem;
  align-items: center;
  box-shadow: var(--shadow-strong);
}

@media (max-width: 880px) {
  .civic-deepdive { grid-template-columns: 1fr; }
}

.civic-deepdive__title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.45rem;
  line-height: 1.2;
}
.civic-deepdive__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
}

.civic-deepdive__actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.civic-deepdive__actions .btn-primary {
  background: #fff;
  color: var(--ink-900);
  border-color: #fff;
}
.civic-deepdive__actions .btn-primary:hover {
  background: var(--sky-500);
  border-color: var(--sky-500);
  color: #fff;
}
.civic-deepdive__actions .btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.civic-deepdive__actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

/* =====================================================================
   HOMEPAGE - refinement of legacy structure (no inline-style dashboards)
   ===================================================================== */

.section-muted { background: var(--cream-100); }

.section-cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

.home-content-cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.inline-link {
  color: var(--sky-700);
  font-weight: 600;
  border-bottom: 1px solid rgba(43, 128, 187, 0.3);
  transition: border-color 0.2s;
}
.inline-link:hover { border-bottom-color: var(--sky-700); }

/* Hero badge: interactive variant */
.hero-ed-badge--link {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.hero-ed-badge--link:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(9, 94, 147, 0.2);
}
.hero-ed-badge--link:focus-visible {
  outline: 3px solid var(--sky-500);
  outline-offset: 3px;
}

/* ---- Signature feature: canal map showcase ---- */
.signature-feature {
  padding: clamp(4rem, 7vw, 7rem) 0;
  background: linear-gradient(180deg, #fff 0%, var(--foam-100) 100%);
  position: relative;
  overflow: hidden;
}
.signature-feature::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(96, 195, 239, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.signature-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
  min-width: 0;
}

@media (max-width: 960px) {
  .signature-feature__grid { grid-template-columns: 1fr; }
}

.signature-feature__copy .eyebrow-lux { margin-bottom: 1rem; }

.signature-feature__copy,
.signature-feature__visual {
  min-width: 0;
}

.signature-feature__copy .h-editorial {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.signature-feature__lede {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 1.5rem;
  max-width: 54ch;
}

.signature-feature__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.75rem;
}
.signature-feature__bullets li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-900);
  border-top: 1px solid rgba(9, 94, 147, 0.08);
}
.signature-feature__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky-500);
  box-shadow: 0 0 0 3px rgba(43, 128, 187, 0.14);
}
.signature-feature__bullets strong { color: var(--ink-900); font-weight: 700; }

.signature-feature__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.signature-feature__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-editorial);
  aspect-ratio: 4 / 5;
  max-width: 100%;
}
@media (max-width: 720px) {
  .signature-feature {
    overflow-x: clip;
  }
  .signature-feature__grid {
    gap: 1.5rem;
  }
  .signature-feature__actions {
    flex-direction: column;
  }
  .signature-feature__actions .btn-lux {
    width: 100%;
    justify-content: center;
  }
  .signature-feature__visual {
    aspect-ratio: 3 / 2;
    width: 100%;
  }
}
.signature-feature__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 0.8s ease;
}
.signature-feature:hover .signature-feature__visual img { transform: scale(1.06); }

.signature-feature__overlay {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(9, 94, 147, 0.85);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-width: calc(100% - 3rem);
}
.signature-feature__overlay-kicker {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-300);
}
.signature-feature__overlay-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 520px) {
  .signature-feature__overlay {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    max-width: none;
    padding: 0.85rem 1rem;
  }
  .signature-feature__overlay-title {
    font-size: 1.1rem;
  }
}

/* ---- Team featured (pulled out of inline styles) ---- */
.team-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2rem;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(9, 94, 147, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 900px) {
  .team-featured { grid-template-columns: 1fr; }
}

.team-featured-image {
  position: relative;
  min-height: 400px;
  background: linear-gradient(135deg, var(--foam-100), var(--slate-100));
}
.team-featured-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.team-featured-monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--sky-500);
}

.team-featured-content { padding: clamp(1.5rem, 3vw, 2.5rem); }

.team-featured-name {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--ink-900);
  margin: 0 0 0.4rem;
  line-height: 1.1;
}

.team-featured-role {
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sky-700);
  font-weight: 700;
  margin: 0 0 1.25rem;
}

.team-featured-bio {
  font-family: var(--font-body);
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0 0 1.35rem;
}

.team-featured-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.35rem;
  padding: 0.9rem 1.1rem;
  background: var(--foam-100);
  border-radius: var(--radius-md);
  border: 1px solid rgba(43, 128, 187, 0.16);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-700);
}
.team-featured-stat-divider { color: var(--slate-200); font-weight: 400; }

/* ---- Market snapshot ---- */
.market-snapshot {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  background: #fff;
}

.market-snapshot__grid {
  display: grid;
  gap: 1rem;
  max-width: 1060px;
  margin: 0 auto;
}
.market-snapshot__grid--primary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2rem, 3vw, 2.5rem);
  margin-bottom: 1.25rem;
}
.market-snapshot__grid--secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 820px) {
  .market-snapshot__grid--primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-snapshot__grid--secondary { grid-template-columns: 1fr; }
}

.market-stat {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 1.75rem) 1.2rem;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(9, 94, 147, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.market-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
}

.market-stat__value {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.market-stat--accent .market-stat__value { color: var(--sky-700); }

.market-stat__label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-top: 0.3rem;
}

.market-stat__note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--sky-700);
  margin-top: 0.3rem;
  font-weight: 600;
}

/* ---- Insights (blog) cards ---- */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 900px) { .insights-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .insights-grid { grid-template-columns: 1fr; } }

.insight-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(9, 94, 147, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  color: inherit;
}
.insight-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
}

.insight-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.insight-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
/* Portrait featured photos (e.g. brayden-house-forsale-real 1500x2000) dropped
   into the 16:10 card box get center-cropped, clipping the subject's head/hair.
   Re-anchor the crop on the face so the head stays fully visible. Scoped via
   .insight-card__image--portrait (front-page.php) so landscape AI headers keep
   the default center crop. */
.insight-card__image--portrait img { object-position: center 15%; }
.insight-card:hover .insight-card__image img { transform: scale(1.05); }

.insight-card__body {
  padding: 1.35rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.insight-card__cat {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sky-700);
  margin-bottom: 0.5rem;
}

.insight-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 0.6rem;
  line-height: 1.25;
}

.insight-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 1rem;
  flex: 1;
}

.insight-card__link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sky-700);
  letter-spacing: 0.02em;
}

/* =====================================================================
   SHARED: related cards + narrow containers + form helpers
   ===================================================================== */

.container--narrow { max-width: 840px; }

.buyer-form-card__sub {
  color: var(--text-soft);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

.lifestyle-split__cta { margin-top: 1.5rem; }

.faq-section { padding-block: clamp(3.5rem, 6vw, 5.5rem); background: var(--foam-100); }

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 880px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .related-grid { grid-template-columns: 1fr; } }

.related-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: #fff;
  border: 1px solid rgba(9, 94, 147, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.related-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--sky-500), var(--sky-700));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.related-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
  border-color: rgba(43, 128, 187, 0.18);
}
.related-card:hover::after { transform: scaleX(1); }

/* PRESET SAVED-SEARCH RAIL ("Popular searches in {City}", doc 24 part 2).
   A clean link grid -- the FFR/Sierra "popular searches" pattern -- rendered
   by milner_preset_searches_rail() in functions.php. Desktop = 3-up grid
   (reads as a compact rail); mobile = single stacked column. */
.popular-searches-section { background: var(--foam-100); }

.popular-searches__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 880px) { .popular-searches__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .popular-searches__grid { grid-template-columns: 1fr; } }

.popular-searches__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(9, 94, 147, 0.08);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--ink-900);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.popular-searches__link:hover,
.popular-searches__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
  border-color: rgba(43, 128, 187, 0.28);
  background: var(--foam-100);
}
.popular-searches__label { line-height: 1.3; }
.popular-searches__arrow {
  color: var(--sky-700);
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.popular-searches__link:hover .popular-searches__arrow,
.popular-searches__link:focus-visible .popular-searches__arrow { transform: translateX(3px); }

.related-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--foam-100);
  color: var(--sky-700);
  border-radius: 12px;
  margin-bottom: 1rem;
}

.related-card__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 0.6rem;
  line-height: 1.2;
}

.related-card__text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 1.1rem;
  flex: 1;
}

.related-card__cta {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--sky-700);
  letter-spacing: 0.02em;
}

.related-card__body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
}

/* =====================================================================
   PAGE: Cape Coral
   Tooltip, region grid spacing, waterway bridge, market stat spacing,
   Brayden quote, school cards, FAQ, inline link.
   ===================================================================== */

.cc-tooltip-kicker {
  color: #4a7fa5;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-body);
}

.cc-regions-grid { margin-top: clamp(2rem, 4vw, 3rem); }

.container--brayden { max-width: 860px; }

.stat-strip--spaced { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.form-disclaimer--centered { text-align: center; margin-top: 2rem; }

.inline-link {
  color: var(--sky-700);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 154, 58, 0.35);
  transition: color 0.2s, border-color 0.2s;
}
.inline-link:hover { color: var(--ink-900); border-bottom-color: var(--ink-900); }

/* Brayden's Take - editorial pull quote */
.brayden-quote {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 2rem;
  font-style: italic;
  position: relative;
  padding-left: clamp(1rem, 2vw, 2rem);
  border-left: 2px solid var(--sky-500);
}
.brayden-quote p { margin: 0 0 1.5rem; }
.brayden-quote p:last-child { margin-bottom: 0; }
.brayden-quote p:first-child::before {
  content: "\201C";
  position: absolute;
  left: -0.3rem;
  top: -1.5rem;
  font-family: var(--font-heading);
  font-size: clamp(4rem, 8vw, 6rem);
  line-height: 1;
  color: var(--sky-500);
  opacity: 0.55;
  font-style: normal;
}
.brayden-signoff {
  margin-top: 2.5rem;
  color: var(--sky-500);
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 1.1rem;
  font-weight: 500;
}
.brayden-caption {
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  letter-spacing: var(--tracking-wide, 0.12em);
  text-transform: uppercase;
}

/* School cards - unified title weight */
.cc-school-card__title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink-900);
  margin: 0.75rem 0 0.6rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
}

/* FAQ */
.cc-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 2.5rem);
}
.cc-faq-item {
  border-bottom: 1px solid rgba(43, 128, 187, 0.22);
  padding: 1.5rem 0;
}
.cc-faq-item:last-child { border-bottom: none; }
.cc-faq-item > summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--ink-900);
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  line-height: 1.3;
}
.cc-faq-item > summary::-webkit-details-marker { display: none; }
.cc-faq-marker {
  color: var(--sky-700);
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}
.cc-faq-item[open] .cc-faq-marker { transform: rotate(45deg); }
.cc-faq-item p {
  margin-top: 1rem;
  color: var(--text-soft);
  line-height: 1.75;
  font-size: 1rem;
}

/* Waterway Map Bridge section */
.cc-waterway-bridge {
  background: linear-gradient(180deg, #ffffff 0%, var(--foam-100, #f0f4f8) 100%);
  padding-block: clamp(4rem, 7vw, 6rem);
}
.cc-waterway-bridge__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cc-waterway-bridge__copy .h-editorial { margin-top: 0.6rem; }
.cc-waterway-bridge__lede {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.72;
  color: var(--text-soft);
  margin: 1.25rem 0 1.75rem;
  max-width: 46ch;
}
.cc-waterway-bridge__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}
.cc-waterway-bridge__bullets li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink-900);
  line-height: 1.4;
}
.cc-waterway-bridge__bullet-num {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--sky-700);
  min-width: 2ch;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.cc-waterway-bridge__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Waterway preview - stylized map schematic */
.cc-waterway-bridge__preview { position: relative; }
.cc-waterway-bridge__preview-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(43, 128, 187, 0.08) 0%, transparent 60%),
    linear-gradient(135deg, #f7fbfe 0%, #e8f1f9 100%);
  border: 1px solid rgba(43, 128, 187, 0.14);
  box-shadow:
    0 30px 60px -30px rgba(10, 30, 60, 0.25),
    0 6px 18px -6px rgba(10, 30, 60, 0.12);
}
.cc-waterway-bridge__preview-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(43, 128, 187, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43, 128, 187, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
}
.cc-waterway-bridge__preview-path {
  position: absolute;
  top: 20%;
  left: 12%;
  right: 18%;
  bottom: 22%;
  background:
    linear-gradient(120deg, transparent 0% 18%, var(--sky-700) 18% 21%, transparent 21% 40%, var(--sky-700) 40% 43%, transparent 43% 60%, var(--sky-700) 60% 63%, transparent 63%);
  opacity: 0.65;
  clip-path: polygon(0% 20%, 24% 22%, 40% 42%, 62% 44%, 78% 72%, 100% 78%, 100% 80%, 80% 76%, 62% 50%, 40% 48%, 24% 28%, 0% 26%);
}
.cc-waterway-bridge__preview-pin {
  position: absolute;
  top: 18%;
  left: 8%;
  color: var(--sky-700);
  background: #fff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px -4px rgba(196, 154, 58, 0.45);
  border: 1.5px solid var(--sky-700);
  animation: cc-pin-pulse 2.4s ease-in-out infinite;
}
@keyframes cc-pin-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.cc-waterway-bridge__preview-tag {
  position: absolute;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--ink-900);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 6px 16px -4px rgba(10, 30, 60, 0.3);
}
.cc-waterway-bridge__preview-tag--a { top: 10%; left: 18%; }
.cc-waterway-bridge__preview-tag--b {
  bottom: 12%;
  right: 10%;
  background: var(--sky-700);
  color: var(--ink-900);
}

@media (max-width: 860px) {
  .cc-waterway-bridge__grid { grid-template-columns: 1fr; }
  .cc-waterway-bridge__preview { order: -1; max-width: 480px; margin: 0 auto; width: 100%; }
  .cc-waterway-bridge__bullets { grid-template-columns: 1fr; }
}

/* =====================================================================
   PAGE: About - shared visual helpers
   ===================================================================== */

.btn-lux--spaced { margin-top: 1rem; }

.about-story__visual {
  /* P1 2026-07-05 root-cause fix: this was missing `position: relative`, so
     the shared `.hero-ed-visual-frame` rule (position:absolute; inset:0;)
     had no positioned ancestor here and escaped to the viewport itself —
     rendering full-bleed (0,0 / 100vw / ~1800px tall) behind the /about/
     hero section above it. That was the "empty photo stretch" + unreadable
     hero-copy-over-photo P1: the photo bleeding in was about-hero-
     professional-agency.jpg from THIS section, not a hero background.
     Restoring position:relative contains the frame back inside this
     460px/4:5 box where it belongs. */
  /* P1 2026-07-05 follow-up fix: position:relative alone still left this
     box at 0 height, because its only child (.hero-ed-visual-frame) is
     position:absolute and is removed from normal flow — absolutely
     positioned children never contribute to a parent's height. In the
     2-column desktop grid the row height happened to be tall enough
     (driven by the copy column) that the floating photo didn't visibly
     collide with anything, masking the bug. But once .sell-val-grid
     collapses to a single column at <=900px (tablet/mobile), this 0-height
     box sits directly above the next section in the flow, so the
     absolutely-positioned photo bled downward and got visually clipped/
     overlapped by the "A Note From Brayden" section below it. Giving this
     box its own aspect-ratio reserves real height in the flow at every
     breakpoint, independent of grid row height. */
  position: relative;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  margin: 0;
}
.about-story__visual .hero-ed-visual-frame {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -40px rgba(10, 30, 60, 0.35),
    0 10px 24px -10px rgba(10, 30, 60, 0.2);
}
.about-story__visual .hero-ed-visual-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Why Milner - editorial numbered differentiator list */
.about-why-list {
  max-width: 860px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  display: grid;
  gap: 1rem;
}
.about-why {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.75rem 2rem;
  background: #fff;
  border-left: 3px solid var(--sky-700);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 1px 2px rgba(10, 30, 60, 0.04), 0 8px 20px -12px rgba(10, 30, 60, 0.08);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s;
}
.about-why:hover {
  transform: translateX(3px);
  box-shadow: 0 1px 2px rgba(10, 30, 60, 0.04), 0 14px 30px -12px rgba(10, 30, 60, 0.18);
}
.about-why__rank {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--sky-700);
  letter-spacing: 0.02em;
  padding-top: 0.15rem;
  opacity: 0.9;
}
.about-why__body { min-width: 0; }
.about-why__title {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 0.35rem;
  line-height: 1.25;
  letter-spacing: 0.005em;
}
.about-why__body p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}

@media (max-width: 680px) {
  .about-why { padding: 1.5rem 1.25rem; gap: 1rem; }
  .about-why__rank { font-size: 1.75rem; }
}

/* =====================================================================
   PAGE: Meet The Team - lead feature + specialty chips + careers
   ===================================================================== */

.team-lead-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-editorial, 0 30px 60px -30px rgba(10,30,60,0.25), 0 6px 16px -6px rgba(10,30,60,0.08));
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.team-lead-feature__media {
  position: relative;
  min-height: 520px;
}
.team-lead-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-lead-feature__body {
  padding: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 3.5vw, 3rem) clamp(2rem, 3.5vw, 3rem) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.team-lead-feature__name {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.05;
  margin: 1rem 0 1.25rem;
  letter-spacing: 0.005em;
}
.team-lead-feature__bio {
  color: var(--text-soft);
  font-size: clamp(0.98rem, 1.3vw, 1.05rem);
  line-height: 1.75;
  margin-bottom: 1.75rem;
}
.team-lead-feature__bio--quote {
  font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
  font-size: clamp(1.02rem, 1.35vw, 1.12rem);
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--sky-500, #4a7fa5);
  font-style: italic;
  quotes: "\201C" "\201D";
}
.team-lead-feature__bio--quote::before {
  content: open-quote;
}
.team-lead-feature__bio--quote::after {
  content: close-quote;
}
.team-lead-feature__creds {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--cream-100);
  border-left: 3px solid var(--sky-700);
  border-radius: 0 6px 6px 0;
}
.team-lead-feature__cred {
  font-size: 0.88rem;
  color: var(--ink-900);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.team-lead-feature__divider {
  color: var(--sky-500);
  font-size: 1.1rem;
  line-height: 1;
}

@media (max-width: 820px) {
  .team-lead-feature { grid-template-columns: 1fr; }
  .team-lead-feature__media { min-height: 360px; }
  .team-lead-feature__body { padding: 1.75rem; }
}

/* Team roster specialty tags — FLAT TAG TOKEN (owner 07-05 de-buttonize pass,
   §3 affordance law): non-interactive labels never wear button/pill chrome.
   Reference: .metrics .metric v3.21 (left-rule accent, no bg, no border). */
.team-member-specialties {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.75rem;
}
.team-member-specialty {
  display: inline-flex;
  align-items: center;
  background: none;
  color: var(--ink-700, #12314d);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0 0.1rem 0.65rem;
  border-radius: 0;
  border: 0;
  border-left: 2px solid rgba(24, 146, 216, 0.35);
}

/* Careers container + typography */
.container--careers { max-width: 720px; text-align: center; }
.team-careers__title { margin: 1rem 0 1.25rem; }
.team-careers__lede {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}

/* =====================================================================
   PAGE: Contact - methods, map, social chips
   ===================================================================== */

.contact-methods {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.contact-method {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-left: 3px solid var(--sky-700);
  border-radius: 0 8px 8px 0;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(10, 30, 60, 0.04), 0 8px 20px -12px rgba(10, 30, 60, 0.08);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s;
}
.contact-method:hover {
  transform: translateX(3px);
  box-shadow: 0 1px 2px rgba(10, 30, 60, 0.04), 0 14px 30px -12px rgba(10, 30, 60, 0.18);
}
.contact-method__icon {
  color: var(--sky-700);
  flex-shrink: 0;
  padding-top: 0.15rem;
}
.contact-method__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.contact-method__kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 700;
}
.contact-method__value {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.2;
  letter-spacing: 0.005em;
}
.contact-method__sub {
  font-size: 0.88rem;
  color: var(--text-soft);
}

/* Contact form typography */
.contact-form__kicker { color: var(--sky-700); }
.contact-form__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 500;
  color: var(--ink-900);
  margin: 0.3rem 0 0.5rem;
  line-height: 1.2;
}
.contact-form__sub {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

/* Map embed */
.contact-map-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1040px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  border-radius: 14px;
  box-shadow: var(--shadow-editorial, 0 30px 60px -30px rgba(10,30,60,0.25), 0 6px 16px -6px rgba(10,30,60,0.08));
  overflow: hidden;
  position: relative;
  display: block;
}
.contact-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-map-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -21px 0 0 -9px;
  background: var(--sky-700, #3d6e8f);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(10,30,60,0.35);
}
.contact-map-address {
  text-align: center;
  max-width: 1040px;
  margin: 0.85rem auto 0;
  color: var(--text-muted, #5a6472);
  font-size: 0.95rem;
}
.contact-map-address a { color: var(--sky-700, #3d6e8f); text-decoration: underline; }

/* Social chips */
.social-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 6px;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.social-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}
.social-chip svg { flex-shrink: 0; }

/* Light-background variant for social chips (cream sections) */
.section-lux--cream .social-chip,
.stay-connected .social-chip {
  background: rgba(9, 94, 147, 0.04);
  border-color: rgba(9, 94, 147, 0.14);
  color: var(--ink-900);
}
.section-lux--cream .social-chip:hover,
.stay-connected .social-chip:hover {
  background: rgba(9, 94, 147, 0.08);
  border-color: rgba(9, 94, 147, 0.28);
}

/* Centered "Stay Connected" social block */
.stay-connected--centered {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.stay-connected--centered .eyebrow-lux::before,
.stay-connected--centered .eyebrow-lux::after {
  margin: 0 auto;
}
.social-links--centered {
  justify-content: center;
  margin-top: 2rem;
}

/* ============================================================
   Landing page refinements (LP Buyers / LP Sellers / LP Relocate)
   ============================================================ */

/* Guide hero spacing (LP Buyers) */
.guide-hero__h1 { margin-top: 1.25rem; }
.guide-hero__actions { margin-top: 2rem; }
.guide-hero__proof { margin-top: 2.75rem; }

/* Cream-variant about-why card - for LP pages on white backgrounds */
.about-why.about-why--cream {
  background: var(--cream-100);
  border-top-color: var(--sky-700);
}

/* LP seller hero form - elevated card treatment */
.lp-hero-form {
  background: #fff;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 10px;
  border-top: 3px solid var(--sky-700);
  box-shadow: 0 30px 60px -30px rgba(10, 30, 60, 0.25), 0 6px 16px -6px rgba(10, 30, 60, 0.08);
}
.lp-hero-form .contact-form__kicker { display: block; margin-bottom: 0.4rem; }
.lp-hero-form .contact-form__title { margin-top: 0.2rem; }

/* Guide cover - decorative PDF mockup for LP Buyers */
.guide-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 380px;
  margin: 0 auto;
  background: linear-gradient(155deg, var(--ink-900) 0%, #1a3a5a 55%, var(--sky-700) 150%);
  border-radius: 6px;
  box-shadow:
    0 40px 80px -30px rgba(10, 30, 60, 0.45),
    0 15px 35px -10px rgba(10, 30, 60, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transform: perspective(1200px) rotateY(-4deg) rotateX(1deg);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.guide-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.08) 0, transparent 40%),
    radial-gradient(circle at 80% 85%, rgba(43,128,187,0.25) 0, transparent 50%);
  pointer-events: none;
}
.guide-cover::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.25), transparent);
}
.guide-cover:hover { transform: perspective(1200px) rotateY(-1deg) rotateX(0deg); }
.guide-cover-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  text-align: center;
}
.guide-cover-kicker {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}
.guide-cover-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  margin: 0;
  color: #fff;
}
.guide-cover-title em {
  font-style: italic;
  color: var(--sky-500);
  display: block;
}
.guide-cover-foot {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

/* Guide hero layout grid */
.guide-hero {
  padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--foam-100);
}
.guide-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .guide-hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .guide-cover { max-width: 280px; }
}

/* ============================================================
   Book A Call page
   ============================================================ */

.hero-editorial--compact {
  min-height: auto;
  padding-block: clamp(7rem, 9vw, 8.5rem) clamp(2rem, 4vw, 3rem);
}
@media (max-width: 600px) {
  .hero-editorial--compact { padding-block: 5rem 2rem; }
}
.hero-ed-copy--centered {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.hero-ed-copy--centered .hero-ed-h1 { margin-top: 1.1rem; }
.hero-ed-copy--centered .hero-ed-lede { margin-top: 1.25rem; }

/* Agent profile shared formatting */
.agent-profile-lede {
  max-width: 620px;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 0.9rem;
  color: var(--text-soft);
}
.agent-profile-lede p {
  margin: 0;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.7;
}
.agent-specialty-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 720px;
  margin: 0 auto;
}
.agent-specialty-list .team-member-specialty {
  padding: 0.15rem 0 0.15rem 0.85rem;
  font-size: 0.8rem;
}
.agent-bio-copy {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  color: var(--ink-800);
}
.agent-bio-copy p {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.85;
}
.agent-contact-form .form-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.agent-contact-form .form-card h3,
.agent-contact-form .form-card .form-title {
  margin-top: 0;
}

/* Agent profile contact split: balanced 40/60 rail, copy vertically centered */
.agent-contact-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.agent-contact-copy {
  align-self: center;
  max-width: 34rem;
}
.agent-contact-copy p {
  max-width: 32rem;
}
.agent-contact-form .contact-form__kicker {
  margin-bottom: 0.5rem;
}
.agent-contact-form .form-title {
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  line-height: 1.2;
}
.agent-form-success {
  background: var(--foam-100, #ebf4fc);
  border: 1px solid rgba(24, 74, 115, 0.15);
  border-left: 3px solid var(--sky-700);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--ink-900);
}
@media (max-width: 860px) {
  .agent-contact-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .agent-contact-copy {
    max-width: none;
  }
}

/* ==========================================================================
   AGENT PROFILE — DESKTOP DENSITY PASS (v1.2 addendum, 2026-07-05)
   Reference implementation for the site: tighter vertical rhythm, no
   phone-view-on-desktop, proportion-matched form/copy blocks.
   ========================================================================== */

/* (a) tighten section paddings at >=1024px — ~45-50% cut vs the sitewide
   .section-lux clamp(5rem,8vw,8rem), scoped to this page only. */
@media (min-width: 1024px) {
  .agent-profile-page .section-lux {
    padding: clamp(2.5rem, 4vw, 4.25rem) 0;
  }
}

/* (c) specialties: compact strip directly under the hero, not a full section */
.agent-specialty-strip {
  padding: 1.1rem 0;
  background: var(--cream-100);
  border-bottom: 1px solid rgba(24, 74, 115, 0.08);
}
.agent-specialty-list--strip {
  justify-content: center;
  align-items: center;
  max-width: none;
  gap: 0.6rem;
}
.agent-specialty-strip__label {
  font-family: var(--font-eyebrow);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-right: 0.35rem;
}
@media (min-width: 1024px) {
  .agent-specialty-list--strip { justify-content: flex-start; }
}

/* (b) "Why work with X" — two-column at >=1024px: copy one side, the roster
   headshot the other. Single column (image above copy) below that. */
.agent-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.agent-why-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-strong);
}
.agent-why-copy .agent-bio-copy {
  margin: 1rem 0 0;
  max-width: none;
}
@media (min-width: 1024px) {
  .agent-why-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .agent-why-media { order: 1; }
  .agent-why-copy { order: 2; }
}

/* (d) proportion-pair the contact form card with its copy block — the
   huge-form-tiny-copy fix. Restore a visible card, but scaled down.
   Scoped >=1024px so it never fights the <=860px single-column stack rule above. */
@media (min-width: 1024px) {
  .agent-contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.agent-contact-form .form-card {
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.08);
  box-shadow: var(--shadow-strong);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 2.2vw, 2rem);
  max-width: 30rem;
}
.agent-contact-form .form-title {
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
}
.agent-contact-form .form-subtitle {
  font-size: 0.85rem;
}
@media (max-width: 860px) {
  .agent-contact-form .form-card { max-width: none; }
}

/* P2 2026-07-05 defect fix: the form card used to repeat the left column's
   "GET IN TOUCH / Reach {name} directly." as its own "Send {name} a Message"
   heading. That heading was removed from the markup (template-agent-profile.php);
   this just re-bases the lead sentence now that it's the card's first element,
   and shrinks the TCPA consent block so it reads as fine print, not body copy. */
.agent-contact-form .form-card--no-heading .form-subtitle--lead {
  margin-top: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-800);
}
.agent-contact-form .form-consent {
  font-size: 12px;
  line-height: 1.4;
}

/* Main grid */
.book-call-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  max-width: 960px;
  margin-inline: auto;
}
@media (max-width: 960px) {
  .book-call-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.book-call-intro { position: sticky; top: 6rem; }
@media (max-width: 960px) { .book-call-intro { position: static; } }
.book-call-lede {
  color: var(--text-soft);
  line-height: 1.75;
  margin: 1.25rem 0 2rem;
  font-size: 1.02rem;
}
.book-call-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.book-call-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-top: 1px solid rgba(10, 30, 60, 0.08);
  color: var(--ink-900);
  line-height: 1.55;
  font-size: 0.98rem;
}
.book-call-list li:first-child { border-top: 0; padding-top: 0; }
.book-call-list__n {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--sky-700);
  flex-shrink: 0;
  line-height: 1;
  padding-top: 0.15rem;
  font-feature-settings: "lnum";
}

/* Scheduler card */
.book-call-embed,
.book-call-form {
  background: #fff;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 3px solid var(--sky-700);
  border-radius: 10px;
  box-shadow: 0 30px 60px -30px rgba(10, 30, 60, 0.22), 0 6px 16px -6px rgba(10, 30, 60, 0.08);
}
.book-call-embed__kicker,
.contact-form__kicker {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 700;
  display: block;
  margin-bottom: 0.4rem;
}
.book-call-embed__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 1.25rem;
  line-height: 1.2;
}
.book-call-iframe {
  width: 100%;
  min-height: 560px;
  border: none;
  border-radius: 6px;
  background: var(--foam-100);
  display: block;
}
.book-call-embed__fallback {
  color: var(--text-soft);
  font-size: 0.85rem;
  text-align: center;
  margin: 1rem 0 0.75rem;
}
.btn-lux--block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Alternate contact methods on book page - reuse contact-method component */
.book-call-methods {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 960px;
  margin: 0 auto;
}
.book-call-methods .contact-method {
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.book-call-methods .contact-method__value {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  word-break: break-word;
}
@media (max-width: 820px) { .book-call-methods { grid-template-columns: 1fr; } }

/* Guide link tiles (dark section) */
.book-call-guides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 820px) { .book-call-guides { grid-template-columns: 1fr; } }

.book-call-guide {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.5rem 1rem;
  padding: 1.75rem 1.75rem;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.book-call-guide:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--sky-500);
  transform: translateY(-2px);
}
.book-call-guide__kicker {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sky-500);
  font-weight: 700;
  grid-column: 1 / -1;
  margin-bottom: 0.4rem;
}
.book-call-guide__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
  color: #fff;
}
.book-call-guide__arrow {
  font-size: 1.35rem;
  color: var(--sky-500);
  transition: transform 0.3s;
  line-height: 1;
}
.book-call-guide:hover .book-call-guide__arrow { transform: translateX(4px); }

/* Light intro variant for dark sections */
.section-intro--light { color: rgba(255, 255, 255, 0.72); }

/* ============================================================
   Service band card - media variant
   ============================================================ */
.service-band-card--media { padding: 0; overflow: hidden; }
.service-band-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.service-band-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-band-card--media:hover .service-band-card__media img { transform: scale(1.05); }
.service-band-card__body { padding: 1.75rem; }

/* Timeline cream variant */
.sell-timeline--cream .sell-timeline-item { background: #fff; }
.sell-timeline--cream { margin-top: 2rem; }

/* ============================================================
   Waterway map page
   ============================================================ */

.container--form { max-width: 720px; }

/* Buyer-checklist list on dark section */
.waterway-checklist {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
}
.waterway-checklist__item {
  padding: 1.2rem 1.5rem;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--sky-300, var(--sky-500));
  border-radius: 2px;
}
.waterway-checklist__lead {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
  font-style: italic;
}

/* Centered variant of lux-lead-capture - for narrow single-column forms */
.lux-lead-capture--centered {
  padding: clamp(2.5rem, 5vw, 4rem);
  background: #fff;
  border-top: 3px solid var(--sky-700);
  border-radius: 10px;
  box-shadow: 0 30px 60px -30px rgba(10, 30, 60, 0.22), 0 6px 16px -6px rgba(10, 30, 60, 0.08);
  text-align: center;
}
.lux-lead-capture--centered .eyebrow-lux { display: block; margin-bottom: 0.8rem; }
.lux-lead-capture--centered .h-editorial { margin: 0 0 1rem; }
.lux-lead-capture--centered .section-intro {
  max-width: 560px;
  margin: 0 auto 2rem;
}
.lux-lead-capture--centered form,
.lux-lead-capture--centered .milner-form { text-align: left; }

/* ============================================================
   Neighborhood Guide (individual CPT)
   ============================================================ */

.neighborhood-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .neighborhood-grid { grid-template-columns: 1fr; } }

.neighborhood-body {
  font-size: 1.05rem;
  color: var(--text-soft);
  line-height: 1.85;
}
.neighborhood-body p { margin-bottom: 1.25rem; }
.neighborhood-body h2, .neighborhood-body h3 {
  font-family: var(--font-heading);
  color: var(--ink-900);
  font-weight: 500;
}

/* Facts sidebar */
.neighborhood-facts {
  position: sticky;
  top: 6rem;
  padding: 1.75rem;
  background: var(--foam-100);
  border-top: 3px solid var(--sky-700);
  border-radius: 8px;
}
@media (max-width: 900px) { .neighborhood-facts { position: static; } }
.neighborhood-facts__kicker {
  display: block;
  margin-bottom: 1rem;
}
.neighborhood-facts__list {
  display: grid;
  gap: 1rem;
}
.neighborhood-fact {
  padding: 0.85rem 0;
  border-top: 1px solid rgba(10, 30, 60, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.neighborhood-fact:first-of-type { border-top: none; padding-top: 0; }
.neighborhood-fact__label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 700;
}
.neighborhood-fact__value {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--ink-900);
  font-weight: 500;
}

/* Pros / cons editorial cards */
.proscons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 780px) { .proscons-grid { grid-template-columns: 1fr; } }

.proscons-card {
  background: #fff;
  padding: 2rem 2.25rem;
  border-radius: 10px;
  border-top: 3px solid var(--sky-700);
  box-shadow: 0 16px 40px -24px rgba(10, 30, 60, 0.18);
}
.proscons-card--pros { border-top-color: #2b9a5c; }
.proscons-card--cons { border-top-color: #c17b3a; }

.proscons-card__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(10, 30, 60, 0.08);
}
.proscons-card__mark {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
}
.proscons-card--pros .proscons-card__mark { background: #2b9a5c; }
.proscons-card--cons .proscons-card__mark { background: #c17b3a; }
.proscons-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  color: var(--ink-900);
  margin: 0;
  line-height: 1.2;
}
.proscons-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.25rem;
}
.proscons-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px dotted rgba(10, 30, 60, 0.1);
  color: var(--ink-900);
  font-size: 0.97rem;
  line-height: 1.55;
}
.proscons-list li:last-child { border-bottom: none; }
.proscons-list__mark {
  color: var(--sky-700);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.55;
}
.proscons-card--pros .proscons-list__mark { color: #2b9a5c; }
.proscons-card--cons .proscons-list__mark { color: #c17b3a; }

/* Schools / nearby chips */
.schools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
  max-width: 1020px;
  margin: 0 auto;
}
.schools-chip {
  background: #fff;
  border: 1px solid rgba(10, 30, 60, 0.08);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  transition: border-color 0.3s, transform 0.3s;
}
.schools-chip:hover { border-color: var(--sky-500); transform: translateY(-2px); }
.schools-chip__icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--foam-100);
  color: var(--sky-700);
  border-radius: 50%;
  font-size: 1rem;
  flex-shrink: 0;
}
.schools-chip__name {
  color: var(--ink-900);
  font-weight: 500;
  font-size: 0.97rem;
  line-height: 1.35;
}

/* Final CTA inside dark section */
.neighborhood-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Light outline variant - for dark backgrounds */
.btn-lux-outline--light {
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.92);
}
.btn-lux-outline--light:hover {
  border-color: var(--sky-500);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* ============================================================
   Resources page
   ============================================================ */

/* Video grid */
.resources-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 960px) { .resources-video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .resources-video-grid { grid-template-columns: 1fr; } }

.resources-video-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border-top: 3px solid var(--sky-700);
  box-shadow: 0 16px 40px -24px rgba(10, 30, 60, 0.18);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}
.resources-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -24px rgba(10, 30, 60, 0.25);
}
.resources-video-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  text-decoration: none;
  background: var(--ink-900);
}
.resources-video-card__thumb {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(135deg, var(--ink-900) 0%, #1a3a5a 55%, var(--sky-700) 150%);
}
.resources-video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transition: transform 0.7s, opacity 0.3s;
}
.resources-video-card:hover .resources-video-card__thumb img {
  transform: scale(1.06);
  opacity: 0.8;
}
.resources-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink-900);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  transition: transform 0.3s, background 0.3s;
  z-index: 2;
}
.resources-video-card:hover .resources-video-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--sky-500);
  color: #fff;
}
.resources-video-card__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 3px;
  z-index: 2;
}
.resources-video-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.resources-video-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink-900);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.resources-video-card__desc {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

.resources-cta-row {
  text-align: center;
  margin-top: 2.5rem;
}

/* Insights / blog cards */
.resources-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 960px) { .resources-insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .resources-insights-grid { grid-template-columns: 1fr; } }

.resources-insight-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 40px -24px rgba(10, 30, 60, 0.15);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}
.resources-insight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -24px rgba(10, 30, 60, 0.22);
}
.resources-insight-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--foam-100) 0%, var(--cream-100) 100%);
}
.resources-insight-card__media img,
.resources-insight-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}
.resources-insight-card:hover img { transform: scale(1.05); }
.resources-insight-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--sky-700);
}
.resources-insight-card__placeholder--block { aspect-ratio: 16 / 9; }
.resources-insight-card__body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.resources-insight-card__meta {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sky-700);
}
.resources-insight-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0;
}
.resources-insight-card__title a {
  color: var(--ink-900);
  text-decoration: none;
  transition: color 0.25s;
}
.resources-insight-card__title a:hover { color: var(--sky-700); }
.resources-insight-card__excerpt {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}
.resources-insight-card__body .service-band-link { margin-top: auto; }

/* Newsletter */
.resources-newsletter {
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem);
}
.resources-newsletter .eyebrow-lux { display: block; margin-bottom: 0.8rem; }
.resources-newsletter .h-editorial { margin: 0 0 1rem; }
.resources-newsletter__lede {
  color: rgba(255, 255, 255, 0.75);
  max-width: 540px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.resources-newsletter__form {
  display: flex;
  gap: 0.75rem;
  max-width: 520px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.resources-newsletter__form .btn-lux { min-height: 48px; padding-block: 0.85rem; }
.resources-newsletter__input {
  flex: 1;
  min-width: 240px;
  padding: 0.9rem 1.1rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.25s, background 0.25s;
}
.resources-newsletter__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.resources-newsletter__input:focus {
  outline: none;
  border-color: var(--sky-500);
  background: rgba(255, 255, 255, 0.1);
}
.resources-newsletter__fineprint {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
  margin-top: 1rem;
  letter-spacing: 0.05em;
}

/* ============================================================
   Neighborhood Quiz
   ============================================================ */

.container--quiz { max-width: 780px; }

.quiz-card {
  background: #fff;
  padding: clamp(2rem, 4vw, 3rem);
  border-top: 3px solid var(--sky-700);
  border-radius: 10px;
  box-shadow: 0 30px 60px -30px rgba(10, 30, 60, 0.22), 0 6px 16px -6px rgba(10, 30, 60, 0.08);
}

/* Progress */
.quiz-progress { margin-bottom: 2.5rem; }
.quiz-progress__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.quiz-progress__label { color: var(--text-soft); }
.quiz-progress__pct { color: var(--sky-700); }
.quiz-progress__track {
  height: 3px;
  background: rgba(10, 30, 60, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.quiz-progress__bar {
  height: 100%;
  width: var(--quiz-pct, 0%);
  background: linear-gradient(90deg, var(--sky-700), var(--sky-500));
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Question panels */
.quiz-question { display: none; animation: quizFade 0.4s ease both; }
.quiz-question.is-active { display: block; }
@keyframes quizFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-question__kicker {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 700;
  display: block;
  margin-bottom: 0.6rem;
}
.quiz-question__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.8vw, 2rem);
  color: var(--ink-900);
  line-height: 1.2;
  margin: 0 0 1.75rem;
}
.quiz-question__title em { font-style: italic; color: var(--sky-700); }

.quiz-options {
  display: grid;
  gap: 0.6rem;
}
.quiz-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.35rem;
  border: 1.5px solid rgba(10, 30, 60, 0.12);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.quiz-option:hover {
  border-color: var(--sky-500);
  background: var(--foam-100);
}
.quiz-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.quiz-option__dot {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid rgba(10, 30, 60, 0.25);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.quiz-option__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--sky-700);
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.quiz-option input:checked ~ .quiz-option__dot {
  border-color: var(--sky-700);
}
.quiz-option input:checked ~ .quiz-option__dot::after { transform: scale(1); }
.quiz-option:has(input:checked) {
  border-color: var(--sky-700);
  background: var(--foam-100);
  box-shadow: 0 0 0 3px rgba(43, 128, 187, 0.1);
}
.quiz-option__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.4;
}
.quiz-option__body strong {
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--ink-900);
  font-weight: 600;
}
.quiz-option__body small {
  font-size: 0.88rem;
  color: var(--text-soft);
  font-weight: 400;
}

/* Nav */
.quiz-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(10, 30, 60, 0.08);
  justify-content: space-between;
}
.quiz-nav__next { margin-left: auto; }
.quiz-nav__next:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Results */
.quiz-card--results { text-align: center; }
.quiz-results__title { margin: 0.75rem 0 0.5rem; }
.quiz-results__subtitle {
  color: var(--text-soft);
  font-size: 1rem;
  margin: 0 0 2rem;
  line-height: 1.6;
}
.quiz-matches {
  display: grid;
  gap: 1rem;
  text-align: left;
}
.quiz-match {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.75rem;
  background: var(--cream-100);
  border-radius: 8px;
  border-left: 3px solid var(--sky-500);
  transition: transform 0.3s, box-shadow 0.3s;
}
.quiz-match--top {
  background: linear-gradient(135deg, var(--ink-900) 0%, #1a3a5a 100%);
  color: #fff;
  border-left-color: var(--sky-500);
  box-shadow: 0 20px 50px -20px rgba(10, 30, 60, 0.35);
}
.quiz-match__rank {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-right: 1px solid rgba(10, 30, 60, 0.1);
  padding-right: 1rem;
}
.quiz-match--top .quiz-match__rank { border-right-color: rgba(255, 255, 255, 0.15); }
.quiz-match__n {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--sky-700);
  line-height: 1;
  font-feature-settings: "lnum";
}
.quiz-match--top .quiz-match__n { color: var(--sky-500); }
.quiz-match__label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 700;
}
.quiz-match--top .quiz-match__label { color: rgba(255, 255, 255, 0.55); }
.quiz-match__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
  color: var(--ink-900);
  line-height: 1.2;
}
.quiz-match--top .quiz-match__name { color: #fff; }
.quiz-match__price {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--sky-700);
  display: block;
  margin-bottom: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.quiz-match--top .quiz-match__price { color: var(--sky-500); }
.quiz-match__desc {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}
.quiz-match--top .quiz-match__desc { color: rgba(255, 255, 255, 0.78); }

.quiz-match--top .quiz-match__water,
.quiz-match--top .quiz-match__align,
.quiz-match--top .quiz-match__verify,
.quiz-match--top .quiz-match__links a { color: rgba(255, 255, 255, 0.82); }
.quiz-match__water,
.quiz-match__align { color: var(--text-soft); font-size: 0.92rem; line-height: 1.6; margin: 0.6rem 0 0; }
.quiz-match__verify { color: var(--text-soft); font-size: 0.88rem; line-height: 1.55; margin: 0.75rem 0 0; padding-top: 0.65rem; border-top: 1px solid rgba(10, 30, 60, 0.08); }
.quiz-match--top .quiz-match__verify { border-top-color: rgba(255, 255, 255, 0.15); }
.quiz-match__verify ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.quiz-match__verify li { margin-bottom: 0.3rem; }
.quiz-match__links { margin: 0.85rem 0 0; font-size: 0.92rem; }
.quiz-match__links a { color: var(--sky-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.quiz-match--top .quiz-match__links a { color: var(--sky-500); }
.quiz-results__disclaimer { color: var(--text-soft); font-size: 0.85rem; line-height: 1.6; max-width: 720px; margin: 1.5rem auto 0; text-align: left; }
.quiz-report__privacy { color: var(--text-soft); font-size: 0.82rem; line-height: 1.55; margin: 0.75rem 0 0; }
.quiz-report__privacy a { color: var(--sky-700); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
  .quiz-match {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .quiz-match__rank {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid rgba(10, 30, 60, 0.1);
    padding: 0 0 0.75rem;
    align-items: baseline;
    gap: 0.75rem;
  }
  .quiz-match--top .quiz-match__rank { border-bottom-color: rgba(255, 255, 255, 0.15); }
  .quiz-match__n { font-size: 1.8rem; }
}

/* Report capture */
.quiz-report {
  margin-top: 2rem;
  padding: 1.75rem;
  border-top: 1px solid rgba(10, 30, 60, 0.08);
  text-align: left;
}
.quiz-report__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
  color: var(--ink-900);
}
.quiz-report__title em { font-style: italic; color: var(--sky-700); }
.quiz-report__lede {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}
.quiz-report__form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.quiz-report__input {
  flex: 1;
  min-width: 220px;
  padding: 0.85rem 1.1rem;
  border-radius: 6px;
  border: 1.5px solid rgba(10, 30, 60, 0.15);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink-900);
  transition: border-color 0.2s;
}
.quiz-report__input:focus {
  outline: none;
  border-color: var(--sky-700);
  box-shadow: 0 0 0 3px rgba(43, 128, 187, 0.1);
}
.quiz-report__input.is-error { border-color: #dc2626; }
.quiz-report__confirm {
  color: #2b9a5c;
  font-size: 0.9rem;
  margin: 0.75rem 0 0;
  font-weight: 500;
}

.quiz-report__error {
  color: #b3261e;
  font-size: 0.9rem;
  margin: 0.75rem 0 0;
  font-weight: 500;
}

/* ============================================================
   MORTGAGE CALCULATOR - Editorial financial UI
   ============================================================ */
.mc-hero-copy {
  max-width: 860px;
}

.mc-hero-copy .hero-ed-lede {
  margin-inline: auto;
  max-width: 690px;
}

.mc-hero-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.35rem;
}

/* FLAT TAG TOKEN (owner 07-05 de-buttonize pass, §3 affordance law): these
   are dead labels (no click target) — drop the pill/button chrome. */
.mc-hero-points {
  row-gap: 0.6rem;
}
.mc-hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0 0 0.65rem;
  border-radius: 0;
  background: none;
  border: 0;
  border-left: 2px solid rgba(24, 74, 115, 0.28);
  color: var(--ink-800);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mc-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.72fr);
  gap: clamp(1.25rem, 2.2vw, 2rem);
  align-items: start;
  max-width: 1080px;
  margin: clamp(1.25rem, 3vw, 2.25rem) auto 0;
}
@media (max-width: 960px) {
  .mc-grid { grid-template-columns: 1fr; }
}

.mc-inputs {
  background: #fff;
  border: 1px solid rgba(10, 30, 60, 0.08);
  border-top: 3px solid var(--sky-700);
  border-radius: 4px;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  box-shadow: 0 16px 40px -24px rgba(10, 30, 60, 0.22);
}
.mc-panel__title {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2vw, 1.75rem);
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 1.1rem;
  letter-spacing: -0.01em;
}
.mc-panel__title em {
  font-style: italic;
  color: var(--sky-700);
}
.mc-section-title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-900);
  margin: 1.55rem 0 1.05rem;
  padding-top: 1.25rem;
  position: relative;
  text-align: center;
  letter-spacing: -0.01em;
}
.mc-section-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 2px;
  background: var(--sky-700);
}
.mc-section-title:first-child,
.mc-field-list + .mc-section-title { margin-top: 1.35rem; }

.mc-field-list {
  display: grid;
  gap: 0.85rem;
}
.mc-field { display: grid; gap: 0.4rem; }
.mc-field--split {
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 520px) {
  .mc-field--split { grid-template-columns: 1fr; }
}
.mc-field__label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
}
.mc-field__hint {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-soft);
  margin: 0.15rem 0 0;
  line-height: 1.45;
  font-style: italic;
}
.mc-field__unit {
  display: block;
  font-size: 0.7rem;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
  font-style: italic;
  text-transform: none;
  font-weight: 400;
}

.mc-field__wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.mc-field__wrap--prefixed::before {
  content: attr(data-prefix);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  background: var(--foam-100, #f2f6fa);
  border: 1.5px solid rgba(10, 30, 60, 0.15);
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--sky-700);
  font-weight: 500;
}
.mc-field__wrap--prefixed .mc-input {
  border-radius: 0 4px 4px 0;
}
.mc-field__wrap--suffixed::after {
  content: attr(data-suffix);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  background: var(--foam-100, #f2f6fa);
  border: 1.5px solid rgba(10, 30, 60, 0.15);
  border-left: none;
  border-radius: 0 4px 4px 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-soft);
  font-weight: 500;
}
.mc-field__wrap--suffixed .mc-input {
  border-radius: 4px 0 0 4px;
}

.mc-input {
  width: 100%;
  flex: 1;
  padding: 0.72rem 0.9rem;
  background: #fff;
  border: 1.5px solid rgba(10, 30, 60, 0.15);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-900);
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
}
.mc-input::-webkit-outer-spin-button,
.mc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mc-input:focus {
  outline: none;
  border-color: var(--sky-700);
  box-shadow: 0 0 0 3px rgba(43, 128, 187, 0.1);
}
select.mc-input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
                    linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) center, calc(100% - 0.85rem) center;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  cursor: pointer;
}

.mc-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-900);
  line-height: 1.5;
  padding: 0.4rem 0;
}
.mc-checkbox input[type="checkbox"] {
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  border: 1.5px solid rgba(10, 30, 60, 0.3);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  position: relative;
}
.mc-checkbox input[type="checkbox"]:checked {
  background: var(--sky-700);
  border-color: var(--sky-700);
}
.mc-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mc-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--sky-700);
  outline-offset: 2px;
}
.mc-checkbox__label {
  flex: 1;
}

.mc-results {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 7.5rem;
}
@media (max-width: 960px) {
  .mc-results { position: static; }
}

.mc-summary {
  background: linear-gradient(160deg, var(--ink-900) 0%, #0f2a48 100%);
  color: #fff;
  border-radius: 4px;
  padding: clamp(1.35rem, 2.2vw, 2rem);
  border-top: 3px solid var(--sky-700);
  box-shadow: 0 20px 50px -24px rgba(10, 30, 60, 0.4);
  position: relative;
  overflow: hidden;
}
.mc-summary::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(43, 128, 187, 0.18), transparent 70%);
  pointer-events: none;
}
.mc-summary__kicker {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-500, #5aa5d0);
  font-weight: 600;
  margin: 0 0 0.6rem;
  position: relative;
}
.mc-summary__total {
  font-family: var(--font-heading);
  font-size: clamp(2.35rem, 4.8vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  color: #fff;
  position: relative;
}
.mc-summary__total em {
  font-style: italic;
  color: var(--sky-500, #5aa5d0);
  font-size: 0.7em;
  font-weight: 400;
  margin-left: 0.15em;
}
.mc-summary__note {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 1.1rem;
  font-style: italic;
  position: relative;
}

.mc-breakdown {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
}
.mc-breakdown__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mc-breakdown__row:last-child { border-bottom: none; }
.mc-breakdown__row dt {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}
.mc-breakdown__row dd {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: #fff;
  font-weight: 500;
  margin: 0;
}

.mc-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin-top: 1rem;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
@media (max-width: 420px) {
  .mc-totals { grid-template-columns: 1fr; }
}
.mc-totals__item {
  background: rgba(255, 255, 255, 0.04);
  padding: 0.8rem 0.9rem;
  display: grid;
  gap: 0.3rem;
}
.mc-totals__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}
.mc-totals__value {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.mc-dti {
  background: #fff;
  border: 1px solid rgba(10, 30, 60, 0.08);
  border-top: 3px solid var(--sky-700);
  border-radius: 4px;
  padding: clamp(1.25rem, 2.2vw, 1.8rem);
  box-shadow: 0 20px 50px -30px rgba(10, 30, 60, 0.18);
}
.mc-dti__kicker {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.mc-dti__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.mc-dti__title em { font-style: italic; color: var(--sky-700); }
.mc-dti__lede {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0 0 1.25rem;
}
.mc-dti__fields {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.mc-dti__readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(10, 30, 60, 0.1);
  gap: 1rem;
  flex-wrap: wrap;
}
.mc-dti__readout-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.mc-dti__readout-value {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.mc-dti__readout-value[data-status="great"] { color: #0b7a42; }
.mc-dti__readout-value[data-status="good"]  { color: #1b6a9e; }
.mc-dti__readout-value[data-status="warn"]  { color: #2E6FA3; }
.mc-dti__readout-value[data-status="bad"]   { color: #b93838; }

/* ----- Loan comparison table ----- */
.mc-compare-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid rgba(10, 30, 60, 0.08);
  border-radius: 4px;
  box-shadow: 0 12px 32px -24px rgba(10, 30, 60, 0.2);
}
.mc-compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-family: var(--font-body);
}
.mc-compare thead th {
  background: var(--cream-100, #f0f4f8);
  padding: 1.15rem 1.25rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
  border-bottom: 1px solid rgba(10, 30, 60, 0.08);
}
.mc-compare tbody td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(10, 30, 60, 0.06);
  color: var(--ink-900);
  font-size: 0.95rem;
  vertical-align: top;
}
.mc-compare tbody tr:last-child td { border-bottom: none; }
.mc-compare tbody tr:hover { background: rgba(248, 244, 236, 0.4); }
.mc-compare__name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: -0.005em;
}
.mc-compare__name em {
  font-style: italic;
  color: var(--sky-700);
  font-size: 0.85em;
  display: block;
  margin-top: 0.15rem;
  font-weight: 400;
}
.mc-compare__value {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-900);
}
.mc-compare__note {
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.5;
  font-style: italic;
}

/* ----- FL cost grid - 6 card items ----- */
.mc-cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.mc-cost-card {
  background: #fff;
  border: 1px solid rgba(10, 30, 60, 0.08);
  border-radius: 4px;
  padding: clamp(1.5rem, 2.5vw, 1.85rem);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  position: relative;
}
.mc-cost-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--sky-700);
  transition: width 0.4s ease;
}
.mc-cost-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(10, 30, 60, 0.22);
  border-color: rgba(10, 30, 60, 0.12);
}
.mc-cost-card:hover::before { width: 100%; }
.mc-cost-card__kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
}
.mc-cost-card__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.mc-cost-card__title em {
  font-style: italic;
  color: var(--sky-700);
}
.mc-cost-card__value {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink-900);
  margin: 0.2rem 0 0.4rem;
}
.mc-cost-card__note {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
}

/* ----- Final CTA composition ----- */
.mc-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ============================================================
   BLOG - Editorial post detail, archive, and default page
   ============================================================ */
.post-hero {
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  position: relative;
}
/* P2 2026-07-05: at 768 the eyebrow pill (BUYER EDUCATION / MARKET UPDATES)
   tucked under the fixed header — same class of fix as the other hero-clip
   overrides (see BLOCKER 4 / --header-h pattern below). */
@media (max-width: 800px) {
  .post-hero {
    padding-top: calc(var(--header-h, 76px) + 1.75rem);
  }
}
.post-hero__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.post-hero__categories {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  justify-content: center;
}
.post-hero__category {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-700);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(43, 128, 187, 0.28);
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.post-hero__category:hover {
  background: var(--sky-700);
  color: #fff;
  border-color: var(--sky-700);
}
.post-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0 0 1.25rem;
}
.post-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  flex-wrap: wrap;
  justify-content: center;
}
.post-hero__meta-separator {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: rgba(10, 30, 60, 0.22);
}

.post-featured {
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  width: min(var(--container-wide, 1440px), calc(100% - 2.4rem));
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-editorial);
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--foam-100);
}
.post-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Portrait featured images (e.g. brayden-house-forsale-real 1500x2000):
   the default 16:9 frame center-crops a tall photo and cuts the subject's
   head off. Give portraits a portrait-safe frame + top-anchored crop so the
   head/face stays fully visible. Scoped via .post-featured--portrait in
   single.php so landscape featured images keep the 16:9 frame. */
.post-featured--portrait {
  aspect-ratio: 4 / 5;
  width: min(540px, calc(100% - 2.4rem));
}
.post-featured--portrait img {
  object-position: center top;
}

/* Real SWFL Buyers gallery (page-buy.php). Reuses the head-safe portrait
   idiom: 4:5 frame + object-fit cover + top-anchored crop so faces stay in
   frame. Real client photos only. */
.real-buyers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.real-buyer-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.real-buyer-photo {
  margin: 0;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--foam-100);
  box-shadow: var(--shadow-editorial);
}
.real-buyer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.real-buyer-card figcaption {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--sky-700);
  text-align: center;
  letter-spacing: 0.01em;
}
@media (max-width: 900px) {
  .real-buyers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .real-buyers-grid { grid-template-columns: 1fr; }
}

.post-body-wrap {
  padding: 0 0 clamp(4rem, 7vw, 6rem);
}
.post-body {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text);
}
.post-body > p {
  margin: 0 0 1.5rem;
}
/* P0 2026-07-05: drop-cap REMOVED. ::first-letter includes adjacent
   punctuation per CSS spec, so any post opening with a contraction
   (e.g. "I'm Brayden...") had the apostrophe swallowed into the drop
   cap, stranding "m Brayden..." as the visible first letter. This is
   inherent ::first-letter behavior, not a one-off bug, so it is removed
   rather than patched (content > choreography). See /cape-coral-waterfront-homes-guide-2026/.
*/
.post-body h2,
.post-body h3,
.post-body h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 2.5rem 0 1rem;
}
.post-body h2 { font-size: clamp(1.6rem, 2.5vw, 2rem); }
.post-body h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
.post-body h4 { font-size: 1.2rem; }
.post-body h2 em, .post-body h3 em, .post-body h4 em {
  font-style: italic;
  color: var(--sky-700);
}
.post-body ul,
.post-body ol {
  margin: 0 0 1.5rem 1.5rem;
  padding: 0;
  list-style: disc;
}
.post-body ol { list-style: decimal; }
.post-body li {
  margin-bottom: 0.55rem;
  line-height: 1.7;
}
.post-body blockquote {
  border-left: 3px solid var(--sky-700);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 2rem 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink-900);
}
.post-body blockquote p { margin-bottom: 0.5rem; }
.post-body blockquote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.post-body a {
  color: var(--sky-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.post-body a:hover { color: var(--ink-900); }
.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 2rem 0;
  box-shadow: 0 16px 40px -24px rgba(10, 30, 60, 0.25);
}
.post-body figure {
  margin: 2rem 0;
}
.post-body figcaption {
  font-size: 0.85rem;
  color: var(--text-soft);
  text-align: center;
  font-style: italic;
  margin-top: 0.75rem;
}
.post-body hr {
  border: none;
  border-top: 1px solid rgba(10, 30, 60, 0.1);
  margin: 3rem 0;
}
.post-body pre,
.post-body code {
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
  font-size: 0.92rem;
}
.post-body code {
  background: var(--foam-100);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  color: var(--ink-900);
}
.post-body pre {
  background: var(--ink-900);
  color: #e6f0f8;
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: 2rem 0;
  line-height: 1.55;
}
.post-body pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.post-nav {
  max-width: 720px;
  margin: clamp(3rem, 5vw, 4rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(10, 30, 60, 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
}
.post-nav__item {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease;
}
.post-nav__item--next { text-align: right; }
.post-nav__item:hover { transform: translateY(-2px); }
.post-nav__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.post-nav__item--next .post-nav__kicker { flex-direction: row-reverse; }
.post-nav__kicker svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
.post-nav__item:hover .post-nav__kicker svg {
  transform: translateX(-3px);
}
.post-nav__item--next:hover .post-nav__kicker svg {
  transform: translateX(3px);
}
.post-nav__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  transition: color 0.2s;
}
.post-nav__item:hover .post-nav__title { color: var(--sky-700); }

/* ----- Archive / Index listing ----- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.post-card {
  background: #fff;
  border: 1px solid rgba(10, 30, 60, 0.08);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
  color: inherit;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px -28px rgba(10, 30, 60, 0.28);
  border-color: rgba(10, 30, 60, 0.12);
}
.post-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--foam-100);
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.post-card:hover .post-card__media img {
  transform: scale(1.05);
}
.post-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--foam-100), var(--slate-100));
  color: var(--sky-700);
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-style: italic;
  letter-spacing: -0.02em;
}
.post-card__body {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.post-card__kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
}
.post-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.8vw, 1.45rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  margin: 0;
}
.post-card__title em { font-style: italic; color: var(--sky-700); }
.post-card:hover .post-card__title { color: var(--sky-700); }
.post-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0.25rem 0 0.5rem;
}
.post-card__meta {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(10, 30, 60, 0.08);
}
.post-card__readmore {
  margin-left: auto;
  color: var(--sky-700);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.post-card__readmore svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}
.post-card:hover .post-card__readmore svg {
  transform: translateX(3px);
}

/* ----- Pagination ----- */
.post-pagination {
  margin-top: clamp(3rem, 5vw, 4rem);
  text-align: center;
}
.post-pagination .nav-links {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.post-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.85rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid rgba(10, 30, 60, 0.12);
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.2s;
}
.post-pagination .page-numbers:hover {
  background: var(--sky-700);
  border-color: var(--sky-700);
  color: #fff;
}
.post-pagination .page-numbers.current {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.post-pagination .page-numbers.dots {
  background: transparent;
  border: none;
  color: var(--text-soft);
}

/* ----- Generic page (fallback template) ----- */
.page-content-wrap {
  padding: 0 0 clamp(4rem, 7vw, 6rem);
}
.page-content {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text);
}
.page-content > p { margin: 0 0 1.5rem; }
.page-content h2,
.page-content h3,
.page-content h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--ink-900);
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.01em;
}
.page-content h2 { font-size: clamp(1.6rem, 2.5vw, 2rem); }
.page-content h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
.page-content a {
  color: var(--sky-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-content a:hover { color: var(--ink-900); }
.page-content ul,
.page-content ol {
  margin: 0 0 1.5rem 1.5rem;
  padding: 0;
  list-style: disc;
}
.page-content ol { list-style: decimal; }
.page-content li { margin-bottom: 0.55rem; }

.post-empty {
  text-align: center;
  padding: clamp(3rem, 5vw, 5rem) 0;
  max-width: 520px;
  margin: 0 auto;
}
.post-empty__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.post-empty__title em { font-style: italic; color: var(--sky-700); }
.post-empty__lede {
  font-family: var(--font-body);
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 1.75rem;
}

/* ============================================================
   FORM SHORTCODE - shared consent + step actions
   ============================================================ */
.form-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-soft);
  cursor: pointer;
}
.form-consent__checkbox {
  appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.18rem 0 0;
  flex-shrink: 0;
  border: 1.5px solid rgba(10, 30, 60, 0.28);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}
.form-consent__checkbox:checked {
  background: var(--sky-700);
  border-color: var(--sky-700);
}
.form-consent__checkbox:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-consent__checkbox:focus-visible {
  outline: 2px solid var(--sky-700);
  outline-offset: 2px;
}
.form-consent a {
  color: var(--sky-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-consent a:hover { color: var(--ink-900); }

.form-actions-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.form-actions-row .milner-form-back { flex-shrink: 0; }
.form-actions-row .btn-full { flex: 1; }

/* ============================================================
   404, SEARCH, ARCHIVE - supporting templates
   ============================================================ */
.error-404 { text-align: center; }
.error-404__inner {
  max-width: 760px;
  margin: 0 auto;
}
.error-404__numeral {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 18vw, 13rem);
  font-weight: 400;
  line-height: 0.95;
  color: rgba(255, 255, 255, 0.08);
  letter-spacing: -0.04em;
  margin: 0 0 1rem;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.02em;
}
.error-404__numeral-mid em {
  font-style: italic;
  color: var(--sky-500, #5aa5d0);
  opacity: 0.85;
}
.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin: 2rem 0 2.5rem;
}
.error-404__search {
  display: flex;
  max-width: 520px;
  margin: 0 auto 2.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(96, 195, 239, 0.28);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.error-404__search-input {
  flex: 1;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
}
.error-404__search-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.error-404__search-btn {
  padding: 0 1.25rem;
  background: var(--sky-700);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.error-404__search-btn:hover { background: var(--sky-500, #4a7fa5); }

.error-404__helpful {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(96, 195, 239, 0.15);
}
.error-404__helpful-kicker {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1.25rem;
}
.error-404__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: center;
}
.error-404__links a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border-bottom: 1px solid rgba(96, 195, 239, 0.3);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.error-404__links a:hover {
  color: var(--sky-500, #5aa5d0);
  border-bottom-color: var(--sky-500, #5aa5d0);
}

/* ----- Search hero form ----- */
.search-hero__form {
  display: flex;
  max-width: 560px;
  margin: 1.5rem auto 0;
  background: #fff;
  border: 1px solid rgba(10, 30, 60, 0.12);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 32px -20px rgba(10, 30, 60, 0.2);
}
.search-hero__input {
  flex: 1;
  padding: 0.95rem 1.25rem;
  background: transparent;
  border: none;
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
}
.search-hero__input::placeholder { color: var(--text-soft); }
.search-hero__btn {
  padding: 0 1.25rem;
  background: var(--ink-900);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-hero__btn:hover { background: var(--sky-700); }

/* ----- Reusable searchform partial ----- */
.searchform {
  display: flex;
  background: #fff;
  border: 1px solid rgba(10, 30, 60, 0.15);
  border-radius: 4px;
  overflow: hidden;
}
.searchform__input {
  flex: 1;
  padding: 0.7rem 0.95rem;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-900);
  outline: none;
}
.searchform__input::placeholder { color: var(--text-soft); }
.searchform__btn {
  padding: 0 0.95rem;
  background: var(--ink-900);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.searchform__btn:hover { background: var(--sky-700); }

.post-empty__actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   CITY HERO MAP - full-bleed Leaflet hero for Cape Coral + Fort Myers
   ============================================================ */

.city-hero-map-section {
  position: relative;
  width: 100%;
  height: min(82vh, 780px);
  min-height: 560px;
  background: #0a1420;
  overflow: hidden;
  isolation: isolate;
}

.city-hero-map-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0a1420;
}

.city-hero-map-canvas.leaflet-container {
  background: #0a1420;
  font-family: var(--font-body);
}

/* Subtle ink gradient on the map so the welcome card reads */
.city-hero-map-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 28% 38%, rgba(9, 94, 147, 0.55), transparent 55%),
    linear-gradient(180deg, rgba(9, 94, 147, 0.35) 0%, transparent 28%, transparent 72%, rgba(9, 94, 147, 0.55) 100%);
  pointer-events: none;
}

/* Welcome badge - centered editorial floating card over the map */
.city-hero-welcome-badge {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: min(560px, 92%);
  padding: 2.2rem 2.4rem 2.3rem;
  background: rgba(9, 94, 147, 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  box-shadow:
    0 24px 70px -20px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(43, 128, 187, 0.18);
  text-align: center;
  color: #fff;
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: auto;
}

.city-hero-welcome-badge.is-faded {
  opacity: 0;
  transform: translate(-50%, -58%);
  pointer-events: none;
}

.city-hero-welcome-badge__kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-300);
  margin-bottom: 0.9rem;
}

.city-hero-welcome-badge__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
  color: #fff;
}

.city-hero-welcome-badge__lede {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto 1.25rem;
  max-width: 44ch;
}

.city-hero-welcome-badge__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Buttons inside the dark badge - flip to light-on-dark semantics */
.city-hero-welcome-badge__actions .btn-lux {
  background: #fff;
  border-color: #fff;
  color: var(--ink-900);
}
.city-hero-welcome-badge__actions .btn-lux::before { background: var(--sky-500); }
.city-hero-welcome-badge__actions .btn-lux:hover { color: #fff; border-color: var(--sky-500); }

.city-hero-welcome-badge__actions .btn-lux-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.city-hero-welcome-badge__actions .btn-lux-outline::before { background: #fff; }
.city-hero-welcome-badge__actions .btn-lux-outline:hover { color: var(--ink-900); border-color: #fff; }

/* Inline italic "or call …" link - sits next to the primary pill */
.city-hero-welcome-badge__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
/* P2 2026-07-05 align sweep: was a 3rd inline item inside
   __actions (justify-content:center) — its width unbalanced the row and
   pulled the two real CTA buttons left-of-center in the centered badge. Now
   a standalone line below the button pair; badge's own text-align:center
   centers it independently since it's no longer part of that flex group. */
.city-hero-welcome-badge__link--below {
  margin-top: 0.85rem;
}
.city-hero-welcome-badge__link em {
  font-style: italic;
  font-weight: 400;
}
.city-hero-welcome-badge__link:hover,
.city-hero-welcome-badge__link:focus-visible {
  color: #fff;
  transform: translateX(2px);
  outline: none;
}

.city-hero-welcome-badge__hint {
  display: block;
  margin-top: 1.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

/* POI rail - bottom-center circular category toggles */
.city-hero-poi-rail {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(0.4rem, 1vw, 0.75rem);
  padding: 0.6rem;
  background: rgba(9, 94, 147, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5);
  max-width: calc(100% - 1.8rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.city-hero-poi-rail::-webkit-scrollbar { display: none; }

.city-hero-poi-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  flex: 0 0 auto;
  width: clamp(60px, 7vw, 68px);
  min-width: clamp(60px, 7vw, 68px);
  padding: 0.55rem 0.35rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.city-hero-poi-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}

.city-hero-poi-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: currentColor;
}
.city-hero-poi-btn__icon svg { display: block; }

.city-hero-poi-btn__label {
  display: block;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.city-hero-poi-btn.is-active {
  background: var(--poi-color, var(--sky-500));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.city-hero-poi-btn.is-active:hover {
  filter: brightness(1.08);
}

/* Marker - teardrop pin with color dot */
.city-hero-marker-wrap {
  background: transparent !important;
  border: 0 !important;
}

.city-hero-marker {
  position: relative;
  display: block;
  width: 30px;
  height: 38px;
}

.city-hero-marker__pin {
  position: absolute;
  inset: 0 0 4px 0;
  background: var(--m-color, var(--sky-500));
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  transform-origin: center center;
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.25) inset;
}

.city-hero-marker__dot {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Leaflet popup overrides - editorial card */
.leaflet-popup.city-hero-popup-wrap .leaflet-popup-content-wrapper {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 18px 44px -12px rgba(9, 94, 147, 0.35);
  padding: 0;
  overflow: hidden;
}
.leaflet-popup.city-hero-popup-wrap .leaflet-popup-content {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  width: 260px !important;
}
.leaflet-popup.city-hero-popup-wrap .leaflet-popup-tip {
  background: #fff;
}

.city-hero-popup {
  padding: 1.1rem 1.2rem 1.15rem;
}

.city-hero-popup__cat {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.city-hero-popup__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--ink-900);
  margin: 0 0 0.45rem;
}

.city-hero-popup__blurb {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-700);
  margin: 0 0 0.6rem;
}

.city-hero-popup__addr {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-soft, #5b6b7d);
  margin: 0 0 0.75rem;
}

.city-hero-popup__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--sky-500);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.city-hero-popup__dir:hover {
  color: var(--ink-900);
}

/* Anchor-nav strip directly under the map - jumps to sections */
.city-hero-nav-strip {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.8);
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.city-hero-nav-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.city-hero-nav-strip a {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}

.city-hero-nav-strip a:hover,
.city-hero-nav-strip a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.city-hero-nav-strip__sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.75rem;
  user-select: none;
}

/* Tablet */
@media (max-width: 1024px) {
  .city-hero-map-section {
    height: min(72vh, 640px);
    min-height: 520px;
  }
  .city-hero-welcome-badge {
    padding: 1.8rem 1.6rem 1.9rem;
    max-width: min(480px, 90%);
  }
  .city-hero-welcome-badge__title {
    font-size: clamp(1.85rem, 4vw, 2.6rem);
  }
  .city-hero-welcome-badge__lede {
    font-size: 0.93rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .city-hero-map-section {
    height: min(88vh, 680px);
    min-height: 560px;
  }
  .city-hero-welcome-badge {
    top: 44%;
    padding: 1.35rem 1.25rem 1.4rem;
    max-width: calc(100% - 2rem);
  }
  .city-hero-welcome-badge__kicker {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.55rem;
  }
  .city-hero-welcome-badge__title {
    font-size: clamp(1.7rem, 6.2vw, 2.1rem);
    margin-bottom: 0.55rem;
  }
  .city-hero-welcome-badge__lede {
    font-size: 0.87rem;
    line-height: 1.48;
  }
  .city-hero-welcome-badge__hint {
    margin-top: 0.85rem;
  }
  .city-hero-poi-rail {
    bottom: 1rem;
    gap: 0.5rem;
    padding: 0.45rem;
    max-width: calc(100% - 1rem);
    width: auto;
  }
  .city-hero-poi-btn {
    width: 60px;
    min-width: 60px;
    padding: 0.45rem 0.25rem;
    font-size: 0.54rem;
  }
  .city-hero-poi-btn__icon {
    width: 24px;
    height: 24px;
  }
  .city-hero-poi-btn__icon svg {
    width: 14px;
    height: 14px;
  }
  .city-hero-nav-strip {
    padding: 0.5rem 0;
  }
  .city-hero-nav-strip__inner {
    padding: 0 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.4rem;
    overflow-x: visible;
    scrollbar-width: auto;
  }
  .city-hero-nav-strip__inner::-webkit-scrollbar { display: none; }
  .city-hero-nav-strip a {
    flex: 0 0 auto;
    padding: 0.35rem 0.75rem;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }
  .city-hero-nav-strip__sep { display: none; }
  .leaflet-popup.city-hero-popup-wrap .leaflet-popup-content {
    width: 220px !important;
  }
}

/* 390px fine-tune - clear the rail, collapse POI buttons to icon-only */
@media (max-width: 420px) {
  .city-hero-map-section {
    height: 82vh;
    min-height: 540px;
  }
  .city-hero-welcome-badge {
    /* P1 fix (2026-07-05): top:38% put the card's top edge (center - half
       box height) above the 76px fixed header on /fort-myers/ at 390,
       clipping the eyebrow + first H1 line under the header. Card height
       here comfortably clears the header at 44%; verified via screenshot. */
    top: 44%;
    padding: 1.1rem 1rem 1.2rem;
  }
  .city-hero-welcome-badge__title {
    font-size: 1.75rem;
  }
  .city-hero-welcome-badge__lede {
    font-size: 0.82rem;
  }
  .city-hero-welcome-badge__hint {
    display: none;
  }
  .city-hero-welcome-badge__actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
  }
  .city-hero-welcome-badge__actions .btn-lux {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .city-hero-welcome-badge__link {
    justify-content: center;
    font-size: 0.85rem;
  }
  /* P1 fix (2026-07-05): these were collapsed to icon-only circles with
     font-size:0 + a visually-hidden label, so MARINAS/BEACHES/PARKS/SCHOOLS/
     MEDICAL/SHOPPING read as six unlabeled mystery buttons at 390. Keep the
     label visible as a small-caps caption under the icon instead; the rail
     already scrolls horizontally (overflow-x:auto on .city-hero-poi-rail,
     set above), so this becomes the labeled horizontal scroll row rather
     than hiding the text. */
  .city-hero-poi-rail {
    gap: 0.35rem;
    padding: 0.4rem;
    justify-content: flex-start;
  }
  .city-hero-poi-btn {
    width: 52px;
    min-width: 52px;
    height: 52px;
    padding: 0.3rem 0.15rem;
    border-radius: 14px;
    font-size: 0.5rem;
  }
  .city-hero-poi-btn__icon {
    width: 18px;
    height: 18px;
    margin: 0;
  }
  .city-hero-poi-btn__icon svg {
    width: 13px;
    height: 13px;
  }
  .city-hero-poi-btn__label {
    display: block;
    line-height: 1.05;
    letter-spacing: 0.04em;
  }
}

/* === Six Value Pillars (homepage) === */
.value-pillars {
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.value-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.value-pillar {
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.10);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.value-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -32px rgba(9, 94, 147, 0.20);
  border-color: var(--sky-500, #4a7fa5);
}
.value-pillar__num {
  display: inline-block;
  font-family: var(--font-heading, "Playfair Display", Georgia, serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sky-500, #4a7fa5);
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.value-pillar__name {
  font-family: var(--font-heading, "Playfair Display", Georgia, serif);
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink-900, #1b2d4f);
  margin: 0 0 0.85rem;
}
.value-pillar__name em {
  font-style: italic;
  font-weight: 400;
  color: var(--sky-500, #4a7fa5);
}
.value-pillar__body {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--ink-700, #4a5363);
  margin: 0;
}
@media (max-width: 1024px) {
  .value-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .value-pillars-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .value-pillar {
    padding: 1.5rem 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PROPERTY PROFILE - civic dossier per Cape Coral parcel
   Used on page-property-profile.php
   ═══════════════════════════════════════════════════════════════════════ */

.profile-hud {
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  border: 1px solid rgba(24, 74, 115, 0.10);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem 1.25rem;
  box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.35);
  margin-bottom: 1.5rem;
}
.profile-hud-search { position: relative; }
.profile-hud-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: 0.4rem;
}
.profile-hud-search-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.profile-hud-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid rgba(24, 74, 115, 0.18);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink-900);
}
.profile-hud-input:focus {
  outline: none;
  border-color: var(--sky-500);
  box-shadow: 0 0 0 3px rgba(93, 167, 217, 0.18);
}
.profile-hud-btn {
  flex: 0 0 auto;
  background: var(--ink-800);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0.85rem 1.35rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.profile-hud-btn:hover { background: var(--ink-700); transform: translateY(-1px); }
.profile-hud-btn:active { transform: translateY(0); }
.profile-hud-hint {
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-soft);
}
.profile-hud-suggestions {
  position: absolute;
  z-index: 60;
  margin-top: 0.3rem;
  border: 1px solid rgba(24, 74, 115, 0.18);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  max-height: 280px;
  overflow-y: auto;
  left: 0;
  right: 0;
}
.profile-suggest-item {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(24, 74, 115, 0.06);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-800);
  cursor: pointer;
  text-align: left;
}
.profile-suggest-item:last-child { border-bottom: 0; }
.profile-suggest-item:hover,
.profile-suggest-item:focus {
  background: rgba(93, 167, 217, 0.08);
  outline: none;
}
.profile-suggest-addr {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ─── Dossier shell ─── */
.profile-dossier {
  min-height: 200px;
}
.profile-empty,
.profile-state {
  background: #fff;
  border: 1px dashed rgba(24, 74, 115, 0.20);
  border-radius: var(--radius-lg);
  padding: 3rem 1.5rem;
  text-align: center;
}
.profile-state--error {
  border-style: solid;
  border-color: rgba(220, 38, 38, 0.25);
  background: rgba(254, 242, 242, 0.6);
}
.profile-state--loading {
  border-color: rgba(93, 167, 217, 0.25);
  background: rgba(238, 246, 251, 0.6);
}
.profile-state-lede {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(31, 41, 55, 0.85);
  margin: 0.85rem 0 0;
}
.profile-card-note {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(31, 41, 55, 0.55);
  margin: 0 0 0.9rem;
  font-style: italic;
  max-width: 60ch;
}
.profile-empty-kicker,
.profile-state-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-500);
  margin-bottom: 0.5rem;
}
.profile-empty-title,
.profile-state-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--ink-900);
  margin: 0 0 0.5rem;
}
.profile-empty-lede {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-soft);
  margin: 0;
}

/* ─── Dossier card ─── */
.profile-card {
  background: #fff;
  border: 1px solid rgba(24, 74, 115, 0.10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -36px rgba(15, 23, 42, 0.25);
}
.profile-card-head {
  padding: 1.6rem 1.75rem 1.3rem;
  border-bottom: 1px solid rgba(24, 74, 115, 0.08);
  background: linear-gradient(180deg, #f8fbfe 0%, #ffffff 100%);
}
.profile-card-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-500);
  margin-bottom: 0.4rem;
}
.profile-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  color: var(--ink-900);
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}
.profile-coords {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.profile-tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}
.profile-tag--evac.is-high { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
.profile-tag--evac.is-med  { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.profile-tag--evac.is-low  { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.profile-tag--hazard { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
.profile-tag--ok     { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.profile-tag--incentive { background: rgba(124, 58, 237, 0.14); color: #6d28d9; }
.profile-tag--salt   { background: rgba(30, 111, 184, 0.14); color: #1e6fb8; }
.profile-tag--fresh  { background: rgba(22, 163, 74, 0.14); color: #15803d; }

.profile-card-body {
  padding: 1.4rem 1.75rem 1.6rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}
@media (max-width: 720px) {
  .profile-card-body { grid-template-columns: 1fr; gap: 1rem; }
  .profile-card-head { padding: 1.3rem 1.25rem 1rem; }
  .profile-card-title { font-size: 1.3rem; }
}
.profile-band {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.1rem 1.05rem;
  background: rgba(248, 251, 254, 0.7);
  border: 1px solid rgba(24, 74, 115, 0.06);
  border-radius: var(--radius-md);
}
.profile-band--risk {
  background: linear-gradient(180deg, rgba(254, 244, 235, 0.6) 0%, rgba(248, 251, 254, 0.6) 100%);
  border-color: rgba(245, 158, 11, 0.18);
}
.profile-band--water {
  background: linear-gradient(180deg, rgba(236, 246, 252, 0.7) 0%, rgba(248, 251, 254, 0.7) 100%);
  border-color: rgba(30, 111, 184, 0.18);
}
.profile-band-title {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-700);
  margin: 0 0 0.35rem;
}
.profile-band-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.profile-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.profile-row > span {
  color: var(--text-soft);
  font-size: 0.78rem;
  flex: 0 0 auto;
}
.profile-row > strong {
  color: var(--ink-900);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}
.profile-utility {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}
.profile-utility.is-on  { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.profile-utility.is-off { background: rgba(245, 158, 11, 0.16); color: #b45309; }

.profile-card-foot {
  padding: 1rem 1.75rem 1.4rem;
  border-top: 1px solid rgba(24, 74, 115, 0.08);
  display: flex;
  justify-content: flex-end;
  background: rgba(248, 251, 254, 0.5);
}
@media (max-width: 720px) {
  .profile-card-foot { padding: 0.9rem 1.25rem 1.2rem; }
}

/* ─── Profile Map Interactive Styles ─── */
.profile-map-container-wrap {
    max-width: 1400px;
}
.profile-map-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 80vh;
    min-height: 600px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 60px -36px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(24, 74, 115, 0.10);
    background: #e0e6ed;
}

.profile-map-toolbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    border-bottom: 1px solid rgba(24, 74, 115, 0.10);
    z-index: 1000;
    position: relative;
}

.profile-map-search {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.profile-map-search-row {
    display: flex;
    gap: 0.5rem;
}

#profile-map-address {
    flex: 1;
    width: 100%;
    padding: 0.75rem 1.25rem;
    border: 1px solid rgba(24, 74, 115, 0.20);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 1rem; /* 16px: stops iOS zoom-on-focus (2026-09-28) */
    outline: none;
    transition: border-color 0.2s;
}
#profile-map-address:focus {
    border-color: var(--sky-500);
}

.profile-map-toggles {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-toggle-btn {
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(24, 74, 115, 0.20);
    background: #fff;
    color: var(--ink-800);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}
.profile-toggle-btn:hover {
    background: rgba(24, 74, 115, 0.04);
}
.profile-toggle-btn[aria-pressed="true"] {
    background: rgba(93, 167, 217, 0.1);
    color: var(--sky-500);
    border-color: var(--sky-500);
}

.profile-map-viewport-wrapper {
    flex: 1;
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
}

.profile-map-viewport {
    flex: 1;
    width: 100%;
    position: relative;
    z-index: 1;
}

.profile-map-skeleton {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, #e0e6ed 0%, #f1f5f9 50%, #e0e6ed 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.profile-map-cta {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 1.25rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    z-index: 10;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink-900);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.profile-map-legend {
    position: absolute;
    bottom: 1.5rem; right: 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(24, 74, 115, 0.10);
    z-index: 1000;
    font-family: var(--font-body);
    font-size: 0.8rem;
    min-width: 180px;
}
.profile-map-legend-inner {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.profile-map-legend-title {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sky-500);
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.legend-swatch {
    width: 16px; height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
}
.legend-swatch.swatch-chha {
    background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(239, 68, 68, 0.5) 2px, rgba(239, 68, 68, 0.5) 4px);
    border-color: #ef4444;
}

.profile-side-panel {
    position: absolute;
    top: 73px;
    right: 0;
    bottom: 0;
    width: 420px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-left: 1px solid rgba(24, 74, 115, 0.10);
    box-shadow: 0 30px 80px -50px rgba(15, 23, 42, 0.35);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
.profile-side-panel[aria-hidden="false"] {
    transform: translateX(0);
}

.profile-panel-drag-handle {
    display: none;
}

.profile-panel-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: var(--ink-800);
    cursor: pointer;
    line-height: 1;
    z-index: 2;
}

.profile-panel-content {
    padding: 2.5rem 2rem;
    overflow-y: auto;
    flex: 1;
}

.profile-card-title--map {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

/* Side-panel context: override the dossier card's 2-col grid so bands stack
   in the narrow 420px panel (otherwise rows wrap character-by-character). */
.profile-side-panel .profile-card-body,
.profile-card-body--map {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 0;
    margin-top: 1.25rem;
}

@keyframes parcelPulse {
    0% { stroke-opacity: 0.8; stroke-width: 2; }
    50% { stroke-opacity: 0.4; stroke-width: 3; }
    100% { stroke-opacity: 0.8; stroke-width: 2; }
}
.parcel-highlight {
    animation: parcelPulse 3s infinite ease-in-out;
}

.profile-map-spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(93, 167, 217, 0.2);
    border-top-color: var(--sky-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    align-self: center;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .profile-side-panel {
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; height: 60%;
        border-left: none;
        border-top: 1px solid rgba(24, 74, 115, 0.10);
        transform: translateY(100%);
    }
    .profile-side-panel[aria-hidden="false"] {
        transform: translateY(0);
    }
    .profile-panel-drag-handle {
        display: block;
        width: 40px; height: 4px;
        background: rgba(24, 74, 115, 0.2);
        border-radius: 2px;
        margin: 0.75rem auto 0;
    }
    .profile-map-cta {
        width: 90%;
        text-align: center;
        font-size: 1.1rem;
    }
}

/* ===== Lux Block container - wraps multi-card sections in a single structured frame ===== */
.lux-block {
    max-width: 1180px;
    margin: 2.25rem auto 0;
    padding: 2.25rem 2rem 2.5rem;
    background: linear-gradient(180deg, var(--cream-100, #f0f4f8) 0%, var(--foam-100, #f0f4f8) 100%);
    border: 1px solid rgba(24, 74, 115, 0.10);
    border-radius: 22px;
    box-shadow: 0 4px 24px rgba(9, 94, 147, 0.06);
}
.lux-block--ink {
    background: linear-gradient(180deg, var(--ink-900, #1b2d4f) 0%, var(--ink-800, #1e2e47) 100%);
    border-color: rgba(255,255,255,0.08);
    color: #f7f9fc;
}
.lux-block--ink h3, .lux-block--ink h4 { color: #fff; }
.lux-block--ink p { color: rgba(247, 249, 252, 0.85); }
.lux-block__cta-row {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .lux-block {
        padding: 1.5rem 1.25rem 1.75rem;
        border-radius: 16px;
        margin-top: 1.5rem;
    }
}

/* Inside .lux-block, soften card edges so the section reads as one frame, not loose tiles */
.lux-block .reality-grid,
.lux-block .service-band-grid,
.lux-block .value-pillars-grid,
.lux-block .sell-mkt-grid,
.lux-block .market-snapshot__grid {
    margin-top: 0;
}
.lux-block .reality-card,
.lux-block .value-pillar,
.lux-block .sell-mkt-card,
.lux-block .market-stat {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(24, 74, 115, 0.08);
    box-shadow: none;
}
.lux-block .reality-card:hover,
.lux-block .value-pillar:hover,
.lux-block .sell-mkt-card:hover {
    background: #fff;
    box-shadow: 0 12px 28px rgba(9, 94, 147, 0.08);
    transform: translateY(-2px);
}

/* Contact: buyer/seller paths */
.contact-paths {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1.5rem 0 0;
}
.contact-path {
    padding: 1.25rem 1.25rem;
    background: rgba(255,255,255,0.6);
    border-left: 3px solid var(--sky-500, #4a7fa5);
    border-radius: 4px;
}
.contact-path h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-family: var(--font-serif, Georgia, serif);
    letter-spacing: 0.005em;
}
.contact-path p {
    margin: 0 0 0.75rem;
    font-size: 0.97rem;
    line-height: 1.55;
}
.contact-path .path-link {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* About: A Note From Brayden blockquote */
.about-note .about-note-quote {
    margin: 2rem auto 0;
    max-width: 820px;
    padding: 2.25rem 2.5rem;
    background: linear-gradient(180deg, var(--cream-100, #f0f4f8) 0%, var(--foam-100, #f0f4f8) 100%);
    border-left: 4px solid var(--sky-500, #4a7fa5);
    border-radius: 14px;
    font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--ink-900, #1b2d4f);
    position: relative;
    box-shadow: 0 4px 24px rgba(9, 94, 147, 0.06);
}
.about-note .about-note-quote p {
    margin: 0 0 1.1rem;
}
.about-note .about-note-quote p:last-of-type {
    margin-bottom: 1.25rem;
}
.about-note .about-note-quote cite {
    display: block;
    font-style: normal;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-700, #3d6e8f);
}
@media (max-width: 720px) {
    .about-note .about-note-quote {
        padding: 1.5rem 1.5rem;
        font-size: 1.025rem;
    }
}


/* ==========================================================================
   MOBILE BLOCKERS — 2026-06-12 — 390px viewport fixes
   ========================================================================== */

/* BLOCKER 1: Reduce heavy section padding on mobile so reveal-section
   voids and stacked whitespace don't create blank screens on /buy/ + home.
   Reveal animation already neutralized at 768px (line ~3896).            */
@media (max-width: 640px) {
  .section-lux { padding: 2.5rem 0 !important; }
  .section-lux--tight { padding: 1.75rem 0 !important; }
  .loan-compare { padding: 2.5rem 0 !important; }
}

/* BLOCKER 4: /video-hub/ — vh-hero uses var(--header-height) which falls
   back to 0 (theme uses --header-h). Override padding-top on mobile so
   H1 clears the 76px fixed header.                                        */
@media (max-width: 760px) {
  .vh-hero {
    padding-top: calc(var(--header-h, 76px) + 1.5rem) !important;
  }
}

/* MIRA City Resources visual upgrade — 2026-05-31 */
.mira-map-click-hint{margin:.35rem 0 1rem;color:#466173;font-size:clamp(.95rem,1.8vw,1.05rem);line-height:1.5}.mira-route-status{margin:14px 0 18px;padding:12px 16px;border:1px solid rgba(20,92,120,.2);border-radius:14px;background:linear-gradient(135deg,#f7fbfd,#eef7fa);color:#12384b;font-weight:700;box-shadow:0 8px 24px rgba(10,54,70,.08)}.mira-branded-pin,.civic-marker{min-width:34px!important;min-height:34px!important;border-radius:999px!important;background:linear-gradient(135deg,#0d5c75,#1aa6b7)!important;border:3px solid #fff!important;box-shadow:0 10px 24px rgba(0,56,78,.28),0 0 0 4px rgba(26,166,183,.18)!important;cursor:pointer!important;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important}.mira-branded-pin:hover,.mira-branded-pin:focus,.civic-marker:hover,.civic-marker:focus{transform:translateY(-2px) scale(1.12)!important;box-shadow:0 14px 30px rgba(0,56,78,.34),0 0 0 7px rgba(26,166,183,.22)!important;outline:none!important}.mira-pin-start{background:linear-gradient(135deg,#103f62,#2f80ed)!important}.mira-pin-end{background:linear-gradient(135deg,#16283E,#2E6FA3)!important}.mira-route-active{border-color:rgba(26,166,183,.35)!important;box-shadow:0 18px 44px rgba(13,92,117,.14)!important}.mira-route-reset{position:static!important;margin-top:12px!important;border-radius:999px!important;padding:10px 16px!important}.resource-card,.civic-card,.learn-card,.canal-card,.city-resource-card{border:1px solid rgba(13,92,117,.14)!important;border-radius:20px!important;background:#fff!important;box-shadow:0 14px 38px rgba(8,44,58,.09)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}.resource-card:hover,.civic-card:hover,.learn-card:hover,.canal-card:hover,.city-resource-card:hover{transform:translateY(-3px);border-color:rgba(26,166,183,.32)!important;box-shadow:0 20px 52px rgba(8,44,58,.14)!important}.resource-card h2,.resource-card h3,.civic-card h2,.civic-card h3,.learn-card h2,.learn-card h3,.canal-card h2,.canal-card h3,.city-resource-card h2,.city-resource-card h3{letter-spacing:-.025em;color:#0f2f3f!important}.resource-card p,.civic-card p,.learn-card p,.canal-card p,.city-resource-card p{color:#435b68;line-height:1.65}@media (max-width:768px){.civic-map,.city-resources-map,#civic-map{min-height:420px!important;border-radius:20px!important}.civic-map-grid,.city-resources-grid,.civic-layout{display:block!important}.civic-route,.civic-route-panel{margin-top:18px!important}.mira-branded-pin,.civic-marker{min-width:44px!important;min-height:44px!important}.resource-card,.civic-card,.learn-card,.canal-card,.city-resource-card{border-radius:18px!important;margin-bottom:14px!important}.mira-map-click-hint,.mira-route-status{font-size:1rem}}

/* ═══════════════════════════════════════════════════════════════════════
   WATERWAY MAP — MOBILE PACK (2026-07-02)
   Vertical-footprint compression for /waterway-map/ at <=860px ONLY.
   PACKING, not redesign: same markup, same content, desktop untouched.
   Every rule below is inside @media (max-width:860px) except the two
   structural notes flagged inline. See page-waterway-map.php.bak_mobilepack
   / style.css.bak_mobilepack for pre-change state.
   ═══════════════════════════════════════════════════════════════════════ */

/* Structural (not visual): .canal-legend-collapse (a <details>) is now the
   .canal-hud grid's row-2 child in place of .canal-legend-modern, so it needs
   the same grid-column span .canal-legend-modern used to carry. Harmless at
   ALL widths — on mobile .canal-hud already collapses to a single column
   (existing rule, line ~2278), so this never changes anything there either. */
.canal-legend-collapse { grid-column: 1 / -1; }

/* Desktop-parity gate: the <details> ships `open` in the markup (see PHP comment —
   a closed <details> reports 0 intrinsic height to CSS Grid auto-row sizing even
   when a child is force-displayed via CSS, which shrank the desktop .canal-hud
   card; this is why we no longer fight the native open/closed state with CSS).
   Desktop just needs the summary hidden; .canal-legend-modern's own unconditional
   `display:flex` (untouched, pre-existing rule) does the rest natively since the
   details stays genuinely open here — identical to the pre-mobilepack markup. */
@media (min-width: 861px) {
  .canal-legend-collapse-summary { display: none; }
}

@media (max-width: 860px) {
  /* ---- Hero: eyebrow + H1, scoped to this page's app section only.
     !important needed: beats the pre-existing global "BLOCKER 1"
     `.section-lux{padding:2.5rem 0 !important}` rule (<=640px) which would
     otherwise win the tie regardless of this selector's higher specificity. ---- */
  section[aria-label="Waterway route planner"].section-lux {
    padding: 0.85rem 0 1.4rem !important;
  }
  section[aria-label="Waterway route planner"] .service-band-head {
    margin: 0 auto 0.55rem;
    max-width: none;
  }
  section[aria-label="Waterway route planner"] .eyebrow-lux {
    font-size: 0.6rem;
    margin-bottom: 0.28rem;
    padding-left: 26px;
  }
  section[aria-label="Waterway route planner"] .eyebrow-lux::before {
    width: 18px;
  }
  section[aria-label="Waterway route planner"] .h-editorial {
    font-size: 1.4rem;
    line-height: 1.14;
  }

  /* ---- Search card: compact card, input+button tightened ---- */
  .canal-hud {
    padding: 0.65rem 0.85rem;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    border-radius: 16px;
  }
  .canal-hud-label {
    font-size: 0.62rem;
    margin-bottom: 0.25rem;
  }
  .canal-hud-search-row {
    flex-direction: column;
    gap: 0.3rem;
  }
  .canal-hud-input,
  .canal-hud-btn {
    width: 100%;
  }
  .canal-hud-input {
    padding: 0.52rem 0.7rem;
    font-size: 0.86rem;
  }
  .canal-hud-btn {
    padding: 0.52rem 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
  }

  /* ---- Vessel height on its own inline row, toggles become one row of
     compact pill-chips instead of three stacked full-width rows ---- */
  .canal-hud-controls {
    gap: 0.4rem;
  }
  .canal-hud-label--inline {
    flex: 1 1 100%;
    font-size: 0.66rem;
    gap: 0.4rem;
  }
  .canal-hud-input-small {
    width: 54px;
    padding: 0.28rem 0.35rem;
    font-size: 0.82rem;
  }
  .canal-hud-toggle {
    min-height: unset;
    padding: 0.32rem 0.6rem;
    border: 1px solid rgba(24, 74, 115, 0.16);
    border-radius: 999px;
    background: #fff;
    font-size: 0.7rem;
    gap: 0.3rem;
  }
  .canal-hud-toggle input[type="checkbox"] {
    width: 13px;
    height: 13px;
  }

  /* ---- Legend: collapsed <details>. Ships open by default in the markup;
     an inline script (see PHP) strips the `open` attribute pre-paint at
     <=860px, so mobile starts closed and native click-to-toggle takes it
     from there — the rules below just style each state.
     margin-top intentionally omitted — .canal-hud's own row gap already
     provides the spacing above this divider; adding one here would double it. */
  .canal-legend-collapse {
    padding-top: 0.4rem;
    border-top: 1px solid rgba(24, 74, 115, 0.08);
  }
  .canal-legend-collapse-summary {
    display: inline-flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sky-700);
    padding: 0.2rem 0;
  }
  .canal-legend-collapse-summary::-webkit-details-marker { display: none; }
  details.canal-legend-collapse:not([open]) > .canal-legend-modern {
    display: none;
  }
  details.canal-legend-collapse[open] > .canal-legend-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.7rem;
    padding-top: 0.55rem;
    border-top: 0;
    font-size: 0.7rem;
  }

  /* ---- Map: raise to ~65dvh so it's the main event on first screen ---- */
  .canal-workspace {
    border-radius: 16px;
  }
  .canal-map-frame {
    height: 65vh;
    height: 65dvh;
    min-height: unset;
  }
  .canal-panel {
    padding: 0.85rem 0.9rem;
  }

  /* ---- Intelligence-brief idle hint: compact to a small header; the
     lede sub-line is hidden. #canal-result / #canal-status (the actual
     route RESULT content) are untouched — result display stays as-is. ---- */
  .canal-panel-head {
    margin-bottom: 0;
  }
  .canal-panel-kicker {
    font-size: 0.6rem;
    margin-bottom: 0.15rem;
  }
  .canal-panel-title {
    font-size: 0.9rem;
    line-height: 1.3;
    margin: 0;
  }
  .canal-panel-lede {
    display: none;
  }
  .canal-panel-status {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    font-size: 0.66rem;
  }

  /* ---- Data notes footer: tighten margins, keep content/expander as-is ---- */
  .waterway-disclaimer {
    margin-top: 0.55rem;
    font-size: 0.78rem;
    line-height: 1.4;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   WATERWAY MAP — ONE SCREEN MOBILE (2026-07-03)
   Owner spec: mobile = ONE screen, map-first. "Just make a map, and a
   search bar INSIDE the map... fit as much as we can into one screen."
   Everything below is scoped to <=860px except the single unconditional
   .canal-map-mobileui{display:none} default (required so the in-map
   overlay markup, which lives inside #milner-canal-map, has zero
   footprint at >860px -- Leaflet does not clear pre-existing children of
   its target div, so that markup is always in the DOM, just hidden).
   Desktop (>860px) stays byte-for-byte the pre-existing "WATERWAY MAP —
   MOBILE PACK" state above; nothing here touches a selector outside this
   max-width:860px query. Backups: page-waterway-map.php.bak_oneScreen /
   style.css.bak_oneScreen / js/milner-canal-map.js.bak_oneScreen.
   Mines patterns (search pill, layers popover, docked result card) from
   the REJECTED full-bleed experiment (*.attempt_minimal_20260703) --
   that attempt replaced the DESKTOP shell too (own .canal-app section,
   no service-band-head/canal-hud/canal-panel at all), which is why it
   was rejected. This pass keeps desktop's original markup/CSS untouched
   and only adds mobile-scoped overlay behavior on top of it.
   ═══════════════════════════════════════════════════════════════════════ */

.canal-map-mobileui { display: none; }

@media (max-width: 860px) {
  /* ---- Reflow: promote the map to the very first thing on screen ----
     .canal-workspace becomes display:contents so its two children
     (.canal-map-frame, .canal-panel) join .container's own flex flow and
     can be ordered independently of .service-band-head / .canal-hud / the
     disclaimer / data-notes. No DOM nodes move — pure CSS reflow, so it
     degrades safely if JS fails to load. */
  section[aria-label="Waterway route planner"] .container {
    display: flex;
    flex-direction: column;
  }
  .canal-workspace { display: contents; }
  .canal-map-frame { order: -10; }
  section[aria-label="Waterway route planner"] .service-band-head { order: -5; margin-top: 0.85rem; }
  .canal-hud { order: -4; }
  .canal-panel { order: -3; }
  /* .waterway-disclaimer and #waterway-data-notes keep their default order (0) — they're
     already last among this section's .container children in DOM, so they naturally
     render after everything above without needing an explicit order value. */

  /* ---- Section shell: map sits flush under the fixed site header, no gap ---- */
  section[aria-label="Waterway route planner"].section-lux {
    padding: var(--header-h, 88px) 0 1.4rem !important;
  }

  /* ---- The map: fills the rest of the first viewport (100dvh minus header) ---- */
  #milner-canal-map { position: relative; }
  .canal-map-frame {
    height: calc(100vh - var(--header-h, 88px));
    height: calc(100dvh - var(--header-h, 88px));
    min-height: unset;
    border-radius: 16px;
  }
  #milner-canal-map .leaflet-control-zoom,
  #milner-canal-map .leaflet-control-attribution {
    display: none;
  }

  /* ---- Intelligence panel: was a grid-mate of the map inside .canal-workspace's
     shared bordered card; now stands alone below the fold, so it needs its own card
     chrome (the border/shadow it used to inherit from .canal-workspace). ---- */
  .canal-panel {
    margin-top: 0.6rem;
    border: 1px solid rgba(24, 74, 115, 0.12);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
    max-height: none;
  }

  /* ═══ Floating in-map UI: search pill + typeahead, Layers popover, docked result ═══ */
  .canal-map-mobileui { display: block; }

  .canal-map-topline {
    position: absolute;
    z-index: 1200;
    top: calc(0.65rem + env(safe-area-inset-top, 0px));
    left: calc(0.6rem + env(safe-area-inset-left, 0px));
    right: calc(0.6rem + env(safe-area-inset-right, 0px));
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .canal-map-pill {
    position: relative;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
    background: #fff;
    border: 1px solid rgba(24, 74, 115, 0.14);
    border-radius: 999px;
    padding: 0.3rem 0.3rem 0.3rem 0.85rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
  }
  .canal-map-pill-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-soft); }
  .canal-map-pill-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: var(--text);
    padding: 0.4rem 0;
  }
  .canal-map-pill-input::placeholder { color: var(--text-soft); opacity: 0.85; }
  .canal-map-pill-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--ink-900);
    color: #fff;
    cursor: pointer;
  }
  .canal-map-pill-btn svg { width: 15px; height: 15px; }
  .canal-map-pill-btn:active { transform: scale(0.94); }

  .canal-map-suggestions {
    position: absolute;
    z-index: 1210;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    margin-top: 0;
    max-height: 220px;
  }

  /* Single "Bridges" toggle chip -- replaces the old Layers popover. margin-left:auto
     pushes it to the right end of its (already-wrapped, see .canal-map-pill flex:1 1 100%
     above) row, so it sits top-right, visually stacked above the mini result card below. */
  .canal-map-chip-group { position: relative; flex: 0 0 auto; margin-left: auto; }
  .canal-map-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 34px;
    padding: 0 0.75rem;
    border: 1px solid rgba(24, 74, 115, 0.14);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
    color: var(--ink-800);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
  }
  .canal-map-chip svg { width: 14px; height: 14px; }
  /* aria-pressed="true" = bridges layer ON (the default). A toggle chip, not a disclosure --
     no popover to manage, no outside-click/Escape handling needed. */
  .canal-map-chip[aria-pressed="true"] {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: #fff;
  }

  /* ---- Mini result card: top-right, anchored under the topline (search pill + Bridges
     chip), never bottom-docked -- the owner's core ask was "you can't have the card BLOCK
     the route." max-width caps it well short of the map's full width so the route stays
     visible to its left (the fitBounds override above pads the route away from this exact
     footprint); max-height 55% of the map so it can never eat the whole first screen,
     with internal scroll (.canal-map-result-scroll) only kicking in past that. ---- */
  .canal-map-result {
    position: absolute;
    z-index: 1230;
    top: calc(6.4rem + env(safe-area-inset-top, 0px));
    right: calc(0.6rem + env(safe-area-inset-right, 0px));
    left: auto;
    bottom: auto;
    width: min(240px, calc(100vw - 2.2rem));
    max-height: 55%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    border: 1px solid rgba(24, 74, 115, 0.14);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
    overflow: hidden;
  }
  .canal-map-result[hidden] { display: none; }
  .canal-map-result-close {
    position: absolute;
    z-index: 1;
    top: 0.4rem;
    right: 0.4rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-soft);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
    cursor: pointer;
  }
  .canal-map-result-close svg { width: 10px; height: 10px; }
  .canal-map-result-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.55rem 1.55rem 0.5rem 0.6rem;
  }

  /* ---- Mini card content (built by buildMiniCardBody() in page-waterway-map.php --
     restructures the mirrored #canal-result content rather than raw-copying it).
     These legacy classes stay EXACTLY as before -- they're still used as-is by
     buildDetailMiniCard() (the tap-a-canal/bridge/weir/marker card), which this pass
     does not touch. The route-card redesign below (cardPolish pass) uses its own new
     classes so the detail card can't regress. ---- */
  .canal-mini-badge-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
  }
  .canal-mini-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1e6fb8;
  }
  .canal-mini-dot--salt { background: #1e6fb8; }
  .canal-mini-dot--bridge { background: #53677A; }
  .canal-mini-dot--fresh { background: #64748b; }
  .canal-mini-dot--weir { background: #991b1b; }
  .canal-mini-dot--exit { background: #16283E; }
  .canal-mini-badge-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--ink-800);
    line-height: 1.2;
  }
  .canal-mini-addr {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    line-height: 1.32;
    color: var(--ink-900);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .canal-mini-stats {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    margin-bottom: 0.35rem;
  }
  .canal-mini-stat-line {
    font-size: 0.74rem;
    line-height: 1.3;
    color: var(--ink-700);
    font-weight: 600;
  }
  .canal-mini-stat-line--danger { color: #b91c1c; }
  .canal-mini-disclaimer {
    margin: 0.3rem 0 0;
    font-size: 0.62rem;
    line-height: 1.25;
    color: var(--text-soft);
    font-style: italic;
  }
  .canal-mini-error {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.35;
    color: #7f1d1d;
  }

  /* ---- Route card redesign (cardPolish pass, buildRouteMiniCard() only). Owner:
     "the thirty minutes should be the BIGGEST thing" + "too big, make it smaller" --
     TIME IS THE HERO, everything else recedes. Order: tiny meta line (dot + access
     label + ellipsis address, both de-emphasized) -> HERO time -> compact "mi ·
     lowest bridge" line -> exit line -> warn line(s), only when actually relevant ->
     one always-collapsed expander holding bridges + the tide disclaimer + any
     secondary notes, so none of that eats card height by default. Collapsed target
     ~150-180px (was ~225px). ---- */
  .canal-mini-meta {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    min-width: 0;
    margin-bottom: 0.3rem;
  }
  .canal-mini-meta-label {
    flex: 0 0 auto;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--ink-700);
    white-space: nowrap;
  }
  .canal-mini-meta-sep {
    flex: 0 0 auto;
    color: var(--text-soft);
    opacity: 0.6;
    font-size: 0.62rem;
  }
  .canal-mini-meta-addr {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .canal-mini-hero {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin: 0.1rem 0 0.4rem;
  }
  .canal-mini-hero-num {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink-900);
  }
  .canal-mini-hero-unit {
    margin-left: 0.22rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-800);
  }
  .canal-mini-hero-label {
    margin-left: 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-soft);
  }
  .canal-mini-sub {
    margin: 0 0 0.28rem;
    font-size: 0.72rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ink-700);
  }
  .canal-mini-sub-danger { color: #b91c1c; }
  p.canal-mini-exit {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    line-height: 1.3;
    color: #92400e;
    font-weight: 700;
  }
  .canal-mini-warnline {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0 0 0.3rem;
    font-size: 0.66rem;
    line-height: 1.3;
    font-weight: 700;
    color: #b91c1c;
  }
  .canal-mini-bridges-foot {
    margin: 0.3rem 0 0;
    font-size: 0.66rem;
    line-height: 1.28;
    color: var(--text-soft);
  }

  /* "N bridges ▸" / "Route notes ▸" expander -- a cloned REAL .canal-result-bridges
     <details> when the route has bridges (keeps the base is-warn/is-low/is-blocked/
     is-unknown per-bridge list styling; this just shrinks it to card scale), OR a
     synthetic fallback <details> when it doesn't -- either way this is the ONLY home
     for the tide disclaimer + secondary notes (.canal-mini-bridges-foot /
     .canal-mini-disclaimer appended inside), so they never show by default. Its own
     background/radius (not inherited from .canal-result-bridges) so the synthetic
     fallback looks identical to the cloned-real case. Expands DOWNWARD in normal flow
     -- .canal-map-result-scroll is the only scroll container, so it only starts
     scrolling once opened content pushes the card past its 55%-of-map-height cap,
     never before. */
  .canal-mini-bridges {
    margin: 0.15rem 0 0;
    padding: 0.35rem 0.5rem;
    background: #f7fafc;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
  }
  .canal-mini-bridges summary {
    font-size: 0.7rem;
    font-weight: 700;
    list-style: none; /* the base .canal-result-bridges summary never hid the native
       disclosure marker (desktop shows it); the mini card supplies its own text arrow
       (" ▸" / " ▾", flipped by the `toggle` listener above) so the native one is
       suppressed here to avoid a double-marker. */
  }
  .canal-mini-bridges summary::-webkit-details-marker { display: none; }
  .canal-mini-bridges ul { font-size: 0.7rem; }
}


/* ==========================================================================
   CENTERED-HERO LEDE FIX (site-wide) — lede blocks must center like their H1s
   ========================================================================== */
.hero-ed-copy--centered .hero-ed-lede { margin-inline: auto; }
.service-band-head .section-intro { margin-inline: auto; }

/* ==========================================================================
   RESOURCES SPLIT-RAIL — desktop editorial layout (owner 07-05):
   sticky thesis rail left, content right; mobile keeps the centered stack
   ========================================================================== */
@media (min-width: 1024px) {
  .resources-split .container {
    display: grid;
    grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
  .resources-split .service-band-head {
    grid-column: 1;
    position: sticky;
    top: 110px;
    text-align: left;
    max-width: none;
    margin: 0;
  }
  .resources-split .service-band-head .h-editorial {
    font-size: clamp(2.6rem, 3.4vw, 3.9rem);
    line-height: 1.04;
    margin-top: 1.4rem;
  }
  .resources-split .service-band-head .eyebrow-lux {
    font-size: 0.95rem;
    letter-spacing: 0.22em;
  }
  .resources-split .service-band-head .section-intro {
    margin-inline: 0;
    max-width: 34ch;
    font-size: clamp(1.1rem, 1.3vw, 1.3rem);
    line-height: 1.75;
    margin-top: 1.5rem;
  }
  .resources-split .container > *:not(.service-band-head) { grid-column: 2; }
  .resources-split .resources-video-grid,
  .resources-split .resources-insights-grid,
  .resources-split .service-band-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .resources-split .resources-cta-row {
    justify-content: flex-start;
    margin-top: 2rem;
  }
}

/* ==========================================================================
   RESOURCES INDEX + BAND — full-width treatments for sections whose content
   is 3+ rows tall (rail-void fix, owner 07-05). Guides & Tools becomes a
   flat hairline-ruled index list; Recent Writing / Communities keep their
   default 3-up grids under the same full-width header-band treatment.
   ========================================================================== */
.resources-index .service-band-head,
.resources-band .service-band-head {
  text-align: left;
  max-width: none;
  margin: 0 0 2.5rem;
  display: grid;
  grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  column-gap: 4rem;
  align-items: end;
}
.resources-index .service-band-head .h-editorial,
.resources-band .service-band-head .h-editorial {
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  line-height: 1.05;
  margin: 0.9rem 0 0;
}
.resources-index .service-band-head .section-intro,
.resources-band .service-band-head .section-intro {
  margin: 0 0 0.4rem;
  max-width: 38ch;
}
.resources-index .service-band-grid { display: block; }
.resources-index .service-band-grid > * {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) auto;
  align-items: center;
  column-gap: 2.5rem;
  padding: 1.7rem 0.25rem;
  border-top: 1px solid rgba(24,74,115,0.14);
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.resources-index .service-band-grid > *:last-child { border-bottom: 1px solid rgba(24,74,115,0.14); }

/* Inner-element placement for the index row: card markup is
   .service-band-card > .service-band-kicker + .service-band-title +
   .service-band-lead + .service-band-link (confirmed from page-resources.php).
   Row reads: category-eyebrow | title+desc stacked | CTA-arrow. */
.resources-index .service-band-card {
  min-height: 0;
  transition: none;
}
.resources-index .service-band-card:hover { transform: none; }
.resources-index .service-band-card::after { display: none; }
.resources-index .service-band-kicker {
  grid-column: 1;
  grid-row: 1 / 3;
  margin-bottom: 0;
}
.resources-index .service-band-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.35rem;
  margin-bottom: 0.3rem;
}
.resources-index .service-band-lead {
  grid-column: 2;
  grid-row: 2;
  margin-bottom: 0;
  flex-grow: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resources-index .service-band-link {
  grid-column: 3;
  grid-row: 1 / 3;
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .resources-index .service-band-head,
  .resources-band .service-band-head { grid-template-columns: 1fr; }
  .resources-index .service-band-grid > * {
    grid-template-columns: 1fr;
    row-gap: 0.8rem;
    padding: 1.5rem 0;
  }
  .resources-index .service-band-kicker,
  .resources-index .service-band-title,
  .resources-index .service-band-lead,
  .resources-index .service-band-link {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* Text-first insight cards (Recent Writing) when a post has no featured
   image — skip the empty media block entirely (see page-resources.php)
   and give the body a small accent bar instead of a blank diamond glyph. */
.resources-insight-card--textonly .resources-insight-card__body {
  padding-top: 2.25rem;
}
.resources-insight-card--textonly .resources-insight-card__body::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--sky-700), var(--sky-500));
  margin-bottom: 0.5rem;
}


/* ==========================================================================
   VALUE-CHIP AFFORDANCE FIX (owner 07-05): .metrics claims must NOT wear
   button chrome. Flat editorial stat — value + quiet label, left-rule accent.
   (Site-wide .stat-pill/.hero-points retirement queued in the master pass.)
   ========================================================================== */
.metrics .metric {
  background: none;
  border: 0;
  border-radius: 0;
  border-left: 2px solid rgba(24, 74, 115, 0.30);
  padding: 0.15rem 0 0.15rem 0.95rem;
}
.metrics .metric strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--ink-800);
}
.metrics .metric span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 0.25rem;
}

/* ==========================================================================
   FAMILY CARD IDENTITY TAGS (owner 07-05): home "Have Our Family in Your
   Corner" beach photo needs a caption row so Susan reads as Mom/Broker,
   not sister/wife. Photo moves into its own frame so the tag row sits
   below it in normal flow (not an overlay on the photo).
   ========================================================================== */
.team-featured-image {
  display: flex;
  flex-direction: column;
}
.team-featured-image-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.team-featured-image img,
.team-featured-image-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.family-card-tags {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.25rem 1rem;
  margin-top: 0.6rem;
}
.family-card-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}


/* ==========================================================================
   MAP STACKING FIX (owner 07-05): Leaflet panes/controls (z 400-1000) were
   escaping OVER the fixed site-header (z 50). isolation creates a stacking
   context so the map's internal z-indexes cannot leak past its container.
   ========================================================================== */
#milner-canal-map,
.canal-map-frame {
  isolation: isolate;
}

/* ==========================================================================
   MEET-THE-TEAM ROSTER — left-to-right rows (owner 07-05, agent-pages
   wire-up wave). Replaces the flex-column zig-zag banner stack with a
   hairline-ruled horizontal row per agent: headshot | name/title/2-line bio
   | View Full Profile CTA. Reuses the .resources-index row pattern shipped
   the same night (tokens/eyebrow styles consistent). Base .team-roster-grid
   / .team-member-card rules stay in place above for any other consumer;
   these overrides win via source order + the added .team-roster-grid scope.
   ========================================================================== */
.team-roster-grid {
  display: block;
}

.team-roster-grid .team-member-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 2rem;
  padding: 1.5rem 0.25rem;
  border-top: 1px solid rgba(24, 74, 115, 0.14);
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.team-roster-grid .team-member-card:last-child {
  border-bottom: 1px solid rgba(24, 74, 115, 0.14);
}
.team-roster-grid .team-member-card:hover {
  transform: none;
  box-shadow: none;
  background: rgba(24, 74, 115, 0.035);
}

.team-roster-grid .team-member-photo,
.team-roster-grid .team-member-photo-placeholder {
  width: 88px;
  min-width: 88px;
  height: 88px;
  min-height: 88px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 1.5rem;
}

.team-roster-grid .team-member-info {
  padding: 0;
  display: block;
  min-width: 0;
}
.team-roster-grid .team-member-info h3 {
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}
.team-roster-grid .team-member-info .member-role {
  display: block;
  margin-bottom: 0.4rem;
}
.team-roster-grid .team-member-info p {
  margin: 0;
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-roster-grid .team-member-cta {
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .team-roster-grid .team-member-card {
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
    padding: 1.5rem 0;
  }
  .team-roster-grid .team-member-photo,
  .team-roster-grid .team-member-photo-placeholder {
    width: 72px;
    min-width: 72px;
    height: 72px;
    min-height: 72px;
  }
  .team-roster-grid .team-member-cta {
    justify-self: start;
  }
}

/* ============================================================
   Area-page listings strip (2026-07-05, area-embed build)
   Server-rendered "homes for sale right now" grid — see
   milner_render_listings_strip() in functions.php.
   ============================================================ */
/*    2026-08-23 de-gold: scoped block used to re-pin champagne-gold and undo
   :root. It now re-pins the same steel values so a future gold leak in this
   block cannot revive champagne on listings or the service band. */
.listings-strip,
.service-band {
  --msx-gold: #2b80bb;
  --msx-gold-line: rgba(43, 128, 187, 0.55);
  --msx-gold-metal: linear-gradient(140deg, #dce8f5 0%, #7ba3c9 30%, #2b80bb 55%, #095e93 100%);
  --msx-elev-1: 0 1px 2px rgba(8, 17, 31, 0.06), 0 2px 8px rgba(8, 17, 31, 0.06);
  --msx-elev-2: 0 2px 4px rgba(8, 17, 31, 0.07), 0 10px 26px rgba(8, 17, 31, 0.10);
  --msx-radius-card: 10px;
}
.listings-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}
@media (max-width: 1100px) {
  .listings-strip__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .listings-strip__grid { grid-template-columns: 1fr; }
}
.listings-strip__card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* P2 2026-07-05: grid items default to min-width:auto, so the MLS photo's
     intrinsic size was forcing each card past its 1/3 track (rendered as a
     giant full-width stacked column at 1440 on cape-coral/fort-myers).
     min-width: 0 lets the grid track win. Minimal, additive-only change. */
  min-width: 0;
  background: var(--cream-100);
  border-radius: var(--msx-radius-card);
  border: 1px solid transparent;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--msx-elev-1);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.listings-strip__card:hover,
.listings-strip__card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--msx-elev-2);
  border-color: var(--msx-gold-line);
}
.listings-strip__media {
  position: relative;
  /* IDX ListingCard anatomy (doc-28): 16:10 photo, was 4:3. */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--slate-100);
}
.listings-strip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.listings-strip__card:hover .listings-strip__media img { transform: scale(1.05); }
.listings-strip__media--placeholder {
  background: linear-gradient(135deg, var(--slate-100), var(--sand-200));
}
/* Water-tier ribbon (2026-07-05, builder shipped granular water_subtype/
   gulf_verdict — see milner_listings_strip_ribbon() in functions.php).
   Top-left pill over the photo; omitted entirely server-side for
   interior/no-water listings, never faked. Cyan = gulf-access family,
   green = freshwater, lakefront gets its own lighter/teal tone (distinct
   from gulf cyan per the coordinator's granular-subtype fix), navy-glass
   default for anything else. */
.listings-strip__ribbon {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  font-family: var(--font-eyebrow, var(--font-body));
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  line-height: 1.2;
  background: rgba(10, 20, 40, 0.62);
  backdrop-filter: blur(6px);
}
.listings-strip__ribbon--gulf { background: rgba(56, 189, 248, 0.92); color: #08111f; }
.listings-strip__ribbon--freshwater { background: rgba(52, 211, 153, 0.92); color: #08111f; }
.listings-strip__ribbon--lakefront { background: rgba(96, 195, 239, 0.92); color: #08111f; }
.listings-strip__ribbon--pond { background: rgba(163, 217, 165, 0.92); color: #08111f; }
.listings-strip__price {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.85rem 1rem 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(to top, rgba(8, 17, 31, 0.72) 0%, rgba(8, 17, 31, 0.32) 55%, rgba(8, 17, 31, 0) 100%);
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.listings-strip__body {
  padding: 1.15rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.listings-strip__meta {
  font-family: var(--font-eyebrow);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-700);
}
.listings-strip__address {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.4;
}
.listings-strip__courtesy {
  font-size: 0.76rem;
  color: var(--text-soft);
  font-style: italic;
}
.listings-strip__cta {
  margin-top: 2rem;
  text-align: center;
}

/* W1 first-screen 2026-08-22: homepage 6-section IA */
.home-place-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}
.home-place-card {
  display: block;
  background: #fff;
  border: 1px solid rgba(9, 94, 147, 0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-soft);
  min-height: 0;
}
.home-place-card:hover .home-place-card__img {
  transform: scale(1.03);
}
.home-place-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--foam-100);
}
.home-place-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.home-place-card__body {
  padding: 0.95rem 1.05rem 1.15rem;
}
.home-place-card__kicker {
  display: block;
  font-family: var(--font-eyebrow);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-500);
  margin-bottom: 0.35rem;
}
.home-place-card__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.15;
  margin: 0 0 0.35rem;
}
.home-place-card__lead {
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.45;
  margin: 0;
}
.home-yt-band__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}
.home-yt-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.home-yt-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-900);
}
.home-yt-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-yt-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 94, 147, 0.18);
}
.home-yt-card__play svg { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
.home-yt-card__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  margin: 0.85rem 0 0.25rem;
  color: var(--ink-900);
}
.home-yt-card__meta {
  font-size: 0.88rem;
  color: var(--text-soft);
  margin: 0;
}
.home-proof-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(9, 94, 147, 0.14);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-800);
  background: #fff;
}
.home-close-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-top: 1.5rem;
}
.home-close-secondary {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sky-500);
  text-decoration: none;
}
.home-close-secondary:hover { color: var(--ink-900); }
.home-reviews { margin-top: 3rem; }
.canal-class-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 1.6rem;
}
.canal-class-card {
  background: #fff;
  border: 1px solid rgba(9, 94, 147, 0.1);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.15rem 1.2rem;
}
.canal-class-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin: 0 0 0.4rem;
}
.canal-class-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.5;
}
@media (max-width: 1100px) {
  .home-place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canal-class-row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .home-place-grid,
  .home-yt-band__grid { grid-template-columns: 1fr; }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-offset, 24px));
  transition: opacity var(--dur-med, 500ms) var(--ease-lux, cubic-bezier(0.22, 1, 0.36, 1)),
              transform var(--dur-med, 500ms) var(--ease-lux, cubic-bezier(0.22, 1, 0.36, 1));
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.footer-mira-story { padding: 1.1rem 0; }
.footer-mira-copy {
  margin: 0;
  font-size: 0.82rem;
  color: var(--sand-300, #b8cadb);
  text-align: center;
}
a.footer-pill {
  display: inline-block;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────
   HOW WE WORK ledger (2026-09-05). Replaces the "Us vs Average"
   comparison table on front-page.php: canon bans us-vs tables and
   card grids, and asks for a ledger instead. Two-column ruled rows,
   canon palette only, no card, no shadow, no competitor column.
   ───────────────────────────────────────────────────────────────── */
.hw-ledger{
  max-width:920px;
  margin:clamp(1.75rem,4vw,2.75rem) auto 0;
  border-top:1px solid rgba(22,40,62,.12);
}
.hw-row{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:.5rem 2rem;
  padding:1.05rem .25rem;
  border-bottom:1px solid rgba(22,40,62,.12);
  text-align:left;
}
@media (max-width:640px){
  .hw-row{grid-template-columns:1fr;gap:.3rem;padding:.9rem .25rem}
}
.hw-row__k{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#53677A;
  align-self:start;
  padding-top:.15rem;
}
.hw-row__v{
  font-size:1rem;
  line-height:1.6;
  color:#16283E;
}

/* ==========================================================================
   B01 / D2-A (2026-09-20) — contact form discoverability
   Audit measured the first form at y~1,589 (1440x900) and y~2,589 (390x844),
   i.e. 1.77 and 3.07 viewport heights down, behind the buyer/seller copy.
   On narrow viewports the form column is promoted ABOVE that copy so the
   message path is reachable with one deliberate scroll or the hero anchor.
   Desktop keeps the existing two-column composition unchanged.
   ========================================================================== */
@media (max-width: 900px) {
  .page-template-page-contact .sell-val-grid { display: flex; flex-direction: column; }
  .page-template-page-contact .sell-val-grid > .sell-val-form { order: 1; }
  .page-template-page-contact .sell-val-grid > .sell-val-copy { order: 2; }
}

/* Anchor targets must not sit under the sticky header when jumped to. */
.page-template-page-contact #contact-form { scroll-margin-top: 96px; }
.page-template-page-contact #contact-form:focus { outline: none; }
.page-template-page-contact #contact-form:focus-visible {
  outline: 3px solid var(--gold-500, #B9975B);
  outline-offset: 6px;
}

/* B03 — step-two heading is a real focus target, visually quiet but announced. */
.form-step-heading {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-600, #4A5A6E);
  margin: 0 0 1rem;
}
.form-step-heading:focus { outline: none; }
.form-step-heading:focus-visible {
  outline: 2px solid var(--gold-500, #B9975B);
  outline-offset: 3px;
}

/* B01/D2-A — compact the contact hero.
   MEASURED: the contact hero occupied 991px at 390x844 and 829px at 1440x900,
   pushing the message form past one viewport on its own. The contact page's job
   is to start a conversation, so its hero is tightened (the editorial hero
   elsewhere is unchanged). Call/Email/Send-a-Message stay in the first viewport. */
.page-template-page-contact .hero-editorial {
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.75rem);
}
.page-template-page-contact .hero-ed-lede {
  max-width: 54ch;
}
@media (max-width: 900px) {
  /* The hero portrait is atmosphere; on mobile the actions matter more. */
  .page-template-page-contact .hero-ed-visual { margin-top: 1rem; }
  .page-template-page-contact .hero-ed-proof { gap: 0.75rem; }
}

/* B01 — contact hero actions: keep the three entry points on one compact row at
   mobile so adding "Send a Message" does not push the form further down. */
@media (max-width: 700px) {
  .page-template-page-contact .hero-ed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .page-template-page-contact .hero-ed-actions .btn-lux {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    white-space: nowrap;
  }
  /* Trim the lede on mobile; the hero's job here is routing, not prose. */
  .page-template-page-contact .hero-ed-lede {
    font-size: 0.975rem;
    line-height: 1.5;
  }
}

/* ==========================================================================
   AGENT PROFILE POLISH — 2026-09-22 (final, deliberately minimal)
   The base hero-ed-* rules already handle this template well. Earlier attempts
   to "improve" the proof grid and portrait ratio REGRESSED it:
     - overriding grid-template-columns with auto-fit collapsed 3 cols -> 2;
     - forcing aspect-ratio 4/5 enlarged the portrait so it covered the
       "Back to roster" badge (which IS the badge element, not a separate link).
   So this block changes only two safe things, and redefines no layout the base
   stylesheet already owns.
   Requires body class `page-agent-profile` (functions.php body_class filter).
   ========================================================================== */

/* Readable bio measure. */
.page-agent-profile .agent-bio-copy,
.page-agent-profile .agent-profile-lede {
  max-width: 62ch;
  line-height: 1.65;
}

/* Owner design target: 48px minimum touch height on the profile actions. */
.page-agent-profile .hero-ed-actions .btn-lux {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Agent portrait: stop the marketing-hero frame from stretching a headshot.
   MEASURED 2026-09-22 at 1440: .hero-ed-visual-frame is position:absolute;
   inset:0 (correct for a full-bleed marketing hero), which forced Brayden's
   480x480 source image to render 535x669 — distorting the portrait AND
   covering the "Back to roster" badge that sits below it in the same
   .hero-ed-visual container (measured overlap: img 224-893px, badge 230-275px).
   On agent pages the portrait should size to its own ratio and sit in flow. */
.page-agent-profile .hero-ed-visual-frame {
  position: relative;
  inset: auto;
  border-radius: 12px;
  background: none;
  aspect-ratio: auto;
}
.page-agent-profile .hero-ed-visual-frame img {
  width: 100%;
  height: auto;
  /* Square studio headshots stay square; taller sources are respected. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 22%;
  animation: none;   /* cinema zoom belongs on scenery, not a portrait */
  transform: none;
}

/* Agent proof row: keep values on tight lines (2026-09-22).
   MEASURED: "Florida Future Realty" and "Cape Coral, FL" broke to 3 and 2
   ragged lines at 1440 because the display face is large and the tracks are
   ~165px. These are labels, not hero stats — size them accordingly and let
   them balance. Base .hero-ed-proof grid geometry is untouched. */
.page-agent-profile .hero-ed-proof-item .num{
  font-size:clamp(0.95rem,1.05vw,1.15rem);
  line-height:1.25;
  text-wrap:balance;
  hyphens:none;
}
.page-agent-profile .hero-ed-proof-item .lbl{margin-top:0.4rem}
/* 2026-09-25 review source lines */
.service-band-source { margin: 0.9rem 0 0; font-size: 0.85rem; }
.service-band-source a { color: inherit; text-underline-offset: 4px; display: inline-block; padding: 0.6rem 0; }
.proof-source { display: block; font-size: 0.8rem; font-weight: 400; opacity: 0.75; margin-top: 0.2rem; }