/* Eleanor Farnsworth | New Orleans Luxury Real Estate
   Shared design system. Paper ground, forest accent, editorial serif display. */

:root {
  --paper:      #FAF8F3;
  --paper-warm: #F2EFE7;
  --paper-deep: #E8E4D9;
  --ink:        #15201A;
  --ink-soft:   #4A554E;
  --ink-mute:   #7A837C;
  --green:      #1F4634;
  --green-deep: #122A1E;
  --hairline:   rgba(21, 32, 26, 0.13);
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 76px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--green); color: var(--paper); }

h1, h2, h3, h4, .serif {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.012em;
  /* Evens the rag on display type the way a typesetter would. Ignored where
     unsupported, so there is no fallback to write. */
  text-wrap: balance;
}
/* Kills orphans in body copy. Safari's implementation is the better one. */
p, .lead, figcaption, dd { text-wrap: pretty; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4.5rem); }
.wrap-narrow { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4.5rem); }

.eyebrow {
  display: block; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green); margin-bottom: 1.1rem;
}

/* ---------------- Motion ---------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.09s; }
.d2 { transition-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ln-i { transform: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Cross-document view transitions ----
   This is a multi-page static site with real navigations, so the browser can
   carry a photograph from a listing card into the detail-page hero rather than
   cutting to a new page. One at-rule; browsers without it just navigate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 280ms; animation-timing-function: var(--ease);
}
/* Card thumbnails are 4:3 and heroes are wide. Without this the morph stretches,
   because the browser is interpolating a screenshot, not the live element. */
::view-transition-old(*), ::view-transition-new(*) { object-fit: cover; }
/* Chrome hands the group a 400ms default; match the page fade so they settle together. */
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ease); }
/* Persistent chrome should sit still across the navigation instead of cross-fading. */
.nav { view-transition-name: site-nav; }
.site-foot { view-transition-name: site-foot; }

/* ---- Masked line reveal ----
   Lines rise from behind a clipped edge, the way type appears under a ruler.
   site.js splits the text; if it never runs the heading is simply visible. */
[data-split].reveal { opacity: 1; transform: none; transition: none; }
.ln { display: block; overflow: hidden; }
.ln-i { display: block; transform: translateY(108%);
  transition: transform 0.95s var(--ease); transition-delay: calc(var(--i) * 0.075s); }
.is-in .ln-i { transform: none; }

/* ---- Reading progress ----
   Runs on the compositor via a scroll timeline where supported (Safari 26.4+
   threads these), and falls back to a rAF-batched scroll handler in site.js. */
.readbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none; }
.readbar i { display: block; height: 100%; background: var(--green);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
@supports (animation-timeline: scroll()) {
  .readbar i { animation: readGrow linear both; animation-timeline: scroll(root block); }
  @keyframes readGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---- Hero drift ----
   Pure CSS scroll-linked parallax on the detail hero copy. No scroll handler,
   no library, and nothing at all in browsers without scroll timelines. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ldetail-hero-copy { animation: heroDrift linear both;
      animation-timeline: view(); animation-range: exit 0% exit 90%; }
    @keyframes heroDrift { to { transform: translateY(-14%); opacity: 0.15; } }
  }
}

/* Respect a system request for less translucency and stronger contrast. */
@media (prefers-reduced-transparency: reduce) {
  .nav, .sticky-bar { backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --ink-mute: #4A554E; --hairline: rgba(21, 32, 26, 0.4); }
}

/* ---------------- Nav ---------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center; border-bottom: 1px solid transparent;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease);
}
.nav.solid, .nav.always-solid {
  background: rgba(250, 248, 243, 0.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--hairline);
}
.nav-inner { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-mark { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; white-space: nowrap; }
.nav-mark small { display: block; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 1px; font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); font-size: 0.83rem; letter-spacing: 0.03em; }
.nav-links > a:not(.btn) { position: relative; padding: 6px 0; color: var(--ink-soft); transition: color 0.3s var(--ease); }
.nav-links > a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 100%;
  background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.nav-links > a:not(.btn):hover { color: var(--ink); }
.nav-links > a:not(.btn):hover::after, .nav-links > a.current::after { transform: scaleX(1); }
.nav-links > a.current { color: var(--ink); }
.nav-phone { font-size: 0.83rem; color: var(--ink); white-space: nowrap; }
.nav-phone:hover { color: var(--green); }

.nav.on-dark:not(.solid) .nav-mark,
.nav.on-dark:not(.solid) .nav-links > a:not(.btn),
.nav.on-dark:not(.solid) .nav-phone { color: #FAF8F3; }
.nav.on-dark:not(.solid) .nav-mark small { color: rgba(250,248,243,0.7); }
.nav.on-dark:not(.solid) .btn-nav { border-color: rgba(250,248,243,0.55); color: #FAF8F3; background: transparent; }
.nav.on-dark:not(.solid) .btn-nav:hover { background: #FAF8F3; color: var(--ink); }
.nav.on-dark:not(.solid) .burger span { background: #FAF8F3; }

/* Hamburger */
.burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center;
  align-items: flex-end; gap: 5px; }
.burger span { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.25s var(--ease); }
.burger span:nth-child(2) { width: 18px; }
.nav.menu-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.menu-open .burger span:nth-child(2) { opacity: 0; }
.nav.menu-open .burger span:nth-child(3) { width: 24px; transform: translateY(-6.5px) rotate(-45deg); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: var(--paper); padding: 0.85rem 1.9rem;
  font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap; border: 1px solid var(--green);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.15s var(--ease);
}
.btn:hover { background: var(--green-deep); border-color: var(--green-deep); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(21,32,26,0.32); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-light { background: transparent; color: #FAF8F3; border-color: rgba(250,248,243,0.5); }
.btn-light:hover { background: #FAF8F3; border-color: #FAF8F3; color: var(--ink); }
.btn-nav { padding: 0.62rem 1.3rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--green); outline-offset: 3px;
}

/* ---------------- Listing cards ---------------- */
.card-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(2rem, 3.4vw, 3.4rem) clamp(1.2rem, 2vw, 2rem); }
.lcard { grid-column: span 2; display: block; }
.lcard.w3 { grid-column: span 3; }
.lcard.w4 { grid-column: span 4; }
.lcard-img { overflow: hidden; background: var(--paper-deep); }
.lcard-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s var(--ease); }
.lcard.w3 .lcard-img img, .lcard.w4 .lcard-img img { aspect-ratio: 16 / 10; }
.lcard:hover .lcard-img img { transform: scale(1.04); }
.lcard-body { padding-top: 1.15rem; }
.lcard h3 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); transition: color 0.3s var(--ease); }
.lcard:hover h3 { color: var(--green); }
.lcard-place { font-size: 0.85rem; color: var(--ink-mute); margin-top: 0.2rem; }
.lcard-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); }
.lcard-price { font-family: var(--serif); font-size: 1.35rem; }
.lcard-specs { font-size: 0.78rem; color: var(--ink-mute); white-space: nowrap; }
.lcard[hidden] { display: none; }

/* Filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding-bottom: 1.4rem; margin-bottom: clamp(2rem, 3vw, 2.8rem); border-bottom: 1px solid var(--hairline); }
.filters .fl { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); margin-right: 0.7rem; }
.chip { padding: 0.5rem 1.1rem; font-size: 0.8rem; border: 1px solid var(--hairline);
  color: var(--ink-soft); transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.chip:hover { border-color: var(--green); color: var(--green); }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--paper); }
.filter-count { margin-left: auto; font-size: 0.8rem; color: var(--ink-mute); }

/* ---------------- Listing detail ---------------- */
.ldetail-hero { position: relative; height: min(78vh, 760px); min-height: 420px; background: var(--green-deep); overflow: hidden; }
.ldetail-hero img { width: 100%; height: 100%; object-fit: cover; animation: slowIn 2.6s var(--ease) both; }
@keyframes slowIn { from { transform: scale(1.07); } to { transform: none; } }
.ldetail-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(18,42,30,0.5) 0%, rgba(18,42,30,0.05) 34%, rgba(18,42,30,0.62) 100%); }
.ldetail-hero-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding-bottom: clamp(2rem, 4vw, 3.4rem); color: #FAF8F3; }
.ldetail-hero-copy .status { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85; }
.ldetail-hero-copy h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); margin: 0.5rem 0 0.4rem; }
.ldetail-hero-copy .where { font-size: 0.95rem; opacity: 0.88; }

.ldetail-bar { border-bottom: 1px solid var(--hairline); background: var(--paper-warm); }
.ldetail-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.4rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.ldetail-price { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--green); line-height: 1; }
.spec-row { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 3vw, 3rem); }
.spec { display: flex; flex-direction: column; gap: 2px; }
.spec dt { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
.spec dd { font-family: var(--serif); font-size: 1.3rem; }

.ldetail-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2.5rem, 5vw, 5rem);
  padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); align-items: start; }
.ldetail-copy h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: 1.4rem; max-width: 22ch; }
.ldetail-copy p { color: var(--ink-soft); max-width: 64ch; }
.ldetail-copy p + p { margin-top: 1.15rem; }
.feature-list { list-style: none; margin-top: 2.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.feature-list li { padding: 0.75rem 0; border-top: 1px solid var(--hairline); font-size: 0.93rem; color: var(--ink-soft); }

.agent-card { position: sticky; top: calc(var(--nav-h) + 24px); background: var(--paper-warm);
  padding: 2rem 1.8rem; border-top: 2px solid var(--green); }
.agent-card img { width: 92px; height: 92px; object-fit: cover; object-position: 50% 22%; border-radius: 50%; margin-bottom: 1.1rem; }
.agent-card .name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; }
.agent-card .role { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 0.35rem; }
.agent-card .lines { list-style: none; margin: 1.5rem 0; }
.agent-card .lines li { display: flex; gap: 0.9rem; padding: 0.55rem 0; border-top: 1px solid var(--hairline);
  font-size: 0.88rem; color: var(--ink-soft); }
.agent-card .lines li span:first-child { min-width: 46px; color: var(--ink); }
.agent-card .lines a:hover { color: var(--green); }
.agent-card .btn { width: 100%; }
.agent-card .mls { font-size: 0.72rem; color: var(--ink-mute); margin-top: 1.1rem; line-height: 1.55; }

/* Drop cap on the opening paragraph. `initial-letter` is the correct property but
   Firefox still has no support, so this is the float that works everywhere. */
.ldetail-copy p.dc::first-letter {
  float: left; font-family: var(--serif); font-size: 3.5em; line-height: 0.8;
  color: var(--green); padding: 0.06em 0.1em 0 0;
}

/* ---------------- Gallery ---------------- */
.gallery-sec { padding-bottom: clamp(4rem, 8vw, 7rem); }
.gallery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  border-top: 1px solid var(--hairline); padding-top: 2rem; margin-bottom: 2rem; }
.gallery-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.gallery-head .count { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.gallery { columns: 3; column-gap: 14px; }
.gallery figure { break-inside: avoid; margin-bottom: 14px; overflow: hidden; background: var(--paper-deep); cursor: zoom-in; }
.gallery img { width: 100%; transition: transform 1s var(--ease); }
.gallery figure:hover img { transform: scale(1.035); }

/* Native <dialog>: the browser supplies the focus trap, page inertness, and
   Escape handling that the previous hand-rolled overlay had to fake. */
.lb { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0;
  padding: 0; background: rgba(12, 20, 15, 0.97); color: #FAF8F3; overflow: hidden; }
.lb::backdrop { background: rgba(12, 20, 15, 0.97); }
/* minmax(0, 1fr), not 1fr: a bare 1fr floors at the image's intrinsic height and
   lets a tall photograph push down through the thumbnail rail. */
.lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
/* Flex, not grid: an implicit grid row is auto-sized, so a percentage max-height
   on the photograph had nothing definite to resolve against and was ignored. */
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 0; overflow: hidden; padding: 1rem; }
.lb-stage img { max-width: min(94vw, 1600px); max-height: 100%; width: auto; height: auto;
  object-fit: contain; animation: lbIn 0.4s var(--ease) both; }
@keyframes lbIn { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

/* The controls sit over whatever photograph is loaded, so they carry their own
   ground rather than relying on the image behind them being dark. */
.lb-close, .lb-prev, .lb-next { position: absolute; z-index: 3; color: #FAF8F3;
  width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.7rem; line-height: 1;
  border-radius: 50%; background: rgba(12, 20, 15, 0.55);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(12, 20, 15, 0.9); }
.lb-close { top: 16px; right: 18px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lb-counter { position: absolute; z-index: 3; top: 22px; left: 50%; transform: translateX(-50%);
  padding: 0.4rem 0.9rem; border-radius: 99px; background: rgba(12, 20, 15, 0.55);
  color: rgba(250, 248, 243, 0.92); font-size: 0.74rem; letter-spacing: 0.16em; }

/* Thumbnail rail: on a thirty-photo set, a strip beats hunting with the arrows. */
.lb-rail { display: flex; gap: 6px; overflow-x: auto; padding: 12px clamp(0.8rem, 3vw, 2rem) 16px;
  scroll-snap-type: x proximity; border-top: 1px solid rgba(250,248,243,0.14); }
.lb-rail button { flex: 0 0 auto; width: 84px; height: 58px; padding: 0; scroll-snap-align: center;
  opacity: 0.4; transition: opacity 0.25s var(--ease); }
.lb-rail button img { width: 100%; height: 100%; object-fit: cover; }
.lb-rail button:hover { opacity: 0.75; }
.lb-rail button[aria-current="true"] { opacity: 1; outline: 2px solid #FAF8F3; outline-offset: -2px; }
@media (max-width: 640px) {
  .lb-rail button { width: 62px; height: 44px; }
  .lb-prev, .lb-next { width: 48px; height: 48px; }
}

/* ---------------- Sold archive table ---------------- */
.sold-table { width: 100%; border-collapse: collapse; }
.sold-table caption { text-align: left; font-size: 0.8rem; color: var(--ink-mute); padding-bottom: 1rem; }
.sold-table th { text-align: left; font-family: var(--sans); font-weight: 500; font-size: 0.64rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
  padding: 0 0 0.9rem; border-bottom: 1px solid var(--ink); }
.sold-table th.num, .sold-table td.num { text-align: right; }
.sold-table td { padding: 1.05rem 0; border-bottom: 1px solid var(--hairline); font-size: 0.95rem; color: var(--ink-soft); vertical-align: baseline; }
.sold-table td.addr { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); padding-right: 1.5rem; }
.sold-table td.price { font-family: var(--serif); font-size: 1.25rem; color: var(--green); white-space: nowrap; }
.sold-table tbody tr { transition: background 0.25s var(--ease); }
.sold-table tbody tr:hover { background: var(--paper-warm); }

.sold-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem 2.5rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--hairline); margin-bottom: clamp(2rem, 4vw, 3rem); }
.sold-total .big { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4.4rem); color: var(--green); line-height: 1; }
.sold-total .cap { font-size: 0.85rem; color: var(--ink-mute); max-width: 46ch; }

/* ---------------- Contact form ---------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--paper);
  border: 1px solid rgba(21,32,26,0.28); padding: 0.8rem 0.9rem; border-radius: 0; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); }
.consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.55; }
.consent input { width: 16px; height: 16px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--green); }
.form-note { font-size: 0.78rem; color: var(--ink-mute); margin-top: 1rem; line-height: 1.6; }

/* ---------------- Footer ---------------- */
.site-foot { background: var(--green-deep); color: var(--paper); padding: clamp(3.5rem, 6vw, 5rem) 0 2.2rem; }
.foot-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.6rem; }
.foot-mark { font-family: var(--serif); font-size: 2rem; line-height: 1.1; }
.foot-mark small { display: block; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.7; margin-top: 0.7rem; line-height: 1.7; }
.foot-col h4 { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.65; margin-bottom: 1rem; font-weight: 500; }
.foot-col ul { list-style: none; }
.foot-col li { padding: 0.28rem 0; font-size: 0.92rem; opacity: 0.92; }
.foot-col a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Louisiana requires the sponsoring broker's name and phone at the same
   visual weight as the agent's own contact details. */
.broker-block { border-top: 1px solid rgba(250,248,243,0.18); padding: 1.8rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem 3rem; align-items: baseline; }
.broker-block .bname { font-size: 0.95rem; }
.broker-block .bname b { font-weight: 500; }
.broker-block a { text-decoration: underline; text-underline-offset: 3px; }

.foot-logos { display: flex; align-items: center; gap: 2rem; padding: 1.6rem 0; border-top: 1px solid rgba(250,248,243,0.18); }
.foot-logos img { height: 38px; width: auto; opacity: 0.92; }
.foot-logos img.tall { height: 48px; }
.foot-base { border-top: 1px solid rgba(250,248,243,0.18); padding-top: 1.5rem;
  display: flex; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; font-size: 0.78rem; opacity: 0.7; }

/* ---------------- Hero ----------------
   A pinned stage that pushes in as you scroll the first screen. Scroll progress
   arrives as --p (0 to 1) from site.js, and every motion below is derived from it,
   so the whole effect is one number and all of it is transform/opacity only.
   --p stays 0 when JS is off or motion is reduced, which leaves a clean still hero. */
/* svh, never dvh: dvh relayouts every time a mobile address bar shows or hides,
   which changes the pin distance mid-scroll and makes the progress snap. */
/* No pinned runway. The clip runs on its own clock, so holding the page in place
   would only have made the reader fight the scrollbar. The hero is one ordinary
   screen: the film plays, and scrolling away is immediate at any point. */
.hero-outer { position: relative; height: 100vh; height: 100svh; background: var(--green-deep); }
.hero-stage {
  --v: 0;  /* playback progress */
  position: relative; overflow: hidden;
  height: 100%;
  display: flex; align-items: flex-end;
}

/* The journey is a 10 second clip scrubbed by scroll: the camera comes up the walk,
   the front door opens, and it glides into the entrance hall. site.js sets the video
   time from scroll progress. The still is what everyone else gets, so the hero is
   never blank: no JS, reduced motion, phones, or a browser that will not play it. */
.hero-zoom { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video, .hero-still {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
}
.hero-video { display: none; }
.hero-stage.video-on .hero-video { display: block; }
.hero-stage.video-on .hero-still { opacity: 0; }
.hero-still { transition: opacity 0.6s var(--ease); }
/* The scrim exists to keep the headline legible, so it leaves with the headline.
   Holding it at full strength over the journey just fogs the photography. */
.hero-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(18,42,30,0.55) 0%, rgba(18,42,30,0.14) 32%, rgba(18,42,30,0.80) 100%);
  /* The scrim comes and goes with the copy, since that is the only thing it is for. */
  opacity: var(--copy-o, 1);
}
/* --copy-o is written by site.js: 1 at the start, 0 while the camera travels, back
   to 1 over the staircase at the end. Defaults to 1 so the static hero, which is what
   phones and reduced-motion get, simply shows the headline and never touches this. */
.hero-copy {
  position: relative; z-index: 2; color: #FAF8F3;
  padding-bottom: clamp(3rem, 7vw, 6rem); padding-top: calc(var(--nav-h) + 2rem);
  opacity: var(--copy-o, 1);
  transform: translate3d(0, calc((1 - var(--copy-o, 1)) * -2.5rem), 0);
}
.hero-stage.copy-hidden .hero-copy { pointer-events: none; }
/* Widths in em, not ch: ch is measured from the font's zero glyph, so it changes
   the moment the webfont swaps in and re-wraps the headline. em follows font-size
   only, which is already fixed by the clamp, so the box never moves. */
.hero-copy h1 { font-size: clamp(2.5rem, 5vw, 4.4rem); max-width: 15em; line-height: 1.04; }
.hero-copy p { max-width: 33em; margin-top: 1.4rem; font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: rgba(250,248,243,0.9); }
.hero-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 2.2rem; }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none !important; }
  .hero-still { opacity: 1 !important; }
  .hero-copy { transform: none; opacity: 1 !important; }
}

/* ---------------- Page sections ---------------- */

.stat-strip { background: var(--paper-warm); border-bottom: 1px solid var(--hairline); }
.stat-strip .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: clamp(2.2rem, 4vw, 3.2rem); padding-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.stat .v { font-family: var(--serif); font-size: clamp(1.8rem, 3.2vw, 2.8rem); color: var(--green); line-height: 1; }
.stat .k { font-size: 0.83rem; color: var(--ink-soft); margin-top: 0.5rem; max-width: 30ch; }

.notable { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.notable h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1.8rem; }
.notable p { color: var(--ink-soft); font-size: clamp(1.02rem, 1.2vw, 1.12rem); max-width: 64ch; }
.notable p + p { margin-top: 1.2rem; }

.feature { background: var(--paper-warm); padding: clamp(4rem, 8vw, 7rem) 0; }
.feature-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.feature-img { overflow: hidden; }
.feature-img img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform 1.2s var(--ease); }
a.feature-img:hover img { transform: scale(1.035); }
.feature h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin: 0.7rem 0 0.5rem; }
.feature .place { font-size: 0.9rem; color: var(--ink-mute); }
.feature .price { font-family: var(--serif); font-size: clamp(1.7rem, 2.4vw, 2.1rem); color: var(--green); margin: 1.1rem 0; }
.feature p { color: var(--ink-soft); max-width: 50ch; }
.feature .stat-line { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: 1.6rem 0 1.9rem;
  padding-top: 1.2rem; border-top: 1px solid var(--hairline); font-size: 0.85rem; color: var(--ink-mute); }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  flex-wrap: wrap; margin-bottom: clamp(2rem, 3.6vw, 3rem); }
.sec-head h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.sec-head a.more { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green);
  border-bottom: 1px solid var(--green); padding-bottom: 3px; white-space: nowrap; }

.listings-home { padding: clamp(4.5rem, 9vw, 8rem) 0 0; }
.sold-home { padding: clamp(4.5rem, 9vw, 8rem) 0; }

.about { background: var(--green-deep); color: var(--paper); padding: clamp(5rem, 9vw, 8rem) 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center; }
.about-grid img { width: 100%; }
.about h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: 1.6rem; }
.about p { color: rgba(250,248,243,0.82); max-width: 58ch; }
.about p + p { margin-top: 1.2rem; }
.about blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.36; color: #FAF8F3; margin: 2rem 0; padding-left: 1.6rem; padding-bottom: 5px;
  border-left: 2px solid rgba(250,248,243,0.45); max-width: 44ch; }
.about cite { display: block; font-family: var(--sans); font-style: normal; font-size: 0.76rem;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-top: 1rem; }

.creds { padding: clamp(5rem, 9vw, 8rem) 0; }
.creds h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.cred-layout { display: grid; grid-template-columns: 1fr 1.55fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.cred-lead { background: var(--green-deep); color: var(--paper); padding: clamp(1.8rem, 3vw, 2.6rem); }
.cred-lead .t { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.12; }
.cred-lead p { font-size: 0.92rem; color: rgba(250,248,243,0.82); margin-top: 1rem; }
.cred-cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(1.6rem, 3vw, 3rem); }
.cred-cols h3 { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500; margin-bottom: 1rem; }
.cred-cols ul { list-style: none; }
.cred-cols li { padding: 0.6rem 0; border-top: 1px solid var(--hairline); color: var(--ink-soft); font-size: 0.93rem; }
.cred-cols li b { color: var(--ink); font-weight: 500; margin-right: 0.6rem; }

.press { background: var(--paper-warm); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.6rem, 3vw, 3rem); }
.clip { display: block; padding: 1.5rem 0; border-top: 1px solid var(--hairline); }
.clip .pub { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); }
.clip h3 { font-size: clamp(1.1rem, 1.4vw, 1.3rem); margin: 0.55rem 0 0.45rem; line-height: 1.3;
  transition: color 0.3s var(--ease); }
.clip:hover h3 { color: var(--green); }
.clip .year { font-size: 0.8rem; color: var(--ink-mute); }

.contact { padding: clamp(5rem, 9vw, 8rem) 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.contact h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 1.2rem; }
.contact .said { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.45; max-width: 36ch; margin-bottom: 2rem; color: var(--ink); }
.contact-lines { list-style: none; margin-bottom: 2.2rem; }
.contact-lines li { display: flex; gap: 1.4rem; padding: 0.75rem 0; border-top: 1px solid var(--hairline);
  font-size: 0.94rem; color: var(--ink-soft); }
.contact-lines li span:first-child { min-width: 62px; color: var(--ink); }
.contact-lines a:hover { color: var(--green); }
.map { min-height: 300px; }
.map iframe { width: 100%; height: 300px; border: 0; filter: grayscale(0.6) sepia(0.06); }

/* ---------------- Map ---------------- */
.map-canvas {
  height: clamp(420px, 64vh, 720px);
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
}
/* The tiles are a grey basemap; this warms them into the page palette so the
   map reads as part of the site rather than an embed dropped on top of it. */
.map-canvas .leaflet-tile-pane { filter: sepia(0.18) saturate(0.72) brightness(1.03); }
/* Leaflet puts .leaflet-container on this same element, so these are compound
   selectors, not descendant ones. */
.map-canvas.leaflet-container { background: var(--paper-deep); font-family: var(--sans); }
.map-canvas .leaflet-control-attribution {
  background: rgba(250, 248, 243, 0.86); font-size: 0.66rem; color: var(--ink-mute);
}
.map-canvas .leaflet-control-attribution a { color: var(--ink-soft); }
.map-canvas .leaflet-bar a {
  color: var(--ink); background: var(--paper); border-bottom-color: var(--hairline);
}
.map-canvas .leaflet-bar a:hover { background: var(--paper-warm); }
.map-canvas .leaflet-popup-content-wrapper {
  border-radius: 0; background: var(--paper); color: var(--ink);
  box-shadow: 0 12px 40px rgba(21, 32, 26, 0.18);
}
.map-canvas .leaflet-popup-tip { background: var(--paper); }
.map-canvas .leaflet-popup-content { margin: 0; line-height: 1.5; }

/* Photographed listings get their own photograph as the marker. */
.photo-pin { display: block; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--paper); box-shadow: 0 3px 12px rgba(21, 32, 26, 0.35);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.photo-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leaflet-marker-icon:hover .photo-pin,
.leaflet-marker-icon:focus-visible .photo-pin {
  transform: scale(1.14); box-shadow: 0 6px 20px rgba(21, 32, 26, 0.45);
}

/* Leaflet colours every anchor inside the map its own blue, which turns the
   address into a stray link colour. Reclaim it for the site palette. */
.map-canvas a.pin-card,
.map-canvas a.pin-card:hover { color: var(--ink); text-decoration: none; }
.map-canvas .leaflet-popup-close-button {
  color: var(--paper); text-shadow: 0 1px 4px rgba(18, 42, 30, 0.7);
  width: 30px; height: 30px; font-size: 20px; padding: 4px 0 0 0;
}
.map-canvas .leaflet-popup-close-button:hover { color: #fff; }
.pin-card-static + .leaflet-popup-close-button,
.map-canvas .pin-card-static ~ .leaflet-popup-close-button { color: var(--ink-soft); text-shadow: none; }

.pin-card { display: block; color: inherit; text-decoration: none; }
.pin-photo { display: block; position: relative; overflow: hidden; background: var(--paper-deep); }
.pin-photo img { width: 100%; height: 150px; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease); }
.pin-card:hover .pin-photo img { transform: scale(1.05); }
.pin-count { position: absolute; left: 0; bottom: 0; background: rgba(18, 42, 30, 0.82);
  color: var(--paper); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.35rem 0.6rem; }
.pin-body { display: block; padding: 0.85rem 1rem 1rem; }

.pin-addr { font-family: var(--serif); font-size: 1.15rem; display: block; line-height: 1.15;
  transition: color 0.25s var(--ease); }
.pin-card:hover .pin-addr { color: var(--green); }
.pin-area { font-size: 0.76rem; color: var(--ink-mute); display: block; margin-top: 2px; }
.pin-row { display: flex; align-items: baseline; gap: 0.7rem; margin-top: 0.55rem;
  padding-top: 0.5rem; border-top: 1px solid var(--hairline); }
.pin-price { font-family: var(--serif); font-size: 1.05rem; color: var(--green); }
.pin-sold { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.pin-specs { font-size: 0.72rem; color: var(--ink-mute); margin-left: auto; white-space: nowrap; }
.pin-link { display: block; margin-top: 0.7rem; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.pin-link::after { content: " \2192"; }

/* ---------------- Listing tools ---------------- */
.ldetail-tools { display: flex; gap: 0.5rem; }
.tool { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--hairline); padding: 0.55rem 1rem;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.tool:hover { border-color: var(--green); color: var(--green); }
.tool .tool-on { display: none; }
.tool[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.tool[aria-pressed="true"] .tool-on { display: inline; }
.tool[aria-pressed="true"] .tool-off { display: none; }

/* Save pin on a card */
.lcard { position: relative; }
.lcard-link { display: block; color: inherit; }
.save-pin { position: absolute; top: 0.7rem; right: 0.7rem; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(250, 248, 243, 0.9); backdrop-filter: blur(4px);
  display: grid; place-items: center; opacity: 0; transform: translateY(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease); }
.lcard:hover .save-pin, .save-pin:focus-visible, .save-pin[aria-pressed="true"] {
  opacity: 1; transform: none;
}
.save-pin::before { content: ""; width: 13px; height: 13px; border: 1.5px solid var(--ink);
  border-radius: 2px 2px 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.save-pin[aria-pressed="true"] { background: var(--green); }
.save-pin[aria-pressed="true"]::before { border-color: var(--paper); background: var(--paper); }

/* ---------------- Filter panel ----------------
   One surface holding the whole control set, so the listings below read as results
   rather than as more page furniture. */
.filter-panel {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  gap: clamp(1.8rem, 3vw, 3.2rem);
  background: var(--paper-warm);
  border: 1px solid var(--hairline);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.fp-price { min-width: 0; }
.fp-controls { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1.3rem 2rem; }
.fp-group { display: flex; flex-direction: column; gap: 0.55rem; }
.fp-label { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); }
.fp-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.8rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); }
.filter-count { margin-left: auto; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.clear-all { font-size: 0.78rem; color: var(--ink-mute); text-decoration: underline;
  text-underline-offset: 3px; padding: 0.4rem 0.2rem; }
.clear-all:hover { color: var(--green); }
.clear-all[hidden] { display: none; }

/* Custom select: the native control looks like a form field from another site. */
.select-wrap { position: relative; display: inline-flex; }
.select-wrap::after {
  content: ""; position: absolute; right: 0.85rem; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.sort-select {
  font: inherit; font-size: 0.82rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--hairline); padding: 0.62rem 2.4rem 0.62rem 0.85rem;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: border-color 0.25s var(--ease);
}
.sort-select:hover { border-color: var(--green); }

/* ---------------- Dual-handle price range ---------------- */
.range-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; }
.range-out { font-family: var(--serif); font-size: 1.3rem; color: var(--green); line-height: 1; }
.range-track { position: relative; height: 76px; }

/* The distribution, so an empty stretch of track is visible before it is dragged into. */
.hist { position: absolute; left: 0; right: 0; bottom: 26px; height: 44px;
  display: flex; align-items: flex-end; gap: 2px; }
.hist i { flex: 1; min-height: 4px; background: var(--paper-deep);
  transition: background 0.3s var(--ease), opacity 0.3s var(--ease); opacity: 0.9; }
.hist i.on { background: var(--green); opacity: 0.5; }

.range-rail, .range-fill { position: absolute; left: 0; right: 0; bottom: 22px; height: 3px; }
.range-rail { background: rgba(21, 32, 26, 0.14); }
.range-fill { background: var(--green); right: auto; }
.range-ends { display: flex; justify-content: space-between; font-size: 0.7rem;
  color: var(--ink-mute); margin-top: -0.3rem; }

.range-track input[type="range"] {
  position: absolute; left: 0; width: 100%; bottom: 4px; height: 40px;
  margin: 0; background: none; appearance: none; -webkit-appearance: none;
  pointer-events: none;
}
.range-track input[type="range"]:focus { outline: none; }
.range-track input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; pointer-events: auto;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--green); cursor: grab;
  box-shadow: 0 2px 10px rgba(21, 32, 26, 0.25);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.range-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--green); cursor: grab;
  box-shadow: 0 2px 10px rgba(21, 32, 26, 0.25);
}
.range-track input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.14); box-shadow: 0 4px 16px rgba(21, 32, 26, 0.32);
}
.range-track input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.range-track input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--green); outline-offset: 3px;
}
.range-track input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--green); outline-offset: 3px;
}

/* Two stacked native inputs: keyboard and screen-reader support come free, and only
   the thumbs receive pointer events so both handles stay grabbable. */
.range-track input[type="range"] {
  position: absolute; left: 0; width: 100%; bottom: 0; height: 38px;
  margin: 0; background: none; appearance: none; -webkit-appearance: none;
  pointer-events: none;
}
.range-track input[type="range"]:focus { outline: none; }
.range-track input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; pointer-events: auto;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--green); cursor: grab;
  box-shadow: 0 2px 6px rgba(21, 32, 26, 0.22);
  transition: transform 0.15s var(--ease);
}
.range-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--green); cursor: grab;
  box-shadow: 0 2px 6px rgba(21, 32, 26, 0.22);
}
.range-track input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.range-track input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--green); outline-offset: 3px;
}
.range-track input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--green); outline-offset: 3px;
}

/* Segmented controls */
.seg { display: inline-flex; border: 1px solid var(--hairline); background: var(--paper); }
/* The area list is long enough to wrap, and a joined segmented control leaves a
   dead cell at the end of the first row. Individual pills wrap cleanly instead. */
.seg-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; border: 0; background: none; max-width: 100%; }
.seg-wrap .seg-btn { border: 1px solid var(--hairline); background: var(--paper); }
.seg-btn { font-size: 0.8rem; color: var(--ink-soft); padding: 0.62rem 0.95rem;
  border-right: 1px solid var(--hairline); white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { color: var(--green); background: rgba(31, 70, 52, 0.05); }
.seg-btn[aria-pressed="true"] { background: var(--green); color: var(--paper); }
.seg-solo { border: 1px solid var(--hairline); background: var(--paper); }

@media (max-width: 900px) {
  .filter-panel { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .filter-panel { padding: 1.2rem; gap: 1.4rem; }
  .fp-controls { gap: 1.1rem; }
  .seg-btn { padding: 0.55rem 0.7rem; font-size: 0.76rem; }
  .filter-count { width: 100%; margin-left: 0; text-align: right; }
}

/* ---------------- Sticky property bar ---------------- */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(250, 248, 243, 0.96); backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--hairline); animation: sbUp 0.35s var(--ease) both; }
@keyframes sbUp { from { transform: translateY(100%); } to { transform: none; } }
.sticky-bar[hidden] { display: none; }
.sticky-bar .wrap { display: flex; align-items: center; gap: 1.5rem;
  padding-top: 0.85rem; padding-bottom: 0.85rem; }
.sb-addr { font-family: var(--serif); font-size: 1.15rem; display: block; line-height: 1.15; }
.sb-place { font-size: 0.75rem; color: var(--ink-mute); }
.sb-price { font-family: var(--serif); font-size: 1.35rem; color: var(--green); margin-left: auto; }
@media (max-width: 620px) {
  .sb-place { display: none; }
  .sticky-bar .wrap { gap: 0.9rem; }
  .sb-price { font-size: 1.1rem; }
  .sticky-bar .btn { padding: 0.7rem 1rem; font-size: 0.7rem; }
}

/* ---------------- Payment estimate ---------------- */
.calc { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); }
.calc h3 { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 1rem; }
.calc label { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 0.6rem; }
.calc-row { display: inline-flex; align-items: baseline; gap: 0.35rem; font-size: 0.82rem; color: var(--ink-mute); }
.calc input { width: 72px; font: inherit; font-size: 0.9rem; text-align: right;
  border: 1px solid var(--hairline); background: var(--paper); padding: 0.35rem 0.5rem; color: var(--ink); }
.calc input:focus { border-color: var(--green); outline: none; }
.calc-out { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); }
.calc-amount { font-family: var(--serif); font-size: 1.6rem; color: var(--green); display: block; }
.calc-sub { font-size: 0.78rem; color: var(--ink-mute); }
.calc-note { font-size: 0.68rem; color: var(--ink-mute); margin-top: 0.7rem; line-height: 1.5; }

/* ---------------- Print ----------------
   A property sheet an agent can actually hand over: identity, price, specs and the
   description. Navigation, video, galleries and tools are all noise on paper. */
@media print {
  .nav, .sticky-bar, .ldetail-tools, .gallery-sec, .site-foot, .calc,
  .hero-video, .agent-card .btn, .filters, .map-canvas { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .ldetail-hero { height: 260px; }
  /* Keep the scrim: without it the white address sits on a bright photo and
     disappears on paper. */
  .ldetail-hero::after { opacity: 1; }
  .ldetail-hero-copy { color: #fff; }
  /* Print the address itself, since a "mailto" link is useless on paper. */
  .agent-card .lines a[href^="mailto:"] { font-size: 0; }
  .agent-card .lines a[href^="mailto:"]::after {
    content: attr(data-email); font-size: 0.88rem;
  }
  .ldetail-main { display: block; padding-top: 1rem; }
  .agent-card { border-top: 1px solid #000; margin-top: 1.5rem; padding: 1rem 0; background: none; }
  .ldetail-copy p, .feature-list li { color: #000; }
  a[href^="http"]::after { content: ""; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------- Press ----------------
   Fifty rows of equal weight hid the good ones, so the page now leads with the five
   that matter and turns the remainder into a filterable index. */
.press-stats { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  background: var(--paper-warm); }
.press-stats .wrap { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 5rem);
  padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pstat { display: flex; align-items: baseline; gap: 0.6rem; }
.pstat .v { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--green); }
.pstat .k { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }

.press-featured { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.pfeat-grid { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem); }
.pfeat { display: flex; flex-direction: column; background: var(--paper-warm);
  border-top: 2px solid var(--green); padding: 1.3rem 1.3rem 1.1rem; color: inherit;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease); }
a.pfeat:hover { background: var(--paper-deep); transform: translateY(-3px); }
.pfeat-pub { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green); }
.pfeat h3 { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.28; margin: 0.65rem 0 0; flex: 1; }
.pfeat-year { font-size: 0.75rem; color: var(--ink-mute); margin-top: 1rem; }
a.pfeat .pfeat-year::after { content: " \2197"; }

/* The lead runs the full width so the other four fill one clean row. */
.pfeat-lead { grid-column: 1 / -1; display: grid; align-items: end;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 4vw, 3.5rem);
  padding: 1.8rem clamp(1.4rem, 3vw, 2.2rem) 1.7rem; }
.pfeat-main { display: block; }
.pfeat-lead h3 { font-size: clamp(1.5rem, 2.7vw, 2.15rem); line-height: 1.16;
  margin: 0.55rem 0 0; }
.pfeat-side { display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; gap: 1rem; }
.pfeat-lead .pfeat-year { margin: 0; font-family: var(--serif);
  font-size: clamp(1.7rem, 2.5vw, 2.1rem); color: var(--ink-mute); line-height: 1; }
a.pfeat-lead .pfeat-year::after { content: none; }
.pfeat-cta { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green); border-bottom: 1px solid currentColor; padding-bottom: 0.32rem; }
.pfeat-cta::after { content: " \2197"; }

@media (max-width: 900px) {
  .pfeat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pfeat-grid { grid-template-columns: 1fr; }
  .pfeat-lead { display: flex; flex-direction: column; align-items: flex-start; }
  .pfeat-side { align-items: flex-start; text-align: left; margin-top: 1.2rem; }
}

.filter-panel-slim { display: block; }
.filter-panel-slim .fp-foot { margin-top: 1.1rem; }
.press-count { font-size: 1rem; }

/* Compact index: year gutter, no hairline under every single row. */
.press-index { list-style: none; columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.pitem { break-inside: avoid; display: flex; gap: 1rem; padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline); }
.pitem[hidden] { display: none; }
.pitem-year { font-size: 0.75rem; color: var(--ink-mute); min-width: 2.6rem; padding-top: 0.28rem; }
.pitem-body { display: block; }
.pitem-pub { display: block; font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.15rem; }
.pitem a { font-family: var(--serif); font-size: 1.02rem; line-height: 1.3;
  transition: color 0.25s var(--ease); }
.pitem a:hover { color: var(--green); }
.pitem a::after { content: " \2197"; font-size: 0.72em; color: var(--ink-mute); }
.pitem-nolink { font-family: var(--serif); font-size: 1.02rem; line-height: 1.3; color: var(--ink-soft); }

.press-more-wrap { display: flex; justify-content: center; margin-top: 2rem; }
.press-more-wrap [hidden] { display: none; }

@media (max-width: 820px) { .press-index { columns: 1; } }

/* ---------------- Area guides ---------------- */
.area-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 3vw, 2.8rem); }
.area { border-top: 1px solid var(--hairline); padding-top: 1.3rem; }
.area h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.area p { color: var(--ink-soft); font-size: 0.94rem; margin-top: 0.6rem; max-width: 52ch; }
.area-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-top: 1rem;
  font-size: 0.85rem; color: var(--ink-mute); }
.area-facts b { font-family: var(--serif); font-size: 1.15rem; color: var(--green);
  font-weight: 500; margin-right: 0.25rem; }
.area-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.9rem; }
.area-links a { font-size: 0.83rem; color: var(--green);
  border-bottom: 1px solid rgba(31, 70, 52, 0.4); padding-bottom: 2px; }
.area-links a:hover { border-bottom-color: var(--green); }
@media (max-width: 820px) { .area-grid { grid-template-columns: 1fr; } }

.map-legend { display: flex; gap: 1.6rem; align-items: center; padding-top: 0.9rem;
  font-size: 0.8rem; color: var(--ink-soft); }
.map-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.key { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.key-active { background: var(--green); }
.key-sold { background: transparent; border: 2px solid var(--ink-mute); }

.page-head { padding-top: calc(var(--nav-h) + clamp(2.8rem, 6vw, 5rem)); padding-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.page-head h1 { font-size: clamp(2.4rem, 5vw, 4rem); max-width: 18ch; }
.page-head p { color: var(--ink-soft); max-width: 58ch; margin-top: 1.2rem; }
.page-head p a, .sold-total .cap a { color: var(--green); border-bottom: 1px solid var(--green); padding-bottom: 1px; }
.listings-body { padding-bottom: clamp(4rem, 8vw, 7rem); }
.also { margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.also h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.also p { color: var(--ink-soft); max-width: 54ch; margin: 0.7rem 0 1.8rem; font-size: 0.94rem; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1080px) {
  .ldetail-main { grid-template-columns: 1fr; }
  .agent-card { position: static; max-width: 460px; }
  .gallery { columns: 2; }
}
@media (max-width: 980px) {
  .feature-grid, .about-grid, .contact-grid, .cred-layout, .cred-cols { grid-template-columns: 1fr; }
  .press-grid { grid-template-columns: 1fr; }
  .stat-strip .wrap { grid-template-columns: 1fr; gap: 1.6rem; }
  .about-grid img { max-width: 420px; }
}
@media (max-width: 900px) {
  /* No pinned scroll zoom on phones: it costs 80vh of dead scrolling before the
     page starts, and the effect is barely legible on a small screen anyway. */
  .hero-video { display: none !important; }
  .hero-still { opacity: 1 !important; }
  .hero-copy { transform: none; opacity: 1 !important; }

  .card-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.2rem; }
  .lcard, .lcard.w3, .lcard.w4 { grid-column: span 1; }
  .lcard.w3 .lcard-img img, .lcard.w4 .lcard-img img { aspect-ratio: 4 / 3; }
  .foot-top { grid-template-columns: 1fr; gap: 2rem; }
  .feature-list { grid-template-columns: 1fr; }

  /* Real mobile menu: the links move into a drop panel, they are never just hidden. */
  .burger { display: flex; }
  .nav-phone { display: none; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--hairline);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem clamp(1.5rem, 5vw, 4.5rem) 1.5rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    /* visibility keeps the closed menu out of the tab order, not just out of sight */
    visibility: hidden;
    transition: transform 0.35s var(--ease), opacity 0.3s var(--ease), visibility 0s linear 0.35s;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .nav.menu-open .nav-links {
    transform: none; opacity: 1; pointer-events: auto; visibility: visible;
    transition: transform 0.35s var(--ease), opacity 0.3s var(--ease), visibility 0s;
  }
  .nav-links > a:not(.btn) { color: var(--ink); font-size: 1.05rem; padding: 0.9rem 0; border-bottom: 1px solid var(--hairline); }
  .nav-links > a:not(.btn)::after { display: none; }
  .nav-links > .btn { margin-top: 1.1rem; width: 100%; }
  .nav.on-dark:not(.solid) .nav-links > a:not(.btn) { color: var(--ink); }
  .nav.on-dark:not(.solid) .btn-nav { border-color: rgba(21,32,26,0.32); color: var(--ink); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .card-grid { grid-template-columns: 1fr; }
  .gallery { columns: 1; }
  .ldetail-bar .wrap { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .spec-row { gap: 1.2rem 2rem; }
  .foot-logos { gap: 1.3rem; flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; }
  .sold-table td.sqft, .sold-table th.sqft, .sold-table td.beds, .sold-table th.beds { display: none; }
  .sold-table td.addr { font-size: 1.1rem; }
}