/* brianpoetschlag.com — editorial private-bank style sheet
   Display: Newsreader. UI: Inter. Navy + green + cream. Mobile first. */

:root{
  --deep:#0a142d;
  --navy:#101f42;
  --navy-2:#12214b;
  --card:#182d57;
  --green:#499359;
  --green-2:#60ac71;
  --green-deep:#35704a;
  --cream:#f9f6ed;
  --cream-2:#f3efe3;
  --paper:#fffdf7;
  --ink:#101a30;
  --ink-2:#3c4761;
  --ink-3:#6a7389;
  --rule:rgba(10,20,45,.14);
  --rule-soft:rgba(10,20,45,.08);
  --rule-dark:rgba(255,255,255,.14);
  --rule-dark-soft:rgba(255,255,255,.08);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Archivo",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --script:"Caveat","Bradley Hand",cursive;
  --wrap:1180px;
  --pad:20px;
  --t:160ms cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-deep);text-decoration:none}
a:hover{color:var(--green)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:99;background:var(--deep);color:#fff;padding:10px 16px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;color:var(--deep);margin:0;letter-spacing:-.012em;font-variant-numeric:lining-nums}
h1{font-size:clamp(2.35rem,8.4vw,4.35rem);line-height:1.04;letter-spacing:-.022em}
h2{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.15;margin:0 0 .5em}
h3{font-size:clamp(1.16rem,2.4vw,1.4rem);line-height:1.25;margin:0 0 .35em}
p{margin:0 0 1.1em}
strong,b{font-weight:600}
em{font-style:italic}
.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-deep);margin:0 0 18px;
}
.hero .eyebrow,.band .eyebrow{color:var(--green-2)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.005em;
  padding:13px 22px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
  text-align:center;
}
.btn-lg{padding:16px 28px;font-size:1rem}
.btn-sm{padding:9px 15px;font-size:.85rem}
.btn-accent{background:var(--green);color:#fff;border-color:var(--green)}
.btn-accent:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.6)}
.sec .btn-ghost,.prose .btn-ghost{color:var(--deep);border-color:var(--rule)}
.sec .btn-ghost:hover,.prose .btn-ghost:hover{background:rgba(10,20,45,.05);color:var(--deep);border-color:rgba(10,20,45,.3)}
.est-out .btn-ghost,.boxcta--dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.est-out .btn-ghost:hover,.boxcta--dark .btn-ghost:hover{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.btn-outline{background:transparent;color:var(--deep);border-color:var(--rule)}
.btn-outline:hover{border-color:var(--deep);background:rgba(10,20,45,.04)}
.w100{width:100%}

/* ---------- draft banner + header ---------- */
.draft-banner{
  background:var(--deep);color:#e8c86a;border-bottom:1px solid rgba(232,200,106,.3);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  text-align:center;padding:8px 14px;
}
.nav{position:sticky;top:0;z-index:40;background:rgba(10,20,45,.97);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--rule-dark-soft)}
.nav-in{display:flex;align-items:center;gap:14px;min-height:66px}
.brandmark{display:flex;align-items:center;gap:14px;color:#fff;flex:0 1 auto;min-width:0}
.bm-logo{height:24px;width:auto}
.bm-name,.bm-sub{white-space:nowrap}
.bm-name{flex:0 0 auto}
.brandmark{overflow:hidden}
.brandmark > span{min-width:0}
.bm-div{width:1px;height:26px;background:var(--rule-dark)}
.bm-name{font-family:var(--display);font-size:1.1rem;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.bm-sub{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1.5}
.nav-toggle{margin-left:auto;background:transparent;border:1px solid var(--rule-dark);border-radius:2px;color:#fff;width:44px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle svg{width:20px;height:20px}
.menu{list-style:none;display:flex;align-items:center;justify-content:flex-end;gap:0;margin:0 0 0 auto;padding:0;min-width:0;flex:0 1 auto}
.menu>li{position:relative}
.menu a,.sub-btn{
  display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.84);font-size:.85rem;font-weight:500;
  padding:9px 10px;background:transparent;border:0;font-family:var(--sans);cursor:pointer;transition:color var(--t);
  white-space:nowrap;
}
@media(min-width:1181px){.menu a,.sub-btn{padding:9px 7px;font-size:.8rem}.bm-sub{display:none!important}.bm-logo{height:21px}.nav-cta .btn-ghost:not(.nav-apply){display:none}}
.menu a:hover,.sub-btn:hover{color:#fff}
.menu a[aria-current=page]{color:var(--green-2)}
.sub-btn svg{width:9px;height:9px;opacity:.6}
.sub{display:none;position:absolute;top:100%;left:0;margin-top:6px;min-width:248px;background:var(--navy);border:1px solid var(--rule-dark);border-radius:2px;box-shadow:0 22px 50px rgba(5,10,25,.45);padding:7px;list-style:none;margin:0}
.menu>li.open>.sub{display:block}
.sub a{padding:9px 12px;border-radius:2px;font-size:.86rem}
.sub a:hover{background:rgba(255,255,255,.07)}
.nav-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav-cta .btn{padding:10px 17px;font-size:.85rem}
.nav-cta .btn-ghost{color:#fff}

@media(hover:hover) and (min-width:1181px){.menu>li:hover>.sub,.menu>li:focus-within>.sub{display:block}}
@media(min-width:1181px){.nav-toggle{display:none}.menu .m-cta{display:none}}
@media(max-width:1470px){.nav-cta .btn-ghost{display:none}}
@media(max-width:1180px){
  .nav-in{min-height:60px}
  .nav-cta{display:none}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);
    border-top:1px solid var(--rule-dark-soft);border-bottom:1px solid var(--rule-dark-soft);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:8px 0 16px;max-height:78vh;overflow:auto;
  }
  .menu.open{display:flex}
  .menu>li{border-bottom:1px solid var(--rule-dark-soft)}
  .menu a,.sub-btn{padding:14px 22px;width:100%;font-size:1rem;justify-content:space-between}
  .sub{position:static;display:none;border:0;box-shadow:none;background:rgba(0,0,0,.22);border-radius:0;padding:4px 0}
  .sub a{padding:12px 34px;font-size:.95rem}
  .m-cta{display:flex;gap:10px;padding:16px 22px;border-bottom:0}
  .m-cta .btn{flex:1}
  .m-cta .btn-ghost{color:#fff}
}
@media(max-width:430px){.bm-div{display:none}.bm-sub{display:none!important}.bm-logo{height:21px}.brandmark{gap:9px}.bm-name{font-size:1rem}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--deep);color:#fff;overflow:hidden}
.hero h1{color:#fff}
.hero h1 em{color:var(--green-2);font-style:normal}
.hero-lead{color:rgba(255,255,255,.76);font-size:clamp(1.02rem,2.2vw,1.2rem);max-width:33em;margin:20px 0 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-actions .btn{flex:1 1 auto;min-width:210px}
.hero-note{display:flex;flex-wrap:wrap;gap:6px 16px;margin:24px 0 0;color:rgba(255,255,255,.5);font-size:.78rem;letter-spacing:.04em}
.hero-note span{display:inline-flex;align-items:center}
.hero-note span:not(:last-child)::after{content:"·";margin-left:16px;color:rgba(255,255,255,.3)}
.hero .wrap{position:relative;z-index:2}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 82% 6%,rgba(18,33,75,.92),transparent 62%),
    radial-gradient(70% 60% at 0% 100%,rgba(73,147,89,.15),transparent 70%);
}

/* base hero (products, guides, trust pages) */
.hero--rule .wrap{padding-top:44px;padding-bottom:50px}
.hero--rule h1{max-width:20ch;font-size:clamp(2.1rem,7.4vw,3.8rem)}
.hero--rule::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,var(--green) 0%,rgba(73,147,89,0) 46%);z-index:3}

/* split hero: home + about */
.hero--split .hero-grid{display:grid;grid-template-columns:1fr;gap:4px;padding-top:32px;padding-bottom:0}
.hero--split .hero-copy{padding-bottom:18px;order:1}
.hero--split .portrait{order:2}
.hero--split .socials{display:none}
.hero--split h1{font-size:clamp(2.5rem,10vw,4.6rem)}
.portrait{margin:0;position:relative}
.portrait picture{display:block;position:relative}
.portrait picture::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:118px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,20,45,0) 0%,rgba(10,20,45,.6) 52%,rgba(10,20,45,.97) 100%);
}
.portrait img{width:min(300px,66vw);margin:0 auto;display:block;filter:drop-shadow(0 26px 46px rgba(0,0,0,.45))}
.portrait figcaption{display:flex;flex-direction:column;gap:2px;text-align:center;padding:0 0 22px}
.portrait figcaption b{font-family:var(--display);font-size:1.12rem;font-weight:500;color:#fff}
.portrait figcaption span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.portrait figcaption span:last-child{color:var(--green-2)}


/* photo hero: city pages + OC hub */
.hero--photo .wrap{padding-top:48px;padding-bottom:54px}
.hero--photo h1{max-width:15ch;font-size:clamp(2.1rem,7.4vw,3.5rem)}
.hero-photo{
  position:absolute;inset:0;z-index:0;
  background:var(--hero-pic,url("/assets/yorba-linda-hills.jpg")) 70% 42% / cover no-repeat;
  opacity:.62;filter:grayscale(.12) contrast(1.04) saturate(.9);
}
.hero--photo::before{
  background:
    linear-gradient(90deg,rgba(10,20,45,.96) 0%,rgba(10,20,45,.82) 46%,rgba(10,20,45,.34) 100%),
    linear-gradient(0deg,rgba(10,20,45,.9) 0%,rgba(10,20,45,0) 58%);
}

.crumbs{margin:0 0 18px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;font-size:.72rem;letter-spacing:.09em;color:rgba(255,255,255,.5);text-transform:uppercase}
.crumbs a{color:rgba(255,255,255,.64)}
.crumbs a:hover{color:#fff}
.crumbs li+li::before{content:"/";margin-right:7px;color:rgba(255,255,255,.26)}

.socials{display:flex;gap:9px;flex-wrap:wrap}
.socials a{
  width:36px;height:36px;border:1px solid var(--rule-dark);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.72);transition:all var(--t);
}
.socials a:hover{border-color:var(--green-2);color:var(--green-2);transform:translateY(-1px)}
.socials svg{width:15px;height:15px;fill:currentColor}

/* ---------- sections ---------- */
.sec{padding:52px 0;background:var(--cream)}
.sec--alt{background:var(--paper);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.sec--intro{padding-top:50px;padding-bottom:36px}
.prose{max-width:var(--wrap)}
.prose>*{max-width:44rem}
.prose>.bleed,.prose>.plist,.prose>.cmp-shell,.prose>table,.prose>.links,.prose>.gcards,.prose>.states{max-width:none}
.prose h2{margin-top:0;max-width:20ch}
.sec--intro .prose>p:first-child{font-size:clamp(1.08rem,2.6vw,1.26rem);line-height:1.55;color:var(--ink-2)}
.prose h3{margin-top:2em;color:var(--deep)}
.prose h2+h3{margin-top:1.1em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.15em}
.prose li{margin:0 0 .55em}
.prose ul{list-style:none;padding-left:0}
.prose ul>li{position:relative;padding-left:22px}
.prose ul>li::before{content:"";position:absolute;left:2px;top:.78em;width:8px;height:1px;background:var(--green)}
.prose ol{counter-reset:o;list-style:none;padding-left:0}
.prose ol>li{counter-increment:o;position:relative;padding-left:34px}
.prose ol>li::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;top:.14em;font-size:.74rem;font-weight:600;color:var(--green-deep);letter-spacing:.05em}
.prose blockquote{margin:1.6em 0;padding-left:22px;border-left:2px solid var(--green);font-family:var(--display);font-size:1.28rem;line-height:1.45;color:var(--deep)}
.prose a{border-bottom:1px solid rgba(73,147,89,.32);transition:border-color var(--t),color var(--t)}
.prose a:hover{border-bottom-color:var(--green)}
.prose .btn,.prose .links a,.prose .gcard,.prose .prow,.prose .proof-foot a{border-bottom:0}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}

/* prose tables (markdown) */
.prose>table,.prose table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:.93rem;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.prose thead th{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule);font-weight:600}
@media(min-width:700px){.prose table{display:table}}

/* ---------- proof rail ---------- */
.proof{
  margin:0;background:var(--deep);color:#fff;border-radius:2px;overflow:hidden;
  box-shadow:0 34px 60px -40px rgba(10,20,45,.75);border:1px solid rgba(255,255,255,.06);
}
.proof-grid{display:grid;grid-template-columns:1fr 1fr}
.stat{padding:20px 18px;border-bottom:1px solid var(--rule-dark-soft)}
.stat:nth-child(odd){border-right:1px solid var(--rule-dark-soft)}
.stat a{display:block;color:inherit;border-bottom:0}
.stat .k{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:6px}
.stat b{font-family:var(--display);font-size:clamp(1.9rem,7vw,2.7rem);font-weight:400;line-height:1;letter-spacing:-.02em;display:flex;align-items:baseline;gap:4px}
.stat i{font-style:normal;font-size:.52em;color:var(--green-2)}
.stat a:hover b{color:var(--green-2)}
.proof-foot{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin:0;padding:14px 18px;
  background:rgba(0,0,0,.24);font-size:.76rem;color:rgba(255,255,255,.6);
}
.proof-foot a{color:rgba(255,255,255,.84);border-bottom:1px solid rgba(255,255,255,.2)}
.proof-foot a:hover{color:var(--green-2);border-color:var(--green-2)}
.proof-foot span{color:rgba(255,255,255,.28)}
@media(max-width:620px){.proof-foot{display:grid;gap:7px}.proof-foot span{display:none}}
@media(max-width:560px){.hero-note{display:grid;gap:5px}.hero-note span:not(:last-child)::after{display:none}}

/* ---------- loan index (replaces icon cards) ---------- */
.plist{border-top:1px solid var(--rule);margin:4px 0 26px}
.prow{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;
  padding:20px 4px;border-bottom:1px solid var(--rule);color:var(--ink);
  transition:background var(--t),padding-left var(--t);
}
.prow:hover{background:rgba(10,20,45,.035);padding-left:12px}
.pnum{font-size:.7rem;font-weight:600;letter-spacing:.08em;color:var(--green-deep);padding-top:8px;min-width:20px}
.pkick{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.prow h3{font-size:clamp(1.16rem,3.6vw,1.46rem);margin:0 0 4px;color:var(--deep)}
.prow p{margin:0;color:var(--ink-2);font-size:.92rem;max-width:44ch}
.parrow{color:var(--green-deep);font-size:1.05rem;padding-top:6px;transition:transform var(--t)}
.prow:hover .parrow,.gcard:hover .parrow{transform:translateX(4px)}

/* ---------- link lists (cities) ---------- */
.links{list-style:none;display:grid;grid-template-columns:1fr;gap:0;margin:4px 0 26px;padding:0;border-top:1px solid var(--rule)}
.links li{margin:0;padding:0}
.links li::before{display:none}
.links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 2px;
  border-bottom:1px solid var(--rule);color:var(--deep);font-weight:500;transition:padding var(--t),color var(--t);
}
.links a::after{content:"→";color:var(--green-deep);opacity:0;transition:opacity var(--t)}
.links a:hover{padding-left:10px;color:var(--green-deep)}
.links a:hover::after{opacity:1}
.links .hub a{font-family:var(--display);font-size:1.14rem;font-weight:500}

/* ---------- guide cards ---------- */
.gcards{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule);margin:4px 0 26px}
.gcard{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 14px;padding:18px 2px;
  border-bottom:1px solid var(--rule);color:var(--deep);transition:padding var(--t),background var(--t);
}
.gcard small{grid-column:1/-1;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.gcard strong{font-family:var(--display);font-weight:500;font-size:1.08rem;line-height:1.3}
.gcard .parrow{padding:0;grid-row:2}
.gcard:hover{padding-left:10px;background:rgba(10,20,45,.035)}

/* ---------- steps ---------- */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:1fr;gap:0;margin:4px 0 26px;padding:0;border-top:1px solid var(--rule)}
.steps li{counter-increment:s;padding:22px 0;border-bottom:1px solid var(--rule);margin:0;position:relative}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:static;display:block;
  font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--green);margin-bottom:10px;
}
.steps h3{margin:0 0 6px;font-size:1.2rem}
.steps p{margin:0;color:var(--ink-2)}

/* ---------- comparison table ---------- */
.cmp-shell{margin:6px 0 26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:.9rem;display:table}
.cmp caption{text-align:left;font-family:var(--display);font-size:1.16rem;color:var(--deep);padding:0 0 16px;caption-side:top}
.cmp thead th{
  text-align:left;vertical-align:bottom;padding:0 16px 13px;border-bottom:1px solid var(--deep);
  font-family:var(--display);font-size:1.08rem;font-weight:500;color:var(--deep);width:26%;
}
.cmp thead th span{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;font-weight:600}
.cmp thead th.pick{color:var(--green-deep);box-shadow:inset 0 3px 0 var(--green)}
.cmp tbody th{
  text-align:left;font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:15px 16px 15px 0;vertical-align:top;width:22%;border-bottom:1px solid var(--rule-soft);
}
.cmp td{padding:15px 16px;vertical-align:top;border-bottom:1px solid var(--rule-soft);color:var(--ink-2)}
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:0}
.cmp td.pick{background:rgba(73,147,89,.07);color:var(--ink)}
.cmp-note{margin:14px 0 0;font-size:.79rem;color:var(--ink-3);max-width:72ch}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:1fr;gap:16px;margin:4px 0 0}
.review{margin:0;padding:24px;background:var(--cream);border:1px solid var(--rule-soft);border-radius:12px;display:flex;flex-direction:column}
.review .stars{color:var(--green);letter-spacing:.24em;font-size:.8rem;margin-bottom:12px}
.review blockquote{
  margin:0 0 16px;font-family:var(--sans);font-size:1.02rem;line-height:1.55;flex:1;
  color:var(--deep);border:0;padding:0;
}
.review blockquote::before{content:"“"}
.review blockquote::after{content:"”"}
.review figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 14px;font-size:.77rem;color:var(--ink-3)}
.review figcaption b{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
.review figcaption a{color:var(--ink-3);border-bottom:1px solid var(--rule)}
.reviews-src{margin:16px 0 30px;font-size:.81rem;color:var(--ink-3)}

/* ---------- disclosure ---------- */
.disc{
  margin:28px 0 8px;padding:18px 20px;background:rgba(10,20,45,.045);border-left:2px solid var(--rule);
  font-size:.81rem;line-height:1.58;color:var(--ink-2);max-width:68ch;
}
.disc b{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}

/* ---------- calculators ---------- */
.est-shell{display:grid;grid-template-columns:1fr;gap:0;margin:6px 0 30px;border:1px solid var(--rule);border-radius:2px;overflow:hidden;background:var(--paper)}
.est-form{padding:24px 20px}
.est-out{padding:26px 20px;background:var(--deep);color:#fff}
.field{margin:0 0 16px}
.field label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.field .hint{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3)}
.inp{display:flex;align-items:center;border:1px solid var(--rule);border-radius:2px;background:#fff;transition:border-color var(--t)}
.inp:focus-within{border-color:var(--green)}
.inp .pre,.inp .post{padding:0 12px;color:var(--ink-3);font-size:.95rem}
input[type=text],input[type=email],input[type=tel],select{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid var(--rule);border-radius:2px;padding:12px 14px;transition:border-color var(--t);
}
.inp input{border:0;padding-left:0;background:transparent}
input:focus,select:focus{outline:none;border-color:var(--green)}
.inp input:focus{border-color:transparent}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.field label.softpull,.softpull{display:flex;gap:9px;align-items:flex-start;margin-top:10px;font-size:.83rem;color:var(--ink-2);text-transform:none;letter-spacing:0;font-weight:400}
.softpull input{margin-top:4px}
.assure{margin-top:18px;border-top:1px solid var(--rule-soft);padding-top:16px;display:grid;gap:10px}
.a-row{display:flex;gap:10px;align-items:flex-start;font-size:.81rem;color:var(--ink-2);line-height:1.5}
.a-dot{width:5px;height:5px;border-radius:50%;background:var(--green);margin-top:8px;flex:0 0 auto}
.est-badge{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-2);margin-bottom:16px}
.oline{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule-dark-soft)}
.oline span{color:rgba(255,255,255,.62);font-size:.84rem}
.oline b{font-family:var(--display);font-weight:400;font-size:1.26rem;letter-spacing:-.01em}
.oline.big{padding-top:0;display:block}
.oline.big span{display:block;margin-bottom:4px}
.oline.big b{font-size:clamp(2rem,8vw,2.6rem);color:var(--green-2);line-height:1.02;display:block}
.est-msg{margin-top:16px;font-size:.87rem;color:rgba(255,255,255,.74);line-height:1.55}
.est-msg strong{color:#fff}
.est-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.est-cta .btn{flex:1 1 auto}
.est-disc{margin:18px 0 0;font-size:.69rem;line-height:1.5;color:rgba(255,255,255,.42)}

/* ---------- lead form ---------- */
.lead-card{margin:6px 0 24px;border:1px solid var(--rule);border-radius:2px;background:var(--paper);overflow:hidden}
.lead-form{padding:24px 20px;position:relative}
.lead-head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--rule-soft)}
.lead-head b{display:block;font-family:var(--display);font-weight:500;font-size:1.42rem;color:var(--deep);margin-bottom:4px}
.lead-head span{font-size:.87rem;color:var(--ink-3)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px;font-size:.79rem;color:var(--ink-2);line-height:1.5}
.consent input{margin-top:4px}
.form-status{margin-top:12px;font-size:.87rem}
.form-status.err{color:#a3282c}
.form-status.ok{color:var(--green-deep)}
.form-fine{margin:14px 0 0;font-size:.71rem;color:var(--ink-3);line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- box CTAs ---------- */
.boxcta{
  display:grid;gap:16px;align-items:center;margin:26px 0 30px;padding:24px 22px;
  background:var(--cream-2);border:1px solid var(--rule);border-radius:2px;
}
.boxcta p{margin:0;color:var(--ink-2);font-size:.91rem}
.boxcta p b{display:block;font-family:var(--display);font-weight:500;font-size:1.28rem;color:var(--deep);margin-bottom:5px}
.boxcta--dark{background:var(--card);border-color:transparent;color:#fff}
.boxcta--dark p{color:rgba(255,255,255,.72)}
.boxcta--dark p b{color:#fff}
.boxcta .btn{justify-self:start}

/* ---------- states list ---------- */
.states{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));column-gap:28px;margin:4px 0 0;padding:0;font-size:.92rem}
.states li{padding:9px 0;border-bottom:1px solid var(--rule-soft);break-inside:avoid;margin:0;padding-left:0}
.states li::before{display:none}

/* ---------- instagram ---------- */
.ig-inline{margin:6px 0 20px}
.ig-track{display:flex;gap:10px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.ig-tile{flex:0 0 auto;width:168px;height:168px;border-radius:2px;overflow:hidden;scroll-snap-align:start;background:var(--cream-2)}
.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform var(--t)}
.ig-tile:hover img{transform:scale(1.03)}
.ig-inline p{margin:14px 0 0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq-head h2{margin:0 0 4px;padding-top:26px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-family:var(--display);font-size:clamp(1.04rem,2.8vw,1.22rem);font-weight:500;color:var(--deep);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;color:var(--green-deep);font-size:1.3rem;font-family:var(--sans);transition:transform var(--t)}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 20px;max-width:62ch}
.faq .ans p{margin:0;color:var(--ink-2)}

/* ---------- author ---------- */
.author{display:flex;gap:16px;align-items:flex-start;padding:22px 0 0;border-top:1px solid var(--rule)}
.author img{width:56px;height:56px;border-radius:50%;background:var(--card);object-fit:cover;flex:0 0 auto}
.author p{margin:0;font-size:.84rem;color:var(--ink-3);line-height:1.55}
.author b{display:block;color:var(--deep);font-size:.94rem;margin-bottom:3px}

/* ---------- CTA band ---------- */
.band{background:var(--navy-2);color:#fff;padding:54px 0;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 100% 0%,rgba(73,147,89,.2),transparent 58%)}
.band .wrap{position:relative;display:grid;gap:28px}
.band h2{color:#fff;max-width:17ch;font-size:clamp(1.8rem,6vw,2.7rem)}
.band p{color:rgba(255,255,255,.72);max-width:46ch;margin:0}
.band-actions{display:flex;flex-wrap:wrap;gap:12px;align-content:start}
.band-actions .btn{flex:1 1 auto}

/* ---------- footer ---------- */
.foot{background:var(--deep);color:rgba(255,255,255,.72);padding:52px 0 96px;font-size:.9rem}
.foot-top{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;padding-bottom:34px;border-bottom:1px solid var(--rule-dark-soft)}
.foot-brand{grid-column:1/-1}
.foot-logo{height:28px;width:auto;margin-bottom:18px}
.foot-name{margin:0 0 12px;display:flex;flex-direction:column;gap:2px}
.foot-name strong{font-family:var(--display);font-weight:500;font-size:1.28rem;color:#fff}
.foot-name span{font-size:.81rem;color:rgba(255,255,255,.55)}
.foot-contact{margin:0 0 18px;line-height:1.7}
.foot-contact a{color:#fff;border-bottom:1px solid rgba(255,255,255,.2)}
.foot-contact a:hover{color:var(--green-2);border-color:var(--green-2)}
.foot-contact em{font-style:normal;color:rgba(255,255,255,.4);font-size:.79rem}
.foot h3{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.44);font-family:var(--sans);font-weight:600;margin:0 0 13px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot ul a{color:rgba(255,255,255,.74);font-size:.85rem}
.foot ul a:hover{color:var(--green-2)}
.legal{padding-top:30px}
.legal .tagline{font-family:var(--display);font-size:1.16rem;color:rgba(255,255,255,.9);margin:0 0 22px;max-width:34ch}
.legal-grid{display:grid;gap:15px}
.legal p{margin:0;font-size:.73rem;line-height:1.66;color:rgba(255,255,255,.44)}
.legal p b{color:rgba(255,255,255,.7);font-weight:600}
.legal a{color:rgba(255,255,255,.66);border-bottom:1px solid rgba(255,255,255,.18)}
.legal a:hover{color:var(--green-2);border-color:var(--green-2)}
.ehl-block{display:grid;gap:8px}
.ehl{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.ehl svg{width:17px;height:17px;fill:currentColor}
.legal .tx{font-size:.67rem;color:rgba(255,255,255,.32);border-top:1px solid var(--rule-dark-soft);padding-top:14px}
.legal .colophon{font-size:.67rem;color:rgba(255,255,255,.32)}

/* ---------- mobile quick bar ---------- */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr 1.35fr;
  background:rgba(10,20,45,.97);backdrop-filter:blur(8px);border-top:1px solid var(--rule-dark-soft);
}
.mobar a{
  display:flex;align-items:center;justify-content:center;padding:14px 8px;color:#fff;
  font-size:.86rem;font-weight:600;border-right:1px solid var(--rule-dark-soft);
}
.mobar a:last-child{border-right:0}
.mobar .mobar-cta{background:var(--green);color:#fff}
.mobar .mobar-cta:hover{background:var(--green-deep)}

/* ================= larger screens ================= */
@media(min-width:560px){
  .row2{gap:0 16px}
  .boxcta{grid-template-columns:1fr auto;gap:22px}
  .boxcta .btn{justify-self:end}
  .hero-actions .btn{flex:0 0 auto}
}

@media(min-width:760px){
  :root{--pad:28px}
  body{font-size:17.5px}
  .sec{padding:56px 0}
  .sec--intro{padding-top:62px;padding-bottom:44px}
  .hero--split .hero-grid{grid-template-columns:1.12fr .88fr;gap:28px;align-items:end;padding-top:52px}
  .hero--split .hero-copy{order:1;padding-bottom:58px}
  .hero--split .portrait{order:2}
  .portrait img{width:min(390px,38vw)}
  .portrait figcaption{text-align:left;padding-bottom:38px}
  .hero--rule .wrap{padding-top:64px;padding-bottom:70px}
  .hero--photo .wrap{padding-top:82px;padding-bottom:88px}
  .links{grid-template-columns:1fr 1fr;column-gap:36px}
  .gcards{grid-template-columns:1fr 1fr;column-gap:36px}
  .steps{grid-template-columns:repeat(3,1fr);column-gap:32px}
  .steps li{border-bottom:0;padding:24px 0 0}
  .proof-grid{grid-template-columns:repeat(4,1fr)}
  .stat{border-bottom:0;border-right:1px solid var(--rule-dark-soft);padding:24px 22px}
  .stat:last-child{border-right:0}
  .reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .reviews .review{padding:26px}
  .reviews--2{columns:2}
  .reviews--1{columns:1}
  .reviews--1 .review blockquote{font-size:clamp(1.3rem,2.6vw,1.75rem);max-width:30ch}
  .est-shell{grid-template-columns:1.05fr .95fr}
  .est-form{padding:32px 30px}
  .est-out{padding:32px 30px}
  .lead-form{padding:32px 32px}
  .band{padding:80px 0}
  .band .wrap{grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
  .band-actions{flex-direction:column;align-items:stretch}
  .band-actions .btn{flex:0 0 auto}
  .foot-top{grid-template-columns:repeat(3,1fr)}
  .disc{margin-top:34px;padding:22px 26px}
  .faq summary{padding-right:56px}
  .author{gap:20px}
  .cmp{min-width:0}
  .prow{padding:22px 4px;gap:18px}
}

@media(min-width:1000px){
  .sec{padding:60px 0}
  .sec--intro{padding-top:70px;padding-bottom:44px}
  .prose>*{max-width:46rem}
  .hero--split .hero-grid{gap:40px}
  .foot-top{grid-template-columns:1.7fr 1fr 1fr 1fr 1fr 1fr;gap:30px}
  .foot-brand{grid-column:auto}
  .legal .tagline{font-size:1.38rem}
  .plist{display:grid;grid-template-columns:1fr 1fr;column-gap:46px;border-top:0}
  .prow{border-top:1px solid var(--rule);border-bottom:0}
  .states{column-gap:32px}
  .ig-tile{width:206px;height:206px}
  .mobar{display:none}
  .foot{padding-bottom:56px}
}

@media(min-width:1200px){
  h1{letter-spacing:-.026em}
  .sec--intro .prose>p:first-child{max-width:40rem}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important;animation:none!important}
}

@media print{
  .nav,.mobar,.band,.draft-banner,.ig-inline{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .hero{background:#fff;color:#000}
  .hero h1,.hero h1 em{color:#000}
  .foot{background:#fff;color:#000}
  .legal p{color:#333}
}


/* ---------- editorial heading rail (desktop) ---------- */
@media(min-width:1040px){
  .sec--split .prose{display:grid;grid-template-columns:250px minmax(0,1fr);column-gap:58px;align-items:start}
  .sec--split .sec-head{grid-column:1}
  .sec--split .sec-body{grid-column:2;min-width:0}
  .sec--split .sec-head h2{position:sticky;top:92px;max-width:14ch;font-size:clamp(1.55rem,2.7vw,2.2rem);margin:0}
  .sec--split .sec-body>*{max-width:44rem}
  .sec--split .sec-body>.bleed,.sec--split .sec-body>.plist,.sec--split .sec-body>.cmp-shell,.sec--split .sec-body>.links,.sec--split .sec-body>.gcards,.sec--split .sec-body>.states,.sec--split .sec-body>table{
    margin-left:-308px;max-width:none;width:calc(100% + 308px);
  }
  /* a pulled element that opens the section would run under the heading rail */
  .sec--split .sec-body>:first-child.bleed,.sec--split .sec-body>:first-child.plist,.sec--split .sec-body>:first-child.cmp-shell,
  .sec--split .sec-body>:first-child.links,.sec--split .sec-body>:first-child.gcards,.sec--split .sec-body>:first-child.states,
  .sec--split .sec-body>table:first-child{margin-left:0;width:100%}
  .sec-body>.disc{max-width:72ch}
  .faq{display:grid;grid-template-columns:250px minmax(0,1fr);column-gap:58px;border-top:0;align-items:start}
  .faq-head{grid-column:1;grid-row:1/100}
  .faq-head h2{position:sticky;top:92px;max-width:12ch;font-size:clamp(1.55rem,2.7vw,2.2rem);padding-top:0}
  .faq details{grid-column:2}
  .faq details:first-of-type{border-top:1px solid var(--rule)}
  .author{max-width:none}
}
@media(min-width:1040px){
  .hero--split .socials{display:flex;margin-top:26px}
}

/* ---------- small refinements ---------- */
::selection{background:rgba(73,147,89,.22);color:var(--deep)}
h1,h2,.review blockquote,.hero-lead{text-wrap:balance}
.prose p,.prose li{text-wrap:pretty}

/* one quiet entrance on the hero; nothing else moves on scroll */
@media(prefers-reduced-motion:no-preference){
  .hero .eyebrow,.hero h1,.hero-lead,.hero-actions,.hero-note,.hero .socials,.portrait{
    animation:rise .62s cubic-bezier(.22,.61,.36,1) both;
  }
  .hero h1{animation-delay:.04s}
  .hero-lead{animation-delay:.09s}
  .hero-actions{animation-delay:.14s}
  .hero-note,.hero .socials{animation-delay:.19s}
  .portrait{animation-delay:.1s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}


/* ══════════════════════════════════════════════════════════════════════
   HOME HERO — geometric display, layered depth, intent doors, instrument
   Approved 2026-09-24. Navy + green kept; the change is type and depth.
   ══════════════════════════════════════════════════════════════════════ */
.hero--c{
  --hc-ink:#f2f6fb; --hc-dim:rgba(233,241,249,.72); --hc-faint:rgba(233,241,249,.48);
  --hc-mint:#7fd39a; --hc-mint-b:#a5e8bb; --hc-edge:rgba(255,255,255,.14);
  position:relative; overflow:hidden; isolation:isolate;
  background:#060c1c; color:var(--hc-ink);
  padding:clamp(84px,7vw,104px) 0 clamp(34px,4vw,48px);
}
.hero--c .hero-shot{
  position:absolute; inset:-6% -2%; width:104%; height:112%;
  object-fit:cover; object-position:62% 52%; z-index:-3;
  /* was saturate(.74) with an additive glow on top, which bleached the
     photograph into blue fog. Let the place read like a place. */
  filter:saturate(1.02) contrast(1.16) brightness(.82);
}
/* veil: vignette + directional wash, so type always has a floor */
.hero--c .hero-veil{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(64% 80% at 22% 54%, rgba(4,9,22,.94) 0%, rgba(4,9,22,.66) 44%, rgba(4,9,22,0) 76%),
    linear-gradient(98deg, rgba(4,9,22,.94) 0%, rgba(4,9,22,.62) 30%, rgba(4,9,22,.04) 56%, rgba(4,9,22,.34) 100%),
    linear-gradient(180deg, rgba(4,9,22,.62) 0%, rgba(4,9,22,.02) 24%, rgba(4,9,22,.06) 60%, rgba(4,9,22,.88) 100%);
}
/* glow: the thing that makes it read as depth rather than a flat block */
.hero--c .hero-glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 520px at 76% 30%, rgba(96,172,113,.20), transparent 66%),
    radial-gradient(620px 460px at 4% 84%, rgba(60,116,206,.16), transparent 68%);
  /* plus-lighter added light on top of the photo and washed it out */
  mix-blend-mode:screen; opacity:.55;
}
.hero--c > .wrap{position:relative; z-index:1}
.hero--c .hero-grid{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,3.6vw,52px); align-items:center;
}
.hero--c .hero-copy{min-width:0}

/* geometric display — the single biggest change from the old serif */
.hero--c .eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#9fe8b8; text-shadow:0 1px 14px rgba(6,12,28,.85);
}
.hero--c h1{
  font-family:'Archivo',var(--sans),sans-serif;
  font-weight:800; font-size:clamp(2.3rem,4.4vw,3.7rem); line-height:1.0;
  letter-spacing:-.035em; color:#fff; margin:16px 0 0; max-width:14ch;
  text-wrap:balance; text-shadow:0 2px 30px rgba(6,12,28,.75), 0 1px 3px rgba(6,12,28,.5);
}
.hero--c h1 em{
  font-style:normal; display:block;
  /* gradient text + text-shadow fight: the shadow paints through the transparent fill.
     Use a filter drop-shadow on the element instead. */
  background:linear-gradient(94deg,#c4f5d5 0%,#9fe8b8 40%,#6fc98c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 2px 22px rgba(6,12,28,.85)) drop-shadow(0 1px 2px rgba(6,12,28,.6));
}
.hero--c .hero-lead{
  color:#dbe5f0; max-width:40ch; margin-top:18px;
  font-size:16.5px; line-height:1.66; text-shadow:0 1px 16px rgba(6,12,28,.8);
}

/* three doors */
.hero--c .doors{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:26px 0 4px}
.hero--c .door{
  position:relative; text-align:left; cursor:pointer; min-width:0;
  padding:15px 14px 13px; border-radius:4px;
  border:1px solid var(--hc-edge); background:rgba(255,255,255,.055);
  color:var(--hc-ink); font:inherit; backdrop-filter:blur(10px) saturate(130%);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, background .22s, box-shadow .22s;
}
.hero--c .door{box-shadow:0 10px 26px -18px rgba(0,0,0,.85)}
.hero--c .door:hover{transform:translateY(-3px); border-color:rgba(127,211,154,.55); background:rgba(127,211,154,.12);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.95)}
.hero--c .door[aria-pressed="true"]{
  border-color:var(--hc-mint); background:rgba(127,211,154,.2);
  box-shadow:0 0 0 1px rgba(127,211,154,.5), 0 20px 50px -22px rgba(127,211,154,.7);
}
.hero--c .door[aria-pressed="true"] .d-t{color:#eafff1}
.hero--c .door[aria-pressed="true"] .d-s{color:var(--hc-mint-b)}
.hero--c .door:focus-visible{outline:2px solid var(--hc-mint-b); outline-offset:3px}
.hero--c .d-ic{display:block; width:22px; height:22px; margin-bottom:9px; color:var(--hc-mint)}
.hero--c .d-ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.hero--c .d-t{display:block; font-family:'Archivo',var(--sans); font-weight:700; font-size:15px; letter-spacing:-.01em; line-height:1.2}
.hero--c .d-s{display:block; margin-top:3px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--hc-faint); font-weight:600}

.hero--c .hero-actions{margin-top:22px}
.hero--c .hero-note{color:var(--hc-faint); margin-top:16px}
.hero--c .btn-ghost{border-color:rgba(255,255,255,.28); color:#fff; backdrop-filter:blur(6px)}
.hero--c .btn-ghost:hover{border-color:var(--hc-mint); color:var(--hc-mint-b); background:rgba(127,211,154,.08)}
.hero--c .socials a{border-color:rgba(255,255,255,.22); color:var(--hc-dim)}
.hero--c .socials a:hover{border-color:var(--hc-mint); color:var(--hc-mint)}

/* the instrument: a floating object, not a panel painted on the page */
.hero--c .hero-tool{position:relative; min-width:0}
.hero--c .hero-tool::before{
  content:''; position:absolute; inset:-14% -8% -18%; z-index:0; pointer-events:none;
  background:radial-gradient(60% 52% at 50% 48%, rgba(96,172,113,.30), transparent 70%);
  filter:blur(26px);
}
.hero--c .est-shell{
  position:relative; z-index:1; display:block; margin:0; min-width:0;
  border-radius:5px; overflow:hidden; border:1px solid rgba(255,255,255,.17);
  background:linear-gradient(168deg, rgba(20,38,78,.94) 0%, rgba(9,18,40,.97) 62%, rgba(6,12,28,.98) 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.07) inset, 0 50px 110px -46px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.35);
  backdrop-filter:blur(16px) saturate(140%);
}
.hero--c .est-head{padding:20px 20px 0; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:2px; background:none}
.hero--c .est-head h2{
  font-family:'Archivo',var(--sans); font-weight:700; font-size:18px; line-height:1.25;
  color:#fff; margin:0 0 7px; letter-spacing:-.015em;
}
.hero--c .est-head p{font-size:12.5px; line-height:1.6; color:var(--hc-faint); margin:0 0 16px}
.hero--c .est-form{padding:18px 20px 2px; background:none}
.hero--c .est-out{padding:2px 20px 20px; background:none; color:#fff}
.hero--c .est-form label{color:var(--hc-faint); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:700}
.hero--c .est-form .hint{color:rgba(233,241,249,.34); text-transform:none; letter-spacing:0; font-weight:400}

/* the white lives on the .inp wrapper, not the input */
.hero--c .inp{background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.19); border-radius:3px; min-width:0}
.hero--c .inp:focus-within{border-color:var(--hc-mint); background:rgba(255,255,255,.115); box-shadow:0 0 0 3px rgba(127,211,154,.18)}
.hero--c .inp input,.hero--c .est-form input[type=text]{
  background:transparent; color:#fff; border-color:transparent; font-variant-numeric:tabular-nums; font-weight:600;
}
.hero--c .est-form select{background-color:rgba(255,255,255,.075); border-color:rgba(255,255,255,.19); color:#fff; border-radius:3px}
.hero--c .est-form select:focus{border-color:var(--hc-mint)}
.hero--c .est-form input::placeholder{color:rgba(233,241,249,.36)}
.hero--c .inp .pre,.hero--c .inp .post{color:var(--hc-faint)}
.hero--c .inp.has-post input{padding-right:6px}
.hero--c .inp .post{padding-right:14px}
.hero--c .softpull{color:rgba(233,241,249,.55)}
.hero--c .softpull input{accent-color:var(--hc-mint)}
.hero--c .row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero--c .assure,.hero--c .est-cta{display:none}
.hero--c .est-badge{color:var(--hc-mint); border-color:rgba(127,211,154,.42)}
.hero--c .oline{border-bottom-color:rgba(255,255,255,.1)}
.hero--c .oline span{color:var(--hc-faint)}
.hero--c .oline b{color:#fff; font-family:'Archivo',var(--sans); font-weight:700; letter-spacing:-.02em}
.hero--c .oline.big b{
  color:transparent; font-size:clamp(2.2rem,3.8vw,2.9rem); line-height:1;
  background:linear-gradient(96deg,var(--hc-mint-b),var(--hc-mint));
  -webkit-background-clip:text; background-clip:text;
}
.hero--c .est-msg{background:rgba(96,172,113,.13); border-left-color:var(--hc-mint); color:rgba(233,241,249,.86)}
.hero--c .est-disc{color:rgba(233,241,249,.36)}

/* counted proof rail */
.hero--c .tick-rail{
  position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:clamp(34px,4vw,54px); border-top:1px solid rgba(255,255,255,.12);
}
.hero--c .tk{padding:22px 18px 0; border-right:1px solid rgba(255,255,255,.1)}
.hero--c .tk:last-child{border-right:0}
.hero--c .tk b{
  display:block; font-family:'Archivo',var(--sans); font-weight:800;
  font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1; letter-spacing:-.035em; color:#fff;
  font-variant-numeric:tabular-nums;
}
.hero--c .tk span{display:block; margin-top:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--hc-faint); font-weight:600}

@media(max-width:1040px){
  .hero--c .hero-grid{grid-template-columns:minmax(0,1fr); gap:32px}
  .hero--c h1{max-width:100%}
  .hero--c .hero-lead{max-width:100%}
}
@media(max-width:620px){
  .hero--c{padding:80px 0 34px}
  .hero--c h1{font-size:clamp(2.2rem,9.6vw,3.1rem)}
  .hero--c .doors{grid-template-columns:1fr; gap:8px}
  .hero--c .door{display:flex; align-items:center; gap:12px; padding:13px 14px}
  .hero--c .d-ic{margin-bottom:0; flex:0 0 auto}
  .hero--c .est-head{padding:16px 15px 0}
  .hero--c .est-form{padding:15px 15px 2px}
  .hero--c .est-out{padding:2px 15px 16px}
  .hero--c .tick-rail{grid-template-columns:1fr; }
  .hero--c .tk{border-right:0; border-bottom:1px solid rgba(255,255,255,.1); padding:16px 0}
  .hero--c .tk:last-child{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .hero--c .door{transition:none}
}

/* NAV: shed by width so nothing clips */
@media(max-width:1500px){ .nav-cta .btn-ghost:not(.nav-apply){display:none} }
@media(max-width:1320px){ .nav-apply{display:none} }


/* final pass: kill the 5px mobile overflow and the dead space above the hero copy */

/* buydown calculator: sub-label on an output row, and a rule between blocks */
.est-out .oline .sub{display:block;font-weight:500;font-size:.78rem;letter-spacing:.02em;opacity:.7;margin-top:2px}
.est-form .est-lede{margin:0 0 14px;font-size:.92rem;line-height:1.5;opacity:.85}
/* .oline sets its own display, which beats [hidden]; without this the unused buydown year stays on screen */
.est-out .oline[hidden]{display:none!important}
.est-out .orule{border:0;border-top:1px solid rgba(255,255,255,.14);margin:14px 0}
#buydown-calculator .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media(max-width:560px){#buydown-calculator .row2{grid-template-columns:minmax(0,1fr)}}


/* PRODUCT LIST: rows ran together with no edge between the two columns.
   Give each one a real card so the eye can separate them. */
.plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.plist .prow{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:16px;
  padding:22px 22px;border:1px solid rgba(16,26,48,.12);border-radius:4px;
  background:#fff;text-decoration:none;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.plist .prow:hover{
  border-color:rgba(46,125,79,.55);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(16,26,48,.10);
}
.plist .pnum{font-size:.72rem;letter-spacing:.12em;opacity:.45;padding-top:4px;font-variant-numeric:tabular-nums}
.plist .pkick{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:6px}
.plist .prow h3{margin:0 0 6px;font-size:1.22rem;line-height:1.2}
.plist .prow p{margin:0;font-size:.92rem;line-height:1.5;opacity:.8}
.plist .parrow{align-self:center;opacity:.35;transition:opacity .18s ease,transform .18s ease}
.plist .prow:hover .parrow{opacity:1;transform:translateX(3px)}
@media(max-width:780px){.plist{grid-template-columns:minmax(0,1fr);gap:10px}.plist .prow{padding:18px 16px;gap:12px}}

.est-out .est-next{margin:10px 0 0;font-size:.82rem;line-height:1.45;opacity:.7}
.est-out .est-cta .btn-lg{flex:1 1 auto}

/* ============================================================
   SECTION RHYTHM
   Before: every heading section was sec--split — a heading marooned in a
   narrow left column with a tall empty gap under it, repeated down the page.
   Now three real layouts rotate, and one of them is dark.
   ============================================================ */

/* --- 1. SPLIT: heading left, body right. The heading now carries weight
       and sticks, so the column is never just empty space. --- */
.sec--split .prose{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.sec--split .sec-head{position:sticky;top:96px}
.sec--split .sec-head h2{
  margin:0;font-size:clamp(1.65rem,2.9vw,2.35rem);line-height:1.08;letter-spacing:-.02em;
  padding-top:14px;border-top:2px solid var(--green,#2e7d4f);
}
.sec--split .sec-body>*:first-child{margin-top:0}

/* --- 2. STACK: heading spans the full width as a real title, body below.
       Used for wide content (tables, calculators, product lists). --- */
.sec--stack .prose{display:block}
.sec--stack .sec-head{margin:0 0 26px;padding-bottom:16px;border-bottom:1px solid var(--rule-soft)}
.sec--stack .sec-head h2{
  margin:0;max-width:22ch;
  font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.15;letter-spacing:-.02em;
}
.sec--stack .sec-body{max-width:none}
.sec--stack .sec-body>p,.sec--stack .sec-body>ul,.sec--stack .sec-body>ol,.sec--stack .sec-body>blockquote{max-width:68ch}
.sec--stack .sec-body>*:first-child{margin-top:0}

/* --- 3. BAND: a dark full-bleed break. This is what kills the cream monotony. --- */
.sec--band{
  background:#0c1730;color:#e9eef7;border:0;
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(56px,7vw,86px) 0;
}
.sec--band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(84,180,120,.16), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(38,74,140,.30), transparent 62%);
}
.sec--band .prose{display:grid;grid-template-columns:minmax(200px,262px) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.sec--band .sec-head h2{
  margin:0;padding-top:20px;border-top:2px solid rgba(127,211,154,.55);
  font-size:clamp(1.75rem,3.1vw,2.5rem);line-height:1.05;letter-spacing:-.028em;color:#fff;
}
.sec--band .sec-body{color:#dbe5f3;font-size:1.02rem}
.sec--band .sec-body>*:first-child{margin-top:0}
.sec--band a{color:#a5e8bb}
.sec--band a:hover{color:#fff}
.sec--band strong,.sec--band b{color:#fff}
.sec--band h3{color:#fff}
.sec--band .steps{border-top-color:rgba(255,255,255,.16)}
.sec--band .steps li{border-bottom-color:rgba(255,255,255,.12)}
.sec--band .steps li::before{color:#7fd39a}
.sec--band table{color:#dbe5f3}
.sec--band th,.sec--band td{border-color:rgba(255,255,255,.14)}
.sec--band .btn-ghost{color:#e9eef7;border-color:rgba(255,255,255,.28)}
.sec--band .btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5)}

/* a dark band next to a dark band would read as one slab */
.sec--band + .sec--band{padding-top:0}

/* --- STEPS: were crushed into the right half. Give them the full width
       and a numeral big enough to act as the section's visual anchor. --- */
.sec--band .steps,.sec--stack .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,40px);border-top:0}
.sec--band .steps li,.sec--stack .steps li{border-bottom:0;border-top:1px solid var(--rule);padding:20px 0 0}
.sec--band .steps li{border-top-color:rgba(255,255,255,.18)}
.sec--band .steps li::before,.sec--stack .steps li::before{
  position:static;display:block;margin-bottom:12px;
  font-size:2.6rem;line-height:1;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;opacity:.9;
}
@media(max-width:820px){
  .sec--band .steps,.sec--stack .steps{grid-template-columns:minmax(0,1fr)}
  .sec--band .steps li,.sec--stack .steps li{padding:18px 0}
}

/* --- PORTRAIT: the credibility section had a dead column. Put his face in it. --- */
.sec--portrait .prose{grid-template-columns:minmax(240px,360px) minmax(0,1fr)}
.portrait-card{position:relative;border-radius:4px;overflow:hidden;background:linear-gradient(170deg,#12203f,#0a1density)}
.portrait-card{background:linear-gradient(170deg,#16274b,#0a1226)}
.portrait-card img{display:block;width:100%;height:auto}
.portrait-tag{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(to top,rgba(6,12,28,.94),rgba(6,12,28,0));
  color:#fff;font-size:.82rem;line-height:1.35;
}
.portrait-tag b{display:block;font-size:.95rem;margin-bottom:2px}

@media(max-width:900px){
  .sec--split .prose,.sec--band .prose,.sec--portrait .prose{grid-template-columns:minmax(0,1fr);gap:20px}
  .sec--split .sec-head{position:static}
  .sec--split .sec-head h2{padding-top:12px}
}


/* 3. stack sections left a wide dead column: let full-bleed children use it */
/* .bleed positions itself; overriding max-width here pushed it off the left edge */
.sec--stack .sec-body .cta-band,.sec--stack .sec-body .disc{max-width:none}
/* 5. a light section running straight into a dark band needs less air, not more */
.sec:has(+ .sec--band){padding-bottom:clamp(30px,4vw,44px)}
.sec--band + .sec{padding-top:clamp(40px,5vw,58px)}

/* the product grid was inheriting the 78ch prose measure and leaving 320px dead */
.sec--stack .sec-body .plist,.sec--stack .sec-body>.bleed{max-width:none;width:100%}
.sec--stack .sec-body{max-width:none}
.sec--stack .sec-body>p,.sec--stack .sec-body>ul,.sec--stack .sec-body>ol,.sec--stack .sec-body>h3{max-width:78ch}

/* ---- Equity box: the capture that turns the tool into a lead magnet ---- */
.est-grab{margin:18px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.est-grab .eg-head{margin:0 0 14px}
.est-grab .eg-head b{display:block;font-size:1.05rem;color:#fff;margin-bottom:4px}
.est-grab .eg-head span{display:block;font-size:.86rem;line-height:1.5;color:#b9c6da}
.est-grab .eg-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.est-grab .field{margin:0 0 12px}
.est-grab label{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#9fb0c9;margin-bottom:6px}
.est-grab input[type=text],.est-grab input[type=tel],.est-grab input[type=email]{
  width:100%;padding:12px 13px;border-radius:3px;font-size:1rem;
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.19);color:#fff;
}
.est-grab input::placeholder{color:#8496b0}
.est-grab input:focus{outline:none;border-color:#7fd39a;background:rgba(255,255,255,.11)}
.est-grab .eg-consent{display:flex;gap:9px;align-items:flex-start;margin:2px 0 14px;
  font-size:.78rem;line-height:1.45;color:#b9c6da;text-transform:none;letter-spacing:0}
.est-grab .eg-consent input{margin-top:2px;flex:0 0 auto}
.est-grab .eg-consent a{color:#a5e8bb}
.est-grab .eg-fine{margin:10px 0 0;font-size:.74rem;color:#93a4bd}
.est-grab .form-status.err{color:#ffb4a8;font-size:.84rem;margin-top:9px}
.eg-done{padding:6px 0 2px}
.eg-done b{display:block;font-size:1.1rem;color:#7fd39a;margin-bottom:6px}
.eg-done span{display:block;font-size:.9rem;line-height:1.55;color:#cfdaea}
.est-out .est-cta{margin-top:14px}
@media(max-width:560px){.est-grab .eg-row{grid-template-columns:minmax(0,1fr)}}

/* ---- Calculator modes: show only the fields that belong to the mode ---- */
#equity[data-mode="purchase"] .m-debt,
#equity[data-mode="refinance"] .m-debt{display:none}
#equity[data-mode="equity"] .m-rate{display:none}
#equity[data-mode="purchase"] .m-eq,
#equity[data-mode="refinance"] .m-eq{display:none}
#equity[data-mode="equity"] .m-pay{display:none}

/* ---- Intent doors: they were three near-identical grey boxes ---- */
.doors .door{position:relative;overflow:hidden;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.doors .door .d-ic{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;margin-bottom:8px}
.doors .door[data-intent="purchase"] .d-ic{background:rgba(127,211,154,.16);color:#a5e8bb}
.doors .door[data-intent="refinance"] .d-ic{background:rgba(120,170,255,.16);color:#a9c8ff}
.doors .door[data-intent="equity"] .d-ic{background:rgba(255,198,120,.16);color:#ffd79a}
.doors .door::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent;transition:background .18s ease}
.doors .door[data-intent="purchase"]::after{background:rgba(127,211,154,.35)}
.doors .door[data-intent="refinance"]::after{background:rgba(120,170,255,.35)}
.doors .door[data-intent="equity"]::after{background:rgba(255,198,120,.35)}
.doors .door[aria-pressed="true"]{transform:translateY(-2px)}
.doors .door[data-intent="purchase"][aria-pressed="true"]::after{background:#7fd39a;height:4px}
.doors .door[data-intent="refinance"][aria-pressed="true"]::after{background:#a9c8ff;height:4px}
.doors .door[data-intent="equity"][aria-pressed="true"]::after{background:#ffd79a;height:4px}

/* ---- Payment breakdown: the part that makes people stay and play ---- */
.est-more{margin:0 0 14px;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}
.est-more>summary{list-style:none;cursor:pointer;padding:13px 0;font-size:.88rem;color:#dbe5f3;display:flex;align-items:center;gap:8px}
.est-more>summary::-webkit-details-marker{display:none}
.est-more>summary::before{content:"+";font-size:1.1rem;line-height:1;color:#7fd39a;width:14px}
.est-more[open]>summary::before{content:"\2212"}
.est-more>summary .hint{opacity:.6}
.est-more .field{margin-bottom:12px}
.est-hintline{margin:2px 0 14px;font-size:.76rem;line-height:1.5;color:#93a4bd}

.est-out .oline.big2{align-items:baseline;padding-bottom:6px}
.est-out .oline.big2 b{font-size:clamp(1.9rem,4vw,2.5rem);color:#7fd39a;letter-spacing:-.02em}

.paybar{display:flex;height:9px;border-radius:99px;overflow:hidden;margin:4px 0 14px;background:rgba(255,255,255,.08)}
.paybar .seg{display:block;height:100%}
.seg-pi{background:#7fd39a}
.seg-tax{background:#a9c8ff}
.seg-ins{background:#ffd79a}
.seg-hoa{background:#c9a6ff}
.seg-pmi{background:#ff9f9f}

.paylegend{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px}
.paylegend li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;font-size:.88rem;color:#dbe5f3}
.paylegend .sw{width:9px;height:9px;border-radius:2px;display:block}
.sw-pi{background:#7fd39a}.sw-tax{background:#a9c8ff}.sw-ins{background:#ffd79a}
.sw-hoa{background:#c9a6ff}.sw-pmi{background:#ff9f9f}
.paylegend b{font-variant-numeric:tabular-nums;color:#fff}

#oDti.dti-ok{color:#7fd39a}
#oDti.dti-warn{color:#ffd79a}
#oDti.dti-bad{color:#ff9f9f}
.est-out .oline .hint{font-size:.76rem;opacity:.65;font-weight:400}
.geo-note{margin:0 0 14px;padding:11px 13px;border-radius:3px;background:rgba(127,211,154,.10);border:1px solid rgba(127,211,154,.24);font-size:.85rem;line-height:1.5;color:#dbe5f3}
.geo-note b{color:#a5e8bb}

/* The wrap was a fixed 1180px at every width, so large monitors got a narrow
   column with dead margins, and the nav ran out of room and clipped the name. */
@media(min-width:1500px){ :root{ --wrap:1340px } }
@media(min-width:1800px){ :root{ --wrap:1460px } }
@media(min-width:2100px){ :root{ --wrap:1560px } }
/* the phone reappearing at 1500 was what squeezed the brand; keep it out of the
   inline row entirely — it lives in the hero, the footer and the mobile bar */
@media(min-width:1181px){ .nav-cta .btn-ghost:not(.nav-apply){display:none} }

/* ---- Docked capture: small, rides along, never blocks the page ---- */
.dock{position:fixed;right:20px;bottom:20px;width:292px;z-index:60;
  background:#0d1a35;border:1px solid rgba(127,211,154,.30);border-radius:5px;
  box-shadow:0 18px 46px rgba(4,10,24,.55);padding:16px 16px 14px;
  opacity:0;transform:translateY(14px);transition:opacity .26s ease,transform .26s ease;pointer-events:none}
.dock.is-in{opacity:1;transform:none;pointer-events:auto}
.dock-x{position:absolute;top:6px;right:8px;background:none;border:0;color:#8fa2bd;font-size:1.3rem;line-height:1;cursor:pointer;padding:4px}
.dock-x:hover{color:#fff}
.dock-t{display:block;color:#fff;font-size:1.02rem;margin-bottom:4px}
.dock-s{margin:0 0 11px;font-size:.79rem;line-height:1.45;color:#b4c2d8}
.dock .field{margin-bottom:9px}
.dock label{display:block;font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;color:#93a6c2;margin-bottom:4px}
.dock input[type=text],.dock input[type=tel],.dock input[type=email]{width:100%;padding:9px 11px;border-radius:3px;font-size:.94rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff}
.dock input:focus{outline:none;border-color:#7fd39a;background:rgba(255,255,255,.11)}
.dock-consent{display:flex;gap:7px;align-items:flex-start;margin:4px 0 10px;
  font-size:.7rem;line-height:1.4;color:#a8b8d0;text-transform:none;letter-spacing:0}
.dock-consent input{margin-top:1px;flex:0 0 auto}
.dock .form-status.err{color:#ffb4a8;font-size:.76rem;margin-top:7px}
.dock .eg-done b{font-size:1rem}
.dock .eg-done span{font-size:.82rem}
@media(max-width:760px){.dock{display:none}}
@media(prefers-reduced-motion:reduce){.dock{transition:none}}

/* ---- THE SHEET: one shelf versus the whole shelf ---- */
.sheet{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:0;
  border:1px solid var(--rule);border-radius:5px;overflow:hidden;margin:6px 0 4px;background:#fff}
.sh-side{padding:26px 24px 24px;display:flex;flex-direction:column;align-self:start}
.sh-bank{background:#f3f2ec;border-right:1px solid var(--rule)}
.sh-me{background:#0c1730;color:#e9eef7;position:relative;isolation:isolate}
.sh-me::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(110% 80% at 88% 0%, rgba(84,180,120,.16), transparent 62%)}
.sh-cap{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;opacity:.55;margin-bottom:16px}
.sh-me .sh-cap{color:#a5e8bb;opacity:1}

.sh-one{list-style:none;margin:0;padding:0}
.sh-one li{display:inline-flex;align-items:center;padding:10px 16px;border-radius:3px;
  background:#fff;border:1px solid rgba(194,69,47,.45);color:var(--ink);
  font-size:.95rem;font-family:var(--sans)}

.sh-chips,.sh-one{list-style:none;margin:0;padding:0}
/* .prose ul>li::before paints a green dash on every list item; these are chips */
.sh-chips>li::before,.sh-one>li::before{display:none!important;content:none!important}
.sh-chips>li,.sh-one>li{padding-left:0}
.sh-chips{display:flex;flex-wrap:wrap;gap:8px}
.sh-chips li{padding:7px 12px;border-radius:3px;font-size:.84rem;font-family:var(--sans);
  background:rgba(127,211,154,.12);border:1px solid rgba(127,211,154,.3);color:#dff3e6;
  opacity:0;transform:translateY(6px)}
.is-vis .sh-chips li{opacity:1;transform:none;
  transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--i,0)*28ms + 80ms)}

.sh-foot{margin:0;padding-top:18px;font-size:.84rem;line-height:1.55;opacity:.72}
.sh-me .sh-foot{color:#b9c6da;opacity:1}
.sh-me .sh-foot b{color:#fff}
@media(max-width:760px){
  .sheet{grid-template-columns:minmax(0,1fr)}
  .sh-bank{border-right:0;border-bottom:1px solid var(--rule)}
  .sh-side{padding:20px 18px}
}
@media(prefers-reduced-motion:reduce){.sh-chips li{opacity:1!important;transform:none!important}}

/* ---- Scroll reveal: the page had no motion at all ---- */
.sec{opacity:1}
.reveal{opacity:0;transform:translateY(16px)}
.reveal.is-vis{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger>*{opacity:0;transform:translateY(14px)}
.reveal-stagger.is-vis>*{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.is-vis>*:nth-child(1){transition-delay:40ms}
.reveal-stagger.is-vis>*:nth-child(2){transition-delay:100ms}
.reveal-stagger.is-vis>*:nth-child(3){transition-delay:160ms}
.reveal-stagger.is-vis>*:nth-child(4){transition-delay:220ms}
.reveal-stagger.is-vis>*:nth-child(5){transition-delay:280ms}
.reveal-stagger.is-vis>*:nth-child(6){transition-delay:340ms}
.reveal-stagger.is-vis>*:nth-child(n+7){transition-delay:400ms}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*,.sh-row{opacity:1!important;transform:none!important;transition:none!important}
  .sh-bar i{transition:none}
}

/* the portrait sits in the split column that used to be empty */
.sec-body>.portrait-card{float:right;width:min(280px,34%);margin:0 0 20px 26px}
.portrait-card{border-radius:5px;overflow:hidden;background:linear-gradient(170deg,#16274b,#0a1226);position:relative}
.portrait-card img{display:block;width:100%;height:auto}
.portrait-tag{position:absolute;left:0;right:0;bottom:0;padding:14px 15px;
  background:linear-gradient(to top,rgba(6,12,28,.95),rgba(6,12,28,0));color:#fff;font-size:.76rem;line-height:1.4}
.portrait-tag b{display:block;font-size:.92rem;margin-bottom:3px}
@media(max-width:760px){.sec-body>.portrait-card{float:none;width:min(240px,70%);margin:0 auto 18px;display:block}}

/* the proof strip used to interrupt a paragraph; it now sits under the hero */
.sec--proofstrip{padding:0;background:var(--cream);border:0}
.sec--proofstrip .proof{margin:0 auto;position:relative;z-index:3}
.sec--proofstrip{padding:clamp(34px,4vw,50px) 0}
/* only the home page floats it up into the hero */
.t-home .sec--proofstrip .proof{margin:-34px auto 0}
.t-home .sec--proofstrip{padding:0}
.t-home .sec--proofstrip + .sec{padding-top:clamp(34px,4vw,48px)}
@media(max-width:760px){.sec--proofstrip .proof{margin-top:-20px}}

/* ---- Housing market lookup ---- */
.mkt{background:#0c1730;border-radius:5px;padding:26px 24px;color:#e9eef7;position:relative;isolation:isolate;overflow:hidden}
.mkt::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(110% 80% at 88% 0%, rgba(84,180,120,.16), transparent 62%)}
.mkt-find label{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#9fb0c9;margin-bottom:8px}
.mkt-row{display:flex;gap:10px;flex-wrap:wrap}
.mkt-row input{flex:1 1 150px;min-width:0;padding:13px 14px;border-radius:3px;font-size:1.15rem;letter-spacing:.06em;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;font-variant-numeric:tabular-nums}
.mkt-row input:focus{outline:none;border-color:#7fd39a;background:rgba(255,255,255,.12)}
.mkt-row .btn{flex:0 0 auto}
.mkt-status{margin:9px 0 0;font-size:.83rem;color:#b9c6da;min-height:1.1em}
.mkt-status.err{color:#ffb4a8}

.mkt-out{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15)}
.mkt-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.mkt-place{font-size:1.02rem;color:#fff;font-weight:600}
.mkt-as{font-size:.76rem;color:#93a4bd}
.mkt-big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mkt-big b{font-size:clamp(2.1rem,5vw,3.1rem);color:#7fd39a;letter-spacing:-.025em;line-height:1}
.mkt-lab{font-size:.84rem;color:#b9c6da}
.mkt-deltas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
.mkt-d{padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:4px}
.mkt-d span{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#93a4bd;margin-bottom:5px}
.mkt-d b{font-size:1.32rem;font-variant-numeric:tabular-nums}
.mkt-d b.up{color:#7fd39a}.mkt-d b.down{color:#ff9f9f}
.mkt-spark{display:block;width:100%;height:110px;margin:2px 0 4px}
.mkt-scale{display:flex;justify-content:space-between;font-size:.72rem;color:#8fa2bd;font-variant-numeric:tabular-nums}
.mkt-src{margin:14px 0 0;font-size:.74rem;line-height:1.5;color:#8fa2bd}
.mkt-next{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15)}
.mkt-next b{display:block;color:#fff;margin-bottom:6px}
.mkt-next p{margin:0 0 14px;font-size:.92rem;line-height:1.55;color:#dbe5f3}
@media(max-width:560px){.mkt{padding:20px 16px}}

/* ---- OBMMI rate widget: a guest on the page, framed to belong ---- */
.obmmi{margin:4px 0 6px}
.obmmi-frame{background:#fff;border:1px solid var(--rule);border-radius:5px;padding:10px;overflow-x:auto}
.obmmi-frame iframe{display:block;width:750px;max-width:100%;height:462px;border:0}
.obmmi-note{margin:14px 0 0;font-size:.84rem;line-height:1.6;color:var(--ink-2);max-width:72ch}
.obmmi-note b{color:var(--ink)}
@media(max-width:820px){.obmmi-frame{padding:6px}.obmmi-frame iframe{height:520px}}

/* ---- GHL chat widget ----
   It renders as <chat-widget> with a shadow DOM, so its bubble cannot be
   styled from here. But a transform on the host makes it a containing block,
   which means the widget's position:fixed children anchor to the HOST instead
   of the viewport. That gives us control without touching their markup.
   Measured: launcher 58x58 and prompt 301x150, both bottom/right 20px. */
chat-widget{z-index:70}

@media(max-width:760px){
  /* the sticky call/text bar owns the bottom 51px; lift the widget above it */
  /* BP set the widget to the bottom-LEFT corner in GoHighLevel, so the host
     box must hug the left edge or the bubble lands 49px in from it.
     If that setting ever changes corner, flip this to right:0. */
  chat-widget{
    position:fixed;
    left:0; bottom:66px;
    width:341px; height:230px;
    transform:translateZ(0);        /* the containing block */
    z-index:70;
  }
}
/* two floating boxes is one too many: chat wins, the dock stands down.
   Only applied once the widget has really rendered (see c_chat). */
html.has-chat .dock{display:none!important}

/* the logo + name lockup on phones: keep the rule between them so it reads as
   one mark, not two unrelated things */
@media(max-width:430px){
  .bm-div{display:block!important}
  .bm-logo{height:19px}
  .bm-name{font-size:.92rem}
  .bm-sub{font-size:8.5px;letter-spacing:.07em}
  .brandmark{gap:8px}
}

/* ---- Call action in the top bar (phones) ----
   The nav CTAs are hidden below 1301px, which left no way to reach him from
   the header. This puts a tap-to-call next to the menu button. */
.nav-call{display:none}
@media(max-width:1180px){
  .nav-call{
    display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
    margin-left:auto;padding:9px 13px;border-radius:3px;
    background:var(--green);color:#fff;text-decoration:none;
    font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.01em;
  }
  .nav-call:hover,.nav-call:active{background:var(--green-deep);color:#fff}
  .nav-call svg{width:15px;height:15px;flex:0 0 auto}
  .nav-toggle{margin-left:10px}
}
/* at phone widths the brand has to give up room for it */
@media(max-width:560px){
  .nav-call{padding:8px 11px;font-size:.8rem;gap:6px}
  .bm-sub{display:none!important}
  .bm-logo{height:18px}
  .bm-name{font-size:.93rem}
}
@media(max-width:380px){
  .nav-call span{display:none}
  .nav-call{padding:9px 10px}
}

/* The chat host is a 341x230 invisible box at the bottom-left. With the mobile
   drawer open it covered the lower menu items and swallowed their taps
   (nav z-index 40 vs chat 70). Stand it down while the drawer is open. */
html.nav-open chat-widget{display:none!important}
/* and keep the drawer above it the rest of the time */
.nav{z-index:80}

/* ---- TOOLS ROW: give people something to do, with a picture ---- */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:6px 0}
.tcard{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--rule);border-radius:5px;overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease,border-color .2s ease;
}
.tcard:hover{transform:translateY(-3px);border-color:rgba(73,147,89,.5);box-shadow:0 14px 34px rgba(10,20,45,.13)}
.tcard-img{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#101f42}
.tcard-img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.05);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tcard:hover .tcard-img img{transform:scale(1.045)}
.tcard-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,20,45,.12),rgba(10,20,45,.42))}
.tcard-body{display:flex;flex-direction:column;gap:7px;padding:18px 18px 20px;flex:1 1 auto}
.tcard-kick{font-family:var(--sans);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--green-deep)}
.tcard-t{font-family:var(--display);font-size:1.28rem;line-height:1.18;letter-spacing:-.015em;color:var(--ink)}
.tcard-p{font-size:.89rem;line-height:1.5;color:var(--ink-2);flex:1 1 auto}
.tcard-go{font-family:var(--sans);font-size:.83rem;font-weight:600;color:var(--green-deep);margin-top:4px}
.tcard:hover .tcard-go{color:var(--green)}
@media(max-width:900px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.tools{grid-template-columns:minmax(0,1fr);gap:14px}
  .tcard{flex-direction:row;align-items:stretch}
  .tcard-img{flex:0 0 116px;aspect-ratio:auto}
  .tcard-body{padding:14px 15px}
  .tcard-t{font-size:1.08rem}.tcard-p{font-size:.84rem}
}

/* ---- Interior hero with a photograph ----
   Product pages were flat type on navy. A graded photo behind the headline
   gives each page its own face without touching the palette. */
.hero--shot{position:relative;isolation:isolate;overflow:hidden}
.hero--shot::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-pic);background-size:cover;background-position:50% 46%;
  filter:saturate(.92) contrast(1.1) brightness(.62);
}
.hero--shot .hero-pic-veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(96deg, rgba(6,12,28,.95) 0%, rgba(6,12,28,.82) 42%, rgba(6,12,28,.48) 78%, rgba(6,12,28,.62) 100%),
    linear-gradient(180deg, rgba(6,12,28,.55) 0%, rgba(6,12,28,.18) 40%, rgba(6,12,28,.72) 100%);
}
.hero--shot .wrap{position:relative;z-index:1}
@media(max-width:760px){
  .hero--shot::before{background-position:58% 46%}
  .hero--shot .hero-pic-veil{background:
    linear-gradient(180deg, rgba(6,12,28,.72) 0%, rgba(6,12,28,.58) 38%, rgba(6,12,28,.88) 100%)}
}

/* ============================================================
   SCALE AND VOICE
   The page was set at a careful, medium, editorial scale. Section
   headings now carry real weight, and a script accent gives it warmth.
   ============================================================ */

/* section headings, considerably larger */
.sec--stack .sec-head h2{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.15;letter-spacing:-.02em;max-width:26ch}
.sec--split .sec-head h2{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.02;letter-spacing:-.03em}
.sec--band .sec-head h2{font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:.99;letter-spacing:-.033em}
@media(min-width:1040px){ .sec--split .sec-head h2{max-width:13ch} }

/* a handwritten aside, used sparingly */
.script{font-family:var(--script);font-weight:700;color:var(--green);
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;letter-spacing:.005em;display:block;margin:0 0 6px}
.sec--band .script{color:#a5e8bb}
.hero--c .script{color:#a5e8bb}

/* a full-bleed colour band, the way D&H slices the page with red */
.slab{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;
  background:var(--green-deep);color:#fff;padding:clamp(26px,4vw,40px) 0}
.slab-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.slab-t{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.08;letter-spacing:-.02em;margin:0}
.slab-s{font-size:.92rem;opacity:.85;margin:6px 0 0}
.slab .btn-accent{background:#fff;color:var(--green-deep);border-color:#fff}
.slab .btn-accent:hover{background:#f0f7f2;color:var(--green-deep)}

/* process steps with a bit more presence */
.sec--band .steps li::before,.sec--stack .steps li::before{font-size:3.2rem;opacity:1;color:var(--green)}
.sec--band .steps li::before{color:#7fd39a}

@media(max-width:620px){
  .slab-in{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   HERO, restructured to match how lenders that convert actually open:
   trust proof, a headline about the visitor, three plain choices,
   one button, reassurance. The calculator lives below.
   ============================================================ */
.hero--centered .hero-mid{max-width:920px;margin:0 auto;text-align:center;
  padding-top:clamp(8px,2vw,22px);padding-bottom:clamp(14px,2.5vw,26px)}
.hero--centered h1{font-size:clamp(2.3rem,4.4vw,3.7rem);line-height:1.0;margin:14px 0 0}
.hero--centered .hero-lead{max-width:60ch;margin:16px auto 0;font-size:clamp(1rem,1.6vw,1.16rem)}
.hero--centered .script{margin:26px 0 12px}

/* trust line above the headline */
.hero-trust{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;
  padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);text-decoration:none;color:#dbe5f3;
  font-family:var(--sans);font-size:.83rem;letter-spacing:.01em}
.hero-trust:hover{background:rgba(255,255,255,.13);color:#fff}
.hero-trust b{color:#fff;font-size:.95rem}
.ht-stars{color:#7fd39a;letter-spacing:1px;font-size:.82rem}
.ht-sep{opacity:.35}

/* the three choices become the main event */
.hero--centered .doors{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:820px;margin:0 auto}
.hero--centered .door{text-align:left;padding:16px 16px 15px}
.hero--centered .hero-actions{justify-content:center;margin-top:22px}

/* reassurance under the button, the "no documents / no commitment" pattern */
.hero-reassure{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;
  margin:16px 0 0;font-family:var(--sans);font-size:.83rem;color:#b9c6da}
.hero-reassure span{display:inline-flex;align-items:center;gap:7px}
.hero-reassure span::before{content:"";width:6px;height:6px;border-radius:50%;background:#7fd39a;flex:0 0 auto}

/* the calculator, now its own band under the hero */
.sec--toolband{background:var(--cream);padding:0}
.sec--toolband .est-shell{margin-top:-52px;position:relative;z-index:3;
  box-shadow:0 26px 60px rgba(6,12,28,.28)}
.sec--toolband + .sec{padding-top:clamp(40px,5vw,60px)}

@media(max-width:900px){
  .hero--centered .doors{grid-template-columns:minmax(0,1fr);max-width:460px}
  .hero--centered .hero-mid{text-align:left}
  .hero-trust{justify-content:flex-start}
  .hero-reassure{justify-content:flex-start}
  .hero--centered .hero-actions{justify-content:flex-start}
  .hero--centered .hero-lead{margin-left:0}
  .sec--toolband .est-shell{margin-top:-28px}
}

/* With the Call button in the bar there is no longer room for the full
   logo + name lockup on a phone. The logo mark alone carries the company;
   his name must never be cut. */
@media(max-width:560px){
  .bm-logo{height:0;width:0;opacity:0;margin:0;overflow:hidden}
  .bm-div{display:none!important}
  .bm-name{font-size:1.02rem;white-space:nowrap}
  .bm-sub{display:block!important;font-size:8.5px;letter-spacing:.07em;opacity:.7;white-space:nowrap}
  .brandmark{gap:0;overflow:visible}
}
@media(max-width:400px){
  .bm-name{font-size:.96rem}
  .bm-sub{display:none!important}
}

/* ---- Ratings strip: the platform-badge pattern competitors use ---- */
.ratings{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:24px 24px 20px;margin:6px 0}
.rt-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.rt-head>b{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--ink);letter-spacing:-.03em}
.rt-stars{color:#e8a33d;font-size:1.15rem;letter-spacing:2px}
.rt-lede{font-size:.98rem;color:var(--ink-2)}
.rt-lede b{color:var(--ink)}
.rt-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rt-grid>li::before{display:none!important;content:none!important}
.rt-grid li{padding:14px 14px;border:1px solid var(--rule-soft);border-radius:6px;background:var(--paper);
  display:flex;flex-direction:column;gap:3px}
.rt-src{font-family:var(--sans);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.rt-grid b{font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--green-deep)}
.rt-n{font-size:.78rem;color:var(--ink-3)}
.rt-foot{margin:16px 0 0;font-size:.8rem;line-height:1.55;color:var(--ink-3)}
@media(max-width:760px){.rt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   LIGHT HERO
   Seven of seven comparable lenders open light. Dark reads premium;
   light reads easy and approachable, which is the actual pitch here
   (wholesale pricing, no pressure, no runaround). The dark bands
   further down keep the rhythm and the brand.
   ============================================================ */
.hero--c.hero--home{
  background:var(--paper);
  color:var(--ink);
  padding-top:clamp(40px,5vw,66px);
  padding-bottom:clamp(30px,4vw,44px);
}
/* A photograph at 16% under two radial gradients is not atmosphere, it is mud:
   it read as a grey smear with a dark blob in one corner. The benchmark lenders
   use a clean tinted wash behind the headline and no image at all. */
.hero--home .hero-shot{display:none}
.hero--home .hero-veil{
  background:linear-gradient(180deg, #ffffff 0%, #f6f9f6 52%, var(--cream) 100%);
}
.hero--home .hero-glow{
  background:radial-gradient(900px 520px at 50% 0%, rgba(73,147,89,.10), transparent 70%);
  opacity:1;
}
.hero--home h1{color:var(--ink);text-shadow:none}
.hero--home h1 em{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--green-deep);filter:none;
}
.hero--home .hero-lead{color:var(--ink-2);text-shadow:none}
/* the drop shadows existed to lift type off a dark photo; the photo is gone */
.hero--home h1,.hero--home .script,.hero--home .hero-reassure{text-shadow:none}
.hero--home .eyebrow{color:var(--green-deep)}
.hero--home .script{color:var(--green-deep)}

/* trust pill, light */
.hero--home .hero-trust{
  background:#fff;border-color:var(--rule);color:var(--ink-2);
  box-shadow:0 2px 10px rgba(10,20,45,.05);
}
.hero--home .hero-trust:hover{background:#fff;color:var(--ink);border-color:rgba(73,147,89,.45)}
.hero--home .hero-trust b{color:var(--ink)}
.hero--home .ht-stars{color:#e8a33d}
.hero--home .ht-sep{opacity:.3}

/* the three doors as light cards */
.hero--home .door{
  background:#fff;border:1px solid var(--rule);color:var(--ink);
  box-shadow:0 2px 10px rgba(10,20,45,.05);
}
.hero--home .door:hover{border-color:rgba(73,147,89,.5);box-shadow:0 10px 26px rgba(10,20,45,.10)}
.hero--home .door .d-t{color:var(--ink)}
.hero--home .door .d-s{color:var(--ink-3)}
.hero--home .door[aria-pressed="true"]{border-color:var(--green);background:#f6fbf7}
.hero--home .door[data-intent="purchase"] .d-ic{background:rgba(73,147,89,.12);color:var(--green-deep)}
.hero--home .door[data-intent="refinance"] .d-ic{background:rgba(38,74,140,.10);color:#2c5599}
.hero--home .door[data-intent="equity"] .d-ic{background:rgba(200,140,40,.13);color:#9a6b1e}

.hero--home .hero-reassure{color:var(--ink-3)}
.hero--home .hero-reassure span::before{background:var(--green)}
.hero--home .btn-ghost{color:var(--ink);border-color:var(--rule)}
.hero--home .btn-ghost:hover{background:rgba(10,20,45,.05);color:var(--ink);border-color:rgba(10,20,45,.3)}
.hero--home .crumbs,.hero--home .crumbs a{color:var(--ink-3)}
.hero--home .hero-note,.hero--home .hero-note a{color:var(--ink-3)}
.hero--home .soc a{border-color:var(--rule);color:var(--ink-2)}
.hero--home .soc a:hover{border-color:var(--green);color:var(--green-deep)}

/* the counters below the hero, on light */
.hero--home .tick-rail{border-top:1px solid var(--rule)}
.hero--home .tk b{color:var(--ink)}
.hero--home .tk span{color:var(--ink-3)}

/* the calculator stays dark: it is the one anchored, premium object on the page */
.sec--toolband{background:var(--paper)}

/* the pressed door inherited a near-white title from the dark-hero rules */
.hero--home .door[aria-pressed="true"] .d-t{color:var(--ink)!important}
.hero--home .door[aria-pressed="true"] .d-s{color:var(--green-deep)!important}
.hero--home .door .d-t{color:var(--ink)}

/* The calculator is the one dark, anchored object on a light page. Make that
   explicit rather than relying on what it inherited from the old dark hero. */
.sec--toolband .est-shell{
  background:#0c1730;color:#e9eef7;border:0;border-radius:8px;
}
.sec--toolband .est-shell .est-head h2{color:#fff}
.sec--toolband .est-shell .est-head p{color:#b9c6da}
.sec--toolband .est-shell label{color:#9fb0c9}
.sec--toolband .est-shell .hint{color:#8fa2bd}
.sec--toolband .est-shell .inp{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.19)}
.sec--toolband .est-shell input,.sec--toolband .est-shell select{color:#fff;background:transparent;border-color:transparent}
.sec--toolband .est-shell select option{color:#101a30;background:#fff}
.sec--toolband .est-shell .oline{color:#dbe5f3;border-color:rgba(255,255,255,.12)}
.sec--toolband .est-shell .oline b{color:#fff}
.sec--toolband .est-shell .est-disc,.sec--toolband .est-shell .assure{color:#93a4bd}
.sec--toolband .est-shell .softpull span{color:#b9c6da}

/* the "it only takes a minute" aside, Optimum First's move */
.cta-aside{font-family:var(--script);font-weight:700;font-size:1.28rem;color:var(--green-deep);
  margin:10px 0 0;display:flex;align-items:center;gap:8px;justify-content:center}
.cta-aside::after{content:"";width:26px;height:16px;flex:0 0 auto;
  background:currentColor;opacity:.75;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'><path d='M1 14C6 6 14 1 25 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/><path d='M25 3l-5 5M25 3l-6-1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'><path d='M1 14C6 6 14 1 25 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/><path d='M25 3l-5 5M25 3l-6-1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat center/contain;
  transform:scaleX(-1)}
@media(max-width:900px){.cta-aside{justify-content:flex-start}}

/* "Free rate quote" is wider than "Book a call" was, and at 1301-1499 the
   wrap is still 1180, so it squeezed the brand and clipped his name. */
.cta-short{display:none}
@media(min-width:1181px) and (max-width:1499px){
  .cta-long{display:none}
  .cta-short{display:inline}
  .menu a,.sub-btn{padding:9px 6px;font-size:.78rem}
}

/* bridge the gap so moving the pointer into the dropdown does not break hover */
@media(hover:hover) and (min-width:1181px){
  .menu>li:has(.sub)::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
  .menu>li{position:relative}
}

/* --- standout programmes: photo left, named programmes right ------------- */
.edge{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center}
.eg-shot{border-radius:12px;overflow:hidden;background:var(--cream-2)}
.eg-shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.eg-list{display:flex;flex-direction:column;gap:26px}
.eg-item h3{margin:0 0 6px;font-size:1.18rem;line-height:1.25;letter-spacing:-.01em}
.eg-item p{margin:0 0 8px;color:var(--ink-2);max-width:46ch}
.eg-link{font-weight:600;color:var(--green-deep);text-decoration:none;border-bottom:2px solid var(--green);padding-bottom:1px}
.eg-link:hover{color:var(--ink)}

/* --- the three doors, repeated low on the page --------------------------- */
.doorway{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dw{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
  padding:26px 24px;border-radius:12px;background:var(--cream);border:1px solid var(--rule-soft);
  text-decoration:none;color:var(--ink);transition:background var(--t),transform var(--t)}
.dw:hover{background:var(--cream-2);transform:translateY(-2px)}
.dw-t{grid-column:1;font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.dw-s{grid-column:1;color:var(--ink-2);font-size:.95rem;line-height:1.4}
.dw-go{grid-column:2;grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:var(--paper);border:1px solid var(--rule);font-size:1rem}


/* Two letterspaced small-cap lines in one hero ("what are you here to do?" and
   "it only takes a minute") read as a template tic. The reassurance row under
   the button already carries the promise. */
.hero--home .cta-aside{display:none}


/* .hero::before paints a navy blob at 82%/6% for the DARK interior heroes.
   The home hero is pale, so that blob landed as a grey-blue smear across the
   top right. Kill it here, and the screen blend that went with it. */
.hero--home::before{display:none}
.hero--home .hero-glow{mix-blend-mode:normal}


/* Two contrast bugs in the calculator result panel.
   1. `.sub` is the nav dropdown class AND the small caption under each result
      line. The dropdown rule painted the caption navy while its text stayed
      ink: contrast 1.07, i.e. invisible. Reset the caption.
   2. .est-shell .est-out was switched to a cream background but kept
      color:#fff from the old dark panel, so its labels vanished. */
.est-out .oline .sub{
  position:static;background:none;border:0;box-shadow:none;padding:0;
  min-width:0;margin-top:2px;
}
.est-shell .est-out{color:var(--ink)}
.est-shell .est-out .oline span,
.est-shell .est-out .oline .sub,
.est-shell .est-out .est-next,
.est-shell .est-out .hint{color:var(--ink-2)}
.est-shell .est-out .oline b{color:var(--ink)}
.est-shell .est-out .oline.big2 b{color:var(--green-deep)}
.est-shell .est-out .orule{border-top-color:var(--rule)}


/* #dbe5f3 is the body colour for a DARK panel. These panels were switched to
   the pale ground, so that text became near-invisible (contrast ~1.2). */
.est-more>summary{color:var(--ink-2)}
.paylegend li{color:var(--ink-2)}
.geo-note{color:var(--ink-2)}
.mkt-next p{color:var(--ink-2)}
.est-hintline{color:var(--ink-3)}


/* Remaining white-on-cream inside the result panel, left from when it was navy. */
.est-shell .paylegend b{color:var(--ink)}
.est-shell .est-msg{color:var(--ink-2)}
.est-shell .est-msg strong{color:var(--ink)}
.est-shell .est-out .est-or,
.est-shell .est-out .est-alt{color:var(--ink-2)}
.est-shell .est-out .est-or a,
.est-shell .est-out .est-alt a{color:var(--green-deep)}
.est-shell .est-out .oline .hint{color:var(--ink-3)}
.est-shell .est-out .est-fine{color:var(--ink-3)}


.est-shell .est-out .btn-ghost{color:var(--ink);border-color:var(--rule)}
.est-shell .est-out .btn-ghost:hover{color:var(--ink);background:var(--cream-2);border-color:var(--ink-3)}
.est-shell .est-out label,
.est-shell .est-out .consent,
.est-shell .est-out .consent a{color:var(--ink-2)}
.est-shell .est-out .consent a{text-decoration:underline}


/* mint green reads on navy, not on cream */
.est-grab .eg-consent a,.eg-consent a{color:var(--green-deep);text-decoration:underline}

@media(max-width:1180px){
  /* the brandmark was a fixed 327px and shoved the menu button off-screen */
  .nav-in{padding-right:16px; gap:12px}
  .brandmark{flex:1 1 auto; min-width:0; gap:10px}
  .brandmark > span{min-width:0}
  .bm-name{white-space:nowrap}
  .bm-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .nav-toggle{margin-left:auto; flex:0 0 auto}
}
@media(max-width:620px){
  .bm-sub{display:block;font-size:9px;letter-spacing:.09em;line-height:1.25;opacity:.72}
  .bm-name{font-size:.98rem;line-height:1.15}
  .bm-div{display:block!important}
  .bm-logo{height:22px}
  .bm-name{font-size:15px}
}
@media(max-width:620px){
  .hero--c{padding-top:64px}
  .hero--c .eyebrow{font-size:10px; letter-spacing:.16em}
  .hero--c .hero-lead{font-size:15.5px}
}
@media(min-width:1041px){
  .hero--c{padding-top:clamp(70px,5.4vw,86px)}
}

/* ============================================================
   ONE SYSTEM  (JVM-style: pale ground, one accent, rounded cards)
   This block is deliberately last. It overrides the accumulated
   dark bands, chips, script accents and competing card styles that
   made the page read as several sites stitched together.
   ============================================================ */

/* --- 1. Kill the dark bands. Everything sits on one pale ground. --- */
.sec--band{background:var(--paper)!important;color:var(--ink)!important}
.sec--band::before{display:none!important}
.sec--band .sec-head h2{color:var(--ink)!important;border-top-color:var(--green)!important}
.sec--band .sec-body{color:var(--ink-2)!important;font-size:1rem!important}
.sec--band a{color:var(--green-deep)!important}
.sec--band strong,.sec--band b,.sec--band h3{color:var(--ink)!important}
.sec--band .steps li{border-top-color:var(--rule)!important}
.sec--band .steps li::before{color:var(--green)!important}
.sec--band .btn-ghost{color:var(--ink)!important;border-color:var(--rule)!important}

/* alternate only by a whisper, the way JVM does */
.sec{background:var(--paper)}
.sec--alt{background:var(--cream);border-top:0;border-bottom:0}

/* --- 2. Retire the script accent. One serif, one sans. --- */
.script,.cta-aside{font-family:var(--display)!important;font-weight:500!important;
  font-size:1rem!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--ink-3)!important}
.cta-aside::after{display:none!important}

/* --- 3. Retire the sheet graphic's chip wall. --- */
.sheet{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;border-radius:12px!important;
  border-color:var(--rule)!important}
.sh-me{background:var(--cream)!important;color:var(--ink)!important}
.sh-me::before{display:none!important}
.sh-bank{background:#fff!important}
.sh-cap{color:var(--ink-3)!important;opacity:1!important}
.sh-chips li{background:#fff!important;border-color:var(--rule)!important;color:var(--ink)!important;
  border-radius:99px!important;opacity:1!important;transform:none!important}
.sh-one li{border-radius:99px!important}
.sh-foot{color:var(--ink-3)!important;opacity:1!important}
.sh-me .sh-foot b{color:var(--ink)!important}

/* --- 4. The calculator joins the page instead of fighting it. --- */
.est-shell,.sec--toolband .est-shell{
  background:#fff!important;color:var(--ink)!important;
  border:1px solid var(--rule)!important;border-radius:12px!important;
  box-shadow:0 10px 30px rgba(10,20,45,.07)!important}
.est-shell .est-head h2,.sec--toolband .est-shell .est-head h2{color:var(--ink)!important}
.est-shell .est-head p,.sec--toolband .est-shell .est-head p{color:var(--ink-2)!important}
.est-shell label,.sec--toolband .est-shell label{color:var(--ink-3)!important}
.est-shell .hint,.sec--toolband .est-shell .hint{color:var(--ink-3)!important}
.est-shell .inp,.sec--toolband .est-shell .inp{background:var(--paper)!important;border-color:var(--rule)!important}
.est-shell input,.est-shell select,
.sec--toolband .est-shell input,.sec--toolband .est-shell select{color:var(--ink)!important}
.est-shell .oline,.sec--toolband .est-shell .oline{color:var(--ink-2)!important;border-color:var(--rule-soft)!important}
.est-shell .oline b,.sec--toolband .est-shell .oline b{color:var(--ink)!important}
.est-shell .oline.big b,.est-shell .oline.big2 b{color:var(--green-deep)!important}
.est-shell .est-disc,.est-shell .assure,.est-shell .softpull span,
.sec--toolband .est-shell .est-disc,.sec--toolband .est-shell .assure{color:var(--ink-3)!important}
.est-shell .est-out{background:var(--cream)!important;border-radius:0 12px 12px 0}
.est-grab{border-top-color:var(--rule)!important}
.est-grab .eg-head b{color:var(--ink)!important}
.est-grab .eg-head span,.est-grab .eg-fine,.est-grab .eg-consent{color:var(--ink-3)!important}
.est-grab input{background:#fff!important;border-color:var(--rule)!important;color:var(--ink)!important}
.est-grab label{color:var(--ink-3)!important}
.est-badge{color:var(--green-deep)!important}

/* --- 5. Rounded, soft, consistent. JVM's shape language. --- */
.btn{border-radius:10px}
.tcard,.plist .prow,.ratings,.lead-card,.mkt,.obmmi-frame,.portrait-card,.dock{border-radius:12px}
.hero-trust{border-radius:99px}
.door{border-radius:12px}
.sub{border-radius:10px}

/* the market panel joins the palette too */
.mkt{background:var(--cream)!important;color:var(--ink)!important;border:1px solid var(--rule)}
.mkt::before{display:none!important}
.mkt-find label,.mkt-status,.mkt-as,.mkt-lab,.mkt-src,.mkt-scale{color:var(--ink-3)!important}
.mkt-row input{background:#fff!important;border-color:var(--rule)!important;color:var(--ink)!important}
.mkt-place,.mkt-d b,.mkt-next b{color:var(--ink)!important}
.mkt-big b{color:var(--green-deep)!important}
.mkt-d{border-color:var(--rule)!important;background:#fff}
.mkt-out,.mkt-next{border-top-color:var(--rule)!important}
.mkt-next p{color:var(--ink-2)!important}

/* the slab stays green: one accent, used once, as the page's single loud moment */
.slab{border-radius:0}

/* the logo was hidden on phones but its divider rule stayed, leaving a
   floating line next to his name */
@media(max-width:560px){ .bm-div{display:none!important} }

/* the hero kept a dark veil from the old dark treatment, which read as a
   muddy gradient behind pale type on a phone */
@media(max-width:760px){
  .hero--home .hero-veil{
    background:linear-gradient(180deg, rgba(255,253,247,.94) 0%, rgba(255,253,247,.8) 46%, rgba(249,246,237,.98) 100%)!important;
  }
  .hero--home .hero-shot{opacity:.10}
  .hero--home .hero-glow{opacity:.5}
  .hero--home .hero-trust{font-size:.78rem;padding:9px 13px;border-radius:14px;text-align:left}
  .hero--home h1{font-size:clamp(2.1rem,8.6vw,2.9rem)}
}

/* a dark strip persisted under the nav on phones: the base .hero--c colour
   showing through above the veil */
@media(max-width:760px){
  .hero--c.hero--home{background:var(--paper)!important}
  .hero--home .hero-veil{inset:-2px 0 0 0!important}
}
/* keep the company mark on phones, just smaller; hiding it lost the brand */
@media(max-width:560px){
  .bm-logo{height:15px!important;width:auto!important;opacity:.9!important;overflow:visible!important}
  .brandmark{gap:9px!important}
  .bm-div{display:block!important;opacity:.35}
}
@media(max-width:400px){ .bm-logo{height:13px!important} }

/* ---- Loan matcher ---- */
.matcher{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:24px;margin:6px 0}
.mx-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:none}
.mx-steps>li::before{display:none!important;content:none!important}
.mx-q{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:start;padding-left:0}
.mx-n{grid-row:span 2;width:26px;height:26px;border-radius:50%;background:var(--cream);
  color:var(--green-deep);font-family:var(--sans);font-size:.8rem;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.mx-label{font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--ink);align-self:center}
.mx-opts{grid-column:2;display:flex;flex-wrap:wrap;gap:8px}
.mx-opts button{padding:9px 14px;border-radius:99px;border:1px solid var(--rule);background:var(--paper);
  font-family:var(--sans);font-size:.88rem;color:var(--ink-2);cursor:pointer;transition:all .15s ease}
.mx-opts button:hover{border-color:rgba(73,147,89,.5);color:var(--ink)}
.mx-opts button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.mx-out{margin-top:24px;padding-top:22px;border-top:1px solid var(--rule)}
.mx-kick{font-family:var(--sans);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--green-deep)}
.mx-out h3{margin:8px 0 8px;font-size:clamp(1.4rem,3vw,1.9rem)}
.mx-out>p{margin:0 0 14px;color:var(--ink-2);max-width:62ch}
.mx-alts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px}
.mx-alts>li::before{display:none!important;content:none!important}
.mx-alts li{padding-left:0}
.mx-alts a{color:var(--green-deep);font-size:.92rem}
.mx-main a{font-weight:600;font-size:1rem}
.mx-fine{margin:12px 0 0;font-size:.8rem;color:var(--ink-3)}
@media(max-width:560px){.matcher{padding:18px 16px}.mx-q{grid-template-columns:1fr}.mx-n{grid-row:auto}.mx-opts{grid-column:1}}

@media(max-width:860px){
  .edge{grid-template-columns:1fr;gap:26px}
  .doorway{grid-template-columns:1fr}
}

/* ============================================================
   MOBILE CORRECTIONS
   Measured on a 390px viewport. Three faults, all structural:
   the comparison panel kept two columns and showed an empty
   600px white block; the 32-state list ran one per row for
   1,414px; and the chat teaser sat over the content on every
   screen. This block is last on purpose so it wins.
   ============================================================ */
@media(max-width:768px){
  /* the ONE SYSTEM block forces two columns with !important at every
     width, which overrode the mobile rule above it */
  .sheet{grid-template-columns:minmax(0,1fr)!important}
  .sh-bank{border-right:0;border-bottom:1px solid var(--rule)}
  .sh-side{align-self:stretch}

  /* 32 rows of one state each is three phone screens of scrolling */
  .states{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .states li{padding:7px 0;font-size:.88rem}

  /* the sticky bar already carries Call, Text and Book. The chat teaser
     opens itself over the copy and there is no way to style inside it. */
  chat-widget{display:none!important}

  /* the dock is the fallback when chat is hidden; the bar covers it */
  .dock{display:none!important}
}

@media(max-width:1180px){
  /* `.menu a` sets width:100% and space-between on EVERY link in the open
     menu, including the three buttons at its foot. That stripped them back to
     plain text on navy. Give them their button shape back. */
  .menu .m-cta a.btn{
    width:auto;flex:1 1 0;justify-content:center;text-align:center;
    padding:12px 10px;border-radius:8px;font-size:.92rem;
  }
  .menu .m-cta{flex-wrap:wrap}
  .menu .m-cta .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.4);background:none}
  /* the accent button lost its fill here and read as plain text */
  .menu .m-cta a.btn-accent{
    background:var(--green)!important;color:#fff!important;border:0;
    flex:1 0 100%;padding:13px 10px;
  }
  /* the sticky Call/Text/Book bar covered the last row of the open menu */
  .menu{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}

@media(max-width:768px){
  /* the chip wraps to two lines on a phone, leaving the middot dangling
     at the end of line one */
  .hero-trust .ht-sep{display:none}
  .hero-trust{flex-wrap:wrap;row-gap:2px}
}

/* ============================================================
   MEGA MENU — "Loans" grouped by borrower type, and "Locations"
   as the crawl hub for the state grid. A single-column dropdown
   cannot hold 34 loan links; these open as columns instead.
   ============================================================ */
@media(min-width:1181px){
  .has-mega{position:static}
  .nav-in{position:relative}
  .sub--mega{
    left:50%;transform:translateX(-50%);
    display:none;grid-template-columns:repeat(5,minmax(160px,1fr));
    gap:4px 26px;padding:22px 26px;min-width:min(1100px,94vw);
  }
  .menu>li.has-mega:hover>.sub--mega,
  .menu>li.has-mega:focus-within>.sub--mega,
  .menu>li.has-mega.open>.sub--mega{display:grid}
  .sub--mega .sub-grp{list-style:none}
  .sub--mega .sub-grp>ul{list-style:none;margin:0;padding:0}
  .sub--mega .sub-h{
    display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--green-2);font-weight:700;padding:0 0 8px;margin-bottom:6px;
    border-bottom:1px solid var(--rule-dark-soft);
  }
  .sub--mega a{padding:7px 0;font-size:.88rem;white-space:normal;line-height:1.3}
}
/* on phones the mega menu is just more stacked rows, with the group
   headings acting as dividers */

/* ============================================================
   HEADER CLEARANCE  (BP: "the top left of each page appears to be off")
   The nav is a floating pill sitting at y 35-101 with z-index 80.
   Interior heroes started at y 23 with padding-top:0, so the breadcrumb
   landed at y 87 -- 14px of it underneath the pill, on all 546 pages.
   .hero--intro (home) already had its own padding-top, which is why the
   home page looked right and nothing else did.
   ============================================================ */
@media(min-width:1181px){
  .hero--rule,.hero--shot,.hero--photo,.hero--split{padding-top:52px}
  .hero--photo{padding-top:34px}
}
/* The brand lockup must be the same size on every page. It was tuned
   on .t-home only, so interior pages rendered a different-height block. */
@media(min-width:1181px) and (max-width:1560px){
  .bm-sub{display:none!important}
}
@media(min-width:1181px){
  .nav-in{gap:14px}
  .brandmark{margin-right:10px}
  .menu a,.sub-btn{padding:10px 9px!important;font-size:.9rem!important}
  .bm-sub{font-size:.62rem!important}
}

@media(max-width:1180px){
  .sub--mega .sub-grp>ul{list-style:none;margin:0;padding:0}
  .sub--mega .sub-h{
    display:block;padding:14px 22px 6px;font-size:.66rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--green-2);font-weight:700;
  }
  .sub--mega .sub-grp+.sub-grp .sub-h{border-top:1px solid var(--rule-dark-soft);margin-top:6px}
}

/* ============================================================
   HERO TRUST CHIP — slimmed to one line on phones.
   The benchmark puts its rating on a single compact line above
   the headline. Ours was an 89px card that competed with the
   headline for the top of the screen.
   ============================================================ */
@media(max-width:768px){
  .hero--home .hero-trust{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 7px;
    padding:0;background:none;border:0;border-radius:0;box-shadow:none;
    font-size:.8rem;line-height:1.35;text-align:left;
    color:var(--ink-2);
  }
  .hero--home .hero-trust:hover{background:none;border:0;box-shadow:none}
  .hero--home .hero-trust .ht-stars{font-size:.82rem;letter-spacing:.02em}
  .hero--home .hero-trust b{font-size:.92rem}

}

/* ============================================================
   BENCHMARK-SHAPE HOME SECTIONS, IN BP'S PALETTE
   Navy #0a142d, green #499359, cream ground. Same structure as
   the reference, none of its blue.
   ============================================================ */

/* hero: one button, three checks, nothing else */
.hero-actions--one{justify-content:center;margin-top:26px}
.hero-actions--one .btn{flex:0 0 auto;min-width:240px}
.hero-checks{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 26px;margin:20px 0 0;padding:0;font-size:.9rem;color:var(--ink-2);
}
.hero-checks li{display:inline-flex;align-items:center;gap:8px}
.hero-checks li::before{
  content:"";width:17px;height:17px;flex:0 0 auto;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* the cross and the tick */
.approve{display:grid;gap:14px}
.ap-row{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:start;
  padding:22px 24px;border-radius:12px;background:var(--cream);
  border:1px solid var(--rule-soft);
}
.ap-row p{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink-2)}
.ap-row>div{min-width:0}
/* the routes are the proof, so they are shown rather than summarised */
.ap-routes{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0}
.ap-routes li{
  padding:6px 12px;border-radius:99px;background:#fff;border:1px solid rgba(73,147,89,.32);
  font-size:.83rem;color:var(--green-deep);font-weight:500;line-height:1.2;
}
.ap-routes li::before{content:none!important}
.ap-choice{margin-top:14px!important;font-size:.95rem!important}
.ap-row b{color:var(--ink)}
.ap-ic{
  width:28px;height:28px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-size:.86rem;font-weight:700;color:#fff;line-height:1;
}
.ap-ic--x{background:#b4453f}
.ap-ic--t{background:var(--green)}
.ap-row--good{background:rgba(73,147,89,.07);border-color:rgba(73,147,89,.26)}
.ap-note{margin:4px 0 0;font-size:.9rem;color:var(--ink-3)}

/* four-column capability table */
.cmp4{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp4 table{width:100%;border-collapse:collapse;min-width:620px;font-size:.93rem}
.cmp4 thead td,.cmp4 thead th{
  padding:0 10px 12px;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;text-align:center;
}
.cmp4 thead th:first-of-type{color:var(--green-deep)}
.cmp4 tbody th{
  text-align:left;font-weight:500;color:var(--ink);padding:13px 16px 13px 0;
  border-top:1px solid var(--rule-soft);line-height:1.35;
}
.cmp4 tbody td{
  text-align:center;padding:13px 10px;border-top:1px solid var(--rule-soft);
  width:104px;
}
.cmp4 tbody td span{
  display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;
  font-size:.8rem;line-height:1;
}
.cmp4 .cy span{background:var(--green);color:#fff}
.cmp4 .cn span{background:rgba(10,20,45,.07);color:var(--ink-3)}
.cmp4 tbody tr td:first-of-type span{box-shadow:0 0 0 3px rgba(73,147,89,.14)}
.cmp4-note{margin:16px 0 0;font-size:.87rem;color:var(--ink-3);max-width:62ch}

@media(max-width:700px){
  .hero-checks{justify-content:flex-start;gap:8px 18px;font-size:.85rem}
  .hero-actions--one{justify-content:stretch}
  .hero-actions--one .btn{flex:1 1 auto;width:100%}
  .ap-row{padding:18px 18px}
  .ap-row p{font-size:.96rem}
}

/* ============================================================
   MATCH THE REFERENCE PROPORTIONS
   Measured against the benchmark at 1440px:
     their h1  48px / weight 900 / line-height 1.2 / 708px column
     ours was  59px / weight 800 / line-height 1.0 / 518px column
   23% bigger type in a 27% narrower column is why the headline
   broke into three ragged lines with dead space either side.
   ============================================================ */
@media(min-width:900px){
  .hero--home .hero-mid{max-width:820px;margin-inline:auto}
  .hero--centered h1,.hero--home h1{
    font-size:clamp(2.3rem,3.6vw,3rem);   /* tops out at 48px */
    line-height:1.16;letter-spacing:-.028em;font-weight:900;
    max-width:none;
  }
  .hero--home .hero-lead{max-width:34em;margin-left:auto;margin-right:auto}
  /* their section headings are centred over the content, not left-aligned
     against a rule */
  .t-home .sec--stack .sec-head{text-align:center;border-bottom:0;padding-bottom:0;margin-bottom:30px}
  .t-home .sec--stack .sec-head h2{max-width:24ch;margin-inline:auto}
  .t-home .sec--stack .sec-body>p:first-of-type{
    text-align:center;max-width:56ch;margin-inline:auto
  }
}
/* the rating reads as one plain line on every width, not a bordered pill */
.hero--home .hero-trust{
  background:none!important;border:0!important;box-shadow:none!important;
  padding:0;border-radius:0;font-size:.86rem;color:var(--ink-2);
}
.hero--home .hero-trust:hover{background:none;color:var(--ink)}
.hero--home .hero-trust b{font-size:.98rem}

/* ---- loan cards with photographs -------------------------------------- */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px}
.pcard{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:var(--cream);border:1px solid var(--rule-soft);border-radius:12px;
  overflow:hidden;transition:transform var(--t),box-shadow var(--t);
}
.pcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,20,45,.10)}
.pc-img{
  display:block;aspect-ratio:16/10;background:var(--cream-2) center/cover no-repeat;
}
/* the card photo is a real <img> now, not a CSS backdrop, so it can lazy-load */
.pc-img img{display:block;width:100%;height:100%;object-fit:cover}
.pc-img--none{background:linear-gradient(135deg,var(--navy),var(--green-deep))}
.pc-body{display:block;padding:16px 18px 20px}
.pc-kick{
  display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-deep);font-weight:700;margin-bottom:6px;
}
.pc-t{display:block;font-family:var(--display);font-weight:700;font-size:1.06rem;
  line-height:1.25;letter-spacing:-.012em;margin-bottom:5px}
.pc-d{display:block;font-size:.9rem;line-height:1.45;color:var(--ink-2)}
@media(max-width:560px){
  .pcards{grid-template-columns:1fr 1fr;gap:12px}
  .pc-body{padding:12px 13px 15px}
  .pc-t{font-size:.95rem}
  .pc-d{font-size:.82rem}
}

@media(min-width:900px){
  /* .sec-head was inheriting a narrow measure, so the centred heading sat
     left of the page centre while the paragraph under it was centred */
  .t-home .sec--stack .sec-head{max-width:none;width:100%}
  .t-home .sec--stack .sec-head h2{max-width:26ch}
}

/* small-caps kicker above a section heading */
.sec-kick{
  display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--green-deep);margin-bottom:10px;
}
/* four doors now, including the referral-partner one */
.doorway{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* The dock opened as a full form pinned bottom-right and sat on top of the
   content. The reference sites use a small launcher that expands on click.
   Collapse it to a pill until the visitor asks for it. */
@media(min-width:900px){
  .dock:not(.is-open){width:auto;max-width:230px}
  .dock:not(.is-open) .dock-form .field,
  .dock:not(.is-open) .dock-form .dock-consent,
  .dock:not(.is-open) .dock-form .form-status,
  .dock:not(.is-open) .dock-s{display:none}
  .dock:not(.is-open) .dock-form{padding:0}
  .dock:not(.is-open) .dock-t{margin:0 0 10px;display:block;font-size:.95rem}
  .dock:not(.is-open) .dock-x{display:none}
}
@media(min-width:900px){
  .dock:not(.is-open) .dock-t{cursor:pointer}
  .dock:not(.is-open) .dock-t::after{content:" \203A";font-weight:700}
  .dock:not(.is-open):hover{transform:translateY(-2px)}
}

/* The four-column table is 620px wide. On a phone that shows one column and a
   scrollbar nobody finds. Stack it: each capability becomes a small block with
   its four verdicts listed under it, which is what the reference does. */
@media(max-width:680px){
  .cmp4{overflow:visible}
  .cmp4 table,.cmp4 tbody,.cmp4 tr{display:block;min-width:0;width:100%}
  .cmp4 thead{display:none}
  .cmp4 tbody tr{
    margin-bottom:12px;padding:16px 18px;border-radius:12px;
    background:var(--cream);border:1px solid var(--rule-soft);
  }
  .cmp4 tbody th{
    display:block;padding:0 0 12px;border:0;font-weight:700;font-size:1rem;
    font-family:var(--display);letter-spacing:-.01em;
  }
  .cmp4 tbody td{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    width:auto;padding:8px 0;border-top:1px solid var(--rule-soft);text-align:left;
  }
  .cmp4 tbody td::before{
    content:attr(data-c);font-size:.87rem;color:var(--ink-2);
  }
  .cmp4 tbody td:first-of-type::before{color:var(--green-deep);font-weight:700}
  .cmp4 tbody td span{width:23px;height:23px;font-size:.76rem}
}

/* ============================================================
   FLOATING NAV, CLEAN GROUND
   The full-width navy slab cut the page in half and was the first
   thing a visitor saw. The reference floats a pill inset from the
   edges so the page reads as one surface underneath it.
   ============================================================ */
@media(min-width:1181px){
  .nav{
    position:sticky;top:14px;background:transparent;backdrop-filter:none;
    border-bottom:0;padding:0 18px;margin-bottom:-78px;
  }
  .nav-in{
    background:rgba(10,20,45,.96);backdrop-filter:saturate(140%) blur(8px);
    border-radius:16px;padding-left:22px;padding-right:12px;
    box-shadow:0 10px 34px rgba(10,20,45,.16);
    border:1px solid rgba(255,255,255,.07);
  }
  /* the hero starts under the floating bar rather than after it */
  .hero--c.hero--home{padding-top:clamp(170px,13vw,200px);padding-bottom:clamp(64px,6vw,88px)}
}

/* the cream-to-grey fade read as an artefact. One clean ground. */
.hero--home .hero-veil{
  background:linear-gradient(180deg,#fff 0%,#fdfcf8 62%,var(--cream) 100%);
}
.hero--home .hero-glow{
  background:radial-gradient(1100px 460px at 50% -6%,rgba(73,147,89,.07),transparent 72%);
}

/* Brian's face, back on the home page and next to the story it belongs to */
.ap-who{
  display:flex;align-items:center;gap:16px;margin:0 0 20px;padding:0;
}
.ap-who img{
  width:84px;height:84px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  object-position:50% 18%;background:var(--cream-2);
  border:2px solid rgba(73,147,89,.3);
}
.ap-who figcaption{display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-who b{font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--ink)}
.ap-who span{font-size:.86rem;color:var(--ink-3);line-height:1.35}
@media(max-width:560px){
  .ap-who img{width:64px;height:64px}
  .ap-who b{font-size:.96rem}
  .ap-who span{font-size:.8rem}
}

/* A group with a long list (the 33 states) columns inside the mega menu
   instead of running one item per row off the bottom of the screen. */
@media(min-width:1181px){
  .sub--mega:has(.sub-grp--wide){grid-template-columns:minmax(0,1fr)}
  .sub-grp--wide{grid-column:1/-1}
  .sub-grp--wide>ul{
    columns:5;column-gap:24px;margin:0;padding:0;
  }
  .sub-grp--wide>ul li{break-inside:avoid}
  .sub--mega{max-height:min(74vh,720px);overflow-y:auto}
}

@media(min-width:1181px){
  /* `.menu>li{position:relative}` (0,1,1) outranked `.has-mega` (0,1,0), so the
     mega positioned against its own li and ran off the right edge. */
  .menu>li.has-mega{position:static}
  .sub--mega{width:min(1100px,calc(100vw - 56px))}
  .sub-grp--wide>ul{columns:4}
}

/* ============================================================
   HEADER REBUILD
   Logo was 21px against their 30px. Nav links 12.8px against
   their 16px. The phone number was hidden below 1470px, so on
   most laptops there was no way to call. Apply was an outlined
   word rather than a button.
   ============================================================ */
@media(min-width:1181px){
  .bm-logo{height:34px!important}
  .bm-name{font-size:1.18rem;font-weight:700}
  .menu a,.sub-btn{padding:10px 13px!important;font-size:.98rem!important;font-weight:500}
  .sub--mega a{font-size:.94rem!important;padding:8px 0!important}
  .sub--mega .sub-h{font-size:.72rem}
  .nav-cta .btn{padding:12px 20px;font-size:.95rem;font-weight:700}
  /* the phone was hidden on any screen under 1470px */
  .nav-cta .btn-ghost{display:inline-flex!important}
  .nav-tel{
    display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
    font-weight:700;font-size:1rem;padding:0 6px 0 2px;white-space:nowrap;
  }
  .nav-tel:hover{color:var(--green-2)}
  .nav-tel svg{width:17px;height:17px;flex:0 0 auto}
  /* Apply was an outline around a word. Give it a real button. */
  .nav-cta .nav-apply{
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.45);
    color:#fff;border-radius:10px;
  }
  .nav-cta .nav-apply:hover{background:rgba(255,255,255,.2);border-color:#fff}
}
@media(max-width:1470px){.nav-cta .btn-ghost{display:inline-flex}}

/* the whole site was set too light. Body copy moves to 420 and the
   supporting text off the faintest greys. */
body{font-weight:420}
.sec-body p,.prose p,.hero-lead{font-weight:420}
.pc-d,.dw-s,.eg-item p,.ap-row p{font-weight:420}

/* the CTA gets the same sheen the benchmark uses */
.btn-accent{position:relative;overflow:hidden}
.btn-accent::after{
  content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.btn-accent:hover::after,.btn-lg.btn-accent::after{animation:sheen 2.8s ease-in-out infinite}
@keyframes sheen{0%{left:-140%}55%{left:160%}100%{left:160%}}
@media(prefers-reduced-motion:reduce){.btn-accent::after{animation:none!important}}

/* the nav gets out of the way when you scroll down, like theirs */
@media(min-width:1181px){
  .nav{transition:transform .28s ease}
  html.nav-hide .nav{transform:translateY(-140%)}
}

/* ---- rate-quote funnel -------------------------------------------------- */
.funnel{max-width:820px;margin-inline:auto}
.fn-bar{height:5px;border-radius:99px;background:rgba(10,20,45,.09);overflow:hidden;margin-bottom:10px}
.fn-bar span{display:block;height:100%;width:8%;border-radius:99px;background:var(--green);transition:width .34s ease}
.fn-count{margin:0 0 26px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.fn-step{display:none}
.fn-step.is-on{display:block;animation:fnIn .26s ease}
@keyframes fnIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fn-q{font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.18;margin:0 0 8px;font-weight:800}
.fn-note{margin:0 0 20px;color:var(--ink-2);font-size:.98rem}
.fn-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;margin-top:20px}
.fn-card{
  text-align:left;padding:22px 22px;border-radius:14px;cursor:pointer;
  background:#fff;border:2px solid var(--rule);
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.fn-card:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 12px 30px rgba(10,20,45,.09)}
.fn-card.is-sel{border-color:var(--green);background:rgba(73,147,89,.07)}
.fn-ct{display:block;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ink);margin-bottom:5px}
.fn-cs{display:block;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.fn-field{max-width:460px}
.fn-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fn-nav{display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.fn-back{background:none;border:0;color:var(--ink-3);font-size:.92rem;cursor:pointer;padding:10px 2px;font-weight:600}
.fn-back:hover{color:var(--ink)}
.fn-done p{font-size:1.06rem;color:var(--ink-2);max-width:52ch}
@media(max-width:620px){
  .fn-row{grid-template-columns:1fr}
  .fn-card{padding:18px}
}

/* ============================================================
   BRANDMARK
   The name was clipping at 1440 because brand + menu + CTA came
   to more than the bar. It also read as a logo with a name typed
   beside it. Stack his name over the company so his name leads,
   drop the divider, and give the bar room to breathe.
   ============================================================ */
@media(min-width:1181px){
  .brandmark{gap:12px;overflow:visible;flex:0 0 auto}
  .bm-div{display:none}
  .bm-logo{height:30px!important}
  .bm-name{
    font-size:1.12rem;font-weight:800;letter-spacing:-.022em;line-height:1.08;
    white-space:nowrap;
  }
  .bm-sub{
    display:block!important;font-size:.58rem;letter-spacing:.15em;
    color:rgba(255,255,255,.5);line-height:1.5;white-space:nowrap;
  }
  /* reclaim the width the clip came from */
  .menu a,.sub-btn{padding:10px 11px!important;font-size:.94rem!important}
  .nav-tel{font-size:.95rem}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:11px 17px;font-size:.9rem}
}
@media(min-width:1181px) and (max-width:1520px){
  .bm-logo{height:26px!important}
  .bm-name{font-size:1.02rem}
  .menu a,.sub-btn{padding:10px 9px!important;font-size:.9rem!important}
  .nav-tel{font-size:.9rem}
}

/* ---- loan marquee ------------------------------------------------------ */
.pmarquee{
  position:relative;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.pm-track{display:flex;gap:18px;width:max-content;animation:pmScroll 90s linear infinite}
.pmarquee:hover .pm-track,.pmarquee:focus-within .pm-track{animation-play-state:paused}
@keyframes pmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .pm-track{animation:none}
  .pmarquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
.pm-track .pcard{width:290px;flex:0 0 290px}
.pm-all{margin:22px 0 0;text-align:center}
.pm-all a{font-weight:700;color:var(--green-deep);text-decoration:none;border-bottom:2px solid var(--green)}
.pm-all a:hover{color:var(--ink)}
/* the card text was too small and too light to read */
.pc-kick{font-size:.68rem;letter-spacing:.13em}
.pc-t{font-size:1.1rem;font-weight:700}
.pc-d{font-size:.92rem;font-weight:420;color:var(--ink-2);line-height:1.48}
.pc-img{aspect-ratio:16/9}
@media(max-width:560px){.pm-track .pcard{width:230px;flex:0 0 230px}}

/* ---- book block -------------------------------------------------------- */
.bookblock{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:center;
  padding:30px 32px;border-radius:16px;background:var(--cream);
  border:1px solid var(--rule-soft);
}
.bk-cover{width:100%;height:auto;border-radius:8px;box-shadow:0 18px 44px rgba(10,20,45,.22)}
.bk-kick{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--green-deep);margin-bottom:8px}
.bk-body h3{margin:0 0 10px;font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:800;letter-spacing:-.02em}
.bk-body p{margin:0 0 10px;color:var(--ink-2);font-size:1rem;line-height:1.55;max-width:58ch}
.bk-note{font-size:.9rem!important;color:var(--ink-3)!important}
.bk-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.bk-btns .btn-ghost{border:1px solid var(--rule);color:var(--ink)}
@media(max-width:720px){
  .bookblock{grid-template-columns:1fr;gap:20px;padding:22px}
  .bk-cover{max-width:170px}
}

/* ---- comparison grid, rebuilt ------------------------------------------ */
.cmp4 table{font-size:1rem;min-width:680px}
.cmp4 thead td,.cmp4 thead th{
  font-size:.74rem;letter-spacing:.1em;padding:0 8px 14px;color:var(--ink-2);
}
.cmp4 thead th:first-of-type{
  color:#fff;background:var(--green-deep);border-radius:10px 10px 0 0;padding:12px 8px;
}
.cmp4 tbody th{font-size:1rem;font-weight:600;padding:15px 20px 15px 0}
.cmp4 tbody td{padding:15px 8px}
.cmp4 tbody td:first-of-type{background:rgba(73,147,89,.06)}
.cmp4 tbody tr:last-child td:first-of-type{border-radius:0 0 10px 10px}
.cmp4 tbody td span{width:28px;height:28px;font-size:.9rem}
.cmp4 .cn span{background:rgba(10,20,45,.06);color:rgba(10,20,45,.34)}
.cmp4-note{font-size:.94rem;margin-top:20px}

/* ---- the intent cards actually look like cards now --------------------- */
.dw{background:#fff;border:1px solid var(--rule);box-shadow:0 2px 10px rgba(10,20,45,.04)}
.dw:hover{background:#fff;border-color:var(--green);box-shadow:0 14px 32px rgba(10,20,45,.10)}
.dw-t{font-size:1.14rem;font-weight:700}
.dw-s{font-size:.95rem;font-weight:420;color:var(--ink-2)}
.dw-go{background:var(--green);border-color:var(--green);color:#fff}

/* ---- the tool cards were unreadable: tiny, thin and pale green --------- */
.tcard-kick,.t-kick{font-size:.7rem!important;letter-spacing:.13em!important;color:var(--green-deep)!important;font-weight:700!important}
.tcard h3,.tcard-t{font-size:1.14rem!important;font-weight:700!important;color:var(--ink)!important}
.tcard p,.tcard-d{font-size:.95rem!important;font-weight:420!important;color:var(--ink-2)!important;line-height:1.5!important}
.tcard-go,.tcard a.go,.tcard .parrow{font-size:.98rem!important;font-weight:700!important;color:var(--green-deep)!important}

/* the 100vw full-bleed trick pushed the document to 700px on a 390px phone */
.pmarquee{max-width:100vw}
@media(max-width:900px){
  .pmarquee{width:auto;margin-left:0;margin-right:0}
}
html,body{overflow-x:clip}

/* ---- funnel: ZIP step and address step --------------------------------- */
.fn-ziprow{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:stretch}
.fn-ziprow input{
  flex:0 0 190px;padding:15px 18px;font-size:1.3rem;font-weight:700;letter-spacing:.06em;
  border:2px solid var(--rule);border-radius:12px;background:#fff;color:var(--ink);
  font-family:var(--display);
}
.fn-ziprow input:focus{outline:0;border-color:var(--green)}
.fn-ziprow .btn{flex:0 0 auto;padding:15px 26px}
.fn-zipout{
  margin:18px 0 0;padding:14px 18px;border-radius:12px;font-size:1rem;
  background:rgba(73,147,89,.09);border:1px solid rgba(73,147,89,.28);color:var(--ink-2);
  animation:fnIn .3s ease;
}
.fn-zipout strong{color:var(--ink)}
.fn-err{margin:14px 0 0;color:#b4453f;font-size:.94rem;font-weight:600}
.fn-skip{margin:16px 0 0;font-size:.93rem;color:var(--ink-3)}
.fn-linkbtn{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--green-deep);font-weight:700;border-bottom:2px solid var(--green);
}
.fn-linkbtn:hover{color:var(--ink)}
.fn-card[hidden]{display:none!important}
@media(max-width:520px){
  .fn-ziprow input{flex:1 1 100%}
  .fn-ziprow .btn{flex:1 1 100%}
}

/* ---- home equity report ------------------------------------------------ */
.herep{max-width:880px;margin-inline:auto}
.hr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hr-wide{grid-column:1/-1}
.hr-more{margin:18px 0 22px;border-top:1px solid var(--rule-soft);padding-top:16px}
.hr-more summary{cursor:pointer;font-weight:600;color:var(--green-deep);font-size:.96rem}
.hr-more .hr-grid{margin-top:16px}
.hr-priv{margin:12px 0 0;font-size:.88rem;color:var(--ink-3)}
.hr-out{margin-top:38px;padding:30px;border-radius:16px;background:var(--cream);border:1px solid var(--rule-soft)}
.hr-kick{margin:0 0 8px;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--green-deep)}
.hr-head{margin:0 0 6px;font-size:clamp(1.35rem,3vw,2rem);line-height:1.2;font-weight:800;letter-spacing:-.02em}
.hr-head em{font-style:normal;color:var(--green-deep)}
.hr-since{margin:0 0 22px;font-size:1.05rem;color:var(--ink-2)}
.hr-since b{color:var(--green-deep);font-size:1.15rem}
.hr-since span{color:var(--ink-3);font-size:.92rem}
.hr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule-soft);border-radius:12px;overflow:hidden;margin-bottom:26px}
.hr-stats>div{background:#fff;padding:18px 16px;text-align:center}
.hr-stats span{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;font-weight:600}
.hr-stats b{display:block;font-family:var(--display);font-size:clamp(1.3rem,3vw,1.75rem);font-weight:800;letter-spacing:-.02em}
.hr-stats em{display:block;font-style:normal;font-size:.78rem;color:var(--ink-3);margin-top:4px}
.hr-eq b{color:var(--green-deep)}
.hr-panels{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hr-panel{background:#fff;border:1px solid var(--rule-soft);border-radius:12px;padding:20px}
.hr-panel--wide{grid-column:1/-1;margin-top:18px}
.hr-panel h4{margin:0 0 14px;font-size:1rem;font-weight:700}
.hr-bars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hr-bars li{display:grid;grid-template-columns:1fr;gap:5px}
.hb-l{font-size:.88rem;color:var(--ink-2)}
.hb-t{display:block;height:9px;border-radius:99px;background:rgba(10,20,45,.07);overflow:hidden}
.hb-t i{display:block;height:100%;background:var(--green);border-radius:99px}
.hb-t i.hb-alt{background:var(--navy)}
.hb-v{font-family:var(--display);font-weight:700;font-size:1.02rem}
.hr-note{margin:14px 0 0;font-size:.85rem;color:var(--ink-3);line-height:1.5}
.hr-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.hr-facts li{display:flex;flex-direction:column;gap:2px}
.hr-facts span{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.hr-facts b{font-family:var(--display);font-size:1.05rem;font-weight:700}
.hr-next{margin-top:24px;padding-top:22px;border-top:1px solid var(--rule)}
.hr-next p{margin:0 0 16px;font-size:1.05rem}
.hr-btns{display:flex;flex-wrap:wrap;gap:12px}
.hr-btns .btn-ghost{border:1px solid var(--rule);color:var(--ink)}
.hr-disc{margin:20px 0 0;font-size:.82rem;color:var(--ink-3);line-height:1.5}
@media(max-width:700px){
  .hr-grid,.hr-panels{grid-template-columns:1fr}
  .hr-stats{grid-template-columns:1fr}
  .hr-out{padding:20px}
}

/* ---- equity link builder ----------------------------------------------- */
.elink{max-width:880px;margin-inline:auto}
.el-out{margin-top:26px;padding:20px;border-radius:12px;background:var(--cream);border:1px solid var(--rule-soft)}
.el-out label{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-bottom:8px}
.el-out textarea,.el-bulk textarea{
  width:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;
  background:#fff;color:var(--ink);resize:vertical;line-height:1.5;
}
.el-btns{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.el-btns .btn-ghost{border:1px solid var(--rule);color:var(--ink)}
.el-bulk{margin-top:34px;padding-top:26px;border-top:1px solid var(--rule)}
.el-bulk h3{margin:0 0 8px;font-size:1.15rem;font-weight:700}
.el-bulk p{margin:0 0 14px;font-size:.94rem;color:var(--ink-2)}
.el-bulk code{background:var(--cream-2);padding:2px 6px;border-radius:4px;font-size:.86rem}
.el-bulk .btn{margin-top:14px}
.el-bulk textarea[hidden]{display:none}

/* ---- equity report: one-field entry, the way Homebot opens -------------- */
.hr-hi{display:flex;align-items:center;gap:16px;margin:0 0 26px;padding:16px 20px;
  background:var(--cream);border:1px solid var(--rule-soft);border-radius:14px}
.hr-hi img{width:56px;height:56px;flex:0 0 auto;border-radius:50%;object-fit:cover;object-position:50% 18%;
  border:2px solid rgba(73,147,89,.32);background:var(--cream-2)}
.hr-hi figcaption{font-size:.98rem;line-height:1.5;color:var(--ink-2)}
.hr-biglabel{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.024em;
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.18;margin-bottom:18px;color:var(--ink)}
.hr-onefield{display:flex;gap:12px;flex-wrap:wrap}
.hr-onefield input{
  flex:1 1 340px;min-width:0;padding:16px 20px;font-size:1.06rem;
  border:2px solid var(--rule);border-radius:12px;background:#fff;color:var(--ink);
}
.hr-onefield input:focus{outline:0;border-color:var(--green)}
.hr-onefield .btn{flex:0 0 auto;padding:16px 26px}
.hr-zipask{margin-top:16px;max-width:240px}
.hr-zipask label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.hr-zipask input{width:100%;padding:12px 16px;font-size:1.1rem;font-weight:700;letter-spacing:.05em;
  border:2px solid var(--rule);border-radius:10px;background:#fff;color:var(--ink);font-family:var(--display)}
@media(max-width:620px){.hr-onefield input,.hr-onefield .btn{flex:1 1 100%}}

/* ---- equity report: value chart ---------------------------------------- */
.hr-chart{margin:0 0 24px;padding:18px 18px 12px;background:#fff;border:1px solid var(--rule-soft);border-radius:12px}
.hr-chart figcaption{font-size:.9rem;color:var(--ink-2);margin-bottom:12px}
.hr-chart figcaption b{font-family:var(--display);font-weight:700}
.hr-chart figcaption b.up{color:var(--green-deep)}
.hr-chart figcaption b.down{color:#b4453f}
.hr-chart svg{display:block;width:100%;height:150px}
.hr-chart-x{display:flex;justify-content:space-between;font-size:.76rem;color:var(--ink-3);margin-top:4px}

/* ---- equity report: loan panels ---------------------------------------- */
.hr-slider label{display:block;font-size:.9rem;color:var(--ink-2);margin-bottom:10px}
.hr-slider label b{font-family:var(--display);font-weight:700;color:var(--ink)}
.hr-slider input[type=range]{width:100%;accent-color:var(--green)}
.hr-big{margin:16px 0 0;font-size:1.02rem;line-height:1.55;color:var(--ink-2)}
.hr-big b{font-family:var(--display);font-weight:700;color:var(--green-deep)}
#hrLoanPanels{margin-top:18px}
.hr-buy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.hr-buy li{background:var(--cream);border:1px solid var(--rule-soft);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.hr-buy span{font-size:.86rem;color:var(--ink-2);line-height:1.35}
.hr-buy b{font-family:var(--display);font-size:1.25rem;font-weight:800;color:var(--green-deep)}

/* ---- equity report: market temperature --------------------------------- */
.hr-temp{margin-bottom:18px}
.ht-scale{position:relative;height:9px;border-radius:99px;
  background:linear-gradient(90deg,#4a7fb5 0%,#e8c04a 50%,#b4453f 100%)}
.ht-dot{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 2px 8px rgba(10,20,45,.3)}
.ht-ends{display:flex;justify-content:space-between;font-size:.74rem;color:var(--ink-3);margin-top:8px}
.ht-read{margin:12px 0 0;font-size:.96rem;color:var(--ink-2)}
.ht-read b{font-family:var(--display);font-weight:700;color:var(--ink)}
.hr-rentbig{margin:0;font-size:1.06rem;color:var(--ink-2)}
.hr-rentbig b{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--green-deep)}
/* a global li::before was drawing a dash in front of each stat */
.hr-facts li::before,.hr-buy li::before,.hr-bars li::before{content:none!important;display:none!important}
.hr-facts,.hr-buy,.hr-bars{padding-left:0!important}

/* ---- intent cards: make them read as buttons, not paragraphs ----------- */
.dw{
  padding:24px 22px;border:2px solid var(--rule);border-radius:14px;
  box-shadow:0 1px 3px rgba(10,20,45,.05);
  transition:border-color var(--t),transform var(--t),box-shadow var(--t),background var(--t);
}
.dw:hover{
  border-color:var(--green);background:#fff;transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(10,20,45,.13);
}
.dw-t{font-size:1.2rem;font-weight:800;letter-spacing:-.018em;margin-bottom:4px}
.dw-s{font-size:.95rem;line-height:1.45}
.dw-go{
  width:38px;height:38px;background:var(--green);border:0;color:#fff;
  font-size:1.05rem;transition:transform var(--t);
}
.dw:hover .dw-go{transform:translateX(3px)}
/* the section intro was left of centre against a centred heading */
.t-home .sec--stack .sec-body>p{text-align:center;max-width:56ch;margin-inline:auto}
.pm-all{text-align:center}

/* ============================================================
   CALCULATOR CARDS
   Stock photos of houses did not say "calculator". Each card now
   shows a worked example on a keypad-style face.
   ============================================================ */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.tcard{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:#fff;border:2px solid var(--rule);border-radius:16px;overflow:hidden;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.tcard:hover{border-color:var(--green);transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(10,20,45,.14)}
.tc-face{
  display:block;padding:20px 20px 18px;background:var(--navy);
  background-image:linear-gradient(160deg,#12214b 0%,#0a142d 100%);
}
.tc-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.09);
}
.tc-row:last-child{border-bottom:0}
.tc-row span{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:600}
.tc-row b{font-family:var(--display);font-size:1.02rem;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums}
.tc-row--out{margin-top:4px;padding-top:13px;border-top:2px solid rgba(127,211,154,.4)}
.tc-row--out span{color:#a5e8bb}
.tc-row--out b{color:#7fd39a;font-size:1.3rem}
.tcard-body{display:block;padding:18px 20px 22px}
.tcard-kick{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--green-deep);margin-bottom:7px}
.tcard-t{display:block;font-family:var(--display);font-weight:800;font-size:1.18rem;
  letter-spacing:-.018em;line-height:1.25;margin-bottom:8px;color:var(--ink)}
.tcard-p{display:block;font-size:.93rem;line-height:1.5;color:var(--ink-2);margin-bottom:14px}
.tcard-go{display:inline-block;font-size:.95rem;font-weight:800;color:var(--green-deep)}
.tcard:hover .tcard-go{color:var(--ink)}

/* ============================================================
   COMPARISON TABLE, REBUILT
   Labels were marooned far left of the marks, the "ME" column
   was barely tinted, and every row looked identical.
   ============================================================ */
@media(min-width:681px){
  .cmp4{max-width:960px;margin-inline:auto;overflow:visible}
  .cmp4 table{min-width:0;width:100%;border-collapse:separate;border-spacing:0}

  .cmp4 thead td,.cmp4 thead th{
    padding:14px 6px;font-size:.72rem;letter-spacing:.09em;line-height:1.25;
    vertical-align:bottom;
  }
  /* my column: one solid block down the whole table */
  .cmp4 thead th:first-of-type{
    background:var(--green-deep);color:#fff;border-radius:12px 12px 0 0;
    font-size:.82rem;letter-spacing:.12em;padding:16px 6px;
  }
  .cmp4 tbody td:first-of-type{
    background:rgba(73,147,89,.09);
    border-left:2px solid rgba(73,147,89,.3);
    border-right:2px solid rgba(73,147,89,.3);
  }
  .cmp4 tbody tr:last-child td:first-of-type{
    border-bottom:2px solid rgba(73,147,89,.3);border-radius:0 0 12px 12px;
  }

  /* the label column stops floating away from the marks */
  .cmp4 tbody th{
    width:44%;text-align:left;padding:16px 24px 16px 18px;
    font-size:1rem;font-weight:600;color:var(--ink);border-top:0;
  }
  .cmp4 tbody td{width:14%;padding:16px 6px;border-top:0;text-align:center}
  /* banded rows so the eye can track across */
  .cmp4 tbody tr:nth-child(odd) th,
  .cmp4 tbody tr:nth-child(odd) td:not(:first-of-type){background:rgba(10,20,45,.035)}
  .cmp4 tbody tr:nth-child(odd) th{border-radius:10px 0 0 10px}

  .cmp4 tbody td span{width:30px;height:30px;font-size:.95rem;font-weight:700}
  .cmp4 .cy span{background:var(--green);color:#fff;box-shadow:0 2px 6px rgba(73,147,89,.35)}
  .cmp4 tbody td:first-of-type span{
    background:var(--green-deep);box-shadow:0 3px 10px rgba(53,112,74,.45);
    width:34px;height:34px;font-size:1.05rem;
  }
  .cmp4 .cn span{background:rgba(10,20,45,.08);color:rgba(10,20,45,.3);box-shadow:none}
}
.cmp4-note{text-align:center;max-width:60ch;margin:22px auto 0}

/* ---- guide cards, rebuilt ---------------------------------------------- */
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.gcard{
  display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;
  background:#fff;border:2px solid var(--rule);border-radius:14px;
  text-decoration:none;color:var(--ink);
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.gcard:hover{border-color:var(--green);transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(10,20,45,.12)}
.gc-kick{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:800;color:var(--green-deep)}
.gc-t{font-family:var(--display);font-weight:700;font-size:1.06rem;line-height:1.3;
  letter-spacing:-.012em;flex:1}
.gc-go{font-size:.92rem;font-weight:800;color:var(--green-deep)}
.gcard:hover .gc-go{color:var(--ink)}

/* ---- market lookup, promoted to a full band ---------------------------- */
.t-home .mkt{
  background:linear-gradient(160deg,#12214b 0%,#0a142d 100%);
  border-radius:18px;padding:clamp(26px,4vw,44px);color:#fff;
  box-shadow:0 22px 60px rgba(10,20,45,.20);border:0;
}
.t-home .mkt label,.t-home .mkt .mkt-lab{color:rgba(255,255,255,.72)!important}
.t-home .mkt input[type=text]{
  font-size:1.5rem!important;font-family:var(--display);font-weight:700;
  letter-spacing:.08em;padding:18px 22px!important;border-radius:12px!important;
  border:2px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.06)!important;
  color:#fff!important;
}
.t-home .mkt input[type=text]::placeholder{color:rgba(255,255,255,.35)}
.t-home .mkt input[type=text]:focus{border-color:var(--green-2)!important;background:rgba(255,255,255,.1)!important}
.t-home .mkt .btn{padding:18px 30px!important;font-size:1.05rem!important}
.t-home .mkt .mkt-status,.t-home .mkt p{color:rgba(255,255,255,.7)}
.t-home .mkt b,.t-home .mkt strong{color:#fff}

/* ---- closing offer ----------------------------------------------------- */
.offer{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:26px;align-items:start}
.of-main{padding:clamp(26px,3.6vw,40px);background:#fff;border:2px solid var(--rule);border-radius:18px}
.of-kick{display:block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--green-deep);margin-bottom:10px}
.of-main h3{margin:0 0 10px;font-size:clamp(1.5rem,3.2vw,2.15rem);font-weight:800;letter-spacing:-.024em;line-height:1.16}
.of-sub{margin:0 0 20px;font-size:1.05rem;color:var(--ink-2);line-height:1.55;max-width:48ch}
.of-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.of-list li{position:relative;padding-left:32px;font-size:1rem;line-height:1.5;color:var(--ink-2)}
.of-list li::before{
  content:"";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.of-list b{color:var(--ink)}
.of-cta{display:flex;flex-wrap:wrap;gap:12px}
.of-cta .btn-ghost{border:2px solid var(--rule);color:var(--ink)}
.of-checks{margin-top:18px!important;justify-content:flex-start!important}
.of-side{padding:26px 24px;background:var(--navy);
  background-image:linear-gradient(160deg,#12214b 0%,#0a142d 100%);
  border-radius:18px;color:#fff}
.of-sk{display:block;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:#a5e8bb;margin-bottom:12px}
.of-side p{margin:0 0 12px;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.82)}
.of-sig{font-family:var(--display);font-weight:700;color:#fff!important;margin:0!important}
@media(max-width:820px){.offer{grid-template-columns:1fr}}

/* ---- book gate --------------------------------------------------------- */
.bk-form{margin-top:18px}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.bk-form .eg-consent{margin:14px 0 16px;font-size:.86rem}
.bk-done{margin-top:18px;padding:20px;border-radius:12px;
  background:rgba(73,147,89,.09);border:1px solid rgba(73,147,89,.3)}
.bk-sent{margin:0 0 14px!important;font-size:1rem!important;color:var(--ink-2)!important}
.bk-sent b{color:var(--green-deep);font-family:var(--display);font-weight:800}
@media(max-width:620px){.bk-row{grid-template-columns:1fr}}

/* ============================================================
   GROUND COLOR
   Everything sat on beige (#f9f6ed / #fffdf7), which is what
   made the whole site feel dated. The benchmark sites are white
   with a very light neutral for banding. Navy and green stay.
   ============================================================ */
:root{
  --paper:#ffffff;
  --cream:#f6f7f9;
  --cream-2:#eceff3;
  --rule:rgba(10,20,45,.13);
  --rule-soft:rgba(10,20,45,.08);
}
body,.sec,.sec--alt{background:var(--paper)}
.sec--alt{background:var(--cream)}
.hero--home .hero-veil{background:linear-gradient(180deg,#fff 0%,#fbfcfd 58%,var(--cream) 100%)}
.hr-out,.bookblock,.ap-row,.hr-panel,.review,.dw,.pcard,.gcard,.fn-card{background:#fff}
/* these two are dark by design */
.tc-face,.tc-face .tc-row{background:transparent}
.t-home .mkt,.t-home .mkt *{--x:0}
.ap-row--good{background:rgba(73,147,89,.06)}
.hr-out{background:var(--cream)}
.hr-panel,.bookblock{background:#fff;border-color:var(--rule-soft)}
.pcard,.review{background:#fff;border:1px solid var(--rule-soft)}
.hr-buy li,.el-out{background:var(--cream)}

/* the balance is what makes the report work; it was hidden behind a grey link */
.hr-second{
  margin-top:22px;padding:22px;border-radius:14px;
  background:var(--cream);border:1px solid var(--rule-soft);
}
.hr-second-h{
  margin:0 0 16px;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);
}
.hr-more{margin:16px 0 0;border-top:1px solid var(--rule-soft);padding-top:14px}
.hr-more summary{cursor:pointer;font-weight:700;color:var(--green-deep);font-size:.94rem}
.hr-more summary:hover{color:var(--ink)}
/* placeholders must not read as entered values */
.fn-ziprow input::placeholder,.hr-zipask input::placeholder,.hr-onefield input::placeholder{
  color:var(--ink-3);opacity:.6;font-weight:400;letter-spacing:.02em;font-size:.92em;
}

/* ---- equity report teaser ---------------------------------------------- */
.eqt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px;align-items:center}
.eqt-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.eqt-list li{position:relative;padding-left:30px;font-size:1.02rem;line-height:1.5;color:var(--ink-2)}
.eqt-list li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.eqt-list b{color:var(--ink)}
.eqt-note{margin:12px 0 0;font-size:.9rem;color:var(--ink-3)}
.eqt-card{padding:28px;border-radius:18px;color:#fff;
  background:linear-gradient(160deg,#12214b 0%,#0a142d 100%);
  box-shadow:0 24px 60px rgba(10,20,45,.22)}
.eqt-k{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700}
.eqt-big{display:block;font-family:var(--display);font-size:clamp(2.1rem,4.4vw,2.9rem);font-weight:800;color:#7fd39a;letter-spacing:-.03em;margin:6px 0 3px}
.eqt-sub{display:block;font-size:.9rem;color:rgba(255,255,255,.66);margin-bottom:22px}
.eqt-bars{display:grid;gap:13px}
.eqt-bars span{display:block;font-size:.82rem;color:rgba(255,255,255,.72)}
.eqt-bars i{display:block;height:8px;border-radius:99px;background:var(--green-2);margin-bottom:6px}
.eqt-bars i.alt{background:#fff}
@media(max-width:820px){.eqt{grid-template-columns:1fr}}

/* ---- header readability: BP could not read the logo or his title ------- */
@media(min-width:1181px){
  .bm-logo{height:38px!important}
  .bm-name{font-size:1.24rem;font-weight:800}
  .bm-sub{font-size:.68rem!important;letter-spacing:.1em;color:rgba(255,255,255,.78)!important}
}
/* ---- hero: the block was too tight to read ----------------------------- */
.hero--home h1{line-height:1.2}
.hero--home .hero-lead{font-size:1.1rem;line-height:1.72;max-width:44em;margin-top:24px}
.hero--home .hero-trust{margin-bottom:18px}
/* ---- kickers were too small to read ------------------------------------ */
.sec-kick{font-size:.78rem;letter-spacing:.13em;color:var(--green-deep)}

/* ============================================================
   NAV: click to open, and it stays open.
   Hover opened the menu and then closed it the moment the mouse
   travelled toward it, so items were unclickable.
   ============================================================ */
@media(min-width:1181px){
  /* hover no longer opens or closes anything */
  .menu>li:hover>.sub,
  .menu>li:focus-within>.sub,
  .menu>li.has-mega:hover>.sub--mega,
  .menu>li.has-mega:focus-within>.sub--mega{display:none}
  /* only a click does */
  .menu>li.open>.sub{display:block}
  .menu>li.has-mega.open>.sub--mega{display:grid}
  .sub-btn{cursor:pointer}
  .menu>li.open>.sub-btn{color:var(--green-2)}
  .menu>li.open>.sub-btn svg{transform:rotate(180deg)}
  .sub-btn svg{transition:transform var(--t)}
}

/* ============================================================
   MARKET LOOKUP — the dark background was losing to a later
   rule, leaving white text on a white card.
   ============================================================ */
.t-home .mkt,
.t-home .mkt .mkt-find,
.mkt.bleed{
  background:linear-gradient(160deg,#12214b 0%,#0a142d 100%)!important;
  border:0!important;border-radius:18px!important;
  padding:clamp(26px,4vw,44px)!important;
  box-shadow:0 22px 60px rgba(10,20,45,.20)!important;
}
.t-home .mkt .mkt-find{background:none!important;box-shadow:none!important;padding:0!important}
.t-home .mkt label,.t-home .mkt .mkt-lab,.t-home .mkt legend{
  color:rgba(255,255,255,.75)!important;font-size:.76rem!important;letter-spacing:.1em!important;
}
.t-home .mkt input[type=text]{
  background:rgba(255,255,255,.08)!important;color:#fff!important;
  border:2px solid rgba(255,255,255,.22)!important;
}
.t-home .mkt input[type=text]::placeholder{color:rgba(255,255,255,.4)!important}
.t-home .mkt input[type=text]:focus{
  border-color:var(--green-2)!important;background:rgba(255,255,255,.12)!important;
}
.t-home .mkt p,.t-home .mkt .mkt-status,.t-home .mkt span,.t-home .mkt li{color:rgba(255,255,255,.78)!important}
.t-home .mkt b,.t-home .mkt strong,.t-home .mkt h3,.t-home .mkt h4{color:#fff!important}
.t-home .mkt a{color:#a5e8bb!important}

/* the calculator faces are dark by design; the white-ground pass flattened them */
.tcard .tc-face{
  background:linear-gradient(160deg,#12214b 0%,#0a142d 100%)!important;
}
.tcard .tc-row{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.1)}
.tcard .tc-row:last-child{border-bottom:0}
.tcard .tc-row span{color:rgba(255,255,255,.58)!important}
.tcard .tc-row b{color:#fff!important}
.tcard .tc-row--out{border-top:2px solid rgba(127,211,154,.4)!important}
.tcard .tc-row--out span{color:#a5e8bb!important}
.tcard .tc-row--out b{color:#7fd39a!important}

/* ============================================================
   OPENING PANEL
   Built from BP's contact card, which is the only thing on the
   site that reads as him: the haloed portrait, the eyebrow
   between two rules, the name in Cormorant with the surname
   italic, outlined chips. Dark, then it hands off to the light
   site below.
   ============================================================ */
:root{--card-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif}

.intro{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:grid;place-items:center;
  padding:clamp(80px,12vh,130px) 0 clamp(44px,7vh,70px);
  background:
    radial-gradient(120% 80% at 50% -10%, #15274f 0%, #0d1a38 45%, #0a142d 100%);
  color:#f3efe3;text-align:center;
}
.intro-glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 420px at 50% 22%, rgba(96,172,113,.16), transparent 68%),
    radial-gradient(520px 380px at 88% 84%, rgba(60,116,206,.10), transparent 70%);
}
.intro-in{max-width:620px}

.intro-portrait{position:relative;width:min(62vw,230px);margin:0 auto;aspect-ratio:1/1}
.intro-portrait::before{
  content:"";position:absolute;left:2%;right:2%;top:6%;bottom:-2%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(96,172,113,.55),
             rgba(73,147,89,.18) 46%, transparent 70%);
  filter:blur(18px);
}
.intro-portrait img{
  position:relative;width:100%;height:100%;object-fit:cover;object-position:50% 14%;
  border-radius:50%;border:1px solid rgba(243,239,227,.16);
  background:rgba(24,45,87,.5);
}

.intro-eyebrow{
  display:inline-flex;align-items:center;gap:11px;margin:24px 0 0;
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#7fd39a;
}
.intro-eyebrow::before,.intro-eyebrow::after{
  content:"";width:24px;height:1px;background:currentColor;opacity:.55;
}

.intro-name{
  font-family:var(--card-serif);font-weight:500;color:#fff;
  font-size:clamp(2.6rem,7.4vw,4.1rem);line-height:1.04;letter-spacing:-.005em;
  margin:10px 0 0;
}
.intro-name em{font-style:italic;font-weight:500}

.intro-role{margin:14px 0 0;font-size:1.02rem;color:rgba(243,239,227,.9);font-weight:500}
.intro-where{margin:5px 0 0;font-size:.92rem;color:rgba(243,239,227,.62)}

.intro-chips{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  list-style:none;margin:22px 0 0;padding:0;
}
.intro-chips li{
  padding:9px 15px;border-radius:999px;font-size:.86rem;font-weight:500;
  color:#f3efe3;background:rgba(243,239,227,.05);
  border:1px solid rgba(96,172,113,.42);
}
.intro-chips li::before{content:none!important}

.intro-line{
  font-family:var(--card-serif);font-style:italic;font-weight:500;
  font-size:clamp(1.18rem,3vw,1.45rem);line-height:1.5;
  color:rgba(243,239,227,.92);margin:28px auto 0;max-width:30ch;
}
.intro-line::before,.intro-line::after{content:none}

.intro-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.intro-cta .btn{min-width:210px}
.btn-outline{
  background:rgba(243,239,227,.04);color:#f3efe3;
  border:1px solid rgba(243,239,227,.3);
}
.btn-outline:hover{background:rgba(243,239,227,.1);border-color:rgba(243,239,227,.6);color:#fff}

.intro-more{
  display:inline-flex;flex-direction:column;align-items:center;gap:5px;
  margin-top:clamp(28px,5vh,52px);text-decoration:none;
  color:rgba(243,239,227,.55);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;
}
.intro-more:hover{color:#7fd39a}
.intro-more svg{width:22px;height:22px;animation:introBob 2.2s ease-in-out infinite}
@keyframes introBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.intro-more svg{animation:none}}

/* the light hero underneath is now a second act, not the opening */
.hero--home .hero-h2{
  font-family:var(--display);font-weight:900;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.18;letter-spacing:-.026em;
  color:var(--ink);max-width:22ch;margin-inline:auto;
}
.hero--c.hero--home{padding-top:clamp(64px,7vw,92px)}

/* the nav stays out of the way over the dark panel, then returns */
.t-home .nav-in{background:rgba(10,20,45,.5);backdrop-filter:saturate(140%) blur(10px)}
html.past-intro .t-home .nav-in{background:rgba(10,20,45,.96)}

@media(max-width:640px){
  .intro{min-height:100svh;padding-top:96px}
  .intro-cta .btn{flex:1 1 100%;min-width:0}
}
/* "so you don't have / to." -- the measure was too tight for the serif */
.intro-line{max-width:34ch}
@media(min-width:1181px){
  /* the brand block grew when the subtitle came back, so the menu was colliding */
  .intro ~ * .nav-in,.t-home .nav-in{gap:14px}
  .t-home .brandmark{margin-right:10px}
  .t-home .menu a,.t-home .sub-btn{padding:10px 9px!important;font-size:.9rem!important}
  .t-home .bm-sub{font-size:.62rem!important}
}
@media(min-width:1181px) and (max-width:1560px){
  .t-home .bm-sub{display:none!important}
}
/* the light hero is the second act; it was competing with the name above it,
   and the green on the second sentence was lost when h1 became h2 */
.hero--home .hero-h2{
  font-size:clamp(1.65rem,2.9vw,2.25rem)!important;max-width:26ch;font-weight:800;
}
.hero--home .hero-h2 em{
  font-style:normal;color:var(--green-deep);display:block;
}
.hero--home .hero-lead{font-size:1.02rem;max-width:40em;margin-top:20px}

/* ============================================================
   SECOND HERO — sizing, measured rather than guessed.
   Was 36px in a 585px column with a 16px lead, which read as
   cramped, and the drop from the 66px name above it was abrupt.
   The benchmark runs 48px in ~710px. This sits just under that
   so the name still leads.
   ============================================================ */
@media(min-width:900px){
  .hero--home .hero-h2{
    font-size:clamp(2.1rem,3.3vw,2.75rem)!important;   /* tops out at 44px */
    line-height:1.24!important;
    max-width:19ch!important;
    letter-spacing:-.022em;
  }
  .hero--home .hero-lead{
    font-size:1.16rem!important;                        /* 18.5px */
    line-height:1.72!important;
    max-width:56ch!important;
    margin-top:24px!important;
  }
  .hero--home .hero-mid{max-width:800px}
  .hero--home .hero-checks{margin-top:26px;font-size:.95rem}
  .hero--c.hero--home{
    padding-top:clamp(80px,8vw,116px);
    padding-bottom:clamp(76px,8vw,110px);
  }
}
@media(max-width:899px){
  .hero--home .hero-h2{font-size:clamp(1.6rem,6.2vw,2.1rem)!important;line-height:1.26!important}
  .hero--home .hero-lead{font-size:1.06rem!important;line-height:1.68!important}
}

/* ============================================================
   ONE DARK HERO
   The card identity and the headline now live in the same
   panel. Was two stacked heroes with two headlines and two
   rate-quote buttons.
   ============================================================ */
.hero--intro{
  position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(120% 85% at 50% -8%, #15274f 0%, #0d1a38 46%, #0a142d 100%);
  color:#f3efe3;text-align:center;
  padding:clamp(104px,12vw,150px) 0 clamp(40px,6vh,64px);
}
.hero--intro::before{content:none}
.hero--intro .wrap{max-width:780px}

/* the portrait is an introduction, not the headline; keep it modest */
.hero--intro .intro-portrait{width:min(40vw,132px);margin:0 auto}
.hero--intro .intro-eyebrow{margin-top:18px}
.hero--intro .intro-name{
  font-family:var(--card-serif);font-weight:500;color:#fff;
  font-size:clamp(1.9rem,4.4vw,2.6rem);line-height:1.08;margin:6px 0 0;
}
.hero--intro .intro-name em{font-style:italic;font-weight:500}
.hero--intro .intro-role{margin:8px 0 0;font-size:.94rem;color:rgba(243,239,227,.66)}
.hero--intro .intro-chips{margin-top:16px}

/* the headline is the hero's real job */
.hero--intro .intro-h1{
  font-family:var(--display);font-weight:900;color:#fff;
  font-size:clamp(1.9rem,3.5vw,2.85rem);line-height:1.2;letter-spacing:-.025em;
  max-width:20ch;margin:32px auto 0;text-wrap:balance;
}
.hero--intro .intro-h1 em{font-style:normal;display:block;color:#7fd39a}
.hero--intro .hero-lead{
  color:rgba(243,239,227,.82)!important;
  font-size:1.1rem!important;line-height:1.72!important;
  max-width:56ch!important;margin:22px auto 0!important;text-shadow:none;
}
.hero--intro .hero-actions--one{justify-content:center;margin-top:30px;gap:12px}
.hero--intro .hero-actions--one .btn{flex:0 0 auto;min-width:220px}
.hero--intro .hero-checks{
  justify-content:center;margin-top:24px;color:rgba(243,239,227,.72);font-size:.94rem;
}
.hero--intro .hero-checks li::before{background-color:var(--green-2)}
.hero--intro .intro-more{margin-top:clamp(30px,5vh,54px)}

/* the nav sits over the dark panel and solidifies past it */
.t-home .nav-in{background:rgba(10,20,45,.55);backdrop-filter:saturate(140%) blur(10px)}
html.past-intro .t-home .nav-in{background:rgba(10,20,45,.96)}

@media(max-width:640px){
  .hero--intro{padding-top:92px}
  .hero--intro .hero-actions--one .btn{flex:1 1 100%;min-width:0}
}
/* 20ch was pushing the headline to six lines and the CTA off the fold */
@media(min-width:900px){
  .hero--intro .wrap{max-width:920px}
  .hero--intro .intro-h1{max-width:28ch;font-size:clamp(1.85rem,3.1vw,2.5rem);margin-top:26px}
  .hero--intro .hero-lead{font-size:1.06rem!important;margin-top:18px!important}
  .hero--intro .hero-actions--one{margin-top:26px}
  .hero--intro{padding-top:clamp(96px,10vw,124px)}
}
/* on a phone the hero ran 1,333px and the button sat 300px below the fold */
@media(max-width:640px){
  .hero--intro{padding-top:84px;padding-bottom:30px}
  .hero--intro .intro-portrait{width:96px}
  .hero--intro .intro-eyebrow{margin-top:14px;font-size:.66rem}
  .hero--intro .intro-name{font-size:1.72rem;margin-top:4px}
  .hero--intro .intro-role{font-size:.84rem;margin-top:5px}
  .hero--intro .intro-chips{margin-top:12px;gap:6px}
  .hero--intro .intro-chips li{padding:6px 11px;font-size:.78rem}
  .hero--intro .intro-h1{font-size:1.52rem;line-height:1.24;margin-top:20px;max-width:24ch}
  .hero--intro .hero-lead{font-size:.96rem!important;line-height:1.6!important;margin-top:14px!important}
  .hero--intro .hero-actions--one{margin-top:20px;gap:9px}
  .hero--intro .hero-checks{margin-top:16px;font-size:.84rem;gap:6px 14px}
  .hero--intro .intro-more{margin-top:22px}
}
/* last 80px: the role line repeats the nav, and the checks can sit below */
@media(max-width:640px){
  .hero--intro .intro-role{display:none}
  .hero--intro .intro-portrait{width:84px}
  .hero--intro .intro-h1{font-size:1.44rem;margin-top:18px}
  .hero--intro .hero-lead{margin-top:12px!important}
  .hero--intro .hero-actions--one{margin-top:18px}
}

/* ============================================================
   THE CLAIM LEADS, THE PERSON SIGNS
   BP: leading with his face makes a stranger judge him before
   they know he can help. So the headline runs first and the
   identity sits underneath as a signature strip -- still the
   card's serif name and outlined chips, just not the opening.
   ============================================================ */
.hero--intro .intro-h1{margin-top:16px}
.intro-sig{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:clamp(34px,5vh,54px) auto 0;padding-top:clamp(26px,4vh,38px);
  border-top:1px solid rgba(243,239,227,.13);max-width:520px;text-align:left;
}
.sig-face{
  width:66px;height:66px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  object-position:50% 14%;border:1px solid rgba(243,239,227,.2);
  background:rgba(24,45,87,.5);
}
.sig-text{min-width:0}
.sig-name{
  font-family:var(--card-serif);font-weight:500;color:#fff;
  font-size:1.35rem;line-height:1.1;margin:0;
}
.sig-name em{font-style:italic;font-weight:500}
.sig-role{margin:3px 0 0;font-size:.82rem;color:rgba(243,239,227,.6)}
.intro-sig .intro-chips{justify-content:flex-start;margin-top:10px;gap:6px}
.intro-sig .intro-chips li{padding:5px 11px;font-size:.76rem}
@media(max-width:560px){
  .intro-sig{flex-direction:column;text-align:center;gap:12px;max-width:340px}
  .intro-sig .intro-chips{justify-content:center}
  .sig-face{width:58px;height:58px}
}

/* ============================================================
   HERO BREATHING ROOM
   BP: "its a big fucken block of text nobody is going to read".
   48 words of prose under a 40px headline, with 16-26px gaps
   between everything. His sentences now stand as three separate
   points, and every gap opens up.
   ============================================================ */
.hero--intro .intro-eyebrow{margin-top:0}
.hero--intro .intro-h1{margin-top:clamp(20px,2.6vh,30px)!important;line-height:1.24!important}
.hero--intro .hero-lead{
  font-size:clamp(1.2rem,2vw,1.42rem)!important;
  line-height:1.6!important;
  color:#fff!important;
  max-width:26ch!important;
  margin:clamp(22px,3vh,32px) auto 0!important;
  font-weight:500;
}
.intro-points{
  list-style:none;margin:clamp(26px,3.4vh,38px) auto 0;padding:0;
  display:grid;gap:clamp(12px,1.6vh,18px);max-width:560px;text-align:left;
}
.intro-points li{
  position:relative;padding-left:32px;
  font-size:1.02rem;line-height:1.6;color:rgba(243,239,227,.84);
}
.intro-points li::before{
  content:"";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;
  background:rgba(96,172,113,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%237fd39a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.hero--intro .hero-actions--one{margin-top:clamp(30px,4vh,42px)!important}
.hero--intro .hero-checks{margin-top:clamp(22px,2.8vh,30px)!important}
.intro-sig{margin-top:clamp(44px,6vh,66px)!important;padding-top:clamp(30px,4vh,42px)!important}
.hero--intro{padding-top:clamp(110px,13vw,160px)!important;padding-bottom:clamp(50px,7vh,78px)!important}
@media(max-width:640px){
  .hero--intro .hero-lead{font-size:1.14rem!important;max-width:24ch!important}
  .intro-points{max-width:none;gap:11px}
  .intro-points li{font-size:.96rem;padding-left:28px}
}
/* the CTA was landing a few pixels under the fold on a 820px-tall window */
@media(min-width:900px){
  .hero--intro{padding-top:clamp(96px,10vw,132px)!important}
  .hero--intro .intro-h1{margin-top:clamp(16px,2vh,24px)!important}
  .hero--intro .hero-lead{margin-top:clamp(18px,2.4vh,26px)!important}
  .intro-points{margin-top:clamp(22px,2.8vh,30px)!important}
  .hero--intro .hero-actions--one{margin-top:clamp(26px,3.2vh,34px)!important}
}
/* the three points added height on a phone; claw back the 28px */
@media(max-width:640px){
  .hero--intro{padding-top:76px!important}
  .hero--intro .intro-h1{font-size:1.38rem;margin-top:14px!important}
  .hero--intro .hero-lead{font-size:1.06rem!important;margin-top:12px!important}
  .intro-points{margin-top:16px!important;gap:9px!important}
  .intro-points li{font-size:.92rem;line-height:1.5}
  .hero--intro .hero-actions--one{margin-top:18px!important}
}