/* /borrowers/loan-programs/ — page-scoped CSS. Loaded AFTER borrowers.css, which supplies the
   shared borrower furniture this page reuses unchanged: the Success Story rail (.bw-rail,
   .story, .ssb), the Navy close (.bw-cl), the entrance classes (.bw-rv) and .bw-link.

   Everything here is this page's own composition. No sticky rail, no diligence field, no
   two-route comparison — those are Fund patterns and do not belong on a borrower page. */

/* ---- frame: sticky contents rail in columns 1–2, body in 3–12 (the interior-page standard) ---- */
.lp-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 40px;align-items:start}
.lp-body{grid-column:3 / span 10;min-width:0}
.lp-colw{position:relative}
/* Sections paint their grounds with a full-bleed pseudo-element because they only span the body
   column; isolation is load-bearing and the inset is a large fixed value, never -50vw. */
.lp-g .sec{background:none}
.lp-sec{position:relative;isolation:isolate;padding:84px 0}
.lp-sec::before{content:"";position:absolute;top:0;bottom:0;left:-1600px;right:-1600px;z-index:-1}
.lp-sec.white::before{background:#fff}
.lp-sec.paper::before{background:var(--brand-paper)}
.lp-sec.navy::before{background:var(--brand-navy)}
.lp-rail{grid-column:1 / span 2;align-self:stretch;position:relative;z-index:2}
.lp-rail__in{position:sticky;top:104px;padding:84px 0 40px}
.lp-rail__t{font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin:0 0 14px;transition:color 150ms cubic-bezier(.2,.6,.2,1)}
.lp-rail__l{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);transition:border-color 150ms cubic-bezier(.2,.6,.2,1)}
.lp-rail__l a{display:block;padding:9px 0 9px 16px;margin-left:-1px;border-left:2px solid transparent;font-family:var(--font-sans);font-size:13px;line-height:1.35;color:var(--text-muted);text-decoration:none;transition:color 150ms cubic-bezier(.2,.6,.2,1),border-color 150ms cubic-bezier(.2,.6,.2,1)}
.lp-rail__l a:hover{color:var(--brand-navy)}
.lp-rail__l a.is-at{color:var(--brand-navy);border-left-color:var(--brand-accent);font-weight:600}
.lp-rail.is-inv .lp-rail__t{color:var(--sky-300)}
.lp-rail.is-inv .lp-rail__l{border-left-color:rgba(145,195,235,.32)}
.lp-rail.is-inv .lp-rail__l a{color:var(--sky-300)}
.lp-rail.is-inv .lp-rail__l a:hover{color:var(--text-inverse)}
.lp-rail.is-inv .lp-rail__l a.is-at{color:var(--text-inverse);border-left-color:var(--brand-accent)}
@media (prefers-reduced-motion:reduce){.lp-rail__t,.lp-rail__l,.lp-rail__l a{transition:none}}

/* ---- proof rail inside the body column: two full cards and a 48px peek of the third, so the
   next story reads as a cue. Controls stay (borrowers-motion.js injects prev/next). ---- */
.lp-prf .bw-rail__c{--bw-w:calc((100% - 16px - 48px) / 2)}

/* ---- shared type ---- */
.lp-h1{font-size:52px;line-height:1.05;letter-spacing:-.03em;color:var(--brand-navy);max-width:15ch;margin-top:14px}
.lp-h2{font-size:38px;line-height:1.08;letter-spacing:-.024em;color:var(--brand-navy);max-width:20ch;margin:0}
.lp-sf{font-family:var(--font-sans);font-size:17px;line-height:1.62;color:var(--text-secondary);margin:16px 0 0;max-width:62ch}
.lp-head{max-width:none;margin-bottom:52px}

/* ---- 1 hero: compact, copy left, one contained photograph right ---- */
.lp-hero{background:var(--brand-paper);padding:76px 0 84px}
.lp-hero__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 40px;align-items:center}
.lp-hero__copy{grid-column:1 / span 6}
.lp-hero__l{margin-top:22px;font-family:var(--font-sans);font-size:19px;line-height:1.58;color:var(--text-secondary);max-width:44ch}
.lp-hero__a{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.lp-tel{font-family:var(--font-sans);font-size:15px;color:var(--sky-800);text-decoration:none;border-bottom:1px solid rgba(46,127,184,.35);padding-bottom:2px}
.lp-tel:hover{color:var(--sun-700)}
.lp-hero__ph{grid-column:8 / span 5;margin:0;position:relative;isolation:isolate}
/* Interior-hero standard: one quiet pale-Sky panel offset down-left behind the photograph —
   depth without ornament, sized off the figure so any replacement photograph inherits it. */
.lp-hero__ph::before{content:"";position:absolute;inset:26px 44px -26px -26px;background:rgba(145,195,235,.30);border-radius:6px;z-index:-1}
.lp-hero__ph img{display:block;width:100%;aspect-ratio:3 / 2;object-fit:cover;border-radius:6px}
.lp-hero__dev{grid-column:1 / -1;margin-top:24px}

/* ---- 2 the situation chooser: six cards, each a jump to the structure that answers it ---- */
.lp-sit__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-top:2px solid var(--brand-navy);border-bottom:1px solid var(--line)}
.lp-sit__c{display:flex;flex-direction:column;background:#fff;padding:24px 22px 22px;text-decoration:none;transition:background 160ms cubic-bezier(.2,.6,.2,1)}
.lp-sit__c:hover{background:var(--brand-paper)}
.lp-sit__n{font-family:var(--font-display);font-size:14px;color:var(--brand-accent)}
.lp-sit__t{font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.16;letter-spacing:-.016em;color:var(--brand-navy);margin:10px 0 0;max-width:15ch}
.lp-sit__d{font-family:var(--font-sans);font-size:15px;line-height:1.62;color:var(--text-secondary);margin:12px 0 22px;flex:1 1 auto}
.lp-sit__go{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;align-self:flex-start;max-width:100%;font-family:var(--font-sans);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-800)}
.lp-sit__go span{flex:0 0 auto}
/* 4-column widths (container >1180): the CTA scales with the container so the longest label
   ("Underwritten on the property →") fits the narrowest 4-col card; clamped at 11.5px. */
@container page (min-width:1181px){.lp-sit__c{padding-left:18px;padding-right:18px}.lp-sit__go{font-size:clamp(9px,.78cqw,11.5px);letter-spacing:.03em}}
@container page (min-width:1440px){.lp-sit__go{letter-spacing:.05em}}
.lp-sit__c:hover .lp-sit__go{color:var(--sun-700)}
@media (prefers-reduced-motion:reduce){.lp-sit__c{transition:none}}

/* ---- 3 why private financing: Navy, three large rows ---- */
.lp-why__h{font-size:42px;line-height:1.07;letter-spacing:-.026em;color:var(--text-inverse);margin:14px 0 0;max-width:20ch}
.lp-why__l{list-style:none;margin:52px 0 0;padding:0;border-top:1px solid rgba(145,195,235,.3)}
.lp-why__r{display:grid;grid-template-columns:auto minmax(0,3fr) minmax(0,8fr);gap:0 40px;padding:26px 0;border-bottom:1px solid rgba(145,195,235,.2);align-items:baseline}
.lp-why__n{font-family:var(--font-display);font-size:19px;color:var(--brand-accent);width:44px}
.lp-why__t{font-size:27px;line-height:1.14;letter-spacing:-.018em;color:var(--text-inverse);margin:0}
.lp-why__d{font-family:var(--font-sans);font-size:16px;line-height:1.64;color:rgba(198,222,243,.86);margin:0;max-width:64ch}

/* ---- 4 the structures: hairline rows, each opening with the situation it answers ---- */
.lp-str__l{margin:0;border-top:2px solid var(--brand-navy)}
.lp-str__r{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:12px 56px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start;scroll-margin-top:124px}
.lp-str__k{min-width:0}
.lp-str__n{display:block;font-family:var(--font-display);font-weight:500;font-size:25px;line-height:1.16;letter-spacing:-.016em;color:var(--brand-navy)}
.lp-str__when{display:block;font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--sky-800);margin-top:8px;max-width:30ch}
.lp-str__d{font-family:var(--font-sans);font-size:16px;line-height:1.66;color:var(--text-secondary);margin:0;max-width:62ch}
.lp-str__r:target .lp-str__n{color:var(--sun-700)}

/* ---- 5 what we look at: copy left, photograph right ---- */
.lp-ev__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 40px;align-items:center}
.lp-ev__copy{grid-column:1 / span 6}
.lp-ev__l{margin:40px 0 0;border-top:1px solid var(--line)}
.lp-ev__r{padding:18px 0;border-bottom:1px solid var(--line)}
.lp-ev__r dt{display:flex;align-items:baseline;gap:14px;font-family:var(--font-display);font-weight:500;font-size:21px;line-height:1.2;letter-spacing:-.014em;color:var(--brand-navy)}
.lp-ev__r dt span{font-family:var(--font-display);font-size:14px;color:var(--brand-accent)}
.lp-ev__r dd{font-family:var(--font-sans);font-size:15px;line-height:1.62;color:var(--text-secondary);margin:8px 0 0 28px;max-width:46ch}
.lp-ev__ph{grid-column:8 / span 5;margin:0}
.lp-ev__ph img{display:block;width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:6px}
.lp-ev__dev{grid-column:1 / -1;margin-top:24px}

/* ---- responsive ---- */
@container page (max-width:1180px){
  .lp-h1{font-size:44px}
  .lp-h2{font-size:33px}
  .lp-why__h{font-size:36px}
  .lp-sit__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container page (max-width:1000px){
  /* The rail is a desktop reading aid: dropped, not shrunk. */
  .lp-rail{display:none}
  .lp-body{grid-column:1 / -1}
  .lp-prf .bw-rail__c{--bw-w:340px}
}
@container page (max-width:900px){
  .lp-hero{padding:52px 0 56px}
  .lp-hero__g,.lp-ev__g{grid-template-columns:minmax(0,1fr);gap:32px}
  .lp-hero__copy,.lp-hero__ph,.lp-hero__dev,.lp-ev__copy,.lp-ev__ph,.lp-ev__dev{grid-column:1 / -1}
  .lp-hero__ph,.lp-ev__ph{max-width:480px}
  .lp-hero__ph::before{display:none}
  .lp-ev__ph img{aspect-ratio:3 / 2}
  .lp-h1{font-size:35px}
  .lp-h2{font-size:29px}
  .lp-head{margin-bottom:36px}
  .lp-why__h{font-size:30px}
  .lp-why__r{grid-template-columns:auto minmax(0,1fr);gap:8px 24px}
  .lp-why__d{grid-column:2}
  .lp-str__r{grid-template-columns:minmax(0,1fr);gap:10px}
}
/* Below 620px every grid collapses to one column with no column gap: a 12-column grid with a
   40px column gap has a 440px minimum and would clip inside a 390px viewport. */
@container page (max-width:620px){
  .lp-g,.lp-hero__g,.lp-ev__g,.lp-sit__g,.lp-why__r,.lp-str__r{grid-template-columns:minmax(0,1fr);column-gap:0}
  .lp-prf .bw-rail__c{--bw-w:270px}
  .lp-h1{font-size:31px}
  .lp-h2{font-size:26px}
  .lp-why__n{width:auto}
  .lp-why__d{grid-column:1}
}