:root{
  color-scheme: light;
  --ink:#15120f; --ink-2:#2a2520; --muted:#6b635a; --line:#e3ddd4;
  --ground:#fbfaf7; --stone:#f1ece4; --stone-2:#e8e1d6; --paper:#ffffff;
  --copper:#a8652b; --copper-deep:#8a4f1e; --gold:#d9a066; --gold-soft:#f3e3cf;
  --river:#1e4943; --ok:#2f6b3a; --warn:#9a5b0c;
  --display:"Cinzel","Trajan Pro",Georgia,"Times New Roman",serif;
  --body:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --accent:"Cormorant Garamond",Georgia,serif;
  --r:4px; --wrap:1200px;
  --shadow:0 1px 2px rgba(21,18,15,.06),0 8px 24px rgba(21,18,15,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--copper-deep)}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.15rem}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font:600 .74rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--copper)}
.lede{font-size:1.1rem;color:var(--ink-2);max-width:62ch}
.flourish{font-family:var(--accent);font-style:italic;font-weight:500;color:var(--copper);letter-spacing:0;text-transform:none}
.rule{display:flex;align-items:center;gap:14px;color:var(--copper)}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .82rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:15px 24px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn-gold{background:linear-gradient(180deg,#b9763a,#94561f);color:#fff;border-color:#86491a;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.btn-gold:hover{background:linear-gradient(180deg,#c5844a,#9e5f27)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-sm{padding:10px 16px;font-size:.72rem}

/* header */
.topbar{background:var(--ink);color:#d8cfc3;font-size:.8rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;padding-block:8px;flex-wrap:wrap}
.topbar b{color:var(--gold);font-weight:600}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(251,250,247,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand img{height:54px;width:auto}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font:700 1.3rem/1 var(--display);letter-spacing:.08em}
.brand .wm span{font:600 .62rem/1 var(--body);letter-spacing:.34em;color:var(--copper);margin-top:6px}
nav.main{display:flex;gap:2px;align-items:center}
nav.main a{white-space:nowrap;font:600 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:12px 7px;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--copper)}
nav.main a[aria-current="page"]{border-bottom-color:var(--copper);color:var(--copper-deep)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;cursor:pointer;font:600 .72rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
@media (max-width:1240px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ground);flex-direction:column;align-items:stretch;padding:8px 16px 16px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  nav.main.open{display:flex}
  nav.main a{padding:14px 4px;border-bottom:1px solid var(--line)}
  nav.main a[aria-current="page"]{border-bottom-color:var(--line)}
  .menu-btn{display:block}
  .hdr-cta{display:none}
}

/* pages */
.page{display:none}
.page.active{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
section{padding-block:clamp(48px,7vw,88px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.sec-head .stack{display:grid;gap:12px}
.band-stone{background:var(--stone)}
.band-ink{background:var(--ink);color:#efe7dc}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink .eyebrow{color:var(--gold)}
.page-hero{background:var(--stone);border-bottom:1px solid var(--line);padding-block:clamp(40px,6vw,72px)}
.page-hero .wrap{display:grid;gap:14px}

/* home hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1200px 500px at 85% 20%,rgba(217,160,102,.18),transparent 60%),
  linear-gradient(180deg,var(--ground),var(--stone));border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(40px,6vw,80px)}
.hero h1 .flourish{display:block;font-size:.72em;margin-top:6px}
.hero .copy{display:grid;gap:22px}
.hero .logo-plate{justify-self:center;max-width:460px;width:100%}
.hero .logo-plate img{width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(21,18,15,.12))}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero .logo-plate{order:-1;max-width:320px}}

.search{background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);padding:14px;display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:10px}
.search label{display:grid;gap:4px;font:600 .66rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
select,input,textarea{font:500 .95rem var(--body);color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;width:100%}
textarea{min-height:120px;resize:vertical}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(168,101,43,.15)}
.search .btn{align-self:end;height:44px}
@media (max-width:720px){.search{grid-template-columns:1fr 1fr}.search label:first-child{grid-column:1/-1}.search .btn{grid-column:1/-1}}

/* market strip */
.market{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:6px;background:var(--paper);overflow:hidden}
.market div{padding:22px 20px;border-right:1px solid var(--line);display:grid;gap:6px}
.market div:last-child{border-right:0}
.market b{font:600 1.9rem/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.market span{font-size:.82rem;color:var(--muted)}
.market em{font-style:normal;font-size:.76rem;font-weight:600}
.down{color:var(--warn)} .up{color:var(--ok)} .flat{color:var(--muted)}
.src{font-size:.76rem;color:var(--muted);margin-top:10px}
@media (max-width:760px){.market{grid-template-columns:1fr 1fr}.market div:nth-child(2){border-right:0}.market div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* listing cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .25s,box-shadow .25s;text-align:left;padding:0;font:inherit;color:inherit}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .ph{position:relative;aspect-ratio:16/10;background:var(--stone)}
.card .ph svg{width:100%;height:100%;display:block}
.tag{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font:600 .64rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;border-radius:2px}
.tag.new{background:var(--copper)}
.tag.pending{background:#6b635a}
.card .body{padding:18px 20px 20px;display:grid;gap:8px;flex:1}
.price{font:600 1.45rem/1 var(--display);font-variant-numeric:tabular-nums}
.addr{font-weight:600}
.hood{font-size:.84rem;color:var(--muted)}
.specs{display:flex;gap:16px;font-size:.84rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px;margin-top:4px;flex-wrap:wrap}
.specs b{font-weight:700}
.sample-note{display:inline-flex;gap:8px;align-items:center;font-size:.8rem;color:var(--muted);background:var(--gold-soft);border:1px solid #ecd3b4;padding:8px 12px;border-radius:var(--r)}

/* filters */
.filters{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:20px}
.filters label{display:grid;gap:4px;font:600 .66rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:980px){.filters{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.filters{grid-template-columns:1fr 1fr}}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--gold-soft);border:1px solid #ecd3b4;color:var(--copper-deep);border-radius:999px;padding:5px 12px;font:600 .78rem var(--body);cursor:pointer;margin-left:10px}
.chip:hover{background:#f7ead8}
.results-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;color:var(--muted);font-size:.9rem}
.empty{padding:48px;text-align:center;border:1px dashed var(--line);border-radius:6px;color:var(--muted)}

/* split / features */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(217,160,102,.35)}
.pillars > div{padding:28px 24px 8px 0;display:grid;gap:10px;align-content:start}
.pillars h3{font-size:1.25rem;color:var(--gold)}
.pillars p{color:#cfc5b8}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc a{display:grid;gap:12px;align-content:start;padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);transition:border-color .2s}
.svc a:hover{border-color:var(--copper)}
.svc .go{font:600 .72rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
.svc p{color:var(--ink-2);font-size:.95rem}
@media (max-width:860px){.svc{grid-template-columns:1fr}}

/* neighborhoods */
.hoods{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.hood-card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:26px;display:grid;gap:12px;align-content:start}
.hood-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hood-card .tier{font:600 .9rem var(--display);color:var(--copper);letter-spacing:.1em;white-space:nowrap}
.hood-card .area{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hood-card p{color:var(--ink-2);font-size:.95rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.85rem;border-top:1px solid var(--line);padding-top:12px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 14px;font:600 .78rem var(--body);cursor:pointer;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.steps li{list-style:none;display:grid;gap:10px;align-content:start;padding-top:18px;border-top:2px solid var(--copper)}
.steps li::before{counter-increment:s;content:"Step " counter(s);font:600 .7rem var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--copper)}
.steps p{color:var(--ink-2);font-size:.94rem}
.steps{padding:0;margin:0}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* forms */
.form{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:clamp(20px,3vw,32px);display:grid;gap:14px;box-shadow:var(--shadow)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.form label{display:grid;gap:6px;font:600 .7rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.form .msg{display:none;padding:14px 16px;border-radius:var(--r);background:#eef4ee;border:1px solid #cfe0d0;color:var(--ok);font-size:.92rem}
.form .msg.show{display:block}
.form .err{color:#a33;font-size:.8rem;text-transform:none;letter-spacing:0;font-weight:500}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media (max-width:860px){.calc{grid-template-columns:1fr}}
.calc .inputs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc .inputs label{display:grid;gap:6px;font:600 .7rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.calc .inputs .full{grid-column:1/-1}
.pay{background:var(--ink);color:#efe7dc;border-radius:6px;padding:28px;display:grid;gap:18px}
.pay .big{font:600 clamp(2.4rem,5vw,3.2rem)/1 var(--display);color:#fff;font-variant-numeric:tabular-nums}
.pay .bar{display:flex;height:14px;border-radius:2px;overflow:hidden;background:#333}
.pay .bar i{display:block;height:100%}
.pay ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pay li{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px}
.pay li span{display:flex;align-items:center;gap:10px}
.pay li span i{width:10px;height:10px;border-radius:2px;display:inline-block}
.pay small{color:#a99e90;font-size:.8rem}
.range{display:flex;gap:8px;align-items:center}
.range input[type=range]{padding:0;accent-color:var(--copper);border:0;background:none}
.range output{min-width:56px;text-align:right;font:600 .9rem var(--body);font-variant-numeric:tabular-nums;color:var(--ink)}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.92rem}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .68rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:var(--stone)}
tr:last-child td{border-bottom:0}
td b{font-weight:600}

/* about */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.values div{padding:28px;border:1px solid var(--line);border-radius:6px;background:var(--paper);display:grid;gap:10px;align-content:start}
.values h3{color:var(--copper-deep)}
@media (max-width:860px){.values{grid-template-columns:1fr}}
.quote{font:500 italic clamp(1.4rem,2.6vw,2rem)/1.35 var(--accent);color:var(--ink);max-width:36ch}

/* modal */
dialog{border:0;padding:0;border-radius:8px;max-width:min(920px,calc(100vw - 32px));width:100%;box-shadow:0 30px 80px rgba(0,0,0,.35);background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgba(21,18,15,.6)}
.modal{display:grid;grid-template-columns:1.1fr .9fr}
.modal .ph svg{width:100%;height:100%;display:block;min-height:260px}
.modal .info{padding:28px;display:grid;gap:14px;align-content:start;max-height:80vh;overflow:auto}
.modal .x{position:absolute;top:10px;right:10px;background:var(--paper);border:1px solid var(--line);border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:1.2rem;line-height:1;color:var(--ink)}
@media (max-width:760px){.modal{grid-template-columns:1fr}.modal .ph svg{min-height:200px}}

/* footer */
footer{background:var(--stone);border-top:1px solid var(--line);padding-block:56px 28px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
/* The logo sat flush left in a column half again its width, so it read as
   pushed into the corner rather than placed. Centred as a block with its
   tagline, which also lands it properly on a phone where the footer is one
   column. */
footer .cols img{width:220px;height:auto;margin-inline:auto}
footer .cols>div:first-child{text-align:center}
footer h4{font:600 .72rem var(--body);letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px;color:var(--copper-deep)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.92rem}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--copper)}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--stone-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.legal a{color:var(--ink-2);text-decoration:underline}
@media (max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}
.copy-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy-btn{background:none;border:1px solid var(--line);border-radius:var(--r);padding:4px 8px;font:600 .66rem var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--muted)}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.muted{color:var(--muted)}
.stack-lg{display:grid;gap:20px}

/* listing page */
a.card{text-decoration:none}
.price .per{font:500 .82rem/1 var(--body);color:var(--muted);letter-spacing:.02em}
.listing-media{min-width:0;align-self:start}
.listing-media + .stack-lg{align-self:start}
.listing-ph{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--stone);aspect-ratio:16/10}
.listing-ph svg{width:100%;height:100%;display:block}
.listing-price{font:600 clamp(1.8rem,3.4vw,2.6rem)/1 var(--display);color:var(--ink)}
.page-hero .kv,.page-hero .muted{margin:0}
@media (max-width:860px){.listing-ph{aspect-ratio:16/11}}
/* aspect-ratio gives way to a taller child, so the photo is pinned to the box
   instead of setting its height - otherwise every card in a row is a different
   height */
.card .ph{overflow:hidden}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.listing-ph{position:relative}
.listing-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:96px;gap:8px;overflow-x:auto;padding:8px 0;scrollbar-width:thin}
.shots:empty{display:none}
.shot{padding:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--stone);cursor:pointer;aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.on{border-color:var(--copper);box-shadow:0 0 0 2px var(--gold-soft)}

/* header mega menu */
/* the label fills the header's full height, so moving the pointer down to the
   panel never crosses dead space */
nav.main .has-mega{display:flex;align-items:stretch;align-self:stretch}
nav.main .mega-top{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font:600 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  padding:12px 7px;border-bottom:2px solid transparent;white-space:nowrap}
nav.main .mega-top:hover{color:var(--copper)}
nav.main .mega-top svg{width:11px;height:7px;transition:transform .18s;flex:0 0 auto}
nav.main .has-mega.open .mega-top{color:var(--copper);border-bottom-color:var(--copper)}
nav.main .has-mega.open .mega-top svg{transform:rotate(180deg)}
nav.main .mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:45;
  max-height:calc(100vh - 100%);overflow-y:auto;overscroll-behavior:contain}
nav.main .mega[hidden]{display:none}
nav.main .mega-in{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-block:28px;align-items:start}
nav.main .mega-col h4{font:600 .68rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin:0 0 12px}
nav.main .mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
nav.main .mega-col a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;text-decoration:none;color:var(--ink);font:500 .88rem/1.4 var(--body);padding:6px 8px;border-radius:var(--r);text-transform:none;letter-spacing:0}
nav.main .mega-col a:hover{background:var(--stone);color:var(--copper-deep)}
nav.main .mega-col a span{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
nav.main .mega-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-block:16px;color:var(--muted);font-size:.86rem}
@media (max-width:1240px){
  /* stacked menu: the panel opens in place under its own label */
  nav.main .has-mega{display:block;border-bottom:1px solid var(--line)}
  nav.main .mega-top{width:100%;justify-content:space-between;padding:14px 4px;border-bottom:0}
  nav.main .mega{position:static;border:0;box-shadow:none;background:transparent;max-height:none;overflow:visible}
  nav.main .mega-in{grid-template-columns:1fr 1fr;gap:16px;padding-block:8px 14px}
  nav.main .mega-foot{display:none}
  nav.main .mega-col a{padding:7px 6px}
}
@media (max-width:760px){.market{grid-template-columns:1fr 1fr}.market div:nth-child(2){border-right:0}.market div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* listing cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .25s,box-shadow .25s;text-align:left;padding:0;font:inherit;color:inherit}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .ph{position:relative;aspect-ratio:16/10;background:var(--stone)}
.card .ph svg{width:100%;height:100%;display:block}
.tag{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font:600 .64rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;border-radius:2px}
.tag.new{background:var(--copper)}
.tag.pending{background:#6b635a}
.card .body{padding:18px 20px 20px;display:grid;gap:8px;flex:1}
.price{font:600 1.45rem/1 var(--display);font-variant-numeric:tabular-nums}
.addr{font-weight:600}
.hood{font-size:.84rem;color:var(--muted)}
.specs{display:flex;gap:16px;font-size:.84rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px;margin-top:4px;flex-wrap:wrap}
.specs b{font-weight:700}
.sample-note{display:inline-flex;gap:8px;align-items:center;font-size:.8rem;color:var(--muted);background:var(--gold-soft);border:1px solid #ecd3b4;padding:8px 12px;border-radius:var(--r)}

/* filters */
.filters{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:20px}
.filters label{display:grid;gap:4px;font:600 .66rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:980px){.filters{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.filters{grid-template-columns:1fr 1fr}}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--gold-soft);border:1px solid #ecd3b4;color:var(--copper-deep);border-radius:999px;padding:5px 12px;font:600 .78rem var(--body);cursor:pointer;margin-left:10px}
.chip:hover{background:#f7ead8}
.results-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;color:var(--muted);font-size:.9rem}
.empty{padding:48px;text-align:center;border:1px dashed var(--line);border-radius:6px;color:var(--muted)}

/* split / features */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(217,160,102,.35)}
.pillars > div{padding:28px 24px 8px 0;display:grid;gap:10px;align-content:start}
.pillars h3{font-size:1.25rem;color:var(--gold)}
.pillars p{color:#cfc5b8}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc a{display:grid;gap:12px;align-content:start;padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);transition:border-color .2s}
.svc a:hover{border-color:var(--copper)}
.svc .go{font:600 .72rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
.svc p{color:var(--ink-2);font-size:.95rem}
@media (max-width:860px){.svc{grid-template-columns:1fr}}

/* neighborhoods */
.hoods{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.hood-card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:26px;display:grid;gap:12px;align-content:start}
.hood-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hood-card .tier{font:600 .9rem var(--display);color:var(--copper);letter-spacing:.1em;white-space:nowrap}
.hood-card .area{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hood-card p{color:var(--ink-2);font-size:.95rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.85rem;border-top:1px solid var(--line);padding-top:12px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 14px;font:600 .78rem var(--body);cursor:pointer;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.steps li{list-style:none;display:grid;gap:10px;align-content:start;padding-top:18px;border-top:2px solid var(--copper)}
.steps li::before{counter-increment:s;content:"Step " counter(s);font:600 .7rem var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--copper)}
.steps p{color:var(--ink-2);font-size:.94rem}
.steps{padding:0;margin:0}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* forms */
.form{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:clamp(20px,3vw,32px);display:grid;gap:14px;box-shadow:var(--shadow)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.form label{display:grid;gap:6px;font:600 .7rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.form .msg{display:none;padding:14px 16px;border-radius:var(--r);background:#eef4ee;border:1px solid #cfe0d0;color:var(--ok);font-size:.92rem}
.form .msg.show{display:block}
.form .err{color:#a33;font-size:.8rem;text-transform:none;letter-spacing:0;font-weight:500}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media (max-width:860px){.calc{grid-template-columns:1fr}}
.calc .inputs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc .inputs label{display:grid;gap:6px;font:600 .7rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.calc .inputs .full{grid-column:1/-1}
.pay{background:var(--ink);color:#efe7dc;border-radius:6px;padding:28px;display:grid;gap:18px}
.pay .big{font:600 clamp(2.4rem,5vw,3.2rem)/1 var(--display);color:#fff;font-variant-numeric:tabular-nums}
.pay .bar{display:flex;height:14px;border-radius:2px;overflow:hidden;background:#333}
.pay .bar i{display:block;height:100%}
.pay ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pay li{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px}
.pay li span{display:flex;align-items:center;gap:10px}
.pay li span i{width:10px;height:10px;border-radius:2px;display:inline-block}
.pay small{color:#a99e90;font-size:.8rem}
.range{display:flex;gap:8px;align-items:center}
.range input[type=range]{padding:0;accent-color:var(--copper);border:0;background:none}
.range output{min-width:56px;text-align:right;font:600 .9rem var(--body);font-variant-numeric:tabular-nums;color:var(--ink)}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.92rem}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .68rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:var(--stone)}
tr:last-child td{border-bottom:0}
td b{font-weight:600}

/* about */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.values div{padding:28px;border:1px solid var(--line);border-radius:6px;background:var(--paper);display:grid;gap:10px;align-content:start}
.values h3{color:var(--copper-deep)}
@media (max-width:860px){.values{grid-template-columns:1fr}}
.quote{font:500 italic clamp(1.4rem,2.6vw,2rem)/1.35 var(--accent);color:var(--ink);max-width:36ch}

/* modal */
dialog{border:0;padding:0;border-radius:8px;max-width:min(920px,calc(100vw - 32px));width:100%;box-shadow:0 30px 80px rgba(0,0,0,.35);background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgba(21,18,15,.6)}
.modal{display:grid;grid-template-columns:1.1fr .9fr}
.modal .ph svg{width:100%;height:100%;display:block;min-height:260px}
.modal .info{padding:28px;display:grid;gap:14px;align-content:start;max-height:80vh;overflow:auto}
.modal .x{position:absolute;top:10px;right:10px;background:var(--paper);border:1px solid var(--line);border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:1.2rem;line-height:1;color:var(--ink)}
@media (max-width:760px){.modal{grid-template-columns:1fr}.modal .ph svg{min-height:200px}}

/* footer */
footer{background:var(--stone);border-top:1px solid var(--line);padding-block:56px 28px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
/* The logo sat flush left in a column half again its width, so it read as
   pushed into the corner rather than placed. Centred as a block with its
   tagline, which also lands it properly on a phone where the footer is one
   column. */
footer .cols img{width:220px;height:auto;margin-inline:auto}
footer .cols>div:first-child{text-align:center}
footer h4{font:600 .72rem var(--body);letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px;color:var(--copper-deep)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.92rem}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--copper)}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--stone-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.legal a{color:var(--ink-2);text-decoration:underline}
@media (max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}
.copy-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy-btn{background:none;border:1px solid var(--line);border-radius:var(--r);padding:4px 8px;font:600 .66rem var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--muted)}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.muted{color:var(--muted)}
.stack-lg{display:grid;gap:20px}

/* listing page */
a.card{text-decoration:none}
.price .per{font:500 .82rem/1 var(--body);color:var(--muted);letter-spacing:.02em}
.listing-media{min-width:0;align-self:start}
.listing-media + .stack-lg{align-self:start}
.listing-ph{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--stone);aspect-ratio:16/10}
.listing-ph svg{width:100%;height:100%;display:block}
.listing-price{font:600 clamp(1.8rem,3.4vw,2.6rem)/1 var(--display);color:var(--ink)}
.page-hero .kv,.page-hero .muted{margin:0}
@media (max-width:860px){.listing-ph{aspect-ratio:16/11}}
/* aspect-ratio gives way to a taller child, so the photo is pinned to the box
   instead of setting its height - otherwise every card in a row is a different
   height */
.card .ph{overflow:hidden}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.listing-ph{position:relative}
.listing-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:96px;gap:8px;overflow-x:auto;padding:8px 0;scrollbar-width:thin}
.shots:empty{display:none}
.shot{padding:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--stone);cursor:pointer;aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.on{border-color:var(--copper);box-shadow:0 0 0 2px var(--gold-soft)}

/* header mega menu */
nav.main .has-mega{display:flex;align-items:center}
nav.main .has-mega > a{padding-right:2px}
nav.main .mega-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink);padding:12px 6px 12px 2px;line-height:0}
nav.main .mega-toggle svg{width:11px;height:7px;transition:transform .18s}
nav.main .has-mega.open .mega-toggle svg{transform:rotate(180deg)}
nav.main .has-mega.open > a{color:var(--copper)}
/* the panel spans the header, not the menu item */
nav.main .mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:45}
nav.main .mega[hidden]{display:none}
nav.main .mega-in{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-block:28px;align-items:start}
nav.main .mega-col h4{font:600 .68rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin:0 0 12px}
nav.main .mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
nav.main .mega-col a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;text-decoration:none;color:var(--ink);font:500 .88rem/1.4 var(--body);padding:6px 8px;border-radius:var(--r);text-transform:none;letter-spacing:0}
nav.main .mega-col a:hover{background:var(--stone);color:var(--copper-deep)}
nav.main .mega-col a span{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
nav.main .mega-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-block:16px;color:var(--muted);font-size:.86rem}
@media (max-width:1240px){
  /* stacked menu: the panel opens in place under its own item */
  nav.main .has-mega{display:block;border-bottom:1px solid var(--line)}
  nav.main .has-mega > a{display:inline-block;width:calc(100% - 44px);border-bottom:0}
  nav.main .mega-toggle{float:right;padding:14px 8px}
  nav.main .mega{position:static;border:0;box-shadow:none;background:transparent}
  nav.main .mega-in{grid-template-columns:1fr 1fr;gap:16px;padding-block:8px 14px}
  nav.main .mega-foot{display:none}
  nav.main .mega-col a{padding:7px 6px}
}
@media (max-width:760px){
  /* a stacked panel of 33 links buries the rest of the menu; the full
     list is still in the markup and still shows on a wide screen */
  nav.main .mega-col li:nth-child(n+7){display:none}
}
@media (max-width:520px){nav.main .mega-in{grid-template-columns:1fr}}

/* place pages */
.facts-row{display:flex;flex-wrap:wrap;gap:28px;margin:6px 0 0;padding:0}
.facts-row div{display:grid;gap:4px}
.facts-row dt{font:600 .66rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.facts-row dd{margin:0;font:600 1.05rem/1 var(--display);color:var(--ink)}
.place-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.place-links .mega-col h4{font:600 .68rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin:0 0 12px}
.place-links .mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.place-links .mega-col a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;text-decoration:none;color:var(--ink);font:500 .88rem/1.4 var(--body);padding:6px 8px;border-radius:var(--r)}
.place-links .mega-col a:hover{background:var(--paper);color:var(--copper-deep)}
.place-links .mega-col a span{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.cta-band .stack{display:grid;gap:8px}

/* property management */
.pm-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tbc{background:var(--gold-soft);border:1px dashed #d8b88c;color:var(--warn);border-radius:var(--r);padding:2px 8px;font:600 .82rem var(--body);white-space:nowrap}
.qa-list{display:grid;gap:10px;max-width:860px}
.qa{border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.qa summary{cursor:pointer;padding:16px 20px;font:600 1rem/1.4 var(--body);color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--copper);font:400 1.4rem/1 var(--body)}
.qa[open] summary::after{content:"3"}
.qa[open] summary{border-bottom:1px solid var(--line)}
.qa div{padding:16px 20px}
.qa div p{margin:0;color:var(--muted)}
.fees{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:0}
.fee{border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:24px;display:grid;gap:10px}
.fee dt{font:600 .7rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fee dd{margin:0;font:600 1.3rem/1.2 var(--display);color:var(--ink)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:11px;height:6px;border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg)}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* map + listings, side by side and edge to edge */
.search-bar{position:sticky;top:var(--hdr,76px);z-index:30;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 20px}
.search-bar .filters{margin:0;border:0;padding:0;background:none;border-radius:0;max-width:none}
.search-split{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);height:calc(100vh - var(--chrome,152px));border-top:1px solid var(--line)}
.map-pane{position:relative;height:100%;background:var(--stone)}
#map{height:100%;width:100%;z-index:0}
.map-toggle{position:absolute;top:12px;right:12px;z-index:1;display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;font:600 .74rem var(--body);color:var(--ink);box-shadow:var(--shadow);cursor:pointer}
.map-toggle input{width:auto;margin:0;accent-color:var(--copper)}
.list-pane{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:20px 22px 40px;border-left:1px solid var(--line)}
.list-head{display:grid;gap:8px;margin-bottom:16px}
.list-head h1{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:0}
.list-head .muted{margin:0;font-size:.92rem}
.list-pane .grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.list-head .facts-row{gap:22px;margin-top:6px}
.list-prose{margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
.list-prose .sec-head{margin-bottom:22px}
.list-prose .steps{gap:18px}
.rr-pin{display:inline-flex;align-items:center;justify-content:center;background:var(--gold);color:var(--ink);border:1px solid rgba(21,18,15,.18);font:600 11px/1 var(--body);padding:5px 9px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.35);white-space:nowrap;transform:translate(-50%,-50%)}
.rr-pin:hover{background:var(--ink);color:var(--gold)}
.card.picked{outline:2px solid var(--copper);outline-offset:2px;box-shadow:var(--shadow)}
.card.hot{border-color:var(--copper);box-shadow:var(--shadow)}
.rr-pin.hot{background:var(--ink);color:var(--gold);transform:translate(-50%,-50%) scale(1.18)}
.rr-cluster{display:flex;align-items:center;justify-content:center;background:var(--gold);color:var(--ink);border:2px solid var(--paper);border-radius:999px;font:700 12px var(--body);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.leaflet-container{font:inherit;background:var(--stone)}
/* Esri's canvas is neutral grey; warm it to the site's paper and stone rather
   than swapping to a tile provider that wants a key */
.leaflet-tile-pane{filter:sepia(.42) saturate(.72) brightness(1.03) contrast(.95) hue-rotate(-6deg)}
/* a map on a place or listing page sits above the content */
.map-full{height:100%;width:100%;z-index:0}
.map-band{height:380px;width:100%;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--stone);z-index:0}
@media (max-width:1000px){
  .search-split{grid-template-columns:1fr;height:auto}
  .map-pane{height:360px}
  .map-full{height:360px}
  .list-pane{height:auto;overflow:visible;border-left:0;border-top:1px solid var(--line)}
  .search-bar{position:static}
}

}


/* Sign in.
   The one header control that has to survive the mobile breakpoint: Home Value
   is marketing and can fold away, but this is the front door for anyone who
   already has an account, and a front door you cannot see is not a door. */
.hdr-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* Below the nav breakpoint the header is brand + hamburger and nothing else
   fits: the logo alone is 54px tall and a third control pushes the row past
   the viewport. Both buttons fold away and Sign in reappears inside the menu,
   where there is room for it and where someone looking for it will look. */
.nav-signin{display:none}
@media (max-width:1240px){
  .hdr-actions{display:none}
  .nav-signin{display:block;color:var(--copper-deep)}
}

/* Hero listing.
   The home the team is selling, in the space the logo used to hold. Sized to
   roughly the logo's old footprint so the hero keeps its balance, with the
   price and address laid over the foot of the photograph rather than under it
   - a caption below would push the search form off a short screen. */
.hero-home-wrap{position:relative;justify-self:center;width:100%;max-width:520px}
.hero-home{display:block;position:relative;border-radius:calc(var(--r) * 2);overflow:hidden;
  text-decoration:none;color:#fff;background:var(--stone);
  box-shadow:0 18px 40px rgba(21,18,15,.18);transition:transform .25s,box-shadow .25s}
.hero-home:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(21,18,15,.24)}
.hero-home-shot{display:block;aspect-ratio:4/3;background:var(--stone)}
.hero-home-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* The gradient is what makes white text legible over a photograph that could
   be a bright sky or a dark brick wall - without it this is a coin toss. */
.hero-home-body{position:absolute;left:0;right:0;bottom:0;display:grid;gap:2px;
  padding:52px 20px 18px;
  background:linear-gradient(180deg,transparent,rgba(21,18,15,.82) 62%)}
.hero-tag{justify-self:start;margin-bottom:6px;background:var(--gold,#b9763a);color:#fff;
  font:600 .62rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  padding:6px 10px;border-radius:var(--r)}
.hero-price{font:700 1.6rem/1 var(--display);letter-spacing:.01em}
.hero-addr{font:600 .95rem/1.3 var(--body)}
.hero-meta{font:500 .8rem/1.3 var(--body);color:rgba(255,255,255,.82)}
.hero-dots{display:flex;gap:7px;justify-content:center;margin-top:12px}
.hero-dot{width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--copper,#b9763a);background:transparent;transition:background .2s}
.hero-dot.on{background:var(--copper,#b9763a)}
.hero-dot[hidden]{display:none}
@media (max-width:860px){
  .hero-home-wrap{order:-1;max-width:420px}
  .hero-price{font-size:1.4rem}
}

/* Narrow phones (320-359px).
   The brand mark plus the wordmark is 221px, Menu is 68px, and the gutters and
   gap take another 52 - 341px of a 320px screen. Menu ended up flush against
   the right edge with no gutter at all. The savings come out of the mark and
   the gaps rather than the wordmark, because the name is the part somebody
   actually has to read; 40px still clears the 24px the logo needs to be
   recognisable, and this buys back 30px. */
@media (max-width:359px){
  header.site .wrap{gap:12px}
  .brand{gap:8px}
  .brand img{height:40px}
}

/* reviews on a listing */
.revu .revu-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.revu .revu-avg{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.92rem}
.revu .stars{color:var(--copper);letter-spacing:1px}
.revu .stars .dim{opacity:.25}
.revu .revu-list{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.revu .revu-item{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.revu .revu-by{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.revu .revu-when{color:var(--muted);font-size:.82rem}
.revu .revu-item p{margin:0;line-height:1.55}
.revu .revu-meta{margin-top:8px;color:var(--muted);font-size:.84rem}
.revu .revu-reply{margin-top:12px;padding-left:12px;border-left:3px solid var(--copper)}
.revu .revu-reply b{display:block;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-deep);margin-bottom:4px}
.revu .revu-reply p{font-size:.92rem;color:var(--muted)}

/* agents */
.agent-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.agent-card{display:block;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:box-shadow .15s}
.agent-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.agent-card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.agent-nophoto{width:100%;aspect-ratio:4/5;background:var(--stone)}
.agent-card-b{padding:14px 16px;display:grid;gap:3px}
.agent-card-b b{font-size:1.02rem}
.agent-card-b span{color:var(--muted);font-size:.88rem}
.agent-rating{color:var(--muted);font-size:.88rem}
.agent-rating .stars{color:var(--copper);letter-spacing:1px}
.agent-rating .stars .dim{opacity:.25}
.agent-top{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.agent-photo{width:200px;aspect-ratio:4/5;object-fit:cover;border-radius:10px;flex:0 0 auto}
.agent-contact{margin-top:10px}
.agent-contact a{color:var(--copper-deep)}
.agent-social a{margin-right:12px;color:var(--copper-deep);font-size:.9rem}
.chips{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px}
.chips li{background:var(--stone);border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:.84rem}
@media (max-width:560px){.agent-photo{width:140px}}
.agent-record .stat dd{font-size:1.7rem}
.agent-homes{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.agent-home{display:block;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
a.agent-home:hover{box-shadow:0 5px 16px rgba(0,0,0,.07)}
.agent-home-b{display:grid;gap:3px}
.agent-home-b b{font-size:1.1rem}
.agent-home-b span{font-size:.9rem}
.tag-sold{justify-self:start;background:var(--copper);color:#fff;border-radius:999px;padding:1px 9px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.agent-cta{background:var(--ink);color:#fff;padding-block:40px}
.agent-cta h2{color:#fff;margin:0 0 6px}
.agent-cta p{color:rgba(255,255,255,.72);margin:0 0 18px}
.agent-cta-row{display:flex;gap:12px;flex-wrap:wrap}
.agent-cta .btn-line{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.agent-cta .btn-line:hover{background:rgba(255,255,255,.1)}
.agent-cta-call{margin:16px 0 0;font-size:.92rem}
.agent-cta-call a{color:var(--copper);font-weight:600}

/* Home page rows: four across, one row each; two on a tablet, one on a phone */
.grid.home-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1000px){.grid.home-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid.home-row{grid-template-columns:1fr}}
.linkish{background:none;border:0;padding:0 0 0 10px;font:inherit;color:var(--copper);text-decoration:underline;cursor:pointer}
.linkish[hidden]{display:none}