/* The real-estate pages: /for/ and one page per buyer. Night, the site's
   palette (2026-09-30): navy-black ground, electric blue for action, a
   lighter blue for lines and highlights, green for growth only. No yellow
   or red. Inter for everything, Newsreader for the display headings only,
   Montserrat for the wordmark. Seven pages share this file. */
:root {
  --ground: #05080F; --ground-2: #080C15; --card: #0B111C; --raised: #111A28; --line: #1C2635; --line-2: #26324A;
  --text: #F4F6FA; --text-2: #A7B0BF; --label: #7C8798;
  --accent: #2E6BFF; --accent-hi: #4A80FF; --glow: #5B9BFF; --up: #3DD68C;
  --sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --r: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ground); }
body { background: var(--ground); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 84px; }

.kicker { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.kicker.blue { color: var(--glow); }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; line-height: 1.06; text-wrap: balance; }
h2 { font-size: clamp(32px, 6vw, 48px); margin-top: 12px; max-width: 18em; }
h3 { font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.lede { color: var(--text-2); font-size: 16px; line-height: 1.6; margin-top: 14px; max-width: 34em; }
.num { font-variant-numeric: tabular-nums; }

/* Buttons: electric blue with white text; the outline one for the second choice. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 10px;
  background: var(--accent); color: #fff; font: 600 15px/1 var(--sans); text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(46,107,255,.7); transition: background .12s ease, transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent;
  transform: translate(var(--mx, 0px), var(--my, 0px)); }
.btn:hover { background: var(--accent-hi); transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 1px)); }
.btn:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.97); }
.btn:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.btn svg { width: 16px; height: 16px; transition: transform .12s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn.line { background: transparent; border: 1.5px solid var(--glow); color: var(--text); box-shadow: none; }
.btn.line:hover { background: rgba(91,155,255,.1); }
.btn.solid-dark { background: var(--raised); box-shadow: none; border: 1px solid var(--line-2); }

/* Header: the home page's, so the site is one piece. */
header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .2s ease, border-color .2s ease; border-bottom: 1px solid transparent; }
header.is-scrolled { background: rgba(5,8,15,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-color: var(--line); }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { height: 26px; width: auto; }
.wordmark { font-family: "Montserrat", var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: .32em; font-size: 13px; }
nav.links { display: none; gap: 28px; align-items: center; font-size: 14px; color: var(--text-2); }
nav.links a { text-decoration: none; }
nav.links a:hover { color: var(--text); }
nav.links a[aria-current="page"] { color: var(--text); }
.menu-btn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--text); cursor: pointer; margin-right: -10px; }
.menu-btn svg { width: 22px; height: 22px; }
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(5,8,15,.97); backdrop-filter: blur(10px); display: none; flex-direction: column; padding: 18px 20px 32px; }
.sheet.open { display: flex; }
.sheet .top { display: flex; justify-content: space-between; align-items: center; height: 46px; }
.sheet nav { display: flex; flex-direction: column; margin-top: 28px; }
.sheet nav a { font-size: 26px; font-weight: 600; letter-spacing: -.02em; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.sheet .btn { margin-top: auto; width: 100%; }
/* On a phone the header keeps "Log in" and the button beside the menu. */
.head-r { display: flex; align-items: center; gap: 6px; }
.head-r .login { font-size: 14px; color: var(--text-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; }
.head-r .btn { min-height: 40px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
@media (max-width: 899px) { .logo .wordmark { font-size: 11.5px; letter-spacing: .22em; } }
@media (min-width: 900px) { nav.links { display: flex; } .menu-btn, .head-r { display: none; } }
@media (max-width: 479px) { .head-r .login { display: none; } }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px rgba(46,107,255,.8); pointer-events: none; }

section { padding: 72px 0; position: relative; }
section + section { border-top: 1px solid rgba(28,38,53,.6); }
.card { background: linear-gradient(180deg, var(--card), var(--ground-2)); border: 1px solid var(--line); border-radius: var(--r); }

/* Hero: the picture on the right on a wide screen, behind the words on a
   phone. Each page names its own picture on the .bg element. */
.hero { padding: 0; min-height: 88svh; display: flex; overflow: hidden; }
.hero .bg { position: absolute; inset: 0; background: var(--img) 50% 40% / cover no-repeat; transform: translate3d(0, var(--py, 0px), 0) scale(1.06); will-change: transform; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding-top: 96px; padding-bottom: 36px; }
.crumb { font-size: 13px; color: var(--label); margin-bottom: 26px; }
.crumb a { color: var(--text-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.crumb a:hover { color: var(--text); }
.hero h1 { font-size: clamp(40px, 10vw, 80px); max-width: 12em; margin-top: 12px; }
.hero .lede { font-size: 17px; color: var(--text-2); margin-top: 18px; max-width: 32em; }
.hero .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
@media (max-width: 899px) {
  .hero { min-height: 104svh; }
  .hero .bg { height: 62%; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%); }
  .hero::after { background: linear-gradient(180deg, rgba(5,8,15,.6) 0%, rgba(5,8,15,.1) 22%, rgba(5,8,15,.1) 38%, rgba(5,8,15,.6) 58%, var(--ground) 100%), radial-gradient(420px 260px at 18% 78%, rgba(46,107,255,.14), transparent 70%); }
  .hero .row .btn { flex: 1 1 100%; }
}
@media (min-width: 900px) {
  .hero { min-height: 80svh; }
  .hero .bg { left: 46%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
  .hero::after { background: linear-gradient(180deg, rgba(5,8,15,.4) 0%, rgba(5,8,15,0) 24%, rgba(5,8,15,0) 70%, var(--ground) 100%), radial-gradient(700px 420px at 16% 45%, rgba(46,107,255,.16), transparent 70%); }
  .hero .wrap { justify-content: center; padding-bottom: 64px; }
  .hero .wrap > * { max-width: 620px; }
  .hero h1 { font-size: clamp(46px, 4.4vw, 64px); }
}

/* The counts: what is on file today, straight from the tables. */
.stats-s { padding-top: 0; border-top: 0 !important; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.stat { padding: 22px 20px 20px; border-right: 1px solid var(--line); min-width: 0; }
.stat:last-child { border-right: 0; }
.stat .n { font-family: var(--serif); font-size: clamp(32px, 3.6vw, 46px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 13.5px; color: var(--text-2); margin-top: 8px; line-height: 1.45; }
.asof { font-size: 12.5px; color: var(--label); text-align: center; margin: 12px 0 0; }
@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stat { padding: 16px 14px; }
}

/* Pick your side: the six buyers. */
.segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.seg { display: flex; flex-direction: column; padding: 22px 22px 18px; text-decoration: none; min-height: 200px; position: relative; overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .3s ease; }
.seg:hover { border-color: rgba(46,107,255,.5); transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(46,107,255,.7); }
.seg:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.seg h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; margin-top: 8px; letter-spacing: -.01em; }
.seg p { color: var(--text-2); font-size: 14.5px; margin-top: 8px; flex: 1; }
.seg .go { font-size: 13.5px; font-weight: 600; margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--glow); }
.seg .go svg { width: 14px; height: 14px; transition: transform .15s ease; }
.seg:hover .go svg { transform: translateX(3px); }
@media (max-width: 900px) { .segs { grid-template-columns: 1fr; gap: 12px; } .seg { min-height: 0; } }
@media (min-width: 560px) and (max-width: 900px) { .segs { grid-template-columns: 1fr 1fr; } }

/* The edge: three reasons, numbered. */
.edges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.edge { padding: 24px 22px 22px; position: relative; overflow: hidden; }
.edge .num { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--glow); letter-spacing: -.02em; }
.edge h3 { font-size: 19px; margin-top: 14px; }
.edge p { color: var(--text-2); margin-top: 8px; font-size: 15px; line-height: 1.55; }
.edge .vs { margin-top: 14px; font-size: 13px; color: var(--label); border-left: 2px solid var(--line-2); padding-left: 10px; line-height: 1.5; }
@media (max-width: 900px) { .edges { grid-template-columns: 1fr; } }

/* How it reaches you: the offer cards. */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.ways.two { grid-template-columns: repeat(2, 1fr); }
.way { padding: 26px 24px 22px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: border-color .25s ease, box-shadow .3s ease, transform .3s ease; }
.way.main { border-color: rgba(46,107,255,.45); box-shadow: 0 0 0 1px rgba(46,107,255,.15), 0 30px 60px -40px rgba(46,107,255,.6); }
.way.main::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--glow), transparent); }
.way .price { font-family: var(--serif); font-size: 44px; line-height: 1; letter-spacing: -.02em; margin-top: 14px; }
.way .per { color: var(--text-2); font-size: 14.5px; margin-top: 4px; }
.way p { color: var(--text-2); margin: 14px 0 20px; flex: 1; font-size: 15px; line-height: 1.55; }
.way .btn { width: 100%; }
.way .more { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; font-size: 14px; color: var(--glow); text-decoration: underline; text-underline-offset: 3px; }
.way .more:hover { color: var(--text); }
@media (max-width: 900px) { .ways, .ways.two { grid-template-columns: 1fr; } }
@media (hover: hover) and (pointer: fine) { .way:hover { transform: translateY(-3px); } }

/* Where it covers. */
.cover { display: grid; grid-template-columns: 200px 1fr; gap: 0; margin-top: 30px; overflow: hidden; }
.cover dt { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--glow); padding: 16px 20px; border-top: 1px solid var(--line); }
.cover dd { color: var(--text); padding: 16px 20px 16px 0; border-top: 1px solid var(--line); font-size: 15px; }
.cover dt:first-child, .cover dt:first-child + dd { border-top: 0; }
@media (max-width: 720px) {
  .cover { grid-template-columns: 1fr; }
  .cover dt { padding: 14px 18px 2px; }
  .cover dd { padding: 0 18px 14px; border-top: 0; }
}

/* Get set up: the setup call, on the phone in the picture. */
.close { min-height: 620px; display: flex; align-items: flex-end; overflow: hidden; }
.close .bg { position: absolute; inset: 0; background: url(/img/hero-call.webp) 50% 30% / cover no-repeat; will-change: transform; }
.close::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.close .wrap { position: relative; z-index: 1; width: 100%; padding-top: 40px; }
@media (max-width: 899px) {
  .close { min-height: 0; padding-top: 0; }
  .close .bg { height: 320px; background-position: 50% 20%; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); }
  .close::after { background: linear-gradient(180deg, rgba(5,8,15,.35) 0%, rgba(5,8,15,0) 30%, rgba(5,8,15,.6) 240px, var(--ground) 320px); }
  .close .wrap { padding-top: 250px; }
}
.close .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.close .btn { animation: glowpulse 2.8s ease-in-out infinite; }
.close .btn.line { animation: none; }
@keyframes glowpulse { 0%, 100% { box-shadow: 0 10px 30px -12px rgba(46,107,255,.7); } 50% { box-shadow: 0 12px 44px -10px rgba(46,107,255,1), 0 0 0 7px rgba(46,107,255,.12); } }
.others { margin-top: 28px; font-size: 13.5px; color: var(--label); line-height: 2; }
.others a { color: var(--text-2); margin: 0 4px; white-space: nowrap; text-decoration: none; padding: 9px 0; display: inline-block; }
.others a:hover { color: var(--text); }
@media (min-width: 900px) {
  .close { min-height: 560px; align-items: center; }
  .close .wrap { padding-top: 0; }
  .close .wrap > * { max-width: 520px; }
  .close .bg { left: 50%; background-position: 50% 40%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
  .close::after { background: linear-gradient(180deg, var(--ground) 0%, rgba(5,8,15,0) 20%, rgba(5,8,15,0) 80%, var(--ground) 100%), linear-gradient(90deg, var(--ground) 38%, rgba(5,8,15,0) 60%); }
}
@media (max-width: 480px) { .close .row .btn { width: 100%; } }

footer { border-top: 1px solid var(--line); padding: 36px 0 44px; color: var(--label); font-size: 13px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { text-decoration: none; color: var(--text-2); }
footer a:hover { color: var(--text); }

/* Motion. Everything here is additive: the page reads the same with
   scripts off, and `.js` gates any state that hides a thing until the
   script shows it. */
.js .rise { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.js .rise.in { opacity: 1; transform: none; }
.js .hero .up { animation: up .7s cubic-bezier(.2,.8,.2,1) both; }
.js .hero .up.d1 { animation-delay: .08s; } .js .hero .up.d2 { animation-delay: .16s; } .js .hero .up.d3 { animation-delay: .24s; }
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.spot { position: relative; }
.spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2; border-radius: inherit; transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(91,155,255,.16), transparent 62%); }
@media (hover: hover) and (pointer: fine) { .spot:hover::before { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .hero .up { opacity: 1; transform: none; animation: none; transition: none; }
  .btn, .seg, .way, .seg .go svg { transition: none !important; }
  .close .btn { animation: none !important; }
  .hero .bg, .close .bg { transform: none !important; }
}