/* ==========================================================================
   Southern Asset Solutions, LLC — design system
   Palette: "Heritage & Warm" — ivory ground, deep forest, brass detail.
   Type:    Cormorant Garamond (display) + Karla (UI/body)
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:        #1C1A16;
  --ink-soft:   #3A352C;
  --muted:      #6E6658;
  --muted-2:    #928A79;

  --forest:     #1E3B31;
  --forest-d:   #122720;
  --forest-l:   #33564A;
  --forest-t:   rgba(30,59,49,.08);

  --brass:      #A98436;
  --brass-l:    #C8A34A;
  --brass-ink:  #7A5F26;   /* text-safe brass — 5.58:1 on ivory, 6.01:1 on paper */
  --brass-t:    rgba(169,132,54,.12);

  --clay:       #8C4A3F;
  --sage:       #6B7C63;
  --sage-d:     #586A51;   /* sage that carries white text — 5.84:1 (plain --sage is 4.48:1) */
  --map-red:    #A63D2F;   /* every map indicator: pins, county counts, legend */

  --ivory:      #FAF6EF;
  --paper:      #FFFFFF;
  --linen:      #F2EBE0;
  --linen-2:    #EBE2D4;
  --rule:       #E0D6C4;
  --rule-soft:  #EDE5D8;
  /* A form control has to be findable by its edge alone. --rule is 1.44:1 on
     white, which is a decoration, not a boundary; --muted-2 is 3.42:1 on paper
     and 3.18:1 on ivory, past the 3:1 WCAG asks of a control's outline. */
  --field-bd:   var(--muted-2);

  --ok:         #2E6A4F;
  --warn:       #9A6B1E;
  --err:        #9B3A2E;

  --shadow-sm:  0 1px 2px rgba(28,26,22,.05), 0 2px 8px rgba(28,26,22,.05);
  --shadow-md:  0 2px 6px rgba(28,26,22,.06), 0 12px 30px rgba(28,26,22,.09);
  --shadow-lg:  0 8px 20px rgba(28,26,22,.10), 0 30px 60px rgba(28,26,22,.14);

  --r-sm: 3px;  --r-md: 5px;  --r-lg: 8px;
  --wrap: 1240px;
  /* The sticky header's real height: a 78px row plus its 1px rule. (It was
     118px while a 38px markets strip sat above the header; that strip is gone.)
     Drops to 63px under 760px, where the row is 62px — see the header block. */
  --hdr: 79px;

  --ff-display: "Cormorant Garamond", "Hoefler Text", Georgia, "Times New Roman", serif;
  --ff-body:    "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
/* scroll-padding-top: an in-page anchor (#inquire, #location, #contact-form)
   must land below the sticky header, not underneath it. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 18px) }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--ff-body); font-size:16.5px; line-height:1.65;
  font-feature-settings:"kern" 1; -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block }
a{ color:var(--forest); text-decoration-thickness:1px; text-underline-offset:3px }
@media (hover:hover){ a:hover{ color:var(--brass-ink) } }
button,input,select,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4{ margin:0 0 .5em; font-family:var(--ff-display); font-weight:500; line-height:1.12; letter-spacing:-.005em }
h1{ font-size:clamp(2.4rem,5vw,3.9rem) }
h2{ font-size:clamp(1.9rem,3.4vw,2.9rem) }
h3{ font-size:clamp(1.35rem,2vw,1.7rem) }
h4{ font-size:1.16rem }
p{ margin:0 0 1.05em }
hr{ border:0; border-top:1px solid var(--rule); margin:2.5rem 0 }
:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; border-radius:2px }
::selection{ background:var(--brass-t); color:var(--forest-d) }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--forest); color:#fff; padding:.8rem 1.2rem }
.skip:focus{ left:0 }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:26px }
.wrap-narrow{ max-width:840px }
.section{ padding:clamp(56px,7vw,96px) 0 }
.section--tight{ padding:clamp(38px,4.5vw,58px) 0 }
.section--linen{ background:var(--linen) }
.section--forest{ background:var(--forest); color:#F3EEE3 }
.section--forest h2,.section--forest h3{ color:#fff }
.section--forest a{ color:var(--brass-l) }
.grid{ display:grid; gap:26px }
.stack > * + *{ margin-top:1rem }

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--ff-body); font-size:.7rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brass-ink);
  margin:0 0 .85rem; display:flex; align-items:center; gap:.7rem;
}
.eyebrow::after{ content:""; height:1px; flex:1; background:var(--rule); max-width:70px }
.eyebrow--center{ justify-content:center }
.eyebrow--center::after,.eyebrow--center::before{ content:""; height:1px; width:44px; flex:none; background:var(--rule) }
.section--forest .eyebrow{ color:var(--brass-l) }
.section--forest .eyebrow::after,.section--forest .eyebrow::before{ background:rgba(255,255,255,.22) }
.lede{ font-size:1.15rem; color:var(--ink-soft); max-width:62ch; text-wrap:pretty }
.muted{ color:var(--muted) }
.small{ font-size:.86rem }
.mono-num{ font-variant-numeric:tabular-nums }
.display{ font-family:var(--ff-display) }
.rule-brass{ width:52px; height:2px; background:var(--brass); border:0; margin:1.2rem 0 }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--forest); --fg:#fff; --bd:var(--forest); white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:.72rem 1.5rem; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-family:var(--ff-body); font-size:.79rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border-radius:var(--r-sm); cursor:pointer; text-decoration:none; text-align:center;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
@media (hover:hover){ .btn:hover{ --bg:var(--forest-d); --bd:var(--forest-d); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-sm) } }
.btn:active{ transform:translateY(0) }
.btn[disabled],.btn.is-busy{ opacity:.55; pointer-events:none }
.btn--brass{ --bg:var(--brass); --bd:var(--brass); --fg:var(--forest-d) }
@media (hover:hover){ .btn--brass:hover{ --bg:var(--brass-l); --bd:var(--brass-l); color:var(--forest-d) } }
.btn--ghost{ --bg:transparent; --fg:var(--forest); --bd:var(--rule) }
@media (hover:hover){ .btn--ghost:hover{ --bg:var(--forest); --fg:#fff; --bd:var(--forest) } }
.btn--onforest{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.42) }
@media (hover:hover){ .btn--onforest:hover{ --bg:#fff; --fg:var(--forest-d); --bd:#fff } }
.btn--sm{ min-height:44px; padding:.55rem 1.05rem; font-size:.7rem }
.btn--block{ width:100%; white-space:normal; line-height:1.25 }
/* Labels that carry a phone number are built at runtime and can be far wider
   than the screen. Below the desktop breakpoint, wrapping beats overflowing. */
@media (max-width:900px){ .btn{ white-space:normal; line-height:1.25; max-width:100% } }
.btn--danger{ --bg:transparent; --fg:var(--err); --bd:rgba(155,58,46,.35) }
@media (hover:hover){ .btn--danger:hover{ --bg:var(--err); --fg:#fff; --bd:var(--err) } }
.linkish{
  background:none; border:0; color:var(--forest); text-decoration:underline; cursor:pointer; font-size:.9rem;
  display:inline-flex; align-items:center; min-height:44px; padding:.6rem .2rem; margin:-.6rem -.2rem;
}

/* ---------- header ---------- */
/* The 38px "Georgia · Florida" strip that sat above the header (.topbar) is
   gone, and with it every allowance for its height: --hdr, the mobile menu's
   top padding and the rail's sticky offset all read the header alone now. */
.site-header{ position:sticky; top:0; z-index:60; background:var(--ivory); border-bottom:1px solid var(--rule) }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.6rem; min-height:78px }
.brand > span{ min-width:0 }
.brand{ display:flex; align-items:center; gap:.85rem; text-decoration:none; color:var(--forest-d) }
/* The mark — a wreath around an italic SAS — is drawn on a square artboard
   (viewBox 260) but only fills 88% of its width and 80% of its height, so it
   reads smaller than its box. The box stays square. In the header it is 56px,
   which makes the wreath itself about 49 x 45px: a little taller than the two
   lines of type beside it, as a mark should be. The gap is tightened and the
   box nudged left by the air the artboard carries at its sides, so the leaves,
   not the empty margin, sit on the page's left edge. Footer and portal keep
   the plain 46px. */
.brand__mark{ width:46px; height:46px; flex:none }
.site-header .brand{ gap:.6rem }
.site-header .brand__mark{ width:56px; height:56px; margin-left:-3px }
.brand__name{ display:block; font-family:var(--ff-display); font-size:1.3rem; font-weight:600; line-height:1.08; letter-spacing:.005em; white-space:nowrap }
/* 10.5px, up from 8.7px. At .24em "Land · Farms · Commercial" sets on one line
   to within a few pixels of the width of the name above it (205px against
   210px), so the two lines read as one block, at every width that shows the
   line (it is hidden under 520px). */
.brand__sub{ display:block; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brass-ink); font-weight:700; margin-top:4px; white-space:nowrap }

.nav{ display:flex; align-items:center; gap:1.55rem; flex-wrap:nowrap }
.nav a:not(.btn){
  font-size:.78rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding:.4rem 0; position:relative; white-space:nowrap;
}
.nav a:not(.btn)::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease) }
.nav a:not(.btn)[aria-current="page"]{ color:var(--forest-d) }
.nav a[aria-current="page"]::after{ transform:scaleX(1) }
@media (hover:hover){ .nav a:hover{ color:var(--forest-d) } .nav a:hover::after{ transform:scaleX(1) } }
.nav-toggle{ display:none; background:none; border:1px solid var(--rule); border-radius:var(--r-sm); width:46px; height:46px; align-items:center; justify-content:center; cursor:pointer }
.nav-toggle span{ display:block; width:20px; height:1.5px; background:var(--forest-d); position:relative }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--forest-d) }
.nav-toggle span::before{ top:-6px } .nav-toggle span::after{ top:6px }
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ transition:transform .25s var(--ease), background .2s var(--ease), top .25s var(--ease) }
.nav-toggle[aria-expanded="true"] span{ background:transparent }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg) }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg) }

@media (max-width: 1080px){
  .nav-toggle{ display:inline-flex; position:relative; z-index:70 }
  .brand{ position:relative; z-index:70 }
  .nav{
    position:fixed; top:0; left:0; right:0; bottom:0; height:100vh; height:100dvh;
    background:var(--ivory); flex-direction:column; align-items:stretch; gap:0;
    padding:calc(var(--hdr) + 26px) 26px 44px; overflow-y:auto; z-index:55;
    border-bottom:1px solid var(--rule);
    transform:translateY(-100%); visibility:hidden;
    transition:transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav[data-open="true"]{ transform:translateY(0); visibility:visible; transition-delay:0s }
  .nav a:not(.btn){ padding:1.05rem 0; border-bottom:1px solid var(--rule-soft); font-size:.95rem }
  .nav .btn{ margin-top:1.4rem }
}
@media (max-width:760px){
  :root{ --hdr:63px }
  .site-header__inner{ min-height:62px }
  .site-header .brand__mark{ width:50px; height:50px }
}
@media (max-width:520px){
  .brand,.site-header .brand{ gap:.45rem }
  .brand__mark{ width:38px; height:38px }
  .site-header .brand__mark{ width:44px; height:44px; margin-left:-2px }
  .brand__name{ font-size:1.02rem }
  .brand__sub{ display:none }
}

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--forest-d); color:#F5F1E7; overflow:hidden; isolation:isolate }
.hero__bg{ position:absolute; inset:0; z-index:-2 }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:55% 46% }
.hero__bg img:not([src]),.approach-note > img:not([src]){ display:none }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(9,25,18,.82),rgba(9,25,18,.44) 53%,rgba(9,25,18,.12)),linear-gradient(0deg,rgba(9,25,18,.45),transparent 55%);
}
.hero__inner{ position:relative; min-height:760px; min-height:min(880px,calc(100svh - 100px)); padding-block:clamp(80px,8.5vw,126px) 28px; max-width:var(--wrap); display:flex; flex-direction:column; justify-content:flex-end }
.hero__copy{ max-width:890px; padding-bottom:clamp(44px,5vw,72px) }
.hero h1{ color:#fff; font-size:clamp(4rem,7.8vw,7.3rem); font-weight:400; line-height:.91; letter-spacing:-.035em; margin-bottom:.3em; max-width:17ch; text-wrap:balance; text-shadow:0 2px 22px rgba(0,0,0,.12) }
.hero h1 em{ font-style:italic; color:#E7D6AD }
.hero p{ color:#F1EDE3; font-size:1.12rem; max-width:43ch }
.hero .hero__eyebrow{ font-size:.7rem; color:#E7D6AD; margin-bottom:1.8rem; letter-spacing:.23em; max-width:none }
.hero .hero__eyebrow::after{ background:rgba(224,204,157,.45) }
.hero .hero__intro{ line-height:1.65; margin-bottom:1rem }
.hero__portfolio{ display:inline-flex; align-items:center; gap:18px; min-height:44px; color:#F5EAD1; font-size:.85rem; text-decoration:none; border-bottom:1px solid rgba(231,214,173,.5) }
.hero__portfolio span{ font-size:1.2rem }
@media (hover:hover){ .hero__portfolio:hover{ color:#fff; border-color:#fff } }
.hero .hero__credit{ max-width:none; font-size:.7rem; color:#E6E2D8; margin:14px 0 0; letter-spacing:.02em }
.hero__search{
  background:var(--ivory); color:var(--ink); border:1px solid rgba(250,246,239,.55); border-radius:var(--r-sm); padding:24px 28px 28px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(210px,.78fr); gap:20px; box-shadow:0 12px 40px rgba(0,0,0,.12); width:100%;
}
.hero__search > div{ min-width:0 }
.hero__search-top{ grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--rule) }
.hero__search-top h2{ font-size:clamp(1.7rem,2.8vw,2.15rem); line-height:1.1; margin:0; color:var(--forest-d) }
.hero__intent{ display:flex; flex-shrink:0; border:1px solid var(--field-bd); border-radius:3px; padding:3px; margin:0; min-width:0; gap:3px }
.hero__search .hero__intent label{ position:relative; margin:0; font-size:.8rem; letter-spacing:.04em; text-transform:none; font-weight:700; cursor:pointer }
.hero__intent input{ position:absolute; width:1px; height:1px; opacity:0; margin:0 }
.hero__intent span{ display:flex; align-items:center; justify-content:center; padding:0 25px; min-height:44px; border-radius:2px; color:var(--forest) }
.hero__intent input:checked + span{ background:var(--forest); color:var(--ivory) }
.hero__intent input:focus-visible + span{ outline:3px solid var(--brass); outline-offset:2px }
.hero__search-submit{ display:flex; align-items:flex-end }
.hero__search .btn{ min-height:50px; padding-inline:16px; letter-spacing:.09em }
.hero__search label{ display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:6px }
.hero__search select,.hero__search input[type="text"]{ min-height:50px; font-size:1rem; background-color:#FFFDFA }
/* The page hides a select that would offer only one real choice and says how
   many fields are left beside the button in data-fields (0, 1 or 2). With two
   properties for sale that is usually none — which left the button alone in
   the first of three columns under a rule. With no field, the form is a
   single bar instead: the heading, the Buy/Sell toggle and the button on one
   line. With one, the field and the button share the row. (No attribute at
   all — no script — is the full three-column form.) */
@media (min-width:821px){
  .hero__search[data-fields="0"]{ grid-template-columns:minmax(0,1fr) minmax(220px,280px); align-items:center; padding-block:24px }
  .hero__search[data-fields="0"] .hero__search-top{ grid-column:1; padding-bottom:0; border-bottom:0 }
  .hero__search[data-fields="1"]{ grid-template-columns:minmax(0,1fr) minmax(220px,.5fr) }
}
@media (max-width:820px){
  .hero__inner{ min-height:0; padding-top:76px }
  .hero h1{ font-size:clamp(3.7rem,9.5vw,6rem) }
  .hero__copy{ padding-bottom:42px }
  .hero__search{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; padding:22px }
  .hero__search-submit{ grid-column:1/-1 }
  .hero__search[data-fields="1"] .hero__search-field{ grid-column:1/-1 }
  .hero::after{ background:linear-gradient(90deg,rgba(9,25,18,.82),rgba(9,25,18,.3)),linear-gradient(0deg,rgba(9,25,18,.4),transparent) }
}
@media (max-width:520px){
  .hero__inner{ padding-top:60px; padding-bottom:22px; padding-inline:20px }
  .hero__bg img{ object-position:59% 45% }
  .hero h1{ font-size:clamp(3rem,11.7vw,3.8rem); line-height:.96; letter-spacing:-.035em }
  .hero .hero__eyebrow{ font-size:.66rem; letter-spacing:.15em; gap:.5rem; margin-bottom:1.4rem }
  .hero .hero__intro{ font-size:1rem }
  .hero__portfolio{ font-size:.8rem }
  .hero__copy{ padding-bottom:32px }
  .hero__search{ padding:18px; gap:14px; grid-template-columns:minmax(0,1fr) }
  .hero__search-top{ align-items:flex-start; flex-direction:column; gap:16px; padding-bottom:16px }
  .hero__search-top h2{ font-size:1.85rem; max-width:16ch }
  .hero__intent{ width:100% }
  .hero__intent label{ flex:1; text-align:center }
  .hero__intent span{ padding-inline:12px }
  .hero__search select{ padding-left:.75rem }
  .hero__search label{ font-size:.68rem; letter-spacing:.1em }
  .hero .hero__credit{ font-size:.68rem; line-height:1.6 }
}

/* ---------- stat bar ---------- */
.stats{ background:var(--linen); border-block:1px solid var(--rule) }
.stats__grid{ display:grid; grid-template-columns:repeat(var(--stats-count,4),minmax(0,1fr)) }
.stat{ padding:clamp(26px,3.4vw,42px) 22px; text-align:center; border-left:1px solid var(--rule) }
.stat:first-child{ border-left:0 }
.stat__n{ font-family:var(--ff-display); font-size:clamp(2.1rem,4vw,3rem); font-weight:500; color:var(--forest); line-height:1; font-variant-numeric:tabular-nums }
.stat__n span{ color:var(--brass-ink) }
.stat__l{ font-size:.68rem; letter-spacing:.19em; text-transform:uppercase; color:var(--muted); margin-top:.7rem; font-weight:600 }
@media (max-width:760px){
  .stats__grid{ grid-template-columns:repeat(2,1fr) }
  .stat:nth-child(3){ border-left:0 }
  .stat:nth-child(n+3){ border-top:1px solid var(--rule) }
}

/* ---------- listing card ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:30px; list-style:none; padding:0; margin:0 }
.cards--2{ grid-template-columns:repeat(auto-fill,minmax(420px,1fr)) }
@media (max-width:560px){ .cards,.cards--2{ grid-template-columns:1fr } }
/* One or two cards — the usual case here, with two properties on the market.
   auto-fill lays out three tracks whatever it is given: two cards left a hole
   at the right, and a lone "Similar properties" card sat stranded at the left
   edge. The page that renders the list says how many it holds in data-count,
   and these lay it out for what is there. Two share the row as equals (the
   home page's .featured-cards--pair, which is the same thing by another name).
   One becomes a single wide card — photograph beside the text, capped well
   short of the full width — so it reads as the one being shown, not as the
   first of a row that never arrived. Both fall back to a plain column on a
   phone. The rules that change the insides of the cards sit further down,
   after the card's own, because they have to win over them. */
.cards[data-count="2"],.cards--2[data-count="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px }
.cards[data-count="1"],.cards--2[data-count="1"]{ grid-template-columns:minmax(0,900px) }
@media (max-width:760px){
  .cards[data-count="2"],.cards--2[data-count="2"]{ grid-template-columns:minmax(0,1fr); gap:24px }
  .cards[data-count="1"],.cards--2[data-count="1"]{ grid-template-columns:minmax(0,520px) }
}

.card{
  position:relative; background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
@media (hover:hover){ .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--brass) } }
.card:focus-within{ box-shadow:var(--shadow-md) }
.card__media{ position:relative; aspect-ratio:4/3; background:var(--linen-2); overflow:hidden }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease) }
@media (hover:hover){ .card:hover .card__media img{ transform:scale(1.035) } }
.card__badges{ position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap; max-width:calc(100% - 24px) }
.card__count{
  position:absolute; right:12px; bottom:12px; background:rgba(18,39,32,.8); color:#fff;
  font-size:.7rem; font-weight:600; padding:4px 9px; border-radius:var(--r-sm); letter-spacing:.05em;
  display:flex; align-items:center; gap:5px;
}
.card__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1 }
.card__type{ font-size:.68rem; letter-spacing:.17em; line-height:1.5; text-transform:uppercase; color:var(--brass-ink); font-weight:700; margin-bottom:.5rem }
.card__title{ font-family:var(--ff-display); font-size:1.4rem; font-weight:600; line-height:1.2; margin:0 0 .3rem }
.card__title a{ color:var(--forest-d); text-decoration:none }
.card__title a::after{ content:""; position:absolute; inset:0; z-index:1 }
@media (hover:hover){ .card:hover .card__title a{ color:var(--forest) } }
.card__addr{ font-size:.88rem; color:var(--muted); margin-bottom:1rem }
/* A county-only record has no address line, and the rule that opens the price
   row then sat hard under the title. */
.card__title:has(+ .card__price){ margin-bottom:.8rem }
.card__price{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-top:.9rem; margin-top:auto; border-top:1px solid var(--rule-soft);
}
.card__price b{ font-family:var(--ff-display); font-size:1.5rem; font-weight:600; color:var(--forest-d); font-variant-numeric:tabular-nums }
.card__price small{ font-size:.76rem; color:var(--muted); letter-spacing:.06em }
.card__facts{ font-size:.83rem; color:var(--ink-soft); margin-top:.7rem; line-height:1.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.card__facts span{ white-space:nowrap }
.card__facts span + span::before{ content:"\00b7"; color:var(--muted-2); margin:0 .5rem }

/* A property without supplied photography gets a typographic cover, and so
   does every record on the Past Transactions page — twenty of them in one
   grid. So this is drawn as a plate, not a placeholder: the acreage is the
   figure, set large in the display face with "acres" in its italic; a short
   brass rule; the county beneath; all of it centred inside a hairline frame,
   the same inset rule .frame and the portrait placeholder use.

   It keeps the 4:3 of a photographed card, so a row that mixes the two still
   lines up title against title. overflow is visible because the box must GROW
   when a narrow card cannot hold its contents at 4:3 — with the base rule's
   overflow:hidden it would clip them instead. (The card clips its own corners.)

   The badge keeps the 12px corner it has on a photograph, and the frame is
   inset by the same 12px, so the badge sits in the frame's corner like a tab.
   Badges stay in normal flow, so two that wrap push the figure down rather
   than cover it; the summary's bottom padding is the height of one badge row,
   which is what keeps the figure in the optical middle of the plate. */
.card__media--unpictured{
  display:flex; flex-direction:column; overflow:visible; padding:12px;
  background:var(--forest); color:var(--ivory); border-bottom:1px solid var(--forest-d); text-align:center;
}
.card__media--unpictured::before{
  content:""; position:absolute; inset:12px; border:1px solid rgba(218,195,140,.32); border-radius:2px;
  pointer-events:none; transition:border-color .22s var(--ease);
}
.card__media--unpictured .card__badges{ position:static; order:-1; flex-shrink:0; max-width:none; margin:0 }
.card__media--unpictured .badge--land{ background:transparent; border:1px solid rgba(250,246,239,.4); color:var(--ivory) }
.card__land-summary{ display:flex; flex:1; flex-direction:column; justify-content:center; align-items:center; min-width:0; padding:10px 18px 30px }
.card__land-label{ color:#DAC38C; font-size:.68rem; font-weight:700; line-height:1.4; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.7rem }
.card__acreage{
  display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:0 .16em; max-width:100%;
  font-family:var(--ff-display); font-size:clamp(3.1rem,4.6vw,3.9rem); font-weight:500;
  line-height:.95; letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums;
}
.card__acreage span{ font-size:.36em; font-style:italic; font-weight:500; letter-spacing:0; line-height:1; color:#DAC38C }
.card__county{ color:#E4DDCE; font-size:.9rem; line-height:1.4; max-width:26ch; overflow-wrap:break-word }
.card__county::before{ content:""; display:block; width:30px; height:1px; margin:.95rem auto .8rem; background:var(--brass-l) }
/* No acreage on file (it is withheld when the sources disagree): the county
   steps up into the display face so the plate still has a headline. */
.card__land-label + .card__county,.card__county:first-child{ font-family:var(--ff-display); font-size:1.75rem; font-weight:500; line-height:1.12; color:var(--ivory) }
.card__land-label + .card__county::before,.card__county:first-child::before{ margin-top:.1rem }
/* Sold: the same plate on linen. */
.card--sold .card__media--unpictured{ background:var(--linen); color:var(--forest-d); border-bottom-color:var(--rule) }
.card--sold .card__media--unpictured::before{ border-color:rgba(122,95,38,.24) }
.card--sold .card__land-label{ color:var(--brass-ink) }
.card--sold .card__acreage span{ color:var(--brass-ink) }
.card--sold .card__county{ color:var(--ink-soft) }
.card--sold .card__county::before{ background:var(--brass) }
.card--sold .card__land-label + .card__county,.card--sold .card__county:first-child{ color:var(--forest-d) }
@media (hover:hover){
  .card:hover .card__media--unpictured::before{ border-color:rgba(218,195,140,.6) }
  .card--sold:hover .card__media--unpictured::before{ border-color:rgba(122,95,38,.5) }
}
@media (max-width:520px){ .card__acreage{ font-size:3.3rem } }
/* On a phone the grid is one column, and twenty full-height plates are some
   8,000px of near-identical cards to thumb through. A sold record without a
   photograph becomes a ledger row there instead: the plate at the left, cut
   down to the figure and the county, the name and outcome beside it — about
   a third of the height. (Listings for sale keep the full plate; there are
   few of them and they are what the page is for.) Needs :has(); a browser
   without it simply keeps the full plate. */
@supports selector(:has(*)){
  @media (max-width:560px){
    .card--sold:has(> .card__media--unpictured){ flex-direction:row }
    .card--sold > .card__media--unpictured{ flex:0 0 41%; aspect-ratio:auto; padding:8px; border-bottom:0; border-right:1px solid var(--rule) }
    .card--sold > .card__media--unpictured::before{ inset:8px }
    .card--sold > .card__media--unpictured .card__land-summary{ padding:8px 6px 26px }
    .card--sold > .card__media--unpictured .card__land-label{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
    .card--sold > .card__media--unpictured .card__acreage{ font-size:2rem; line-height:1 }
    .card--sold > .card__media--unpictured .card__acreage span{ font-size:.5em; flex-basis:100%; margin-top:.1em }
    .card--sold > .card__media--unpictured .card__county{ font-size:.78rem; line-height:1.3 }
    .card--sold > .card__media--unpictured .card__county::before{ width:22px; margin:.55rem auto .5rem }
    .card--sold > .card__media--unpictured .card__land-label + .card__county,
    .card--sold > .card__media--unpictured .card__county:first-child{ font-size:1.2rem }
    .card--sold > .card__media--unpictured ~ .card__body{ min-width:0; justify-content:center; padding:14px 16px 15px }
    .card--sold > .card__media--unpictured ~ .card__body .card__title{ font-size:1.25rem; margin-bottom:.15rem }
    .card--sold > .card__media--unpictured ~ .card__body .card__price{ margin-top:.55rem; padding-top:.55rem }
    .card--sold > .card__media--unpictured ~ .card__body .card__price b{ font-size:1.2rem }
    .card--sold > .card__media--unpictured ~ .card__body .card__facts{ margin-top:.3rem }
  }
}

/* The insides of a card in a list of two, and of one (see .cards[data-count]). */
.cards[data-count="2"] .card__media{ aspect-ratio:16/10 }
.cards[data-count="2"] .card__body{ padding:24px 26px 26px }
.cards[data-count="2"] .card__title{ font-size:1.7rem }
.cards[data-count="2"] .card__acreage{ font-size:clamp(3.3rem,5.4vw,4.6rem) }
@media (min-width:761px){
  .cards[data-count="1"] .card{ flex-direction:row }
  /* The photograph is taken out of flow so the row is as tall as the text
     needs (and no shorter than 330px), whatever shape the picture is. */
  .cards[data-count="1"] .card__media{ flex:0 0 55%; aspect-ratio:auto; min-height:330px }
  .cards[data-count="1"] .card__media > img{ position:absolute; inset:0 }
  .cards[data-count="1"] .card__media--unpictured{ border-bottom:0 }
  .cards[data-count="1"] .card__body{ justify-content:center; padding:32px 34px }
  .cards[data-count="1"] .card__title{ font-size:1.9rem }
  .cards[data-count="1"] .card__addr{ margin-bottom:1.3rem }
  .cards[data-count="1"] .card__price{ margin-top:0 }
}
@media (max-width:760px){
  .cards[data-count="2"] .card__body{ padding:22px }
  .cards[data-count="2"] .card__title{ font-size:1.55rem }
}

/* A listing as the server writes it into /listings for a reader with no
   JavaScript (and for a crawler): li.card.card--ssr holding a .card__title
   link and one .card__addr line of facts. The script replaces these with the
   real cards, so all this has to be is tidy — a plain card with no picture
   box, the whole of it still the link. */
.card--ssr{ justify-content:center; padding:20px 22px 21px }
.card--ssr .card__title{ margin-bottom:.35rem }
.card--ssr .card__addr{ margin-bottom:0 }
.card--ssr > :last-child{ margin-bottom:0 }

/* ---------- home page sections ---------- */
.section-heading{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px }
.section-heading h2{ margin-bottom:.28em; text-wrap:balance }
.section-heading__intro{ margin:0; max-width:48ch }
.section-heading--center{ display:block; text-align:center; margin-bottom:34px }
.section-heading--center .lede{ margin:0 auto }
.text-link{ display:inline-flex; align-items:center; min-height:44px; padding-block:.55rem; font-size:.8rem; font-weight:700; letter-spacing:.07em; text-decoration:none; white-space:nowrap }
.featured-cards--pair{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px }
.featured-cards--pair .card__media{ aspect-ratio:16/10 }
/* Doubled class so these hold whether or not the list also carries
   data-count="2", whose own card rules are one class heavier than a single
   .featured-cards--pair would be. */
.featured-cards--pair.featured-cards--pair .card__body{ padding:25px 28px 27px }
.featured-cards--pair.featured-cards--pair .card__title{ font-size:1.9rem }
.featured-cards .empty{ grid-column:1/-1 }
.portfolio-band{ padding:36px 0; border-block:1px solid var(--rule); background:var(--ivory) }
.portfolio-band__inner{ display:flex; align-items:center; justify-content:space-between; gap:30px }
.portfolio-band .eyebrow{ margin-bottom:.55rem }
.portfolio-band h2{ font-size:clamp(1.8rem,3vw,2.5rem); margin-bottom:.25rem }
.portfolio-band p:last-child{ margin:0; color:var(--muted) }
.approach-copy h2{ max-width:19ch; text-wrap:balance }
.approach-copy .btn{ margin-top:.8rem }
/* align-self:stretch — .split centres its columns, which left this picture
   200px shorter than the copy beside it, floating in the middle of its
   column. Stretched, it runs the full height of the text it sits against. */
.approach-note{ position:relative; overflow:hidden; align-self:stretch; min-height:440px; background:var(--forest-d); color:var(--ivory); display:flex; align-items:center; border-radius:var(--r-sm) }
.approach-note > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.approach-note__inner{ position:relative; z-index:1; width:100%; padding:clamp(28px,4vw,48px) }
.approach-note .eyebrow{ color:#DAC38C }
.approach-note .eyebrow::after{ background:rgba(250,246,239,.25) }
.approach-note__title{ font-family:var(--ff-display); font-size:clamp(2rem,3.6vw,3rem); line-height:1.18; margin:1.15rem 0 2rem }
.approach-note__foot{ font-size:.82rem; line-height:1.5; letter-spacing:.05em; margin:0; padding-top:20px; border-top:1px solid rgba(250,246,239,.22); color:var(--ivory) }
.approach-note__foot span{ padding:0 .3rem; color:#DAC38C }
.approach-note__foot .photo-credit{ display:inline-block; padding:3px 0 0; color:#E4DDCE; font-size:.72rem; letter-spacing:.03em }
/* Over a photograph the caption is all that shows. It sits low, at the frame's
   own inset, and the scrim reaches its full depth before the first line of
   type rather than at the very bottom edge, so both lines stand on dark. */
.approach-note > img[src] + .approach-note__inner{ align-self:flex-end; padding:96px clamp(22px,2.6vw,30px) clamp(20px,2.4vw,26px); background:linear-gradient(transparent,rgba(18,39,32,.8) 58%,rgba(18,39,32,.9)); }
.approach-note > img[src] + .approach-note__inner .eyebrow,
.approach-note > img[src] + .approach-note__inner .approach-note__title{ display:none }
.approach-note > img[src] + .approach-note__inner .approach-note__foot{ border-top:0; padding-top:0 }
.home-page .section--tight{ padding-top:0 }
/* The four service tiles. They were thin cells with an 11px numeral and read
   as filler. Same grid, same hairlines; the numeral is now set in the display
   face and trails a short brass rule (the eyebrow's own motif, turned into a
   figure), with more room around a larger heading. On hover the tile lifts
   from ivory to paper and the rule draws out — nothing moves. */
.home-page .tile{ padding:38px 30px 40px; transition:background-color .25s var(--ease) }
.home-page .tile__n{
  display:flex; align-items:center; gap:14px; margin-bottom:24px;
  font-family:var(--ff-display); font-size:2.15rem; font-weight:500; line-height:1; letter-spacing:.02em;
  color:var(--brass-ink); font-variant-numeric:lining-nums;
}
.home-page .tile__n::after{ content:""; flex:none; width:34px; height:1px; background:var(--brass); transition:width .3s var(--ease) }
.home-page .tile h3{ font-size:1.5rem; margin-bottom:.6rem; color:var(--forest-d) }
.home-page .tile p:not(.tile__n){ font-size:.95rem; line-height:1.6 }
@media (hover:hover){
  .home-page .tile:hover{ background:var(--paper) }
  .home-page .tile:hover .tile__n::after{ width:58px }
}
.home-page .service-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.owner-section{ border-top:1px solid var(--rule); background:var(--linen) }
/* align-items:center, not start: the portrait is taller than the copy beside
   it, and top-aligning left a slab of empty linen under the text, which made
   the photo read as heavy and shoved to one side. Centring the two columns
   against each other is what balances the section. */
.owner-section__inner{ display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); align-items:center; gap:clamp(40px,7vw,100px) }
/* justify-self:center so the capped-width figure sits in the middle of its
   column instead of hugging the column's left edge. On a phone the column is
   the whole screen, and this is the difference between the photo looking
   placed and looking dropped. */
.owner-portrait{ position:relative; margin:0; aspect-ratio:4/5; width:100%; max-width:440px; justify-self:center; overflow:hidden; background:#E5DECF; border:1px solid #D6CBB7; border-radius:var(--r-sm) }
.owner-portrait > img{ width:100%; height:100%; object-fit:cover; object-position:center 30% }
.owner-portrait__placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; color:var(--forest); background:radial-gradient(ellipse at 50% 34%,#F5F0E5,#E1D8C6) }
.owner-portrait__placeholder::before{ content:""; position:absolute; inset:20px; border:1px solid rgba(122,95,38,.22) }
.owner-portrait__initials{ display:grid; place-items:center; width:180px; height:180px; border:1px solid rgba(30,59,49,.2); border-radius:50%; font-family:var(--ff-display); font-size:6rem; font-weight:400; letter-spacing:-.03em }
.owner-portrait__label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted) }
.owner-section__copy{ min-width:0 }
.owner-section__copy h2{ font-size:clamp(2.8rem,4.9vw,4.6rem); margin-bottom:.18em; color:var(--forest-d) }
.owner-section__role{ color:var(--muted); font-size:.85rem; margin-bottom:0 }
.owner-section__copy .lede{ margin-bottom:.8rem }
.owner-bio-details{ margin:-.4rem 0 1.25rem }
.owner-bio-details > summary{ display:flex; align-items:center; gap:10px; width:fit-content; max-width:100%; min-height:44px; padding:8px 0; color:var(--forest); font-size:.82rem; cursor:pointer; list-style:none; text-decoration:underline; text-decoration-color:rgba(30,59,49,.45); text-underline-offset:4px }
.owner-bio-details > summary::-webkit-details-marker{ display:none }
.owner-bio-details > summary::marker{ content:"" }
.owner-bio-details__less,.owner-bio-details[open] .owner-bio-details__more{ display:none }
.owner-bio-details[open] .owner-bio-details__less{ display:inline }
.owner-bio-details__chevron{ width:6px; height:6px; margin-left:2px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); transition:transform .18s var(--ease); flex-shrink:0 }
.owner-bio-details[open] .owner-bio-details__chevron{ transform:rotate(225deg) }
.owner-bio-more{ padding-top:.75rem; overflow-wrap:anywhere }
.owner-bio-more p:last-child{ margin-bottom:0 }
@media (hover:hover){ .owner-bio-details > summary:hover{ color:var(--brass-ink); text-decoration-color:currentColor } }
.owner-section__license{ color:var(--brass-ink); font-size:.75rem; margin-top:1.4rem }
.owner-section__contacts{ display:flex; flex-wrap:wrap; gap:0 24px; margin:14px 0 22px }
.owner-section__contacts a{ min-height:44px; display:inline-flex; align-items:center; font-size:.91rem; overflow-wrap:anywhere; max-width:100% }
.cta-band .btn--brass{ color:var(--forest-d) }
/* Four across on a narrower desktop: "Commercial Property" must stay on one
   line, or its tile's copy starts a line lower than its neighbours'. */
@media (min-width:1001px) and (max-width:1320px){
  .home-page .tile{ padding-inline:24px }
  .home-page .tile h3{ font-size:1.32rem }
}
@media (max-width:1000px){
  .home-page .service-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .owner-section__inner{ gap:38px }
}
@media (max-width:760px){
  .section-heading{ display:block; margin-bottom:24px }
  .section-heading .text-link{ margin-top:12px }
  .featured-cards--pair{ grid-template-columns:1fr; gap:24px }
  .featured-cards--pair.featured-cards--pair .card__body{ padding:22px }
  .featured-cards--pair.featured-cards--pair .card__title{ font-size:1.65rem }
  .portfolio-band__inner{ display:block }
  .portfolio-band .btn{ margin-top:22px }
  .approach-note{ min-height:350px }
  .approach-copy h2{ max-width:24ch }
  .owner-section__inner{ grid-template-columns:minmax(0,1fr); gap:34px }
  /* Portrait orientation on a phone, not the old 5/4 landscape band: a wide
     letterbox crop of a standing full-length portrait showed a thin slice with
     the subject pushed to one edge and foliage filling the rest, which is what
     made the photo's weight feel off on the home screen. 4/5 matches the
     desktop frame and reads as a portrait. */
  .owner-portrait{ max-width:360px; aspect-ratio:4/5 }
  .owner-portrait__initials{ width:130px; height:130px; font-size:4.5rem }
  .owner-section__contacts{ flex-direction:column; gap:0 }
}
@media (max-width:520px){
  .home-page .service-tiles{ grid-template-columns:minmax(0,1fr) }
  .home-page .tile{ padding:30px 24px 32px }
  .home-page .tile__n{ margin-bottom:18px }
}

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.66rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; padding:.34rem .58rem; border-radius:2px;
  background:var(--forest); color:#fff; white-space:nowrap;
}
@media (max-width:760px){ .badge{ font-size:.72rem; letter-spacing:.12em; padding:.34rem .58rem } }
.badge--sale{ background:var(--forest) }
.badge--lease{ background:var(--brass-ink) }
.badge--new{ background:var(--clay) }
.badge--reduced{ background:var(--clay) }
.badge--pending{ background:#7A6A2E }
.badge--sold{ background:#5C5347 }
/* White on a badge needs 4.5:1 at this size. --sage gave 4.48:1 and the old
   draft grey 3.81:1; --sage-d is 5.84:1 and --muted 5.67:1. */
.badge--land{ background:var(--sage-d) }
.badge--draft{ background:var(--muted) }
.badge--soft{ background:var(--linen); color:var(--forest-d); border:1px solid var(--rule) }
.badge--ok{ background:var(--ok) }

/* ---------- filters ---------- */
.filters{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-md); padding:18px; box-shadow:var(--shadow-sm) }
.filters__toggle{
  display:none; width:100%; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:.72rem 1.2rem; border:1px solid var(--rule); background:var(--paper); color:var(--forest);
  font-family:var(--ff-body); font-size:.79rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border-radius:var(--r-sm); cursor:pointer; text-align:center; margin-bottom:14px;
}
@media (hover:hover){ .filters__toggle:hover{ background:var(--forest); border-color:var(--forest); color:#fff } }
@media (max-width:640px){ .filters__toggle{ display:inline-flex } }
/* The page hides any filter that would offer only one real choice — with two
   properties on the market, most of them — and counts what is left in
   data-fields (the keyword box included, so it is never 0). Five fixed tracks
   left the survivors bunched at the left with the rest of the row empty. So:
   auto-fit shares the row among however many are showing; a lone field (the
   keyword box, on the sold archive) takes the whole row; and a pair sets the
   one select at a third and the keyword box at two thirds. */
.filters__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px }
.filters__row[data-fields="2"]{ grid-template-columns:minmax(0,1fr) minmax(0,2fr) }
@media (max-width:1000px){ .filters__row,.filters__row[data-fields="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px){ .filters__row,.filters__row[data-fields="2"]{ grid-template-columns:minmax(0,1fr) } }
.filters__row[data-fields="1"]{ grid-template-columns:minmax(0,1fr) }
/* The foot of the filter bar is one row: the Grid/Map toggle at the left, and
   at the right the two scope selects (.filters__select — Status, then Sort)
   with Clear all. The selects take fixed widths here; left to the base
   select{width:100%} they each filled the row and stacked three deep. Under
   820px the tools drop to a row of their own and share it; under 640px each
   select is full width. */
.filters__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px 1rem; margin-top:16px; padding-top:16px; border-top:1px solid var(--rule-soft); flex-wrap:wrap }
.filters__tools{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; min-width:0; margin-left:auto }
.filters__select{ flex:none; width:190px }
.filters__select[name="sort"],#f-sort.filters__select{ width:230px }
.filters__tools .linkish{ margin-block:0; margin-left:2px; white-space:nowrap }
@media (max-width:820px){
  .filters__tools{ width:100%; margin-left:0; justify-content:flex-start }
  .filters__select,.filters__select[name="sort"],#f-sort.filters__select{ flex:1 1 190px; width:auto }
}
@media (max-width:640px){
  .filters__select,.filters__select[name="sort"],#f-sort.filters__select{ flex:1 1 100%; width:100% }
}
.seg{ display:inline-flex; border:1px solid var(--field-bd); border-radius:var(--r-sm); overflow:hidden; background:var(--paper) }
.seg button{
  border:0; background:transparent; padding:.55rem 1rem; cursor:pointer; font-size:.72rem;
  font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); min-height:44px;
}
.seg button + button{ border-left:1px solid var(--rule) }
.seg button[aria-pressed="true"]{ background:var(--forest); color:#fff }
.results-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:26px 0 22px; flex-wrap:wrap }
.results-bar__count{ font-family:var(--ff-display); font-size:1.4rem; color:var(--forest-d) }
.chiprow{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:14px }
/* No filter set, no chips — and no 14px of margin left under the foot row. */
.chiprow:empty{ display:none }
.chip{
  display:inline-flex; align-items:center; gap:.45rem; background:var(--forest-t); color:var(--forest-d);
  border:1px solid rgba(30,59,49,.16); border-radius:100px; padding:.3rem .5rem .3rem .78rem; font-size:.76rem;
}
.chip button{
  display:inline-flex; align-items:center; justify-content:center; min-width:32px; min-height:32px;
  margin:-6px -3px -6px 0; border:0; background:none; cursor:pointer; color:var(--forest); font-size:1rem; line-height:1; padding:0 .2rem;
}
/* 44px wherever a finger is the pointer — a tablet in landscape is wider than
   760px and still a touch screen. */
@media (max-width:760px), (pointer:coarse){
  .chip{ min-height:44px }
  .chip button{ min-width:44px; min-height:44px; margin:-12px -8px -12px 0 }
}

/* ---------- forms ---------- */
.field{ display:block; margin-bottom:1.05rem }
.field > label,.label{
  display:block; font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  font-weight:700; color:var(--muted); margin-bottom:.42rem;
}
@media (max-width:760px){ .field > label,.label{ font-size:.76rem; letter-spacing:.11em } }
.label .opt,.field > label .opt{ color:var(--muted); letter-spacing:.02em; text-transform:none; font-weight:500; font-size:.76rem }
.input,input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=password],input[type=date],select,textarea{
  width:100%; background:var(--paper); border:1px solid var(--field-bd); border-radius:var(--r-sm);
  padding:.68rem .85rem; min-height:46px; font-size:1rem; color:var(--ink);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%236E6658' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.3rem }
textarea{ min-height:130px; resize:vertical; line-height:1.6 }
/* Focus is a solid forest outline, 12:1 on paper. It used to be outline:0 with
   an 8%-opacity ring, which on an ivory page is no indicator at all. */
.input:focus,input:focus,select:focus,textarea:focus{ outline:2px solid var(--forest); outline-offset:1px; border-color:var(--forest) }
/* An invalid field is marked two ways and both are styled: .field--err on the
   wrapper (what the forms have always set) and aria-invalid="true" on the
   control itself. Only "true" — the portal writes "false" on a valid field. */
.field--err input,.field--err textarea,.field--err select,
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{ border-color:var(--err); box-shadow:0 0 0 3px rgba(155,58,46,.12) }
.field--err input:focus,.field--err textarea:focus,.field--err select:focus,
input[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus,select[aria-invalid="true"]:focus{ outline-color:var(--err); border-color:var(--err) }
.err-msg{ display:none; color:var(--err); font-size:.8rem; margin-top:.35rem }
.field--err .err-msg,[aria-invalid="true"] ~ .err-msg{ display:block }
/* The slot the inquiry forms open just above their submit button for the
   Cloudflare Turnstile check. The space belongs to whatever renders inside
   it, not to the slot, so an empty one — no key, or local preview — takes up
   nothing at all, stray whitespace included. */
.form-turnstile{ margin:0; padding:0; min-height:0; max-width:100%; overflow-x:auto; line-height:0 }
.form-turnstile > *{ margin-bottom:1.1rem }
.form-turnstile:empty{ display:none }
.hint{ font-size:.8rem; color:var(--muted); margin-top:.35rem }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr } }
.form-grid .full{ grid-column:1/-1 }
.check{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; margin-bottom:.6rem; cursor:pointer }
.check input{ width:19px; height:19px; min-height:0; margin-top:2px; flex:none; accent-color:var(--forest) }
@media (max-width:760px){
  .check{ min-height:44px; align-items:center }
  .check input{ width:24px; height:24px; margin-top:0 }
}
.checkgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.2rem .9rem }
.honey{ position:absolute; left:-9999px; opacity:0; height:0; width:0 }

.notice{ padding:1rem 1.15rem; border-radius:var(--r-sm); border-left:3px solid var(--forest); background:var(--linen); font-size:.92rem; margin-bottom:1.2rem }
.notice--ok{ border-color:var(--ok); background:rgba(46,106,79,.08) }
.notice--warn{ border-color:var(--warn); background:rgba(154,107,30,.08) }
.notice--err{ border-color:var(--err); background:rgba(155,58,46,.07) }

/* ---------- listing detail ---------- */
.crumbs{ font-size:.78rem; color:var(--muted); padding:1rem 0; letter-spacing:.03em }
.crumbs a{ color:var(--muted); text-decoration:none; display:inline-block; padding:.78rem .15rem; margin:-.78rem -.15rem }
@media (hover:hover){ .crumbs a:hover{ color:var(--brass-ink) } }
/* A bare <span>/</span> is a separator and stays light. The current page is
   <span aria-current="page"> and is something to READ: it used to take the
   separator's colour (1.34:1 on ivory) and its side margins too, which is why
   the last crumb sat faint and a gap further out than the others. A span that
   ends the trail is treated the same way, for a page not yet marked up. */
.crumbs span{ margin:0 .5rem; color:var(--muted-2); opacity:.55 }
.crumbs [aria-current="page"],.crumbs span:last-child{ margin:0; color:var(--ink-soft); opacity:1 }

.detail{ display:grid; grid-template-columns:minmax(0,1fr) 356px; gap:52px; align-items:start; padding-bottom:70px }
@media (max-width:1040px){ .detail{ grid-template-columns:1fr; gap:36px } }

.gallery{ position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--linen-2) }
.gallery__main{ position:relative; aspect-ratio:4/3 }
.gallery__main img{ width:100%; height:100%; object-fit:cover }
/* The picture is opened by a real button that wraps only the <img>; the
   arrows and the counter are its siblings, above it. The button is the whole
   frame and carries no chrome of its own. Its focus ring is drawn INSIDE the
   frame, because .gallery clips anything outside it: a brass line with an
   ivory one within, so it shows against a dark photograph and a pale map. */
.gallery__open{
  position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0;
  border:0; border-radius:0; background:none; color:inherit; cursor:zoom-in; appearance:none; -webkit-appearance:none;
}
.gallery__open img{ display:block }
.gallery__open:focus-visible{ outline:3px solid var(--brass-l); outline-offset:-3px; border-radius:0 }
.gallery__open:focus-visible::after{ content:""; position:absolute; inset:3px; border:2px solid var(--ivory); pointer-events:none }
.gallery__main[data-kind="map"]{ background:var(--ivory) }
/* A supplied map is shown whole on the page's own ivory, so without a line
   round it the frame vanished and the arrows hung in mid-air. */
.gallery__main[data-kind="map"]::after{ content:""; position:absolute; inset:0; border:1px solid var(--rule); border-radius:var(--r-md); pointer-events:none }
.gallery__main[data-kind="map"] img{ object-fit:contain }
.thumbs button[data-kind="map"] img{ object-fit:contain; background:var(--ivory) }
.lightbox img[data-kind="map"]{ background:var(--ivory) }
.gallery__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  background:rgba(250,246,239,.9); border:1px solid var(--rule); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:1.2rem; color:var(--forest-d); z-index:2;
}
@media (hover:hover){ .gallery__nav:hover{ background:#fff } }
.gallery__nav--prev{ left:14px } .gallery__nav--next{ right:14px }
.gallery__count{ position:absolute; right:14px; bottom:14px; background:rgba(18,39,32,.82); color:#fff; font-size:.76rem; padding:5px 11px; border-radius:var(--r-sm); z-index:2 }
.property-photo-note{ padding:18px 22px; margin:0 0 26px; border:1px solid var(--rule); border-left:3px solid var(--forest); background:var(--ivory); color:var(--muted); line-height:1.65 }
.property-photo-note a{ font-weight:600 }
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px; margin-top:9px; list-style:none; padding:0 }
.thumbs button{ display:block; width:100%; aspect-ratio:4/3; border:1px solid var(--rule); border-radius:var(--r-sm); overflow:hidden; padding:0; cursor:pointer; background:var(--linen-2) }
.thumbs img{ width:100%; height:100%; object-fit:cover }
.thumbs button[aria-current="true"]{ border-color:var(--brass); box-shadow:0 0 0 2px var(--brass-t) }

.lightbox{ position:fixed; inset:0; background:rgba(15,13,10,.94); z-index:200; display:none; align-items:center; justify-content:center; padding:56px 20px }
.lightbox[data-open="true"]{ display:flex }
.lightbox img{ max-width:100%; max-height:82vh; object-fit:contain; border-radius:var(--r-sm) }
.lightbox__close{ position:absolute; top:18px; right:20px; background:none; border:1px solid rgba(255,255,255,.35); color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:1.3rem }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:1px solid rgba(255,255,255,.35); color:#fff; width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:1.4rem }
.lightbox__nav--prev{ left:22px } .lightbox__nav--next{ right:22px }
.lightbox__cap{ position:absolute; bottom:20px; left:0; right:0; text-align:center; color:#D8D2C4; font-size:.85rem }

/* Two to five tiles, depending on the property (a tract with a house adds
   Beds / Baths and Living Area). Flex, not a grid: when the tiles do not fit
   on one line the last row stretches to fill it, where a grid left empty
   cells beside an orphan. The hairlines are each tile's own right and bottom
   border, pulled 1px outside the box so the outermost ones are clipped by the
   rounded frame — which makes them right for any number of rows. */
.metrics{ display:flex; flex-wrap:wrap; border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; background:var(--paper); margin:30px 0 }
.metric{ flex:1 1 150px; min-width:0; margin:0 -1px -1px 0; padding:20px 22px 21px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule) }
/* Both are <p>, and the global paragraph margin was leaking in under each —
   a paragraph of air below the value made every cell bottom-heavy. */
.metric__l{ margin:0; font-size:.68rem; line-height:1.5; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); font-weight:700 }
.metric__v{ margin:.4rem 0 0; font-family:var(--ff-display); font-size:1.6rem; font-weight:600; color:var(--forest-d); font-variant-numeric:tabular-nums; line-height:1.15 }
/* On a phone: two to a row (an odd last tile takes the full width) rather
   than a single column four tiles tall. */
@media (max-width:620px){
  .metric{ flex-basis:40%; padding:16px 16px 17px }
  .metric__v{ font-size:1.4rem }
}

.specs{ width:100%; border-collapse:collapse; font-size:.93rem }
.specs caption{
  text-align:left; font-family:var(--ff-body); font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  font-weight:700; color:var(--brass-ink); padding:0 0 .55rem; border-bottom:1px solid var(--rule);
}
.specs tr{ border-bottom:1px solid var(--rule-soft) }
.specs tr:last-child{ border-bottom:0 }
.specs th{ text-align:left; font-weight:500; color:var(--muted); padding:.66rem 1.2rem .66rem 0; width:46%; vertical-align:top }
.specs td{ padding:.66rem 0; color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums }
@media (max-width:560px){
  .specs th{ display:block; width:auto; padding:.72rem 0 .1rem; font-size:.78rem; letter-spacing:.05em }
  .specs td{ display:block; padding:0 0 .72rem }
}
.spec-cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px 44px; align-items:start }
@media (max-width:720px){ .spec-cols{ grid-template-columns:1fr } }
/* One table only (a sold record often has nothing but its acreage and
   county): it takes the row instead of the left half of it, held to a measure
   a label-and-value line still reads across, with the label column narrowed
   to match. */
.spec-cols[data-count="1"]{ grid-template-columns:minmax(0,1fr); max-width:620px }
.spec-cols[data-count="1"] .specs th{ width:38% }

.highlights{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem }
.highlights li{ position:relative; padding-left:1.7rem; color:var(--ink-soft) }
.highlights li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--brass); transform:rotate(45deg) }

.block{ padding:34px 0; border-top:1px solid var(--rule) }
.block:first-of-type{ border-top:0 }
/* The metric row is already a ruled box. A second hairline straight under it
   read as a doubled border, so the block that follows it goes without. */
.metrics + .block{ border-top:0; padding-top:6px }
.block > h2{ font-size:1.75rem; margin-bottom:1rem }
.block > :last-child{ margin-bottom:0 }

/* The property as the server writes it into the listing page, before the
   script builds the full listing in its place (and all a reader without
   JavaScript sees): the name, a line saying where it is, and the first
   paragraph of the description. Held to a reading measure, with the listing
   page's own heading and lede so the swap to the real page does not jump. */
.ssr-fallback{ max-width:760px; padding:6px 0 72px }
.ssr-fallback h1{ margin-bottom:.25rem }
.ssr-fallback h1 + p{ margin-bottom:1.4rem; font-size:1.15rem; color:var(--ink-soft) }
.ssr-fallback p{ max-width:68ch; color:var(--ink-soft) }
.ssr-fallback > :last-child{ margin-bottom:0 }
.block.location-summary{ padding:28px; margin-bottom:34px; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper) }
.location-summary > h2{ font-size:1.45rem; margin-bottom:.7rem }
.location-summary > .lede{ font-family:var(--ff-display); font-size:1.85rem; line-height:1.2; color:var(--forest-d); margin-bottom:.65rem }
.location-summary > .muted{ max-width:58ch; margin-bottom:0 }
.location-summary .map-note{ margin-top:16px; margin-bottom:0 }
.location-note{ margin-top:14px; max-width:68ch }
.map-documents{ margin-top:22px; padding-top:20px; border-top:1px solid var(--rule) }
.map-documents ul{ display:flex; flex-wrap:wrap; gap:10px 24px; padding:0; margin:0; list-style:none }
.map-documents a{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:.45rem; min-height:44px; font-weight:600; text-decoration-thickness:1px }
.map-documents .small{ color:var(--muted); font-weight:400 }
@media (max-width:520px){
  .block.location-summary{ padding:22px }
  .location-summary > .lede{ font-size:1.65rem }
}

.map{ height:420px; border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; background:var(--linen-2); z-index:1 }
.map--tall{ height:560px }
.map--sm{ height:250px }
@media (max-width:760px){ .map{ height:300px } .map--tall{ height:380px } .map--sm{ height:280px } }
/* Leaflet, lightly. Every rule here is written .map.leaflet-container … so it
   outranks Leaflet's own selector whichever stylesheet loads second — the
   contact page fetches leaflet.css on demand, AFTER this file, and a rule of
   merely equal weight would lose there and win everywhere else. Nothing below
   replaces Leaflet's layout; it only brings the corners, type, link colour and
   shadows into the house style. */
.map.leaflet-container{ font-family:var(--ff-body); background:var(--linen-2) }
/* Stock OpenStreetMap is saturated greens, blues and motorway orange, and it
   fought the palette. The tile pane alone is toned down — less saturation, a
   breath of sepia — which leaves roads and labels as legible as before. Pins,
   county outlines, popups and controls live in other panes and keep their
   true colours. */
.map .leaflet-tile-pane{ filter:saturate(.62) sepia(.14) }
.map.leaflet-container a{ color:var(--forest) }
@media (hover:hover){ .map.leaflet-container a:hover{ color:var(--brass-ink) } }
.map.leaflet-touch .leaflet-bar a{ width:44px; height:44px; line-height:44px }
.map.leaflet-container .leaflet-bar,
.map.leaflet-container .leaflet-control-layers{ border:1px solid var(--rule); border-radius:var(--r-sm); box-shadow:var(--shadow-sm); background-clip:padding-box }
.map.leaflet-container .leaflet-bar a{ color:var(--forest-d); border-bottom-color:var(--rule) }
.map.leaflet-container .leaflet-bar a:first-child{ border-top-left-radius:2px; border-top-right-radius:2px }
.map.leaflet-container .leaflet-bar a:last-child{ border-bottom-left-radius:2px; border-bottom-right-radius:2px }
@media (hover:hover){ .map.leaflet-container .leaflet-bar a:hover{ background:var(--ivory); color:var(--forest-d) } }
.map.leaflet-container .leaflet-control-layers-expanded{ padding:10px 14px 10px 12px; font-size:.84rem; color:var(--ink-soft) }
.map.leaflet-container .leaflet-control-layers label{ display:block; min-height:30px; padding:4px 0; cursor:pointer }
.map.leaflet-container .leaflet-control-layers-selector{ accent-color:var(--forest) }
.map.leaflet-container .leaflet-control-attribution{ padding:1px 7px; background:rgba(250,246,239,.88); color:var(--muted); font-size:.68rem; line-height:1.6 }
.map.leaflet-container .leaflet-popup-content-wrapper{ border-radius:var(--r-md); box-shadow:var(--shadow-md); color:var(--ink) }
.map.leaflet-container .leaflet-popup-tip{ box-shadow:var(--shadow-sm) }
.map.leaflet-container .leaflet-popup-content{ margin:15px 18px 16px; font-size:.84rem; line-height:1.5 }
.map.leaflet-container a.leaflet-popup-close-button{ width:32px; height:32px; font:400 20px/32px var(--ff-body); color:var(--muted) }
@media (hover:hover){ .map.leaflet-container a.leaflet-popup-close-button:hover{ color:var(--forest-d) } }
.map.leaflet-container .leaflet-marker-icon:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; border-radius:50% }
.map-note{ font-size:.82rem; color:var(--muted); margin-top:.7rem; display:flex; gap:.5rem 1.4rem; flex-wrap:wrap; align-items:center }
/* Three small links a thumb has to hit: "Open in Google Maps" under a map,
   "View location" beside a listing's address, and the broker's email on the
   contact card. Each keeps its size and gains a 44px touch area. */
@media (max-width:760px), (pointer:coarse){
  .map-note a{ display:inline-flex; align-items:center; min-height:44px }
  .lede > a.small,#mgr-lic a{ display:inline-block; padding-block:.85rem; margin-block:-.85rem }
}
.legend{ display:flex; gap:1.1rem; flex-wrap:wrap }
.legend span{ display:inline-flex; align-items:center; gap:.4rem; color:var(--ink-soft) }
/* Every map indicator is the palette's brick red (--map-red); county areas
   remain clearly approximate. */
.legend i{ width:12px; height:12px; border-radius:50%; display:block; background:var(--map-red) }
.legend .legend__area{ background:transparent; border:2px solid var(--map-red); width:15px; height:15px }
.pin, .pin--land, .pin--lease, .pin--residential, .pin--sold, .pin--red{ background:var(--map-red); color:#fff; border:2px solid #fff; border-radius:50%; width:26px; height:26px; box-shadow:0 1px 2px rgba(28,26,22,.2), 0 2px 8px rgba(28,26,22,.22); transform:none }
.pin span{ display:block; font-size:.68rem; font-weight:700; text-align:center; line-height:22px; transform:none }
/* The county marker (.pin-count): one numbered circle standing for every
   property known only by its county. The script sets its size, fill and
   centring inline, per marker, because the size depends on the count; what is
   left is here — the white ring a single pin has, a slightly deeper shadow
   for the larger disc, and the numeral's type. border-box, so the ring is
   drawn inside the size the script asked for and the marker stays centred on
   its anchor. Nothing in the .pin rules above touches it: it is not a .pin. */
.pin-count{
  box-sizing:border-box; border:2px solid #fff;
  box-shadow:0 1px 2px rgba(28,26,22,.2), 0 3px 10px rgba(28,26,22,.26);
  font-family:var(--ff-body); font-size:.82rem; font-weight:700; line-height:1; letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums; cursor:pointer;
}
.map-pop{ font-family:var(--ff-body); min-width:180px }
.map-pop b{ font-family:var(--ff-display); font-size:1.15rem; font-weight:600; line-height:1.2; color:var(--forest-d); display:block; margin-bottom:3px }
.map-pop a{ text-underline-offset:3px }
.map-pop__note{ font-size:.78rem; line-height:1.4; color:var(--muted); margin:.45rem 0 }
/* No max-height or scrolling of its own: Leaflet already caps the popup
   (maxHeight) and scrolls its content, and a second scroller inside the first
   cut a twelve-property county off at seven with nothing to say there was more. */
.map-pop__list{ margin:.6rem 0 0; padding-left:1.05rem }
.map-pop__list li{ margin:.45rem 0; font-size:.84rem; line-height:1.4 }
.map-pop__list li::marker{ color:var(--brass) }
.map-pop__list small{ margin-left:.55em; font-size:.76rem; color:var(--muted); white-space:nowrap }
.card--sold .card__media img{ filter:grayscale(.45) }

/* ---------- broker rail ---------- */
.rail{ position:sticky; top:calc(var(--hdr) + 20px); display:grid; gap:16px }
@media (max-width:1040px){ .rail{ position:static } }
.broker{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-md); padding:24px; box-shadow:var(--shadow-sm) }
.broker__hd{ display:flex; gap:14px; align-items:center; margin-bottom:16px }
.broker__ph{
  width:62px; height:62px; border-radius:50%; flex:none; background:var(--forest); color:var(--brass-l);
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-size:1.35rem; font-weight:600;
}
.broker__nm{ font-family:var(--ff-display); font-size:1.24rem; font-weight:600; color:var(--forest-d); line-height:1.2 }
.broker__ti{ font-size:.76rem; color:var(--muted); letter-spacing:.05em }
/* The global p{margin:0 0 1.05em} rule was leaking into this card and putting a
   whole paragraph of air between the name, the role and the buttons — the name
   sat at the top of the avatar and the role drifted to the bottom with a hole
   between. These are labels inside a fixed-height card, not prose. */
.broker__nm,.broker__ti{ margin:0 }
.broker__hd{ margin-bottom:18px }
/* Label / value rows — ul.broker__rows > li, each a small letter-spaced
   label (.broker__k) and its value: "DIRECT  229-…", "EMAIL  joe@…", then the
   licence line on its own. The list resets live here, so the rows start on
   the card's own left edge, the axis the avatar and the buttons share (the
   old <dl> brought the browser's 40px <dd> indent with it and sat off it).
   Labels take a fixed column so the values line up beneath one another. */
.broker__rows{ display:grid; gap:.55rem; margin:0 0 18px; padding:0 0 17px; list-style:none; font-size:.9rem; line-height:1.45; border-bottom:1px solid var(--rule-soft) }
/* Nothing follows the list in the "At a Glance" card, so nothing to rule off. */
.broker__rows:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:0 }
.broker__rows > li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .75rem; margin:0; padding:0; min-width:0 }
.broker__rows a{ text-decoration:none; overflow-wrap:anywhere; min-width:0 }
/* Two classes, so the label keeps its colour beside the .muted it also carries. */
.broker__rows .broker__k{
  flex:0 0 3.6rem; margin:0; font-size:.68rem; font-weight:700; letter-spacing:.15em; line-height:1.5;
  text-transform:uppercase; color:var(--muted);
}
/* "At a Glance": the same rows with no labels. Its headline figure is set
   the way a card sets a price. */
.broker__rows > li > strong:first-child{ font-family:var(--ff-display); font-size:1.5rem; font-weight:600; line-height:1.15; color:var(--forest-d); font-variant-numeric:tabular-nums }
.broker > .label + .broker__rows{ gap:.4rem }
@media (max-width:760px), (pointer:coarse){
  /* Phone and email are the two things in this card a thumb goes for: where a
     finger is the pointer their rows are a full 44px tall. */
  .broker__rows > li:has(> a){ min-height:44px; align-items:center }
  .broker__rows > li > a{ display:inline-flex; align-items:center; align-self:stretch }
  .broker__rows:has(> li > a){ gap:0 }
}

/* ---------- contact ---------- */
.contact-section{ padding-top:28px }
.contact-heading{ margin-bottom:42px; max-width:720px }
.contact-heading h1{ margin-bottom:.3em; font-size:clamp(2.7rem,5.4vw,4.6rem) }
.contact-heading .lede{ margin-bottom:0 }
.contact-layout{ grid-template-columns:340px minmax(0,1fr); gap:46px; padding-bottom:0 }
.contact-form-column{ grid-column:2; grid-row:1; min-width:0 }
.contact-rail{ grid-column:1; grid-row:1; position:static }
.contact-form-panel{ padding:clamp(24px,3.3vw,40px); box-shadow:none; margin-bottom:0 }
.contact-form-panel > h2{ font-size:2rem }
.contact-form-panel .panel__sub{ margin-bottom:24px; max-width:51ch }
.contact-form-panel .hint{ margin:16px 0 0; max-width:58ch }
.contact-form-panel input,.contact-form-panel textarea,.contact-form-panel select{ background-color:#FDFBF7 }
.contact-form-panel textarea{ min-height:160px }
.contact-intent{ margin:0 0 25px; padding:15px 18px; border-left:2px solid var(--brass); background:var(--linen); font-size:.89rem; color:var(--forest) }
.contact-intent strong{ display:block; margin-bottom:3px; font-weight:700 }
.contact-intent p{ margin:0; overflow-wrap:anywhere }
.contact-office-map{ padding-bottom:0 }
.contact-rail .broker{ box-shadow:none; padding:27px }
.contact-rail .broker:first-child{ background:var(--forest-d); border-color:var(--forest-d); color:var(--ivory) }
.contact-rail .broker:first-child .label{ color:#DAC38C }
.contact-rail .broker:first-child .broker__nm{ color:var(--ivory); font-size:1.5rem }
.contact-rail .broker:first-child .broker__ti{ color:#D5CFC0 }
.contact-rail .broker:first-child .broker__ph{ background:rgba(250,246,239,.09); color:#DAC38C; border:1px solid rgba(250,246,239,.16) }
.contact-rail .broker:first-child .btn{ --bg:var(--ivory); --bd:var(--ivory); --fg:var(--forest-d) }
.contact-rail .broker:first-child .btn--ghost{ --bg:transparent; --bd:rgba(250,246,239,.35); --fg:var(--ivory) }
.contact-rail .broker:first-child #mgr-lic,.contact-rail .broker:first-child #mgr-lic a{ color:#D5CFC0; overflow-wrap:anywhere }
.contact-rail .text-link{ margin-top:10px }
.not-found-page main{ min-height:65vh }
.not-found-page .lede{ max-width:58ch }
@media (hover:hover){
  .contact-rail .broker:first-child .btn:hover{ --bg:#E7D6AD; --bd:#E7D6AD; color:var(--forest-d) }
  .contact-rail .broker:first-child .btn--ghost:hover{ --bg:var(--ivory); --bd:var(--ivory); color:var(--forest-d) }
}
@media (max-width:900px){
  .contact-layout{ grid-template-columns:minmax(0,1fr); gap:28px }
  .contact-form-column{ grid-column:auto; grid-row:2 }
  .contact-rail{ grid-column:auto; grid-row:1; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start }
  .contact-rail .broker:first-child{ grid-row:span 2 }
}
@media (max-width:640px){
  .contact-section{ padding-top:20px }
  .contact-heading{ margin-bottom:28px }
  .contact-rail{ grid-template-columns:minmax(0,1fr) }
  .contact-rail .broker:first-child{ grid-row:auto }
  .contact-rail .broker:last-child{ display:none }
  .contact-form-panel{ padding:24px 20px }
}

/* ---------- call bar (mobile) ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:none; gap:1px;
  background:var(--rule); padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 20px rgba(28,26,22,.14);
}
.callbar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:58px;
  background:var(--forest); color:#fff; text-decoration:none; font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.callbar a + a{ background:var(--brass-ink) }
@media (max-width:820px){ .callbar{ display:flex } body{ padding-bottom:calc(68px + env(safe-area-inset-bottom)) } }
body.nav-open .callbar,
body.lightbox-open .callbar{ display:none }

/* ---------- footer ---------- */
.site-footer{ background:var(--forest-d); color:#C9C2B3; padding:64px 0 0; margin-top:0 }
.site-footer a{ color:#E4DDCE; text-decoration:none }
@media (hover:hover){ .site-footer a:hover{ color:var(--brass-l) } }
/* Three bands, each closed by a hairline: the link grid; the two legal
   statements, set side by side so they fill the measure instead of sitting in
   a narrow column with a void beside and above them; then the copyright and
   licence line. The statements are the footer's direct children, so the
   footer's own .wrap is the grid that places them. */
.site-footer > .wrap{ display:grid; grid-template-columns:minmax(0,1.38fr) minmax(0,1fr); column-gap:clamp(36px,5vw,64px) }
.site-footer > .wrap > *{ grid-column:1/-1 }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.12) }
@media (max-width:880px){ .footer__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr } }
.footer__h{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-l); font-weight:700; margin-bottom:1.1rem }
.footer__list{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; font-size:.9rem }
.footer__brand .brand__name{ color:#fff; font-size:1.3rem }
/* Legal type: 12.8px (13.4px on a phone), up from 11.8px, in #B4AC9C — 6.97:1
   on the forest ground, where the old #9A9385 was 5.15:1. Still the quietest
   text on the page; no longer a strain to read. */
.disclaimer{ font-size:.8rem; color:#B4AC9C; line-height:1.65; max-width:70ch }
.site-footer > .wrap > .disclaimer{ grid-column:auto; max-width:none; margin:0; padding:28px 0 30px }
.footer__legal{ border-top:1px solid rgba(255,255,255,.12); padding:20px 0 30px; font-size:.8rem; line-height:1.6; color:#B4AC9C; display:flex; justify-content:space-between; gap:.35rem 1.6rem; flex-wrap:wrap }
@media (max-width:900px){
  .site-footer > .wrap{ display:block }
  .site-footer > .wrap > .disclaimer{ padding:24px 0 0 }
  .site-footer > .wrap > .disclaimer + .disclaimer{ padding:14px 0 26px }
}
@media (max-width:760px){ .footer__legal{ font-size:.84rem } .disclaimer{ font-size:.84rem } }
/* A footer link is a line of 14px type — 17px tall. Where a finger is the
   pointer, each one is a 44px row. */
@media (max-width:760px), (pointer:coarse){
  .footer__list{ gap:0 }
  .footer__list a,.site-footer address a{ display:inline-flex; align-items:center; min-height:44px }
  .footer__h{ margin-bottom:.5rem }
}

/* The footer as each page ships it, before any script runs: the firm name,
   the licences, the disclaimer and the Fair Housing statement, as plain
   paragraphs. The script replaces it with the full footer above; a reader
   without JavaScript, and a crawler, get this one. It stands on the same
   forest ground (it used to be grey on ivory at 2.83:1), sets its own colours
   so it is right even without the .site-footer class beside it, and underlines
   its links, since here colour alone would be all that marked them. */
.site-footer--static{ padding:44px 0 46px; background:var(--forest-d); color:#C9C2B3 }
.site-footer--static > .wrap{ display:block }
.site-footer--static .disclaimer,
.site-footer--static > .wrap > .disclaimer,
.site-footer--static > .wrap > .disclaimer + .disclaimer{ max-width:78ch; margin:0 0 1.05em; padding:0; font-size:.86rem; line-height:1.7; color:#C9C2B3 }
.site-footer--static .disclaimer:last-child{ margin-bottom:0 }
.site-footer--static .disclaimer strong{ color:#fff; font-weight:600 }
.site-footer--static a{ color:#E4DDCE; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
@media (max-width:760px), (pointer:coarse){
  .site-footer--static a{ display:inline-block; padding-block:.7rem; margin-block:-.7rem }
}

/* ---------- misc blocks ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center }
@media (max-width:860px){ .split{ grid-template-columns:1fr } }
.frame{ position:relative; border-radius:var(--r-md); overflow:hidden }
.frame::after{ content:""; position:absolute; inset:12px; border:1px solid rgba(250,246,239,.45); pointer-events:none; border-radius:2px }
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden }
.tile{ background:var(--ivory); padding:30px 26px }
.tile h3{ font-size:1.28rem; margin-bottom:.5rem }
.tile p{ font-size:.92rem; color:var(--muted); margin:0 }
.tile__n{ font-family:var(--ff-display); font-size:.95rem; color:var(--brass-ink); margin-bottom:.7rem; letter-spacing:.1em }
.empty{ text-align:center; padding:70px 26px; border:1px dashed var(--rule); border-radius:var(--r-md); background:var(--paper) }

/* ---------- admin ---------- */
.admin-shell{ display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh; background:var(--linen) }
@media (max-width:900px){ .admin-shell{ grid-template-columns:minmax(0,1fr) } }
.admin-side{ background:var(--forest-d); color:#CFC8B9; padding:26px 20px; position:sticky; top:0; height:100vh; overflow:auto }
@media (max-width:900px){ .admin-side{ position:static; height:auto } }
.admin-side .brand__name{ color:#fff; font-size:1.1rem }
.admin-nav{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:2px }
.admin-nav button{
  width:100%; text-align:left; background:none; border:0; color:#CFC8B9; padding:.72rem .85rem;
  border-radius:var(--r-sm); cursor:pointer; font-size:.86rem; font-weight:600; letter-spacing:.04em; min-height:44px;
}
@media (hover:hover){ .admin-nav button:hover{ background:rgba(255,255,255,.07); color:#fff } }
@media (max-width:900px){
  .admin-side{ padding:18px 20px }
  .admin-nav{ display:flex; gap:6px; margin:16px -20px 0; padding:0 20px 6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .admin-nav::-webkit-scrollbar{ display:none }
  .admin-nav > li{ flex:none }
  .admin-nav button{ width:auto; white-space:nowrap; padding:.6rem .95rem }
}
.admin-nav button[aria-current="true"]{ background:var(--brass); color:#1C1A16 }
.admin-split{ display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:22px; align-items:start }
@media (max-width:640px){ .admin-split{ grid-template-columns:minmax(0,1fr) } }
.stats-grid{ display:grid; grid-template-columns:1fr 1fr 2fr; gap:.9rem }
@media (max-width:640px){ .stats-grid{ grid-template-columns:minmax(0,1fr) } }
.admin-main{ padding:30px clamp(18px,3vw,38px) 90px }
.admin-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin-bottom:24px }
.admin-hd h1{ font-size:2rem; margin:0 }
.panel{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-md); padding:26px; box-shadow:var(--shadow-sm); margin-bottom:22px }
.panel > h2{ font-size:1.42rem; margin-bottom:.25rem }
.panel__sub{ font-size:.88rem; color:var(--muted); margin:-.1rem 0 1.4rem }
.fieldset{ border:0; padding:0; margin:0 0 2rem }
.fieldset > legend{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--brass-ink);
  padding:0 0 .9rem; border-bottom:1px solid var(--rule-soft); width:100%; margin-bottom:1.2rem;
}
.admin-table{ width:100%; border-collapse:collapse; font-size:.9rem }
.admin-table th{ text-align:left; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); padding:.6rem .8rem; border-bottom:1px solid var(--rule) }
.admin-table td{ padding:.75rem .8rem; border-bottom:1px solid var(--rule-soft); vertical-align:middle }
@media (hover:hover){ .admin-table tr:hover td{ background:var(--ivory) } }
.admin-table img{ width:74px; height:56px; object-fit:cover; border-radius:2px; border:1px solid var(--rule) }
.admin-table .acts{ display:flex; gap:.4rem; justify-content:flex-end; flex-wrap:wrap }
.tbl-wrap{ overflow-x:auto }

.drop{
  border:2px dashed var(--rule); border-radius:var(--r-md); background:var(--ivory); padding:34px 22px;
  text-align:center; transition:border-color .18s var(--ease), background .18s var(--ease);
}
.drop[data-over="true"]{ border-color:var(--brass); background:var(--brass-t) }
.drop p{ margin:.4rem 0 0; color:var(--muted); font-size:.88rem }
.photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:16px; list-style:none; padding:0 }
.photo{ position:relative; border:1px solid var(--rule); border-radius:var(--r-sm); overflow:hidden; background:var(--linen-2) }
.photo img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.photo[data-cover="true"]{ border-color:var(--brass); box-shadow:0 0 0 2px var(--brass-t) }
.photo__tag{ position:absolute; top:7px; left:7px; background:var(--brass); color:#1C1A16; font-size:.66rem; font-weight:700; letter-spacing:.12em; padding:3px 6px; border-radius:2px }
.photo__acts{ display:flex; gap:4px; padding:7px; background:var(--paper); border-top:1px solid var(--rule-soft) }
.photo__acts button{
  flex:1; border:1px solid var(--rule); background:var(--paper); border-radius:2px; cursor:pointer;
  font-size:.66rem; padding:.3rem; min-height:44px; color:var(--muted);
}
@media (hover:hover){
  .photo__acts button:hover{ border-color:var(--forest); color:var(--forest) }
  .photo__acts button.x:hover{ border-color:var(--err); color:var(--err) }
}

.geo-results{ list-style:none; padding:0; margin:.8rem 0 0; display:grid; gap:.4rem }
.geo-results button{
  width:100%; text-align:left; border:1px solid var(--rule); background:var(--paper); border-radius:var(--r-sm);
  padding:.6rem .8rem; cursor:pointer; font-size:1rem; min-height:44px;
}
@media (hover:hover){ .geo-results button:hover{ border-color:var(--forest); background:var(--ivory) } }

.stickybar{
  position:sticky; bottom:0; background:var(--ivory);
  border-top:1px solid var(--rule); padding:14px 0; margin-top:26px; display:flex; gap:.7rem;
  align-items:center; flex-wrap:wrap; z-index:20;
}
/* On iPhones with viewport-fit=cover the save bar would otherwise sit under the home indicator. */
@media (max-width:900px){ .stickybar{ padding-bottom:calc(14px + env(safe-area-inset-bottom)) } }
.stickybar .spacer{ flex:1 }
.savepill{ font-size:.8rem; color:var(--muted) }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(16px); background:var(--forest-d);
  color:#fff; padding:.85rem 1.4rem; border-radius:var(--r-sm); box-shadow:var(--shadow-lg); z-index:300;
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease), transform .22s var(--ease); font-size:.9rem;
}
.toast[data-show="true"]{ opacity:1; transform:translateX(-50%) translateY(0) }
@media (max-width:820px){ .toast{ bottom:calc(74px + env(safe-area-inset-bottom)) } }

.login{ min-height:100vh; display:grid; place-items:center; padding:40px 22px; background:var(--forest-d) }
.login__card{ background:var(--ivory); border-radius:var(--r-md); padding:40px; width:100%; max-width:430px; box-shadow:var(--shadow-lg) }

.tag-row{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center }
.kbd{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem; background:var(--linen); border:1px solid var(--rule); border-radius:3px; padding:.12rem .38rem }
[hidden]{ display:none !important }

/* Keep narrow screens comfortable without clipping content to conceal overflow. */
@media (max-width:520px){
  .wrap{ padding-inline:20px }
  .site-header__inner{ gap:12px }
  .site-header .brand__name{ font-size:clamp(.88rem,3.7vw,1.05rem) }
  .nav-toggle{ flex:none }
  .card__price{ flex-wrap:wrap; gap:.2rem .7rem }
  .footer__grid{ gap:30px }
  .footer__grid a,.footer__legal{ overflow-wrap:anywhere }
}

@media print{
  /* The footer's link grid goes; its legal lines stay. A printed listing is
     still an advertisement, and the firm name, licences and disclaimer belong
     on it — in ink, not as pale type on a forest ground that will not print. */
  .site-header,.callbar,.footer__grid,.rail,.gallery__nav,.btn,.lightbox{ display:none !important }
  body{ background:#fff; padding-bottom:0 }
  .site-footer{ background:none; color:#333; padding:18px 0 0 }
  .site-footer .disclaimer,.footer__legal,.site-footer a{ color:#333 }
  .footer__legal{ border-top-color:#bbb }
}