/* ARRE — Agustin Richardson · Prestige-inspired layout + Barlow */
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* Prestige-aligned palette (SoCal contractor / Agustin brand) */
  --navy: #1a2942;
  --navy-deep: #121d30;
  --navy-mid: #243a5c;
  --gold: #d4af37;
  --gold-soft: #e4c65a;
  --gold-dark: #b8942e;
  --yellow: #facc15;
  --blue-sky: #d4eaf7;
  --carolina: #4b9cd3;
  --carolina-light: #7eb6e0;
  --carolina-pale: #c5e3f6;
  --sky-header: #4a7caf;
  --sky-deep: #3d6a94;
  --sky-hero: #5a9fd4;
  --sky-hero-deep: #3a7eb5;
  --white: #ffffff;
  --black: #0f172a;
  --muted: #5c6b7a;
  --mist: #f4f6f9;
  --line: #dde4ec;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 12px 40px rgba(26, 41, 66, 0.1);
  --shadow-card: 0 8px 28px rgba(26, 41, 66, 0.08);
  --max: 1140px;
  --font-heading: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Belt-and-suspenders: stop horizontal scroll if any descendant
     misbehaves on narrow viewports. `clip` (not `hidden`) does NOT
     create a scroll context — so `position: sticky` on .site-header
     keeps working. */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  line-height: 1.6;
  padding-bottom: 72px;
}

body.has-sticky {
  /* Match the sticky bar's actual rendered height (1px border + 10px top pad
     + 48px button min-height + 10px bottom pad + iOS safe-area inset) so the
     footer sits flush against the top of the bar with no white gap. */
  padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px));
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.page-hero h1,
.hero h1,
.card h3,
.site-footer h4,
.btn,
.nav-desktop a,
.nav-mobile a,
.eyebrow,
.kicker,
.trust-stat strong,
.step-num {
  font-family: var(--font-heading);
  font-weight: 500;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  /* Sharper downscaling for PNG logos / WebP photos on retina + non-retina. */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* —— Keyboard accessibility: focus-visible ring on all interactive elements.
   The :focus-visible pseudo-class only applies when the focus came from a
   keyboard (Tab/Shift+Tab/Enter), not a mouse click — so mouse users keep
   their existing clean state. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(196, 162, 79, 0.18);
}

/* —— Reduced-motion: honor the user's OS preference. Skips animations,
   transitions, parallax, and ken-burns for users who get vestibular symptoms
   from motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .parallax-section { background-attachment: scroll !important; }
  .hero-bg-slide { animation: none !important; }
}

/* Screen-reader-only utility (announces text to assistive tech but hides
   visually) — useful for icon-only links/buttons that need a label. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Keep background-image rendering crisp too (covers parallax sections,
   listing thumbs, hero bands). */
[style*="background-image"],
.areas-listing-thumb,
.parallax-section {
  image-rendering: -webkit-optimize-contrast;
}

a {
  color: var(--navy);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 10px 14px;
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid var(--gold);
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

.container {
  width: min(var(--max), 100% - 32px);
  margin-inline: auto;
}

/* Mobile/tablet — tighter side gutters site-wide (wider content) */
@media (max-width: 899px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }
}

/* —— Header (Prestige formula · navy/gold on white) —— */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(26, 41, 66, 0.06);
  overflow: visible;
  transition: background-color 220ms ease, backdrop-filter 220ms ease, -webkit-backdrop-filter 220ms ease;
}

/* Scrolled state — frosted white. Sky variant keeps its gradient. */
.site-header.is-scrolled:not(.site-header--sky) {
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}

.site-header--sky .lang-widget .lang-toggle {
  border-color: rgba(255, 255, 255, 0.35);
}

.site-header--sky {
  background: linear-gradient(180deg, var(--sky-header) 0%, var(--sky-deep) 100%);
  border-bottom: none;
  box-shadow: 0 4px 24px rgba(58, 126, 181, 0.35);
}

.site-header--sky .nav-desktop a,
.site-header--sky .nav-dropdown-trigger {
  color: rgba(255, 255, 255, 0.95);
}

.site-header--sky .nav-desktop a:hover,
.site-header--sky .nav-desktop a.active,
.site-header--sky .nav-dropdown-trigger:hover {
  color: var(--gold-soft);
}

.site-header--sky .lang-toggle {
  border-color: rgba(255, 255, 255, 0.35);
}

.site-header--sky .lang-widget .lang-toggle button {
  color: rgba(255, 255, 255, 0.75);
}

.site-header--sky .lang-widget .lang-toggle button.active {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.site-header--sky .nav-toggle span {
  background: var(--white);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 4px 0;
  min-height: 0;
}

.logo-link {
  flex-shrink: 0;
  line-height: 0;
}

.logo-link img {
  height: clamp(34px, 9vw, 48px);
  width: auto;
  max-width: min(42vw, 220px);
  display: block;
}

.header-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.nav-desktop {
  display: none;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 14px 18px;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-desktop a {
  text-decoration: none;
  color: var(--navy);
}

.nav-desktop a:hover,
.nav-desktop a.active {
  color: var(--gold-dark);
}

.nav-dropdown-trigger.active {
  color: var(--gold-dark);
}

/* "Coming soon" nav item — dimmed + small gold pill so it reads as planned but not live.
   When the real page ships, drop the .nav-soon class everywhere and remove the badge span. */
.nav-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.nav-soon:hover { opacity: 0.85; }
.nav-soon-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.55);
  color: var(--gold-dark);
  line-height: 1;
}
.site-header--sky .nav-soon-badge {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}
.nav-mobile .nav-soon-badge {
  background: rgba(212, 175, 55, 0.22);
  border-color: rgba(212, 175, 55, 0.55);
  color: var(--gold-soft, #e9c560);
}

/* Services dropdown (desktop hover) */
.nav-dropdown {
  position: relative;
}

/* Always-present hover bridge that extends `.nav-dropdown`'s hit area 10px below the trigger.
   Without this, mousing from trigger down to the menu lost :hover (menu is display:none until hover,
   so a pseudo on the menu itself can't bridge the gap — it doesn't exist before you reach it). */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
}

.nav-dropdown-trigger {
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--navy);
  cursor: pointer;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-chevron {
  font-size: 0.75rem;
  opacity: 0.85;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  /* 10px visual gap below the trigger; the .nav-dropdown::after bridge above keeps the gap hoverable. */
  top: calc(100% + 10px);
  /* Left-align the panel under its trigger (was centered with left:50% / translateX). */
  left: 0;
  right: auto;
  transform: none;
  min-width: 240px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--white);
  /* Match the home-page card look: square corners + gold accent stripe + card shadow. */
  border-radius: 0;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  z-index: 200;
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: var(--navy) !important;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.nav-dropdown-menu a:hover {
  background: var(--mist);
  color: var(--gold-dark) !important;
}

.nav-dropdown-all {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 6px;
}

.nav-dropdown-all a {
  color: var(--gold-dark) !important;
  font-weight: 600;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

/* Services mega-menu — wider 3-column panel with section heads + sub-services.
   Same `.nav-dropdown::after` hover bridge applies so mouse traversal stays smooth. */
.nav-dropdown--services .nav-dropdown-mega {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  background: var(--white);
  border-radius: 0;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-card);
  z-index: 200;
  padding: 20px 24px 16px;
  width: 720px;
  max-width: calc(100vw - 32px);
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 32px;
}
.nav-dropdown--services:hover .nav-dropdown-mega,
.nav-dropdown--services:focus-within .nav-dropdown-mega {
  display: grid;
}
.nav-mega-col {
  display: flex;
  flex-direction: column;
}
.nav-mega-head {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--navy);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  padding: 2px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.nav-mega-head:hover { color: var(--gold-dark); }
.nav-mega-col a:not(.nav-mega-head) {
  display: block;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  padding: 6px 0;
  line-height: 1.3;
}
.nav-mega-col a:not(.nav-mega-head):hover { color: var(--gold-dark); }
.nav-mega-all {
  grid-column: 1 / -1;
  display: block;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  color: var(--gold-dark);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
.nav-mega-all:hover { color: var(--navy); }

/* 4-column variant — Services dropdown when Sell is included as a 4th lane */
.nav-dropdown-mega--4col {
  width: 880px !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px 24px !important;
}
@media (max-width: 960px) {
  .nav-dropdown-mega--4col {
    width: 720px !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 28px !important;
  }
}

/* Mobile services panel — nested sub-heads (Buy / Invest / Strategy) act as group headers. */
.nav-mobile-mega-head {
  margin-top: 14px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.nav-mobile-mega-head:first-child { margin-top: 0; }
.nav-mobile-mega-head a {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 4px 0 !important;
}
.nav-mobile-services-panel > a:not(.nav-mobile-all) {
  padding-left: 16px;
  font-size: 0.82rem;
  opacity: 0.85;
}
.nav-mobile-all {
  display: block;
  margin-top: 14px;
  padding: 4px 0 !important;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  color: var(--gold-soft, #e9c560) !important;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}

.header-list,
.header-call {
  display: none;
}

.btn-header-primary {
  background: var(--gold);
  color: var(--navy-deep);
  border: 2px solid var(--gold);
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 8px;
  white-space: nowrap;
  text-decoration: none;
}

.btn-header-primary:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
}

.btn-header-phone {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 8px;
  white-space: nowrap;
  text-decoration: none;
}

.btn-header-phone:hover {
  background: var(--mist);
}

.btn-header-phone .btn-icon {
  flex-shrink: 0;
}

.btn-header-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 8px;
  white-space: nowrap;
}

.btn-header-outline:hover {
  background: var(--mist);
}

/* Fixed EN/ES — vertical pill, anchored flush to the right edge near the
   bottom of the viewport. Always visible (mobile + tablet + desktop). Moved
   out of the hero focal area so it stops competing with the headline + CTAs.
   Mobile/tablet bottom offset clears the .mobile-sticky CTA bar (z:135) —
   widget sits just above it without overlap. */
.lang-widget {
  position: fixed;
  right: 0;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  top: auto;
  transform: none;
  z-index: 120;
}

@media (max-width: 899px) {
  .lang-widget {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
}

.lang-widget .lang-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  overflow: hidden;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-family: var(--font-heading);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: -2px 2px 10px rgba(26, 41, 66, 0.1);
  backdrop-filter: blur(6px);
}

.lang-widget .lang-toggle button {
  border: 0;
  background: transparent;
  padding: 3px 7px;
  min-width: 0;
  line-height: 1.2;
  cursor: pointer;
  color: var(--muted);
}

.lang-widget .lang-toggle button + button {
  border-left: 0;
  border-top: 1px solid var(--line);
}

.lang-widget .lang-toggle button.active {
  background: var(--navy);
  color: var(--white);
}

/* Hide the always-present widget while the mobile menu drawer is open —
   the drawer has its own EN/ES toggle, so two would be redundant. */
body.nav-locked .lang-widget { display: none; }

.lang-toggle {
  display: none;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px 16px;
  background: var(--white);
  border-top: 1px solid var(--line);
  transition: background-color 220ms ease, backdrop-filter 220ms ease, -webkit-backdrop-filter 220ms ease;
}

/* Mobile drawer matches header: solid at top, frosted on scroll.
   Slightly more opaque than the header chrome (0.6 vs 0.4) so the
   menu items stay legible against busy hero photos behind. */
.site-header.is-scrolled:not(.site-header--sky) .nav-mobile {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

/* Mobile: slide-in panel from the right (Reserva pattern), capped width,
   natural content height (not full-screen). Backdrop-blurs the rest of
   the page. Compact spacing so the whole menu fits without scrolling. */
@media (max-width: 899px) {
  .nav-mobile {
    display: flex;
    /* position: fixed. The actual `top` value is computed by JS on menu
       open (= .site-header.getBoundingClientRect().bottom) so the drawer
       lands flush under the header WHEREVER the header currently is.
       Why not position: absolute on the sticky header parent? Safari iOS
       has flaky behavior — absolute children of a sticky element don't
       reliably reposition when sticky activates. Fixed + JS-measured top
       is rock-solid across Safari/Chrome/Android. */
    position: fixed;
    top: 0;                  /* placeholder; JS overwrites on open */
    right: 0;
    width: min(300px, 88vw);
    max-height: 100dvh;
    overflow-y: auto;
    gap: 2px;
    padding: 10px max(8px, env(safe-area-inset-right, 0px)) 12px max(10px, env(safe-area-inset-left, 0px));
    border-top: 0;
    border-radius: 0 0 0 12px;
    box-shadow: -14px 14px 44px rgba(11, 26, 50, 0.22);
    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.24s ease, visibility 0s linear 0.32s;
    /* z:200 puts the drawer above EVERYTHING — including the bottom
       sticky CTA bar (z:135) which was painting over the drawer's bottom
       items and intercepting taps. Drawer has its own Call/Book buttons
       so no UX loss from hiding the bottom CTAs while menu is open. */
    z-index: 200;
    touch-action: manipulation;
  }
  .nav-mobile.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.24s ease, visibility 0s linear 0s;
  }
  /* Compact item paddings + font for mobile only */
  .nav-mobile a,
  .nav-mobile .nav-mobile-toggle {
    padding: 6px 0;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
  }
  .nav-mobile-subpanel,
  .nav-mobile-services-panel,
  .nav-mobile-about-panel {
    gap: 0;
    padding: 2px 0 4px 12px;
    margin: 0 0 2px;
  }
  .nav-mobile-subpanel a,
  .nav-mobile-services-panel a,
  .nav-mobile-about-panel a {
    padding: 4px 0;
    font-size: 0.78rem;
  }
  .nav-mobile-mega-head {
    margin-top: 6px;
    padding-bottom: 2px;
  }
  .nav-mobile-mega-head a {
    font-size: 0.84rem !important;
    padding: 2px 0 !important;
  }
  .nav-mobile-services-panel > a:not(.nav-mobile-all) {
    padding-left: 14px;
    font-size: 0.76rem;
  }
  .nav-mobile-cta {
    gap: 6px;
    margin-top: 6px;
    padding-top: 10px;
  }
  .nav-mobile-cta .btn {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.78rem;
  }
  .nav-mobile-lang {
    margin-top: 8px;
    padding-top: 8px;
  }
  .nav-mobile-lang-label { font-size: 0.7rem; margin-bottom: 6px; }
}

/* Desktop fallback — keep the original dropdown-below-header behavior */
@media (min-width: 900px) {
  .nav-mobile.open {
    display: flex;
  }
}

/* Full-page backdrop with blur, sits behind the slide-in panel */
.nav-backdrop {
  position: fixed;
  inset: 0;
  /* Fully transparent — the blur on main/footer is the only visual cue.
     User explicitly didn't want a dark dim overlay. Backdrop stays as a
     click-catcher (pointer-events: auto when .open) so taps outside the
     drawer still close the menu. */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  /* Bumped 95 → 125 so the backdrop sits above the .lang-widget (z:120)
     when the mobile drawer is open. Drawer itself is z:130 (set below). */
  z-index: 125;
  pointer-events: none;
}
.nav-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, visibility 0s linear 0s;
}

/* When the mobile drawer is open, blur ONLY main + footer.
   - Header stays sharp (logo/phone/hamburger remain readable + clickable).
   - Topfix banner stays sharp (small enough not to need blur).
   - CRITICAL: .nav-mobile lives INSIDE .site-header in the DOM. Blurring
     the header would inherit-blur the drawer's contents (HOME, BUY, etc.).
     Skipping the header keeps the drawer crisp without any JS reparenting.
   - Also avoids the "dark gap" caused by .ikc-mount's blur edge bleeding
     down into the header area.
   - NO `pointer-events: none` — iOS Safari was routing touches on the
     drawer through the blurred main element to the backdrop, which then
     closed the menu. Letting main be interactive (but covered by drawer)
     is fine; the backdrop catches taps on the visible (blurred) area. */
body.nav-open main,
body.nav-open .site-footer {
  filter: blur(6px);
  transition: filter 0.28s ease;
}
main,
.site-footer {
  transition: filter 0.28s ease;
}

/* Belt-and-suspenders — explicitly force the mobile drawer (and every
   descendant) to receive pointer events when open. Catches any inherited
   pointer-events: none from parents and any iOS Safari quirks. */
.nav-mobile.open,
.nav-mobile.open * {
  pointer-events: auto !important;
}
.nav-mobile.open a,
.nav-mobile.open button {
  touch-action: manipulation; /* Removes iOS 300ms tap delay */
  cursor: pointer;
}

/* Hide the floating bottom CTAs while the drawer is open — the drawer
   has its own Call / Get Property List / Book Consultation buttons, so
   showing both is redundant AND the CTAs were painting over the bottom
   of the drawer (eating taps). */
body.nav-open .mobile-sticky,
body.nav-open .floating-cta {
  display: none !important;
}

/* ROOT-CAUSE FIX for "menu opens but items don't click":
   .site-header is position:sticky with z:100 — that creates a stacking
   context. .nav-mobile is a CHILD of .site-header, so its z:200 is local
   to that context; globally the whole header is z:100. .nav-backdrop
   (z:125, body-level sibling) therefore paints ABOVE the drawer and
   intercepts every tap with its "click to close" handler.
   While the drawer is open, lift the header above the backdrop so the
   drawer's local z:200 wins globally and tap targets work again. */
body.nav-open .site-header {
  z-index: 140;
}

/* Body scroll lock while the panel is open */
body.nav-locked { overflow: hidden; }

.nav-mobile a,
.nav-mobile-toggle {
  text-decoration: none;
  font-weight: 500;
  color: var(--navy);
  padding: 10px 0;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  background: none;
  border: 0;
  font-family: var(--font-heading);
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.nav-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nav-mobile-chevron {
  font-size: 0.8rem;
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-chevron {
  transform: rotate(180deg);
}

.nav-mobile-group {
  display: flex;
  flex-direction: column;
}

.nav-mobile-subpanel,
.nav-mobile-services-panel,
.nav-mobile-about-panel {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 8px 14px;
  margin: 0 0 4px;
  border-left: 2px solid var(--line);
}

.nav-mobile-subpanel.open,
.nav-mobile-services-panel.open,
.nav-mobile-about-panel.open {
  display: flex;
}

.nav-mobile-subpanel a,
.nav-mobile-services-panel a,
.nav-mobile-about-panel a {
  text-transform: none;
  font-size: 0.88rem;
  letter-spacing: 0;
  padding: 8px 0;
  color: var(--muted);
  font-weight: 500;
}

.nav-mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.nav-mobile-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  border-radius: 10px;
  text-decoration: none;
  line-height: 1.25;
}

/* Mobile-menu CTAs — solid-color "vibe" matching the sticky bottom bar:
   iOS-green call · iMessage-blue property · iOS-gray book.
   Single visual language between the two CTA surfaces. */
.nav-mobile-cta .btn-mobile-call {
  background: #34c759 !important;
  color: var(--white) !important;
  border: 2px solid #28a745 !important;
  box-shadow: 0 2px 10px rgba(52, 199, 89, 0.32);
}
.nav-mobile-cta .btn-mobile-call:hover {
  background: #28a745 !important;
  border-color: #1f7a32 !important;
  color: var(--white) !important;
}

.nav-mobile-cta .btn-mobile-property {
  background: #007aff !important;
  color: var(--white) !important;
  border: 2px solid #0066d6 !important;
  box-shadow: 0 2px 10px rgba(0, 122, 255, 0.30);
}
.nav-mobile-cta .btn-mobile-property .btn-icon { flex-shrink: 0; color: var(--white); }
.nav-mobile-cta .btn-mobile-property:hover {
  background: #0066d6 !important;
  border-color: #0052ad !important;
  color: var(--white) !important;
}

.nav-mobile-cta .btn-mobile-book {
  background: var(--white) !important;
  color: var(--navy) !important;
  border: 2px solid #4285f4 !important;      /* Google Calendar blue — matches sticky-book border */
  box-shadow: 0 2px 8px rgba(26, 41, 66, 0.06);
}
.nav-mobile-cta .btn-mobile-book .btn-icon { flex-shrink: 0; color: #4285f4; }
.nav-mobile-cta .btn-mobile-book:hover {
  background: rgba(66, 133, 244, 0.06) !important;
  border-color: #3367d6 !important;
  color: var(--navy-deep) !important;
}

.nav-mobile-lang {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.nav-mobile-lang-label {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  width: 100%;
  text-align: center;
}

.lang-toggle--menu {
  display: inline-flex;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  border: 2px solid rgba(26, 41, 66, 0.2);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-heading);
  background: var(--white);
  box-shadow: 0 2px 8px rgba(26, 41, 66, 0.06);
}

.lang-toggle--menu button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--muted);
}

.lang-toggle--menu button + button {
  border-left: 1px solid var(--line);
}

.lang-toggle--menu button.active {
  background: var(--navy);
  color: var(--white);
}

@media (min-width: 900px) {
  .header-main {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
  }

  .nav-desktop {
    display: flex;
    gap: 16px 20px;
  }

  .header-actions {
    gap: 10px;
    flex-shrink: 0;
  }

  .header-list,
  .header-call {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }

  .nav-mobile {
    display: none !important;
  }
}

@media (min-width: 1100px) {
  .header-main {
    gap: 16px;
  }

  .header-list,
  .header-call {
    padding: 9px 16px;
    font-size: 0.82rem;
  }

  .nav-desktop {
    gap: 18px 22px;
    font-size: 0.86rem;
  }
}

@media (max-width: 899px) {
  /* Mobile/tablet: give the header row breathing room so logo and hamburger don't hug the screen edge */
  .header-inner {
    padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px));
  }

  .logo-link img {
    height: clamp(30px, 10vw, 40px);
    max-width: min(50vw, 180px);
  }

  .header-list {
    display: none !important;
  }

  .header-call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 2px solid rgba(26, 41, 66, 0.42);
    padding: 7px 10px;
    font-size: clamp(0.68rem, 2.4vw, 0.76rem);
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(26, 41, 66, 0.1);
  }

  .header-call .btn-icon {
    width: 16px;
    height: 16px;
  }

  .site-header--sky .header-call {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
  }

  .site-header--sky .header-call:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
  }
}

/* —— Buttons (Prestige: gold primary, navy outline secondary) —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 41, 66, 0.15);
}

.btn-primary {
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold);
}

.btn-primary:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
}

.btn-secondary {
  background: var(--white);
  color: var(--navy);
  border-color: var(--navy);
}

.btn-secondary:hover {
  background: var(--mist);
}

.btn-gold {
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold);
}

.btn-gold:hover {
  background: var(--gold-soft);
}

.btn-call {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
  padding: 10px 16px;
  font-size: 0.85rem;
}

.btn-call:hover {
  background: var(--navy);
  color: var(--white);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 16px 28px;
  font-size: 1rem;
}

/* —— Sections —— */
.section {
  padding: 56px 0;
}

.section-alt {
  background: var(--mist);
  border-block: 1px solid var(--line);
}

.section-navy {
  background: var(--navy);
  color: var(--white);
}

.section-title,
.section h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.25rem);
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.section-navy .section-title,
.section-navy h2 {
  color: var(--white);
}

.section-lead {
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 32px;
  font-size: 1.05rem;
}

.section-navy .section-lead {
  color: rgba(255, 255, 255, 0.88);
}

.eyebrow,
.kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 10px;
}

.lead {
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0 0 20px;
  max-width: 56ch;
  line-height: 1.65;
}

/* —— Hero (Prestige formula + ARRE headshot) —— */
.hero {
  padding: 48px 0 0;
  background: linear-gradient(180deg, var(--blue-sky) 0%, var(--white) 55%);
}

.hero-prestige {
  padding: 40px 0 0;
  background: var(--navy-deep);
  color: var(--white);
  position: relative;
  overflow-x: clip;
  overflow-y: visible;

  /* === Portrait positioning — Default Preset v1 (MOBILE base, <900px) ===
     Future CMS overrides these inline per-breakpoint. Do not regress
     without updating the Gold Standard doc preset table. */
  --portrait-width: min(360px, 88vw);
  --portrait-max-width: none;
  --portrait-margin-bottom: -20px;
  --portrait-translate-y: 0px;
  --portrait-img-width: 100%;
  --portrait-img-max-h: min(520px, 72vh);
  --portrait-img-margin-bottom: -12px;
  --portrait-img-object-position: bottom center;
}

/* South Bay hero photos — hero1–hero4 */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  transform: scale(1.04);
}

.hero-bg-slide.is-active {
  opacity: 1;
  animation: hero-bg-kenburns 18s ease-in-out infinite alternate;
}

.hero-bg-slide--1 {
  background-position: center 35%;
}

.hero-bg-slide--3 {
  background-position: center 40%;
}

.hero-bg-slide--4 {
  background-position: center 38%;
}

.hero-bg-slide--5 {
  background-position: center 50%;
}

.hero-bg-slide--6 {
  background-position: center 45%;
}

.hero-bg-slide--7 {
  background-position: center 45%;
}

@keyframes hero-bg-kenburns {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.09);
  }
}

.hero-bg-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 68%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}

.hero-bg-arrow {
  pointer-events: auto;
  width: auto;
  height: auto;
  padding: 12px 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  text-shadow: 0 2px 16px rgba(26, 41, 66, 0.5);
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.hero-bg-arrow:hover {
  opacity: 0.95;
  background: transparent;
  color: rgba(255, 255, 255, 0.98);
  transform: scale(1.06);
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Prestige-style dark navy scrim — strong left, softer toward portrait */
  background: linear-gradient(
    105deg,
    rgba(15, 27, 45, 0.96) 0%,
    rgba(18, 29, 48, 0.92) 24%,
    rgba(26, 41, 66, 0.82) 44%,
    rgba(26, 41, 66, 0.58) 64%,
    rgba(26, 41, 66, 0.32) 82%,
    rgba(18, 29, 48, 0.14) 100%
  );
}

.hero-prestige::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  bottom: auto;
  height: 62%;
  background: radial-gradient(ellipse at 88% 8%, rgba(212, 175, 55, 0.06) 0%, transparent 55%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide {
    animation: none;
    transform: none;
  }
}

.hero-prestige-wrap {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: end;
  row-gap: 0;
  column-gap: 0;
}

.hero-copy {
  position: relative;
  z-index: 2;
  grid-row: 1;
  max-width: 100%;
}

.hero-portrait {
  grid-row: 2;
}

@media (min-width: 900px) {
  .hero-prestige {
    overflow-x: clip;
    overflow-y: visible;
    padding-top: 32px;

    /* === Portrait positioning — Default Preset v1 — "M" size (DESKTOP, ≥900px) ===
       Client-approved 2026-06-02 with original portrait file (1080×1440).
       Adjusted 2026-06-05 for new portrait file (1603×2415 — tighter crop,
       taller aspect): reduced --portrait-img-max-h ~17% so the subject
       reads at the same VISUAL size as the original portrait.
       "XL" preset (the original 910 max-height value applied to the new
       file) is reachable via `data-portrait-size="xl"` on .hero-prestige
       (see Alternate Presets block below). */
    --portrait-width: 100%;
    --portrait-max-width: 580px;
    --portrait-margin-bottom: -20px;
    --portrait-translate-y: 0px;
    --portrait-img-width: 130%;
    /* Reduced another ~20% (760 → 608) on 2026-06-05 after user feedback
       that the new tighter-crop file still read as XL on desktop. XL preset
       value (910) below remains untouched. */
    --portrait-img-max-h: min(608px, calc(100vh - 220px));
    --portrait-img-margin-bottom: -12px;
    --portrait-img-object-position: bottom right;
  }

  /* === Portrait size scale (DESKTOP) — opt-in via data-portrait-size on
     .hero-prestige. The default (no attribute) is "M" = 608. Renamed
     after 2026-06-05 user feedback: the old 760 became XL, 680 became L. */

  /* L — Large. Sits between M (608) and XL (760). */
  .hero-prestige[data-portrait-size="l"] {
    --portrait-img-max-h: min(680px, calc(100vh - 200px));
  }

  /* XL — the previous M value (before the 20% shrink). */
  .hero-prestige[data-portrait-size="xl"] {
    --portrait-img-max-h: min(760px, calc(100vh - 200px));
  }

  /* XXL — the original pre-swap max-height. Kept for the rare "billboard" use. */
  .hero-prestige[data-portrait-size="xxl"] {
    --portrait-img-max-h: min(910px, calc(100vh - 140px));
  }

  .hero-prestige-wrap {
    grid-template-columns: 1fr minmax(280px, 46%);
    grid-template-rows: auto;
    column-gap: 8px;
    overflow: visible;
    align-items: end;
    padding-bottom: 0;
  }

  .hero-copy {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    padding-right: 12px;
    padding-bottom: 0;
    align-self: start;
    position: relative;
    z-index: 2;
  }

  /* -20px pulls waist into navy row; navy z-index 3 paints in front */
  .hero-portrait {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    justify-content: flex-end;
    align-items: flex-end;
    width: var(--portrait-width);
    max-width: var(--portrait-max-width);
    margin: 0 0 var(--portrait-margin-bottom) auto;
    z-index: 1;
    overflow: visible;
    transform: translateY(var(--portrait-translate-y));
  }
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.65);
  background: rgba(26, 41, 66, 0.35);
  color: var(--gold-soft);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.hero-pill-star {
  color: var(--gold);
  font-size: 0.72rem;
}

.hero-disclaimer-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}

@media (min-width: 900px) {
  .hero-disclaimer-pills {
    margin-bottom: 8px;
  }
}

.hero-pill--mini {
  margin: 0;
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  line-height: 1.35;
  padding: 5px 10px;
  white-space: nowrap;
}

/* FCRE affiliation logo — sits inline with the disclaimer pills, no pill
   chrome (no border, no bg). Height tuned to feel like a peer to the
   adjacent text pills. */
.hero-disclaimer-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  align-self: center;
}

.hero-title {
  margin: 0 0 16px;
  line-height: 1.08;
}

.hero-title-line {
  display: block;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  color: var(--white);
  letter-spacing: -0.02em;
}

.hero-title-accent {
  display: block;
  font-size: clamp(2.1rem, 5vw, 3.35rem);
  color: var(--gold-dark);
  font-style: italic;
  letter-spacing: -0.02em;
}

.hero-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 24px;
  max-width: 54ch;
  line-height: 1.65;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.btn-hero-primary,
.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 64px;
  padding: 20px 32px;
  font-size: clamp(0.82rem, 1.5vw, 1.05rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.25;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  white-space: normal;
}

.btn-hero-primary {
  background: var(--gold);
  color: var(--navy-deep);
  border: 2px solid var(--gold);
}

.btn-hero-primary .btn-arrow {
  font-size: 1.2rem;
  line-height: 1;
  margin-left: 4px;
}

.btn-hero-primary:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn-hero-outline {
  background: rgba(11, 26, 50, 0.55);
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.btn-hero-outline .btn-icon {
  flex-shrink: 0;
  color: var(--white);
}

.btn-hero-outline:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
  text-shadow: none;
  transform: translateY(-2px);
}
.btn-hero-outline:hover .btn-icon { color: var(--navy); }

.btn-hero-split {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  min-height: 64px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(11, 26, 50, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.btn-hero-split > .btn-split-half {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-hero-split > .btn-split-half + .btn-split-half {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.btn-hero-split > .btn-split-half:hover {
  background: var(--white);
  color: var(--navy);
}
.btn-hero-split > .btn-split-half:hover .btn-icon { color: var(--navy); }
.btn-hero-split .btn-icon { color: var(--white); flex-shrink: 0; }

@media (max-width: 899px) {
  .btn-hero-split { width: 100%; }
  .btn-hero-split > .btn-split-half { flex: 1 1 50%; padding: 0 12px; }

  .hero-prestige {
    padding-top: 28px;
  }

  .hero-prestige-wrap {
    min-width: 0;
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
  }

  .hero-pill {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6px;
    padding: 5px 12px;
  }

  .hero-title {
    margin-bottom: 6px;
    line-height: 1.04;
  }

  .hero-title,
  .hero-title-line,
  .hero-title-accent,
  .hero-sub {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .hero-title-line {
    font-size: clamp(3.1rem, 12.6vw, 4.0rem);
    font-weight: 700;
    line-height: 1.0;
  }

  .hero-title-accent {
    font-size: clamp(2.5rem, 10.5vw, 3.4rem);
    line-height: 1.0;
  }

  .hero-sub {
    max-width: 100%;
    font-size: clamp(0.84rem, 3.2vw, 0.94rem);
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .hero-cta-row {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: visible;
    width: 100%;
    max-width: 100%;
    gap: 5px;
    margin-bottom: 8px;
  }

  .btn-hero-primary,
  .btn-hero-outline {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    white-space: normal;
    min-height: 40px;
    padding: 8px 14px;
    font-size: clamp(0.8rem, 3.2vw, 0.9rem);
    font-weight: 700;
    border-radius: 8px;
  }

  .hero-trust-row {
    width: 100%;
    max-width: 100%;
    gap: 8px;
  }

  .hero-disclaimer-pills {
    max-width: 100%;
    margin-top: 6px;
    gap: 6px;
    justify-content: space-evenly;
  }

  .hero-pill--mini {
    padding: 4px 9px;
    font-size: 0.52rem;
  }
}

/* Tablet — hero vertical spacing only (gutters use global .container) */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-prestige {
    padding-top: 30px;
  }
}

/* Mobile — 3 chips fit flushly on one row.
   Inside each chip, content stacks vertically (icon/logo on top, text below, centered).
   Grid uses stretch so chips share equal height regardless of internal content. */
@media (max-width: 639px) {
  .hero-prestige {
    padding-top: 14px;
  }

  /* Mobile trust strip — single row: FCRE + Google logos side by side.
     Full Stack chip hidden on mobile only (visible at tablet/desktop). */
  .hero-trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 6px;
    align-items: stretch;
  }
  .hero-trust-item--brand-logo { grid-column: 1; grid-row: 1; }
  .hero-trust-item--reviews { grid-column: 2; grid-row: 1; }
  .hero-trust-item--stack { display: none !important; }

  .hero-trust-item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    text-align: center;
    min-width: 0;
    padding: 8px 4px;
  }

  .hero-trust-item > div {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .hero-icon-badge {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
    margin-top: 0;
    flex-shrink: 0;
  }

  .hero-trust-item strong {
    font-size: clamp(0.58rem, 2.4vw, 0.66rem);
    line-height: 1.2;
    margin-bottom: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
    display: block;
    min-height: 2.4em;
  }

  .hero-trust-item span {
    font-size: clamp(0.52rem, 2.05vw, 0.58rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
    display: block;
    min-height: 1.25em;
  }

  /* FCRE brand-logo chip — bump to ~52px tall so it matches the visual weight
     of the icon+2-line-text chips next to it; center horizontally in cell. */
  .hero-trust-item--brand-logo {
    justify-content: center;
    align-items: center;
  }
  .hero-trust-item--brand-logo img {
    max-height: 52px !important;
    max-width: 100% !important;
    width: auto !important;
    margin: 0 auto;
  }

  /* Google Reviews chip — center the logo in its narrow cell. */
  .hero-trust-item--reviews {
    justify-content: center;
    align-items: center;
  }

  /* Full Stack chip — full-width row 2, icon left + text right, single-line title and sub at readable sizes. */
  .hero-trust-item--stack {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 10px;
    padding: 4px 12px;
  }
  .hero-trust-item--stack > div {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .hero-trust-item--stack .hero-icon-badge {
    width: 1.6rem;
    height: 1.6rem;
  }
  .hero-trust-item--stack strong {
    min-height: 0;
    font-size: clamp(0.95rem, 4vw, 1.1rem);
    line-height: 1.2;
    overflow-wrap: normal;
    hyphens: none;
    white-space: nowrap;
  }
  .hero-trust-item--stack span {
    min-height: 0;
    font-size: clamp(0.78rem, 3.2vw, 0.9rem);
    line-height: 1.3;
    overflow-wrap: normal;
    white-space: nowrap;
  }
}

/* Desktop only — keep "Purchase · Renovate · Reinvest" on a single line in its chip cell.
   Mobile lets it wrap naturally since each chip is column-sized. */
@media (min-width: 900px) {
  .trust-sub-nowrap-desktop {
    white-space: nowrap;
  }
}


@media (max-width: 720px) {
  .hero-cta-row {
    gap: 6px;
    padding-bottom: 0;
  }

  .btn-hero-primary,
  .btn-hero-outline {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.8rem;
  }
}

@media (min-width: 900px) {
  .hero-cta-row {
    flex-wrap: nowrap;
  }

  .btn-hero-primary,
  .btn-hero-outline {
    min-height: 68px;
    padding: 22px 34px;
    font-size: 1.05rem;
    white-space: nowrap;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
}

.hero-trust-row {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) and (max-width: 899px) {
  .hero-trust-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 10px;
  }

  .hero-trust-item strong {
    font-size: 0.92rem;
  }

  .hero-trust-item span {
    font-size: 0.78rem;
  }
}

@media (min-width: 900px) {
  .hero-trust-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hero-trust-item {
  display: flex;
  gap: 12px;
  /* Top-align icon with the first line of the strong title (was `center`, which floated icons mid-block when subtitle wrapped). */
  align-items: flex-start;
}

.hero-icon-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hero trust row icons — smaller, refined. Navy band icons use the larger `.hero-icon-badge--on-navy` override below. */
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1rem;
  line-height: 1;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* SVG icons inherit `currentColor` for stroke — keep this white so all badges render straight-white by default */
  color: #ffffff;
}

/* Generic SVG sizing inside any .hero-icon-badge (hero-trust-row + navy band both) */
.hero-icon-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* FCRE brand-logo chip — center the logo in its column so it visually
   aligns with Google Reviews (also centered) at tablet/desktop. */
.hero-trust-item--brand-logo {
  justify-content: center;
  align-items: center;
}

/* Google Reviews chip — logo-only, clickable, opens GBP/Maps in new tab. */
.hero-trust-item--reviews {
  justify-content: center;
  align-items: center;
}

.hero-google-reviews {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero-google-reviews:hover,
.hero-google-reviews:focus-visible {
  opacity: 0.85;
  transform: scale(1.03);
}

.hero-google-reviews img {
  max-height: 44px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .hero-google-reviews img {
    max-height: 56px;
    max-width: 160px;
  }
}

.hero-icon-badge--on-navy {
  width: 2rem;
  height: 2rem;
  font-size: 1.2rem;
}

/* Navy band icons — white SVG line icons, bumped sizes per breakpoint. Rules placed after the generic `.hero-icon-badge` mobile rule above so they win on mobile too. */
.hero-icon-badge--on-navy {
  width: 1.75rem;
  height: 1.75rem;
  color: #ffffff;
}

.hero-icon-badge--on-navy svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (min-width: 640px) {
  .hero-icon-badge--on-navy {
    width: 2.4rem;
    height: 2.4rem;
  }
}

@media (min-width: 900px) {
  .hero-icon-badge--on-navy {
    width: 2.7rem;
    height: 2.7rem;
  }
}

.hero-trust-item strong {
  display: block;
  font-size: 1.02rem;
  color: var(--white);
  margin-bottom: 3px;
  font-weight: 700;
}

.hero-trust-item span {
  display: block;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}

/* Portrait — right column; scales up behind left copy (copy stays on top).
   Values driven by --portrait-* vars defined on .hero-prestige per breakpoint
   (see Default Preset v1 in the Gold Standard doc). */
.hero-portrait {
  position: relative;
  z-index: 1;
  width: var(--portrait-width);
  max-width: var(--portrait-max-width);
  margin: 0 auto var(--portrait-margin-bottom);
  padding: 0;
  background: none;
  line-height: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateY(var(--portrait-translate-y));
}

.hero-portrait img {
  display: block;
  width: var(--portrait-img-width);
  height: auto;
  max-height: var(--portrait-img-max-h);
  margin-bottom: var(--portrait-img-margin-bottom);
  object-fit: contain;
  object-position: var(--portrait-img-object-position);
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* White subject glow + soft depth — follows PNG alpha */
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.35))
    drop-shadow(0 8px 24px rgba(26, 41, 66, 0.22));
}

@media (min-width: 900px) {
  .hero-portrait img {
    display: block;
    width: var(--portrait-img-width);
    max-width: none;
    height: auto;
    max-height: var(--portrait-img-max-h);
    margin-left: auto;
    margin-bottom: var(--portrait-img-margin-bottom);
    object-fit: contain;
    object-position: var(--portrait-img-object-position);
    transform: none;
  }
}

/* === Portrait positioning — Alternate Presets ==================================
   Per-breakpoint attributes on <section class="hero hero-prestige">:
     data-portrait-desktop="N"  (≥900px)
     data-portrait-tablet="N"   (640–899px, reserved)
     data-portrait-mobile="N"   (<640px effective; <900px applies here for now)
   No attribute (or "1") = Default Preset v1 for that breakpoint.
   Values are starting points — tune via prompt + edit, no rebuild needed.
   ============================================================================ */

/* ---------- DESKTOP (≥900px) ---------- */
@media (min-width: 900px) {
  /* Preset 2 — "Bigger Hero": more dramatic, face fills more of the right column. */
  .hero-prestige[data-portrait-desktop="2"] {
    --portrait-max-width: 640px;
    --portrait-img-width: 150%;
    --portrait-img-max-h: min(960px, calc(100vh - 100px));
    --portrait-img-object-position: bottom right;
    --portrait-translate-y: 0px;
  }

  /* Preset 3 — "Contained Portrait": tighter, curated-card feel. */
  .hero-prestige[data-portrait-desktop="3"] {
    --portrait-max-width: 460px;
    --portrait-img-width: 100%;
    --portrait-img-max-h: min(720px, calc(100vh - 200px));
    --portrait-img-object-position: bottom right;
    --portrait-translate-y: 12px;
  }
}

/* ---------- MOBILE (<640px strict) ---------- */
@media (max-width: 639px) {
  /* Preset 2 — "Behind Copy": portrait becomes the backdrop; copy stacks on top.
     Grid-stack approach — both items in cell (1,1), copy z-index 3, portrait z-index 1.
     Saved values (2026-06-04): width 90%, translateX(185px), cover bottom-center. */
  /* Grid-stack approach: both copy + portrait occupy grid cell (1/1). No absolute. */
  .hero-prestige[data-portrait-mobile="2"] .hero-prestige-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: stretch;
  }
  .hero-prestige[data-portrait-mobile="2"] .hero-copy {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 3;
  }
  .hero-prestige[data-portrait-mobile="2"] .hero-portrait {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
    display: block;
    width: 90%;
    max-width: 90%;
    min-width: 0;
    justify-self: end;
    align-self: stretch;
    margin: 0;
    padding: 0;
    opacity: 1;
    pointer-events: none;
    transform: translateX(185px);
    overflow: visible;
  }
  .hero-prestige[data-portrait-mobile="2"] .hero-portrait img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: bottom center;
  }
}

/* Navy trust band — full-width sibling (no vw calc / pseudo bleed) */
.hero-navy-band {
  position: relative;
  z-index: 3;
  width: 100%;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  margin-top: -12px;
  /* Tighter padding to keep band height roughly stable while social icons grow. */
  padding: 14px 0 16px;
  box-shadow: 0 12px 40px rgba(18, 29, 48, 0.25);
}

@media (min-width: 900px) {
  .hero-navy-band {
    padding-top: 18px;
    padding-bottom: 20px;
  }
}

.hero-navy-band-inner {
  position: relative;
  z-index: 4;
  /* Mobile breathing room: 16px each side overrides container's 8px gutter so icons don't hug the edge */
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}

@media (min-width: 900px) {
  .hero-navy-band-inner {
    /* Desktop reverts to container's natural gutter — the .container's 16px-each-side max-width math handles it */
    padding-inline: 0;
  }
}

/* Layout: social icons hug the LEFT edge of content width; second item (San Diego County)
   floats centered in the remaining space between the social row's right edge and the
   content-width right edge. */
.hero-trust-bar-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 10px;
  width: 100%;
  align-items: center;
}

.hero-trust-bar-grid > .hero-bar-item:nth-child(2) {
  justify-self: center;
}

@media (min-width: 640px) {
  .hero-trust-bar-grid {
    gap: 0;
  }
}

@media (min-width: 900px) {
  .hero-trust-bar-grid {
    gap: 0;
  }
}

/* Bar-item: horizontal pin + text layout at all breakpoints. */
.hero-bar-item {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  text-align: left;
}

@media (min-width: 640px) {
  .hero-bar-item {
    gap: 12px;
    align-items: flex-start;
  }
}

.hero-bar-item strong {
  display: block;
  font-size: clamp(0.62rem, 2.5vw, 0.86rem);
  color: var(--white);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .hero-bar-item strong {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  }
}

@media (min-width: 900px) {
  .hero-bar-item strong {
    font-size: clamp(1.2rem, 1.4vw, 1.4rem);
  }
}

.hero-bar-item span {
  display: block;
  font-size: clamp(0.54rem, 2.1vw, 0.72rem);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.35;
  margin-top: 2px;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .hero-bar-item span {
    font-size: 0.88rem;
    line-height: 1.4;
    margin-top: 3px;
  }
}

@media (min-width: 900px) {
  .hero-bar-item span {
    font-size: 0.96rem;
  }
}

/* Social icons row — replaces the left navy-band item.
   Mobile: 5 outlined squares centered; flex-wrap allows graceful 3+2 fallback on very narrow cells.
   Hover/focus: icon + border switch to platform brand color. */
.hero-bar-item--social {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 0;
}

.hero-social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.5vw, 4px);
}

.hero-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 11.5vw, 54px);
  height: clamp(36px, 11.5vw, 54px);
  border-radius: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  color: #ffffff;
  background: transparent;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.hero-social-icon svg {
  width: clamp(20px, 6vw, 28px);
  height: clamp(20px, 6vw, 28px);
  display: block;
}

.hero-social-icon:hover,
.hero-social-icon:focus-visible {
  transform: translateY(-1px);
}

.hero-social-icon--instagram:hover,
.hero-social-icon--instagram:focus-visible { color: #E4405F; border-color: #E4405F; }
.hero-social-icon--facebook:hover,
.hero-social-icon--facebook:focus-visible { color: #1877F2; border-color: #1877F2; }
.hero-social-icon--youtube:hover,
.hero-social-icon--youtube:focus-visible { color: #FF0000; border-color: #FF0000; }
.hero-social-icon--tiktok:hover,
.hero-social-icon--tiktok:focus-visible { color: #FE2C55; border-color: #FE2C55; }
.hero-social-icon--linkedin:hover,
.hero-social-icon--linkedin:focus-visible { color: #0A66C2; border-color: #0A66C2; }

@media (min-width: 640px) {
  .hero-bar-item--social { padding: 0; }
  .hero-social-list { gap: 10px; flex-wrap: nowrap; }
  .hero-social-icon { width: 66px; height: 66px; }
  .hero-social-icon svg { width: 34px; height: 34px; }
}

@media (min-width: 900px) {
  .hero-social-list { gap: 12px; }
  .hero-social-icon { width: 76px; height: 76px; }
  .hero-social-icon svg { width: 38px; height: 38px; }
}

/* Legacy standalone trust bar (unused on home) */
.hero-trust-bar {
  background: var(--navy);
  border-bottom: none;
  padding: 28px 0;
}

.trust-pill {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-heading);
}

/* Legacy trust-stats (inner pages if used) */
.trust-stats {
  background: var(--navy);
  color: var(--white);
  padding: 28px 0;
}

.trust-stats-grid {
  display: grid;
  gap: 20px;
  text-align: center;
}

@media (min-width: 640px) {
  .trust-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .trust-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.trust-stat {
  padding: 8px 12px;
}

.trust-stat strong {
  display: block;
  font-size: 1.05rem;
  color: var(--gold);
  margin-bottom: 4px;
  font-weight: 600;
}

.trust-stat span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}

/* —— Cards (Prestige service grid) —— */
.card-grid {
  display: grid;
  gap: 20px;
}

.card-grid.cols-2 {
  grid-template-columns: 1fr;
}

.card-grid.cols-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .card-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .card-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-3 {
  display: grid;
  gap: 20px;
}

.grid-2 {
  display: grid;
  gap: 20px;
}

@media (min-width: 640px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--gold);
  height: 100%;
}

.card h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 500;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.card-link:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.card-link .link-arrow {
  color: var(--gold-dark);
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: auto;
  padding-top: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.featured-card {
  min-height: 200px;
  padding: 0;
  overflow: hidden;
}

.card-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.featured-card h3,
.featured-card p,
.featured-card .link-arrow,
.featured-card .btn {
  margin-left: 20px;
  margin-right: 20px;
}

.featured-card h3 {
  margin-top: 16px;
}

.featured-card .link-arrow {
  margin-bottom: 20px;
}

/* —— Steps —— */
.steps {
  display: grid;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(5, 1fr);
  }
}

.step-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
}

.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 1rem;
}

.step-card h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1.1rem;
}

.step-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* —— Carousel —— */
.carousel-shell {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
}

.carousel-shell--no-scroll .carousel-arrow {
  opacity: 0.2;
  pointer-events: none;
}

.carousel-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(26, 41, 66, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.carousel-arrow:hover:not(:disabled) {
  opacity: 0.95;
  background: var(--white);
}

.carousel-arrow:disabled {
  cursor: default;
}

.carousel-shell--navy .carousel-arrow {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
}

.carousel-shell--navy .carousel-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
}

.carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.carousel-viewport::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  display: flex;
  gap: 12px;
  min-width: min-content;
  padding: 4px 2px;
}

.carousel-shell--listings .carousel-track {
  gap: 20px;
}

.carousel-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.listing-card {
  flex: 0 0 280px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-card);
}

.listing-photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.listing-placeholder {
  height: 150px;
  background: linear-gradient(135deg, var(--mist), var(--line));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--muted);
}

.stock-photo-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 10px;
  font-style: italic;
}

.listing-body {
  padding: 16px;
}

.listing-badge {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gold-dark);
  letter-spacing: 0.06em;
  font-family: var(--font-heading);
}

.listing-price {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  margin: 6px 0;
  font-family: var(--font-heading);
}

.listing-meta {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 12px;
}

.idx-note {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 16px;
}

/* —— Trust bar & areas —— */
.trust-bar {
  background: var(--mist);
  border-block: 1px solid var(--line);
  padding: 32px 0;
}

.trust-bar .trust-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: center;
}

.trust-item {
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.95rem;
}

.trust-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: center;
  font-weight: 500;
}

.trust-links a {
  text-decoration: none;
  color: var(--navy);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.trust-links a:hover {
  color: var(--gold-dark);
}

.areas-tag {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--navy);
  text-align: center;
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* —— CTA band (Prestige closing section) —— */
.cta-band {
  background: var(--navy);
  color: var(--white);
  padding: 56px 0;
  text-align: center;
}

.cta-band h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 12px;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 48ch;
  margin: 0 auto 24px;
}

.cta-band .cta-row {
  justify-content: center;
}

.cta-band .btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.85);
}

.cta-band .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

/* —— Forms —— */
.lead-form label,
.form-card label,
.compact-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
  margin-bottom: 4px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}

textarea {
  min-height: 100px;
  resize: vertical;
}

.form-status {
  margin-top: 12px;
  font-size: 0.9rem;
  font-weight: 500;
}

.form-status.ok {
  color: #15803d;
}

.form-status.err {
  color: #b91c1c;
}

/* Small italic muted "(optional)" hint inside form labels */
.form-optional {
  font-weight: 500;
  font-style: italic;
  color: var(--muted);
  margin-left: 4px;
}

/* Checkbox group used for "What's your situation?" on the contact form.
   Resets fieldset default chrome and lays the checkboxes out in a 2-column grid. */
.form-checks {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px 12px;
  margin: 0;
  background: var(--mist);
}
.form-checks legend {
  padding: 0 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}
.form-checks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 14px;
  margin-top: 8px;
}
@media (min-width: 560px) {
  .form-checks-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.form-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500 !important;
  color: var(--navy);
  cursor: pointer;
  line-height: 1.3;
}
.form-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.form-check span {
  user-select: none;
}

/* === Sell page — address-first form + numbered process steps (Keegan pattern) === */
.sell-form {
  margin-top: 24px;
  text-align: left;
}

/* =================================================================
   Sell hero — full-bleed dark photo, centered headline, joined address+Submit,
   inline agent strip. Mirrors keeganwetzel.com/sell.
   ================================================================= */
.sell-hero {
  position: relative;
  width: 100%;
  padding: 72px 0 80px;
  color: var(--white);
  background: var(--navy-deep);
  overflow: hidden;
  isolation: isolate;
}
.sell-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/stock/hero-about.jpg");
  background-size: cover;
  background-position: center;
  filter: grayscale(20%);
}
.sell-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(1000px 600px at 50% 50%, rgba(15, 26, 46, 0.55), rgba(15, 26, 46, 0.85)),
    linear-gradient(180deg, rgba(10, 20, 36, 0.55) 0%, rgba(18, 29, 48, 0.85) 100%);
}
.sell-hero-content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  text-align: center;
}
.sell-hero-kicker {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 6px;
}
.sell-hero-title {
  margin: 0 0 12px;
  color: var(--white);
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.sell-hero-lead {
  margin: 0 auto 28px;
  max-width: 44rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.5;
}

/* Fused address bar — white input + dark Submit button locked into one row,
   same height, only the outer corners rounded so the seam disappears. */
.sell-form-address {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  margin: 0 0 4px;
  border-radius: 5px;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.38),
    0 2px 6px rgba(0, 0, 0, 0.22);
}
.sell-address-label {
  flex: 1;
  margin: 0 !important;
  display: flex;
  min-width: 0;
}
.sell-form-address input {
  width: 100%;
  padding: 22px 24px;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  font-weight: 500;
  border: 0;
  background: var(--white);
  border-radius: 5px 0 0 5px;
  font-family: inherit;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1;
}
.sell-form-address input::placeholder { color: rgba(15, 23, 42, 0.45); font-weight: 400; }
.sell-form-address input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.55);
}
.sell-submit {
  flex-shrink: 0;
  padding: 0 34px;
  border: 0;
  /* Gold + navy text — same as the hero "Get Property List" CTA. The
     previous navy-deep was invisible on the dark hero/eval backgrounds. */
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  border-radius: 0 5px 5px 0;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1;
}
.sell-submit:hover { background: var(--navy); color: var(--white); }
.sell-submit:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}
@media (max-width: 560px) {
  .sell-form-address { flex-direction: column; border-radius: 5px; }
  .sell-form-address input { border-radius: 5px 5px 0 0; }
  .sell-submit { border-radius: 0 0 5px 5px; padding: 16px; }
}

.sell-form-more--hero { margin: 8px 0 0; text-align: center; }
.sell-form-more--hero summary {
  color: var(--gold-soft, #e9c560);
  font-weight: 600;
  font-size: 0.86rem;
}
.sell-form-more--hero summary:hover { color: var(--white); }
.sell-form-more--hero[open] {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: left;
}
.sell-form-more--hero[open] summary { margin-bottom: 12px; }
.sell-form-more--hero .sell-form-fields label { color: rgba(255, 255, 255, 0.92); }
.sell-form-more--hero .sell-form-fields input,
.sell-form-more--hero .sell-form-fields select,
.sell-form-more--hero .sell-form-fields textarea {
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
}

.sell-form-status { color: rgba(255, 255, 255, 0.92); }

/* Two-step sell modal — opens on Next click, captures name/email/phone */
.sell-step-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.sell-step-modal.is-open { opacity: 1; pointer-events: auto; }
body.sell-step-open { overflow: hidden; }
.sell-step-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 26, 50, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sell-step-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  padding: 28px 26px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transform: scale(0.96);
  transition: transform 0.22s ease;
  text-align: left;
}
.sell-step-modal.is-open .sell-step-panel { transform: scale(1); }
.sell-step-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(11, 26, 50, 0.06);
  color: var(--navy, #0b1a32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sell-step-close:hover { background: rgba(11, 26, 50, 0.12); }
.sell-step-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark, #b8902f);
  margin: 0 0 8px;
  word-break: break-word;
}
.sell-step-eyebrow:empty { display: none; }
.sell-step-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--navy, #0b1a32);
  margin: 0 0 6px;
}
.sell-step-sub {
  font-size: 0.92rem;
  color: var(--ink, #2a3447);
  margin: 0 0 18px;
  line-height: 1.5;
}
.sell-step-panel .sell-form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.sell-step-panel .sell-form-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy, #0b1a32);
}
.sell-step-panel .sell-form-fields input {
  background: #fff;
  color: var(--navy, #0b1a32);
  border: 1.5px solid rgba(11, 26, 50, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sell-step-panel .sell-form-fields input:focus {
  outline: 0;
  border-color: var(--gold-dark, #b8902f);
  box-shadow: 0 0 0 3px rgba(184, 144, 47, 0.18);
}
.sell-step-submit {
  width: 100%;
  background: var(--navy, #0b1a32);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.sell-step-submit:hover { background: #14233e; }
.sell-step-submit:active { transform: translateY(1px); }
.sell-step-trust {
  font-size: 0.74rem;
  color: rgba(11, 26, 50, 0.6);
  margin: 12px 0 0;
  text-align: center;
}
@media (max-width: 480px) {
  .sell-step-modal { padding: 16px; align-items: flex-end; }
  .sell-step-panel { max-width: 100%; border-radius: 16px 16px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* Compact agent strip — small avatar + name + contact (left) and blurb (right). */
.sell-agent-inline {
  display: grid;
  grid-template-columns: 56px auto 1fr;
  gap: 14px 20px;
  align-items: center;
  background: rgba(10, 20, 36, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 12px 18px;
  margin-top: 18px;
  text-align: left;
}
.sell-agent-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--mist);
  border: 2px solid rgba(255, 255, 255, 0.22);
}
.sell-agent-meta { min-width: 0; }
.sell-agent-name {
  margin: 0;
  font-weight: 700;
  color: var(--white);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.sell-agent-contact {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.sell-agent-contact a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
.sell-agent-contact a:hover { color: var(--gold-soft, #e9c560); }
.sell-agent-blurb {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 720px) {
  .sell-agent-inline {
    grid-template-columns: 56px 1fr;
    gap: 12px 14px;
  }
  .sell-agent-blurb { grid-column: 1 / -1; }
}

.sell-hero .sell-form-trust {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.7);
}

/* === Evaluation wizard — 3-step form on the sell-hero ============== */
.eval-hero { padding: 64px 0 72px; }

.eval-steps {
  list-style: none;
  padding: 0;
  margin: 24px 0 22px;
  display: flex;
  gap: 4px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}
.eval-step-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease;
}
.eval-step-tab.is-active {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.eval-step-tab.is-done {
  background: rgba(212, 175, 55, 0.18);
  color: var(--gold-soft, #e9c560);
  border-color: rgba(212, 175, 55, 0.45);
}
.eval-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.75rem;
}
.eval-step-tab.is-active .eval-step-num { background: var(--navy); color: var(--gold); }
.eval-step-tab.is-done .eval-step-num { background: var(--gold); color: var(--navy); }

.eval-form { text-align: left; }

.eval-step {
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(10, 20, 36, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 22px 22px 18px;
}
.eval-step-help {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
}

.eval-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px) {
  .eval-grid { grid-template-columns: 1fr 1fr; }
}
.eval-grid-full { grid-column: 1 / -1; }
.eval-grid label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}
.eval-grid input,
.eval-grid select,
.eval-grid textarea {
  padding: 11px 13px;
  font-size: 0.93rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  font-family: inherit;
  color: var(--navy);
  font-weight: 500;
}
.eval-grid input:focus,
.eval-grid select:focus,
.eval-grid textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.35);
}

.eval-nav {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
}
.eval-back {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 4px;
  letter-spacing: 0.02em;
}
.eval-back:hover { color: var(--gold-soft, #e9c560); }
.eval-nav .sell-submit { margin: 0; }

.eval-error {
  margin: 10px 0 0;
  color: #fbbf24;
  font-size: 0.85rem;
  font-weight: 600;
}

.eval-confirm {
  text-align: center;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  padding: 26px 22px;
}
.eval-confirm h2 {
  margin: 0 0 10px;
  color: var(--white);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}
.eval-confirm p {
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 14px;
}

.eval-attribution {
  text-align: center;
  margin: 22px 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}
.eval-attribution a {
  color: var(--gold-soft, #e9c560);
  text-decoration: none;
  font-weight: 600;
}
.eval-attribution a:hover { color: var(--white); }

/* === Sold listings preview page — all square corners ============ */
.preview-banner {
  margin: 20px 0 0;
  padding: 14px 18px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-left: 4px solid var(--gold);
  border-radius: 0;
  font-size: 0.92rem;
  color: var(--navy);
  line-height: 1.5;
}
.preview-banner strong { color: var(--navy); }
.preview-banner em { color: var(--gold-dark); font-style: italic; }

.sold-filter-section { padding: 20px 0; }

.sold-filter-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 16px;
}
@media (min-width: 640px) { .sold-filter-bar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sold-filter-bar { grid-template-columns: repeat(5, 1fr); } }
.sold-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.sold-filter select {
  padding: 9px 12px;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--mist);
  color: var(--navy);
  font-family: inherit;
  cursor: not-allowed;
  opacity: 0.85;
}
.sold-filter-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

.sold-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 18px;
}
@media (min-width: 640px) { .sold-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sold-grid { grid-template-columns: repeat(3, 1fr); } }

.sold-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sold-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.sold-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--mist);
  overflow: hidden;
}
.sold-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sold-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 0;
}
.sold-photos {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.75);
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 0;
}

.sold-card-body {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  flex: 1;
}
.sold-card-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.sold-card-sold {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.sold-card-list {
  font-size: 0.92rem;
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 500;
}
.sold-card-delta {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 0;
}
.sold-card-delta--up {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.sold-card-delta--down {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.sold-card-stats {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
}
.sold-card-address {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.35;
}
.sold-card-attr {
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

.sold-mls-disclaim {
  margin: 28px 0 0;
  padding: 14px 18px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.55;
}
.sold-mls-disclaim strong { color: var(--navy); }

/* Callout variant — square corners */
.callout--square {
  border-radius: 0 !important;
  border-left: 4px solid var(--gold);
}

.sell-form-more { margin-bottom: 14px; }
.sell-form-more summary {
  cursor: pointer;
  color: var(--carolina);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 6px 0;
  list-style: none;
}
.sell-form-more summary:hover { color: var(--gold-dark); }
.sell-form-more summary::-webkit-details-marker { display: none; }
.sell-form-more[open] summary { margin-bottom: 12px; }

.sell-form-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .sell-form-fields { grid-template-columns: 1fr 1fr; }
  .sell-form-fields label:last-child { grid-column: 1 / -1; }
}
.sell-form-fields label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
}
.sell-form-fields input,
.sell-form-fields select,
.sell-form-fields textarea {
  padding: 10px 12px;
  font-size: 0.93rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  font-family: inherit;
  font-weight: 400;
}

.sell-form-trust {
  font-size: 0.76rem;
  color: var(--muted);
  margin: 10px 0 0;
  text-align: center;
  letter-spacing: 0.02em;
}

.sell-form-status {
  margin-top: 12px;
  text-align: center;
}

/* Screen-reader-only utility (used for address label on sell page) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Sell process — numbered cards */
.sell-steps {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .sell-steps { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .sell-steps { grid-template-columns: repeat(3, 1fr); }
}
.sell-step {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 0;
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.sell-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 999px;
  margin-bottom: 10px;
}
.sell-step h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--navy);
  font-weight: 600;
}
.sell-step p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}
.sell-step p a {
  color: var(--gold-dark);
  text-decoration: none;
  font-weight: 600;
}
.sell-step p a:hover { color: var(--navy); }

/* Agent card — photo + name + contact + slogan, between the form and the steps */
.sell-agent {
  display: flex;
  gap: 28px;
  align-items: center;
}
.sell-agent-photo {
  width: 140px;
  height: 140px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--mist);
  border: 4px solid var(--white);
  box-shadow:
    0 0 0 1px var(--line),
    var(--shadow-card);
  flex-shrink: 0;
}
.sell-agent-info { flex: 1; min-width: 0; }
.sell-agent-info .kicker { margin: 0 0 4px; }
.sell-agent-info h2 {
  margin: 0 0 10px;
  font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  color: var(--navy);
  letter-spacing: -0.01em;
}
.sell-agent-contact {
  font-size: 0.95rem;
  margin: 0 0 12px;
  font-weight: 600;
}
.sell-agent-contact a {
  color: var(--gold-dark);
  text-decoration: none;
}
.sell-agent-contact a:hover { color: var(--navy); }
.sell-agent-contact span { color: var(--muted); margin: 0 6px; }
.sell-agent-slogan {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text, var(--navy));
  line-height: 1.55;
  max-width: 46rem;
}
.sell-agent-slogan strong {
  color: var(--navy);
}
@media (max-width: 560px) {
  .sell-agent {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .sell-agent-photo { width: 120px; height: 120px; }
  .sell-agent-slogan { text-align: left; }
}

.calendar-placeholder {
  background: var(--white);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  color: var(--muted);
}

.calendly-embed {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  overflow: hidden;
}
.calendly-embed .calendly-inline-widget { width: 100%; }
.calendly-fallback {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--mist);
  text-align: center;
}
.calendly-fallback a { color: var(--navy); text-decoration: underline; }

.form-card {
  max-width: 560px;
}

.form-grid {
  display: grid;
  gap: 14px;
}

/* —— Inner pages —— */
.page-hero {
  padding: 48px 0 32px;
  background: linear-gradient(180deg, var(--blue-sky) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--line);
}

.page-hero.compact {
  padding-bottom: 24px;
}

.page-hero-banner {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 3px solid var(--white);
}

.page-hero h1 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.page-content {
  padding: 0 0 48px;
}

.page-content h2,
.prose h2 {
  color: var(--navy);
  margin: 32px 0 12px;
  font-size: 1.35rem;
}

.page-content p,
.page-content li,
.prose p,
.prose li {
  color: var(--black);
  max-width: 68ch;
}

.disclaimer {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.88rem;
  color: #78350f;
  margin: 24px 0;
}

.disclaimer-inline {
  font-size: 0.88rem;
  color: #78350f;
  background: #fffbeb;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 12px;
  border-left: 4px solid var(--gold);
}

.callout {
  background: var(--white);
  border-left: 4px solid var(--gold);
  padding: 18px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 24px 0;
  box-shadow: var(--shadow-card);
}

.magazine-badge {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 20px;
  margin: 20px 0;
}

.muted {
  color: var(--muted);
  font-size: 0.9rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.center {
  text-align: center;
}

.narrow {
  max-width: 520px;
  margin-inline: auto;
}

.contact-grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.page-hero-grid {
  display: grid;
  gap: 24px;
  align-items: center;
}

@media (min-width: 768px) {
  .page-hero-grid {
    grid-template-columns: 1fr auto;
  }
}

.page-photo {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  max-width: 360px;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  margin-inline: auto;
  border: 4px solid var(--white);
}

.prose {
  max-width: 68ch;
}

.prose ul {
  padding-left: 1.25rem;
}

.phase-note {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  margin: 12px 0;
}

.featured-card .link-arrow {
  display: block;
  margin-top: 12px;
  font-weight: 600;
  color: var(--gold-dark);
}

/* —— Footer —— */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.9);
  padding: 48px 0 28px;
  margin-top: 0;
}

/* Parallax-stars canvas injected by `initFooterStars()` in site.js.
   Slow-load guard removes it via `.footer-fx-off` on <html> when the user has
   reduced-motion / Save-Data / 2G connectivity. Footer content sits above it
   via the `.site-footer > .container` z-index rule below. */
.footer-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
html.footer-fx-off .footer-fx { display: none; }

.site-footer > .container {
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  gap: 28px;
}

/* Tablet: brand spans full row, 4 link columns underneath */
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-grid > .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Desktop: brand + 4 link columns in a single row */
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.4fr repeat(4, 1fr);
  }
  .footer-grid > .footer-brand {
    grid-column: auto;
  }
}

/* NOTE: .footer-grid--with-map layout rules live with the new footer block
   further down (search "Override the legacy single-row footer-grid"). */

/* —— MLS disclosure — collapsible. The summary line (always visible) carries
   the compliance-critical bits: "deemed reliable not guaranteed" + SDMLS IDX
   attribution + last-updated timestamp. The expand reveals the full
   regulatory fine print. Saves ~250-350px on mobile while staying compliant. */
.footer-mls-text[open] > summary .footer-mls-toggle::after { content: " ↑"; }
.footer-mls-text:not([open]) > summary .footer-mls-toggle::after { content: " ↓"; }
.footer-mls-text > summary {
  list-style: none;
  cursor: pointer;
  display: block;
}
.footer-mls-text > summary::-webkit-details-marker,
.footer-mls-text > summary::marker { display: none; }
.footer-mls-text .footer-mls-toggle {
  display: inline-block;
  margin-left: 6px;
  color: var(--gold-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  white-space: nowrap;
}
.footer-mls-text > p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: inherit;
  line-height: inherit;
}

.footer-brand img {
  margin-bottom: 14px;
  height: 52px;
  width: auto;
}

.site-footer a {
  color: var(--gold-soft);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.92rem;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
  color: var(--gold);
}

/* MLS / IDX disclaimer — regulatory boilerplate (mirrors the small print
   on Cardenas + Keegan Wetzel sites). Sits just above the .footer-legal
   bar. Visually quiet — small font, low-contrast white, with a tiny
   light-tile MLS logo on the left so the source is obvious without
   shouting. Wraps to column under 640px. */
.footer-mls {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  line-height: 1.45;
}
.footer-mls-logo {
  flex-shrink: 0;
  width: 84px;
  height: auto;
  display: block;
  /* Plain image as-is. Transparent PNG renders directly on the navy
     footer with no white tile, no glow, no brightness filter. */
}
.footer-mls-text { min-width: 0; }
.footer-mls-text p { margin: 0 0 6px; }
.footer-mls-text p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .footer-mls {
    flex-direction: column;
    gap: 10px;
    font-size: 0.66rem;
  }
  .footer-mls-logo { width: 64px; }
}

/* NAP is now embedded inline in the .footer-legal first line (Schema.org
   microdata via itemprop). Tiny tel link styling so it blends. */
.footer-legal a[itemprop="telephone"] {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.18);
}
.footer-legal a[itemprop="telephone"]:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 32px;
  padding-top: 18px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.35;
}

.footer-legal p {
  margin: 0 0 2px;
}

/* Built-by credit — slightly more muted than the surrounding legal text */
.footer-built-by {
  margin-top: 6px !important;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}
.footer-built-by a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.footer-built-by a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.site-footer h4 {
  color: var(--gold);
  margin: 0 0 12px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* —— Mobile sticky — GLASS variant: dark transparent bar + frosted blur,
   buttons are tinted-transparent with white text/icons. Cleaner, more modern
   than the prior opaque white bar. */
.mobile-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* z:135 sits above the .nav-backdrop (z:125) and the .nav-mobile drawer
     (z:130), so the bottom CTA bar paints sharp on top instead of being
     blurred by the backdrop when the mobile menu is open. */
  z-index: 135;
  display: flex;
  gap: 6px;
  padding: 8px max(6px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
  background: rgba(11, 26, 50, 0.18);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.mobile-sticky .btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 4px;
  font-size: clamp(0.56rem, 2vw, 0.66rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-radius: 12px;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: filter 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.mobile-sticky .btn:hover,
.mobile-sticky .btn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(0.94);
}

.mobile-sticky .btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* —— Per-button brand tints — semi-transparent on the glass bar so colors
   show through to brand recognition (iOS green / iMessage blue / WhatsApp /
   Google blue) but stay cohesive with the dark frosted backdrop. */
.btn-sticky-call {
  background: rgba(52, 199, 89, 0.68);              /* iOS green — solid-ish for stronger CTA */
  color: var(--white);
  border: 1.5px solid rgba(52, 199, 89, 0.95);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.btn-sticky-text {
  background: rgba(0, 122, 255, 0.68);              /* iMessage blue — solid-ish */
  color: var(--white);
  border: 1.5px solid rgba(0, 122, 255, 0.95);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.btn-sticky-whatsapp {
  background: rgba(37, 211, 102, 0.68);             /* WhatsApp green — solid-ish */
  color: var(--white);
  border: 1.5px solid rgba(37, 211, 102, 0.95);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.btn-sticky-book {
  background: rgba(255, 255, 255, 0.22);            /* still light, lets icon glow on the dark bar */
  color: var(--white);
  border: 1.5px solid rgba(66, 133, 244, 0.95);     /* Google Calendar blue border */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.btn-sticky-book:hover,
.btn-sticky-book:focus-visible {
  border-color: rgba(66, 133, 244, 1);
  filter: none;
  background: rgba(255, 255, 255, 0.32);
}
.mobile-sticky .btn-icon { color: var(--white); }
/* BOOK icon pops a touch whiter than the rest via a subtle glow. */
.btn-sticky-book .btn-icon {
  color: #ffffff;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
}

/* Text/SMS button — solid carolina blue; sits between green Call and outline Book in the sticky bar.
   `sms:` URL opens the native Messages app on iOS/Android. */
.btn-sticky-text {
  background: var(--carolina);
  color: var(--white);
  border: 2px solid #3a8fc9;
}

.btn-sticky-text:hover {
  background: #3a8fc9;
  border-color: #2f7eb8;
  color: var(--white);
}

/* —— Split Text + WhatsApp button — single visual unit with a "/" diagonal
   divider. Upper-left triangle = Text (carolina blue), lower-right triangle
   = WhatsApp (deeper brand green). Each half is its own anchor with
   independent tap/hover. Replaces .btn-sticky-text in the sticky bar.
   Content in each half centers within the triangle's "fat" optical area
   via asymmetric padding, with subtle vertical gradient + drop hover. */
.btn-sticky-textwa {
  position: relative;
  flex: 1;
  display: block;
  min-height: 48px;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.btn-sticky-textwa > a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  color: var(--white);
  font-weight: 600;
  font-size: clamp(0.62rem, 2.3vw, 0.72rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.btn-sticky-textwa > a:hover { filter: brightness(1.08); }
.btn-sticky-textwa > a:active { transform: scale(0.97); }
.btn-sticky-textwa .btn-sticky-text-half {
  background: linear-gradient(160deg, #5fb5e3 0%, var(--carolina) 60%, #3a8fc9 100%);
  /* Upper-left triangle: TL → TR → BL */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  /* Content centers in the upper-left optical area of the triangle. */
  padding: 0 38% 32% 0;
}
.btn-sticky-textwa .btn-sticky-wa-half {
  background: linear-gradient(160deg, #2cd76a 0%, #1fb95a 60%, #178d44 100%);
  /* Lower-right triangle: TR → BR → BL */
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  /* Content centers in the lower-right optical area of the triangle. */
  padding: 32% 0 0 38%;
}
.btn-sticky-textwa .btn-sticky-text-half .btn-icon,
.btn-sticky-textwa .btn-sticky-wa-half  .btn-icon { width: 14px; height: 14px; flex-shrink: 0; }
/* Crisp thin white diagonal divider on top of both halves. */
.btn-sticky-textwa::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent 49.4%, rgba(255,255,255,0.95) 49.4%, rgba(255,255,255,0.95) 50.6%, transparent 50.6%);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
/* Subtle soft inner shadow at the rounded corners for depth. */
.btn-sticky-textwa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.12);
  pointer-events: none;
  z-index: 2;
}

/* Sticky CTA attention motion — color-matched pulsing glow on the 3 colored
   buttons (Call, Text, WhatsApp). Book stays "blank" — no glow. Wobble fires
   on Call at 2s then every 8s via JS in site.js. */
@keyframes stickyGlowGreen {
  0%, 100% { box-shadow: 0 4px 18px rgba(52, 199, 89, 0.45), 0 0 0 rgba(52, 199, 89, 0); }
  50%      { box-shadow: 0 4px 32px rgba(52, 199, 89, 0.70), 0 0 60px rgba(52, 199, 89, 0.30); }
}

@keyframes stickyGlowBlue {
  0%, 100% { box-shadow: 0 4px 18px rgba(0, 122, 255, 0.45), 0 0 0 rgba(0, 122, 255, 0); }
  50%      { box-shadow: 0 4px 32px rgba(0, 122, 255, 0.70), 0 0 60px rgba(0, 122, 255, 0.30); }
}

@keyframes stickyGlowWhatsapp {
  0%, 100% { box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45), 0 0 0 rgba(37, 211, 102, 0); }
  50%      { box-shadow: 0 4px 32px rgba(37, 211, 102, 0.70), 0 0 60px rgba(37, 211, 102, 0.30); }
}

@keyframes stickyWobble {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.08); }
  30%  { transform: scale(0.96); }
  45%  { transform: scale(1.04); }
  60%  { transform: scale(0.98); }
  75%  { transform: scale(1.02); }
  90%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}

/* .btn-sticky-call — static glow only (no pulse) per client request (2026-06-18) */
.btn-sticky-call {
  box-shadow:
    0 4px 28px rgba(52, 199, 89, 0.60),
    0 0 42px rgba(52, 199, 89, 0.22);
}
.btn-sticky-text     { animation: stickyGlowBlue     2.5s ease-in-out infinite; }
.btn-sticky-whatsapp { animation: stickyGlowWhatsapp 2.5s ease-in-out infinite; }
/* .btn-sticky-book — intentionally no glow ("blank" per spec) */

.btn-sticky-call.is-wobbling {
  animation: stickyWobble 0.6s ease-in-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn-sticky-call,
  .btn-sticky-text,
  .btn-sticky-whatsapp,
  .btn-sticky-call.is-wobbling {
    animation: none;
  }
}

@media (min-width: 900px) {
  .mobile-sticky {
    display: none;
  }
  body.has-sticky {
    padding-bottom: 0;
  }
}

/* —— Option 2 — 3-button glass sticky bar (Call · Message · Book).
   Default global behavior on every page except the v2 prototype (which
   uses .cta-switcher to flip between variants). The body.cta-sheet class
   is auto-applied by site.js on non-v2 pages. */
body.cta-sheet .mobile-sticky .btn-sticky-text,
body.cta-sheet .mobile-sticky .btn-sticky-whatsapp { display: none; }
.mobile-sticky .btn-sticky-message { display: none; }
body.cta-sheet .mobile-sticky .btn-sticky-message {
  display: inline-flex;
  background: rgba(0, 122, 255, 0.68);
  color: var(--white);
  border: 1.5px solid rgba(0, 122, 255, 0.95);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.cta-sheet .mobile-sticky .btn-sticky-message:hover,
body.cta-sheet .mobile-sticky .btn-sticky-message:focus-visible {
  background: rgba(0, 122, 255, 0.82);
  border-color: rgba(0, 122, 255, 1);
}
body.cta-sheet .mobile-sticky .btn-sticky-message .btn-icon { color: var(--white); }
.btn-sticky-message .btn-icon-pair {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.btn-sticky-message .btn-icon-slash {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.55;
}
/* Bottom-sheet panel — slides up on Message tap, white frosted glass */
.msg-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.msg-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 26, 50, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 199;
}
body.msg-sheet-open .msg-sheet { transform: translateY(0); pointer-events: auto; }
body.msg-sheet-open .msg-sheet-backdrop { opacity: 1; pointer-events: auto; }
body.msg-sheet-open { overflow: hidden; }
.msg-sheet-panel {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28);
}
.msg-sheet-grab {
  width: 40px;
  height: 4px;
  background: rgba(11, 26, 50, 0.30);
  border-radius: 2px;
  margin: 0 auto 14px;
}
.msg-sheet-title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0 0 12px;
}
.msg-sheet-options { display: flex; gap: 10px; }
.msg-sheet-options a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.86rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--white);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.msg-sheet-options .opt-text {
  background: rgba(0, 122, 255, 0.72);
  border: 1.5px solid rgba(0, 122, 255, 0.95);
}
.msg-sheet-options .opt-whatsapp {
  background: rgba(37, 211, 102, 0.72);
  border: 1.5px solid rgba(37, 211, 102, 0.95);
}
.msg-sheet-options svg { width: 20px; height: 20px; flex-shrink: 0; }

/* —— Floating dual-CTA pill — Text / WhatsApp (mobile + tablet only) ——
   Bottom-right pill with two independent taps: text bubble → SMS,
   WhatsApp icon → wa.me. Navy bg for brand restraint. Replaced the
   old 4-button .mobile-sticky bar site-wide. */
.floating-cta {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  /* Match .mobile-sticky z:135 — above .nav-backdrop (z:125) and drawer
     (z:130) so the floating Text/WhatsApp pill stays sharp when the
     mobile menu is open. */
  z-index: 135;
  display: inline-flex;
  align-items: center;
  background: var(--navy);
  color: var(--white);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(11, 26, 50, 0.32);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.floating-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(11, 26, 50, 0.42);
}
.floating-cta-half {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
  transition: background 0.18s ease;
}
.floating-cta-half:hover { background: rgba(255,255,255,0.10); }
.floating-cta-half svg { width: 24px; height: 24px; }
.floating-cta-divider {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.3rem;
  color: rgba(255,255,255,0.55);
  line-height: 1;
  pointer-events: none;
  padding: 0 1px;
}
/* Hide on desktop — same breakpoint as .mobile-sticky */
@media (min-width: 900px) {
  .floating-cta { display: none !important; }
}

/* =========================================================================
   CONNECT / QR LANDING — digital business card layout
   Modeled on the IMG_8530 vibe Agustin's been sharing: navy band, big
   name, prominent contact info, trust logos, plus a QR for screenshot
   sharing. Mobile-first (most scans land here on phones).
   ========================================================================= */
.connect-page {
  background: var(--navy-deep);
  min-height: 100vh;
  padding: 10px 14px 24px;
  /* Stop iOS Safari from injecting a horizontal scroll on rotation */
  overflow-x: clip;
}
.connect-page .connect-main {
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- The card itself (this is what screenshots well) ---- */
.vcard-card {
  background: var(--white);
  border-radius: 18px;
  padding: 16px 18px 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
  border-top: 3px solid var(--gold);
  text-align: center;
}

/* Photo: anchored top-center, neutral mat behind it so the headshot
   sits inside a soft tonal halo (matches the IMG_8530 gray gradient). */
.vcard-photoframe {
  width: 124px;
  height: 124px;
  margin: 0 auto 10px;
  border-radius: 0;
  background: transparent;
  padding: 0;
  border: 4px solid var(--navy);
  box-shadow: 0 0 0 2px #d8dee6, 0 6px 16px rgba(11, 26, 50, 0.18);
  display: block;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
button.vcard-photoframe { font: inherit; }
.vcard-photoframe:hover {
  transform: scale(1.02);
  box-shadow: 0 0 0 2px #c2cad6, 0 10px 22px rgba(11, 26, 50, 0.28);
}
.vcard-photoframe:focus-visible {
  outline: 3px solid #007aff;
  outline-offset: 4px;
}
.vcard-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  display: block;
}

.vcard-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 2px;
  line-height: 1.1;
}
.vcard-title {
  margin: 0 0 2px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.vcard-realtor sup { font-size: 0.62em; vertical-align: super; }
.vcard-divider { margin: 0 6px; opacity: 0.5; }
.vcard-dre { color: var(--navy); }
.vcard-tagline {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink, #0b1a32);
  font-weight: 500;
}

/* Quick row: Call · Text · Email — equal columns, tap targets */
.vcard-quick {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 0 0 22px;
}
.vcard-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  min-height: 64px;
  text-align: center;
}
.vcard-quick-btn:hover {
  background: var(--white);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.vcard-quick-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.vcard-quick-icon { color: var(--gold); display: block; }
.vcard-quick-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
.vcard-quick-value {
  font-size: 0.7rem;
  color: var(--navy);
  font-weight: 600;
  display: none;
}
@media (min-width: 380px) {
  .vcard-quick-value { display: block; }
  .vcard-quick-btn:last-child .vcard-quick-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* QR section */
.vcard-qr {
  margin: 0 0 20px;
  padding: 18px 12px 14px;
  background: var(--mist);
  border-radius: 14px;
  border: 1px solid var(--line);
}
.vcard-qr-prompt {
  margin: 0 0 10px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
}
.vcard-qr-img {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 8px;
  background: var(--white);
  padding: 8px;
  box-shadow: 0 2px 12px rgba(11, 26, 50, 0.06);
}
.vcard-qr-url {
  margin: 10px 0 0;
  font-size: 0.86rem;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Trust band — sits flush UNDER the white card, navy bg so white logos
   render properly (EHO + Realtor PNGs are white-on-transparent). Mirrors
   the IMG_8530 "compliance bar at the bottom of the business card" look. */
.vcard-trust-band {
  margin-top: -18px;                    /* tuck under the white card's rounded bottom */
  margin-left: 0;
  margin-right: 0;
  padding: 22px 14px 12px;
  background: var(--navy);
  border-radius: 18px;                  /* matches card */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 0;                           /* behind the white card visually */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.vcard-trust-row {
  width: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 12px;
}
.vcard-trust-row--brands     { grid-template-columns: 1fr 1fr; }
.vcard-trust-row--compliance { grid-template-columns: 1fr 1fr 1fr; }
.vcard-trust-row--lang       { margin-top: 0; display: flex; justify-content: center; }
/* Each logo fills the cell up to its own intrinsic ratio */
.vcard-trust-row .vcard-trust-logo {
  width: 100%;
  height: auto;
  max-height: 48px;
  object-fit: contain;
}
/* Push the white card to sit ABOVE the band so the seam is the card's
   curved bottom edge over the navy. */
.vcard-card { position: relative; z-index: 1; }

.vcard-trust-logo {
  display: block;
  width: auto;
  object-fit: contain;
  opacity: 0.92;
}
.vcard-trust-logo--eho     { height: 30px; }
.vcard-trust-logo--realtor { height: 30px; }
.vcard-trust-logo--mls     { height: 18px; }
/* SDMLS wordmark needs a small light tile so the dark text reads against navy */
.vcard-trust-logo--mls {
  background: rgba(255, 255, 255, 0.95);
  padding: 3px 6px;
  border-radius: 3px;
  height: auto;
  max-height: 22px;
}
/* FCRE inverted logo is white-on-transparent — sits on navy band directly */
.vcard-trust-logo--fcre    { height: 30px; }
/* Google Reviews badge is colored on white — give it a light tile */
.vcard-trust-logo--google {
  background: rgba(255, 255, 255, 0.95);
  padding: 3px 6px;
  border-radius: 3px;
  height: auto;
  max-height: 26px;
}
.vcard-bilingual {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-weight: 700;
  padding: 6px 14px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.10);
  font-style: italic;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
button.vcard-bilingual:hover,
button.vcard-bilingual:focus-visible {
  background: var(--gold);
  color: var(--navy);
  outline: none;
}

/* ---- Action buttons (below the card, full-width) ---- */
.vcard-actions {
  display: grid;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Mirrors the mobile-menu CTA system:
   - default action  = white bg + navy text + Google-blue border  (.btn-mobile-book)
   - primary action  = iOS blue solid + white text                 (.btn-mobile-property)
   One primary, the rest secondary. */
.vcard-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--white);
  color: var(--navy);
  border: 2px solid #4285f4;
  box-shadow: 0 2px 8px rgba(26, 41, 66, 0.06);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  min-height: 42px;
}
.vcard-action:hover {
  background: rgba(66, 133, 244, 0.06);
  border-color: #3367d6;
  color: var(--navy-deep);
  transform: translateY(-1px);
}
.vcard-action:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.vcard-action-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4285f4;
}
/* Schedule CTA — iOS blue solid, matches .btn-mobile-property */
.vcard-action--schedule {
  background: #007aff;
  color: var(--white);
  border-color: #0066d6;
  box-shadow: 0 2px 10px rgba(0, 122, 255, 0.30);
}
.vcard-action--schedule:hover {
  background: #0066d6;
  border-color: #0052ad;
  color: var(--white);
}
.vcard-action--schedule .vcard-action-icon { color: var(--white); }

/* Primary CTA — gold/yellow solid (Save my contact) */
.vcard-action--primary {
  background: var(--gold);
  color: var(--navy);
  border-color: #b8962b;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.32);
}
.vcard-action--primary:hover {
  background: #e6c14a;
  border-color: #a78527;
  color: var(--navy);
}
.vcard-action--primary .vcard-action-icon { color: var(--navy); }

/* Call CTA — iOS green solid, matches .btn-mobile-call */
.vcard-action--call {
  background: #34c759;
  color: var(--white);
  border-color: #28a745;
  box-shadow: 0 2px 10px rgba(52, 199, 89, 0.32);
}
.vcard-action--call:hover {
  background: #28a745;
  border-color: #1f7a32;
  color: var(--white);
}
.vcard-action--call .vcard-action-icon { color: var(--white); }

/* Simple — minimal white pill, navy text, light gray edge. No blue accent. */
.vcard-action--simple {
  background: var(--white);
  color: var(--navy);
  border: 1px solid #e1e6ed;
  box-shadow: none;
}
.vcard-action--simple:hover {
  background: #f4f6fa;
  border-color: #c9d1dc;
  color: var(--navy-deep);
}
.vcard-action--simple .vcard-action-icon { color: var(--navy); }

/* Outline variants — white pill with a brand-accent border. */
.vcard-action--outline-gold {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--gold);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.14);
}
.vcard-action--outline-gold:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: #b8962b;
  color: var(--navy-deep);
}
.vcard-action--outline-gold .vcard-action-icon { color: var(--gold); }

.vcard-action--outline-blue {
  background: var(--white);
  color: var(--navy);
  border: 2px solid #007aff;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.14);
}
.vcard-action--outline-blue:hover {
  background: rgba(0, 122, 255, 0.06);
  border-color: #0066d6;
  color: var(--navy-deep);
}
.vcard-action--outline-blue .vcard-action-icon { color: #007aff; }

/* ---- Lead form ---- */
.vcard-form-wrap {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 18px 16px;
}
.vcard-form-title {
  margin: 0 0 4px;
  font-size: 1.1rem;
  color: var(--white);
}
.vcard-form-sub {
  margin: 0 0 14px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.7);
}
.vcard-form { display: grid; gap: 10px; }
.vcard-form label {
  display: grid;
  gap: 4px;
}
.vcard-form label > span:not(.vcard-form-checkbox span) {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
}
.vcard-form input[type="text"],
.vcard-form input[type="email"],
.vcard-form input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.vcard-form input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.10);
}
.vcard-form input::placeholder { color: rgba(255, 255, 255, 0.4); }
.vcard-form-checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}
.vcard-form-checkbox input { margin-top: 3px; }
.vcard-form-checkbox span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}
.vcard-form-submit {
  width: 100%;
  margin-top: 6px;
  padding: 14px 16px;
  background: var(--gold);
  color: var(--navy);
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.vcard-form-submit:hover { background: var(--white); }
.vcard-form .form-status {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
}
.vcard-form .form-status.ok { color: var(--gold); }
.vcard-form .form-status.error { color: #ffb4b4; }

/* ---- Social row ---- */
.vcard-social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 0;
}
.vcard-social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.vcard-social-row a:hover {
  color: var(--gold);
  border-color: var(--gold);
  transform: translateY(-1px);
}

/* ---- Bottom legal ---- */
.vcard-legal {
  margin: 0;
  font-size: 0.7rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}

/* Newsletter <button> in the menu — match anchor sibling styling */
button.vcard-action {
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

/* ---- Newsletter dialog (popup) ---- */
.vcard-dialog {
  border: 0;
  padding: 0;
  border-radius: 18px;
  background: var(--navy-deep);
  color: var(--white);
  max-width: 420px;
  width: calc(100vw - 32px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.vcard-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
.vcard-dialog-inner {
  padding: 22px 20px 20px;
  position: relative;
}
.vcard-dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.vcard-dialog-close:hover {
  background: var(--gold);
  color: var(--navy);
}
.vcard-dialog-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---- Portrait lightbox (zoom + QR) ---- */
.vcard-lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  color: var(--white);
}
.vcard-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(4px);
}
.vcard-lightbox-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 56px 20px 32px;
  box-sizing: border-box;
}
.vcard-lightbox-photo {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: center top;
  border: 4px solid var(--navy);
  box-shadow: 0 0 0 2px #d8dee6, 0 18px 48px rgba(0, 0, 0, 0.55);
}
.vcard-lightbox-qr {
  width: 200px;
  height: 200px;
  background: var(--white);
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.vcard-lightbox-close {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s ease;
}
.vcard-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.vcard-lightbox-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (max-height: 640px) {
  .vcard-lightbox-photo { max-width: 280px; }
  .vcard-lightbox-qr { width: 160px; height: 160px; }
}

/* =========================================================================
   /qr — print/scan card. Strict minimalism: logo + portrait + QR.
   No nav, no footer, no anything else. Designed to look right in a phone
   screenshot AND when printed onto a business card or signage.
   ========================================================================= */
.qr-page {
  background: var(--navy-deep);
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
}
.qr-main {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.qr-logo {
  width: 78%;
  height: auto;
  max-width: 280px;
  display: block;
}
.qr-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: center top;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, #1a2c4d 0%, #0b1a32 100%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.qr-code {
  width: 78%;
  height: auto;
  max-width: 280px;
  background: var(--white);
  padding: 14px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  display: block;
}
@media print {
  .qr-page { background: #fff; padding: 0; }
  .qr-portrait { box-shadow: none; }
  .qr-code { box-shadow: none; }
}

/* =========================================================================
   LEGACY .connect-* styles (kept for backward compat if anything still
   targets them — connect.html now uses the .vcard-* system above).
   ========================================================================= */
.connect-page-legacy {
  background: var(--navy-deep);
  min-height: 100vh;
  padding: 24px 16px 48px;
}

.connect-page .connect-main {
  max-width: 440px;
  margin: 0 auto;
}

.connect-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--gold);
}

.connect-logo {
  margin: 0 auto 16px;
  height: 48px;
  width: auto;
}

.connect-card h1 {
  margin: 12px 0 6px;
  color: var(--navy);
  font-size: 1.5rem;
}

.connect-tagline {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 20px;
}

.connect-block {
  text-align: left;
  margin-bottom: 16px;
}

.connect-block h2 {
  font-size: 1rem;
  color: var(--navy);
  margin: 0 0 6px;
}

.connect-actions {
  display: grid;
  gap: 12px;
}

.connect-btn {
  text-decoration: none;
}

.connect-social {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  font-size: 0.88rem;
  font-weight: 600;
}

.connect-legal {
  margin-top: 20px;
  font-size: 0.72rem;
  color: var(--muted);
}

.connect-hero {
  text-align: center;
  padding: 32px 0;
}

.connect-photo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 16px;
  border: 4px solid var(--gold);
}

.qr-actions {
  display: grid;
  gap: 14px;
  max-width: 420px;
  margin: 24px auto 0;
}

.qr-card {
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}

article.card[id] {
  scroll-margin-top: 110px;
}

/* —— Testimonials page —— */
.testimonials-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 16px 0 0;
  font-size: 1rem;
}

.testimonials-rating-stars {
  color: var(--gold);
  letter-spacing: 0.08em;
}

.testimonials-draft-note {
  background: var(--mist);
  border: 1px solid var(--navy);
  border-radius: 0;
  padding: 16px 20px;
  margin: 0 0 24px;
  font-size: 0.92rem;
  color: var(--navy);
  line-height: 1.55;
}

/* Twana-style: 3 separated square tiles — GBP-driven in production */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
}

@media (min-width: 768px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.testimonial-tile {
  /* White card with scroll-driven glass effect.
     `--scroll-p` (0 → 1) is updated by bindTestimonialsScrollParallax() in testimonials.page.js
     as the tile travels through the viewport. Drives sheen position, glare opacity, and
     a subtle parallax lift — all reversible on scroll-up. */
  --scroll-p: 0;

  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 24px 22px 20px;
  min-height: 320px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 16px rgba(26, 41, 66, 0.08);

  /* Subtle parallax — tile drifts up ~10px as it moves through the viewport, then back.
     `(--scroll-p - 0.5)` maps 0→-0.5, 0.5→0, 1→+0.5, multiplied by -20px → ±10px. */
  transform: translateY(calc((var(--scroll-p) - 0.5) * -20px));

  /* Reveal fade-in transitions still cover opacity/translateY at first appearance;
     during scroll, transform is driven by CSS var (no transition, smooth at 60fps). */
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* Static glare anchored top-left — soft diagonal wash like overhead light hitting the
   corner of a polished surface. Intensifies in the middle of the viewport scroll. */
.testimonial-tile::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 78%;
  height: 65%;
  background:
    radial-gradient(
      circle at 22% 18%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0) 38%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 65%
    );
  pointer-events: none;
  z-index: 0;
  /* Glare brightens at viewport center (peak), dims at the edges. The peak math is
     pre-computed in JS as `--glare-peak` (0 at entry/exit, 1 at center) to keep this
     calc simple and broadly compatible. */
  opacity: calc(0.55 + var(--glare-peak, 0) * 0.45);
}

/* Moving sheen sweep — driven by --scroll-p. As you scroll the tile from the bottom of
   viewport to the top, the highlight glides across left-to-right. Scroll back up and it
   sweeps back. Independent of reveal/hover but harmonizes with both. */
.testimonial-tile::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 50%;
  background: linear-gradient(
    100deg,
    transparent 28%,
    rgba(255, 255, 255, 0.85) 48%,
    rgba(255, 255, 255, 0.95) 52%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
  /* Sheen X position interpolates from -70% (offscreen left) at scroll-p=0
     through to +220% (offscreen right) at scroll-p=1. */
  transform:
    skewX(-14deg)
    translateX(calc(-70% + (var(--scroll-p) * 290%)));
  /* Tiny smoothing so micro-scroll judder doesn't feel jittery (still mostly real-time). */
  transition: transform 0.12s linear;
}

.testimonial-tile > * {
  position: relative;
  z-index: 1;
}

/* Hover gives an extra fast sweep on top of the scroll-driven one, plus shadow lift. */
.testimonial-tile:hover::before {
  transform: skewX(-14deg) translateX(220%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonial-tile:hover {
  border-color: rgba(26, 41, 66, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 28px rgba(26, 41, 66, 0.14);
}

/* Respect reduced-motion preferences — keep the static glare but skip scroll-driven motion. */
@media (prefers-reduced-motion: reduce) {
  .testimonial-tile {
    transform: none;
  }
  .testimonial-tile::before {
    transform: skewX(-14deg) translateX(80%);
    transition: none;
  }
}

/* Reveal-on-scroll: only when JS has confirmed IntersectionObserver is available and has
   added `.js-reveal-active` to the grid. Tiles then start hidden + offset; observer adds
   `.is-revealed` per tile with a staggered transitionDelay set inline. */
.testimonials-grid.js-reveal-active .testimonial-tile {
  opacity: 0;
  transform: translateY(28px);
}

.testimonials-grid.js-reveal-active .testimonial-tile.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-grid.js-reveal-active .testimonial-tile {
    opacity: 1;
    transform: none;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
  }
}

/* Sample tiles share the same white card look as production tiles. */
.testimonial-tile[data-sample="true"] {
  background: var(--white);
}

.testimonial-tile-stars {
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  margin: 0 0 14px;
  flex-shrink: 0;
}

.testimonial-tile-quote {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1;
}

.testimonial-tile-text {
  margin: 0;
  font-size: clamp(0.88rem, 1.6vw, 1rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--black);
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

.testimonial-tile-text::before {
  content: "\201C";
}

.testimonial-tile-text::after {
  content: "\201D";
}

.testimonial-tile-author {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.testimonial-tile-author strong {
  color: var(--navy);
  font-weight: 600;
}

.testimonials-gbp-intent {
  margin: 20px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 48rem;
}

.testimonials-gbp-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 0;
  margin-right: 6px;
}

/* —— Live Google reviews (testimonials.places.js) —— */

/* Per-tile footer: timestamp + "Read full review on Google" link, below the author rule. */
.testimonial-tile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 10px;
}

.testimonial-tile-time {
  font-size: 0.78rem;
  color: var(--muted);
}

.testimonial-tile-google-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.testimonial-tile-google-link:hover {
  border-bottom-color: currentColor;
}

.testimonial-google-g {
  flex-shrink: 0;
}

/* Live-sync disclosure line below the tile row. */
.testimonials-live-disclosure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* "See all reviews on Google" CTA — matches the site's secondary button feel. */
.testimonials-google-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 18px;
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: 0;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.testimonials-google-cta:hover {
  background: var(--navy);
  color: var(--white);
}

/* Loading skeleton — gentle pulse on tiles while the SDK loads. Activated by JS adding
   `.is-loading` to the grid; removed once tiles paint. Honors reduced-motion. */
.testimonials-grid.is-loading .testimonial-tile {
  animation: testimonials-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes testimonials-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-grid.is-loading .testimonial-tile {
    animation: none;
  }
}

/* === Testimonials — visually-hidden helper (alias of .sr-only) === */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Testimonials trust stats (hero) === */
.testimonials-trust-stats {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.testimonials-trust-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonials-trust-stats strong {
  font-size: 24px;
  line-height: 1.1;
  color: var(--navy);
  font-weight: 700;
}

.testimonials-trust-stats span {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (min-width: 640px) {
  .testimonials-trust-stats {
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap;
  }
}

/* === Testimonials trust strip (credentials) === */
.trust-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 28px;
}

.trust-strip > li {
  display: flex;
  align-items: center;
}

.trust-strip img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.trust-strip .trust-text {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.trust-strip .trust-text strong {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 700;
}

.trust-strip .trust-text span {
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 600px) {
  .trust-strip {
    gap: 18px 20px;
  }
  .trust-strip .trust-text {
    flex: 1 1 calc(50% - 20px);
  }
}

/* === Testimonials case highlights === */
.case-highlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0 0 28px;
}

@media (min-width: 768px) {
  .case-highlight-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.case-highlight-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-highlight-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
}

.case-highlight-quote {
  margin: 0;
  color: var(--navy);
  font-size: 1.02rem;
  line-height: 1.5;
  flex: 1;
}

.case-highlight-link {
  margin: 0;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}

.case-highlight-link:hover {
  border-bottom-color: currentColor;
}

.case-highlight-footer {
  margin: 0;
  text-align: center;
}

/* === Testimonials conversion ladder === */
.conversion-ladder-section .ladder-tier {
  margin-top: 32px;
}

.ladder-tier h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 1.2rem;
}

.ladder-tier > p {
  margin: 0 0 16px;
  color: var(--muted);
  max-width: 62ch;
}

.ladder-tier--primary {
  border-top: 3px solid var(--gold);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  padding: 24px 22px;
}

.ladder-quick-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 560px) {
  .ladder-quick-buttons {
    flex-direction: row;
  }
}

.lead-form--inline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.lead-form--inline input[type="email"] {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  font-size: 1rem;
}

.lead-form--inline .form-status {
  flex-basis: 100%;
  margin: 0;
}

@media (min-width: 560px) {
  .lead-form--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .lead-form--inline .btn {
    flex: 0 0 auto;
  }
}

.form-notice--mini {
  margin-top: 10px;
  font-size: 0.78rem;
}

.ladder-call-anchor {
  margin: 32px 0 0;
  text-align: center;
  font-size: 1.15rem;
}

.ladder-call-anchor a {
  color: var(--navy);
  text-decoration: none;
  display: inline-block;
  padding: 8px 4px;
}

.ladder-call-anchor strong {
  color: var(--gold-dark);
  font-size: 1.3rem;
}

.map-listings-grid {
  display: grid;
  gap: 20px;
  align-items: stretch;
}

@media (min-width: 900px) {
  .map-listings-grid {
    grid-template-columns: minmax(280px, 38%) 1fr;
    min-height: 420px;
  }
}

.map-listings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

.map-listing-item {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.map-listing-item:hover,
.map-listing-item[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: var(--shadow-card);
}

.map-listing-item img {
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.map-listing-price {
  display: block;
  font-weight: 600;
  color: var(--navy);
  font-size: 1rem;
}

.map-listing-meta {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

.map-listings-map {
  min-height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.map-listings-map iframe {
  width: 100%;
  flex: 1;
  min-height: 360px;
  border: 0;
}

.map-listings-note {
  margin: 0;
  padding: 10px 14px;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--mist);
  border-top: 1px solid var(--line);
}

.search-filters-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .search-filters-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .search-filters-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.search-filters label span {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);
  margin-bottom: 6px;
}

.search-filters select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
}

.search-filters-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkbox-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 12px 0;
}

.checkbox-label input {
  margin-top: 3px;
  flex-shrink: 0;
}

/* —— Financing Options page —— */
.finance-solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.finance-solutions-copy h2 { margin-top: 6px; }
.finance-solutions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}
.finance-solutions-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  border-left: 3px solid var(--gold);
}
.finance-solutions-no {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.finance-solutions-list strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 4px;
}
.finance-solutions-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.finance-property-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.finance-property-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 28px 22px;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.finance-property-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 26, 50, 0.08);
}
.finance-property-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: rgba(196, 162, 79, 0.12);
  color: var(--gold);
  margin-bottom: 14px;
}
.finance-property-card h3 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.finance-property-card p {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.finance-form-shell {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.finance-form-copy h2 { margin-top: 6px; }
.finance-form-trust {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}
.finance-form-trust li {
  padding-left: 24px;
  position: relative;
  font-size: 0.95rem;
  color: var(--ink);
}
.finance-form-trust li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
.finance-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  padding: 32px;
  border-radius: 0;
}
.finance-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
.finance-form-row label { margin-bottom: 0; }
.finance-form > label { margin-bottom: 14px; display: block; }
.finance-form-consent {
  margin: 4px 0 16px;
  background: var(--mist);
  padding: 12px 14px;
  border: 1px solid var(--line);
}
.finance-form-consent span { font-size: 0.85rem; }

.finance-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 28px;
}
.finance-step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 28px 24px;
  position: relative;
}
.finance-step-no {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
}
.finance-step h3 {
  font-size: 1.1rem;
  margin: 0 0 8px;
}
.finance-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .finance-solutions-grid,
  .finance-form-shell {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .finance-property-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .finance-steps {
    grid-template-columns: 1fr;
  }
  .finance-form-row {
    grid-template-columns: 1fr;
  }
  .finance-form { padding: 22px; }
}
@media (max-width: 520px) {
  .finance-property-grid {
    grid-template-columns: 1fr;
  }
}

/* —— Video Gallery page (Emerson-pattern) —— */
.vg-section h2 { font-family: var(--font-heading); letter-spacing: 0.04em; }
.vg-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: start;
}
.vg-player { display: flex; flex-direction: column; gap: 16px; }
.vg-player-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b1a32;
  overflow: hidden;
}
.vg-player-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vg-player-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0b1a32 0%, #163255 100%);
  color: var(--white);
  padding: 28px;
  text-align: center;
}
.vg-player-empty-inner { max-width: 460px; }
.vg-player-empty-inner svg { color: var(--gold); margin-bottom: 12px; }
.vg-player-empty-inner p { margin: 0 0 8px; }
.vg-player-empty-inner .muted { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; }
.vg-player-empty-inner a { color: var(--gold); text-decoration: underline; }
.vg-player-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin: 0;
  min-height: 1.4em;
}

.vg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid var(--line);
  background: var(--white);
}
.vg-list::-webkit-scrollbar { width: 6px; }
.vg-list::-webkit-scrollbar-thumb { background: rgba(196, 162, 79, 0.5); border-radius: 0; }
.vg-list::-webkit-scrollbar-track { background: transparent; }

.vg-item { border-bottom: 1px solid var(--line); }
.vg-item:last-child { border-bottom: 0; }
.vg-item.is-active { background: rgba(196, 162, 79, 0.08); border-left: 3px solid var(--gold); }
.vg-item-btn {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background 0.18s ease;
}
.vg-item-btn:hover { background: rgba(196, 162, 79, 0.06); }
.vg-item.is-active .vg-item-btn:hover { background: rgba(196, 162, 79, 0.12); }

.vg-item-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #0b1a32 0%, #163255 100%) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vg-item-play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  padding-left: 2px;
  opacity: 0.9;
}
.vg-item-coming {
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 8px;
}
.vg-item-body { min-width: 0; }
.vg-item-title {
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin: 0 0 4px;
  line-height: 1.3;
  font-family: var(--font-heading);
}
.vg-item-caption {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vg-item.is-active .vg-item-caption { display: none; }

.vg-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.vg-view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.88rem;
  font-weight: 600;
}
.vg-view-all svg { color: #ff0000; }

@media (max-width: 900px) {
  .vg-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .vg-list { max-height: 480px; }
}
@media (max-width: 520px) {
  .vg-item-btn {
    grid-template-columns: 80px 1fr;
    gap: 10px;
    padding: 10px;
  }
  .vg-item-title { font-size: 0.85rem; }
  .vg-item-caption { font-size: 0.78rem; }
}

/* —— Case Studies dropdown — small fixes for nested Soon badges —— */
.nav-dropdown--cases .nav-dropdown-menu .nav-soon-badge {
  font-size: 0.62rem;
  margin-left: 6px;
  vertical-align: middle;
}
.nav-mobile-cases-panel .nav-soon-badge {
  font-size: 0.62rem;
  margin-left: 6px;
  vertical-align: middle;
}

/* —— FAQs page —— */
.faq-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}
.faq-nav {
  position: sticky;
  top: 88px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  padding: 20px 22px;
}
.faq-nav-label {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.faq-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: faq-cat;
}
.faq-nav-list li { counter-increment: faq-cat; margin-bottom: 4px; }
.faq-nav-list a {
  display: block;
  padding: 8px 0 8px 28px;
  position: relative;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.16s ease;
}
.faq-nav-list a::before {
  content: counter(faq-cat, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 8px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.faq-nav-list a:hover { color: var(--navy); }

.faq-content { display: flex; flex-direction: column; gap: 48px; }
.faq-cat { scroll-margin-top: 88px; }
.faq-cat-title {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  padding: 0;
  border-radius: 0;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.faq-item[open] {
  border-left-color: var(--gold);
  box-shadow: 0 6px 18px rgba(11, 26, 50, 0.05);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 22px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.02rem;
  line-height: 1.4;
  position: relative;
  user-select: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 50%;
  line-height: 1;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.faq-item[open] > summary::after {
  content: "−";
  background: var(--gold);
  color: var(--white);
  transform: translateY(-50%) rotate(180deg);
}
.faq-item > summary:hover { background: rgba(196, 162, 79, 0.05); }
.faq-answer {
  padding: 0 22px 22px 22px;
  color: var(--ink);
  line-height: 1.65;
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--navy); text-decoration: underline; }
.faq-answer a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .faq-shell { grid-template-columns: 1fr; gap: 24px; }
  .faq-nav {
    position: static;
    padding: 16px 18px;
  }
  .faq-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
  .faq-content { gap: 32px; }
  .faq-cat-title { font-size: 1.35rem; }
  .faq-item > summary { font-size: 0.95rem; padding: 16px 50px 16px 18px; }
  .faq-item > summary::after { right: 16px; width: 26px; height: 26px; font-size: 1.3rem; }
  .faq-answer { padding: 0 18px 18px 18px; font-size: 0.95rem; }
}
@media (max-width: 520px) {
  .faq-nav-list { grid-template-columns: 1fr; }
}

/* —— Contact dropdown — submenu styling alignment —— */
.nav-dropdown--contact .nav-dropdown-menu { min-width: 180px; }

/* —— Compact lead form (contact page) ——
   Multi-column rows + tighter density, on ARRE brand styles. */
.lead-form-shell {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  padding: 28px 28px 24px;
}
.lead-form-head { margin-bottom: 20px; }
.lead-form-head h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.lead-form-sub {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}

.lead-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.lead-form--compact label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 4px;
}
.lead-form--compact > label,
.lead-form--compact .lead-form-row,
.lead-form--compact .form-checks {
  margin-bottom: 14px;
}
.lead-form--compact .lead-form-row > label { margin-bottom: 0; }
.lead-form--compact input,
.lead-form--compact select,
.lead-form--compact textarea {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.95rem;
  background: var(--white);
  margin-bottom: 0;
}
.lead-form--compact input::placeholder,
.lead-form--compact textarea::placeholder {
  color: rgba(11, 26, 50, 0.38);
  font-weight: 400;
}
.lead-form--compact textarea { min-height: 96px; }
.lead-form--compact .form-optional {
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
}

.form-checks--compact {
  background: var(--mist);
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.form-checks--compact legend {
  /* Float + full-width breaks the browser default where <legend>
     rides the fieldset top border. Now sits as a clean block inside
     the tinted box, above the checkbox grid. */
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
}
.form-checks--compact .form-checks-grid {
  clear: both;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin-top: 0;
}
.form-checks--compact .form-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink);
  font-family: var(--font-body);
  margin-bottom: 0;
  padding: 4px 0;
  cursor: pointer;
}
.form-checks--compact .form-check input[type="checkbox"] {
  margin: 2px 0 0 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
}
.form-checks--compact .form-check span {
  display: inline;
  line-height: 1.35;
}

.lead-form--compact .btn-block {
  margin-top: 6px;
  padding-top: 12px;
  padding-bottom: 12px;
  letter-spacing: 0.06em;
}
.lead-form--compact .form-status { margin-top: 10px; font-size: 0.85rem; }

@media (max-width: 640px) {
  .lead-form-shell { padding: 22px 18px 18px; }
  .lead-form-row { grid-template-columns: 1fr; gap: 12px; }
  .lead-form--compact .lead-form-row { margin-bottom: 12px; }
  .form-checks--compact .form-checks-grid { grid-template-columns: 1fr; }
}

/* —— New footer (2026-06-03): brand+socials row, then 4-col grid with Leaflet map —— */
.footer-brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-brand-row .footer-brand {
  margin: 0;
  flex: 1 1 480px;
  min-width: 0;
}
.footer-brand-row .footer-brand p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 560px;
}

/* Contact lines under the tagline — Keegan pattern (phone + email inline) */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 0.9rem;
}
.footer-contact li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.78);
}
.footer-contact svg { color: var(--gold); flex-shrink: 0; }
.footer-contact a {
  color: inherit !important;
  text-decoration: none;
  transition: color 0.18s ease;
}
.footer-contact a:hover { color: var(--gold) !important; }
/* Brand logo — tight, 1.5x smaller than the previous variant */
.footer-brand-row .footer-brand-logo {
  display: block;
  height: clamp(42px, 7vw, 96px);
  width: auto;
  max-width: 100%;
  margin-bottom: 0;
}

/* Brand-side: vertical stack — chip → socials → compliance badges (top → bottom) */
.footer-brand-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* REALTOR + EHO inline within brand-side */
.footer-compliance-badges {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ¡Hablamos Español! chip — gold pill, navy text, Reserva-style */
.footer-spanish-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--gold);
  color: var(--navy) !important;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  border-radius: 0;
  border: 1px solid var(--gold);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.footer-spanish-chip svg { flex-shrink: 0; }
.footer-spanish-chip:hover {
  background: transparent;
  color: var(--gold) !important;
  transform: translateY(-1px);
}

/* Compliance row — REALTOR + EHO badges on their own line, smaller, right-aligned */
.footer-compliance-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-eho,
.footer-realtor {
  display: block;
  height: 38px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.18s ease;
}
.footer-eho:hover,
.footer-realtor:hover { opacity: 1; }

.footer-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.footer-socials a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
  text-decoration: none;
}

/* —— Mobile + tablet (<1024px): 2×2 grid — Explore | Services / Legal | Map.
   Visual Leaflet map hidden (no SEO value); heading + caption + noscript +
   geo metadata stay in DOM for local-SEO signal preservation. Desktop keeps
   its 4-col row + interactive map. */
.footer-grid--with-map {
  grid-template-columns: repeat(2, 1fr);
  gap: 38px 18px;
}
@media (max-width: 1023px) {
  .footer-grid--with-map .footer-map { display: none; }
  .footer-grid--with-map .footer-map-caption {
    margin-top: 4px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--gold-soft);
  }
  /* Visual cue that EXPLORE / SERVICES / LEGAL / SERVICE AREA are section
     titles — small gold accent bar above each h4 + extra top padding. */
  .footer-grid--with-map > div > h4 {
    position: relative;
    padding-top: 14px;
    margin-bottom: 14px;
  }
  .footer-grid--with-map > div > h4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
  }
}
@media (min-width: 1024px) {
  .footer-grid--with-map {
    grid-template-columns: 1fr 1fr 1fr 1.3fr;
    gap: 36px;
  }
}

.footer-map-col h4 { margin-bottom: 12px; }
.footer-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 170px;
  background: #1a2a48;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  overflow: hidden;
  /* Contain Leaflet z-index inside this stacking context */
  isolation: isolate;
}
.footer-map a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  color: var(--gold-soft);
  text-align: center;
  padding: 16px;
}
.footer-map-caption {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

/* Leaflet attribution / control tweaks to match dark footer */
.footer-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.85);
  color: var(--navy);
  font-size: 10px;
}
.footer-map .leaflet-control-attribution a { color: var(--navy); }
.footer-map .leaflet-control-zoom a {
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
  border-bottom-color: rgba(0, 0, 0, 0.15);
}

@media (max-width: 640px) {
  .footer-brand-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  /* Reset the desktop flex-grow so the brand block hugs its content height
     on mobile column layout (was creating a huge vertical gap before). */
  .footer-brand-row .footer-brand {
    flex: 0 0 auto;
    width: 100%;
  }
  .footer-brand-row .footer-brand-logo {
    height: clamp(45px, 14vw, 81px);
    margin-inline: auto;
  }
  .footer-brand-row .footer-brand p {
    margin-inline: auto;
  }
  .footer-contact {
    justify-content: center;
    gap: 8px 22px;
    font-size: 0.85rem;
  }
  .footer-brand-side {
    width: 100%;
    align-items: center;
    gap: 12px;
  }
  .footer-spanish-chip { font-size: 0.72rem; padding: 9px 14px; }
  .footer-compliance-badges { justify-content: center; }
  .footer-eho,
  .footer-realtor { height: 32px; }
  .footer-map { aspect-ratio: 16 / 11; }

  /* Center each cell's content within the 2×2 grid */
  .footer-grid--with-map { text-align: center; }
  .footer-grid--with-map .footer-links { align-items: center; }
  .footer-grid--with-map > div { display: flex; flex-direction: column; align-items: center; }
  .footer-grid--with-map h4 { width: 100%; }
}

/* —— Parallax section (background image with fixed-attachment scroll) —— */
.parallax-section {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--white);
  padding: 96px 0;
  overflow: hidden;
}
.parallax-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11, 26, 50, 0.86) 0%, rgba(11, 26, 50, 0.7) 60%, rgba(11, 26, 50, 0.82) 100%);
  z-index: 0;
}
.parallax-section > .container { position: relative; z-index: 1; }
.parallax-section .eyebrow { color: var(--gold); }
.parallax-section h2,
.parallax-section .section-lead { color: var(--white); }
.parallax-section .section-lead { color: rgba(255, 255, 255, 0.88); }
.parallax-section .lead-form {
  background: var(--white);
  color: var(--ink);
  padding: 32px 28px 24px;
  border-top: 3px solid var(--gold);
  margin-top: 28px;
  box-shadow: 0 18px 40px rgba(11, 26, 50, 0.35);
}
.parallax-section .lead-form label > span { color: var(--navy); }
.parallax-section .form-status { color: var(--ink); }

/* iOS / mobile: background-attachment: fixed is unsupported and falls back
   to scroll. We also tighten the overlay so the form still reads clearly. */
@media (max-width: 900px) {
  .parallax-section {
    background-attachment: scroll;
    padding: 72px 0;
  }
}
@media (max-width: 640px) {
  .parallax-section .lead-form { padding: 24px 20px 20px; }
}

/* —— Areas explorer — interactive listings + Leaflet map —— */
/* Kill the section's bottom padding so the grid butts against the next section
   (no light-mist strip below the map). */
.areas-explorer { padding-bottom: 0; }
.areas-explorer-head { text-align: center; max-width: 760px; margin: 0 auto 24px; padding-top: 0; }
.areas-explorer-head h2 { margin-bottom: 10px; }
.areas-region-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-top: 18px;
}
.areas-region-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.areas-region-tab:hover { color: var(--navy); }
.areas-region-tab.is-active {
  background: var(--navy);
  color: var(--white);
}
.areas-region-tab.is-coming-soon { color: rgba(11, 26, 50, 0.55); }
.areas-region-tab.is-coming-soon.is-active {
  background: rgba(11, 26, 50, 0.75);
  color: var(--white);
}
.areas-region-badge {
  background: var(--gold);
  color: var(--navy);
  font-size: 0.6rem;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* Full-bleed grid — listings left, map right, no gap, edge-to-edge */
.areas-explorer-grid {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  margin-top: 32px;
  width: 100%;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.areas-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border-right: 1px solid var(--line);
  padding: 20px 22px;
  max-height: 720px;
  min-height: 0;
}

.areas-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.area-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.area-pill .area-pill-pin { color: var(--navy); display: inline-flex; }
.area-pill.is-anchor .area-pill-pin { color: var(--gold); }
.area-pill:hover { border-color: var(--gold); }
.area-pill.is-active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.area-pill.is-active .area-pill-pin { color: var(--gold); }
.area-pill.is-disabled,
.area-pill[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.areas-side-panel {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.areas-side-panel::-webkit-scrollbar { width: 6px; }
.areas-side-panel::-webkit-scrollbar-thumb { background: rgba(196, 162, 79, 0.5); }

.areas-listing-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.areas-listing-meta-sub { font-style: italic; opacity: 0.7; }

.areas-listings-list { display: flex; flex-direction: column; gap: 10px; }

.areas-listing-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.areas-listing-card:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11, 26, 50, 0.08);
}
.areas-listing-card.is-active {
  border-color: var(--gold);
  border-left: 3px solid var(--gold);
  background: rgba(196, 162, 79, 0.06);
}
.areas-listing-thumb {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  align-self: stretch;
  min-height: 130px;
}
.areas-listing-body { padding: 12px 14px; }
.areas-listing-price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
}
.areas-listing-title {
  font-size: 0.86rem;
  color: var(--ink);
  margin: 2px 0;
  line-height: 1.3;
}
.areas-listing-specs {
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.areas-listing-city {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 4px;
  font-style: italic;
}

.areas-fallback {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.areas-map-wrap {
  position: relative;
  min-height: 720px;
}
.areas-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #1a2a48;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  /* Contain Leaflet's internal z-index: 1000 zoom-control / popup panes inside
     a new stacking context so they can't paint over the site-header (z:100). */
  isolation: isolate;
}
.areas-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.9);
  font-size: 10px;
}

/* —— homes.com-style label pins —— */
.areas-pin-host { background: transparent !important; border: 0 !important; }
/* Footer-map teardrop pin — clean icon-only marker, no text label */
.footer-map-pin-host { background: transparent !important; border: 0 !important; }
.footer-map-pin {
  display: block;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  transition: transform 0.16s ease;
}
.footer-map-pin:hover { transform: scale(1.15); }
.areas-pin-host .areas-pin {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-50%, -100%);
  transform-origin: bottom center;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(11, 26, 50, 0.28);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.areas-pin-host .areas-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--navy);
}
.areas-pin-host .areas-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--white);
  z-index: 1;
}
.areas-pin-host .areas-pin:hover {
  transform: translate(-50%, -100%) scale(1.06);
  box-shadow: 0 6px 14px rgba(11, 26, 50, 0.4);
  z-index: 1000;
}

/* Variants */
.areas-pin--city-default {}
.areas-pin--city-anchor {
  border-color: var(--gold);
  color: var(--navy);
  background: var(--white);
}
.areas-pin--city-anchor::after { border-top-color: var(--gold); }
.areas-pin--city-anchor::before { border-top-color: var(--white); }

.areas-pin--listing {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  font-size: 0.82rem;
  padding: 6px 12px;
  letter-spacing: 0.02em;
}
.areas-pin--listing::after { border-top-color: var(--navy); }
.areas-pin--listing::before { border-top-color: var(--navy); }

.areas-pin--city-muted {
  opacity: 0.45;
  background: var(--mist);
  border-color: var(--line);
  color: var(--muted);
}
.areas-pin--city-muted::after { border-top-color: var(--line); }
.areas-pin--city-muted::before { border-top-color: var(--mist); }

/* Active states (selected city / focused listing) */
.areas-pin.is-active {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  transform: translate(-50%, -100%) scale(1.12);
  z-index: 999;
}
.areas-pin.is-active::after { border-top-color: var(--gold); }
.areas-pin.is-active::before { border-top-color: var(--gold); }
.areas-pin--listing.is-active {
  background: var(--gold);
  color: var(--navy);
}
.areas-pin--listing.is-active::after { border-top-color: var(--gold); }
.areas-pin--listing.is-active::before { border-top-color: var(--gold); }

/* Waitlist panel */
.areas-waitlist {
  padding: 8px 4px;
}
.areas-waitlist h3 {
  margin: 6px 0 8px;
  font-size: 1.15rem;
}
.areas-waitlist-sub {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.areas-waitlist-form { margin-top: 8px; }
.areas-waitlist-form > label { margin-bottom: 10px; display: block; }

@media (max-width: 900px) {
  .areas-explorer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .areas-side {
    order: 2;
    max-height: 560px;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .areas-map-wrap { order: 1; min-height: 420px; }
}

/* ============================================================
   Case Studies — Recent Closings flyer grid + lightbox
   ============================================================ */

/* Grid — 4 columns desktop (3 flyers + More tile), 2 cols tablet, stacked mobile. */
.cs-flyer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 28px;
  align-items: start;
}
@media (max-width: 1100px) {
  .cs-flyer-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  .cs-flyer-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Flyer card — uniform aspect across all 4 cards (3:4 = the tallest flyer).
   Shorter flyers (4:5) use object-fit: contain → no cropping, small navy strips
   top/bottom that blend into the navy card background. */
.cs-flyer-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy, #0b1a32);
  box-shadow: 0 8px 24px rgba(11, 26, 50, 0.10);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
  outline: none;
  aspect-ratio: 3 / 4;
}
.cs-flyer-card:hover,
.cs-flyer-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(11, 26, 50, 0.22);
}
.cs-flyer-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.6), 0 18px 38px rgba(11, 26, 50, 0.22);
}
.cs-flyer-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--navy, #0b1a32);
}

/* IG badge — appears on hover/focus over the card */
.cs-ig-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: rgba(11, 26, 50, 0.78);
  color: #fff;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.cs-ig-badge svg { width: 14px; height: 14px; }
.cs-flyer-card:hover .cs-ig-badge,
.cs-flyer-card:focus-visible .cs-ig-badge {
  opacity: 1;
  transform: translateY(0);
}
/* On touch devices, show badge always — no hover state. */
@media (hover: none) {
  .cs-ig-badge { opacity: 1; transform: translateY(0); }
}

/* Date badge — top-left, always visible */
.cs-date-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-block;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy, #0b1a32);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* "More on Instagram" tile — same grid slot as a flyer; aspect matches flyer card (3:4). */
.cs-more-tile {
  background: linear-gradient(135deg, #0b1a32 0%, #1a3158 100%);
  color: #fff;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  /* aspect-ratio inherited from .cs-flyer-card (3:4) */
}
.cs-more-tile h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 0;
  color: #fff;
}
.cs-more-tile p {
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.cs-more-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}
.cs-more-icon svg { width: 22px; height: 22px; }

/* Follow CTA tile — full-width row below the grid. */
.cs-followtile-section { padding-top: 0; }
.cs-followtile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #0b1a32 0%, #1a3158 100%);
  color: #fff;
  border-radius: 18px;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(11, 26, 50, 0.18);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.cs-followtile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(11, 26, 50, 0.28);
}
.cs-followtile-copy { flex: 1 1 auto; min-width: 0; }
.cs-followtile-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
}
.cs-followtile h3 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  color: #fff;
  margin: 0 0 6px;
}
.cs-followtile p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  line-height: 1.45;
}
.cs-followtile-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #fff;
  color: var(--navy, #0b1a32);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-followtile-btn svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .cs-followtile {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
    gap: 18px;
  }
  .cs-followtile h3 { font-size: 1.2rem; }
  .cs-followtile-btn { width: 100%; justify-content: center; }
}

/* Lightbox — centered modal, dark backdrop, image + on-site CTAs */
.cs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.cs-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 26, 50, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cs-lightbox-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 360px);
  gap: 0;
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transform: scale(0.96);
  transition: transform 0.22s ease;
}
body.cs-lightbox-open .cs-lightbox {
  opacity: 1;
  pointer-events: auto;
}
body.cs-lightbox-open .cs-lightbox-panel {
  transform: scale(1);
}
body.cs-lightbox-open { overflow: hidden; }
.cs-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy, #0b1a32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}
.cs-lightbox-close:hover { transform: scale(1.06); }
.cs-lightbox-close svg { width: 18px; height: 18px; }
.cs-lightbox-media {
  background: #0b1a32;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: calc(100vh - 48px);
}
.cs-lightbox-media img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.cs-lightbox-actions {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  background: #fff;
}
.cs-lightbox-copy h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin: 0 0 8px;
  color: var(--navy, #0b1a32);
  line-height: 1.25;
}
.cs-lightbox-copy p {
  font-size: 0.92rem;
  color: var(--ink, #2a3447);
  line-height: 1.5;
  margin: 0;
}
.cs-lightbox-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-lightbox-ctas .btn { width: 100%; text-align: center; }

@media (max-width: 820px) {
  .cs-lightbox { padding: 12px; }
  .cs-lightbox-panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    max-height: calc(100vh - 24px);
  }
  .cs-lightbox-media { max-height: 55vh; }
  .cs-lightbox-media img { max-height: 55vh; }
  .cs-lightbox-actions { padding: 18px 18px 20px; }
  .cs-lightbox-copy h3 { font-size: 1.1rem; }
}

/* ============================================================
   Case Studies — Polish pass: centered section headers, stats
   strip, navy-gradient closing CTA.
   ============================================================ */

/* Centered section variant — used for "Latest closings" header + closer. */
.cs-section--center {
  text-align: center;
}
.cs-section--center .eyebrow,
.cs-section--center h2,
.cs-section--center .section-lead {
  text-align: center;
}
.cs-section--center .section-lead {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.cs-section--center .cta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Stats / proof strip — credibility row between grid and Follow tile. */
.cs-stats-section {
  padding-top: 12px;
  padding-bottom: 12px;
}
.cs-stats {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 22px 28px;
  background: rgba(11, 26, 50, 0.04);
  border: 1px solid rgba(11, 26, 50, 0.06);
  border-radius: 14px;
  gap: 0;
}
.cs-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding: 0 22px;
  position: relative;
}
.cs-stats li:first-child { padding-left: 0; }
.cs-stats li:last-child { padding-right: 0; }
.cs-stats li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(11, 26, 50, 0.10);
}
.cs-stats-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(11, 26, 50, 0.55);
}
.cs-stats-value {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy, #0b1a32);
  line-height: 1.25;
}
@media (max-width: 880px) {
  .cs-stats {
    flex-wrap: wrap;
    padding: 18px 20px;
    gap: 18px 0;
  }
  .cs-stats li {
    flex: 0 0 50%;
    padding: 6px 14px;
  }
  .cs-stats li:nth-child(odd) { padding-left: 0; }
  .cs-stats li:nth-child(even) { padding-right: 0; }
  .cs-stats li::before { display: none; }
}
/* Only collapse to single-column at truly narrow widths (Galaxy Fold, etc.) —
   keep 2x2 layout for all iPhone sizes (375-430px). */
@media (max-width: 340px) {
  .cs-stats li { flex: 0 0 100%; padding: 4px 0; }
}

/* Closing CTA — navy gradient backdrop, larger heading, gold accent rule on top. */
.cs-closer {
  position: relative;
  background: linear-gradient(135deg, #0b1a32 0%, #1a3158 100%);
  color: #fff;
  padding-top: 64px;
  padding-bottom: 64px;
  overflow: hidden;
}
.cs-closer-rule {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold, #c39a3f) 0%, #e6c878 100%);
}
.cs-closer .cs-closer-eyebrow {
  color: var(--gold, #c39a3f);
}
.cs-closer .cs-closer-h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  margin: 6px 0 14px;
  line-height: 1.15;
}
.cs-closer .cs-closer-lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0 auto 22px;
}
.cs-closer-ctas { margin-top: 6px; }
.cs-closer .btn-primary {
  /* Inherit project primary styling, but assure contrast on dark bg. */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
/* Ghost secondary on dark — white outline, transparent fill, white text. */
.cs-closer .cs-closer-btn-ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}
.cs-closer .cs-closer-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: #fff;
  color: #fff;
}
@media (max-width: 640px) {
  .cs-closer { padding-top: 48px; padding-bottom: 48px; }
}

/* ============================================================
   Case Studies — Stats strip logo + language toggle (re-added)
   ============================================================ */

/* Logo slots — FCRE bookend (left) + Google Reviews bookend (right). No box, no chrome. */
.cs-stats--logo { justify-content: flex-start; }
.cs-stats-logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  align-self: flex-start;
}
/* FCRE logo source is white-on-transparent ("inverted"). On the light strip we
   need it dark. `invert(1)` flips white→black AND preserves anti-aliased
   edges — much smoother than brightness(0) which slammed gray AA pixels to
   pure black and produced visible jaggies on small subtext like "REAL ESTATE". */
.cs-stats-logo--fcre img {
  filter: invert(1);
  image-rendering: -webkit-optimize-contrast;
}
.cs-stats-logo img {
  display: block;
  max-height: 60px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.cs-stats-google {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease;
  align-self: flex-start;
}
.cs-stats-google:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.cs-stats-google img {
  display: block;
  max-height: 50px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Explicit `auto` + GPU compositing forces the browser's high-quality
     bilinear/bicubic downscaler. Google badge is denser content (stacked
     wordmark + subtext + stars), so it sits below FCRE's height to keep
     the row visually balanced — FCRE leads, Google follows. */
  image-rendering: auto;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@media (max-width: 880px) {
  .cs-stats-logo img { max-height: 48px; }
  .cs-stats-google img { max-height: 40px; }
}

/* Language toggle inside stats strip — overrides the bare `.lang-toggle`
   default (display: none, set elsewhere in site.css). Hooks the buttons into
   site.js's existing `.lang-toggle button` click handler — live swap, no
   reload. */
.cs-stats-langtoggle.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cs-lang-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy, #0b1a32);
  cursor: pointer;
  letter-spacing: inherit;
  line-height: 1.25;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cs-lang-btn:hover {
  border-bottom-color: var(--gold, #c39a3f);
}
.cs-lang-btn.active {
  color: var(--gold, #c39a3f);
  border-bottom-color: var(--gold, #c39a3f);
}
.cs-lang-sep {
  color: rgba(11, 26, 50, 0.30);
  font-weight: 400;
  user-select: none;
}

/* ============================================================
   CONSENT — slim bottom strip + on-demand Manage modal.
   Loaded by site/js/consent.js. Shows on first visit, persists
   choice in localStorage. Footer "Cookie preferences" reopens.
   2026-06-24 redesign: less visual weight, X close = accept all.
   ============================================================ */

/* Slim card — bottom-center floating, contained width. Dark frosted-glass
   matches the .mobile-sticky CTA bar style: navy at low opacity + strong
   blur so the strip reads as part of the floating chrome (same family as
   the sticky bar), not as an alien light card on top of the design.
   Fade + slide in on first mount for polish. */
@keyframes consentStripIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.consent-strip {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 9000;
  width: calc(100% - 32px);
  max-width: 720px;
  background: rgba(11, 26, 50, 0.18);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-family: inherit;
  animation: consentStripIn 0.35s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .consent-strip { animation: none; }
}
/* Fallback for browsers without backdrop-filter support — solid-ish navy
   so the strip stays cohesive instead of becoming a bright light card. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .consent-strip { background: rgba(11, 26, 50, 0.92); }
}
.consent-strip__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 14px;
}
.consent-strip__text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}
.consent-strip__msg { color: rgba(255, 255, 255, 0.92); }
.consent-strip__link {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.consent-strip__link:hover {
  color: #c4a24f;
  text-decoration-color: #c4a24f;
}
.consent-strip__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.consent-strip__btn {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.15;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Manage — neutral white-glass tile that blends into the dark card. */
.consent-strip__btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.consent-strip__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}
/* OK — translucent iMessage-blue tile. Same blue family as the .btn-sticky-text
   button in the mobile CTA bar, so it stays cohesive with the floating chrome.
   Universal "tap me" signal without screaming. */
.consent-strip__btn--soft {
  background: rgba(0, 122, 255, 0.42);
  color: #fff;
  border-color: rgba(0, 122, 255, 0.62);
}
.consent-strip__btn--soft:hover {
  background: rgba(0, 122, 255, 0.6);
  border-color: rgba(0, 122, 255, 0.85);
}
/* Legacy primary kept for back-compat with any cached HTML. */
.consent-strip__btn--primary {
  background: #0b1a32;
  color: #fff;
}
.consent-strip__btn--primary:hover { background: #16284a; }

/* Cookie icon — friendly chocolate-chip, helps users recognize the
   category at a glance. */
.consent-strip__icon {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
}
@media (max-width: 720px) {
  .consent-strip__icon { width: 16px; height: 16px; }
}
@media (max-width: 420px) {
  .consent-strip__icon { width: 14px; height: 14px; }
}

/* Mobile / tablet: sit ABOVE the sticky CTA bar; keep one row.
   Text wraps internally; buttons stay inline on the right. */
@media (max-width: 720px) {
  .consent-strip {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 20px);
  }
  .consent-strip__inner {
    padding: 5px 6px 5px 10px;
    gap: 6px;
  }
  .consent-strip__text {
    font-size: 0.68rem;
    line-height: 1.3;
  }
  .consent-strip__link {
    font-size: 0.68rem;
    white-space: normal;
  }
  .consent-strip__actions { gap: 4px; }
  .consent-strip__btn { padding: 3px 8px; font-size: 0.68rem; }
}

/* Very narrow phones — even tighter so single row never breaks */
@media (max-width: 420px) {
  .consent-strip__inner { padding: 4px 5px 4px 8px; gap: 4px; }
  .consent-strip__text { font-size: 0.64rem; line-height: 1.25; }
  .consent-strip__btn { padding: 3px 7px; font-size: 0.64rem; }
}

/* Category rows + toggle switches in the Manage modal */
/* Category rows. Default: subtle blue tint = "active / allowed".
   When the inner checkbox is unchecked, the row shifts to a soft
   coral/pink tint via :has() — visual cue that turning the category
   off downgrades the experience. (Not deceptive — toggle is real,
   choice is real — just a color signal users read subliminally.) */
.consent-cats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 16px;
}
.consent-cat {
  border: 1px solid rgba(0, 122, 255, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(0, 122, 255, 0.06);
  transition: background 0.18s, border-color 0.18s;
}
/* Row goes soft-coral when the user turns a category off. */
.consent-cat:has(.consent-toggle input:not(:checked)) {
  background: rgba(255, 90, 84, 0.10);
  border-color: rgba(255, 90, 84, 0.28);
}
.consent-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.consent-cat__title {
  font-weight: 700;
  color: #fff;
  font-size: 0.92rem;
}
.consent-cat__locked {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.consent-cat__desc {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}

/* iOS-style toggle — blue track when ON (matches accept button + Text CTA) */
.consent-toggle {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  cursor: pointer;
}
.consent-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.consent-toggle__track {
  display: inline-block;
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  position: relative;
  transition: background 0.18s;
}
.consent-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
  transition: transform 0.18s;
}
.consent-toggle input:checked + .consent-toggle__track {
  background: rgba(0, 122, 255, 0.75);
}
.consent-toggle input:checked + .consent-toggle__track .consent-toggle__knob {
  transform: translateX(16px);
}
.consent-toggle input:focus-visible + .consent-toggle__track {
  outline: 2px solid #c4a24f;
  outline-offset: 2px;
}

/* Manage modal — dark frosted glass, same family as the strip + sticky CTA bar */
@keyframes consentModalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes consentModalPanelIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: consentModalIn 0.2s ease-out;
}
.consent-modal__panel { animation: consentModalPanelIn 0.28s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .consent-modal, .consent-modal__panel { animation: none; }
}
.consent-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 26, 50, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.consent-modal__panel {
  position: relative;
  z-index: 1;
  background: rgba(11, 26, 50, 0.62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  padding: 22px 22px 18px;
  width: min(420px, calc(100% - 32px));
  font-family: inherit;
  line-height: 1.5;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .consent-modal__panel { background: rgba(11, 26, 50, 0.94); }
}
.consent-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.consent-modal__close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.consent-modal__title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #fff;
  font-weight: 700;
}
.consent-modal__desc {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}
.consent-modal__actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.consent-modal__btn {
  flex: 1 1 auto;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Accept all — blue glass (same family as the strip's OK + sticky Text CTA) */
.consent-modal__btn--primary {
  background: rgba(0, 122, 255, 0.42);
  color: #fff;
  border-color: rgba(0, 122, 255, 0.62);
}
.consent-modal__btn--primary:hover {
  background: rgba(0, 122, 255, 0.6);
  border-color: rgba(0, 122, 255, 0.85);
}
/* Save preferences — neutral white glass (same family as Manage on the strip) */
.consent-modal__btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.consent-modal__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}
.consent-modal__more {
  margin: 0;
  font-size: 0.82rem;
  text-align: center;
}
.consent-modal__more a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.consent-modal__more a:hover { color: #c4a24f; text-decoration-color: #c4a24f; }

body.consent-modal-open { overflow: hidden; }

/* Lead-form Notice at Collection microcopy (CCPA §1798.100(b)). */
.form-notice {
  margin-top: 10px;
  font-size: 0.78rem;
  color: rgba(11, 26, 50, 0.65);
  line-height: 1.45;
}
.form-notice a {
  color: inherit;
  text-decoration: underline;
}
.form-notice a:hover {
  color: #0b1a32;
}