/* =========================================================================
   Watersound Origins Crossings — concept site
   -------------------------------------------------------------------------
   Palette is pulled directly out of their real logo file rather than
   invented: the wordmark is #5a2049 (plum) and the longleaf pine is
   #b4cd95 (sage). Their live site barely uses either one, defaulting to
   white with grey text, which is why it reads as a template. Leaning all
   the way into the two colours they already own is most of what makes this
   look like a different company.

   Type: Source Serif 4 / Source Sans 3 stand in for the licensed
   expo-serif-pro and freight-sans-pro their site loads from Adobe Fonts.
   Same families in spirit (Adobe transitional serif + humanist sans), and
   they're on Google Fonts so this build has no licence problem.
   ========================================================================= */

:root {
  --plum-900: #2e0f24;
  --plum-800: #431833;
  --plum-700: #5a2049; /* brand primary, sampled from the logo */
  --plum-600: #6f2c5b;
  --plum-500: #8a4174;
  --plum-200: #d9bfd0;
  --plum-050: #f6eef3;

  --sage-700: #6f8f4c;
  --sage-600: #86a763;
  --sage-500: #9dbc7c;
  --sage-400: #b4cd95; /* brand secondary, sampled from the logo */
  --sage-200: #dbe8c9;
  --sage-050: #f2f7ea;

  --sand-900: #2b2622;
  --sand-700: #4f463e;
  --sand-500: #7a6f64;
  --sand-300: #c9bfb2;
  --sand-200: #e5ded4;
  --sand-100: #f2ede5;
  --sand-050: #faf7f1;

  --gulf-600: #3d7f86;
  --gulf-400: #6fa9ae;
  --gulf-100: #ddeceb;

  --white: #fff;

  --font-display: "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(43, 38, 34, .06), 0 2px 8px rgba(43, 38, 34, .05);
  --shadow-md: 0 4px 14px rgba(43, 38, 34, .09), 0 12px 32px rgba(43, 38, 34, .07);
  --shadow-lg: 0 10px 30px rgba(43, 38, 34, .12), 0 30px 70px rgba(43, 38, 34, .10);

  --wrap: 1200px;
  --gutter: 24px;
  --header-h: 76px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--sand-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--plum-800);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--plum-700); text-underline-offset: 3px; }
a:hover { color: var(--plum-500); }

.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 820px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--plum-700); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--sage-600);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Tap targets: without this a real tap on a phone can get eaten as a
   text-selection gesture instead of firing click. */
button, [role="button"], .unit-hit {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; touch-action: manipulation;
}

/* ---------- Eyebrow / section heads --------------------------------- */

.eyebrow {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-700);
  margin: 0 0 .85em;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--sage-400); flex: none;
}
.eyebrow-center { justify-content: center; }

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-tight { padding: clamp(40px, 5vw, 64px) 0; }
.section-plum { background: var(--plum-900); color: var(--sand-100); }
.section-plum h2, .section-plum h3 { color: #fff; }
.section-plum .eyebrow { color: var(--sage-400); }
.section-sand { background: var(--sand-050); }
.section-sage { background: var(--sage-050); }

.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { color: var(--sand-700); font-size: 1.13rem; }
.section-plum .section-head p { color: var(--sand-300); }

.lede { font-size: 1.2rem; color: var(--sand-700); }

/* ---------- Buttons -------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body);
  font-size: .97rem; font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--plum-700); color: #fff; }
.btn-primary:hover { background: var(--plum-600); color: #fff; box-shadow: var(--shadow-md); }

.btn-sage { background: var(--sage-400); color: var(--plum-900); }
.btn-sage:hover { background: var(--sage-500); color: var(--plum-900); }

.btn-outline { border-color: var(--plum-200); color: var(--plum-700); background: transparent; }
.btn-outline:hover { border-color: var(--plum-700); background: var(--plum-050); }

.btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn-light:hover { background: #fff; color: var(--plum-800); }

.btn-sm { padding: 9px 18px; font-size: .9rem; }
.btn-block { width: 100%; }

/* ---------- Header --------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--sand-200);
}
.site-header > .container {
  display: flex; align-items: center; gap: 22px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { height: 34px; width: auto; }
.brand-sub {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand-500); font-weight: 600;
  padding-left: 12px; border-left: 1px solid var(--sand-200);
}

.main-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.main-nav a {
  padding: 9px 14px; border-radius: var(--r-full);
  font-size: .95rem; font-weight: 500; color: var(--sand-700); text-decoration: none;
  transition: background .15s, color .15s;
}
.main-nav a:hover { background: var(--sand-100); color: var(--plum-700); }
.main-nav a.active { color: var(--plum-700); background: var(--plum-050); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.header-phone {
  font-weight: 600; font-size: .95rem; color: var(--plum-700); text-decoration: none;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  width: 42px; height: 42px; border: 1px solid var(--sand-200); background: #fff;
  border-radius: var(--r-sm); position: relative; cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  position: absolute; left: 50%; width: 18px; height: 2px; background: var(--plum-800);
  transform: translateX(-50%); transition: transform .2s, opacity .2s;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { content: ""; top: -6px; left: 0; transform: none; }
.nav-toggle span::after { content: ""; top: 6px; left: 0; transform: none; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Sibling of <header>, not a child: .site-header has backdrop-filter, which
   creates a containing block for fixed descendants, so a nested panel would
   size against the 76px header box instead of the viewport. */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 55;
  background: #fff; padding: 22px var(--gutter) 40px;
  display: none; flex-direction: column; gap: 2px; overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--plum-800); text-decoration: none;
  padding: 13px 0; border-bottom: 1px solid var(--sand-100);
}
.mobile-nav a.active { color: var(--sage-700); }
.mobile-nav .btn { margin-top: 20px; font-family: var(--font-body); font-size: .97rem; }
body.nav-open { overflow: hidden; }

/* ---------- Hero ----------------------------------------------------- */

.hero {
  position: relative;
  background: linear-gradient(155deg, var(--plum-900) 0%, var(--plum-700) 58%, var(--plum-600) 100%);
  color: #fff;
  overflow: hidden;
  padding: clamp(72px, 11vw, 132px) 0 clamp(64px, 9vw, 112px);
}
.hero::after {
  /* Sage wash bottom-right, echoing the pine in the logo. */
  content: ""; position: absolute; right: -12%; bottom: -35%;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(180,205,149,.30) 0%, rgba(180,205,149,0) 68%);
  pointer-events: none;
}

/* Photo hero: the property's own pool photograph behind a plum scrim heavy
   enough to keep white text readable over the bright pool deck. */
.hero-photo::after { content: none; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(46,15,36,.88) 0%, rgba(46,15,36,.72) 45%, rgba(46,15,36,.38) 100%);
}
.hero-footnote {
  margin-top: 14px; font-size: .78rem; color: rgba(255,255,255,.62);
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: .32em; }
.hero h1 em {
  font-style: italic; color: var(--sage-400); font-weight: 400;
}
.hero-lede {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: rgba(255,255,255,.86);
  max-width: 620px; margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin-top: clamp(44px, 6vw, 72px);
  background: rgba(255,255,255,.16); border-radius: var(--r-md); overflow: hidden;
}
.hero-stat { background: var(--plum-800); padding: 22px 24px; }
.hero-stat .n {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 600;
  color: var(--sage-400); display: block; line-height: 1.1;
}
.hero-stat .l {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.72); font-weight: 600; margin-top: 5px; display: block;
}

/* ---------- Concept badge -------------------------------------------- */

.concept-bar {
  background: var(--sage-050);
  border-bottom: 1px solid var(--sage-200);
  font-size: .85rem; color: var(--sand-700);
  padding: 9px 0;
}
.concept-bar .container { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.concept-bar strong { color: var(--plum-700); font-weight: 700; }
.concept-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--plum-700); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--r-full); flex: none;
}

.illustrative {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--sage-700); background: var(--sage-050);
  border: 1px solid var(--sage-200);
  padding: 3px 9px; border-radius: var(--r-full);
}

/* ---------- Amenities ------------------------------------------------ */

.amenity-feature {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--sand-200);
}
.amenity-feature:last-child { border-bottom: 0; }
.amenity-feature:nth-child(even) .amenity-art { order: -1; }
.amenity-feature h3 { margin-bottom: .3em; }
.amenity-feature .lede-sm {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.22rem; color: var(--sage-700); margin-bottom: .7em;
}
.amenity-art {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--sand-100); box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
}
.amenity-art svg, .amenity-art img { width: 100%; height: 100%; display: block; object-fit: cover; }

.amenity-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  gap: 18px;
}
.amenity-card {
  background: #fff; border: 1px solid var(--sand-200); border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.amenity-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--sage-400);
}
.amenity-card .art { aspect-ratio: 16 / 10; background: var(--sand-100); }
.amenity-card .art svg, .amenity-card .art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.amenity-card .body { padding: 18px 20px 22px; }
.amenity-card h4 { margin-bottom: .3em; font-size: 1.14rem; }
.amenity-card p { font-size: .95rem; color: var(--sand-700); margin: 0; }

.cat-head {
  display: flex; align-items: baseline; gap: 14px;
  margin: clamp(34px, 4vw, 52px) 0 20px;
}
.cat-head h3 { margin: 0; white-space: nowrap; }
.cat-head::after { content: ""; flex: 1; height: 1px; background: var(--sand-200); }

/* Interiors */
.interior-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 2px;
  background: var(--sand-200); border: 1px solid var(--sand-200); border-radius: var(--r-md);
  overflow: hidden;
}
.interior-item { background: #fff; padding: 22px 22px 24px; }
.interior-item .ico {
  width: 34px; height: 34px; color: var(--sage-700); margin-bottom: 12px;
}
.interior-item h4 { margin-bottom: .28em; font-size: 1.03rem; }
.interior-item p { font-size: .92rem; color: var(--sand-700); margin: 0; }
.interior-item .note {
  display: inline-block; margin-top: 9px;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--plum-600); background: var(--plum-050); padding: 3px 9px; border-radius: var(--r-full);
}

/* ---------- Floor plans ---------------------------------------------- */

.filter-bar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
  border: 1px solid var(--sand-200); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  box-shadow: var(--shadow-sm);
}
.filter-group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.filter-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sand-500); margin-right: 2px;
}
.chip {
  font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  padding: 7px 15px; border-radius: var(--r-full);
  border: 1.5px solid var(--sand-200); background: #fff; color: var(--sand-700);
  cursor: pointer; transition: all .16s;
}
.chip:hover { border-color: var(--sage-400); color: var(--plum-700); }
.chip.active { background: var(--plum-700); border-color: var(--plum-700); color: #fff; }
.filter-count { margin-left: auto; font-size: .88rem; color: var(--sand-500); font-weight: 600; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.plan-card {
  border: 1px solid var(--sand-200); border-radius: var(--r-md); background: #fff;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.plan-card:hover { box-shadow: var(--shadow-md); border-color: var(--sage-400); transform: translateY(-3px); }
.plan-card.is-hidden { display: none; }
.plan-diagram {
  background: #fff; border-bottom: 1px solid var(--sand-200);
  padding: 16px; aspect-ratio: 1 / 1;
}
.plan-diagram svg, .plan-diagram img { width: 100%; height: 100%; display: block; object-fit: contain; }
.plan-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.plan-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-title h3 { margin: 0; }
.plan-price { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--plum-700); white-space: nowrap; }
.plan-price small { display: block; font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sand-500); }
.plan-specs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px;
}
.spec {
  font-size: .82rem; font-weight: 600; color: var(--sand-700);
  background: var(--sand-100); padding: 4px 11px; border-radius: var(--r-full);
}
.plan-tagline { font-size: .95rem; color: var(--sand-700); margin-bottom: 14px; }
.plan-features { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.plan-features li { font-size: .9rem; color: var(--sand-700); padding-left: 20px; position: relative; }
.plan-features li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--sage-400);
}
.plan-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avail-dot {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .85rem; font-weight: 600; color: var(--sage-700);
}
.avail-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage-600);
}
.avail-dot.none { color: var(--sand-500); }
.avail-dot.none::before { background: var(--sand-300); }

/* Plan diagram rooms */
.room rect { fill: #fff; stroke: var(--plum-200); stroke-width: 1.1; }
.room.wet rect { fill: var(--gulf-100); stroke: var(--gulf-400); }
.room.outdoor rect { fill: var(--sage-050); stroke: var(--sage-400); }
.room text {
  font-family: var(--font-body); font-size: 4.4px; font-weight: 600;
  fill: var(--sand-700); text-anchor: middle; dominant-baseline: middle;
}

/* ---------- Neighborhood: Town Center tenant roster ------------------ */

.tenant-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.tenant-card {
  background: #fff; border: 1px solid var(--sand-200); border-radius: var(--r-md);
  padding: 18px 20px;
}
.tenant-card h4 { margin-bottom: 8px; color: var(--plum-800); }
.tenant-list { list-style: none; margin: 0; padding: 0; }
.tenant-list li {
  font-size: .9rem; color: var(--sand-700); padding: 4px 0;
  border-bottom: 1px solid var(--sand-100);
}
.tenant-list li:last-child { border-bottom: 0; }

/* ---------- Fees & cost estimator ------------------------------------ */

.fee-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}
.fee-card {
  background: #fff; border: 1px solid var(--sand-200); border-radius: var(--r-md);
  padding: 22px 24px;
}
.fee-card h3 { margin-bottom: 10px; }
.cost-card {
  background: var(--sage-050); border: 1px solid var(--sage-200, var(--sand-200));
  border-radius: var(--r-md); padding: 18px 20px; margin-top: 22px;
}

/* ---------- Interactive site map ------------------------------------- */

.map-shell {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px;
  align-items: start;
}
.map-stage {
  position: relative; min-width: 0;
  background: linear-gradient(170deg, var(--sage-050) 0%, var(--sand-050) 100%);
  border: 1px solid var(--sand-200); border-radius: var(--r-md);
  padding: 10px;
  overflow: hidden;
}
.map-stage svg { width: 100%; height: auto; display: block; touch-action: manipulation; }

/* The map is drawn at one SVG unit per real metre, so type on it is sized
   in those same metres. A building is ~28 m deep, which is why these look
   tiny next to normal CSS pixel sizes. */
.bldg-num {
  font-family: var(--font-body); font-size: 7px; font-weight: 700;
  fill: var(--plum-900); text-anchor: middle; pointer-events: none;
}
.bldg-badge { pointer-events: none; }
.unit-hit { cursor: pointer; transition: fill .14s, stroke .14s; }
.unit-hit.dim { opacity: .22; }
.unit-hit.sel { stroke: #fff; stroke-width: 1.4; }

.feat-shape { stroke-width: .7; }
.feat-hit { cursor: pointer; }
.feat-hit:hover .feat-shape, .feat-hit:focus-visible .feat-shape,
.feat-hit.sel .feat-shape { stroke: var(--plum-700); stroke-width: 1.6; }
.feat-tag { pointer-events: none; }
.tag-text {
  font-family: var(--font-body); font-size: 3.4px; font-weight: 700;
  fill: #4a4038; text-anchor: middle; letter-spacing: .04em; pointer-events: none;
}

.road-label {
  font-family: var(--font-body); font-size: 4.4px; font-weight: 600;
  fill: #7a6f64; text-anchor: middle; letter-spacing: .16em; pointer-events: none;
}

.map-note {
  margin-top: 12px; font-size: .84rem; line-height: 1.55; color: var(--sand-600);
}
.map-note + .road-label {
  font-family: var(--font-body); font-size: 4.4px; font-weight: 600;
  fill: #7a6f64; text-anchor: middle; letter-spacing: .16em; pointer-events: none;
}

.map-note { margin-top: 8px; }

.map-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--sand-200);
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--sand-700); }
.legend-swatch { width: 13px; height: 13px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.12); }

.floor-switch { display: inline-flex; background: var(--sand-100); border-radius: var(--r-full); padding: 3px; gap: 2px; }
.floor-switch button {
  border: 0; background: transparent; cursor: pointer; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: .87rem; font-weight: 600; color: var(--sand-700);
  padding: 7px 16px; transition: background .15s, color .15s;
}
.floor-switch button.active { background: var(--plum-700); color: #fff; }

.map-panel {
  background: #fff; border: 1px solid var(--sand-200); border-radius: var(--r-md);
  padding: 20px; position: sticky; top: calc(var(--header-h) + 16px);
  min-width: 0;
}
.map-panel .empty { color: var(--sand-500); font-size: .95rem; }
.panel-unit { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--plum-800); line-height: 1; }
.panel-plan { color: var(--sage-700); font-weight: 600; font-size: 1rem; margin-top: 3px; }
.panel-rows { list-style: none; margin: 16px 0; padding: 0; }
.panel-rows li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--sand-100); font-size: .93rem;
}
.panel-rows li:last-child { border-bottom: 0; }
.panel-rows .k { color: var(--sand-500); }
.panel-rows .v { font-weight: 600; color: var(--sand-900); text-align: right; }
.panel-price {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 600;
  color: var(--plum-700); line-height: 1;
}
.status-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--r-full);
}
.status-tag.open { background: var(--sage-050); color: var(--sage-700); border: 1px solid var(--sage-200); }
.status-tag.taken { background: var(--sand-100); color: var(--sand-500); border: 1px solid var(--sand-200); }

/* ---------- Neighborhood --------------------------------------------- */

.hood-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.hood-card {
  border: 1px solid var(--sand-200); border-radius: var(--r-md); padding: 20px 22px; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.hood-card:hover { border-color: var(--sage-400); box-shadow: var(--shadow-sm); }
.hood-card h4 { margin-bottom: .25em; }
.hood-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sand-500); margin-bottom: 10px;
}
.hood-meta.walk { color: var(--sage-700); }
.hood-card p { font-size: .94rem; color: var(--sand-700); margin: 0; }

/* ---------- Contact -------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .84rem; font-weight: 700; color: var(--sand-700); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 12px 14px; border: 1.5px solid var(--sand-200); border-radius: var(--r-sm);
  background: #fff; color: var(--sand-900);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage-600); outline: none; }
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.info-card { background: var(--sand-050); border: 1px solid var(--sand-200); border-radius: var(--r-md); padding: 24px; }
.info-row { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--sand-200); }
.info-row:last-child { border-bottom: 0; }
.info-row .ico { width: 20px; height: 20px; color: var(--sage-700); flex: none; margin-top: 2px; }
.info-row .k { font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sand-500); }
.info-row .v { font-weight: 600; }

.notice {
  border-left: 3px solid var(--sage-600); background: var(--sage-050);
  padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .93rem; color: var(--sand-700); margin-bottom: 20px;
}
.notice.sent { border-color: var(--plum-700); background: var(--plum-050); }

/* ---------- Footer --------------------------------------------------- */

.site-footer { background: var(--plum-900); color: var(--sand-300); padding: clamp(46px, 6vw, 72px) 0 26px; }
.footer-top { display: grid; grid-template-columns: 1.3fr repeat(2, minmax(0, 1fr)); gap: 32px; }
.site-footer h5 {
  font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sage-400);
  margin: 0 0 14px;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-links a { color: var(--sand-300); text-decoration: none; font-size: .95rem; }
.footer-links a:hover { color: #fff; }
/* width:auto matters here. The <img> carries width="455" height="108"
   attributes, so setting only a height leaves the 455 in play and the
   logo renders squashed to a 14:1 sliver instead of its real 4.2:1. */
.footer-brand img {
  height: 34px; width: auto;
  filter: brightness(0) invert(1); opacity: .92; margin-bottom: 14px;
}
.footer-brand p { font-size: .95rem; color: var(--sand-500); max-width: 34ch; }

.footer-bottom {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;
}
.footer-disclaimer {
  font-size: .82rem; color: var(--sand-500); line-height: 1.6; max-width: 78ch;
}
.footer-disclaimer strong { color: var(--sand-300); }

/* ---------- CTA band -------------------------------------------------- */

.cta-band {
  background: linear-gradient(120deg, var(--plum-800), var(--plum-600));
  border-radius: var(--r-lg); padding: clamp(32px, 5vw, 56px);
  color: #fff; display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin: 0 0 .3em; }
.cta-band p { color: rgba(255,255,255,.82); margin: 0; max-width: 52ch; }

/* ---------- Utilities ------------------------------------------------- */

.stack-sm > * + * { margin-top: 10px; }
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Responsive ------------------------------------------------ */

@media (max-width: 1040px) {
  .map-shell { grid-template-columns: 1fr; }
  .map-panel { position: static; }
}

@media (max-width: 900px) {
  .main-nav, .header-phone { display: none; }
  .nav-toggle { display: block; }
  .amenity-feature { grid-template-columns: 1fr; gap: 20px; }
  .amenity-feature:nth-child(even) .amenity-art { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  :root { --gutter: 18px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .filter-bar { position: static; }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .plan-card:hover, .amenity-card:hover { transform: none; }
}

/* ---------- Neighbourhood map ---------------------------------------- */

/* Drawn at one SVG unit per metre like the site map, so type is sized in
   metres too: the frame is 3.5 km across. */
.hood-road {
  font-family: var(--font-body); font-size: 44px; font-weight: 600;
  fill: #8b8073; text-anchor: middle; letter-spacing: .1em; pointer-events: none;
}
.hood-home-label {
  font-family: var(--font-body); font-size: 48px; font-weight: 700;
  fill: #fff; text-anchor: middle; pointer-events: none;
}
.hood-scale-text {
  font-family: var(--font-body); font-size: 40px; font-weight: 600;
  fill: var(--sand-700); text-anchor: middle; pointer-events: none;
}
.hood-home, .hood-scale { pointer-events: none; }
.hood-site polygon { pointer-events: none; }

.hood-pin { cursor: pointer; }
.hood-pin .hood-dot { transition: r .12s ease, opacity .12s ease; }
.hood-pin:hover .hood-dot, .hood-pin:focus-visible .hood-dot { r: 34; }
.hood-pin.sel .hood-dot { r: 38; stroke: var(--plum-700); stroke-width: 9; }
.hood-pin.dim { opacity: .16; pointer-events: none; }

.cat-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: baseline;
}
.panel-foot { font-size: .82rem; color: var(--sand-500); margin-top: 14px; line-height: 1.55; }

/* Fee label sub-line. A block <small> rather than a <br>, so the pair is one
   labelled unit instead of two lines that happen to sit together. */
.k-sub { display: block; color: var(--sand-500); font-size: .82em; line-height: 1.35; }

/* ---------- Map zoom / pan ------------------------------------------- */

.map-stage { touch-action: none; }          /* we handle pinch and drag ourselves */
.map-stage:focus-visible { outline: 3px solid var(--sage-600); outline-offset: 2px; }
.map-stage.is-zoomed { cursor: grab; }
.map-stage.is-panning { cursor: grabbing; }

.map-zoom {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.94); border: 1px solid var(--sand-200);
  border-radius: var(--r-full); padding: 4px; box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}
.map-zoom button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  color: var(--plum-700); width: 32px; height: 32px; border-radius: 50%;
  line-height: 1; transition: background .15s, color .15s;
}
.map-zoom button[data-zoom="reset"] { width: auto; padding: 0 12px; font-size: .78rem; font-weight: 600; }
.map-zoom button:hover:not(:disabled) { background: var(--plum-050); }
.map-zoom button:disabled { opacity: .3; cursor: default; }
.map-zoom [data-zoom-level] {
  font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  color: var(--sand-500); min-width: 28px; text-align: center; font-variant-numeric: tabular-nums;
}

/* 30A gets a heavier, darker label than the ordinary street names. */
.hood-road-hero {
  font-size: 62px; font-weight: 700; fill: #8a6a12; letter-spacing: .06em;
}

@media (max-width: 700px) {
  .map-zoom { top: 8px; right: 8px; padding: 3px; }
  .map-zoom button { width: 30px; height: 30px; }
  .map-zoom button[data-zoom="reset"] { padding: 0 9px; }
}

/* Amenity marks on the site map. Sized in metres like everything else. */
.map-icon { pointer-events: none; }

/* ---------- Mobile header fit ----------------------------------------
   The header row could not fit a 390px phone: .brand (237px) and
   .header-actions (189px) were both flex:none, so the row demanded ~448px
   inside 342px of usable width. Chrome absorbed that by inflating the
   layout viewport to 466px and zooming the page to 84%, which is what left
   a dead empty gutter down the right of every page, and it pushed the nav
   toggle 34px past the right edge where it could not be reached or
   scrolled to. Below 620px the CROSSINGS lockup drops and the CTA shortens
   to "Tour"; the full "Schedule a Tour" still lives in the drawer. */

.cta-short { display: none; }

@media (max-width: 620px) {
  .brand { min-width: 0; flex: 0 1 auto; }
  .brand-sub { display: none; }
  .header-actions { flex: 0 0 auto; }
  .header-cta { padding: 9px 14px; }
  .header-cta .cta-full { display: none; }
  .header-cta .cta-short { display: inline; }
  .site-header > .container { gap: 12px; }
}

/* Defensive: a future header regression must not be able to re-trigger the
   layout-viewport widening that caused the gutter. clip (not hidden) so it
   never creates a scroll container that breaks position:sticky. */
body { overflow-x: clip; }

/* ---------- Map labels hold their screen size while zooming -----------
   The maps are drawn at one SVG unit per metre, so a font-size or a pin
   radius is expressed in metres and scales with the geography. Zooming in
   therefore blew street names up to fill the viewport and turned pins into
   overlapping discs. map-zoom.js publishes --map-z (the current zoom
   factor) on the stage and everything textual divides by it, so labels and
   pins stay a constant size on screen the way a real map behaves. */

.hood-road      { font-size: calc(44px / var(--map-z, 1)); }
.hood-road-hero { font-size: calc(62px / var(--map-z, 1)); }
.hood-home-label{ font-size: calc(48px / var(--map-z, 1)); }
.hood-scale-text{ font-size: calc(40px / var(--map-z, 1)); }
.tag-text       { font-size: calc(3.4px / var(--map-z, 1)); }
.bldg-num       { font-size: calc(7px  / var(--map-z, 1)); }

/* Pins and the HOME marker counter-scale about their own anchor point. */
.pin-scale { transform: scale(calc(1 / var(--map-z, 1))); }

/* Strokes keep a constant weight rather than fattening with zoom. */
.hood-dot, .feat-shape, .bldg-shape, .bldg-outline, .unit-hit { vector-effect: non-scaling-stroke; }

/* Dragging the map should never paint a text selection over the labels. */
#hoodMapSvg, #siteMapSvg { -webkit-user-select: none; user-select: none; }

/* ---------- Neighbourhood place list ---------------------------------- */

.place-list {
  margin-top: 14px; border-top: 1px solid var(--sand-200);
  max-height: 340px; overflow-y: auto;
}
.place-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--sand-100);
  padding: 11px 8px; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: .93rem; color: var(--sand-900);
  transition: background .12s;
}
.place-row:hover { background: var(--sand-050); }
.place-row.active { background: var(--plum-050); }
.place-row[hidden] { display: none; }
.place-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.place-name { flex: 1 1 auto; min-width: 0; }
.place-walk {
  flex: none; font-weight: 600; color: var(--plum-700); font-size: .88rem;
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25;
}
.place-dist { font-weight: 400; color: var(--sand-500); font-size: .78rem; }

.info-note { margin: 6px 0 0; font-size: .82rem; line-height: 1.5; color: var(--sand-500); }

/* Trails sit above the roads: the walkability story is the point of the map. */
.hood-trail { pointer-events: none; opacity: .9; }
.hood-tunnel { pointer-events: none; }
.hood-crossing { cursor: pointer; }