:root {
  --navy: #026642;
  --navy-deep: #14261C;
  --blue: #68a53e;
  --sky: #F4F6F4;
  --gold: #f6b93b;
  --text: #4E5652;
  --white: #fff;
  --radius: 18px;
  --shadow: 0 14px 40px rgba(20, 38, 28, .14);
}

* { box-sizing: border-box; }

body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; color: var(--text); background: var(--white); line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
.container { width: min(1140px, 92%); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 10; background: rgba(20,38,28,.94); backdrop-filter: blur(10px); color: var(--white); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; font-weight: 700; }
.brand img { width: 46px; }
.brand strong { font-size: 1.12rem; letter-spacing: .2px; display: block; }
.brand span { font-size: .68rem; color: #c4d8c8; letter-spacing: 1.5px; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 24px; font-size: .94rem; }
.nav a { color: #e5efe8; }
.nav a:hover { color: var(--blue); }
.nav .button { margin-left: 6px; border: 0; background: var(--gold); color: #2a2f07; }
.nav .button:hover { background: #ffcb52; color: #2a2f07; }
.nav-toggle { display: none; border: 0; background: transparent; color: var(--white); font-size: 1.6rem; cursor: pointer; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 24px; border-radius: 999px; background: var(--gold); color: #252d09; font: 700 .96rem/1 inherit; border: 0; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.button:hover { transform: translateY(-2px); }
.button.ghost { background: transparent; border: 2px solid rgba(255,255,255,.5); color: var(--white); }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

footer { background: var(--navy-deep); color: #d3e2d6; padding: 62px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; margin-bottom: 48px; }
footer h3 { color: var(--white); font-size: 1rem; margin: 0 0 16px; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li + li { margin-top: 10px; }
footer a { color: #d3e2d6; }
footer a:hover { color: var(--gold); }
.contact-list li { display: flex; gap: 10px; }
.legal { border-top: 1px solid rgba(255,255,255,.13); padding-top: 22px; font-size: .78rem; color: #a9b8ad; }

@media (max-width: 920px) {
  .nav { position: fixed; inset: 74px 0 auto; flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 6vw 22px; background: var(--navy-deep); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav .button { margin: 18px 0 0; }
  .nav-toggle { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Hero card that hosts the multi-step lead form (homepage and the loan-program
   pages). Padding is removed because the form supplies its own inner spacing,
   and the border/shadow are paired with the runtime field markup below. */
.pre-approval-card { padding: 0; overflow: hidden; border: 0; box-shadow: 0 30px 70px rgba(8,18,13,.42); }

/* Pre-approval form (used on the homepage, /apply, and the loan-program pages).
   Field markup is created at runtime by /assets/js/apply-form.js, so these
   rules must live in this unscoped stylesheet rather than a page <style> block
   (Astro scopes those with data-astro-cid attributes the runtime nodes lack). */
#pre-approval .form-top { padding: 24px clamp(22px, 4vw, 38px); background: var(--sky); border-bottom: 1px solid #e2ecf3; }
#pre-approval .progress-label { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; font-weight: 700; color: var(--navy); }
#pre-approval .progress { width: 100%; height: 8px; margin-top: 10px; border-radius: 999px; background: #d9e5dd; overflow: hidden; }
#pre-approval .progress-bar { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--navy), var(--blue)); transition: width .25s ease; }
#pre-approval form { padding: clamp(26px, 4vw, 38px); }
#pre-approval fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#pre-approval fieldset:not(.active) { display: none; }
#pre-approval legend { padding: 0; font: 800 clamp(1.25rem, 2vw, 1.6rem)/1.2 inherit; color: var(--navy); }
#pre-approval .step-copy { margin: 9px 0 24px; }
#pre-approval .field { display: grid; gap: 7px; margin-bottom: 18px; }
#pre-approval .field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
#pre-approval .state-field { position: relative; }
#pre-approval .state-options { position: absolute; z-index: 2; inset: calc(100% + 4px) 0 auto; max-height: 220px; padding: 6px; margin: 0; overflow: auto; list-style: none; background: var(--white); border: 1px solid #d2dbd4; border-radius: 10px; box-shadow: var(--shadow); }
#pre-approval .state-options li { margin: 0; }
#pre-approval .state-options button { width: 100%; min-height: 38px; padding: 8px 10px; border-radius: 6px; background: transparent; color: var(--navy-deep); font: 700 .9rem/1.2 inherit; text-align: left; }
#pre-approval .state-options button:hover { background: var(--sky); }
#pre-approval .state-options button[aria-selected="true"] { background: #f6faf7; color: var(--navy); }
#pre-approval .state-options[hidden] { display: none; }
#pre-approval .field label { font-size: .82rem; font-weight: 700; color: var(--navy-deep); }
#pre-approval .field input.invalid, #pre-approval .field textarea.invalid { border-color: #a12626; }
#pre-approval .field-error { margin: 0; color: #a12626; font-size: .82rem; font-weight: 700; }
#pre-approval .consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; font-weight: 700; color: var(--navy-deep); }
#pre-approval input, #pre-approval select { width: 100%; min-height: 50px; border: 1px solid #d2dbd4; border-radius: 10px; padding: 12px 14px; font: inherit; color: var(--navy-deep); background: #fcfefc; }
#pre-approval .consent-label input { width: auto; min-height: 0; margin: 3px 0 0; border: 0; padding: 0; background: transparent; }
#pre-approval input:focus, #pre-approval select:focus { outline: 3px solid rgba(104,165,62,.25); border-color: var(--blue); }
#pre-approval .choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
#pre-approval .choice-grid-stacked { grid-template-columns: 1fr; }
#pre-approval .choice { position: relative; display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 12px; border: 2px solid #d8e3da; border-radius: 14px; background: var(--white); color: var(--navy-deep); font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
#pre-approval .choice:hover { transform: translateY(-2px); }
#pre-approval .choice:has(input:checked) { border-color: var(--navy); background: #f6faf7; color: var(--navy); }
#pre-approval .choice input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
#pre-approval .form-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
#pre-approval button { min-height: 48px; padding: 11px 22px; border: 0; border-radius: 999px; background: var(--navy); color: var(--white); font: 700 .95rem/1 inherit; cursor: pointer; }
#pre-approval button:hover { background: #014d33; }
#pre-approval button.secondary { border: 2px solid #ccd8cf; background: transparent; color: var(--navy); }
#pre-approval button.secondary:hover { background: var(--sky); }
#pre-approval .form-status { min-height: 1.4em; margin: 0 0 14px; color: #a12626; font-size: .9rem; font-weight: 700; }
#pre-approval .success { text-align: center; }
#pre-approval .success .icon { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: #f2f8f2; color: var(--navy); font-size: 1.8rem; }
#pre-approval .success h2 { color: var(--navy); margin-bottom: 8px; }

@media (max-width: 920px) {
  #pre-approval .choice-grid { grid-template-columns: 1fr; }
  #pre-approval .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  #pre-approval .form-actions { flex-direction: column-reverse; }
  #pre-approval button { width: 100%; }
}

/* ==========================================================================
   Shared page components
   Presentation layer for interior pages (loan programs, team profiles,
   apply). Mirrors the homepage design language so every page shares the same
   hero, section rhythm, cards, and CTA treatment. Page-specific rules should
   live in a scoped <style slot="head"> block; anything reusable belongs here.
   ========================================================================== */

section { padding: clamp(68px, 8vw, 104px) 0; }

.eyebrow { color: var(--blue); font: 700 .76rem/1.4 inherit; letter-spacing: 2.4px; text-transform: uppercase; margin: 0; }

h2.section-title { color: var(--navy-deep); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.16; letter-spacing: -.01em; margin: 12px 0 16px; }

.section-head { max-width: 720px; margin: 0 auto clamp(44px, 6vw, 64px); text-align: center; }
.section-head p:last-child { max-width: 620px; margin: 0 auto; font-size: 1.06rem; line-height: 1.7; }

.section-inverse { background: radial-gradient(130% 130% at 12% 0%, #1e3d2c 0%, var(--navy-deep) 58%, #0f1f18 100%); color: #cdddd2; }
.section-inverse .eyebrow { color: var(--gold); }
.section-inverse h2, .section-inverse h2.section-title { color: var(--white); }
.section-inverse p { color: #cdddd2; }

/* Hero -------------------------------------------------------------------- */
.hero { position: relative; display: grid; align-items: center; min-height: clamp(600px, 78vh, 760px); padding: clamp(72px, 8vw, 104px) 0; background: radial-gradient(90% 120% at 88% 12%, rgba(246,185,59,.16), transparent 55%), linear-gradient(115deg, rgba(9,19,14,.97) 0%, rgba(15,30,23,.88) 46%, rgba(2,102,66,.5) 100%), var(--hero-image, linear-gradient(135deg, #14261C 0%, #026642 100%)) center/cover; color: var(--white); }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(34px, 5vw, 62px); align-items: center; }
.hero .eyebrow { color: var(--gold); }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.3rem); line-height: 1.05; letter-spacing: -.02em; margin: 14px 0 20px; color: var(--white); }
.hero .lede { color: #dbe8df; max-width: 540px; margin: 0; font-size: 1.08rem; line-height: 1.7; }
.hero .button { background: var(--gold); border-color: var(--gold); color: #2a2f07; }
.hero .button:hover { background: #ffcb52; border-color: #ffcb52; color: #2a2f07; transform: translateY(-2px); }
.hero .trust-row { margin-top: 30px; }
.hero .card { margin-top: 6px; }

/* Split hero (homepage + investor loans): brand gradient with copy on the left
   and a contextual image card on the right. The photo sits beside the text
   rather than behind it so it stays clear and the copy stays legible. */
.hero-split { position: relative; overflow: hidden; min-height: auto; padding: clamp(64px, 7vw, 104px) 0 clamp(72px, 8vw, 116px); background: radial-gradient(80% 120% at 92% 0%, rgba(246,185,59,.18), transparent 58%), linear-gradient(150deg, #0b1a12 0%, var(--navy-deep) 52%, #0d3323 100%); color: var(--white); }
.hero-split::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 8% 100%, rgba(2,102,66,.5), transparent 60%); pointer-events: none; }
.hero-split-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(40px, 5vw, 76px); align-items: center; }
.hero-copy { max-width: 620px; }
.hero-split .eyebrow { color: var(--gold); }
.hero-split h1 { color: var(--white); font-size: clamp(2.5rem, 5vw, 4.1rem); line-height: 1.04; letter-spacing: -.02em; margin: 16px 0 22px; }
.hero-split .lede { color: #cfdfd4; max-width: 560px; margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.7; }
.hero-split .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-split .button { border: 2px solid rgba(255,255,255,.4); background: rgba(255,255,255,.04); color: var(--white); backdrop-filter: blur(6px); }
.hero-split .button-primary { background: var(--gold); border-color: var(--gold); color: #2a2f07; box-shadow: 0 12px 30px rgba(246,185,59,.28); }
.hero-split .button:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); color: var(--white); transform: translateY(-2px); }
.hero-split .button-primary:hover { background: #ffcb52; border-color: #ffcb52; color: #2a2f07; }
.hero-split .trust-row { margin: 30px 0 0; gap: 10px 26px; font-size: .9rem; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: clamp(360px, 46vw, 500px); object-fit: cover; border-radius: calc(var(--radius) + 8px); box-shadow: 0 40px 80px rgba(4,12,8,.5); border: 1px solid rgba(255,255,255,.12); }
.hero-badge { position: absolute; left: clamp(-6px, -1vw, 0px); bottom: 26px; display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: rgba(255,255,255,.97); border-radius: 16px; box-shadow: 0 20px 44px rgba(4,12,8,.35); }
.hero-badge strong { color: var(--gold); font-size: .92rem; letter-spacing: 2px; line-height: 1; }
.hero-badge .hero-badge-value { font-size: 1.5rem; letter-spacing: -.01em; }
.hero-badge span { color: var(--navy-deep); font-weight: 700; font-size: .92rem; }
@media (max-width: 1020px) {
  .hero-split-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy { max-width: 640px; }
  .hero-visual img { height: clamp(300px, 52vw, 420px); }
  .hero-badge { left: 18px; }
}

.trust-row { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 28px 0 34px; color: #dbe8df; font-weight: 600; }
.trust-row span::before { content: "✓"; color: var(--gold); margin-right: 8px; font-weight: 900; }
.hero .trust-row + .button { margin-top: 4px; }

/* Cards ------------------------------------------------------------------- */
.card { background: var(--white); color: var(--text); border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); box-shadow: 0 30px 70px rgba(8,18,13,.42); padding: 30px; }
.card h2 { color: var(--navy-deep); margin-top: 0; font-size: 1.35rem; }
.card .sub { margin-top: -8px; font-size: .94rem; }

/* Inline lead form (hero cards) ------------------------------------------- */
.form { display: grid; gap: 16px; margin-top: 22px; }
.field label { display: block; font-size: .82rem; font-weight: 700; color: var(--navy-deep); margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; border: 1px solid #d2dbd4; border-radius: 10px; padding: 12px 14px; font: inherit; color: var(--navy-deep); background: #fcfefc; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(104,165,62,.25); border-color: var(--blue); }
.field-note { font-size: .78rem; color: #687a88; margin-top: -5px; }
.form button { width: 100%; min-height: 48px; margin-top: 4px; border-radius: 999px; background: var(--gold); color: #2a2f07; font: 700 .96rem/1 inherit; border: 0; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.form button:hover { transform: translateY(-2px); background: #ffcb52; }
.form small { color: #70818f; }

/* About / overview split -------------------------------------------------- */
.about { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(36px, 6vw, 60px); align-items: center; }
.about-copy p { margin-top: 0; }
.check-list { list-style: none; padding: 0; margin: 20px 0 0; }
.check-list li { padding-left: 34px; position: relative; margin-bottom: 14px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 23px; height: 23px; border-radius: 50%; background: var(--sky); color: var(--navy); font: 900 .75rem/23px system-ui; text-align: center; }

.image-stack { position: relative; min-height: 480px; }
.image-stack img { width: 100%; height: 480px; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 56px rgba(20,38,28,.16); }
.floating-card { position: absolute; left: -35px; bottom: 36px; background: var(--white); padding: 22px 25px; border-radius: 15px; box-shadow: 0 24px 56px rgba(8,18,13,.28); border-left: 5px solid var(--gold); }
.floating-card strong { color: var(--navy); font-size: 1.5rem; display: block; }

/* Feature / benefit cards ------------------------------------------------- */
.benefits, .programs { background: linear-gradient(180deg, var(--sky), #fff); }
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.benefit { padding: 34px 32px; border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); background: var(--white); box-shadow: 0 8px 24px rgba(20,38,28,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.benefit:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(2,102,66,.2); }
.benefit .icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(140deg, rgba(104,165,62,.18), rgba(2,102,66,.12)); color: var(--navy); font-size: 1.45rem; margin-bottom: 20px; }
.benefit h3 { color: var(--navy-deep); margin: 0 0 9px; font-size: 1.15rem; }
.benefit p { margin: 0; }

/* Numbered steps ---------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.step { padding: 34px 32px; border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); background: var(--white); box-shadow: 0 8px 24px rgba(20,38,28,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(2,102,66,.2); }
.step-number { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(140deg, var(--blue), var(--navy)); color: var(--white); font-weight: 800; margin-bottom: 20px; box-shadow: 0 8px 18px rgba(2,102,66,.28); }
.step h3 { color: var(--navy-deep); margin: 0 0 10px; font-size: 1.15rem; }
.step p { margin: 0; }

/* Alternating image + copy rows (homepage "How It Works", FTHB programs) --- */
.process { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 5vw, 56px); }
.process-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 56px); align-items: center; }
.process-row.flip .process-media { order: 2; }
.process-media img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); box-shadow: 0 18px 46px rgba(20,38,28,.12); object-fit: cover; }
.process-text { padding: 0; }
.process-title { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--navy-deep); font-size: clamp(1.2rem, 2vw, 1.5rem); }
.process-number { flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(140deg, var(--blue), var(--navy)); color: var(--white); font: 800 1rem/40px system-ui; text-align: center; box-shadow: 0 8px 18px rgba(2,102,66,.28); }
.process-tag { display: inline-block; margin-bottom: 12px; padding: 6px 14px; border-radius: 999px; background: rgba(104,165,62,.12); color: #3f671f; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.process-text p { margin: 16px 0 22px; max-width: 480px; }
.process-link { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 24px; border: 2px solid var(--navy); border-radius: 999px; color: var(--navy); font-weight: 700; transition: background .15s ease, color .15s ease, transform .15s ease; }
.process-link:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
.program-notice { max-width: 620px; margin: 44px auto 0; color: #606f7c; font-size: .88rem; line-height: 1.5; text-align: center; }

/* Consideration cards ----------------------------------------------------- */
.consider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 34px; }
.consider { padding: 30px 28px; border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); background: var(--white); box-shadow: 0 8px 24px rgba(20,38,28,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.consider:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(2,102,66,.2); }
.consider h3 { color: var(--navy-deep); margin: 0 0 9px; font-size: 1.1rem; }
.consider p { margin: 0 0 10px; }
.consider p:last-child { margin-bottom: 0; }

/* States we lend in ------------------------------------------------------- */
.states { padding-bottom: clamp(90px, 12vw, 150px); }
.state-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.state-list li { padding: 10px 17px; border-radius: 999px; background: var(--sky); border: 1px solid #d4e6dc; color: var(--navy-deep); font-weight: 700; }
.state-note { margin: 28px auto 0; max-width: 720px; text-align: center; color: var(--navy-deep); }

/* Rates ------------------------------------------------------------------- */
.rates { padding-top: 0; }
.rates-frame { width: 100%; min-height: 560px; border: 1px solid #dde7de; border-radius: var(--radius); background: var(--white); box-shadow: 0 18px 46px rgba(20,38,28,.1); }

/* CTA band ---------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 100%); color: var(--white); border-radius: calc(var(--radius) + 6px); box-shadow: 0 30px 70px rgba(8,18,13,.28); padding: clamp(38px, 5vw, 62px); display: flex; gap: 30px; align-items: center; justify-content: space-between; }
.cta-band::before { content: ""; position: absolute; top: -45%; right: -8%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(246,185,59,.22), transparent 65%); pointer-events: none; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-band p { margin: 0; color: #cdddd2; }
.cta-band .button { background: var(--gold); border-color: var(--gold); color: #2a2f07; }
.cta-band .button:hover { background: #ffcb52; border-color: #ffcb52; color: #2a2f07; transform: translateY(-2px); }

.cta-section { padding-top: 0; }

/* Apply page shell -------------------------------------------------------- */
.form-shell { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(32px, 5vw, 64px); }
.sidebar h2 { color: var(--navy-deep); font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 14px; }
.sidebar p { margin-top: 0; }
.promise-list { list-style: none; margin: 0; padding: 0; }
.promise-list li { margin-bottom: 14px; padding-left: 34px; position: relative; }
.promise-list li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 23px; height: 23px; border-radius: 50%; background: var(--sky); color: var(--navy); font: 900 .75rem/23px system-ui; text-align: center; }
.form-panel { background: var(--white); border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(20,38,28,.18); overflow: hidden; }

/* Standalone inquiry form embedded in a page section (investor loans). */
.form-embed { padding-top: clamp(40px, 5vw, 64px); }
.form-embed .form-panel { max-width: 780px; margin-inline: auto; }

/* Team profile ------------------------------------------------------------ */
.profile-section { background: linear-gradient(180deg, var(--sky), #fff); }
.profile { position: relative; display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(36px, 6vw, 70px); align-items: center; }
.profile::before { content: ""; position: absolute; inset: auto 0 0 auto; width: min(420px, 70%); height: 120px; border-radius: 20px; background: linear-gradient(90deg, rgba(104,165,62,.18), rgba(104,165,62,0)); transform: translateY(20px); }
.profile-photo { width: 100%; max-width: 420px; aspect-ratio: 1; object-fit: cover; border-radius: 28px 28px 28px 8px; box-shadow: 0 24px 56px rgba(20,38,28,.16); border: 6px solid var(--white); }
/* The profile bio is a plain text column, not the two-column "about" split. */
.profile .about { display: block; }
.profile h1 { color: var(--navy-deep); font-size: clamp(2.2rem, 4.5vw, 3.5rem); line-height: 1.1; margin: 0 0 12px; }
.profile .role, .profile .eyebrow { color: var(--blue); }

.rates-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(340px, 1fr); gap: clamp(32px, 5vw, 58px); align-items: center; }
.rates-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(26px, 4vw, 42px); background: var(--white); border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); box-shadow: 0 18px 46px rgba(20,38,28,.1); }
.rates-copy h2.section-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 8px 0 14px; text-align: left; }
.rates-copy p { margin: 0; }

.non-qm { background: linear-gradient(180deg, var(--sky), #fff); }
.non-qm-head { max-width: 780px; margin: 0 auto 42px; text-align: center; }
.non-qm-head p:not(.eyebrow) { color: var(--navy-deep); }
.non-qm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; align-items: stretch; }
.program-stat-card { display: flex; flex-direction: column; position: relative; overflow: hidden; padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(20,38,28,.08); border-top: 5px solid var(--gold); border-radius: var(--radius); background: var(--white); box-shadow: 0 8px 24px rgba(20,38,28,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.program-stat-card::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%; background: rgba(104,165,62,.09); pointer-events: none; }
.program-stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(2,102,66,.2); }
.program-stat-card h3 { color: var(--navy-deep); font-size: 1.15rem; line-height: 1.3; margin: 0 0 18px; }
.program-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.program-stat { padding: 12px 10px; border-radius: 12px; text-align: center; background: var(--sky); border: 1px solid rgba(20,38,28,.06); }
.program-stat.positive { background: #e8f4ed; }
.program-stat span { display: block; color: #606f7c; font-size: .72rem; font-weight: 700; }
.program-stat strong { display: block; color: var(--navy); font-size: 1.15rem; }
.program-stat-card p { margin: 0 0 16px; font-size: .9rem; line-height: 1.55; }
.program-stat-card ul { list-style: none; padding: 0; margin: 0; }
.program-stat-card li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: .86rem; line-height: 1.4; }
.program-stat-card li::before { content: "✓"; position: absolute; left: 0; color: var(--navy); font-weight: 900; }

/* FAQ accordion ----------------------------------------------------------- */
.faq { background: linear-gradient(180deg, #fff, var(--sky)); }
.faq-list { max-width: 900px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); background: var(--white); box-shadow: 0 10px 30px rgba(20,38,28,.07); overflow: hidden; }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border: 0; background: var(--white); color: var(--navy-deep); font: 700 1.03rem/1.35 inherit; text-align: left; cursor: pointer; }
.faq-question::after { content: "+"; flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--sky); color: var(--navy); font-size: 1.15rem; font-weight: 800; transition: transform .2s ease; }
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; padding: 0 26px; }
.faq-item.open .faq-answer-inner { padding-bottom: 24px; }
.faq-answer p { margin: 0; color: var(--text); line-height: 1.6; }

/* Social proof ------------------------------------------------------------ */
.social-proof { padding-top: 0; padding-bottom: clamp(48px, 6vw, 80px); }
.social-proof-inner { max-width: 1100px; margin: 0 auto; }
.social-proof-head { margin-bottom: 24px; }
.social-proof-head h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy-deep); }
.social-proof-head p { margin: 0; color: var(--text); line-height: 1.6; }
.social-proof-frame { width: 100%; height: 580px; border: 0; background: var(--white); }
#ss-custom-reviews-widget-root { width: 100%; max-height: 520px; overflow-y: auto; }
#ss-custom-reviews-widget-root [data-test-testimonial] { max-width: none !important; }
.social-proof-link { display: inline-block; margin-top: 18px; color: var(--navy); font-weight: 700; text-decoration: underline; }

/* Team index -------------------------------------------------------------- */
/* Roster of every loan originator. Distinct from the homepage ".team" cards
   (home.css) and the individual ".profile" page, which keep their own rules. */
.team-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.team-fact { padding: 26px 22px; text-align: center; background: var(--white); border: 1px solid rgba(20,38,28,.08); border-top: 4px solid var(--gold); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20,38,28,.06); }
.team-fact strong { display: block; color: var(--navy); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; }
.team-fact span { display: block; margin-top: 6px; font-size: .86rem; color: var(--text); }

.team-roster-section { background: linear-gradient(180deg, var(--sky), #fff); }
.team-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; align-items: stretch; }
.member-card { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; color: inherit; text-decoration: none; background: var(--white); border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20,38,28,.06); padding: 34px 28px 30px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.member-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(2,102,66,.2); }
.member-card:focus-visible { outline: 3px solid rgba(104,165,62,.5); outline-offset: 3px; }
/* The source headshots are circular cutouts, so the roster uses round avatars
   rather than rectangular crops. */
.member-photo { width: 112px; height: 112px; margin: 0 auto 20px; border: 4px solid var(--sky); box-shadow: 0 0 0 1px rgba(20,38,28,.08); border-radius: 50%; object-fit: cover; background: var(--sky); }
.member-body { display: flex; flex-direction: column; align-items: center; flex: 1; width: 100%; }
.member-body h3 { margin: 0 0 4px; color: var(--navy-deep); font-size: 1.25rem; }
.member-role { margin: 0 0 4px; color: var(--blue); font-weight: 700; font-size: .86rem; letter-spacing: .4px; text-transform: uppercase; }
.member-credentials { margin: 0; color: #687a88; font-size: .82rem; font-weight: 600; }
/* The whole card is the link, so the cue is a quiet text-style affordance at
   the bottom rather than a button. */
.member-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 22px; color: var(--navy); font-weight: 700; font-size: .92rem; }
.member-card:hover .member-link { color: var(--navy-deep); text-decoration: underline; text-underline-offset: 3px; }
.member-link-arrow { transition: transform .18s ease; }
.member-card:hover .member-link-arrow { transform: translateX(3px); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { min-height: auto; }
  .hero .lede, .hero .trust-row { max-width: 620px; }
  .non-qm-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .form-shell { grid-template-columns: 1fr; }
  .team-roster { grid-template-columns: repeat(2, 1fr); }
  .form-panel { order: -1; }
  .about, .profile, .rates-grid { grid-template-columns: 1fr; }
  .image-stack { min-height: auto; }
  .floating-card { left: 20px; }
  .cta-band { align-items: flex-start; flex-direction: column; }
  .profile-photo { max-width: 360px; margin: 0 auto; }
  .profile .about { text-align: center; }
  .rates-grid .rates-frame { min-height: 480px; }
}
@media (max-width: 860px) {
  .process-row { grid-template-columns: 1fr; gap: 26px; }
  .process-row.flip .process-media { order: 0; }
}
@media (max-width: 640px) {
  .hero { padding: 56px 0; }
  .team-roster { grid-template-columns: 1fr; }
  .team-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .team-fact { padding: 20px 16px; }
  .card { padding: 24px; }
  .floating-card { position: static; margin-top: 18px; left: auto; }
  .image-stack img { height: 320px; }
  .non-qm-grid { grid-template-columns: 1fr; }
  .program-stat-card { padding: 24px; }
  .program-stats { gap: 8px; }
  .program-stat { padding: 10px 8px; }
  .program-stat strong { font-size: 1.05rem; }
  .faq-item { border-radius: 18px; }
  .faq-question { padding: 18px 20px; font-size: .97rem; }
  .faq-answer-inner { padding: 0 20px; }
  .faq-item.open .faq-answer-inner { padding-bottom: 20px; }
}

/* Blog -------------------------------------------------------------------- */
/* Index hero reuses the dark inverse treatment with tighter bottom padding. */
.blog-hero { padding-bottom: clamp(48px, 6vw, 72px); }
.blog-hero h1.section-title { color: var(--white); font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.12; letter-spacing: -.02em; margin: 12px 0 14px; }
.blog-hero p:last-child { color: #cdddd2; margin: 0 auto; max-width: 620px; }

.blog-featured { padding-bottom: clamp(40px, 5vw, 60px); }
.blog-index { padding-top: 0; }
.blog-hero + .blog-index { padding-top: clamp(68px, 8vw, 104px); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }

.post-card { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20,38,28,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(2,102,66,.2); }
.post-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sky); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card-media img { transform: scale(1.04); }
.post-card-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(140deg, rgba(104,165,62,.18), rgba(2,102,66,.14)); }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.post-card-tags { margin: 0 0 8px; color: var(--blue); font: 700 .72rem/1.4 inherit; letter-spacing: 1.6px; text-transform: uppercase; }
.post-card h3 { margin: 0 0 10px; font-size: 1.22rem; line-height: 1.3; }
.post-card h3 a { color: var(--navy-deep); }
.post-card h3 a:hover { color: var(--navy); }
.post-card-excerpt { margin: 0 0 18px; font-size: .93rem; line-height: 1.6; }
.post-card-meta { margin: auto 0 0; color: #687a88; font-size: .82rem; font-weight: 600; }

/* The featured post lays out as image + copy side by side on wide screens. */
.post-card-featured { display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; }
.post-card-featured .post-card-media { aspect-ratio: auto; height: 100%; min-height: 340px; }
.post-card-featured .post-card-body { justify-content: center; padding: clamp(30px, 4vw, 48px); }
.post-card-featured h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.post-card-featured .post-card-excerpt { font-size: 1rem; }

/* Pagination -------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(36px, 5vw, 56px); }
.pager-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pager { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 16px; border: 1px solid rgba(20,38,28,.14); border-radius: 999px; background: var(--white); color: var(--navy-deep); font-weight: 700; font-size: .95rem; line-height: 1; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
a.pager:hover { background: var(--sky); border-color: rgba(2,102,66,.3); color: var(--navy); transform: translateY(-2px); }
.pager-current { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 16px; border: 1px solid var(--navy); border-radius: 999px; background: var(--navy); color: var(--white); font-weight: 700; font-size: .95rem; line-height: 1; }
.pager-edge { padding: 0 20px; }
.pager-edge.is-disabled { opacity: .45; pointer-events: none; }
.pager-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; color: #687a88; font-weight: 700; }

/* Single post ------------------------------------------------------------- */
.post-hero { padding-bottom: clamp(40px, 5vw, 60px); }
.post-hero-inner { max-width: 800px; }
.post-hero .eyebrow { color: var(--gold); }
.post-hero h1 { color: var(--white); font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; margin: 12px 0 16px; }
.post-back { display: inline-block; margin-bottom: 22px; color: #cdddd2; font-size: .88rem; font-weight: 700; }
.post-back:hover { color: var(--gold); }
.post-meta { margin: 0; color: #cdddd2; font-weight: 600; }

.post-cover { margin-top: clamp(-60px, -5vw, -40px); position: relative; z-index: 1; }
.post-cover img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 70px rgba(8,18,13,.28); }

.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(36px, 6vw, 64px); align-items: start; padding-top: clamp(48px, 6vw, 72px); }
.post-body { max-width: 720px; }
.post-body h2 { color: var(--navy-deep); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; margin: 40px 0 14px; }
.post-body h3 { color: var(--navy-deep); font-size: 1.2rem; margin: 32px 0 12px; }
.post-body p { margin: 0 0 18px; line-height: 1.75; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 24px; }
.post-body li { margin-bottom: 10px; line-height: 1.65; }
.post-body ul li::marker { color: var(--blue); }
.post-body blockquote { margin: 28px 0; padding: 20px 26px; border-left: 5px solid var(--gold); background: var(--sky); border-radius: 0 var(--radius) var(--radius) 0; }
.post-body blockquote p { margin: 0; color: var(--navy-deep); font-size: 1.1rem; font-style: italic; }

.post-author { position: sticky; top: 100px; padding: 28px; text-align: center; background: var(--white); border: 1px solid rgba(20,38,28,.08); border-radius: var(--radius); box-shadow: 0 18px 46px rgba(20,38,28,.1); }
.post-author img { width: 96px; height: 96px; margin: 0 auto 16px; border: 4px solid var(--sky); border-radius: 50%; object-fit: cover; }
.post-author h2 { margin: 4px 0 4px; color: var(--navy-deep); font-size: 1.2rem; }
.post-author-role { margin: 0 0 18px; font-size: .88rem; }
.post-author .button { width: 100%; }
.post-author-link { display: inline-block; margin-top: 14px; font-size: .86rem; font-weight: 700; }

@media (max-width: 920px) {
  .post-card-featured { grid-template-columns: 1fr; }
  .post-card-featured .post-card-media { min-height: 0; aspect-ratio: 16 / 9; }
  .post-layout { grid-template-columns: 1fr; padding-top: 40px; }
  .post-author { position: static; }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post-cover { margin-top: 0; }
  .post-card-body { padding: 22px; }
  .pagination { gap: 8px; }
  .pager, .pager-current { min-width: 40px; height: 40px; padding: 0 12px; }
  .pager-edge { padding: 0 14px; }
}