/* =============================================================================
 * Top Real Estate Producer — public site stylesheet
 * Path is /css/style.min.css because includes/header.php:110-111 and
 * includes/header-es.php:105-106 already load exactly that path (render-blocking,
 * with a preload hint) on EVERY public page.
 *
 * HAND-AUTHORED, NOT MINIFIED. This repo has no build step (no package.json, no
 * gulpfile, no webpack — verified 2026-07-11). The ".min" in the filename is
 * historical, exactly as in js/main.min.js. Readable, commented CSS beats a
 * phantom build pipeline; do NOT add one just to honor the filename.
 *
 * ── WHY THIS FILE EXISTS ────────────────────────────────────────────────────
 * It was referenced by the public chrome since inception but was NEVER COMMITTED
 * (`git log --all -- css/style.min.css` => empty). Every public page therefore
 * shipped its shared chrome COMPLETELY UNSTYLED: the brokerage disclosure bar,
 * top bar, sticky nav, dropdowns, mobile drawer, footer (incl. the Equal Housing
 * Opportunity block), newsletter, floating CTA, AI chat modal and the cost
 * estimator all rendered as raw HTML. Individual page bodies carry their own
 * inline <style> blocks, which is why the damage was not total — but the chrome,
 * and the primitives those inline styles assume exist (.container, .btn, form
 * controls, .form-message), had nothing behind them. This file closes that.
 *
 * ── SCOPE ───────────────────────────────────────────────────────────────────
 * 1. Design tokens (:root).
 * 2. Reset + base typography.
 * 3. Shared primitives: .container, .btn(+modifiers), form controls, .form-message.
 * 4. The shared chrome: includes/header.php, includes/header-es.php,
 *    includes/footer.php, includes/footer-es.php, includes/lead-capture.php.
 * Page-body content styles stay in each page's own inline <style> block.
 *
 * ── STATE-CLASS CONTRACT WITH js/main.min.js ────────────────────────────────
 * The JS toggles these; if a name here drifts, the JS goes dead:
 *   #site-header.is-scrolled              (sticky header compaction/shadow)
 *   #mobile-nav-overlay.is-open           (mobile drawer)
 *   .js-hamburger.is-active               (burger -> X)
 *   body.has-mobile-nav-open              (background scroll lock)
 *   li.nav-item-dropdown.is-open          (mobile accordion)
 *   .savings-calc__panel.is-open          (cost estimator panel)
 *   .savings-calc__step--active           (estimator step)
 *   .form-message / --ok / --error        (inline form feedback)
 *   .savings-calc__message--ok / --error  (estimator feedback)
 * NOTE: #floating-cta-panel and #ai-chat-modal are shown/hidden by INLINE
 * `style.display` from the JS (block / flex / none), NOT by a class. So this
 * file must never set `display` on them — it only positions/paints them.
 *
 * ── RELATIONSHIP TO /css/platform.css ───────────────────────────────────────
 * platform.css is the admin console's token file and the project's single source
 * of truth for color/type. Token NAMES and values here are aligned with it so the
 * public site and the console are visually coherent. ~30 /platform/ pages link
 * BOTH files; gaucho_header() (pages/platform/_auth.php:1130) emits the
 * platform.css <link> from the BODY, i.e. AFTER this file in document order, so
 * on admin pages platform.css wins every token collision. That is intentional:
 * the console keeps its blue --accent, the public site gets the tenant's brand.
 * For that reason the base/global rules below are deliberately conservative
 * (no global width/display changes) — they must not disturb the console.
 *
 * ── ACCESSIBILITY ───────────────────────────────────────────────────────────
 * Every text/background pair below meets WCAG AA (>= 4.5:1). The brand gold
 * (#c9922a) is 2.75:1 on white and therefore NEVER used as body text on a light
 * surface — use --accent-ink (5.37:1 on white) there; gold is only used as a
 * BACKGROUND with dark text (5.95:1) or as text on the dark navy (5.95:1).
 * Focus rings are 6.7:1 on light and 11.5:1 on dark. The brokerage disclosure bar
 * and the footer Equal Housing / EHO block are legal disclosures: they are sized
 * and contrasted to be read, not hidden.
 * ========================================================================== */


/* =============================================================================
 * 1. DESIGN TOKENS
 * Tenant brand: the public site exposes SITE_PRIMARY / SITE_ACCENT; their
 * defaults (#0f1f3d navy / #c9922a gold) are the --primary / --accent defaults
 * below. A tenant override can re-declare either on :root without touching
 * anything else in this file.
 * ========================================================================== */
:root {
  /* ── Brand ────────────────────────────────────────────────────────────── */
  --primary:            #0f1f3d;   /* SITE_PRIMARY default — deep navy        */
  --primary-hover:      #16305c;
  --primary-dark:       #0a1629;
  --primary-soft:       #eaeff6;   /* tinted surface, AA-safe for --primary   */
  --primary-contrast:   #ffffff;   /* text ON --primary  (15.0:1)             */

  --accent:             #c9922a;   /* SITE_ACCENT default — brand gold        */
  --accent-hover:       #a97819;
  --accent-contrast:    #12203a;   /* text ON --accent   (5.95:1) — NEVER #fff */
  --accent-ink:         #8a6412;   /* accent-colored TEXT on light (5.37:1)   */
  --accent-soft:        #fdf3e0;

  /* ── Surfaces (names shared with platform.css) ────────────────────────── */
  --surface-page:       #ffffff;   /* public pages are white; console overrides */
  --surface-card:       #ffffff;
  --surface-sunken:     #eef2f7;
  --surface-dark:       #0f1f3d;   /* footer / top bar                        */
  --surface-darker:     #0a1629;   /* footer bottom bar                       */
  --border:             #d9e0ea;
  --border-strong:      #c2ccda;
  --border-on-dark:     rgba(255,255,255,0.14);

  /* ── Text on LIGHT surfaces (all AA) ──────────────────────────────────── */
  --text-strong:        #111827;
  --text:               #1f2937;
  --text-muted:         #4b5563;   /* secondary — readable, NOT faded         */
  --text-subtle:        #6b7280;

  /* ── Text on DARK surfaces ────────────────────────────────────────────── */
  --text-on-dark:       #f4f7fb;   /* 16.3:1 on --surface-dark                */
  --text-on-dark-muted: #c7d2e0;   /* 10.7:1 on --surface-dark                */

  /* ── Links ────────────────────────────────────────────────────────────── */
  --link:               #1d4ed8;   /* same value as platform.css              */
  --link-hover:         #1e3a8a;

  /* ── Semantic (values identical to platform.css — zero collision risk) ── */
  --success: #047857;  --success-soft: #d1fae5;
  --warning: #b45309;  --warning-soft: #fef3c7;
  --danger:  #b91c1c;  --danger-soft:  #fee2e2;
  --info:    #1d4ed8;  --info-soft:    #dbeafe;

  /* ── Focus rings (WCAG 2.4.11 non-text contrast) ─────────────────────── */
  --focus-ring:         #1d4ed8;   /* 6.7:1 on white                          */
  --focus-ring-on-dark: #ffd27a;   /* 11.5:1 on --surface-dark                */

  /* ── Type ─────────────────────────────────────────────────────────────── */
  /* Inter + Playfair Display are loaded by the header (Google Fonts, promoted
     from preload to stylesheet by main.min.js). Full local fallback stacks so
     the page is still readable if the font request fails or JS is off. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --fs-xs:   0.75rem;    /* 12px — never used for disclosures                */
  --fs-sm:   0.8125rem;  /* 13px — smallest permitted legal-disclosure size  */
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.25rem;

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-base:  1.65;

  /* ── Spacing scale (header.php:409 / header-es.php:384 use --space-6) ─── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  1.5rem;    /* 24px — the value the chrome asks for             */
  --space-7:  2rem;      /* 32px */
  --space-8:  2.5rem;    /* 40px */
  --space-10: 3rem;      /* 48px */
  --space-12: 4rem;      /* 64px */

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --radius:      10px;
  --radius-sm:   6px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-card:   0 1px 3px rgba(16,24,40,0.08);
  --shadow-sm:     0 2px 6px rgba(15,31,61,0.07);
  --shadow-md:     0 6px 18px rgba(15,31,61,0.10);
  --shadow-lg:     0 18px 44px rgba(15,31,61,0.18);
  --shadow-header: 0 2px 14px rgba(15,31,61,0.10);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-pad: 1rem;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --transition:  0.2s var(--ease);
  --transition-slow: 0.32s var(--ease);

  /* ── Stacking order (single place to reason about overlap) ────────────── */
  --z-brokerage:  10;
  --z-header:     100;
  --z-float:      500;   /* floating CTA + cost estimator                    */
  --z-overlay:    900;   /* mobile drawer                                    */
  --z-modal:      1000;  /* AI chat                                          */
  --z-skip:       1100;  /* skip-nav must beat everything when focused       */
}


/* =============================================================================
 * 2. RESET + BASE
 * Deliberately conservative: no global width/display rules, because ~30 admin
 * pages also link this file (see header comment).
 * ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors (#main-content) must not land under the sticky header. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scroll lock while the mobile drawer is up (js/main.min.js setOpen). */
body.has-mobile-nav-open { overflow: hidden; }

img,
picture,
svg,
video { max-width: 100%; }

img { height: auto; border: 0; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
a:hover { color: var(--link-hover); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  font-weight: 700;
}
h1 { font-family: var(--font-display); font-size: var(--fs-3xl); letter-spacing: -0.01em; }
h2 { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p  { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-7) 0; }

/* Global focus ring. :focus-visible only, so mouse users never see it, but every
   keyboard path does. Dark surfaces swap to the light ring further down.
   Outline only — never touch border-radius here, or focusing a pill button
   would visibly reshape it. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* main is the skip-nav target. */
#main-content { display: block; }


/* =============================================================================
 * 3. SHARED PRIMITIVES
 * ========================================================================== */

/* ── 3.1 Container ─────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
@media (min-width: 768px) {
  :root { --container-pad: 1.5rem; }
}

/* ── 3.2 Skip navigation (header.php:194 / header-es.php:189) ──────────────
   Visually hidden until focused, then a real, obvious, high-contrast target. */
.skip-nav {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-skip);
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--primary);
  color: var(--primary-contrast);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  transition: top var(--transition);
}
.skip-nav:focus,
.skip-nav:focus-visible {
  top: 0;
  color: var(--primary-contrast);
  outline: 3px solid var(--focus-ring-on-dark);
  outline-offset: 2px;
}

/* ── 3.3 Buttons ───────────────────────────────────────────────────────────
   Used by the chrome (header CTA, mobile drawer, newsletter, estimator, chat
   send) and by page bodies. Border is always 2px (transparent on filled
   variants) so filled and outline buttons are the exact same box. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--surface-sunken);
  color: var(--text-strong);
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled,
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-contrast);
  box-shadow: var(--shadow-md);
}
.btn--primary:focus-visible { outline-color: var(--focus-ring-on-dark); }

.btn--outline {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.btn--outline:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* ── 3.4 Form controls ─────────────────────────────────────────────────────
   Scoped to explicit input types (never a bare `input` selector) so checkboxes,
   radios, ranges and the admin console's own inputs are untouched. No width
   rule — page-level CSS owns layout. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea {
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--text);
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
select:hover,
textarea:hover { border-color: var(--border-strong); }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18);
}
textarea { resize: vertical; }

::placeholder { color: var(--text-subtle); opacity: 1; }

.form-group { margin-bottom: var(--space-4); }

/* ── 3.5 Inline form feedback (js/main.min.js showFormMessage) ─────────────
   The JS creates the element, sets textContent, toggles --ok/--error and sets
   inline display:block. Hidden here until it does. */
.form-message {
  display: none;
  margin: var(--space-3) 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: var(--lh-snug);
}
.form-message--ok {
  background: var(--success-soft);
  border-left-color: var(--success);
  color: var(--success);          /* 4.8:1 on --success-soft */
}
.form-message--error {
  background: var(--danger-soft);
  border-left-color: var(--danger);
  color: var(--danger);           /* 5.4:1 on --danger-soft  */
}


/* =============================================================================
 * 4. BROKERAGE BAR — legal disclosure (header.php:197 / header-es.php:192)
 * Holds the licensed-brokerage logo. It is a disclosure, so it gets real
 * padding and a real background; it is never collapsed away.
 * ========================================================================== */
.brokerage-bar {
  position: relative;
  z-index: var(--z-brokerage);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0;
}
.brokerage-bar .container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.brokerage-bar img {
  display: block;
  width: auto;
  max-height: 44px;
}
/* Text fallback when no BROKERAGE_LOGO_URL is configured (the default). This is the
   LEGAL brokerage disclosure, so it must be legible, not decorative fine print — it
   meets AA contrast on the sunken surface. See includes/header.php. */
.brokerage-bar__name {
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--text);
  text-align: center;
}
@media (min-width: 768px) {
  .brokerage-bar .container { justify-content: flex-start; }
  .brokerage-bar__name { text-align: left; }
}


/* =============================================================================
 * 5. TOP BAR (header.php:207 / header-es.php:202)
 * Dark navy utility strip: market, license #, email, phone, language switch.
 * ========================================================================== */
.top-bar {
  background: var(--surface-dark);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-sm);        /* 13px — floor for legal text */
  line-height: 1.5;
  padding: var(--space-2) 0;
}
.top-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}
.top-bar__left,
.top-bar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}
.top-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-on-dark-muted);
  text-decoration: none;
  white-space: nowrap;
}
.top-bar__item i { color: var(--accent); font-size: 0.85em; }
a.top-bar__item:hover,
a.top-bar__item:focus-visible { color: var(--text-on-dark); }
.top-bar :focus-visible { outline-color: var(--focus-ring-on-dark); }

.top-bar__phone { font-weight: 600; color: var(--text-on-dark); }

/* Language switch — a pill so it reads as an action, not a label. */
.top-bar__lang-switch {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.top-bar__lang-switch:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* ES only (header-es.php:211) — "Se Habla Español" badge. */
.top-bar__item--lang {
  color: var(--accent);
  font-weight: 600;
}

@media (min-width: 768px) {
  .top-bar .container { justify-content: space-between; flex-wrap: nowrap; }
  .top-bar__left,
  .top-bar__right { justify-content: flex-start; }
}


/* =============================================================================
 * 6. STICKY HEADER + NAVBAR (header.php:233 / header-es.php:231)
 * ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition), padding var(--transition),
              background-color var(--transition);
}
/* .is-scrolled is set by js/main.min.js initStickyHeader (pageYOffset > 40). */
.site-header.is-scrolled {
  box-shadow: var(--shadow-header);
  border-bottom-color: transparent;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px;
  transition: min-height var(--transition);
}
.site-header.is-scrolled .navbar { min-height: 62px; }

/* ── 6.1 Brand ─────────────────────────────────────────────────────────── */
.navbar-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--primary);
  padding: var(--space-2) 0;
  flex-shrink: 0;
}
.navbar-brand:hover { color: var(--primary-hover); }
.navbar-brand-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: inherit;
}
.navbar-brand-tagline {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: opacity var(--transition), max-height var(--transition);
}
/* Compaction on scroll: the tagline folds away, the bar gets shorter. */
.site-header.is-scrolled .navbar-brand-tagline {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
@media (min-width: 1200px) {
  .navbar-brand-text { font-size: 1.4rem; }
}

/* ── 6.2 Desktop menu ──────────────────────────────────────────────────────
   Hidden below 992px — the mobile drawer takes over there. */
.nav-menu {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-menu > li { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background-color var(--transition);
}
.nav-menu .nav-link:hover {
  color: var(--primary);
  background: var(--primary-soft);
}
/* Chevron on the dropdown parents. */
.nav-link .fa-chevron-down {
  font-size: 0.6em;
  opacity: 0.7;
  transition: transform var(--transition);
}

@media (min-width: 992px) {
  .nav-menu {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1 1 auto;
    justify-content: center;
  }
}
/* .nav-hide-md — the "extra" top-level links (Search Homes / Property Values).
   The full menu only fits from 1200px up; between 992 and 1199 these fold away
   so the bar never wraps or collides with the CTA. They remain reachable from
   the footer and from the mobile drawer. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .nav-menu > .nav-hide-md { display: none; }
}

/* ── 6.3 Dropdowns — DESKTOP (hover / focus-within) ────────────────────────
   Scoped to .nav-menu: the mobile drawer reuses the SAME class names
   (.nav-item-dropdown / .dropdown-menu) but is driven by .is-open (§8.2). */
.nav-menu .dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 250px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition);
}
/* Invisible bridge so the pointer can travel from the link to the panel. */
.nav-menu .nav-item-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}
.nav-menu .nav-item-dropdown:hover > .dropdown-menu,
.nav-menu .nav-item-dropdown:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-menu .nav-item-dropdown:hover > .nav-link .fa-chevron-down,
.nav-menu .nav-item-dropdown:focus-within > .nav-link .fa-chevron-down {
  transform: rotate(180deg);
}
.nav-menu .nav-item-dropdown:hover > .nav-link,
.nav-menu .nav-item-dropdown:focus-within > .nav-link {
  color: var(--primary);
  background: var(--primary-soft);
}

.nav-menu .dropdown-menu li { margin: 0; }
.nav-menu .dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9375rem;
  text-decoration: none;
}
.nav-menu .dropdown-menu a i {
  width: 1.15em;
  text-align: center;
  color: var(--accent-ink);   /* gold-family, but AA as text on white */
  font-size: 0.9em;
}
.nav-menu .dropdown-menu a:hover {
  background: var(--surface-sunken);
  color: var(--primary);
}

/* ── 6.4 Header actions (phone + CTA) ──────────────────────────────────── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-left: auto;
}
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-phone:hover { background: var(--primary-soft); color: var(--primary-hover); }
.nav-phone i { color: var(--accent-ink); }

.nav-cta { display: flex; }

/* Below 992 the hamburger owns the menu. Keep tap-to-call visible (it is the
   single highest-intent action on a real-estate site) but drop its label on
   the narrowest screens and hide the CTA button — the drawer carries it. */
@media (max-width: 991.98px) {
  .navbar .nav-actions .nav-cta { display: none; }
}
@media (max-width: 575.98px) {
  .nav-phone span { display: none; }
  .nav-phone { padding: 0.5rem; font-size: 1rem; }
}


/* =============================================================================
 * 7. HAMBURGER (header.php:336 / header-es.php:320)
 * Three bars -> X when js/main.min.js adds .is-active.
 * ========================================================================== */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;               /* >= 44px: WCAG 2.5.8 target size */
  height: 44px;
  padding: 10px;
  margin-left: var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger:hover { background: var(--primary-soft); }
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 992px) {
  .hamburger { display: none; }
}


/* =============================================================================
 * 8. MOBILE DRAWER (header.php:347 / header-es.php:331)
 * .mobile-overlay = full-screen scrim; .mobile-menu = the sliding panel.
 * Opened by js/main.min.js adding .is-open to #mobile-nav-overlay.
 * ========================================================================== */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(10, 22, 41, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}
.mobile-overlay.is-open { opacity: 1; visibility: visible; }

.mobile-menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(90vw, 380px);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-8);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
}
.mobile-overlay.is-open .mobile-menu { transform: translateX(0); }

/* ── 8.1 Drawer header ─────────────────────────────────────────────────── */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.mobile-menu-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
}
.mobile-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.mobile-menu-close:hover { background: var(--surface-sunken); color: var(--text-strong); }

/* ── 8.2 Drawer list + accordion dropdowns ─────────────────────────────── */
.mobile-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}
.mobile-menu-list > li { border-bottom: 1px solid var(--border); }

.mobile-menu .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0.95rem 0.25rem;
  border-radius: 0;
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 600;
}
.mobile-menu .nav-link:hover { color: var(--primary); }
/* The chevron sits at the far right of the row and flips when open. */
.mobile-menu .nav-link .fa-chevron-down { margin-left: auto; font-size: 0.75em; }
.mobile-menu .nav-item-dropdown.is-open > .nav-link { color: var(--primary); }
.mobile-menu .nav-item-dropdown.is-open > .nav-link .fa-chevron-down {
  transform: rotate(180deg);
}

/* Accordion body — collapsed by default, expanded by .is-open (set by
   js/main.min.js initMobileDropdowns). */
.mobile-menu .dropdown-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}
.mobile-menu .nav-item-dropdown.is-open > .dropdown-menu {
  max-height: 30rem;   /* comfortably above the tallest submenu */
}
.mobile-menu .dropdown-menu li:last-child a { padding-bottom: var(--space-4); }
.mobile-menu .dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.25rem 0.7rem 1rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-decoration: none;
}
.mobile-menu .dropdown-menu a:hover { color: var(--primary); }
.mobile-menu .dropdown-menu a i {
  width: 1.15em;
  text-align: center;
  color: var(--accent-ink);
  font-size: 0.9em;
}

/* ES only (header-es.php:380) — language row at the bottom of the drawer. */
.mobile-lang-switch .nav-link {
  gap: 0.5rem;
  justify-content: flex-start;
  color: var(--primary);
}
.mobile-lang-switch .nav-link i { color: var(--accent-ink); }

/* ── 8.3 Drawer CTA block (.nav-cta, header.php:409 — uses var(--space-6)) ── */
.mobile-menu .nav-cta {
  display: block;
  flex-shrink: 0;
}
.mobile-menu .nav-cta .btn { width: 100%; }

/* The drawer is only reachable below 992px; make sure it can never trap a
   desktop user if a stale .is-open class survives a resize. */
@media (min-width: 992px) {
  .mobile-overlay { display: none; }
}


/* =============================================================================
 * 9. FOOTER (footer.php / footer-es.php)
 * ========================================================================== */
.site-footer {
  background: var(--surface-dark);
  color: var(--text-on-dark-muted);
  margin-top: var(--space-12);
}
.site-footer a { color: var(--text-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }   /* gold on navy = 5.95:1 */
.site-footer :focus-visible { outline-color: var(--focus-ring-on-dark); }

/* ── 9.1 Main 4-column grid ────────────────────────────────────────────── */
.footer__main { padding: var(--space-10) 0 var(--space-8); }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  /* Column 1 (about + brokerage/DRE disclosure) gets the extra room. */
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--space-7); }
}

.footer__col { min-width: 0; }

.footer__heading {
  position: relative;
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
}
.footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--accent);
}

.footer__text {
  margin: 0 0 var(--space-4);
  font-size: 0.9375rem;
  line-height: var(--lh-base);
  color: var(--text-on-dark-muted);
}
/* Brokerage name + address + license number: a legal disclosure. Full-size,
   full-contrast, never de-emphasised. */
.footer__dre {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-on-dark);
  font-size: 0.875rem;
  line-height: 1.6;
}
.footer__dre strong { color: var(--text-on-dark); }

.footer__links,
.footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__links li,
.footer__contact li { margin-bottom: var(--space-3); }

.footer__links a,
.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  transition: color var(--transition), transform var(--transition);
}
.footer__links a:hover { transform: translateX(3px); }
.footer__links a i,
.footer__contact a i,
.footer__contact li > i {
  width: 1.15em;
  text-align: center;
  color: var(--accent);
  font-size: 0.85em;
  flex-shrink: 0;
}
.footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
}
.footer__contact li > span { min-width: 0; word-break: break-word; }

/* ── 9.2 Social ────────────────────────────────────────────────────────── */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-on-dark);
  font-size: 0.95rem;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.footer__social-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  transform: translateY(-2px);
}

/* ── 9.3 Newsletter band ───────────────────────────────────────────────── */
.footer__newsletter {
  background: var(--primary-hover);
  border-top: 1px solid var(--border-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
  padding: var(--space-7) 0;
}
.footer__newsletter-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .footer__newsletter-inner { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); }
}
.footer__newsletter-text h3 {
  margin: 0 0 var(--space-2);
  color: #ffffff;                       /* 13:1 on --primary-hover */
  font-family: var(--font-display);
  font-size: 1.375rem;
}
.footer__newsletter-text p {
  margin: 0;
  color: var(--text-on-dark-muted);
  font-size: 0.9375rem;
}
.footer__newsletter-form { margin: 0; }
.footer__newsletter-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 480px) {
  .footer__newsletter-fields { flex-direction: row; }
}
/* Scoped through .footer__newsletter so it out-specifies the base
   `input[type="email"]` rule in §3.4 (0-1-1) — a bare class (0-1-0) would lose. */
.footer__newsletter .footer__newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  font-size: var(--fs-base);
}
.footer__newsletter .footer__newsletter-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 146, 42, 0.35);
}
/* .btn--primary is navy — invisible on this navy band. Gold instead, with the
   dark text that keeps it at 5.95:1. */
.footer__newsletter-btn.btn--primary,
.footer__newsletter-btn {
  flex: 0 0 auto;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.footer__newsletter-btn.btn--primary:hover,
.footer__newsletter-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #ffffff;                       /* #fff on #a97819 = 4.6:1 */
}
/* main.min.js drops its .form-message right after the form, i.e. inside this
   dark band. The soft chips stay legible there (light chip, dark ink). */
.footer__newsletter .form-message { margin-top: var(--space-3); }

/* ── 9.4 Bottom bar + EHO ──────────────────────────────────────────────── */
.footer__bottom {
  background: var(--surface-darker);
  padding: var(--space-6) 0;
}
.footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.footer__copyright {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-on-dark-muted);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.6rem;
  font-size: 0.875rem;
}
.footer__legal a { color: var(--text-on-dark-muted); }
.footer__legal a:hover { color: var(--accent); text-decoration: underline; }
.footer__divider { color: rgba(255, 255, 255, 0.28); }

/* Equal Housing Opportunity — a required disclosure. It is given the widest
   line-height and a real font size; it is emphatically NOT fine print. */
.footer__eho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 780px;
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-on-dark);
}
/* Icon treatment that replaced the missing raster EHO badge (the referenced
   /img/mls-realtor-eho-logo.* never existed and rendered broken). Compliance display —
   sized and contrasted to be clearly visible, not hidden. */
.footer__eho-icon {
  flex-shrink: 0;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text-on-dark);
  opacity: 0.9;
}
.footer__eho img {
  display: block;
  width: auto;
  max-height: 56px;
  /* The badge art is dark-on-transparent in some tenant packs; a white plate
     keeps it legible on the near-black bar without touching the artwork. */
  background: #ffffff;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.footer__eho span {
  font-size: 0.875rem;                  /* 14px — above the 13px floor */
  line-height: 1.6;
  color: var(--text-on-dark-muted);     /* 10.7:1 */
}
@media (min-width: 768px) {
  .footer__eho { flex-direction: row; align-items: center; text-align: left; gap: var(--space-5); }
  .footer__eho img { flex-shrink: 0; }
}


/* =============================================================================
 * 10. FLOATING CTA (includes/lead-capture.php:196)
 * NOTE: #floating-cta-panel visibility is inline `style.display` from
 * js/main.min.js initFloatingCta — never set `display` on it here.
 * ========================================================================== */
.floating-cta {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-float);
}
.floating-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-contrast);
  font-size: 1.35rem;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background-color var(--transition), transform var(--transition);
}
.floating-cta__btn:hover { background: var(--primary-hover); transform: scale(1.05); }
.floating-cta__btn:focus-visible { outline-color: var(--focus-ring-on-dark); }
.floating-cta__icon { line-height: 1; }

.floating-cta__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-3));
  width: min(88vw, 320px);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.floating-cta__header {
  padding: var(--space-4) var(--space-5);
  background: var(--primary);
  color: var(--primary-contrast);
}
.floating-cta__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-contrast);
}
.floating-cta__subtitle {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

.floating-cta__options { padding: var(--space-2); }
.floating-cta__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition);
}
.floating-cta__option:hover { background: var(--surface-sunken); color: var(--text); }
.floating-cta__option > i {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.9rem;
}
.floating-cta__option > div { display: flex; flex-direction: column; min-width: 0; }
.floating-cta__option strong { color: var(--text-strong); font-weight: 600; line-height: 1.3; }
.floating-cta__option span {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The AI-chat entry is a <button> in an otherwise <a> list — normalize it. */
.floating-cta__option--btn { font: inherit; }


/* =============================================================================
 * 11. AI CHAT MODAL (includes/lead-capture.php:255)
 * NOTE: #ai-chat-modal visibility is inline `style.display` (none/flex) from the
 * footer's nonced script — never set `display` here. We only supply the flex
 * centering that its `display:flex` expects.
 * ========================================================================== */
.ai-chat-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(10, 22, 41, 0.6);
}
.ai-chat-modal__inner {
  display: flex;
  flex-direction: column;
  width: min(100%, 460px);
  height: min(640px, 88vh);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.ai-chat-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--primary);
  color: var(--primary-contrast);
  flex-shrink: 0;
}
.ai-chat-modal__header-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.ai-chat-modal__header-info > i {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent);
}
.ai-chat-modal__title { font-weight: 700; line-height: 1.25; }
.ai-chat-modal__subtitle {
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}
.ai-chat-modal__close {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-on-dark);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color var(--transition);
}
.ai-chat-modal__close:hover { background: rgba(255, 255, 255, 0.14); }
.ai-chat-modal__header :focus-visible { outline-color: var(--focus-ring-on-dark); }

/* Message log — flex column so the bubbles can align themselves. */
.ai-chat-modal__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  padding: var(--space-5);
  background: var(--surface-sunken);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ai-chat-msg {
  max-width: 86%;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.ai-chat-msg a { text-decoration: underline; }

/* Assistant — includes the California Bot Disclosure Act opening message, so it
   must be maximally readable. */
.ai-chat-msg--assistant {
  align-self: flex-start;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-sm);
  color: var(--text);
}
.ai-chat-msg--assistant a { color: var(--link); }

.ai-chat-msg--user {
  align-self: flex-end;
  background: var(--primary);
  border-bottom-right-radius: var(--radius-sm);
  color: var(--primary-contrast);
}
.ai-chat-msg--user a { color: var(--accent); }

.ai-chat-msg--error {
  align-self: stretch;
  max-width: 100%;
  background: var(--danger-soft);
  border-left: 4px solid var(--danger);
  color: var(--danger);
}

.ai-chat-msg--loading {
  align-self: flex-start;
  background: var(--surface-card);
  border: 1px solid var(--border);
  color: var(--text-subtle);
  letter-spacing: 0.15em;
  animation: trep-pulse 1.2s ease-in-out infinite;
}
@keyframes trep-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

.ai-chat-modal__input-area {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-card);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-chat-modal__input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 120px;
  resize: none;
}
.ai-chat-modal__send { flex: 0 0 auto; }

.ai-chat-modal__disclaimer {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: center;
  flex-shrink: 0;
}
.ai-chat-modal__disclaimer a { color: var(--link); font-weight: 600; }

/* Full-bleed sheet on phones. */
@media (max-width: 575.98px) {
  .ai-chat-modal { padding: 0; }
  .ai-chat-modal__inner {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}


/* =============================================================================
 * 12. HOME SALE COST ESTIMATOR (includes/lead-capture.php:20)
 * Opt-in per agent behind the 'commission_calculator' feature flag, so most
 * tenants never render it. Panel opens via .is-open (js/main.min.js).
 * ========================================================================== */
.savings-calc {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-float);
}
.savings-calc__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);       /* 5.95:1 */
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background-color var(--transition), transform var(--transition);
}
.savings-calc__toggle:hover { background: var(--accent-hover); color: #fff; transform: translateY(-2px); }
.savings-calc__toggle-icon { font-size: 1rem; }
@media (max-width: 575.98px) {
  /* Keep clear of the floating CTA on a narrow screen. */
  .savings-calc__toggle-label { display: none; }
  .savings-calc__toggle { padding: 0.85rem; }
}

.savings-calc__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-3));
  width: min(90vw, 350px);
  max-height: min(78vh, 620px);
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition);
}
.savings-calc__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.savings-calc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--primary);
  color: var(--primary-contrast);
  position: sticky;
  top: 0;
}
.savings-calc__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary-contrast);
}
.savings-calc__title i { color: var(--accent); margin-right: 0.35rem; }
.savings-calc__close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-on-dark);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.savings-calc__close:hover { background: rgba(255, 255, 255, 0.14); }
.savings-calc__header :focus-visible { outline-color: var(--focus-ring-on-dark); }

/* Steps — only --active is shown (class toggled by js/main.min.js showStep). */
.savings-calc__step { display: none; padding: var(--space-5) var(--space-4) var(--space-4); }
.savings-calc__step--active { display: block; }

.savings-calc__step-label {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);            /* 5.37:1 on white */
}
.savings-calc__step-title {
  margin: 0 0 var(--space-4);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-strong);
}

.savings-calc__input,
.savings-calc__select {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
}

.savings-calc__next { margin-top: var(--space-2); }

.savings-calc__skip {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
}
.savings-calc__skip a { color: var(--text-muted); text-decoration: underline; }
.savings-calc__skip a:hover { color: var(--primary); }

.savings-calc__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-3);
  padding: 0.4rem 0.2rem;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.savings-calc__back:hover { color: var(--primary); }

/* Slider */
.savings-calc__slider-wrap { margin-bottom: var(--space-5); }
.savings-calc__value-display {
  display: block;
  margin-bottom: var(--space-3);
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
}
.savings-calc__slider {
  width: 100%;
  height: 6px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.savings-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 3px solid var(--surface-card);
  border-radius: var(--radius-pill);
  background: var(--primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.savings-calc__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--surface-card);
  border-radius: var(--radius-pill);
  background: var(--primary);
  cursor: pointer;
}
.savings-calc__slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Results */
.savings-calc__results { margin-bottom: var(--space-4); }
.savings-calc__result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}
.savings-calc__result-row span { color: var(--text); }
.savings-calc__result-row strong { color: var(--text-strong); font-weight: 700; }

.savings-calc__result-row--trad {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
.savings-calc__result-row--trad span { color: var(--text-muted); font-weight: 600; }

.savings-calc__tier-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.savings-calc__result-row--tier { border: 1px solid transparent; }
.savings-calc__result-row--tier:hover { background: var(--surface-sunken); }
.savings-calc__result-row--popular {
  background: var(--accent-soft);
  border-color: var(--accent);
}
/* The "potential savings" note. Full width under the row so long amounts wrap. */
.savings-calc__result-row em {
  flex: 1 0 100%;
  color: var(--accent-ink);            /* AA on both white and --accent-soft */
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 600;
}
.savings-calc__result-row em:empty { display: none; }

.savings-calc__compare-link { margin: 0 0 var(--space-4); }

.savings-calc__cta-text {
  margin: 0 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--text);
}
.savings-calc__cta-text strong { color: var(--primary); }

.savings-calc__form { margin: 0; }
.savings-calc__btn-loading i { margin-right: 0.3rem; }

/* Submit feedback (js/main.min.js toggles --ok / --error). */
.savings-calc__message {
  margin-top: var(--space-3);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.savings-calc__message--ok {
  background: var(--success-soft);
  border-left-color: var(--success);
  color: var(--success);
}
.savings-calc__message--error {
  background: var(--danger-soft);
  border-left-color: var(--danger);
  color: var(--danger);
}

.savings-calc__or {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.savings-calc__or a { color: var(--primary); font-weight: 700; }


/* =============================================================================
 * 13. REDUCED MOTION
 * Everything above degrades to an instant state change. The drawer, dropdowns,
 * estimator panel and chat still open and close — they just don't animate.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .footer__links a:hover,
  .footer__social-link:hover,
  .floating-cta__btn:hover,
  .savings-calc__toggle:hover { transform: none; }
}


/* =============================================================================
 * 14. PRINT
 * The legal pages (privacy, terms, accessibility) get printed. Drop the
 * navigation and every floating widget; KEEP the brokerage disclosure bar and
 * the footer legal / Equal Housing block — those are the reason someone prints
 * the page in the first place.
 * ========================================================================== */
@media print {
  .skip-nav,
  .top-bar,
  .site-header,
  .mobile-overlay,
  .floating-cta,
  .ai-chat-modal,
  .savings-calc,
  .footer__newsletter,
  .footer__social { display: none !important; }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .brokerage-bar {
    background: #fff;
    border-bottom: 1px solid #999;
  }

  .site-footer,
  .footer__bottom {
    background: #fff !important;
    color: #000 !important;
    margin-top: 1.5rem;
    border-top: 1px solid #999;
  }
  .site-footer a,
  .footer__text,
  .footer__dre,
  .footer__heading,
  .footer__copyright,
  .footer__legal a,
  .footer__eho span { color: #000 !important; }
  .footer__dre { background: none; border-left-color: #999; }
  .footer__eho img { background: none; padding: 0; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
  .footer__legal a::after { content: ""; }   /* keep the legal row compact */
}