/* Home page. Owned by the home agent. Everything sits on the one page grey; sections hand off through movement and hairlines. */
:root{--floor:208,214,226;}
body[data-page=home] main{--muted:#3a3732}
:root{--pw:max(400px,42vw);--line2:#b4bac6}
.big{font-variant-numeric:tabular-nums}

/* ---------- the stage: one pinned viewport, one continuous camera move ---------- */
.stage{position:relative;height:calc(var(--len,6.2) * 100svh)}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;background:rgba(var(--hb,238,240,244),var(--hba,0))}
.tmark{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.film{position:absolute;inset:0;will-change:clip-path;background:rgb(238,240,244)}
.media{position:absolute;inset:0;will-change:transform;transform-origin:62% 50%;transform:scale(1.03)}
.media{--op:60%}
.media .film-layer{background-position:var(--op) 50%}
.media .film-layer video{object-position:var(--op) 50%}
/* resting life: a soft-light band of studio light crossing the chrome */
.sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:var(--rest,1);
 background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%) 170% 0/280% 100% no-repeat;
 animation:sheen 10s cubic-bezier(.45,0,.3,1) 1.6s infinite}
@keyframes sheen{0%{background-position:170% 0}62%,100%{background-position:-70% 0}}
.rm-grid{display:none}

.hero-copy{position:absolute;left:var(--pad);top:calc(72px + clamp(32px,11vh,128px));width:min(46vw,660px);will-change:transform,opacity}
.hero-copy h1{font-size:var(--h-hero);line-height:.9;letter-spacing:-.058em;margin:0 0 clamp(18px,3vh,28px) -.04em}
.hero-copy .line{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.hero-copy .line>span{display:block;will-change:transform}
.hero-copy .sub{font-size:clamp(17px,1.4vw,21px);line-height:1.42;color:var(--muted);max-width:29ch;margin:0 0 clamp(24px,4vh,36px)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(20px,2.6vw,40px);margin:clamp(32px,6vh,60px) 0 0;padding-top:20px;border-top:1px solid var(--line)}
.stats div{margin:0}
.stats dt{font-size:clamp(26px,2.3vw,34px);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.stats dd{margin:6px 0 0;font-size:16px;line-height:1.35;color:var(--muted);max-width:15ch}
.stats .ab{font-size:.62em;letter-spacing:-.02em}

/* load: headline lines rise, the rest follows, the nav eases down */
html:not(.rm) .hero-copy .line>span{animation:lineup .9s var(--ease) both}
html:not(.rm) .hero-copy .line:nth-child(2)>span{animation-delay:.09s}
html:not(.rm) .hero-copy .sub{animation:fadeup .9s .22s var(--ease) both}
html:not(.rm) .hero-copy .ctas{animation:fadeup .9s .3s var(--ease) both}
html:not(.rm) .hero-copy .stats{animation:fadeup .9s .38s var(--ease) both}
html:not(.rm) body[data-page=home] .nav{animation:navdown .8s .1s var(--ease) both}
/* the nav floats over footage from the first frame, so it carries its glass from the start */
body[data-page=home] .nav,body[data-page=home] .nav.solid{background:rgb(var(--home-rgb,var(--page-rgb,238,240,244)));-webkit-backdrop-filter:none;backdrop-filter:none}
@keyframes lineup{from{transform:translateY(108%)}to{transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes navdown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* the fleet beat: a calm panel the footage slides off of */
.fleet{position:absolute;left:0;top:0;bottom:0;width:var(--pw);display:flex;align-items:center;
 padding:72px clamp(28px,3.6vw,64px) 0 var(--pad);visibility:hidden}
.fleet.live{visibility:visible}
/* with motion on, the panel colour is the pinned stage itself, revealed as the footage slides off it; a panel background here would cover the footage early */
html:not(.rm) .fleet{background:none}
.fleet-in{width:100%;max-width:470px;will-change:transform,opacity}
.fleet h2{font-size:var(--h-sub);letter-spacing:-.042em;line-height:1.02;max-width:14ch}
.fleet .counter{font-size:clamp(64px,7.2vw,112px);font-weight:500;letter-spacing:-.06em;line-height:1;margin:clamp(20px,3.4vh,32px) 0 8px}
.fleet-cap{margin:0;font-size:17px;color:var(--muted)}
.fleet-cap span{font-variant-numeric:tabular-nums;color:var(--ink)}
.cells{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,.5vw,7px);margin:clamp(22px,3.6vh,34px) 0 0;max-width:430px}
.cells i{aspect-ratio:1;border:1px solid var(--line2);border-radius:3px;position:relative}
.cells i::after{content:"";position:absolute;inset:3px;border-radius:1.5px;background:var(--ink);transform:scale(.4);opacity:0;transition:transform .35s var(--ease),opacity .25s}
.cells i.on::after{transform:none;opacity:1}
.fleet-foot{margin:clamp(18px,3vh,28px) 0 0;font-size:17px;line-height:1.5;color:var(--muted);max-width:40ch}

/* ---------- the range: pinned; pictures fade out to the page tint before the next fades in ---------- */
.range{position:relative;height:calc(var(--rlen,4.2) * 100svh)}
.range-tints{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none}
.range-tints i{flex:1}
.range-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(32px,4vw,72px);
 padding:72px var(--pad) 0}
.range-copy h2{font-size:var(--h-sec);letter-spacing:-.05em;line-height:1;max-width:12ch}
.rlist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:2px}
.rlist li{font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;line-height:1.25;color:rgba(21,20,18,.34);transition:color .35s var(--ease),transform .45s var(--ease)}
.rlist li.on{color:var(--acc,var(--ink));transform:translateX(10px)}
.range-copy p{font-size:18px;line-height:1.5;color:var(--muted);max-width:34ch;margin:26px 0 0}
.range-pics{position:relative;height:min(68vh,620px);border-radius:22px;overflow:hidden}
.range-pics img{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;object-position:82% 50%;max-width:none;opacity:0;will-change:opacity,transform}
.range-pics img:first-child{opacity:1}

/* ---------- how a loan comes together: a deck of cards that fans out ---------- */
.how{position:relative;height:calc(var(--hlen,1.4) * 100svh)}
.how-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(56px,11vh,120px);padding:72px var(--pad) 0}
.how-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap}
.how-head h2{font-size:var(--h-sec);letter-spacing:-.05em;line-height:.98;max-width:13ch}
/* the fill rises from the bottom under the steps; its top edge is feathered over 80px and never climbs past the heading */
.how-fill{position:absolute;left:0;right:0;bottom:0;top:var(--ft,40%);background:linear-gradient(rgba(106,95,176,0),rgba(106,95,176,.1) 80px);transform:translateY(100%);pointer-events:none}
.how-head,.tl{position:relative}
.tl{--nodes:4}
.tl-line{position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(106,95,176,.18);border-radius:2px}
.tl-line i{position:absolute;inset:0;background:#6a5fb0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(0)}
.tl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,56px)}
.tl-steps li{position:relative;padding-top:52px}
.tl-steps .tick{position:absolute;left:0;top:0;width:2px;height:20px;background:#6a5fb0;transform-origin:50% 100%}
.tl-steps .num{display:block;font-size:clamp(64px,7vw,112px);font-weight:500;letter-spacing:-.06em;line-height:1;color:#6a5fb0;margin-bottom:18px;font-variant-numeric:tabular-nums}
.tl-steps h3{font-size:var(--h-sub);letter-spacing:-.032em;line-height:1.1;margin-bottom:10px}
.tl-steps p{margin:0;font-size:18px;line-height:1.5;color:var(--muted);max-width:30ch}
.tl-steps .st{will-change:opacity,transform}

/* ---------- teasers ---------- */
.tease{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,7vw,120px);align-items:center;padding-block:clamp(110px,18vh,190px)}
.tease h2,.band h2{font-size:var(--h-sec);letter-spacing:-.05em;line-height:.98;max-width:13ch}
.tease .t-copy p,.band-copy>p{font-size:18px;line-height:1.5;color:var(--muted);max-width:40ch;margin:24px 0}
.tease .t-copy p.ex{font-size:16px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.lenders{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.chart,.cols{margin:0;background:#fff;border-radius:20px;padding:clamp(22px,2.6vw,36px);box-shadow:0 1px 2px rgba(21,20,18,.06),0 0 0 1px rgba(21,20,18,.05)}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .grid line{stroke:#e2dccb;stroke-width:1}
.chart .grid .base{stroke:#b5aa8a}
.chart .ax text{font:var(--ax,13px) var(--sans);fill:var(--muted)}
.chart .curve{fill:none;stroke:#9a7a1f;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.chart .pt .tick{stroke:#9a7a1f;stroke-width:1;stroke-dasharray:2 4}
.chart .pt .v{font:600 var(--vx,16px) var(--sans);fill:var(--ink);letter-spacing:-.02em}
.chart figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:18px;font-size:16px;color:var(--muted)}
.b-cap{margin:0 0 26px;font-size:16px;color:var(--muted);max-width:32ch}
.col-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:end}
.col b{display:block;font-size:clamp(44px,4.4vw,64px);font-weight:500;letter-spacing:-.05em;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
.c-track{position:relative;height:clamp(200px,32vh,300px);border-radius:14px;background:#e3ebf3;overflow:hidden}
.c-track i{position:absolute;left:0;right:0;bottom:0;height:100%;border-radius:inherit;background:#3d6f9e;transform-origin:50% 100%;transform:scaleY(0)}
.col:nth-child(2) .c-track i{background:#7fa3c4}
.col p{margin:14px 0 0;font-size:17px;line-height:1.35;color:var(--ink)}

/* ---------- waitlist band ---------- */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,104px);align-items:center;padding-block:clamp(110px,16vh,170px)}
.band-pic{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#ead2cd}
.band-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 50%;max-width:none;will-change:transform;transform-origin:70% 60%}
.band-copy p.aud{font-size:17px;margin:-8px 0 20px;color:var(--ink)}
.inline{display:grid;gap:4px;max-width:440px;margin-top:8px}
.inline .go{justify-self:start;position:relative;margin-top:10px;min-width:56px;width:var(--bw,auto);transition:width .5s var(--ease),padding .5s var(--ease),transform .35s var(--ease),background .3s}
.inline .go .t{transition:opacity .2s}
.inline .go svg{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.inline.sent .go{width:56px;padding:0;pointer-events:none}
.inline.sent .go .t{opacity:0}
.inline.sent .go svg{transition:stroke-dashoffset .55s .35s var(--ease);stroke-dashoffset:0}
.inline.sent .field{opacity:.45;pointer-events:none;transition:opacity .4s}
.thanks{margin:14px 0 0;font-size:16px;min-height:1.5em;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .5s .5s var(--ease),transform .5s .5s var(--ease)}
.inline.sent .thanks{opacity:1;transform:none}

/* ---------- tablet ---------- */
@media(max-width:1100px) and (min-width:761px){
 .media{--op:30%}
 .tl-steps{gap:22px}
 .tl-steps p{font-size:16px}
 .range-pin{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .hero-copy{width:42vw}
 .hero-copy .sub{max-width:26ch}
 .stats{grid-template-columns:repeat(3,minmax(0,auto));gap:20px}
 .stats dd{max-width:14ch}
}

/* ---------- phone: footage in a top window, words below it ---------- */
@media(max-width:760px){
 html:not(.rm) .media{right:auto;bottom:auto;transform-origin:0 0}
 html:not(.rm) .film{-webkit-mask-image:linear-gradient(#000 calc(var(--mb,53%) - var(--fade,56px)),transparent var(--mb,53%));mask-image:linear-gradient(#000 calc(var(--mb,53%) - var(--fade,56px)),transparent var(--mb,53%))}
 .media{--op:74%}
 .hero-copy{left:16px;right:16px;width:auto;top:calc(53% + 4px)}
 .hero-copy h1{margin-bottom:12px}
 .hero-copy .sub{font-size:16px;margin-bottom:18px;max-width:32ch}
 .ctas{gap:8px 20px}
 .ctas .btn{padding:14px 22px;min-height:48px;font-size:15px}
 .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;padding-top:14px}
 .stats dt{font-size:22px}
 .stats dd{font-size:16px;line-height:1.25}
 .fleet{top:53%;width:auto;right:0;align-items:flex-start;padding:4px 16px 0}
 .fleet h2{font-size:24px;max-width:none}
 .fleet .counter{font-size:58px;margin:10px 0 4px}
 .fleet-cap{font-size:14px}
 .cells{margin-top:16px;gap:5px;max-width:none}
 .fleet-foot{display:none}
 .range-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:start;gap:24px;padding:calc(72px + 4vh) 16px 4vh}
 .range-copy h2{font-size:clamp(34px,9.6vw,42px);max-width:none}
 .range-copy p{font-size:16px;margin-top:14px}
 .range-pics{height:100%;min-height:0}
 .range-pics img{object-position:84% 50%}
 .how{--hlen:1.6}
 .how-pin{justify-content:center;padding:72px 16px 0;gap:26px}
 .how-head{flex-direction:column;align-items:flex-start;gap:6px}
 .how-head h2{font-size:clamp(34px,9.6vw,42px)}
 .how-head{z-index:1}
 .tl-line{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
 .tl-line i{transform-origin:50% 0;transform:scaleY(0)}
 .tl-steps{grid-template-columns:minmax(0,1fr);gap:22px}
 .tl-steps li{padding:0 0 0 40px}
 .tl-steps .tick{left:4px;top:8px;width:12px;height:2px}
 .tl-steps .num{font-size:30px;margin-bottom:6px}
 .tl-steps h3{font-size:20px;margin-bottom:4px}
 .tl-steps p{font-size:16px;line-height:1.45;max-width:none}
 .rlist{margin-top:12px}
 .rlist li{font-size:19px;line-height:1.3}
 .tease,.lenders,.band{grid-template-columns:minmax(0,1fr);padding-block:64px 88px}
 .lenders .t-copy{order:-1}
 .range{--rlen:4}
 .band-pic{order:-1;aspect-ratio:16/11}
 .tease .t-copy p,.band-copy>p{font-size:17px}
}
@media(max-width:760px) and (max-height:700px){
 .hero-copy .sub{display:none}
}

/* heights in reduced motion come from the first measured viewport, so a tall full-page capture cannot stretch them */
/* ---------- reduced motion: the same story laid out flat, scrubs at their final state ---------- */
html.rm .stage{height:auto}
html.rm .pin{position:relative;height:calc(2 * var(--vh0,100svh))}
html.rm .film{bottom:auto;height:var(--vh0,100svh)}
html.rm .sheen{display:none}
html.rm .fleet{visibility:visible;top:var(--vh0,100svh);bottom:auto;height:var(--vh0,100svh)}
html.rm .rm-grid{display:block;position:absolute;top:var(--vh0,100svh);left:var(--pw);width:calc(100% - var(--pw));height:var(--vh0,100svh);object-fit:cover;object-position:60% 50%;max-width:none}
html.rm .cells i::after{transform:none;opacity:1;transition:none}
html.rm .range,html.rm .how{height:auto}
html.rm .range-pin,html.rm .how-pin{position:relative;height:auto;padding-block:120px 60px}
html.rm .range-pics{height:min(60vh,560px)}
html.rm .range-pics img:not(:first-child){display:none}
html.rm .tl-line i,html.rm .c-track i{transform:none}
html.rm .how-fill{display:none}
@media(max-width:760px){
 html.rm .film{height:calc(.53 * var(--vh0,100svh))}
 html.rm .media{--op:74%}
 html.rm .rm-grid{top:var(--vh0,100svh);left:0;width:100%;height:calc(.53 * var(--vh0,100svh))}
 html.rm .fleet{top:calc(1.53 * var(--vh0,100svh) - 18px);height:auto}
 html.rm .hero-copy{top:calc(.53 * var(--vh0,100svh) + 4px)}
 html.rm .pin{height:calc(2 * var(--vh0,100svh) + 40px)}
 html.rm .range-pics{height:300px}
}
#scrub{transform-origin:100% 100%}

@media(max-width:760px){.chart .ax .t50{display:none}}

.fleet .counter{transition:opacity .35s var(--ease)}

.range-pics img.armtop{object-position:82% 70%}