/* /brokers/ — Tier 1 page CSS. Loaded only by this page. Tokens, type scale and buttons come
   from styles.css; sizing is on @container page.

   Composition: a 7/5 Paper hero with a People portrait, the shared Navy proof band, a 3 / 4+4
   capability index, a full-width Navy four-stage process, a 5/6 Paper relationship block, the
   story rail read as broker economics, and a 6/5 Navy close. No section repeats its neighbour's
   rhythm; none repeats /fund/ or /borrowers/. */

main{--bk-r:6px}
.bk-h2{font-size:42px;line-height:1.06;letter-spacing:-.022em;max-width:20ch}
.bk-h2.inv{color:var(--text-inverse)}
.bk-lead{margin-top:16px;font-size:18px;line-height:1.6;color:var(--text-secondary);max-width:52ch}
.bk-link{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:44px;font-family:var(--font-sans);font-size:14.5px;font-weight:600;color:var(--brand-navy);text-decoration:none;padding:11px 0}
.bk-link:hover{color:var(--brand-accent)}
figure{margin:0}

/* ---- 1 hero: 7/5, copy left, People portrait right ---- */
/* The hero sits close under the masthead, on the tighter Tier 1 rhythm: the grid carries no
   top padding of its own, so copy and photograph move up together. */
.bk-hero__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 40px;padding-top:0;padding-bottom:12px;align-items:center}
.bk-hero__copy{grid-column:1 / span 6}
.bk-hero__h{font-size:64px;line-height:1.0;letter-spacing:-.03em;color:var(--brand-navy);margin-top:10px;max-width:15ch}
.bk-hero__l{margin-top:22px;font-size:19px;line-height:1.58;color:var(--text-secondary);max-width:44ch}
.bk-hero__a{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:32px}
.bk-hero__tel{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-sans);font-size:14.5px;font-weight:600;color:var(--sky-800,#1B5E8C);text-decoration:none}
.bk-hero__tel:hover{color:var(--brand-accent)}
/* One quiet Sky plane behind the photograph, offset outward on its left edge into the empty
   seventh column: the portrait reads as placed rather than dropped in, with no frame, no card
   and no ornament. The plane is sized off the figure, so it survives any replacement photograph. */
.bk-hero__ph{grid-column:8 / span 5;margin:0;position:relative;isolation:isolate}
.bk-hero__ph::before{content:"";position:absolute;inset:26px 44px 26px -26px;background:rgba(145,195,235,.32);border-radius:var(--bk-r);z-index:-1}
.bk-hero__ph img{width:100%;aspect-ratio:4 / 5;max-height:600px;object-fit:cover;object-position:44% 50%;display:block;border-radius:var(--bk-r);box-shadow:0 18px 50px rgba(0,43,84,.12)}
.bk-hero__dev{grid-column:1 / -1}

/* ---- 2 proof band: four territories, so the values run a touch smaller than /borrowers/ ---- */
/* One alignment rule for all four columns: every value starts at the top of a fixed value row
   sized to the 40px figures, so the four stacks begin on the same line and the four supporting
   labels start on the same baseline beneath them. No column is centred or offset on its own. */
.bk-pband .ds-pband__v{font-size:40px;align-self:start}
.bk-pband .ds-pband__i:last-child .ds-pband__v{font-size:24px;letter-spacing:-.018em;line-height:1.0}
.bk-pband .ds-pband__i{grid-template-rows:40px auto auto;row-gap:7px;align-items:start}
.bk-pband .ds-pband__set{padding-bottom:26px}
/* The city list carries more words than any other description, so it runs slightly smaller and
   tighter to hold the same vertical weight as the three figure columns. */
.bk-pband .ds-pband__i:last-child .ds-pband__q{font-size:11px;line-height:1.34}
.bk-pband .ds-pband__q .nowrap{white-space:nowrap}

/* ---- 2b different path: head left seven, action right four, four hairline columns below ---- */
.bk-path__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 40px}
.bk-path__head{grid-column:1 / span 7}
.bk-path__head .bk-h2{margin-top:10px}
.bk-path__act{grid-column:9 / span 4;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:4px}
.bk-path__set{grid-column:1 / -1;margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}
.bk-path__s{border-top:2px solid var(--brand-navy);padding-top:20px}
.bk-path__t{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.16;letter-spacing:-.016em;color:var(--brand-navy);margin:0;max-width:14ch}
.bk-path__d{margin:12px 0 0;font-size:15.5px;line-height:1.58;color:var(--text-secondary);max-width:30ch}
.bk-path__dev{grid-column:1 / -1}

/* ---- 3 capability index: heading in the left three, two dense columns in the right eight ---- */
.bk-cap__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 40px}
.bk-cap__head{grid-column:1 / span 3}
.bk-cap__head .bk-lead{font-size:15px;max-width:34ch}
.bk-cap__head .ds-btn{margin-top:22px}
.bk-cap__col{border-top:2px solid var(--brand-navy)}
.bk-cap__col--a{grid-column:5 / span 4}
.bk-cap__col--b{grid-column:9 / span 4}
.bk-cap__r{padding:18px 0 19px;border-bottom:1px solid rgba(0,43,84,.14);display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;align-items:start}
.bk-cap__n{margin:2px 0 0;font-family:var(--font-display);font-weight:500;font-size:14px;line-height:1;letter-spacing:.02em;color:var(--text-eyebrow);font-variant-numeric:tabular-nums;transition:color 180ms cubic-bezier(.2,.6,.2,1)}
.bk-cap__r:hover .bk-cap__n{color:var(--brand-accent)}
.bk-cap__t{font-family:var(--font-display);font-weight:500;font-size:21px;line-height:1.18;letter-spacing:-.014em;color:var(--brand-navy);margin:0}
.bk-cap__d{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--text-secondary);max-width:36ch}
.bk-cap__dev{grid-column:1 / -1}

/* ---- 4 the signature section: Navy, four stages across the band ---- */
.bk-aft{background:var(--brand-navy);color:var(--text-inverse)}
.bk-aft__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 40px;padding-top:86px;padding-bottom:92px}
.bk-aft__head{grid-column:1 / span 7}
.bk-aft__l{margin-top:18px;font-size:17.5px;line-height:1.6;color:var(--sky-300);max-width:48ch}
.bk-aft__set{grid-column:1 / -1;margin-top:46px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.bk-aft__s{padding:26px 26px 0 22px;border-left:1px solid rgba(145,195,235,.28)}
.bk-aft__s:first-child{padding-left:0;border-left:0}
.bk-aft__n{margin:0;font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1;color:var(--brand-accent);font-variant-numeric:tabular-nums}
.bk-aft__t{font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1.14;letter-spacing:-.018em;color:var(--text-inverse);margin:14px 0 0;max-width:12ch}
.bk-aft__d{margin:11px 0 0;font-size:16px;line-height:1.6;color:var(--sky-300);max-width:30ch}
.bk-aft__dev{grid-column:1 / -1;margin-top:34px}

/* ---- 5 relationship: 5/6 Paper, copy left, one photograph right ---- */
.bk-rel__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 40px;align-items:center}
.bk-rel__copy{grid-column:1 / span 5}
.bk-rel__pts{margin:28px 0 0}
.bk-rel__pts>div{padding:20px 0;border-top:1px solid rgba(0,43,84,.16)}
.bk-rel__pts>div:last-child{border-bottom:1px solid rgba(0,43,84,.16)}
.bk-rel__pts dt{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.16;letter-spacing:-.016em;color:var(--brand-navy)}
.bk-rel__pts dd{margin:8px 0 0;font-size:16px;line-height:1.6;color:var(--text-secondary);max-width:44ch}
.bk-rel__stmt{margin-top:38px;font-family:var(--font-display);font-weight:500;font-size:31px;line-height:1.12;letter-spacing:-.02em;color:var(--brand-navy);max-width:19ch}
.bk-rel__sub{margin-top:12px;font-size:16.5px;line-height:1.6;color:var(--text-secondary);max-width:40ch}
.bk-rel__deep{margin:2px 0 0}
.bk-rel__ph{grid-column:7 / span 6;overflow:hidden;border-radius:var(--bk-r)}
.bk-rel__ph img{width:100%;aspect-ratio:5 / 4;object-fit:cover;object-position:50% 55%;display:block}
.bk-rel__dev{grid-column:1 / -1}

/* ---- 6 proof rail: the established cards, ordered around broker economics ---- */
.bk-prf__head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.bk-prf__nav{display:flex;align-items:center;gap:10px}
.bk-rail{margin-top:44px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.bk-rail::-webkit-scrollbar{display:none}
.bk-rail.is-drag{scroll-snap-type:none;cursor:grabbing}
.bk-rail__track{display:flex;gap:16px;align-items:stretch}
.bk-rail__c{flex:0 0 var(--bk-w,404px);scroll-snap-align:start;display:flex;flex-direction:column;padding-top:0}
.bk-rail__ph{position:relative;border-radius:var(--bk-r) var(--bk-r) 0 0;overflow:hidden;margin:0}
.bk-rail__ph img{width:100%;aspect-ratio:16 / 9;object-fit:cover;display:block}
.bk-rail__loc{margin:14px 0 0;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--text-secondary)}
.bk-rail__pur{margin:4px 0 0;font-family:var(--font-sans);font-size:12.5px;line-height:1.45;color:var(--text-muted)}
.bk-rail__ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(0,43,84,0) 0%,rgba(0,43,84,.08) 27%,rgba(0,43,84,.28) 55%,rgba(0,43,84,.66) 80%,#002B54 100%);pointer-events:none}
.bk-rail__c .ssb{background:var(--brand-navy);padding:16px 18px 17px;border-radius:0 0 var(--bk-r) var(--bk-r);overflow:hidden}
.bk-rail__c .ssb p,.bk-rail__c .ssb ul{margin:0}
.bk-rail__c .ssb__roi{font-family:var(--font-display);font-weight:500;font-size:38px;line-height:1;letter-spacing:-.015em;color:var(--brand-paper);font-variant-numeric:tabular-nums}
.bk-rail__c .ssb__ctx{margin-top:7px;font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-sky)}
.bk-rail__c .ssb__row{display:flex;flex-wrap:wrap;row-gap:11px;margin-top:16px;padding:0;list-style:none}
.bk-rail__c .ssb__row li{flex:0 0 auto;display:flex;flex-direction:column;gap:3px}
.bk-rail__c .ssb__row li+li{border-left:1px solid rgba(145,195,235,.28);margin-left:10px;padding-left:11px}
.bk-rail__c .ssb__row strong{font-family:var(--font-sans);font-weight:600;font-size:13px;line-height:1.2;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.bk-rail__c .ssb__row span{font-family:var(--font-sans);font-size:11px;color:var(--brand-sky);white-space:nowrap}
.bk-rail__btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--brand-navy);cursor:pointer;font:inherit;font-size:15px;line-height:1}
.bk-rail__btn:hover{background:var(--navy-050,#EDF2F7);border-color:var(--brand-navy)}
.bk-rail__btn:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px}
.bk-rail__btn[disabled]{opacity:.35;cursor:default;background:#fff;border-color:var(--line)}
.bk-prf__dev{margin-top:26px}

/* ---- 7 close: 6/5 Navy ---- */
.bk-cl{background:var(--brand-navy);color:var(--text-inverse)}
.bk-cl__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 40px;padding-top:82px;padding-bottom:92px}
.bk-cl__copy{grid-column:1 / span 6}
.bk-cl__h{font-size:48px;line-height:1.04;letter-spacing:-.028em;color:var(--text-inverse);max-width:14ch;margin-top:4px}
.bk-cl__l{margin-top:18px;font-size:17.5px;line-height:1.6;color:var(--sky-300);max-width:46ch}
.bk-cl__act{grid-column:8 / span 5;align-self:end}
.bk-cl__act .ds-btn--primary{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--brand-navy)}
.bk-cl__act .ds-btn--primary:hover{background:var(--sun-700);border-color:var(--sun-700);color:var(--brand-navy)}
.bk-cl__sec{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid rgba(145,195,235,.3)}
.bk-cl__sec .bk-link{color:var(--brand-sky);border-bottom:1px solid rgba(145,195,235,.18)}
.bk-cl__sec .bk-link:hover{color:var(--text-inverse)}
.bk-cl__dev{grid-column:1 / -1}

/* ---- motion: html.bk is added by brokers-motion.js only ---- */
.bk .bk-rv>*{opacity:0;transform:translateY(10px)}
.bk .bk-rv.is-in>*{opacity:1;transform:none;transition:opacity 300ms cubic-bezier(.2,.6,.2,1),transform 300ms cubic-bezier(.2,.6,.2,1)}
.bk .bk-cap__r,.bk .bk-aft__s,.bk .bk-rel__pts>div,.bk .bk-path__s{opacity:0;transform:translateY(10px)}
.bk .bk-cap.is-in .bk-cap__r,.bk .bk-aft.is-in .bk-aft__s,.bk .bk-rel.is-in .bk-rel__pts>div,.bk .bk-path.is-in .bk-path__s{opacity:1;transform:none;transition:opacity 560ms cubic-bezier(.2,.6,.2,1),transform 560ms cubic-bezier(.2,.6,.2,1)}
.bk .bk-path.is-in .bk-path__s:nth-child(2){transition-delay:80ms}
.bk .bk-path.is-in .bk-path__s:nth-child(3){transition-delay:160ms}
.bk .bk-path.is-in .bk-path__s:nth-child(4){transition-delay:240ms}
.bk .bk-aft.is-in .bk-aft__s:nth-child(2){transition-delay:80ms}
.bk .bk-aft.is-in .bk-aft__s:nth-child(3){transition-delay:160ms}
.bk .bk-aft.is-in .bk-aft__s:nth-child(4){transition-delay:240ms}
.bk .bk-cap.is-in .bk-cap__r:nth-child(2){transition-delay:60ms}
.bk .bk-cap.is-in .bk-cap__r:nth-child(3){transition-delay:120ms}
.bk .bk-cap.is-in .bk-cap__r:nth-child(4){transition-delay:180ms}
.bk .bk-rel.is-in .bk-rel__pts>div:nth-child(2){transition-delay:90ms}
.bk .bk-rel.is-in .bk-rel__pts>div:nth-child(3){transition-delay:180ms}
@media (prefers-reduced-motion:no-preference){
  .bk .bk-hero__ph img{animation:bk-settle 1200ms cubic-bezier(.2,.6,.2,1) 80ms both}
  .bk .bk-hero__ph::before{animation:bk-plane 1000ms cubic-bezier(.2,.6,.2,1) 260ms both}
  .bk .bk-hero__copy>*{animation:bk-rise 760ms cubic-bezier(.2,.6,.2,1) both}
  .bk .bk-hero__copy>:nth-child(1){animation-delay:120ms}
  .bk .bk-hero__copy>:nth-child(2){animation-delay:180ms}
  .bk .bk-hero__copy>:nth-child(3){animation-delay:260ms}
  .bk .bk-hero__copy>:nth-child(4){animation-delay:460ms}
  .bk .bk-hero__copy>:nth-child(5){animation-delay:640ms}
}
@keyframes bk-settle{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bk-plane{from{opacity:0;transform:translate(14px,10px)}to{opacity:1;transform:none}}
@keyframes bk-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- responsive ---- */
/* The four-territory band loses its single value baseline before it loses legibility: below
   1100px it becomes two rows of two, each figure sized to its own wrap. */
@container page (max-width:1100px){
  .bk-pband .ds-pband__set{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  /* The fixed value row carries into the two-up band: one rule, all four columns, sized to the
     largest value line box at this breakpoint so every label keeps the shared baseline. */
  .bk-pband .ds-pband__i{grid-template-rows:36px auto auto;row-gap:8px}
  .bk-pband .ds-pband__v{font-size:36px}
  .bk-pband .ds-pband__i:last-child .ds-pband__v{font-size:24px}
  .bk-pband .ds-pband__set{padding-bottom:0}
}
@container page (max-width:700px){
  .bk-pband .ds-pband__set{grid-template-columns:1fr;row-gap:24px}
  .bk-pband .ds-pband__i{grid-template-rows:34px auto auto}
  .bk-pband .ds-pband__v{font-size:34px}
  .bk-pband .ds-pband__i:last-child .ds-pband__v{font-size:23px}
}
@container page (max-width:1240px){
  .bk-hero__h{font-size:54px}
  .bk-h2{font-size:36px}
  .bk-cl__h{font-size:40px}
  .bk-aft__t{font-size:23px}
  .bk-cap__t{font-size:19px}
  .bk-rail__c{--bk-w:360px}
}
@container page (max-width:900px){
  .bk-hero__g{align-items:start}
  .bk-hero__copy{grid-column:1 / -1}
  .bk-hero__h{font-size:42px;max-width:18ch}
  .bk-hero__l{font-size:17px}
  .bk-hero__ph{grid-column:1 / -1;margin-top:32px}
  .bk-hero__ph::before{display:none}
  .bk-hero__ph img{aspect-ratio:16 / 9}
  .bk-path__head,.bk-path__act{grid-column:1 / -1}
  .bk-path__act{align-self:start;padding-bottom:0}
  .bk-path__set{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px}
  .bk-cap__head,.bk-cap__col--a,.bk-cap__col--b{grid-column:1 / -1}
  .bk-cap__col--a{margin-top:8px}
  .bk-cap__col--b{border-top:0}
  .bk-aft__g{padding-top:60px;padding-bottom:66px}
  .bk-aft__head{grid-column:1 / -1}
  .bk-aft__set{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px;margin-top:34px}
  .bk-aft__s:nth-child(3){padding-left:0;border-left:0}
  .bk-aft__t,.bk-aft__d{max-width:26ch}
  .bk-rel__copy,.bk-rel__ph{grid-column:1 / -1}
  .bk-rel__ph{margin-top:32px}
  .bk-rel__ph img{aspect-ratio:16 / 9}
  .bk-cl__g{padding-top:56px;padding-bottom:68px}
  .bk-cl__copy,.bk-cl__act{grid-column:1 / -1}
  .bk-cl__act{margin-top:28px}
  .bk-rail__c{--bk-w:300px}
}
@container page (max-width:620px){
  /* A 12-column grid with a 40px column gap has a 440px minimum, so below 620px every grid on
     the page collapses to one column and drops the column gap. Without this the sections are
     440px wide inside a 390px viewport and the right edge of the copy is clipped. */
  .bk-hero__g,.bk-path__g,.bk-cap__g,.bk-aft__g,.bk-rel__g,.bk-cl__g{grid-template-columns:minmax(0,1fr);column-gap:0}
  .bk-path__set{grid-template-columns:1fr}
  .bk-path__t{font-size:21px}
  .bk-pband .ds-pband__g{grid-template-columns:minmax(0,1fr);column-gap:0}
  .bk-hero__h{font-size:34px}
  .bk-h2{font-size:27px}
  .bk-aft__set{grid-template-columns:1fr}
  .bk-aft__s,.bk-aft__s:nth-child(3){padding-left:0;border-left:0}
  .bk-aft__t{font-size:22px}
  .bk-rel__pts dt{font-size:21px}
  .bk-rel__stmt{font-size:24px}
  .bk-cap__r{grid-template-columns:26px minmax(0,1fr);column-gap:11px}
  .bk-cl__h{font-size:30px}
  .bk-rail__c{--bk-w:272px}
}