/* Burke Townhomes — design system per handoff.
   Tokens from HANDOFF.md; layout is breakpoint-free by design
   (auto-fit grids + clamp), matching the approved mockup. */

:root {
  --cream: #F5F1E9;
  --card: #FFFDF8;
  --green: #2F4B3C;
  --green-dark: #24382D;
  --ink: #1B241F;
  --terra: #C2653F;
  --terra-hover: #A8542F;
  --border: #E4DBCB;
  --muted: #7C7263;
  --body-c: #4A544D;
  --faint: #9A9384;
  --accent: #E0A98A;
  --on-dark: rgba(240, 237, 228, .72);
  --on-dark-strong: #F0EDE4;
  --hero-ink: #F7F4ED;
  --st-available: #2F4B3C;
  --st-listed: #C2653F;
  --st-staging: #B08A2E;
  --st-office: #2E6B6B;
  --pad-x: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 620ms;
  --serif: 'Instrument Serif', serif;
  --sans: Archivo, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--terra); }
::selection { background: var(--terra); color: #fff; }
img { max-width: 100%; display: block; }
/* overflow-x: hidden on an ancestor creates a scroll container and silently
   kills position: sticky inside it — clip does not. hidden kept as a legacy
   fallback for browsers without clip support. */
.page-clip { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

h1, h2, .serif { font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.12; margin: 0; text-wrap: balance; }

.eyebrow {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 16px;
}
.eyebrow--light { color: rgba(247,244,237,.85); }
.eyebrow--accent { color: var(--accent); }

.wrap { max-width: 1400px; margin: 0 auto; }
.wrap--mid { max-width: 1240px; margin: 0 auto; }
.wrap--text { max-width: 1160px; margin: 0 auto; }
.wrap--narrow { max-width: 900px; margin: 0 auto; }

.sec { padding: clamp(48px, 7vw, 80px) var(--pad-x); }
.sec--head { padding: clamp(36px, 6vw, 64px) var(--pad-x) clamp(28px, 4vw, 44px); }
.sec--card { background: var(--card); }
.sec--cream { background: var(--cream); }
.sec--green { background: var(--green); color: var(--on-dark-strong); }
.sec--ink { background: var(--ink); color: var(--on-dark-strong); }
.bb { border-bottom: 1px solid var(--border); }
.bt { border-top: 1px solid var(--border); }

.lede { font-size: 17px; line-height: 1.7; color: var(--body-c); max-width: 680px; text-wrap: pretty; }
.body-copy { font-size: 15.5px; line-height: 1.75; color: var(--body-c); margin: 0 0 18px; text-wrap: pretty; }
.body-copy:last-child { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 14px 24px; border: 0; border-radius: 2px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-align: center; transition: all .15s ease; white-space: nowrap;
}
.btn--terra { background: var(--terra); color: var(--card); }
.btn--terra:hover { background: var(--terra-hover); color: var(--card); }
.btn--green { background: var(--green); color: var(--card); }
.btn--green:hover { background: var(--green-dark); color: var(--card); }
.btn--outline { background: none; border: 1px solid var(--green); color: var(--green); }
.btn--outline:hover { background: var(--green); color: var(--card); }
.btn--ghost-light {
  background: rgba(247,244,237,.1); color: var(--hero-ink);
  border: 1px solid rgba(247,244,237,.6);
}
.btn--ghost-light:hover { background: var(--hero-ink); color: var(--ink); }
.btn--ghost-dark {
  background: none; color: var(--on-dark-strong);
  border: 1px solid rgba(240,237,228,.5);
}
.btn--ghost-dark:hover { background: rgba(240,237,228,.12); color: var(--on-dark-strong); }
.btn--big { padding: 16px 26px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
/* Promo banner + header travel as one sticky unit; the banner row collapses
   (grid-rows 1fr -> 0fr) once the visitor has scrolled past 420px, and comes
   back under 140px (hysteresis handled in site.js). */
.site-top {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-rows: 1fr auto;
  transition: grid-template-rows .35s ease;
}
.site-top.collapsed { grid-template-rows: 0fr auto; }
.promo-slot { min-height: 0; overflow: hidden; }
/* min-width: 0 is load-bearing. As a grid item of .site-top its automatic
   minimum size is its min-content width, which floors the grid's auto track and
   made the whole header overflow its own track between the 880px nav breakpoint
   and roughly 1070px, clipping the tour CTA off the right edge. With it the nav
   gives way and scrolls, which is what its overflow-x was always for. */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-width: 0;
  padding: 13px var(--pad-x);
  background: rgba(245, 241, 233, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand:hover { color: inherit; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 2px; background: var(--green);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream); font-family: var(--serif); font-size: 19px; flex: none;
}
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name b { font-family: var(--serif); font-weight: 400; font-size: 20px; letter-spacing: .2px; color: var(--ink); }
.brand-name span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.site-nav { display: flex; gap: 4px; white-space: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  padding: 9px 13px; border-radius: 2px; font-size: 13px; font-weight: 500;
  color: #3A4640; transition: all .15s ease;
}
.site-nav a:hover { color: var(--ink); background: #EFE9DB; }
.site-nav a[aria-current="page"] { background: #E9E2D2; color: var(--ink); font-weight: 600; }
.header-cta { padding: 10px 18px; font-size: 13px; flex: none; }

.nav-toggle {
  display: none; flex: none; width: 42px; height: 42px; padding: 0;
  background: none; border: 1px solid var(--border); border-radius: 2px; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.nav-drawer { display: none; }

@media (max-width: 880px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-drawer {
    display: none; position: fixed; inset: 61px 0 auto 0; z-index: 49;
    background: var(--card); border-bottom: 1px solid var(--border);
    padding: 10px var(--pad-x) 22px; flex-direction: column;
    box-shadow: 0 18px 40px rgba(27,36,31,.14);
  }
  .nav-drawer.open { display: flex; }
  .nav-drawer a {
    padding: 14px 4px; font-size: 15px; color: var(--ink);
    border-bottom: 1px solid #EFE8DA; min-height: 44px; display: flex; align-items: center;
  }
  .nav-drawer a[aria-current="page"] { color: var(--terra); font-weight: 600; }
  body.drawer-open { overflow: hidden; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero / photo bands ---------- */
.hero { position: relative; min-height: clamp(520px, 82vh, 660px); overflow: hidden; }
.hero--short { min-height: clamp(400px, 58vh, 520px); }
.hero-img { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(20,28,23,.84) 0%, rgba(20,28,23,.45) 52%, rgba(20,28,23,.05) 86%); }
.hero-scrim--soft { background: linear-gradient(90deg, rgba(20,28,23,.76), rgba(20,28,23,.1) 68%); }
.hero-inner {
  position: relative; z-index: 1; padding: clamp(56px, 10vh, 80px) var(--pad-x);
  min-height: inherit; display: flex; flex-direction: column; justify-content: center;
  max-width: 860px; color: var(--hero-ink);
}
.hero-inner h1 { font-size: clamp(44px, 6vw, 80px); line-height: 1; color: var(--hero-ink); margin: 0 0 22px; }
.hero-sub { font-size: 18px; line-height: 1.6; margin: 0 0 32px; max-width: 560px; color: rgba(247,244,237,.92); text-wrap: pretty; }
.hero-note { margin-top: 26px; font-size: 12.5px; color: rgba(247,244,237,.7); }
.band-quote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.3; margin: 0 0 22px; text-wrap: pretty;
}

/* ---------- Proof band ---------- */
.proof-band { background: var(--green); color: var(--on-dark-strong); padding: 0 var(--pad-x); }
.proof-grid {
  max-width: 1400px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: rgba(240,237,228,.16);
}
.proof-grid > div { background: var(--green); padding: 26px 28px; }
.proof-grid .serif { font-size: 23px; line-height: 1.15; }
.proof-grid p { font-size: 12.5px; color: rgba(240,237,228,.62); margin: 6px 0 0; }

/* ---------- Grids / cards ---------- */
.grid { display: grid; gap: 22px; }
.grid--doors { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--split { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.grid--split-top { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }

.door-card {
  position: relative; border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
  background: var(--card); display: block; transition: box-shadow .18s ease;
}
.door-card:hover { box-shadow: 0 10px 28px rgba(27,36,31,.14); }
.door-card figure { margin: 0; height: 210px; }
.door-card img { width: 100%; height: 100%; object-fit: cover; }
.door-card .pad { padding: 20px 22px; }
.door-card .serif { font-size: 23px; color: var(--ink); }
.door-card p { font-size: 13px; line-height: 1.55; color: #6A736B; margin: 6px 0 0; }

.rowlist { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.rowlist > * { background: var(--card); }
.cellgrid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.cellgrid > * { background: var(--card); }

.kv { padding: 14px 18px; display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.kv span:first-child { color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 13px; border: 1px solid var(--border); background: var(--cream);
  border-radius: 2px; font-size: 12.5px; color: var(--body-c);
}
.microlabel { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.disclaimer { font-size: 11.5px; line-height: 1.6; color: var(--faint); }

/* ---------- FAQ ---------- */
.faq-item { padding: 24px 26px; }
.faq-item h3 { font-size: 16.5px; font-weight: 600; margin: 0; }
.faq-item p { font-size: 14.5px; line-height: 1.7; color: var(--body-c); margin: 8px 0 0; text-wrap: pretty; }

/* ---------- Dark CTA ---------- */
.cta-final { text-align: center; padding: clamp(60px, 9vw, 96px) var(--pad-x); }
.cta-final h2 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.1; margin: 0 0 20px; }
.cta-final p { font-size: 16.5px; line-height: 1.7; color: var(--on-dark); margin: 0 auto 34px; max-width: 620px; text-wrap: pretty; }
.cta-final .btn-row { justify-content: center; }

/* ---------- Gallery ---------- */
.photo-trio {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-auto-rows: clamp(190px, 26vw, 260px); gap: 14px;
}
.photo-trio figure, .gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 2px; }
.photo-trio img, .gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  grid-auto-rows: clamp(145px, 21vw, 210px); gap: 14px;
}
.gallery .wide { grid-column: span 2; grid-row: span 2; }
.gallery .span2 { grid-column: span 2; }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px;
  background: linear-gradient(180deg, rgba(20,28,23,0), rgba(20,28,23,.7));
  color: var(--hero-ink); pointer-events: none;
}
.gallery figcaption .serif { font-size: 24px; }
.gallery figcaption span { font-size: 12px; opacity: .8; display: block; margin-top: 2px; }

/* ---------- Filter chips (availability + tabs) ---------- */
.fchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 2px; cursor: pointer; font-family: var(--sans);
  font-size: 12.5px; font-weight: 500; border: 1px solid #DDD3C0;
  background: var(--card); color: #5C6459; transition: all .15s ease;
  min-height: 36px;
}
.fchip:hover { border-color: var(--green); }
.fchip[aria-pressed="true"], .fchip.on { border-color: var(--green); background: var(--green); color: var(--card); }
.fchip .dot { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.fchip .chip-bird { height: 15px; width: auto; flex: none; opacity: .85; }
.fchip[aria-pressed="true"] .chip-bird, .fchip.on .chip-bird { filter: brightness(0) invert(1); opacity: .95; }
.fchip.dim { opacity: .42; }
.fchip--dark { border-color: rgba(240,237,228,.28); background: transparent; color: rgba(240,237,228,.7); }
.fchip--dark:hover { border-color: rgba(240,237,228,.75); }
.fchip--dark[aria-pressed="true"] { border-color: rgba(240,237,228,.75); background: rgba(240,237,228,.14); color: var(--on-dark-strong); }

/* ---------- Availability map ---------- */
.map-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.map-shell {
  flex: 1 1 620px; min-width: 0; background: #EDE7DA; border: 1px solid #E0D6C4;
  border-radius: 3px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
.map-stage { position: relative; width: 100%; min-width: 1040px; aspect-ratio: 1040 / 720; }
.map-stage > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.unit-box {
  position: absolute; border: 1px solid rgba(27,36,31,.18); border-radius: 2px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; font-family: var(--sans);
  transition: opacity .18s ease, box-shadow .18s ease, background .18s ease;
  z-index: 2;
}
.unit-box:hover { box-shadow: 0 6px 18px rgba(27,36,31,.3); z-index: 8; }
.unit-box span {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-align: center;
  padding: 0 3px; line-height: 1; color: rgba(255,253,248,.94); pointer-events: none;
}
.unit-box.soft span { color: rgba(27,36,31,.68); }
.unit-box.dim { opacity: .32; background: rgba(220,213,197,.5) !important; }
.unit-box.dim span { color: #8A8171; }
.unit-box.sel { border: 2px solid var(--ink); box-shadow: 0 8px 22px rgba(27,36,31,.35); z-index: 9; }
.map-foot { padding: 14px 18px; border-top: 1px solid #E0D6C4; background: var(--card); font-size: 12.5px; color: #6A736B; }
.map-foot .linklike { background: none; border: 0; padding: 0; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--green); cursor: pointer; text-decoration: underline; }

.unit-panel {
  flex: 1 1 340px; max-width: 420px; position: sticky; top: 82px;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
}
.unit-photo { position: relative; height: 180px; }
.unit-photo img { width: 100%; height: 100%; object-fit: cover; }
.status-tag {
  position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 2px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--card); pointer-events: none;
}
.unit-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 20px 0; }
.unit-stats > div { background: var(--card); padding: 12px 10px; text-align: center; }
.unit-stats b { font-size: 17px; font-weight: 600; display: block; }
.unit-stats small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; display: block; }
.unit-note { margin-top: 18px; padding: 14px 16px; background: var(--cream); border-left: 2px solid var(--terra); font-size: 13px; line-height: 1.6; color: var(--body-c); }

/* Mobile list view of the 38 homes */
.view-toggle { display: none; gap: 8px; margin-bottom: 16px; }
.home-list { display: none; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; flex: 1 1 100%; }
.home-list .bldg-head { background: var(--cream); padding: 12px 16px; font-family: var(--serif); font-size: 17px; color: #5C6459; }
.home-row {
  background: var(--card); padding: 13px 16px; display: flex; align-items: center; gap: 12px;
  min-height: 48px; width: 100%; border: 0; cursor: pointer; text-align: left; font-family: var(--sans);
}
.home-row:hover { background: #FBF7EE; }
.home-row .st-dot { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.home-row .code { font-weight: 600; font-size: 14px; width: 46px; flex: none; }
.home-row .meta { flex: 1; font-size: 13px; color: var(--body-c); min-width: 0; }
.home-row .st-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.home-row.dim { opacity: .38; }
.home-row.sel { background: #F1EBDD; box-shadow: inset 3px 0 0 var(--green); }

@media (max-width: 760px) {
  .view-toggle { display: flex; }
  .map-mode-list .map-shell { display: none; }
  .map-mode-list .home-list { display: flex; }
  .map-mode-map .home-list { display: none; }
  .unit-panel { position: static; max-width: none; flex: 1 1 100%; }
}

/* ---------- Plan cards ---------- */
/* Flex column so cards in a grid row match height: the blurb absorbs the
   slack and the stats + compare button pin to the bottom edge. */
.plan-card { border: 1px solid var(--border); border-radius: 3px; overflow: hidden; background: var(--card); transition: all .18s ease; display: flex; flex-direction: column; }
.plan-card.in-compare { border-color: var(--green); box-shadow: 0 6px 20px rgba(47,75,60,.16); }
.plan-photo { position: relative; height: 190px; border-bottom: 1px solid var(--border); }
.plan-photo img { width: 100%; height: 100%; object-fit: cover; }
.plan-badge {
  position: absolute; top: 12px; left: 12px; padding: 5px 10px;
  background: rgba(20,28,23,.72); color: var(--hero-ink);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; pointer-events: none;
}
/* Placard-style title band: bird silhouette behind the serif plan name */
.plan-title {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--cream); border-bottom: 1px solid var(--border);
}
.plan-title img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 78px; width: auto; opacity: .38; pointer-events: none;
}
.plan-title h2 { position: relative; font-size: 30px; line-height: 1.1; margin: 0; }
.plan-drawing {
  display: block; height: 230px; background: #fff; border-bottom: 1px solid var(--border);
  padding: 12px 14px;
}
.plan-drawing img { width: 100%; height: 100%; object-fit: contain; }
.plan-levels { display: flex; flex-wrap: wrap; gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); }
.plan-levels > div { flex: 1 1 88px; background: var(--card); padding: 9px 11px; }
.plan-levels small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; }
.plan-levels span { font-size: 11.5px; color: #3A4640; margin-top: 3px; white-space: nowrap; display: block; }
.plan-body { padding: 20px 22px; display: flex; flex-direction: column; flex: 1; }
.plan-body .serif { font-size: 24px; }
.plan-avail { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.plan-blurb { font-size: 13px; line-height: 1.6; color: var(--body-c); margin: 12px 0 0; text-wrap: pretty; flex: 1; }
.plan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 18px 0 0; }
.plan-stats > div { background: var(--card); padding: 11px 6px; text-align: center; }
.plan-stats b { font-size: 15px; font-weight: 600; display: block; }
.plan-stats small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; display: block; }
.compare-btn {
  margin-top: 16px; width: 100%; padding: 11px; border-radius: 2px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  background: var(--cream); color: var(--green); border: 1px solid var(--border); transition: all .15s ease;
}
.compare-btn:hover { border-color: var(--green); }
.plan-card.in-compare .compare-btn { background: var(--green); color: var(--card); border-color: var(--green); }

.compare-panel { margin-top: 32px; border: 1px solid var(--green); border-radius: 3px; background: var(--card); overflow: hidden; }
.compare-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; background: var(--green); color: var(--hero-ink); }
.compare-head .serif { font-size: 22px; }
.compare-head button { background: none; border: 1px solid rgba(247,244,237,.4); color: var(--hero-ink); padding: 7px 14px; border-radius: 2px; font-family: var(--sans); font-size: 12px; cursor: pointer; }
.compare-grid { display: grid; grid-template-columns: clamp(104px, 22vw, 180px) repeat(2, minmax(0, 1fr)); }
.compare-grid .rl { padding: 13px 20px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid #EFE8DA; background: var(--cream); }
.compare-grid .rc { padding: 13px 20px; font-size: 14px; border-bottom: 1px solid #EFE8DA; border-left: 1px solid #EFE8DA; }

/* ---------- Steps / facts ---------- */
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.step-grid > div { background: var(--card); padding: 28px 26px; }
.step-num { font-family: var(--serif); font-size: 30px; color: var(--terra); line-height: 1; }
.step-grid b, .step-row b { font-size: 16px; font-weight: 600; display: block; margin-top: 14px; }
.step-grid p, .step-row p { font-size: 13.5px; line-height: 1.65; color: #5C6459; margin: 8px 0 0; text-wrap: pretty; }
.step-row { padding: 22px 24px; display: flex; gap: 20px; align-items: flex-start; }
.step-row .step-num { font-size: 26px; flex: none; width: 28px; }
.step-row b { margin-top: 0; font-size: 15.5px; }
.step-row p { margin: 6px 0 0; }

.fact-row { padding: 16px 20px; }
.fact-row .serif { font-size: 22px; }
.fact-row p { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 4px 0 0; }
.proof-card { padding: 26px 24px; }
.proof-card b { font-size: 15.5px; font-weight: 600; }
.proof-card p { font-size: 13.5px; line-height: 1.65; color: #5C6459; margin: 8px 0 0; text-wrap: pretty; }

.timing-row { padding: 18px 22px; display: flex; align-items: center; gap: 18px; }
.timing-row .tw { flex: 1; min-width: 0; }
.timing-row b { font-size: 15px; font-weight: 600; }
.timing-row small { font-size: 12.5px; color: var(--muted); display: block; margin-top: 3px; }
.timing-row .stage { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); white-space: nowrap; }

/* ---------- Why Kenmore ---------- */
.guide-items { display: flex; flex-direction: column; gap: 1px; background: rgba(240,237,228,.16); border: 1px solid rgba(240,237,228,.16); }
.guide-items > div { background: var(--green); padding: 14px 20px; display: flex; align-items: center; gap: 16px; }
.guide-items .g-name { font-size: 15px; font-weight: 500; }
.guide-items .g-detail { font-size: 12.5px; color: rgba(240,237,228,.6); margin-top: 3px; }
.guide-items .g-meta { font-family: var(--serif); font-size: 20px; white-space: nowrap; margin-left: auto; text-align: right; }
.guide-blurb { font-size: 15px; line-height: 1.7; color: rgba(240,237,228,.8); margin: 0 0 22px; max-width: 520px; text-wrap: pretty; }
.map-embed { border: 1px solid rgba(240,237,228,.2); border-radius: 3px; overflow: hidden; background: #263E31; }
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; filter: saturate(.85); }
.map-embed .addr { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; }
.map-embed .addr a { padding: 10px 16px; border: 1px solid rgba(240,237,228,.4); border-radius: 2px; font-size: 12.5px; font-weight: 600; color: var(--on-dark-strong); white-space: nowrap; }
.area-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: rgba(240,237,228,.16); border: 1px solid rgba(240,237,228,.16); border-top: 0; }
.area-stats > div { background: var(--green); padding: 18px 16px; }
.area-stats .serif { font-size: 26px; }
.area-stats small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(240,237,228,.6); margin-top: 4px; display: block; }
.guide-panel[hidden] { display: none; }

/* ---------- Contact / visit ---------- */
.contact-card { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--card); border: 1px solid var(--border); border-radius: 3px; }
.contact-card .avatar { width: 74px; height: 74px; flex: none; border-radius: 50%; background: #E9E2D2; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 26px; color: var(--muted); overflow: hidden; }
.contact-card b { font-size: 14.5px; font-weight: 600; }
.contact-card .role { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.contact-card .links { font-size: 12.5px; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }

.form-card { background: var(--card); border: 1px solid var(--border); border-radius: 3px; padding: 28px; }
.form-card .serif { font-size: 24px; margin-bottom: 6px; }
.form-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.form-card form { display: flex; flex-direction: column; gap: 12px; }
.form-card label { font-size: 0; }
.form-card input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 2px;
  font-family: var(--sans); font-size: 14px; background: var(--cream); color: var(--ink);
}
.form-card input:focus { outline: 2px solid var(--green); outline-offset: -1px; }
/* Inputs below 16px make iOS Safari auto-zoom the page on focus; keep phone
   inputs at 16px so focusing a field never zooms or shifts the layout.
   (The updates-form input gets the same treatment beside its base rule,
   which appears later in this file and would otherwise win the cascade.) */
@media (max-width: 760px) {
  .form-card input { font-size: 16px; }
}
.form-msg { font-size: 13px; line-height: 1.6; color: var(--green); background: #EFF3EC; border: 1px solid #D5E0D2; border-radius: 2px; padding: 12px 14px; }
.form-msg[hidden] { display: none; }

/* ---------- Cards on dark ---------- */
.dark-card { background: var(--green); color: var(--on-dark-strong); border-radius: 3px; padding: 24px; }
.dark-card .serif { font-size: 22px; line-height: 1.2; }
.dark-card p { font-size: 13.5px; line-height: 1.65; color: var(--on-dark); margin: 8px 0 18px; }

/* ---------- Footer ---------- */
.site-footer {
  padding: clamp(32px, 5vw, 44px) var(--pad-x); background: var(--ink);
  color: rgba(240,237,228,.6); display: flex; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; font-size: 12.5px;
}
.site-footer .f-brand { display: flex; flex-direction: column; gap: 8px; }
.site-footer .f-brand .serif { color: var(--on-dark-strong); font-size: 18px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.site-footer nav a { color: rgba(240,237,228,.6); font-size: 12.5px; }
.site-footer nav a:hover { color: var(--on-dark-strong); }
.site-footer .legal { max-width: 520px; }

/* ---------- Motion ----------
   The hero load sequence and scroll reveals.

   Two things make this safe. First, the hidden state is gated on .js-motion,
   which only ever exists when JavaScript ran, so a crawler or a JS-off visitor
   sees the page exactly as before; opacity:0 in the base stylesheet would blank
   the site for them and undo the no-JS readability work.

   Second, the selector list lives HERE rather than being tagged onto elements by
   site.js. site.js is deferred, so anything it does happens after first paint,
   and tagging there would make content appear, vanish, then fade back in. The
   inline snippet in <head> sets .js-motion before the first paint instead, so
   the hidden state is in place from the start and site.js only adds .in.

   Only transform and opacity animate: both are compositor properties, so this
   holds 60fps on a mid-range phone. Functional UI is deliberately absent from
   the list. The availability map, its filters and panel, and every form stay
   immediate; nobody checking whether a home is still available is here for the
   choreography. */
/* The selector list is wrapped in :where() so it contributes ZERO specificity.
   Without that, .js-motion .sec--head .wrap--text > * (three classes) outranks
   .js-motion .in (two), and an element gets .in while staying invisible. If a
   browser does not understand :where() the whole rule is dropped, which means no
   hiding at all: the safe direction to fail. */
.js-motion :where(
  .hero-inner > *,
  .sec--head .wrap--text > *,
  .sec > .wrap > h2,
  .sec > .wrap--mid > h2,
  .sec > .wrap--text > h2,
  .sec > .wrap--narrow > h2,
  .section-head-row > *,
  .proof-grid > div,
  .builder-strip > *,
  .door-card,
  .plan-card,
  .proof-card,
  .fact-row,
  .step-row,
  .testimonial-card,
  .gallery figure
) {
  opacity: 0;
  transform: translateY(20px);
}
.js-motion .in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}

/* Anyone asking for less motion gets the finished state, not a faster
   animation. The inline snippet also declines to set .js-motion at all, so this
   is the belt to that braces. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .js-motion :where(*) { opacity: 1 !important; transform: none !important; }
}

/* ---------- Utilities ---------- */
.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;
}
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.hint { font-size: 13px; color: var(--muted); max-width: 320px; }

/* ----- Promo announcement banner ----- */
.promo-banner {
  display: block; text-align: center; text-decoration: none;
  background: linear-gradient(90deg, var(--green-dark), var(--green) 50%, var(--green-dark));
  color: var(--on-dark-strong);
  font-size: 13.5px; letter-spacing: .02em; padding: 10px var(--pad-x);
  line-height: 1.45;
}
.promo-banner span { color: var(--accent); display: inline-block; transition: transform .15s ease; }
.promo-banner:hover {
  color: var(--on-dark-strong);
  text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px;
}
.promo-banner:hover span { transform: translateX(3px); }

/* ----- Testimonial cards (Our builder) ----- */
.testimonial-card {
  margin: 0; padding: 24px 26px; display: flex; flex-direction: column;
  background: rgba(240,237,228,.07); border: 1px solid rgba(240,237,228,.18); border-radius: 3px;
}
.testimonial-card blockquote {
  margin: 0; font-size: 14px; line-height: 1.7; color: var(--on-dark-strong); flex: 1; text-wrap: pretty;
}
.testimonial-card figcaption {
  margin-top: 16px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}

/* ----- Greencity builder logo -----
   Greencity's supplied lockup, used as delivered: three tiers stacked (skyline,
   GREENCITY, HOMES) at ~1.66:1, in the black and white colorways from their
   external-use logo folder. Height is the controlled dimension and `width: auto`
   holds the ratio, so the width attribute in the markup only reserves layout
   space. Never below 48px — the HOMES line stops resolving. That size floor is
   why the logo is not in the site header, whose content band is ~34px tall; the
   header keeps its text credit. `flex: none` because a fixed-height <img> in a
   flex row otherwise gets squeezed narrower and stretches the artwork. */
.gc-logo { width: auto; flex: none; }

/* Logo standing above a section eyebrow (tailor hero, our-builder, warranty).
   Stacked, not side by side: at this aspect ratio a 56px logo beside an 11px
   eyebrow leaves the row lopsided. */
.eyebrow-logo, .gc-section-head { margin-bottom: 20px; }
.eyebrow-logo .gc-logo, .gc-section-head .gc-logo { height: 56px; margin-bottom: 15px; }

/* Our-builder masthead logo */
.gc-showcase { display: inline-block; margin-bottom: 26px; }
.gc-showcase .gc-logo { height: clamp(76px, 9vw, 104px); }
.gc-showcase:hover { opacity: .75; }

/* Home-page builder credit strip (sits on --green) */
.builder-strip { display: flex; align-items: center; gap: clamp(22px, 3.4vw, 48px); flex-wrap: wrap; }
.builder-strip-logo { flex: none; }
.builder-strip-logo .gc-logo { height: clamp(64px, 7vw, 84px); }
.builder-strip-logo:hover { opacity: .8; }
.builder-strip p {
  flex: 1 1 340px; font-size: 14.5px; line-height: 1.7;
  color: var(--on-dark); margin: 0; text-wrap: pretty;
}
.builder-strip .btn-row { flex: none; }

/* Footer builder credit: label above the lockup, since the lockup is tall */
.site-footer .f-builder {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  align-self: flex-start; color: rgba(240, 237, 228, .55);
}
.site-footer .f-builder > span {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
}
.site-footer .f-builder .gc-logo { height: 52px; opacity: .92; }
.site-footer .f-builder:hover { color: var(--on-dark-strong); }
.site-footer .f-builder:hover .gc-logo { opacity: 1; }

/* ----- Warranty page ----- */
.warranty-callout { display: flex; align-items: center; gap: clamp(20px, 3.4vw, 44px); flex-wrap: wrap; }
.warranty-callout > div:first-child { flex: 1 1 380px; }
.warranty-callout .serif { font-size: 24px; line-height: 1.2; }
.warranty-callout p:last-child { margin-bottom: 0; }
/* 0 1 auto, not none: the row must stay shrinkable or its buttons keep their
   max-content width at phone widths and punch out of the card. */
.warranty-callout .btn, .warranty-callout .btn-row { flex: 0 1 auto; }
.dark-card.warranty-callout { padding: clamp(26px, 3.4vw, 34px); }

.gc-quote-band { text-align: center; }
.gc-quote-band .gc-logo { height: clamp(72px, 8vw, 96px); margin: 0 auto; }
.gc-quote-band .serif { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; margin: 28px 0 0; }

/* ----- Tour form failure panel -----
   Shown when the lead endpoint is unreachable or rejects. It has to stand on
   its own, because the mailto it also attempts does nothing for a visitor with
   no mail handler registered. */
.form-fallback {
  margin-top: 16px; padding: 18px 20px;
  background: var(--cream); border: 1px solid var(--border);
  border-left: 3px solid var(--terra); border-radius: 3px;
}
.form-fallback b { font-size: 14.5px; display: block; margin-bottom: 6px; }
.form-fallback > p { font-size: 13.5px; line-height: 1.65; color: var(--body-c); margin: 0 0 16px; }
.form-fallback .btn-row { gap: 10px; }
.fallback-details {
  margin: 0; padding: 12px 14px; background: var(--card);
  border: 1px solid var(--border); border-radius: 2px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.7; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; user-select: all;
}

/* ----- Consent block (10DLC-approved wording, tour form) ----- */
.consent { border: 1px solid var(--border); border-radius: 3px; background: var(--cream); padding: 14px 16px 12px; margin: 4px 0 2px; }
.consent-legend { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
/* .form-card label zeroes font-size to hide sr-only wrappers; the consent
   labels must out-specify that rule to stay visible. */
.consent-item, .form-card label.consent-item { display: flex; gap: 10px; align-items: flex-start; font-size: 11.5px; line-height: 1.55; color: var(--body-c); margin-bottom: 10px; cursor: pointer; }
.consent-item input { accent-color: var(--green); width: 15px; height: 15px; margin-top: 2px; flex: none; cursor: pointer; }
.consent-item a { text-decoration: underline; text-underline-offset: 2px; }
.consent-req { color: var(--terra); }
.consent-rec { color: var(--terra-hover); }
.consent-opt { color: var(--muted); }
.consent-foot { font-size: 10.5px; line-height: 1.5; color: var(--faint); margin: 2px 0 0; }

/* ----- Legal pages ----- */
.legal-doc h2 { font-family: var(--sans); font-size: 16.5px; font-weight: 600; margin: 30px 0 10px; }
.legal-doc ul { padding-left: 20px; }
.legal-doc li { margin-bottom: 8px; }
.legal-callout { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 3px; padding: 16px 18px; margin: 14px 0; }
.legal-callout .body-copy:last-child { margin-bottom: 0; }

/* ----- Tailorable home callout in the unit panel ----- */
.unit-tailor-callout { margin-top: 14px; padding: 14px 16px; background: var(--cream); border-left: 2px solid var(--green); }
.unit-tailor-callout b { font-size: 13.5px; }
.unit-tailor-callout p { font-size: 12.5px; line-height: 1.6; color: var(--body-c); margin: 6px 0 8px; }
.unit-tailor-callout a { font-size: 12.5px; font-weight: 600; }
.unit-tailor-callout a span { display: inline-block; transition: transform .15s ease; }
.unit-tailor-callout a:hover span { transform: translateX(3px); }

/* ----- "Text us a question" bubble ----- */
.sms-bubble {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-radius: 999px;
  background: var(--terra); color: var(--card);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 28px rgba(27,36,31,.28);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.sms-bubble:hover {
  background: var(--terra-hover); color: var(--card);
  transform: translateY(-2px); box-shadow: 0 14px 34px rgba(27,36,31,.34);
}
.sms-bubble svg { flex: none; }
@media (max-width: 760px) {
  .sms-bubble { right: 14px; bottom: 14px; padding: 12px 16px; font-size: 13px; }
}

/* ----- Tailor category cards + options dialogs ----- */
.tailor-cat {
  display: block; width: 100%; text-align: left; padding: 0; cursor: pointer;
  font-family: var(--sans); color: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px;
  overflow: hidden; transition: box-shadow .18s ease, border-color .18s ease;
}
.tailor-cat:hover { box-shadow: 0 10px 28px rgba(27,36,31,.14); border-color: var(--green); }
.tailor-cat-hint {
  display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--green);
}
.tailor-cat-hint span { display: inline-block; transition: transform .15s ease; }
.tailor-cat:hover .tailor-cat-hint span { transform: translateX(3px); }

.tailor-dialog {
  border: 0; border-radius: 3px; padding: 0; background: var(--card); color: var(--ink);
  width: min(1160px, 94vw); box-shadow: 0 30px 80px rgba(20,28,23,.4);
}
.tailor-dialog::backdrop { background: rgba(20,28,23,.58); backdrop-filter: blur(2px); }
.td-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 22px; background: var(--green); color: var(--hero-ink);
}
.td-head .serif { font-size: 24px; }
.td-close {
  background: none; border: 1px solid rgba(247,244,237,.4); color: var(--hero-ink);
  width: 34px; height: 34px; border-radius: 2px; cursor: pointer; font-size: 14px;
}
.td-close:hover { background: rgba(247,244,237,.14); }
.td-body { overflow: auto; max-height: min(66vh, 900px); padding: 14px; background: #fff; }
.td-body img { width: 100%; display: block; }
.td-body img + img { margin-top: 12px; }
.td-note { font-size: 14.5px; line-height: 1.7; color: var(--body-c); margin: 10px 8px; max-width: 560px; }
.td-foot {
  padding: 13px 22px; border-top: 1px solid var(--border); background: var(--cream);
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}

/* ----- Offer callout (Get pre-approved) ----- */
.offer-box {
  margin-top: 26px; padding: 22px 24px; max-width: 660px;
  background: var(--cream); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 3px;
}

/* ----- Kenmore photo band ----- */
.kenmore-band {
  display: flex; gap: 12px; overflow-x: auto; margin: 0 0 34px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 6px; scrollbar-width: thin;
}
.kenmore-band figure {
  margin: 0; flex: 0 0 auto; scroll-snap-align: start;
  border-radius: 2px; overflow: hidden;
}
.kenmore-band img {
  display: block; height: 190px; width: auto; max-width: 300px; object-fit: cover;
}
@media (max-width: 760px) { .kenmore-band img { height: 150px; max-width: 240px; } }

/* ----- "Get updates" band above the footer ----- */
.updates-band { background: var(--cream); border-top: 1px solid var(--border); padding: clamp(32px, 5vw, 48px) var(--pad-x); }
.updates-inner {
  max-width: 980px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.updates-inner p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 6px 0 0; max-width: 420px; }
#updates-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; position: relative; }
#updates-form input[type=email] {
  font: inherit; font-size: 14px; padding: 12px 14px; min-width: 240px;
  border: 1px solid var(--border); border-radius: 3px; background: var(--card); color: var(--ink);
}
#updates-form input[type=email]:focus { outline: 2px solid var(--green); outline-offset: 1px; }
@media (max-width: 760px) {
  #updates-form input[type=email] { font-size: 16px; min-width: 0; width: 100%; }
}
#updates-form .form-msg { flex-basis: 100%; font-size: 13px; color: var(--green-dark); margin: 4px 0 0; }