:root{
  --ink:#0D0D0D; --ink-2:#17171A; --ink-3:#232328;
  --gold:#C9A063; --gold-bright:#DCBB85; --gold-ink:#7E5F2C;
  --paper:#FFFFFF; --paper-2:#F6F4F0; --paper-3:#EFEBE3;
  --text:#1C1B19; --muted:#5E584F; --muted-dark:#A9A49B;
  --line:#E3DED4; --line-dark:#2F2F35;
  --display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --body:"Public Sans",system-ui,"Segoe UI",sans-serif;
  --gutter:clamp(20px,4.5vw,56px);
  --section:clamp(60px,8vw,104px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;line-height:1.1;letter-spacing:-0.01em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font-family:var(--body);font-size:15px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s}
.btn-gold{background:var(--gold);color:#121212}
.btn-gold:hover{background:var(--gold-bright)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-3)}
.btn-outline{border-color:var(--line);color:var(--text);background:transparent}
.btn-outline:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-ghost-light{border-color:rgba(255,255,255,.28);color:#fff;background:transparent}
.btn-ghost-light:hover{background:rgba(255,255,255,.08)}

.eyebrow{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.eyebrow-dark{color:var(--gold)}
.h2{font-size:clamp(30px,3.8vw,46px)}
.h3{font-size:clamp(22px,2.3vw,27px)}
.lede{font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--muted)}

/* ---------- Preview banner ---------- */
.preview-bar{background:var(--gold-ink);color:#FFF6E7;font-size:13px;text-align:center;padding:9px var(--gutter);line-height:1.4}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:80;background:var(--ink);border-bottom:1px solid var(--line-dark)}
.hdr-in{display:flex;align-items:center;gap:28px;height:84px}
.logo img{height:52px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-item{position:relative}
.nav-btn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;background:none;border:0;color:#EDEAE4;font-family:var(--body);font-size:14.5px;font-weight:500;cursor:pointer;text-decoration:none}
.nav-btn:hover,.nav-item:hover .nav-btn{color:var(--gold)}
.nav-btn svg{width:11px;height:11px;opacity:.6;transition:transform .18s}
.nav-item:hover .nav-btn svg{transform:rotate(180deg)}
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:280px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 48px rgba(0,0,0,.18);padding:14px;opacity:0;visibility:hidden;transition:opacity .16s,visibility .16s;display:grid;gap:2px}
.mega.wide{grid-template-columns:1fr 1fr;min-width:520px}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible}
.mega a{display:block;padding:9px 12px;font-size:14px;text-decoration:none;color:var(--text)}
.mega a:hover{background:var(--paper-2);color:var(--gold-ink)}
.hdr-cta{display:flex;align-items:center;gap:14px}
.hdr-phone{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap}
.hdr-phone:hover{color:var(--gold)}
.hdr-cta .btn{min-height:46px;padding:0 20px;font-size:14px}
.burger{display:none;width:46px;height:46px;background:none;border:1px solid var(--line-dark);color:#fff;cursor:pointer;align-items:center;justify-content:center;margin-left:auto}
.mnav{display:none;background:var(--ink-2);border-top:1px solid var(--line-dark);max-height:70vh;overflow-y:auto}
.mnav.open{display:block}
.mnav .wrap{padding-block:12px 28px}
.mnav details{border-bottom:1px solid var(--line-dark)}
.mnav summary{list-style:none;cursor:pointer;padding:15px 0;color:#fff;font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg) translateY(-3px)}
.mnav details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.mnav .links{padding-bottom:12px;display:grid;gap:2px}
.mnav .links a{color:var(--muted-dark);text-decoration:none;font-size:15px;padding:9px 0 9px 14px;border-left:1px solid var(--line-dark);display:block}
.mnav .links a:hover{color:var(--gold)}
.mnav .m-actions{display:grid;gap:10px;margin-top:20px}
@media (max-width:1140px){.nav,.hdr-phone{display:none}.burger{display:inline-flex}.hdr-in{height:72px;gap:16px}.hdr-cta{margin-left:0}}
@media (max-width:620px){.hdr-cta .btn{display:none}.logo img{height:42px}}

/* ---------- Hero ---------- */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:56% 62%}
/* Two scrims: one across for the headline, one down to seat the sky and
   keep the header and feature cards from floating. */
.hero-media::before,.hero-media::after{content:"";position:absolute;inset:0}
.hero-media::before{background:linear-gradient(100deg,
  rgba(9,9,9,.86) 0%, rgba(9,9,9,.72) 32%, rgba(9,9,9,.30) 56%, rgba(9,9,9,.10) 78%, rgba(9,9,9,.20) 100%)}
.hero-media::after{background:linear-gradient(180deg,
  rgba(9,9,9,.50) 0%, rgba(9,9,9,.04) 32%, rgba(9,9,9,0) 58%, rgba(9,9,9,.48) 100%)}
/* The image now runs close to its original brightness, so the hero copy
   carries a soft shadow to stay crisp rather than leaning on a heavy scrim. */
.hero-copy h1,.hero-copy .hero-lede,.hero-copy .eyebrow,.router p{
  text-shadow:0 1px 18px rgba(6,6,6,.55), 0 1px 3px rgba(6,6,6,.42)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(56px,7vw,100px) clamp(90px,9vw,130px)}
.hero h1{font-size:clamp(38px,5.4vw,70px);font-weight:300;line-height:1.02;letter-spacing:-0.02em;margin-block:22px 20px}
.hero h1 b{font-weight:500;color:var(--gold)}
.hero-lede{font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:#C9C4BB;max-width:36em}
.router{margin-top:34px;border-top:1px solid var(--line-dark);padding-top:26px}
.router p{font-family:var(--display);font-size:20px;color:#fff;margin-bottom:16px}
.router-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:620px}
.router-grid a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:0 18px;border:1px solid rgba(255,255,255,.20);background:rgba(10,10,10,.58);backdrop-filter:blur(6px);color:#fff;text-decoration:none;font-size:15px;font-weight:600;transition:border-color .18s,background .18s}
.router-grid a:hover{border-color:var(--gold);background:rgba(10,10,10,.76)}
.router-grid svg{width:16px;height:16px;color:var(--gold);flex-shrink:0}
.hero-proof{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.proof-card{background:rgba(12,12,12,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);padding:20px 24px 22px;width:100%;max-width:400px}
.proof-card .src{display:flex;align-items:center;gap:9px;padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid rgba(255,255,255,.12)}
/* Drop the official Google "G" in at assets/google-g.svg and it appears here.
   Until then the img removes itself and the text label stands alone. */
.g-mark{width:19px;height:19px;flex-shrink:0;display:block}
.proof-card .src span{font-size:13px;font-weight:600;color:#EDEAE4;letter-spacing:.01em}
.proof-card .top{display:flex;align-items:center;gap:13px}
.stars{display:flex;gap:2px;flex-shrink:0}
.stars svg{fill:#C9A063}
.proof-card b{font-family:var(--display);font-size:30px;font-weight:500;color:#fff;line-height:1;letter-spacing:.01em}
.proof-card .sub{display:block;font-size:13.5px;color:#C9C4BB;margin-top:9px;line-height:1.5}
.proof-split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);width:100%;max-width:400px}
.proof-split div{background:rgba(12,12,12,.62);backdrop-filter:blur(6px);padding:16px 14px}
.proof-split b{display:block;font-family:var(--display);font-size:23px;font-weight:500;color:var(--gold);line-height:1.1}
.proof-split span{font-size:11.5px;color:#C9C4BB;line-height:1.35;display:block;margin-top:3px}
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;padding-block:40px 96px}
  .hero-media img{object-position:52% 58%}
  .hero-media::before{background:linear-gradient(180deg,rgba(9,9,9,.80) 0%,rgba(9,9,9,.70) 48%,rgba(9,9,9,.86) 100%)}
  .hero-media::after{background:none}
  .proof-card,.proof-split{max-width:none}
  .router-grid{max-width:none}
}
@media (max-width:560px){.router-grid{grid-template-columns:1fr}.proof-split{grid-template-columns:1fr;gap:1px}}

/* ---------- Feature cards (overlap hero) ---------- */
.features{margin-top:clamp(-70px,-6vw,-56px);position:relative;z-index:5}
.features-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feature{background:#fff;border:1px solid var(--line);padding:30px 28px 28px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--text);box-shadow:0 18px 40px rgba(28,27,25,.07);transition:transform .18s,box-shadow .18s}
.feature:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(28,27,25,.12)}
.feature .ic{width:46px;height:46px;background:var(--paper-2);display:grid;place-items:center;color:var(--gold-ink)}
.feature .ic svg{width:23px;height:23px}
.feature h3{font-size:25px}
.feature p{font-size:14.5px;line-height:1.6;color:var(--muted);flex-grow:1}
.feature .more{font-size:14px;font-weight:700;color:var(--gold-ink)}
@media (max-width:920px){.features-grid{grid-template-columns:1fr}.features{margin-top:-80px}}

/* ---------- Lender wall ---------- */
.lenders{padding-block:var(--section);overflow:hidden}
.lenders-head{text-align:center;display:flex;flex-direction:column;gap:10px;margin-bottom:34px}
.lenders-head h2{font-size:clamp(24px,2.6vw,32px)}
.marquee{position:relative;--edge:90px}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:var(--edge);z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.marquee-track{display:flex;width:max-content;gap:16px;animation:slide 46s linear infinite;will-change:transform}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee + .marquee{margin-top:16px}
.marquee.rev .marquee-track{animation-direction:reverse;animation-duration:54s}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.lender{flex:0 0 auto;width:190px;height:88px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;padding:14px;text-align:center}
.lender span{font-family:var(--display);font-size:16px;font-weight:500;color:#44403A;line-height:1.25}
.lender img{max-height:40px;max-width:100%;width:auto;object-fit:contain;filter:saturate(.72) contrast(.97);opacity:.92;transition:filter .2s,opacity .2s}
.lender:hover img{filter:none;opacity:1}
/* Drop a logo into assets/lenders/<slug>.svg and it replaces the text name.
   If the file is absent the <img> removes itself and the name shows instead. */
.lender img + span{display:none}
.marquee-note{text-align:center;margin-top:26px;font-size:14px;color:var(--muted)}
@media (max-width:640px){.lender{width:150px;height:76px}.lender span{font-size:14px}.marquee{--edge:40px}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;overflow-x:auto;width:100%;padding-bottom:8px}
  .marquee::before,.marquee::after{display:none}
}

/* ---------- CTA band ---------- */
.band{background:var(--ink);color:#fff}
.band-in{padding-block:clamp(48px,6vw,76px);display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.band h2{font-size:clamp(26px,3.2vw,40px);font-weight:300;max-width:17em}
.band h2 b{font-weight:500;color:var(--gold)}
.band p{color:#C9C4BB;margin-top:12px;max-width:38em;font-size:16px}
.band-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Services ---------- */
.services{background:var(--paper-2);padding-block:var(--section)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;margin-bottom:40px}
.sec-head .hgroup{display:flex;flex-direction:column;gap:14px}
.sec-head .lede{max-width:34em}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{background:#fff;padding:30px 26px;display:flex;flex-direction:column;gap:11px;text-decoration:none;color:var(--text);min-height:224px;transition:background .18s}
.svc:hover{background:#fff}
.svc:hover h3{color:var(--gold-ink)}
.svc .ic{color:var(--gold-ink);height:26px}
.svc .ic svg{width:26px;height:26px}
.svc h3{font-size:21px;transition:color .18s}
.svc p{font-size:14px;line-height:1.6;color:var(--muted);flex-grow:1}
.svc .more{font-size:13.5px;font-weight:700;color:var(--gold-ink)}
@media (max-width:1100px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}.svc{min-height:0}}

/* ---------- Why ---------- */
.why{padding-block:var(--section);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,88px)}
.why-intro{display:flex;flex-direction:column;gap:20px}
.why-list{list-style:none;margin:0;padding:0}
.why-list li{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.why-list li:first-child{padding-top:0}
.why-list .mk{width:42px;height:42px;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold-ink);flex-shrink:0}
.why-list .mk svg{width:20px;height:20px}
.why-list h3{font-size:19px;font-family:var(--body);font-weight:700;margin-bottom:6px;letter-spacing:0}
.why-list p{font-size:15px;line-height:1.65;color:var(--muted)}
@media (max-width:900px){.why{grid-template-columns:1fr}}

/* ---------- Testimonials ---------- */
.testi{background:var(--paper-2);padding-block:var(--section)}
.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.testi-card{background:#fff;border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;gap:16px;margin:0}
.testi-card blockquote{margin:0;font-size:15.5px;line-height:1.7;flex-grow:1}
.testi-card figcaption{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:16px}
.avi{width:42px;height:42px;background:var(--ink);color:var(--gold);display:grid;place-items:center;font-family:var(--display);font-size:15px;font-weight:500;flex-shrink:0}
.testi-card .who{font-weight:700;font-size:14.5px}
.testi-card .meta{font-size:13px;color:var(--muted)}
@media (max-width:980px){.testi-grid{grid-template-columns:1fr}}

/* ---------- About ---------- */
.about{padding-block:var(--section)}
.about-head{display:flex;align-items:center;gap:clamp(20px,3vw,34px);padding-bottom:30px;border-bottom:1px solid var(--line)}
.about-img{flex:0 0 auto;width:clamp(124px,13vw,172px);border:1px solid var(--line);background:var(--paper-2)}
.about-img img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 12%}
.about-id{display:flex;flex-direction:column;gap:9px;min-width:0}
.about-id h2{font-size:clamp(30px,3.6vw,44px)}
.about-id .role{font-size:16px;font-weight:600;color:var(--gold-ink)}
.about-id .creds{font-size:13.5px;color:var(--muted);line-height:1.6}
.about-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);padding-block:32px}
.about-body p{font-size:16.5px;line-height:1.75;color:var(--muted)}
.about-body p + p{margin-top:18px}
.about-foot{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.about-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);flex:1 1 420px}
.about-stats div{background:#fff;padding:18px 20px}
.about-stats b{display:block;font-family:var(--display);font-size:clamp(24px,2.4vw,30px);font-weight:500;color:var(--ink);line-height:1.1}
.about-stats span{font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:.02em}
@media (max-width:860px){.about-body{grid-template-columns:1fr}.about-body p + p{margin-top:0}}
@media (max-width:620px){
  .about-head{flex-direction:column;align-items:flex-start;gap:18px}
  .about-img{width:140px}
  .about-foot .btn{width:100%}
}
@media (max-width:480px){.about-stats{grid-template-columns:1fr}}

/* ---------- Calculator ---------- */
.calc{background:var(--ink);color:#fff;padding-block:var(--section)}
.calc-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,72px);align-items:start}
.calc-intro{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.calc-intro h2{color:#fff;font-weight:300}
.calc-intro h2 b{font-weight:500;color:var(--gold)}
.calc-intro p{color:#C9C4BB;font-size:16px;line-height:1.7}
.calc-card{background:#fff;color:var(--text);padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:26px}
.fld{display:flex;flex-direction:column;gap:9px;border:0;margin:0;padding:0;min-width:0}
.fld-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.fld label,.fld legend{font-size:14.5px;font-weight:700;padding:0}
.fld output{font-family:var(--display);font-size:24px;font-weight:500;color:var(--gold-ink)}
input[type=range]{width:100%;height:42px;accent-color:#8A6A33;cursor:pointer}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{min-height:48px;border:1px solid var(--line);background:#fff;color:var(--text);font-family:var(--body);font-size:14.5px;font-weight:600;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.seg button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.res{background:var(--paper-2);padding:24px 26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-left:3px solid var(--gold)}
.res div{display:flex;flex-direction:column;gap:2px}
.res small{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.res b{font-family:var(--display);font-size:clamp(30px,3.2vw,40px);font-weight:500;line-height:1.1}
.res .alt b{color:var(--gold-ink)}
.calc-note{font-size:12.5px;color:var(--muted);line-height:1.6}
@media (max-width:900px){.calc-in{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{padding-block:var(--section);display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:clamp(36px,6vw,80px)}
.faq-intro{display:flex;flex-direction:column;gap:18px;align-items:flex-start;position:sticky;top:112px;align-self:start}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-size:17.5px;font-weight:700;position:relative;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-ink)}
.faq summary::after{content:"";position:absolute;right:8px;top:30px;width:13px;height:2px;background:var(--gold-ink)}
.faq summary::before{content:"";position:absolute;right:13.5px;top:24.5px;width:2px;height:13px;background:var(--gold-ink);transition:transform .2s}
.faq details[open] summary::before{transform:scaleY(0)}
.faq details p{padding:0 44px 24px 0;font-size:15.5px;line-height:1.75;color:var(--muted)}
.faq details p + p{padding-top:14px;margin-top:-10px}
@media (max-width:900px){.faq{grid-template-columns:1fr}.faq-intro{position:static}}

/* ---------- Articles ---------- */
.arts{background:var(--paper-2);padding-block:var(--section)}
.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.art{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;color:var(--text)}
.art .thumb{aspect-ratio:16/9;background:var(--paper-3);display:grid;place-items:center;color:#B7AE9E;font-size:11px;font-weight:700;letter-spacing:.12em}
.art .body{padding:24px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.art time{font-size:12.5px;color:var(--muted);font-weight:600}
.art h3{font-size:19px;font-family:var(--body);font-weight:700;line-height:1.4;letter-spacing:0}
.art:hover h3{color:var(--gold-ink)}
.art p{font-size:14px;color:var(--muted);line-height:1.6;flex-grow:1}
@media (max-width:980px){.art-grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:#C9C4BB;padding-block:clamp(48px,6vw,72px) 28px;font-size:14.5px}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-dark)}
.ftr-brand{display:flex;flex-direction:column;gap:18px}
.ftr-brand img{height:70px;width:auto;align-self:flex-start}
.ftr-brand .addr{line-height:1.7}
.ftr-brand a{color:#fff;font-weight:600;text-decoration:none}
.ftr-brand a:hover{color:var(--gold)}
.badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:4px;max-width:420px}
.badge{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:72px;border:1px solid var(--line-dark);padding:12px 14px;font-size:11px;font-weight:700;letter-spacing:.08em;color:#fff;line-height:1.25}
.badge span{font-size:10px;font-weight:500;color:var(--muted-dark);letter-spacing:.04em;line-height:1.4}
@media (max-width:400px){.badges{grid-template-columns:1fr;max-width:none}.badge{min-height:0}}
.ftr h2{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr ul a{text-decoration:none;color:#C9C4BB}
.ftr ul a:hover{color:var(--gold)}
.areas{padding-block:34px;border-bottom:1px solid var(--line-dark)}
.areas ul{display:flex;flex-wrap:wrap;gap:8px 18px}
.areas ul a{font-size:13.5px}
.legal{padding-top:26px;display:flex;flex-direction:column;gap:14px;font-size:12.5px;line-height:1.7;color:#8D887F}
.legal p{max-width:1100px}
.legal .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:6px}
@media (max-width:980px){.ftr-top{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr-brand{grid-column:1/-1}}
@media (max-width:560px){.ftr-top{grid-template-columns:1fr}}

/* ---------- Sticky mobile call bar ---------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);border-top:1px solid var(--line-dark);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));gap:10px}
.callbar .btn{flex:1;min-height:50px;font-size:14.5px;padding:0 12px}
@media (max-width:720px){.callbar{display:flex}body{padding-bottom:76px}}

/* ======================================================================
   Sub-page chrome — service pages (/home-loans, /truck-equipment-finance)
   Built on the same tokens as the homepage. Nothing here overrides an
   existing rule; every selector below is new.
   ====================================================================== */

/* ---------- Page hero (shorter than the homepage hero, no image) ---------- */
.phero{background:var(--ink);color:#fff;padding-block:clamp(44px,5.5vw,76px)}
.phero-in{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.phero h1{font-family:var(--display);font-size:clamp(33px,4.5vw,58px);font-weight:300;
  line-height:1.05;letter-spacing:-0.02em;max-width:20em}
.phero h1 b{font-weight:500;color:var(--gold)}
.phero .hero-lede{max-width:40em}
.phero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.crumb{font-size:13px;color:var(--muted-dark)}
.crumb a{color:#C9C4BB;text-decoration:none}
.crumb a:hover{color:var(--gold)}
.crumb span{padding:0 7px;opacity:.5}

/* ---------- Jump links ---------- */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:24px;
  border-top:1px solid var(--line-dark)}
.jump a{font-size:13.5px;font-weight:600;color:#C9C4BB;text-decoration:none;
  border:1px solid rgba(255,255,255,.2);padding:9px 14px;transition:border-color .18s,color .18s}
.jump a:hover{border-color:var(--gold);color:#fff}

/* ---------- Generic page section ---------- */
.sec{padding-block:var(--section)}
.sec-alt{background:var(--paper-2)}
.sec-head-s{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;max-width:40em}
.prose{max-width:40em}
.prose > p{font-size:16px;line-height:1.75;color:var(--muted)}
.prose > p + p{margin-top:16px}
.prose strong{color:var(--text);font-weight:700}
.prose h3{font-size:19px;font-family:var(--body);font-weight:700;letter-spacing:0;
  margin-top:28px;margin-bottom:8px}

/* ---------- Numbered steps ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.steps li:first-child{padding-top:0;border-top:none}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--display);
  font-size:15px;font-weight:500;color:var(--gold-ink);border:1px solid var(--gold);
  width:42px;height:42px;display:grid;place-items:center;align-self:start}
.step-body{min-width:0}
.steps h3{font-size:19px;font-family:var(--body);font-weight:700;letter-spacing:0;margin-bottom:6px}
.steps p{font-size:15px;line-height:1.7;color:var(--muted)}
.steps p + p{margin-top:10px}

/* ---------- Comparison table ---------- */
.tbl-wrap{border:1px solid var(--line);background:#fff;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;min-width:680px;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.65}
.tbl th{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold-ink);background:var(--paper-2)}
.tbl td:first-child{font-weight:700;color:var(--text)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl-note{font-size:13.5px;color:var(--muted);margin-top:14px;max-width:44em;line-height:1.65}

/* ---------- Review flag — an open question for Alen, never page copy ----------
   Deliberately outside the brand palette so it cannot be mistaken for design. */
.flag{position:relative;border:1px dashed #C08A2E;background:#FDF6E8;color:#5A4211;
  padding:13px 16px 13px 44px;font-size:14px;line-height:1.6;margin-top:18px}
.flag::before{content:"?";position:absolute;left:13px;top:12px;width:20px;height:20px;
  border-radius:50%;background:#C08A2E;color:#fff;font-size:13px;font-weight:700;
  display:grid;place-items:center;line-height:1}
.flag b{display:block;font-family:var(--body);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#8A6515;margin-bottom:3px}
.flag:first-child{margin-top:0}
.tbl .flag,.steps .flag{margin-top:10px;font-size:13.5px;padding:11px 13px 11px 40px}
.tbl .flag::before{top:10px}

/* Review notice that explains the flags, once per page */
.review-note{background:#FDF6E8;border:1px solid #E6CF9C;border-left:3px solid #C08A2E;
  padding:20px 24px;display:flex;flex-direction:column;gap:8px}
.review-note h2{font-family:var(--body);font-size:15px;font-weight:700;color:#5A4211}
.review-note p{font-size:14.5px;line-height:1.7;color:#6A5024;max-width:52em}

/* ---------- Two-column feature list reused on sub-pages ---------- */
.pitfalls{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line)}
.pitfalls li{background:#fff;padding:26px 24px}
.pitfalls h3{font-size:18px;font-family:var(--body);font-weight:700;letter-spacing:0;
  margin-bottom:8px}
.pitfalls p{font-size:14.5px;line-height:1.65;color:var(--muted)}

/* ---------- Page intro: the summary paragraphs under the hero ---------- */
.intro{padding-block:clamp(44px,5.5vw,72px)}
.intro-in{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.intro h2{font-size:clamp(26px,3vw,36px);font-weight:300;line-height:1.12;
  letter-spacing:-0.015em;max-width:12em}
.intro h2 b{font-weight:500;color:var(--gold-ink)}
.intro p{font-size:clamp(16px,1.2vw,17.5px);line-height:1.78;color:var(--muted)}
.intro p + p{margin-top:17px}
.intro p strong{color:var(--text);font-weight:700}

/* ---------- "…and what I do about it" — the response under each problem --- */
.does{margin-top:11px;padding:11px 0 2px 16px;border-left:2px solid var(--gold);
  font-size:15px;line-height:1.68;color:var(--text)}
.does b{display:block;font-family:var(--body);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:4px}
.why-list .does p + p{margin-top:9px}

/* The "where it gets hard" list runs long, so its intro column tracks the
   scroll rather than leaving half a screen of empty column beside it. */
#hard .why-intro{position:sticky;top:108px;align-self:start;align-items:flex-start}
@media (max-width:900px){#hard .why-intro{position:static}}

/* ---------- Checklist ---------- */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checklist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  font-size:15px;line-height:1.65;color:var(--muted)}
.checklist li strong{display:block;color:var(--text);font-weight:700;margin-bottom:2px}
.checklist svg{width:18px;height:18px;color:var(--gold-ink);margin-top:3px;flex-shrink:0}

/* ---------- Cross-link pair at the foot of a service page ---------- */
.xlinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.xlinks a{border:1px solid var(--line);background:#fff;padding:26px 24px;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:8px;
  transition:border-color .18s,transform .18s}
.xlinks a:hover{border-color:var(--gold);transform:translateY(-3px)}
.xlinks .eyebrow{color:var(--gold-ink)}
.xlinks h3{font-size:21px}
.xlinks p{font-size:14.5px;line-height:1.6;color:var(--muted)}

@media (max-width:860px){
  .pitfalls,.xlinks{grid-template-columns:1fr}
  .intro-in{grid-template-columns:1fr;gap:22px}
  .intro h2{max-width:none}
}
@media (max-width:620px){
  .steps li{grid-template-columns:1fr;gap:12px}
  .review-note{padding:18px 18px}

  /* A three-column comparison table does not survive a 390px screen as a
     table. Below this width each row becomes a card and every cell carries
     its own column heading, so nothing has to be scrolled sideways. */
  .tbl-wrap{border:0;background:transparent;overflow-x:visible}
  .tbl{min-width:0;display:block}
  /* The row/column association is already gone once the cells are blocks, so
     the real heading row is dropped and each cell shows its own label. */
  .tbl thead{display:none}
  .tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl tr{background:#fff;border:1px solid var(--line);padding:6px 0;margin-bottom:14px}
  .tbl tr:last-child{margin-bottom:0}
  .tbl td{border-bottom:0;padding:11px 18px}
  .tbl td::before{content:attr(data-label);display:block;font-family:var(--body);
    font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:var(--gold-ink);margin-bottom:5px}
  .tbl td:first-child{font-size:17px;padding-bottom:4px}
  .tbl td:first-child::before{display:none}
  .tbl td:not(:first-child){color:var(--muted)}
}

/* ---------- Long-form legal pages (privacy policy, credit guide) ---------- */
.legal-page{padding-block:clamp(44px,5.5vw,72px)}
.legal-in{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:start}
.legal-toc{position:sticky;top:108px;align-self:start;display:flex;flex-direction:column;gap:9px}
.legal-toc h2{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:3px}
.legal-toc a{font-size:14px;line-height:1.45;color:var(--muted);text-decoration:none;
  padding:2px 0;transition:color .15s}
.legal-toc a:hover{color:var(--gold-ink)}
.legal-body h2{font-size:clamp(20px,1.9vw,23px);font-family:var(--display);font-weight:500;
  margin-top:40px;margin-bottom:12px;scroll-margin-top:110px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{font-size:15.5px;line-height:1.78;color:var(--muted)}
.legal-body p + p{margin-top:13px}
.legal-body strong{color:var(--text);font-weight:700}
.legal-body ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.legal-body ul + p,.legal-body ul + .flag{margin-top:15px}
.legal-body li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.7;color:var(--muted)}
.legal-body li::before{content:"";position:absolute;left:3px;top:11px;width:5px;height:5px;
  background:var(--gold);border-radius:50%}
.legal-meta{font-size:13.5px;color:var(--muted);padding-bottom:22px;margin-bottom:28px;
  border-bottom:1px solid var(--line)}
@media (max-width:900px){
  .legal-in{grid-template-columns:1fr;gap:26px}
  .legal-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px 14px}
  .legal-toc h2{width:100%}
}

/* --- Articles -------------------------------------------------------- */
/* Long-form posts reuse the legal-page shell (sticky contents + prose
   column). These additions cover what a legal page never needed: ordered
   lists, a standfirst, sub-headings inside a section, and the rate chart. */
.legal-body h3{font-size:17px;font-family:var(--body);font-weight:700;color:var(--text);
  margin:26px 0 10px;line-height:1.45;letter-spacing:0}
.legal-body ol{margin:15px 0 0;padding:0;list-style:none;counter-reset:n;display:grid;gap:12px}
.legal-body ol li{counter-increment:n;padding-left:36px;position:relative;font-size:15.5px;
  line-height:1.7;color:var(--muted)}
.legal-body ol li::before{content:counter(n);position:absolute;left:0;top:0;width:23px;height:23px;
  border-radius:50%;background:var(--paper-3);color:var(--text);font-size:12px;font-weight:700;
  font-family:var(--body);display:grid;place-items:center;letter-spacing:0}
.legal-body ol + p{margin-top:15px}
.art-standfirst{font-size:17px;line-height:1.66;color:var(--text);font-weight:600;
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.art-meta{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.02em;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.art-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line);display:inline-block}
.art-end{margin-top:36px;padding-top:26px;border-top:1px solid var(--line)}
.art-end h2{margin-top:0}

/* Rate chart. Drawn inline so it carries no image request and stays sharp;
   below ~620px it scrolls sideways inside its own box rather than shrinking
   the labels past legibility. */
/* min-width:0 on the prose column and the figure: a grid item defaults to
   min-width:auto, so the chart's min-width would otherwise widen the whole
   column and push the page sideways on a phone. */
.legal-body{min-width:0}
figure.chart{margin:28px 0 10px;padding:0;border:1px solid var(--line);background:var(--paper-2);
  min-width:0}
figure.chart .plot{overflow-x:auto;max-width:100%;min-width:0;padding:18px 16px 6px}
figure.chart svg{display:block;width:100%;min-width:560px;height:auto}
figure.chart text{font-family:var(--body)}
figure.chart figcaption{font-size:12.5px;line-height:1.55;color:var(--muted);
  padding:0 16px 14px;border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
figure.chart .c-t{fill:var(--text)}
figure.chart .c-m{fill:var(--muted)}
figure.chart .c-cut{stroke:var(--muted-dark);fill:none}
figure.chart .c-rise{stroke:var(--gold-ink);fill:none}
figure.chart .c-cut-d{fill:var(--muted-dark)}
figure.chart .c-rise-d{fill:var(--gold-ink)}
figure.chart .c-ref{stroke:var(--line);fill:none}

/* Article cards. There is no photography for these, and a 16/9 placeholder
   just reads as a missing image, so the thumbnail becomes a slim category
   band: deliberate, and it tightens the grid. */
.art .thumb{aspect-ratio:auto;display:flex;align-items:center;gap:11px;
  padding:14px 24px;place-items:initial;border-bottom:1px solid var(--line)}
.art .thumb::before{content:"";width:18px;height:2px;background:var(--gold);flex:none}
.art .thumb b{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink)}

/* 404. A plain list of the pages people actually arrive looking for, sized
   large enough to be the obvious next move rather than fine print.

   Fixed column counts rather than auto-fit: the 1px gaps let the container's
   background through as cell dividers, so any column count that does not
   divide the six items leaves a visible empty cell. 3/2/1 all divide 6. */
.nf-links{list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;max-width:860px;
  background:var(--line);border:1px solid var(--line)}
@media (max-width:820px){ .nf-links{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .nf-links{grid-template-columns:1fr} }
.nf-links li{background:var(--paper)}
.nf-links a{display:block;padding:17px 20px;text-decoration:none;color:var(--text);
  font-weight:600;font-size:15.5px;transition:background .18s,color .18s}
.nf-links a:hover{background:var(--paper-2);color:var(--gold-ink)}
.nf-note{margin-top:22px;color:var(--muted);font-size:15px}

/* Testimonial attribution when the source is a Google review rather than a
   named client: the Google mark replaces the initials disc. */
.avi-g{background:#fff;border:1px solid var(--line);display:grid;place-items:center;
  overflow:hidden;padding:0}
.avi-g img{width:21px;height:21px;display:block}
.testi-card figcaption .meta a{color:var(--muted);text-decoration:underline;
  text-underline-offset:2px}
.testi-card figcaption .meta a:hover{color:var(--gold-ink)}
/* The rating line runs to two lines at most widths; keep the link whole so it
   does not break as "read all 4 / on Google". */
.proof-card .sub a{white-space:nowrap}