/* Self-hosted from @fontsource (same files Google Fonts serves, SIL OFL).
   Served from our own origin so there is no third-party DNS + TLS + CSS
   round trip before text can paint, and no request to Google before a
   visitor has consented to anything — which matters for the POPIA /
   Consent Mode work. Only the weights the stylesheet actually uses are
   shipped: Schibsted 500/600/700, Public Sans 400/600/700. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;
  font-display:swap;src:url(fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;
  font-display:swap;src:url(fonts/schibsted-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:700;
  font-display:swap;src:url(fonts/schibsted-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;
  font-display:swap;src:url(fonts/public-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;
  font-display:swap;src:url(fonts/public-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:700;
  font-display:swap;src:url(fonts/public-sans-latin-700-normal.woff2) format("woff2")}

/* Tender Grow Finance Brokers — design system
   Navy/gold institutional. Grotesque headings, serif prose. */

:root{
  --navy-900:#071A33;
  --navy-800:#0B274B;
  --navy-600:#16416E;
  --navy-400:#3A6596;
  --gold:#B7892F;
  --gold-lift:#D9A94A;
  --gold-soft:#F0E2C4;
  --paper:#EEF1F6;
  --paper-2:#F7F9FC;
  --white:#fff;
  --ink:#16202E;
  --muted:#5A6879;
  --faint:#8794A5;
  --rule:#D5DDE8;
  --rule-soft:#E4EAF2;
  --pass:#1F6F4A;
  --maybe:#8A6516;
  --fail:#9A3324;
  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --r-sm:3px;        /* bars, badges, meters, file buttons */
  --r:4px;        /* controls */
  --r-card:7px;   /* panels and cards */
  --r-shot:10px;  /* photography */
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--serif);font-size:17.5px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums;
  letter-spacing:-.005em;
}
/* every figure aligns in a column.
   NOT table.cmp td: tabular figures also give the full stop and the comma a
   digit's advance width, which is invisible in a column of numbers and reads
   as a space before the punctuation in a cell of prose. Comparison cells hold
   sentences, so they opt in per cell with .num instead. */
.calc__v,.fact__n,.buyer__nums b,.worked__dl dd,table.cmp td.num,.summary-box dd,
.calc__val,.meter__val b,.slot__size{font-variant-numeric:tabular-nums lining-nums}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(34px,5.4vw,66px);letter-spacing:-.035em}
h2{font-size:clamp(27px,3.4vw,40px);letter-spacing:-.03em}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.02em}
h4{font-size:17px;letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:68ch}
ul,ol{max-width:68ch}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:var(--r-sm)}

.wrap{width:min(var(--wrap),100% - 44px);margin-inline:auto}
.lede{font-size:clamp(19px,2.1vw,22px);color:var(--muted);line-height:1.6}
.sub{color:var(--muted)}
.tight{max-width:60ch}
.center-measure{max-width:62ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.01em;
  padding:14px 22px;border-radius:var(--r);border:1.5px solid transparent;
  cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;
  text-align:center;
}
.btn:hover{text-decoration:none}
.btn-gold{background:var(--gold);color:#140F02;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-lift);border-color:var(--gold-lift)}
.btn-navy{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn-navy:hover{background:var(--navy-600);border-color:var(--navy-600)}
.btn-ghost{border-color:var(--rule);color:var(--navy-800);background:transparent}
.btn-ghost:hover{border-color:var(--navy-800);background:var(--paper-2)}
.btn-ghost-light{border-color:rgba(255,255,255,.34);color:#fff;background:transparent}
.btn-ghost-light:hover{border-color:var(--gold-lift);color:var(--gold-lift)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
.masthead{background:var(--white);border-bottom:1px solid var(--rule-soft);position:sticky;top:0;z-index:60}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:auto;height:46px}
.nav{display:flex;align-items:center;gap:22px}
.nav a{font-family:var(--sans);font-size:15px;white-space:nowrap;font-weight:500;color:var(--ink)}
.nav a:hover{color:var(--navy-600);text-decoration:none}
.nav a[aria-current="page"]{color:var(--navy-600);box-shadow:inset 0 -2px 0 var(--gold)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{padding:11px 17px;font-size:15px}
.lbl-sm{display:none}
.burger{display:none;background:none;border:1.5px solid var(--rule);border-radius:var(--r);
  width:46px;height:42px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{display:block;width:19px;height:2px;background:var(--navy-800)}

/* ---------- hero ---------- */
.hero{background:var(--navy-900);color:#fff;padding:76px 0 0;overflow:hidden;position:relative}
/* The gold radial wash that used to sit here was a leftover from the centred
   hero. In the split hero it falls behind the photograph, so it was pure
   decoration. The scrim on .hero__shot does the real work: it buys contrast
   for the white headline where the photo meets the copy. */
.hero__in{position:relative;z-index:1}
.hero h1{color:#fff;max-width:20ch;text-wrap:balance}
.hero__lede{font-size:clamp(18px,2.1vw,21.5px);color:#BCCBDE;max-width:62ch;line-height:1.6}
.hero .btn-row{margin-top:28px}
.hero__note{font-family:var(--sans);font-size:14px;color:#8FA3BC;margin:16px 0 0}

/* the gap chart — the one loud element */
.gap{margin-top:58px;padding:30px 0 46px;border-top:1px solid rgba(255,255,255,.14)}
.gap__cap{font-family:var(--sans);font-size:14.5px;color:var(--gold-lift);font-weight:600;margin:0 0 26px}
.gap__rail{display:grid;grid-template-columns:repeat(4,1fr);position:relative;gap:0}
.gap__rail::before{
  content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:rgba(255,255,255,.22);
}
.node{position:relative;padding-right:14px}
.node__dot{width:19px;height:19px;border-radius:50%;background:var(--navy-900);
  border:2px solid rgba(255,255,255,.4);position:relative;z-index:2}
.node--fund .node__dot{border-color:var(--gold);background:var(--gold)}
.node--paid .node__dot{border-color:var(--gold-lift)}
.node__day{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--gold-lift);
  letter-spacing:.02em;margin-top:14px}
.node__t{font-family:var(--sans);font-size:15.5px;font-weight:600;color:#fff;margin-top:3px;line-height:1.3}
.node__d{font-size:14.5px;color:#93A6BE;line-height:1.5;margin-top:4px;max-width:24ch}
.gap__bars{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr)}
.bar{height:auto;border-radius:var(--r-sm);padding:9px 14px;font-family:var(--sans);
  font-size:13.5px;font-weight:600;line-height:1.3}
.bar--out{grid-row:1;grid-column:2 / 4;border:0;background:none;padding:0 0 8px;
  color:#9FB3CA;font-size:14px;font-weight:500}
.bar--fund{grid-row:2;grid-column:2 / 4;background:var(--gold);color:#140F02;margin-top:0;
  position:relative;
  transform-origin:left center}
@media(prefers-reduced-motion:no-preference){
  .bar--fund{animation:fill .9s cubic-bezier(.22,.7,.3,1) .25s both}
  @keyframes fill{from{transform:scaleX(.03);opacity:.3}to{transform:scaleX(1);opacity:1}}
}

/* ---------- sections ---------- */
.sec{padding:84px 0}
.sec--paper{background:var(--paper)}
.sec--soft{background:var(--paper-2)}
.sec--navy{background:var(--navy-800);color:#fff}
.sec--navy h2,.sec--navy h3{color:#fff}
.sec--navy p{color:#C3D1E2}
.sec--tight{padding:60px 0}
.sec__head{margin-bottom:42px;max-width:64ch}
.sec__head p{margin-bottom:0}

/* asymmetric services: lead feature + two supports */
.offer{display:grid;grid-template-columns:1.32fr 1fr;gap:26px;align-items:stretch}
.offer__lead{background:var(--navy-800);color:#fff;border-radius:var(--r-card);padding:40px;
  display:flex;flex-direction:column}
.offer__lead h3{color:#fff;font-size:clamp(23px,2.5vw,30px)}
.offer__lead p{color:#C3D1E2}
.offer__tag{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--gold-lift);margin:0 0 14px}
.offer__list{list-style:none;padding:0;margin:4px 0 26px}
.offer__list li{font-family:var(--sans);font-size:15.5px;color:#D7E1EE;padding:9px 0 9px 25px;
  position:relative;border-bottom:1px solid rgba(255,255,255,.1)}
.offer__list li::before{content:"";position:absolute;left:0;top:17px;width:11px;height:2px;background:var(--gold)}
.offer__side{display:grid;gap:26px;align-content:stretch}
.offer__card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:30px;display:flex;flex-direction:column}
.offer__card h3{margin-bottom:8px}
.offer__card p{font-size:16.5px;margin-bottom:16px}
.offer__more{font-family:var(--sans);font-size:15px;font-weight:600;margin-top:auto}

/* gap/compare table */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;min-width:620px;font-family:var(--sans);font-size:15.5px}
table.cmp caption{text-align:left;font-size:14.5px;color:var(--muted);padding-bottom:12px;font-family:var(--sans)}
table.cmp th,table.cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--rule)}
table.cmp thead th{font-weight:700;color:var(--navy-800);border-bottom:2px solid var(--navy-800);
  font-size:14px}
table.cmp tbody th{font-weight:600}
table.cmp tr:last-child td,table.cmp tr:last-child th{border-bottom:none}
.cmp__no{color:var(--fail);font-weight:600}
.cmp__yes{color:var(--pass);font-weight:600}

/* ---------- qualification matcher ---------- */
.tool{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.tool__head{padding:28px 32px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.tool__head h3{margin-bottom:6px}
.tool__head p{margin:0;font-size:16px;color:var(--muted)}
.tool__body{padding:32px}
.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.field label,.field legend{display:block;font-family:var(--sans);font-weight:600;font-size:15px;
  margin-bottom:8px;padding:0}
.field__hint{font-family:var(--sans);font-size:13.5px;color:var(--faint);margin:6px 0 0}
.field select,.field input[type=text],.field input[type=tel],.field input[type=email],
.field input[type=number],.field textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--white);
  border:1.5px solid var(--rule);border-radius:var(--r);padding:13px 14px;
}
.field select:focus,.field input:focus,.field textarea:focus{border-color:var(--navy-600);outline:none;
  box-shadow:0 0 0 3px rgba(22,65,110,.13)}
.field textarea{min-height:130px;resize:vertical;font-family:var(--serif);font-size:17px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;font-family:var(--sans);font-size:15px;padding:10px 16px;
  border:1.5px solid var(--rule);border-radius:var(--r);cursor:pointer;background:var(--white)}
.chip input:checked + span{border-color:var(--navy-800);background:var(--navy-800);color:#fff}
.chip input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}

.results{margin-top:30px;border-top:1px solid var(--rule);padding-top:26px}
.results[hidden]{display:none}
.result{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule-soft);align-items:flex-start}
.result:last-child{border-bottom:none}
.result__flag{flex:0 0 auto;font-family:var(--sans);font-size:12.5px;font-weight:700;
  padding:5px 10px;border-radius:var(--r-sm);margin-top:2px;min-width:86px;text-align:center}
.flag--pass{background:#E3F0E9;color:var(--pass)}
.flag--maybe{background:var(--gold-soft);color:var(--maybe)}
.flag--fail{background:#F6E5E2;color:var(--fail)}
.result__t{font-family:var(--sans);font-weight:600;font-size:16.5px;margin:0 0 3px}
.result__d{margin:0;font-size:16px;color:var(--muted)}
.results__sum{background:var(--paper);border-left:3px solid var(--gold);padding:18px 22px;
  border-radius:0 var(--r) var(--r) 0;margin-bottom:24px}
.results__sum p{margin:0;font-size:17px}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.calc__out{background:var(--navy-800);color:#fff;border-radius:var(--r-card);padding:32px}
.calc__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.calc__row:last-of-type{border-bottom:none}
.calc__k{font-family:var(--sans);font-size:15px;color:#B6C7DB}
.calc__v{font-family:var(--sans);font-size:clamp(21px,2.6vw,27px);font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-align:right}
.calc__v--gold{color:var(--gold-lift)}
.calc__note{font-size:14.5px;color:#93A6BE;margin:20px 0 0;line-height:1.55}
input[type=range]{width:100%;accent-color:var(--navy-600);height:28px}
.calc__val{font-family:var(--sans);font-weight:700;font-size:21px;font-variant-numeric:tabular-nums;
  color:var(--navy-800)}

.disclaim{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:22px 24px;margin-top:28px}
.disclaim p{margin:0;font-size:15.5px;color:var(--muted)}
.disclaim p + p{margin-top:10px}

/* ---------- steps (a real sequence) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.step{padding:0 26px 0 0;border-top:2px solid var(--navy-800);padding-top:20px;counter-increment:s}
.step::before{content:counter(s);font-family:var(--sans);font-weight:700;font-size:14px;
  color:var(--gold);display:block;margin-bottom:10px}
.step h3{font-size:19px;margin-bottom:7px}
.step p{font-size:16px;color:var(--muted);margin:0}
.sec--navy .step{border-top-color:var(--gold)}
.sec--navy .step p{color:#B6C7DB}

/* ---------- plain feature rows ---------- */
.rows{display:grid;gap:0}
.row{display:grid;grid-template-columns:230px 1fr;gap:34px;padding:26px 0;
  border-bottom:1px solid var(--rule)}
.row:first-child{border-top:1px solid var(--rule)}
.row h3{margin:0;font-size:19px}
.row p{margin:0;color:var(--muted)}
.row__k{font-family:var(--sans)}

/* ---------- stats ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.fact{border-left:2px solid var(--gold);padding-left:20px}
/* These are statements, not figures. At 38px the sentence shouted and the
   explanation under it read as a caption; the pair now reads as one unit. */
.fact__n{font-family:var(--sans);font-size:clamp(21px,2.1vw,25px);font-weight:700;
  letter-spacing:-.022em;line-height:1.18}
.fact__d{font-size:16.5px;color:var(--muted);margin:9px 0 0;line-height:1.55;max-width:38ch}
.sec--navy .fact__d{color:#B6C7DB}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule);max-width:78ch}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{font-family:var(--sans);font-weight:600;font-size:17.5px;padding:20px 40px 20px 0;
  cursor:pointer;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:28px;width:11px;height:11px;
  border-right:2px solid var(--navy-600);border-bottom:2px solid var(--navy-600);
  transform:rotate(45deg);transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq .ans{padding:0 0 22px;color:var(--muted)}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- cta band ---------- */
.band{background:var(--gold);color:#140F02;padding:56px 0}
.band__in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.band h2{margin:0 0 6px;color:#140F02}
.band p{margin:0;color:#3D300F;font-size:18px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
.panel{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);padding:32px}
.panel--navy{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.panel--navy h3{color:#fff}
.deets{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.deets li{display:grid;gap:2px}
.deets b{font-family:var(--sans);font-size:13.5px;color:var(--gold-lift);font-weight:700}
.deets a,.deets span{color:#E6EDF6;font-size:17px}
.deets a:hover{color:var(--gold-lift)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-grid .span-2{grid-column:1 / -1}

/* ---------- footer ---------- */
.foot{background:var(--navy-900);color:#9FB1C7;padding:60px 0 30px;font-size:16px}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.foot img{height:54px;width:auto;margin-bottom:16px}
.foot__h{font-family:var(--sans);font-size:13px;color:var(--gold-lift);margin:0 0 14px;
  font-weight:600;letter-spacing:.04em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{color:#B9C8DB;font-size:15.5px}
.foot a:hover{color:#fff}
.foot__legal{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13);
  font-size:13.5px;line-height:1.65;color:#7D90A8}
.foot__legal p{max-width:none;margin:0 0 9px}
.foot__bar{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:13.5px}

/* ---------- misc ---------- */
.crumb{font-family:var(--sans);font-size:14px;color:var(--faint);padding:18px 0 0}
.crumb a{color:var(--muted)}
.pagehead{background:var(--navy-800);color:#fff;padding:60px 0 64px}
.pagehead h1{color:#fff;margin-bottom:14px}
.pagehead p{color:#BCCBDE;font-size:clamp(18px,2vw,21px);max-width:58ch;margin:0}
.prose h2{margin-top:46px}
.prose h3{margin-top:32px}
.prose ul{padding-left:22px}
.prose li{margin-bottom:9px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#140F02;padding:12px 18px;
  font-family:var(--sans);font-weight:600;z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .nav{gap:17px}
  .nav a{font-size:14.5px}
  .nav-cta .btn-ghost{display:none}
}
@media(max-width:1000px){
  .offer{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr;gap:26px}
  .contact{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 22px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:1023px){
  .nav,.nav-cta .btn-ghost{display:none}
  .burger{display:flex}
  .masthead.open .nav{
    display:flex;position:absolute;left:0;right:0;top:100%;background:var(--white);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 20px;
    border-bottom:1px solid var(--rule);border-bottom:1px solid var(--rule)
  }
  .masthead.open .nav a{padding:14px 0;border-bottom:1px solid var(--rule-soft);font-size:17px}
  .hero{padding-top:52px}
  .gap__rail,.gap__bars{grid-template-columns:1fr}
  .gap__rail::before{display:none}
  .node{padding:0 0 22px 24px;border-left:1px solid rgba(255,255,255,.22);margin-left:9px}
  .node__dot{position:absolute;left:-10px;top:1px}
  .node__day{margin-top:0}
  .node__d{max-width:none}
  .bar{grid-column:1 / -1 !important}
  .bar--fund{margin-top:9px}
  .facts{grid-template-columns:1fr;gap:22px}
  .row{grid-template-columns:1fr;gap:6px}
  .fields,.form-grid{grid-template-columns:1fr}
  .sec{padding:60px 0}
  .tool__body,.tool__head{padding:24px 20px}
  .panel,.offer__lead,.offer__card,.calc__out{padding:26px 22px}
  .band{padding:44px 0}
}
@media(max-width:560px){
  body{font-size:17px}
  .lbl-lg{display:none}
  .lbl-sm{display:inline}
  .nav-cta .btn{padding:11px 14px}
  .wrap{width:min(var(--wrap),100% - 32px)}
  .steps{grid-template-columns:1fr;gap:24px}
  .foot__grid{grid-template-columns:1fr}
  .brand img{height:38px}
  .btn{width:100%}
  .btn-row{gap:10px}
  .nav-cta .btn{width:auto}
  .band__in .btn{width:auto}
  .result{flex-direction:column;gap:8px}
}

/* ═══════════════ photography ═══════════════ */
.shot{position:relative;overflow:hidden;border-radius:var(--r-shot);background:var(--navy-900)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot--band{border-radius:0;height:clamp(260px,38vw,440px)}
.shot--band img{height:100%}
.band-photo{position:relative;background:var(--navy-900)}
.band-photo .shot--band img{opacity:.42}
.band-photo__cap{position:absolute;inset:0;display:flex;align-items:center}
.band-photo__cap .wrap{width:min(var(--wrap),100% - 44px)}
.band-photo h2{color:#fff;max-width:20ch;margin-bottom:12px}
.band-photo p{color:#D4DEEA;max-width:52ch;font-size:clamp(17px,2vw,20px);margin:0}

.whofund{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.whofund figure{margin:0;display:flex;flex-direction:column}
.whofund .shot{aspect-ratio:4/3;margin-bottom:16px}
.whofund figcaption{font-family:var(--sans);font-size:15.5px;color:var(--muted);line-height:1.5}
.whofund b{display:block;font-size:17.5px;color:var(--ink);margin-bottom:4px;font-weight:600}

.splitshot{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.splitshot .shot{aspect-ratio:5/4}
.splitshot--flip .splitshot__txt{order:2}

/* ═══════════════ application flow ═══════════════ */
.apply-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:38px}
.apply-rail li{list-style:none;font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--faint);border-top:3px solid var(--rule);padding:14px 16px 0 0}
.apply-rail li[data-on="1"]{color:var(--navy-800);border-top-color:var(--gold)}
.apply-rail li[data-done="1"]{color:var(--navy-600);border-top-color:var(--navy-600)}
.apply-rail span{display:block;font-size:12.5px;font-weight:700;color:var(--gold);margin-bottom:3px}
.apply-rail li[data-on="0"][data-done="0"] span{color:var(--faint)}

.astep[hidden]{display:none}
.astep h3{font-size:clamp(22px,2.6vw,28px);margin-bottom:6px}
.astep__lede{color:var(--muted);margin-bottom:28px;max-width:62ch}

.prodpick{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:28px}
.prodpick label{position:relative;display:block;cursor:pointer}
.prodpick input{position:absolute;opacity:0;width:0;height:0}
.prodpick .box{display:flex;flex-direction:column;border:1.5px solid var(--rule);
  border-radius:var(--r);padding:22px;height:100%;background:var(--white);
  transition:border-color .15s ease,background .15s ease}
.prodpick input:checked + .box{border-color:var(--navy-800);background:var(--paper-2);
  box-shadow:inset 3px 0 0 var(--gold)}
.prodpick input:focus-visible + .box{outline:3px solid var(--gold);outline-offset:2px}
.prodpick .box b{display:block;font-family:var(--sans);font-size:17.5px;margin-bottom:5px}
.prodpick .box > span{display:block;font-size:15.5px;color:var(--muted);line-height:1.5}

.docs{display:grid;gap:14px;margin-bottom:24px}
.doc{border:1.5px solid var(--rule);border-radius:var(--r);padding:18px 20px;background:var(--white)}
.doc[hidden]{display:none}
.doc__top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:4px}
.doc__n{font-family:var(--sans);font-weight:600;font-size:16.5px}
.doc__req{font-family:var(--sans);font-size:12px;font-weight:700;padding:3px 8px;border-radius:var(--r-sm);
  background:var(--gold-soft);color:var(--maybe);flex:0 0 auto}
.doc__req[data-opt="1"]{background:var(--paper);color:var(--faint)}
.doc__d{font-size:15px;color:var(--muted);margin:0 0 12px}
.doc input[type=file]{width:100%;font-family:var(--sans);font-size:14.5px;
  border:1.5px dashed var(--rule);border-radius:var(--r);padding:12px;background:var(--paper-2);
  cursor:pointer}
.doc input[type=file]::file-selector-button{font-family:var(--sans);font-weight:600;font-size:14px;
  border:0;background:var(--navy-800);color:#fff;padding:9px 15px;border-radius:var(--r-sm);
  margin-right:12px;cursor:pointer}
.doc input[type=file]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.doc--has{border-color:var(--pass);background:#FAFDFB}

.anav{display:flex;justify-content:space-between;gap:14px;margin-top:32px;
  padding-top:26px;border-top:1px solid var(--rule);flex-wrap:wrap}
.consent{background:var(--paper);border-left:3px solid var(--navy-800);padding:20px 22px;
  border-radius:0 var(--r) var(--r) 0;margin:26px 0}
.consent label{display:flex;gap:12px;align-items:flex-start;font-size:16px;cursor:pointer}
.consent input{margin-top:5px;width:19px;height:19px;flex:0 0 auto;accent-color:var(--navy-800)}
.summary-box{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:22px 24px;margin-bottom:24px}
.summary-box dl{display:grid;grid-template-columns:auto 1fr;gap:9px 22px;margin:0;
  font-family:var(--sans);font-size:15.5px}
.summary-box dt{color:var(--muted)}
.summary-box dd{margin:0;font-weight:600;color:var(--ink)}

@media(max-width:1000px){
  .whofund{grid-template-columns:1fr;gap:28px}
  .splitshot{grid-template-columns:1fr;gap:26px}
  .splitshot--flip .splitshot__txt{order:0}
  .prodpick{grid-template-columns:1fr}
}
@media(max-width:860px){
  .apply-rail{grid-template-columns:repeat(2,1fr);gap:10px 0}
  .apply-rail li{font-size:13px;padding:11px 12px 0 0}
  .band-photo h2{font-size:clamp(25px,6vw,34px)}
}
@media(max-width:560px){
  .apply-rail{grid-template-columns:1fr 1fr}
  .anav .btn{width:auto;flex:1}
  .doc{padding:15px 16px}
}

/* ═══════════════ upload slots + size meter ═══════════════ */
.slots{display:grid;gap:10px}
/* The native control cannot be fully styled — "No file chosen" is browser
   chrome — so the input is taken out of the visual flow (still focusable,
   still in the tab order) and a label does the work as a real drop zone. */
.slot{position:relative}
.slot__in{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.slot__zone{display:flex;align-items:center;gap:13px;cursor:pointer;
  border:1.5px dashed var(--rule);border-radius:var(--r);padding:13px 15px;
  background:var(--paper-2);transition:border-color .15s ease,background .15s ease}
.slot__zone:hover{border-color:var(--navy-400);background:#fff}
.slot__in:focus-visible + .slot__zone{outline:3px solid var(--gold);outline-offset:2px}
.slot__ico{width:20px;height:20px;color:var(--navy-400);flex:0 0 auto}
.slot__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.slot__txt b{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);
  letter-spacing:-.005em}
.slot__hint{font-style:normal;font-size:13.5px;color:var(--faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.slot.is-over .slot__zone{border-color:var(--gold);background:var(--gold-soft);
  border-style:solid}
.slot--has .slot__zone{border-style:solid;border-color:var(--pass);background:#F5FBF7}
.slot--has .slot__ico{color:var(--pass)}
.slot--has .slot__hint{color:var(--pass);font-weight:500}
.slot__drop{appearance:none;border:0;background:none;padding:6px;margin:-6px;cursor:pointer;
  color:var(--faint);flex:0 0 auto;line-height:0;border-radius:var(--r-sm)}
.slot__drop svg{width:15px;height:15px}
.slot__drop:hover{color:var(--fail)}
.slot__drop:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* per-group tally, so the six statement slots read as progress not a wall */
.doc__top{display:flex;justify-content:flex-start;align-items:center;gap:11px;
  margin-bottom:4px;flex-wrap:wrap}
.doc__n{flex:1 1 auto;min-width:0}
.doc__tally{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--faint);
  font-variant-numeric:tabular-nums lining-nums}
.doc__tally[data-tally="1"]{color:var(--pass)}
.doc--has{border-color:var(--pass);background:#FCFEFD}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(34px,5.4vw,66px);letter-spacing:-.035em}
h2{font-size:clamp(27px,3.4vw,40px);letter-spacing:-.03em}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.02em}
h4{font-size:17px;letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:68ch}
ul,ol{max-width:68ch}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:var(--r-sm)}

.wrap{width:min(var(--wrap),100% - 44px);margin-inline:auto}
.lede{font-size:clamp(19px,2.1vw,22px);color:var(--muted);line-height:1.6}
.sub{color:var(--muted)}
.tight{max-width:60ch}
.center-measure{max-width:62ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.01em;
  padding:14px 22px;border-radius:var(--r);border:1.5px solid transparent;
  cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;
  text-align:center;
}
.btn:hover{text-decoration:none}
.btn-gold{background:var(--gold);color:#140F02;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-lift);border-color:var(--gold-lift)}
.btn-navy{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn-navy:hover{background:var(--navy-600);border-color:var(--navy-600)}
.btn-ghost{border-color:var(--rule);color:var(--navy-800);background:transparent}
.btn-ghost:hover{border-color:var(--navy-800);background:var(--paper-2)}
.btn-ghost-light{border-color:rgba(255,255,255,.34);color:#fff;background:transparent}
.btn-ghost-light:hover{border-color:var(--gold-lift);color:var(--gold-lift)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
/* ---------- hero ---------- */
.hero{background:var(--navy-900);color:#fff;padding:76px 0 0;overflow:hidden;position:relative}
/* The gold radial wash that used to sit here was a leftover from the centred
   hero. In the split hero it falls behind the photograph, so it was pure
   decoration. The scrim on .hero__shot does the real work: it buys contrast
   for the white headline where the photo meets the copy. */
.hero__in{position:relative;z-index:1}
.hero h1{color:#fff;max-width:20ch;text-wrap:balance}
.hero__lede{font-size:clamp(18px,2.1vw,21.5px);color:#BCCBDE;max-width:62ch;line-height:1.6}
.hero .btn-row{margin-top:28px}
.hero__note{font-family:var(--sans);font-size:14px;color:#8FA3BC;margin:16px 0 0}

/* the gap chart — the one loud element */
.gap{margin-top:58px;padding:30px 0 46px;border-top:1px solid rgba(255,255,255,.14)}
.gap__cap{font-family:var(--sans);font-size:14.5px;color:var(--gold-lift);font-weight:600;margin:0 0 26px}
.gap__rail{display:grid;grid-template-columns:repeat(4,1fr);position:relative;gap:0}
.gap__rail::before{
  content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:rgba(255,255,255,.22);
}
.node{position:relative;padding-right:14px}
.node__dot{width:19px;height:19px;border-radius:50%;background:var(--navy-900);
  border:2px solid rgba(255,255,255,.4);position:relative;z-index:2}
.node--fund .node__dot{border-color:var(--gold);background:var(--gold)}
.node--paid .node__dot{border-color:var(--gold-lift)}
.node__day{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--gold-lift);
  letter-spacing:.02em;margin-top:14px}
.node__t{font-family:var(--sans);font-size:15.5px;font-weight:600;color:#fff;margin-top:3px;line-height:1.3}
.node__d{font-size:14.5px;color:#93A6BE;line-height:1.5;margin-top:4px;max-width:24ch}
.gap__bars{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr)}
.bar{height:auto;border-radius:var(--r-sm);padding:9px 14px;font-family:var(--sans);
  font-size:13.5px;font-weight:600;line-height:1.3}
.bar--out{grid-row:1;grid-column:2 / 4;border:0;background:none;padding:0 0 8px;
  color:#9FB3CA;font-size:14px;font-weight:500}
.bar--fund{grid-row:2;grid-column:2 / 4;background:var(--gold);color:#140F02;margin-top:0;
  position:relative;
  transform-origin:left center}
@media(prefers-reduced-motion:no-preference){
  .bar--fund{animation:fill .9s cubic-bezier(.22,.7,.3,1) .25s both}
  @keyframes fill{from{transform:scaleX(.03);opacity:.3}to{transform:scaleX(1);opacity:1}}
}

/* ---------- sections ---------- */
.sec{padding:84px 0}
.sec--paper{background:var(--paper)}
.sec--soft{background:var(--paper-2)}
.sec--navy{background:var(--navy-800);color:#fff}
.sec--navy h2,.sec--navy h3{color:#fff}
.sec--navy p{color:#C3D1E2}
.sec--tight{padding:60px 0}
.sec__head{margin-bottom:42px;max-width:64ch}
.sec__head p{margin-bottom:0}

/* asymmetric services: lead feature + two supports */
.offer{display:grid;grid-template-columns:1.32fr 1fr;gap:26px;align-items:stretch}
.offer__lead{background:var(--navy-800);color:#fff;border-radius:var(--r-card);padding:40px;
  display:flex;flex-direction:column}
.offer__lead h3{color:#fff;font-size:clamp(23px,2.5vw,30px)}
.offer__lead p{color:#C3D1E2}
.offer__tag{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--gold-lift);margin:0 0 14px}
.offer__list{list-style:none;padding:0;margin:4px 0 26px}
.offer__list li{font-family:var(--sans);font-size:15.5px;color:#D7E1EE;padding:9px 0 9px 25px;
  position:relative;border-bottom:1px solid rgba(255,255,255,.1)}
.offer__list li::before{content:"";position:absolute;left:0;top:17px;width:11px;height:2px;background:var(--gold)}
.offer__side{display:grid;gap:26px;align-content:stretch}
.offer__card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:30px;display:flex;flex-direction:column}
.offer__card h3{margin-bottom:8px}
.offer__card p{font-size:16.5px;margin-bottom:16px}
.offer__more{font-family:var(--sans);font-size:15px;font-weight:600;margin-top:auto}

/* gap/compare table */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;min-width:620px;font-family:var(--sans);font-size:15.5px}
table.cmp caption{text-align:left;font-size:14.5px;color:var(--muted);padding-bottom:12px;font-family:var(--sans)}
table.cmp th,table.cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--rule)}
table.cmp thead th{font-weight:700;color:var(--navy-800);border-bottom:2px solid var(--navy-800);
  font-size:14px}
table.cmp tbody th{font-weight:600}
table.cmp tr:last-child td,table.cmp tr:last-child th{border-bottom:none}
.cmp__no{color:var(--fail);font-weight:600}
.cmp__yes{color:var(--pass);font-weight:600}

/* ---------- qualification matcher ---------- */
.tool{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.tool__head{padding:28px 32px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.tool__head h3{margin-bottom:6px}
.tool__head p{margin:0;font-size:16px;color:var(--muted)}
.tool__body{padding:32px}
.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.field label,.field legend{display:block;font-family:var(--sans);font-weight:600;font-size:15px;
  margin-bottom:8px;padding:0}
.field__hint{font-family:var(--sans);font-size:13.5px;color:var(--faint);margin:6px 0 0}
.field select,.field input[type=text],.field input[type=tel],.field input[type=email],
.field input[type=number],.field textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--white);
  border:1.5px solid var(--rule);border-radius:var(--r);padding:13px 14px;
}
.field select:focus,.field input:focus,.field textarea:focus{border-color:var(--navy-600);outline:none;
  box-shadow:0 0 0 3px rgba(22,65,110,.13)}
.field textarea{min-height:130px;resize:vertical;font-family:var(--serif);font-size:17px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;font-family:var(--sans);font-size:15px;padding:10px 16px;
  border:1.5px solid var(--rule);border-radius:var(--r);cursor:pointer;background:var(--white)}
.chip input:checked + span{border-color:var(--navy-800);background:var(--navy-800);color:#fff}
.chip input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}

.results{margin-top:30px;border-top:1px solid var(--rule);padding-top:26px}
.results[hidden]{display:none}
.result{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule-soft);align-items:flex-start}
.result:last-child{border-bottom:none}
.result__flag{flex:0 0 auto;font-family:var(--sans);font-size:12.5px;font-weight:700;
  padding:5px 10px;border-radius:var(--r-sm);margin-top:2px;min-width:86px;text-align:center}
.flag--pass{background:#E3F0E9;color:var(--pass)}
.flag--maybe{background:var(--gold-soft);color:var(--maybe)}
.flag--fail{background:#F6E5E2;color:var(--fail)}
.result__t{font-family:var(--sans);font-weight:600;font-size:16.5px;margin:0 0 3px}
.result__d{margin:0;font-size:16px;color:var(--muted)}
.results__sum{background:var(--paper);border-left:3px solid var(--gold);padding:18px 22px;
  border-radius:0 var(--r) var(--r) 0;margin-bottom:24px}
.results__sum p{margin:0;font-size:17px}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.calc__out{background:var(--navy-800);color:#fff;border-radius:var(--r-card);padding:32px}
.calc__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.calc__row:last-of-type{border-bottom:none}
.calc__k{font-family:var(--sans);font-size:15px;color:#B6C7DB}
.calc__v{font-family:var(--sans);font-size:clamp(21px,2.6vw,27px);font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-align:right}
.calc__v--gold{color:var(--gold-lift)}
.calc__note{font-size:14.5px;color:#93A6BE;margin:20px 0 0;line-height:1.55}
input[type=range]{width:100%;accent-color:var(--navy-600);height:28px}
.calc__val{font-family:var(--sans);font-weight:700;font-size:21px;font-variant-numeric:tabular-nums;
  color:var(--navy-800)}

.disclaim{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:22px 24px;margin-top:28px}
.disclaim p{margin:0;font-size:15.5px;color:var(--muted)}
.disclaim p + p{margin-top:10px}

/* ---------- steps (a real sequence) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.step{padding:0 26px 0 0;border-top:2px solid var(--navy-800);padding-top:20px;counter-increment:s}
.step::before{content:counter(s);font-family:var(--sans);font-weight:700;font-size:14px;
  color:var(--gold);display:block;margin-bottom:10px}
.step h3{font-size:19px;margin-bottom:7px}
.step p{font-size:16px;color:var(--muted);margin:0}
.sec--navy .step{border-top-color:var(--gold)}
.sec--navy .step p{color:#B6C7DB}

/* ---------- plain feature rows ---------- */
.rows{display:grid;gap:0}
.row{display:grid;grid-template-columns:230px 1fr;gap:34px;padding:26px 0;
  border-bottom:1px solid var(--rule)}
.row:first-child{border-top:1px solid var(--rule)}
.row h3{margin:0;font-size:19px}
.row p{margin:0;color:var(--muted)}
.row__k{font-family:var(--sans)}

/* ---------- stats ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.fact{border-left:2px solid var(--gold);padding-left:20px}
/* These are statements, not figures. At 38px the sentence shouted and the
   explanation under it read as a caption; the pair now reads as one unit. */
.fact__n{font-family:var(--sans);font-size:clamp(21px,2.1vw,25px);font-weight:700;
  letter-spacing:-.022em;line-height:1.18}
.fact__d{font-size:16.5px;color:var(--muted);margin:9px 0 0;line-height:1.55;max-width:38ch}
.sec--navy .fact__d{color:#B6C7DB}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule);max-width:78ch}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{font-family:var(--sans);font-weight:600;font-size:17.5px;padding:20px 40px 20px 0;
  cursor:pointer;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:28px;width:11px;height:11px;
  border-right:2px solid var(--navy-600);border-bottom:2px solid var(--navy-600);
  transform:rotate(45deg);transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq .ans{padding:0 0 22px;color:var(--muted)}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- cta band ---------- */
.band{background:var(--gold);color:#140F02;padding:56px 0}
.band__in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.band h2{margin:0 0 6px;color:#140F02}
.band p{margin:0;color:#3D300F;font-size:18px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
.panel{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);padding:32px}
.panel--navy{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.panel--navy h3{color:#fff}
.deets{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.deets li{display:grid;gap:2px}
.deets b{font-family:var(--sans);font-size:13.5px;color:var(--gold-lift);font-weight:700}
.deets a,.deets span{color:#E6EDF6;font-size:17px}
.deets a:hover{color:var(--gold-lift)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-grid .span-2{grid-column:1 / -1}

/* ---------- footer ---------- */
.foot{background:var(--navy-900);color:#9FB1C7;padding:60px 0 30px;font-size:16px}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.foot img{height:54px;width:auto;margin-bottom:16px}
.foot__h{font-family:var(--sans);font-size:13px;color:var(--gold-lift);margin:0 0 14px;
  font-weight:600;letter-spacing:.04em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{color:#B9C8DB;font-size:15.5px}
.foot a:hover{color:#fff}
.foot__legal{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13);
  font-size:13.5px;line-height:1.65;color:#7D90A8}
.foot__legal p{max-width:none;margin:0 0 9px}
.foot__bar{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:13.5px}

/* ---------- misc ---------- */
.crumb{font-family:var(--sans);font-size:14px;color:var(--faint);padding:18px 0 0}
.crumb a{color:var(--muted)}
.pagehead{background:var(--navy-800);color:#fff;padding:60px 0 64px}
.pagehead h1{color:#fff;margin-bottom:14px}
.pagehead p{color:#BCCBDE;font-size:clamp(18px,2vw,21px);max-width:58ch;margin:0}
.prose h2{margin-top:46px}
.prose h3{margin-top:32px}
.prose ul{padding-left:22px}
.prose li{margin-bottom:9px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#140F02;padding:12px 18px;
  font-family:var(--sans);font-weight:600;z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .nav{gap:17px}
  .nav a{font-size:14.5px}
  .nav-cta .btn-ghost{display:none}
}
@media(max-width:1000px){
  .offer{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr;gap:26px}
  .contact{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 22px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:860px){
  .nav,.nav-cta .btn-ghost{display:none}
  .burger{display:flex}
  .masthead.open .nav{
    display:flex;position:absolute;left:0;right:0;top:100%;background:var(--white);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 20px;
    border-bottom:1px solid var(--rule);border-bottom:1px solid var(--rule)
  }
  .masthead.open .nav a{padding:14px 0;border-bottom:1px solid var(--rule-soft);font-size:17px}
  .hero{padding-top:52px}
  .gap__rail,.gap__bars{grid-template-columns:1fr}
  .gap__rail::before{display:none}
  .node{padding:0 0 22px 24px;border-left:1px solid rgba(255,255,255,.22);margin-left:9px}
  .node__dot{position:absolute;left:-10px;top:1px}
  .node__day{margin-top:0}
  .node__d{max-width:none}
  .bar{grid-column:1 / -1 !important}
  .bar--fund{margin-top:9px}
  .facts{grid-template-columns:1fr;gap:22px}
  .row{grid-template-columns:1fr;gap:6px}
  .fields,.form-grid{grid-template-columns:1fr}
  .sec{padding:60px 0}
  .tool__body,.tool__head{padding:24px 20px}
  .panel,.offer__lead,.offer__card,.calc__out{padding:26px 22px}
  .band{padding:44px 0}
}
@media(max-width:560px){
  body{font-size:17px}
  .lbl-lg{display:none}
  .lbl-sm{display:inline}
  .nav-cta .btn{padding:11px 14px}
  .wrap{width:min(var(--wrap),100% - 32px)}
  .steps{grid-template-columns:1fr;gap:24px}
  .foot__grid{grid-template-columns:1fr}
  .brand img{height:38px}
  .btn{width:100%}
  .btn-row{gap:10px}
  .nav-cta .btn{width:auto}
  .band__in .btn{width:auto}
  .result{flex-direction:column;gap:8px}
}

/* ═══════════════ photography ═══════════════ */
.shot{position:relative;overflow:hidden;border-radius:var(--r-shot);background:var(--navy-900)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot--band{border-radius:0;height:clamp(260px,38vw,440px)}
.shot--band img{height:100%}
.band-photo{position:relative;background:var(--navy-900)}
.band-photo .shot--band img{opacity:.42}
.band-photo__cap{position:absolute;inset:0;display:flex;align-items:center}
.band-photo__cap .wrap{width:min(var(--wrap),100% - 44px)}
.band-photo h2{color:#fff;max-width:20ch;margin-bottom:12px}
.band-photo p{color:#D4DEEA;max-width:52ch;font-size:clamp(17px,2vw,20px);margin:0}

.whofund{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.whofund figure{margin:0;display:flex;flex-direction:column}
.whofund .shot{aspect-ratio:4/3;margin-bottom:16px}
.whofund figcaption{font-family:var(--sans);font-size:15.5px;color:var(--muted);line-height:1.5}
.whofund b{display:block;font-size:17.5px;color:var(--ink);margin-bottom:4px;font-weight:600}

.splitshot{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.splitshot .shot{aspect-ratio:5/4}
.splitshot--flip .splitshot__txt{order:2}

/* ═══════════════ application flow ═══════════════ */
.apply-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:38px}
.apply-rail li{list-style:none;font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--faint);border-top:3px solid var(--rule);padding:14px 16px 0 0}
.apply-rail li[data-on="1"]{color:var(--navy-800);border-top-color:var(--gold)}
.apply-rail li[data-done="1"]{color:var(--navy-600);border-top-color:var(--navy-600)}
.apply-rail span{display:block;font-size:12.5px;font-weight:700;color:var(--gold);margin-bottom:3px}
.apply-rail li[data-on="0"][data-done="0"] span{color:var(--faint)}

.astep[hidden]{display:none}
.astep h3{font-size:clamp(22px,2.6vw,28px);margin-bottom:6px}
.astep__lede{color:var(--muted);margin-bottom:28px;max-width:62ch}

.prodpick{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:28px}
.prodpick label{position:relative;display:block;cursor:pointer}
.prodpick input{position:absolute;opacity:0;width:0;height:0}
.prodpick .box{display:flex;flex-direction:column;border:1.5px solid var(--rule);
  border-radius:var(--r);padding:22px;height:100%;background:var(--white);
  transition:border-color .15s ease,background .15s ease}
.prodpick input:checked + .box{border-color:var(--navy-800);background:var(--paper-2);
  box-shadow:inset 3px 0 0 var(--gold)}
.prodpick input:focus-visible + .box{outline:3px solid var(--gold);outline-offset:2px}
.prodpick .box b{display:block;font-family:var(--sans);font-size:17.5px;margin-bottom:5px}
.prodpick .box > span{display:block;font-size:15.5px;color:var(--muted);line-height:1.5}

.docs{display:grid;gap:14px;margin-bottom:24px}
.doc{border:1.5px solid var(--rule);border-radius:var(--r);padding:18px 20px;background:var(--white)}
.doc[hidden]{display:none}
.doc__top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:4px}
.doc__n{font-family:var(--sans);font-weight:600;font-size:16.5px}
.doc__req{font-family:var(--sans);font-size:12px;font-weight:700;padding:3px 8px;border-radius:var(--r-sm);
  background:var(--gold-soft);color:var(--maybe);flex:0 0 auto}
.doc__req[data-opt="1"]{background:var(--paper);color:var(--faint)}
.doc__d{font-size:15px;color:var(--muted);margin:0 0 12px}
.doc input[type=file]{width:100%;font-family:var(--sans);font-size:14.5px;
  border:1.5px dashed var(--rule);border-radius:var(--r);padding:12px;background:var(--paper-2);
  cursor:pointer}
.doc input[type=file]::file-selector-button{font-family:var(--sans);font-weight:600;font-size:14px;
  border:0;background:var(--navy-800);color:#fff;padding:9px 15px;border-radius:var(--r-sm);
  margin-right:12px;cursor:pointer}
.doc input[type=file]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.doc--has{border-color:var(--pass);background:#FAFDFB}

.anav{display:flex;justify-content:space-between;gap:14px;margin-top:32px;
  padding-top:26px;border-top:1px solid var(--rule);flex-wrap:wrap}
.consent{background:var(--paper);border-left:3px solid var(--navy-800);padding:20px 22px;
  border-radius:0 var(--r) var(--r) 0;margin:26px 0}
.consent label{display:flex;gap:12px;align-items:flex-start;font-size:16px;cursor:pointer}
.consent input{margin-top:5px;width:19px;height:19px;flex:0 0 auto;accent-color:var(--navy-800)}
.summary-box{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:22px 24px;margin-bottom:24px}
.summary-box dl{display:grid;grid-template-columns:auto 1fr;gap:9px 22px;margin:0;
  font-family:var(--sans);font-size:15.5px}
.summary-box dt{color:var(--muted)}
.summary-box dd{margin:0;font-weight:600;color:var(--ink)}

@media(max-width:1000px){
  .whofund{grid-template-columns:1fr;gap:28px}
  .splitshot{grid-template-columns:1fr;gap:26px}
  .splitshot--flip .splitshot__txt{order:0}
  .prodpick{grid-template-columns:1fr}
}
@media(max-width:860px){
  .apply-rail{grid-template-columns:repeat(2,1fr);gap:10px 0}
  .apply-rail li{font-size:13px;padding:11px 12px 0 0}
  .band-photo h2{font-size:clamp(25px,6vw,34px)}
}
@media(max-width:560px){
  .apply-rail{grid-template-columns:1fr 1fr}
  .anav .btn{width:auto;flex:1}
  .doc{padding:15px 16px}
}

/* ═══════════════ upload slots + size meter ═══════════════ */

.meter{border:1px solid var(--rule);border-radius:var(--r-card);padding:18px 20px;
  background:var(--paper-2);margin-top:6px}
.meter__top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-family:var(--sans);font-size:14.5px;margin-bottom:10px}
.meter__lab{font-weight:600}
.meter__val{color:var(--muted)}
.meter__val b{color:var(--ink);font-variant-numeric:tabular-nums}
.meter__bar{height:7px;border-radius:var(--r);background:var(--rule);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--pass);border-radius:var(--r);
  transition:width .25s ease,background .25s ease}
.meter__msg{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin:11px 0 0;
  line-height:1.5}
.meter[data-state="warn"]{border-color:var(--gold);background:#FDFAF2}
.meter[data-state="warn"] .meter__bar i{background:var(--gold)}
.meter[data-state="warn"] .meter__msg{color:var(--maybe)}
.meter[data-state="over"]{border-color:var(--fail);background:#FDF6F5}
.meter[data-state="over"] .meter__bar i{background:var(--fail)}
.meter[data-state="over"] .meter__msg{color:var(--fail);font-weight:600}

@media(max-width:620px){
  .slot{grid-template-columns:1fr;gap:5px}
  .slot__size{grid-column:1}
}

.summary-box:empty{display:none}

/* ═══════════════ buyer payment record ═══════════════ */
.buyer{border-top:1px solid var(--rule);margin-top:22px;padding-top:24px}
.buyer[hidden]{display:none}
.buyer__verdict{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.04em;
  display:inline-block;padding:6px 12px;border-radius:var(--r-sm);margin:0 0 20px}
.buyer[data-band="severe"] .buyer__verdict{background:#F6E5E2;color:var(--fail)}
.buyer[data-band="slow"]   .buyer__verdict{background:var(--gold-soft);color:var(--maybe)}
.buyer[data-band="better"] .buyer__verdict{background:#E7EEF7;color:var(--navy-600)}
.buyer[data-band="clear"]  .buyer__verdict{background:#E3F0E9;color:var(--pass)}
.buyer__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:24px}
.buyer__nums div{border-left:2px solid var(--gold);padding-left:16px}
.buyer__nums b{display:block;font-family:var(--sans);font-size:clamp(21px,2.6vw,29px);
  font-weight:700;letter-spacing:-.025em;line-height:1.1;font-variant-numeric:tabular-nums}
.buyer__nums span{font-size:14.5px;color:var(--muted);display:block;margin-top:5px;line-height:1.4}
.buyer__say{font-size:17.5px;margin-bottom:14px}
.buyer__plan{background:var(--paper);border-left:3px solid var(--navy-800);padding:16px 20px;
  border-radius:0 var(--r) var(--r) 0;margin:0;font-size:16.5px}

/* ═══════════════ pricing explainer ═══════════════ */
.priced__grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.priced h3{font-size:clamp(19px,2.1vw,23px)}
.worked{background:var(--navy-800);color:#fff;border-radius:var(--r-card);padding:34px}
.worked h3{color:#fff;margin-bottom:8px}
.worked__tag{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--gold-lift);
  letter-spacing:.04em;margin:0 0 12px}
.worked__lede{color:#B6C7DB;font-size:15.5px;margin-bottom:22px}
.worked__dl{display:grid;grid-template-columns:1fr auto;gap:11px 20px;margin:0 0 20px;
  font-family:var(--sans);font-size:15.5px}
.worked__dl dt{color:#C3D1E2}
.worked__dl dd{margin:0;font-weight:600;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.worked__dl .worked__sep{padding-top:13px;border-top:1px solid rgba(255,255,255,.18)}
.worked__dl .worked__tot{color:var(--gold-lift);font-weight:700;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.18)}
.worked__note{font-size:14.5px;color:#9FB4CC;margin:0;line-height:1.6}

@media(max-width:1000px){
  .priced__grid{grid-template-columns:1fr;gap:34px}
  .buyer__nums{grid-template-columns:1fr;gap:18px}
}

/* ═══════════════ direct upload progress ═══════════════ */
.up{grid-column:2;margin-top:7px;display:flex;align-items:center;gap:11px}
.up__bar{flex:1;height:5px;border-radius:var(--r-sm);background:var(--rule);overflow:hidden}
.up__bar i{display:block;height:100%;width:0;background:var(--navy-600);
  transition:width .2s ease;border-radius:var(--r-sm)}
.up__txt{font-family:var(--sans);font-size:12.5px;color:var(--muted);white-space:nowrap}
.up[data-state="done"] .up__bar i{background:var(--pass)}
.up[data-state="done"] .up__txt{color:var(--pass);font-weight:600}
@media(max-width:620px){ .up{grid-column:1} }

/* ═══════════════ two lead products of equal weight ═══════════════ */
.offer--two{grid-template-columns:1fr 1fr}
.offer__lead--alt{background:var(--navy-900)}
.offer__third{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.specs{border-top:2px solid var(--navy-800);margin:26px 0 8px}
.specs div{display:grid;grid-template-columns:200px 1fr;gap:26px;padding:15px 0;
  border-bottom:1px solid var(--rule)}
.specs dt{font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--navy-800);margin:0}
.specs dd{margin:0;color:var(--muted);font-size:16.5px}
@media(max-width:1000px){
  .offer--two,.offer__third{grid-template-columns:1fr}
}
@media(max-width:620px){
  .specs div{grid-template-columns:1fr;gap:3px;padding:13px 0}
}
.flag--info{background:#E7EEF7;color:var(--navy-600)}

/* reassurance block at the upload step */
.reassure{background:#F4F8F6;border:1px solid #CFE3D7;border-left:3px solid var(--pass);
  border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:0 0 20px}
.reassure p{margin:0;font-size:15.5px;color:#2C4A39}
.reassure a{color:var(--pass);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════
   MOTION
   One orchestrated moment on load in the hero; everything else is
   interaction feedback. All of it is switched off for anyone who has
   asked their system to reduce motion.
   ═══════════════════════════════════════════════════════════════════ */


/* --- hero entrance, one sequence --- */
@keyframes tg-rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes tg-rail{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tg-dot{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes tg-fill{from{transform:scaleX(.02);opacity:.25}to{transform:scaleX(1);opacity:1}}
}

@media(prefers-reduced-motion:no-preference){
      

  .gap__rail::before{transform-origin:left center;animation:tg-rail .85s cubic-bezier(.3,.8,.3,1) .46s both}
  .node__dot      {animation:tg-dot .38s cubic-bezier(.2,1.3,.5,1) both}
  .node:nth-child(1) .node__dot{animation-delay:.52s}
  .node:nth-child(2) .node__dot{animation-delay:.68s}
  .node:nth-child(3) .node__dot{animation-delay:.84s}
  .node:nth-child(4) .node__dot{animation-delay:1.00s}
  .bar--out       {animation:tg-rise .5s ease-out 1.02s both}
  .bar--fund      {animation:tg-fill .95s cubic-bezier(.22,.7,.3,1) 1.18s both}

  /* the one scroll reveal: comparison rows arriving like data */
  .cmp tbody tr{opacity:0;transform:translate3d(0,10px,0)}
  .reveal .cmp tbody tr{opacity:1;transform:none;
    transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.25,1)}
  .reveal .cmp tbody tr:nth-child(1){transition-delay:.00s}
  .reveal .cmp tbody tr:nth-child(2){transition-delay:.07s}
  .reveal .cmp tbody tr:nth-child(3){transition-delay:.14s}
  .reveal .cmp tbody tr:nth-child(4){transition-delay:.21s}
  .reveal .cmp tbody tr:nth-child(5){transition-delay:.28s}

  .btn{transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease}
  .btn:active{transform:translateY(1px)}
  .offer__card,.prodpick .box{transition:border-color .18s ease,box-shadow .18s ease,
    transform .18s cubic-bezier(.2,.7,.25,1)}
  .offer__card:hover{border-color:var(--navy-800)}
  .buyer__nums b{transition:color .2s ease}
}

@media(prefers-reduced-motion:reduce){
  .cmp tbody tr{opacity:1;transform:none}
  }

/* ═══════════════ icons ═══════════════ */
.ico{width:22px;height:22px;flex:0 0 auto;display:inline-block;vertical-align:-3px}
.ico--lead{width:30px;height:30px;color:var(--gold-lift);margin-right:12px;vertical-align:-5px}
/* Left edge aligns with the heading's left edge, so it reads as part of the
   same column rather than floating in dead space above it. */
.ico--fact{width:20px;height:20px;color:var(--gold);display:block;margin:0 0 10px}
.ico--re{width:20px;height:20px;color:var(--pass);float:left;margin:2px 11px 0 0}
.offer__card h3 .ico{color:var(--navy-600);margin-right:10px}
.offer__lead h3{display:flex;align-items:flex-start;gap:0}

/* ═══════════════ hero two-column ═══════════════ */
.hero__in{display:grid;grid-template-columns:1.45fr .85fr;gap:60px;align-items:start}
.hero__copy{min-width:0}
.hero__side{min-width:0;padding-top:8px}
.hero__side ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hero__side li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
  padding:17px 0;border-top:1px solid rgba(255,255,255,.14)}
.hero__side li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.hero__side .ico{color:var(--gold-lift);grid-row:span 2;margin-top:2px}
.hero__side b{font-family:var(--sans);font-size:16.5px;font-weight:600;color:#fff;
  letter-spacing:-.01em;line-height:1.3}
.hero__side span{font-size:14.5px;color:#92A6BE;line-height:1.5;grid-column:2}
.hero__foot{position:relative;z-index:2}
@media(prefers-reduced-motion:no-preference){
  }
@media(max-width:1000px){
  .hero__in{grid-template-columns:1fr;gap:34px}
  .hero__side{padding-top:0}
}

/* ═══════════════ split hero ═══════════════ */
.hero{padding:0;overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.08fr .92fr;gap:0;align-items:stretch;
  width:min(var(--wrap),100% - 44px)}
.hero__copy{padding:84px 56px 72px 0;min-width:0;align-self:center}
/* The bleed must equal the gutter between the wrap and the viewport edge.
   calc(50% - 50vw) resolved 50% against the GRID AREA, not the wrap, so the
   photo over-extended by ~320px and took the slideshow controls off-screen
   with it. This computes the real gutter. */
.hero__in{--bleed:calc((100vw - min(var(--wrap), 100vw - 44px)) / 2)}
.hero__shot{position:relative;min-width:0;margin-right:calc(-1 * var(--bleed));
  overflow:hidden}
.shot--hero{border-radius:0;height:100%;min-height:560px}
.shot--hero img{height:100%;width:100%;object-fit:cover;object-position:center 35%}
.hero__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,var(--navy-900) 0%,rgba(7,26,51,.55) 26%,rgba(7,26,51,.08) 62%)}
@media(prefers-reduced-motion:no-preference){
  @keyframes tg-burns{from{transform:scale(1)}to{transform:scale(1.07)}}
  .shot--hero img{animation:tg-burns 17s ease-out both}
}

/* four proof points: 2x2 reads as a balanced block, where 4-across is too
   narrow in the copy column and 3+1 leaves an orphan */
.hero__proof{list-style:none;margin:36px 0 0;padding:26px 0 0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px;
  border-top:1px solid rgba(255,255,255,.16)}
.hero__proof li{display:grid;grid-template-columns:auto;gap:0}
.hero__proof .ico{color:var(--gold-lift);width:19px;height:19px;margin-bottom:9px}
.hero__proof b{display:block;font-family:var(--sans);font-size:15.5px;font-weight:600;
  color:#fff;line-height:1.25;letter-spacing:-.01em}
.hero__proof span{display:block;font-size:13.5px;color:#8FA3BC;margin-top:3px;line-height:1.4}
.hero__foot{padding-bottom:52px}
.gap{margin-top:0;border-top:1px solid rgba(255,255,255,.14)}

@media(max-width:1000px){
  .hero__in{grid-template-columns:1fr;width:100%}
  .hero__copy{padding:0 22px 44px;order:2;width:min(var(--wrap),100%);margin-inline:auto}
  .hero__shot{order:1;margin-right:0}
  .shot--hero{min-height:0;aspect-ratio:16/10}
  .hero__shot::after{background:linear-gradient(180deg,rgba(7,26,51,.25) 0%,
    rgba(7,26,51,.55) 60%,var(--navy-900) 100%)}
  .hero__proof{grid-template-columns:1fr;gap:18px;margin-top:30px}
  .hero__foot{width:min(var(--wrap),100% - 44px)}
}

/* ═══════════════ photo mosaic — every business visible at once ═══════════════ */
.whofund{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start}
.whofund figure{margin:0}
.whofund figure:nth-child(2),
.whofund figure:nth-child(4){margin-top:38px}
.whofund .shot{margin-bottom:15px;aspect-ratio:3/2}
.whofund figcaption{font-size:14.5px;color:var(--muted);line-height:1.5}
.whofund b{display:block;font-family:var(--sans);font-size:16.5px;font-weight:600;
  color:var(--ink);margin-bottom:5px;letter-spacing:-.01em}
@media(max-width:900px){
  .whofund{grid-template-columns:1fr 1fr;gap:18px}
  .whofund figure:nth-child(2),.whofund figure:nth-child(4){margin-top:0}
  .whofund .shot{aspect-ratio:3/2}
}
@media(max-width:560px){ .whofund{grid-template-columns:1fr;gap:26px} }

/* ═══════════════ fee schedule ═══════════════ */
.tablewrap{overflow-x:auto;margin:26px 0 20px;-webkit-overflow-scrolling:touch}
.feetable{border-collapse:collapse;width:100%;min-width:640px;font-size:15.5px;
  font-variant-numeric:tabular-nums lining-nums}
.feetable caption{text-align:left;font-family:var(--sans);font-weight:600;font-size:15px;
  color:var(--muted);padding-bottom:11px;letter-spacing:-.01em}
.feetable th,.feetable td{border-bottom:1px solid var(--rule);padding:14px 18px 14px 0;
  text-align:left;vertical-align:top;line-height:1.5}
.feetable thead th{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);
  letter-spacing:-.005em;border-bottom:1.5px solid var(--navy-800);padding-bottom:9px}
.feetable tbody th{font-weight:600;color:var(--ink);width:25%}
.feetable .fee-amt{font-family:var(--sans);font-weight:600;color:var(--navy-800);
  white-space:nowrap;width:20%}
.feetable .unset{color:var(--fail);font-style:normal;font-weight:600}
.unfilled{border:1.5px solid var(--gold);background:var(--gold-soft);border-radius:var(--r-card);
  padding:18px 20px;margin:26px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.unfilled b{display:block;margin-bottom:5px;font-family:var(--sans)}
.unfilled code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  background:rgba(7,26,51,.08);padding:1px 5px;border-radius:var(--r-sm)}
@media(max-width:560px){ .feetable th,.feetable td{padding:12px 14px 12px 0} }

/* ═══════════════ the gap, in money ═══════════════
   One number carries this section. Everything around it stays quiet: no
   card, no border, no chart. The figure is the only loud thing on the page
   outside the hero, and the interactive province breakdown lives on its
   own page rather than competing here. */
.owed{background:var(--navy-900);color:#fff}
.owed__in{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:end}
.owed__fig{font-family:var(--sans);font-weight:700;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums lining-nums;line-height:.86;margin:0;
  font-size:clamp(68px,10.5vw,152px);color:var(--gold-lift)}
.owed__fig span{font-size:.3em;font-weight:600;letter-spacing:-.02em;color:#fff}
.owed__say{font-size:clamp(18px,2vw,21px);line-height:1.5;color:#D4DEEA;
  max-width:34ch;margin:26px 0 0}
.owed__src{font-size:14.5px;color:#8DA2BC;margin:20px 0 0;line-height:1.55}
.owed__src a{color:var(--gold-lift);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.owed__facts{margin:0;display:grid;gap:0}
.owed__facts > div{border-top:1px solid rgba(255,255,255,.17);padding:16px 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.owed__facts > div:last-child{border-bottom:1px solid rgba(255,255,255,.17)}
.owed__facts dt{font-size:15.5px;color:#9FB3CA;line-height:1.4}
.owed__facts dd{margin:0;font-family:var(--sans);font-weight:700;font-size:24px;
  font-variant-numeric:lining-nums;letter-spacing:-.02em;white-space:nowrap}
@media(max-width:880px){
  .owed__in{grid-template-columns:1fr;gap:38px;align-items:start}
  .owed__say{max-width:46ch}
}

/* End ticks turn the gold bar from a button into a measurement: it now
   visibly spans Day 7 to Day 105 on the rail above it. */
.bar--fund::before,.bar--fund::after{content:"";position:absolute;top:-7px;bottom:-7px;
  width:2px;background:var(--gold)}
.bar--fund::before{left:0}
.bar--fund::after{right:0}
@media(max-width:700px){ .bar--fund::before,.bar--fund::after{display:none} }

/* ═══════════════ hero slideshow ═══════════════
   The chrome is deliberately quiet: a counter, the caption, a hairline
   progress line along the bottom edge that fills over the dwell time, and
   arrows that only surface on hover or focus. A cluster of glassy buttons in
   the corner is the stock treatment and looks it. */
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease;
  pointer-events:none}
.slide.is-on{opacity:1;pointer-events:auto}
.slide .shot{height:100%;border-radius:0;margin:0}
.slide img{height:100%;width:100%;object-fit:cover}
.slide figcaption{display:none}

/* the readout: 01 / 05, caption, pause, dots — on a soft navy gradient foot */
.slides__ui{position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:16px;padding:46px 26px 22px;
  background:linear-gradient(to top,rgba(7,26,51,.86),rgba(7,26,51,0))}
.slides__read{margin:0;font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums;
  color:#fff;font-size:14px;letter-spacing:.02em;display:flex;align-items:baseline;gap:4px}
.slides__read b{font-size:21px;font-weight:700;color:var(--gold-lift)}
.slides__read i{font-style:normal;color:rgba(255,255,255,.4)}
.slides__read span{color:rgba(255,255,255,.62)}
.slides__cap{margin:0;font-family:var(--sans);font-weight:600;font-size:15px;color:#fff;
  letter-spacing:-.005em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slides__play{appearance:none;border:0;background:none;padding:0;width:26px;height:26px;
  cursor:pointer;position:relative}
.slides__play::before,.slides__play::after{content:"";position:absolute;top:5px;
  width:3px;height:16px;background:#fff;transition:background .15s ease}
.slides__play::before{left:8px} .slides__play::after{left:15px}
.slides__play[aria-pressed="true"]::before{left:8px;width:0;height:0;top:4px;background:none;
  border-left:11px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.slides__play[aria-pressed="true"]::after{display:none}
.slides__play:hover::before,.slides__play:hover::after{background:var(--gold-lift)}
.slides__dots{display:flex;gap:0}
.slides__dots button{appearance:none;border:0;padding:0;width:24px;height:24px;
  background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.slides__dots button::before{content:"";width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.4);transition:background .2s ease,transform .2s ease}
.slides__dots button[aria-selected="true"]::before{background:var(--gold-lift);transform:scale(1.3)}
.slides__dots button:focus-visible{outline:2px solid var(--gold-lift);outline-offset:-3px;
  border-radius:var(--r-sm)}

/* hairline that fills across the dwell time, so the cycle is legible */
.slides__tick{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:5;
  background:rgba(255,255,255,.17)}
.slides__tick i{display:block;height:100%;width:0;background:var(--gold-lift)}

/* arrows stay out of the way until wanted */
.slides__arrow{position:absolute;top:0;bottom:64px;width:76px;z-index:5;border:0;
  background:none;cursor:pointer;opacity:0;transition:opacity .2s ease}
.slides__arrow--prev{left:0} .slides__arrow--next{right:0}
.slides__arrow::before{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;
  border-top:2px solid #fff;border-right:2px solid #fff}
.slides__arrow--next::before{transform:translate(-50%,-50%) rotate(45deg)}
.slides__arrow--prev::before{transform:translate(-50%,-50%) rotate(-135deg)}
.hero__shot:hover .slides__arrow,.slides__arrow:focus-visible{opacity:.85}
.slides__arrow:hover{opacity:1}
.slides__arrow:focus-visible{outline:2px solid var(--gold-lift);outline-offset:-4px}

@media(prefers-reduced-motion:reduce){ .slide{transition:none} .slides__tick i{display:none} }
@media(max-width:880px){
  .slides__ui{padding:38px 16px 16px;gap:11px}
  .slides__cap{font-size:13.5px}
  .slides__read b{font-size:18px}
  .slides__arrow{display:none}
}
}

/* ═══════════════ warmth ═══════════════
   Every neutral in this palette was blue-tinted — paper, paper-2, rule and
   even ink — so the page read as navy on pale blue on pale blue, with gold
   appearing only on buttons. These are the warm counterparts. They are not
   a new brand colour: they are the same gold desaturated down to a neutral,
   so the page gains warmth and contrast range without gaining a third hue. */
:root{
  --sand:#F6F2EA;        /* warm section background, the counterpart to --paper */
  --sand-2:#EFE7D8;      /* deeper warm band */
  --rule-warm:#DFD3BC;   /* hairline on sand */
  --ink-warm:#2A2317;    /* text on gold, warm rather than blue-black */
}

.sec--sand{background:var(--sand)}
.sec--sand .lede{color:#6B6150}
.sec--sand .feetable th,
.sec--sand .feetable td{border-bottom-color:var(--rule-warm)}
.sec--sand .whofund figcaption{color:#6B6150}

/* A mid-navy band so the dark sections are not all the same near-black. */
.sec--navy-mid{background:var(--navy-800);color:#fff}
.sec--navy-mid .lede{color:#C3D3E6}

/* Gold earns more than buttons: section headings on warm ground get a short
   gold rule above them, which also marks where a new part of the page starts. */
.sec--sand .sec__head{position:relative;padding-top:21px}
.sec--sand .sec__head::before{content:"";position:absolute;top:0;left:0;
  width:46px;height:3px;background:var(--gold)}

/* time estimate above the step rail — the biggest single lever on form
   abandonment is telling people how long it will take before they start */
.apply-time{display:flex;align-items:flex-start;gap:9px;margin:0 0 18px;
  font-size:15.5px;color:var(--muted);line-height:1.5}
.ico--time{width:18px;height:18px;color:var(--gold);flex:0 0 auto;margin-top:2px}
.astep__last{font-style:normal;font-family:var(--sans);font-size:13px;font-weight:700;
  color:var(--gold);background:var(--gold-soft);padding:4px 10px;border-radius:var(--r-sm);
  vertical-align:middle;margin-left:11px;letter-spacing:.01em}

/* ═══════════════ WhatsApp ═══════════════
   In South Africa WhatsApp is how small businesses actually talk to people.
   The glyph carries its own recognition, so it keeps WhatsApp green while
   the button stays in the site's palette rather than going fully green. */
.btn-wa{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--rule);
  background:var(--white);color:var(--ink);white-space:nowrap}
.btn-wa:hover{border-color:#25D366;background:#F4FDF7}
.ico--wa{width:19px;height:19px;color:#25D366;flex:0 0 auto}
.btn-wa span{font-variant-numeric:tabular-nums lining-nums}

/* persistent reach-out, out of the way of the form controls */
.wafab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;
  align-items:center;gap:10px;background:#25D366;color:#06301A;
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:-.005em;
  padding:13px 18px;border-radius:999px;text-decoration:none;
  box-shadow:0 6px 20px rgba(7,26,51,.26);transition:transform .15s ease}
.wafab svg{width:21px;height:21px;color:#06301A}
.wafab:hover{transform:translateY(-2px)}
.wafab:focus-visible{outline:3px solid var(--navy-900);outline-offset:3px}
.wafab b{font-weight:700}
@media(max-width:620px){
  .wafab{right:12px;bottom:12px;padding:12px;gap:0}
  .wafab b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media(prefers-reduced-motion:reduce){ .wafab{transition:none} }

/* photo inside the navy contact panel — a face on the page where someone
   decides whether to actually pick up the phone */
.shot--panel{margin:-33px -33px 26px;border-radius:var(--r-card) var(--r-card) 0 0;
  aspect-ratio:16/9;overflow:hidden}
.shot--panel img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
@media(max-width:700px){ .shot--panel{margin:-33px -33px 22px} }

/* The floating action is for browsing pages. On the two pages built around a
   submit button it would cover the primary CTA, and both already carry a
   prominent WhatsApp route of their own. */
body[data-page="apply"] .wafab,
body[data-page="contact"] .wafab{display:none}

/* ── WhatsApp button across widths ──────────────────────────────────────
   These must sit AFTER the base .btn-wa rule: the base is appended late in
   this file, so an override earlier in the responsive block loses the
   cascade at equal specificity. Learned the hard way.
     >=1280  glyph + number
     861-1279 hidden — the full nav links already fill the bar; the floating
              action covers this band
     <=860   links collapse to the burger, so the glyph gets its place back  */
@media(max-width:1279px){
  .btn-wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .btn-wa{padding:10px 12px}
}
@media(min-width:1024px) and (max-width:1279px){ .btn-wa{display:none} }
@media(max-width:380px){
  .btn-wa{padding:8px 9px}
  .brand img{height:38px}
  .nav-cta{gap:7px}
  .nav-cta .btn{padding:10px 11px}
}

/* 320px — the narrowest phone still in use. At default sizing the logo plus
   the three header controls come to 346px against a 320px screen. */
@media(max-width:359px){
  .masthead__in{gap:10px;min-height:66px}
  .brand img{height:34px}
  .nav-cta{gap:6px}
  .nav-cta .btn{padding:9px 10px;font-size:14px}
  .btn-wa{padding:8px 8px}
  .ico--wa{width:17px;height:17px}
  .burger{width:40px;height:38px}
}

/* ═══════════════ hero: a real slideshow ═══════════════
   The first version rotated only the photograph while the headline stayed
   put, so every slide said the same thing and the industry label sat below
   the fold. Now the whole slide changes — eyebrow, headline, lede and call
   to action — and the copy column is sized to the tallest slide so nothing
   jumps as they cycle. */
.heroslides{list-style:none;margin:0;padding:0;display:grid}
.hslide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .55s ease;
  pointer-events:none}
.hslide.is-on{opacity:1;visibility:visible;pointer-events:auto}
.hslide__eyebrow{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--gold-lift);
  letter-spacing:.02em;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.hslide__eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);flex:0 0 auto}
.hslide__h{font-family:var(--sans);font-weight:700;color:#fff;margin:0 0 18px;
  font-size:clamp(31px,4.3vw,52px);letter-spacing:-.032em;line-height:1.05;max-width:17ch;
  text-wrap:balance}
.hslide__lede{font-size:clamp(16.5px,1.8vw,19px);color:#BCCBDE;max-width:46ch;
  line-height:1.55;margin:0 0 24px}
@media(prefers-reduced-motion:reduce){ .hslide{transition:none} }

/* the industry readout moves to the TOP of the photo so it is visible
   without scrolling, which was the whole complaint */
.slides__ui{top:0;bottom:auto;
  padding:22px 26px 46px;
  background:linear-gradient(to bottom,rgba(7,26,51,.82),rgba(7,26,51,0))}
.slides__tick{top:0;bottom:auto}
.slides__arrow{top:62px;bottom:0}
@media(max-width:880px){ .slides__ui{padding:16px 16px 38px} }

/* ═══════════════ [hidden] must actually hide ═══════════════
   The HTML `hidden` attribute is display:none in the UA stylesheet, which any
   author rule with display:grid/flex silently beats. That is why all four
   product field groups rendered at once on the apply form, and it is the same
   trap that would bite any future JS that toggles `hidden`. One global rule
   closes it for good. */
[hidden]{display:none !important}

/* A small rise on the incoming slide. One orchestrated moment, not a
   general-purpose entrance effect — the photograph crossfades underneath
   while the words lift, which reads as one slide replacing another rather
   than two separate things fading. */
@media(prefers-reduced-motion:no-preference){
  .hslide{transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
  .hslide.is-on{transform:none}
}