/* =========================================================================
   Executive Residences — brand stylesheet
   Built to ER_Brand_Guide.pdf: deep-green structure, disciplined gold accent,
   generous white space, serif-led (Cormorant) headings + humanist sans
   (Montserrat) body. Gold is accent-only and never fills a structural band.
   ========================================================================= */

:root {
  /* Brand palette (exact, per guide) */
  --er-green: #0E3232;      /* structure, headers, rules, footer */
  --er-gold:  #CF9D60;      /* SMALL ACCENT ONLY -- passes contrast on green (5.68:1) but NOT on white (2.43:1). Use --er-gold-accessible for text/icons/UI-indicators on white or light backgrounds. */
  --er-gold-accessible: #9A6A2F; /* same hue/character as --er-gold, darkened to pass 4.5:1 against white -- use for any gold text, icon, or focus/hover indicator that sits on a white or light (tint/hairline) background */
  --er-ink:   #1A1A1A;      /* body emphasis / key figures */
  --er-gray:  #5C616B;      /* secondary / meta / captions */
  --er-gray-light: #B1B4B6; /* subtle secondary tint */
  --er-hairline:  #D9DCE3;  /* row separators / thin borders */

  /* Derived neutrals for web use */
  --er-green-800: #0a2727;  /* darker green for hovers on green */
  --er-green-700: #14403f;
  --er-white: #ffffff;
  --er-paper: #ffffff;      /* interiors stay white per guide */
  --er-tint:  #f5f6f4;      /* faint neutral for alternating sections */

  /* Type */
  --er-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --er-sans:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (fluid) */
  --fs-hero:  clamp(2.6rem, 5vw, 4.25rem);
  --fs-h1:    clamp(2.1rem, 3.6vw, 3rem);
  --fs-h2:    clamp(1.7rem, 2.6vw, 2.25rem);
  --fs-h3:    clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;

  /* Spacing / structure */
  --wrap: 1180px;
  --wrap-narrow: 820px;
  --radius: 4px;         /* restrained; the brand is calm, not bubbly */
  --radius-lg: 8px;
  --shadow: 0 8px 30px rgba(14, 50, 50, 0.10);
  --shadow-sm: 0 2px 10px rgba(14, 50, 50, 0.06);
  --header-h: 96px;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--er-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--er-ink);
  background: var(--er-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Global focus-visible safety net -- covers any interactive element that
   doesn't have its own explicit focus style defined elsewhere in this file.
   :focus-visible (not :focus) so this only shows for keyboard navigation,
   not on mouse click, matching modern browser convention. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--er-green);
  outline-offset: 2px;
}
/* On dark (green) backgrounds, a green outline would be invisible -- use
   white instead wherever a dark-ground context is already established. */
.site-header a:focus-visible,
.site-footer a:focus-visible,
.hero a:focus-visible,
.hero-unit a:focus-visible,
.detail-head a:focus-visible,
.index-head a:focus-visible,
.stats-band a:focus-visible,
.agent-box a:focus-visible,
button:focus-visible.hero-carousel__nav,
.hero-carousel__nav:focus-visible,
.hero-carousel__dot:focus-visible {
  outline-color: #fff;
}

/* Skip link -- visually hidden until it receives keyboard focus, so
   keyboard and screen-reader users can jump past the header/nav on every
   page load instead of tabbing through it every time. */
.skip-link {
  position: absolute;
  top: -999px;
  left: 0;
  z-index: 1000;
  background: var(--er-green);
  color: #fff;
  padding: 1rem 1.5rem;
  font-family: var(--er-sans);
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  top: 0;
}

h1, h2, h3, h4 {
  font-family: var(--er-serif);
  color: var(--er-green);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}

p { margin: 0 0 1rem; }

a { color: var(--er-green); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--er-gold-accessible); }

/* --------------------------------------------------------------- utilities */
.container-er { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 1.5rem; }

/* Eyebrow — small gold label above a heading (accent role) */
.eyebrow {
  font-family: var(--er-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--er-gold-accessible);
  margin: 0 0 0.75rem;
}

/* Section heading = green serif over a thin green rule (never a filled band) */
.section-head { margin-bottom: 2rem; }
.section-head h2 { margin-bottom: 0.6rem; }
.section-head::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--er-green);
  margin-top: 0.9rem;
}
.section-head--center { text-align: center; }
.section-head--center::after { margin-left: auto; margin-right: auto; }

/* Buttons — primary is GREEN fill (structural); gold is accent/hover only */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--er-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--er-green);
  cursor: pointer;
  transition: all .18s ease;
}
.btn--primary { background: var(--er-green); color: #fff; }
.btn--primary:hover { background: var(--er-green-800); border-color: var(--er-green-800); color: #fff; }
.btn--outline { background: transparent; color: var(--er-green); }
.btn--outline:hover { background: var(--er-green); color: #fff; }
/* On dark grounds */
.btn--on-green { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn--on-green:hover { background: var(--er-gold); border-color: var(--er-gold); color: var(--er-green); }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--er-green);
  color: #fff;
  border-bottom: 2px solid var(--er-gold);  /* the signature gold rule */
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.5rem;
  min-height: var(--header-h);
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-family: var(--er-serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-logo:hover { color: #fff; }
.site-logo img { height: 80px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--er-gold); border-bottom-color: var(--er-gold); }
.site-nav .btn-phone {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
}
.site-nav .btn-phone:hover { background: var(--er-gold); border-color: var(--er-gold); color: var(--er-green); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
}

/* --------------------------------------------------------------- promo bar */
/* Gold is accent-only, but a slim promo strip reads as a marker, not a
   structural band. Kept thin and secondary. */
.promo-banner {
  background: var(--er-green-800);
  color: #fff;
  text-align: center;
  padding: 0.7rem 1.5rem;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(207,157,96,.4);
}
.promo-banner strong { color: var(--er-gold); }
.promo-banner a { color: #fff; text-decoration: underline; margin-left: 0.5rem; }
.promo-banner a:hover { color: var(--er-gold); }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: var(--er-green);
  color: #fff;
  padding: clamp(3.5rem, 8vw, 7rem) 1.5rem;
  text-align: center;
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.hero h1 { color: #fff; font-size: var(--fs-hero); margin-bottom: 0.5rem; }
.hero .tagline {
  font-family: var(--er-sans);
  color: var(--er-gold);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero .lede { font-size: 1.15rem; color: rgba(255,255,255,.88); max-width: 620px; margin: 0 auto 2rem; }
.hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--tint { background: var(--er-tint); }
.section--green { background: var(--er-green); color: #fff; }
.section--green h2, .section--green h3 { color: #fff; }
.section--green .section-head::after { background: var(--er-gold); }

/* ------------------------------------------------------------- cards/grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--er-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card__img {
  aspect-ratio: 4 / 3;
  background: var(--er-tint) center / cover no-repeat;
  display: block;
  overflow: hidden;
}
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.25rem 1.35rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.card__title { font-size: var(--fs-h3); margin-bottom: 0.35rem; }
.card__meta { color: var(--er-gray); font-size: var(--fs-small); margin-bottom: 0.75rem; }

/* Status pill — neutral by default. Guide says gold never color-codes status,
   so status colors come from the model's own status_color, used sparingly. */
.status-pill {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------- detail headers */
.detail-head { background: var(--er-green); color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.detail-head h1 { color: #fff; margin-bottom: 0.25rem; font-family: var(--er-sans); font-weight: 700; letter-spacing: 0.01em; }
.detail-head .sub { color: var(--er-gold); font-weight: 600; letter-spacing: 0.04em; }

/* Spec row — hairline separators, green figures (guide: green bold key figures) */
.spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--er-hairline);
  margin-bottom: 2rem;
}
.spec { text-align: center; }
.spec .num { display: block; font-family: var(--er-serif); font-size: 2rem; font-weight: 600; color: var(--er-green); line-height: 1; }
.spec .lbl { font-size: 0.75rem; color: var(--er-gray); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.35rem; display: block; }

/* Gallery — images framed in a thin gold rule (per guide) */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); border: 2px solid var(--er-gold); }

/* -------------------------------------------------------------- callouts */
/* Outlined only — green border + gold left edge, never filled (per guide) */
.callout {
  border: 1px solid var(--er-green);
  border-left: 4px solid var(--er-gold);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.25rem 1.5rem;
}

/* ------------------------------------------------------- map placeholder */
.map-placeholder {
  background: repeating-linear-gradient(45deg, var(--er-tint), var(--er-tint) 12px, #eef0ec 12px, #eef0ec 24px);
  border: 1px dashed var(--er-gray-light);
  border-radius: var(--radius-lg);
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  color: var(--er-gray); font-weight: 600;
}

/* ------------------------------------------------------------ testimonials */
.testimonial {
  background: #fff;
  border: 1px solid var(--er-hairline);
  border-left: 4px solid var(--er-gold);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.testimonial .q { font-family: var(--er-serif); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--er-ink); margin-bottom: 0.75rem; flex: 1; }
.testimonial .a { font-family: var(--er-sans); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--er-green); text-transform: uppercase; margin-top: auto; }

/* -------------------------------------------------------------- agent box */
.agent-box { background: var(--er-green); color: #fff; border-radius: var(--radius-lg); padding: 1.75rem; display: flex; gap: 1.25rem; align-items: center; }
.agent-box img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--er-gold); flex-shrink: 0; }
.agent-box h3 { color: #fff; margin-bottom: 0.15rem; }
.agent-box a { color: var(--er-gold); }
.agent-box a:hover { color: #fff; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--er-green); color: rgba(255,255,255,.8); margin-top: 0; }
.site-footer__top {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}
.site-footer__brand .site-logo { font-size: 1.4rem; margin-bottom: 1rem; }
.site-footer__brand .site-logo img { height: 56px; width: auto; }
.site-footer__brand p { color: rgba(255,255,255,.7); font-size: 0.9rem; max-width: 30ch; }
.site-footer__brand p a { color: rgba(255,255,255,.9); }
.site-footer__brand p a:hover { color: var(--er-gold); }
.footer-col h4 { color: #fff; font-family: var(--er-sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a { color: rgba(255,255,255,.8); font-size: 0.92rem; }
.footer-col a:hover { color: var(--er-gold); }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.15);
}
.site-footer__bottom-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
}
.site-footer__bottom a { color: rgba(255,255,255,.8); }
.site-footer__bottom a:hover { color: var(--er-gold); }
.footer-tagline { color: var(--er-gold); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem; }
.fair-housing { display: flex; align-items: center; gap: 0.6rem; }
.fair-housing img { height: 34px; width: auto; }
.footer-social { display: flex; gap: 1.1rem; font-size: 1.15rem; }
.footer-legal { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--er-green);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.5rem 1.5rem;
    border-bottom: 2px solid var(--er-gold);
    transform: translateY(-120%);
    transition: transform .25s ease;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav a { padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .site-nav a:hover { border-bottom-color: rgba(255,255,255,.12); }
  .site-nav .btn-phone { margin-top: 0.75rem; text-align: center; justify-content: center; }
}

@media (max-width: 560px) {
  .grid, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .spec-row { gap: 1.5rem; justify-content: space-around; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .home-closing__actions { width: 100%; }
  .home-closing .agent-box { flex-direction: column; }
}

/* ============================================================ home page */
/* Full-bleed hero with optional background image + green overlay */
.home-hero {
  position: relative;
  width: 100%;              /* without this, aspect-ratio + max-height shrinks
                                the box's width instead of filling the page */
  background: var(--er-green);
  color: #fff;
  text-align: center;
  overflow: hidden;
  aspect-ratio: 3 / 2;      /* same frame as the detail-page hero-unit */
  max-height: 760px;        /* same cap as the detail-page hero-unit */
  min-height: 480px;        /* safety floor: this hero carries far more text
                                (tagline + H1 + intro + buttons) than the
                                detail pages' short title, so a pure 3:2 ratio
                                would get cramped on narrow phones */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
}
.home-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,50,50,.72) 0%, rgba(14,50,50,.82) 100%);
}
.home-hero__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.home-hero h1 { color: #fff; font-size: var(--fs-hero); margin-bottom: 0.75rem; }
.home-hero .tagline {
  font-family: var(--er-sans);
  color: var(--er-gold);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.home-hero .lede { font-size: 1.2rem; color: rgba(255,255,255,.9); max-width: 620px; margin: 0 auto 2rem; }
.home-hero .lede p:last-child { margin-bottom: 0; }

/* Quick-nav tiles */
.quicknav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.quicknav__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 2rem 1.25rem;
  background: #fff;
  border: 1px solid var(--er-hairline);
  border-radius: var(--radius-lg);
  color: var(--er-green);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.quicknav__tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--er-gold-accessible); color: var(--er-green); }
.quicknav__tile i { font-size: 1.75rem; color: var(--er-gold-accessible); margin-bottom: 0.35rem; }
.quicknav__title { font-family: var(--er-serif); font-size: 1.2rem; font-weight: 600; }
.quicknav__sub { font-size: 0.85rem; color: var(--er-gray); }

/* Card price — green key figure */
.card__price { font-family: var(--er-serif); font-size: 1.15rem; font-weight: 600; color: var(--er-green); margin-bottom: 0.75rem; }

@media (max-width: 960px) {
  .quicknav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .quicknav { grid-template-columns: 1fr; }
}

/* Difference feature icon (optional, inside .callout on home) */
.callout__icon { font-size: 1.5rem; color: var(--er-gold-accessible); margin-bottom: 0.6rem; display: block; }

/* How leasing works — step strip */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.step {
  text-align: center;
  padding: 2rem 1.25rem;
  background: #fff;
  border: 1px solid var(--er-hairline);
  border-radius: var(--radius-lg);
}
.step__badge {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--er-green);
  color: var(--er-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700;
  font-family: var(--er-sans);
}
.step__num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--er-gold-accessible); margin-bottom: 0.4rem; }
.step__title { font-size: 1.2rem; margin-bottom: 0.5rem; }
.step__body { font-size: 0.9rem; color: var(--er-gray); margin: 0; }

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

/* ========================================================= hero unit */
/* Carousel + overlaid title. Fixed 3:2 frame; images scale to fit (contain). */
.hero-unit {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 760px;          /* keep it from getting enormous on wide screens */
  background: var(--er-green);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero-unit--plain { height: auto; min-height: 200px; padding: 2.5rem 0; }

.hero-unit__track { position: absolute; inset: 0; z-index: 0; }
.hero-unit__slide {
  position: absolute; inset: 0;
  background: var(--er-green);   /* letterbox/pillarbox bars when aspect ratio != 3:2 */
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.hero-unit__slide.is-active { opacity: 1; }
.hero-unit__slide img {
  width: 100%; height: 100%;
  object-fit: contain;           /* show the full image; green fills the rest */
  object-position: center center;
  display: block;
}
.hero-unit__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(14,50,50,.85) 0%, rgba(14,50,50,.2) 45%, rgba(14,50,50,.1) 100%);
}
.hero-unit__content {
  position: relative; z-index: 2;
  width: 100%;
  color: #fff;
  padding-top: 2rem; padding-bottom: 2.25rem;
}
.hero-unit__content h1 { color: #fff; margin: 0 0 0.35rem; }
.hero-unit__content .eyebrow { color: var(--er-gold); margin-bottom: 0.5rem; }
.hero-unit__sub { color: rgba(255,255,255,.9); font-size: 1.05rem; font-weight: 500; margin: 0; }
.hero-unit--plain .hero-unit__scrim { display: none; }

/* When the carousel is nested inside .home-hero, it's a pure rotating
   background layer: the home hero's own centered text + full-frame
   .home-hero__overlay provide the title and contrast, so the carousel's own
   bottom-anchored scrim and title slot are suppressed, and its height
   follows the home hero's frame instead of the 3:2 detail-page ratio. */
.home-hero .hero-unit {
  position: absolute; inset: 0;
  aspect-ratio: auto; max-height: none;
  align-items: stretch;
}
.home-hero .hero-unit__scrim,
.home-hero .hero-unit__content { display: none; }
.home-hero .hero-carousel__nav,
.home-hero .hero-carousel__dots { z-index: 3; }

/* Closing CTA + default agent */
.home-closing__inner { text-align: center; }
.home-closing__lede {
  color: rgba(255,255,255,.85);
  max-width: 52ch;
  margin: 0 auto 2rem;
}
.home-closing__actions {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.home-closing__agent {
  max-width: 32rem;
  margin: 2.5rem auto 0;
}
.home-closing .agent-box {
  justify-content: center;
  text-align: center;
}

/* Carousel controls (shared) */
.hero-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(14,50,50,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; transition: background .18s ease, color .18s ease;
  z-index: 3;
}
.hero-carousel__nav:hover { background: var(--er-gold); color: var(--er-green); border-color: var(--er-gold); }
.hero-carousel__nav--prev { left: 1rem; }
.hero-carousel__nav--next { right: 1rem; }
.hero-carousel__dots {
  position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.5rem; z-index: 3;
}
.hero-carousel__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.55); border: none; cursor: pointer; padding: 0;
  transition: background .18s ease, transform .18s ease;
}
.hero-carousel__dot.is-active { background: var(--er-gold); transform: scale(1.25); }

/* Prose block (intro/description) */
.prose { max-width: 68ch; margin-top: 1.5rem; color: var(--er-ink); }
.prose p { margin-bottom: 1rem; }

/* Amenity tag list */
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  background: var(--er-tint);
  border: 1px solid var(--er-hairline);
  border-radius: 999px;
  font-size: 0.88rem; color: var(--er-ink);
}
.tag i { color: var(--er-gold-accessible); font-size: 0.8rem; }

/* Virtual tour embed (16:9 responsive iframe) */
.tour-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 2px solid var(--er-gold);
  background: var(--er-tint);
}
.tour-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* CTA row */
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 560px) {
  .hero-carousel__nav { width: 38px; height: 38px; font-size: 0.9rem; }
  .cta-row .btn { width: 100%; justify-content: center; }
}

/* ============================================================ index pages */
.index-head {
  background: var(--er-green);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 2px solid var(--er-gold);
}
.index-head h1 { color: #fff; margin: 0.25rem 0 0; }
.index-head .eyebrow { color: var(--er-gold); margin-bottom: 0; }
.index-head__intro { color: rgba(255,255,255,.9); max-width: 60ch; margin-top: 1rem; }
.index-head__intro p:last-child { margin-bottom: 0; }
.index-head__intro a { color: var(--er-gold); }

.result-count {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--er-gray);
  margin-bottom: 1.25rem;
}

/* Ensure the HTML `hidden` attribute wins over display:flex on these elements */
[hidden] { display: none !important; }

/* ======================================================= map index pages */
/* Filter bar */
.filter-bar { background: #fff; border-bottom: 1px solid var(--er-hairline); position: sticky; top: var(--header-h); z-index: 50; }
.filter-bar__row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; padding: 1rem 0; }
.filter-group { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-group label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--er-gray); }
.filter-group select {
  font-family: var(--er-sans); font-size: 0.9rem;
  padding: 0.5rem 0.75rem; border: 1px solid var(--er-hairline);
  border-radius: var(--radius); background: #fff; color: var(--er-ink);
  min-width: 130px; cursor: pointer;
}
.filter-group select:focus { border-color: var(--er-gold-accessible); }
.filter-group select:focus-visible { outline: 2px solid var(--er-green); outline-offset: 1px; }
.filter-more-btn, .filter-clear-btn {
  font-family: var(--er-sans); font-size: 0.85rem; font-weight: 600;
  padding: 0.55rem 1rem; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--er-green); background: #fff; color: var(--er-green);
  transition: all .15s ease;
}
.filter-more-btn:hover, .filter-clear-btn:hover { background: var(--er-green); color: #fff; }
.filter-more-btn.is-open { background: var(--er-green); color: #fff; }
.filter-clear-btn { border-color: var(--er-hairline); color: var(--er-gray); }
.filter-clear-btn:hover { background: var(--er-gray); color: #fff; border-color: var(--er-gray); }

.filter-bar__more { padding: 0 0 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.filter-chipset { display: flex; flex-direction: column; gap: 0.5rem; }
.filter-chipset__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--er-gray); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block; padding: 0.4rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--er-hairline); background: var(--er-tint);
  font-size: 0.85rem; color: var(--er-ink); cursor: pointer; transition: all .15s ease;
}
.chip input:checked + span { background: var(--er-green); color: #fff; border-color: var(--er-green); }
.chip span:hover { border-color: var(--er-gold-accessible); }

/* Map + list layout (desktop: side by side) */
.map-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: calc(100vh - var(--header-h)); }
.map-layout__map {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
}
.leaflet-map { width: 100%; height: 100%; position: relative; isolation: isolate; }
.leaflet-div-icon.er-pin { background: transparent; border: none; }
.map-layout__list { overflow-y: auto; padding: 1.5rem; }
.map-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }

/* Map card (list item) */
.map-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--er-hairline); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.map-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.map-card.is-highlight { border-color: var(--er-gold-accessible); box-shadow: 0 0 0 2px var(--er-gold-accessible); }
.map-card__img { display: block; aspect-ratio: 4/3; background: var(--er-tint); overflow: hidden; }
.map-card__img img { width: 100%; height: 100%; object-fit: cover; }
.map-card__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; }
.map-card__title { font-size: 1.1rem; margin-bottom: 0.3rem; }

.map-empty { padding: 2rem 0; color: var(--er-gray); }
.linklike { background: none; border: none; color: var(--er-green); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

/* Brand pin */
.er-pin__dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--er-green); border: 3px solid var(--er-gold); box-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* Map popup */
.map-popup { width: 220px; }
.map-popup__img { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius); margin-bottom: 0.5rem; }
.map-popup__img img { width: 100%; height: 100%; object-fit: cover; }
.map-popup__title { font-family: var(--er-serif); font-size: 1.05rem; font-weight: 600; color: var(--er-green); display: block; margin-bottom: 0.2rem; }
.map-popup__price { font-family: var(--er-serif); color: var(--er-green); font-weight: 600; }
.map-popup__meta { font-size: 0.82rem; color: var(--er-gray); margin: 0.15rem 0 0.5rem; }
.map-popup__link { font-size: 0.85rem; font-weight: 600; color: var(--er-gold-accessible); }

/* Mobile view toggle — hidden on desktop */
.view-toggle { display: none; }

@media (max-width: 900px) {
  .map-layout { grid-template-columns: 1fr; height: auto; }
  .map-layout__map { position: relative; top: 0; height: calc(100vh - var(--header-h) - 120px); display: none; }
  .map-layout__list { height: auto; overflow: visible; }
  .map-layout[data-active-view="map"] .map-layout__map { display: block; }
  .map-layout[data-active-view="map"] .map-layout__list { display: none; }
  .view-toggle { display: flex; justify-content: center; gap: 0; position: sticky; top: calc(var(--header-h)); z-index: 49; background: #fff; padding: 0.6rem; border-bottom: 1px solid var(--er-hairline); }
  .view-toggle__btn { flex: 0 0 auto; padding: 0.5rem 1.5rem; border: 1px solid var(--er-green); background: #fff; color: var(--er-green); font-weight: 600; cursor: pointer; }
  .view-toggle__btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
  .view-toggle__btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
  .view-toggle__btn.is-active { background: var(--er-green); color: #fff; }
  .filter-group select { min-width: 110px; }
}

/* Marker cluster bubbles — brand styled */
.er-cluster { background: transparent; }
.er-cluster__inner {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--er-green);
  border: 3px solid var(--er-gold);
  border-radius: 50%;
  color: #fff;
  font-family: var(--er-sans);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
/* Override the plugin's default colored squares */
.marker-cluster, .marker-cluster div { background: transparent !important; }

/* Fix: Leaflet zoom/attribution controls repaint stale inside the sticky map
   pane until a reflow. Promoting them to their own compositing layer forces
   correct repaints on every zoom. */
.leaflet-control-container .leaflet-control { will-change: transform; transform: translateZ(0); }

/* Search this area button — floats over the map, top-center */
.search-area-btn {
  position: absolute;
  top: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 1000;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: #fff; color: var(--er-green);
  border: 1.5px solid var(--er-green); border-radius: 999px;
  font-family: var(--er-sans); font-weight: 600; font-size: 0.9rem;
  cursor: pointer; box-shadow: 0 3px 12px rgba(14,50,50,.25);
  transition: background .15s ease, color .15s ease;
}
.search-area-btn:hover { background: var(--er-green); color: #fff; }

/* Hover highlight states (list -> map) */
.er-pin--hi .er-pin__dot { transform: scale(1.5); background: var(--er-gold); border-color: var(--er-green); transition: transform .12s ease; }
.er-cluster--hi .er-cluster__inner { background: var(--er-gold); color: var(--er-green); border-color: var(--er-green); transform: scale(1.12); transition: transform .12s ease; }

/* Multi-select dropdown (Status, Home type) — compact toggle styled like the
   filter <select>s, opening a checkbox panel below. */
.ms-dropdown { position: relative; display: flex; flex-direction: column; gap: 0.3rem; }
.ms-dropdown label:first-child { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--er-gray); }
.ms-dropdown__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-family: var(--er-sans); font-size: 0.9rem;
  padding: 0.5rem 0.75rem; min-width: 150px;
  border: 1px solid var(--er-hairline); border-radius: var(--radius);
  background: #fff; color: var(--er-ink); cursor: pointer;
}
.ms-dropdown__toggle:hover, .ms-dropdown__toggle.is-open { border-color: var(--er-gold-accessible); }
.ms-dropdown__toggle i { font-size: 0.75rem; color: var(--er-gray); transition: transform .15s ease; }
.ms-dropdown__toggle.is-open i { transform: rotate(180deg); }

.ms-dropdown__panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  background: #fff; border: 1px solid var(--er-hairline); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.5rem; min-width: 200px;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.ms-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: var(--radius); cursor: pointer; font-size: 0.88rem; }
.ms-option:hover { background: var(--er-tint); }
.ms-option input { accent-color: var(--er-green); }

/* Screen-reader-only content (visually hidden, still announced) */
.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;
}

/* ============================================================ plans index */
/* Virtual tour badge on the card image */
.tour-badge {
  position: absolute; bottom: 0.6rem; left: 0.6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(14,50,50,.88); color: #fff;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.3rem 0.65rem; border-radius: 999px;
}
.tour-badge i { color: var(--er-gold); }
.card__img { position: relative; }

.card__meta--muted { color: var(--er-gray); font-size: 0.8rem; }

/* Checkbox-style filter (Available now) — bottom-aligned with the selects
   above it, since it has no label row of its own. */
.filter-group--check { justify-content: flex-end; padding-bottom: 1px; }
.check-option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; color: var(--er-ink); padding-bottom: 0.55rem; }
.check-option input { accent-color: var(--er-green); width: 16px; height: 16px; }

/* ============================================= rental top grid (50/50) */
/* Agent card + Lease Details, side by side, equal height. Falls back to a
   single centered column (agent card only) if the community has no lease
   info configured. Stacks agent-on-top / lease-below below 640px. */
.rental-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: stretch; margin: 1.5rem 0 2rem; }
.rental-top-grid--single { grid-template-columns: 1fr; max-width: 480px; }
.rental-top-grid__lease {
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--er-hairline); border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}
.rental-top-grid__agent { display: flex; }

@media (max-width: 640px) {
  .rental-top-grid, .rental-top-grid--single { grid-template-columns: 1fr; max-width: none; }
}

/* ==================================================== compact agent card */
/* Self-contained bordered panel: contact info + bio at top, CTA buttons
   pinned to the bottom regardless of content length, so it lines up evenly
   with the details column beside it. */
.agent-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  width: 100%;
  background: #fff; border: 1px solid var(--er-hairline); border-left: 4px solid var(--er-gold);
  border-radius: var(--radius); padding: 1.5rem;
}
.agent-card__top { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.agent-card__photo { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: block; margin-bottom: 0.4rem; }
.agent-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.agent-card__body { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.agent-card__name { font-family: var(--er-serif); font-weight: 600; font-size: 1.15rem; color: var(--er-green); }
.agent-card__links { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; }
.agent-card__links a { color: var(--er-ink); }
.agent-card__links a:hover { color: var(--er-gold-accessible); }
.agent-card__links i { color: var(--er-gold-accessible); margin-right: 0.4rem; width: 1em; text-align: center; }

.agent-card__bio { margin-top: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--er-hairline); width: 100%; }
.agent-card__bio-text {
  font-size: 0.85rem; color: var(--er-gray); margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.agent-card__bio.is-expanded .agent-card__bio-text { -webkit-line-clamp: unset; overflow: visible; }
.agent-card__bio-toggle {
  background: none; border: none; padding: 0.4rem 0 0; margin: 0;
  font-size: 0.82rem; font-weight: 600; color: var(--er-green); cursor: pointer;
}
.agent-card__bio-toggle:hover { color: var(--er-gold-accessible); }

.agent-card__cta { gap: 0.75rem; }
.agent-card__cta .btn { flex: 1 1 auto; justify-content: center; font-size: 0.88rem; padding: 0.7rem 1rem; }

/* ==================================================== plan section card */
.plan-card {
  display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap;
  background: var(--er-tint); border-radius: var(--radius-lg); border: 1px solid var(--er-hairline);
  padding: 1.75rem;
}
.plan-card__img { flex: 0 0 240px; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; }
.plan-card__img img { width: 100%; height: 100%; object-fit: cover; }
.plan-card__body { flex: 1 1 280px; }
.plan-card__body p:first-child { margin-top: 0; }
.plan-card__body .btn { margin-top: 0.75rem; }

@media (max-width: 640px) { .plan-card__img { flex-basis: 100%; } }

/* ======================================================== detail map */
.detail-map {
  width: 100%; height: 340px; border-radius: var(--radius-lg); overflow: hidden;
  position: relative; isolation: isolate; /* trap Leaflet's z-index:1000 controls inside this element */
}
.directions-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.85rem; font-weight: 600; font-size: 0.9rem; color: var(--er-green);
}
.directions-link i { color: var(--er-gold-accessible); }
.directions-link:hover { color: var(--er-gold-accessible); }

/* ==================================================== lease details callout */
.lease-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.lease-details .item { text-align: center; }
.lease-details .item .val { display: block; font-family: var(--er-serif); font-size: 1.3rem; font-weight: 600; color: var(--er-green); }
.lease-details .item .lbl { font-size: 0.78rem; color: var(--er-gray); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.25rem; display: block; }

/* Inside the narrower rental-top-grid box, stack as a compact left-aligned
   list (label above value) rather than forcing 3 cramped columns -- keeps
   long pet-policy text readable instead of wrapping oddly beside a label. */
.rental-top-grid__lease .lease-details {
  grid-template-columns: 1fr; gap: 1rem;
}
.rental-top-grid__lease .lease-details .item { text-align: left; }
.rental-top-grid__lease .lease-details .item .lbl { order: -1; margin-top: 0; margin-bottom: 0.2rem; }
.rental-top-grid__lease .lease-details .item .val { font-size: 1.05rem; }

/* ==================================================== community section */
.community-section { background: var(--er-tint); border-top: 1px solid var(--er-hairline); }
.community-section__card {
  display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;
  background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--er-hairline);
  padding: 2rem; box-shadow: var(--shadow-sm);
}
.community-section__img { flex: 0 0 260px; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; }
.community-section__img img { width: 100%; height: 100%; object-fit: cover; }
.community-section__body { flex: 1 1 320px; }
.community-section__body h3 { margin-bottom: 0.3rem; }
.community-section__tagline { color: var(--er-gold-accessible); font-weight: 600; margin-bottom: 0.75rem; }
.school-list { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; font-size: 0.9rem; color: var(--er-gray); }
.school-list strong { color: var(--er-ink); }

@media (max-width: 640px) {
  .community-section__img { flex-basis: 100%; }
}

/* Small disclaimer note beneath a spec row */
.spec-note { font-size: 0.8rem; color: var(--er-gray); margin: -0.75rem 0 1.5rem; font-style: italic; }

/* ============================================================ about page */
/* History photo gallery — grid of images with optional captions */
.history-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem; margin-top: 2rem;
}
.history-gallery__item { margin: 0; }
.history-gallery__item img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius); border: 2px solid var(--er-gold);
  display: block;
}
.history-gallery__item figcaption {
  font-size: 0.82rem; color: var(--er-gray); margin-top: 0.5rem; text-align: center;
}

/* Core value photo tile — used when a value has an image; icon .callout
   (already defined) is the fallback when it doesn't. */
.value-tile {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 5/6; display: flex; align-items: flex-end;
}
.value-tile__img { position: absolute; inset: 0; z-index: 0; }
.value-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.value-tile__overlay {
  position: relative; z-index: 1; width: 100%; padding: 1.5rem;
  background: linear-gradient(0deg, rgba(14,50,50,.9) 0%, rgba(14,50,50,.15) 100%);
  color: #fff;
}
.value-tile__overlay h3 { color: #fff; margin-bottom: 0.5rem; }
.value-tile__overlay p { color: rgba(255,255,255,.9); font-size: 0.92rem; margin: 0; }

/* ================================================================ stats */
.stats-band {
  position: relative;
  background: var(--er-green);
  color: #fff;
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
}
.stats-band--photo { isolation: isolate; }
.stats-band__bg { position: absolute; inset: 0; z-index: 0; }
.stats-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.stats-band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,50,50,.78) 0%, rgba(14,50,50,.88) 100%);
}
.stats-band__inner {
  position: relative; z-index: 2;
  display: flex; justify-content: center; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; text-align: center;
}
.stat__num { display: block; font-family: var(--er-serif); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 600; color: #fff; line-height: 1; }
.stat__lbl { display: block; margin-top: 0.5rem; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--er-gold); }

/* ========================================================== giving back */
.giving-card {
  display: block; text-align: center;
  background: #fff; border: 1px solid var(--er-hairline); border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem; color: var(--er-ink);
  transition: box-shadow .18s ease, transform .18s ease;
}
.giving-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--er-ink); }
.giving-card__logo { display: block; width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; overflow: hidden; }
.giving-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.giving-card__icon { display: block; font-size: 1.75rem; color: var(--er-gold-accessible); margin-bottom: 1rem; }
.giving-card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.giving-card p { font-size: 0.85rem; color: var(--er-gray); margin: 0; }

/* ============================================================ contact page */
.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; }
.contact-layout__agent { position: sticky; top: calc(var(--header-h) + 1.5rem); }

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-layout__agent { position: static; }
}

.field { margin-bottom: 1.25rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--er-green); margin-bottom: 0.4rem; }
.field__required { color: var(--er-gold-accessible); }
.field__hint { font-size: 0.82rem; color: var(--er-gray); margin: -0.5rem 0 1rem; }
.field__error { font-size: 0.82rem; color: #b3261e; margin: 0.35rem 0 0; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--er-sans);
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--er-hairline);
  border-radius: var(--radius);
  background: #fff;
  color: var(--er-ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--er-gold-accessible);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--er-green);
  outline-offset: 1px;
}
.field textarea { resize: vertical; min-height: 120px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.form-alert {
  padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: 0.9rem;
}
.form-alert p { margin: 0; }
.form-alert--error { background: #fdecea; border: 1px solid #f3c1bd; color: #7a1f1a; }
.form-alert--info { background: var(--er-tint); border: 1px solid var(--er-hairline); color: var(--er-ink); }

.success-panel { text-align: center; padding: 2rem 1rem; }
.success-panel__icon { font-size: 3rem; color: var(--er-gold-accessible); margin-bottom: 1rem; display: block; }
.success-panel h2 { color: var(--er-green); margin-bottom: 0.5rem; }
.success-panel p { color: var(--er-gray); max-width: 46ch; margin: 0 auto 1.5rem; }

/* ================================================ contact form: progressive disclosure */
.more-details-toggle {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%;
  background: none; border: 1px dashed var(--er-hairline); border-radius: var(--radius);
  padding: 0.75rem; margin: 0.5rem 0 1.5rem;
  font-family: var(--er-sans); font-size: 0.88rem; font-weight: 600; color: var(--er-green);
  cursor: pointer;
}
.more-details-toggle:hover { border-color: var(--er-gold-accessible); color: var(--er-gold-accessible); }
.more-details-toggle i { font-size: 0.75rem; transition: transform .15s ease; }
.more-details-toggle.is-open i { transform: rotate(180deg); }
.more-details-panel { border-top: 1px solid var(--er-hairline); padding-top: 1.25rem; margin-top: -0.5rem; margin-bottom: 1rem; }

/* Community pre-filled from a rental/community page link */
.field--visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.field__confirm {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--er-tint); border: 1px solid var(--er-hairline); border-radius: 999px;
  padding: 0.5rem 1rem; font-size: 0.85rem; color: var(--er-ink); margin: -0.5rem 0 1.25rem;
}
.field__confirm i { color: var(--er-gold-accessible); }

/* Agent card "send us a message" link */
.agent-card__message-link {
  display: block; text-align: center; margin-top: 0.75rem;
  font-size: 0.85rem; font-weight: 600; color: var(--er-green);
}
.agent-card__message-link i { color: var(--er-gold-accessible); margin-right: 0.4rem; }
.agent-card__message-link:hover { color: var(--er-gold-accessible); }

/* ======================================================= promotions index */
.promo-card {
  background: #fff; border: 1px solid var(--er-hairline); border-left: 4px solid var(--er-gold);
  border-radius: var(--radius); padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.promo-card__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.promo-card__badge { background: var(--er-green); }
.promo-card__date { font-size: 0.8rem; color: var(--er-gray); font-weight: 600; }
.promo-card__heading { margin-bottom: 0.5rem; }
.promo-card__desc { color: var(--er-ink); margin-bottom: 1.25rem; }
.promo-card__where { font-size: 0.85rem; font-weight: 600; color: var(--er-gray); margin-bottom: 0.6rem; }

.promo-empty {
  text-align: center; padding: 3rem 1rem;
  border: 1px dashed var(--er-hairline); border-radius: var(--radius-lg);
}
.promo-empty i { font-size: 1.75rem; color: var(--er-gold-accessible); margin-bottom: 1rem; display: block; }
.promo-empty p { color: var(--er-gray); max-width: 42ch; margin: 0 auto 1.25rem; }

/* ============================================================== legal pages */
.legal-effective { color: rgba(255,255,255,.75); font-size: 0.9rem; margin-top: 0.5rem; }
.legal-body { line-height: 1.7; }
.legal-body h2 { margin-top: 2.25rem; font-size: 1.4rem; }
.legal-body h3 { margin-top: 1.5rem; font-size: 1.1rem; color: var(--er-ink); }
.legal-body p { margin-bottom: 1rem; }
.legal-body ul, .legal-body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.legal-body li { margin-bottom: 0.4rem; }
.legal-body a { text-decoration: underline; }

/* Testimonial star rating */
.star-rating { display: flex; gap: 0.2rem; color: var(--er-gold-accessible); margin-bottom: 0.75rem; font-size: 0.9rem; }
.star-rating .star--empty { color: var(--er-hairline); }