/* ==========================================================================
   SYMPHONY & ENCORE — Design System
   --------------------------------------------------------------------------
   Branded per "Symphony_Encore Brand Identity.pdf":
     Palette   — Mahogany #341114 (primary) · Brass #6C461F · Dusty Taupe
                 #A08372 · Olive #4D5625 · Fresh Chartreuse #C2CF4B (accent)
                 · Cream #F4F2ED
     Type      — TAN Fairview Display (hero moments, use sparingly, caps only)
                 · Barlow Condensed (headings + body)
                 (Brand heading font TT Knickerbockers Grotesk is commercial /
                 not in the asset kit; Barlow Condensed stands in.)
     Patterns  — assets/patterns/*.svg (chartreuse key motif)
   ========================================================================== */

@font-face {
  font-family: "TAN Fairview";
  src: url("../assets/fonts/TanFairview.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fonts/BarlowCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fonts/BarlowCondensed-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fonts/BarlowCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Brand color tokens */
  --ink: #341114;            /* Mahogany — primary text / dark surfaces */
  --paper: #f4f2ed;          /* Cream — page background */
  --paper-deep: #eae6dc;     /* deeper cream for alternate sections */
  --line: #d9d0c3;           /* hairline rules */
  --gold: #6c461f;           /* Brass — warm accent on light surfaces */
  --gold-soft: #c2cf4b;      /* Fresh Chartreuse — accent on dark surfaces */
  --chartreuse: #c2cf4b;
  --taupe: #a08372;          /* Dusty Taupe — secondary */
  --symphony: #4d5625;       /* Olive — Symphony (Phase One) identity */
  --symphony-soft: #a08372;
  --encore: #6c461f;         /* Brass — Encore (Phase Two) identity */
  --encore-soft: #a08372;
  --white: #fbfaf5;

  /* Type tokens */
  --font-display: "TAN Fairview", Georgia, "Times New Roman", serif;
  --font-body: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad: clamp(3.5rem, 9vw, 8rem);
  --radius: 2px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 112.5%; } /* 18px root: scales every rem-based size ~12% */

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.125rem; /* Barlow Condensed runs narrow; size up for readability */
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* TAN Fairview is a caps-only display face — reserve it for hero moments
   and section statements, always uppercase, generous line-height. */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* Structured sub-headlines use Barlow Condensed (brand heading role) */
h3 {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.wrap { max-width: 1320px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: var(--gold); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  font-size: 0.84rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--light { border-color: var(--paper); color: var(--paper); }
.btn--light:hover { background: var(--paper); color: var(--ink); }
.btn--gold { border-color: var(--chartreuse); background: var(--chartreuse); color: var(--ink); }
.btn--gold:hover { background: transparent; color: inherit; }

.text-link {
  font-size: 0.84rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.35rem;
  transition: color 0.2s;
}
.text-link:hover { color: var(--gold); }

/* ---- Announcement bar --------------------------------------------------- */
.announce {
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9rem;
  position: relative;
  z-index: 60;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.7rem var(--gutter);
  flex-wrap: wrap;
  text-align: center;
}
.announce__inner strong { color: var(--gold-soft); font-weight: 600; }
.announce__cta { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 0.4rem 0.15rem; margin: -0.4rem 0; }
.announce__close {
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.7;
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.announce__close:hover { opacity: 1; }
.announce.is-hidden { display: none; }

/* ---- Accessibility helpers ---------------------------------------------- */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem;
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 1rem; outline: 2px solid var(--chartreuse); outline-offset: 2px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.cta-banner :focus-visible, .site-footer :focus-visible, .nav-overlay :focus-visible,
.lightbox :focus-visible, .fp-modal :focus-visible, .announce :focus-visible, .hero :focus-visible {
  outline-color: var(--chartreuse);
}
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
body.is-locked { overflow: hidden; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.9rem var(--gutter);
  max-width: 1440px;
  margin: 0 auto;
}
.brand { text-decoration: none; display: flex; align-items: center; }
.brand__img { height: clamp(3rem, 5vw, 3.9rem); width: auto; display: block; }
.site-footer .brand__img { height: 4.2rem; }
.site-nav { display: flex; gap: 2.2rem; }
.site-nav a {
  font-size: 0.84rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.site-nav a:hover, .site-nav a.is-active { border-bottom-color: var(--gold); color: var(--gold); }
.site-header__cta { flex-shrink: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}
.nav-toggle span { width: 26px; height: 2px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; }

/* Mobile overlay nav */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--paper);
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0s linear 0.35s; /* hide after the fade-out */
}
.nav-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.35s, visibility 0s; }
.nav-overlay__close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  font-size: 2rem;
  color: var(--paper);
}
.nav-overlay nav { display: flex; flex-direction: column; gap: 1.4rem; }
.nav-overlay nav a {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-overlay nav a:hover { color: var(--gold-soft); }
.nav-overlay__meta { margin-top: 3rem; font-size: 0.85rem; opacity: 0.75; line-height: 2; }

@media (max-width: 900px) {
  .site-nav, .site-header__cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ---- Placeholder imagery ------------------------------------------------
   .ph-img stands in for photography. Replace with real images by adding
   a background-image (or an <img>) and removing the label markup.        */
.ph-img {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ph, var(--symphony)) 88%, black) 0%, var(--ph, var(--symphony)) 55%, color-mix(in srgb, var(--ph, var(--symphony)) 60%, white) 130%);
  display: flex;
  align-items: flex-end;
  min-height: 240px;
}
.ph-img::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Raster tile (downscaled from brand PNG) — the full SVG pattern is too
     heavy to rasterize as a repeated background. */
  background: url("../assets/patterns/pattern-combo-tile.png") 0 0 / 420px auto repeat;
  opacity: 0.16;
}
.ph-img__label {
  position: relative;
  z-index: 1;
  color: rgba(255, 253, 249, 0.85);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 1.1rem 1.3rem;
}
/* Once a real photo loads into a slot, hide the placeholder dressing */
.ph-img.has-photo { background-size: cover; background-position: center; }
.ph-img.has-photo::after { display: none; }
.ph-img.has-photo .ph-img__label { display: none; }

/* ---- Hero (split-phase) -------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(86vh, 900px);
  background: var(--ink);
}
.hero__panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: var(--white);
  overflow: hidden;
  transition: filter 0.4s;
}
.hero__panel .ph-img { position: absolute; inset: 0; min-height: 0; transition: transform 0.8s ease; }
.hero__panel:hover .ph-img { transform: scale(1.04); }
.hero__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(38, 12, 15, 0.78) 0%, rgba(38, 12, 15, 0.38) 50%, rgba(38, 12, 15, 0.22) 100%),
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(38, 12, 15, 0.45) 0%, rgba(38, 12, 15, 0) 100%);
}
.hero__panel-content { position: relative; z-index: 2; padding: 2.5rem; width: 100%; }
.hero__phase-tag {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.8);
  display: block;
  margin-bottom: 0.6rem;
}
.hero__phase-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.7rem, 3.6vw, 2.7rem); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.hero__phase-cta {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 0.3rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.hero__panel:hover .hero__phase-cta { opacity: 1; transform: none; }
.hero__center {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  color: var(--white);
  padding: var(--gutter);
}
.hero__center > * { pointer-events: auto; }
.hero__kicker {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.6);
  margin-bottom: 1.2rem;
}
.hero__title {
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  max-width: 18ch;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero__title em { font-style: normal; color: var(--gold-soft); }
.hero__actions { display: flex; gap: 1.5rem; margin-top: 2.2rem; flex-wrap: wrap; justify-content: center; }
/* Equal-width pair so the gap between them sits exactly on the hero's center seam */
.hero__actions .btn { min-width: 220px; justify-content: center; }
.hero__divider {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 253, 249, 0.28);
  z-index: 2;
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__panel { min-height: 56vh; }
  .hero__divider { display: none; }
  .hero__center { position: static; background: var(--ink); padding: 3.5rem var(--gutter); }
}

/* ---- Section scaffolding ------------------------------------------------- */
.section { padding: var(--section-pad) 0; }
.section--deep { background: var(--paper-deep); }
.section--dark { background: var(--ink); color: var(--paper); }
.section-head { max-width: 640px; margin-bottom: clamp(2rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin-bottom: 1.1rem; }
.section-head p { color: color-mix(in srgb, currentColor 72%, transparent); }

/* ---- Home: two-phase intro ---------------------------------------------- */
.phases { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.phase-card {
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}
.phase-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -30px rgba(33, 31, 26, 0.45); }
.phase-card .ph-img { aspect-ratio: 16 / 10; }
.phase-card__body { padding: 1.8rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
.phase-card__tag { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; }
.phase-card__tag--symphony { color: var(--symphony); }
.phase-card__tag--encore { color: var(--encore); }
.phase-card h3 { font-size: 1.5rem; }
.phase-card p { font-size: 1.02rem; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.phase-card__link { margin-top: auto; padding-top: 1.2rem; }
@media (max-width: 760px) { .phases { grid-template-columns: 1fr; } }

/* ---- Home: callout tiles -------------------------------------------------- */
.callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.callout {
  position: relative;
  text-decoration: none;
  color: var(--white);
  min-height: 420px;
  display: flex;
  overflow: hidden;
}
.callout .ph-img { position: absolute; inset: 0; min-height: 0; transition: transform 0.7s ease; }
.callout:hover .ph-img { transform: scale(1.05); }
.callout::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(38,12,15,0.78), rgba(38,12,15,0.05) 60%); }
.callout__body { position: relative; z-index: 1; margin-top: auto; padding: 1.8rem; }
.callout__label { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-soft); display: block; margin-bottom: 0.5rem; }
.callout__title { display: block; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.45rem; margin-bottom: 0.4rem; }
.callout__hint { display: block; font-size: 0.84rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
@media (max-width: 900px) { .callouts { grid-template-columns: 1fr; } .callout { min-height: 320px; } }

/* ---- Stats strip ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem); color: var(--chartreuse); }
.stat__label { font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; margin-top: 0.4rem; opacity: 0.8; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- Page hero (interior pages) ------------------------------------------ */
.page-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 0; }
.page-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); max-width: 22ch; }
.page-hero__lede { max-width: 560px; margin-top: 1.2rem; color: color-mix(in srgb, var(--ink) 72%, transparent); }

/* ---- Floorplans ------------------------------------------------------------ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-end;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 2.5rem 0;
}
.filter-group { display: flex; flex-direction: column; gap: 0.55rem; }
.filter-group__label { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.seg { display: inline-flex; border: 1px solid var(--line); background: var(--white); }
.seg button {
  padding: 0.6rem 1.15rem;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-right: 1px solid var(--line);
  transition: background 0.2s, color 0.2s;
}
.seg button:last-child { border-right: 0; }
.seg button.is-on { background: var(--ink); color: var(--paper); }
.seg button.is-on[data-phase="symphony"] { background: var(--symphony); }
.seg button.is-on[data-phase="encore"] { background: var(--encore); }
.filters__count { margin-left: auto; font-size: 0.82rem; opacity: 0.7; }

.fp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1020px) { .fp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fp-grid { grid-template-columns: 1fr; } }
.fp-card { border: 1px solid var(--line); background: var(--white); display: flex; flex-direction: column; }
.fp-card__diagram { background: var(--paper-deep); padding: 1.4rem; display: flex; justify-content: center; }
.fp-card__diagram svg { width: 100%; max-width: 260px; height: auto; }
.fp-card__body { padding: 1.4rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.fp-card__phase { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; }
.fp-card__phase--symphony { color: var(--symphony); }
.fp-card__phase--encore { color: var(--encore); }
.fp-card__name { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.35rem; }
.fp-card__meta { font-size: 0.95rem; color: color-mix(in srgb, var(--ink) 65%, transparent); }
.fp-card__price { font-size: 0.95rem; margin-top: 0.3rem; }
.fp-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1.1rem; }
.fp-card__avail { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.fp-empty { padding: 4rem 0; text-align: center; opacity: 0.7; display: none; }

/* ---- Floorplan viewer modal ------------------------------------------------ */
.fp-modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.fp-modal[hidden] { display: none; }
.fp-modal__backdrop { position: absolute; inset: 0; background: rgba(38, 12, 15, 0.92); }
.fp-modal__box {
  position: relative;
  width: min(1100px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7);
}
.fp-modal__stage { margin: 0; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fp-modal__stage img { max-width: 100%; max-height: 66vh; width: auto; height: auto; display: block; }
.fp-modal__info {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.2rem 1.6rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.fp-modal__name { font-size: 1.4rem; margin: 0.2rem 0; }
.fp-modal__meta { font-size: 0.95rem; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.fp-modal__actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.fp-modal__close, .fp-modal__prev, .fp-modal__next {
  position: absolute; z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-size: 1.4rem; line-height: 1;
  box-shadow: var(--shadow-2);
  transition: background 0.2s, color 0.2s;
}
.fp-modal__close:hover, .fp-modal__prev:hover, .fp-modal__next:hover { background: var(--chartreuse); color: var(--ink); }
.fp-modal__close { top: -14px; right: -14px; }
.fp-modal__prev { left: -14px; top: 40%; }
.fp-modal__next { right: -14px; top: 40%; }
@media (max-width: 640px) {
  .fp-modal { padding: 0.75rem; }
  .fp-modal__close { top: -10px; right: -6px; }
  .fp-modal__prev { left: -6px; } .fp-modal__next { right: -6px; }
  .fp-modal__stage img { max-height: 55vh; }
}

/* ---- Amenities -------------------------------------------------------------- */
.amenity-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 2rem 0 0;
}
.amenity-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 0.5rem 1rem;
  transition: background 0.2s, color 0.2s;
}
.amenity-nav a:hover { background: var(--ink); color: var(--paper); }
.amenity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: var(--section-pad) 0;
  border-bottom: 1px solid var(--line);
}
.amenity:last-of-type { border-bottom: 0; }
.amenity:nth-of-type(even) .amenity__media { order: 2; }
.amenity__media .ph-img { aspect-ratio: 4 / 3; }
.amenity__index { font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: var(--gold); font-size: 0.85rem; display: block; margin-bottom: 0.8rem; }
.amenity h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 0.5rem; }
.amenity__sub { font-size: 1.02rem; color: color-mix(in srgb, var(--ink) 70%, transparent); margin-bottom: 1.4rem; }
.amenity__features { display: flex; flex-direction: column; gap: 0.55rem; }
.amenity__features li { display: flex; gap: 0.8rem; align-items: baseline; font-size: 1.02rem; }
.amenity__features li::before { content: "—"; color: var(--gold); }
.amenity__phase-note { margin-top: 1.4rem; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; }
@media (max-width: 820px) {
  .amenity { grid-template-columns: 1fr; }
  .amenity:nth-of-type(even) .amenity__media { order: 0; }
}

/* ---- Gallery ------------------------------------------------------------------ */
.tabs { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 2.4rem 0; }
.tabs button {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 0.6rem 1.3rem;
  transition: background 0.2s, color 0.2s;
}
.tabs button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Flush mosaic: zero gutters and mixed tile sizes, but locked to an
   aligned grid — depth (lift + shadow) appears on hover only. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  gap: 0;
  padding: 1.5rem 0;
}
.gallery-grid figure {
  cursor: zoom-in;
  margin: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-grid figure:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.gallery-grid figure:nth-child(6n + 4) { grid-row: span 2; }
.gallery-grid .ph-img { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
.gallery-grid figure:hover {
  z-index: 3;
  transform: scale(1.045);
  box-shadow: 0 24px 50px -18px rgba(38, 12, 15, 0.55);
}
.gallery-grid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.1rem 0.85rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--white);
  background: linear-gradient(to top, rgba(38, 12, 15, 0.78), transparent);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.gallery-grid figure:hover figcaption { opacity: 1; }
.gallery-grid figure.is-hidden { display: none; }
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-auto-rows: 150px; }
  .gallery-grid figure:hover { transform: scale(1.02); }
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(38, 12, 15, 0.94);
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.lightbox.is-open { display: flex; }
.lightbox__stage { width: min(1000px, 90vw); }
.lightbox__stage .ph-img { aspect-ratio: 16 / 10; min-height: 0; }
.lightbox__caption { color: var(--paper); text-align: center; padding-top: 1rem; font-size: 0.85rem; opacity: 0.8; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  color: var(--paper);
  font-size: 1.9rem;
  padding: 0.8rem;
  opacity: 0.75;
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { opacity: 1; }
.lightbox__close { top: 1.2rem; right: 1.4rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }

.gallery-grid figure:focus-visible { outline: 3px solid var(--chartreuse); outline-offset: -3px; }

/* ---- Neighborhood ---------------------------------------------------------------- */
.hood-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.hood-layout > * { min-width: 0; }
@media (max-width: 900px) { .hood-layout { grid-template-columns: 1fr; } }
.poi-list { display: flex; flex-direction: column; }
.poi {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.poi.is-hidden { display: none; }
/* Rows linked to a map pin */
.poi--linked { cursor: pointer; padding-left: 0.6rem; padding-right: 0.6rem; margin: 0 -0.6rem; transition: background 0.2s; }
.poi--linked:hover { background: var(--paper-deep); }
.poi--linked:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.poi--linked.is-active { background: var(--ink); color: var(--paper); }
.poi--linked.is-active .poi__dist { color: var(--chartreuse); }
.poi__note { display: block; font-size: 0.82rem; color: var(--gold); margin-top: 0.15rem; }
.poi--linked.is-active .poi__note { color: var(--chartreuse); }
.poi--linked::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--chartreuse); flex-shrink: 0; margin-left: 0.4rem; opacity: 0; transition: opacity 0.2s; order: -1; }
.poi--linked:hover::after, .poi--linked.is-active::after { opacity: 1; }
.poi--linked .poi__name { margin-right: auto; }

.poi__name { font-size: 1rem; min-width: 0; }
.poi__dist { font-size: 0.84rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); font-weight: 500; white-space: nowrap; text-align: right; }
@media (max-width: 560px) { .poi { gap: 0.9rem; } .poi__dist { white-space: normal; max-width: 38%; } }
.map-panel { position: sticky; top: 90px; }
.map-panel .ph-img { aspect-ratio: 4 / 4.6; }

/* Interactive neighborhood map (Leaflet) */
#hood-map {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 4.6;
  min-height: 480px;
  border: 1px solid var(--line);
  background: var(--paper-deep);
  z-index: 0; /* keep below the sticky header */
}
#hood-map .maplibregl-ctrl-group { background: var(--paper); border-radius: 2px; box-shadow: var(--shadow-1); border: 1px solid var(--line); }
#hood-map .maplibregl-ctrl-group button { color: var(--ink); }
#hood-map .maplibregl-ctrl-group button:hover { background: var(--chartreuse); }
#hood-map .maplibregl-ctrl-attrib { background: rgba(244, 242, 237, 0.85); color: rgba(52, 17, 20, 0.6); font-family: var(--font-body); font-size: 0.7rem; }
#hood-map .maplibregl-ctrl-attrib a { color: rgba(52, 17, 20, 0.75); }
#hood-map .maplibregl-popup-content { background: var(--ink); color: var(--paper); border-radius: 2px; box-shadow: var(--shadow-3); font-family: var(--font-body); font-size: 0.95rem; padding: 0.7rem 1rem; }
#hood-map .maplibregl-popup-tip { border-top-color: var(--ink); border-bottom-color: var(--ink); }
#hood-map .maplibregl-canvas { outline: none; }
.map-pin {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--ink);
  border: 2.5px solid var(--chartreuse);
  box-shadow: 0 1px 6px rgba(33, 17, 20, 0.45);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}
.map-pin.is-hover { transform: scale(1.35); }
.map-pin.is-active { transform: scale(1.7); background: var(--chartreuse); border-color: var(--ink); box-shadow: 0 0 0 6px rgba(194, 207, 75, 0.3), 0 2px 10px rgba(33, 17, 20, 0.5); }
.map-pin--building {
  --pin: var(--ink);
  width: 34px; height: 34px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--pin);
  display: flex; align-items: center; justify-content: center;
}
.map-pin--building span {
  transform: rotate(45deg);
  color: var(--chartreuse);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
}
.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.score { border: 1px solid var(--line); background: var(--white); padding: 1.4rem; text-align: center; }
.score__num { font-family: var(--font-display); font-size: 2.6rem; color: var(--gold); }
.score__label { font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; margin-top: 0.3rem; opacity: 0.75; }

/* ---- Forms -------------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-card { border-top: 1px solid var(--line); padding: 1.4rem 0; }
.contact-card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.contact-card p { font-size: 1.02rem; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.contact-card a { text-decoration: none; border-bottom: 1px solid var(--gold); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.field input, .field textarea, .field select {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 0.85rem 1rem;
  color: var(--ink);
  border-radius: var(--radius);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.form__error { margin-top: 0.8rem; font-size: 0.9rem; color: #8a2a2a; }
.form__confirm {
  display: none;
  grid-column: 1 / -1;
  border: 1px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, var(--white));
  padding: 2rem;
  text-align: center;
}
.form__confirm h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.form.is-sent .form__confirm { display: block; }
.form.is-sent .field, .form.is-sent .form__submit { display: none; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* ---- Tour inquiry context (prefilled from a floorplan card) ---- */
.tour-context[hidden] { display: none; }
.tour-context {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem;
  border-left: 3px solid var(--chartreuse);
  background: var(--white);
  padding: 1rem 1.3rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-1);
}
.tour-context__label { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.tour-context__plan { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.1rem; }
.tour-context__meta { color: color-mix(in srgb, var(--ink) 70%, transparent); font-size: 0.95rem; }
.tour-context__change { margin-left: auto; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--gold); }

/* ---- Pre-footer CTA ------------------------------------------------------------------ */
.cta-banner { background: var(--ink); color: var(--paper); text-align: center; padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
/* Home: stats row lives inside the CTA band instead of a separate section */
.cta-banner--with-stats .stats { margin-bottom: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid rgba(244, 242, 237, 0.14); }
.cta-banner h2 { font-size: clamp(1.4rem, 3.4vw, 2.7rem); max-width: none; white-space: nowrap; margin: 0 auto 2rem; }
@media (max-width: 560px) { .cta-banner h2 { white-space: normal; font-size: 1.6rem; } }
.cta-banner h2 em { font-style: normal; color: var(--gold-soft); }
.cta-banner__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---- Footer ---------------------------------------------------------------------------- */
.site-footer { background: #a08372; /* Soft tan (matches --symphony-soft / --encore-soft) */ color: color-mix(in srgb, var(--paper) 82%, transparent); font-size: 0.95rem; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 2.5rem;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__marketed { justify-self: start; text-align: left; align-items: flex-start; } }
@media (max-width: 540px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-size: 0.76rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.1rem; }
.site-footer ul { display: flex; flex-direction: column; gap: 0.1rem; }
.site-footer a { text-decoration: none; opacity: 0.85; }
.site-footer ul a, .site-footer__legal a, .site-footer p a { display: inline-block; padding: 0.4rem 0; }
.site-footer a:hover { opacity: 1; color: var(--gold-soft); }

/* "Exclusively marketed by" — The Home Edition / Compass, far-right column
   opposite the Symphony & Encore wordmark, logo sized to match it */
.site-footer__marketed {
  justify-self: end;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.9rem;
}
.site-footer__marketed-label {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--chartreuse);
  font-weight: 600;
  white-space: nowrap;
}
.site-footer__marketed-logo { height: 4.2rem; width: auto; opacity: 0.95; }
.site-footer__legal {
  border-top: 1px solid rgba(244, 242, 237, 0.12);
  padding: 1.4rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
  opacity: 0.65;
}

/* ---- Reveal-on-scroll -------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   DEPTH SYSTEM — a consistent sense of layers throughout the site.
   Three elevation levels, all tinted with the brand mahogany so shadows
   read as warm and physical rather than gray. Later rules intentionally
   override the flat defaults above.
   ========================================================================== */
:root {
  --shadow-1: 0 1px 2px rgba(38, 12, 15, 0.06), 0 6px 16px -8px rgba(38, 12, 15, 0.18);
  --shadow-2: 0 2px 4px rgba(38, 12, 15, 0.06), 0 18px 36px -16px rgba(38, 12, 15, 0.32);
  --shadow-3: 0 4px 8px rgba(38, 12, 15, 0.08), 0 32px 60px -20px rgba(38, 12, 15, 0.45);
  --lift: translateY(-6px);
}

/* ---- Header lifts off the page once you scroll ---- */
.site-header { transition: box-shadow 0.3s; }
.site-header.is-scrolled { box-shadow: 0 12px 32px -20px rgba(38, 12, 15, 0.45); }

/* ---- Buttons: raised, and they press ---- */
.btn { transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.2s; }
.btn--gold, .btn--solid { box-shadow: var(--shadow-1); }
.btn--gold:hover, .btn--solid:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn--gold:active, .btn--solid:active { transform: translateY(0); box-shadow: var(--shadow-1); }

/* ---- Hero: parallax layers + inner vignette for depth ---- */
.hero__panel .ph-img { will-change: transform; transform: scale(1.08); transition: none; }
.hero__panel:hover .ph-img { transform: scale(1.08); }
.hero__panel::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  box-shadow: inset 0 0 120px rgba(38, 12, 15, 0.35);
  pointer-events: none;
}
.hero__center .btn { box-shadow: var(--shadow-2); }

/* ---- Cards sit on the page at rest, rise on hover ---- */
.phase-card, .fp-card, .contact-card-raised, .score {
  box-shadow: var(--shadow-1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.phase-card:hover, .fp-card:hover { transform: var(--lift); box-shadow: var(--shadow-3); }
.callout { box-shadow: var(--shadow-2); transition: transform 0.3s, box-shadow 0.3s; }
.callout:hover { transform: var(--lift); box-shadow: var(--shadow-3); }

/* ---- Floorplan sheets read as paper laid on the card ---- */
.fp-card__diagram { padding: 1.4rem; }
.fp-card__diagram img { box-shadow: 0 1px 2px rgba(38,12,15,0.08), 0 14px 28px -14px rgba(38,12,15,0.4); background: #fff; }
.fp-card:hover .fp-card__diagram img { box-shadow: 0 2px 4px rgba(38,12,15,0.08), 0 22px 40px -16px rgba(38,12,15,0.5); }

/* ---- Alternate sections recess slightly (inner top shadow) ---- */
.section--deep { box-shadow: inset 0 14px 24px -20px rgba(38, 12, 15, 0.25); }

/* ---- Forms: fields are inset, the form block is raised ---- */
.form {
  background: var(--white);
  padding: 2rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.field input, .field textarea, .field select {
  box-shadow: inset 0 2px 4px rgba(38, 12, 15, 0.06);
  background: var(--paper);
}
.field input:focus, .field textarea:focus, .field select:focus { background: var(--white); }

/* ---- Contact info + map + scores as raised pieces ---- */
.contact-card { background: var(--white); border: 1px solid var(--line); padding: 1.4rem 1.6rem; margin-bottom: 1rem; box-shadow: var(--shadow-1); }
#hood-map { box-shadow: var(--shadow-2); }
.score { border: 1px solid var(--line); }

/* ---- Lightbox stage floats ---- */
.lightbox__stage .ph-img { box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7); }

/* ---- Scroll reveal gains a little scale so content settles into place ---- */
.reveal { transform: translateY(24px) scale(0.985); }
.reveal.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__panel .ph-img { transform: none !important; }
  .reveal { transform: none; }
}