/* Grand and Vine Apartments — design tokens (plum and amber over warm paper) */
:root {
  --brand: #432339;
  --brand-deep: #2E1727;
  --needle: #7A3E5C;
  --paper: #F8F6F3;
  --bark: #6B4F3A;
  --amber: #C9862B;
  --amber-dark: #A96D1C;
  --ink: #2A2327;
  --ink-soft: #5F555A;
  --line: #E3DADD;
  --band: #F1EBED;
  --display: "Fraunces", Georgia, serif;
  --body: "Figtree", -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
}

img { max-width: 100%; display: block; }
a { color: var(--needle); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--display); color: var(--brand); line-height: 1.12; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.01em; }

.eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--needle);
  margin-bottom: 10px;
}

section { padding: 72px 0; }

/* ---------- announcement bar ---------- */
.announce { background: var(--amber-dark); color: #fff; font-size: 1.08rem; }
.announce .wrap {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  padding: 19px 56px 19px 24px; position: relative; text-align: center;
}
.announce span { font-weight: 600; }
.announce a { color: #fff; font-weight: 700; }
.announce .dismiss {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: rgba(255,255,255,0.9);
  font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 6px;
}
.announce .dismiss:hover { color: #fff; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 248, 245, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.wordmark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--brand);
  font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: 0.01em; white-space: nowrap;
}
.wordmark svg { flex: none; }
.wordmark small {
  display: block; font-family: var(--body); font-weight: 600;
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bark);
}
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav a {
  text-decoration: none; color: var(--ink-soft);
  font-weight: 500; font-size: 0.95rem; white-space: nowrap;
}
.site-nav a:hover { color: var(--brand); }
.btn {
  display: inline-block; text-decoration: none;
  font-weight: 600; font-size: 0.98rem;
  padding: 12px 22px; border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-amber { background: var(--amber); color: #fff; }
.btn-amber:hover { background: var(--amber-dark); color: #fff; }
.btn-ghost { border: 1.5px solid rgba(255,255,255,0.75); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-deep); color: #fff; }
.btn-outline { border: 1.5px solid var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.site-nav .btn { padding: 9px 16px; font-size: 0.88rem; white-space: nowrap; }
/* Button text must win over the generic .site-nav link color */
.site-nav .btn-amber { color: #fff; }
.site-nav .btn-amber:hover { color: #fff; }
.site-nav .btn-outline { color: var(--brand); }
.site-nav .btn-outline:hover { color: #fff; }

/* Hamburger + mobile menu */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  color: var(--ink); padding: 8px; margin-left: 4px;
}
.nav-toggle svg { display: block; }
.mobile-menu { display: none; }

@media (max-width: 1180px) {
  .site-nav a:not(.btn-amber) { display: none; }
  .nav-toggle { display: block; }
  .mobile-menu:not([hidden]) {
    display: block; background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .mobile-menu a {
    display: block; padding: 14px 24px; text-decoration: none;
    color: var(--ink); font-weight: 600; border-top: 1px solid var(--line);
  }
  .mobile-menu a:hover { color: var(--brand); background: var(--band); }
}

.site-nav .nav-phone { color: var(--brand); font-weight: 700; font-size: 0.95rem; }
.site-nav .nav-phone:hover { color: var(--needle); }
.phone-mobile { display: none; color: var(--brand); padding: 8px; }
@media (max-width: 1180px) {
  .phone-mobile { display: block; }
  .site-nav a.nav-phone { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; padding: 0; color: #fff;
  min-height: 78vh; display: flex; align-items: flex-end;
}
.hero picture, .hero img.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(34, 17, 28, 0.82) 0%, rgba(34, 17, 28, 0.25) 55%, rgba(34, 17, 28, 0.12) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-bottom: 64px; padding-top: 140px; text-shadow: 0 1px 12px rgba(24, 12, 20, 0.45); }
.hero .eyebrow { color: #E8D9A8; }
.hero h1 {
  color: #fff; font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 700; letter-spacing: -0.015em; max-width: 17ch;
}
.hero p {
  margin-top: 18px; max-width: 54ch; font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.92);
}
.hero-ctas { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- facts band ---------- */
.facts { background: var(--brand); color: #fff; padding: 34px 0; }
.facts .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.fact strong {
  display: block; font-family: var(--display); font-size: 1.5rem;
  font-weight: 700; color: #fff;
}
.fact span { font-size: 0.88rem; color: rgba(255,255,255,0.78); }
@media (max-width: 720px) {
  .facts .wrap { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- floor plans (gable cards) ---------- */
.plans { background: var(--paper); }
.plans-intro { max-width: 60ch; margin-top: 10px; color: var(--ink-soft); }
.plan-grid {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.plan-card {
  clip-path: polygon(0 9%, 50% 0, 100% 9%, 100% 100%, 0 100%);
  background: #fff;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.plan-roof {
  clip-path: polygon(0 62%, 50% 0, 100% 62%, 100% 100%, 0 100%);
  background: var(--brand);
  color: #fff; text-align: center;
  padding: 42px 12px 12px;
  font-family: var(--display); font-weight: 700; font-size: 1.18rem;
}
.plan-body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.plan-body .sqft { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.plan-body .count { font-size: 0.86rem; color: var(--ink-soft); }
.plan-price {
  margin-top: auto; padding-top: 14px;
  font-weight: 700; color: var(--brand); font-size: 1rem;
}
.plan-price .avail {
  display: inline-block; margin-left: 6px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--amber-dark);
}
.plan-price.quiet { font-weight: 500; color: var(--ink-soft); font-size: 0.92rem; }
.plans-note { margin-top: 22px; font-size: 0.9rem; color: var(--ink-soft); max-width: 70ch; }
@media (max-width: 980px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .plan-grid { grid-template-columns: 1fr; } }

/* ---------- amenities ---------- */
.amenities { background: var(--band); }
.amenities .cols {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px;
  align-items: start; margin-top: 8px;
}
.amenities h3 {
  font-size: 1.12rem; margin: 30px 0 12px; color: var(--brand);
}
.amenities ul { list-style: none; }
.amenities li {
  padding: 9px 0 9px 30px; position: relative;
  border-bottom: 1px solid var(--line); font-size: 0.99rem;
}
.amenities li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 8px; height: 8px; margin: 3px;
  background: var(--amber); border-radius: 50%;
}
.amenities figure img { border-radius: 8px; }
.amenities figcaption { font-size: 0.84rem; color: var(--ink-soft); margin-top: 10px; }
.terms {
  margin-top: 26px; padding: 16px 20px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 0.94rem; color: var(--ink-soft);
}
.terms strong { color: var(--ink); }
@media (max-width: 860px) { .amenities .cols { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- gallery ---------- */
.gallery-grid {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.gallery-grid a { display: block; border-radius: 6px; overflow: hidden; }
.gallery-grid img {
  width: 100%; height: 190px; object-fit: cover;
  transition: transform 0.25s ease;
}
.gallery-grid a:hover img { transform: scale(1.04); }
@media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- availability ---------- */
.availability { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.availability .intro { max-width: 62ch; margin-top: 10px; color: var(--ink-soft); }
.listings-embed { margin-top: 34px; min-height: 320px; }
.listings-embed iframe { border: 0; width: 100%; }
.availability .fallback {
  margin-top: 26px; font-size: 0.95rem; color: var(--ink-soft);
  padding: 16px 20px; background: var(--band); border-radius: 8px;
}

/* ---------- neighborhood ---------- */
.neighborhood .cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 8px;
  align-items: start;
}
.neighborhood ul { list-style: none; margin-top: 18px; }
.neighborhood li {
  padding: 12px 0; border-bottom: 1px solid var(--line);
  display: flex; gap: 12px; font-size: 0.99rem;
}
.neighborhood li strong { color: var(--brand); font-weight: 600; }
.neighborhood .mapframe { border: 0; width: 100%; height: 360px; border-radius: 8px; }
@media (max-width: 860px) { .neighborhood .cols { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- contact ---------- */
.contact { background: var(--brand); color: #fff; }
.contact h2 { color: #fff; }
.contact .cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.contact p { color: rgba(255,255,255,0.85); max-width: 50ch; }
.contact .phone {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff;
  text-decoration: none; margin: 18px 0 6px;
}
.contact .hours { font-size: 0.9rem; color: rgba(255,255,255,0.65); }
.contact .ctas { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
.contact figure img { border-radius: 8px; }
@media (max-width: 860px) { .contact .cols { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer {
  background: var(--brand-deep); color: rgba(255,255,255,0.72);
  padding: 34px 0; font-size: 0.88rem;
}
.site-footer .wrap {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  align-items: center;
}
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer .legal { font-size: 0.8rem; }

/* ---------- Book a Tour modal ---------- */
.tour-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tour-modal[hidden] { display: none; }
.tour-modal__backdrop { position: absolute; inset: 0; background: rgba(26, 50, 35, 0.55); }
.tour-modal__card { position: relative; background: #fff; border-radius: 14px; max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.28); }
.tour-modal__body { padding: 32px 30px 28px; }
.tour-modal__close { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 1.7rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.tour-modal__close:hover { color: var(--ink); }
.tour-modal__intro { color: var(--ink-soft); margin: 8px 0 18px; font-size: 0.97rem; }
.tour-modal form label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--brand); margin-bottom: 14px; }
.tour-modal form input { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; font: inherit; font-weight: 400; color: var(--ink); border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); }
.tour-modal form input:focus { outline: 2px solid var(--needle); outline-offset: 1px; border-color: var(--needle); }
.tour-modal__hp { position: absolute !important; left: -9999px !important; height: 0; opacity: 0; pointer-events: none; }
.tour-modal__submit { width: 100%; margin-top: 6px; cursor: pointer; border: 0; }
.tour-modal__submit:disabled { opacity: 0.65; cursor: default; }
.tour-modal__error { margin-top: 12px; font-size: 0.92rem; color: #9C3B22; }
.tour-modal__foot { margin-top: 16px; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- multi-page: page hero ---------- */
.page-hero { background: var(--brand-deep); color: #fff; padding: 56px 0 48px; }
.page-hero .eyebrow { color: #E8D9A8; }
.page-hero h1 {
  color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 700; letter-spacing: -0.01em;
}
.page-hero .lede { margin-top: 14px; max-width: 68ch; color: rgba(255,255,255,0.88); font-size: 1.02rem; }
.page-hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- multi-page: closing CTA band ---------- */
.cta-band { background: var(--brand); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { margin-top: 10px; color: rgba(255,255,255,0.85); }
.cta-band .ctas { margin-top: 24px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- multi-page: FAQ ---------- */
.faq-list { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 20px 44px 20px 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 1.5rem; color: var(--needle); line-height: 1;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary h2 {
  display: inline; font-size: 1.08rem; font-weight: 700; letter-spacing: 0;
}
.faq-answer { padding: 0 0 22px; color: var(--ink-soft); max-width: 64ch; }
.faq-answer a { font-weight: 600; }

/* ---------- multi-page: contact extras ---------- */
.contact address {
  font-style: normal; margin-top: 18px; color: rgba(255,255,255,0.85); line-height: 1.55;
}

/* ---- live unit cards (availability) --------------------------------------
   Replaces the AppFolio listing.js iframe with the portfolio-standard 3-wide
   card grid, fed by /api/listings. Kept in The Pines' own language: pine
   header chip, amber CTA, and the roof notch from .plan-card. */
.unit-grid {
  margin-top: 34px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.unit-card {
  background: #fff;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.unit-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--band); }
.unit-card .chip {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: var(--brand); color: #fff;
  font-family: var(--display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 11px;
}
.unit-card .chip.later { background: var(--bark); }
.unit-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.unit-rent { font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--brand); line-height: 1.1; }
.unit-rent span { font-family: var(--body); font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); }
.unit-spec { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.unit-addr { font-size: 0.88rem; color: var(--ink-soft); }
.unit-when { margin-top: 4px; font-size: 0.86rem; color: var(--ink-soft); }
.unit-card .btn { margin: 0 22px 22px; align-self: flex-start; font-size: 0.92rem; }
.units-note {
  background: #fff; border: 1px solid var(--line);
  padding: 22px 24px; margin-top: 34px; max-width: 70ch; color: var(--ink-soft);
}
.units-note strong { color: var(--ink); }
@media (max-width: 980px) { .unit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .unit-grid { grid-template-columns: 1fr; } }

/* ---------- clickable plan-card CTAs (investor feedback 2026-09-04) ---------- */
.plan-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
a.plan-cta { color: var(--brand); }
.plan-cta:hover, .plan-cta:focus-visible { border-bottom-color: currentColor; }
.plan-price.quiet .plan-cta { color: var(--needle); font-weight: 600; }
.plan-price.quiet .plan-cta:hover { color: var(--brand); }
.plan-cta::after { content: "\2192"; font-size: 0.9em; opacity: 0.55; }
.plan-cta:hover::after { opacity: 1; }
.plan-cta:focus-visible { outline: 2px solid var(--needle); outline-offset: 3px; border-radius: 2px; }

/* wait-list plan line inside the modal */
.tour-modal__plan {
  margin: -6px 0 16px; padding: 10px 12px;
  background: var(--band); border-radius: 6px;
  font-weight: 600; color: var(--brand); font-size: 0.94rem;
}

/* ---------- phone CTA bar ---------- */
/* The header row (wordmark + tour button + phone icon + hamburger) is 374px
   wide against a 272px content box at 320px, so the whole page scrolled
   sideways. The tour CTA and the phone number move down here; the header
   keeps the logo, the phone icon and the menu. Reuses js-book-tour, so the
   same modal opens and the same GA4 event fires. */
.mobile-cta { display: none; }
@media (max-width: 860px) {
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  .mobile-cta .btn {
    width: 100%; text-align: center; padding: 12px 8px;
    font-size: 0.86rem; white-space: nowrap;
  }
  body { padding-bottom: 76px; }
  body.modal-open .mobile-cta { display: none; }
  .wordmark small { display: none; }
  .site-header .btn-amber { display: none; }
  .site-nav .nav-phone { display: none; }
}

@media (max-width: 400px) {
  /* Last few pixels at 320-400: the row is brand + phone icon + hamburger and
     nothing is hidden, so buy the space from the gap, the icon padding and the
     brand type size rather than from anything a visitor needs. */
  .site-header .wrap { gap: 6px; }
  .phone-mobile { padding: 8px 4px; }
  .nav-toggle { padding: 8px 0 8px 4px; margin-left: 0; }
  .brand-link .mark, .wordmark { font-size: 1rem; }
}

/* ---------- guide pages (neighborhood, schools, intent pages) ----------
   A plain prose section used by the pages that explain the area rather than
   sell a floor plan. .alt banded, so alternating sections read as a rhythm. */
.feature { background: #fff; }
.feature.alt { background: var(--band); }
.feature + .feature { border-top: 1px solid var(--line); }
.feature.alt + .feature, .feature + .feature.alt { border-top: 0; }
.feature h2 { margin-bottom: 12px; }
.feature h3 { font-size: 1.1rem; margin-bottom: 6px; }
.feature p { max-width: 68ch; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }
.feature p + p { margin-top: 14px; }
.feature p a { color: var(--brand); font-weight: 600; }
.feature .cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.feature .ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.feature .fallback {
  margin-top: 22px; font-size: 0.9rem; color: var(--ink-soft);
  padding: 14px 18px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; max-width: none;
}
.feature.alt .fallback { background: #fff; }
@media (max-width: 860px) { .feature .cols { grid-template-columns: 1fr; gap: 32px; } }

/* "More about living here" on /neighborhood: the quiet path from the one guide
   page that IS in the header nav to the three that are not. The intent pages
   are search entry points and stay out of the nav on purpose (a fifth item
   overflows the header at 320-400px), so without this row the only human routes
   to them are the footer and three FAQ answers. */
.guide-links h2 { font-size: 1.15rem; }
.guide-links ul {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.guide-links li { max-width: 34ch; }
.guide-links li a { color: var(--brand); font-weight: 600; }
.guide-links li p { margin-top: 5px; font-size: 0.95rem; }
@media (max-width: 860px) { .guide-links ul { grid-template-columns: 1fr; gap: 20px; } }

/* The distances table. Every row is a measured road mile, so it is built as a
   real table: assistants and screen readers both get the pairing for free. */
.nearby { width: 100%; border-collapse: collapse; margin: 28px 0 0; font-size: 0.97rem; }
.nearby caption {
  caption-side: top; text-align: left; color: var(--ink-soft);
  font-size: 0.85rem; padding-bottom: 10px;
}
.nearby th, .nearby td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.nearby thead th {
  font-family: var(--body); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--needle);
  border-bottom: 2px solid var(--line);
}
.nearby tbody th { font-weight: 600; color: var(--brand); font-family: var(--body); font-size: 0.97rem; }
.nearby td { color: var(--ink-soft); }
.nearby td:first-of-type { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.nearby tbody tr:last-child th, .nearby tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 620px) {
  .nearby thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nearby tbody th, .nearby tbody td { display: block; padding: 0; border: 0; }
  .nearby tbody tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nearby tbody td:first-of-type { margin: 2px 0 4px; }
}

/* Neighborhood map. The fallback link is visible by default and is only hidden
   once Leaflet has actually drawn, so a blocked CDN or tile server leaves a
   working link rather than an empty grey box. */
.mapwrap { margin-top: 30px; }
.sitemap-map { height: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--band); }
.sitemap-map.is-live { height: 420px; }
.mapfall { margin-top: 0; font-size: 0.97rem; }
.mapfall a { color: var(--brand); font-weight: 600; }
.leaflet-container { font: inherit; border-radius: 8px; }
@media (max-width: 620px) { .sitemap-map.is-live { height: 320px; } }

/* Footer guide links: these pages are deliberately kept out of the header nav
   (a fifth item overflows the header), so the footer is how they are surfaced. */
.foot-guides { font-size: 0.9rem; opacity: 0.75; display: inline-block; margin-top: 6px; }

/* The schools table carries an extra Grades column, so the emphasis belongs on
   the last cell (distance) rather than the first, as in the nearby table. */
.nearby--schools td:first-of-type { font-weight: 400; color: var(--ink-soft); white-space: normal; }
.nearby--schools td:last-of-type { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* ---------- Grand and Vine additions ---------- */
.plan-grid.plan-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .plan-grid.plan-grid-3 { grid-template-columns: 1fr; } }

/* Phone hero (fleet pattern, Oct 2026): the photo is a normal block at full
   width so the whole building shows, and the text sits below it on the brand
   colour. A landscape aerial cropped to a tall phone shows only roof. */
@media (max-width: 620px) {
  .hero { display: block; min-height: 0; background: var(--brand-deep); }
  .hero picture, .hero img.hero-img { position: static; height: auto; }
  .hero picture { display: block; }
  .hero::after { display: none; }
  .hero .wrap { padding-top: 26px; padding-bottom: 34px; text-shadow: none; }
  .hero h1 { font-size: 1.9rem; }
  .hero .hero-more { display: none; }
  .hero-ctas { margin-top: 20px; }
  .hero-ctas .btn-amber { background: #fff; color: var(--brand); }
}

/* width/height attributes on an <img> beat aspect-ratio unless height is auto. */
.amenities figure img, .contact figure img { height: auto; }
/* The aerial is 4:3; in the wide desktop hero keep the roofline and trees in frame. */
.hero img.hero-img { object-position: center 35%; }