/* ---------- Tokens ---------- */
:root {
  --black: #141414;
  --near-black: #1f1f1f;
  --white: #ffffff;
  --off-white: #f6f6f4;
  --gray-100: #ececea;
  --gray-200: #dedcd8;
  --gray-300: #c7c5c0;
  --gray-500: #8f8d88;
  --gray-700: #4a4945;
  --radius: 4px;
  --container: 1200px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: 2px solid var(--black);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn-dark { background: var(--black); color: var(--white); }
.btn-dark:hover { background: var(--near-black); transform: translateY(-1px); }
.btn-light { background: var(--white); color: var(--black); }
.btn-light:hover { background: var(--gray-100); }
.btn-outline { background: transparent; color: var(--black); border-color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
.btn-block { display: block; width: 100%; }

/* ---------- Top bar ---------- */
.topbar { background: var(--black); color: var(--gray-300); font-size: 0.8rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; }
.topbar-phone { color: var(--white); font-weight: 600; }
.topbar-tag { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; background: var(--white); z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; gap: 24px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex-shrink: 0; }
.logo-text { font-weight: 800; letter-spacing: 0.02em; font-size: 1.5rem; line-height: 1.1; }
.logo-thin { display: block; font-weight: 400; font-size: 0.85rem; letter-spacing: 0.2em; color: var(--gray-500); }
.logo-broker-img { display: block; width: 170px; max-width: 100%; height: auto; margin-top: 6px; }

.site-header--home .header-inner { align-items: flex-start; }
.site-header--home .logo { align-items: flex-start; }
.site-header--home .logo-img {
  width: 190px;
  height: 190px;
  margin-bottom: -110px;
  position: relative;
  z-index: 5;
  border: 4px solid var(--white);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
@media (max-width: 640px) {
  .site-header--home .logo-img { width: 130px; height: 130px; margin-bottom: -60px; border-width: 3px; }
}

.main-nav { display: flex; gap: 28px; align-items: center; }
.main-nav a { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-700); padding: 6px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a.active { color: var(--black); border-bottom-color: var(--black); }
.nav-cta-mobile { display: none; }

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone { display: none; font-weight: 700; font-size: 0.9rem; }
.header-cta { padding: 12px 22px; }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 30px; background: none; border: none; cursor: pointer; padding: 0; }
.nav-toggle span { display: block; height: 2px; background: var(--black); width: 100%; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--black);
  color: var(--black);
  padding: 100px 24px 120px;
  overflow: hidden;
}
.hero-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.22) 100%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; text-align: center; }
.hero-text-panel {
  display: inline-block;
  padding: 28px 40px;
  margin-bottom: 32px;
}
.hero-eyebrow { text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.75rem; color: var(--gray-700); margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin-bottom: 18px; }
.hero p.lead { font-size: 1.15rem; color: var(--gray-700); max-width: 640px; margin: 0 auto; }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
.hero-logo-img { max-width: 320px; width: 100%; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 2px 18px rgba(0,0,0,0.35)); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.search-bar {
  background: var(--white);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}
.search-bar input {
  flex: 1;
  min-width: 180px;
  border: none;
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--black);
  outline: none;
}
.search-bar button { flex-shrink: 0; }

/* ---------- Filter panel ---------- */
.listings-search { max-width: 720px; margin: 0 auto 32px; }
.filter-wrap { margin-top: 12px; }
.filter-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--gray-200); background: var(--white);
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--black);
}
.filter-toggle:hover { border-color: var(--black); }
.filter-toggle svg { width: 14px; height: 14px; }
.filter-panel { display: none; margin-top: 14px; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.filter-panel.open { display: block; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); font-weight: 600; }
.filter-field select, .filter-field input {
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 10px 12px; font-size: 0.9rem; color: var(--black); background: var(--white); width: 100%;
}
.filter-range { display: flex; align-items: center; gap: 8px; }
.filter-range span { color: var(--gray-500); }
.filter-actions { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.filter-clear { font-size: 0.85rem; color: var(--gray-700); }
.filter-clear:hover { color: var(--black); }

/* Hero variant: search + filters sit over the video background */
.hero-search { max-width: 720px; margin: 0 auto; }
.hero-search .filter-wrap { text-align: center; }
.hero-search .filter-panel { text-align: left; }

/* ---------- Stats ---------- */
.stats-bar { background: var(--off-white); padding: 48px 24px; border-bottom: 1px solid var(--gray-100); }
.stats-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-num { font-size: 2.4rem; font-weight: 800; }
.stat-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--gray-700); }

/* ---------- Section shell ---------- */
.section { padding: 84px 24px; }
.section-alt { background: var(--off-white); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-eyebrow { text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.72rem; color: var(--gray-500); margin-bottom: 10px; }
.section-header h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.section-sub { margin-top: 12px; color: var(--gray-700); font-size: 0.95rem; }

/* ---------- Testimonials ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--container); margin: 0 auto; }
.testimonial-card { border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 28px; background: var(--white); }
.stars { color: var(--black); letter-spacing: 2px; margin-bottom: 12px; font-size: 0.95rem; }
.testimonial-name { font-weight: 700; margin-top: 14px; }
.testimonial-meta { font-size: 0.8rem; color: var(--gray-500); }

/* ---------- Listing cards ---------- */
.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: var(--container); margin: 0 auto; }
.listing-grid.compact { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.listing-card { border: 1px solid var(--gray-100); border-radius: var(--radius); overflow: hidden; background: var(--white); transition: box-shadow 0.2s ease, transform 0.2s ease; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.listing-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.listing-photo { position: relative; aspect-ratio: 4 / 3; background: var(--gray-100); overflow: hidden; }
.listing-photo img { width: 100%; height: 100%; object-fit: cover; }
.listing-photo .no-photo { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--gray-500); }
.listing-photo .no-photo svg { width: 40%; opacity: 0.4; }
.listing-badge { position: absolute; top: 12px; left: 12px; background: var(--black); color: var(--white); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 10px; border-radius: 3px; }
.listing-badge.status-under-contract, .listing-badge.status-pending, .listing-badge.status-pending-lease { background: var(--gray-700); }
.listing-badge.status-offer-accepted { background: var(--gray-700); }

.coming-soon-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.coming-soon-overlay span {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  padding: 10px 22px;
  border: 2px solid var(--white);
  border-radius: 4px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.listing-photo .coming-soon-overlay span { font-size: 0.82rem; padding: 7px 14px; letter-spacing: 0.1em; }
/* Sale Pending (spreadsheet status "EM") reads darker/warmer than Coming Soon */
.status-overlay-sale-pending { background: rgba(0,0,0,0.16); }
.status-overlay-sale-pending span { background: rgba(140,26,26,0.72); border-color: rgba(255,255,255,0.92); }
.listing-tag { position: absolute; top: 12px; right: 12px; background: var(--white); color: var(--black); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 9px; border-radius: 3px; border: 1px solid var(--gray-200); }
.video-badge { position: absolute; bottom: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(20,20,20,0.75); color: var(--white); display: flex; align-items: center; justify-content: center; }
.video-badge svg { width: 16px; height: 16px; }
.listing-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.listing-price { font-size: 1.35rem; font-weight: 800; margin-bottom: 4px; }
.listing-specs { color: var(--gray-700); font-size: 0.85rem; margin-bottom: 10px; }
.listing-address { font-size: 0.9rem; color: var(--gray-700); margin-bottom: 14px; flex: 1; }
.listing-terms { border-top: 1px solid var(--gray-100); padding-top: 12px; font-size: 0.78rem; color: var(--gray-700); display: flex; justify-content: space-between; }
.listing-terms strong { color: var(--black); display: block; font-size: 0.9rem; }
.listing-area { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; color: var(--gray-500); margin-bottom: 6px; }

.listings-toolbar { max-width: var(--container); margin: 0 auto 32px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.filter-chip { display: inline-block; border: 1px solid var(--gray-200); border-radius: 999px; padding: 8px 18px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; background: var(--white); color: var(--black); text-decoration: none; }
.filter-chip.active, .filter-chip:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.load-more-wrap { text-align: center; margin-top: 40px; }
.is-hidden { display: none; }
.pagination { max-width: var(--container); margin: 42px auto 0; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.pagination-link { border: 1px solid var(--black); border-radius: 999px; padding: 10px 18px; font-size: 0.85rem; font-weight: 700; }
.pagination-link:hover { background: var(--black); color: var(--white); }
.pagination-status { color: var(--gray-700); font-size: 0.9rem; }

/* ---------- Communities ---------- */
.community-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--container); margin: 0 auto; }
.community-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 5/4; background: linear-gradient(135deg, var(--gray-700), var(--black)); background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 20px; color: var(--white); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.03em; }
.community-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0)); }
.community-card span { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--gray-300); padding: 64px 24px 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid #2c2c2c; }
.footer-col h4 { color: var(--white); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.1em; margin-bottom: 18px; }
.footer-tagline { color: var(--gray-500); font-size: 0.9rem; margin-top: 14px; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #2c2c2c; color: var(--gray-300); transition: background 0.2s, color 0.2s; }
.footer-social-link:hover { background: var(--white); color: var(--black); }
.logo-footer .logo-text { color: var(--white); }
.logo-footer .logo-thin { color: var(--gray-500); }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { color: var(--gray-300); font-size: 0.9rem; }
.footer-nav a:hover { color: var(--white); }
.footer-address { font-style: normal; color: var(--gray-300); font-size: 0.9rem; margin-bottom: 12px; line-height: 1.6; }
.footer-contact-link { display: block; color: var(--white); font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.footer-form { display: flex; flex-direction: column; gap: 10px; }
.footer-form input, .footer-form textarea {
  background: #232323; border: 1px solid #333; color: var(--white); border-radius: var(--radius);
  padding: 12px 14px; font-family: var(--font); font-size: 0.9rem; resize: vertical;
}
.footer-form input::placeholder, .footer-form textarea::placeholder { color: #888; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.footer-bottom { padding-top: 20px; font-size: 0.78rem; color: var(--gray-500); text-align: center; }

.back-to-top {
  position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--black); color: var(--white); border: none; font-size: 1.1rem; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 90;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero { background: var(--black); color: var(--white); padding: 64px 24px; text-align: center; }
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 10px; }
.page-hero p { color: var(--gray-300); max-width: 600px; margin: 0 auto; }

/* ---------- Generic content blocks ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: var(--container); margin: 0 auto; align-items: center; }
.icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: var(--container); margin: 0 auto; }
.icon-card { text-align: center; }
.icon-card .icon-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--black); color: var(--white); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 1.4rem; font-weight: 800; }
.icon-card h3 { font-size: 1.1rem; }
.icon-card p { color: var(--gray-700); font-size: 0.92rem; }

.step-list { max-width: 760px; margin: 0 auto; }
.step-item { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--gray-100); }
.step-num { font-size: 1.6rem; font-weight: 800; color: var(--gray-300); flex-shrink: 0; width: 48px; }
.step-item h3 { margin-bottom: 6px; }
.step-item p { color: var(--gray-700); margin: 0; }

/* ---------- Forms (standalone pages) ---------- */
.form-card { max-width: 560px; margin: 0 auto; background: var(--off-white); border-radius: var(--radius); padding: 40px; }
.form-card form { display: flex; flex-direction: column; gap: 14px; }
.form-card input, .form-card select, .form-card textarea {
  padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-family: var(--font); font-size: 0.95rem;
}
.form-card label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: -6px; color: var(--gray-700); }

/* ---------- Mortgage calculator ---------- */
.calc-card { max-width: 640px; margin: 0 auto; background: var(--off-white); border-radius: var(--radius); padding: 40px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.calc-field label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; color: var(--gray-700); }
.calc-field input { width: 100%; padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 0.95rem; }
.calc-result { background: var(--black); color: var(--white); border-radius: var(--radius); padding: 24px; text-align: center; }
.calc-result .calc-monthly { font-size: 2.2rem; font-weight: 800; }
.calc-result .calc-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--gray-300); }

/* ---------- Listing detail page ---------- */
.listing-detail-crumb { padding: 20px 24px 0; }
.listing-detail-crumb a { font-size: 0.85rem; font-weight: 600; color: var(--gray-700); }
.listing-detail-crumb a:hover { color: var(--black); }
.listing-detail { padding: 20px 24px 80px; }
.listing-detail-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.85fr); gap: 36px; align-items: start; max-width: 1440px; margin: 0 auto; }

.detail-gallery { position: sticky; top: 112px; }
.gallery-stage { position: relative; }
.gallery-main {
  position: relative;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: var(--radius); background: var(--gray-100);
  aspect-ratio: 16 / 11; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-main::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: start; }
/* No grey bars, nothing cropped: the same photo is scaled to cover the frame
   and blurred to act as its own backdrop, with the untouched photo sitting on
   top. Switching the top image to `cover` would fill the frame too, but that is
   what was cutting the edges off the photos. */
.gallery-slide { position: relative; overflow: hidden; background: var(--gray-100); }
.gallery-slide-fill {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: blur(26px) saturate(1.25) brightness(0.92);
  transform: scale(1.18);
  pointer-events: none;
}
.gallery-slide-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-slide video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--black); }
.gallery-dot[aria-label="Video"] { border-radius: 2px; color: transparent; }
.gallery-empty { display: flex; align-items: center; justify-content: center; }
.gallery-empty .no-photo { text-align: center; color: var(--gray-500); }
.gallery-empty .no-photo svg { width: 60px; opacity: 0.4; margin-bottom: 10px; }
.gallery-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.gallery-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--gray-200); cursor: pointer; padding: 0; }
.gallery-dot.active { background: var(--black); }
.gallery-arrow {
  position: absolute; top: 50%; z-index: 4; transform: translateY(-50%);
  width: 52px; height: 68px; border: 0; border-radius: 6px;
  background: rgba(0,0,0,0.62); color: var(--white); box-shadow: 0 2px 14px rgba(0,0,0,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; line-height: 1; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease;
}
.gallery-arrow:hover { background: rgba(0,0,0,0.84); }
.gallery-arrow:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.gallery-arrow:disabled { opacity: 0; pointer-events: none; }
.gallery-arrow-prev { left: 14px; }
.gallery-arrow-next { right: 14px; }

.detail-info .listing-badge, .detail-info .detail-tag { display: inline-block; position: static; margin-right: 8px; margin-bottom: 12px; }
/* Price leads, address sits quietly underneath it - the price is the thing
   people scan for, so the address should not compete with it for weight. */
.detail-price { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; margin: 2px 0 6px; }
.detail-address { font-size: 1rem; font-weight: 400; color: var(--gray-700); line-height: 1.45; margin: 0 0 16px; text-wrap: balance; }
.detail-area { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; color: var(--gray-500); margin-bottom: 16px; }
.detail-specs { display: flex; flex-wrap: wrap; gap: 12px 30px; padding: 16px 0; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); margin-bottom: 18px; font-size: 0.88rem; color: var(--gray-700); }
.detail-specs > div { display: flex; flex-direction: column; gap: 3px; }
.detail-specs strong { color: var(--black); font-size: 1.2rem; line-height: 1.1; display: block; }
.detail-specs .spec-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.detail-actions { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.detail-actions .btn { flex: 1; min-width: 160px; }

.detail-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px; }
.terms-col { background: var(--off-white); border-radius: var(--radius); padding: 16px 18px; }
.detail-map { width: 100%; height: 380px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray-100); }
.terms-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin-bottom: 10px; }
.terms-row { display: flex; justify-content: space-between; font-size: 0.88rem; padding: 4px 0; }
.terms-row strong { color: var(--black); }

/* margin-top lives on the card, not on what precedes it: the card can follow
   the fact badges, the owner-financing terms table, or nothing at all, and it
   needs the same breathing room in every case. */
.detail-request-card { background: var(--black); color: var(--white); border-radius: var(--radius); padding: 26px; margin-top: 24px; }
.detail-request-card h3 { color: var(--white); font-size: 1.05rem; margin-bottom: 16px; }
.detail-request-card form { display: flex; flex-direction: column; gap: 10px; }
.detail-request-card input, .detail-request-card textarea {
  background: #232323; border: 1px solid #333; color: var(--white); border-radius: var(--radius);
  padding: 12px 14px; font-family: var(--font); font-size: 0.9rem; resize: vertical;
}
.detail-request-card input::placeholder, .detail-request-card textarea::placeholder { color: #888; }

/* Listing CTA card: choose an intent first, then the form opens pre-filled.
   The form is visible by default and only collapses once JS runs, so the card
   still works — and still captures leads — with JavaScript disabled. */
.btn-outline-light { background: transparent; color: var(--white); border-color: #4a4a4a; }
.btn-outline-light:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.request-cta { display: flex; flex-direction: column; gap: 10px; }
.request-choice { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.25; }
.request-choice-primary { padding-top: 16px; padding-bottom: 16px; }
.request-choice-label { font-size: 0.95rem; }
.request-choice-sub {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em;
  text-transform: none; opacity: 0.72;
}
.request-choice.is-active { outline: 2px solid var(--white); outline-offset: 2px; }
.request-divider { height: 1px; background: #333; margin: 6px 0 2px; }
.request-remote {
  text-align: center; font-size: 0.82rem; font-weight: 600;
  color: #bbb; margin: 0 0 2px;
}
.detail-request-card #requestForm { margin-top: 18px; }
.detail-request-card #requestForm.is-collapsed { display: none; }


@media (max-width: 860px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track has an `auto` minimum, so it grows
     to the gallery's min-content width instead of the screen width. That is what
     was pushing the page 274px wide and letting it scroll sideways on phones. */
  .listing-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .detail-gallery { position: static; min-width: 0; }
  .gallery-main, .gallery-stage { min-width: 0; max-width: 100%; }
  .listing-detail { padding-left: 0; padding-right: 0; }
  .listing-detail-grid .detail-info { padding-left: 20px; padding-right: 20px; }
  .gallery-main { border-radius: 0; aspect-ratio: 4 / 3; }
  .gallery-arrow { display: none; }
  .detail-actions .btn { min-width: 0; }
}

/* ---------- Alerts ---------- */
.alert { max-width: 720px; margin: 0 auto 24px; padding: 16px 20px; border-radius: var(--radius); font-size: 0.9rem; }
.alert-success { background: #eaf7ee; color: #1e5631; border: 1px solid #bfe6c9; }
.alert-error { background: #fdecea; color: #7a1f1f; border: 1px solid #f3c2bd; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .main-nav { position: fixed; top: 0; right: 0; height: 100vh; width: 280px; max-width: 82vw; background: var(--white); flex-direction: column; align-items: flex-start; padding: 100px 32px 32px; gap: 22px; transform: translateX(100%); transition: transform 0.25s ease; box-shadow: -10px 0 30px rgba(0,0,0,0.1); }
  .main-nav.open { transform: translateX(0); }
  .nav-cta-mobile { display: block; margin-top: 12px; font-weight: 700; }
  .nav-toggle { display: flex; }
  .header-phone { display: none; }
  .header-cta { display: none; }
  /* The header CTA is hidden here, so Share is the only button left - shrink it
     so it cannot push the hamburger off the edge of the screen. */
  .header-actions { gap: 10px; }
  .header-share { padding: 9px 12px; font-size: 0.66rem; letter-spacing: 0.03em; white-space: nowrap; }
  .header-inner { padding: 14px 16px; gap: 12px; }
  .logo { min-width: 0; gap: 10px; }
  .logo-img { width: 56px; height: 56px; }
  .logo-text { font-size: 1.15rem; }
  .logo-thin { font-size: 0.7rem; letter-spacing: 0.14em; }
  .logo-broker-img { width: 118px; }
  .stats-grid, .testimonial-grid, .listing-grid, .listing-grid.compact, .community-grid, .icon-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .header-share { padding: 8px 10px; font-size: 0.6rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .testimonial-grid, .listing-grid, .listing-grid.compact, .community-grid, .icon-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 72px 20px 90px; }
  .section { padding: 56px 20px; }
  .calc-grid { grid-template-columns: 1fr; }
}

/* ---- Listing facts & features ------------------------------------------- */
.facts-h2 { font-size: 1.3rem; margin-bottom: 16px; }
.listing-copy { color: var(--gray-700); margin-bottom: 14px; line-height: 1.7; }

.highlight-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; }
.highlight-chips li {
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: 999px; padding: 6px 14px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

.quick-facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 18px 0 0; }
.quick-facts li {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 999px;
  padding: 8px 18px; font-size: 0.8rem; font-weight: 600; color: var(--gray-700);
  line-height: 1.3;
}

.facts-group { border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.facts-group-head {
  background: var(--gray-100); padding: 10px 18px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.facts-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; padding: 18px; }
.facts-sub h4 { font-size: 0.9rem; margin: 0 0 8px; }
.facts-sub { margin-bottom: 14px; }
.facts-sub ul { list-style: disc; padding-left: 20px; margin: 0; }
.facts-sub li { font-size: 0.88rem; color: var(--gray-700); line-height: 1.7; }
.facts-sub li span { color: var(--black); }

.schools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.school-card { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px; }
.school-name { font-weight: 700; margin-bottom: 4px; }
.school-meta { font-size: 0.82rem; color: var(--gray-700); }
.school-rating { margin-top: 10px; font-weight: 800; }
.schools-note { font-size: 0.78rem; color: var(--gray-700); margin-top: 12px; }

@media (max-width: 700px) {
  .facts-cols { grid-template-columns: 1fr; gap: 4px; }
}

/* In-place confirmation after a contact form submit */
.form-thanks {
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  background: var(--white); color: var(--black);
  padding: 22px; text-align: center; outline: none;
}
.form-thanks h3 { font-size: 1.05rem; margin: 0 0 6px; color: var(--black); }
.form-thanks p { margin: 0; color: var(--gray-700); font-size: 0.9rem; line-height: 1.6; }
.form-thanks-error { border-color: #b3261e; }
.form-thanks-error h3 { color: #b3261e; }
.detail-request-card .form-thanks { background: #232323; border-color: #3a3a3a; }
.detail-request-card .form-thanks h3 { color: var(--white); }
.detail-request-card .form-thanks p { color: #cfcfcf; }
.footer-form-col .form-thanks { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
.footer-form-col .form-thanks h3 { color: var(--white); }
.footer-form-col .form-thanks p { color: rgba(255,255,255,0.8); }

/* Emoji in spec rows and fact badges.
   Naming the colour-emoji fonts explicitly stops Windows and some Android
   builds from falling back to a flat monochrome glyph, and keeps the emoji
   from inheriting letter-spacing/uppercase from the surrounding label. */
.spec-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}
.detail-specs .spec-emoji { font-size: 1.05em; }
.quick-facts .spec-emoji { font-size: 1.05em; }

/* GreatSchools rating block (third-party data, attributed on the page) */
.school-rating { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.school-rating-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--black); color: var(--white);
  font-weight: 800; font-size: 0.82rem; flex: 0 0 auto;
}
.school-rating-label { font-size: 0.78rem; color: var(--gray-700); line-height: 1.3; }
.school-subratings { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--gray-100); }
.school-subratings li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 0.82rem; color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}
.school-subratings li:last-child { border-bottom: 0; }
.school-subratings strong { color: var(--black); }

/* 3D tour: a real embed when the host allows it, otherwise a link-out card */
.tour-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--gray-100); }
.tour-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour-link-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px 22px; background: var(--off-white);
}
.tour-link-card strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.tour-link-card p { margin: 0; font-size: 0.86rem; color: var(--gray-700); }

.terms-note { margin: 10px 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--gray-500); }

/* Language toggle in the top bar */
.lang-toggle { margin-left: 14px; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 3px; }
.detail-terms-single { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.terms-note { margin: 12px 0 0; font-size: 0.82rem; line-height: 1.55; color: var(--gray-700); }

/* ---------- One home, two sets of financing terms ---------- */
/* 8205 NW 151st Ter is listed twice at the same price. These make it obvious
   the pair is deliberate, and say which is which, so neither card reads as an
   accidental duplicate. The flag sits top-LEFT because .listing-tag already
   owns the top-right corner. */
.option-flag {
  position: absolute; top: 12px; left: 12px;
  background: var(--black); color: var(--white);
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 5px 9px; border-radius: 3px;
}
.option-hint {
  font-size: 0.78rem; font-weight: 600; color: var(--black);
  margin: -6px 0 12px;
}
.option-flag-inline { background: var(--black); color: var(--white); border-color: var(--black); }

.option-switch {
  display: block; margin: 0 0 28px; padding: 12px 16px;
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  background: var(--off-white); max-width: 420px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.detail-terms + .option-switch { margin-top: -14px; }  /* tuck under the terms box */
.option-switch:hover { border-color: var(--gray-300); background: var(--gray-100); }
.option-switch-label {
  display: block; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--gray-500); margin-bottom: 3px;
}
.option-switch-name { display: block; font-size: 0.9rem; font-weight: 700; }
.option-switch-terms { display: block; font-size: 0.85rem; color: var(--gray-700); }