/* ==========================================================================
   Signature Property Collection — brand tokens
   Colors audited from the official brand swatch in Google Drive
   (SignaturePropertyCollection_Colors.jpg — matches the fill color used
   inside the real logo file):
     #B86F7A  dusty rose   — PRIMARY accent (this is "the dusty rose")
     #BA8C84  mauve        — secondary accent / hover state
     #DEB3A5  peach        — tertiary tint only, used sparingly (not primary)
     #000000 / #FFFFFF     — true black / white
     #A7A9AC / #C0C1C4     — cool grays
   No red anywhere — removed per Christine's note.
   Fonts audited from SignaturePropertyCollection_Typography doc:
     Baskerville (headers) -> Libre Baskerville (closest free equivalent)
     Poppins (sub-headers & body) -> Poppins (exact match, free on Google Fonts)
   Corinthia (script accent) confirmed separately via the live site's own
   Google Fonts link — kept for small script eyebrow text only.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --charcoal: #141415;
  --rose: #B86F7A;       /* primary — "the dusty rose" */
  --mauve: #BA8C84;      /* secondary / hover */
  --peach: #DEB3A5;      /* tertiary tint only — used sparingly */
  --cream: #F8F6F4; /* 2026-08-12: was #F9F9EC (read as yellow to Christine) — warm neutral ivory, no yellow cast */
  --white: #FFFFFF;
  --black: #000000;
  --gray: #A7A9AC;
  --gray-light: #C0C1C4;

  /* legacy aliases so nothing silently breaks if referenced elsewhere */
  --dusty-rose: var(--rose);
  --deep-mauve: var(--mauve);

  --font-script: 'Corinthia', cursive;
  --font-serif: 'Libre Baskerville', Georgia, serif;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* 2026-08-14 (Christine: "i want some of the patterns textures to be add
   to make it a little more gradient visually"): every light section on the
   site (the default, unstyled <section> -- most of every page) previously
   sat on a completely flat --cream fill with zero depth. Added a soft,
   very-low-opacity rose-tinted radial wash top-left/bottom-right (echoes
   the dusty-rose brand color at a whisper, not a tint anyone would
   consciously notice) plus an extremely fine dot-grid texture (a repeating
   radial-gradient, not an image file -- no asset to go missing, no extra
   request, renders identically at any zoom/DPI). Both are subtle by
   design: this should read as "a little more depth," never as visible
   pattern or noise sitting on top of text. */
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--charcoal);
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 12% -5%, rgba(184,111,122,.06), transparent 38%),
    radial-gradient(circle at 92% 105%, rgba(184,111,122,.05), transparent 42%),
    radial-gradient(rgba(20,20,21,.035) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  background: var(--dusty-rose);
  color: var(--white);
  padding: 18px 0;
  position: relative;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
/* 2026-08-14 (logo overlap fix): logo-full.png bakes the cursive
   "Signature" script and the "PROPERTY COLLECTION" line into one flattened
   image, with the script's loops intentionally dipping down over the text
   below it -- a fine effect at full letterhead size, but at this header's
   34px height the whole thing compresses into an unreadable jumble (the
   "PROPERTY COLLECTION" line becomes a few illegible pixels the script
   swoops right through). Fixed by using logo.png -- the same real script
   mark, just without the subtext baked in -- and rebuilding "Property
   Collection" as real, crisp HTML text underneath it. Two separate flex
   items can never visually overlap regardless of how far the script's
   loops swing, and real text stays sharp at any zoom level instead of
   degrading like a scaled-down raster image. logo-full.png is untouched
   everywhere else (OG/social share images), since a single self-contained
   image is the right call there. */
/* 2026-08-14: the diamond "PC" monogram (real vector, Logo/Rose Color/SVG
   in Christine's Drive) added as a small badge to the left of the script
   wordmark. Kept in its natural black+rose two-tone -- unlike brand-logo
   and brokerage-logo it is NOT run through brightness(0) invert(1), since
   that would flatten it to solid white and lose the rose accent that makes
   it read as a monogram rather than a blob -- so it gets a small white
   circular backing instead, giving both colors contrast against the
   header's rose background. Sized to roughly match the wordmark's height. */
.brand-monogram-badge {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%; background: var(--white);
  box-shadow: 0 1px 4px rgba(20,20,21,.18);
}
.brand-monogram { height: 26px; width: 26px; display: block; }
.brand-wordmark { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.brand-logo { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); }
.brand-mark { font-family: var(--font-script); font-size: 30px; line-height: 1; color: var(--white); }
.brand-sub { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; white-space: nowrap; color: var(--white); }
.brokerage { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border-left: 1px solid rgba(255,255,255,.5); padding-left: 14px; margin-left: 4px; opacity: .95; }
/* 2026-08-13: replaced the plain-text "LPT Realty" brokerage label in the
   header with the real LPT Realty logo (transparent PNG, any-color source
   per Christine — inverted to white here to match .brand-logo's existing
   treatment so both marks read consistently on the dark header). Same
   left-border divider and spacing the text version used, so the swap
   didn't change the header's layout. */
.brokerage-logo { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .95; border-left: 1px solid rgba(255,255,255,.5); padding-left: 14px; margin-left: 4px; }

nav.primary-nav { display: flex; gap: 28px; }
nav.primary-nav a {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s ease, opacity .2s ease;
}
nav.primary-nav a:hover { text-decoration: underline; text-decoration-color: currentColor; opacity: .85; }

/* ---------- Trust ribbon ----------
   2026-08-14 (site-wide "classier + fuller impact" pass, Christine's
   request): a persistent thread of real credibility data -- her actual 99
   five-star Google reviews, 200+ homes sold, $200M+ volume, RealTrends
   Top 0.5% -- carried on EVERY page via page()'s template (not just the
   homepage), so a visitor lands on any page of the site already inside the
   same trust story rather than having to find About or Testimonials to see
   it. Sits between the header and each page's hero; charcoal to bookend
   the footer's charcoal and read as one continuous frame around the
   rose-colored header/content instead of a fourth competing color. */
.trust-ribbon { background: var(--charcoal); color: rgba(255,255,255,.92); padding: 13px 0; }
.trust-ribbon .wrap {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 8px 26px; text-align: center;
}
.trust-ribbon span.item {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.trust-ribbon a.item { color: inherit; text-decoration: none; }
.trust-ribbon a.item:hover { text-decoration: underline; text-decoration-color: var(--dusty-rose); }
.trust-ribbon .stars { color: var(--dusty-rose); letter-spacing: 2px; margin-right: 6px; font-size: 12px; }
.trust-ribbon .divider { opacity: .3; }
@media (max-width: 700px) {
  .trust-ribbon { padding: 11px 0; }
  .trust-ribbon .wrap { gap: 6px 16px; }
  .trust-ribbon span.item { font-size: 10px; }
}

/* 2026-08-13 (mobile-nav fix): hidden on desktop by default -- shown only
   inside the max-width:900px block below, where nav.primary-nav itself
   switches from "display:none" (the old, broken, no-alternative behavior)
   to a toggleable dropdown panel this button controls. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* 2026-08-14: same "a little more gradient visually" pass as body above --
   a soft rose-tinted glow (top-right) plus the same fine dot texture, this
   time in white at a whisper of opacity so it reads against charcoal
   instead of cream. Layered underneath the existing dark overlay, so text
   contrast/readability is completely unaffected -- purely a texture behind
   the same dark backdrop that was already there. */
.hero {
  background-color: var(--charcoal);
  background-image:
    radial-gradient(circle at 88% -10%, rgba(184,111,122,.16), transparent 45%),
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(20,20,21,.55), rgba(20,20,21,.75));
  background-size: cover, 26px 26px, cover;
  background-position: center, 0 0, center;
  background-repeat: no-repeat, repeat, no-repeat;
  color: var(--white);
  padding: 170px 0 130px;
  text-align: center;
}
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 78px);
  margin: 0 0 18px;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.hero p.lede {
  color: rgba(255,255,255,.85);
  font-size: 18px;
  max-width: 620px;
  margin: 18px auto 42px;
  opacity: .92;
}
.btn-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 16px 36px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--dusty-rose); color: var(--white); }
.btn-primary:hover { background: var(--deep-mauve); }
.btn-outline { border-color: var(--white); color: var(--white); background: transparent; }
.btn-outline:hover { background: var(--white); color: var(--charcoal); }
.btn-dark { background: var(--charcoal); color: var(--white); }
.btn-dark:hover { background: #000; }

/* ---------- Sections ----------
   2026-08-12: Christine flagged "too much space apart on some pages" —
   pages like the city pages stack 5-7 sections in a row, and at the old
   130px/90px padding that added up to 500-800px of pure vertical
   whitespace before you even hit any content. Tightened both, still
   generous/elegant but no longer sparse-feeling on long pages. */
section { padding: 90px 0; }
section.tight { padding: 64px 0; }
.eyebrow {
  font-family: var(--font-script);
  font-size: 32px;
  color: var(--deep-mauve);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.eyebrow::after { content: ''; flex: 0 0 46px; height: 1px; background: rgba(184,111,122,.45); }
/* 2026-08-14 (Christine's request): the site-wide .eyebrow script font
   (Corinthia, a calligraphy cursive) reads beautifully for ordinary phrases
   ("A Private Advisory", "The Signature Duo") but falls apart on jammed-
   together all-caps acronyms like "IRES MLS" -- cursive letterforms are
   drawn to join into flowing lowercase, not stand alone as blocky capitals,
   so acronyms turn into an illegible tangle. Rather than changing the
   script font site-wide (it works well everywhere else), this is a scoped
   override for the handful of eyebrows that specifically reference the
   MLS/IRES feed -- small-caps sans-serif with letter-spacing, the standard
   readable "eyebrow/kicker" treatment, applied only where an acronym is
   actually present. */
.eyebrow-clear {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
h2.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.18;
  letter-spacing: -.005em;
  margin: 0 0 28px;
  max-width: 760px;
}
.lede { font-size: 17px; line-height: 1.8; max-width: 680px; color: #3a3a3c; }

/* 2026-08-14: same subtle rose-glow + dot-texture treatment as .hero above,
   so the site's other full-width dark sections (Success Stories, etc.)
   don't read as a flatter, less-finished version of the hero right above
   them on the same page. */
.section-dark {
  background-color: var(--charcoal);
  background-image:
    radial-gradient(circle at 10% 110%, rgba(184,111,122,.13), transparent 42%),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: cover, 26px 26px;
  background-repeat: no-repeat, repeat;
  color: var(--white);
}
.section-dark .lede { color: rgba(255,255,255,.78); }
.section-dark .eyebrow { color: var(--dusty-rose); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 52px; }
/* 2026-08-14 (Christine's request: equal size regardless of photo/video,
   then a follow-up fix so a video's content is never cropped) -- a fixed
   square tile, like Instagram's own profile grid, instead of a
   fixed-height box that still let content fill unevenly. The JS watchdog
   in _instagram_feed_section() scales+centers each rendered iframe to FIT
   inside this square (not fill it) so nothing is ever cut off; overflow:
   hidden here is just a safety net, not an active crop. */
.instagram-embed-wrap {
  width: 100%; max-width: 360px; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 8px; position: relative; background: #fafafa;
}
.instagram-embed-wrap > .instagram-media { margin: 0 auto !important; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* 2026-08-13: mobile-audit fix -- free-home-valuation.html's 4-card "Proven
   Results" block used to hardcode style="grid-template-columns:1fr 1fr"
   directly on a .grid-3 div. That inline style has higher specificity than
   the .grid-3 media-query rule below, so it never collapsed to one column
   on phones -- confirmed via a 390px-viewport Playwright check showing the
   page forced to a 433px layout viewport (mobile Safari/Chrome zooming out
   to fit the overflowing 2-column grid). .grid-2col replaces that inline
   style with a real class that has its own mobile breakpoint. */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 52px; }
@media (max-width: 600px) { .grid-2col { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .nav-toggle { display: flex; }
  nav.primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--dusty-rose);
    padding: 8px 24px 20px;
    box-shadow: 0 16px 30px rgba(20,20,21,.18);
    z-index: 50;
  }
  nav.primary-nav.nav-open { display: flex; }
  nav.primary-nav a {
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,.18);
  }
}

.card {
  background: var(--white);
  padding: 50px 40px 44px;
  border-radius: 1px;
  box-shadow: 0 30px 70px rgba(20,20,21,.045);
  border-top: 1px solid rgba(184,111,122,.35);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover { box-shadow: 0 36px 84px rgba(20,20,21,.08); transform: translateY(-2px); }
.card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 21px; margin: 0 0 16px; letter-spacing: .01em; }
.card p { color: #57575a; line-height: 1.8; font-size: 14.5px; font-weight: 300; }
.card a.cta {
  display: inline-block; margin-top: 24px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--deep-mauve);
  border-bottom: 1px solid rgba(186,140,132,.4); padding-bottom: 3px;
  transition: border-color .2s ease, opacity .2s ease;
}
.card a.cta:hover { border-color: var(--deep-mauve); opacity: .8; }

/* 2026-08-14: paired agent bio cards for the About page's "Meet The Team"
   section (Christine + Kendra) -- a photo alongside bio copy, stacking to
   a single column on narrow screens since side-by-side headshot+text gets
   cramped below ~500px. */
.team-card { display: flex; gap: 24px; align-items: flex-start; }
.team-card img {
  width: 130px; height: 160px; object-fit: cover; border-radius: 4px;
  flex-shrink: 0; box-shadow: 0 10px 24px rgba(20,20,21,.08);
}
.team-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 20px; margin: 0 0 10px; }
.team-card p { color: #57575a; line-height: 1.75; font-size: 14px; font-weight: 300; margin: 0; }
@media (max-width: 560px) {
  .team-card { flex-direction: column; }
  .team-card img { width: 100%; height: 240px; }
}

/* ---------- Video embeds ---------- */
.video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: 2px; overflow: hidden; background: #141415; box-shadow: 0 10px 30px rgba(20,20,21,.10); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed-caption { margin-top: 12px; font-size: 14px; color: #6a6a6c; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
@media (max-width: 900px) { .video-grid { grid-template-columns: 1fr; } }

/* ---------- Communities / Map ---------- */
.communities-layout { display: grid; grid-template-columns: 340px 1fr; gap: 0; align-items: stretch; min-height: 760px; }
@media (max-width: 980px) { .communities-layout { grid-template-columns: 1fr; min-height: auto; } }
.communities-panel { display: flex; flex-direction: column; justify-content: center; padding: 50px 24px; }
.county-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
.county-btn {
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; color: var(--white);
  border: 1px solid rgba(255,255,255,.3);
  padding: 16px 20px; font-weight: 500; font-size: 13px;
  letter-spacing: .04em;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.county-btn:hover, .county-btn.active { background: var(--dusty-rose); border-color: var(--dusty-rose); transform: translateX(3px); }
#county-map { width: 100%; min-height: 760px; height: 100%; background: var(--charcoal); }
@media (max-width: 980px) { #county-map { min-height: 520px; } }
.leaflet-container { background: var(--charcoal) !important; font-family: var(--font-sans); }

/* Sold Homes Map (2026-08-13, Christine's request) — separate from
   #county-map above but same visual language (dark base, brand rose pins). */
#sold-homes-map { width: 100%; min-height: 560px; border-radius: 4px; background: var(--charcoal); }
@media (max-width: 700px) { #sold-homes-map { min-height: 420px; } }
.sold-homes-map-status {
  display: none; text-align: center; padding: 20px; color: #6a6a6c;
  font-size: 14px; background: var(--off-white, #F9F9EC); border-radius: 4px; margin-top: 12px;
}

/* County name labels shown directly on the map (not just on hover) */
.county-label {
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  white-space: nowrap;
  pointer-events: none;
}

/* City icon markers — clean white line-art SVGs (mountain/tree/paw/columns/
   grad-cap/wave), not colored emoji, to match the original map's look */
.city-icon-marker {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--rose); border: 2px solid var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  color: var(--white);
}
.city-icon-marker svg { width: 15px; height: 15px; }
.city-icon-marker.priority { background: var(--mauve); width: 30px; height: 30px; }
.city-icon-marker.priority svg { width: 17px; height: 17px; }
.city-label {
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  white-space: nowrap;
  pointer-events: none;
}
.river-label {
  color: #BFE0EC;
  font-family: var(--font-script);
  font-size: 20px;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.leaflet-control-zoom a { font-size: 20px !important; width: 34px !important; height: 34px !important; line-height: 32px !important; }

/* ---------- FAQ (answer-shaped content for AI/local search) ---------- */
.faq-item { padding: 32px 0; border-top: 1px solid #e4e4d8; }
.faq-item h3 { font-family: var(--font-serif); font-weight: 600; font-size: 19px; margin: 0 0 12px; letter-spacing: -.005em; }
.faq-item p { color: #4a4a4c; line-height: 1.75; font-size: 15px; margin: 0; }

/* ---------- Testimonials ---------- */
.testimonial {
  background: var(--white);
  padding: 48px 42px 40px;
  border-left: 1px solid rgba(184,111,122,.4);
  position: relative;
}
.testimonial::before {
  content: '\201C';
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 1;
  color: rgba(184,111,122,.28);
  display: block;
  margin-bottom: 6px;
}
.testimonial p { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: #3a3a3c; line-height: 1.85; font-size: 15.5px; }
.testimonial .who { margin-top: 22px; font-weight: 600; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #6a6a6c; }
/* 2026-08-14: real 5-star rating marker on every testimonial card -- these
   are genuinely 5-star reviews (99 of them on Google, per Christine), so
   showing the stars alongside each quote makes that concrete rather than
   just claimed once in a stat elsewhere. Sits above the opening-quote mark,
   not competing with it. */
.testimonial .stars { color: var(--dusty-rose); font-size: 14px; letter-spacing: 3px; margin-bottom: 4px; }

/* ---------- Scroll reveal ----------
   2026-08-14 (site-wide "flow better" pass): JS-driven-only (added below
   via a script in every page's footer) -- the .reveal class itself is
   applied at runtime, never baked into the server-rendered HTML, so a
   visitor with JS disabled or a slow/failed script load simply sees every
   section at full opacity immediately (progressive enhancement, not a
   render-blocking gate). prefers-reduced-motion is honored for anyone with
   that OS setting, per accessibility best practice. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Forms ---------- */
form.lead-form { display: grid; gap: 16px; max-width: 560px; }
form.lead-form input, form.lead-form textarea {
  padding: 14px 16px; border: 1px solid var(--gray); background: var(--white);
  font-family: var(--font-sans); font-size: 14px;
}
form.lead-form label.consent { font-size: 12px; color: #6a6a6c; display: flex; gap: 8px; align-items: flex-start; }

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--charcoal);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(184,111,122,.1), transparent 40%),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: cover, 26px 26px;
  background-repeat: no-repeat, repeat;
  color: rgba(255,255,255,.8); padding: 90px 0 40px; font-size: 14px;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 52px; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--white); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; opacity: .85; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.footer-grid ul a { color: rgba(255,255,255,.72); font-size: 14px; }
.footer-grid ul a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom { margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; opacity: .6; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.qr-share-btn { background: none; border: none; padding: 0; margin: 0; font-family: inherit; font-size: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Blog post pull-quote (typographic break, no photo available) ---------- */
.blog-pull-quote {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.4;
  font-style: italic;
  color: var(--charcoal);
  border-left: 3px solid var(--dusty-rose);
  padding: 4px 0 4px 28px;
  margin: 40px 0;
}

/* ---------- Breadcrumb / county page hero variants ---------- */
.county-hero {
  padding: 120px 0 80px;
  background-color: var(--charcoal);
  background-image:
    radial-gradient(circle at 88% -10%, rgba(184,111,122,.16), transparent 45%),
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: cover, 26px 26px;
  background-repeat: no-repeat, repeat;
  color: var(--white);
}
.county-hero .eyebrow { color: var(--dusty-rose); }
.county-hero .lede { color: rgba(255,255,255,.85); }
.city-pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.city-pill { border: 1px solid rgba(255,255,255,.35); padding: 8px 16px; font-size: 13px; border-radius: 999px; display: inline-block; transition: background .15s ease, border-color .15s ease; }
a.city-pill:hover { background: var(--rose); border-color: var(--rose); }

/* ---------- Live property search (MLS Grid / IRES) ---------- */
.search-form { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 12px; align-items: end; margin-top: 30px; }
.search-form .field { display: flex; flex-direction: column; }
.search-form label { font-size: 12px; color: #6a6a6c; margin-bottom: 6px; }
.search-form select, .search-form input {
  padding: 12px 14px; border: 1px solid var(--gray); background: var(--white);
  font-family: var(--font-sans); font-size: 14px; width: 100%;
}
@media (max-width: 900px) { .search-form { grid-template-columns: 1fr 1fr; } }

.search-status { margin-top: 26px; font-size: 14px; color: #6a6a6c; }
.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 28px; }
@media (max-width: 900px) { .listing-grid { grid-template-columns: 1fr; } }
.listing-card { border: 1px solid #e4e4d8; background: var(--white); overflow: hidden; }
.listing-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #eee; }
.listing-card .listing-body { padding: 24px 24px 22px; }
.listing-status-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; margin-bottom: 10px; color: var(--white); }
.listing-status-badge.status-active { background: #3f6b52; }
.listing-status-badge.status-pending { background: #b7791f; }
.listing-status-badge.status-other { background: #6a6a6c; }
/* 2026-08-13: prominent banner across the photo for under-contract listings
   (Christine's request — the small pill badge above wasn't visible enough).
   .listing-media already has position:relative (see below) so this anchors
   to the photo, not the whole card. */
.listing-ribbon { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: #b7791f; color: var(--white); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 9px 12px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.listing-card .listing-price { font-family: var(--font-serif); font-size: 22px; margin: 0 0 4px; }
.listing-card .listing-meta { color: #4a4a4c; font-size: 14px; margin: 0 0 8px; }
.listing-card .listing-address { font-size: 14px; color: #6a6a6c; margin: 0 0 10px; }
.listing-card .listing-compliance { font-size: 14px; color: #3a3a3c; line-height: 1.5; border-top: 1px solid #eee; padding-top: 10px; margin-top: 10px; }
.mls-disclaimer { font-size: 12px; color: #6a6a6c; line-height: 1.7; margin-top: 44px; padding-top: 24px; border-top: 1px solid #e4e4d8; }
.mls-disclaimer .mls-source-badge { font-weight: 700; color: #3a3a3c; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }

/* ---------- Nearby & Distances (grocery/schools/parks per listing) ---------- */
.listing-nearby { border-top: 1px solid #eee; margin-top: 12px; padding-top: 12px; }
.nearby-toggle {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--charcoal);
}
.nearby-toggle:hover { color: var(--dusty-rose); }
.nearby-panel { margin-top: 12px; }
.nearby-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.nearby-tab {
  padding: 5px 12px; border: 1px solid var(--gray-light); border-radius: 999px; background: var(--white);
  font-family: var(--font-sans); font-size: 12px; cursor: pointer; color: var(--charcoal);
}
.nearby-tab.active { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.nearby-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.nearby-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #4a4a4c; }
.nearby-name { flex: 1; }
.nearby-distance { color: var(--dusty-rose); font-weight: 600; white-space: nowrap; }

/* ---------- Listing media links + inquiry CTAs (Current Listings) ---------- */
.listing-media { position: relative; }
/* 2026-08-13: .video-embed's own default box is 16:9 (padding-top: 56.25%),
   shorter/wider than .listing-card img's 4:3 box above -- so a row mixing
   video-thumbnail and photo-only listings rendered visibly different card
   heights, pushing price/address text to a different vertical position
   depending on which one a given card happened to have. Force video embeds
   to the same 4:3 box (and drop the border-radius/shadow the standalone
   .video-embed usage on the video-tour pages wants but which looked out of
   place against a plain photo here) so every card in the grid lines up. */
.listing-card .video-embed { padding-top: 75%; border-radius: 0; box-shadow: none; }
.media-links { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 20px 0; }
.media-link { background: none; border: none; padding: 0; margin: 0; font-family: var(--font-sans); font-size: 13px; color: var(--deep-mauve); text-decoration: underline; cursor: pointer; }
.listing-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.listing-actions .btn { padding: 10px 18px; font-size: 13px; }

/* ---------- Shared lightbox/modal (photo gallery + listing inquiry) ---------- */
.lb-overlay { display: none; position: fixed; inset: 0; background: rgba(20,20,21,.85); z-index: 1000; align-items: center; justify-content: center; padding: 24px; }
.lb-overlay.open { display: flex; }
.lb-box { position: relative; background: var(--white); max-width: 520px; width: 100%; padding: 36px 32px; max-height: 90vh; overflow-y: auto; }
.lb-box .lb-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 28px; line-height: 1; color: var(--charcoal); cursor: pointer; }
.lb-box h3 { margin: 0 0 6px; font-family: var(--font-serif); font-size: 26px; }
.lb-box-media { background: transparent; max-width: 900px; padding: 0; }
.lb-box-media .lb-close { color: var(--white); top: -8px; right: -8px; }
#gallery-img { max-width: 100%; max-height: 76vh; display: block; margin: 0 auto; background: #222; }
.gallery-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 16px; }
.gallery-nav button { background: none; border: 1px solid var(--white); color: var(--white); padding: 8px 18px; font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
.gallery-nav span { color: var(--white); font-size: 13px; }

/* ---------- Map click-to-search popup (build/assets/js/map.js) ---------- */
.quick-price-row { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-price-btn {
  background: var(--white); border: 1px solid var(--gray-light); color: var(--charcoal);
  padding: 10px 16px; font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.quick-price-btn:hover { border-color: var(--dusty-rose); }
.quick-price-btn.active { background: var(--dusty-rose); border-color: var(--dusty-rose); color: var(--white); }
#map-quick-search .lb-box { max-width: 440px; }

/* ---------- Fancy live-search widget (dual price slider + pill filters) ---------- */
.fs-widget { margin-top: 30px; }
.fs-row { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.fs-block { flex: 1 1 260px; min-width: 220px; }
.fs-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6a6a6c; margin-bottom: 12px; display: block; }

.fs-price-values { display: flex; justify-content: space-between; font-family: var(--font-serif); font-size: 19px; color: var(--charcoal); margin-bottom: 14px; }
.fs-price-values span { color: var(--deep-mauve); }

.fs-slider { position: relative; height: 34px; }
.fs-slider-track { position: absolute; top: 50%; left: 0; right: 0; height: 3px; background: var(--gray-light); transform: translateY(-50%); }
.fs-slider-range { position: absolute; top: 50%; height: 3px; background: var(--dusty-rose); transform: translateY(-50%); }
.fs-slider input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 34px; margin: 0;
  background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.fs-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 20px; height: 20px; border-radius: 50%; background: var(--white);
  border: 2px solid var(--dusty-rose); cursor: pointer; margin-top: 0;
  box-shadow: 0 2px 6px rgba(20,20,21,.18); position: relative; z-index: 2;
}
.fs-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--white);
  border: 2px solid var(--dusty-rose); cursor: pointer; box-shadow: 0 2px 6px rgba(20,20,21,.18);
}
.fs-slider input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; }
.fs-slider input[type="range"]::-moz-range-track { background: transparent; border: none; }
.fs-slider input[type="range"]:focus { outline: none; }
.fs-slider input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(184,111,122,.25); }

.fs-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-pill {
  background: var(--white); border: 1px solid var(--gray-light); color: var(--charcoal);
  padding: 10px 18px; font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  cursor: pointer; border-radius: 999px; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fs-pill:hover { border-color: var(--dusty-rose); }
.fs-pill.active { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }

.fs-actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
@media (max-width: 700px) { .fs-row { gap: 22px; } }

/* ---------- Neighborhood Quiz (now a collapsible section on
   /sold-homes-map.html, see build_sold_homes_map()'s 2026-08-14 comment) --------- */
.quiz-disclosure {
  border: 1px solid var(--gray-light); border-radius: 12px; padding: 28px 32px;
  max-width: 720px; margin: 0 auto; transition: border-color .2s ease, background .2s ease;
}
.quiz-disclosure[open] { background: #fbf9f7; }
.quiz-disclosure:hover { border-color: var(--dusty-rose); }
.quiz-disclosure summary {
  cursor: pointer; list-style: none; display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative;
}
.quiz-disclosure summary::-webkit-details-marker { display: none; }
.quiz-disclosure summary::after {
  content: '+'; position: absolute; top: 0; right: 0; font-size: 26px; line-height: 1;
  color: var(--dusty-rose); font-weight: 300; transition: transform .2s ease;
}
.quiz-disclosure[open] summary::after { content: '\2212'; }
.quiz-disclosure summary .lede { max-width: 560px; }
.quiz-disclosure .quiz-widget { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--gray-light); }
.quiz-widget { max-width: 720px; margin: 0 auto; }
.quiz-progress { display: flex; gap: 8px; margin-bottom: 32px; }
.quiz-progress-dot { flex: 1; height: 4px; background: var(--gray-light); border-radius: 2px; transition: background .2s ease; }
.quiz-progress-dot.done { background: var(--dusty-rose); }
.quiz-question h3 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; margin: 0 0 26px; }
.quiz-options { display: grid; gap: 14px; }
.quiz-option {
  text-align: left; padding: 18px 22px; border: 1.5px solid var(--gray-light); border-radius: 10px;
  background: var(--white); cursor: pointer; font-size: 16px; color: var(--charcoal);
  transition: border-color .15s ease, background .15s ease;
}
.quiz-option:hover { border-color: var(--dusty-rose); }
.quiz-option.selected { border-color: var(--dusty-rose); background: rgba(184,111,122,.08); }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; }
.quiz-nav .btn[disabled] { opacity: .35; pointer-events: none; }
.quiz-result { text-align: center; }
.quiz-result .match-eyebrow { color: var(--dusty-rose); }
.quiz-result .match-name { font-family: var(--font-serif); font-size: 40px; margin: 8px 0 18px; }
.quiz-result .match-blurb { max-width: 560px; margin: 0 auto 30px; }
.quiz-runner-up { font-size: 14px; color: var(--gray); margin-top: -14px; margin-bottom: 30px; }
.quiz-result .lead-form { max-width: 480px; margin: 34px auto 0; text-align: left; }

/* Visually hidden but still announced by screen readers (used by the quiz's
   live step-announcement region). */
.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;
}

/* ---------- Map lifestyle/amenity POI markers (build/assets/js/map.js) ---------- */
.poi-icon-marker {
  width: 100%; height: 100%; border-radius: 50%; background: var(--dusty-rose); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(20,20,21,.45), 0 0 0 2px var(--white);
  transition: transform .15s ease;
}
.poi-icon-marker svg { width: 60%; height: 60%; }
.leaflet-marker-icon:hover .poi-icon-marker { transform: scale(1.12); }