/* ==========================================================================
   Rachel Wavra Realty — Site Stylesheet
   ========================================================================== */

:root {
  /* Pulled directly from Rachel Wavra Brand Identity PDF (Color Palette page):
     Cerulean, Accent, Accent Pale, Cream. Rachel doesn't want navy (Accent
     Deep) used, so accents lean on Accent/Cerulean instead — no navy left
     in any decorative block or accent text. */
  --color-ink: #26343a;
  --color-teal: #4980ac;       /* Brand: Accent */
  --color-teal-deep: #3977a8;  /* Brand: Cerulean (primary) */
  --color-sand: #dae6f1;       /* Brand: Accent Pale */
  --color-sand-light: #edf5fb; /* lighter tint of Accent Pale */
  --color-cream: #f8f5ef;      /* Brand: Cream */
  --color-gold: #4980ac;       /* Brand: Accent (was navy — Rachel prefers no navy) */
  --color-slate: #7aa3c8;      /* between Accent Pale and Accent */
  --color-white: #ffffff;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --max-width: 1200px;
  --transition: 0.35s ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 125%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-cream);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.01em;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-teal-deep);
  margin: 0 0 0.5em;
  line-height: 1.15;
}

.eyebrow {
  display: inline-block;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 600;
  margin-bottom: 14px;
}

.btn {
  display: inline-block;
  padding: 14px 34px;
  border: 1px solid var(--color-teal-deep);
  color: var(--color-teal-deep);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  background: transparent;
  cursor: pointer;
}
.btn:hover { background: var(--color-teal-deep); color: var(--color-white); }

.btn-solid {
  background: var(--color-teal-deep);
  color: var(--color-white);
  border-color: var(--color-teal-deep);
}
.btn-solid:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-white); }

.btn-light {
  border-color: rgba(255,255,255,0.75);
  color: var(--color-white);
}
.btn-light:hover { background: var(--color-white); color: var(--color-teal-deep); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled {
  background: rgba(247, 250, 252, 0.96);
  padding: 14px 40px;
  box-shadow: 0 2px 18px rgba(0,0,0,0.06);
}
.site-header.is-scrolled .brand,
.site-header.is-scrolled .nav-links a,
.site-header.is-scrolled .header-social a,
.site-header.is-scrolled .menu-toggle span { color: var(--color-teal-deep); }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-white);
  letter-spacing: 0.04em;
}
.brand-mark { flex-shrink: 0; display: block; }
.brand-logo {
  height: 72px;
  width: 72px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter var(--transition), height var(--transition), width var(--transition);
}
.site-header.is-scrolled .brand-logo { height: 58px; width: 58px; filter: none; }
.brand-text { display: block; }
.brand strong { font-weight: 600; }
.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 2px;
}

.site-header nav { flex: 1; display: flex; margin: 0 32px; }
.nav-links {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { border-color: currentColor; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle span {
  width: 24px;
  height: 1.5px;
  background: var(--color-white);
  transition: background var(--transition);
}

/* Header social icons — desktop nav only; the mobile drawer gets its own
   copy of these (see .nav-social below) since .header-social hides with
   the rest of the inline nav at the 1250px breakpoint. */
.header-social { display: flex; align-items: center; gap: 10px; margin-left: 6px; flex-shrink: 0; }
.header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--color-white);
  opacity: 0.82;
  transition: opacity var(--transition);
}
.header-social a:hover { opacity: 1; }
.header-social svg { width: 19px; height: 19px; fill: currentColor; }

.nav-social { display: none; }

/* Switch to the hamburger menu earlier (was only <680px) — the bigger nav
   and brand text no longer fit comfortably in the tablet-width middle
   ground now that base type sizes have grown. Pushed further out to 1250px
   now that the header social icons sit at the end of the nav too. */
@media (max-width: 1250px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }
  /* nav-links is hidden here, so this <nav> is an empty flex item — it
     doesn't need horizontal margin. On narrow phones that leftover
     margin was enough, combined with the brand block's width, to push
     the hamburger button past the header's padding and off the right
     edge of the screen. */
  .site-header nav { margin: 0; }
  .header-social { margin-left: 0; }
  .nav-links.open .nav-social {
    display: flex;
    gap: 14px;
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.2);
  }
  .nav-links.open .nav-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    color: var(--color-white);
  }
  .nav-links.open .nav-social svg { width: 17px; height: 17px; fill: currentColor; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  background: linear-gradient(180deg, rgba(57,119,168,0.35) 0%, rgba(57,119,168,0.12) 40%, rgba(57,119,168,0.78) 100%),
              url('../images/hero-home.jpg') center/cover no-repeat;
}
.hero-inner {
  padding: 0 40px 90px;
  max-width: 720px;
}
.hero .eyebrow { color: var(--color-sand); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.18em; }
.hero h1 {
  color: var(--color-white);
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  margin-bottom: 22px;
}
.hero p {
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto 32px;
  color: var(--color-sand-light);
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* Centered full-bleed hero treatment: generous negative space, a thin
   divider rule beneath the eyebrow, everything centered on one column. */
.hero-centered {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-centered .hero-inner {
  margin: 0 auto;
  padding: 0 40px;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-centered .hero-ctas { justify-content: center; }
.hero-rule {
  display: none;
}
.hero-rule-dark { background: var(--color-slate); opacity: 0.5; }
.script-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--color-gold);
}
.scroll-cue {
  position: absolute;
  right: 40px;
  bottom: 40px;
  writing-mode: vertical-rl;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 50px;
  background: rgba(255,255,255,0.6);
}

/* Page hero (interior pages, shorter) — flat brand-color field, no texture,
   matching the Brand Identity PDF's plain solid-color treatment. */
.page-hero {
  height: 46vh;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  background: linear-gradient(155deg, var(--color-teal-deep) 0%, var(--color-gold) 100%);
}
.page-hero h1 { color: var(--color-white); font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 8px; }
.page-hero .eyebrow { color: var(--color-sand); font-weight: 700; }

/* ---------- Sections ---------- */
section { padding: 130px 0; }
.section-tight { padding: 70px 0; }
.bg-sand { background: var(--color-sand-light); }
.bg-warm { background: #dceef5; }
.intro-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--color-sand-light) 0%, #e9f1f3 46%, var(--color-sand-light) 100%);
}
.intro-section::before {
  content: '';
  position: absolute;
  top: -18%;
  right: -8%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182,147,94,0.14) 0%, rgba(182,147,94,0) 70%);
  pointer-events: none;
}
.intro-section::after {
  content: '';
  position: absolute;
  bottom: -22%;
  left: -10%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57,119,168,0.09) 0%, rgba(57,119,168,0) 70%);
  pointer-events: none;
}
.intro-section .container { position: relative; z-index: 1; }
.bg-teal { background: var(--color-teal-deep); color: var(--color-sand-light); }
.bg-teal h2, .bg-teal h3 { color: var(--color-white); }

.section-head {
  max-width: 620px;
  margin: 0 auto 64px;
  text-align: center;
}
.section-head p { color: var(--color-ink); }

.lifestyle-break { padding: 90px 0; }
.lifestyle-eyebrow-wrap {
  text-align: center;
  margin-bottom: 48px;
}
.lifestyle-eyebrow-wrap .eyebrow { font-size: 1.2rem; }
.lifestyle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.lifestyle-row + .lifestyle-row {
  margin-top: 40px;
}
.lifestyle-photo img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 24px 46px -30px rgba(10,46,55,0.55);
  display: block;
}
.lifestyle-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-teal-deep);
  max-width: 420px;
}
.lifestyle-caption-full {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1.3rem;
  line-height: 1.75;
  color: var(--color-ink);
  max-width: 520px;
}
.lifestyle-caption-full p { margin: 0 0 15px; }
.lifestyle-caption-full p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .lifestyle-row { grid-template-columns: 1fr; gap: 24px; }
  .lifestyle-row + .lifestyle-row { margin-top: 24px; }
  .lifestyle-caption { max-width: none; }
  .lifestyle-caption-full { max-width: none; }
}

/* ---- Editorial break: flat brand-color pause with Rachel's own voice.
   No photo/texture — a plain solid field, same treatment as the Brand
   Identity PDF's dark navy card. ---- */
.editorial-break {
  position: relative;
  min-height: 54vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  padding: 100px 0;
  background: var(--color-gold);
}
.editorial-break .container { max-width: 820px; }
.listings-evergreen {
  background: linear-gradient(155deg, var(--color-gold) 0%, var(--color-teal-deep) 100%);
}
.listings-evergreen .eyebrow { color: var(--color-sand); font-weight: 700; }
.bg-teal .eyebrow { color: var(--color-sand); font-weight: 700; }
.listings-evergreen h2:not(.oneliner) { color: var(--color-white); font-size: clamp(1.9rem, 3.4vw, 2.6rem); white-space: nowrap; }
.listings-evergreen h2.oneliner { color: var(--color-white); }
@media (max-width: 900px) {
  .listings-evergreen h2:not(.oneliner) { white-space: normal; }
}
.listings-evergreen p { font-size: 1.05rem; line-height: 1.75; color: #eef4f7; margin: 0 auto 30px; max-width: 640px; }
.listings-evergreen .btn-light { border-color: rgba(255,255,255,0.85); }
.editorial-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.1vw, 2.4rem);
  line-height: 1.45;
  margin: 0 0 22px;
}
.editorial-attrib {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-sand);
}
@media (max-width: 680px) {
  .editorial-break { min-height: 44vh; padding: 70px 0; }
}

/* Editorial break variant: Rachel's portrait alongside a client quote */
.editorial-break-photo .container.editorial-break-grid {
  max-width: 980px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  text-align: left;
}
.editorial-break-photo-col {
  flex: 0 0 auto;
  width: 230px;
}
.editorial-break-photo-col img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.editorial-break-text {
  flex: 1 1 auto;
  text-align: left;
}
.editorial-break-text .editorial-line { margin: 0 0 20px; }
.editorial-break-text .editorial-attrib { display: block; }
@media (max-width: 780px) {
  .editorial-break-photo .container.editorial-break-grid {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
  .editorial-break-photo-col { width: 170px; }
  .editorial-break-text { text-align: center; }
}

/* Intro / signature block */
.intro-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.intro-block img { border-radius: 2px; }
.intro-block h2 { font-size: 2.3rem; }
.intro-block p { color: var(--color-ink); font-size: 1.15rem; line-height: 1.8; margin-bottom: 18px; }
.signature { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; margin-top: 24px; color: var(--color-gold); }

/* Photo frame: padded cream mat with a pair of thin gold corner marks,
   an editorial-portfolio touch instead of a full outline or an arch. */
.photo-frame-wrap {
  background: var(--color-white);
  padding: 26px;
  display: inline-block;
  width: 100%;
}
.photo-frame {
  position: relative;
  overflow: visible;
  aspect-ratio: 3/4;
}
.photo-frame-inner { width: 100%; height: 100%; overflow: hidden; }
.photo-frame-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame::before,
.photo-frame::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--color-gold);
  z-index: 2;
}
.photo-frame::before { top: -12px; left: -12px; border-right: none; border-bottom: none; }
.photo-frame::after { bottom: -12px; right: -12px; border-left: none; border-top: none; }

/* Large translucent monogram set behind the copy column's heading */
.intro-copy { position: relative; }
.monogram-mark {
  position: absolute;
  top: -54px;
  right: -6px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 8.5rem;
  font-weight: 300;
  color: var(--color-sand);
  opacity: 0.7;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.intro-copy > *:not(.monogram-mark) { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .monogram-mark { font-size: 5.5rem; top: -34px; }
}

/* ---- Services strip: photo-forward tiles, image on top, caption below ---- */
.services-strip { background: var(--color-cream); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.service-card { position: relative; }
.service-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  margin-bottom: 22px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 24px 46px -30px rgba(10,46,55,0.55);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.service-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.service-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(230,214,184,0.22);
  border-radius: 3px;
  pointer-events: none;
}
.service-card:hover .service-photo img { transform: scale(1.05); }
.service-card:hover .service-photo { box-shadow: 0 30px 56px -28px rgba(10,46,55,0.65); transform: translateY(-4px); }
.service-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 10px;
}
.service-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.service-card p { color: var(--color-ink); font-size: 1rem; line-height: 1.7; margin-bottom: 18px; }
.hl { color: var(--color-gold); font-weight: 500; }
.pillar-link {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--transition), letter-spacing 0.25s ease;
}
.pillar-link:hover { border-color: currentColor; letter-spacing: 0.18em; }
@media (max-width: 980px) {
  .services-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Stats strip */
.stats-section { text-align: center; padding-top: 50px; }
.stats-year {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6vw, 5.2rem);
  color: var(--color-white);
  margin-bottom: 34px;
}
.stats {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 20px;
  text-align: center;
}
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  white-space: nowrap;
  color: var(--color-white); /* stats sit on the Cerulean band — needs white, not accent-on-accent */
  display: block;
  margin-bottom: 6px;
}
.stats-section-photo { padding: 20px 0 90px; }
.stats-section-photo .container { max-width: 1320px; }
.stats-section-photo .stats-year { font-size: clamp(2.6rem, 5vw, 4.2rem); margin-bottom: 26px; }
.stats-section-photo .stats { margin-bottom: 40px; flex-wrap: nowrap; column-gap: 18px; }
.stats-section-photo .stat { padding: 0 16px; }
.stats-section-photo .stat .label { font-size: 1.2rem; white-space: nowrap; }
.stats-photo-col { margin: 0 auto; width: 400px; }
.stats-photo-col img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
@media (max-width: 900px) {
  .stats-section-photo .stats { flex-wrap: wrap; }
  .stats-section-photo .stat .label { white-space: normal; font-size: 1rem; }
}
@media (max-width: 680px) {
  .stats-photo-col { width: 260px; }
  .stats-section-photo .stat .label { font-size: 0.92rem; }
}
.stat .label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-sand);
}

/* Live MLS search (Matrix IDX embed) */
.idx-search-intro {
  max-width: 620px;
  margin: 0 auto 32px;
  text-align: center;
  color: var(--color-ink);
}
.action-tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 20px;
}
.action-tile {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 20px 38px -28px rgba(57,119,168,0.45);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.action-tile:hover { box-shadow: 0 26px 46px -24px rgba(57,119,168,0.55); transform: translateY(-3px); }
.action-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.action-tile:hover img { transform: scale(1.05); }
.action-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,44,59,0) 45%, rgba(0,44,59,0.78) 100%);
}
.action-tile-label {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 2;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
}
.idx-note {
  text-align: center;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-ink);
  max-width: 620px;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .action-tiles-grid { grid-template-columns: 1fr; }
}

/* Listings grid */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 48px;
}
.filter-bar button {
  padding: 9px 22px;
  border: 1px solid #c3d2db;
  background: transparent;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
}
.filter-bar button.active,
.filter-bar button:hover { background: var(--color-teal-deep); color: var(--color-white); border-color: var(--color-teal-deep); }

.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.listing-card {
  background: var(--color-white);
  border: 1px solid #dde6ec;
}
.listing-media { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.listing-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.listing-card:hover .listing-media img { transform: scale(1.06); }
.listing-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-teal-deep);
  color: var(--color-white);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
}
.listing-body { padding: 22px 24px 26px; }
.listing-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-teal-deep); margin-bottom: 4px; }
.listing-loc { font-size: 0.82rem; color: var(--color-ink); margin-bottom: 14px; }
.listing-meta { display: flex; gap: 18px; font-size: 0.78rem; color: var(--color-ink); border-top: 1px solid #e6edf1; padding-top: 14px; }
.listing-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.listing-link:hover { border-color: var(--color-gold); }

/* Testimonial */
.testimonial {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-style: italic;
  margin: 0 0 22px;
  color: var(--color-teal-deep);
}
.testimonial cite { font-style: normal; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); }

/* Reviews grid: real, attributed Google reviews */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.review-card {
  background: linear-gradient(160deg, #eef6f8 0%, #dceaee 100%);
  border: 1px solid #cfe0e6;
  padding: 30px 28px;
  box-shadow: 0 20px 38px -30px rgba(57,119,168,0.35);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.review-card:hover {
  box-shadow: 0 26px 46px -26px rgba(57,119,168,0.4);
  transform: translateY(-3px);
}
.review-stars {
  color: var(--color-gold);
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.review-card blockquote {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-ink);
}
.review-card cite {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
}
@media (max-width: 980px) {
  .reviews-grid { grid-template-columns: 1fr; }
}
.reviews-grid-more { margin-top: 30px; }

.featured-review {
  max-width: 740px;
  margin: 0 auto 60px;
  text-align: center;
  padding: 50px 56px;
  background: var(--color-white);
  border: 1px solid #cfe0e6;
  box-shadow: 0 30px 60px -40px rgba(57,119,168,0.4);
}
.featured-review .review-stars { justify-content: center; display: flex; }
.featured-review blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--color-ink);
  margin: 0 0 20px;
}
.featured-review cite {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
}
@media (max-width: 680px) {
  .featured-review { padding: 36px 26px; }
  .featured-review blockquote { font-size: 1.15rem; }
}

/* CTA band */
.cta-band {
  text-align: center;
  padding: 100px 0;
}
.cta-band h2 { font-size: 2.4rem; }
.cta-band p { max-width: 620px; margin: 0 auto 32px; color: #d7e0e6; font-size: 1.15rem; line-height: 1.75; }
.cta-band.on-light p { color: var(--color-ink); }
.cta-band.on-light strong { color: var(--color-teal-deep); }

/* About page specifics */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: start;
}
.about-home-grid { max-width: 1500px; grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
.about-home-grid .about-story-big h3 { margin-bottom: 14px; }
.about-home-grid .about-story-big p { font-size: 1.08rem; line-height: 1.75; margin-bottom: 15px; }
.about-home-photo-stack.prose-photo-col { padding-bottom: 50px; }
.about-story-big h2 { font-size: clamp(2.1rem, 3.2vw, 2.7rem); }
.about-story-big h3 { font-size: clamp(1.4rem, 2.2vw, 1.7rem); }
.about-story-big p { font-size: 1.15rem; line-height: 1.9; }
.about-story-slider { max-width: none; margin: 0; }
.about-story-slider .topic-slide { text-align: left; padding: 0; }
.about-story-slider .topic-slide .sub { max-width: none; margin: 0; }
.about-story-slider .topic-slider-controls { justify-content: flex-start; }
.about-story-big blockquote { font-size: 1.45rem; }
.credential-list { list-style: none; padding: 0; margin: 30px 0; }
.credential-list li {
  padding: 14px 0;
  border-bottom: 1px solid #dde6ec;
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  color: var(--color-ink);
}
.credential-list li span:last-child { color: var(--color-gold); font-weight: 500; text-align: right; max-width: 60%; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.contact-details .item { margin-bottom: 28px; }
.contact-details .item h4 { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 6px; }
.contact-details .item p, .contact-details .item a { font-size: 1.05rem; color: var(--color-teal-deep); }

form.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form label,
.quiz-lead-form label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 6px;
  display: block;
}
.contact-form input,
.contact-form select,
.contact-form textarea,
.quiz-lead-form input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #c3d2db;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-ink);
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: 0.78rem; color: var(--color-ink); margin-top: 6px; }

/* Footer */
.site-footer {
  background: var(--color-teal-deep);
  color: var(--color-sand);
  padding: 70px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-grid h4 {
  color: var(--color-white);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-family: var(--font-body);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; font-size: 0.9rem; opacity: 0.85; }
.footer-grid li a:hover { text-decoration: underline; }
.footer-brand p { max-width: 320px; opacity: 0.8; font-size: 0.9rem; margin-top: 10px; }
.footer-brand-name { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-white); margin-bottom: 4px; }
.footer-brand-org { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-sand); opacity: 0.85; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  color: var(--color-white);
  transition: background var(--transition), border-color var(--transition);
}
.footer-social a:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.7); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: 0.78rem;
  opacity: 0.65;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .intro-block, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .listing-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { flex-direction: column; row-gap: 18px; }
  .stat { padding: 0 !important; border-right: none !important; }
}

@media (max-width: 680px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }
  .site-header { padding: 18px 22px; }
  .header-social { display: none; }
  .brand { font-size: 1.15rem; gap: 8px; }
  .brand small { font-size: 0.52rem; letter-spacing: 0.22em; }
  .brand-logo { height: 50px; width: 50px; }
  .hero-inner { padding: 0 22px 60px; }
  section { padding: 70px 0; }
  .container { padding: 0 22px; }
  .listing-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats { flex-direction: column; row-gap: 22px; }
  .stat { padding: 0 !important; border-right: none !important; }
  .stat .label { white-space: normal; }
  .scroll-cue { display: none; }
  /* The stats strip (the "2025 / Top 10..." band) uses the same 130px/70px
     section padding and a hero-scale year number as every other section,
     which reads fine on desktop but leaves it looking like mostly empty
     blue on a phone screen. Tighten just this band on mobile. */
  .stats-section { padding: 46px 0 50px; }
  .stats-section .stats-year { font-size: clamp(2.6rem, 14vw, 3.4rem); margin-bottom: 20px; }
  .stats-section .stats { row-gap: 14px; text-align: center; align-items: center; }
  .stats-section .stat { justify-content: center; text-align: center; width: 100%; }
  .stats-section .stat .label { text-align: center; width: 100%; }
}

/* ---------- Property Detail Page ---------- */
.property-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 34px;
}
.property-header .loc { font-size: 1.05rem; color: var(--color-ink); margin-bottom: 6px; }
.property-header h1 { font-size: 2.6rem; margin-bottom: 4px; }
.property-price { font-family: var(--font-display); font-size: 2.1rem; color: var(--color-gold); }
.property-meta-row {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid #dde6ec;
  border-bottom: 1px solid #dde6ec;
  margin-bottom: 50px;
}
.property-meta-row .m { font-size: 0.92rem; color: var(--color-ink); }
.property-meta-row .m strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--color-teal-deep); }

.gallery {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 70px;
  height: 560px;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main { grid-row: 1 / 4; grid-column: 1; }
.gallery a { display: block; overflow: hidden; position: relative; }

.detail-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 70px;
  align-items: start;
}
.detail-grid .description p { color: var(--color-ink); margin-bottom: 16px; }
.fact-sheet { list-style: none; margin: 0 0 30px; padding: 0; }
.fact-sheet li {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid #dde6ec;
  font-size: 0.9rem;
  color: var(--color-ink);
}
.fact-sheet li span:last-child { color: var(--color-teal-deep); font-weight: 500; }

/* Map */
.map-frame {
  position: relative;
  border: 1px solid #dde6ec;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.map-frame img { width: 100%; height: 100%; object-fit: cover; }
.map-caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(247, 250, 252, 0.92);
  padding: 8px 14px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-ink);
}

/* Market Snapshot */
.market-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 46px;
}
.market-stat {
  background: var(--color-white);
  border: 1px solid #dde6ec;
  padding: 26px 24px;
}
.market-stat .label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink); margin-bottom: 10px; }
.market-stat .value { font-family: var(--font-display); font-size: 2rem; color: var(--color-teal-deep); }
.market-stat .delta { font-size: 0.78rem; margin-top: 6px; }
.market-stat .delta.up { color: #4f7a5a; }
.market-stat .delta.down { color: #a05a3f; }

.chart-card {
  background: var(--color-white);
  border: 1px solid #dde6ec;
  padding: 32px 34px 26px;
}
.chart-card .chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.chart-card .chart-head h4 { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); margin: 0; }
.chart-card .chart-head .cur { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-teal-deep); }
.chart-svg-wrap { position: relative; }
.chart-svg-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid-line { stroke: #dde6ec; stroke-width: 1; }
.chart-line { fill: none; stroke: var(--color-teal-deep); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: url(#marketAreaFill); opacity: 0.9; }
.chart-end-dot { fill: var(--color-gold); stroke: var(--color-white); stroke-width: 2; }
.chart-axis-label { font-family: var(--font-body); font-size: 11px; fill: var(--color-ink); }
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--color-teal-deep);
  color: var(--color-white);
  font-size: 0.72rem;
  padding: 7px 11px;
  border-radius: 2px;
  transform: translate(-50%, -130%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 5;
}
.chart-tooltip.visible { opacity: 1; }
.chart-hover-dot {
  fill: var(--color-teal-deep);
  stroke: var(--color-white);
  stroke-width: 2;
  opacity: 0;
}
.chart-hover-line { stroke: #c3d2db; stroke-width: 1; opacity: 0; }
.chart-hit { fill: transparent; }
.market-note { font-size: 0.8rem; color: var(--color-ink); margin-top: 26px; }

@media (max-width: 980px) {
  .gallery { grid-template-columns: 1fr 1fr; height: auto; }
  .gallery-main { grid-row: auto; grid-column: 1 / 3; height: 320px; }
  .detail-grid { grid-template-columns: 1fr; }
  .market-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .property-meta-row { gap: 18px 26px; }
  .market-stats { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-main { grid-column: 1; }
}

/* ---------- Buyer Tools (mortgage calc, neighborhood, quick ask) ---------- */
.tool-card {
  background: var(--color-white);
  border: 1px solid #dde6ec;
  padding: 26px 26px 28px;
  margin-top: 26px;
}
.tool-card h4 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 18px;
}
.calc-disclaimer { font-size: 0.72rem; color: var(--color-ink); margin-top: 16px; line-height: 1.5; }

.quick-ask textarea {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  border: 1px solid #c3d2db;
  background: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-ink);
  resize: vertical;
  margin-bottom: 12px;
}
.quick-ask-actions { display: flex; gap: 10px; }
.quick-ask-actions .btn { flex: 1; text-align: center; font-size: 0.7rem; padding: 12px 10px; }
.text-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e6edf1;
  font-size: 0.84rem;
  color: var(--color-teal-deep);
}
.text-link strong { color: var(--color-ink); font-weight: 600; }

/* ---------- Blog ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.blog-card {
  background: var(--color-white);
  border: 1px solid #dde6ec;
  display: flex;
  flex-direction: column;
}
.blog-media { aspect-ratio: 3/2; overflow: hidden; position: relative; display: block; }
.blog-featured-media { position: relative; }
.blog-badge-soon {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--color-teal-deep);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 2px;
  box-shadow: 0 6px 16px rgba(10,46,55,0.3);
}
.blog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.blog-card:hover .blog-media img { transform: scale(1.06); }
.blog-card-disabled { cursor: default; }
.blog-card-disabled:hover .blog-media img { transform: none; }
.blog-card-disabled .blog-body h3 span { cursor: default; }
.btn-disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.blog-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.blog-cat {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 10px;
}
.blog-body h3 { font-size: 1.4rem; margin-bottom: 10px; }
.blog-body p { color: var(--color-ink); font-size: 1.02rem; line-height: 1.6; flex: 1; margin-bottom: 16px; }
.blog-meta {
  font-size: 0.76rem;
  color: var(--color-ink);
  border-top: 1px solid #e6edf1;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-featured {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 70px;
  padding-bottom: 60px;
  border-bottom: 1px solid #dde6ec;
}
.blog-featured img { border-radius: 2px; aspect-ratio: 4/3; width: 100%; height: auto; object-fit: cover; }
.blog-featured h2 { font-size: 2.1rem; }
.blog-featured p { color: var(--color-ink); margin-bottom: 20px; }

/* Blog post (article) */
.post-header { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.post-header .blog-cat { justify-content: center; display: flex; }
.post-header h1 { font-size: 2.6rem; margin: 14px 0 18px; }
.post-meta {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 0.82rem;
  color: var(--color-ink);
}
.post-hero-img { max-width: 980px; margin: 0 auto 56px; aspect-ratio: 16/8; overflow: hidden; }
.post-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.post-body {
  max-width: 700px;
  margin: 0 auto;
  color: var(--color-ink);
  font-size: 1.05rem;
}
.post-body p { margin-bottom: 22px; }
.post-body h2 { font-size: 1.7rem; margin-top: 44px; }
.post-body h3 { font-size: 1.35rem; margin-top: 34px; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 22px; }
.post-body li { margin-bottom: 10px; }
.post-body blockquote,
.about-grid blockquote {
  border-left: 3px solid var(--color-gold);
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-teal-deep);
}
.post-author {
  max-width: 700px;
  margin: 60px auto 0;
  padding-top: 34px;
  border-top: 1px solid #dde6ec;
  display: flex;
  gap: 20px;
  align-items: center;
}
.post-author img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; }
.post-author .name { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-teal-deep); }
.post-author .role { font-size: 0.78rem; color: var(--color-ink); letter-spacing: 0.06em; text-transform: uppercase; }

.related-posts { max-width: 980px; margin: 80px auto 0; }
.related-posts h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-align: center;
  margin-bottom: 34px;
}

@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post-header h1 { font-size: 2rem; }
  .post-meta { flex-wrap: wrap; gap: 10px; }
}

/* ---------- Home Fit Quiz ---------- */
.quiz-wrap { max-width: 720px; }
.quiz-card {
  background: var(--color-white);
  border: 1px solid #c9d6dd;
  padding: 40px 40px 44px;
  margin-top: 10px;
}
.quiz-intro p {
  color: var(--color-ink);
  margin-bottom: 26px;
  line-height: 1.7;
}
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.quiz-progress span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}
.quiz-progress-bar {
  flex: 1;
  height: 4px;
  background: #e3ebef;
}
.quiz-progress-fill {
  height: 100%;
  background: var(--color-slate);
  transition: width 0.3s ease;
}
.quiz-question h3 {
  margin-bottom: 22px;
  font-size: 1.5rem;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.quiz-option {
  text-align: left;
  padding: 15px 20px;
  border: 1px solid #c9d6dd;
  background: var(--color-sand-light);
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.quiz-option:hover {
  border-color: var(--color-slate);
  background: var(--color-white);
}
.quiz-back {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-teal-deep);
  cursor: pointer;
  padding: 0;
}
.quiz-result .eyebrow { display: block; margin-bottom: 6px; }
.quiz-result h3 { font-size: 1.9rem; margin-bottom: 16px; }
.quiz-result p { color: var(--color-ink); line-height: 1.7; margin-bottom: 26px; }
.quiz-lead {
  background: var(--color-white);
  border: 1px solid #dbe4e9;
  padding: 28px 30px;
  margin-bottom: 22px;
}
.quiz-lead h4 { font-size: 1.05rem; margin-bottom: 6px; color: var(--color-teal-deep); }
.quiz-lead > p { color: var(--color-ink); margin-bottom: 18px; font-size: 1.02rem; line-height: 1.65; }
.quiz-lead-form { display: flex; flex-direction: column; gap: 16px; }
.quiz-lead-form .form-row { margin-bottom: 0; }
.quiz-result-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.quiz-retake {
  display: block;
  margin-top: 22px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-ink);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
@media (max-width: 680px) {
  .quiz-card { padding: 30px 22px 34px; }
  .quiz-result-actions { flex-direction: column; }
  .quiz-result-actions .btn { text-align: center; }
}

/* Nav mobile drawer */
.nav-links.open {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 78%;
  max-width: 320px;
  background: var(--color-teal-deep);
  flex-direction: column;
  padding: 100px 40px 40px;
  gap: 26px;
  z-index: 400;
  overflow-y: auto;
}
.nav-links.open a { color: var(--color-white); }

/* ==========================================================================
   Editorial Refresh — bolder type, asymmetry, overlap
   Everything below intentionally overrides the base rules above.
   ========================================================================== */

/* ---- Type scale ---- */
h1, h2, h3, h4 { letter-spacing: -0.01em; }
.hero h1 { font-size: clamp(3rem, 7vw, 5.6rem); letter-spacing: -0.02em; }
.hero-centered h1:not(.oneliner) { font-size: clamp(2.2rem, 3.6vw, 3.6rem); white-space: nowrap; }
.hero-centered h1.oneliner { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
@media (max-width: 900px) {
  .hero-centered h1:not(.oneliner) { white-space: normal; }
}
.page-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.2rem); letter-spacing: -0.02em; }
.intro-block h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.section-head h2:not(.oneliner) { font-size: clamp(2rem, 3.4vw, 2.8rem); white-space: nowrap; }
.section-head h2.oneliner { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.section-head-wide { max-width: 900px; }
.section-head-wide h2:not(.oneliner) { font-size: clamp(2.4rem, 4vw, 3.4rem); white-space: nowrap; }
.section-head-wide h2.oneliner { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.section-head-wide p { font-size: 1.15rem; line-height: 1.85; }
.section-head-wide .eyebrow { white-space: nowrap; }
@media (max-width: 900px) {
  .section-head h2:not(.oneliner) { white-space: normal; }
  .section-head-wide h2:not(.oneliner) { white-space: normal; }
}
@media (max-width: 640px) {
  .section-head-wide .eyebrow { white-space: normal; }
}
.topic-section-head { max-width: 900px; }
.topic-section-head h2:not(.oneliner) { font-size: clamp(1.9rem, 2.8vw, 2.6rem); white-space: nowrap; }
.topic-section-head h2.oneliner { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
@media (max-width: 760px) {
  .topic-section-head h2:not(.oneliner) { white-space: normal; }
}
.eyebrow {
  position: relative;
  padding-left: 0;
}
.eyebrow::before {
  display: none;
}
.section-head .eyebrow { display: inline-block; }

/* ---- Buttons: animated underline sweep on outline buttons ---- */
.btn {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  transition: color var(--transition), border-color var(--transition);
}
.btn:not(.btn-solid):not(.btn-light)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-teal-deep);
  transform: translateY(101%);
  transition: transform 0.35s ease;
  z-index: -1;
}
.btn:not(.btn-solid):not(.btn-light):hover::before { transform: translateY(0); }
.btn:not(.btn-solid):not(.btn-light):hover { background: transparent; }

/* ---- Hero: floating overlap card (home only) ---- */
.hero { align-items: center; padding-top: 140px; }
.hero-inner { max-width: 800px; padding-bottom: 40px; }
@media (max-width: 680px) {
  .hero { padding-top: 110px; }
}
.hero-float-card {
  position: absolute;
  left: 40px;
  bottom: -46px;
  background: var(--color-white);
  color: var(--color-teal-deep);
  padding: 26px 34px;
  display: flex;
  gap: 36px;
  box-shadow: 0 20px 50px rgba(15,30,42,0.18);
  z-index: 20;
}
.hero-float-card .fc-item { text-align: left; }
.hero-float-card .fc-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--color-teal-deep);
}
.hero-float-card .fc-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.hero-float-card .fc-div { width: 1px; background: #e2e8ec; }
@media (max-width: 780px) {
  .hero-float-card { left: 22px; right: 22px; bottom: -40px; gap: 20px; padding: 20px 20px; overflow-x: auto; }
}

/* ---- Intro block: offset frame instead of flat image ---- */
.intro-block {
  position: relative;
  padding-top: 30px;
  grid-template-columns: 0.95fr 1.05fr;
}
.intro-block > img,
.frame-offset {
  position: relative;
  z-index: 2;
  align-self: start;
  outline: 1px solid var(--color-slate);
  outline-offset: 18px;
}
.signature { font-size: 2rem; }

/* This later grid-template-columns declaration otherwise beats the
   earlier mobile-stacking rule (same selector, later in cascade), so
   the intro block never dropped to one column on phones. Re-assert
   the stack here so it always wins at this width. */
@media (max-width: 980px) {
  .intro-block {
    grid-template-columns: 1fr;
    padding-top: 0;
  }
  .intro-block > img,
  .frame-offset {
    outline-offset: 10px;
  }
}

.intro-block-wide { max-width: 1500px; gap: 90px; }

/* ---- Stats: hairline dividers, tighter feel ---- */
.stats { text-align: left; }
.stat { display: flex; align-items: center; padding: 0 30px; }
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.45); }
.stat .num { font-size: 3.1rem; }

/* ---- Listings + Blog: even, organized grid ---- */
.listing-card, .blog-card {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  border-color: #dde6ec;
}
.listing-card:hover, .blog-card:hover {
  box-shadow: 0 12px 28px rgba(15,30,42,0.08);
}

/* ---- Testimonial: oversized quote mark ---- */
.testimonial { position: relative; padding-top: 20px; }
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 9rem;
  color: var(--color-slate);
  opacity: 0.25;
  line-height: 1;
  pointer-events: none;
}
.testimonial blockquote { position: relative; z-index: 1; font-size: 1.9rem; }

/* ---- Page hero: bottom-left editorial alignment ---- */
.page-hero {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  padding-bottom: 56px;
}
.page-hero .container,
.page-hero > div { padding: 0 40px; max-width: var(--max-width); margin: 0 auto; width: 100%; }
@media (max-width: 680px) {
  .page-hero { padding-bottom: 36px; }
  .page-hero > div { padding: 0 22px; }
}

/* Contact page hero: centered instead of the usual bottom-left treatment */
.page-hero-centered {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.page-hero-centered .eyebrow { padding-left: 0; }
.page-hero-centered .eyebrow::before { display: none; }

/* ---- Nav: sliding underline instead of static border ---- */
.nav-links a {
  position: relative;
  border-bottom: none;
  padding-bottom: 6px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

/* ---- CTA band: tighter, bolder ---- */
.cta-band h2:not(.oneliner) { font-size: clamp(2.2rem, 4.2vw, 3.2rem); white-space: nowrap; }
.cta-band h2.oneliner { font-size: clamp(2.2rem, 4.2vw, 3.2rem); }
@media (max-width: 900px) {
  .cta-band h2:not(.oneliner) { white-space: normal; }
}

/* ---- One-off swap: eyebrow takes the big serif title look, h2 takes the small eyebrow look ---- */
.cta-band .eyebrow.eyebrow-as-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 0.5em;
}
.cta-band h2.title-as-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-sand);
  white-space: normal;
  margin: 0 0 14px;
}

/* ---- One-off size reduction: these two headings render too large/expanded at their tier's one-line width ---- */
h2.oneliner.heading-compact {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
}

/* ---- One-off: forced 2-line title via manual <br> split. Font scales fluidly across the FULL
   width range (not just above ~1200px like the default clamp) so the longer half always has
   room to stay on one line and the title holds at 2 lines from ~400px up through 1920px.
   Built with a real safety margin (not an exact-fit edge) so small font-rendering differences
   between browsers/OSes don't tip it back into 3 lines. ---- */
h2.title-two-line {
  white-space: normal !important;
  text-wrap: initial;
  font-size: clamp(1.25rem, calc(7.5vw - 4px), 3.1rem) !important;
}

/* ---- Section links with arrow motion ---- */
.listing-link, .blog-body h3 a { transition: letter-spacing 0.25s ease; }
.listing-link:hover { letter-spacing: 0.16em; }

/* ---------- Market Report (The Plateau Quarterly) ---------- */
.mr-masthead { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.mr-masthead .issue { font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 14px; }
.mr-masthead h2:not(.oneliner) { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 16px; white-space: nowrap; }
.mr-masthead h2.oneliner { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 16px; }
@media (max-width: 900px) {
  .mr-masthead h2:not(.oneliner) { white-space: normal; }
}
.mr-masthead p { color: var(--color-ink); font-size: 1rem; line-height: 1.7; }
.mr-source-note { font-size: 0.76rem; color: var(--color-ink); margin-top: 18px; line-height: 1.6; max-width: 900px; }
.mr-letter {
  background: var(--color-white);
  border: 1px solid #dde6ec;
  padding: 40px 44px;
  margin: 56px 0;
  display: flex;
  gap: 28px;
}
.mr-letter img { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mr-letter .name { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-teal-deep); margin-bottom: 4px; }
.mr-letter .role { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); margin-bottom: 20px; }
.mr-letter blockquote { margin: 0; font-size: 1.18rem; line-height: 1.8; color: var(--color-ink); }
.mr-letter blockquote p { margin: 0 0 18px; }
.mr-letter cite { display: block; margin-top: 18px; font-style: normal; color: var(--color-teal-deep); font-family: var(--font-display); font-size: 1.1rem; }
@media (max-width: 680px) {
  .mr-letter { flex-direction: column; padding: 30px 26px; }
  .mr-letter img { width: 84px; height: 84px; }
  .mr-letter blockquote { font-size: 1.05rem; }
}

.mr-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 20px; }
@media (max-width: 780px) { .mr-two-col { grid-template-columns: 1fr; } }
.mr-indicator { background: var(--color-white); border: 1px solid #dde6ec; padding: 28px 30px; }
.mr-indicator .label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink); margin-bottom: 10px; }
.mr-indicator .value { font-family: var(--font-display); font-size: 1.7rem; color: var(--color-teal-deep); margin-bottom: 8px; }
.mr-indicator .note { font-size: 0.82rem; color: var(--color-ink); line-height: 1.6; }
.mr-indicator .pending { font-family: var(--font-display); font-size: 1.7rem; color: var(--color-ink); margin-bottom: 8px; }

.mr-table-wrap { overflow-x: auto; margin-bottom: 14px; }
table.mr-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--color-white); }
table.mr-table th, table.mr-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid #e6edf1; }
table.mr-table th { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); font-weight: 500; border-bottom: 2px solid #dde6ec; }
table.mr-table td.num, table.mr-table th.num { text-align: right; }
table.mr-table tr:last-child td { border-bottom: none; }
table.mr-table td.dim { color: var(--color-ink); }
.mr-table-link { display: inline-block; margin: 0 0 40px; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); border-bottom: 1px solid transparent; }
.mr-table-link:hover { border-color: var(--color-gold); }
.mr-table-head { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-teal-deep); margin-bottom: 14px; }

.mr-construction { background: var(--color-white); border: 1px solid #dde6ec; padding: 34px 30px; text-align: center; margin-bottom: 14px; }
.mr-construction-badge { display: inline-block; background: var(--color-teal-deep); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 14px; border-radius: 2px; margin-bottom: 14px; }
.mr-construction p { font-size: 0.9rem; color: var(--color-ink); line-height: 1.6; max-width: 560px; margin: 0 auto; }

/* ---------- Active Listings grid ---------- */
.active-listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
@media (max-width: 980px) { .active-listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .active-listing-grid { grid-template-columns: 1fr; } }
.active-listing-card { background: var(--color-white); border: 1px solid #dde6ec; display: flex; flex-direction: column; }
.active-listing-photo {
  aspect-ratio: 4/3;
  position: relative;
  background: linear-gradient(135deg, #dbe4ea 0%, #b9c9d4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.active-listing-photo svg { width: 54px; height: 54px; opacity: 0.5; color: var(--color-teal-deep); }
.active-listing-reduced { background: #a05a3f; }
.active-listing-photo-real { background: none; }
.active-listing-photo-real img { width: 100%; height: 100%; object-fit: cover; display: block; }
.active-listing-photo .photo-note {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
  opacity: 0.75;
}
.active-listing-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-teal-deep);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 2px;
}
.active-listing-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.active-listing-price { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-teal-deep); margin-bottom: 6px; }
.active-listing-addr { font-size: 1.02rem; color: var(--color-ink); font-weight: 600; margin-bottom: 2px; }
.active-listing-loc { font-size: 0.86rem; color: var(--color-ink); opacity: 0.75; margin-bottom: 14px; }
.active-listing-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8rem; color: var(--color-ink); border-top: 1px solid #e6edf1; padding-top: 14px; margin-top: auto; margin-bottom: 16px; }
.active-listing-meta span strong { color: var(--color-teal-deep); }

.mr-narrative-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 900px) { .mr-narrative-grid { grid-template-columns: 1fr; } }
.mr-narrative-card h4 { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-teal-deep); margin-bottom: 10px; }
.mr-narrative-card p { font-size: 1.02rem; color: var(--color-ink); line-height: 1.7; margin-bottom: 8px; }
.mr-narrative-card .src { font-size: 0.72rem; color: var(--color-ink); }

.mr-house-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--color-white);
  border: 1px solid #dde6ec;
}
.mr-house-card img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; display: block; }
.mr-house-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.mr-house-tag { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 10px; }
.mr-house-body h3 { font-size: 1.5rem; margin-bottom: 6px; }
.mr-house-price { font-family: var(--font-display); font-size: 1.7rem; color: var(--color-teal-deep); margin-bottom: 10px; }
.mr-house-meta { display: flex; gap: 18px; font-size: 0.82rem; color: var(--color-ink); margin-bottom: 18px; }
.mr-house-body p.desc { font-size: 1.02rem; color: var(--color-ink); line-height: 1.7; margin-bottom: 20px; }
@media (max-width: 780px) { .mr-house-card { grid-template-columns: 1fr; } .mr-house-card img { min-height: 240px; } }

/* ---- Buying page: tall lead hero with paragraph + CTA row ---- */
.page-hero.has-lead {
  height: auto;
  min-height: 460px;
  padding-top: 168px;
  padding-bottom: 64px;
}
.page-hero.has-lead > div { max-width: 980px; margin: 0 auto; }
.page-hero.has-lead h1:not(.oneliner) { font-size: clamp(2rem, 3.1vw, 3.1rem); white-space: nowrap; }
.page-hero.has-lead h1.oneliner { font-size: clamp(2rem, 3.1vw, 3.1rem); }
@media (max-width: 900px) {
  .page-hero.has-lead h1:not(.oneliner) { white-space: normal; }
}
.page-hero.has-lead p { color: var(--color-sand-light); font-size: 1.02rem; line-height: 1.7; margin: 18px 0 26px; }
@media (max-width: 680px) {
  .page-hero.has-lead { padding-top: 130px; }
}

/* ---- Prose block: constrained-width body copy for long-form pages ---- */
.prose { max-width: 760px; }
.prose-wide { max-width: 1040px; }
.prose-wide h2 { font-size: clamp(2rem, 3vw, 2.6rem); }
.prose-wide p { font-size: 1.12rem; line-height: 1.85; }
.prose p { color: var(--color-ink); font-size: 1rem; line-height: 1.8; margin-bottom: 18px; }
.prose p strong { color: var(--color-ink); }
.cadence-lines {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 2;
  color: var(--color-teal-deep);
  margin-bottom: 28px !important;
}
.cadence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
  margin-bottom: 28px;
}
.cadence-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-teal-deep);
  margin: 0 !important;
}
@media (max-width: 680px) {
  .cadence-grid { grid-template-columns: 1fr; gap: 6px; }
}
.prose .text-cta { display: inline-block; margin-top: 6px; }
.prose-center { max-width: 760px; margin: 0 auto; text-align: center; }
.prose-center p { text-align: left; }

/* ---- Prose section with a paired photo column (e.g. Buying page intro) ---- */
.prose-photo-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.prose-photo-col {
  position: relative;
  padding-bottom: 40px;
  padding-right: 30px;
}
.prose-photo {
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 24px 46px -30px rgba(10,46,55,0.55);
}
.prose-photo img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}
.prose-photo-primary { width: 78%; }
.prose-photo-secondary {
  position: absolute;
  width: 50%;
  right: 0;
  bottom: 0;
  border: 6px solid var(--color-cream);
  z-index: 2;
}
.prose-photo-grid .prose { max-width: 640px; }
@media (max-width: 900px) {
  .prose-photo-grid { grid-template-columns: 1fr; gap: 30px; }
  .prose-photo-col { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .prose-photo-col { padding-right: 20px; padding-bottom: 30px; }
  .prose-photo-secondary { border-width: 4px; }
}

/* ---- Process grid: six-step buying journey ---- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 40px;
  max-width: 980px;
  margin: 0 auto;
}
.process-step .num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-teal-deep);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 10px;
}
.process-step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.process-step p { color: var(--color-ink); font-size: 1rem; line-height: 1.7; margin: 0; }
@media (max-width: 980px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .process-grid { grid-template-columns: 1fr; } }

/* ---- Tips list: bold lead-in + short explanation, no bullets ---- */
.tips-list { max-width: 780px; margin: 0 auto; list-style: none; padding: 0; }
.tips-list li { padding: 22px 0; border-bottom: 1px solid #dde6ec; }
.tips-list li:first-child { padding-top: 0; }
.tips-list li:last-child { border-bottom: none; }
.tips-list .lead { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--color-teal-deep); margin-bottom: 6px; }
.tips-list .sub { display: block; color: var(--color-ink); font-size: 1.02rem; line-height: 1.65; }

/* ---- Topic slider: one topic at a time, arrow/dot navigation ---- */
.topic-slider { max-width: 760px; margin: 0 auto; }
.topic-slider-viewport { overflow: hidden; }
.topic-slider-track {
  display: flex;
  transition: transform 0.45s ease;
}
.topic-slide {
  flex: 0 0 100%;
  min-width: 0;
  text-align: center;
  padding: 4px 4px 8px;
}
.topic-slide .lead {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--color-teal-deep);
  margin-bottom: 18px;
}
.topic-slide .sub {
  color: var(--color-ink);
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto;
}
.topic-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 34px;
}
.topic-slider-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-teal-deep);
  background: transparent;
  color: var(--color-teal-deep);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.topic-slider-arrow:hover { background: var(--color-teal-deep); color: var(--color-white); }
.topic-slider-arrow svg { width: 18px; height: 18px; }
.topic-slider-dots { display: flex; gap: 9px; }
.topic-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #c3d2db;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.topic-slider-dot:hover { background: var(--color-slate); }
.topic-slider-dot.active { background: var(--color-teal-deep); transform: scale(1.2); }
@media (max-width: 600px) {
  .topic-slide .lead { font-size: 1.25rem; }
  .topic-slide .sub { font-size: 1rem; }
  .topic-slider-controls { gap: 16px; }
}

/* ---- Community grid: six towns of the Plateau ---- */
.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.community-card { display: block; background: var(--color-white); border: 1px solid #dde6ec; transition: box-shadow 0.35s ease, transform 0.35s ease; }
.community-card:hover { box-shadow: 0 26px 46px -28px rgba(57,119,168,0.45); transform: translateY(-3px); }
.community-photo { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.community-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.community-card:hover .community-photo img { transform: scale(1.05); }
.community-body { padding: 22px 24px 26px; }
.community-body h3 { font-size: 1.05rem; margin-bottom: 8px; letter-spacing: 0.02em; }
.community-body p { color: var(--color-ink); font-size: 0.98rem; line-height: 1.65; margin: 0; }
@media (max-width: 980px) { .community-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .community-grid { grid-template-columns: 1fr; } }

/* ---- Selling page: image + copy feature block (NC Living, national press) ---- */
.feature-split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
.feature-split .feature-photo img {
  width: 100%;
  object-fit: cover;
  box-shadow: 0 24px 46px -30px rgba(10,46,55,0.55);
  display: block;
}
.feature-split h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); margin-bottom: 16px; }
.feature-split p { color: var(--color-ink); margin-bottom: 16px; line-height: 1.75; }
.feature-split-big h2 { font-size: clamp(2rem, 3.2vw, 2.6rem); }
.feature-split-big p { font-size: 1.05rem; line-height: 1.8; }
.feature-split-big { grid-template-columns: 1.2fr 0.8fr; max-width: 1600px; gap: 90px; }
.feature-split .feature-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.feature-split.reverse .feature-photo { order: 2; }
@media (max-width: 900px) {
  .feature-split { grid-template-columns: 1fr; }
  .feature-split.reverse .feature-photo { order: 0; }
}

/* ---- Selling page: wider process grid for a 7-step journey ---- */
.process-grid.wide { grid-template-columns: repeat(4, 1fr); max-width: 1100px; }
@media (max-width: 980px) { .process-grid.wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .process-grid.wide { grid-template-columns: 1fr; } }

/* ---- Selling page: home-valuation lead form ---- */
.valuation-form-wrap { max-width: 620px; margin: 0 auto; }
.valuation-form-wrap .form-row { margin-bottom: 0; }
.valuation-form-wrap-big { max-width: 760px; }
.valuation-form-wrap-big label,
.valuation-form-wrap-big legend { font-size: 0.85rem; }
.valuation-form-wrap-big input,
.valuation-form-wrap-big select,
.valuation-form-wrap-big textarea { font-size: 1.05rem; padding: 16px 16px; }
.valuation-form-wrap-big .choice-pill { font-size: 1rem; padding: 14px 18px; }
.valuation-form-wrap fieldset { border: none; padding: 0; margin: 0; }
.valuation-form-wrap legend {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 10px;
  padding: 0;
}
.choice-group { display: flex; flex-wrap: wrap; gap: 10px; }
.choice-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid #c3d2db;
  background: var(--color-white);
  font-size: 0.86rem;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.choice-pill:hover { border-color: var(--color-slate); background: var(--color-sand-light); }

/* ---------- Plateau Guide page ---------- */

/* Full-width map frame */
.plateau-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  border: 1px solid #dde6ec;
  box-shadow: 0 24px 46px -30px rgba(10,46,55,0.45);
  display: block;
  background: var(--color-cream);
  padding: 0;
  cursor: zoom-in;
  transition: box-shadow 0.3s ease;
}
.plateau-map-frame:hover { box-shadow: 0 28px 54px -26px rgba(10,46,55,0.55); }
.plateau-map-frame img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
@media (max-width: 680px) { .plateau-map-frame { aspect-ratio: 4/3; } }

.map-zoom-hint {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.94);
  color: var(--color-teal-deep);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 16px;
  box-shadow: 0 10px 24px -12px rgba(10,46,55,0.4);
}

/* ---- Map lightbox: click-to-zoom viewer for the Plateau map ---- */
.map-lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #14232a;
  display: none;
  flex-direction: column;
}
.map-lightbox.open { display: flex; }
.map-lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  flex-wrap: wrap;
  gap: 10px;
}
.map-lightbox-hint {
  color: rgba(255,255,255,0.65);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}
.map-lightbox-controls { display: flex; align-items: center; gap: 10px; }
.map-lightbox-controls button {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--color-white);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.25s ease;
}
.map-lightbox-controls button:hover { background: rgba(255,255,255,0.22); }
#mapZoomOut, #mapZoomIn {
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
  line-height: 1;
}
#mapZoomReset {
  padding: 0 16px;
  height: 36px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#mapLightboxClose {
  width: 36px;
  height: 36px;
  font-size: 1.3rem;
  line-height: 1;
  margin-left: 6px;
}
.map-lightbox-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: grab;
  touch-action: none;
}
.map-lightbox-viewport.grabbing { cursor: grabbing; }
.map-lightbox-viewport img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 94vw;
  max-height: 100%;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 680px) {
  .map-lightbox-bar { padding: 14px 16px; }
  .map-lightbox-hint { display: none; }
  .map-zoom-hint span { display: none; }
}

/* Small uppercase tag line, reused inside community/category/article cards */
.tag-line {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
  display: block;
  margin-bottom: 6px;
}
.community-body .tag-line { margin-bottom: 8px; }
.category-card .tag-line { font-size: 0.85rem; }

/* Four-up category grid: Find Your Place / Buy Smarter / Own It Well / Sell Strategically */
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.category-card { background: var(--color-white); border: 1px solid #dde6ec; padding: 38px 36px; }
.category-card h3 { font-size: 1.35rem; margin-bottom: 14px; }
.category-card p { color: var(--color-ink); line-height: 1.75; margin-bottom: 18px; }
@media (max-width: 780px) { .category-grid { grid-template-columns: 1fr; } }

/* Three-up editorial article cards: Featured From the Plateau Guide */
.editorial-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.editorial-card { background: var(--color-white); border: 1px solid #dde6ec; }
.editorial-card .card-photo { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.editorial-card .card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial-card .card-body { padding: 24px 26px 28px; }
.editorial-card h3 { font-size: 1.1rem; margin-bottom: 10px; line-height: 1.35; }
.editorial-card p { color: var(--color-ink); font-size: 1.02rem; line-height: 1.65; margin-bottom: 14px; }
.editorial-card-disabled { cursor: default; }
.listing-link-disabled { opacity: 0.55; cursor: default; pointer-events: none; }
@media (max-width: 980px) { .editorial-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .editorial-card-grid { grid-template-columns: 1fr; } }

/* Two-column italic question list */
.question-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; max-width: 900px; margin: 0 auto; }
.question-grid .q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-teal-deep);
  padding: 14px 0 14px 20px;
  border-left: 2px solid var(--color-sand);
  margin: 0;
}
@media (max-width: 680px) { .question-grid { grid-template-columns: 1fr; } }

/* Lightweight guide/reading list (no card boxes) */
.guide-list { max-width: 900px; margin: 0 auto; border-top: 1px solid #dde6ec; }
.guide-list-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid #dde6ec;
}
.guide-list-item-text { max-width: 620px; }
.guide-list-item .tag-line { display: block; margin-bottom: 8px; font-size: 0.95rem; }
.guide-list-item h3 { font-size: 1.7rem; margin: 0 0 10px; }
.guide-list-item p { margin: 0; color: var(--color-ink); font-size: 1.3rem; line-height: 1.7; }
.guide-list-item .listing-link { white-space: nowrap; flex-shrink: 0; font-size: 1rem; }
@media (max-width: 680px) {
  .guide-list-item { flex-direction: column; align-items: flex-start; gap: 14px; }
}

.question-grid-big { max-width: 1080px; gap: 22px 48px; }
.question-grid-big .q { font-size: 1.3rem; line-height: 1.5; padding: 16px 0 16px 22px; }

/* Issuu digital-guide embed, responsive */
.issuu-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  box-shadow: 0 30px 60px -34px rgba(10,46,55,0.5);
  background: var(--color-sand-light);
}
.issuu-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 680px) { .issuu-embed-wrap { aspect-ratio: 4/5; } }

/* Placeholder note used where an embed can't load in the chat preview.
   Positioned to fill its aspect-ratio-boxed parent (.issuu-embed-wrap etc.)
   the same way the real iframe would, instead of leaving blank space below it. */
.embed-preview-note {
  position: absolute;
  inset: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  background: var(--color-sand-light);
  border: 1px dashed #b9cbd6;
}
.embed-preview-note p { color: var(--color-ink); margin-bottom: 18px; max-width: 520px; margin-left: auto; margin-right: auto; }
.choice-pill input { accent-color: var(--color-teal-deep); margin: 0; }

/* ---------- Listings page ---------- */

/* One-sentence Rachel-voice description inside a listing card */
.listing-desc { color: var(--color-ink); font-size: 1rem; line-height: 1.7; margin-bottom: 16px; }
.listing-meta span:not(:first-child) { position: relative; padding-left: 20px; }
.listing-meta span:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c3d2db;
}

/* Four-up lifestyle pathway grid: In Town / Private Club / On the Lake / Views & Acreage */
.lifestyle-path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.lifestyle-path { padding-top: 20px; border-top: 2px solid var(--color-sand); }
.lifestyle-path .label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-teal-deep);
  margin-bottom: 8px;
  display: block;
}
.lifestyle-path p { color: var(--color-ink); font-size: 1rem; line-height: 1.65; margin: 0; }
@media (max-width: 980px) { .lifestyle-path-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .lifestyle-path-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Explore dropdown nav (town hub pages)
   ========================================================================== */
.has-dropdown { position: relative; }
.dropdown-menu { list-style: none; margin: 0; padding: 0; }
@media (min-width: 981px) {
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--color-white);
    border: 1px solid #dde6ec;
    box-shadow: 0 26px 46px -26px rgba(10,46,55,0.4);
    padding: 10px 0;
    min-width: 210px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 600;
  }
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .dropdown-menu li { display: block; }
  .dropdown-menu a {
    display: block;
    padding: 9px 22px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-ink) !important;
  }
  .dropdown-menu a::after { display: none; }
  .dropdown-menu a:hover { background: var(--color-sand-light); color: var(--color-teal-deep) !important; }
}
@media (max-width: 980px) {
  .dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
    padding-left: 16px;
  }
  .dropdown-menu a { font-size: 0.72rem; opacity: 0.8; }
}

/* Town hub pages: quick-facts band + club list */
.town-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.town-fact .num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  color: var(--color-white);
  display: block;
  margin-bottom: 6px;
  line-height: 1.25;
}
.town-fact .label {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sand);
}
@media (max-width: 780px) { .town-facts { grid-template-columns: 1fr; gap: 26px; } }

.club-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.club-card { background: var(--color-white); border: 1px solid #dde6ec; padding: 26px 28px; }
.club-card h4 { font-size: 1.05rem; margin-bottom: 8px; }
.club-card p { color: var(--color-ink); font-size: 0.98rem; line-height: 1.7; margin: 0; }
@media (max-width: 780px) { .club-grid { grid-template-columns: 1fr; } }

.town-nav-strip { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }
.town-nav-strip a {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.town-nav-strip a:hover { color: var(--color-teal-deep); border-color: currentColor; }
.town-nav-strip a.active { color: var(--color-teal-deep); border-color: currentColor; }

/* ---- Headings too long to ever fit one line at these font sizes/column
   widths (full sentences, not short titles) — let them wrap normally
   instead of forcing white-space: nowrap, which pushed them past the
   edge of the screen on wider viewports instead of staying centered. ---- */
.wraps-ok { white-space: normal !important; text-wrap: balance; }

/* Titles forced to a single line at their existing font-size, regardless of
   whether that's wider than their usual column. width:max-content sizes the
   box to the (unwrapped) text instead of the column, and the position/left/
   transform centers that box on the same center point as its container —
   this stays centered even when the text is wider than the column, unlike
   `margin:0 auto`, which resolves to 0 (left-aligned) once the box is wider
   than its containing block. Not applied to headings inside narrow grid
   columns (e.g. text+photo splits), where a wide box would run into the
   neighboring column instead of just being off-center. */
/* Base state (phones): these titles just wrap normally, balanced across
   lines, same as any other heading — there's no way to keep them on one
   line at full font-size once the text is wider than the phone itself. */
.oneliner {
  white-space: normal;
  text-wrap: balance;
  width: auto;
  max-width: none;
  position: static;
  left: auto;
  transform: none;
}
/* Each title gets its own breakpoint (tier-N = "safe to go one-line from
   Npx up"), picked per-title from its actual measured text width — a short
   title like "Where the Market Stands" can go one-line much earlier than a
   long one like "Wondering what a thin market means for your house?". Above
   its tier, the title switches to a single line, sized to its own text
   (width:max-content) and re-centered on the same center point as its
   column via the left:50%/translateX(-50%) trick — that stays centered
   even when the text is wider than the column, unlike `margin:0 auto`,
   which resolves to 0 (left-aligned) once a box is wider than its
   containing block. */
@media (min-width: 480px) { .tier-480.oneliner { white-space: nowrap; width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); } }
@media (min-width: 560px) { .tier-560.oneliner { white-space: nowrap; width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); } }
@media (min-width: 620px) { .tier-620.oneliner { white-space: nowrap; width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); } }
@media (min-width: 660px) { .tier-660.oneliner { white-space: nowrap; width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); } }
@media (min-width: 720px) { .tier-720.oneliner { white-space: nowrap; width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); } }
@media (min-width: 780px) { .tier-780.oneliner { white-space: nowrap; width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); } }
@media (min-width: 840px) { .tier-840.oneliner { white-space: nowrap; width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); } }
@media (min-width: 920px) { .tier-920.oneliner { white-space: nowrap; width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); } }
@media (min-width: 980px) { .tier-980.oneliner { white-space: nowrap; width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); } }
@media (min-width: 1100px) { .tier-1100.oneliner { white-space: nowrap; width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); } }

/* .hero-inner is a column flexbox, where the left/transform trick above
   measures percentages against the wrong box (padding throws it off by
   exactly the padding amount) and overflow no longer stays centered.
   Flexbox's own align-self:center handles centering-with-overflow
   correctly here (whether wrapped or single-line), so use that instead and
   cancel the block-layout trick at every width. */
.hero-inner .oneliner {
  position: static;
  left: auto;
  transform: none;
  align-self: center;
}

/* These three titles were left-aligned by design (page-hero.has-lead's
   lead-in headline, and a prose-wide block heading) — not centered
   .section-head-style titles. The center-on-overflow trick above would
   have re-centered them, which changes their alignment, not just their
   line count. Cancel it so they stay left-aligned and simply grow wider
   without wrapping, same as before. */
.page-hero.has-lead .oneliner,
.prose-wide .oneliner {
  position: static;
  left: auto;
  transform: none;
}

/* Headings that wrap onto multiple lines (below the nowrap breakpoints, or
   the .wraps-ok titles above) get even line lengths instead of a ragged
   last line, so a 3-word overflow onto its own line doesn't happen when
   the text could instead balance across 2 lines. Falls back to ordinary
   wrapping in browsers that don't support text-wrap: balance. */
.section-head h2:not(.oneliner),
.section-head-wide h2:not(.oneliner),
.topic-section-head h2:not(.oneliner),
.hero-centered h1:not(.oneliner),
.page-hero.has-lead h1:not(.oneliner),
.listings-evergreen h2:not(.oneliner),
.cta-band h2:not(.oneliner),
.mr-masthead h2:not(.oneliner) {
  text-wrap: balance;
}