:root{
  --bg:#FBF7F0; --card:#FFFFFF; --ink:#1A1713; --mut:#6A6257; --line:#E6DED0;
  --accent:#1F5C4A; --accentlt:#7FBFA8; --accentsoft:#E6F0EA; --accentsh:rgba(31,92,74,.45);
  --onaccent:#FFFFFF; --markc:#1F5C4A; --mark2base:#7FBFA8;
  --navbg:rgba(251,247,240,.94); --navink:#1A1713; --navline:#E6DED0;
  --herobg:#14100C;
  --proofbg:#14100C; --proofink:#FFFFFF; --proofmut:rgba(255,255,255,.56); --proofline:rgba(255,255,255,.16);
  --bandbg:#14100C; --bandink:#FFFFFF; --bandmut:rgba(255,255,255,.75);
  --formbg:#FFFFFF; --formline:#E6DED0; --formsh:0 30px 70px -40px rgba(26,23,19,.4);
  --footbg:#14100C; --footink:#FFFFFF; --footmut:rgba(255,255,255,.58); --footline:rgba(255,255,255,.14);
  --fdisp:'Bricolage Grotesque',system-ui,sans-serif; --fbody:'Figtree',system-ui,sans-serif;
  --flabel:'Figtree',system-ui,sans-serif;
  --dispw:700; --displs:-.035em; --brandw:700; --imgr:14px; --btnr:999px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--fbody);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--fdisp);line-height:1.02;font-weight:var(--dispw);letter-spacing:var(--displs)}
h1{font-size:clamp(2.7rem,6.2vw,5.2rem)}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:1.22rem;line-height:1.25;letter-spacing:-.01em}
p{max-width:64ch}
::selection{background:var(--accent);color:var(--onaccent)}

.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:860px}
.sec{padding:clamp(64px,8vw,128px) 0}
.sec--tight{padding:clamp(44px,5vw,76px) 0}
.eyebrow{font-family:var(--flabel);font-weight:600;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:0 0 auto}
.lede{font-size:clamp(1.08rem,1.5vw,1.3rem);color:var(--mut);margin-top:20px;line-height:1.55}
.muted{color:var(--mut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--accent);color:var(--onaccent);
  padding:14px 18px;border-radius:10px;font-weight:600;min-height:44px;display:inline-flex;
  align-items:center}
.skip:focus{left:12px;top:12px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------------- reveal ---------------- */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:100;transition:background .3s,border-color .3s,backdrop-filter .3s;
  background:var(--navbg);border-bottom:1px solid var(--navline);backdrop-filter:saturate(160%) blur(10px)}
body[data-hero="photo"] .nav{position:fixed;left:0;right:0;background:transparent;border-color:transparent;backdrop-filter:none}
body[data-hero="photo"] .nav .brand__txt,body[data-hero="photo"] .nav .nav__links a,
body[data-hero="photo"] .nav .lang a,body[data-hero="photo"] .burger{color:#fff}
body[data-hero="photo"] .nav .lang{border-color:rgba(255,255,255,.4)}
body[data-hero="photo"] .nav .burger{border-color:rgba(255,255,255,.4)}
body[data-hero="photo"] .nav .brand img{filter:brightness(0) invert(1)}
/* The nav mark is two-tone. Forcing every path white over a photographic hero
   flattened it into a silhouette, so instead the primary shape follows the nav's
   own colour and the secondary follows --mark2. Both flip back when the nav goes
   solid on scroll. */
body[data-hero="photo"] .nav .brand__mark{color:#fff;--mark2:rgba(255,255,255,.6)}
.nav.solid{background:var(--navbg)!important;border-color:var(--navline)!important;
  backdrop-filter:saturate(160%) blur(10px)!important}
body[data-hero="photo"] .nav.solid .brand__txt,body[data-hero="photo"] .nav.solid .nav__links a,
body[data-hero="photo"] .nav.solid .lang a,body[data-hero="photo"] .nav.solid .burger{color:var(--navink)}
body[data-hero="photo"] .nav.solid .lang,body[data-hero="photo"] .nav.solid .burger{border-color:var(--navline)}
body[data-hero="photo"] .nav.solid .brand img{filter:none}
body[data-hero="photo"] .nav.solid .brand__mark{color:var(--markc);--mark2:var(--mark2base)}
.nav__in{display:flex;align-items:center;gap:18px;height:78px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
/* width:auto lets a BROKEN logo expand to the width of its alt text, which blew the
   header past the viewport on the 404 page before DNS cutover, when the absolute
   asset URL is not reachable yet. A capped width keeps the header intact either way. */
.brand img{height:40px;width:auto;aspect-ratio:501/193;max-width:190px;overflow:hidden;object-fit:contain;
  font-size:.7rem;color:var(--mut)}
@media (max-width:560px){.brand img{max-width:104px}}
.brand__mark{height:36px;width:auto;color:var(--markc);--mark2:var(--mark2base)}
.brand__txt{font-family:var(--fdisp);font-weight:var(--brandw);font-size:1.02rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navink);white-space:nowrap;line-height:1.05;transition:color .3s}
.brand__txt small{display:block;font-family:var(--flabel);font-weight:600;font-size:.55rem;letter-spacing:.22em;
  color:var(--accent);font-weight:600}
.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__links a{font-size:.88rem;text-decoration:none;color:var(--navink);padding:9px 12px;border-radius:8px;
  white-space:nowrap;opacity:.85;transition:opacity .2s,color .3s;font-weight:500}
.nav__links a:hover{opacity:1}
.nav__links a[aria-current=page]{opacity:1;font-weight:600}
.nav__links a[aria-current=page]::after{content:"";display:block;height:2px;background:var(--accent);
  margin-top:4px;border-radius:2px}
.lang{display:inline-flex;border:1px solid var(--navline);border-radius:999px;overflow:hidden;margin-left:10px;flex:0 0 auto;transition:border-color .3s}
.lang a{padding:6px 12px;font-family:var(--flabel);font-weight:600;font-size:.68rem;letter-spacing:.1em;text-decoration:none;
  color:var(--navink);opacity:.72;transition:color .3s}
.lang a.on{background:var(--accent);color:var(--onaccent)!important;opacity:1;font-weight:700}
.navcta{flex:0 0 auto;margin-left:10px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--navline);border-radius:9px;
  width:46px;height:44px;cursor:pointer;color:var(--navink);font-size:1.15rem;align-items:center;justify-content:center;transition:color .3s,border-color .3s}
@media(max-width:1060px){
  .nav__links{position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navbg);border-bottom:1px solid var(--navline);padding:8px 20px 22px;display:none;
    max-height:calc(100vh - 78px);overflow:auto;backdrop-filter:saturate(160%) blur(14px)}
  .nav__links.open{display:flex}
  body[data-hero="photo"] .nav__links.open a,body[data-hero="photo"] .nav__links.open .lang a{color:var(--navink)}
  .nav__links a{padding:14px 6px;border-bottom:1px solid var(--navline);opacity:1;font-size:1.05rem}
  .nav__links a[aria-current=page]::after{display:none}
  .lang{margin:16px 0 0;align-self:flex-start}
  .navcta{margin:14px 0 0}
  .burger{display:inline-flex}
}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--fbody);
  font-weight:600;font-size:.97rem;padding:16px 30px;border-radius:var(--btnr);text-decoration:none;
  border:1px solid transparent;cursor:pointer;line-height:1;text-align:center;position:relative;
  transition:transform .15s cubic-bezier(.2,.7,.3,1),box-shadow .2s,background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn--p{background:var(--accent);color:var(--onaccent);box-shadow:0 8px 24px -10px var(--accentsh)}
.btn--p:hover{box-shadow:0 14px 32px -10px var(--accentsh)}
.btn--o{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--o:hover{border-color:var(--ink)}
.btn--ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.34);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.2);border-color:#fff}
.btn--l{background:#fff;color:var(--ink)}
.btn--sm{padding:11px 20px;font-size:.87rem}
.crumbs{font-size:.84rem;color:var(--muted);margin:0 0 18px;display:flex;flex-wrap:wrap;
  gap:8px;align-items:center}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--ink);border-bottom-color:currentColor}
.crumbs b{color:var(--ink);font-weight:600}
/* A pasted URL in a CRM description pushed a property page 14px wider than an iPhone.
   min-width:0 stops a grid child stretching; this stops a single word doing it. */
.lede,.prop__addr,.prop__meta,.crumbs b,.fine,.card p,.step p{overflow-wrap:anywhere}
.crumbs span{opacity:.5}
.btn--wide{width:100%}
.btn--lg{padding:19px 38px;font-size:1.05rem}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}

/* ---------------- photo hero ---------------- */
.phero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;
  background:var(--herobg);overflow:hidden;isolation:isolate}
.phero__img{position:absolute;inset:0;z-index:-2}
.phero__img img{width:100%;height:100%;object-fit:cover;animation:slowzoom 26s ease-out forwards}
@keyframes slowzoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.phero__img img{animation:none}}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,12,18,.62) 0%,rgba(8,12,18,.24) 30%,rgba(8,12,18,.58) 66%,rgba(8,12,18,.9) 100%),
             linear-gradient(90deg,rgba(8,12,18,.72) 0%,rgba(8,12,18,.42) 42%,rgba(8,12,18,0) 78%)}
@media(max-width:820px){
  .phero::after{background:linear-gradient(180deg,rgba(8,12,18,.7) 0%,rgba(8,12,18,.45) 30%,rgba(8,12,18,.72) 62%,rgba(8,12,18,.94) 100%)}
}
.phero__in{position:relative;padding-top:150px;padding-bottom:clamp(40px,5vw,70px);width:100%}
.phero h1{color:#fff;max-width:17ch;text-wrap:balance}
.phero .eyebrow{color:#fff;opacity:.9}
.phero .lede{color:rgba(255,255,255,.88);max-width:52ch;margin-top:24px;
  text-shadow:0 1px 20px rgba(0,0,0,.35)}
.phero__cap{position:absolute;right:24px;bottom:22px;font-family:var(--flabel);font-weight:600;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);z-index:2;text-align:right}
@media(max-width:700px){.phero__cap{display:none}}

/* proof strip under hero */
.proof{background:var(--proofbg);color:var(--proofink);border-bottom:1px solid var(--proofline)}
/* Sized to the number of facts there are, rather than forcing four. A strip that
   adapts lets a real number replace a categorical claim without dropping one. */
.proof__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:0}
@media(max-width:800px){.proof__in{grid-template-columns:repeat(2,1fr)}}
.proof__i{padding:26px 26px 26px 0;border-right:1px solid var(--proofline)}
.proof__i:last-child{border-right:0}
@media(max-width:800px){
  .proof__i{border-bottom:1px solid var(--proofline);padding:20px 16px 20px 0}
  .proof__i:nth-child(2n){border-right:0}
  .proof__i:nth-last-child(-n+2){border-bottom:0}
}
.proof__i b{display:block;font-family:var(--fdisp);font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.02em;
  line-height:1.05;margin-bottom:5px}
.proof__i span{font-family:var(--flabel);font-weight:600;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--proofmut)}

/* ---------------- editorial bleed rows ---------------- */
.bleed{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,5vw,72px)}
.bleed__img{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--imgr)}
.bleed__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.bleed:hover .bleed__img img{transform:scale(1.04)}
.bleed--r .bleed__img{order:2}
@media(min-width:1100px){
  .bleed--full .bleed__img{width:calc(50vw - clamp(15px,2.5vw,36px));max-width:none}
  .bleed--full:not(.bleed--r) .bleed__img{margin-left:calc(-1 * (50vw - 50%));justify-self:end}
  .bleed--full.bleed--r .bleed__img{margin-right:calc(-1 * (50vw - 50%))}
}
@media(max-width:820px){.bleed{grid-template-columns:1fr}.bleed--r .bleed__img{order:0}}
.bleed__txt h2{margin-bottom:6px}

/* stat overlay on a bleed image */
.floatcard{position:absolute;left:0;bottom:0;background:var(--card);padding:22px 26px;
  border-radius:0 var(--imgr) 0 var(--imgr);max-width:74%;box-shadow:0 20px 50px -24px rgba(0,0,0,.45)}
.floatcard b{display:block;font-family:var(--fdisp);font-size:1.6rem;letter-spacing:-.02em;line-height:1}
.floatcard span{font-family:var(--flabel);font-weight:600;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

/* ---------------- grids / cards ---------------- */
.grid{display:grid;gap:clamp(20px,2.4vw,34px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
/* A grid item's default min-width is auto, so it refuses to shrink below the widest
   thing inside it and pushes the page wider than the screen. Raising the form control
   font size to 16px (see mobile ergonomics) grew those minimums and did exactly that
   on the ASAP calculators at 320px. Letting items shrink is the general fix. */
.grid>*,.split>*,.fr>*,.fr2>*{min-width:0}
input,select,textarea{max-width:100%}

/* borderless editorial card: rule on top, no box */
.card{position:relative;padding-top:26px;border-top:2px solid var(--ink)}
.card h3{margin-bottom:10px}
.card p{font-size:.97rem;color:var(--mut)}
.card__n{font-family:var(--flabel);font-weight:600;font-size:.68rem;letter-spacing:.14em;color:var(--accent);
  font-weight:700;margin-bottom:14px;display:block}
.card a.more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:600;font-size:.92rem;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;
  transition:gap .2s}
.card a.more:hover{gap:12px}
.card--soft{border-top:0;background:var(--card);border-radius:var(--imgr);padding:30px;
  border:1px solid var(--line)}

/* card with a photo on top */
.pcard{text-decoration:none;display:block}
.pcard__img{aspect-ratio:3/2;overflow:hidden;border-radius:var(--imgr);margin-bottom:18px}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .pcard__img img{transform:scale(1.05)}

/* ---------------- steps as a timeline ---------------- */
.steps{counter-reset:s;position:relative}
.step{counter-increment:s;position:relative;padding:0 0 34px 56px}
.step:last-child{padding-bottom:0}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font-family:var(--flabel);font-weight:600;font-size:.76rem;font-weight:700;color:var(--accent);
  width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  background:var(--bg)}
.step::after{content:"";position:absolute;left:17px;top:34px;bottom:-2px;width:1px;background:var(--line)}
.step:last-child::after{display:none}
.step h3{margin-bottom:7px}
.step p{font-size:.97rem;color:var(--mut)}
.band .step::before{background:var(--bandbg);border-color:rgba(255,255,255,.26);color:var(--accentlt)}
.band .step::after{background:rgba(255,255,255,.2)}

/* ---------------- band ---------------- */
.band{background:var(--bandbg);color:var(--bandink)}
.band h2,.band h3{color:var(--bandink)}
.band p,.band .lede{color:var(--bandmut)}
.band .eyebrow{color:var(--accentlt)}
.band .btn--o{color:var(--bandink);border-color:rgba(255,255,255,.3)}
.band .btn--o:hover{border-color:#fff}
.band .card{border-top-color:rgba(255,255,255,.35)}
.band .card p{color:var(--bandmut)}
.band .card a.more{color:#fff}

/* ---------------- listings ---------------- */
.props{display:grid;gap:clamp(22px,2.4vw,34px);grid-template-columns:repeat(3,1fr)}
@media(max-width:940px){.props{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.props{grid-template-columns:1fr}}
.prop{text-decoration:none;display:flex;flex-direction:column;position:relative}
.prop__img{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--imgr);
  background:var(--accentsoft);margin-bottom:16px}
.prop__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.prop:hover .prop__img img{transform:scale(1.06)}
.prop__img .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--flabel);font-weight:600;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.prop__price{position:absolute;left:0;bottom:0;right:0;padding:44px 16px 14px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(8,12,18,.82));
  font-family:var(--fdisp);font-size:1.5rem;color:#fff;letter-spacing:-.02em;line-height:1}
.ofbadge{position:absolute;left:12px;top:12px;z-index:3;background:var(--accent);color:var(--onaccent);
  font-family:var(--flabel);font-weight:600;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;
  border-radius:999px;font-weight:700}
/* A card can carry more than one tag (on-market + seller financing), so the tags
   live in a row rather than each claiming the same absolute corner. */
.tagrow{position:absolute;left:12px;top:12px;z-index:3;display:flex;gap:6px;flex-wrap:wrap;
  max-width:calc(100% - 24px)}
.tagrow .ofbadge,.tagrow .mkbadge{position:static;left:auto;top:auto}
.mkbadge{font-family:var(--flabel);font-weight:600;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;font-weight:700;background:rgba(8,12,18,.72);color:#fff;
  border:1px solid rgba(255,255,255,.3)}
.mkbadge--on{background:#fff;color:#0B0E13;border-color:#fff}
.prop__addr{font-family:var(--fdisp);font-size:1.12rem;font-weight:var(--dispw);letter-spacing:-.01em;
  line-height:1.2;margin-bottom:6px}
.prop__meta{font-family:var(--flabel);font-weight:600;font-variant-numeric:tabular-nums;font-size:.7rem;letter-spacing:.07em;color:var(--mut);text-transform:uppercase}
.prop__terms{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;gap:22px;flex-wrap:wrap}
.prop__terms div{font-family:var(--flabel);font-weight:600;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.prop__terms b{display:block;font-family:var(--fdisp);font-size:1.12rem;color:var(--ink);letter-spacing:-.01em;
  text-transform:none;font-weight:var(--dispw);margin-top:3px}
/* The all-in line sits under the P&I terms because taxes and insurance are NOT
   inside the monthly the CRM stores. Quiet by design -- it is a clarification,
   not a second headline price. */
.prop__allin{margin-top:10px;font-size:.78rem;color:var(--mut);letter-spacing:.01em}
.prop__allin b{color:var(--ink);font-weight:600}
/* ---------------- ways to buy ---------------- */
.wbs{display:grid;gap:18px;margin-top:34px}
/* The card keeps its own light surface even inside a dark band, so it has to reset
   the text colour the band set -- otherwise it is white on white. */
.wb{border:1px solid var(--line);border-radius:var(--imgr);background:var(--card);
  padding:26px 26px 22px;color:var(--ink)}
.band .wb,.band .wb h3,.band .wb__r p{color:var(--ink)}
.band .wb__s,.band .wb__r span{color:var(--mut)}
.band .wb{border-color:color-mix(in srgb,var(--ink) 12%,transparent)}
/* The band redefines --accent for its own dark surface; the numeral sits on the
   card's light surface, so it needs the page's accent back. */
.band .wb__n{color:var(--accentd,var(--accent))}
.wb__h{display:flex;gap:18px;align-items:baseline}
.wb__n{font-family:var(--fdisp);font-weight:var(--dispw);font-size:1.5rem;color:var(--accent);
  margin:0;line-height:1;letter-spacing:-.02em;flex:0 0 auto}
.wb h3{font-size:1.32rem;line-height:1.2;margin:0 0 4px;color:var(--ink)}
.wb__s{color:var(--mut);margin:0;font-size:.98rem}
.wb__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px 26px;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.wb__r span{display:block;font-family:var(--flabel);font-weight:600;font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.wb__r p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink)}
@media (min-width:900px){
  .wb__h{gap:22px}
  .wb__n{font-size:1.9rem}
}
/* ---------------- inventory map ---------------- */
/* Drawn inline from real county geometry: no tiles, no CDN, no third-party request,
   and nothing that asks the visitor for their location. */
.mp{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:start;margin-top:30px}
.mp__wrap{position:relative;border:1px solid var(--line);border-radius:var(--imgr);
  background:var(--card);overflow:hidden}
.mp__svg{display:block;width:100%;height:auto;background:var(--card);aspect-ratio:1000/720}
.mp__state{stroke:color-mix(in srgb,var(--ink) 40%,transparent);stroke-width:1.6;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* The two states get slightly different tints so the state line reads at a glance --
   which matters here, because whether a house is in Missouri or Kansas changes the
   taxes, the paperwork and which licence applies. */
.mp__state--missouri{fill:color-mix(in srgb,var(--accent) 7%,var(--card))}
.mp__state--kansas{fill:color-mix(in srgb,var(--ink) 5%,var(--card))}
.mp__cty{fill:none;stroke:color-mix(in srgb,var(--ink) 13%,transparent);
  stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 3}
/* Real basemap, drawn from Census TIGER geometry. Weights are chosen so the
   hierarchy reads at a glance: interstates loudest, then US routes, then state
   routes as texture. Every stroke is non-scaling so the map stays crisp at any
   rendered size -- which a raster tile would not. */
.mp__city{fill:color-mix(in srgb,var(--ink) 4%,transparent);stroke:none}
.mp__water{fill:#9EC6DE;stroke:none;opacity:.85}
.mp__rd{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.mp__rd--s{stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:.7}
.mp__rd--u{stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:1.15}
.mp__rd--icase{stroke:color-mix(in srgb,var(--ink) 42%,transparent);stroke-width:3.4}
.mp__rd--i{stroke:var(--card);stroke-width:1.9}
.mp__shield rect{fill:var(--card);stroke:color-mix(in srgb,var(--ink) 42%,transparent);
  stroke-width:1;vector-effect:non-scaling-stroke}
.mp__shield text{fill:var(--ink);font-family:var(--flabel);font-weight:700;font-size:11px;
  text-anchor:middle;letter-spacing:.02em}
.mp__attr{position:absolute;right:12px;bottom:12px;margin:0;font-size:.58rem;
  letter-spacing:.02em;color:var(--mut);background:color-mix(in srgb,var(--card) 82%,transparent);
  padding:3px 8px;border-radius:999px}
@media (max-width:560px){.mp__attr{display:none}}
.mp__dot{fill:color-mix(in srgb,var(--ink) 35%,transparent)}
.mp__place{fill:var(--mut);font-family:var(--fbody);font-size:13px;letter-spacing:.01em;
  paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.mp__pin{cursor:pointer}
.mp__hit{fill:transparent;pointer-events:all}
.mp__halo{fill:var(--accent);opacity:0;transform-origin:center;transition:opacity .18s ease;
  pointer-events:none}
.mp__drop{fill:var(--accent);stroke:var(--card);stroke-width:1.5;transition:transform .18s ease}
.mp__eye{fill:var(--card)}
.mp__pin:hover .mp__halo,.mp__pin:focus-visible .mp__halo,.mp__pin.on .mp__halo{opacity:.18}
.mp__pin:hover .mp__drop,.mp__pin:focus-visible .mp__drop{transform:translateY(-3px) scale(1.12)}
.mp__pin.on .mp__drop{transform:translateY(-3px) scale(1.22)}
.mp__pin:focus{outline:none}
.mp__pin:focus-visible .mp__drop{stroke:var(--ink);stroke-width:2}
.mp__cnt{position:absolute;left:14px;bottom:12px;margin:0;font-family:var(--flabel);font-weight:600;
  font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.mp__cnt b{color:var(--ink);font-size:.78rem}
.mp__card{border:1px solid var(--line);border-radius:var(--imgr);background:var(--card);
  padding:20px;position:sticky;top:96px}
.mp__hint{margin:0;color:var(--mut);font-size:.95rem}
.mp__card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;margin-bottom:14px}
.mp__card h3{font-size:1.15rem;line-height:1.25;margin:0 0 4px}
.mp__meta{color:var(--mut);font-size:.85rem;margin:0 0 14px}
.mp__rows{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:0 0 14px;
  padding-top:14px;border-top:1px solid var(--line)}
.mp__r span{display:block;font-family:var(--flabel);font-weight:600;font-size:.58rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.mp__r b{font-family:var(--fdisp);font-weight:var(--dispw);font-size:1.08rem;letter-spacing:-.01em}
.mp__r--wide{grid-column:1/-1}
.mp__r--wide b{font-size:1rem;font-family:var(--fbody);font-weight:600}
.mp__blurb{font-size:.88rem;color:var(--mut);margin:0 0 16px}
@media (max-width:900px){
  .mp{grid-template-columns:1fr}
  .mp__card{position:static}
  /* On a phone the full metro at page width renders about 340px across, which makes
     the pins too small to hit and the street names unreadable. The SVG keeps its
     aspect ratio and crops (preserveAspectRatio slice) instead of shrinking, so the
     map is drawn at a usable scale and the edges of the window go rather than the
     legibility. */
  .mp__svg{aspect-ratio:auto;height:min(76vh,560px)}
  /* The pin's hit area is an invisible disc in viewBox units; widening it here gets
     the rendered target past 44px without making the pin itself bigger, which would
     make the downtown cluster unreadable. `r` is a CSS geometry property, and a
     browser that ignores it falls back to the attribute. */
  .mp__hit{r:30}
  .mp__place{font-size:15px}
  .mp__shield text{font-size:13px}
  .mp__drop{stroke-width:2}
}
@media (prefers-reduced-motion:reduce){
  .mp__halo,.mp__drop{transition:none}
}
/* ---------------- listing filters ---------------- */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:22px;border:1px solid var(--line);
  border-radius:var(--imgr);background:var(--card);margin-bottom:34px}
.filters .f{display:flex;flex-direction:column;gap:0;min-width:130px;flex:1 1 130px}
.filters label{margin-bottom:6px}
.filters select,.filters input{padding:11px 12px;font-size:.94rem}
.filters .fbtn{flex:0 0 auto}
.filters__count{flex:1 1 100%;font-family:var(--flabel);font-weight:600;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);order:-1}
/* the Spanish label is much longer than the English one, so this must wrap */
.toggle{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;cursor:pointer;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--btnr);background:var(--bg);
  line-height:1.3;max-width:100%}
.toggle input{flex:0 0 auto}
@media(max-width:620px){.filters .f,.filters .fbtn{flex:1 1 100%;min-width:0}}
.toggle input{width:auto;padding:0;margin:0}
.chipbar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.chipbar a{font-family:var(--flabel);font-weight:600;font-size:.72rem;letter-spacing:.06em;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);color:var(--mut);text-decoration:none;transition:.2s}
.chipbar a:hover,.chipbar a[aria-current=page]{border-color:var(--accent);color:var(--accent)}
.chipbar a[aria-current=page]{background:var(--accentsoft);font-weight:700}

.feedmsg{padding:44px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:var(--imgr);
  grid-column:1/-1}
.skel{pointer-events:none}
.skel__img{aspect-ratio:4/3;border-radius:var(--imgr);margin-bottom:16px;
  background:linear-gradient(100deg,var(--accentsoft) 30%,rgba(255,255,255,.55) 50%,var(--accentsoft) 70%);
  background-size:220% 100%;animation:shimmer 1.5s linear infinite}
.skel__l{height:13px;border-radius:4px;background:var(--accentsoft);margin-bottom:9px}
.skel__l.s{width:55%}
@keyframes shimmer{to{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){.skel__img{animation:none}}
.band .skel__img,.band .skel__l{background:rgba(255,255,255,.08)}

/* ---------------- forms ---------------- */
.form{background:var(--formbg);border:1px solid var(--formline);border-radius:var(--imgr);
  padding:clamp(26px,3.2vw,40px);box-shadow:var(--formsh)}
.form h3{margin-bottom:8px;font-size:1.5rem}
.form .sub{font-size:.95rem;color:var(--mut);margin-bottom:26px}
.fr{display:grid;gap:18px}
.fr2{grid-template-columns:1fr 1fr}
@media(max-width:600px){.fr2{grid-template-columns:1fr}}
label{display:block;font-family:var(--flabel);font-weight:600;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mut);margin-bottom:8px;font-weight:600}
input,select,textarea{width:100%;font-family:var(--fbody);font-size:1.02rem;padding:15px 16px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 4px var(--accentsoft)}
textarea{min-height:112px;resize:vertical}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.fine{font-size:.79rem;color:var(--mut);margin-top:16px;line-height:1.5}
input.bad,select.bad,textarea.bad{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.ferr{display:block;margin-top:7px;font-size:.81rem;color:#B4232A;font-weight:500}
.sent{background:var(--formbg);border:1px solid var(--formline);border-radius:var(--imgr);
  padding:clamp(30px,4vw,48px);text-align:center;box-shadow:var(--formsh)}
.sent__tick{width:56px;height:56px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:var(--accentsoft);color:var(--accent);font-size:1.6rem;font-weight:700}
.sent h3{font-size:1.7rem;margin-bottom:10px}
.sent p{color:var(--mut);margin:0 auto 22px;max-width:40ch}
.note{border-radius:10px;padding:14px 16px;font-size:.93rem;margin-top:18px;display:none}
.note.ok{display:block;background:#E8F6EF;border:1px solid #A9DCC6;color:#12603F}
.note.bad{display:block;background:#FDECEC;border:1px solid #F3BDBD;color:#8C2020}

/* ---------------- calculators ---------------- */
.calc{background:var(--card);border:1px solid var(--line);border-radius:var(--imgr);padding:clamp(24px,3vw,36px)}
.calc__out{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:26px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
@media(max-width:640px){.calc__out{grid-template-columns:1fr}}
.calc__o{background:var(--bg);padding:18px}
.calc__o span{display:block;font-family:var(--flabel);font-weight:600;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.calc__o b{font-family:var(--fdisp);font-size:1.7rem;letter-spacing:-.02em;font-weight:var(--dispw)}
.disclaim{font-size:.8rem;color:var(--mut);margin-top:18px;padding:14px 16px;border-left:3px solid var(--accent);
  background:var(--accentsoft);border-radius:0 8px 8px 0}

/* ---------------- table ---------------- */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;margin-top:24px}
.tbl th,.tbl td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--line)}
.tbl thead th{font-family:var(--flabel);font-weight:600;font-variant-numeric:tabular-nums;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);
  border-bottom:2px solid var(--ink)}
.tbl td b{font-family:var(--fdisp);font-weight:var(--dispw)}
.tbl tbody tr:hover{background:var(--accentsoft)}
.tblwrap{overflow-x:auto}

/* ---------------- faq ---------------- */
details{border-bottom:1px solid var(--line);padding:22px 0}
summary{cursor:pointer;font-family:var(--fdisp);font-size:1.16rem;font-weight:var(--dispw);list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:0 0 auto;width:13px;height:13px;border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s}
details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
details p{margin-top:14px;font-size:.98rem;color:var(--mut)}

/* ---------------- motion ---------------- */
/* Everything here is enhancement: each rule degrades to a static page, and the
   whole block is switched off for anyone who has asked for reduced motion. */

/* Scroll progress, CSS-only. Browsers without scroll-driven animations simply
   never paint it, which is why it starts at scaleX(0). */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--accent);z-index:60;pointer-events:none}
@supports (animation-timeline:scroll()){
  .progress{animation:prog linear both;animation-timeline:scroll(root block)}
}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.card{transition:transform .32s cubic-bezier(.2,.7,.3,1),border-top-color .32s}
.card:hover{transform:translateY(-6px);border-top-color:var(--accent)}

.nav__links a{position:relative}
.nav__links a:not([aria-current=page])::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;
  height:2px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}

.prop{transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.prop:hover{transform:translateY(-5px)}
.prop__img img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.prop:hover .prop__img img{transform:scale(1.045)}

.more{position:relative;transition:gap .25s}
.more:hover{letter-spacing:.005em}

.bleed__img img{transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.bleed:hover .bleed__img img{transform:scale(1.03)}

details summary{transition:color .2s}
details summary:hover{color:var(--accent)}

/* A quiet cue that there is more page below a full-height photographic hero. */
.scrollcue{position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:3;width:22px;height:34px;
  border:2px solid rgba(255,255,255,.55);border-radius:12px}
.scrollcue::after{content:"";position:absolute;left:50%;top:6px;translate:-50% 0;width:3px;height:7px;
  border-radius:2px;background:rgba(255,255,255,.85);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}
  100%{opacity:0;transform:translateY(12px)}}

@media(prefers-reduced-motion:reduce){
  .progress{display:none}
  .card,.card:hover,.prop,.prop:hover{transform:none;transition:none}
  .prop__img img,.bleed__img img,.bleed:hover .bleed__img img,.prop:hover .prop__img img{
    transform:none;transition:none}
  .nav__links a:hover::after{transform:scaleX(0)}
  .scrollcue::after{animation:none}
}

/* A card that offers one "learn more" link loses everyone who was already ready to
   transact. Two actions, split by intent -- read about it, or start it. */
.card__acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.card__acts .more{margin-top:0}
.card__go{font-family:var(--flabel);font-weight:700;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 15px;border-radius:var(--btnr);text-decoration:none;
  background:var(--accent);color:var(--onaccent);transition:transform .2s,filter .2s;white-space:nowrap}
.card__go:hover{transform:translateY(-1px);filter:brightness(1.07)}
@media(prefers-reduced-motion:reduce){.card__go:hover{transform:none}}

/* ---------------- testimonials ---------------- */
/* Attribution carries a first name, a city and what the person was to us, because
   an unsourced first-name-only quote is the template tell. The feed refuses to
   serve anything unpublished or unattributed, so whatever lands here is real. */
.quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(18px,2.4vw,30px);margin-top:36px}
.quote{margin:0;padding:28px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--imgr);display:flex;flex-direction:column;gap:14px;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),border-color .32s}
.quote:hover{transform:translateY(-4px);border-color:var(--accent)}
.quote__stars{color:var(--accent);letter-spacing:.16em;font-size:.86rem;line-height:1}
.quote blockquote{margin:0;font-size:1.02rem;line-height:1.62;color:var(--ink)}
.quote blockquote::before{content:"“"}
.quote blockquote::after{content:"”"}
.quote figcaption{margin-top:auto;display:flex;flex-direction:column;gap:3px}
.quote figcaption b{font-family:var(--fdisp);font-weight:var(--dispw);font-size:1.02rem}
.quote__who,.quote__src{font-family:var(--flabel);font-weight:600;font-size:.63rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.quote__src a{color:var(--accent);text-decoration:none}
.quote__src a:hover{text-decoration:underline}
.band .quote{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.band .quote blockquote{color:var(--bandink)}
.band .quote figcaption b{color:var(--bandink)}
.band .quote__who,.band .quote__src{color:var(--bandmut)}
.band .quote__stars{color:var(--bandink)}

/* ---------------- before / after projects ---------------- */
/* Labelled side-by-side pairs, not a drag slider. A slider needs a hand on it,
   breaks on a phone, and leaves a crawler or a screen reader with nothing; a
   labelled pair also solves the bilingual problem without any extra machinery. */
.ba{display:grid;gap:clamp(30px,4vw,56px);margin-top:38px}
.bac{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.bac__pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bac__pair figure{margin:0;position:relative;overflow:hidden;border-radius:var(--imgr);
  background:var(--line)}
.bac__pair img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.bac__pair figure:hover img{transform:scale(1.04)}
.bac__pair figcaption{position:absolute;left:10px;top:10px;z-index:2;
  font-family:var(--flabel);font-weight:700;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 11px;border-radius:999px;
  background:rgba(8,12,18,.78);color:#fff;backdrop-filter:blur(6px)}
.bac__pair figure:last-child figcaption{background:var(--accent);color:var(--onaccent)}
.bac h3{font-family:var(--fdisp);font-weight:var(--dispw);font-size:1.5rem;
  letter-spacing:var(--displs);margin-bottom:4px}
.bac__tag{font-family:var(--flabel);font-weight:600;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block}
.bac__nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:14px;
  margin:18px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bac__nums div{display:flex;flex-direction:column;gap:3px}
.bac__nums dt{font-family:var(--flabel);font-weight:600;font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut)}
.bac__nums dd{margin:0;font-family:var(--fdisp);font-weight:var(--dispw);font-size:1.28rem;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bac p{font-size:.95rem;color:var(--mut);line-height:1.62}
@media (max-width:860px){.bac{grid-template-columns:1fr}}
@media (max-width:480px){.bac__pair{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .quote,.quote:hover{transform:none;transition:none}
  .bac__pair img,.bac__pair figure:hover img{transform:none;transition:none}}

/* ---------------- comparison table ---------------- */
/* The honest side-by-side. Every credible competitor in all three of these
   categories publishes one, and the column that is NOT us is written straight --
   a comparison that loses on no row convinces nobody. */
.vs{width:100%;border-collapse:collapse;margin-top:26px;font-size:.97rem}
.vs th,.vs td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.vs thead th{font-family:var(--fdisp);font-weight:var(--dispw);text-transform:uppercase;font-size:1rem;
  letter-spacing:.02em;border-bottom:3px solid var(--accent)}
.vs thead th:last-child{color:var(--accent)}
.vs td:first-child{font-family:var(--flabel);font-weight:600;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mut);width:28%}
.vs tbody tr:hover{background:var(--accentsoft)}
.vs td:last-child,.vs th:last-child{background:var(--accentsoft)}
.vs__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* On the accent band the token colours invert or vanish, so the table restates them. */
.band .vs th,.band .vs td{border-bottom-color:rgba(255,255,255,.3);color:var(--bandink)}
.band .vs thead th{color:var(--bandink);border-bottom-color:var(--bandink)}
.band .vs thead th:last-child{color:var(--bandink)}
.band .vs td:first-child{color:var(--bandmut)}
.band .vs td:last-child,.band .vs th:last-child{background:rgba(255,255,255,.13)}
.band .vs tbody tr:hover{background:rgba(255,255,255,.1)}
@media (max-width:640px){.vs td:first-child{width:38%}
  .vs th,.vs td{padding:13px 12px;font-size:.9rem}}

/* ---------------- team ---------------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:clamp(22px,3vw,40px);
  margin-top:38px}
.person{text-align:left}
.person__av{width:96px;height:96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--accentsoft);border:2px solid var(--accent);margin-bottom:18px;transition:transform .35s}
.person:hover .person__av{transform:translateY(-4px) scale(1.04)}
.person__ph{width:100%;height:100%;object-fit:cover}
.person__mono{font-family:var(--fdisp);font-size:1.9rem;color:var(--accent);letter-spacing:.01em;
  line-height:1;padding-top:2px}
.person h3{font-family:var(--fdisp);font-size:1.22rem;font-weight:var(--dispw);margin-bottom:3px}
.person__role{font-family:var(--flabel);font-weight:600;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:11px}
.person p{font-size:.94rem;color:var(--mut);line-height:1.62}
.band .person__av{background:rgba(255,255,255,.14);border-color:var(--bandink)}
.band .person__mono{color:var(--bandink)}
.band .person__role{color:var(--bandink);opacity:.75}
.band .person p{color:var(--bandmut)}

/* ---------------- chips ---------------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{font-family:var(--flabel);font-weight:600;font-size:.72rem;letter-spacing:.07em;padding:10px 16px;border-radius:999px;
  border:1px solid var(--line);color:var(--mut);background:transparent;transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-current="page"]{border-color:var(--accent);color:var(--onaccent);background:var(--accent)}
.band .chip{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.82)}

/* ---------------- layout helpers ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split--form{grid-template-columns:.9fr 1.1fr}
@media(max-width:900px){.split--form{grid-template-columns:1fr}}
.split--sticky>div:first-child{position:sticky;top:110px}
@media(max-width:900px){.split--sticky>div:first-child{position:static}}
.head{max-width:72ch;margin-bottom:clamp(34px,4vw,56px)}

/* ---------------- sticky mobile CTA ---------------- */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:1px;
  background:var(--line);box-shadow:0 -6px 24px -12px rgba(0,0,0,.4)}
.mcta a{flex:1;padding:16px 8px;text-align:center;text-decoration:none;font-weight:600;font-size:.94rem;
  background:var(--card);color:var(--ink)}
.mcta a.p{background:var(--accent);color:var(--onaccent)}
@media(max-width:760px){.mcta{display:flex}body{padding-bottom:58px}}

/* ---------------- mobile ergonomics ----------------
   Audited across all 126 pages at 390px and 320px in a touch context. Four classes
   of problem showed up, and all four are here rather than scattered through the
   file, so the next audit has one place to look.

   1. FORM CONTROLS UNDER 16px. iOS zooms the whole page when you focus an input
      whose text is smaller than 16px, and does not zoom back out. The filter bar
      was at 15.04px, so tapping "Max price" on an iPhone left the visitor pinching
      to recover. Every control goes to 16px at touch widths.
   2. TAP TARGETS UNDER 44px. Footer link lists were 19px tall, phone links 24px.
      They are links in a stacked list, so the fix is vertical padding, not size.
   3. TEXT UNDER 12px. Eyebrows at 10.9px, card badges at 9.6px, listing meta at
      11.2px -- legible on a desktop at arm's length, not on a phone.
   4. HIT AREA vs VISUAL SIZE. Where a control should stay visually small (a chip,
      a checkbox), the target is grown with padding instead of type size. */
@media (max-width:760px), (pointer:coarse) and (max-width:1060px){
  input, select, textarea, .toggle, .filters select, .filters input{font-size:16px}
  .filters select, .filters input{padding:13px 12px;min-height:48px}
  .toggle{padding:13px 14px;min-height:48px}
  .form input, .form select, .form textarea{min-height:50px}
  .form textarea{min-height:110px}

  /* stacked link lists: give every row a real row */
  .foot ul{gap:2px}
  .foot ul a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0}
  .foot__phone{min-height:44px;display:inline-flex;align-items:center}
  .foot__legal{font-size:.84rem}
  a[href^="tel:"],a[href^="mailto:"],a[href^="sms:"]{display:inline-flex;align-items:center;
    min-height:44px}
  /* these two run at 10.9px on We Buy Homes; the floor is 12px on a phone */
  .ownerdisc,.grab__note{font-size:.78rem}
  .foot__legal a[href^="tel:"], .brokerbar a[href^="tel:"]{min-height:0}

  /* small type, bumped to a phone-legible floor */
  .eyebrow{font-size:.76rem;letter-spacing:.16em}
  .mkbadge,.ofbadge{font-size:.75rem}
  .prop__meta{font-size:.78rem;letter-spacing:.05em}
  .prop__img .ph{font-size:.78rem}
  .proof__i span{font-size:.78rem}
  .card__n{font-size:.78rem}
  .wb__r span{font-size:.76rem}
  .vs td,.tbl td,.tbl th{font-size:.86rem}
  /* the label column carries its own smaller size, so it needs naming */
  .vs td:first-child{font-size:.76rem}
  .calc__o span{font-size:.76rem}

  /* the logo is the home link; it should be a comfortable target */
  .brand{min-height:44px}
  /* At 320px the nav row squeezes the burger below 44px wide; hold the floor. */
  .burger{min-width:44px;min-height:44px;flex:0 0 auto}
  .feedmsg a{display:inline-flex;align-items:center;min-height:44px}

  /* "read more" is a link people aim at with a thumb */
  .more,.card a.more,.card__go{min-height:44px;align-items:center}
  .chip,.chipbar a{font-size:.8rem;padding:12px 16px;min-height:44px;display:inline-flex;
    align-items:center}
  .filters__count{font-size:.76rem}
  .fine{font-size:.85rem}
  .prop__allin{font-size:.86rem}

  /* breadcrumb links sit in a row of their own, so padding is the fix again */
  .crumbs{font-size:.8rem;gap:6px}
  /* padding, not min-width, so a short crumb ("Inicio" is 31px) clears the 44x32
     floor without opening a gap before the separator */
  .crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 7px}
  .crumbs a:first-child{margin-left:-7px}
  /* a small button is still a button on a phone */
  .btn--sm{min-height:44px;padding:12px 18px}

  /* an accordion row is a button; it needs a button's height */
  summary{min-height:48px;padding:4px 0}
  details{padding:16px 0}
}

/* ---------------- footer ---------------- */
.foot{background:var(--footbg);color:var(--footink);padding:clamp(56px,7vw,92px) 0 32px}
.foot a{color:var(--footink);opacity:.72;text-decoration:none;font-size:.94rem;transition:opacity .2s}
.foot a:hover{opacity:1}
.foot__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px}
@media(max-width:860px){.foot__g{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__g{grid-template-columns:1fr}}
.foot h4{font-family:var(--flabel);font-weight:600;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--footmut);margin-bottom:18px;font-weight:600}
.foot ul{list-style:none;display:grid;gap:11px}
.foot__brand img{height:44px;width:auto;aspect-ratio:501/193;margin-bottom:18px}
.foot__brand p{font-size:.93rem;color:var(--footmut);max-width:36ch}
.foot__phone{font-family:var(--fdisp);font-size:1.6rem;letter-spacing:-.02em;margin-top:18px;display:inline-block}
.foot__legal{margin-top:52px;padding-top:26px;border-top:1px solid var(--footline);display:flex;
  flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:.81rem;color:var(--footmut)}
.foot__legal p{max-width:none}
.eho{display:inline-flex;align-items:center;gap:8px}
.brokerbar{border:1px solid var(--footline);border-radius:var(--imgr);padding:20px 24px;margin-bottom:40px;
  background:rgba(255,255,255,.03)}
.brokerbar p{font-size:.85rem;color:var(--footink);opacity:.82;max-width:none;line-height:1.55}
.brokerbar__lic{font-family:var(--flabel);font-weight:600;font-size:.7rem;letter-spacing:.06em;margin-top:9px;opacity:.6!important}
.socs{display:flex;gap:10px;margin-top:22px}
.socs .soc{width:42px;height:42px;border:1px solid var(--footline);border-radius:50%;display:grid;
  place-items:center;color:var(--footink);opacity:.72;transition:opacity .2s,border-color .2s,background .2s}
.socs .soc:hover{opacity:1;border-color:var(--accent);background:var(--accent);color:#fff}

.brand__mark{height:36px;width:auto;flex:0 0 auto}
.brand__txt{letter-spacing:.04em;font-size:1.12rem;text-transform:none}
.brand__txt small{letter-spacing:.2em;text-transform:uppercase}
h1,h2{font-variation-settings:"wdth" 100,"opsz" 40}
.phero h1{font-size:clamp(2.8rem,6.4vw,5rem)}
.card{border-top-width:3px;border-top-color:var(--accent)}