/* ══════════════════════════════════════════════
   DIAMANTE RANGEL SILVA — BHHS Chicago
   Black & White Minimalist — Luxury Real Estate
══════════════════════════════════════════════ */

/* ── CUSTOM PROPERTIES ── */
:root {
  --black:      #0a0a0a;
  --near-black: #111111;
  --dark:       #222222;
  --mid:        #555555;
  --muted:      #888888;
  --border:     #e0e0e0;
  --bg:         #f5f5f5;
  --bg-light:   #fafafa;
  --white:      #ffffff;
}

/* ── RESET & BASE ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html  { scroll-behavior:smooth }
body  { font-family:'Inter',system-ui,sans-serif; color:var(--dark); background:var(--white); overflow-x:hidden; line-height:1.65 }
img   { width:100%; height:100%; object-fit:cover; display:block }
a     { text-decoration:none; color:inherit; transition:color .2s }
ul    { list-style:none }
input,select,textarea,button { font-family:inherit; outline:none; border:none; background:none }
.container { max-width:1200px; margin:0 auto; padding:0 32px }

/* ── TYPOGRAPHY ── */
h1 { font-family:'Playfair Display',Georgia,serif; font-size:clamp(2.2rem,4.5vw,3.6rem); line-height:1.08; font-weight:700 }
h2 { font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.18; font-weight:600 }
h3 { font-size:1.05rem; font-weight:700; color:var(--black) }
h1 em, h2 em { font-style:italic; font-weight:400 }
.section-label { font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:12px }
.section-label.light { color:rgba(255,255,255,.5) }
.section-sub { color:var(--mid); margin-top:14px; max-width:580px; font-size:.93rem }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--black); color:var(--white);
  padding:14px 28px; border-radius:4px;
  font-weight:600; font-size:.88rem; cursor:pointer;
  transition:all .2s; border:2px solid var(--black);
  white-space:nowrap
}
.btn-primary:hover { background:var(--dark); border-color:var(--dark); transform:translateY(-1px) }
.btn-primary.full  { width:100%; justify-content:center; padding:16px; font-size:.95rem }

.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  border:2px solid rgba(255,255,255,.55); color:var(--white);
  padding:13px 28px; border-radius:4px;
  font-weight:600; font-size:.88rem; cursor:pointer;
  transition:all .2s; white-space:nowrap
}
.btn-ghost:hover { background:rgba(255,255,255,.12); border-color:var(--white) }

.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  border:2px solid var(--black); color:var(--black);
  padding:12px 24px; border-radius:4px;
  font-weight:600; font-size:.88rem; cursor:pointer;
  transition:all .2s; white-space:nowrap
}
.btn-outline:hover { background:var(--black); color:var(--white) }

.btn-white {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); color:var(--black);
  padding:13px 28px; border-radius:4px;
  font-weight:600; font-size:.88rem; cursor:pointer;
  transition:all .2s; border:2px solid var(--white); white-space:nowrap
}
.btn-white:hover { background:transparent; color:var(--white) }

/* ── NAV ── */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; transition:all .3s }
.nav.scrolled { background:rgba(255,255,255,.97); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--border) }
.nav-inner { max-width:1200px; margin:0 auto; padding:0 32px; display:flex; align-items:center; gap:28px; height:70px }
.logo { flex-shrink:0 }
.logo-main { display:flex; flex-direction:column; gap:1px }
.logo-main strong { font-family:'Playfair Display',serif; font-size:.95rem; font-weight:700; color:rgba(255,255,255,.95); line-height:1.2 }
.logo-sub { font-size:.65rem; letter-spacing:.06em; color:rgba(255,255,255,.5); text-transform:uppercase }
.nav.scrolled .logo-main strong { color:var(--black) }
.nav.scrolled .logo-sub { color:var(--muted) }
.nav-links { display:flex; gap:24px; margin-left:auto }
.nav-links a { font-size:.82rem; font-weight:500; color:rgba(255,255,255,.8); transition:color .2s }
.nav.scrolled .nav-links a { color:var(--mid) }
.nav-links a:hover, .nav-links a.active { color:var(--white) }
.nav.scrolled .nav-links a:hover, .nav.scrolled .nav-links a.active { color:var(--black) }
.nav-cta { background:var(--white); color:var(--black); padding:9px 18px; border-radius:4px; font-size:.82rem; font-weight:700; white-space:nowrap; transition:all .2s; flex-shrink:0 }
.nav-cta:hover { background:var(--bg); }
.nav.scrolled .nav-cta { background:var(--black); color:var(--white) }
.nav.scrolled .nav-cta:hover { background:var(--dark) }
.hamburger { display:none; font-size:1.3rem; cursor:pointer; color:rgba(255,255,255,.9); background:none; padding:4px }
.nav.scrolled .hamburger { color:var(--black) }

/* ── NAV DROPDOWN ── */
.nav-dropdown { position:relative }
.nav-dropdown-toggle { display:flex; align-items:center; gap:4px; cursor:pointer }
.nav-dropdown-menu { display:none; position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%); background:#0a0a0a; border:1px solid rgba(255,255,255,.1); border-radius:4px; min-width:220px; padding:8px 0; z-index:200; box-shadow:0 12px 40px rgba(0,0,0,.4) }
.nav.scrolled .nav-dropdown-menu { background:var(--white); border-color:var(--border); box-shadow:0 12px 40px rgba(0,0,0,.12) }
.nav-dropdown-menu li { list-style:none }
.nav-dropdown-menu li a { display:block; padding:10px 20px; font-size:.8rem; font-weight:500; color:rgba(255,255,255,.8); white-space:nowrap; transition:background .15s,color .15s }
.nav.scrolled .nav-dropdown-menu li a { color:var(--mid) }
.nav-dropdown-menu li a:hover { background:rgba(255,255,255,.06); color:#fff }
.nav.scrolled .nav-dropdown-menu li a:hover { background:var(--bg); color:var(--black) }
.nav-dropdown:hover .nav-dropdown-menu { display:block }

/* ── LISTING SEARCH ── */
.listing-search { background:var(--white); padding:72px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.listing-search-inner { display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap }
.listing-search-text .section-label { margin-bottom:10px }
.listing-search-text h2 { font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.6rem,3vw,2.2rem); color:var(--black); font-weight:700; line-height:1.15 }
.listing-search-form { display:flex; gap:0; flex:1; max-width:560px; border:1.5px solid var(--black); border-radius:2px; overflow:hidden }
.listing-search-form input { flex:1; background:var(--white); color:var(--black); font-size:.9rem; padding:16px 20px; outline:none; border:none; min-width:0 }
.listing-search-form input::placeholder { color:var(--muted) }
.listing-search-form button { background:var(--black); color:var(--white); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:16px 28px; white-space:nowrap; cursor:pointer; border:none; transition:background .2s; flex-shrink:0 }
.listing-search-form button:hover { background:var(--dark) }

/* ── CMA ACCENT ── */
.cma-accent { padding:104px 0; background:var(--bg); border-top:1px solid var(--border) }
.cma-accent-inner { display:grid; grid-template-columns:1fr 380px; gap:80px; align-items:center }
.cma-accent-left .section-label { margin-bottom:14px }
.cma-accent-left h2 { font-family:'Playfair Display',Georgia,serif; font-size:clamp(2rem,4vw,3rem); line-height:1.12; font-weight:700; margin-bottom:20px }
.cma-accent-left h2 em { font-style:italic; font-weight:400 }
.cma-accent-left > p { color:var(--mid); font-size:.94rem; line-height:1.8; max-width:520px; margin-bottom:28px }
.cma-accent-list { list-style:none; display:flex; flex-direction:column; gap:12px }
.cma-accent-list li { display:flex; align-items:flex-start; gap:12px; font-size:.88rem; color:var(--dark); font-weight:500 }
.cma-accent-list li span { color:var(--black); font-size:.7rem; margin-top:3px; flex-shrink:0 }
.cma-accent-card { background:var(--black); border-radius:4px; padding:36px 32px; }
.cma-accent-card-label { font-size:.65rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:28px }
.cma-accent-stat { display:flex; flex-direction:column; gap:4px; padding:20px 0 }
.cma-stat-num { font-family:'Playfair Display',Georgia,serif; font-size:2.8rem; font-weight:700; color:var(--white); line-height:1 }
.cma-stat-label { font-size:.78rem; color:rgba(255,255,255,.5); font-weight:500 }
.cma-accent-divider { height:1px; background:rgba(255,255,255,.08) }
.btn-cma-card { display:block; text-align:center; background:var(--white); color:var(--black); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:14px 24px; border-radius:2px; margin-top:28px; transition:background .2s }
.btn-cma-card:hover { background:rgba(255,255,255,.88) }

/* ── MOBILE NAV DRAWER ── */
.nav-links.open {
  display:flex; flex-direction:column; gap:0;
  position:absolute; top:70px; left:0; right:0;
  background:rgba(255,255,255,.99); backdrop-filter:blur(16px);
  padding:8px 32px 24px; box-shadow:0 8px 40px rgba(0,0,0,.1);
  z-index:999; border-top:1px solid var(--border)
}
.nav-links.open a { color:var(--dark); padding:13px 0; border-bottom:1px solid var(--bg); font-size:.9rem }
.nav-links.open a:last-child { border-bottom:none }
.nav-links.open a:hover, .nav-links.open a.active { color:var(--black) }

/* ── HERO ── */
.hero { position:relative; min-height:100vh; display:flex; align-items:center }
.hero-media { position:absolute; inset:0 }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.32) 100%) }
.hero-content { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:140px 32px 100px; width:100% }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.85); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:8px 18px; border-radius:2px; margin-bottom:28px }
.hero-content h1 { color:var(--white); max-width:700px; margin-bottom:20px }
.hero-content p  { color:rgba(255,255,255,.7); font-size:1.05rem; max-width:520px; margin-bottom:40px; line-height:1.75 }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:60px }
.hero-proof { display:flex; gap:36px; align-items:center; flex-wrap:wrap }
.proof-item { display:flex; flex-direction:column; gap:3px }
.proof-num  { font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:700; color:var(--white) }
.proof-item span:last-child { font-size:.7rem; color:rgba(255,255,255,.5); letter-spacing:.06em; text-transform:uppercase }
.proof-divider { width:1px; height:38px; background:rgba(255,255,255,.18) }

/* ── HOW IT WORKS ── */
.how { padding:104px 0; background:var(--white); border-top:1px solid var(--border) }
.how h2 { text-align:center; margin-bottom:56px; margin-top:10px }
.steps-grid { display:flex; align-items:flex-start; gap:0 }
.step { flex:1; padding:40px 36px; background:var(--bg-light); border:1px solid var(--border); border-radius:2px; position:relative }
.step-num { font-family:'Playfair Display',serif; font-size:3rem; font-weight:700; color:var(--border); margin-bottom:14px; line-height:1 }
.step h3   { font-size:1.1rem; margin-bottom:12px; color:var(--black) }
.step p    { font-size:.87rem; color:var(--mid); line-height:1.8; margin-bottom:16px }
.step-link { font-size:.82rem; font-weight:700; color:var(--black); border-bottom:1px solid var(--border); padding-bottom:2px; transition:border-color .2s }
.step-link:hover { border-color:var(--black) }
.step-arrow { font-size:1.2rem; color:var(--border); padding:0 6px; align-self:center; flex-shrink:0 }

/* ── ABOUT ── */
.about { padding:104px 0; background:var(--bg) }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.about-img  { position:relative }

/* Photo — shows headshot if file exists, falls back to initials */
.photo-wrap { height:520px; border-radius:2px; overflow:hidden; background:var(--black); position:relative }
.agent-headshot { width:100%; height:100%; object-fit:cover; object-position:top center }
.photo-placeholder-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px }
.photo-wrap:not(.photo-fallback) .photo-placeholder-inner { display:none }
.initials-circle { width:96px; height:96px; border-radius:50%; border:2px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; color:rgba(255,255,255,.7) }
.photo-placeholder-inner p { color:rgba(255,255,255,.55); font-size:.85rem; font-weight:500; letter-spacing:.06em }

.about-stats-card { position:absolute; bottom:-28px; right:-28px; background:var(--white); border:1px solid var(--border); border-radius:2px; padding:22px 28px; box-shadow:0 8px 40px rgba(0,0,0,.08); display:flex; gap:24px }
.astat   { display:flex; flex-direction:column; align-items:center; gap:2px }
.astat-n { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; color:var(--black) }
.astat-l { font-size:.7rem; color:var(--muted); font-weight:500; letter-spacing:.06em; text-transform:uppercase }

.about-text     { padding-left:16px }
.about-text h2  { margin-bottom:20px; margin-top:10px }
.about-text p   { color:var(--mid); line-height:1.85; margin-bottom:16px; font-size:.93rem }
.about-text strong { color:var(--black) }
.awards  { display:flex; flex-direction:column; gap:10px; margin-top:24px }
.award   { font-size:.83rem; font-weight:600; color:var(--dark); display:flex; align-items:center; gap:8px }

/* ── NEIGHBORHOODS + MAP ── */
.neighborhoods { padding:104px 0; background:var(--white); border-top:1px solid var(--border) }
.neighborhoods h2 { margin-top:10px; margin-bottom:8px }

/* Filter pills */
.hood-filters { display:flex; gap:8px; flex-wrap:wrap; margin:24px 0 20px }
.hood-filter { padding:8px 18px; border-radius:20px; border:1.5px solid var(--border); font-size:.78rem; font-weight:600; color:var(--mid); cursor:pointer; background:var(--white); transition:all .2s }
.hood-filter:hover { border-color:var(--black); color:var(--black) }
.hood-filter.active { background:var(--black); color:var(--white); border-color:var(--black) }

/* Full-width map */
.map-full-wrap { position:relative; border:1px solid var(--border); border-radius:2px 2px 0 0; overflow:hidden }
#map { height:520px; width:100% }
.map-hint { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); background:rgba(10,10,10,.82); color:#fff; font-size:.75rem; font-weight:600; padding:7px 18px; border-radius:20px; pointer-events:none; white-space:nowrap; letter-spacing:.04em; transition:opacity .3s }

/* Neighborhood detail panel */
.hood-detail { border:1.5px solid var(--black); border-top:3px solid var(--black); background:var(--white) }
.hood-detail-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:28px 32px 20px; flex-wrap:wrap; border-bottom:1px solid var(--border) }
.hood-detail-tier { font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:5px }
.hood-detail-header h3 { font-size:1.3rem; font-weight:700; color:var(--black); margin-bottom:4px }
.hood-detail-actions { display:flex; gap:12px; align-items:center; flex-shrink:0; flex-wrap:wrap }
.hood-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }
.hd-cat { padding:22px 28px; border-right:1px solid var(--border) }
.hd-cat:last-child { border-right:none }
.hd-cat-title { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px }
.hd-cat ul { list-style:none; display:flex; flex-direction:column; gap:5px }
.hd-cat ul li { font-size:.8rem; color:var(--dark); line-height:1.5 }
.hd-cat ul li::before { content:'· '; color:var(--muted) }

/* ── ACTIVE LISTINGS ── */
.listings { padding:104px 0; background:var(--bg); border-top:1px solid var(--border) }
.listings-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:44px; gap:24px; flex-wrap:wrap }
.listings-header h2 { margin-top:10px }

.listing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:40px }
.listing-card { background:var(--white); border:1px solid var(--border); border-radius:2px; overflow:hidden; transition:all .25s }
.listing-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.1); transform:translateY(-3px) }

.listing-img-wrap { display:block; position:relative; aspect-ratio:4/3; overflow:hidden }
.listing-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s }
.listing-card:hover .listing-img-wrap img { transform:scale(1.04) }
.listing-badge { position:absolute; top:12px; left:12px; background:var(--black); color:var(--white); font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:2px }
.listing-badge.coming-soon { background:#6b4c0a }
.listing-badge.under-contract { background:#2a5a2a }
.listing-loc { position:absolute; bottom:12px; left:12px; background:rgba(255,255,255,.92); color:var(--black); font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:2px }

.listing-body { padding:22px 22px 24px }
.listing-price { font-family:'Playfair Display',serif; font-size:1.35rem; font-weight:700; color:var(--black); margin-bottom:6px }
.listing-addr  { font-size:.85rem; font-weight:600; color:var(--dark); margin-bottom:10px; line-height:1.4 }
.listing-meta  { display:flex; gap:12px; font-size:.77rem; color:var(--muted); font-weight:500; margin-bottom:12px }
.listing-meta span::after { content:'·'; margin-left:12px }
.listing-meta span:last-child::after { content:none }
.listing-desc  { font-size:.8rem; color:var(--mid); line-height:1.7; margin-bottom:16px }
.listing-link  { font-size:.8rem; font-weight:700; color:var(--black); border-bottom:1px solid var(--border); padding-bottom:2px; transition:border-color .2s }
.listing-link:hover { border-color:var(--black) }

.listings-cta { text-align:center; padding:32px; background:var(--white); border:1px solid var(--border); border-radius:2px }
.listings-cta p { color:var(--mid); font-size:.88rem; margin-bottom:18px }

/* ── COMMERCIAL ── */
.commercial { padding:104px 0; background:var(--black) }
.comm-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:52px; flex-wrap:wrap; gap:24px }
.comm-header h2 { color:var(--white); margin-top:10px }
.comm-sub { color:rgba(255,255,255,.5); margin-top:10px; max-width:480px; font-size:.88rem }
.comm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.08) }
.comm-card { background:var(--black); padding:32px; transition:background .25s }
.comm-card:hover { background:rgba(255,255,255,.05) }
.comm-card.highlight { background:rgba(255,255,255,.04) }
.comm-icon { font-size:1.6rem; margin-bottom:14px }
.comm-card h3 { font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:10px }
.comm-card p   { font-size:.82rem; color:rgba(255,255,255,.4); line-height:1.7; margin-bottom:14px }
.comm-meta { font-size:.75rem; color:rgba(255,255,255,.35); font-weight:600; letter-spacing:.04em }

/* ── RESOURCES ── */
.resources { padding:104px 0; background:var(--white); border-top:1px solid var(--border) }
.resources h2 { margin-top:10px; margin-bottom:36px }

.res-tabs { display:flex; gap:0; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:0 }
.res-tab { padding:13px 20px; font-size:.8rem; font-weight:600; cursor:pointer; color:var(--muted); border:1px solid transparent; border-bottom:none; transition:all .2s; background:none; white-space:nowrap; margin-bottom:-1px }
.res-tab:hover { color:var(--black) }
.res-tab.active { color:var(--black); background:var(--white); border-color:var(--border); border-bottom-color:var(--white); border-bottom:2px solid var(--white) }

.res-panel { display:none }
.res-panel.active { display:block }
.res-panel-inner { border:1px solid var(--border); border-top:none; padding:44px; background:var(--white) }

.tool-intro { margin-bottom:32px }
.tool-intro h3 { font-size:1.2rem; margin-bottom:8px; color:var(--black) }
.tool-intro p  { color:var(--mid); font-size:.88rem; max-width:560px }

.calc-form { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin-bottom:32px }
.calc-field { display:flex; flex-direction:column; gap:7px; flex:1; min-width:200px }
.calc-field label { font-size:.75rem; font-weight:700; color:var(--dark); letter-spacing:.04em; text-transform:uppercase }
.calc-field select, .calc-field input {
  border:1.5px solid var(--border); border-radius:2px; padding:11px 14px;
  font-size:.87rem; color:var(--black); background:var(--white); transition:border-color .2s;
  cursor:pointer
}
.calc-field select:focus, .calc-field input:focus { border-color:var(--black) }

.tool-result { border:1px solid var(--border); border-radius:2px; padding:28px; background:var(--bg-light) }
.tool-disclaimer { font-size:.72rem; color:var(--muted); margin-top:16px; font-style:italic }

/* Commute result */
.commute-card { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px }
.commute-stat { border:1px solid var(--border); border-radius:2px; padding:20px 22px; background:var(--white) }
.commute-stat-label { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px }
.commute-stat-val   { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; color:var(--black); margin-bottom:4px }
.commute-stat-note  { font-size:.75rem; color:var(--mid) }
.commute-metra { margin-top:20px; padding:16px 20px; background:var(--black); color:var(--white); border-radius:2px; display:flex; gap:16px; align-items:center; font-size:.83rem }
.commute-metra strong { font-size:.9rem }

/* Nearby result */
.nearby-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px }
.nearby-cat { border:1px solid var(--border); border-radius:2px; padding:20px }
.nearby-cat-title { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px }
.nearby-cat ul { list-style:none }
.nearby-cat li { font-size:.82rem; color:var(--dark); padding:4px 0; border-bottom:1px solid var(--bg); display:flex; gap:6px }
.nearby-cat li:last-child { border-bottom:none }

/* Closing cost result */
.closing-card { display:grid; grid-template-columns:1fr 1fr; gap:24px }
.closing-items { display:flex; flex-direction:column; gap:10px }
.closing-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:.85rem }
.closing-row:last-child { border-bottom:none }
.closing-row .cr-label { color:var(--mid) }
.closing-row .cr-val   { font-weight:600; color:var(--dark) }
.closing-total { padding:20px; background:var(--black); color:var(--white); border-radius:2px; display:flex; flex-direction:column; gap:6px; align-self:start }
.closing-total-label { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5) }
.closing-total-val   { font-family:'Playfair Display',serif; font-size:2rem; font-weight:700 }
.closing-total-note  { font-size:.72rem; color:rgba(255,255,255,.4) }

.input-prefix-wrap { position:relative }
.input-prefix { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:.87rem; color:var(--mid); pointer-events:none }
.input-prefix-wrap input { padding-left:26px }

.toggle-group { display:flex; gap:0; border:1.5px solid var(--border); border-radius:2px; overflow:hidden }
.toggle-btn { flex:1; padding:10px 20px; font-size:.85rem; font-weight:600; cursor:pointer; background:var(--white); color:var(--mid); transition:all .2s; border:none }
.toggle-btn.active { background:var(--black); color:var(--white) }
.toggle-btn:hover:not(.active) { background:var(--bg) }

/* City vs suburbs */
.comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px }
.compare-col { border:1px solid var(--border); border-radius:2px; overflow:hidden }
.compare-header { padding:20px 24px; background:var(--bg); border-bottom:1px solid var(--border) }
.compare-badge { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px }
.compare-header h4 { font-size:1rem; font-weight:700; color:var(--black) }
.compare-list { list-style:none; padding:16px 24px; display:flex; flex-direction:column; gap:0 }
.compare-list li { font-size:.83rem; padding:9px 0; border-bottom:1px solid var(--bg); line-height:1.5 }
.compare-list li:last-child { border-bottom:none }
.compare-list li.pro { color:var(--dark) }
.compare-list li.con { color:var(--muted) }
.compare-stat { padding:16px 24px; background:var(--black); color:rgba(255,255,255,.6); font-size:.78rem; font-weight:600 }

.compare-verdict { padding:24px 28px; background:var(--bg); border:1px solid var(--border); border-radius:2px; font-size:.88rem; color:var(--mid); line-height:1.75 }
.compare-verdict strong { color:var(--black) }

/* Market reports articles */
.resources-articles { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.resource-card.article { background:var(--white); border:1px solid var(--border); border-radius:2px; padding:24px; transition:all .25s }
.resource-card.article:hover { box-shadow:0 8px 28px rgba(0,0,0,.08); transform:translateY(-2px) }
.resource-tag { font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px }
.resource-card h3 { font-size:.92rem; font-weight:700; color:var(--black); margin-bottom:8px; line-height:1.45 }
.resource-card p { font-size:.8rem; color:var(--mid); line-height:1.7; margin-bottom:16px }
.resource-link { font-size:.8rem; font-weight:700; color:var(--black); border-bottom:1px solid var(--border); padding-bottom:2px; transition:border-color .2s }
.resource-link:hover { border-color:var(--black) }

/* ── REVIEWS ── */
.reviews { padding:104px 0; background:var(--bg); border-top:1px solid var(--border) }
.reviews h2 { margin-top:10px; margin-bottom:48px }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.reviews-placeholder { padding:40px 0; color:var(--muted); font-size:.95rem }
.reviews-placeholder a { color:var(--black); font-weight:600 }
.review-card { background:var(--white); border:1px solid var(--border); border-radius:2px; padding:28px }
.review-stars { color:var(--black); font-size:1rem; margin-bottom:14px; letter-spacing:3px }
.review-card p { font-size:.86rem; color:var(--mid); line-height:1.8; font-style:italic; margin-bottom:20px }
.reviewer { display:flex; align-items:center; gap:12px }
.reviewer-av { width:40px; height:40px; border-radius:50%; background:var(--black); color:var(--white); font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.reviewer strong { display:block; font-size:.84rem; color:var(--black) }
.reviewer span   { font-size:.73rem; color:var(--muted) }

/* ── CMA BANNER ── */
.cma-banner { background:var(--black); padding:88px 0; }
.cma-banner--large { padding:112px 0; }
.cma-banner--large .cma-banner-text h2 { font-size:clamp(2rem,4.5vw,3.2rem); }
.cma-banner--large .cma-banner-text p { font-size:1.02rem; max-width:560px; }
.cma-banner--large .btn-cma { font-size:.9rem; padding:20px 40px; }
.cma-banner--large .cma-note { font-size:.78rem; }
.cma-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap }
.cma-banner-text { flex:1; min-width:260px }
.cma-banner-text h2 { font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.7rem,3.5vw,2.5rem); color:var(--white); line-height:1.15; margin:10px 0 16px; font-weight:700 }
.cma-banner-text h2 em { font-style:italic; font-weight:400 }
.cma-banner-text p { color:rgba(255,255,255,.58); font-size:.94rem; line-height:1.75; max-width:480px }
.cma-banner-action { display:flex; flex-direction:column; align-items:flex-start; gap:12px; flex-shrink:0 }
.btn-cma { display:inline-block; background:var(--white); color:var(--black); font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:16px 32px; border-radius:2px; transition:background .2s,color .2s; white-space:nowrap }
.btn-cma:hover { background:rgba(255,255,255,.88) }
.cma-note { font-size:.72rem; color:rgba(255,255,255,.35); font-weight:500; letter-spacing:.04em }

/* ── CONTACT ── */
.contact { padding:104px 0; background:var(--white); border-top:1px solid var(--border) }
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:start }
.contact-left h2 { margin-top:10px; margin-bottom:16px }
.contact-left > p { color:var(--mid); line-height:1.8; margin-bottom:32px; font-size:.93rem }
.contact-info-list { display:flex; flex-direction:column; gap:12px; margin-bottom:28px }
.cinfo { display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--dark); line-height:1.5 }
.cinfo a { color:var(--dark); border-bottom:1px solid var(--border); transition:border-color .2s }
.cinfo a:hover { color:var(--black); border-color:var(--black) }
.social-row { display:flex; gap:10px; flex-wrap:wrap }
.social-row a { font-size:.78rem; font-weight:600; color:var(--dark); border:1.5px solid var(--border); padding:7px 14px; border-radius:2px; transition:all .2s }
.social-row a:hover { background:var(--black); color:var(--white); border-color:var(--black) }

.contact-form { background:var(--bg-light); border:1px solid var(--border); border-radius:2px; padding:40px; display:flex; flex-direction:column; gap:16px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form-group { display:flex; flex-direction:column; gap:6px }
.form-group label { font-size:.72rem; font-weight:700; color:var(--dark); letter-spacing:.05em; text-transform:uppercase }
.form-group input, .form-group select, .form-group textarea {
  border:1.5px solid var(--border); border-radius:2px; padding:11px 14px;
  font-size:.87rem; color:var(--black); background:var(--white); transition:border-color .2s
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--black) }
.form-group input::placeholder, .form-group textarea::placeholder { color:#b0b0b0 }
.form-note { font-size:.72rem; color:var(--muted); text-align:center }

/* ── FOOTER ── */
.footer { background:var(--black); padding:72px 0 0 }
.footer-top { display:grid; grid-template-columns:1.5fr 2fr; gap:64px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.07) }
.footer-logo { margin-bottom:14px }
.footer-logo strong { font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--white); display:block; margin-bottom:4px }
.footer-logo span { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35) }
.footer-brand p { font-size:.8rem; color:rgba(255,255,255,.3); line-height:1.8; max-width:300px }
.footer-addr { margin-top:10px !important; font-size:.74rem !important; color:rgba(255,255,255,.2) !important }
.footer-addr a { color:rgba(255,255,255,.3); transition:color .2s }
.footer-addr a:hover { color:rgba(255,255,255,.6) }
.footer-links { display:grid; grid-template-columns:repeat(4,1fr); gap:32px }
.footer-col { display:flex; flex-direction:column; gap:2px }
.footer-col h4 { font-size:.67rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:14px }
.footer-col a { font-size:.79rem; color:rgba(255,255,255,.3); padding:4px 0; transition:color .2s }
.footer-col a:hover { color:rgba(255,255,255,.7) }
.footer-bottom { padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px }
.footer-bottom p { font-size:.72rem; color:rgba(255,255,255,.2) }
.footer-bottom a { color:rgba(255,255,255,.3); transition:color .2s }
.footer-bottom a:hover { color:rgba(255,255,255,.6) }

/* ── RESPONSIVE — 1024px ── */
@media(max-width:1024px) {
  .steps-grid { flex-direction:column }
  .step-arrow { transform:rotate(90deg); align-self:center }
  .about-grid { grid-template-columns:1fr; gap:60px }
  .about-text  { padding-left:0 }
  .photo-wrap  { height:400px }
  .about-stats-card { right:0; bottom:-20px }
  #map { height:380px }
  .hood-detail-grid { grid-template-columns:repeat(2,1fr) }
  .hd-cat:nth-child(2n) { border-right:none }
  .hd-cat { border-bottom:1px solid var(--border) }
  .comm-grid   { grid-template-columns:repeat(2,1fr); gap:1px }
  .listing-grid   { grid-template-columns:repeat(2,1fr) }
  .reviews-grid   { grid-template-columns:repeat(2,1fr) }
  .resources-articles { grid-template-columns:repeat(2,1fr) }
  .contact-grid   { grid-template-columns:1fr; gap:48px }
  .footer-top     { grid-template-columns:1fr }
  .footer-links   { grid-template-columns:repeat(2,1fr) }
  .closing-card   { grid-template-columns:1fr }
  .comparison-grid { grid-template-columns:1fr }
  .res-panel-inner { padding:28px }
}

/* ── RESPONSIVE — 768px ── */
@media(max-width:768px) {
  .nav-links, .nav-cta { display:none }
  .hamburger { display:block }
  .hero-proof { gap:20px }
  .proof-divider { display:none }
  .steps-grid { gap:12px }
  .about-stats-card { position:static; margin-top:24px; justify-content:center }
  #map { height:320px }
  .hood-detail-grid { grid-template-columns:1fr }
  .hd-cat { border-right:none; border-bottom:1px solid var(--border) }
  .hood-detail-header { padding:20px }
  .hd-cat { padding:16px 20px }
  .listing-grid { grid-template-columns:1fr }
  .comm-grid   { grid-template-columns:1fr; gap:1px }
  .reviews-grid, .reviews-placeholder { grid-template-columns:1fr }
  .resources-articles { grid-template-columns:1fr }
  .form-row    { grid-template-columns:1fr }
  .comm-header { flex-direction:column; align-items:flex-start }
  .listings-header { flex-direction:column }
  .footer-links { grid-template-columns:repeat(2,1fr) }
  .footer-bottom { flex-direction:column; text-align:center }
  .calc-form { flex-direction:column }
  .res-tabs { border-bottom:none; flex-direction:column; gap:4px; margin-bottom:16px }
  .res-tab { border:1px solid var(--border) !important; border-radius:2px; margin-bottom:0 }
  .res-tab.active { background:var(--black); color:var(--white); border-color:var(--black) !important }
  .res-panel-inner { padding:20px }
  .nearby-grid { grid-template-columns:1fr }
  .commute-card { grid-template-columns:1fr }
  .comparison-grid { grid-template-columns:1fr }
  .cma-banner-inner { flex-direction:column; text-align:center }
  .cma-banner-action { align-items:center; width:100% }
  .btn-cma { width:100%; text-align:center }
  .cma-banner-text p { max-width:100% }
  .cma-accent-inner { grid-template-columns:1fr }
  .cma-accent-card { padding:28px 24px }
  .nav-dropdown-menu { left:0; transform:none }
  .listing-search-inner { flex-direction:column; align-items:flex-start }
  .listing-search-form { max-width:100%; width:100%; flex-direction:column; border:none; gap:10px; overflow:visible }
  .listing-search-form input { border:1.5px solid var(--black); border-radius:2px; }
  .listing-search-form button { border-radius:2px; text-align:center }
}