:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

:root{
  --ground:#F6F3EE; --surface:#FFFFFF; --soft:#EFEAE1; --deep:#1B1A18;
  --line:#DDD5C6; --line-soft:#E8E1D4;
  --ink:#1B1A18; --ink-2:#38342C; --ink-3:#575147;
  --accent:#1B1A18; --accent-2:#8C867A; --wash:#EFEAE1; --bad:#A6442F; --bad-wash:#FBF1EE;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06);
  --c1:#1B1A18; --c2:#3B3830; --c3:#6B6459; --c4:#9A9386; --c5:#C6BEB0;
  --wash-a:rgba(27,26,24,.055); --wash-b:rgba(27,26,24,.040); --grain:.042;
  --gold:#9E7E55; --gold-text:#7C6244; --navy:#2A2825;
  --menu-ink:#1B1A18; --menu-line:#EFEAE1;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ground:#141311; --surface:#171717; --soft:#1E1E1E; --deep:#0A0A0A;
  --line:#2A2A2A; --line-soft:#2A2825;
  --ink:#EFEAE1; --ink-2:#B4B4B0; --ink-3:#8C867A;
  --accent:#EFEAE1; --accent-2:#8C867A; --wash:#2A2825;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.4);
  --c1:#EFEAE1; --c2:#C8C8C3; --c3:#9E9E96; --c4:#76766F; --c5:#52524D;
  --wash-a:rgba(255,255,255,.055); --wash-b:rgba(255,255,255,.030); --grain:.030;
  --gold:#C9AB7C; --gold-text:#C9AB7C; --navy:#EFEAE1;
  --menu-ink:#EFEAE1; --menu-line:#2A2825;
}}
:root[data-theme="dark"]{
  --ground:#141311; --surface:#171717; --soft:#1E1E1E; --deep:#0A0A0A;
  --line:#2A2A2A; --line-soft:#2A2825;
  --ink:#EFEAE1; --ink-2:#B4B4B0; --ink-3:#8C867A;
  --accent:#EFEAE1; --accent-2:#8C867A; --wash:#2A2825;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.4);
  --c1:#EFEAE1; --c2:#C8C8C3; --c3:#9E9E96; --c4:#76766F; --c5:#52524D;
  --wash-a:rgba(255,255,255,.055); --wash-b:rgba(255,255,255,.030); --grain:.030;
  --gold:#C9AB7C; --gold-text:#C9AB7C; --navy:#EFEAE1;
  --menu-ink:#EFEAE1; --menu-line:#2A2825;
 --bad:#E08B77; --bad-wash:#2E1F1B;}
*{ box-sizing:border-box; }
html{ background:var(--ground); color-scheme:light; }
body{ margin:0; background:transparent; color:var(--ink); position:relative;
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }

/* Background: a soft light wash plus a fine paper grain, both fixed so the page
   scrolls over them rather than dragging them along. Purely decorative. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(115% 62% at 50% -8%,  var(--wash-a), transparent 62%),
    radial-gradient(85% 55% at 102% 104%, var(--wash-b), transparent 58%),
    radial-gradient(70% 45% at -6% 88%,   var(--wash-b), transparent 60%),
    var(--ground);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width:700px){ body::after{ opacity:calc(var(--grain) * .6); } }
.wrap{ max-width:1060px; margin:0 auto; padding:0 24px; }
h1,h2,h3,.serif{ font-family:"Newsreader",Georgia,serif; font-weight:400; }
a{ color:var(--accent); }
.eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text); font-weight:700; }
.eyebrow.lg{ font-size:13.5px; letter-spacing:.3em; color:var(--ink-2); }

/* header */
header{ background:var(--surface); border-bottom:1px solid var(--line);
  position:fixed; top:0; left:0; right:0; z-index:30;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease; }
body{ padding-top:var(--hh, 84px); }
body.hero-top{ padding-top:0; }
/* The pre-stylesheet block in the <head> carries
     body.hero-top header{ background:transparent; position:absolute }
   so the first paint shows no white bar over the hero photo. That selector
   outranks the bare `header` rule above, so it was never handed back: on every
   page with a hero — nearly all of them — the header stayed absolute and
   scrolled away, and stayed transparent even once the page moved. Two lines
   take it back. The first matches that specificity and comes later. The second
   goes one higher so it only bites once the .clear state is gone, which leaves
   the transparent-over-photo look at the top of the page intact. */
body.hero-top header{ position:fixed; }
body.hero-top header:not(.clear){ background:var(--surface);
  border-bottom-color:var(--line); }
/* and the same for the link colour: the head block paints every header link
   white for the over-photo state, which left them white on white once the bar
   turned solid. Handed back at the same one-step-higher specificity, so each
   link falls through to whatever nav a, nav a.on and nav a.cta already say. */
body.hero-top header:not(.clear) nav a{ color:var(--ink); }
body.hero-top header:not(.clear) nav a:hover{ color:var(--accent); }
body.hero-top header:not(.clear) nav a.on{ color:var(--accent); }
body.hero-top header:not(.clear) nav a.cta{ color:var(--accent); }
body.hero-top header:not(.clear) nav a.cta:hover{ color:#fff; }

/* over the hero photo, before the page is scrolled */
header.clear{ --gold:#D8C199; --gold-text:#FFFFFF; --navy:#FFFFFF; --ink:#FFFFFF; --accent:#FFFFFF;
  background:transparent; border-bottom-color:transparent; }
header.clear nav a{ color:#fff; }
header.clear nav a.cta{ border-color:rgba(255,255,255,.85); color:#fff; }
header.clear nav a.cta:hover{ background:#fff; color:#1B1A18; }
header.clear nav a.on{ border-bottom-color:#fff; }
/* the drawer makes the bar opaque, so the over-photo white lockup has to go back to ink */
header.menu-open{ transition:none; }
header.clear.menu-open{ --gold:#9E7E55; --gold-text:#7C6244; --navy:#1B2A3A; --ink:#1B1A18; --accent:#A9895F;
  background:var(--surface); border-bottom-color:var(--line); }
header.clear.menu-open nav a{ color:var(--menu-ink); }
header.clear.menu-open nav a.cta{ border-color:var(--accent); color:var(--accent); }
header.clear.menu-open .burger{ border-color:var(--line); }
header.clear.menu-open .burger span{ background:#1B1A18; }
body.hero-top .heroin{ padding-top:calc(var(--hh, 84px) + 60px); }
body.hero-top .pagehero{ padding-top:var(--hh, 84px); }
body.hero-top .ctfull{ padding-top:calc(var(--hh, 84px) + 54px); }
body.hero-top .ctfull.asection{ padding-top:60px; }
.ctfull.asection{ margin-top:0; }
.hbar{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; }
.logo{ text-decoration:none; color:inherit; display:flex; align-items:center; gap:11px; }
.logo .mark{ width:42px; height:42px; flex:0 0 42px; display:block; }
.logo .lt{ display:block; }
.logo .nm{ display:block; font-size:9.5px; letter-spacing:.24em; font-weight:700; color:var(--navy); white-space:nowrap; }
.logo .br{ display:block; font-size:8.5px; letter-spacing:.12em; color:var(--gold-text); margin-top:3px; white-space:nowrap; }
@media (max-width:520px){ .logo .mark{ width:34px; height:34px; flex:0 0 34px; } .logo .nm{ font-size:9.5px; } }

/* the diamond divider from the printed brand */
.rhomb{ display:block; width:7px; height:7px; margin:0 auto; background:var(--gold);
  transform:rotate(45deg); }
nav{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:flex-end; }
.burger{ display:none; background:none; border:1px solid var(--line); cursor:pointer;
  width:42px; height:38px; border-radius:2px; padding:0; position:relative; }
.burger span{ display:block; position:absolute; left:11px; right:11px; height:1.5px;
  background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
.burger span:nth-child(1){ top:13px; } .burger span:nth-child(2){ top:18.5px; } .burger span:nth-child(3){ top:24px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
header.clear .burger{ border-color:rgba(255,255,255,.6); }
header.clear .burger span{ background:#fff; }

@media (max-width:1040px){
  .burger{ display:block; }
  nav{ display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--surface); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:6px 24px 16px;
    box-shadow:0 18px 40px rgba(0,0,0,.10); }
  nav.open{ display:flex; }
  nav a{ color:var(--menu-ink) !important; padding:13px 0;
    border-bottom:1px solid var(--menu-line) !important; font-size:11px; }
  nav a.cta{ margin-top:12px; text-align:center; color:var(--menu-ink) !important;
    border:1.2px solid var(--menu-ink) !important; border-radius:2px; padding:12px 13px; }
}
nav a{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; font-weight:600; padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap; }
nav a:hover{ color:var(--accent); }
nav a.on{ border-bottom-color:var(--accent); color:var(--accent); }
nav a.cta{ border:1.2px solid var(--accent); color:var(--accent); padding:8px 13px; border-radius:2px; letter-spacing:.12em; }
/* Client Login keeps its own row under the menu, right aligned. The nav used to
   wrap onto two lines on its own because the labels were long enough; swapping
   Mortgage Calculator for Insights made it fit on one, which moved the button up
   beside Contact. This forces the break back rather than relying on the label
   lengths staying put. */
@media (min-width:1041px){
  nav::before{ content:""; flex-basis:100%; height:0; order:1; }
  nav a.cta{ order:2; }
}
nav a.cta:hover{ background:var(--accent); color:#fff; }

/* buttons */
/* One rule across the site: a gold box is something you click.
   Same treatment as the phone-number block on the contact panel.
   Form submits are solid instead, so the action that actually sends
   Carmen a lead stays the heaviest thing on its page. */
.btn{ display:inline-block; background:rgba(169,137,95,.13); color:var(--ink);
  text-decoration:none; border:1px solid var(--gold); cursor:pointer;
  padding:12px 25px; border-radius:2px; font-family:inherit; font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  transition:background .18s, color .18s, border-color .18s; }
.btn:hover{ background:#7C6244; border-color:#7C6244; color:#fff; filter:none; }
button.btn[type="submit"]{ background:#7C6244; border-color:#7C6244; color:#fff; }
button.btn[type="submit"]:hover{ background:var(--deep); border-color:var(--deep); color:#fff; }
.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--ink-2); }
.btn.ghost:hover{ background:var(--deep); border-color:var(--deep); color:#fff; filter:none; }
/* dark theme: the gold box keeps its line, the label goes light */
:root[data-theme="dark"] .btn, :root:not([data-theme="light"]) .btn{
  background:rgba(201,162,99,.10); border-color:#C9AB7C; color:#EFEAE1; }
:root[data-theme="dark"] .btn:hover, :root:not([data-theme="light"]) .btn:hover{
  background:#C9AB7C; border-color:#C9AB7C; color:#1B1A18; }
:root[data-theme="dark"] button.btn[type="submit"],
:root:not([data-theme="light"]) button.btn[type="submit"]{
  background:#C9AB7C; border-color:#C9AB7C; color:#1B1A18; }
:root[data-theme="dark"] button.btn[type="submit"]:hover,
:root:not([data-theme="light"]) button.btn[type="submit"]:hover{
  background:#EFEAE1; border-color:#EFEAE1; color:#1B1A18; }
:root[data-theme="dark"] .btn.ghost, :root:not([data-theme="light"]) .btn.ghost{
  background:transparent; border-color:rgba(255,255,255,.34); color:#EFEAE1; }
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .btn{
    background:rgba(150,114,58,.08); border-color:var(--gold-text); color:var(--deep); }
  :root:not([data-theme="dark"]) button.btn[type="submit"]{
    background:#7C6244; border-color:#7C6244; color:#fff; }
  :root:not([data-theme="dark"]) .btn.ghost{
    background:transparent; border-color:var(--line); color:var(--ink-2); }
}
/* the dark panels paint their own buttons; those rules must outrank the
   theme rules above, which carry a :root prefix and so win on specificity */
:root[data-theme="dark"] .darkpanel .btn,
:root:not([data-theme="light"]) .darkpanel .btn,
:root[data-theme="dark"] .darkpanel button.btn[type="submit"],
:root:not([data-theme="light"]) .darkpanel button.btn[type="submit"]{
  background:#C9AB7C; border-color:#C9AB7C; color:#1B1A18; }
:root[data-theme="dark"] .darkpanel .btn.ghost,
:root:not([data-theme="light"]) .darkpanel .btn.ghost{
  background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .darkpanel .btn,
  :root:not([data-theme="dark"]) .darkpanel button.btn[type="submit"]{
    background:#C9AB7C; border-color:#C9AB7C; color:#1B1A18; }
  :root:not([data-theme="dark"]) .darkpanel .btn.ghost{
    background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
}
.btn.light{ background:#fff; color:var(--deep); }
.btn.outline-light{ background:transparent; border:1.2px solid rgba(255,255,255,.85); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* hero */
.hero{ position:relative; min-height:600px; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; }
.hero .shot{ position:absolute; inset:0; overflow:hidden; background:#2A2825; }
/* Wrapper kept for the pointer look-around, which is switched off for now. */
.hero .look{ position:absolute; inset:0; }
.hero .lay{ position:absolute; inset:0; will-change:transform; transform-origin:52% 62%; }
.hero .slides{ position:absolute; inset:0; }
.hero .heroVideo{ position:absolute; inset:0; width:100%; height:100%;
                  max-width:100%; object-fit:cover; display:block; }
/* Each hero photo is its own layer; only the active one is opaque, so adding
   a picture to the heroPhotos block is all it takes to put it in rotation. */
.hero .hslide{ opacity:0; transition:opacity 1.6s ease; }
.hero .hslide.on{ opacity:1; }
.hero .lay svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Hero drift switched off for now. Re-enable with: animation:flyA 30s ease-in-out infinite alternate; */
.hero .l-sky{ transform:scale(1.04); }
.hero .l-mid{ animation:flyB 30s ease-in-out infinite alternate; }
.hero .l-fg { animation:flyC 30s ease-in-out infinite alternate; }
@keyframes flyA{ from{ transform:scale(1.02) } to{ transform:scale(1.11) } }
@keyframes flyB{ from{ transform:scale(1.05) translateY(0) } to{ transform:scale(1.24) translateY(12px) } }
@keyframes flyC{ from{ transform:scale(1.08) translateY(0) } to{ transform:scale(1.46) translateY(40px) } }
@media (prefers-reduced-motion:reduce){ .hero .lay{ animation:none !important; transform:scale(1.06); } }
.hero .scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.40) 42%,rgba(0,0,0,.58)); }
.hero .phlabel{ position:absolute; left:24px; bottom:14px; font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:700; z-index:3; }
.heroin{ position:relative; z-index:2; color:#fff; padding:96px 24px 92px; width:100%; }
.heroin .kick{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.82); font-weight:600; }
.heroin h1{ font-family:"Newsreader",Georgia,serif; font-weight:300; text-transform:uppercase;
  letter-spacing:.065em; font-size:clamp(23px,2.9vw,34px); line-height:1.26; margin:20px 0 0; text-wrap:balance; }
.heroin .say{ font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:16px;
  color:rgba(255,255,255,.88); margin:18px auto 30px; max-width:44ch; }

/* valuation tool */
.valtool{ background:rgba(255,255,255,.96); max-width:620px; margin:0 auto; padding:26px 26px 24px;
  text-align:left; box-shadow:0 18px 50px rgba(0,0,0,.25); }
.valtool{ position:relative; }
.valtool .step{ display:none; } .valtool .step.on{ display:block; }
.vclose{ position:absolute; top:10px; right:10px; width:34px; height:34px; line-height:1;
  display:flex; align-items:center; justify-content:center; background:transparent; border:none;
  cursor:pointer; color:#8C867A; font-size:24px; font-family:inherit; padding:0; border-radius:50%; }
.vclose:hover{ background:#F1F1EE; color:#1B1A18; }
.vclose:focus-visible{ outline:2px solid #1B1A18; outline-offset:2px; }
.vback{ background:none; border:none; padding:0; margin:14px 0 0; cursor:pointer;
  font-family:inherit; font-size:12.5px; color:#5A5A57; text-decoration:underline;
  text-underline-offset:3px; }
.vback:hover{ color:#1B1A18; }
.valtool .lab{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#5F5F59; font-weight:700; margin-bottom:8px; }
.valrow{ display:flex; gap:10px; }
@media (max-width:560px){ .valrow{ flex-direction:column; } }
.valtool input, .valtool select{ background:#F6F3EE; border:1px solid #DDD5C6; color:#1B1A18;
  padding:14px 14px; font-size:15px; width:100%; border-radius:0; }
.valtool input:focus, .valtool select:focus{ outline:none; border-color:#1B1A18; box-shadow:none; }
.valtool .go{ background:#1B1A18; color:#fff; border:none; cursor:pointer; padding:14px 26px;
  font-family:inherit; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.valtool .go:hover{ background:#333; }
.valtool .fine{ font-size:12.5px; color:#6E6E6A; margin:13px 0 0; line-height:1.55; }
.valtool .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
@media (max-width:560px){ .valtool .grid2{ grid-template-columns:1fr; } }
.valtool h2, .valtool h3{ font-size:21px; margin:0 0 4px; color:#1B1A18; }
.valtool p.int{ font-size:13.5px; color:#5A5A57; margin:0 0 16px; }
.herolinks{ margin-top:26px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap; }
.herolinks a{ color:#fff; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:3px; }
.herolinks a:hover{ border-bottom-color:#fff; }

/* sections */
section.pad{ padding:56px 0; }
section.pad.alt{ background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
section.pad:not(.alt){ background:transparent; }
h1.sec, h2.sec{ font-size:clamp(22px,3.2vw,30px); margin:10px 0 6px; text-wrap:balance; }
.sub{ color:var(--ink-2); max-width:62ch; margin:0 0 26px; }
.sub.lead{ font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(17px,2vw,20px); line-height:1.6; color:var(--ink); max-width:64ch; }
.sub.lead b{ font-style:normal; font-weight:600; color:var(--accent); }

.two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px){ .two{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--accent);
  padding:26px 26px 28px; }
section.alt .card{ background:var(--ground); }
.card h3{ font-size:22px; margin:9px 0 13px; }
.card{ display:flex; flex-direction:column; }
.card ul{ list-style:none; margin:0 0 16px; padding:0; }
.card li{ font-size:13.6px; line-height:1.6; color:var(--ink-2); padding-left:16px; position:relative; margin-bottom:9px; }
.card li:before{ content:""; position:absolute; left:0; top:9px; width:7px; height:1.5px; background:var(--accent-2); }
.card .btn{ margin-top:auto; align-self:flex-start; }
/* a quiet pointer to the article that answers the thing they just read */
.readmore{ font-size:13px; line-height:1.6; margin:0 0 16px; color:var(--ink-2); }
.readmore a{ color:var(--gold-text); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; }
.readmore a:hover{ color:var(--ink); }

/* process steps */
.proc{ margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.pstep{ display:flex; gap:22px; align-items:flex-start; padding:22px 26px; border-radius:10px;
  background:var(--surface-2,rgba(150,114,58,.05)); border:1px solid rgba(150,114,58,.14); transition:box-shadow .15s,transform .15s; }
.pstep:hover{ box-shadow:0 6px 22px rgba(20,20,20,.06); transform:translateY(-1px); }
:root[data-theme="dark"] .pstep, :root:not([data-theme="light"]) .pstep{ background:rgba(201,162,99,.06); border-color:rgba(201,162,99,.18); }
.pstep .n{ font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:19px; color:#fff;
  background:var(--gold-text); flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; line-height:1; }
.pstep .tx{ max-width:64ch; padding-top:2px; }
.pstep .tx b{ display:block; font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:20px; color:var(--ink); margin-bottom:5px; }
.pstep .tx span{ font-size:13.8px; color:var(--ink-2); line-height:1.65; }

.guideAcc{ border-top:1px solid var(--line); margin-top:8px; }
.guideAcc details{ border-bottom:1px solid var(--line); }
.guideAcc summary{ list-style:none; cursor:pointer; padding:19px 4px; display:flex; align-items:center; gap:16px;
  font-family:"Newsreader",Georgia,serif; font-size:18px; color:var(--ink); }
.guideAcc summary::-webkit-details-marker{ display:none; }
.guideAcc .accIcon{ flex:0 0 20px; width:20px; height:20px; border:1px solid var(--gold); border-radius:4px;
  position:relative; color:var(--gold-text); }
.guideAcc .accIcon::before,.guideAcc .accIcon::after{ content:""; position:absolute; background:var(--gold); }
.guideAcc .accIcon::before{ left:4px; right:4px; top:9px; height:1.4px; }
.guideAcc .accIcon::after{ top:4px; bottom:4px; left:9px; width:1.4px; transition:opacity .15s; }
.guideAcc details[open] .accIcon::after{ opacity:0; }
.guideAcc .accBody{ padding:0 4px 26px 40px; max-width:66ch; }
.guideAcc .accBody p{ font-size:14.5px; line-height:1.75; color:var(--ink-2); margin:0 0 14px; }
.guideAcc .accBody ul{ margin:0 0 14px; padding-left:18px; }
.guideAcc .accBody li{ font-size:14.5px; line-height:1.7; color:var(--ink-2); margin-bottom:8px; }
.guideAcc .accBody .soon{ font-size:13.5px; color:var(--ink-3); font-style:italic; }

/* proof */
.proof{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:22px; }
.proof div{ background:var(--surface); padding:18px 20px 20px; }
section.alt .proof div{ background:var(--ground); }
.proof .a{ font-family:"Newsreader",Georgia,serif; font-size:16.5px; }
.proof .c{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; margin-top:3px; }
.proof .p{ font-family:"Newsreader",Georgia,serif; font-size:21px; margin-top:9px;
  font-variant-numeric:tabular-nums; }

/* listings */
.grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:20px; }
.prop{ background:var(--surface); border:1px solid var(--line); }
section.alt .prop{ background:var(--ground); }
.prop .img{ height:140px; background:linear-gradient(160deg,#DCE5EA,#C9D6DE); display:flex; align-items:flex-end; padding:9px 11px; }
:root[data-theme="dark"] .prop .img, :root:not([data-theme="light"]) .prop .img{ background:linear-gradient(160deg,#25313A,#1D262E); }
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .prop .img{ background:linear-gradient(160deg,#DCE5EA,#C9D6DE); } }
.prop .img span{ font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.prop .body{ padding:15px 16px 18px; }
.pill{ display:inline-block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding:4px 9px; border:1px solid var(--accent-2); color:var(--accent); border-radius:2px; }
.pill.sold{ background:transparent; color:var(--accent); border-color:var(--accent-2); }
.pill.soon{ color:var(--gold-text); border-color:rgba(150,114,58,.55); }
.pill.delayed{ color:var(--gold-text); border-color:rgba(150,114,58,.55); }
.pill.office{ color:var(--ink-2); border-color:var(--line); }
.prop .what{ font-size:11px; line-height:1.45; color:var(--ink-3); margin:7px 0 0; }
.prop .addr{ font-family:"Newsreader",Georgia,serif; font-size:17.5px; margin:10px 0 4px; }
.prop .spec{ font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.prop .price{ font-family:"Newsreader",Georgia,serif; font-size:19px; margin-top:9px; font-variant-numeric:tabular-nums; }
.prop .hook{ font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:13.5px; line-height:1.5;
  color:var(--ink-2); margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); }

/* quote */
.quote{ background:var(--deep); color:#EAF0F3; padding:52px 0; }
.quote blockquote{ margin:0; font-family:"Newsreader",Georgia,serif; font-size:clamp(19px,2.8vw,25px);
  line-height:1.45; max-width:44ch; font-weight:300; }
.quote cite{ display:block; font-family:"Archivo",sans-serif; font-style:normal; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:#9FB4C0; margin-top:20px; }
.quote .eyebrow{ color:#8FB0C2; }

/* testimonial list */
.tcard{ background:var(--surface); border:1px solid var(--line); padding:24px 26px; margin-bottom:18px; }
section.alt .tcard{ background:var(--ground); }
.tcard p{ margin:0; font-family:"Newsreader",Georgia,serif; font-size:16px; line-height:1.6; color:var(--ink-2); }
.tcard .by{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); font-weight:700; margin-top:14px; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px; }
.stat b{ display:block; font-family:"Newsreader",Georgia,serif; font-size:30px; font-weight:400; color:var(--accent); }
.stat span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.cityPills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }
.cityPill{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink-2);
  border:1px solid rgba(150,114,58,.4); border-radius:999px; padding:8px 16px; text-decoration:none; transition:all .15s; }
.cityPill:hover{ color:#fff; background:var(--gold); border-color:var(--gold-text); }

/* idx placeholder */
.idx{ border:1px dashed var(--line); background:var(--soft); padding:44px 24px; text-align:center; }
.idxinner{ max-width:620px; margin:0 auto; }
.idxbar{ display:flex; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:4px; }
.idxbar span, .idxbar em{ flex:1; background:var(--surface); padding:13px 10px; font-size:11.5px;
  color:var(--ink-3); font-style:normal; text-align:left; }
.idxbar span:first-child{ flex:2.2; }
.idxbar em{ flex:0 0 96px; background:var(--deep); color:#fff; text-align:center; font-weight:700;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; }

/* neighborhoods */
.hoods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:24px; }
.hood{ background:var(--surface); padding:0; }
section.alt .hood{ background:var(--ground); }
/* Eleven of the twelve community photos sit between 1.33 and 1.67 to one, and
   the median is 1.49, so this box is cut to fit the library. Widening it to suit
   the one panoramic picture cost every other card a quarter of its height. */
/* The backdrop is the same picture, blown up and blurred, so the bars either
   side of a fitted photo read as depth rather than as empty space. */
/* A faint house behind the Three ways to sell band on the Sellers page. The
   file is already a pale wash, so on the page it reads as texture rather than
   as a picture. It sits in a ::before behind the content, never over it, and
   the wrap is lifted above it so body copy stays perfectly crisp. */
/* The map as a wall behind the Communities band. Two things had to be solved:
   the map carries its own place names, which collided with the headline and the
   intro paragraph, and its interesting half is the valley rather than the ocean.
   The top 46% is faded to the page colour so no map label ever reaches the
   heading, and the image is anchored right and low so the valley sits in the
   part of the band that stays visible between the cards. */
/* The map as a wall on the monthly-updates band. That band is a narrow form on
   the left with the whole right half empty, which is the room the map needed and
   never had behind the community cards. So the fade runs left to right rather
   than top to bottom: solid page colour under the heading and the form, clearing
   to nothing across the empty half where the valley sits. */
/* Office map on Contact. It stays a styled panel until someone asks for it:
   Google's embed pulls about a megabyte of script and sets its own cookies, and
   an interactive map that loads by default also steals the scroll wheel and
   swallows a drag on a phone. Click to load means nobody pays either cost
   unless they actually want the map, and the privacy policy only has to cover
   a thing the visitor chose. The address and the directions link work with no
   map at all, so this is useful before anyone clicks and better after. */
/* Directions link in the listing open-house band. Kept as a quiet arrow link
   rather than a second filled button, so it does not compete with Request a
   showing, which is the action that actually earns her a lead. */
.insend{ margin-top:46px; padding-top:34px; border-top:1px solid var(--line); }
.insend h3.sec{ margin-bottom:6px; }
.lp-dirs{ margin:12px 0 0; }
/* Standalone link, not one sitting inside a sentence, so the inline exception
   does not apply and it needs a real target. 15px was what it measured before. */
.lp-dirs a{ font-size:13px; letter-spacing:.01em; display:inline-block; padding:9px 0; }
@media (max-width:760px){ .lp-dirs a{ padding:13px 0; } }
.ctmap{ margin-top:22px; }
.ctmap h3{ font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:17px;
  margin:0 0 10px; color:inherit; }
.ctmap .frame{ position:relative; aspect-ratio:16/10; border:1px solid var(--line);
  border-radius:2px; overflow:hidden; background:var(--soft); }
.ctmap .frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.ctmap .ph{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center; padding:18px; }
.ctmap .ph .addr{ font-size:14px; line-height:1.5; }
.ctmap .load{ font-family:inherit; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; padding:12px 20px; min-height:44px; cursor:pointer;
  background:transparent; border:1px solid var(--gold); color:var(--gold-text); border-radius:2px; }
.ctmap .load:hover{ background:var(--gold); color:#fff; }
.ctmap .note{ font-size:11.5px; color:var(--ink-3); margin:8px 0 0; }
.ctmap .dirs{ display:inline-block; margin-top:10px; font-size:12px; }
/* The Contact page runs dark, so every part of this panel needs its own colour
   there. The small print and the directions link inherit --ink-3 and --gold-text,
   which are tuned for the light pages and are unreadable on this one. */
.ctfull .ctmap .frame{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.2); }
.ctfull .ctmap h3{ color:#fff; }
.ctfull .ctmap .ph .addr{ color:rgba(255,255,255,.92); }
.ctfull .ctmap .note{ color:rgba(255,255,255,.66); }
.ctfull .ctmap .load{ border-color:rgba(216,193,153,.8); color:#E8D7BB; }
.ctfull .ctmap .load:hover{ background:#D8C199; color:#1B1A18; }
.ctfull .ctmap .dirs{ color:#E8D7BB; }
.pad.wmmap{ position:relative; overflow:hidden; }
.pad.wmmap::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('/assets/55420ece07735e8a.jpg');
  background-position:78% center; background-size:auto 116%; background-repeat:no-repeat;
  opacity:.75; }
.pad.wmmap::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,var(--soft) 0%,var(--soft) 34%,rgba(239,234,225,0) 62%); }
.pad.wmmap > .wrap{ position:relative; z-index:1; }
/* The listing open-house band is much shorter than the market-updates one, so on
   a phone the map lands straight behind two lines of text instead of below them.
   Same wall, quieter, and faded further down for that band only. */
.pad.wmmap.wmlite::before{ opacity:.55; }
@media (max-width:860px){
  .pad.wmmap.wmlite::before{ opacity:.22; background-size:auto 105%; }
  .pad.wmmap.wmlite::after{ background:linear-gradient(180deg,var(--soft) 0%,var(--soft) 52%,rgba(239,234,225,.35) 100%); }
}
@media (max-width:860px){
  /* the form goes full width below this, so the map would sit under the fields.
     Drop it to a soft texture and fade from the top instead. */
  .pad.wmmap::before{ background-position:70% center; background-size:auto 115%; opacity:.42; }
  .pad.wmmap::after{ background:linear-gradient(180deg,var(--soft) 0%,var(--soft) 26%,rgba(239,234,225,0) 44%); }
}
.pad.wm{ position:relative; overflow:hidden; }
.pad.wm::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:url('/assets/e3e02e4921d7e0b0.jpg');
  background-position:center bottom; background-size:cover; background-repeat:no-repeat;
  opacity:.75; pointer-events:none; }
/* fade it out at the top so the band edge does not read as a hard seam */
.pad.wm::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,var(--ground) 0%,rgba(246,243,238,0) 38%); }
.pad.wm > .wrap{ position:relative; z-index:1; }
@media (max-width:760px){ .pad.wm::before{ opacity:.6; } }
.hoodimg.hoodfit::before{ content:""; position:absolute; inset:-8%;
  background:inherit; background-size:cover; background-position:center;
  filter:blur(18px) brightness(.72); z-index:0; }
.hoodimg.hoodfit img.hoodpic{ z-index:1; }
.hoodimg{ position:relative; aspect-ratio:1.5; height:auto;
  overflow:hidden; background:#2A2825;
  display:flex; align-items:center; justify-content:center; }
.hoodimg svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hoodimg .scrim2{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.34)); }
.hoodimg .over{ position:relative; z-index:2; text-align:center; padding:0 16px; }
.hoodimg .over .ttl{ font-family:"Newsreader",Georgia,serif; font-size:clamp(20px,2.4vw,25px);
  letter-spacing:.14em; text-transform:uppercase; color:#fff; font-weight:300;
  text-shadow:0 2px 14px rgba(0,0,0,.45); }
.hoodimg .over .more2{ display:inline-block; margin-top:14px; font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:700; color:#fff; border:1px solid rgba(255,255,255,.7);
  padding:9px 18px; transition:background .18s ease, color .18s ease; }
.hood a.hl:hover .more2{ background:#fff; color:#1B1A18; }
.hoodimg .tag{ position:absolute; left:12px; bottom:9px; z-index:3; font-size:7.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:700; }
.hoodbody{ padding:19px 22px 22px; }
.hood a.hl:hover .hoodimg{ filter:brightness(1.05); }

/* page photo band */
.pagehero{ position:relative; overflow:hidden; background:#2A2825;
  height:clamp(300px,34vw,430px); display:flex; align-items:flex-end; }
.pagehero .ph{ position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(176deg,#8E99A4 0%,#6C7784 40%,#4A535D 70%,#2E353C 100%); }
/* The top stop is what the white header sits on. It was .42, which held up over
   a mid-tone photo and failed over a bright one: the nav read 3.46:1 on Buyers
   and 4.10:1 on Home Search against a 4.5 requirement. Raising the first stop
   and adding a short second one darkens only the header band, so the picture
   below it is untouched and any bright photo dropped in later is covered. */
.pagehero .sc{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.40) 18%,
                             rgba(0,0,0,.18) 48%,rgba(0,0,0,.55) 100%); }
.pagehero.abhero .sc{ background:linear-gradient(180deg,rgba(10,14,20,.55) 0%,rgba(10,14,20,.42) 50%,rgba(10,14,20,.6) 100%); }
.pagehero.abhero{ align-items:center; }
.pagehero.abhero .in{ padding:0 24px; }
.abheadrow{ display:flex; align-items:center; gap:28px; }
.abheadrow h2{ margin:0; white-space:nowrap; font-size:clamp(20px,2.8vw,30px); letter-spacing:.12em;
  text-transform:uppercase; font-weight:400; color:#fff; }
.abheadrow .ablinerule{ flex:1; height:1px; background:rgba(255,255,255,.5); min-width:40px; }
@media (max-width:640px){ .abheadrow{ gap:16px; } .abheadrow .ablinerule{ min-width:24px; } }
.pagehero .in{ position:relative; z-index:2; width:100%; padding:0 24px 42px; color:#fff; }
.pagehero .in .eyebrow{ color:rgba(255,255,255,.75); }
.pagehero .in h1, .pagehero .in h2{ color:#fff; margin:10px 0 0; font-size:clamp(26px,4vw,40px); }
.pagehero .lbl{ position:absolute; left:24px; top:calc(var(--hh, 84px) + 14px); z-index:3;
  font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700; }

.heroBadge{ position:absolute; right:clamp(120px,18vw,260px); bottom:56px; z-index:2; }
.heroBadge img{ display:block; width:84px; height:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
@media (max-width:640px){ .heroBadge{ display:none; } }

/* per-city market search */
.mkt{ background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--accent);
  padding:26px 26px 28px; }
section.alt .mkt{ background:var(--ground); }
.mktrow{ display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; margin-top:4px; }
@media (max-width:700px){ .mktrow{ grid-template-columns:1fr; } }
.mktrow label{ margin-bottom:5px; }
.mktlinks{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line-soft); }
.mktlinks a{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--ink-2); text-decoration:none; border:1px solid var(--line); padding:9px 14px; border-radius:2px; }
.mktlinks a:hover{ border-color:var(--accent); color:var(--accent); }
.mktnote{ font-size:12px; color:var(--ink-3); margin:16px 0 0; line-height:1.6; }

/* nearby communities */
.nearby{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:22px; }
.nb{ position:relative; height:150px; overflow:hidden; background:#2A2825; display:block; text-decoration:none; }
.nb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nb .sc3{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.44)); }
.nb .lb{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:9px; color:#fff; }
.nb .lb b{ font-family:"Newsreader",Georgia,serif; font-weight:300; font-size:20px;
  letter-spacing:.12em; text-transform:uppercase; text-shadow:0 2px 12px rgba(0,0,0,.45); }
.nb .lb span{ font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  border:1px solid rgba(255,255,255,.7); padding:7px 14px; }
.nb:hover .lb span{ background:#fff; color:#1B1A18; }

/* area page photo band */
.arahero{ height:clamp(260px,40vw,460px); position:relative; overflow:hidden; background:#2A2825;
  border:1px solid var(--line); margin-bottom:28px; }
.arahero .ph{ position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(176deg,#8E99A4 0%,#6C7784 40%,#4A535D 70%,#2E353C 100%); }
.arahero .lbl{ position:absolute; left:20px; bottom:14px; font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:700; }
.hood .nmh{ font-family:"Newsreader",Georgia,serif; font-size:21px; margin:0 0 7px; }
.hood p{ margin:0; font-size:13.4px; line-height:1.6; color:var(--ink-2); }

/* area page */
#ar-sold{ grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); }
.arahead{ border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:6px; }
.arahead h1, .arahead h2{ margin-bottom:10px; }
.notes{ counter-reset:nn; margin-top:4px; }
.notes .nt{ display:flex; gap:16px; padding:15px 0; border-top:1px solid var(--line-soft); }
.notes .nt:first-child{ border-top:none; }
.notes .nt .bl{ flex:0 0 7px; height:7px; margin-top:8px; background:var(--accent); border-radius:1px; }
.notes .nt p{ margin:0; font-size:14px; line-height:1.62; color:var(--ink-2); max-width:66ch; }
.crumb{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.crumb a{ color:var(--ink-3); text-decoration:none; }
.crumb a:hover{ color:var(--ink); }
.hood a.hl{ color:inherit; text-decoration:none; display:block; }
.hood a.hl:hover .nmh{ text-decoration:underline; }
.hood .more{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--accent-2); margin-top:11px; }

/* pager */
.pager{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:26px; }
.pager button{ font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  min-width:34px; height:34px; padding:0 9px; border:1px solid transparent; background:none;
  color:var(--ink-3); border-radius:2px; line-height:1; font-variant-numeric:tabular-nums; }
.pager button:hover:not(:disabled){ color:var(--ink); }
.pager button.pg.on{ background:var(--deep); color:#fff; border-color:var(--deep); }
.pager button.arw{ font-size:17px; color:var(--ink-3); }
.pager button:disabled{ opacity:.3; cursor:default; }

/* client hub */
.hubbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid var(--line); }
.hubbar .who .p{ font-family:"Newsreader",Georgia,serif; font-size:24px; }
.hubbar .who .m{ font-size:12px; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase; font-weight:700; margin-top:3px; }
.demo{ display:inline-block; font-size:9px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  border:1px solid var(--accent-2); color:var(--ink-2); padding:4px 9px; border-radius:2px; }
.tabs{ display:flex; gap:0; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:22px 0 26px; }
.tab{ background:none; border:none; cursor:pointer; font-family:inherit; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-3);
  padding:12px 16px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover{ color:var(--ink); }
.tab.on{ color:var(--gold-text); border-bottom-color:var(--gold-text); }
.panel{ display:none; } .panel.on{ display:block; }

.offers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:18px; }
.offer{ background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--accent); padding:20px 20px 22px; }
.offer.lead{ border-top-width:4px; }
.offer .rank{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text); font-weight:700; }
.offer .amt{ font-family:"Newsreader",Georgia,serif; font-size:27px; margin:7px 0 2px; font-variant-numeric:tabular-nums; }
.offer .net{ font-size:12px; color:var(--ink-3); }
.offer dl{ margin:15px 0 0; font-size:13px; }
.offer dl div{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--line-soft); }
.offer dt{ color:var(--ink-3); } .offer dd{ margin:0; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.offer .say{ margin:15px 0 0; padding-top:13px; border-top:1px solid var(--line-soft);
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:13.5px; color:var(--ink-2); line-height:1.55; }

.log .e{ display:flex; gap:16px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.log .d{ flex:0 0 96px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding-top:2px; }
.log .t{ font-size:13.8px; color:var(--ink-2); max-width:62ch; }
.log .t b{ color:var(--ink); font-weight:600; }

.dates .r{ display:grid; grid-template-columns:118px 1fr 116px; gap:14px; padding:12px 0;
  border-bottom:1px solid var(--line-soft); align-items:baseline; }
@media (max-width:620px){ .dates .r{ grid-template-columns:1fr; gap:3px; } }
.dates .dt{ font-size:12.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.dates .wh{ font-size:13.6px; color:var(--ink-2); }
.dates .own{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-3); }
.dates .r.done .dt, .dates .r.done .wh{ color:var(--ink-3); text-decoration:line-through; }

.bench{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; }
.bz{ background:var(--surface); border:1px solid var(--line); padding:17px 18px 19px; }
.bz .role{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.bz .nm2{ font-family:"Newsreader",Georgia,serif; font-size:18px; margin:6px 0 3px; }
.bz .cn{ font-size:13px; color:var(--ink-2); }
.todo{ background:var(--soft); border-left:2px solid var(--accent); padding:13px 16px;
  font-size:13px; color:var(--ink-2); margin-top:18px; }

/* mortgage calculator */
.calcwrap{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); }
@media (max-width:860px){ .calcwrap{ grid-template-columns:1fr; } }
.calcin{ background:var(--soft); padding:32px 32px 34px; }
.calcout{ background:var(--surface); padding:32px 32px 34px; }
.calcin h3, .calcout h3{ font-size:23px; margin:0 0 8px; }
.calcin .lead{ color:var(--ink-2); font-size:13.6px; margin:0 0 22px; max-width:46ch; }
.cf{ margin-bottom:16px; }
.cf label{ display:block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin:0 0 5px; }
.cf input, .cf select{ width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:10px 12px;
  font-variant-numeric:tabular-nums; }
.cf2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:420px){ .cf2{ grid-template-columns:1fr; } }
.dprow{ display:grid; grid-template-columns:1fr 84px; gap:8px; }

.donutwrap{ display:flex; justify-content:center; margin:6px 0 24px; }
.donut{ width:212px; height:212px; }
.donut circle{ fill:none; stroke-width:19; transform:rotate(-90deg); transform-origin:50% 50%;
  transition:stroke-dasharray .25s ease; }
.donut .track{ stroke:var(--line-soft); }
.dtotal{ font-family:"Newsreader",Georgia,serif; font-size:29px; fill:var(--ink);
  text-anchor:middle; font-variant-numeric:tabular-nums; }
.dcap{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; fill:var(--ink-3);
  text-anchor:middle; font-weight:700; }

.brk{ border-top:1px solid var(--line-soft); }
.brk .row{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.brk .sw{ width:11px; height:11px; flex:0 0 11px; border-radius:2px; }
.brk .nm{ flex:1; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ink-2); }
.brk .vl{ font-variant-numeric:tabular-nums; font-size:14px; color:var(--ink); white-space:nowrap; }
.brk .pc{ color:var(--ink-3); font-size:12.5px; margin-left:6px; font-variant-numeric:tabular-nums; }
.brk .row.tot{ border-bottom:none; padding-top:15px; }
.brk .row.tot .nm{ color:var(--ink); }
.brk .row.tot .vl{ font-family:"Newsreader",Georgia,serif; font-size:20px; }
.calcnote{ font-size:12px; color:var(--ink-3); line-height:1.6; margin:18px 0 0; }

/* forms */
form.box{ background:var(--surface); border:1px solid var(--line); padding:26px 26px 28px; }
section.alt form.box{ background:var(--ground); }
label{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin:0 0 6px; }
/* iOS Safari zooms the whole page in whenever a tapped field is under 16px,
   and it does not zoom back out. Every form on this site was 14.5px, so every
   lead typed their details into a zoomed page. 16px on phones only, so the
   desktop look is unchanged. Bigger touch targets while we are here: 44px is
   the comfortable thumb size, the fields were 37 to 39. */
@media (max-width:760px){
  input,select,textarea{ font-size:16px !important; }
  input:not([type="checkbox"]):not([type="radio"]),select{ min-height:44px; }
  input[type="checkbox"],input[type="radio"]{ min-width:24px; min-height:24px; }
}
input,select,textarea{ width:100%; font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--ground); border:1px solid var(--line); border-radius:2px; padding:10px 12px; }
section.alt input, section.alt select, section.alt textarea{ background:var(--surface); }
textarea{ min-height:88px; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px var(--wash); }
.f{ margin-bottom:14px; } .f2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .f2{ grid-template-columns:1fr; } }
label.consent{ display:flex; gap:9px; align-items:flex-start; margin:8px 0 18px;
         font-size:12.5px; line-height:1.6; color:var(--ink-2);
         letter-spacing:0; text-transform:none; font-weight:400; max-width:56ch; }
label.consent span{ letter-spacing:0; text-transform:none; font-weight:400; }
label.consent a, label.ctconsent a{ color:var(--gold-text); }
.consentfine{ font-size:11.5px; line-height:1.55; color:var(--ink-2);
              margin:12px 0 0; max-width:56ch; letter-spacing:0; text-transform:none;
              font-weight:400; }
.consentfine a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.consentfine a:hover{ color:var(--gold-text); }
.darkpanel .consentfine, .ctin .consentfine{ color:rgba(255,255,255,.72); }
.consent input{ width:15px; height:15px; flex:0 0 15px; margin-top:3px; accent-color:var(--accent); }

/* validation — a field that still needs something, and the one line that says
   what. Colour alone never carries the message: the text below the form does. */
input.bad, select.bad, textarea.bad{ border-color:var(--bad); background:var(--bad-wash); }
input.bad:focus, select.bad:focus, textarea.bad:focus{
  border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-wash); }
.formerr{ display:none; font-size:13px; line-height:1.5; color:var(--bad);
  margin:2px 0 14px; letter-spacing:0; text-transform:none; font-weight:500; }
.formerr.on{ display:block; }
.darkpanel .formerr, .ctin .formerr{ color:#F0A594; }
.ctf input.bad, .ctf select.bad, .ctf textarea.bad,
.darkpanel input.bad, .darkpanel select.bad, .darkpanel textarea.bad{
  border-color:#E08B77; border-bottom-width:2px;
  background:rgba(224,139,119,.10); }
.ctf textarea.bad, .darkpanel textarea.bad{ border-width:1px; border-color:#E08B77; }
.ctf input.bad:focus, .ctf select.bad:focus, .ctf textarea.bad:focus,
.darkpanel input.bad:focus, .darkpanel select.bad:focus, .darkpanel textarea.bad:focus{
  border-color:#E08B77; box-shadow:0 0 0 3px rgba(224,139,119,.18); }
.ctf label.miss, .darkpanel label.miss{ color:#F0A594; }
label.miss{ color:var(--bad); }
/* Shown only when a visitor says they are already under an exclusive
   agreement. Article 16 means Carmen cannot work that sale, and saying so
   up front is better than finding out on the call. */
.repnote{ display:none; font-size:12.5px; line-height:1.55; margin:-4px 0 14px;
  padding:10px 12px; border-left:2px solid var(--gold); background:var(--wash);
  color:var(--ink-2); max-width:56ch; letter-spacing:0; text-transform:none;
  font-weight:400; }
.repnote.on{ display:block; }
.ctf .repnote, .ctin .repnote, .darkpanel .repnote{
  background:rgba(201,162,99,.10); border-left-color:#C9AB7C; color:rgba(255,255,255,.82); }
/* Read by a screen reader, invisible on screen. Used only to name a band that
   the design introduces with a lead paragraph instead of a heading, so the
   heading order has no gaps. */
/* client hub: the message thread and the buyer's reactions */
.thread{ margin-top:18px; display:grid; gap:14px; }
.msg{ display:grid; gap:4px; max-width:60ch; }
.msg .mw{ font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--gold-text); }
.msg .mb{ background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  border-radius:2px; padding:13px 15px; font-size:14.5px; line-height:1.62; }
.msg .mt{ font-size:11.5px; color:rgba(255,255,255,.52); }
.msg.mine{ justify-items:end; margin-left:auto; }
.msg.mine .mw{ color:rgba(255,255,255,.6); }
.msg.mine .mb{ background:rgba(201,162,99,.14); border-color:rgba(201,162,99,.34);
  text-align:left; }
.compose{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); }
.compose textarea{ min-height:92px; }
.compose .row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin-top:12px; }
.compose .hint{ font-size:12px; color:rgba(255,255,255,.55); max-width:44ch; }
.react{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;
  padding-top:13px; border-top:1px solid rgba(255,255,255,.12); }
.react button{ font:inherit; font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:7px 13px; border-radius:2px; cursor:pointer;
  background:transparent; color:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.26); width:auto; }
.react button:hover{ border-color:#C9AB7C; color:#fff; }
.react button.picked{ background:rgba(201,162,99,.18); border-color:#C9AB7C;
  color:#fff; }
.react .said{ font-size:12px; color:#C9AB7C; align-self:center; }
/* Phone legibility. Small uppercase labels and 13px body copy are fine on a
   desktop and hard work outdoors on a phone, so the base size goes up and the
   tightest tracking relaxes. */
@media (max-width:640px){
  body{ font-size:16px; line-height:1.66; }
  .sub, .lead, .bioLead{ font-size:16px; }
  li{ font-size:15.5px; line-height:1.6; }
  .eyebrow{ font-size:11.5px; letter-spacing:.16em; }
  label{ font-size:11.5px; letter-spacing:.08em; }
  .consentfine, .ctfine, .fine{ font-size:13px; line-height:1.6; }
  .postrow .pdek{ font-size:15.5px; }
  .post .pbody p, .post .pbody li{ font-size:17px; line-height:1.7; }
  .legal p, .legal li{ font-size:16px; line-height:1.68; }
}
/* On a dark surface the readable gold is the light one. Scoping the token
   means every gold-text rule inside these containers flips automatically,
   instead of each rule needing its own exception. */
.darkpanel, .ctin, .ctfull, footer, .hero, .pagehero, .dpbox, .tcard2, .hubbar,
.offer, .arahero{ --gold-text:#C9AB7C; }
.hero .eyebrow, .pagehero .eyebrow, .arahero .eyebrow,
.hero .kick, .hood .ttl, .hood .more2, .nb .lb b, .nb .lb span{
  text-shadow:0 1px 3px rgba(8,12,16,.55), 0 0 1px rgba(8,12,16,.4); }
/* Over a photo the mid-gold has whatever contrast the image gives it, which on
   a bright frame is not enough. A pale gold keeps the accent and clears the
   bar on any photo. */
.hero .eyebrow, .pagehero .eyebrow, .arahero .eyebrow{ color:#EEDCB8; }
.logo .nm, .logo .br{ text-shadow:0 1px 2px rgba(8,12,16,.35); }
.hdr-solid .logo .nm, .hdr-solid .logo .br{ text-shadow:none; }
.vh{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
     overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
     border:0; }
label.consent.miss span, label.ctconsent.miss span{ color:var(--bad); }
.ctf label.ctconsent.miss span, .darkpanel label.consent.miss span{ color:#F0A594; }
input[type="checkbox"].bad{ outline:2px solid var(--bad); outline-offset:2px; }
.ctf input[type="checkbox"].bad, .darkpanel input[type="checkbox"].bad{ outline-color:#E08B77; }
button.btn[disabled], .btn[aria-busy="true"]{ opacity:.6; cursor:default; }


.thanks{ background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--accent); padding:30px 28px; }
.thanks h3{ font-size:23px; margin:0 0 8px; }
.thanks p{ color:var(--ink-2); margin:0; font-size:14.5px; }

/* search page */
.searchbox{ background:var(--surface); border:1px solid var(--line); padding:30px 30px 32px; text-align:center; }
.searchbox .links{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; }

footer{ background:var(--deep); color:#CFDBE2; margin-top:0; }
.fgrid{ display:grid; grid-template-columns:1.25fr .85fr .85fr 1fr; gap:30px; padding:44px 0 30px; }
@media (max-width:760px){ .fgrid{ grid-template-columns:1fr; gap:24px; } }
footer h2, footer h4{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#8FB0C2; margin:0 0 12px; font-weight:700; }
footer a.foothead{ display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#8FB0C2; margin:0 0 12px; font-weight:700; }
footer a.foothead:hover{ color:#fff; text-decoration:none; }
footer a{ color:#CFDBE2; text-decoration:none; display:block; font-size:13.5px; margin-bottom:7px; }
/* A stacked list of links on a phone needs a target you can hit with a thumb.
   These were 22px tall, which is under the 24px the standard asks for and well
   under the 44px a thumb actually wants. Padding, not font size, so nothing
   about the look changes on a desktop. */
@media (max-width:760px){
  footer a{ padding:9px 0; margin-bottom:0; }
  footer .fgrid > div{ margin-bottom:6px; }
}
footer a:hover{ color:#fff; text-decoration:underline; }
footer .nm{ font-family:"Newsreader",Georgia,serif; font-size:21px; color:#fff; }
.legal{ border-top:1px solid rgba(255,255,255,.12); padding:18px 0 30px; font-size:11px; color:#8FA3AF; line-height:1.7; }
.flogo{ height:34px; width:auto; display:block; margin:18px 0 0; opacity:.92; }
.fbadges{ height:34px; width:auto; display:block; margin:0 0 14px; opacity:.85; }
.clogo{ height:30px; width:auto; display:block; margin:16px 0 0; opacity:.95; }
.fappqr{ width:104px; height:104px; border-radius:10px; display:block; margin:2px 0 12px; background:#fff; padding:6px; box-sizing:border-box; }
.fappbtn{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--deep,#111); background:#D8C199; padding:9px 14px; border-radius:7px; text-decoration:none; border:none; cursor:pointer; font-family:inherit; }
.fappbtn:hover{ background:#e6c795; }
.fappnote{ font-size:12px; color:#9FB4C0; margin:10px 0 0; line-height:1.6; max-width:24ch; }


/* Contact: one full-bleed photo panel, header down to below the button */
.ctfull{ position:relative; overflow:hidden; background:#1B2229;
         padding:calc(var(--hh, 84px) + 54px) 0 72px; }
.ctfull .ph{ position:absolute; inset:0; }
.ctfull .sc{ position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(201,162,99,.22), transparent 58%),
    radial-gradient(90% 70% at 8% 96%, rgba(201,162,99,.10), transparent 60%),
    linear-gradient(170deg,#30404C 0%,#1D262F 46%,#141B22 100%); }
/* oversized monogram, bled off the right edge, doing the work a photo would */
.ctmark{ position:absolute; right:-7vw; top:50%; transform:translateY(-50%);
         width:min(560px,52vw); aspect-ratio:1; z-index:1; pointer-events:none;
         opacity:.085; }
.ctmark svg{ width:100%; height:100%; display:block; }
@media (max-width:900px){ .ctmark{ right:-26vw; top:auto; bottom:-8vw; transform:none;
                                   width:78vw; opacity:.07; } }
.ctin{ position:relative; z-index:2; color:#fff; }
.ctin .eyebrow{ color:var(--gold-text); letter-spacing:.3em; }
.ctrule{ width:52px; height:1px; background:var(--gold); margin:4px 0 0; opacity:.9; }
.ctin .eyebrow + .ctrule{ margin-top:16px; }
.ctin h1.serif, .ctin h2.serif{ color:#fff; margin:18px 0 0; font-size:clamp(30px,4.6vw,46px); line-height:1.12; letter-spacing:-.01em; }
.ctsub{ color:rgba(255,255,255,.80); font-size:15.5px; line-height:1.7; max-width:56ch; margin:14px 0 0; }
.ctgrid{ display:grid; grid-template-columns:.88fr 1.12fr; gap:52px; margin-top:48px; align-items:start; }
.ctgrid h2, .ctgrid h4{ font-size:10px; letter-spacing:.24em; text-transform:uppercase;
            color:rgba(255,255,255,.62); font-weight:700; margin:0 0 20px; }
.ctleft{ border-top:1px solid rgba(255,255,255,.18); padding-top:22px; }
.ctright{ background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
           padding:30px 32px 34px; backdrop-filter:blur(2px); }
@media (max-width:900px){ .ctright{ padding:24px 20px 28px; } }
.ctrow{ margin:0 0 16px; }
.ctrow .k{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
           color:rgba(255,255,255,.55); font-weight:700; display:block; margin-bottom:4px; }
.ctrow a, .ctrow span.v{ color:#fff; text-decoration:none; font-size:15px; line-height:1.6; }
.ctrow a:hover{ color:var(--gold-text); }
.telblock{ display:flex; align-items:center; justify-content:space-between; gap:16px;
           border:1px solid rgba(201,162,99,.55); background:rgba(201,162,99,.07);
           padding:16px 20px; text-decoration:none; margin:0 0 22px;
           transition:background .18s, border-color .18s; }
.telblock:hover{ background:rgba(201,162,99,.16); border-color:var(--gold-text); }
.telblock .n{ font-size:26px; font-weight:600; color:#fff; letter-spacing:.01em; line-height:1; }
.telblock .c{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
              color:var(--gold-text); font-weight:700; white-space:nowrap; }
@media (max-width:460px){ .telblock{ flex-direction:column; align-items:flex-start; gap:8px; }
                          .telblock .n{ font-size:30px; } }
.ctfine{ margin:22px 0 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.14);
         font-size:12px; color:rgba(255,255,255,.58); line-height:1.7; }
.ctfull .clogo{ margin:20px 0 0; opacity:.9; }

/* The private pages — Client Login and Off-Market — wear the same dark gold
   panel as Contact. Everything below is scoped to .darkpanel so the light
   pages are untouched. */
.darkpanel{ position:relative; overflow:hidden; background:#1B2229;
            padding:calc(var(--hh, 84px) + 54px) 0 76px; margin:0; }
body.hero-top .darkpanel{ padding-top:calc(var(--hh, 84px) + 54px); }
.darkpanel .dpbg{ position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(201,162,99,.22), transparent 58%),
    radial-gradient(90% 70% at 8% 96%, rgba(201,162,99,.10), transparent 60%),
    linear-gradient(170deg,#30404C 0%,#1D262F 46%,#141B22 100%); }
.darkpanel .dpmark{ position:absolute; right:-7vw; top:50%; transform:translateY(-50%);
  width:min(560px,52vw); aspect-ratio:1; z-index:1; pointer-events:none; opacity:.085; }
.darkpanel .dpmark svg{ width:100%; height:100%; display:block; }
@media (max-width:900px){ .darkpanel .dpmark{ right:-26vw; top:auto; bottom:-8vw;
                                              transform:none; width:78vw; opacity:.07; } }
.darkpanel > section{ position:relative; z-index:2; background:transparent !important;
                      border:none !important; padding:0 0 40px; }
.darkpanel > section:last-of-type{ padding-bottom:0; }
.darkpanel, .darkpanel h1, .darkpanel h2, .darkpanel h3{ color:#fff; }
.darkpanel .eyebrow{ color:#C9AB7C; }
.darkpanel .sub{ color:rgba(255,255,255,.80); }
.darkpanel .card{ background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
                  border-top:2px solid #C9AB7C; backdrop-filter:blur(2px); }
.darkpanel .card li{ color:rgba(255,255,255,.78); }
.darkpanel .card li:before{ background:#C9AB7C; }
.darkpanel form.box{ background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
                     backdrop-filter:blur(2px); }
.darkpanel label{ color:rgba(255,255,255,.66); }
.darkpanel input, .darkpanel select, .darkpanel textarea{
  background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.42);
  color:#fff; border-radius:0; }
.darkpanel textarea{ border:1px solid rgba(255,255,255,.42); }
.darkpanel input:focus, .darkpanel select:focus, .darkpanel textarea:focus{
  outline:0; border-color:#C9AB7C; box-shadow:none; }
.darkpanel select option{ color:#1B1A18; background:#fff; }
.darkpanel input::placeholder, .darkpanel textarea::placeholder{ color:rgba(255,255,255,.45); }
.darkpanel label.consent{ color:rgba(255,255,255,.74); }
.darkpanel label.consent input{ accent-color:#C9AB7C; }
.darkpanel label.consent a, .darkpanel label.ctconsent a,
.ctin label.ctconsent a, .ctin label.consent a{ color:#C9AB7C; }
.darkpanel .btn{ background:#C9AB7C; color:#1B1A18; border-color:#C9AB7C; }
.darkpanel button.btn[type="submit"]{ background:#C9AB7C; border-color:#C9AB7C; color:#1B1A18; }
.darkpanel .btn:hover{ background:#fff; color:#1B1A18; filter:none; }
.darkpanel .btn.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7); }
.darkpanel .btn.ghost:hover{ background:#fff; color:#1B1A18; }
.darkpanel .rank, .darkpanel .dpmuted a, .darkpanel .offer .rank{ color:#C9AB7C; }
/* property cards inside a dark panel: the light card would be white-on-white */
.darkpanel .prop{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.14); }
.darkpanel .prop .img{ background:linear-gradient(160deg,#25313A,#1D262E) !important; }
.darkpanel .prop .img span{ color:rgba(255,255,255,.48); }
.darkpanel .prop .addr, .darkpanel .prop .price{ color:#fff; }
.darkpanel .prop .spec{ color:rgba(255,255,255,.72); }
.darkpanel .prop .hook{ color:rgba(255,255,255,.72); border-top-color:rgba(255,255,255,.16); }
.darkpanel .pill{ color:rgba(255,255,255,.82); border-color:rgba(255,255,255,.34); }
.darkpanel .pill.soon, .darkpanel .pill.delayed{ color:#C9AB7C; border-color:rgba(201,162,99,.62); }
.darkpanel .pill.office{ color:rgba(255,255,255,.82); border-color:rgba(255,255,255,.34); }
.darkpanel .prop .what{ color:rgba(255,255,255,.60); }
.darkpanel .box, .darkpanel .dpbox{ background:rgba(255,255,255,.055);
        border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(2px); }
.darkpanel .dpbox h3{ color:#fff; }
.darkpanel .dpmuted{ color:rgba(255,255,255,.78); }
.darkpanel .dpmuted strong{ color:#fff; }
.darkpanel .dpmuted a{ color:#C9AB7C; }
.darkpanel .dprule{ border-top:1px solid rgba(255,255,255,.20); }
.darkpanel .dpfine{ color:rgba(255,255,255,.58); }
.darkpanel .thanks{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); }
.darkpanel .thanks h3{ color:#fff; }
.darkpanel .thanks p{ color:rgba(255,255,255,.82); }
.darkpanel .demo{ border-color:rgba(255,255,255,.35); color:rgba(255,255,255,.75); }
.darkpanel .hubbar{ border-bottom-color:rgba(255,255,255,.18); }
.darkpanel .hubbar .who .m{ color:rgba(255,255,255,.6); }
.darkpanel .tabs{ border-bottom-color:rgba(255,255,255,.18); }
.darkpanel .tab{ color:rgba(255,255,255,.6); }
.darkpanel .tab:hover{ color:#fff; }
.darkpanel .tab.on{ color:#C9AB7C; border-bottom-color:#C9AB7C; }
.darkpanel .offer, .darkpanel .bz{ background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14); border-top:2px solid #C9AB7C; }
.darkpanel .offer dt, .darkpanel .log .d, .darkpanel .bz .role,
.darkpanel .dates .own{ color:rgba(255,255,255,.55); }
.darkpanel .offer dd, .darkpanel .log .t b, .darkpanel .dates .dt{ color:#fff; }
.darkpanel .log .t, .darkpanel .dates .wh, .darkpanel .bz .cn,
.darkpanel .offer .say{ color:rgba(255,255,255,.78); }
.darkpanel .offer dl div, .darkpanel .log .e,
.darkpanel .dates .r{ border-color:rgba(255,255,255,.12); }
.darkpanel .todo{ background:rgba(255,255,255,.06); border-left-color:#C9AB7C;
                  color:rgba(255,255,255,.78); }

/* Testimonials: same dark/gold full-bleed panel as Contact */
.tfull{ padding-bottom:76px; }
.tgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); gap:20px; margin-top:40px; }
/* out to the Zillow profile, so the reviews are checkable rather than claimed */
.zlink{ display:inline-block; margin-top:28px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.55); border-radius:2px; padding:13px 22px;
  transition:background .15s, border-color .15s; }
.zlink:hover, .zlink:focus-visible{ background:rgba(255,255,255,.10); border-color:#fff; }
@media (max-width:640px){ .zlink{ display:block; text-align:center; margin-top:24px; } }
.tcard2{ background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  padding:24px 24px 22px; backdrop-filter:blur(2px); }
.tcard2 p{ margin:0; font-family:"Newsreader",Georgia,serif; font-size:16px; line-height:1.6; color:rgba(255,255,255,.86); }
.tcard2 .by{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); font-weight:700; margin-top:14px; }

/* About: brand-gold "About Me" bio card, cream ground, real headshot */
.biocard{ background:#F7F1E4; position:relative; overflow:hidden; }
:root[data-theme="dark"] .biocard, :root:not([data-theme="light"]) .biocard{ background:#1C170F; }
.abrule{ width:64px; height:1px; background:rgba(255,255,255,.65); margin:18px 0 16px; }
.abtag{ margin:0; font-size:13px; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.85); }
.biograph{ display:grid; grid-template-columns:1fr 1fr; align-items:start; min-height:560px; }
.bioSpine{ align-self:stretch; }
@media (max-width:860px){ .biograph{ grid-template-columns:1fr; min-height:0; } }
.bioSpine{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  border-right:1px solid rgba(150,114,58,.32); padding:40px 0; }
.bioSpine span{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; font-weight:700; color:var(--gold-text); white-space:nowrap; }
.bioSpine .dot{ writing-mode:horizontal-tb; transform:none; font-size:8px; color:var(--gold-text); }
@media (max-width:860px){ .bioSpine{ display:none; } }
.bioText{ padding:60px 44px 44px; }
@media (max-width:860px){ .bioText{ padding:40px 24px 6px; } }
.bioH{ font-size:clamp(30px,4vw,42px); margin:14px 0 28px; color:var(--ink); }
.bioH .g{ color:var(--gold-text); font-style:italic; }
.bioText p{ font-size:14.5px; line-height:1.75; color:var(--ink-2); max-width:52ch; margin:0; }
.bioText p b{ color:var(--gold-text); font-weight:700; }
.bioPoint{ margin:0 0 22px; padding-left:16px; border-left:2px solid rgba(150,114,58,.3); }
.bioLabel{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--gold-text); margin-bottom:8px; }
.bioSig{ font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:26px; color:var(--gold-text); margin:28px 0 2px; }
.bioRole{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:800; color:var(--ink); }
.bioRole span{ display:block; font-size:10px; letter-spacing:.16em; font-weight:600; color:var(--ink-3); margin-top:3px; }
.bioContact{ margin-top:16px; display:flex; flex-direction:column; gap:5px; font-size:13px; }
.bioContact a{ color:var(--ink-2); text-decoration:none; }
.bioContact a:hover{ color:var(--gold-text); }
.bioContact span{ color:var(--ink-3); }
.bioPhoto{ position:sticky; top:calc(var(--hh, 84px) + 24px);
            overflow:hidden; aspect-ratio:4/5; align-self:start; }
.bioPhoto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
@media (max-width:860px){ .bioPhoto{ position:relative; top:auto; aspect-ratio:4/5; } }

.ctf{ margin:0 0 20px; }
.ctf label{ display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
            color:rgba(255,255,255,.66); font-weight:700; margin-bottom:8px; }
.ctf input, .ctf select, .ctf textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.42);
  color:#fff; font:inherit; font-size:15px; padding:8px 2px; border-radius:0;
  -webkit-appearance:none; appearance:none; }
.ctf textarea{ border:1px solid rgba(255,255,255,.42); padding:12px; min-height:110px; resize:vertical; }
.ctf input:focus, .ctf select:focus, .ctf textarea:focus{ outline:0; border-color:var(--gold-text); }
.ctf select option{ color:#1B1A18; background:#fff; }
.ctf input::placeholder, .ctf textarea::placeholder{ color:rgba(255,255,255,.45); }
.ctf2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
label.ctconsent{ display:flex; gap:11px; align-items:flex-start; margin:8px 0 26px;
            font-size:12.5px; letter-spacing:0; text-transform:none; font-weight:400;
            color:rgba(255,255,255,.74); line-height:1.65; max-width:52ch; }
label.ctconsent span{ letter-spacing:0; text-transform:none; font-weight:400; }
label.ctconsent input{ width:15px; height:15px; flex:0 0 15px; margin-top:2px; accent-color:var(--gold-text); }
.ctbtn{ width:100%; background:#7C6244; border:1px solid #7C6244; color:#fff;
        font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
        padding:15px 42px; cursor:pointer; transition:background .18s, color .18s, border-color .18s; }
.ctbtn:hover{ background:#fff; color:#1B1A18; border-color:#fff; }
.ctalt{ text-align:center; margin:16px 0 0; font-size:12.5px; color:rgba(255,255,255,.62); }
.ctalt a{ color:#fff; }
.ctright .thanks{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22);
                  padding:26px; color:#fff; }
.ctright .thanks h3{ color:#fff; }
.ctright .thanks p{ color:rgba(255,255,255,.82); }
.ctright .thanks a{ color:#fff; }
.ctright .thanks a.telbig{ color:#fff; font-size:24px; }
@media (max-width:900px){
  .ctgrid{ grid-template-columns:1fr; gap:34px; }
  .ctfull{ padding:calc(var(--hh, 84px) + 34px) 0 54px; }
  .ctf2{ grid-template-columns:1fr; gap:0; }
}
.telbig{ font-size:22px; font-weight:600; letter-spacing:.01em; color:var(--ink); text-decoration:none; }
.telbig:hover{ color:var(--gold-text); }
footer a.telfoot{ font-size:19px; font-weight:600; color:#fff; margin-bottom:10px; }
@media (max-width:760px){ .flogo{ height:30px; } .fbadges{ height:30px; } }
.legal{ max-width:820px; }
.legal .sub{ max-width:60ch; }
/* insights — the index of posts and the reading column */
.postlist{ display:grid; gap:0; border-top:1px solid var(--line); margin-top:26px; }
.postrow{ display:grid; grid-template-columns:1fr auto; gap:6px 24px;
  padding:22px 0; border-bottom:1px solid var(--line); align-items:start;
  text-decoration:none; color:inherit; }
.postrow:hover .ptitle{ color:var(--gold-text); }
.postrow .ptag{ font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700; grid-column:1/-1; }
.postrow .ptitle{ font-family:"Newsreader",Georgia,serif; font-size:21px;
  line-height:1.25; transition:color .15s; max-width:34ch; }
.postrow .pmeta{ font-size:12px; color:var(--ink-3); white-space:nowrap;
  letter-spacing:.04em; padding-top:6px; }
.postrow .pdek{ grid-column:1/-1; font-size:14.5px; color:var(--ink-2);
  max-width:64ch; margin-top:4px; }
@media (max-width:560px){
  .postrow{ grid-template-columns:1fr; }
  .postrow .pmeta{ padding-top:0; order:4; }
}
.post{ max-width:680px; }
.post .pkicker{ font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700; }
.post h1{ font-size:clamp(26px,4.4vw,38px); line-height:1.12; margin:12px 0 0;
  letter-spacing:-.01em; text-wrap:balance; }
.post .pdek2{ font-size:17px; color:var(--ink-2); margin:14px 0 0; max-width:60ch; }
.post .pby{ font-size:12.5px; color:var(--ink-3); margin:18px 0 0;
  padding-bottom:22px; border-bottom:1px solid var(--line); }
.post .pbody{ margin-top:26px; }
.post .pbody p{ font-size:16px; line-height:1.72; margin:0 0 18px; }
.post .pbody h2{ font-family:"Newsreader",Georgia,serif; font-size:22px;
  margin:34px 0 12px; letter-spacing:-.005em; }
.post .pbody ul{ margin:0 0 20px; padding-left:20px; }
.post .pbody li{ font-size:16px; line-height:1.68; margin:0 0 8px; }
.post .pbody strong{ font-weight:600; }
.post .pbody .src{ font-size:13px; color:var(--ink-3); line-height:1.6;
  border-top:1px solid var(--line); padding-top:16px; margin-top:30px; }
.postend{ margin-top:38px; padding:22px 24px; border:1px solid var(--gold);
  background:rgba(150,114,58,.06); }
.postend h3{ font-family:"Newsreader",Georgia,serif; font-size:19px; margin:0 0 6px; }
.postend p{ font-size:14.5px; color:var(--ink-2); margin:0 0 16px; max-width:52ch; }
.postnav{ display:flex; gap:18px; flex-wrap:wrap; margin-top:34px;
  padding-top:20px; border-top:1px solid var(--line); font-size:14px; }
.legal h2, .legal h3{ font-family:"Newsreader",Georgia,serif; font-size:20px; margin:34px 0 10px;
           color:var(--ink); }
.legal p, .legal li{ font-size:14.5px; line-height:1.75; color:var(--ink-2); max-width:68ch; }
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 14px; padding-left:18px; max-width:68ch; }
.legal li{ margin:0 0 8px; }
.legal a{ color:var(--gold-text); }
.legal h1.sec, .legal .sec{ color:var(--ink); }
.legal .eff{ font-size:12.5px; color:var(--ink-3); margin:18px 0 28px; }

/* =====================================================================
   SINGLE PROPERTY PAGE  (one file per listing, named by its slug)
   One page per listing, on Carmen's own domain, so the address ranks
   here rather than on a vendor's site and the lead lands in her CRM.
   Built from the site's own type and palette on purpose: this page
   carries the site header and nav, so it has to look like the site.
   ===================================================================== */
.lp-hero{ position:relative; min-height:78vh; display:flex; align-items:flex-end;
  overflow:hidden; background:#1B1A18; }
@media (max-width:640px){ .lp-hero{ min-height:66vh; } }
.lp-hero .media{ position:absolute; inset:0; }
.lp-hero .media img, .lp-hero .media video{ width:100%; height:100%; object-fit:cover; display:block; }
.lp-hero .media .ph{ position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(160deg,#2B3A47,#1B1A18); color:rgba(255,255,255,.35);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
/* The scrim runs darker toward the bottom so the address stays readable on
   any photo. Carmen settled on the darker end of this after trying lighter. */
.lp-hero .scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,16,22,.42) 0%, rgba(10,16,22,.12) 34%,
             rgba(10,16,22,.62) 74%, rgba(10,16,22,.90) 100%); }
.lp-hero .in{ position:relative; z-index:2; width:100%; padding:0 24px 46px; color:#fff; }
.lp-status{ display:inline-block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:#fff; border:1px solid rgba(255,255,255,.62);
  border-radius:2px; padding:5px 11px; margin-bottom:16px; }
.lp-status.pending{ background:rgba(255,255,255,.14); }
.lp-hero h1{ font-family:"Newsreader",Georgia,serif; font-weight:300; text-transform:uppercase;
  letter-spacing:.055em; font-size:clamp(25px,4vw,44px); line-height:1.16; margin:0;
  text-wrap:balance; text-shadow:0 1px 18px rgba(0,0,0,.34); }
.lp-hero .city{ font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  margin:10px 0 0; color:rgba(255,255,255,.88); text-shadow:0 1px 10px rgba(0,0,0,.4); }
.lp-hero .price{ font-family:"Newsreader",Georgia,serif; font-size:clamp(23px,3vw,33px);
  font-weight:400; margin:18px 0 0; text-shadow:0 1px 14px rgba(0,0,0,.4); }
/* Plain text over the photo, no panel behind it. */
.lp-stats{ display:flex; flex-wrap:wrap; gap:0 26px; margin:16px 0 0;
  font-size:13.5px; color:rgba(255,255,255,.94); text-shadow:0 1px 10px rgba(0,0,0,.5); }
.lp-stats b{ font-weight:600; }
@media (max-width:520px){ .lp-stats{ gap:0 18px; font-size:12.5px; } }

.lp-unverified{ background:#FBF1EE; border-left:3px solid #A6442F; color:#7A3323;
  font-size:13.5px; line-height:1.6; padding:13px 18px; }
.lp-unverified b{ font-weight:700; }

.lp-body{ display:grid; gap:44px; grid-template-columns:1fr; }
@media (min-width:920px){ .lp-body{ grid-template-columns:minmax(0,1fr) 330px; gap:56px; } }
.lp-story p{ font-size:16px; line-height:1.78; color:var(--ink-2); max-width:64ch; margin:0 0 16px; }
.lp-story p.first{ font-size:17.5px; color:var(--ink); }

.lp-facts{ border-top:1px solid var(--line); margin-top:8px; }
.lp-facts div{ display:flex; justify-content:space-between; gap:18px;
  padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.lp-facts dt, .lp-facts .k{ color:var(--ink-3); }
.lp-facts .v{ font-weight:500; text-align:right; }

.lp-side{ position:relative; }
@media (min-width:920px){ .lp-side .stick{ position:sticky; top:120px; } }
.lp-card{ background:var(--surface); border:1px solid var(--line);
  border-radius:3px; padding:22px; box-shadow:var(--shadow); }
.lp-card h3{ font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:20px; margin:0 0 4px; }
.lp-card .sub{ font-size:13px; color:var(--ink-3); margin:0 0 16px; }
.lp-card label{ display:block; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0 0 5px; }
.lp-card input, .lp-card select, .lp-card textarea{ width:100%; font:inherit; font-size:15px;
  padding:11px 12px; border:1px solid var(--line); border-radius:2px;
  background:var(--ground); color:var(--ink); margin:0 0 13px; }
.lp-card textarea{ min-height:76px; resize:vertical; }
.lp-card .fine{ font-size:11.5px; line-height:1.6; color:var(--ink-3); margin:10px 0 0; }
.lp-card .fine a{ color:var(--gold-text); }
.lp-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.lp-gallery{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .lp-gallery{ grid-template-columns:repeat(3,1fr); } }
.lp-gallery .g{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:2px;
  background:linear-gradient(160deg,#DCE5EA,#C9D6DE); }
.lp-gallery .g img{ width:100%; height:100%; object-fit:cover; display:block; }
.lp-gallery .g span{ position:absolute; inset:0; display:grid; place-items:center;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(27,26,24,.30); font-weight:700; }

.lp-video{ position:relative; aspect-ratio:16/9; background:#1B1A18;
  border-radius:3px; overflow:hidden; }
.lp-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lp-video .ph{ position:absolute; inset:0; display:grid; place-items:center; gap:6px;
  align-content:center; color:rgba(255,255,255,.42); text-align:center; padding:20px; }
.lp-video .ph b{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.lp-video .ph span{ font-size:13px; color:rgba(255,255,255,.34); }

.lp-oh{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.lp-oh div{ border:1px solid var(--line); border-radius:2px; padding:11px 15px;
  background:var(--surface); font-size:14px; }
.lp-oh b{ display:block; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-text); margin-bottom:3px; }

.lp-agent{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.lp-agent .who{ min-width:220px; }
.lp-agent .nm{ font-family:"Newsreader",Georgia,serif; font-size:21px; margin:0; }
.lp-agent .ti{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-text); font-weight:600; margin:5px 0 0; }
.lp-agent .ct{ font-size:14px; margin:12px 0 0; line-height:1.85; }
.lp-agent .ct a{ color:var(--ink); }

.lp-qr{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.lp-qr img{ width:118px; height:118px; background:#fff; padding:7px;
  border:1px solid var(--line); border-radius:3px; }
.lp-qr p{ font-size:13.5px; color:var(--ink-3); max-width:40ch; margin:0; }

.lp-disc{ font-size:11.5px; line-height:1.7; color:var(--ink-3); max-width:80ch; }
/* This one is a sentence addressed to the reader, not fine print, and at 11.5px
   it read as a legal footnote. Body size and body colour, so it says what it
   means. The other .lp-disc on the page really is a disclaimer and stays small. */
.lp-oh .lp-disc{ font-size:15px; color:var(--ink-2); line-height:1.6; }


/* a listing card that has a page of its own */
a.prop.plink{ text-decoration:none; color:inherit; display:block;
  transition:border-color .15s, box-shadow .15s; }
a.prop.plink:hover{ border-color:var(--gold); }
a.prop.plink:hover .pmore{ color:var(--gold-text); }
.pmore{ display:inline-block; margin-top:12px; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; color:var(--ink-3); }
.pmore::after{ content:" \2192"; }


/* A property page is a single property website. It already carries her name,
   licence, phone, email and the Intero branding in the Listed by block, and
   the full site footer repeats all of it a few hundred pixels below, plus a
   second QR pointing somewhere other than the property. The four column
   footer comes off; the legal strip stays, because the badges and both DRE
   numbers belong on every page. */
body.lp footer .fgrid{ display:none; }
body.lp footer .legal{ border-top:0; margin-top:0; padding-top:0; }
body.lp footer{ padding-block:30px 34px; }


/* Second round QC: the smaller inline controls were under the 24px minimum
   target size on a phone. Padding only, so the type stays where it was. */
@media (max-width:760px){
  .herolinks a{ padding-block:9px; }
  /* Contact rows and breadcrumbs stand on their own line, so they are not
     covered by the inline exception and need a real target. */
  .ctrow a{ padding-block:8px; display:inline-block; }
  .crumb a, .crumb span{ padding-block:8px; display:inline-block; }
  /* the standalone back link under an area form and an article */
  .pad > .wrap > p > a[href="/"], .backlink, a.backlink{ padding-block:7px; display:inline-block; }
  .legal a{ padding:6px 0; display:inline-block; }
}

/* ---- three ways to sell -------------------------------------------------
   Short card so a seller can recognise their situation fast, with the full
   copy one tap away rather than deleted. The detail panel is plain hidden
   content, so it is in the page for search and for anyone who never taps. */
.sway{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:30px; align-items:start; }
@media (min-width:820px){ .sway{ grid-template-columns:repeat(3,1fr); gap:20px; } }
.sw{ background:var(--surface); border:1px solid var(--line); border-radius:3px;
  display:flex; flex-direction:column; overflow:hidden; }
.sw .top{ aspect-ratio:2.05; position:relative; container-type:inline-size;
  background:#1B1A18; }
.sw .top img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Typographic band. Deliberately dark in both themes, the way a photo would be. */
.sw .bandin{ position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; padding:7cqw 8cqw 10cqw; color:#F4F0E8; }
.sw .bandin .bmk{ width:5.4cqw; height:5.4cqw; margin-bottom:2.6cqw; color:#C9AB7C;
  flex:none; display:block; }
.sw .bandin .bmk svg{ width:100%; height:100%; display:block; fill:none;
  stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sw .bandin p{ font-family:"Newsreader",Georgia,serif; font-weight:300; font-size:6.5cqw;
  line-height:1.14; letter-spacing:-.018em; margin:0; max-width:20ch; text-wrap:balance; }
.sw .bandin p em{ font-style:normal; color:#C9AB7C; }
.sw .bandin .brule{ position:absolute; left:8cqw; bottom:5.4cqw; width:9cqw; height:1px;
  background:#C9AB7C; opacity:.55; }
/* In dark mode the card surface is near black too, so lift the band a shade
   or its edge disappears. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sw .top{ background:#242019; } }
:root[data-theme="dark"] .sw .top{ background:#242019; }
.sw .med{ position:absolute; left:50%; bottom:-25px; transform:translateX(-50%); z-index:2;
  width:50px; height:50px; border-radius:50%; background:var(--gold);
  display:grid; place-items:center; border:3px solid var(--surface); }
.sw .med svg{ width:22px; height:22px; display:block; fill:none; stroke:#fff;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sw .in{ padding:36px 20px 20px; display:flex; flex-direction:column; flex:1; }
.sw h3{ font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:22px;
  line-height:1.2; text-align:center; margin:0; text-wrap:balance; }
.sw .kind{ font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700; text-align:center; margin:7px 0 0; }
.sw ul{ list-style:none; margin:17px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sw ul li{ display:flex; gap:10px; font-size:15px; line-height:1.5; color:var(--ink-2); padding:0; }
.sw ul li::before{ content:none; }
.sw .tk{ flex:0 0 18px; width:18px; height:18px; margin-top:2px; border-radius:50%;
  background:rgba(169,137,95,.15); display:grid; place-items:center; }
.sw .tk svg{ width:10px; height:10px; fill:none; stroke:var(--gold-text);
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.sw .openbtn{ margin-top:auto; padding-top:18px; }
.sw .openbtn button{ width:100%; font:inherit; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700; color:var(--gold-text); cursor:pointer;
  background:transparent; border:1px solid var(--accent); border-radius:2px;
  padding:13px 10px; display:flex; align-items:center; justify-content:center; gap:9px;
  transition:background .16s ease, color .16s ease; }
.sw .openbtn button:hover{ background:var(--accent); color:#fff; }
.sw .openbtn button .cv{ width:9px; height:9px; fill:none; stroke:currentColor;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.sw.on .openbtn button .cv{ transform:rotate(90deg); }
.sw .deep{ border-top:1px solid var(--line-soft); margin-top:18px; padding-top:2px; }
.sw .bk{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.sw .bk:last-child{ border-bottom:0; padding-bottom:2px; }
.sw .bk .ic{ flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  background:rgba(169,137,95,.15); display:grid; place-items:center; }
.sw .bk .ic svg{ width:15px; height:15px; fill:none; stroke:var(--gold-text);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sw .bk .kk{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700; }
.sw .bk .vv{ font-size:14.5px; line-height:1.55; color:var(--ink-2); margin-top:4px; }
/* What it costs. Sits directly under the three paths, because that is the moment
   a seller starts thinking about money. Light card on purpose: three dark bands
   already sit above it. */
.costs{ margin-top:34px; background:var(--surface); border:1px solid var(--line);
  border-radius:3px; padding:24px 22px 22px; }
.costs .ct{ font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:22px;
  line-height:1.2; margin:0; letter-spacing:-.005em; }
.costs .cs{ font-size:15px; line-height:1.6; color:var(--ink-3); margin:8px 0 0; max-width:62ch; }
.costs .cgrid{ display:grid; gap:16px; margin-top:20px; }
@media(min-width:760px){ .costs .cgrid{ grid-template-columns:repeat(2,1fr); gap:18px 26px; } }
.costs .ci{ border-left:2px solid var(--gold); padding-left:14px; }
.costs .ci b{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700; margin-bottom:5px; }
.costs .ci span{ display:block; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.costs .cfoot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px; }
.costs .cfoot .or{ font-size:14px; color:var(--ink-3); }
@media (max-width:760px){ .sw ul li{ font-size:16px; } .sw .bk .vv{ font-size:15px; } }

.page{ display:none; } .page.on{ display:block; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ---- reading size on a phone -------------------------------------------
   Two thirds of the body copy on this site was rendering under 15px on a
   390px screen, in a mid grey. It cleared the contrast minimum and was still
   hard work to read. Sentences get a 16px floor here and fine print a 13px
   one. Micro labels — eyebrows, pills, the logo lockup, photo captions — are
   design elements rather than reading copy and keep their sizes, or the
   layout breaks. */
@media (max-width: 760px){
  body{ font-size:16.5px; line-height:1.68; }

  p, li, dd, blockquote,
  .sub, .bioText p, .bioLead, .thanks p, .msg .mb, .notes .nt p,
  .guideAcc .accBody p, .guideAcc .accBody li, .card li, .hood p,
  .pstep .tx span, .calcin .lead, .prop .hook, .offer .say,
  .postrow .pdek, .ctsub, .lp-facts div, .valtool p.int{
    font-size:16px; line-height:1.65;
  }

  /* fine print stays smaller than the prose, but not tiny */
  .legal, .consentfine, .fine, .valtool .fine, .lp-disc, .fappnote,
  .calcnote, .mktnote, .ctmap .note, .postnav{
    font-size:13px; line-height:1.6;
  }

  /* headings were sized against 15px body copy; nudge so the step holds */
  h1{ line-height:1.12; }
  h2.sec{ line-height:1.2; }
}

/* ===== v93 approved changes ===== */
/* v93 C9: trail links are underlined, not colour only */
.crumb a{ text-decoration:underline; text-underline-offset:3px; }
#communities, #listings, #worth{ scroll-margin-top:var(--hh, 84px); }
@media (max-width:760px){ .pad > .wrap > p > a[href="/#communities"]{ padding-block:7px; display:inline-block; } }
.thanks:focus{ outline:none; }
/* v93 C25 */
.pagehero .in .herolede{ color:rgba(255,255,255,.92); font-size:16px; line-height:1.6; max-width:560px; margin:12px 0 18px; }
.pagehero .in .herobtn{ display:inline-block; background:#fff !important; color:#1B1A18 !important; border-color:#fff !important; }
#p-sellers .pagehero{ height:auto !important; min-height:clamp(300px,34vw,430px); }
/* v93 C26 */
.sellrev{ border-top:1px solid var(--line); }
.sellrev .srgrid{ display:grid; grid-template-columns:160px 1fr; gap:32px; align-items:start; margin-top:14px; }
.sellrev .srphoto{ width:160px; height:200px; object-fit:cover; object-position:top; display:block; }
.sellrev blockquote{ font-family:"Newsreader",Georgia,serif; font-size:20px; line-height:1.5; margin:0 0 6px; color:var(--ink); }
.sellrev cite{ display:block; font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:20px; }
.sellrev .srz{ font-size:14px; color:var(--ink-2); margin:0; }
.sellrev .srz a{ text-decoration:underline; }
@media (max-width:760px){ .sellrev .srgrid{ grid-template-columns:1fr; gap:18px; } .sellrev .srphoto{ width:120px; height:150px; } }
.quote .qz{ font-size:13.5px; margin:14px 0 0; color:#EAF0F3; }
.quote .qz a{ color:#EAF0F3; text-decoration:underline; }
/* v93 C28 */
@media (max-width:1040px){
  header .hbar{ padding-left:24px; padding-right:24px; }
  nav a{ font-size:15px; min-height:44px; display:flex; align-items:center; padding-top:0; padding-bottom:0; }
  nav a.cta{ padding:0 13px; }
}
/* v93 C29 */
@media (max-width:860px){ .biograph{ display:flex; flex-direction:column; }
  .biograph .bioPhoto{ order:-1; width:calc(100% - 48px); margin:28px 24px 0; aspect-ratio:1/1; } }
.sellcity{ padding-top:34px; padding-bottom:34px; }
.sellcity a{ text-decoration:underline; text-underline-offset:3px; }
/* v93 C46 slideshow pause */
.hero .hpause{ position:absolute; right:18px; bottom:16px; z-index:3; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.7); background:rgba(0,0,0,.18); color:#fff; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; }
.hero .hpause svg{ width:16px; height:16px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hero .hpause .pl{ display:none; fill:#fff; stroke:none; }
.hero .hpause.off .ps{ display:none; } .hero .hpause.off .pl{ display:inline; }
.hero .hpause:hover{ background:rgba(0,0,0,.35); }
.hero .hpause:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* v93 C46 skip link: hidden until the first Tab */
.skip{ position:absolute; left:12px; top:12px; z-index:100; background:#fff; color:#1B1A18 !important;
  padding:10px 16px; font-size:14px; font-weight:600; text-decoration:underline; border:2px solid #1B1A18; }
.skip:not(:focus){ width:1px; height:1px; padding:0; border:0; overflow:hidden; white-space:nowrap;
  clip:rect(0 0 0 0); clip-path:inset(50%); }
main:focus{ outline:none; }


/* v99: her photo in the contact blocks (round, like the card and letter). */
.ctme{ display:flex; align-items:center; gap:16px; margin:0 0 22px; }
.ctpic{ flex:0 0 72px; width:72px; height:72px; border-radius:50%; object-fit:cover;
        object-position:50% 22%; display:block; border:1px solid rgba(201,162,99,.55); }
.ctme .nm{ display:block; color:#fff; font-size:17px; font-weight:600; line-height:1.3; }
.ctme .rl{ display:block; margin-top:6px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
           color:rgba(255,255,255,.62); font-weight:700; line-height:1.5; }
.footpic{ display:block; width:60px; height:60px; border-radius:50%; object-fit:cover;
          object-position:50% 22%; margin:0 0 14px; border:1px solid rgba(201,162,99,.55); }