/* Country Manor Estates — shared styles
   Brand: matches entrance sign + feather flags (Oct 2026) */
:root {
  --deep: #003A63;      /* primary field */
  --blue: #0071BC;      /* accents, links, ESTATES */
  --dark: #004A7C;      /* hover / pressed */
  --ink: #111111;       /* wordmark, headings on white */
  --white: #FFFFFF;
  --mist: #EDF4FA;      /* light surface, derived from --blue */
  --line: #D3E2EE;      /* hairlines on white */
  --body: #33475B;      /* body text on white */
  --accent: #F47B20;    /* entrance-sign orange: tiny accents on white only, never on deep blue */

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;
  --r-sm: 8px; --r-md: 14px; --r-band: 999px;
  --wrap: 1120px;
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --lift: 0 1px 2px rgba(0, 58, 99, .08), 0 8px 24px -8px rgba(0, 58, 99, .18);
  --float: 0 2px 4px rgba(0, 58, 99, .10), 0 24px 48px -16px rgba(0, 58, 99, .32);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--body);
  font: 500 16px/1.7 "Poppins", system-ui, sans-serif;
  padding-bottom: 72px; /* room for mobile call bar */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img { max-width: 100%; display: block; }
a { color: var(--blue); }
h1, h2, h3 { color: var(--ink); margin: 0; line-height: 1.12; letter-spacing: -0.03em; }
h2 { font-size: clamp(28px, 6vw, 44px); font-weight: 800; }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s2); }
@media (min-width: 640px) { .wrap { padding: 0 var(--s3); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.on-deep :focus-visible { outline-color: var(--white); }

/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; }
.wordmark b { font-weight: 700; color: var(--ink); font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; }
.wordmark span { display: flex; align-items: center; gap: 8px; margin-top: 5px; color: var(--blue); font-weight: 500; font-size: 10.5px; letter-spacing: .5em; padding-left: .5em; }
.wordmark span::before, .wordmark span::after { content: ""; width: 14px; height: 2px; background: var(--accent); }
.wordmark.light b { color: var(--white); }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: var(--s2); }
.nav { display: none; gap: var(--s3); }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--blue); }
.nav a:active { color: var(--dark); }
.nav a[aria-current="page"] { border-bottom-color: var(--blue); }
.head-actions { display: flex; align-items: center; gap: var(--s1); }
.head-actions .btn { display: none; } /* phones use the bottom call bar */
@media (min-width: 900px) { .head-actions .btn { display: inline-flex; } }
.menu-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; font: 600 14px "Poppins", sans-serif; color: var(--ink); cursor: pointer; }
.menu-btn:hover { border-color: var(--blue); }
.menu-btn:active { transform: scale(.97); }
.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--white); }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 14px var(--s2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 18px; border-bottom: 1px solid var(--line); }
.mobile-nav a:hover, .mobile-nav a:active { background: var(--mist); }
@media (min-width: 900px) {
  .nav { display: flex; }
  .menu-btn, .mobile-nav, .mobile-nav.open { display: none; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: var(--r-sm); font: 700 16px "Poppins", sans-serif; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .35s var(--spring); }
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-white { background: var(--white); color: var(--deep); }
.btn-white:hover { background: var(--mist); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--dark); }
.btn-line { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: var(--blue); color: var(--blue); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }

/* ---------- Signature knockout band ---------- */
.band { display: inline-block; background: var(--white); color: var(--deep); border-radius: var(--r-band); padding: .08em .5em .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--deep); color: var(--white); isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero::before { /* deep blue treatment over photo/video, echoes the entrance sign gradient */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(0,113,188,.55), transparent 60%),
    linear-gradient(180deg, rgba(0,58,99,.80) 0%, rgba(0,58,99,.92) 55%, var(--deep) 100%);
}
@media (min-width: 900px) { /* let the drone footage show on the right on wide screens */
  .hero::before { background:
    radial-gradient(90% 90% at 0% 0%, rgba(0,113,188,.45), transparent 60%),
    linear-gradient(90deg, var(--deep) 0%, rgba(0,58,99,.92) 42%, rgba(0,58,99,.35) 75%, rgba(0,58,99,.15) 100%); }
}
.hero .wrap { padding-top: var(--s5); padding-bottom: var(--s5); }
.hero h1 { color: var(--white); font-weight: 800; font-size: clamp(38px, 10.5vw, 76px); line-height: 1.04; max-width: 13ch; }
.hero h1 .band { display: table; margin-top: .35em; font-size: .56em; white-space: nowrap; padding: .12em .55em .16em; letter-spacing: -0.02em; }
.hero-sub { margin-top: var(--s3); max-width: 34ch; font-size: 18px; color: rgba(255,255,255,.88); }
.tagline { display: block; width: min(280px, 72%); color: var(--white); margin-top: var(--s4); }
.hero-ctas { display: grid; gap: 12px; margin-top: var(--s4); max-width: 420px; }
.hero-ctas .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-lg { min-height: 60px; font-size: 18px; }
@media (min-width: 640px) {
  .hero .wrap { padding-top: var(--s6); padding-bottom: var(--s6); }
  .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; max-width: none; }
  .hero-ctas .btn-lg { padding: 0 36px; }
  .hero-ctas .row { display: flex; gap: 12px; }
}

/* ---------- Sections ---------- */
.section { padding: var(--s5) 0; }
@media (min-width: 900px) { .section { padding: var(--s6) 0; } }
.lede { margin-top: var(--s2); font-size: 18px; max-width: 46ch; }
/* orange accent: short dash under headings on light sections, like the dashes on the entrance sign */
.section:not(.on-deep) h2::after { content: ""; display: block; width: 32px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--accent); }
.tint { background: var(--mist); }

/* Three ways — the core of the page */
.paths { margin-top: var(--s4); border-top: 2px solid var(--ink); }
.path { display: grid; gap: var(--s2); padding: var(--s4) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; position: relative; }
.path h3 { font-size: clamp(26px, 6vw, 36px); font-weight: 800; letter-spacing: -0.03em; }
.path p { max-width: 44ch; }
.path .fact { color: var(--deep); font-weight: 700; font-size: 18px; line-height: 1.4; }
.path .fact small { display: block; font-weight: 500; font-size: 14px; color: var(--body); }
.path .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue); }
.path .go svg { width: 18px; height: 18px; transition: transform .4s var(--spring); }
.path:hover .go svg { transform: translateX(5px); }
.path:hover h3 { color: var(--blue); }
.path:active { background: var(--mist); }
.path .status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.path .status { display: inline-block; font-size: 13px; font-weight: 600; color: var(--deep); background: var(--mist); border-radius: var(--r-band); padding: 2px 12px; }
@media (min-width: 900px) {
  .path { grid-template-columns: 1.1fr 1.2fr .9fr; align-items: start; gap: var(--s4); }
  .path .fact { text-align: right; }
}

/* Turnkey */
.turnkey { background: var(--deep); color: var(--white); }
.turnkey h2 { color: var(--white); }
.turnkey .lede { color: rgba(255,255,255,.85); }
.includes { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.18); border-radius: var(--r-md); overflow: hidden; }
.includes li { background: var(--deep); padding: var(--s3) var(--s2); display: grid; gap: 10px; font-weight: 600; font-size: 16px; line-height: 1.35; }
.includes svg { width: 32px; height: 32px; color: #7FC0EC; }
.includes li:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .includes { grid-template-columns: repeat(5, 1fr); }
  .includes li:last-child { grid-column: auto; }
}
.fine { margin-top: var(--s2); font-size: 13px; color: rgba(255,255,255,.7); }

/* Featured homes */
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s2); }
.homes { margin-top: var(--s4); display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px var(--s3); margin-left: -4px; margin-right: -4px; }
@media (min-width: 900px) { .homes { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } }
.home { scroll-snap-align: start; background: var(--white); border-radius: var(--r-md); box-shadow: var(--lift); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .45s var(--spring); }
.home:hover { transform: translateY(-4px); }
.home:active { transform: translateY(0) scale(.99); }
.home-img { aspect-ratio: 16 / 9; position: relative; background: var(--mist); }
.home-img img { width: 100%; height: 100%; object-fit: cover; }
.home-body { padding: var(--s2) var(--s3) var(--s3); display: grid; gap: 4px; }
.home-price { font-size: 26px; font-weight: 800; color: var(--deep); letter-spacing: -0.02em; line-height: 1.2; }
.home-name { font-weight: 700; color: var(--ink); }
.home-specs { font-size: 14px; }
.home-plan { margin-top: var(--s1); border-top: 1px solid var(--line); padding-top: var(--s2); }
.home-plan img { width: 100%; height: 64px; object-fit: contain; object-position: left center; }

/* Lots */
.sites { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 900px) { .sites { grid-template-columns: 1.35fr 1fr; gap: var(--s5); } }
.map { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--float); background: #8DBB5A; display: block; transition: transform .45s var(--spring); }
.map:hover { transform: scale(1.01); }
.facts { list-style: none; padding: 0; margin: var(--s3) 0 var(--s4); display: grid; gap: 0; }
.facts li { display: flex; justify-content: space-between; gap: var(--s2); padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts li b { color: var(--ink); font-weight: 700; text-align: right; }

/* Residents */
.residents { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .residents { grid-template-columns: 1fr 2fr; align-items: center; } }
.res-links { display: grid; gap: 12px; }
@media (min-width: 640px) { .res-links { grid-template-columns: repeat(3, 1fr); } }
.res-link { display: grid; gap: 2px; padding: var(--s2) var(--s3); background: var(--white); border-radius: var(--r-md); box-shadow: var(--lift); text-decoration: none; color: var(--ink); font-weight: 700; transition: transform .4s var(--spring); }
.res-link small { font-weight: 500; color: var(--body); font-size: 14px; }
.res-link:hover { transform: translateY(-3px); }
.res-link:hover span { color: var(--blue); }
.res-link:active { transform: scale(.98); }

/* Visit */
.visit { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .visit { grid-template-columns: 1fr 1fr; align-items: end; } }
.visit address { font-style: normal; font-size: 20px; color: var(--ink); font-weight: 600; line-height: 1.5; margin-top: var(--s2); }
.contact-list { display: grid; gap: 12px; }

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding: var(--s5) 0 var(--s4); font-size: 14px; }
.foot-grid { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-links a { color: var(--ink); text-decoration: none; font-weight: 600; }
.foot-links a:hover { color: var(--blue); text-decoration: underline; }
.partners { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.partners img { height: 56px; width: auto; }
.partners a img { height: 84px; margin: -14px 0; } /* L&C Management SVG has built-in padding */
.eho { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 13px; }
.eho svg { width: 40px; height: 40px; flex: none; color: var(--ink); }

/* Mobile call bar */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px var(--s2) calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(0,58,99,.25); }
.callbar .btn { min-height: 48px; }
@media (min-width: 900px) { .callbar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ================= Inner pages ================= */
.page-hero { background: var(--deep); color: var(--white); padding: var(--s5) 0 var(--s4); }
.page-hero h1 { color: var(--white); font-weight: 800; font-size: clamp(34px, 8vw, 56px); }
.page-hero p { margin-top: var(--s2); max-width: 46ch; font-size: 18px; color: rgba(255,255,255,.88); }
.page-hero .hero-ctas { margin-top: var(--s3); }
.sub-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--s3); }
.sub-nav a { color: var(--white); text-decoration: none; font-weight: 600; font-size: 14px; border: 1.5px solid rgba(255,255,255,.4); border-radius: var(--r-band); padding: 6px 14px; }
.sub-nav a:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.sub-nav a:active { transform: scale(.97); }
h2 + .lede, .head-row + .lede { margin-top: var(--s2); }
.note { font-size: 14px; color: var(--body); margin-top: var(--s2); }
.empty { margin-top: var(--s3); padding: var(--s3); border: 1.5px dashed var(--line); border-radius: var(--r-md); display: grid; gap: var(--s2); justify-items: start; }
.empty b { color: var(--ink); font-size: 18px; }
.load-error { padding: var(--s3) 0; font-weight: 600; color: var(--ink); }

/* Home cards rendered from the spreadsheet */
button.home { font: inherit; text-align: left; border: 0; padding: 0; cursor: pointer; width: 100%; }
.homes.grid { grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; }
@media (min-width: 640px) { .homes.grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .homes.grid { grid-template-columns: repeat(3, 1fr); } }
.home-img .as-plan { object-fit: contain; padding: 14px; background: var(--white); }
.home-img:has(.as-plan) { background: var(--white); border-bottom: 1px solid var(--line); }
.no-img { position: absolute; inset: 0; display: grid; place-items: center; color: var(--deep); font-weight: 600; font-size: 14px; }
.home-lot { font-size: 13px; font-weight: 700; color: var(--deep); }

/* Home detail dialog */
.home-dialog { border: 0; padding: 0; border-radius: var(--r-md); width: min(720px, calc(100% - 24px)); max-height: calc(100% - 24px); box-shadow: var(--float); }
.home-dialog::backdrop { background: rgba(0, 28, 48, .6); }
.home-dialog[open] { animation: pop .35s var(--spring); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.dlg-inner { position: relative; }
.dlg-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--white); color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; box-shadow: var(--lift); z-index: 1; }
.dlg-close:hover { color: var(--blue); }
.dlg-close:active { transform: scale(.94); }
.dlg-photo { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.dlg-body { padding: var(--s3); display: grid; gap: 10px; }
.dlg-body h3 { font-size: 26px; }
.dlg-plan { display: block; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; text-decoration: none; }
.dlg-plan:hover { border-color: var(--blue); }
.dlg-plan span { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; }
.dlg-incl { font-size: 14px; }
.dlg-incl b { color: var(--ink); }
.dlg-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }

/* Two-column content blocks */
.split { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; } }
.checklist { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 12px; }
.checklist li { padding-left: 30px; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 14px; height: 8px; border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(-45deg); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s2); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.steps li::before { content: counter(s); width: 36px; height: 36px; border-radius: 50%; background: var(--deep); color: var(--white); font-weight: 800; display: grid; place-items: center; }
.steps b { color: var(--ink); display: block; }

/* Lot status grid */
.lots { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.lot { border-radius: var(--r-sm); padding: 10px 8px; text-align: center; line-height: 1.2; background: var(--white); box-shadow: var(--lift); }
.lot b { display: block; font-size: 20px; color: var(--ink); }
.lot span { font-size: 12px; font-weight: 600; }
.lot.open span { color: var(--blue); }
.lot.held { background: var(--mist); box-shadow: none; }
.lot.taken { background: var(--mist); box-shadow: none; opacity: .55; }

/* Rules */
.search { width: 100%; min-height: 54px; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 0 16px; font: 500 17px "Poppins", sans-serif; color: var(--ink); background: var(--white); }
.search:hover { border-color: #9DBFD8; }
.search:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.rules-tools { display: grid; gap: 12px; margin-top: var(--s3); }
@media (min-width: 640px) { .rules-tools { grid-template-columns: 1fr auto; } }
.rule-list { margin-top: var(--s3); border-top: 2px solid var(--ink); }
.rule { border-bottom: 1px solid var(--line); }
.rule summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 700; color: var(--ink); font-size: 18px; }
.rule summary::-webkit-details-marker { display: none; }
.rule summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 26px; font-weight: 500; color: var(--blue); transition: transform .3s var(--spring); }
.rule[open] summary::after { transform: rotate(45deg); }
.rule summary:hover { color: var(--blue); }
.rule-body { padding: 0 0 var(--s3); display: grid; gap: 10px; max-width: 70ch; }
.rule-body ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* Contact cards / info rows */
.info { list-style: none; padding: 0; margin: var(--s3) 0 0; }
.info li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.info b { color: var(--ink); }
.info a { font-weight: 600; }

/* Form */
.form { display: grid; gap: var(--s2); margin-top: var(--s3); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; color: var(--ink); font-size: 15px; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; font: 500 16px "Poppins", sans-serif; color: var(--ink); background: var(--white); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #9DBFD8; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.two { display: grid; gap: var(--s2); }
@media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; }
.panel { background: var(--white); border-radius: var(--r-md); box-shadow: var(--float); padding: var(--s3); }
@media (min-width: 640px) { .panel { padding: var(--s4); } }

@media print {
  .site-head, .mobile-nav, .callbar, .rules-tools, .sub-nav, .hero-ctas, .site-foot .foot-links, .partners { display: none !important; }
  body { padding: 0; font-size: 11pt; }
  .page-hero { background: none; color: var(--ink); padding: 0 0 12pt; }
  .page-hero h1 { color: var(--ink); font-size: 24pt; }
  .page-hero p { color: var(--body); }
  .section { padding: 12pt 0; }
  .rule { break-inside: avoid; }
  .rule summary { padding: 8pt 0 4pt; }
  .rule summary::after { display: none; }
  .rule-body { padding-bottom: 8pt; }
}

/* Compact list cards on phones so 36 homes don't become an endless scroll */
@media (max-width: 639px) {
  .homes.grid { gap: 12px; }
  .homes.grid .home { flex-direction: row; align-items: stretch; }
  .homes.grid .home-img { flex: 0 0 38%; aspect-ratio: auto; min-height: 112px; }
  .homes.grid .home-img img { position: absolute; inset: 0; }
  .homes.grid .home-img .as-plan { padding: 8px; }
  .homes.grid .home-body { padding: 12px 14px; gap: 2px; }
  .homes.grid .home-price { font-size: 21px; }
  .homes.grid .home-specs { font-size: 13px; line-height: 1.5; }
  .homes.grid .home-plan { display: none; }
}

[hidden] { display: none !important; }

/* Homes page filter chips */
.filters { display: flex; gap: 8px; overflow-x: auto; margin-top: var(--s3); padding-bottom: 4px; scrollbar-width: none; }
.filters button { flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--r-band); border: 1.5px solid var(--line); background: var(--white); color: var(--ink); font: 600 14px "Poppins", sans-serif; cursor: pointer; }
.filters button:hover { border-color: var(--blue); }
.filters button:active { transform: scale(.96); }
.filters button[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--white); }

/* Internal-only flag (local preview) */
.home-flag { display: inline-block; margin: 4px 0; padding: 2px 10px; border-radius: var(--r-band); border: 1.5px dashed var(--accent); color: #9A4A0C; font-size: 12px; font-weight: 700; }

/* Rules & Regs tile in the header (desktop); phones get it in the menu */
.rules-tile { display: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--r-sm); background: var(--mist); color: var(--deep); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
.rules-tile:hover { background: #DCEAF6; }
.rules-tile:active { transform: scale(.97); }
.rules-tile[aria-current="page"] { background: var(--deep); color: var(--white); }
@media (min-width: 900px) { .rules-tile { display: inline-flex; } }
@media (min-width: 900px) and (max-width: 1099px) { .nav { gap: 16px; } .nav a { font-size: 14px; } .head-actions .btn-line { display: none; } }
.rules-docs { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 640px) { .rules-docs { grid-template-columns: 1fr 1fr; } }
.rules-docs .btn { justify-content: flex-start; }
.rules-docs small { display: block; font-weight: 500; font-size: 13px; color: var(--body); }
.rules-docs .btn { min-height: 64px; flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 18px; line-height: 1.3; }

.rules-tools { grid-template-columns: 1fr !important; }

.path .disclose { font-size: 13px; line-height: 1.5; color: var(--body); margin-top: 8px; }

/* Rules: small linked note, subsections, footer disclosure */
.rule-body .li-note { list-style: none; margin-left: -20px; font-size: 14px; }
.rule-body h4 { margin: 10px 0 0; font-size: 16px; color: var(--ink); }
.rule-body h4:first-child { margin-top: 0; }
.rules-foot { margin-top: var(--s2); font-size: 13px; color: var(--body); }