/* =====================================================================
   Loan Bazar — design system
   Palette: deep navy ink, paper white, refined crimson, brass hairline
   Type:    Bricolage Grotesque (display) · Public Sans (body) · Space Mono (data)
   ===================================================================== */

:root{
  --ink:        #0d1b39;   /* deep navy — authority            */
  --ink-2:      #16244a;   /* raised navy surface              */
  --ink-3:      #1f2f5c;
  --paper:      #ffffff;
  --paper-2:    #f5f6fb;   /* soft surface                     */
  --paper-3:    #eef0f8;
  --crimson:    #d4213a;   /* accent / CTA                     */
  --crimson-d:  #b01730;
  --brass:      #c19a4b;   /* hairline / eyebrow accent        */
  --text:       #2a3450;
  --muted:      #66708c;
  --line:       #e2e5f0;
  --line-2:     #d6dae8;
  --ring:       rgba(212,33,58,.35);

  --wrap: 1180px;
  --radius: 14px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(13,27,57,.06), 0 2px 8px rgba(13,27,57,.05);
  --shadow-md: 0 12px 32px rgba(13,27,57,.10), 0 2px 8px rgba(13,27,57,.06);
  --shadow-lg: 0 28px 60px rgba(13,27,57,.16);

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Public Sans', system-ui, -apple-system, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

/* ---- Reset ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--text);
  background:var(--paper);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); margin:0; line-height:1.08; letter-spacing:-.015em; font-weight:700; }
p{ margin:0 0 1rem; }
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

/* ---- Eyebrow / labels ---------------------------------------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--crimson);
  font-weight:700;
  margin:0 0 .9rem;
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--brass); display:inline-block; }
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color:#ffd1d8; }
.eyebrow--light::before{ background:var(--brass); }

/* ---- Buttons -------------------------------------------------------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:600; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-sm); border:1.5px solid transparent;
  background:var(--bg); color:var(--fg); cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--accent{ --bg:var(--crimson); }
.btn--accent:hover{ background:var(--crimson-d); }
.btn--ink{ --bg:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:var(--paper-2); }
.btn--ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost-light:hover{ background:rgba(255,255,255,.1); }
.btn--lg{ padding:1rem 1.9rem; font-size:1.06rem; }
.btn--block{ width:100%; }

/* ---- Top bar -------------------------------------------------------- */
.topbar{ background:var(--ink); color:#cdd5ea; font-size:.84rem; }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:42px; }
.topbar__note{ margin:0; letter-spacing:.01em; }
.topbar__call{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); }
.topbar__call-label{ color:#8a97bd; text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; }
.topbar__call-num{ color:#fff; font-weight:700; letter-spacing:.04em; }
.topbar__call:hover .topbar__call-num{ color:var(--brass); }

/* ---- Brand ---------------------------------------------------------- */
.brand{ display:inline-flex; align-items:center; gap:.7rem; }
.brand__mark{
  width:46px; height:46px; border-radius:11px;
  background:linear-gradient(150deg,var(--ink) 0%, var(--ink-3) 100%);
  display:grid; place-items:center; position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand__mark::after{ content:""; position:absolute; inset:auto -30% -60% -30%; height:70%; background:var(--crimson); transform:rotate(-12deg); opacity:.9; }
.brand__lb{ position:relative; z-index:1; font-family:var(--display); font-weight:800; color:#fff; font-size:1.05rem; letter-spacing:.02em; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--display); font-weight:700; color:var(--ink); font-size:1.18rem; letter-spacing:-.01em; white-space:nowrap; }
.brand__sub{ font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:.28rem; }

/* ---- Header / nav --------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:74px; }

.primary-nav{ display:flex; align-items:center; gap:1.6rem; }
.primary-nav__list{ display:flex; align-items:center; gap:.3rem; }
.nav-item{ position:relative; }
.nav-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--display); font-weight:500; font-size:1rem; color:var(--ink);
  padding:.6rem .8rem; border-radius:8px; transition:color .15s, background .15s;
}
.nav-link:hover{ color:var(--crimson); }
.nav-item.is-active > .nav-link{ color:var(--crimson); }
.nav-item.is-active > .nav-link::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.15rem; height:2px; background:var(--brass); border-radius:2px;
}
.nav-caret{ width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s; opacity:.7; }
.nav-item--has-kids:hover .nav-caret{ transform:rotate(225deg) translateY(2px); }

.nav-sub{
  position:absolute; top:calc(100% + 8px); left:0; min-width:230px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-md);
  padding:.5rem; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s, transform .18s, visibility .18s;
}
.nav-item--has-kids:hover .nav-sub,
.nav-item--has-kids:focus-within .nav-sub{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-sub li a{ display:block; padding:.6rem .8rem; border-radius:8px; font-size:.95rem; color:var(--text); font-weight:500; }
.nav-sub li a:hover{ background:var(--paper-2); color:var(--ink); }
.nav-sub li a.is-active{ color:var(--crimson); }
.nav-sub-toggle{ display:none; }

.nav-cta{
  font-family:var(--display); font-weight:600; font-size:.95rem; color:#fff; background:var(--crimson);
  padding:.6rem 1.15rem; border-radius:8px; transition:background .2s, transform .15s;
}
.nav-cta:hover{ background:var(--crimson-d); transform:translateY(-1px); }

.nav-toggle{ display:none; align-items:center; gap:.55rem; background:none; border:0; cursor:pointer; font-family:var(--display); font-weight:600; color:var(--ink); }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after{
  content:""; display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .2s;
}
.nav-toggle__bars{ position:relative; }
.nav-toggle__bars::before{ position:absolute; top:-7px; }
.nav-toggle__bars::after{ position:absolute; top:7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ transform:translateY(-7px) rotate(-45deg); }

/* ---- Hero ----------------------------------------------------------- */
.hero{ position:relative; background:var(--ink); color:#eaeefb; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(820px 420px at 88% -10%, rgba(212,33,58,.22), transparent 60%),
    radial-gradient(620px 520px at 8% 110%, rgba(193,154,75,.14), transparent 55%);
}
.hero__inner{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:3.5rem; align-items:center; padding:5.2rem 0 5.6rem; }
.hero__kicker{ color:#ffd1d8; }
.hero__kicker::before{ background:var(--brass); }
.hero h1{
  color:#fff; font-weight:800;
  font-size:clamp(2.5rem, 5.4vw, 4.1rem); line-height:1.02; letter-spacing:-.025em;
  margin:0 0 1.3rem;
}
.hero h1 em{ font-style:normal; color:var(--brass); position:relative; white-space:nowrap; }
.hero__lead{ font-size:1.12rem; color:#c3cbe6; max-width:46ch; margin:0 0 2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.4rem; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:1.6rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.12); }
.hero__trust div{ display:flex; flex-direction:column; }
.hero__trust dt{ font-family:var(--display); font-weight:700; color:#fff; font-size:1.45rem; }
.hero__trust dd{ margin:0; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#8e9bc2; }

/* Hero rate card */
.rate-card{
  background:linear-gradient(165deg,#fff 0%, #f3f5fc 100%);
  border-radius:18px; padding:1.8rem; color:var(--ink); box-shadow:var(--shadow-lg);
  position:relative; border:1px solid rgba(255,255,255,.6);
}
.rate-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
.rate-card__tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.rate-card__dot{ width:10px; height:10px; border-radius:50%; background:var(--crimson); box-shadow:0 0 0 4px rgba(212,33,58,.14); }
.rate-card__rows{ display:flex; flex-direction:column; gap:.1rem; }
.rate-card__row{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 0; border-bottom:1px dashed var(--line-2); }
.rate-card__row:last-child{ border-bottom:0; }
.rate-card__label{ font-size:.95rem; color:var(--text); }
.rate-card__val{ font-family:var(--mono); font-weight:700; color:var(--ink); }
.rate-card__val--ok{ color:#1f8a52; }
.rate-card__foot{ margin-top:1.3rem; }
.rate-card__note{ font-size:.78rem; color:var(--muted); margin:.7rem 0 0; }

/* ---- Section scaffolding ------------------------------------------- */
.section{ padding:5rem 0; }
.section--tight{ padding:3.6rem 0; }
.section--paper{ background:var(--paper-2); }
.section--ink{ background:var(--ink); color:#dfe5f6; }
.section--ink h2, .section--ink h3{ color:#fff; }
.section__head{ max-width:680px; margin-bottom:2.6rem; }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__title{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); font-weight:700; }
.section__lead{ font-size:1.08rem; color:var(--muted); margin-top:.9rem; }
.section--ink .section__lead{ color:#aeb8d6; }

/* ---- Services grid -------------------------------------------------- */
.services{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.service{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem 1.5rem; transition:transform .2s, box-shadow .2s, border-color .2s;
  position:relative; overflow:hidden;
}
.service::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.service:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.service:hover::before{ transform:scaleX(1); }
.service__icon{ width:46px; height:46px; border-radius:11px; background:var(--paper-2); display:grid; place-items:center; margin-bottom:1.1rem; color:var(--crimson); }
.service__icon svg{ width:24px; height:24px; }
.service h3{ font-size:1.18rem; margin-bottom:.5rem; }
.service p{ font-size:.95rem; color:var(--muted); margin:0; }

/* ---- Two-column feature (Did you know / first home) ----------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3.4rem; align-items:start; }
.split--narrow{ gap:2.6rem; }
.check-list{ display:flex; flex-direction:column; gap:1.1rem; margin-top:.5rem; }
.check-list li{ display:flex; gap:.9rem; font-size:1.02rem; color:var(--text); }
.check-list li::before{
  content:""; flex:0 0 22px; height:22px; margin-top:.25rem; border-radius:50%;
  background:rgba(212,33,58,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4213a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.panel{
  background:var(--ink); color:#dbe1f4; border-radius:var(--radius);
  padding:2.2rem; position:relative; overflow:hidden;
}
.panel::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(212,33,58,.4),transparent 70%); }
.panel h3{ color:#fff; font-size:1.5rem; margin-bottom:1rem; }
.panel .q{ font-family:var(--display); font-weight:700; color:#fff; }

/* ---- Posts ---------------------------------------------------------- */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.post{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.post:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.post__meta{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); margin-bottom:.7rem; }
.post h3{ font-size:1.22rem; margin-bottom:.7rem; }
.post p{ font-size:.95rem; color:var(--muted); margin:0 0 1.2rem; }
.post__more{ margin-top:auto; font-family:var(--display); font-weight:600; color:var(--crimson); display:inline-flex; align-items:center; gap:.4rem; }
.post__more::after{ content:"→"; transition:transform .2s; }
.post:hover .post__more::after{ transform:translateX(4px); }

/* ---- Testimonial ---------------------------------------------------- */
.quote{ max-width:760px; margin-inline:auto; text-align:center; }
.quote__mark{ font-family:var(--display); font-size:4rem; line-height:.5; color:var(--brass); }
.quote__text{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--ink); margin:1rem 0 1.3rem; letter-spacing:-.01em; }
.quote__by{ font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---- Calculators promo (home) -------------------------------------- */
.calc-promo{ background:var(--crimson); color:#fff; border-radius:var(--radius); padding:2.4rem; display:flex; flex-direction:column; justify-content:center; }
.calc-promo h3{ color:#fff; font-size:1.7rem; margin-bottom:.7rem; }
.calc-promo p{ color:#ffdfe4; }

/* ---- Lender panel --------------------------------------------------- */
.lenders{ padding:4.6rem 0; text-align:center; background:var(--paper-2); border-top:1px solid var(--line); }
.lenders__title{ font-size:clamp(1.7rem,3.2vw,2.4rem); }
.lenders__title span{ color:var(--crimson); }
.lenders__lead{ max-width:560px; margin:.9rem auto 2.4rem; color:var(--muted); }
.lender-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.lender-grid__item{
  background:#fff; padding:1.25rem .8rem; min-height:74px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--ink-2);
  transition:background .2s, color .2s;
}
.lender-grid__item:hover{ background:var(--ink); color:#fff; }

/* ---- CTA strip ------------------------------------------------------ */
.cta-strip{ background:linear-gradient(120deg,var(--ink) 0%, var(--ink-3) 100%); color:#fff; }
.cta-strip__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:3.2rem 0; flex-wrap:wrap; }
.cta-strip__title{ color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); max-width:18ch; }
.cta-strip__actions{ display:flex; gap:.9rem; flex-wrap:wrap; }

/* ---- Footer --------------------------------------------------------- */
.site-footer{ background:var(--ink); color:#aab4d4; padding-top:3.6rem; }
.site-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.4rem; padding-bottom:2.8rem; }
.brand--footer .brand__name{ color:#fff; }
.brand--footer .brand__sub{ color:#7c89b3; }
.site-footer__blurb{ margin:1.1rem 0 1.3rem; font-size:.95rem; color:#9aa5c8; max-width:34ch; }
.social{ display:flex; gap:.6rem; }
.social__link{ width:38px; height:38px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#fff; font-family:var(--display); font-weight:700; font-size:.9rem; transition:background .2s, transform .15s; }
.social__link:hover{ background:var(--crimson); transform:translateY(-2px); }
.site-footer__head{ color:#fff; font-size:1rem; margin-bottom:1.1rem; font-family:var(--display); font-weight:600; }
.site-footer__links li{ margin-bottom:.6rem; }
.site-footer__links a{ color:#aab4d4; font-size:.95rem; transition:color .15s; }
.site-footer__links a:hover{ color:#fff; }
.site-footer__contact li{ display:flex; flex-direction:column; margin-bottom:.85rem; font-size:.95rem; color:#cdd5ea; }
.site-footer__contact span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#7c89b3; margin-bottom:.1rem; }
.site-footer__contact a:hover{ color:var(--brass); }
.site-footer__legal{ border-top:1px solid rgba(255,255,255,.1); padding:1.6rem 24px 2rem; font-size:.82rem; color:#7c89b3; }
.site-footer__legal p{ margin:.2rem 0; }
.site-footer__copy{ margin-top:.8rem !important; color:#9aa5c8; }

/* ---- Back to top ---------------------------------------------------- */
.to-top{ position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; background:var(--crimson); color:#fff; display:grid; place-items:center; font-size:1.2rem; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s; z-index:40; }
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--crimson-d); }

/* ---- Inner page hero ------------------------------------------------ */
.page-hero{ background:var(--ink); color:#eaeefb; position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(700px 360px at 92% -20%, rgba(212,33,58,.2), transparent 60%); }
.page-hero__inner{ position:relative; padding:3.6rem 0 3.8rem; }
.breadcrumb{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#8e9bc2; margin-bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--brass); }
.breadcrumb span{ color:#5e6a8f; }
.page-hero h1{ color:#fff; font-size:clamp(2.1rem,4.4vw,3.2rem); font-weight:800; letter-spacing:-.02em; }
.page-hero__lead{ color:#c3cbe6; max-width:60ch; margin-top:1rem; font-size:1.08rem; }

/* ---- Article / content layout -------------------------------------- */
.layout{ display:grid; grid-template-columns:1fr 340px; gap:3rem; align-items:start; }
.prose h2{ font-size:1.6rem; margin:2.4rem 0 .8rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.22rem; margin:1.8rem 0 .6rem; color:var(--ink); }
.prose p{ color:var(--text); }
.prose .tag{ display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--crimson); background:rgba(212,33,58,.08); padding:.2rem .55rem; border-radius:5px; margin-bottom:.5rem; }
.prose .proscon{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0 1.6rem; }
.proscon__box{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; background:#fff; }
.proscon__box h4{ font-family:var(--display); font-size:.95rem; margin:0 0 .6rem; display:flex; align-items:center; gap:.4rem; }
.proscon__box--pro h4{ color:#1f8a52; }
.proscon__box--con h4{ color:var(--crimson); }
.proscon__box ul{ display:flex; flex-direction:column; gap:.5rem; }
.proscon__box li{ font-size:.92rem; color:var(--text); padding-left:1.1rem; position:relative; }
.proscon__box li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--brass); }

.feature-block{ border-top:1px solid var(--line); padding-top:1.6rem; margin-top:1.6rem; }
.feature-block:first-child{ border-top:0; padding-top:0; margin-top:0; }

/* ---- Sidebar -------------------------------------------------------- */
.sidebar{ display:flex; flex-direction:column; gap:1.4rem; position:sticky; top:96px; }
.side-cta{ background:var(--crimson); color:#fff; border-radius:var(--radius); padding:1.8rem; }
.side-cta h3{ color:#fff; font-size:1.35rem; margin-bottom:.6rem; }
.side-cta p{ color:#ffdde2; font-size:.95rem; margin-bottom:1.2rem; }
.side-links{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.side-links h3{ font-size:.8rem; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); }
.side-links a{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.3rem; font-weight:500; font-size:.95rem; color:var(--ink); border-bottom:1px solid var(--line); transition:background .15s, color .15s; }
.side-links a:last-child{ border-bottom:0; }
.side-links a:hover{ background:var(--paper-2); color:var(--crimson); }
.side-links a::after{ content:"→"; color:var(--line-2); }
.side-links a:hover::after{ color:var(--crimson); }

/* ---- Calculators grid ---------------------------------------------- */
.calc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.calc-tile{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; transition:transform .2s, box-shadow .2s, border-color .2s; }
.calc-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.calc-tile__icon{ width:48px; height:48px; border-radius:12px; background:var(--ink); color:#fff; display:grid; place-items:center; margin-bottom:1rem; }
.calc-tile__icon svg{ width:24px; height:24px; }
.calc-tile h3{ font-size:1.15rem; margin-bottom:.4rem; }
.calc-tile p{ font-size:.92rem; color:var(--muted); margin:0; }
.calc-note{ margin-top:2rem; padding:1.2rem 1.4rem; background:var(--paper-2); border-left:3px solid var(--brass); border-radius:8px; font-size:.9rem; color:var(--muted); }

/* ---- Forms ---------------------------------------------------------- */
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2.2rem; box-shadow:var(--shadow-sm); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--full{ grid-column:1 / -1; }
.field label{ font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--ink); }
.field .req{ color:var(--crimson); }
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  padding:.78rem .9rem; border:1.5px solid var(--line-2); border-radius:9px; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder{ color:#9aa3bd; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--crimson); box-shadow:0 0 0 4px var(--ring); }
.field textarea{ resize:vertical; min-height:120px; }
.field .hint{ font-size:.82rem; color:var(--muted); }

.consent{ grid-column:1 / -1; display:flex; flex-direction:column; gap:.85rem; margin-top:.4rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.consent__item{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; color:var(--text); cursor:pointer; }
.consent__item input{ flex:0 0 20px; width:20px; height:20px; margin-top:.15rem; accent-color:var(--crimson); cursor:pointer; }
.consent__item a{ color:var(--crimson); text-decoration:underline; }

.form-actions{ grid-column:1 / -1; margin-top:.6rem; display:flex; gap:.8rem; flex-wrap:wrap; }

.alert{ border-radius:10px; padding:1rem 1.2rem; margin-bottom:1.6rem; font-size:.95rem; display:flex; gap:.6rem; align-items:flex-start; }
.alert--ok{ background:#e8f6ee; border:1px solid #b6e3c8; color:#1c6a3e; }
.alert--err{ background:#fdeaec; border:1px solid #f4c4cb; color:#a01228; }
.alert strong{ font-weight:700; }

/* ---- Contact details column ---------------------------------------- */
.contact-card{ background:var(--ink); color:#dbe1f4; border-radius:var(--radius); padding:2rem; }
.contact-card h3{ color:#fff; font-size:1.3rem; margin-bottom:1.3rem; }
.contact-card ul{ display:flex; flex-direction:column; gap:1.1rem; }
.contact-card li{ display:flex; flex-direction:column; gap:.15rem; }
.contact-card span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#8e9bc2; }
.contact-card a, .contact-card strong{ color:#fff; font-weight:600; font-size:1.05rem; }
.contact-card a:hover{ color:var(--brass); }

/* ---- About cards ---------------------------------------------------- */
.bio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.bio{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow-sm); }
.bio__head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.bio__avatar{ width:60px; height:60px; border-radius:14px; background:linear-gradient(150deg,var(--ink),var(--ink-3)); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.3rem; flex:0 0 auto; }
.bio__avatar--accent{ background:linear-gradient(150deg,var(--crimson),var(--crimson-d)); }
.bio__name{ font-family:var(--display); font-weight:700; font-size:1.2rem; color:var(--ink); line-height:1.2; }
.bio__role{ font-size:.86rem; color:var(--muted); margin-top:.2rem; }
.bio__contact{ font-family:var(--mono); font-size:.82rem; color:var(--crimson); margin-top:.3rem; display:flex; flex-direction:column; gap:.1rem; }
.bio p{ color:var(--text); font-size:.97rem; margin:0; }

/* ---- Steps (loan process) ------------------------------------------ */
.steps{ counter-reset:step; display:flex; flex-direction:column; gap:1.6rem; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:start; }
.step__num{ counter-increment:step; width:48px; height:48px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1.15rem; flex:0 0 auto; }
.step__num::before{ content:counter(step,decimal-leading-zero); }
.step h3{ font-size:1.2rem; margin-bottom:.4rem; }
.step p{ margin:0; color:var(--text); }

/* ---- Utility -------------------------------------------------------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.lead{ font-size:1.1rem; color:var(--muted); }
.divider{ height:1px; background:var(--line); border:0; margin:2rem 0; }

/* ---- Responsive ----------------------------------------------------- */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; gap:2.6rem; padding:4rem 0 4.4rem; }
  .layout{ grid-template-columns:1fr; }
  .sidebar{ position:static; }
  .services{ grid-template-columns:repeat(2,1fr); }
  .lender-grid{ grid-template-columns:repeat(4,1fr); }
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav-toggle{ display:inline-flex; }
  .primary-nav{
    position:fixed; inset:0 0 0 auto; width:min(360px,86vw); background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:5.4rem 1.2rem 2rem;
    box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .3s ease; overflow-y:auto;
  }
  .primary-nav.is-open{ transform:translateX(0); }
  .primary-nav__list{ flex-direction:column; align-items:stretch; gap:.1rem; }
  .nav-item{ border-bottom:1px solid var(--line); }
  .nav-link{ justify-content:space-between; padding:.95rem .6rem; font-size:1.08rem; }
  .nav-item.is-active>.nav-link::after{ display:none; }
  .nav-caret{ display:none; }
  .nav-sub{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0;
    padding:0 0 .6rem .6rem; max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav-item--has-kids.is-expanded .nav-sub{ max-height:340px; }
  .nav-sub-toggle{
    display:block; position:absolute; right:.4rem; top:.7rem; width:38px; height:38px; border:0; background:none; cursor:pointer;
  }
  .nav-sub-toggle::before, .nav-sub-toggle::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .2s; }
  .nav-sub-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); }
  .nav-item--has-kids.is-expanded .nav-sub-toggle::after{ transform:translate(-50%,-50%) rotate(0); }
  .nav-cta{ margin-top:1.2rem; text-align:center; }
  body.nav-open{ overflow:hidden; }
}
@media (max-width:720px){
  .topbar__note{ display:none; }
  .topbar__inner{ justify-content:center; }
  .services{ grid-template-columns:1fr; }
  .split, .split--narrow{ grid-template-columns:1fr; gap:2rem; }
  .posts{ grid-template-columns:1fr; }
  .calc-grid{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .bio-grid{ grid-template-columns:1fr; }
  .proscon{ grid-template-columns:1fr !important; }
  .lender-grid{ grid-template-columns:repeat(2,1fr); }
  .cta-strip__inner{ flex-direction:column; align-items:flex-start; }
  .section{ padding:3.6rem 0; }
}
@media (max-width:420px){
  .calc-grid{ grid-template-columns:1fr; }
  .hero__trust{ gap:1.1rem; }
}

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