/* ============================================================
   MW REALTY GROUP — Brand Design System  v2 (2026-06-25)
   Clean WHITE base, brighter measured gold accent, navy trust anchor.
   Research-applied (NN/g, Baymard, CXL): white space = perceived luxury;
   gold is jewelry-thin accent only (never big fills); primary CTA is
   high-contrast dark, not gold; 3-field valuation is the hero ask.
   Gold hexes measured from the live MW logo PNG. One source of truth.

   MOBILE-FIRST IS MANDATORY (Webster, 2026-06-25): phone matters more
   than desktop. Every page MUST, at 375px and 320px: have zero
   horizontal overflow; tap targets >= 44px with spacing; inputs
   font-size >= 16px (no iOS zoom); readable body (>=16px); below-fold
   images loading="lazy" + width/height to prevent CLS. Audit each new
   page at mobile before calling it done. See BUILD-PLAN "Mobile-first".
   ============================================================ */

:root {
  /* Gold (measured from logo) — accent only */
  --mw-gold:        #E5BE66;   /* primary gold, brighter/warmer than old #C9A84C */
  --mw-gold-bright: #F2D076;   /* metallic highlight */
  --mw-gold-deep:   #C27C2B;   /* deep amber shadow */
  --mw-gold-text:   #8A5E14;   /* legible "gold" for text on white/cream/mist (WCAG AA >=4.5:1) */
  --mw-star:        #9A6B1C;   /* rating-star glyphs: 4.67:1 on white (meaningful, must pass AA) */

  /* Core */
  --mw-black:       #0D0D0D;
  --mw-ink:         #15171C;   /* body text */
  --mw-navy:        #0E2A4E;   /* finance/trust anchor (mortgage sections) */
  --mw-navy-deep:   #0A1F3C;
  --mw-white:       #FFFFFF;   /* clean primary background */
  --mw-cream:       #FAF8F3;   /* warm white alt sections */
  --mw-mist:        #F2EFE8;   /* subtle panel */
  --mw-line:        #E7E2D6;   /* warm hairline */
  --mw-muted:       #6A6A70;
  --mw-error:       #D32F2F;

  /* Type */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-util:    "Montserrat", var(--font-body);

  --container: 1180px;
  --radius: 6px;
  --section-y: clamp(3.25rem, 7vw, 6rem);
  --shadow-sm: 0 4px 14px rgba(13,13,13,0.06);
  --shadow:    0 14px 40px rgba(13,13,13,0.10);
  --shadow-lg: 0 28px 70px rgba(13,13,13,0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body);
  color: var(--mw-ink); background: var(--mw-white);
  line-height: 1.65; font-size: 17px; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--mw-black); line-height: 1.12; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); letter-spacing: -.5px; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
p { margin: 0 0 1rem; }
a { color: var(--mw-gold-text); text-decoration: none; }
a:hover { color: var(--mw-black); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.section { padding-block: var(--section-y); }
.section--cream { background: var(--mw-cream); }
.section--mist  { background: var(--mw-mist); }
.section--dark  { background: var(--mw-black); color: #EDEAE2; }
.section--navy  { background: var(--mw-navy); color: #E7EDF5; }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow { font-family: var(--font-util); text-transform: uppercase; letter-spacing: .2em; font-size: .76rem; font-weight: 800; color: var(--mw-gold-text); margin: 0 0 .7rem; }
.section--dark .eyebrow, .section--navy .eyebrow { color: var(--mw-gold); }
.lead { font-size: 1.16rem; color: var(--mw-muted); max-width: 62ch; }
.section--dark .lead, .section--navy .lead { color: rgba(255,255,255,.82); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
/* gold hairline accent under headings */
.rule-gold { width: 64px; height: 3px; background: linear-gradient(90deg, var(--mw-gold-deep), var(--mw-gold-bright)); border: 0; margin: 0 0 1.4rem; border-radius: 2px; }
.center .rule-gold { margin-inline: auto; }

/* ---- Buttons: primary = high-contrast dark; gold = thin accent ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-util); font-weight: 700; font-size: .95rem; letter-spacing: .01em; padding: .95rem 1.6rem; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease; text-align: center; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--mw-black); color: #fff; border-color: var(--mw-black); }
.btn--primary:hover { background: #000; box-shadow: 0 0 0 2px var(--mw-gold); color: #fff; }
.btn--navy { background: var(--mw-navy); color: #fff; border-color: var(--mw-navy); }
.btn--navy:hover { background: var(--mw-navy-deep); box-shadow: 0 0 0 2px var(--mw-gold); }
.btn--outline { background: transparent; color: var(--mw-black); border-color: var(--mw-black); }
.btn--outline:hover { background: var(--mw-black); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost:hover { background: #fff; color: var(--mw-black); }
.btn--gold { background: var(--mw-gold); color: var(--mw-black); border-color: var(--mw-gold); }   /* use sparingly */
.btn--gold:hover { background: var(--mw-gold-bright); }
.btn--block { width: 100%; }
.btn--lg { padding: 1.1rem 1.8rem; font-size: 1rem; }

/* ---- Top utility bar ---- */
.topbar { background: var(--mw-black); color: #EDEAE2; font-family: var(--font-util); font-size: .82rem; letter-spacing: .02em; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; }
.topbar a { color: #EDEAE2; }
.topbar a:hover { color: var(--mw-gold); }
.lang-toggle a { padding: 0 .35rem; opacity: .6; }
.lang-toggle a.is-active { opacity: 1; color: var(--mw-gold); font-weight: 800; }

/* ---- Header / nav ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--mw-line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--mw-black); letter-spacing: .5px; display: flex; align-items: center; gap: .6rem; }
.brand small { display:block; font-family: var(--font-util); font-weight:700; font-size:.52rem; letter-spacing:.22em; color: var(--mw-gold-text); margin-top:2px; }
.brand .brand__mark { width: 40px; height: 40px; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-util); font-weight: 800; font-size: .92rem; color: var(--mw-gold-bright); background: var(--mw-black); border: 1px solid var(--mw-gold); }
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img { height: 52px; width: auto; display: block; border-radius: 8px; background: var(--mw-black); }
.site-footer .brand-logo img { height: 58px; border-radius: 6px; }
/* Large floating brand mark — fills the hero's empty left space and stays fixed as you scroll.
   Shown only on wide screens where the centered content has room beside it (so it never covers
   text); on laptops/phones it's hidden and the sticky header logo carries the brand. */
.brand-float { display: none; }
@media (min-width: 1500px) {
  .brand-float { display: block; position: fixed; top: 140px; left: 16px; z-index: 40;
    width: min(300px, calc((100vw - 1180px) / 2 - 24px)); transition: transform .15s ease; }
  .brand-float:hover { transform: translateY(-2px); }
  .brand-float img { width: 100%; height: auto; display: block; border-radius: 14px; background: var(--mw-black); box-shadow: var(--shadow-lg); }
}
.nav { display: flex; align-items: center; gap: 1.35rem; font-family: var(--font-util); font-weight: 600; font-size: .9rem; }
.nav a:not(.btn) { color: var(--mw-ink); }
.nav a:not(.btn):hover { color: var(--mw-gold-text); }
.nav__cta { display: flex; align-items: center; gap: .7rem; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--mw-black); cursor: pointer; min-width: 44px; min-height: 44px; line-height: 1; padding: .2rem; }

/* ---- Split hero (light, form-forward) ---- */
.hero { background: var(--mw-cream); border-bottom: 1px solid var(--mw-line); }
.hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero h1 { margin-bottom: .35rem; }
.hero .lead { margin-bottom: 1.4rem; }
.hero__media { position: relative; }
.hero__media img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-lg); }
.hero__media .badge-float { position: absolute; left: -14px; bottom: 22px; background: #fff; border-radius: 10px; box-shadow: var(--shadow); padding: .7rem .95rem; font-family: var(--font-util); display: flex; align-items: center; gap: .6rem; }
.hero__media .badge-float b { font-size: 1.05rem; color: var(--mw-black); }
.hero__media .badge-float span { font-size: .72rem; color: var(--mw-muted); }

/* Valuation card (3-field hero form) */
.val-card { background: #fff; border: 1px solid var(--mw-line); border-radius: 12px; box-shadow: var(--shadow); padding: 1.3rem; }
.val-card h3 { font-family: var(--font-util); font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mw-ink); margin-bottom: .9rem; display:flex; align-items:center; gap:.5rem; }
.val-card .dot { width:8px;height:8px;border-radius:50%;background:var(--mw-gold);box-shadow:0 0 0 3px rgba(229,190,102,.25); }
.val-row { display: grid; gap: .6rem; }
.val-card .micro { font-size: .82rem; line-height: 1.55; color: var(--mw-muted); margin: .7rem 0 0; }

/* Featured Listings grid (real, live IDX data) — bigger, more prominent photos than the standard 3-up card grid */
#idx-cards.grid--2 { gap: 1.6rem; }
#idx-cards .card__media { aspect-ratio: 4/2.9; }
#idx-cards .card__price { font-size: 1.6rem; }
@media (max-width: 900px) { #idx-cards.grid--2 { grid-template-columns: 1fr; } }

/* ---- IDX search widget (hero centerpiece) ---- */
.idxsearch { background:#fff; border:1px solid var(--mw-line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.idxsearch__tabs { display:flex; background:var(--mw-black); }
.idxtab { flex:1; padding:.8rem .6rem; font-family:var(--font-util); font-weight:700; font-size:.85rem; color:rgba(255,255,255,.72); background:transparent; border:0; border-bottom:3px solid transparent; cursor:pointer; transition:color .12s, border-color .12s; }
.idxtab:hover { color:#fff; }
.idxtab.is-active { color:#fff; background:rgba(255,255,255,.06); border-bottom-color:var(--mw-gold); }
.idxpane { display:none; padding:1.1rem; }
.idxpane.is-active { display:block; }
.idxsearch__bar { display:flex; gap:.5rem; }
.idxsearch__bar input { flex:1; min-width:0; padding:.95rem 1rem; border:1px solid #D8D2C2; border-radius:6px; font-size:16px; font-family:var(--font-body); }
.idxsearch__bar input:focus, .idxsearch__grid select:focus, .idxsearch__grid2 input:focus { outline:2px solid var(--mw-gold); border-color:var(--mw-gold); }
.idxsearch__go { background:var(--mw-gold); color:var(--mw-black); border:0; border-radius:6px; padding:0 1.4rem; font-family:var(--font-util); font-weight:800; font-size:.95rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; white-space:nowrap; }
.idxsearch__go:hover { background:var(--mw-gold-bright); }
.idxsearch__go svg { width:18px; height:18px; }
.idxsearch__go--block { width:100%; padding:.9rem; margin-top:.7rem; }
.idxsearch__grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; }
.idxsearch__grid select { padding:.95rem .7rem; border:1px solid #D8D2C2; border-radius:6px; font-size:16px; background:#fff; font-family:var(--font-body); color:var(--mw-ink); }
.idxsearch__grid2 { display:grid; gap:.5rem; }
.idxsearch__grid2 input { padding:.95rem 1rem; border:1px solid #D8D2C2; border-radius:6px; font-size:16px; font-family:var(--font-body); }
.idxsearch .micro { font-size:.76rem; color:var(--mw-muted); margin:.7rem 0 0; }
@media (max-width:560px) {
  .idxsearch__bar { flex-direction:column; }
  .idxsearch__go { padding:.9rem; }
  .idxsearch__grid { grid-template-columns:1fr 1fr; }
  .idxtab { font-size:.72rem; padding:.7rem .3rem; }
}

/* ---- Trust strip ---- */
.trust { background: var(--mw-white); border-bottom: 1px solid var(--mw-line); }
.trust .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 2.2rem; padding-block: 1rem; font-family: var(--font-util); font-size: .84rem; color: var(--mw-muted); }
.trust b { color: var(--mw-ink); }
.trust .stars { color: var(--mw-star); letter-spacing: 1px; }
.trust .sep { width: 1px; height: 20px; background: var(--mw-line); }

/* ---- Pillars (all-in-one-place) ---- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.pillar { background: #fff; border: 1px solid var(--mw-line); border-radius: 10px; padding: 1.5rem 1.25rem; text-align: center; transition: transform .15s, box-shadow .15s, border-color .15s; }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--mw-gold); }
.pillar__icon { width: 56px; height: 56px; margin: 0 auto .9rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: var(--mw-gold-deep); background: linear-gradient(160deg, #fff, var(--mw-mist)); border: 1px solid var(--mw-gold); }
.pillar h3 { font-size: 1.12rem; margin-bottom: .25rem; }
.pillar .es { display: block; font-family: var(--font-util); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mw-gold-text); margin-bottom: .5rem; }
.pillar p { font-size: .92rem; color: var(--mw-muted); margin: 0; }

/* ---- Signature gold skyline divider ---- */
.skyline { height: 56px; background-repeat: repeat-x; background-position: center bottom; background-size: auto 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='56' viewBox='0 0 1200 56'%3E%3Cpath fill='%23E5BE66' d='M0 56h40V26h10V16h6V26h12v12h18V34h10V20l8-5 8 5v14h16V30h12v26h26V22h10V10h6V22h12v34h22V38h14V18h10V8h5v10h10v20h14v18h28V32h10V18h8v14h12v24h24V36h12V20h6v16h16v20h26V24h10V12h6V24h12v32h22V40h12V22h10V10h5v12h10v18h14v16h28V30h10V16h8v14h12v26h24V38h12V22h6v16h16v18h26V26h10V14h6V26h12v30h22V42h12V24h10V12h5v12h10v18h14v14h26V56z'/%3E%3C/svg%3E"); }

/* ---- Cards / listings ---- */
.grid { display: grid; gap: 1.4rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card { background: #fff; border: 1px solid var(--mw-line); border-radius: 10px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 4/3; background: var(--mw-mist) center/cover no-repeat; position: relative; }
.card__badge { position: absolute; top: .7rem; left: .7rem; background: var(--mw-black); color: var(--mw-gold-bright); font-family: var(--font-util); font-size: .66rem; font-weight: 700; letter-spacing: .08em; padding: .25rem .55rem; border-radius: 4px; text-transform: uppercase; }
.card__save { position: absolute; top: .6rem; right: .6rem; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.94); border: 0; display: grid; place-items: center; cursor: pointer; font-size: 1.05rem; color: var(--mw-ink); box-shadow: var(--shadow-sm); }
.card__body { padding: 1rem 1.1rem 1.2rem; }
.card__price { font-family: var(--font-display); font-size: 1.4rem; color: var(--mw-black); font-weight: 700; }
.card__meta { font-family: var(--font-util); font-size: .84rem; color: var(--mw-muted); display: flex; gap: .9rem; margin-top: .35rem; }
.card__loc { margin-top: .5rem; font-size: .92rem; color: var(--mw-ink); }

/* Neighborhood tile */
.hood { position: relative; aspect-ratio: 3/2; border-radius: 10px; overflow: hidden; display: flex; align-items: flex-end; color: #fff; background: #2b2e35 center/cover no-repeat; }
.hood::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(13,13,13,.82)); }
.hood span { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; padding: 1rem; }
.hood:hover span { color: var(--mw-gold-bright); }

/* Value props (why us) */
.vprop { text-align: center; padding: 1.25rem 1rem; }
.vprop__icon { width: 62px; height: 62px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; color: var(--mw-gold-deep); font-size: 1.55rem; background: linear-gradient(160deg,#fff,var(--mw-mist)); border: 1px solid var(--mw-gold); }
.section--dark .vprop__icon, .section--navy .vprop__icon { background: rgba(255,255,255,.06); color: var(--mw-gold); }

/* Feature band (image + text) */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.feature img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-lg); }

/* Testimonials */
.quote { background: #fff; border: 1px solid var(--mw-line); border-radius: 10px; padding: 1.5rem; box-shadow: var(--shadow-sm); }
.quote p { font-size: 1.02rem; }
.quote__who { font-family: var(--font-util); font-weight: 700; font-size: .9rem; margin-top: .8rem; color: var(--mw-black); }
.quote__stars { color: var(--mw-star); letter-spacing: 2px; }

/* Inputs */
.field { display: grid; gap: .3rem; }
.field label { font-family: var(--font-util); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mw-muted); }
.field input, .field select, .field textarea { width: 100%; padding: .85rem .9rem; border: 1px solid #D8D2C2; border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; background: #fff; color: var(--mw-ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--mw-ink); outline-offset: 2px; border-color: var(--mw-ink); }

/* Visible keyboard focus everywhere (WCAG 2.4.7), hidden for mouse */
:focus-visible { outline: 3px solid var(--mw-gold-deep); outline-offset: 2px; border-radius: 4px; }
.section--dark :focus-visible, .section--navy :focus-visible, .fab:focus-visible { outline-color: var(--mw-gold-bright); }
:focus:not(:focus-visible) { outline: none; }

/* Agents */
.agent { text-align: center; }
.agent__photo { aspect-ratio: 1; border-radius: 10px; background: var(--mw-mist) center/cover no-repeat; margin-bottom: .7rem; }
.agent__name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.agent__role { font-family: var(--font-util); font-size: .82rem; color: var(--mw-muted); }

/* Blog */
.post__media { aspect-ratio: 16/9; background: var(--mw-mist) center/cover no-repeat; border-radius: 10px; margin-bottom: .8rem; }
.post__cat { font-family: var(--font-util); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mw-gold-text); }
.section--dark .post__cat { color: var(--mw-gold); }
.post h3 { font-size: 1.12rem; margin: .3rem 0; }
.post__meta { font-family: var(--font-util); font-size: .8rem; color: var(--mw-muted); }
.section--dark .post__meta { color: rgba(255,255,255,.6); }

/* ---- Phase-2 shared components (neighborhoods / blog / legal) ---- */
.agent__langs { font-family: var(--font-util); font-size: .74rem; color: var(--mw-gold-text); margin-top: .2rem; }

/* FAQ accordion (native <details>) */
.faq { display: grid; gap: .7rem; }
.faq details { background: #fff; border: 1px solid var(--mw-line); border-radius: 8px; padding: 0 1.1rem; }
.faq summary { list-style: none; cursor: pointer; font-family: var(--font-util); font-weight: 700; font-size: 1rem; color: var(--mw-ink); padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--mw-gold-deep); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { color: var(--mw-gold-text); }
.faq__a { padding: 0 0 1.1rem; color: var(--mw-muted); font-size: .98rem; }

/* Numbered process steps */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.step { background: #fff; border: 1px solid var(--mw-line); border-radius: 10px; padding: 1.3rem 1.1rem; }
.step__num { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--mw-black); background: linear-gradient(160deg, var(--mw-gold-bright), var(--mw-gold)); margin-bottom: .8rem; }
.step h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.step p { font-size: .9rem; color: var(--mw-muted); margin: 0; }

/* Checklist with gold checks */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.checklist li { position: relative; padding-left: 1.9rem; color: var(--mw-ink); }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 1.3rem; height: 1.3rem; background: var(--mw-gold); color: var(--mw-black); border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
.section--dark .checklist li, .section--navy .checklist li { color: #EDEAE2; }

/* Stat line (market stats / about) */
.statline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--mw-black); line-height: 1.05; }
.section--dark .stat__num, .section--navy .stat__num { color: #fff; }
.stat__label { font-family: var(--font-util); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mw-muted); margin-top: .3rem; }
.section--dark .stat__label, .section--navy .stat__label { color: rgba(255,255,255,.7); }

/* Responsive map / embed */
.map-embed { position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--mw-line); min-height: 300px; }
.map-embed iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }

/* Long-form legal / prose */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.5rem; margin: 2rem 0 .6rem; }
.prose h3 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
.prose p, .prose li { color: var(--mw-ink); font-size: 1rem; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1rem; display: grid; gap: .4rem; }
.prose a { color: var(--mw-gold-text); text-decoration: underline; }
.prose .legal-updated { color: var(--mw-muted); font-family: var(--font-util); font-size: .82rem; }
.prose .legal-flag { background: var(--mw-mist); border-left: 3px solid var(--mw-gold); padding: .9rem 1.1rem; border-radius: 0 6px 6px 0; font-size: .92rem; margin: 1rem 0; }

/* Cookie consent banner (also a GHL site-wide footer snippet) */
.cookie-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 70; background: var(--mw-black); color: #EDEAE2; border: 1px solid var(--mw-gold); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between; font-size: .88rem; }
.cookie-banner p { margin: 0; flex: 1 1 320px; }
.cookie-banner a { color: var(--mw-gold); text-decoration: underline; }
.cookie-banner .cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.cookie-banner.hide { display: none; }

@media (max-width: 760px) { .grid--2 { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; } .statline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* CTA band */
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta-band h2 { margin: 0; }

/* ---- Footer ---- */
.site-footer { background: var(--mw-black); color: rgba(237,234,226,.78); font-size: .92rem; }
.site-footer .container { padding-block: 3.2rem calc(1.8rem + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 2rem; }
.site-footer h4 { color: #fff; font-family: var(--font-util); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.site-footer a { color: rgba(237,234,226,.78); display: block; padding: .22rem 0; }
.site-footer a:hover { color: var(--mw-gold); }
.office { margin-top: .9rem; }
.office b { color: #fff; }
.office .tag { font-family: var(--font-util); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mw-gold); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.4rem; padding-top: 1.4rem; font-size: .78rem; color: rgba(237,234,226,.55); display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.eho { display: inline-flex; align-items: center; gap: .5rem; }
.eho__mark { width: 26px; height: 26px; border: 2px solid currentColor; border-radius: 4px; display: grid; place-items: center; font-weight: 800; font-family: var(--font-util); font-size: .9rem; }

/* ---- Floating WhatsApp + chat ---- */
.float-stack { position: fixed; right: calc(18px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; gap: 12px; }
.fab { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow-lg); border: 0; cursor: pointer; color: #fff; }
.fab--wa { background: #25D366; }
.fab--chat { background: var(--mw-black); color: var(--mw-gold); border: 2px solid var(--mw-gold); }
.fab svg { width: 28px; height: 28px; }
.fab--wa::after { content: "WhatsApp"; position: absolute; right: 70px; background: var(--mw-black); color:#fff; font-family: var(--font-util); font-size:.72rem; padding:.35rem .6rem; border-radius:5px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; }
.fab--wa:hover::after { opacity:1; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__content { order: -1; }   /* form leads above the fold on phones */
  .hero__media { order: 0; }
  .feature { grid-template-columns: 1fr; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav { position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--mw-line); padding: .5rem 1rem 1.2rem; box-shadow: var(--shadow); display: none; }
  .nav.is-open { display: flex; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--mw-line); }
  .nav__cta { padding-top: .8rem; }
  .nav-toggle { display: block; }
}
@media (max-width: 560px) {
  .grid--3 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr 1fr; }      /* neighborhoods/why/team: 2-up, less scrolling */
  .pillars { grid-template-columns: 1fr 1fr; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .trust .sep { display: none; }
  .trust .container { gap: .5rem 1.2rem; font-size: .8rem; }
  /* Topbar: drop the long tagline, give the toggle + phone real tap area */
  .topbar .container { justify-content: center; }
  .topbar .container > span:first-child { display: none; }
  .lang-toggle { display: flex; align-items: center; gap: .25rem; }
  .lang-toggle a { padding: .72rem .6rem; }
  /* Footer links: comfortable thumb targets */
  .site-footer a { padding: .55rem 0; }
  /* Phone CTA in the mortgage band: tappable line */
  .section--navy a[href^="tel"] { display: inline-block; padding: .35rem 0; }
  /* Stack the two hardest fields (name/phone) in the hero valuation form */
  .val-card .grid--2 { grid-template-columns: 1fr; }
  /* Clear the fixed FAB stack so it never covers footer links/disclosures or the final CTA */
  .site-footer .container { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  .cta-band .container { padding-right: 88px; padding-bottom: 88px; }
}
@media (max-width: 380px) {
  .grid--4 { grid-template-columns: 1fr; }          /* very small phones: single column */
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto; } }