/* Sirocco 409: sky blue first, a lighter slate navy for the dark panels, cool off-white ground (hub: navy and sky blue).
   Archivo at a semi-expanded width for headlines and figures (a real variable bold, wide and architectural),
   Public Sans for reading. Squared-off buttons instead of pills, so it never reads as Rangeview or Redstone. */
:root{
  --bg:#F5F9FC;
  --surface:#FFFFFF;
  --surface-2:#E9F2F9;
  --ink:#13293F;
  --muted:#4E6175;
  --line:#D9E5EF;
  --line-strong:#B4C6D6;
  --brand:#1F4466;
  --on-brand:#F5F9FC;
  --on-brand-muted:#C2D6E8;
  --accent:#8FD3F7;
  --accent-ink:#0F2438;
  --accent-soft:#DDF0FC;
  --signal:#1B6699;
  --cta:#6CC3F2;
  --on-cta:#0F2438;
  --cta-hover:#55B6EC;
  --cta-shadow:rgba(46,140,200,.45);
  --cta-text:#1B6699;
  --bar:#CAD8E4;
  --tick-bg:#CDEBFB;
  --hot:rgba(108,195,242,.38);
  --ok-bg:#DDF0FC;
  --ok-ink:#174F7A;
  --focus:#1B6699;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:20px;
  --shadow-sm:0 1px 2px rgba(19,41,63,.05);
  --shadow-md:0 14px 34px -16px rgba(19,41,63,.24);
  --shadow-lg:0 30px 70px -28px rgba(19,41,63,.38);
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Public Sans',system-ui,sans-serif;
  --display-weight:700;
  --display-tracking:-.025em;
}

/* Wide, confident headlines and figures (Archivo's width axis) */
h1,h2,h3,h4,.brand,.big,.facts-row strong,.bar-label b,.gap-callout strong,.tiles strong,.prow b,.line-item.total strong,.allin strong,.roi-tile strong,.result-main,.sp-home-name,.sp-price,.offer-points strong,.offer-price strong,.lead-media-copy strong,.equity strong{font-stretch:112%}
.big,.facts-row strong,.bar-label b,.gap-callout strong,.tiles strong,.prow b,.allin strong,.roi-tile strong,.result-main,.sp-price,.offer-points strong{font-weight:700;letter-spacing:-.03em}
.brand{font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.hero h1{font-size:clamp(40px,4.9vw,62px);line-height:1.02}
.section-head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.06}

/* Squared-off buttons and a sky ground under the hero */
.btn{border-radius:10px}
.hero{background:linear-gradient(180deg,#E3F2FC 0%,var(--bg) 78%)}
.chip.solid{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.mark{background:linear-gradient(transparent 62%,var(--accent) 62%,var(--accent) 92%,transparent 92%)}
.ticks li::before{background-color:var(--tick-bg)}
.eyebrow{letter-spacing:.12em}

/* ---------- Hero: the price card over the photo ---------- */
.hero-media{padding-bottom:20px}
@media (min-width:1041px){.hero-photo{aspect-ratio:4/4.6}}
.offer{position:absolute;right:-24px;bottom:-30px;width:min(300px,78%);padding:20px 22px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden}
.offer::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--cta),var(--brand))}
.offer-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.offer-price{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.offer-price strong{font-family:var(--font-display);font-size:54px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.offer-price span{font-size:14px;font-weight:600;color:var(--muted)}
.offer p{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.offer-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--muted)}
.offer-row b{font-family:var(--font-display);font-stretch:112%;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.spots{margin-top:12px}
.spots-dots{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.spots-dots i{height:8px;border-radius:2px;background:var(--cta)}
.spots-dots i.taken{background:var(--line)}
.spots p{margin-top:8px;font-size:13px;font-weight:700;color:var(--ink)}

/* ---------- Why: points under the comparison ---------- */
.offer-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}
.offer-points div{padding:14px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line)}
.offer-points strong{display:block;font-family:var(--font-display);font-size:26px}
.offer-points span{display:block;font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.35}
.callout{border-left:4px solid var(--cta)}

/* ---------- Neighbourhood: aerial, four drive times, four reasons ---------- */
.loc-ring span{color:var(--on-brand)}
.tiles.tiles-4{grid-template-columns:repeat(4,1fr)}
.tiles strong{color:var(--brand)}
.loc-reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.loc-reasons li{padding:18px 0 0;border-top:3px solid var(--cta)}
.loc-reasons strong{display:block;font-size:16px}
.loc-reasons span{display:block;margin-top:4px;font-size:15px;color:var(--muted);line-height:1.5}

/* ---------- First-home equity line ---------- */
.equity{background:var(--surface);border-color:var(--line-strong)}
.equity span{font-weight:700}

@media (max-width:1040px){
  .offer{right:16px;bottom:-26px}
  .loc-reasons{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .offer{position:relative;right:auto;bottom:auto;width:auto;margin:-56px 14px 0}
  .hero-media{padding-bottom:0}
  .offer-points{gap:8px}
  .offer-points div{padding:12px 10px}
  .offer-points strong{font-size:19px}
  .tiles.tiles-4{grid-template-columns:1fr 1fr}
  .loc-reasons{grid-template-columns:1fr}
}

/* The price-gap range stays on one line */
.gap-callout strong{white-space:nowrap;font-size:clamp(26px,2.6vw,32px)}
/* WhatsApp text button: a deeper green so white text passes WCAG AA (base.css #1FAF58 is 2.9:1) */