:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  --color-bg: #f6f2ea;
  --color-surface: #fbf9f4;
  --color-surface-2: #efe9dd;
  --color-border: #ddd5c6;
  --color-text: #24221d;
  --color-text-muted: #6b665c;
  --color-primary: #2f5b45;
  --color-primary-hover: #234535;
  --color-primary-highlight: #dbe5dc;
  --color-error: #9b2c2c;
  --radius-md: .5rem; --radius-lg: .875rem;
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 80 / .06);
  --shadow-md: 0 6px 20px oklch(0.2 0.02 80 / .10);
  --ease: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'Gambetta', Georgia, serif;
  --font-body: 'Switzer', 'Helvetica Neue', sans-serif;
  --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; }
h3 { font-size: var(--text-lg); font-weight: 600; }
p { margin: 0; }
a { color: var(--color-primary); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-10)); }
.section { padding-block: clamp(var(--space-12), 7vw, var(--space-24)); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--space-4); top: var(--space-4); z-index: 100; background: #fff; padding: var(--space-2) var(--space-4); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; font: 500 var(--text-sm)/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: background var(--ease), transform var(--ease); }
.btn:hover { background: var(--color-primary-hover); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: var(--space-2) var(--space-4); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.8); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(246,242,234,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 4.25rem; }
.brand { text-decoration: none; color: var(--color-text); display: flex; flex-direction: column; line-height: 1.1; }
.brand-main { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-primary); }
.brand-sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.nav { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav a:not(.btn) { color: var(--color-text); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.nav a:not(.btn):hover { color: var(--color-primary); }
@media (max-width: 760px) { .nav li:not(:last-child) { display: none; } .brand-sub { max-width: 14rem; } }

/* Hero */
.hero { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,24,18,.82) 0%, rgba(20,24,18,.45) 45%, rgba(20,24,18,.1) 100%); }
.hero-content { position: relative; width: 100%; padding-block: var(--space-16) clamp(var(--space-12), 8vw, var(--space-20)); }
.eyebrow { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--space-4); opacity: .92; }
.eyebrow.dark { color: var(--color-primary); margin-bottom: var(--space-2); }
.hero h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-3xl); max-width: 16ch; letter-spacing: -0.01em; }
.hero-lede { margin-top: var(--space-5); max-width: 46ch; font-size: var(--text-base); opacity: .95; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* Listings */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-4); }
.section-head .muted { margin-top: var(--space-1); font-size: var(--text-sm); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.filters label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
select, input, textarea { font: inherit; font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-height: 2.75rem; width: 100%; }
.filters select { min-width: 9.5rem; }
select:focus, input:focus, textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 0; border-color: var(--color-primary); }
.sample-note { font-size: var(--text-xs); color: var(--color-text-muted); background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-8); display: inline-block; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--space-6); }
.listing { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--ease), transform var(--ease); }
.listing:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.listing-btn { all: unset; display: block; width: 100%; cursor: pointer; }
.listing-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.listing-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.listing-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.listing:hover .listing-media img { transform: scale(1.03); }
.badge { position: absolute; left: var(--space-3); top: var(--space-3); background: rgba(251,249,244,.95); color: var(--color-primary); font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: 999px; }
.listing-body { padding: var(--space-5) var(--space-6) var(--space-6); }
.town-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: .06em; }
.listing-body h3 { margin-top: var(--space-1); font-size: var(--text-base); font-weight: 600; }
.specs { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.rent { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.rent strong { font-size: var(--text-lg); color: var(--color-text); font-variant-numeric: tabular-nums; margin-right: 2px; }
.empty { text-align: center; padding: var(--space-12) var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }
.empty p + p { margin-top: var(--space-2); }

/* Towns */
.towns { background: var(--color-surface-2); }
.town-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-8); margin-top: var(--space-8); }
.town { border-top: 2px solid var(--color-primary); padding-top: var(--space-5); }
.town h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); }
.town p { margin-top: var(--space-3); color: var(--color-text-muted); }

/* Apply */
.apply-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.apply-img { border-radius: var(--radius-lg); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: var(--space-6) 0; display: grid; gap: var(--space-5); }
.steps li { counter-increment: s; position: relative; padding-left: 3rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-primary-highlight); color: var(--color-primary); font-weight: 600; display: grid; place-items: center; font-size: var(--text-sm); }
@media (max-width: 820px) { .apply-inner { grid-template-columns: 1fr; } }

/* Contact */
.contact { background: var(--color-primary); color: #f3f1ea; }
.contact h2 { color: #fff; }
.contact-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; }
.contact-inner > div > p { margin-top: var(--space-4); max-width: 42ch; }
.contact-list { margin: var(--space-8) 0 0; display: grid; gap: var(--space-4); }
.contact-list dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.contact-list dd { margin: 0; font-weight: 500; }
.placeholder { opacity: .8; font-style: normal; border-bottom: 1px dashed rgba(255,255,255,.5); display: inline-block; }
.card { background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-lg); padding: clamp(var(--space-6), 3vw, var(--space-8)); box-shadow: var(--shadow-md); }
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); }
.field label { font-size: var(--text-sm); font-weight: 500; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
textarea { resize: vertical; min-height: 6rem; }
.form .btn { justify-self: start; }
.form-error { color: var(--color-error); font-size: var(--text-sm); }
.form-success { background: var(--color-primary-highlight); border-radius: var(--radius-md); padding: var(--space-4); }
.form-success p { margin-top: var(--space-1); }
@media (max-width: 820px) { .contact-inner { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: #1f3a2d; color: #d9dfd6; padding-block: var(--space-8); font-size: var(--text-sm); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); align-items: end; }

/* Dialog */
dialog { border: 0; padding: 0; border-radius: var(--radius-lg); width: min(960px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); background: var(--color-surface); color: var(--color-text); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
dialog[open] { display: grid; grid-template-columns: 1.2fr 1fr; }
dialog::backdrop { background: rgba(20,22,18,.6); }
.close { position: absolute; right: var(--space-3); top: var(--space-3); z-index: 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: rgba(251,249,244,.95); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text); box-shadow: var(--shadow-sm); }
.d-gallery { background: var(--color-surface-2); display: flex; flex-direction: column; }
#d-main { width: 100%; aspect-ratio: 4/3; object-fit: cover; flex: 1; min-height: 0; }
.d-thumbs { display: flex; gap: var(--space-2); padding: var(--space-3); }
.d-thumbs button { padding: 0; border: 2px solid transparent; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; width: 5rem; aspect-ratio: 4/3; background: none; }
.d-thumbs button[aria-pressed="true"] { border-color: var(--color-primary); }
.d-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.d-body { padding: var(--space-8); overflow-y: auto; }
.d-body h2 { padding-right: var(--space-8); }
.d-price { margin-top: var(--space-3); color: var(--color-text-muted); }
.d-price strong { font-size: var(--text-lg); color: var(--color-text); }
.facts { list-style: none; padding: 0; margin: var(--space-4) 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.facts li { background: var(--color-surface-2); border-radius: 999px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: 500; }
.d-body h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--space-6); color: var(--color-text-muted); }
.features { padding-left: var(--space-5); margin: var(--space-2) 0 var(--space-6); font-size: var(--text-sm); }
@media (max-width: 760px) { #d-main { flex: none; } dialog[open] { grid-template-columns: 1fr; overflow-y: auto; } .d-body { overflow: visible; padding: var(--space-6); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* v2 additions */
.addr { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text); }
.pets { margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); }
.rent strong.call { font-size: var(--text-base); color: var(--color-primary); }
.listing.soon .listing-media img { filter: saturate(.7); }
.policy { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-primary-highlight); border-radius: var(--radius-md); font-size: var(--text-sm); }
.reason { border: 0; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.reason legend { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); padding: 0; }
.reason label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.reason input { width: auto; min-height: 0; accent-color: var(--color-primary); }
.app-fields { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-bottom: var(--space-2); }
.form-fallback { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-error); border-radius: var(--radius-md); color: var(--color-text); }
.form-fallback strong { color: var(--color-error); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-outline { background: transparent; color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-highlight); }
.d-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.contact-list dd a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.app-fields:not([hidden]) { display: grid; gap: var(--space-4); }
.reason { margin-bottom: 0; }

/* Photo viewer */
.d-gallery { min-width: 0; }
.d-stage { position: relative; flex: 1; min-height: 0; display: flex; }
.d-stage #d-main { flex: 1; }
.d-gallery.real #d-main { object-fit: contain; background: #1d201c; }
.d-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: rgba(251,249,244,.92); color: var(--color-text); font-size: 1.75rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); display: grid; place-items: center; padding-bottom: .15rem; }
.d-nav:hover { background: #fff; }
.d-nav:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.d-nav.prev { left: var(--space-3); } .d-nav.next { right: var(--space-3); }
.d-nav[hidden] { display: none; }
.d-count { position: absolute; left: var(--space-3); bottom: var(--space-3); margin: 0; background: rgba(20,22,18,.75); color: #fff; font-size: var(--text-xs); font-weight: 500; padding: var(--space-1) var(--space-3); border-radius: 999px; }
.d-count:empty, .d-count[hidden] { display: none; }
.d-thumbs { overflow-x: auto; scrollbar-width: thin; }
.d-thumbs button { flex: 0 0 auto; }
@media (max-width: 760px) { .d-stage { flex: none; } }

/* Move-in costs */
.listing .deposit { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.movein { background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0; }
.movein h3 { margin-top: 0 !important; }
.movein dl { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.movein dl > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; }
.movein dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.movein .total { border-top: 1px solid var(--color-border, rgba(0,0,0,.12)); margin-top: var(--space-1); padding-top: var(--space-2); font-weight: 600; }
.movein .total dd { font-weight: 700; }
.movein[hidden] { display: none; }

/* Keep gallery fixed and scroll only the details panel on wider screens */
@media (min-width: 761px) {
  dialog[open] { height: min(760px, calc(100dvh - 2rem)); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .d-gallery { min-height: 0; }
  .d-body { min-height: 0; overflow-y: auto; }
}

.photo-note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }

.listing .discount { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-primary); font-weight: 600; }
.d-discount { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-primary); font-weight: 600; }
.mc-note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }