/* =========================================================
   Linkhome Lending — Wholesale
   ---------------------------------------------------------
   Loads after styles.css. It defines no new colour and no new
   typeface: every value below is a token already in :root.
   What it adds is the furniture a broker site needs and a
   consumer site does not — a rate sheet, a turn-time board,
   a product matrix, an approval checklist.
   ========================================================= */

/* =========================================================
   Page width
   ---------------------------------------------------------
   The consumer site runs on a 1560px shell that fills a wide
   monitor edge to edge. This one sits in a traditional 1200px
   column, which is the fastest way to tell at a glance which
   of the two sites you are looking at — and it suits the work
   better: a broker reads tables and specification lists, and
   a table 1,450px wide makes the eye travel further between
   the programme name and its figure than it needs to.

   Section backgrounds stay full-bleed. Boxing those in as
   well would read as a website from 2011 rather than as a
   deliberately narrower one.

   Everything derives from --wrap, so this is the whole change.
   The gutter steps have to be restated here: broker.css loads
   after styles.css, so a plain :root rule in this file beats
   the media-query ones over there.
   ========================================================= */
:root{--wrap:1200px;--gutter:40px}
@media (max-width:1100px){:root{--gutter:32px}}
@media (max-width:760px){:root{--gutter:20px}}

/* The display sizes were set against a 1560px measure; at 1200 an 80px
   serif headline crowds the column it sits in. */
.h-xl{font-size:clamp(38px,5.4vw,64px)}
.h-lg{font-size:clamp(28px,3.7vw,40px)}
.wh-hero .lede,
.section-head .lede{font-size:17px}


/* ---------------------------------------------------------
   Brand — the channel is part of the mark here, so a broker
   who lands on a deep link knows which site they are on.
   --------------------------------------------------------- */
.brand-channel{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--green);
  border-left:1px solid var(--line);padding-left:13px;margin-left:2px;
  white-space:nowrap;
}
@media (max-width:560px){.brand-channel{display:none}}

/* ---------------------------------------------------------
   Banners — one class, a different photograph per page
   --------------------------------------------------------- */
.wh-hero{position:relative;overflow:hidden;isolation:isolate;padding:150px 0 96px}
.wh-hero > *{position:relative;z-index:1}
.wh-hero .wh-hero-bg{position:absolute;inset:0;z-index:-1;background-size:cover}
.wh-hero.tall{padding:184px 0 120px}

.wh-hero-bg.bell{
  background-image:
    linear-gradient(100deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.94) 36%,rgba(10,10,10,.84) 56%,rgba(10,10,10,.66) 78%,rgba(10,10,10,.54) 100%),
    linear-gradient(to bottom,rgba(10,10,10,.7) 0%,rgba(10,10,10,.3) 18%,rgba(10,10,10,0) 40%),
    linear-gradient(to top,rgba(10,10,10,.8) 0%,rgba(10,10,10,.2) 32%,rgba(10,10,10,0) 60%),
    linear-gradient(rgba(10,10,10,.26),rgba(10,10,10,.26)),
    url("nasdaq-bell.jpg");
  background-position:72% 44%;
}
.wh-hero-bg.office{
  background-image:
    linear-gradient(100deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.93) 40%,rgba(10,10,10,.8) 62%,rgba(10,10,10,.62) 100%),
    linear-gradient(to bottom,rgba(10,10,10,.72) 0%,rgba(10,10,10,.28) 20%,rgba(10,10,10,0) 44%),
    url("office.jpg");
  background-position:64% 46%;
}
.wh-hero-bg.room{
  background-image:
    linear-gradient(100deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.93) 40%,rgba(10,10,10,.78) 64%,rgba(10,10,10,.6) 100%),
    linear-gradient(to bottom,rgba(10,10,10,.72) 0%,rgba(10,10,10,.28) 20%,rgba(10,10,10,0) 44%),
    url("contact-hero.jpg");
  background-position:center 40%;
}
/* Home banner. The plate is already black on its left two-thirds, so this
   needs far less veil than a photograph does — just enough to hold the type
   at widths where "cover" scales the subject in under it. Anchored bottom
   right so the couple keep their feet on the floor of the banner. */
.wh-hero-bg.partner{
  background-image:
    /* Straight across, and holding further right than before: the taller
       banner scales the plate up, so the house now reaches under the lede. */
    linear-gradient(to right,rgba(10,10,10,.98) 0%,rgba(10,10,10,.96) 42%,rgba(10,10,10,.78) 58%,rgba(10,10,10,.3) 70%,rgba(10,10,10,0) 82%),
    url("hero-partner.jpg");
  /* contain, not cover: the plate is a composition rather than a
     photograph, so it should be fitted whole and let its own black run out
     to the edges. cover scaled it up and walked the couple in under the
     headline at every width below about 1800px. */
  background-size:contain;
  background-position:right bottom;
  background-repeat:no-repeat;
  background-color:var(--black);
}
@media (max-width:900px){
  .wh-hero-bg.partner{
    background-image:
      linear-gradient(to bottom,rgba(10,10,10,.94) 0%,rgba(10,10,10,.86) 30%,rgba(10,10,10,.2) 62%,rgba(10,10,10,0) 100%),
      url("hero-partner-small.jpg");
    background-size:contain;
    background-position:center bottom;
  }
}

/* plain black banner for the interior pages that carry a table straight away */
.wh-hero-bg.flat{background:linear-gradient(180deg,#101010 0%,var(--black) 100%)}

/* Product banners carry that product's own photograph. The file differs per
   page so it arrives as a custom property; the gradients live here, which
   also lets a phone pull the 640px copy instead of the 1200px one. */
.wh-hero-bg.photo{
  background-size:cover;background-position:center 42%;
  background-image:
    /* Straight left-to-right. At 100deg the veil ran downhill as well as
       across, so the sub-line and the buttons — which sit low on the left —
       came out lighter than the headline above them. */
    linear-gradient(to right,rgba(10,10,10,.97) 0%,rgba(10,10,10,.95) 40%,rgba(10,10,10,.84) 62%,rgba(10,10,10,.62) 100%),
    linear-gradient(to top,rgba(10,10,10,.45) 0%,rgba(10,10,10,.12) 26%,rgba(10,10,10,0) 46%),
    /* the header floats on this now, so the top of the photograph has to
       carry a nav as well as clear the eye — it needs more shade than it
       did when a solid bar sat over it */
    linear-gradient(to bottom,rgba(10,10,10,.82) 0%,rgba(10,10,10,.5) 15%,rgba(10,10,10,.18) 34%,rgba(10,10,10,.06) 55%),
    var(--ph);
}
@media (max-width:900px){
  .wh-hero-bg.photo{
    background-image:
      linear-gradient(to bottom,rgba(10,10,10,.42) 0%,rgba(10,10,10,.7) 48%,rgba(10,10,10,.93) 100%),
      var(--ph-sm);
  }
}

@media (max-width:900px){
  .wh-hero{padding:120px 0 68px}
  .wh-hero.tall{padding:132px 0 76px}
  .wh-hero-bg.bell{background-image:linear-gradient(to bottom,rgba(10,10,10,.66) 0%,rgba(10,10,10,.86) 54%,rgba(10,10,10,.97) 100%),url("nasdaq-bell-small.jpg")}
  .wh-hero-bg.office{background-image:linear-gradient(to bottom,rgba(10,10,10,.7) 0%,rgba(10,10,10,.88) 54%,rgba(10,10,10,.97) 100%),url("office-small.jpg")}
  .wh-hero-bg.room{background-image:linear-gradient(to bottom,rgba(10,10,10,.66) 0%,rgba(10,10,10,.86) 54%,rgba(10,10,10,.97) 100%),url("contact-hero-small.jpg")}
}

.wh-crumb{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);margin-bottom:16px;
}
.wh-hero .lede{margin-top:18px}
.wh-hero .hero-actions{margin-top:30px}

/* ---------------------------------------------------------
   Announcement strip under the banner
   --------------------------------------------------------- */
.wh-strip{background:#101010;border-bottom:1px solid var(--line-2);padding:14px 0}
.wh-strip .wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.wh-strip .k{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);flex:none;
}
.wh-strip ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex-wrap:wrap;flex:1}
.wh-strip li{font-size:14.5px;color:var(--mute)}
.wh-strip li time{font-family:var(--mono);font-size:12.5px;color:var(--mute-2);margin-right:9px}
.wh-strip a:hover{color:#fff}

/* ---------------------------------------------------------
   Wide tables: matrix, rate sheet, turn times
   --------------------------------------------------------- */
.dt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dt-scroll .dtable{min-width:760px}
.dt-hint{display:none;margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--mute-2)}
@media (max-width:820px){.dt-hint{display:block}}
.section-white .dt-hint{color:var(--grey-2)}

/* a band inside a table that names the group rather than a row of figures */
.dtable tr.grp td,
.dtable tr.grp td:first-child{
  background:#101010;color:var(--green);text-align:left;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;padding:11px 20px;
}
.section-white .dtable tr.grp td,
.section-white .dtable tr.grp td:first-child{background:#E8E8E4;color:var(--green-deep)}
.dtable .fast{color:var(--green)}
.section-white .dtable .fast{color:var(--green-deep)}
.dtable td.num{font-variant-numeric:tabular-nums}

/* the date a board was published — never generated from today */
.wh-stamp{
  display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;margin-bottom:18px;
  font-family:var(--mono);font-size:13px;color:var(--mute-2);
}
.wh-stamp b{color:var(--text);font-weight:500}
.wh-stamp .sep{opacity:.5}
.wh-stamp .stale{color:var(--amber)}
.section-white .wh-stamp{color:var(--grey-2)}
.section-white .wh-stamp b{color:var(--ink);font-weight:600}

.wh-note{
  margin-top:22px;font-family:var(--mono);font-size:12.5px;line-height:1.9;
  color:var(--mute-2);max-width:900px;
}
.wh-note b{color:var(--text);font-weight:500}
.section-white .wh-note{color:var(--grey-2)}
.section-white .wh-note b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------
   Doors — the three things a broker came for
   --------------------------------------------------------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.door{background:var(--card);padding:30px 28px;display:flex;flex-direction:column;transition:background .18s}
a.door:hover{background:#181818}
.door .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.door h3{font-size:23px;color:#fff;margin:14px 0 10px}
.door p{font-size:15px;color:var(--mute)}
.door .link-arrow{margin-top:auto;padding-top:22px;align-self:flex-start}
@media (max-width:900px){.doors{grid-template-columns:1fr}}

/* ---------------------------------------------------------
   Portal — two channels, two doors
   --------------------------------------------------------- */
.portal{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.portal-door{background:var(--card);padding:30px 28px;display:flex;flex-direction:column}
.portal-door .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);margin-bottom:14px}
.portal-door h3{font-size:21px;color:#fff}
.portal-door p{margin-top:12px;font-size:15px;color:var(--mute)}
.portal-door .btn{margin-top:24px;align-self:flex-start}
@media (max-width:760px){.portal{grid-template-columns:1fr}}

/* ---------------------------------------------------------
   Rate sheet — the headline figure per programme
   --------------------------------------------------------- */
.rate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rate-cell{background:var(--card);padding:26px 24px}
.rate-cell .n{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.02em}
.rate-cell .n small{display:block;font-family:var(--mono);font-size:12.5px;font-weight:400;
  color:var(--mute-2);margin-top:6px;letter-spacing:0}
.rate-cell .r{display:flex;align-items:baseline;gap:4px;margin-top:18px;
  font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums}
.rate-cell .r i{font-style:normal;font-size:.4em;font-weight:600;color:var(--mute-2)}
.rate-cell .m{margin-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--mute-2);
  display:flex;gap:14px;flex-wrap:wrap}
.rate-cell .m b{color:var(--text);font-weight:500}
@media (max-width:1000px){.rate-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rate-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------
   Bulletins
   --------------------------------------------------------- */
.wh-split{display:grid;grid-template-columns:1.4fr .6fr;gap:60px;align-items:start}
@media (max-width:1000px){.wh-split{grid-template-columns:1fr;gap:44px}}

.bul{border-top:1px solid var(--line)}
.bul-row{display:grid;grid-template-columns:118px 1fr auto;gap:26px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line)}
.bul-date{font-family:var(--mono);font-size:13.5px;color:var(--green)}
.bul-t{font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:#fff}
.bul-t span{display:block;margin-top:6px;font-size:14.5px;font-weight:400;letter-spacing:0;color:var(--mute)}
.bul-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute-2);white-space:nowrap}
.bul-empty{padding:26px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--mute)}
@media (max-width:640px){.bul-row{grid-template-columns:1fr;gap:8px}.bul-tag{order:-1}}

.sheet-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px 24px}
.sheet-box .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin-bottom:12px}
.sheet-box h3{font-size:19px;color:#fff}
.sheet-box p{margin-top:10px;font-size:14.5px;color:var(--mute)}
.sheet-form{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.sheet-form input{flex:1 1 170px;min-width:0;background:#1C1C1C;border:1px solid var(--line);
  border-radius:8px;color:#fff;padding:12px 14px;font-family:var(--sans);font-size:15px}
.sheet-form input:focus{outline:none;border-color:var(--green)}
.sheet-msg{display:none;margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--green)}
.sheet-msg.show{display:block}

/* ---------------------------------------------------------
   Approval checklist
   --------------------------------------------------------- */
.ready{list-style:none;margin:0;padding:0}
.ready li{position:relative;padding:15px 0 15px 30px;border-bottom:1px solid #ECECE8;
  font-size:15.5px;line-height:1.6;color:var(--grey)}
.ready li:first-child{border-top:1px solid #E4E4E0}
.ready li b{display:block;color:var(--ink);font-weight:700;margin-bottom:3px}
.ready li::before{content:"";position:absolute;left:6px;top:23px;width:9px;height:9px;
  border:1px solid var(--green-deep);border-radius:2px}

/* ---------------------------------------------------------
   Reference links
   --------------------------------------------------------- */
.hl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#E4E4E0;
  border:1px solid #E4E4E0;border-radius:12px;overflow:hidden}
.hl-col{background:#fff;padding:26px 24px}
.hl-col h4{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green-deep)}
.hl-col ul{list-style:none;margin:16px 0 0;padding:0}
.hl-col li{margin-bottom:11px}
.hl-col li:last-child{margin-bottom:0}
.hl-col a{font-size:15px;line-height:1.5;color:var(--grey);border-bottom:1px solid transparent}
.hl-col a:hover{color:var(--ink);border-bottom-color:#C9C9C4}
@media (max-width:1000px){.hl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hl-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------
   Programme category blocks
   --------------------------------------------------------- */
.cat{border-top:1px solid #E4E4E0;padding-top:44px;margin-top:44px}
.cat:first-of-type{border-top:none;padding-top:0;margin-top:0}
.cat-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start;margin-bottom:28px}
.cat-head h3{font-size:clamp(26px,3.2vw,34px);letter-spacing:-.03em;color:var(--ink)}
.cat-head .k{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-deep);margin-bottom:12px}
.cat-head p{font-size:16.5px;line-height:1.7;color:var(--grey)}
.cat-head p + p{margin-top:14px}
@media (max-width:900px){.cat-head{grid-template-columns:1fr;gap:20px}}

/* ---------------------------------------------------------
   Footer — the broker desk, not the consumer office
   --------------------------------------------------------- */
.wh-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px}
@media (max-width:900px){.wh-footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.wh-footer-grid{grid-template-columns:1fr}}

/* visually hidden but read aloud */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the hotline block styles its link as the headline number — the email on the
   line beneath it is a footnote, not a second headline */
.hotline .hours a{display:inline;font-size:14px;font-weight:400}


/* =========================================================
   Home page rows
   ========================================================= */

/* ---- Products: tile above, name below ------------------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prod{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease;
}
a.prod:hover{border-color:#2E2E2E;transform:translateY(-3px)}
.prod img{display:block;width:100%;height:auto;aspect-ratio:40/21;object-fit:cover;
  border-bottom:1px solid var(--line)}
.prod .body{padding:20px 22px 22px}
.prod h3{font-size:18px;color:#fff;letter-spacing:-.02em}
.prod p{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--mute)}
.prod .link-arrow{margin-top:16px;font-size:14px}
@media (max-width:900px){.prod-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.prod-grid{grid-template-columns:1fr}}

/* ---- Become a broker: a row of doors --------------------- */
.pkg-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.pkg{
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:22px 22px 20px;transition:border-color .2s,background .2s;
}
a.pkg:hover{background:#181818;border-color:#2E2E2E}
.pkg .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.pkg b{display:block;font-size:16.5px;font-weight:700;color:#fff;letter-spacing:-.02em;margin-top:11px}
.pkg span.d{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--mute)}
.pkg .go{font-family:var(--mono);font-size:13px;color:var(--green)}
@media (max-width:1000px){.pkg-row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pkg-row{grid-template-columns:1fr}}

/* ---- Turn-time board ------------------------------------------------
   Rows under a section band are indented, so the eye can tell "Agency"
   (a product inside Underwriting) from "Loan documents" (a stage of the
   file). Rows marked .tt-top sit back at section level.
   -------------------------------------------------------------------- */
#turnTable td:first-child{padding-left:40px}
#turnTable tr.grp td:first-child{padding-left:20px}
#turnTable tr.tt-top td:first-child{padding-left:20px;font-weight:700}
#turnTable tr.tt-top td{border-top:1px solid var(--line)}
.section-white #turnTable tr.tt-top td{border-top-color:#E4E4E0}

tfoot#turnFoot td{
  background:#101010;border-bottom:none;text-align:center;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--mute-2);padding:13px 20px;
}
.section-white tfoot#turnFoot td{background:#F0F0EC;color:var(--grey-2)}

@media (max-width:820px){
  #turnTable td:first-child{padding-left:28px}
  #turnTable tr.grp td:first-child,
  #turnTable tr.tt-top td:first-child{padding-left:16px}
}

/* a programme that is quoted per deal rather than posted */
.dtable td.quoted{font-family:var(--mono);font-size:13.5px;color:var(--mute-2);letter-spacing:.04em}
.section-white .dtable td.quoted{color:var(--grey-2)}

/* ---- Product index on the programs page ----------------------------- */
.cat-index{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:#E4E4E0;border:1px solid #E4E4E0;border-radius:12px;overflow:hidden}
.ci{background:#fff;padding:24px 24px 22px;display:flex;flex-direction:column;transition:background .18s}
.ci:hover{background:var(--light)}
.ci .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--green-deep)}
.ci b{margin-top:12px;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.ci .c{margin-top:7px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--grey-2)}
.ci .l{margin-top:13px;font-size:13.5px;line-height:1.6;color:var(--grey)}
@media (max-width:1000px){.cat-index{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cat-index{grid-template-columns:1fr}}

/* ---- Product detail blocks on the products page ---------------------- */
.box-head{
  display:flex;align-items:baseline;gap:18px;
  border-top:1px solid #E4E4E0;padding-top:22px;margin:56px 0 8px;
}
.box-head:first-of-type{margin-top:0;border-top:none;padding-top:0}
.box-head h3{font-size:clamp(24px,3vw,32px);letter-spacing:-.03em;color:var(--ink)}
.box-head span{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-deep)}

.pd{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start;
  padding:38px 0;border-bottom:1px solid #ECECE8;scroll-margin-top:110px}
.pd-mark img{display:block;width:100%;height:auto;border:1px solid #E4E4E0;border-radius:10px}
.pd-body h4{font-size:clamp(21px,2.4vw,26px);letter-spacing:-.025em;color:var(--ink)}
.pd-tag{margin-top:8px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--green-deep)}
.pd-body p:not(.pd-tag){margin-top:14px;font-size:16px;line-height:1.7;color:var(--grey)}
.pd-specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E4E4E0;
  border:1px solid #E4E4E0;border-radius:10px;overflow:hidden;margin-top:24px}
.pd-specs div{background:#fff;padding:13px 16px;font-size:15px;color:var(--ink)}
.pd-specs span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-2);margin-bottom:5px}
.pd-body .link-arrow{margin-top:22px}
@media (max-width:900px){
  .pd{grid-template-columns:1fr;gap:24px;padding:30px 0}
  .pd-specs{grid-template-columns:1fr}
}

/* ---- Become a broker: photo and desk on the left, packages on the right --- */
.join-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:1000px){.join-row{grid-template-columns:1fr;gap:40px}}

.join-side img{
  display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid #E4E4E0;
}
/* One column, not two. Side by side, each cell is about 160px wide and
   info@linkhomelendings.com does not fit — it was breaking mid-word into
   "...linkhomelendings.co / m". */
.join-contact{
  display:grid;grid-template-columns:1fr;gap:1px;margin-top:1px;
  background:#E4E4E0;border:1px solid #E4E4E0;border-radius:12px;overflow:hidden;
}
.join-contact > div{background:var(--light);padding:24px 24px 22px}
.join-contact .k{
  display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-deep);margin-bottom:12px;
}
.join-contact .big{
  display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  border-bottom:1px solid transparent;
}
.join-contact .big.em{font-size:19px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.join-contact .big:hover{border-bottom-color:var(--green-deep);color:var(--green-deep)}
.join-contact .sub{display:block;margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--grey-2)}


.join-dl h3{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.03em;color:var(--ink)}
.join-dl-lede{margin-top:12px;font-size:16px;line-height:1.65;color:var(--grey)}

.dl{
  display:flex;align-items:flex-start;gap:16px;margin-top:16px;
  background:#fff;border:1px solid #E4E4E0;border-radius:12px;padding:20px 20px 20px 18px;
  transition:border-color .18s,background .18s,transform .18s;
}
.dl:hover{border-color:var(--green-deep);background:var(--light);transform:translateY(-2px)}
.dl .ico{
  flex:none;width:42px;height:42px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:rgba(18,135,64,.09);color:var(--green-deep);
}
.dl .t{flex:1;min-width:0}
.dl .t b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.dl .t span{display:block;margin-top:7px;font-size:14.5px;line-height:1.6;color:var(--grey)}
.dl .ext{
  flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--grey-2);
  border:1px solid #E4E4E0;border-radius:5px;padding:4px 8px;margin-top:3px;
}
.dl.alt{border-style:dashed}

.join-note{
  margin-top:24px;font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--grey-2);
}
.join-note b{color:var(--ink);font-weight:600}

/* ---- Product pages --------------------------------------------------- */
.pg-h{
  font-size:clamp(23px,2.6vw,29px);letter-spacing:-.03em;color:var(--ink);
  margin-bottom:18px;
}

/* the three figures a broker checks before reading anything else */
.hl-figs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.hl-figs > div{background:var(--card);padding:28px 26px 26px}
.hl-figs span{
  display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute-2);margin-bottom:14px;
}
.hl-figs b{
  display:block;font-size:clamp(34px,4.6vw,46px);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
@media (max-width:760px){.hl-figs{grid-template-columns:1fr}}

.hl-feats{display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:center;margin-top:28px}
.hl-feats img{display:block;width:100%;height:auto;aspect-ratio:40/21;object-fit:cover;
  border:1px solid var(--line);border-radius:12px}
.hl-feats ul{list-style:none;margin:0;padding:0;column-count:2;column-gap:32px}
.hl-feats li{
  position:relative;padding:11px 0 11px 26px;font-size:15.5px;line-height:1.5;color:var(--text);
  break-inside:avoid;
}
.hl-feats li::before{
  content:"\25C6";position:absolute;left:0;top:11px;font-size:11px;color:var(--green);
}
@media (max-width:900px){
  .hl-feats{grid-template-columns:1fr;gap:24px}
  .hl-feats ul{column-count:1}
}

/* where to go next inside the same credit box */
.pg-next{
  margin-top:52px;padding-top:26px;border-top:1px solid #E4E4E0;
  display:flex;gap:28px;flex-wrap:wrap;align-items:baseline;
}
.pg-next > span{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey-2);flex:none;
}
.pg-next > div{display:flex;gap:26px;flex-wrap:wrap}

/* The products dropdown carries all eleven programmes. In one column it runs
   off the bottom of the viewport, so above the mobile breakpoint it lays out
   in two — .nav-menu is a flex column by default, hence display:block here. */
.nav-menu-products .nav-box{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);padding-top:12px;
}
.nav-menu-products .nav-box:hover{color:var(--green)}
@media (min-width:1161px){
  .nav-menu-products{
    /* Anchored to its own right edge rather than its left. Left-aligned, a
       600px panel hanging off the second nav item runs past the right of a
       1,120px header row — and because the menu is hidden with visibility
       rather than display, that overflow still widened the document. */
    display:block;left:auto;right:0;
    min-width:540px;columns:2;column-gap:18px;padding:14px 12px 16px;
  }
  .nav-menu-products a{display:block;width:auto;break-inside:avoid}
  .nav-menu-products .nav-parent-link{column-span:all;margin-bottom:4px}
}

/* ---- Closing band ----------------------------------------------------
   The 16ch measure was set for a two-line sentence. "Become a Linkhome
   Lending Broker" is shorter but has long words in it, so at 16ch it
   broke across three lines with "Broker" alone on the last. Widening the
   measure lets it sit on two.
   ---------------------------------------------------------------------- */
.cta-inner h2{max-width:22ch}

/* the "have ready" list also appears on a dark row now */
.section-paper .ready li{border-bottom-color:var(--line);color:var(--mute)}
.section-paper .ready li:first-child{border-top-color:var(--line)}
.section-paper .ready li b{color:#fff}
.section-paper .ready li::before{border-color:var(--green)}

/* ---- Footer ----------------------------------------------------------
   Stripped to the three facts a broker needs and the identifiers a
   lender is required to show. The state-licence list, the two link
   columns and the long legal paragraph came out at the client's
   direction; NMLS ID, the entity name, Equal Housing Lender and the
   "not an advertisement to consumers" line stay, because those are
   disclosure rather than decoration.
   ---------------------------------------------------------------------- */
.wh-footer{padding-top:56px}
.wh-foot{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:48px;flex-wrap:wrap;padding-bottom:44px;
}
.wh-foot-brand{display:flex;align-items:center;gap:14px}
.wh-foot-contact{text-align:right}
.wh-foot-contact .big{
  display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;color:#fff;
}
.wh-foot-contact .big:hover{color:var(--green)}
.wh-foot-contact a:not(.big){
  display:block;margin-top:10px;font-size:15.5px;color:var(--mute);
}
.wh-foot-contact a:not(.big):hover{color:#fff}
.wh-foot-contact p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--mute-2)}
.wh-foot-bottom{font-size:13px}
.wh-foot-bottom a{border-bottom:1px solid var(--line-2)}
.wh-foot-bottom a:hover{color:#fff}
@media (max-width:760px){
  .wh-foot{gap:32px}
  .wh-foot-contact{text-align:left}
}

/* ---- Our achievements ------------------------------------------------ */
.ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:12px}
.ach{text-align:center;display:flex;flex-direction:column;align-items:center}
.ach .ico{
  display:flex;align-items:center;justify-content:center;
  width:82px;height:82px;border-radius:50%;
  border:2px solid var(--green-deep);color:var(--green-deep);
}
.ach b{
  display:block;margin-top:26px;
  font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.045em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
}
.ach b i{font-style:normal}
.ach .lbl{
  display:block;margin-top:16px;max-width:26ch;text-wrap:balance;
  font-size:16px;font-weight:600;line-height:1.5;color:var(--grey);
}
@media (max-width:820px){
  .ach-grid{grid-template-columns:1fr;gap:44px}
}


/* The phone layout stacks the banner, so the artwork needs a band of its own
   under the buttons instead of sitting behind them. This has to come after
   the .wh-hero.tall rule higher up the file — same specificity, so position
   decides. */
@media (max-width:900px){
  .wh-hero.tall.home-hero{padding-bottom:250px}
}

/* ---- Home banner height ----------------------------------------------
   Cut to roughly 60% of what it was. Padding alone could not get there —
   the content itself was about 415px of the old 720 — so the display type
   comes down with it. Scoped to .home-hero so the product banners and the
   interior pages keep the sizes they were drawn at.
   ---------------------------------------------------------------------- */
.wh-hero.tall.home-hero{padding:144px 0 46px}
.home-hero .h-xl{font-size:clamp(30px,3.2vw,42px)}
.home-hero .wh-crumb{margin-bottom:10px}
.home-hero .lede{margin-top:12px;font-size:16px}
.home-hero .hero-actions{margin-top:20px}

@media (max-width:900px){
  .wh-hero.tall.home-hero{padding:126px 0 150px}
  .home-hero .h-xl{font-size:clamp(27px,6.8vw,34px)}
  .home-hero .lede{font-size:15.5px}
}

/* ---- Product cards on a light row ------------------------------------
   The cards were drawn for the dark sections. On white they need the
   white-section treatment or they read as three dark holes punched in
   the page.
   ---------------------------------------------------------------------- */
.section-white .prod{background:#fff;border-color:#E4E4E0}
.section-white a.prod:hover{border-color:#CFCFCA;background:var(--light)}
.section-white .prod img{border-bottom-color:#E4E4E0}
.section-white .prod h3{color:var(--ink)}
.section-white .prod p{color:var(--grey)}

/* ---- Home banner -----------------------------------------------------
   Twenty per cent taller than the last pass, and the headline set in
   Plus Jakarta Sans at 500 rather than the serif. A medium weight needs
   a touch more negative tracking than the serif did to hold together at
   display size.
   ---------------------------------------------------------------------- */
.wh-hero.tall.home-hero{padding:182px 0 84px}
.home-hero .h-xl{
  font-family:var(--sans);font-weight:500;letter-spacing:-.032em;line-height:1.1;
  font-size:clamp(31px,3.4vw,45px);
}
.home-hero .h-xl em{font-weight:500}

@media (max-width:900px){
  .wh-hero.tall.home-hero{padding:150px 0 214px}
  .home-hero .h-xl{font-size:clamp(28px,7vw,36px)}
}

/* ---- Application form ------------------------------------------------
   Full width of the column rather than a card in one half of it: six
   fields do not need a two-column page, and a broker filling this in on
   a laptop should not be typing into a 400px gutter.
   ---------------------------------------------------------------------- */
.apply-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 24px}
.apply-grid .f{margin:0}
.apply-grid .wide{grid-column:span 2}
.apply-grid .full{grid-column:1 / -1}
.apply-form textarea{min-height:130px}

.apply-foot{
  display:flex;align-items:flex-start;gap:28px;flex-wrap:wrap;
  margin-top:26px;padding-top:24px;border-top:1px solid #E4E4E0;
}
.apply-foot .btn{flex:none}
.apply-foot .consent{margin:0;flex:1;min-width:280px;max-width:640px}

@media (max-width:900px){
  .apply-grid{grid-template-columns:1fr 1fr}
  .apply-grid .wide{grid-column:1 / -1}
}
@media (max-width:560px){
  .apply-grid{grid-template-columns:1fr}
  .apply-grid .wide{grid-column:auto}
}