/* GENERATED by scripts/stamp-assets.mjs — do not edit. Edit the unstamped file instead. */
/* ==========================================================================
   The Urban at College Station — design system
   Editorial collegiate: forest green / warm sand / cream canvas.
   Cormorant Garamond (display serif) + Plus Jakarta Sans (body, nav, kickers).
   DESIGN.md explains the intent; this file is the source of truth.
   Edit THIS file. css/styles.<stamp>.css copies are generated by `npm run stamp`.
   ========================================================================== */

:root {
  /* ---- colour ---- */
  --green-forest: #204737;   /* hero band, CTA block, panels, badges */
  --green-subtle: #17382b;   /* darker tonal green: footer, hovers on green */
  --tan-sand: #D5B88D;       /* buttons, badges, accent rules — never text on cream (1.8:1) */
  --tan-hover: #c4a578;
  --tan-ink: #8A6B3D;        /* tan for icons/small text on cream (4.7:1) */
  --tan-ink-deep: #765A30;   /* bronze small text on cream-surface (5.6:1) */
  --cream-ground: #FBF9F5;   /* page canvas */
  --cream-surface: #F3EFEA;  /* tinted cards and bands */
  --ink: #1B211E;            /* headings and high-contrast text */
  --ink-muted: #546059;      /* body copy, captions (6.2:1 on cream) */
  --white: #FFFFFF;
  --on-green: #FBF9F5;       /* text on forest green (9.9:1) */
  --on-green-muted: #C9D3CC; /* secondary text on forest green (6.8:1) */
  --line: #E2DBD0;           /* hairlines on cream */
  --line-green: rgb(213 184 141 / 0.3); /* hairlines on green */

  /* ---- type ---- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --step--2: 0.6875rem;                                 /* 11px micro caps */
  --step--1: 0.8125rem;                                 /* 13px kickers, captions */
  --step-0: 1rem;                                       /* body */
  --step-1: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);  /* lede */
  --step-2: clamp(1.4rem, 1.25rem + 0.6vw, 1.7rem);     /* card titles */
  --step-3: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);      /* h3 / small h2 */
  --step-4: clamp(2.4rem, 1.7rem + 2.8vw, 3.75rem);     /* section h2 */
  --step-5: clamp(2.75rem, 1.8rem + 4vw, 4.75rem);      /* h1 */

  /* ---- space / shape ---- */
  /* Fluid spacing: every step grows in a straight line from a 360px phone to a
     1440px laptop, keeps growing a little on large monitors, then stops at its
     cap. Use these for layout rhythm (gaps, section padding, margins between
     blocks); keep fixed rem only for component internals and tap targets. */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: clamp(76rem, 52rem + 25vw, 80rem);  /* 76rem to 1440px, then 80rem (max-w-7xl) from ~1790px: content never sprawls on wide screens */
  --wrap-narrow: 46rem;                       /* reading measure: never widens */
  --space-3xs: clamp(0.25rem, 0.2083rem + 0.1852vw, 0.4375rem);
  --space-2xs: clamp(0.5rem, 0.4167rem + 0.3704vw, 0.875rem);
  --space-xs: clamp(0.75rem, 0.6667rem + 0.3704vw, 1.125rem);
  --space-s: clamp(1rem, 0.8333rem + 0.7407vw, 1.75rem);
  --space-s-m: clamp(1.25rem, 1rem + 1.1111vw, 2.25rem);
  --space-m: clamp(1.75rem, 1.5rem + 1.1111vw, 3rem);
  --space-l: clamp(2.5rem, 2rem + 2.2222vw, 5rem);
  --space-xl: clamp(3.5rem, 2.6667rem + 3.7037vw, 7.5rem);
  --space-section: clamp(4rem, 2.8333rem + 5.1852vw, 9.5rem);
  --radius: 4px;
  --radius-s: 2px;
  --header-h: 5rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 1px 2px rgb(27 33 30 / 0.05), 0 12px 32px -12px rgb(27 33 30 / 0.18);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* hardening A4: classes that set display must not defeat [hidden] */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--cream-ground);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; } /* standard I6: width/height attributes never stretch a photo */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.15; }
h4 { font-size: var(--step-1); line-height: 1.25; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--ink); text-decoration-color: var(--tan-sand); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
strong { color: var(--ink); font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--tan-ink); outline-offset: 3px; }
.on-green :focus-visible, .site-footer :focus-visible { outline-color: var(--tan-sand); }
::selection { background: var(--tan-sand); color: var(--ink); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  padding: 0.75rem 1.1rem; background: var(--ink); color: var(--white);
  font-weight: 600; text-decoration: none; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }
.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;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-l); }
.section--surface { background: var(--cream-surface); }
.section--flush { padding-block: 0; }

.on-green { background: var(--green-forest); color: var(--on-green-muted); }
.on-green h1, .on-green h2, .on-green h3, .on-green h4, .on-green strong { color: var(--on-green); }
.on-green a:not(.btn) { color: var(--on-green); }

/* foliage line art layered into green panels (decorative, CSS only) */
.botanical { position: relative; isolation: isolate; overflow: hidden; }
.botanical::before,
.botanical::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: clamp(9rem, 22vw, 16rem); aspect-ratio: 320 / 420;
  background: url("../assets/img/botanical.svg") no-repeat center / contain;
  opacity: 0.32;
}
.botanical::before { left: -2.5rem; bottom: -1.5rem; transform: rotate(8deg); }
.botanical::after { right: -3rem; top: -2rem; transform: rotate(196deg) scaleX(-1); opacity: 0.2; }
.botanical--one::after { display: none; }

.split { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 1.6fr 1fr; }
  .split--wide-text { grid-template-columns: 1fr 1.6fr; }
  .split--top { align-items: start; }
}

/* full-bleed split: two panels that run edge to edge (pool, site plan) */
.bleed { display: grid; }
.bleed > * { min-width: 0; }
@media (min-width: 900px) {
  .bleed { grid-template-columns: 1fr 1fr; }
  .bleed--40 { grid-template-columns: 2fr 3fr; }
  .bleed--60 { grid-template-columns: 3fr 2fr; }
}
.panel { padding: var(--space-l) var(--gutter); }
@media (min-width: 900px) { .panel { padding: clamp(3rem, 2rem + 3vw, 5.5rem) clamp(2rem, 1rem + 3.5vw, 5rem); } }
.bleed-media { position: relative; min-height: 18rem; background: var(--cream-surface); overflow: hidden; }
.bleed-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
@media (max-width: 899px) { .bleed-media { aspect-ratio: 4 / 3; min-height: 0; } }

.grid-3 { display: grid; gap: var(--space-m); }
.grid-2 { display: grid; gap: var(--space-m); }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Type helpers: kicker, rule, lede
   ========================================================================== */
.kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) 1rem; /* rule drops under a kicker that wraps */
  margin: 0 0 var(--space-s);
  color: var(--ink-muted);
  font-family: var(--font-body); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4;
}
.kicker::after { content: ""; width: 2.75rem; height: 2px; background: var(--tan-sand); flex: none; }
.on-green .kicker { color: var(--on-green); }
.kicker--plain::after { display: none; }

/* short sand rule anchoring a section title (sits above the heading) */
.rule-top::before {
  content: ""; display: block; width: 2.75rem; height: 2px;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--tan-sand);
}
.lede { font-size: var(--step-1); line-height: 1.6; max-width: 38rem; }
.measure { max-width: 38rem; }
.center { text-align: center; }
.center .rule-top::before, .rule-top.center::before { margin-inline: auto; }
.center .lede, .center .measure { margin-inline: auto; }
.caps {
  font-family: var(--font-body); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
}

/* ==========================================================================
   Buttons and links
   ========================================================================== */
.btn {
  --btn-bg: var(--tan-sand); --btn-fg: var(--ink); --btn-bd: var(--tan-sand);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 2.875rem; padding: 0.85rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius-s);
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { --btn-bg: var(--tan-hover); --btn-bd: var(--tan-hover); }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 3.25rem; padding-inline: 2rem; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--cream-ground); --btn-bd: var(--ink); }
.on-green .btn--outline { --btn-fg: var(--on-green); --btn-bd: rgb(251 249 245 / 0.6); } /* A6: ghost button variant per dark band */
.on-green .btn--outline:hover { --btn-bg: var(--on-green); --btn-fg: var(--green-forest); --btn-bd: var(--on-green); }
.btn--block { width: 100%; }

/* trailing arrow — add .arrow to any .btn or .link-arrow */
.arrow::after {
  content: ""; width: 0.95em; height: 0.95em; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9.5 3.5 14 8l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9.5 3.5 14 8l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease);
}
.arrow:hover::after { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 2.75rem; padding-block: 0.5rem;
  color: var(--ink); text-decoration: none;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  background: linear-gradient(var(--tan-sand), var(--tan-sand)) left calc(100% - 0.55rem) / 100% 1px no-repeat;
}
.on-green .link-arrow { color: var(--on-green); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); margin-top: var(--space-m); }
.center .actions, .actions.center { justify-content: center; }

.badge {
  display: inline-block; padding: 0.55rem 1.1rem;
  background: var(--tan-sand); color: var(--ink);
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.3;
  border-radius: var(--radius-s);
}

/* ==========================================================================
   Icons (inline SVG sprite, standard D1)
   ========================================================================== */
.icon { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 2.6rem; height: 2.6rem; stroke-width: 1; }

/* ==========================================================================
   Header (sticky, transparent → cream glass on scroll)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header.is-scrolled {
  background: rgb(251 249 245 / 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 0 var(--line);
}
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }

/* wordmark lockup (live text, not an image): THE / URBAN / AT COLLEGE STATION */
.brand {
  display: inline-flex; flex-direction: column; justify-content: center;
  padding-left: 0.85rem; border-left: 2px solid var(--green-forest);
  color: var(--green-forest); text-decoration: none; line-height: 1;
}
.brand-the { font-family: var(--font-body); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.32em; }
.brand-name { font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: 0.02em; line-height: 0.95; margin-top: 0.1rem; }
.brand-sub { font-family: var(--font-body); font-size: 0.5rem; font-weight: 600; letter-spacing: 0.26em; margin-top: 0.3rem; }
.site-footer .brand { color: var(--on-green); border-color: var(--tan-sand); }

.nav-links { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); list-style: none; }
.nav-links a:not(.btn) {
  position: relative; display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--ink); text-decoration: none; font-size: 0.875rem; font-weight: 500;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1px;
  background: var(--tan-ink); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: var(--space-2xs); }

.nav-toggle {
  display: none; position: relative; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}
.nav-toggle span { position: absolute; left: 0.7rem; right: 0.7rem; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle span:nth-child(1) { top: 0.95rem; }
.nav-toggle span:nth-child(2) { top: 1.35rem; }
.nav-toggle span:nth-child(3) { top: 1.75rem; }
.menu-open .nav-toggle span:nth-child(1) { transform: translateY(0.4rem) rotate(45deg); }
.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-0.4rem) rotate(-45deg); }

@media (max-width: 959px) {
  .nav-toggle { display: block; }
  .nav-cta .btn { display: none; } /* the mobile bar carries the tour CTA */
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0; z-index: 99;
    padding: 1rem var(--gutter) 7rem;
    background: var(--cream-ground);
    overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-0.5rem);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .menu-open { overflow: hidden; }
  .menu-open .site-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .menu-open .site-header { background: var(--cream-ground); box-shadow: 0 1px 0 var(--line); }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links a:not(.btn) { width: 100%; min-height: 3.5rem; font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links .nav-drawer-cta { border: 0; padding-top: 1.5rem; }
}
@media (min-width: 960px) { .nav-drawer-cta { display: none; } }

/* ==========================================================================
   Hero (homepage + every deep page): forest block left, photo right
   ========================================================================== */
.hero { display: grid; background: var(--green-forest); }
.hero-copy { padding: clamp(2.75rem, 2rem + 4vw, 7.5rem) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.hero-copy h1 { max-width: 13ch; }
.hero-copy .lede { margin-top: var(--space-s-m); color: var(--on-green-muted); max-width: 30rem; }
.hero-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--green-subtle); }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); min-height: min(clamp(42rem, 15rem + 30vw, 56rem), calc(100svh - var(--header-h))); }
  .hero-copy { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding-right: clamp(2rem, 4vw, 4.5rem); }
  .hero-media { aspect-ratio: auto; }
  .hero--page { min-height: min(clamp(30rem, 12rem + 20vw, 40rem), calc(100svh - var(--header-h))); }
  .hero--page .hero-copy h1 { max-width: 14ch; }
}
.hero--page h1 { font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem); }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); margin-top: var(--space-m); }

/* ==========================================================================
   Key specs bar (5 line icons with vertical dividers)
   ========================================================================== */
.spec-bar { display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; background: var(--cream-ground); border-bottom: 1px solid var(--line); }
.spec-bar li {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs);
  padding: var(--space-m) var(--space-xs); text-align: center;
  color: var(--ink); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.45;
}
.spec-bar .icon { width: 2.5rem; height: 2.5rem; color: var(--green-forest); stroke-width: 1.1; }
.spec-bar li + li { border-left: 1px solid var(--line); }
@media (max-width: 699px) {
  .spec-bar li:nth-child(odd) { border-left: 0; }
  .spec-bar li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .spec-bar li:last-child { grid-column: 1 / -1; }
}
@media (min-width: 700px) {
  /* background runs edge to edge; on wide monitors the five cells line up with the wrap */
  .spec-bar { grid-template-columns: repeat(5, 1fr); padding-block: var(--space-xs); padding-inline: max(0px, calc((100vw - var(--wrap)) / 2)); }
  .spec-bar li { padding-block: var(--space-s-m); }
}

/* ==========================================================================
   Editorial intro row + feature cards
   ========================================================================== */
.intro-row { display: grid; gap: var(--space-m); margin-bottom: var(--space-l); }
.intro-row h2 { max-width: 16ch; }
@media (min-width: 900px) {
  .intro-row { grid-template-columns: 1fr 1fr; gap: 0; align-items: end; }
  .intro-row > :last-child { padding-left: clamp(2rem, 4vw, 4rem); border-left: 1px solid var(--line); }
}
.intro-row .link-arrow { margin-top: var(--space-s); }

.feature-card { margin: 0; }
.feature-card .media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-surface); border-radius: var(--radius); }
.feature-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.feature-card:hover img { transform: scale(1.035); }
.feature-card h3 { margin-top: var(--space-s); font-size: var(--step-2); }
.feature-card .caps { margin: var(--space-2xs) 0 0; }

/* ==========================================================================
   Amenities split and check lists
   ========================================================================== */
.check-list { list-style: none; display: grid; gap: var(--space-s); }
.check-list li { display: flex; gap: 0.9rem; align-items: flex-start; color: var(--ink); line-height: 1.5; }
.check-list li::before {
  content: ""; flex: none; width: 1.5rem; height: 1.5rem; margin-top: -0.05rem;
  background: var(--tan-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Cpath d='m7.5 12.3 3 3 6-6.3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Cpath d='m7.5 12.3 3 3 6-6.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.on-green .check-list li { color: var(--on-green); }
.on-green .check-list li::before { background: var(--tan-sand); }
.check-cols { display: grid; gap: var(--space-s); }
@media (min-width: 640px) {
  .check-cols { grid-template-columns: 1fr 1fr; gap: 0; }
  .check-cols > :first-child { padding-right: clamp(1.5rem, 3vw, 3rem); }
  .check-cols > * + * { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--line); }
}

.amenities { display: grid; background: var(--cream-ground); }
.amenities > .on-green { display: flex; flex-direction: column; justify-content: center; }
.amenities .list-side { padding: var(--space-l) var(--gutter); display: flex; align-items: center; }
@media (min-width: 900px) {
  .amenities { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); }
  .amenities .list-side { padding: clamp(3rem, 2rem + 3vw, 5rem) max(var(--gutter), calc((100vw - var(--wrap)) / 2)) clamp(3rem, 2rem + 3vw, 5rem) clamp(2rem, 4vw, 4.5rem); }
  .amenities > .on-green { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
}

/* ==========================================================================
   Feature banner (pool) and site-plan teaser
   ========================================================================== */
.feature-banner .panel { display: flex; flex-direction: column; justify-content: center; }
.feature-banner .badge { align-self: flex-start; margin: var(--space-s-m) 0; }
@media (min-width: 900px) {
  .feature-banner .bleed-media { min-height: clamp(30rem, 3rem + 30vw, 42rem); }
  .feature-banner .panel { padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
}

.plan-teaser { display: grid; }
.plan-teaser .panel { display: flex; flex-direction: column; justify-content: center; }
.plan-art {
  display: flex; align-items: flex-end; justify-content: flex-end;
  aspect-ratio: 1446 / 1088; /* the illustrated map at its own ratio at every width: nothing cropped */
  margin: 0;
  background: url("../assets/img/community-map-illustrated-w720.avif") center / cover no-repeat, var(--green-forest);
}
.plan-art figcaption {
  margin: 0; padding: var(--space-3xs) var(--space-2xs);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-green); background: rgb(32 71 55 / 0.82);
}
@media (min-width: 720px) {
  .plan-art { background-image: url("../assets/img/community-map-illustrated.avif"); }
}
@media (min-width: 900px) {
  .plan-teaser { grid-template-columns: 1fr 1.15fr; align-items: center; }
  .plan-teaser .panel { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
}

/* ==========================================================================
   Conversion band (green, contact channels + white form card)
   ========================================================================== */
.cta-band { padding-block: var(--space-section); }
.cta-band-grid { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 960px) {
  .cta-band-grid { grid-template-columns: 1fr 1.05fr; gap: 0; }
  .cta-band-grid > :first-child { padding-right: clamp(2rem, 4vw, 4.5rem); border-right: 1px solid var(--line-green); }
  .cta-band-grid > :last-child { margin-left: clamp(2rem, 4vw, 4.5rem); }
}
.cta-band h2 { max-width: 12ch; }
.cta-band .lede { margin-top: var(--space-s-m); color: var(--on-green-muted); }
.channels { list-style: none; display: grid; gap: var(--space-s-m); margin-top: var(--space-m); }
.channels li { display: flex; gap: 1rem; align-items: center; }
.channels .chip {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; background: var(--tan-sand); color: var(--green-forest);
}
.channels .chip .icon { width: 1.25rem; height: 1.25rem; stroke-width: 1.5; }
.channels strong { display: block; font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; line-height: 1.2; }
.channels span, .channels a { font-size: 0.9375rem; }
.on-green .channels a { color: var(--on-green); text-decoration-color: var(--tan-sand); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card {
  background: var(--white); color: var(--ink-muted);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.form-card h2, .form-card h3 { color: var(--ink); font-size: var(--step-3); margin-bottom: var(--space-s-m); }
.form-grid { display: grid; gap: var(--space-xs); }
@media (min-width: 560px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid--2 .full { grid-column: 1 / -1; } }
.field { display: grid; gap: 0.35rem; align-content: start; }
.field label { color: var(--ink); font-size: 0.8125rem; font-weight: 600; }
.field .req { color: var(--tan-ink); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 2.875rem; padding: 0.7rem 0.9rem;
  background: var(--cream-ground); color: var(--ink);
  border: 1px solid #CFC6B8; border-radius: var(--radius-s);
  font-size: 1rem; /* 16px: no iOS zoom on focus */
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field select {
  appearance: none; padding-right: 2.5rem;
  background: var(--cream-ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B211E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 1rem;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-forest); box-shadow: 0 0 0 3px rgb(32 71 55 / 0.2); background-color: var(--white); }
.field [aria-invalid="true"], .consent [aria-invalid="true"] { border-color: #A23B2A; outline: 1px solid #A23B2A; }
.field-error { color: #A23B2A; font-size: 0.8125rem; font-weight: 500; }
.consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.875rem; line-height: 1.5; color: var(--ink-muted); cursor: pointer; }
.consent input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--green-forest); }
.form-note { margin-top: var(--space-xs); font-size: 0.8125rem; color: var(--ink-muted); }
/* "or call" alternative under each lead form */
.call-alt { margin-top: var(--space-s); }
.call-alt-or { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.call-alt-or::before, .call-alt-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.form-card .call-alt .btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.form-card .call-alt .btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); }
.form-status { font-size: 0.875rem; font-weight: 600; color: #A23B2A; }
.form-card .btn { margin-top: var(--space-2xs); }

/* ==========================================================================
   Content components used on deep pages
   ========================================================================== */
/* big-number row (pricing, status) */
.stats { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); list-style: none; }
.stat { padding-top: var(--space-s-m); border-top: 2px solid var(--tan-sand); }
.stat-num { display: block; color: var(--ink); font-family: var(--font-display); font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem); font-weight: 500; line-height: 1; }
.stat-label { display: block; margin-top: var(--space-2xs); font-size: 0.9375rem; line-height: 1.5; }
.on-green .stat-num { color: var(--on-green); }

/* bordered cards (floor plans, spec groups, steps) */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card-body { padding: var(--space-s-m); }
.card-body h3 { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
.card .media { background: var(--white); border-bottom: 1px solid var(--line); }
.card .media img { width: 100%; }
.card--surface { background: var(--cream-surface); border-color: transparent; }

.step-num { display: block; margin-bottom: var(--space-xs); color: var(--tan-ink); font-family: var(--font-display); font-size: 2.5rem; font-style: italic; line-height: 1; }

/* framed image: thin sand outline offset behind a photo */
.framed { position: relative; isolation: isolate; }
.framed::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid var(--tan-sand); border-radius: var(--radius); z-index: -1; }
.framed img { border-radius: var(--radius); width: 100%; }
/* stacked: pull the photo in by the offset so the outline ends on the gutter line */
@media (max-width: 899px) {
  .framed { margin-inline-end: 0.75rem; margin-block-end: 0.75rem; }
  .framed::before { inset: 0.75rem -0.75rem -0.75rem 0.75rem; }
}

/* rows of label / value (drive times, specs) */
.rows { list-style: none; border-top: 1px solid var(--line); }
.rows li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s-m); padding: var(--space-s) 0; border-bottom: 1px solid var(--line); }
.rows .place { color: var(--ink); font-weight: 500; }
.rows .place small { display: block; margin-top: 0.15rem; color: var(--ink-muted); font-size: 0.875rem; font-weight: 400; }
.rows .value { flex: none; color: var(--ink); font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; white-space: nowrap; }
.on-green .rows, .on-green .rows li { border-color: var(--line-green); }
.on-green .rows .place, .on-green .rows .value { color: var(--on-green); }
.on-green .rows .place small { color: var(--on-green-muted); }

/* downloads */
.doc-list { list-style: none; display: grid; gap: 0.25rem; }
.doc-list a { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; color: var(--ink); text-decoration: none; font-weight: 500; }
.doc-list a::before {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: var(--tan-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4.5-4.5M12 15l4.5-4.5M4 17v3h16v-3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4.5-4.5M12 15l4.5-4.5M4 17v3h16v-3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.doc-list a:hover { text-decoration: underline; text-decoration-color: var(--tan-sand); }
.on-green .doc-list a { color: var(--on-green); }
.on-green .doc-list a::before { background: var(--tan-sand); }

/* missing-asset slot (visible placeholder, never a silent gap) */
.asset-slot {
  display: grid; place-items: center; align-content: center; gap: 0.5rem; aspect-ratio: 16 / 9; padding: var(--space-s-m);
  border: 1px dashed var(--tan-ink); border-radius: var(--radius); background: var(--cream-surface);
  text-align: center; color: var(--ink-muted); font-size: 0.875rem;
}
.asset-slot strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; }

.note { font-size: 0.8125rem; color: var(--ink-muted); }
.on-green .note { color: var(--on-green-muted); }

/* ==========================================================================
   Gallery (masonry + lightbox)
   ========================================================================== */
.masonry { columns: 1; column-gap: var(--space-s); }
@media (min-width: 600px) { .masonry { columns: 2; } }
@media (min-width: 1000px) { .masonry { columns: 3; } }
.masonry figure { break-inside: avoid; margin: 0 0 var(--space-s); }
.masonry button {
  display: block; width: 100%; padding: 0; border: 0; background: var(--cream-surface);
  border-radius: var(--radius); overflow: hidden; cursor: zoom-in;
}
.masonry img { width: 100%; transition: transform 0.9s var(--ease); }
.masonry button:hover img { transform: scale(1.03); }
.masonry figcaption { margin-top: var(--space-2xs); font-size: 0.8125rem; color: var(--ink-muted); }

.lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  padding: 4rem 1rem; background: rgb(18 26 22 / 0.94);
}
.lightbox figure { margin: 0; max-width: min(92vw, 80rem); }
.lightbox img { max-height: 80vh; width: auto; margin-inline: auto; border-radius: var(--radius); }
.lightbox figcaption { margin-top: 0.75rem; color: var(--on-green-muted); text-align: center; font-size: 0.875rem; }
.lightbox button {
  position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 1px solid rgb(251 249 245 / 0.35); border-radius: 50%; background: rgb(18 26 22 / 0.6);
  color: var(--on-green); cursor: pointer;
}
.lightbox button:hover { background: var(--green-forest); }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* Residences floor plans: hover grows the plan a little, a click opens it full screen.
   Tablet and desktop only (768px+); on phones the button is inert and the plan stays inline. */
.plan-cards .plan-zoom { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: default; pointer-events: none; }
@media (min-width: 768px) {
  .plan-cards .plan-zoom { pointer-events: auto; cursor: zoom-in; }
  .plan-cards .plan-zoom img { transition: transform 0.35s var(--ease); }
  .plan-cards .plan-zoom:focus-visible { outline: 2px solid var(--tan-ink); outline-offset: -4px; }
}
@media (min-width: 768px) and (hover: hover) {
  .plan-cards .plan-zoom:hover img, .plan-cards .plan-zoom:focus-visible img { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .plan-cards .plan-zoom img { transition: none; } }
.lightbox--plans img { width: min(92vw, 80rem); height: auto; max-height: 82vh; object-fit: contain; background: var(--white); padding: clamp(0.5rem, 1.5vw, 1.5rem); }

/* ==========================================================================
   Insights (blog index + articles) and long-form prose
   ========================================================================== */
.post-card { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.post-card .media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--cream-surface); }
.post-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.post-card:hover .media img { transform: scale(1.035); }
.post-card h3 { margin: var(--space-xs) 0 var(--space-2xs); font-size: var(--step-2); }
.post-card p { font-size: 0.9375rem; }
.post-card .link-arrow { margin-top: auto; align-self: flex-start; justify-self: start; }

.prose { color: var(--ink-muted); font-size: 1.0625rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.2em; font-size: var(--step-3); }
.prose h3 { margin-top: 1.8em; font-size: var(--step-2); }
.prose h2 + *, .prose h3 + * { margin-top: 0.75em; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--tan-ink); }
.prose a { color: var(--green-forest); font-weight: 500; }
.prose blockquote {
  margin: 2em 0; padding: 0 0 0 var(--space-s-m); border-left: 2px solid var(--tan-sand);
  color: var(--ink); font-family: var(--font-display); font-size: var(--step-2); font-style: italic; line-height: 1.35;
}
.prose figure { margin: 2em 0; }
.prose figure img { border-radius: var(--radius); width: 100%; }
.prose figcaption { margin-top: 0.5rem; font-size: 0.8125rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { color: var(--ink); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.meta-line { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: var(--space-s-m); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-green-muted); }
.callout { padding: var(--space-s-m); background: var(--cream-surface); border-radius: var(--radius); border-left: 2px solid var(--tan-sand); }
.footnote { font-size: 0.8125rem; color: var(--ink-muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--green-subtle); color: var(--on-green-muted); padding-block: var(--space-l) var(--space-s-m); font-size: 0.875rem; }
.footer-top { display: grid; gap: var(--space-m); align-items: center; padding-bottom: var(--space-m); border-bottom: 1px solid var(--line-green); }
.footer-nav, .footer-legal-links { display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-s-m); list-style: none; }
.footer-nav a, .footer-legal-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--on-green); text-decoration: none; }
.footer-nav a { font-family: var(--font-display); font-size: 1.125rem; }
.footer-legal-links a { font-size: 0.8125rem; color: var(--on-green-muted); }
.footer-nav a:hover, .footer-legal-links a:hover { text-decoration: underline; text-decoration-color: var(--tan-sand); }
.eho { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--on-green); font-size: 0.8125rem; }
.eho .icon { width: 1.75rem; height: 1.75rem; stroke-width: 1.4; }
.footer-info { display: grid; gap: var(--space-s-m); padding-top: var(--space-m); }
.footer-info h2 { margin-bottom: 0.5rem; color: var(--on-green); font-family: var(--font-body); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.footer-info address { font-style: normal; line-height: 1.7; }
.footer-info a { color: var(--on-green); }
.footer-info ul { list-style: none; }
.footer-info li a { display: inline-flex; align-items: center; min-height: 2.25rem; }
.footer-fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem var(--space-s-m); margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px solid var(--line-green); font-size: 0.75rem; }
.footer-fine a { color: var(--on-green-muted); }
@media (min-width: 960px) {
  /* brand | nav on one row; legal links + EHO mark on their own row so the serif nav never wraps into an orphan line */
  .footer-top { grid-template-columns: auto 1fr; gap: 1rem clamp(2rem, 4vw, 4rem); }
  .footer-top .footer-nav { justify-content: flex-end; }
  .footer-legal-wrap { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-s-m); }
}
@media (min-width: 700px) {
  .footer-info { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-m); }
  .footer-info ul { margin-top: -0.375rem; } /* first link's text lines up with the address's first line */
}
@media (max-width: 959px) { .footer-legal-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem var(--space-s-m); } }

/* ==========================================================================
   Mobile action bar (thumb zone: Call + Tour)
   ========================================================================== */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.6rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgb(251 249 245 / 0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 -1px 0 var(--line), 0 -8px 24px -12px rgb(27 33 30 / 0.25);
}
.mobile-bar .btn { min-height: 3rem; padding-inline: 0.75rem; }
@media (max-width: 959px) { body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); } }
@media (min-width: 960px) { .mobile-bar { display: none; } }

/* ==========================================================================
   Reveal on scroll — hardening A3/A5: the hidden state only exists under
   html.js, and main.js sweeps anything an anchor jump carried past the viewport.
   ========================================================================== */
html.js .reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal-d1 { transition-delay: 0.08s; }
html.js .reveal-d2 { transition-delay: 0.16s; }
html.js .reveal-d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .feature-card:hover img, .masonry button:hover img, .post-card:hover .media img, .arrow:hover::after { transform: none; }
}

/* ==========================================================================
   Page-specific additions (merged from css/_parts/ during the restyle)
   ========================================================================== */
/* ---- contact.html + thanks.html (unit: contact) ---- */
/* visit-details column: stacked groups divided by hairlines */
.page-contact .visit-details > * + * { margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid var(--line); }
.page-contact .visit-details h2 { font-size: var(--step-3); }
.page-contact .visit-details h3 { margin-bottom: var(--space-xs); font-size: var(--step-2); }
.page-contact .visit-details address { font-style: normal; color: var(--ink); line-height: 1.7; }
.page-contact .visit-details .stats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: var(--space-2xs); }
.page-contact .visit-details .note { margin-top: var(--space-s); }
.page-contact .form-card .form-note { margin-bottom: 0; }

/* thanks.html: next-step cards stretch to equal height */
.page-thanks .card { height: 100%; }
.page-thanks .card-body .doc-list { margin-top: var(--space-xs); }
@media (min-width: 900px) {
  .page-contact .visit-details { padding-top: var(--space-2xs); }
}

/* replaces former inline styles */
.page-contact .visit-details h2 + p { margin-top: var(--space-s); }
.page-contact .visit-details .stat-num small { font-size: 0.5em; }
.page-thanks h1 + .lede { margin-top: var(--space-s-m); }
.page-thanks .grid-3 { margin-top: var(--space-l); }

/* ---- blog-a: Insights index + articles (scoped to page classes) ---- */

/* article heroes carry long titles: give them a wider measure and a calmer size */
.page-article .hero--page h1 { font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem); max-width: 20ch; }
@media (min-width: 900px) {
  .page-article .hero--page .hero-copy h1 { max-width: 20ch; }
}

/* post-card category line sits above the title */
.page-insights .post-card .caps,
.page-article .post-card .caps { margin: var(--space-s) 0 0; color: var(--tan-ink); }
.page-insights .post-card .caps + h3,
.page-article .post-card .caps + h3 { margin-top: var(--space-2xs); }
/* tan-ink drops to 4.3:1 on the cream surface; use the muted ink there to keep AA */
.page-insights .section--surface .post-card .caps,
.page-article .section--surface .post-card .caps { color: var(--tan-ink-deep); }

/* inline CTA inside long-form prose */
.page-article .prose .callout h3 { margin-top: 0; font-size: var(--step-2); }
.page-article .prose .callout > * + * { margin-top: 0.75em; }
.page-article .prose .callout .btn { margin-top: var(--space-s); color: var(--ink); font-weight: 600; }

/* closing CTA band */
.page-insights .closing-cta h2,
.page-article .closing-cta h2 { max-width: 18ch; margin-inline: auto; }

/* ---- review pass (2026-10-27) ---- */
@media (min-width: 1100px) { .footer-top .footer-nav { flex-wrap: nowrap; } }

.nowrap { white-space: nowrap; }

/* sticky side column (e.g. the contact form beside a taller details column) */
@media (min-width: 900px) { .sticky-md { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

/* stacked full-width buttons on phones */
@media (max-width: 30em) { .actions--stack { flex-direction: column; align-items: stretch; } .actions--stack .btn { width: 100%; } }

/* floor-plan cards: equal white media boxes, plan art letterboxed, links pinned to the bottom */
.plan-cards .card { display: flex; flex-direction: column; }
.plan-cards .card .media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.plan-cards .card .media img { position: absolute; inset: var(--space-xs); width: calc(100% - 2 * var(--space-xs)); height: calc(100% - 2 * var(--space-xs)); object-fit: contain; }
.plan-cards .card-body { flex: 1; display: flex; flex-direction: column; }
.plan-cards .card-body > .doc-list { margin-top: auto; padding-top: var(--space-xs); }

/* route-map cards: equal media height so titles line up */
.route-cards .card .media { aspect-ratio: 4 / 3; overflow: hidden; }
.route-cards .card .media img { width: 100%; height: 100%; object-fit: cover; }

/* Insights index: first post as a full-width lead card, the rest in a 2-up grid */
.post-grid .post-card--lead { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  /* image edge lines up with the first column of the 2-up grid below; text centres beside it */
  .post-grid .post-card--lead { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr repeat(4, auto) 1fr; column-gap: var(--space-m); }
  .post-grid .post-card--lead .media { grid-column: 1; grid-row: 1 / -1; }
  .post-grid .post-card--lead > :not(.media) { grid-column: 2; }
  .post-grid .post-card--lead .caps { grid-row: 2; }
  .post-grid .post-card--lead h3 { grid-row: 3; }
  .post-grid .post-card--lead h3 + p { grid-row: 4; }
  .post-grid .post-card--lead .link-arrow { grid-row: 5; }
  .post-grid .post-card--lead h3 { font-size: var(--step-3); }
}

/* article heroes: wider copy column for long titles */
@media (min-width: 900px) { .page-article .hero--page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* wide in-body figure that breaks out of the article column */
.prose figure.figure-wide { width: min(100vw - 2 * var(--gutter), var(--wrap)); margin: 3em 0 3em 50%; transform: translateX(-50%); }
.prose figure.figure-wide img { aspect-ratio: 16 / 9; object-fit: cover; }

/* legal pages: tighter section rhythm with a hairline at each section start */
.page-legal .prose h2 { margin-top: 1.6em; padding-top: var(--space-s-m); border-top: 1px solid var(--line); font-size: var(--step-2); }
.page-legal .prose h2 + * { margin-top: 0.6em; }
.page-legal .prose .callout + h2, .page-legal .prose > h2:first-child { border-top: 0; padding-top: 0; }

/* ==========================================================================
   Responsive pass (2026-10-28): fixes found by sweeping every page at
   320 / 375 / 768 / 1024 / 1280 / 1440 / 1920 / 2560px
   ========================================================================== */
/* smallest phones (under 360px): keep CTA labels on one line */
@media (max-width: 22.4375em) {
  .btn { padding-inline: 1rem; letter-spacing: 0.12em; }
  .btn--lg { padding-inline: var(--space-s); letter-spacing: 0.12em; }
  .rows li { gap: var(--space-xs); }
  .rows .value { font-size: 1.25rem; }
}
@media (max-width: 374px) {
  .mobile-bar { grid-template-columns: auto 1fr; gap: var(--space-2xs); }
  .mobile-bar .btn { gap: var(--space-2xs); padding-inline: var(--space-2xs); letter-spacing: 0.1em; white-space: nowrap; }
}
.rows .place { text-wrap: pretty; }

/* card headings get the same breathing room as the list items below them */
.card-body h3 + .check-list { margin-top: var(--space-s); }
/* side-by-side check lists keep their own rhythm instead of stretching */
.check-cols > .check-list { align-content: start; }

/* tables in articles: figures stay on one line, labels wrap */
.prose td:not(:first-child) { white-space: nowrap; }
@media (max-width: 399px) {
  .prose table { font-size: 0.875rem; }
  .prose th, .prose td { padding: var(--space-2xs) 0.375rem; }
  .prose th:first-child, .prose td:first-child { padding-left: 0; }
  .prose th:last-child, .prose td:last-child { padding-right: 0; }
}
@media (min-width: 360px) { .prose tbody th, .prose td:first-child { white-space: nowrap; } } /* "1 bedroom" never splits */
@media (min-width: 360px) and (max-width: 399px) { .prose th, .prose td { padding-inline: 0.3rem; } }
@media (max-width: 359px) {
  .prose table { font-size: 0.8125rem; }
  .prose th, .prose td { padding-inline: 0.25rem; }
}

/* in-article CTA box: set apart like a blockquote or figure */
.page-article .prose > .callout { margin-block: max(2em, var(--space-l)); }
/* closing disclaimer reads as end matter, not a last line of the article */
.page-article .prose > .footnote:last-child:not(:first-child) { margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px solid var(--line); }
/* placeholder image slots get the same room as real figures */
.prose > .asset-slot { margin-block: 2em; }
.prose > h2 + .asset-slot { margin-top: var(--space-s-m); }
.page-article .prose > .callout:has(+ .footnote) { margin-bottom: var(--space-s-m); }

/* tablets: a stacked hero headline uses the lede's measure, not a narrow column */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-copy h1, .page-article .hero--page h1 { max-width: 30rem; }
}
/* tablets: a lone third card in a 2-up grid centres under the pair */
@media (min-width: 700px) and (max-width: 999.98px) {
  .grid-3 > :is(.card, .feature-card):last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-m)) / 2); }
  /* a lone text column spans the row and splits its list in two instead */
  .grid-3 > div:not(.card):last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid-3 > div:not(.card):last-child:nth-child(odd) .check-list { display: block; columns: 2; column-gap: var(--space-m); }
  .grid-3 > div:not(.card):last-child:nth-child(odd) .check-list li { break-inside: avoid; margin-bottom: var(--space-s); }
}
/* status stats: 2 x 2 on tablets, one row of four on desktop */
@media (min-width: 560px) and (max-width: 959px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .stats:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }

/* amenities "Around the community": photo centres against the long copy column */
@media (min-width: 900px) { [aria-labelledby="community-title"] .split { align-items: center; } }

/* large monitors: the green amenities panel keeps its copy measure as the wrap moves inward */
@media (min-width: 1440px) {
  .amenities { grid-template-columns: minmax(calc(max(var(--gutter), (100vw - var(--wrap)) / 2) + 22rem + var(--gutter)), 0.55fr) minmax(0, 1fr); }
}

/* ==========================================================================
   Homepage top (2026-10-28): white header, full-bleed photo, green message
   band underneath, specs strip. Scoped to body.page-home; deep pages keep the
   split .hero and the transparent header.
   ========================================================================== */
/* header: white on load, soft lift once scrolled */
.page-home .site-header { background: var(--white); }
.page-home .site-header.is-scrolled {
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgb(27 33 30 / 0.35);
}
@media (max-width: 959px) {
  .page-home .nav-cta .btn { display: inline-flex; padding-inline: 1rem; } /* tour button sits beside the menu icon */
}
/* phones: the button reads "Tour"; screen readers still hear "Schedule a tour" */
@media (max-width: 479px) {
  .nav-tour-lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- first screen: photo + the WHOLE message always fit the window together ----
   .hero-stack is exactly one window tall (less the header). The message band
   takes the height its content needs, and no line of it is ever cut by the
   bottom of the window; the photo flexes to fill everything else. The band is
   kept tight (svh-scaled type and padding) so the photo gets as much of the
   first screen as possible. */
.hero-stack {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 34rem;   /* landscape phones scroll rather than crush the type */
  max-height: 90rem;
}

/* photo band: flexes into the space the message leaves; the box size never depends on the image, so nothing shifts while it loads */
.hero-band { position: relative; flex: 1 1 0; min-height: 7.5rem; overflow: hidden; background: var(--green-subtle); }
.hero-band img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;   /* phones: the crop is centred on the monument sign */
  transform-origin: 50% 60%;
  animation: hero-settle 2.4s var(--ease) both;   /* slow settle from a slight zoom */
}
@media (min-width: 700px) { .hero-band img { object-position: 50% 64%; } } /* sign and flower bed clear the green band; trims sky first */
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }

/* message band. It rises over the bottom of the photo on a green gradient (--overlap), so the
   photo breathes into the band instead of being cut off by a hard edge. The text itself
   always starts below the overlap, on solid green. */
.hero-message {
  --overlap: clamp(2.5rem, 9svh, 9rem);
  --pad: clamp(1rem, 3.2svh, 3.25rem);
  position: relative; z-index: 1; flex: none;
  margin-top: calc(-1 * var(--overlap));
  padding-block: calc(var(--overlap) + var(--pad) * 0.4) var(--pad);
  background: linear-gradient(to bottom, rgb(32 71 55 / 0) 0, rgb(32 71 55 / 0.78) calc(var(--overlap) * 0.6), var(--green-forest) var(--overlap));
}
.hero-message.botanical::after { top: calc(var(--overlap) - 1rem); } /* sprigs start on the solid green, never over the photo */
.hero-message .kicker { margin-bottom: clamp(0.5rem, 1.6svh, 1.1rem); }
.hero-message h1 { max-width: none; font-size: clamp(1.75rem, min(9.6vw, 4.9svh), 2.6rem); line-height: 1.02; }
.hero-message h1 span { display: block; }
.hero-message h1 em { color: var(--tan-sand); }   /* sand on forest green: 5.49:1 */
.hero-message .lede { margin-top: clamp(0.6rem, 1.6svh, 1.25rem); color: var(--on-green-muted); max-width: 30rem; font-size: clamp(1rem, 2.2svh, 1.2rem); }
.hero-message .hero-actions { margin-top: clamp(0.85rem, 2.4svh, 1.9rem); }
@media (max-width: 699px) {
  .hero-message .hero-actions { align-items: stretch; gap: 0.25rem; }
  .hero-message .hero-actions .link-arrow { align-self: flex-start; }
}
@media (min-width: 700px) {
  .hero-message h1 { font-size: clamp(2.1rem, min(6vw, 6.4svh), 4.75rem); }
  .hero-message .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
}
@media (min-width: 1000px) {
  /* lede and buttons share one row under the headline */
  .hero-message-side {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-l);
    margin-top: clamp(1rem, 3svh, 2.5rem); padding-top: clamp(1rem, 3svh, 2.5rem);
    border-top: 1px solid var(--line-green);
  }
  .hero-message .lede { margin-top: 0; }
  .hero-message .hero-actions { margin-top: 0; flex-wrap: nowrap; flex: none; }
  /* keep the lower sprig clear of the lede: tuck it further off the left edge and fade it */
  .hero-message.botanical::before { left: -5.5rem; bottom: -3rem; opacity: 0.18; }
}

@media (min-width: 1200px) {
  /* desktop: headline left, lede + buttons right, so the green band is two lines tall and the photo gets the height */
  .hero-message-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); column-gap: var(--space-m); align-items: end; }
  /* the headline column is a size container, so the two lines are sized to fit it (8.6cqi ≈ the longest line filling the column) */
  .hero-message-grid > :first-child { container-type: inline-size; }
  .hero-message h1 { font-size: clamp(2.1rem, min(6.4svh, 8.6cqi), 4.75rem); }
  .hero-message-side { display: block; margin-top: 0; padding: 0 0 0 var(--space-m); border-top: 0; border-left: 1px solid var(--line-green); }
  .hero-message .hero-actions { margin-top: clamp(1rem, 2.5svh, 1.75rem); flex-wrap: wrap; gap: var(--space-xs) var(--space-m); }
  .hero-message.botanical::after { right: -6rem; opacity: 0.12; } /* clear of the right-hand copy */
}

/* ultra-wide screens (2:1 and wider, e.g. 2560x1080, 3440x1440, 5120x1440): a full-width photo
   would be zoomed 2x and cropped to a strip. Instead the hero splits: green copy panel left, the
   WHOLE photo right at its own ratio (cropped only if it would pass 70vw), its left edge melting into the green. */
@media (min-aspect-ratio: 2/1) and (min-width: 1600px) {
  .hero-stack {
    display: grid; max-height: none;
    grid-template-columns: minmax(0, 1fr) min(70vw, calc((100svh - var(--header-h)) * 1.9417)); /* photo's own 2400:1236 ratio */
    grid-template-rows: 100%;
  }
  .hero-band { grid-column: 2; grid-row: 1; min-height: 0; }
  .hero-band img { object-position: 50% 50%; }
  .hero-band::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: clamp(4rem, 12%, 14rem); pointer-events: none;
    background: linear-gradient(to right, var(--green-forest), rgb(32 71 55 / 0.6) 40%, rgb(32 71 55 / 0));
  }
  .hero-message {
    grid-column: 1; grid-row: 1; margin-top: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--space-xl) var(--space-l);
    background: var(--green-forest);
  }
  /* copy sits beside the photo; on 32:9 screens the spare green opens up on the far left, not between text and photo */
  .hero-message .hero-message-grid { display: block; width: 100%; max-width: 46rem; margin-inline: auto 0; container-type: inline-size; }
  .hero-message h1 { font-size: clamp(2.25rem, min(7.2svh, 8.6cqi), 5.25rem); }
  .hero-message-side {
    display: block; padding: clamp(1rem, 3svh, 2.5rem) 0 0; margin-top: clamp(1rem, 3svh, 2.5rem);
    border-left: 0; border-top: 1px solid var(--line-green);
  }
  .hero-message .lede { max-width: 32rem; }
  .hero-message.botanical::after { top: -2rem; right: -3rem; opacity: 0.16; }
}

/* message lines arrive in sequence on first paint (CSS only, so nothing is ever left hidden) */
.hero-message .kicker, .hero-message h1 span, .hero-message .lede, .hero-message .hero-actions {
  animation: hero-rise 0.9s var(--ease) both;
}
.hero-message h1 span:first-child { animation-delay: 0.08s; }
.hero-message h1 span:last-child { animation-delay: 0.18s; }
.hero-message .lede { animation-delay: 0.3s; }
.hero-message .hero-actions { animation-delay: 0.4s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(0.9rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-band img, .hero-message .kicker, .hero-message h1 span, .hero-message .lede, .hero-message .hero-actions { animation: none; }
}

/* bronze primary button: white text stays AA on both gradient stops (4.6:1 and 6.4:1) */
.btn--bronze {
  --btn-fg: var(--white); --btn-bd: #8F7042;
  background: linear-gradient(135deg, #8F7042, var(--tan-ink-deep));
}
.btn--bronze:hover { --btn-bd: #6A5029; background: linear-gradient(135deg, #7E6239, #6A5029); }

/* specs strip: 2 x 2 with the pool centred underneath on phones and tablets, one row of five on desktop */
.spec-bar--grid .icon { color: var(--tan-ink); }
@media (max-width: 959px) {
  .spec-bar--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 0; }
  .spec-bar--grid li { flex-direction: row; justify-content: center; gap: var(--space-xs); padding: var(--space-s-m) var(--space-xs); text-align: left; }
  .spec-bar--grid li + li { border-left: 1px solid var(--line); }
  .spec-bar--grid li:nth-child(odd) { border-left: 0; }
  .spec-bar--grid li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .spec-bar--grid li:last-child { grid-column: 1 / -1; }
  .spec-bar--grid .icon { width: 2rem; height: 2rem; }
}
/* homepage phones: the sticky Call / Tour bar waits until the hero buttons scroll away, so it never covers them */
@media (max-width: 959px) {
  html.js .page-home .mobile-bar { transform: translateY(110%); transition: transform 0.3s var(--ease); }
  html.js .page-home.hero-cta-passed .mobile-bar { transform: none; }
}
@media (max-width: 999px) {
  .hero-message.botanical::before { left: -4.5rem; bottom: -3.5rem; opacity: 0.18; } /* sprig stays clear of the text link */
  .hero-message.botanical::after { width: clamp(7rem, 22vw, 11rem); top: calc(var(--overlap) - 1rem); } /* smaller top sprig on the shorter band */
}
@media (max-width: 374px) {
  .spec-bar--grid li:not(:last-child) { flex-direction: column; text-align: center; gap: var(--space-2xs); }
}
@media (min-width: 960px) and (max-width: 1199.98px) {
  .spec-bar--grid { padding-inline: var(--gutter); }
  .spec-bar--grid li { letter-spacing: 0.1em; padding-inline: var(--space-2xs); }
}
.brand-sub { white-space: nowrap; }
@media (max-width: 359px) { .brand-sub { letter-spacing: 0.18em; } }
.page-home .site-header .brand { flex: none; }