/* ============================================================
   Colonial Pointe Franklin Lakes — Stylesheet
   WCAG 2.1 AA — color contrast verified
   ============================================================ */

:root {
  --navy: #0d3a52;
  --navy-deep: #082c40;
  --navy-soft: #1a4d68;
  --brass: #806430;
  --brass-light: #c8a868;
  --slate: #8da4ad;
  --cream: #f7f3ec;
  --cream-soft: #fbf8f2;
  --ink: #1a2230;
  --ink-soft: #4a5566;
  --line: #e4dccc;
  --white: #ffffff;

  --container-max: 1280px;
  --pad-x: clamp(24px, 4vw, 56px);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: .3s var(--ease);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream-soft);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--brass); }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; border: 0; background: transparent; }

/* ─── Accessibility helpers ─── */
.skip-nav {
  position: absolute; top: -100px; left: 16px; z-index: 999;
  background: var(--navy); color: var(--white);
  padding: 12px 20px; font-weight: 600; border-radius: 4px;
  transition: top var(--t);
}
.skip-nav:focus { top: 16px; color: var(--white); }

*:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Screen-reader-only — visible to AT, hidden visually */
.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;
}

/* ─── Typography ─── */
.serif { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; line-height: 1.05; letter-spacing: -.005em; }
.italic { font-style: italic; }
.eyebrow {
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ""; display: inline-block; width: 32px; height: 1px; background: var(--brass); }
.eyebrow.light { color: var(--brass-light); }
.eyebrow.light::before { background: var(--brass-light); }
h1, h2, h3, h4 { color: var(--navy); }

/* ─── Layout ─── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.center { text-align: center; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 14px 28px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: all var(--t);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-lg { padding: 18px 36px; font-size: 13px; }
.btn-primary {
  background: var(--brass); color: var(--white);
}
.btn-primary:hover { background: var(--navy); color: var(--white); }
.btn-outline {
  background: transparent; color: var(--navy); border-color: var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-ghost {
  background: transparent; color: var(--white); border-color: rgba(255,255,255,.5);
}
.btn-ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 4px;
}
.link-arrow:hover { color: var(--navy); border-color: var(--navy); }
.link-arrow.light { color: var(--brass-light); border-color: var(--brass-light); }
.link-arrow.light:hover { color: var(--white); border-color: var(--white); }

/* ─── Utility Bar ─── */
.utility {
  background: var(--navy-deep);
  color: rgba(255,255,255,.85);
  font-size: 13px;
  padding: 7px 0;
}
.utility a { color: rgba(255,255,255,.85); }
.utility a:hover { color: var(--brass-light); }
.utility-inner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  justify-content: space-between;
}
.utility-item { display: inline-flex; align-items: center; gap: 8px; }
.utility-sep { display: none; opacity: .4; }
.utility-spacer { flex: 1; }

/* ─── Header / Nav ─── */
.site-header {
  background: var(--cream-soft);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}
.brand { display: inline-flex; align-items: center; }
.brand-logo { width: 160px; height: auto; }
.primary-nav ul {
  display: flex; gap: 18px; justify-content: center;
  align-items: baseline;
}
.primary-nav a {
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); padding: 8px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.primary-nav a:hover, .primary-nav a:focus-visible { border-color: var(--brass); }

/* Nav dropdown — Resident Portal */
.primary-nav .has-dropdown { position: relative; }
.dropdown-toggle {
  font-family: inherit;
  font-size: 11.5px; font-weight: 500;
  line-height: 1.65;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy);
  padding: 8px 0;
  margin: 0;
  border-bottom: 2px solid transparent;
  background: none; cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  vertical-align: baseline;
}
.dropdown-toggle:hover, .dropdown-toggle:focus-visible { border-bottom-color: var(--brass); }
.dropdown-toggle.is-current-section { border-bottom-color: var(--brass); }
.dropdown-toggle svg {
  transition: transform var(--t);
}
.dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px); left: 50%;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(13,58,82,.12);
  padding: 8px 0;
  z-index: 100;
  display: flex; flex-direction: column; align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.dropdown-menu li { width: 100%; }
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
}
/* Invisible bridge so cursor can travel from toggle to menu without closing */
.has-dropdown::after {
  content: ""; position: absolute;
  top: 100%; left: 0; right: 0; height: 12px;
}
.dropdown-menu a {
  display: block;
  padding: 14px 22px;
  font-size: 13.5px;
  color: var(--navy);
  letter-spacing: .02em;
  text-transform: none;
  border-bottom: 0;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.dropdown-sub { color: var(--ink-soft); }
.dropdown-menu a:hover, .dropdown-menu a:focus-visible {
  background: var(--cream);
  color: var(--brass);
}

/* Quick Links Band (above footer) */
.quick-links-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.quick-links-band--two { grid-template-columns: repeat(2, 1fr); }
.qlb-block {
  padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px);
  color: var(--white);
  text-align: center;
}
.qlb-block:nth-child(1) { background: var(--navy-deep); }
.qlb-block:nth-child(2) { background: var(--navy); }
.qlb-block:nth-child(3) { background: var(--navy-soft); }
.qlb-block h2 {
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.qlb-actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.qlb-actions .btn {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.6);
  padding: 12px 28px;
  font-size: 12px;
}
.qlb-actions .btn:hover, .qlb-actions .btn:focus-visible {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

/* ─── Hero ─── */
.hero {
  position: relative;
  min-height: calc(100svh - 130px);
  display: flex; align-items: center;
  color: var(--white);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(8,44,64,.88) 0%,
      rgba(8,44,64,.74) 38%,
      rgba(8,44,64,.48) 70%,
      rgba(8,44,64,.42) 100%),
    linear-gradient(180deg, rgba(8,44,64,.15) 0%, rgba(8,44,64,.35) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  padding-block: 70px;
  /* Keep the full container width so the copy starts on the SAME left edge as the
     logo and nav. Capping .hero-content itself at 760px made the whole block centre
     on wide screens, because .container applies margin: 0 auto. Cap the copy instead. */
  max-width: var(--container-max);
}
.hero-content > * { max-width: 760px; }
.hero-eyebrow {
  font-size: 12px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--brass-light); font-weight: 600;
  margin-bottom: 32px;
  display: inline-flex; align-items: center; gap: 16px;
}
.hero-eyebrow::before {
  content: ""; display: inline-block;
  width: 48px; height: 1px; background: var(--brass-light);
}
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 1;
  color: var(--white);
  letter-spacing: -.015em;
  margin-bottom: 28px;
  text-shadow: 0 2px 24px rgba(8,44,64,.45);
}
.hero-title .italic { font-weight: 500; }
.hero-sub {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: rgba(255,255,255,.95);
  max-width: 560px;
  font-weight: 400;
  margin-bottom: 44px;
  text-shadow: 0 1px 14px rgba(8,44,64,.5);
}

/* Hero — three-tier copy stack (USP / features / description) */
.hero-usp {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  color: var(--white);
  margin-top: 4px;
  margin-bottom: 14px;
  letter-spacing: -.005em;
  text-shadow: 0 1px 14px rgba(8,44,64,.55);
}
.hero-usp .gold-accent {
  color: var(--brass-light);
  font-weight: 700;
  white-space: nowrap;
}
.hero-features {
  font-size: clamp(15px, 1.4vw, 17px);
  color: rgba(255,255,255,.94);
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: 10px;
  text-shadow: 0 1px 14px rgba(8,44,64,.5);
}
.hero-desc {
  font-size: clamp(14px, 1.25vw, 16px);
  color: rgba(255,255,255,.85);
  font-weight: 400;
  line-height: 1.55;
  max-width: 540px;
  margin-bottom: 38px;
  text-shadow: 0 1px 14px rgba(8,44,64,.5);
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 2;
}
.hero-scroll span {
  display: block; width: 1px; height: 60px;
  background: linear-gradient(180deg, transparent, var(--brass-light));
}

/* ─── Welcome ─── */
.welcome {
  background: var(--cream);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
.welcome-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--brass);
  padding-top: 12px;
  margin-bottom: 28px;
}
.welcome-left { position: relative; }
.welcome-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(43, 57, 77, 0.15);
  margin-top: 16px;
}
.welcome-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%;
  display: block;
  object-fit: cover;
  object-position: center 60%;
  will-change: transform;
  transform: translate3d(0, -15%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .welcome-image img {
    height: 100%;
    transform: none;
  }
}
.welcome-body h2 {
  font-size: clamp(36px, 5vw, 60px);
  margin-bottom: 32px;
}
.welcome-body h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
}
.welcome-closer {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 500;
  color: var(--brass) !important;
  font-style: italic;
  margin-top: 8px !important;
  margin-bottom: 24px !important;
  letter-spacing: .005em;
}
.welcome-body p {
  font-size: 17px;
  color: var(--ink-soft);
  margin-bottom: 20px;
  max-width: 60ch;
}
.welcome-body .link-arrow { margin-top: 20px; }

/* ─── Section Head ─── */
.section-head {
  margin-bottom: 56px;
  max-width: 720px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 {
  font-size: clamp(36px, 4.5vw, 56px);
  margin-bottom: 20px;
}
.section-head .section-sub {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.section-foot {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/* ─── Floor Plans ─── */
.floorplans {
  background: var(--cream-soft);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
/* First tier banner sits flush against the sticky filter bar (no gap). */
.filter-bar + .floorplans { padding-top: 0; }
/* Stacked tier sections sit flush — the next banner butts against the prior floor plans. */
.floorplans + .floorplans { padding-top: 0; }
.floorplans:has(+ .floorplans) { padding-bottom: 60px; }

/* ─── Availability building chooser (two boxes) ─── */
.building-choose { background: var(--cream-soft); padding: clamp(36px, 4vw, 64px) 0 clamp(64px, 8vw, 120px); }
.building-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.building-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: 0 10px 30px rgba(43, 57, 77, 0.07);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.building-card:hover,
.building-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--brass);
  box-shadow: 0 18px 44px rgba(43, 57, 77, 0.16);
}
.building-img { aspect-ratio: 16 / 10; overflow: hidden; }
.building-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.building-card:hover .building-img img { transform: scale(1.04); }
.building-body { padding: 28px 30px 32px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.building-address {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); font-weight: 600;
}
.building-card h2 {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-weight: 500; font-size: clamp(26px, 2.4vw, 32px); color: var(--navy);
  line-height: 1.05; margin: 0;
}
.building-card p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 4px 0 0; }
.building-meta { font-size: 13px; color: var(--ink-soft); letter-spacing: .03em; margin-top: auto; }
.building-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); margin-top: 14px; transition: color var(--t), gap var(--t);
}
.building-card:hover .building-cta { color: var(--brass); gap: 12px; }
@media (max-width: 768px) {
  .building-grid { grid-template-columns: 1fr; gap: 24px; }
}
.fp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.fp-card {
  background: var(--white);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
  border: 1px solid var(--line);
}
.fp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(13,58,82,.08);
}
.fp-card.featured {
  border-color: var(--brass);
  position: relative;
}
.fp-img { aspect-ratio: 4/3; overflow: hidden; }
.fp-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.fp-card:hover .fp-img img { transform: scale(1.04); }
.fp-img--plan {
  background: var(--cream);
  border-bottom: 1px solid rgba(157, 123, 61, 0.18);
}
.fp-img--plan img {
  object-fit: contain;
  padding: 18px;
}
.fp-card:hover .fp-img--plan img { transform: none; }
.fp-body { padding: 28px; }
.fp-label {
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin-bottom: 12px;
}
.fp-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 32px;
  margin-bottom: 18px;
  color: var(--navy);
}
.fp-meta {
  display: flex; gap: 20px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  font-size: 13px; color: var(--ink-soft);
  font-weight: 500; letter-spacing: .04em;
}
.fp-meta li::before { content: ""; }

/* ─── Amenities ─── */
.amenities {
  background: var(--cream);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.amen-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.amen-intro h2 {
  font-size: clamp(36px, 4.5vw, 54px);
  margin-bottom: 24px;
}
.amen-intro h2 em { font-style: italic; font-weight: 400; color: var(--brass); }
.amen-intro p {
  color: var(--ink-soft); font-size: 17px; margin-bottom: 32px;
  max-width: 44ch;
}
.amen-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.amen-list li {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color var(--t);
}
.amen-list li:hover { border-color: var(--brass); }
.amen-list svg { color: var(--brass); margin-bottom: 14px; }
.amen-list h3 {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.amen-list p {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
}

/* ─── Location Strip ─── */
.location {
  background: var(--navy);
  color: var(--white);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.location h2 { color: var(--white); }
.location h2 em { color: var(--brass-light); font-style: italic; font-weight: 400; }
.loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.loc-text h2 {
  font-size: clamp(36px, 4.5vw, 54px);
  margin-bottom: 28px;
}
.loc-text p {
  color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.6;
  margin-bottom: 40px; max-width: 50ch;
}
.loc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.loc-stats li { text-align: left; }
.loc-stats strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: 56px; line-height: 1;
  color: var(--brass-light);
  margin-bottom: 6px;
}
.loc-stats span {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.loc-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.loc-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 145%;
  display: block;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
  transform: translate3d(0, -15%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .loc-media img {
    height: 100%;
    transform: none;
  }
}

/* ─── Gallery Teaser ─── */
.gallery-teaser {
  background: var(--cream-soft);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.gal-tile {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  display: block;
}
.gal-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.gal-tile:hover img { transform: scale(1.05); }
.gal-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(8,44,64,.7));
  transition: opacity var(--t);
}
.gal-label {
  position: absolute; left: 20px; bottom: 18px; z-index: 2;
  color: var(--white);
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 600;
}

/* ─── CTA Band ─── */
.cta-band {
  background:
    linear-gradient(135deg, rgba(13,58,82,.95), rgba(8,44,64,.95)),
    /* 1024w webp: this sits under a 95%-opaque gradient, so the full 2 MB
       2560px master was ~2 MB of download for a barely-visible texture. */
    url('../img/r/boulder-sign-640.webp') center/cover no-repeat;
  color: var(--white);
  padding: clamp(70px, 8vw, 100px) 0;
}
.cta-band h2 { color: var(--white); }
.cta-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 48px; flex-wrap: wrap;
}
.cta-inner h2 {
  font-size: clamp(32px, 4vw, 48px);
  margin: 12px 0 8px;
}
.cta-inner p { color: rgba(255,255,255,.85); }
.cta-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ─── Footer ─── */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,.78);
  padding: 80px 0 24px;
  font-size: 14.5px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-logo { width: 200px; height: auto; margin-bottom: 24px; filter: brightness(0) invert(1); }
.footer-nap { font-style: normal; line-height: 1.8; }
.footer-nap a { color: var(--brass-light); }
.footer-nap a:hover { color: var(--white); }
.footer-col h3 {
  color: var(--white); font-size: 12px;
  letter-spacing: .32em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 20px;
}
.footer-col ul li { margin-bottom: 12px; }
.footer-col a { color: rgba(255,255,255,.78); }
.footer-col a:hover { color: var(--brass-light); }
.footer-hours { line-height: 1.75; color: rgba(255,255,255,.7); font-size: 13.5px; }
.footer-hours-block { margin-top: 24px; }
.footer-compliance .eho {
  margin-bottom: 16px;
  display: block;
}
.compliance-text {
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-size: 13px; color: rgba(255,255,255,.55);
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { color: rgba(255,255,255,.55); margin: 0 2px; }
.footer-bottom a:hover { color: var(--brass-light); }

/* ─── Inner Page Hero (Availability, Amenities, etc.) ─── */
.page-hero {
  background: var(--cream);
  padding: clamp(56px, 6vw, 88px) 0 clamp(48px, 5vw, 72px);
  text-align: left;
}
.page-hero h1 {
  font-size: clamp(44px, 6vw, 80px);
  margin: 8px 0 24px;
  letter-spacing: -.015em;
}
.page-hero h1 em {
  font-style: italic; font-weight: 400; color: var(--brass);
}
.page-hero-sub {
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--ink-soft); line-height: 1.6;
  max-width: 60ch; margin-bottom: 20px;
}
.page-hero-note {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 60ch;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.page-hero-back { margin-top: 22px; }

/* /availability/ — hero copy and the two building cards are ONE section, not two
   stacked bands (James, 2026-08-26: "it'll just be 1 section on that page"). */
.page-hero--with-buildings { padding-bottom: clamp(64px, 7vw, 104px); }
.page-hero--with-buildings .building-grid { margin-top: clamp(36px, 4vw, 56px); }
.page-hero--with-buildings .building-card { background: var(--white); }

/* ─── Photo hero variant (building pages, 2026-08-26) ───
   Reuses the tier photos that used to sit in the removed banner, so the top of
   the page still shows the building. Same overlay treatment as the home hero. */
.page-hero--photo {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding: clamp(76px, 8vw, 118px) 0 clamp(64px, 6vw, 92px);
}
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
}
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(8,44,64,.92) 0%,
      rgba(8,44,64,.80) 40%,
      rgba(8,44,64,.54) 74%,
      rgba(8,44,64,.46) 100%),
    linear-gradient(180deg, rgba(8,44,64,.12) 0%, rgba(8,44,64,.40) 100%);
}
.page-hero--photo > .container { position: relative; z-index: 2; }
.page-hero--photo .eyebrow { color: var(--brass-light); }
.page-hero--photo .eyebrow::before { background: var(--brass-light); }
.page-hero--photo h1 {
  color: var(--white);
  text-shadow: 0 1px 14px rgba(8,44,64,.5);
}
.page-hero--photo h1 em { color: var(--brass-light); }
.page-hero--photo .page-hero-sub {
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 12px rgba(8,44,64,.45);
}
.page-hero--photo .page-hero-note {
  color: rgba(255,255,255,.76);
  border-top-color: rgba(255,255,255,.24);
}
.page-hero--photo .page-hero-note a,
.page-hero--photo .page-hero-back a,
.page-hero--photo .link-arrow {
  color: var(--brass-light);
  border-color: var(--brass-light);
}
.page-hero--photo .page-hero-note a:hover,
.page-hero--photo .page-hero-back a:hover { color: var(--white); border-color: var(--white); }
.page-hero-note a {
  color: var(--brass); border-bottom: 1px solid var(--brass);
  font-weight: 500;
}
.page-hero-note a:hover { color: var(--navy); border-color: var(--navy); }

/* ─── Filter Bar ─── */
.filter-bar {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 64px; z-index: 40;
}
.filter-inner {
  display: flex; align-items: center; gap: 24px;
  padding-top: 16px; padding-bottom: 16px;
  flex-wrap: wrap;
}
.filter-label {
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill {
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  letter-spacing: .06em;
  padding: 8px 18px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--navy);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--t);
  min-height: 36px;
}
.filter-pill:hover { border-color: var(--brass); color: var(--brass); }
.filter-pill.is-active {
  background: var(--navy); color: var(--white); border-color: var(--navy);
}
.filter-status {
  margin-left: auto;
  font-size: 13px; color: var(--ink-soft); font-style: italic;
}

/* ─── Availability: "no current availability" notice + available-home cards ─── */
.avail-notice {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(48px, 6vw, 80px) 0;
}
.avail-notice-inner { max-width: 760px; text-align: center; }
.avail-notice-badge {
  width: 52px; height: 52px; margin: 0 auto 20px;
  display: grid; place-items: center;
  border: 1px solid var(--brass);
  border-radius: 999px;
  color: var(--brass);
}
.avail-notice h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  margin-bottom: 16px;
  color: var(--cream);
}
.avail-notice p { color: rgba(245, 240, 232, .82); line-height: 1.65; margin-bottom: 14px; }
.avail-notice-strong { color: var(--cream); font-weight: 500; }
.avail-notice-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin: 26px 0 20px;
}
.avail-notice-alt { font-size: 14.5px; margin-bottom: 0; }
.avail-notice-alt .link-arrow { color: var(--brass); }

/* Status chip on the building cards */
.avail-status {
  display: inline-block;
  margin: 4px 0 14px;
  padding: 5px 14px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}
.avail-status.is-available {
  color: var(--brass);
  border-color: var(--brass);
}

@media (max-width: 768px) {
  .avail-notice-actions { flex-direction: column; }
}

/* ─── /floor-plans/ — two stacked filter rows (building, then bedrooms) ─── */
.filter-inner--stacked {
  display: block;
  padding-top: 14px; padding-bottom: 14px;
}
.filter-row {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.filter-row + .filter-row { margin-top: 10px; }
/* The building row is the primary choice — give its labels a little more room. */
.filter-row .filter-label { min-width: 148px; }
.filter-pill-sub {
  font-size: 11px; letter-spacing: .04em; opacity: .7;
}
.filter-inner--stacked .filter-status {
  display: block; margin-left: 0; margin-top: 10px;
}
@media (max-width: 768px) {
  .filter-row { gap: 10px; }
  .filter-row .filter-label { min-width: 0; width: 100%; }
  .filter-pill-sub { display: none; }
}

/* ─── Tier Section variants ─── */
.tier-section .section-head h2 {
  font-size: clamp(40px, 5vw, 64px);
}
.tier-section .section-head h2 em {
  font-style: italic; font-weight: 400; color: var(--brass);
}
.tier-section--plus { background: var(--cream); }

/* ─── Tier Banner (Availability page) ─── */
.tier-banner {
  position: relative;
  margin-bottom: 56px;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  overflow: hidden;
}
.tier-banner img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 145%;
  object-fit: cover; object-position: center;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, -15%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .tier-banner img {
    height: 100%;
    transform: none;
  }
}
.tier-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(8,44,64,.78) 0%, rgba(8,44,64,.55) 60%, rgba(8,44,64,.40) 100%);
  z-index: 1;
}
.tier-banner-inner {
  position: relative; z-index: 2;
  padding-top: 56px; padding-bottom: 48px;
  max-width: 760px;
}
.tier-banner h2 {
  color: var(--white);
  font-size: clamp(40px, 5vw, 64px);
  margin: 4px 0 16px;
  text-shadow: 0 2px 20px rgba(8,44,64,.5);
}
.tier-banner h2 em {
  font-style: italic; font-weight: 400; color: var(--brass-light);
}
.tier-banner p {
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,.92);
  max-width: 60ch; line-height: 1.55;
  text-shadow: 0 1px 14px rgba(8,44,64,.5);
}

/* ─── Tier details (Includes + Fees) ─── */
/* Building pages: the fees/includes block after the banner was removed (2026-08-26).
   Inherits the old .floorplans background so the band still reads as its own section. */
.tier-details-section {
  background: var(--cream-soft);
  padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 96px);
}
.tier-details-section .tier-details { margin-bottom: 0; }

.tier-details {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
  padding: 36px 40px;
  background: var(--white);
  border: 1px solid var(--line);
}
.tier-includes h3,
.tier-fees h3 {
  font-family: 'Inter', sans-serif;
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600; color: var(--brass);
  margin-bottom: 12px;
}
.tier-fee-callout {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 20px;
  line-height: 1.35;
}
.tier-fee-callout strong {
  font-weight: 600;
  color: var(--brass);
}
.tier-includes ul {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px;
}
.tier-includes li {
  font-size: 14.5px; color: var(--ink);
  padding-left: 22px; position: relative; line-height: 1.5;
}
.tier-includes li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 1px; background: var(--brass);
}
.tier-footnote {
  font-size: 12px; color: var(--ink-soft); font-style: italic;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.tier-fees dl {
  display: flex; flex-direction: column; gap: 14px;
}
.tier-fees dl > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) 1.4fr;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.tier-fees dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.tier-fees dt {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.tier-fees dd {
  font-size: 14px; color: var(--ink); line-height: 1.4;
}

/* ─── Minor section head ─── */
.section-head--minor {
  margin-bottom: 32px; max-width: none;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.section-head--minor h3 {
  font-size: clamp(24px, 2.5vw, 32px);
  color: var(--navy);
  font-weight: 500;
}

/* ─── Contact Page ─── */
.contact-section {
  background: var(--cream-soft);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: start;
}
.contact-form-wrap h2 {
  font-size: clamp(28px, 3vw, 36px);
  margin-bottom: 8px;
}
.contact-form-intro {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 32px;
}
.req-mark { color: var(--brass); margin-left: 2px; font-weight: 700; }
.form-optional { color: var(--ink-soft); font-weight: 400; font-size: 12px; }

.contact-form .form-row { margin-bottom: 22px; }
.contact-form .form-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-field { display: flex; flex-direction: column; }
.form-field label {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 8px;
}
.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=tel],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: border-color var(--t), box-shadow var(--t);
}
.form-field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--brass-light); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(128, 100, 48, 0.12);
}
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}
.error-msg {
  display: block;
  font-size: 12.5px;
  color: #b3261e;
  margin-top: 6px;
  min-height: 1em;
  line-height: 1.3;
}

/* Consent checkbox */
.form-row--consent { display: block; }
.consent-check {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.5;
  cursor: pointer;
}
.consent-check input[type=checkbox] {
  margin-top: 3px;
  width: 18px; height: 18px;
  accent-color: var(--brass);
  cursor: pointer;
  flex-shrink: 0;
}

/* Submit row */
.form-row--submit {
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.form-row--submit button[disabled] {
  background: var(--ink-soft) !important; cursor: not-allowed; opacity: .7;
}
.form-fineprint {
  font-size: 12px; color: var(--ink-soft); line-height: 1.5;
  max-width: 38ch;
}

/* Live status */
.form-status {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.5;
}
.form-status.is-success {
  padding: 18px 22px;
  background: rgba(128, 100, 48, 0.08);
  border-left: 3px solid var(--brass);
  color: var(--navy);
  font-weight: 500;
}

/* Honeypot — hidden from humans, visible to bots */
.hp-trap {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ─── Contact info sidebar ─── */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 80px;
}
.info-card {
  padding: 24px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
}
.info-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft);
  margin-bottom: 8px;
}
.info-card p { font-size: 15px; color: var(--ink); line-height: 1.5; margin-bottom: 4px; }
.info-card .info-icon {
  color: var(--brass);
  margin-bottom: 12px;
}
.info-link {
  color: var(--navy);
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.info-link:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
}
.info-address {
  font-style: normal;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 8px;
}
.info-hours {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ─── Map ─── */
.map-section { background: var(--cream); }
.map-embed { display: block; }
.map-embed iframe { display: block; width: 100%; }

/* ─── Amenities Page ─── */
.tech-band {
  background: var(--navy);
  color: var(--white);
  padding: clamp(56px, 6vw, 88px) 0 clamp(80px, 10vw, 140px);
}
.tech-band h2 { color: var(--white); }
.tech-band h2 em { color: var(--brass-light); font-style: italic; font-weight: 400; }
.tech-band .section-sub { color: rgba(255,255,255,.85); }
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.tech-grid li {
  padding: 32px 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  transition: border-color var(--t), background var(--t);
}
.tech-grid li:hover { border-color: var(--brass-light); background: rgba(255,255,255,.06); }
.tech-grid svg { color: var(--brass-light); margin-bottom: 18px; }
.tech-grid h3 {
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 17px; font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 12px;
}
.tech-grid p {
  color: rgba(255,255,255,.78);
  font-size: 14.5px; line-height: 1.55;
}

/* Feature rows (alternating image+text) */
.feature-rows {
  background: var(--cream-soft);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 80px;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row--flip .feature-row-media { order: 2; }
.feature-row-media {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.feature-row-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.feature-row-body h3 {
  font-size: clamp(28px, 3vw, 40px);
  margin: 12px 0 20px;
  letter-spacing: -.005em;
}
.feature-row-body p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 50ch;
}
.feature-list {
  display: flex; flex-direction: column; gap: 8px;
}
.feature-list li {
  font-size: 14.5px;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 1px; background: var(--brass);
}

/* In-home features (4-column list, no images) */
.home-features {
  background: var(--cream-soft);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.home-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.home-feature-col {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  column-gap: 28px;
  padding: 36px 40px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
}
.home-feature-icon {
  grid-row: span 2;
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream);
  border-radius: 50%;
  color: var(--brass);
}
.home-feature-col h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--navy);
  margin: 4px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.home-feature-col ul {
  display: flex; flex-direction: column; gap: 10px;
}
.home-feature-col li {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}
.home-feature-col li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 1px; background: var(--brass);
}
.meta-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--brass);
  border-radius: 999px;
  vertical-align: 2px;
  font-weight: 600;
}

/* Community section (4-card photo grid) */
.community-section {
  background: var(--cream);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.comm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.comm-card {
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.comm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(13,58,82,.08);
}
.comm-img { aspect-ratio: 16/10; overflow: hidden; }
.comm-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.comm-card:hover .comm-img img { transform: scale(1.04); }
.comm-body { padding: 28px 32px; }
.comm-body h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  margin: 8px 0 12px;
  letter-spacing: -.005em;
}
.comm-body p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ─── Virtual Tour Promo Band (Amenities page) ─── */
.vt-promo {
  background: var(--cream);
  padding: clamp(48px, 5vw, 72px) 0;
  border-top: 1px solid var(--line);
}
.vt-promo-inner {
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: 48px;
  align-items: center;
}
.vt-promo-text h2 {
  font-size: clamp(28px, 3vw, 42px);
  margin: 8px 0 16px;
  letter-spacing: -.005em;
}
.vt-promo-text h2 em {
  font-style: italic; font-weight: 400; color: var(--brass);
}
.vt-promo-text p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 60ch;
}

/* ─── Virtual Tours Page ─── */
.vt-section {
  background: var(--cream-soft);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.vt-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 32px;
}
.vt-tab {
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--line);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.vt-tab:hover { border-bottom-color: var(--brass-light); }
.vt-tab.is-active {
  border-color: var(--brass);
  border-bottom-color: var(--brass);
  background: var(--cream);
}
.vt-tab-eyebrow {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
}
.vt-tab-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--navy);
  line-height: 1.2;
}
.vt-panel { background: var(--navy-deep); }
.vt-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.vt-iframe-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.vt-attribution {
  background: var(--navy-deep);
  color: rgba(255,255,255,.65);
  font-size: 12px;
  text-align: center;
  padding: 14px 16px;
  margin: 0;
}
.vt-attribution a {
  color: var(--brass-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vt-attribution a:hover { color: var(--white); }

/* ─── Photo Gallery Page ─── */
.gallery-section {
  background: var(--cream-soft);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-tile { position: relative; overflow: hidden; }
.gallery-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.gallery-trigger img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.gallery-trigger:hover img,
.gallery-trigger:focus-visible img { transform: scale(1.05); }
.gallery-trigger::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8,44,64,.78));
  transition: opacity var(--t);
}
.gallery-cap {
  position: absolute; left: 20px; bottom: 16px;
  z-index: 2;
  color: var(--white);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(8,44,64,.6);
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,44,64,.96);
  padding: 32px;
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
  max-width: min(1200px, 92vw);
  max-height: 92vh;
  display: flex; flex-direction: column;
  align-items: center;
  margin: 0;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: calc(92vh - 60px);
  object-fit: contain;
  display: block;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.lightbox-caption {
  margin-top: 16px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  text-align: center;
  max-width: 60ch;
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(255,255,255,.1);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.2);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ─── Location Page ─── */
.location-tier-banner { margin-bottom: 0; min-height: 440px; }
.location-tier-banner::after { display: none; }

/* Lifestyle banner — wide image, narrower vertically than tier banners */
.lifestyle-banner-wrap { background: var(--cream); }
.lifestyle-banner {
  margin-bottom: 0;
  min-height: 360px;
}
.lifestyle-banner::after {
  background: linear-gradient(90deg, rgba(8,44,64,.78) 0%, rgba(8,44,64,.55) 45%, rgba(8,44,64,.20) 100%);
}
.lifestyle-banner .tier-banner-inner {
  padding-top: 64px; padding-bottom: 56px;
  max-width: 640px;
}

.drive-times {
  background: var(--cream);
  padding: clamp(56px, 6vw, 88px) 0;
}
.drive-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
  margin-top: 24px;
}
.drive-stats li {
  padding: 32px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
}
.drive-stats strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(56px, 6vw, 76px);
  line-height: 1;
  color: var(--navy);
}
.dt-unit {
  display: block;
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 6px 0 14px;
  font-weight: 600;
}
.dt-label {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.map-embed--tall iframe { height: 600px; }

.nearby-section {
  background: var(--cream-soft);
  padding: clamp(56px, 6vw, 88px) 0 clamp(80px, 10vw, 140px);
}
.nearby-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.nearby-card {
  padding: 32px 32px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
}
.nearby-icon {
  color: var(--brass);
  margin-bottom: 14px;
}
.nearby-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--navy);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.nearby-list {
  display: flex; flex-direction: column; gap: 10px;
}
.nearby-list li {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}
.nearby-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 1px; background: var(--brass);
}

.why-section {
  background: var(--cream);
  padding: clamp(56px, 6vw, 88px) 0 clamp(80px, 10vw, 140px);
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.why-grid h2 {
  font-size: clamp(36px, 4.5vw, 52px);
  margin-top: 8px;
}
.why-grid h2 em {
  font-style: italic; font-weight: 400; color: var(--brass);
}
.why-body p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 18px;
  max-width: 60ch;
}
.why-body p:last-child { margin-bottom: 0; }

/* Building amenities list (below community cards) */
.building-amenities {
  margin-top: 64px;
  padding: 40px 44px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
}
.building-amenities h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 32px);
  color: var(--navy);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.amenity-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.amenity-bullet-list {
  columns: 2;
  column-gap: 40px;
}
/* Inside the two-column split each list runs as a single column */
.amenity-cols .amenity-bullet-list { columns: 1; }
.amenity-bullet-list--plus {
  padding-left: 40px;
  border-left: 1px solid var(--line);
}
.amenity-bullet-list li {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
  padding-left: 22px;
  margin-bottom: 12px;
  position: relative;
  break-inside: avoid;
}
.amenity-bullet-list li:last-child { margin-bottom: 0; }
.amenity-bullet-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 1px; background: var(--brass);
}

/* Services band */
.services-band {
  background: var(--cream-soft);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.svc-grid li {
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color var(--t);
}
.svc-grid li:hover { border-color: var(--brass); }
.svc-grid svg { color: var(--brass); margin-bottom: 14px; }
.svc-grid h3 {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.svc-grid p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .header-inner { gap: 24px; }
  .primary-nav ul { gap: 24px; }
  .welcome-grid, .amen-grid, .loc-grid { grid-template-columns: 1fr; gap: 36px; }
  .fp-grid { grid-template-columns: 1fr 1fr; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .tier-details { grid-template-columns: 1fr; gap: 36px; padding: 32px 28px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-info { position: static; }
  .info-card { text-align: center; border-left: 1px solid var(--line); border-top: 3px solid var(--brass); }
  .info-card .info-icon { display: flex; justify-content: center; }
  .tech-grid { grid-template-columns: 1fr 1fr; }
  .home-feature-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .home-feature-col { padding: 28px 28px; column-gap: 20px; }
  .drive-stats { grid-template-columns: 1fr 1fr; }
  .nearby-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; gap: 24px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .vt-tabs { grid-template-columns: 1fr 1fr; }
  .vt-promo-inner { grid-template-columns: 1fr; gap: 24px; }
  .comm-grid { grid-template-columns: 1fr; }
  .building-amenities { padding: 32px 28px; }
  .amenity-bullet-list { columns: 1; }
  .amenity-cols { grid-template-columns: 1fr; gap: 0; }
  .amenity-bullet-list--plus {
    padding-left: 0;
    padding-top: 24px;
    margin-top: 24px;
    border-left: none;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 768px) {
  .filter-bar { position: static; }
  .filter-inner { gap: 12px; }
  .filter-status { width: 100%; margin-left: 0; }
  .contact-form .form-row--split { grid-template-columns: 1fr; gap: 22px; }
  .form-row--submit { flex-direction: column; align-items: stretch; }
  .form-row--submit .btn { width: 100%; }
  .form-fineprint { max-width: none; }
  .tech-grid { grid-template-columns: 1fr; }
  .tech-grid li { text-align: center; }
  .tech-grid svg { display: block; margin-left: auto; margin-right: auto; }
  .home-feature-grid { grid-template-columns: 1fr; }
  .home-feature-col { grid-template-columns: 1fr; row-gap: 12px; text-align: center; }
  .home-feature-icon { grid-row: auto; margin-left: auto; margin-right: auto; }
  .home-feature-col li { padding-left: 0; }
  .home-feature-col li::before { display: none; }
  .drive-stats { grid-template-columns: 1fr; gap: 16px; }
  .nearby-grid { grid-template-columns: 1fr; }
  .nearby-card { text-align: center; border-left: 1px solid var(--line); border-top: 3px solid var(--brass); }
  .nearby-icon { display: flex; justify-content: center; }
  .nearby-list { align-items: center; }
  .nearby-list li { padding-left: 0; }
  .nearby-list li::before { display: none; }
  .map-embed--tall iframe { height: 400px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  /* Mobile: reserve bottom space and move the prev/next controls below the image */
  .lightbox { padding: 16px 14px 92px; }
  .lightbox-figure { max-width: 94vw; max-height: calc(100dvh - 120px); }
  .lightbox-figure img { max-height: calc(100dvh - 190px); }
  .lightbox-nav { top: auto; bottom: 22px; transform: none; }
  .lightbox-prev { left: calc(50% - 56px); right: auto; }
  .lightbox-next { left: calc(50% + 8px); right: auto; }
  .quick-links-band { grid-template-columns: 1fr; }
  .vt-tabs { grid-template-columns: 1fr; }
  .utility { font-size: 12px; }
  .utility-inner { justify-content: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
  .utility-sep { display: inline; }
  .utility-spacer { display: none; }
  .utility-street { display: none; }
  .header-inner { grid-template-columns: auto 1fr; }
  .primary-nav { display: none; }
  .brand-logo { width: 205px; }
  .hero { min-height: calc(100svh - 95px); }
  .hero-content { padding-block: 44px; }
  .hero-eyebrow { letter-spacing: .3em; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .fp-grid { grid-template-columns: 1fr; }
  .amen-list { grid-template-columns: 1fr; }
  .amen-list li { text-align: center; }
  .amen-list svg { display: block; margin-left: auto; margin-right: auto; }
  .loc-stats { grid-template-columns: 1fr; gap: 16px; }
  .loc-stats li { display: flex; align-items: baseline; gap: 16px; }
  .loc-stats strong { font-size: 40px; }
  .gal-grid { grid-template-columns: 1fr 1fr; }
  .cta-inner { flex-direction: column; text-align: center; }
  .cta-actions { width: 100%; flex-direction: column; }
  .cta-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 32px; text-align: center; }
  .footer-logo { margin-left: auto; margin-right: auto; }
  .footer-compliance { display: flex; flex-direction: column; align-items: center; }
  .footer-compliance .eho { margin-left: auto; margin-right: auto; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ─── LEGAL / POLICY PAGES (privacy, terms, accessibility) ─── */
.legal-section { padding: 64px 0 96px; background: #fbf9f4; }
.legal-content { max-width: 72ch; margin: 0 auto; color: #2b2b2b; line-height: 1.7; font-size: 16px; }
.legal-content h2 { font-family: var(--font-serif); font-size: 28px; font-weight: 500; margin: 48px 0 16px; color: var(--navy); letter-spacing: .005em; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; margin: 28px 0 10px; color: var(--navy); }
.legal-content p { margin: 0 0 16px; }
.legal-content ul, .legal-content ol { margin: 0 0 20px 20px; padding: 0; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }
.legal-content a:hover, .legal-content a:focus { color: var(--navy); }
.legal-meta { font-size: 13px; color: #6b6b6b; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid #e5e0d4; letter-spacing: .04em; text-transform: uppercase; }
.legal-content strong { color: var(--navy); }
@media (max-width: 720px) {
  .legal-section { padding: 40px 0 72px; }
  .legal-content h2 { font-size: 24px; }
}

/* ─── Floor plan clickable image button ─── */
.fp-img-btn {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  cursor: zoom-in;
  display: block;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fp-img-btn:hover {
  transform: scale(1.015);
}
.fp-img-btn:focus-visible {
  outline: 2px solid var(--brass, #b89a5b);
  outline-offset: 3px;
}
.fp-img-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom left, rgba(0,0,0,0.35) 0, rgba(0,0,0,0) 50px) top right / 50px 50px no-repeat;
  opacity: 0;
  transition: opacity .2s ease;
}
.fp-img-btn:hover::after,
.fp-img-btn:focus-visible::after {
  opacity: 1;
}
.fp-img-btn .fp-zoom-hint {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.fp-img-btn:hover .fp-zoom-hint,
.fp-img-btn:focus-visible .fp-zoom-hint {
  opacity: 1;
}

/* ─── WCAG 1.4.1 — Inline body-text links must be distinguishable without color alone ─── */
/* Targets phone, email, and informational links inside paragraph contexts.
   Excludes navigation, buttons, footer columns, and decorative arrow links. */
.page-hero-sub a,
.page-hero-note a,
.contact-form-intro a,
.welcome-body p a,
.section-sub a,
.info-link,
.info-address ~ p a,
.compliance-text a,
.tier-banner p a,
.cta-band p a,
.amen-intro p a,
.loc-text p a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.page-hero-sub a:hover,
.page-hero-note a:hover,
.contact-form-intro a:hover,
.welcome-body p a:hover,
.info-link:hover {
  text-decoration-thickness: 2px;
}

/* ─── Mobile Navigation (hamburger + slide-in drawer) ─── */
.mobile-nav-toggle { display: none; }
.mobile-nav-panel { display: none; }

/* Inner drawer styles (only rendered when panel is shown at <=768px) */
.mobile-nav-close {
  align-self: flex-end;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: none; border: 0; cursor: pointer;
  margin: -6px -6px 6px 0;
}
.mobile-nav-links { display: flex; flex-direction: column; }
.mobile-nav-links > a {
  display: block;
  color: #fff;
  font-size: 15px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 15px 2px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: color var(--t);
}
.mobile-nav-links > a:hover,
.mobile-nav-links > a:focus-visible,
.mobile-nav-links > a[aria-current="page"] { color: var(--brass-light); }
.mobile-nav-group {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column; gap: 12px;
}
.mobile-nav-group-label {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-light); font-weight: 600;
}
.mobile-nav-group a {
  color: rgba(255,255,255,.85);
  font-size: 14px; letter-spacing: .04em;
  padding-left: 4px;
  transition: color var(--t);
}
.mobile-nav-group a:hover, .mobile-nav-group a:focus-visible { color: #fff; }
.mobile-nav-cta { margin-top: 24px; width: 100%; }
.mobile-nav-phone {
  margin-top: 18px; text-align: center;
  color: var(--brass-light);
  font-size: 16px; font-weight: 600; letter-spacing: .04em;
}

@keyframes mnFade { from { opacity: 0 } to { opacity: 1 } }

@media (max-width: 768px) {
  /* Header: centered brand lockup, hamburger pinned right as a bordered control */
  .site-header { padding: 6px 0; position: static; }
  .header-inner {
    display: flex; align-items: center; justify-content: center;
    position: relative; gap: 16px;
  }
  .brand { margin: 0 auto; }
  .site-header .header-inner > .btn-primary { display: none; }
  .mobile-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px;
    color: var(--navy); background: none;
    border: 1px solid rgba(13, 58, 82, .22); border-radius: 9px;
    cursor: pointer;
    transition: color var(--t), border-color var(--t), background var(--t);
  }
  .mobile-nav-toggle:hover,
  .mobile-nav-toggle:focus-visible {
    color: var(--brass); border-color: var(--brass);
    background: rgba(200, 168, 104, .08);
  }
  .mobile-nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(8,44,64,.55);
    z-index: 190;
    animation: mnFade .25s var(--ease);
  }
  .mobile-nav-panel {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(84vw, 340px);
    background: var(--navy-deep);
    color: #fff;
    z-index: 200;
    padding: 22px 26px 32px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s var(--ease);
    box-shadow: -12px 0 40px rgba(0,0,0,.28);
  }
  .mobile-nav-panel.is-open { transform: translateX(0); }
}

/* Respect reduced-motion: no slide, just appear */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-panel { transition: none; }
  .mobile-nav-backdrop { animation: none; }
}

/* ─── Google Reviews band (public) ─── */
.reviews-band { background: var(--cream-soft); padding: 88px 0; border-top: 1px solid var(--line); }
.reviews-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.reviews-band .section-eyebrow {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin-bottom: 14px;
}
.reviews-head h2 { font-size: clamp(30px, 4vw, 44px); color: var(--navy); margin-bottom: 20px; line-height: 1.05; }
.reviews-summary { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.reviews-avg { font-size: 30px; font-weight: 700; color: var(--navy); font-family: var(--font-serif, 'Cormorant Garamond', serif); line-height: 1; }
.reviews-count { font-size: 14px; color: var(--ink-soft); letter-spacing: .02em; }
.rev-stars { display: inline-flex; gap: 2px; }
.rev-stars svg.on { fill: var(--brass-light); }
.rev-stars svg.off { fill: #d8cfbb; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 28px 26px; margin: 0; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 10px 30px rgba(43, 57, 77, 0.06);
}
.review-card blockquote {
  margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink);
  font-style: normal; flex: 1;
}
.review-card figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 14px; }
.review-author { font-weight: 600; font-size: 14px; color: var(--navy); letter-spacing: .02em; }
.review-date { font-size: 12px; color: var(--ink-soft); }
.reviews-cta { text-align: center; margin-top: 44px; }
@media (max-width: 1100px) { .reviews-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
@media (max-width: 768px) {
  .reviews-band { padding: 60px 0; }
  .review-card { text-align: center; align-items: center; }
  .review-card figcaption { align-items: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AVAILABLE RESIDENCES — stacked listing rows (2026-09-01)
   Rebuilt from Michelle's 09-01 notes: one residence per row stacked down the
   page like the old site (plan left, details right), the tier named on every
   row, and a deliberately quiet treatment — no filled bars, no oversized
   numerals, no phone button. Appended after .fp-img-btn so the plan image,
   which is also a lightbox button, keeps its own background and padding.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Promotion band — deliberately the loudest thing on the page ───
   Client 2026-09-01: "The promotion should be larger more eye catching… any
   promotion should be eye catching." The only brass fill in the layout, with
   navy on top for contrast, so it reads as a feature strip and not another
   content band. Soft everywhere else; this one is meant to stop you. */
.promo-ribbon {
  background: var(--brass-light);
  border-top: 1px solid rgba(8, 44, 64, .14);
  border-bottom: 1px solid rgba(8, 44, 64, .14);
}
.promo-ribbon-inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 2.4vw, 30px); flex-wrap: wrap;
  padding: clamp(28px, 3.4vw, 46px) 0;
  text-align: center;
}
.promo-ribbon-label {
  flex-shrink: 0;
  padding: 7px 17px;
  border: 1px solid rgba(8, 44, 64, .42);
  border-radius: 999px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  color: var(--navy);
}
.promo-ribbon-text {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  color: var(--navy);
  letter-spacing: .01em;
}
.promo-ribbon-cta {
  flex-shrink: 0;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
  padding: 15px 30px;
}
.promo-ribbon-cta:hover {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

/* ─── Section band ─── */
.avail-section {
  background: var(--white);
  padding: clamp(48px, 6vw, 76px) 0;
}
.avail-section .section-head--minor {
  border-top: 0;
  padding-top: 0;
  margin-bottom: 34px;
  max-width: 760px;
}
.avail-section .section-head--minor h2 {
  font-size: clamp(32px, 3.6vw, 46px);
  color: var(--navy);
  margin: 6px 0 0;
}
.avail-section .section-head--minor h2 em {
  font-style: italic; font-weight: 400; color: var(--brass);
}

/* ─── One residence per row, stacked ─── */
.avail-list { display: flex; flex-direction: column; gap: 26px; }
.avail-list + .avail-list { margin-top: 26px; }

.avail-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color .25s ease;
}
.avail-row:hover { border-color: rgba(128, 100, 48, .4); }

/* Plan image (also the lightbox trigger — restate what .fp-img-btn resets) */
.avail-row .avail-row-img {
  background: var(--cream-soft);
  padding: 26px;
  border-right: 1px solid var(--line);
  cursor: zoom-in;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.avail-row .avail-row-img:hover { transform: none; }
.avail-row .avail-row-img img {
  width: auto; max-width: 100%;
  height: auto; max-height: 300px;
  display: block; margin: 0 auto;
}

.avail-row-body {
  padding: 30px 32px 32px;
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.avail-row-tier {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: var(--brass);
  margin-bottom: 8px;
}
.avail-row-body h3 {
  font-size: clamp(26px, 2.4vw, 32px);
  color: var(--navy);
  font-weight: 400;
  margin: 0;
}
.avail-row-plan { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.avail-row-meta {
  font-size: 14.5px; color: var(--ink-soft);
  margin: 8px 0 20px;
}

/* ─── Spec list — the old site's line items, quietly set ─── */
.avail-specs {
  width: 100%;
  margin: 0 0 24px;
  border-top: 1px solid var(--line);
}
.avail-specs > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.avail-specs dt {
  margin: 0;
  font-size: 14px; color: var(--ink-soft); font-weight: 400;
}
.avail-specs dd {
  margin: 0;
  font-size: 14.5px; color: var(--navy); font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The total is the number that matters — carried by weight and a hairline,
   not by a filled bar. */
.avail-specs .avail-specs-total dt,
.avail-specs .avail-specs-total dd {
  color: var(--navy); font-weight: 600;
}
.avail-specs .avail-specs-total dd { font-size: 17px; }
.avail-specs .avail-specs-deposit dt,
.avail-specs .avail-specs-deposit dd {
  font-size: 13px; color: var(--ink-soft); font-weight: 400;
}
.avail-specs > div:last-child { border-bottom: 0; }

.avail-row .btn {
  margin-top: auto;
  border-color: rgba(128, 100, 48, .45);
  color: var(--navy);
  background: transparent;
  font-size: 12px;
  padding: 14px 26px;
}
.avail-row .btn:hover {
  background: var(--cream);
  border-color: var(--brass);
  color: var(--navy);
}
.avail-rent { font-size: 16px; color: var(--navy); font-weight: 500; margin: 0 0 24px; }

/* ─── Zoom affordance: clear on hover, but softened to match ─── */
.avail-row .avail-row-img::after {
  background: rgba(13, 58, 82, .34);
  transition: opacity .22s ease;
}
.avail-row .avail-row-img .fp-zoom-hint {
  /* ::after paints above the children — without this the pill renders through it. */
  z-index: 2;
  top: 50%; left: 50%; right: auto;
  transform: translate(-50%, -50%) scale(.94);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px 10px 15px;
  background: var(--white);
  border: 1px solid var(--brass-light);
  border-radius: 999px;
  color: var(--navy);
  box-shadow: 0 6px 20px rgba(8, 44, 64, .18);
  transition: opacity .22s ease, transform .22s ease;
}
.avail-row .avail-row-img .fp-zoom-hint svg {
  width: 17px; height: 17px; stroke-width: 2; flex-shrink: 0;
  color: var(--brass);
}
.avail-row .avail-row-img .fp-zoom-hint::after {
  content: "View Floor Plan";
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.avail-row .avail-row-img:hover .fp-zoom-hint,
.avail-row .avail-row-img:focus-visible .fp-zoom-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .avail-row .avail-row-img .fp-zoom-hint,
  .avail-row .avail-row-img:hover .fp-zoom-hint,
  .avail-row .avail-row-img:focus-visible .fp-zoom-hint { transform: translate(-50%, -50%); }
}
/* Touch never hovers — pin a compact version in view, no wash. */
@media (hover: none) {
  .avail-row .avail-row-img::after { opacity: 0; }
  .avail-row .avail-row-img .fp-zoom-hint {
    opacity: 1;
    top: auto; bottom: 10px; left: auto; right: 10px;
    transform: none;
    padding: 7px 13px 7px 10px; gap: 6px;
  }
  .avail-row .avail-row-img .fp-zoom-hint svg { width: 15px; height: 15px; }
  .avail-row .avail-row-img .fp-zoom-hint::after { font-size: 9.5px; letter-spacing: .12em; }
}

/* The status chip on the building cards is a pill, not a bar
   (.building-body is a stretch flex column). */
.building-body .avail-status { align-self: flex-start; }

@media (max-width: 900px) {
  .avail-row { grid-template-columns: 1fr; }
  .avail-row .avail-row-img {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 22px;
  }
  .avail-row-body { padding: 26px 24px 28px; }
  .avail-row .btn { width: 100%; text-align: center; justify-content: center; }
}
@media (max-width: 768px) {
  .avail-section { padding: 44px 0; }
  .avail-list { gap: 20px; }
  .promo-ribbon-inner { flex-direction: column; gap: 14px; padding: 30px 0; }
  .promo-ribbon-cta { width: 100%; }
}

/* ─── 404 — kept inside the site's own look so a bad link never feels like
   it left the website (2026-09-01) ─── */
.notfound-section {
  background: var(--white);
  padding: clamp(48px, 6vw, 76px) 0 clamp(56px, 7vw, 96px);
}
.notfound-section .section-head--minor {
  border-top: 0; padding-top: 0; margin-bottom: 34px; max-width: 760px;
}
.notfound-section .section-head--minor h2 {
  font-size: clamp(30px, 3.4vw, 44px); color: var(--navy); margin: 6px 0 0;
}
.notfound-section .section-head--minor h2 em {
  font-style: italic; font-weight: 400; color: var(--brass);
}
.notfound-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.notfound-links li { margin: 0; padding: 0; }
.notfound-links li::before { content: none; }
.notfound-links a {
  display: flex; flex-direction: column; gap: 7px;
  height: 100%;
  padding: 24px 26px 22px;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease;
}
.notfound-links a:hover {
  border-color: var(--brass-light);
  background: var(--cream);
}
.notfound-link-label {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--brass);
}
.notfound-link-blurb {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}
.notfound-link-arrow {
  margin-top: auto; padding-top: 10px;
  font-size: 15px; color: var(--navy);
  transition: transform .25s ease;
}
.notfound-links a:hover .notfound-link-arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .notfound-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .notfound-links { grid-template-columns: 1fr; gap: 14px; }
}

/* Programmatically focused headings (e.g. the /thank-you/ h1, focused so screen
   readers announce the confirmation) should not paint a visible focus ring —
   they are tabindex="-1" so a keyboard user can never land on them by tabbing. */
[tabindex="-1"]:focus { outline: none; }