/* ============================================================
   8X Homes — shared design system
   Porcelain ground, warm ink, hairline rules. Gold is the family
   accent inherited from 8X CRE; deep teal is the residential lane
   (copper = parks, sage = commercial, teal = homes).
   Display: Fraunces · Body: Hanken Grotesk · Data: Spline Sans Mono
   ============================================================ */

:root{
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --bg:#F5F3ED;
  --surface:#FFFFFF;
  --surface-2:#EDEAE1;
  --ink:#16201F;
  --ink-2:#4E5A58;
  --ink-3:#8A9391;
  --rule:#DFDACC;
  --rule-2:#C7C0AC;

  --teal:#2E5A5C;
  --teal-deep:#1B2B2B;
  --teal-soft:#DEE9E7;
  --gold:#8A6420;
  --gold-bright:#C8A15C;
  --red:#A2453A;

  --wrap:1080px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131A19;--surface:#1B2423;--surface-2:#232E2D;
    --ink:#EFEDE4;--ink-2:#A8B2B0;--ink-3:#78827F;
    --rule:#2A3634;--rule-2:#3B4A47;
    --teal:#7FBDB5;--teal-deep:#0E1615;--teal-soft:#1B2E2C;
    --gold:#D2A765;--gold-bright:#D2A765;
    --red:#E28B7E;
  }
}
:root[data-theme="dark"]{
  --bg:#131A19;--surface:#1B2423;--surface-2:#232E2D;
  --ink:#EFEDE4;--ink-2:#A8B2B0;--ink-3:#78827F;
  --rule:#2A3634;--rule-2:#3B4A47;
  --teal:#7FBDB5;--teal-deep:#0E1615;--teal-soft:#1B2E2C;
  --gold:#D2A765;--gold-bright:#D2A765;
  --red:#E28B7E;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
h1,h2,h3{font-family:var(--font-display);line-height:1.08;letter-spacing:-.016em;text-wrap:balance;margin:0}
.lbl{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--surface);padding:10px 16px;border:1px solid var(--rule);z-index:99}

/* ---------- nav ---------- */
nav{border-bottom:1px solid var(--rule);background:var(--bg);position:sticky;top:0;z-index:20}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:15px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo svg{width:32px;height:32px;flex:none}
.logo-txt{display:block}
.logo-txt b{display:block;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.logo-txt i{display:block;font-style:normal;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-top:1px}
.nav-r{display:flex;align-items:center;gap:22px;font-size:15px}
.nav-r a{text-decoration:none;color:var(--ink-2)}
.nav-r a:hover{color:var(--teal)}
.tel{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--ink)}

/* ---------- generic section ---------- */
section{padding:64px 0;border-top:1px solid var(--rule)}
section > .wrap > .lbl{display:block;margin-bottom:12px}
h2.sec{font-size:clamp(26px,3.9vw,38px);font-weight:600;max-width:22ch;margin-bottom:14px}
p.lead{font-size:18px;color:var(--ink-2);max-width:62ch;margin:0 0 26px}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--teal-deep);color:#F3F1E8;text-decoration:none;font-family:var(--font-body);font-weight:600;font-size:16px;padding:15px 30px;border:1px solid var(--teal-deep);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- the three routes ---------- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.route{background:var(--surface);padding:26px 24px 28px;position:relative}
.route .rl{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.route .dot{width:9px;height:9px;flex:none;border-radius:50%}
.route.cash .dot{background:var(--gold)}
.route.asis .dot{background:var(--teal)}
.route.prep .dot{background:var(--ink-2)}
.route h3{font-size:16px;font-weight:600;letter-spacing:0;font-family:var(--font-body)}
.route .net{font-family:var(--font-display);font-size:clamp(30px,4vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1;margin-bottom:5px}
.route .band{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);margin-bottom:18px;min-height:1.2em}
.route dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:7px 12px;font-size:14px;border-top:1px solid var(--rule);padding-top:15px}
.route dt{color:var(--ink-2)}
.route dd{margin:0;font-family:var(--font-mono);font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums}
.route .meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-2);display:flex;justify-content:space-between;gap:10px}
.route .meta b{font-family:var(--font-mono);font-weight:600;color:var(--ink)}

/* locked cash column — the refusal, made physical */
.route.locked .net,.route.locked .band,.route.locked dl,.route.locked .meta{opacity:.18;filter:blur(3px);user-select:none}
.lockmsg{position:absolute;inset:auto 24px 26px 24px;top:78px;display:flex;flex-direction:column;justify-content:center;gap:9px;text-align:left}
.lockmsg strong{font-family:var(--font-display);font-size:21px;font-weight:600;line-height:1.2}
.lockmsg span{font-size:14.5px;color:var(--ink-2)}
.route:not(.locked) .lockmsg{display:none}

.calcfoot{padding:18px 28px;background:var(--surface-2);border-top:1px solid var(--rule);font-size:14px;color:var(--ink-2);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.spread{font-family:var(--font-mono);font-size:13.5px}
.spread b{color:var(--ink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:50px 0 72px;font-size:14.5px;color:var(--ink-2)}
.f-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--rule);margin-bottom:24px}
.brokerid{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--ink);line-height:1.75}
.f-links{display:flex;gap:20px;flex-wrap:wrap;font-size:15px}
.f-links a{color:var(--ink-2);text-decoration:none}
.f-links a:hover{color:var(--teal)}
.disc{display:grid;gap:15px;max-width:76ch}
.disc p{margin:0}
.disc .eq{font-weight:600;color:var(--ink)}

@media (max-width:860px){
  .routes{grid-template-columns:1fr}
  .lockmsg{position:static;margin-top:-4px}
  .route.locked .net,.route.locked .band,.route.locked dl,.route.locked .meta{display:none}
  .nav-r a:not(.tel){display:none}
}
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:rise .55s var(--ease) both}
  .reveal:nth-child(2){animation-delay:.07s}
  .reveal:nth-child(3){animation-delay:.14s}
  .reveal:nth-child(4){animation-delay:.21s}
  .reveal:nth-child(5){animation-delay:.28s}
}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}