/* Buy With Us page extras (loads after marketing.css) */
.stats-4{grid-template-columns:repeat(4,1fr)}
.city-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.city-btn{padding:11px 16px;border:1px solid rgba(124,11,25,.4);text-decoration:none;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--wine);background:rgba(255,255,255,.7);transition:background .25s,color .25s,border-color .25s,transform .25s}
.city-btn:hover,.city-btn:focus-visible{background:var(--wine);color:#fff;border-color:var(--wine);transform:translateY(-2px)}

/* neighbourhood explorer */
.hoods .tab-list{margin-bottom:34px}
.hoods .off-stage{grid-template-columns:1.1fr 1fr}
.h-img{transition:opacity .35s}
.h-img.swap{opacity:0}
.chiprow{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 14px}
.chip{display:inline-block;text-decoration:none;border:1px solid #cdbfb4;background:#fff;color:#3f3a37;font:500 12px/1 var(--sans);letter-spacing:.08em;padding:11px 16px;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s,transform .25s,opacity .25s}
.chip:hover{border-color:var(--red);color:var(--wine)}
.chip[aria-pressed="true"]{background:var(--wine);border-color:var(--wine);color:#fff}
.h-note{min-height:3.4em;margin:0 0 6px;font-size:14px;line-height:1.7;color:var(--wine)}
.h-links{display:flex;flex-wrap:wrap;gap:8px 26px}
.h-links .seg-link{margin-top:14px}

/* brief builder */
.brief{display:grid;gap:26px;max-width:900px}
.chipset{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chipset .lg{flex:0 0 150px;font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.brief-out{margin-top:6px;padding:26px 28px;background:#fff;border-left:4px solid var(--red)}
.brief-sum{margin:0 0 20px;font:400 clamp(20px,2vw,26px)/1.45 Georgia,serif;color:#2d2926}
.brief-go[aria-disabled="true"]{opacity:.55}

/* repayment estimator */
.calc{display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:start}
.calc-in{display:grid;gap:26px}
.calc-f label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font:500 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.calc-f output{font:300 28px/1 var(--condensed);letter-spacing:.03em;color:var(--wine);text-transform:none}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:linear-gradient(90deg,var(--red) var(--p,50%),#d9cfc4 var(--p,50%));outline:none;border-radius:2px}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--wine);border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:pointer}
.calc input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--wine);border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:pointer}
.calc-out{background:#fff;padding:34px 34px 28px;border-top:4px solid var(--red);box-shadow:0 30px 50px -36px rgba(70,22,30,.55)}
.calc-out .lbl{display:block;font:500 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.calc-out .big{display:block;font:300 clamp(44px,5vw,72px)/1.05 var(--condensed);color:var(--wine);margin:10px 0 22px;letter-spacing:.01em}
.calc-out dl{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.calc-out dl div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.calc-out dt{color:var(--muted)}.calc-out dd{margin:0;font-weight:600;color:#3f3a37}
.calc-out .fine{margin:18px 0 0;font-size:12px;line-height:1.65;color:var(--faint)}

@media(max-width:980px){
  .calc{grid-template-columns:1fr;gap:30px}
  .hoods .off-stage{grid-template-columns:1fr}
  .stats-4{grid-template-columns:1fr 1fr}
  .chipset .lg{flex:1 0 100%}
  .top nav a:nth-child(2){display:none}
}
@media(max-width:620px){.top nav a:nth-child(3){display:none}}

.chip[aria-pressed="true"]{background:var(--wine);border-color:var(--wine);color:#fff}
/* keyboard users can see which slider they are on */
.calc input[type=range]:focus-visible{outline:2px solid #C31B37;outline-offset:6px}
.calc input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(195,27,55,.35),0 2px 10px rgba(0,0,0,.35)}
.calc input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(195,27,55,.35),0 2px 10px rgba(0,0,0,.35)}