/* ==========================================================================
   Sable & Sound — design system

   CONCEPT THESIS: This is a quiet, sun-worn place, not a resort brochure.
   In the first three seconds a visitor should feel the hush of a house
   that has weathered a hundred salt seasons gracefully — unhurried,
   materially honest, a little austere. The palette is drawn from things
   you can touch on the property, not from a color wheel: silvered cedar
   siding, dry sea oats, morning haze off the water, linen left in the
   sun, warm sand, and one cool, faded indigo reserved almost entirely
   for the Sound itself. No turquoise. No tropical brights.

   TOKENS
   -------
   Color:   --sand-*   (linen -> cedar, the dominant warm scale)
            --indigo-* (faded, cool, used sparingly — mainly water)
            --sea-oat, --shell (rare accent marks, never full sections)
   Type:    --step-* is a 1.333 (fourth) scale anchored at 16px, expressed
            through clamp() for fluid response rather than fixed jumps.
   Space:   --space-* follows a loose golden-ratio progression (4 / 8 / 13
            / 21 / 34 / 55 / 89 / 144) instead of an even 8px grid, so
            gaps between unrelated elements read as more generous than
            gaps between related ones.
   ========================================================================== */

:root {
  /* --- Brand System canonical reference (Sable & Sound Brand System doc,
     "Reference" section) — the 5 anchor hexes the rest of the sand/indigo
     scales below are built around. Linen/Warm Sand/Warm Gold replace the
     --sand-50/200/300 steps that were approximations of these same colors;
     Charcoal-Teal replaces --sand-900 as the site's dark ink/background
     token; Dusty Indigo-Slate replaces --indigo-300. Every other step in
     both scales is untouched — the doc defines 5 anchor colors, not a
     whole new scale. --- */
  --brand-linen: #F4EEE2;
  --brand-warm-sand: #E4D4B4;
  --brand-charcoal-teal: #22302C;
  --brand-indigo-slate: #7A85A0;
  --brand-warm-gold: #C8A46B;

  /* --- sand: linen through weathered cedar (dominant warm scale) --- */
  --sand-50:  var(--brand-linen);
  --sand-100: #efe4d1;
  --sand-200: var(--brand-warm-sand);
  --sand-300: var(--brand-warm-gold);
  --sand-400: #ab8a5c;
  --sand-500: #8a6b46;
  --sand-600: #6b5138;
  --sand-700: #4f3b29;
  --sand-800: #382a1e;
  --sand-900: var(--brand-charcoal-teal);

  /* --- indigo: faded, cool, reserved for water and rare accents --- */
  --indigo-50:  #eef0f0;
  --indigo-100: #d7dcdd;
  --indigo-200: #b3bdc0;
  --indigo-300: var(--brand-indigo-slate);
  --indigo-400: #647481;
  --indigo-500: #4a5a68;
  --indigo-600: #3a4753;
  --indigo-700: #2c3742;
  --indigo-800: #1f2830;
  --indigo-900: #141b21;

  --paper: var(--sand-50);
  --ink: var(--sand-900);
  --ink-soft: #6b6153;
  --line: rgba(36, 27, 19, 0.12);
  --line-strong: rgba(36, 27, 19, 0.22);

  --accent: var(--sand-600);
  --accent-strong: var(--sand-700);
  --on-accent: var(--sand-50);
  --sea-oat: #a49872;
  --shell: #bd8672;
  --water: var(--indigo-500);
  --water-deep: var(--indigo-800);

  --surface: #fdfaf4;
  --surface-tint: var(--sand-100);

  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 3px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(36, 27, 19, 0.10), 0 1px 2px rgba(36, 27, 19, 0.06);
  --shadow-md: 0 10px 26px rgba(36, 27, 19, 0.12), 0 2px 8px rgba(36, 27, 19, 0.06);
  --shadow-lg: 0 30px 70px rgba(36, 27, 19, 0.16), 0 8px 20px rgba(36, 27, 19, 0.08);

  /* Cormorant: a narrow, tall editorial serif that stays elegant even at
     huge display sizes (unlike a wider didone cut, which turns heavy and
     dominant at that scale). Archivo is the workhorse: grotesk with a
     little personality, never mistaken for system-ui. */
  --font-display: "Cormorant", "Iowan Old Style", Georgia, serif;
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0:  1rem;
  --step-1:  clamp(1.15rem, 1.1rem + 0.3vw, 1.3rem);
  --step-2:  clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem);
  --step-3:  clamp(2.2rem, 1.8rem + 1.8vw, 3.2rem);
  --step-4:  clamp(2.8rem, 2.1rem + 3.2vw, 4.6rem);
  --step-5:  clamp(3.4rem, 2.3rem + 5vw, 6.2rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 13px;
  --space-4: 21px;
  --space-5: 34px;
  --space-6: 55px;
  --space-7: 89px;
  --space-8: 144px;

  --container: 1200px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: var(--sand-900);
    --ink: var(--sand-50);
    --ink-soft: #bdaf98;
    --line: rgba(248, 243, 234, 0.12);
    --line-strong: rgba(248, 243, 234, 0.22);
    --surface: #2c2015;
    --surface-tint: #382a1e;
    --accent: var(--sand-200);
    --accent-strong: var(--sand-100);
    --on-accent: var(--sand-900);
  }
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0 0 0.5em; line-height: 1.08; letter-spacing: -0.005em; }
p { margin: 0 0 1em; color: var(--ink-soft); }
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--sea-oat);
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

.section { padding: var(--space-8) 0; }
.section-tight { padding: var(--space-6) 0; }
#site-map { scroll-margin-top: 100px; }
.section-head { max-width: 700px; margin: 0 0 var(--space-6); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: var(--step-1); }

/* Sand-grain texture (Brand System doc, "05 — Texture & Pattern Library"):
   fine fractal noise over the warm tinted section backgrounds, 8% opacity,
   the doc's own ceiling for staying "never behind small text." A ::before
   pseudo-element keeps this to a CSS-only background accent (no markup
   added to every section that uses these two classes) and z-index: -1
   (which only needs position: relative on the section itself, not on
   every child) keeps it strictly behind all real content. */
.bg-surface, .bg-tint { position: relative; }
.bg-surface::before, .bg-tint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='sandGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.3  0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sandGrain)'/%3E%3C/svg%3E");
}
.bg-surface { background: var(--surface); }
.bg-tint { background: var(--surface-tint); }
.bg-ink {
  position: relative;
  background: var(--sand-900);
  color: var(--sand-50);
}
/* Wave-line motif (Brand System doc, "05 — Texture & Pattern Library"):
   a single continuous line, used here per the doc's "very-low-opacity
   full-bleed background accent" option rather than as a bordering frame —
   tiled once across the full section width, well under text contrast. */
.bg-ink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='60'%3E%3Cpath d='M0 30 C30 10 60 10 90 30 C120 50 150 50 180 30 C210 10 240 10 270 30 C300 50 330 50 360 30' stroke='%23F4EEE2' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 30px;
}
.bg-ink p { color: rgba(248, 243, 234, 0.72); }
.bg-ink .eyebrow { color: var(--sand-300); }
.bg-ink .eyebrow::before { background: var(--sea-oat); }

/* ---- buttons: rectangular, considered, not pill-shaped SaaS buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.25s ease, color 0.25s ease, border-color .25s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--accent-strong);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background: color-mix(in srgb, var(--accent-strong) 82%, black); }
.btn-ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-ghost:hover { background: rgba(36, 27, 19, 0.06); transform: translateY(-1px); }
.bg-ink .btn-ghost:hover { background: rgba(248, 243, 234, 0.1); }
.btn-light {
  background: var(--sand-50);
  color: var(--sand-900);
}
.btn-light:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  white-space: nowrap;
}
.brand-mark {
  width: 44px; height: 39px;
  flex-shrink: 0;
}
.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2px;
  white-space: nowrap;
}
.main-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 1; }
.main-nav a {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background .2s ease, color .2s ease;
  position: relative;
  white-space: nowrap;
}
.header-actions { flex-shrink: 0; }

/* ---- "More" panel: keeps secondary pages off the main nav row ---- */
.nav-more { position: relative; margin-left: 2px; }
.nav-more-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.9rem; font-weight: 500;
  color: var(--ink-soft);
  transition: background .2s ease, color .2s ease;
}
.nav-more-trigger svg { transition: transform .25s var(--ease); }
.nav-more-trigger:hover { background: var(--surface-tint); color: var(--ink); }
.nav-more-trigger.active { color: var(--ink); font-weight: 600; }
.nav-more.is-open .nav-more-trigger { background: var(--surface-tint); color: var(--ink); }
.nav-more.is-open .nav-more-trigger svg { transform: rotate(180deg); }
.nav-more-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  z-index: 250;
}
.nav-more.is-open .nav-more-panel { display: block; animation: navPanelIn .22s var(--ease); }
@keyframes navPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.nav-more-panel a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background .2s ease, color .2s ease;
}
.nav-more-panel a:hover { background: var(--surface-tint); color: var(--ink); }
.nav-more-panel a.active { color: var(--accent-strong); font-weight: 600; }
.nav-more-divider { height: 1px; background: var(--line); margin: 6px 4px; }
.mobile-nav-divider { height: 1px; background: var(--line); margin: 4px clamp(20px, 5vw, 56px); }
.main-nav a:hover { background: var(--surface-tint); color: var(--ink); }
.main-nav a.active { color: var(--ink); font-weight: 600; }
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 2px;
  background: var(--sea-oat);
  border-radius: 2px;
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: currentColor;
  position: relative; transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav { display: none; }

@media (max-width: 980px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav {
    position: fixed; inset: 84px 0 0 0;
    background: var(--paper);
    z-index: 190;
    overflow-y: auto;
    padding: 8px 0 40px;
  }
  .mobile-nav.is-open { display: block; }
  .mobile-nav a {
    display: block;
    padding: 16px clamp(20px, 5vw, 56px);
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
    font-weight: 500;
  }
  .mobile-nav a.active { color: var(--accent-strong); font-weight: 700; }
  .mobile-nav .btn { margin: 20px clamp(20px, 5vw, 56px) 0; }
}

/* ---- narrow phones: the brand wordmark + "Schedule a Tour" + hamburger
   don't all fit on one row without wrapping/clipping (nav-toggle was
   getting pushed off the right edge of the viewport). The mobile nav
   panel already surfaces its own full-width "Schedule a Tour" button, so
   the header's copy is dropped at this width rather than shrunk to an
   illegible size — the hamburger stays the one, always-tappable action. ---- */
@media (max-width: 560px) {
  .header-actions .btn-primary.btn-sm { display: none; }
}

/* ==========================================================================
   Hero — asymmetric, full-bleed on the art side. Deliberately not the
   centered-headline-over-gradient skeleton: copy sits left, aligned to
   the same margin as the rest of the page; the water bleeds to the
   browser edge like a photograph that ran off the page in a magazine.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--sand-900);
  color: var(--sand-50);
}
.hero-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 640px;
}
.hero-copy {
  grid-column: 1;
  align-self: center;
  padding: var(--space-6) clamp(20px, 5vw, 56px) var(--space-6) clamp(20px, 5vw, 56px);
  position: relative;
}
.hero-index {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  position: absolute;
  left: clamp(4px, 1.4vw, 18px);
  top: var(--space-6);
  bottom: var(--space-6);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--sea-oat);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-index::after { content: ""; width: 1px; flex: 1; background: rgba(248, 243, 234, 0.25); }
.hero-copy { padding-left: clamp(38px, 6vw, 74px); }
.hero-copy .eyebrow { color: var(--sea-oat); }
.hero-copy .eyebrow::before { background: var(--sea-oat); }
.hero h1 { margin-bottom: 0.35em; }
.hero h1 em { font-style: italic; color: var(--sand-300); }
.hero-copy p.lede {
  font-size: var(--step-1);
  color: rgba(248, 243, 234, 0.78);
  max-width: 42ch;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-4); }
.hero-stats {
  display: flex;
  gap: clamp(20px, 4vw, 40px);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(248, 243, 234, 0.18);
}
.hero-stats div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--sand-100);
}
.hero-stats div span {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(248, 243, 234, 0.58);
}
.hero-art {
  grid-column: 2;
  position: relative;
  min-height: 380px;
  overflow: hidden;
}
.hero-art .scene-frame { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; }
.hero-art .scene-caption {
  left: auto; right: 0; bottom: var(--space-4);
  background: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 10px 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .hero-frame { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { grid-column: 1; order: -1; min-height: 320px; }
  .hero-index { display: none; }
  .hero-copy { padding-left: clamp(20px, 5vw, 56px); }
  .hero-stats { flex-wrap: wrap; row-gap: 18px; }
}

/* ==========================================================================
   Scene illustrations — reusable art-directed SVG/CSS compositions.
   Sharp rectangular crop (no rounded "gradient blob" framing) with a
   fine paper-grain overlay, closer to a printed photograph than a UI card.
   ========================================================================== */
.scene-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
  background: var(--indigo-800);
}
.scene-frame::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}
.scene-frame.square { aspect-ratio: 1 / 1; }
.scene-frame.wide { aspect-ratio: 16 / 9; }
.scene-frame svg { width: 100%; height: 100%; display: block; }
.scene-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 20px;
  background: linear-gradient(0deg, rgba(10, 20, 22, 0.72), transparent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- real photography / video, dropped into the same .scene-frame shell
   the illustrations use (see scene_photo() in inc/scenes.php). Both the
   <img>/<video> and the duotone tint are absolutely positioned so they
   never affect the frame's own height — without this, an unconstrained
   <video> can report its native pixel size and balloon the whole grid
   row (this is what broke the homepage hero: the frame stretched to
   the video's natural size instead of the frame's own 4:3/stretch box,
   pushing the hero copy down and cropping the video to a sliver of sky). ---- */
.photo-scene img,
.photo-scene video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(.8) contrast(1.07) brightness(.95) sepia(.14) hue-rotate(-8deg);
}
.photo-scene .photo-tint {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(107, 81, 56, .42) 0%, rgba(31, 40, 48, .5) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Reading Nook's source photo runs quite dark on its own; the standard
   duotone tint (a multiply blend) would push it toward illegible, so
   this variant lifts exposure and lightens the tint instead of skipping
   the grade entirely. */
.photo-scene.photo-brighten img {
  filter: saturate(.85) contrast(1.02) brightness(1.4) sepia(.1) hue-rotate(-6deg);
}
.photo-scene.photo-brighten .photo-tint {
  background: linear-gradient(135deg, rgba(107, 81, 56, .28) 0%, rgba(31, 40, 48, .3) 100%);
}
.hero-video-frame {
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   Lifestyle / feature rows
   ========================================================================== */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.split-row.reverse .split-copy { order: 2; }
@media (max-width: 900px) {
  .split-row { grid-template-columns: 1fr; }
  .split-row.reverse .split-copy { order: 0; }
}
.split-copy ul.check-list { margin-top: 20px; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); }
.check-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

/* ---- finish swatches (amenities page) ---- */
.finish-swatches { display: grid; gap: 10px; margin-top: 20px; }
.finish-swatch {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-align: left;
  font-size: 0.86rem;
  transition: border-color .2s ease, background .2s ease;
}
.finish-swatch:hover { border-color: var(--accent); }
.finish-swatch.active { border-color: var(--accent-strong); background: var(--surface); }
.finish-swatch-chip { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--line-strong); }

/* ==========================================================================
   Cards / grids
   ========================================================================== */
.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.card-body { padding: 22px 24px 26px; }
.card h3 { margin-bottom: 6px; }
.card .card-meta { font-size: 0.8rem; color: var(--accent); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }

.teaser-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 0.88rem; color: var(--accent-strong);
  margin-top: 14px;
}
.teaser-link svg { transition: transform .3s var(--ease); }
.card:hover .teaser-link svg, a.teaser-link:hover svg { transform: translateX(4px); }

/* ---- borderless teaser tiles (homepage): no card chrome, no shared
   shadow — just image, a hairline rule, and type doing the work ---- */
.teaser-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .teaser-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .teaser-row { grid-template-columns: 1fr; } }
.teaser-tile { display: block; }
.teaser-tile .scene-frame { transition: transform .5s var(--ease); }
.teaser-tile:hover .scene-frame { transform: scale(1.02); }
.teaser-tile-body { padding-top: var(--space-3); border-top: 1px solid var(--line-strong); margin-top: var(--space-3); }
.teaser-tile-body h3 { transition: color .25s ease; }
.teaser-tile:hover .teaser-tile-body h3 { color: var(--accent-strong); }
.teaser-tile-body p { font-size: 0.92rem; }

/* ---- amenity index: alternating rows, not sixteen matching cards ---- */
.amenity-index { border-top: 1px solid var(--line-strong); }
.amenity-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
.amenity-row-index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--sea-oat);
  width: 44px;
  flex-shrink: 0;
}
.amenity-row-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.amenity-row:nth-child(even) .amenity-row-content { flex-direction: row-reverse; }
.amenity-row-media { width: 260px; flex-shrink: 0; }
.amenity-row-media .scene-frame { aspect-ratio: 4/3; }
.amenity-row-body { flex: 1; }
.amenity-row-body h3 { display: flex; align-items: center; gap: 12px; font-size: var(--step-2); margin-bottom: 8px; }
/* One badge per amenity, straight from the Brand System doc's 22-icon set
   (amenity_icon_svg() in inc/scenes.php) — every amenity gets its exact
   doc icon here regardless of whether its main media is a photo, a rich
   illustrated scene, or the compact icon tile itself. */
.amenity-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--accent-strong);
}
.bg-ink .amenity-icon-badge { background: rgba(248, 243, 234, 0.1); }
.amenity-row-body p { font-size: 1rem; max-width: 56ch; margin-bottom: 0; }

@media (max-width: 800px) {
  .amenity-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); position: relative; }
  .amenity-row-index { position: absolute; top: var(--space-5); right: 0; }
  .amenity-row-content, .amenity-row:nth-child(even) .amenity-row-content { flex-direction: column; align-items: flex-start; width: 100%; }
  .amenity-row-media { width: 100%; max-width: 320px; }
}

/* ==========================================================================
   Nearby / neighborhood
   ========================================================================== */
.poi-list { display: grid; gap: 14px; }
.poi-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.poi-item .poi-name { font-weight: 600; }
.poi-item .poi-desc { font-size: 0.86rem; color: var(--ink-soft); margin: 2px 0 0; }
.poi-dist {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent-strong);
  text-align: right;
  white-space: nowrap;
}
.poi-dist span { display: block; font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.category-tabs button {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  font-size: 0.85rem; font-weight: 600;
  transition: all .25s ease;
}
.category-tabs button.active, .category-tabs button:hover { background: var(--accent-strong); color: var(--on-accent); border-color: transparent; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
}
.faq-q .plus { flex-shrink: 0; width: 26px; height: 26px; position: relative; }
.faq-q .plus::before, .faq-q .plus::after {
  content: ""; position: absolute; background: var(--accent-strong); border-radius: 2px;
}
.faq-q .plus::before { left: 2px; right: 2px; top: 12px; height: 2px; }
.faq-q .plus::after { top: 2px; bottom: 2px; left: 12px; width: 2px; transition: transform .3s ease; }
.faq-item.open .faq-q .plus::after { transform: rotate(90deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease);
}
.faq-a-inner { padding: 0 4px 24px; max-width: 68ch; }
.faq-a-inner p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Floor plans page
   ========================================================================== */
.view-toggle { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); margin-bottom: 18px; }
.view-toggle-btn { padding: 8px 20px; border-radius: var(--radius-pill); font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); transition: background .2s ease, color .2s ease; }
.view-toggle-btn.active { background: var(--accent-strong); color: var(--on-accent); }
.fp-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 26px 6px 11px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6153' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fp-select:hover { border-color: var(--accent); }
.fp-select:focus-visible { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--surface-tint); }
.fp-toolbar {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 22px;
  position: sticky;
  top: 84px;
  z-index: 20;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}
.fp-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.fp-filter-group { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; }
.fp-filter-group:last-child { margin-left: auto; }
.fp-filter-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  padding: 5px 12px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-tint);
  color: var(--ink);
  font-size: 0.75rem; font-weight: 600;
  white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip.active { background: var(--accent-strong); color: var(--on-accent); border-color: transparent; }
.fp-amenity-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px;
  height: 30px;
  border: 1px solid var(--line);
  background: var(--surface-tint);
  border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .2s ease, transform .15s ease;
}
.fp-amenity-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.fp-amenity-toggle[aria-expanded="true"] { background: var(--accent-strong); color: var(--on-accent); border-color: transparent; }
.fp-amenity-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 560px;
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 16px;
  z-index: 30;
}
.fp-amenity-panel.open { display: grid; }
.fp-amenity-panel label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.84rem;
  padding: 5px 2px;
  cursor: pointer;
}
.fp-result-count { font-size: 0.8rem; color: var(--ink-soft); margin: 18px 0 16px; }
.fp-result-count strong { color: var(--ink); }

/* Below ~780px the six filter groups no longer fit a readable wrapped
   grid without pushing the whole page down (the original bug report:
   "takes up ALL the room on mobile"). One horizontally-scrollable row,
   same pattern as a restaurant/booking site's filter strip, keeps the
   toolbar to a fixed, compact height regardless of how many groups it
   holds. Scrollbar hidden in favor of the fade below, a clearer signal
   that content continues than a thin native scrollbar would be. */
@media (max-width: 780px) {
  .fp-toolbar { padding: 10px 0; position: relative; }
  .fp-toolbar-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 16px;
    gap: 18px;
  }
  .fp-toolbar-row::-webkit-scrollbar { display: none; }
  .fp-filter-group:last-child { margin-left: 0; }
  .fp-filter-group { flex-direction: column; align-items: flex-start; gap: 6px; }
  .chip-row, .fp-select, .fp-amenity-toggle { flex: none; }
  .fp-amenity-panel { left: auto; right: 16px; }
  /* right-edge fade signals more chips sit off-screen to the right */
  .fp-toolbar::after {
    content: "";
    position: absolute;
    top: 10px; bottom: 10px; right: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--surface) 88%, transparent));
  }
}

/* ---- floor plan ledger: numbered rows, not matching cards ---- */
.plan-ledger { border-top: 1px solid var(--line-strong); }
.plan-row {
  display: grid;
  grid-template-columns: 40px 148px 1fr 200px;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
  transition: background .3s ease;
}
.plan-row:hover { background: var(--surface-tint); }
.plan-row:nth-child(even) { background: color-mix(in srgb, var(--surface-tint) 45%, transparent); }
.plan-row:nth-child(even):hover { background: var(--surface-tint); }
.plan-row-index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--sea-oat);
  text-align: center;
}
.plan-row-media { width: 148px; }
.plan-row-media .scene-frame { aspect-ratio: 1/1; }
.plan-row-media .plan-sketch { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.plan-row-media .plan-sketch svg { width: 100%; height: 100%; }
.plan-row-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-row-head h3 { margin-bottom: 0; }
.plan-row-category { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.plan-row-desc { font-size: 0.92rem; margin: 6px 0 0; max-width: 60ch; }
.plan-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
.plan-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.plan-specs { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 0; font-size: 0.87rem; color: var(--ink-soft); }
.plan-specs strong { color: var(--ink); }
.plan-row-price { text-align: right; }
.plan-price { font-family: var(--font-display); font-size: 1.7rem; }
.plan-price small { font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; color: var(--ink-soft); display: block; }
.plan-total { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }
.plan-total strong { font-size: 0.95rem; color: var(--accent-strong); }
.plan-avail {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 700; color: var(--water);
  margin-top: 10px;
  justify-content: flex-end;
}
.plan-avail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.plan-avail.none { color: var(--ink-soft); }
.plan-card-actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; flex-wrap: wrap; }
.no-results {
  display: none;
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
}
.no-results.show { display: block; }

@media (max-width: 860px) {
  .plan-row { grid-template-columns: 1fr; gap: var(--space-2); position: relative; padding: var(--space-5) 0; }
  .plan-row-index { position: absolute; top: var(--space-5); right: 0; text-align: right; }
  .plan-row-media { width: 100%; max-width: 220px; }
  .plan-row-price { text-align: left; margin-top: var(--space-2); }
  .plan-avail, .plan-card-actions { justify-content: flex-start; }
}

/* ---- floor plan detail view ---- */
.plan-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .plan-detail-grid { grid-template-columns: 1fr; } }
.plan-detail-sketch-wrap { margin-top: var(--space-4); }
.plan-detail-sketch-wrap .eyebrow { margin-bottom: 10px; }
.plan-sketch { border: 1px solid var(--line); background: var(--sand-50); }
.plan-sketch svg { width: 100%; height: auto; display: block; }
.plan-detail-price { display: flex; gap: var(--space-5); align-items: baseline; margin-bottom: 10px; }
.plan-detail-price .plan-price { font-size: 2.4rem; }
.plan-detail-price .plan-total { font-size: 0.9rem; }
.plan-detail-price .plan-total strong { font-size: 1.2rem; }
.plan-detail-specs { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.95rem; }

/* ---- interactive map ---- */
.map-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 32px);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) { .map-wrap { grid-template-columns: 1fr; } }
.site-map-svg { width: 100%; height: auto; border-radius: var(--radius); background: var(--sand-100); transition: transform .9s var(--ease); transform-origin: 50% 50%; }
.map-wrap > div:first-child { overflow: hidden; border-radius: var(--radius); }
/* ---- mobile: real unit-cell tap targets, not a shrunk-to-fit map ----
   At 100% width on a phone, the 1200-unit-wide SVG scales down ~4x,
   shrinking each unit cell to a few real pixels — physically too small
   to tap, which is what actually made the map read as "not dynamic" on
   mobile (the click handlers were always correct; the targets just
   weren't hittable). Below 720px, render the map at a fixed, legible
   width inside a horizontally scrollable frame instead, so cells stay a
   real tappable size and a phone's native pinch-zoom still works on top
   of that. */
@media (max-width: 720px) {
  .map-wrap > div:first-child { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .site-map-svg { width: 900px; max-width: none; flex-shrink: 0; }
}
.site-map-svg .building {
  cursor: pointer;
  transition: transform .25s var(--ease), filter .25s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.site-map-svg .building-footprint rect, .site-map-svg .building-footprint path { transition: fill .25s ease, stroke .25s ease; }
.site-map-svg .building:hover, .site-map-svg .building.active { transform: translateY(-2px); }
.site-map-svg .building:hover .building-footprint rect, .site-map-svg .building:hover .building-footprint path,
.site-map-svg .building.active .building-footprint rect, .site-map-svg .building.active .building-footprint path { fill: var(--sand-700); }
.site-map-svg .building .b-label { font-family: var(--font-body); font-weight: 700; fill: #fff; pointer-events: none; }
.site-map-svg .b-label-top { font-family: var(--font-display); font-style: italic; fill: var(--sand-800); pointer-events: none; }
.site-map-svg .landmark { opacity: 0.9; }
.site-map-svg .water-label, .site-map-svg .landmark-label { font-family: var(--font-display); font-style: italic; fill: var(--indigo-700); pointer-events: none; }

/* ---- top-down unit cells: numbered boxes drawn on the roof footprint ---- */
.unit-cell rect {
  fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5;
  transition: fill .2s ease, stroke .2s ease;
}
.unit-cell text { font-family: var(--font-body); font-weight: 700; fill: var(--ink); pointer-events: none; }
.unit-cell.available rect { stroke: var(--accent-strong); }
.unit-cell.available { cursor: pointer; }
.unit-cell.available:hover rect { fill: var(--accent-strong); }
.unit-cell.available:hover text { fill: var(--on-accent); }
.unit-cell.leased rect { fill: var(--sand-200); opacity: .6; }
.unit-cell.leased text { fill: var(--ink-soft); opacity: .8; }

/* The unit modal's "View on Map" tab: the one cell matching the unit the
   modal is actually open for, picked out from its floor neighbors so it
   doesn't just read as "a building lit up" with no indication of which
   home is the one you clicked into. */
.unit-cell.current-unit rect {
  fill: var(--accent-strong);
  stroke: var(--water);
  stroke-width: 2.5;
}
.unit-cell.current-unit text { fill: var(--on-accent); }

.floor-selector-global {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.map-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  min-height: 320px;
  background: var(--surface-tint);
}
.map-panel .placeholder { color: var(--ink-soft); text-align: center; padding: 60px 10px; font-size: 0.95rem; }
.map-panel h3 { margin-bottom: 2px; }
.map-panel .map-panel-type { font-size: 0.8rem; font-weight: 600; color: var(--accent-strong); text-transform: uppercase; letter-spacing: 0.04em; }
.map-panel .map-panel-note { font-size: 0.9rem; margin: 12px 0; }

/* ---- floor selector + per-unit scrollable list: the primary way to
   browse specific available homes once a building is selected ---- */
.floor-selector { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.floor-tab {
  padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  font-size: 0.78rem; font-weight: 600; color: var(--ink-soft);
  transition: background .2s ease, color .2s ease;
}
.floor-tab.active, .floor-tab:hover { background: var(--accent-strong); color: var(--on-accent); border-color: transparent; }
.unit-scroll-list { max-height: 420px; overflow-y: auto; display: grid; gap: 8px; padding-right: 4px; }
.unit-list-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .2s ease, transform .2s ease;
}
.unit-list-row.available { cursor: pointer; }
.unit-list-row.available:hover { border-color: var(--accent-strong); transform: translateY(-1px); }
.unit-list-row.leased { opacity: .55; }
.unit-list-thumb { width: 56px; height: 56px; flex-shrink: 0; border: 1px solid var(--line); overflow: hidden; }
.unit-list-thumb svg { width: 100%; height: 100%; display: block; }
.unit-list-info { flex: 1; min-width: 0; }
.unit-list-top { display: flex; align-items: baseline; gap: 8px; font-size: 0.9rem; }
.unit-list-plan { color: var(--ink-soft); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-list-specs { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }
.unit-list-view { font-size: 0.78rem; color: var(--water); font-style: italic; margin-top: 2px; }
.unit-list-price { text-align: right; flex-shrink: 0; font-size: 0.9rem; font-weight: 700; }
.unit-list-status { display: block; font-size: 0.7rem; font-weight: 600; margin-top: 2px; }
.unit-list-status.available { color: var(--water); }
.unit-list-status.leased { color: var(--ink-soft); font-weight: 500; }

.map-plan-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.map-plan-group:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.map-plan-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.map-plan-sketch-mini { width: 62px; height: 44px; flex-shrink: 0; border: 1px solid var(--line); overflow: hidden; }
.map-plan-sketch-mini svg { width: 100%; height: 100%; display: block; }
.unit-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  border: 1px solid var(--line);
  min-width: 84px;
  text-align: left;
  background: transparent;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.unit-chip-number { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; }
.unit-chip.available { background: var(--surface); border-color: var(--accent-strong); cursor: pointer; }
.unit-chip.available .unit-chip-detail { color: var(--accent-strong); font-weight: 600; }
.unit-chip.available:hover, .unit-chip.available:focus-visible { background: var(--accent-strong); transform: translateY(-1px); }
.unit-chip.available:hover .unit-chip-number, .unit-chip.available:hover .unit-chip-detail,
.unit-chip.available:focus-visible .unit-chip-number, .unit-chip.available:focus-visible .unit-chip-detail { color: var(--on-accent); }
.unit-chip.available:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.unit-chip.unavailable { cursor: default; }
.unit-chip.unavailable { background: transparent; opacity: .55; }
.unit-chip.unavailable .unit-chip-detail { color: var(--ink-soft); }
.map-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 0.78rem; color: var(--ink-soft); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---- neighborhood.php's travel-time map ---- */
.neighborhood-map-photo { margin-bottom: 16px; }
.neighborhood-map-photo.scene-frame { aspect-ratio: 21 / 9; }
.neighborhood-map-svg { background: var(--sand-100); }
.neighborhood-pin { cursor: pointer; transition: transform .2s ease; transform-box: fill-box; transform-origin: center; }
.neighborhood-pin circle:first-child { transition: r .15s ease, filter .15s ease; }
.neighborhood-pin:hover, .neighborhood-pin:focus-visible, .neighborhood-pin.active { transform: translateY(-3px); }
.neighborhood-pin:hover circle:first-child, .neighborhood-pin:focus-visible circle:first-child, .neighborhood-pin.active circle:first-child {
  filter: drop-shadow(0 3px 5px rgba(20, 27, 33, 0.35));
}
.neighborhood-pin.active circle:first-child { stroke: var(--indigo-600); stroke-width: 3; }
.travel-time-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.travel-time-tile {
  background: var(--surface-tint); border-radius: var(--radius-sm); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.travel-time-tile .tt-mode { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.travel-time-tile .tt-value { font-family: var(--font-display); font-size: 1.3rem; }
@media (max-width: 560px) { .travel-time-grid { grid-template-columns: 1fr 1fr; } }

/* ---- unit list on the floor-plan detail page ---- */
.unit-list { display: grid; gap: 8px; margin-top: 14px; }
.unit-row {
  display: grid; grid-template-columns: 100px 1fr auto auto; gap: 14px; align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  width: 100%;
  text-align: left;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.unit-row-trigger:hover { border-color: var(--accent-strong); background: var(--surface-tint); transform: translateY(-1px); }
.unit-row-trigger:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.unit-row .unit-number { font-family: var(--font-display); font-style: italic; font-size: 1rem; }
.unit-row .unit-price { font-weight: 700; color: var(--accent-strong); }
.unit-row .unit-movein { color: var(--ink-soft); font-size: 0.8rem; text-align: right; }
@media (max-width: 560px) {
  .unit-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
}

/* ==========================================================================
   Pricing tables
   ========================================================================== */
.fee-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.fee-table th, .fee-table td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.fee-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); background: var(--surface-tint); }
.fee-table tr:last-child td { border-bottom: none; }
.fee-table td:nth-child(2) { font-weight: 700; color: var(--accent-strong); white-space: nowrap; }
.fee-table td:last-child { color: var(--ink-soft); font-size: 0.9rem; }
.fee-total-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 26px 30px; border-radius: var(--radius-lg);
  background: var(--indigo-800);
  color: var(--sand-50); margin-top: 18px;
}
.fee-total-banner strong { font-family: var(--font-display); font-size: 1.8rem; }
@media (max-width: 700px) {
  .fee-table { font-size: 0.86rem; }
  .fee-table th, .fee-table td { padding: 12px 14px; }
}

/* ---- live cost calculator ---- */
.calc-wrap {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 34px);
}
@media (max-width: 800px) { .calc-wrap { grid-template-columns: 1fr; } }
.calc-controls .field { margin-bottom: 18px; }
.calc-addons { border: none; padding: 0; margin: 0; }
.calc-addons legend { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; padding: 0; }
.calc-addons label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 0.9rem; cursor: pointer;
}
.calc-addons label:last-child { border-bottom: none; }
.calc-addons label span { color: var(--ink-soft); font-size: 0.84rem; white-space: nowrap; }
.calc-addons input[type="checkbox"] { margin-right: 10px; }
.calc-pet-row, .calc-employer-row { display: flex; align-items: center; }
.calc-pet-row select { margin-left: auto; width: auto; padding: 6px 30px 6px 10px; font-size: 0.85rem; }
.calc-result {
  background: var(--surface-tint); border-radius: var(--radius); padding: 22px 24px; align-self: start;
}
.calc-line { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.92rem; border-bottom: 1px solid var(--line); }
.calc-line span:last-child { font-weight: 600; }
.calc-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 16px; margin-top: 6px; font-size: 1rem;
}
.calc-total strong { font-family: var(--font-display); font-size: 2rem; color: var(--accent-strong); }

/* ==========================================================================
   Contact / tour scheduling
   ========================================================================== */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 40px);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-size: 0.96rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ---- form controls, on brand everywhere: selects, checkboxes, radios ----
   The closed state of a <select> is fully ours (appearance:none + our own
   chevron); the open native listbox cannot be restyled cross-browser, so
   any control that needs an on-brand OPEN state is built as its own
   component instead (see the amenity feature panel, the lease term
   cards, and the contact-page day picker) rather than fighting a native
   popup. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 9l7 7 7-7' stroke='%236b5138' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 38px !important;
  cursor: pointer;
}
.field select { font-family: var(--font-body); color: var(--ink); }
input[type="date"] { font-family: var(--font-body); }
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent-strong);
  width: 17px;
  height: 17px;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.chip:focus-visible, .view-toggle-btn:focus-visible, .um-tab:focus-visible { outline-offset: -2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.field-hint { font-size: 0.78rem; color: var(--ink-soft); margin-top: 6px; }
.field-error { font-size: 0.78rem; color: #a4372b; margin-top: 6px; display: none; }
.field.has-error input, .field.has-error select { border-color: #a4372b; }
.field.has-error .field-error { display: block; }

.date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.date-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); font-size: 0.86rem; font-weight: 600;
  border: 1px solid var(--line);
  transition: all .2s ease;
}
.date-cell:disabled { opacity: 0.28; cursor: not-allowed; }
.date-cell.selected { background: var(--accent-strong); color: var(--on-accent); border-color: transparent; }
.date-cell:not(:disabled):not(.selected):hover { border-color: var(--accent); }
.date-cell.blank { border: none; visibility: hidden; }
.month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 700; }
.month-nav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); }
.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.time-slot { padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); font-size: 0.85rem; font-weight: 600; text-align: center; }
.time-slot.selected { background: var(--accent-strong); color: var(--on-accent); border-color: transparent; }
.time-slot:not(.selected):hover { border-color: var(--accent); }
.confirm-panel { text-align: center; padding: 40px 10px; }
.confirm-icon { width: 74px; height: 74px; margin: 0 auto 20px; }

.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Apply — multi-step
   ========================================================================== */
.stepper { display: flex; justify-content: space-between; margin-bottom: 44px; counter-reset: step; }
.stepper .step { flex: 1; text-align: center; position: relative; }
.stepper .step::before {
  counter-increment: step; content: counter(step);
  width: 34px; height: 34px; line-height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--line-strong);
  font-weight: 700; font-size: 0.9rem; margin-bottom: 8px;
  transition: all .3s ease;
}
.stepper .step span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.stepper .step::after {
  content: ""; position: absolute; top: 17px; left: 50%; width: 100%; height: 2px;
  background: var(--line-strong); z-index: -1;
}
.stepper .step:last-child::after { display: none; }
.stepper .step.active::before { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.stepper .step.active span { color: var(--ink); }
.stepper .step.done::before { background: var(--indigo-500); border-color: var(--indigo-500); color: #fff; content: "✓"; }
.stepper .step.done::after { background: var(--indigo-500); }

.form-step { display: none; animation: fadeIn .4s var(--ease); }
.form-step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.step-actions { display: flex; justify-content: space-between; margin-top: 30px; gap: 12px; }
.review-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
.review-block h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 10px; }
.review-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.92rem; }
.review-row span:first-child { color: var(--ink-soft); }
.review-row span:last-child { font-weight: 600; }

/* ==========================================================================
   Unit detail modal — left rail + tabbed content, own components only
   (no native <dialog> chrome, no OS date/zoom controls).
   ========================================================================== */
.unit-modal { position: fixed; inset: 0; z-index: 500; display: none; }
.unit-modal.open { display: block; }
.unit-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 15, 10, 0.55); backdrop-filter: blur(2px); }
.unit-modal-dialog {
  position: relative;
  max-width: 920px;
  width: min(92vw, 920px);
  max-height: 86vh;
  margin: 7vh auto 0;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: umIn .28s var(--ease);
}
@keyframes umIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.unit-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  transition: background .2s ease;
}
.unit-modal-close:hover { background: var(--surface-tint); }
.unit-modal-body { display: flex; overflow: hidden; flex: 1; min-height: 0; }
.unit-modal-rail {
  width: 260px; flex-shrink: 0;
  padding: 34px 24px;
  background: var(--sand-900);
  color: var(--sand-50);
  overflow-y: auto;
}
.unit-modal-rail .um-unit-number { font-family: var(--font-display); font-size: 2.4rem; font-style: italic; line-height: 1; }
.unit-modal-rail .um-plan-name { font-size: 0.95rem; color: var(--sand-200); margin: 6px 0 18px; }
.unit-modal-rail dl { margin: 0 0 24px; }
.unit-modal-rail dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sea-oat); margin-top: 12px; }
.unit-modal-rail dd { margin: 2px 0 0; font-size: 0.95rem; }
.unit-modal-rail .btn { width: 100%; margin-top: 8px; }
.unit-modal-content { flex: 1; min-width: 0; overflow-y: auto; padding: 30px 32px; }
.unit-modal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-strong); margin-bottom: 22px; flex-wrap: wrap; }
.um-tab { padding: 10px 16px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.um-tab.active { color: var(--ink); border-bottom-color: var(--accent-strong); }
.um-panel { display: none; }
.um-panel.active { display: block; }

.lease-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 22px; }
.lease-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
  transition: border-color .2s ease, background .2s ease;
}
.lease-card .lease-term { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.lease-card .lease-price { font-family: var(--font-display); font-size: 1.4rem; margin: 6px 0 2px; }
.lease-card .lease-note { font-size: 0.7rem; color: var(--ink-soft); }
.lease-card.selected { border-color: var(--accent-strong); background: var(--surface-tint); }
.lease-card.selected .lease-term { color: var(--accent-strong); font-weight: 700; }
.lease-addons { display: grid; gap: 8px; }
.lease-addon-row { display: flex; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.88rem; }
.lease-addon-row span:last-child { color: var(--accent-strong); font-weight: 600; }

.um-map-frame { position: relative; border: 1px solid var(--line); overflow: hidden; background: var(--sand-100); }
.um-map-frame svg { width: 100%; height: auto; display: block; transition: transform .3s var(--ease); transform-origin: center; }
.um-map-controls { display: flex; gap: 8px; margin-top: 12px; }

.um-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .um-gallery-grid { grid-template-columns: 1fr; } }

@media (max-width: 760px) {
  /* Below this width the rail (unit specs + CTAs) and the tabbed content
     stack instead of sitting side-by-side, but .unit-modal-body/-rail/-content
     each keep their own independent overflow:auto from the desktop layout.
     That splits one modal into two separately-scrolling panes: the rail
     claims its full natural height (~600px of specs+buttons) and the tab
     content gets squeezed into whatever's left, often under 200px, so you're
     stuck scrolling a tiny cramped window instead of the whole card. Let the
     dialog itself be the one scroll container so it reads as a single
     continuous page. */
  .unit-modal-dialog { margin-top: 0; max-height: 100vh; height: 100vh; width: 100vw; border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .unit-modal-body { flex-direction: column; overflow: visible; }
  .unit-modal-rail { width: 100%; padding: 26px 20px; overflow-y: visible; flex: none; }
  .unit-modal-content { padding: 24px 20px; overflow-y: visible; flex: none; }
}

/* ==========================================================================
   Residents teaser
   ========================================================================== */
.portal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 44px);
  position: relative;
  overflow: hidden;
}
.portal-card .soon-badge {
  position: absolute; top: 20px; right: 20px;
  background: var(--shell); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill);
}
.portal-card fieldset { border: none; padding: 0; margin: 0; opacity: 0.55; pointer-events: none; }
.portal-feature-list { display: grid; gap: 16px; margin-top: 24px; }
.portal-feature { display: flex; gap: 14px; align-items: flex-start; }
.portal-feature .icn {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--surface-tint); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--accent-strong);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--sand-900); color: rgba(248, 243, 234, 0.82); padding: var(--space-7) 0 28px; }
.footer-motto-mark { width: 30px; height: 1px; background: var(--sea-oat); margin-bottom: 18px; }
.footer-motto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: var(--sand-100);
  max-width: 46ch;
  margin-bottom: var(--space-6);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr 0.8fr; gap: 32px; margin-bottom: var(--space-5); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--sand-100); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-body); margin-bottom: 16px; }
.site-footer .brand { color: var(--sand-50); }
.site-footer ul { display: grid; gap: 10px; }
.site-footer a { font-size: 0.92rem; transition: color .2s ease; }
.site-footer a:hover { color: var(--sand-200); }
.footer-mark { color: rgba(248, 243, 234, 0.18); margin: var(--space-4) 0; height: 16px; }
.footer-mark svg { width: 100%; height: 100%; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 24px; border-top: 1px solid rgba(248, 243, 234, 0.14);
  font-size: 0.8rem; color: rgba(248, 243, 234, 0.5);
}
.footer-bottom a { color: rgba(248, 243, 234, 0.6); }

/* ==========================================================================
   Utilities / scroll reveal / misc
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.stat-strip { display: flex; flex-wrap: wrap; gap: clamp(24px, 6vw, 64px); justify-content: center; }
.stat-strip div { text-align: center; }
.stat-strip strong { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); }
.stat-strip span { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.page-hero {
  padding: clamp(64px, 9vw, 96px) 0 clamp(40px, 6vw, 64px);
  background: var(--sand-900);
  color: var(--sand-50);
}
.page-hero p { color: rgba(250, 247, 241, 0.78); max-width: 60ch; }
/* For a page-hero paragraph written as a stylized continuation of the
   headline (short, punchy declarative statements) rather than ordinary
   explanatory copy — let it use the width the headline already claimed. */
.page-hero p.lede-wide { max-width: 78ch; font-size: var(--step-1); }
.breadcrumb { font-size: 0.8rem; color: rgba(250,247,241,0.55); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--sand-100); }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--accent-strong); color: var(--on-accent); padding: 12px 20px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

::selection { background: var(--sand-300); color: var(--indigo-900); }