/* Capitrel homepage. Loaded after styles.css, which still styles the application form and dialogs.
   Tokens come from styles.css (:root); the few added here are for the homepage only. */
:root{
  --panel:#f6f1ec;        /* warm light ground for cards */
  --cream:#fff4e8;
  --amber:#ffc56e;        /* the lamp colour in the photograph: supporting shapes only */
  --deep:#1f1512;         /* a shade under the ink, for the dark panel */
  --on-deep:#d9cbc2;
  --page:max(24px,calc((100% - 1280px)/2));
  --r-card:20px;
  --header-h:76px;
  --shadow:0 18px 40px #3a1d1022,0 2px 6px #3a1d1014;
}
html{scroll-padding-top:92px}
body{overflow-x:clip}

/* Header: white and sticky */
.site-header{position:sticky;top:0;z-index:20;background:#fff;padding:14px var(--page);transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.site-header.is-stuck{box-shadow:0 1px 0 var(--rule),0 8px 24px #281b170d}
/* Over the orange hero the bar is orange too; it turns white once the hero has scrolled away (home.js). */
.site-header.on-hero{background:var(--orange);box-shadow:none}
/* Logo: the mark's last piece is orange on light grounds and ink on the orange bar */
.brand .accent,.aside-brand .accent{fill:var(--orange);transition:fill .35s var(--ease)}
.site-header.on-hero .brand .accent{fill:currentColor}
.site-header.menu-open .brand .accent,.application-mode .site-header .brand .accent{fill:var(--orange)}
@media(forced-colors:active){.brand .accent,.aside-brand .accent{fill:currentColor}}
/* The bar's Apply button waits until the hero's own button has scrolled out of view */
.site-header>.button{transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.site-header.hide-cta>.button{opacity:0;transform:translateY(-6px);visibility:hidden;pointer-events:none}
.site-header nav{gap:36px;font-size:15px;font-weight:550}
.site-header .brand>svg{width:154px;height:32px}

/* Shared pieces */
.button.go::after{content:"";width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:12px;transition:transform .2s var(--ease)}
.button.go:hover::after{transform:translateX(4px) rotate(45deg)}
.shape{position:absolute;display:block;pointer-events:none}
.nowrap{white-space:nowrap} /* keeps ranges like "12–36 months" from breaking at the dash */
#main h2{font-size:clamp(32px,3.5vw,50px);line-height:1.05;letter-spacing:-.03em;font-weight:680}

/* 1. Lead: centred statement over a collage */
.lead{position:relative;background:var(--orange);text-align:center;padding:76px var(--page) 0;overflow:hidden;border-radius:0 0 50% 50%/0 0 64px 64px;isolation:isolate}
.lead-copy{max-width:1080px;margin:0 auto}
.lead h1{font-size:clamp(40px,5.9vw,86px);line-height:1;letter-spacing:-.04em;font-weight:700}
.lead-sub{font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:31em;margin:26px auto 30px;text-wrap:balance}
.collage{position:relative;height:440px;max-width:1280px;margin:48px auto 0}
.collage-photo{position:absolute;left:50%;bottom:0;width:480px;height:440px;margin:0 0 0 -240px;overflow:hidden;z-index:1}
.collage-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
/* The print behind the chef: centred on the hero's bottom edge, which cuts it to a semicircle */
.print{--d:min(900px,94vw);left:50%;bottom:calc(var(--d) / -2);width:var(--d);height:var(--d);margin-left:calc(var(--d) / -2);border-radius:50%;background:repeating-radial-gradient(circle at 50% 100%,var(--cream) 0 10px,transparent 10px 44px)}

/* 2. Equipment marquee */
.kit{padding:72px 0 30px;text-align:center}
/* Still by default (no script, or reduced motion): the examples wrap so every one can be read. */
.kit-rows{display:grid;gap:16px}
.kit-rows.is-live{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.kit-row{list-style:none;margin:0;padding:0 var(--page);display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.kit-row.is-moving{flex-wrap:nowrap;justify-content:flex-start;width:max-content;padding:0}
.kit-row li{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-width:220px;min-height:104px;white-space:nowrap;background:var(--ink);color:#fff;border:1px solid transparent;border-radius:14px;padding:26px 30px;overflow:hidden;font-size:clamp(20px,2vw,27px);font-weight:680;letter-spacing:-.025em}
.kit-photo{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.85);transform:scale(1.04)}
.kit-row li::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(18,12,9,.62)}
.kit-name{position:relative;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.kit-photo--espresso{object-position:56% 54%}
.kit-photo--van{object-position:50% 64%}
.kit-photo--mill{object-position:50% 42%}
.kit-photo--mixer{object-position:50% 48%}
.kit-photo--combi{object-position:50% 44%}
.kit-photo--pizza{object-position:50% 40%}
.kit-photo--sander{object-position:50% 84%}

/* 3. What assets can I use */
.assets{padding:96px var(--page) 40px}
.assets-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:40px}
.assets-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,9fr);gap:28px;align-items:stretch}
.assets .finance-tabs{display:flex;flex-direction:column;gap:10px}
.assets .finance-tabs button{position:relative;display:block;text-align:left;background:var(--panel);border:1px solid transparent;border-radius:14px;padding:20px 22px 21px 26px;font-size:21px;font-weight:650;letter-spacing:-.02em;line-height:1.25;color:var(--muted);overflow:hidden;flex:1 0 auto;transition:background .2s var(--ease),color .2s var(--ease)}
.assets .finance-tabs button:last-child{border-bottom:1px solid transparent}
.assets .finance-tabs button small{display:block;font-size:15px;font-weight:400;letter-spacing:0;line-height:1.45;margin-top:5px;color:var(--muted)}
.assets .finance-tabs button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--rule)}
.assets .finance-tabs button::after{content:"";position:absolute;left:0;top:0;width:5px;height:0;background:var(--orange)}
.assets .finance-tabs button:hover{background:#f0e8e1}
.assets .finance-tabs button[aria-selected=true]{background:var(--soft);color:var(--ink);border-top:1px solid transparent;font-weight:650}
.assets .finance-tabs button[aria-selected=true] small{color:var(--ink)}
.assets .finance-tabs button[aria-selected=true]::after{height:100%}
.assets-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r-card);overflow:hidden;background:var(--panel);min-height:470px}
.assets .finance-panel{background:transparent;border-radius:0;padding:44px 40px;min-height:0;display:flex;flex-direction:column;align-items:flex-start}
.assets .finance-panel h3{font-size:clamp(27px,2.5vw,36px);line-height:1.1;letter-spacing:-.03em}
.assets .finance-panel .text-link{margin-top:4px}
.assets .finance-panel:focus-visible{outline-offset:-5px}
.assets .finance-panel .fine{margin-top:auto;padding-top:24px;font-size:15px;line-height:1.55}
.assets-stage{position:relative;overflow:hidden;min-width:0;background:#d9d3cb}
.asset-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease)}
.assets-stage[data-kind=machinery] [data-asset-photo=machinery],
.assets-stage[data-kind=catering] [data-asset-photo=catering],
.assets-stage[data-kind=vehicles] [data-asset-photo=vehicles],
.assets-stage[data-kind=other] [data-asset-photo=other]{opacity:1}

/* 4. How it works: a dark panel with a pinned picture of who owns the asset */
.how{padding:56px var(--page) 40px}
.how-panel{background:var(--deep);color:#fff4e8;border-radius:28px;padding:72px clamp(24px,5vw,72px) 56px}
.how-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.how-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);margin-top:28px}
.how-steps{list-style:none;margin:0;padding:0}
.how-steps > li{min-height:46vh;display:flex;flex-direction:column;justify-content:center;padding:26px 0;transition:opacity .35s var(--ease)}
.how-steps.is-live > li{opacity:.38}
.how-steps.is-live > li.is-on{opacity:1}
.how-steps.is-scrubbed > li{transition:none} /* opacity follows the scroll directly */
.how-n{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#3a2a24;color:var(--orange);font-size:18px;font-weight:680;margin-bottom:22px;transition:background .35s var(--ease),color .35s var(--ease)}
.how-steps > li.is-on .how-n{background:var(--orange);color:var(--ink)}
.how-steps > li > h3{font-size:clamp(26px,2.6vw,38px);line-height:1.08;letter-spacing:-.03em;margin-bottom:14px}
.how-steps > li > p{font-size:17px;line-height:1.6;color:var(--on-deep);max-width:25em;margin:0}
/* Centred in the space below the header; --h is the card's own height, measured by home.js */
.how-visual{position:sticky;top:max(calc(var(--header-h) + 16px),calc((100svh + var(--header-h) - var(--h,560px)) / 2));align-self:start}
.hc-inline{display:none}
.how-steps{padding-bottom:16vh} /* room for the card to stay centred through the last step */
.own-card{color:#fff4e8}
/* The card: one espresso machine carries the example through all four steps. */
/* The stage: the hero's print behind the machine, cut off by the floor it stands on, as behind the chef */
/* No box: the machine on the dark panel, with the hero's print behind it as thin light rings that fade out at the edge.
   The rings' centre sits behind the machine, so only the wider arcs show and none crowd the captions. */
.hc-stage{position:relative;padding-top:20%;margin-bottom:34px}
.own-card{--mw:64%}
.hc-machine{position:relative;isolation:isolate;width:var(--mw);aspect-ratio:600/442;margin:0 auto}
.hc-print{position:absolute;left:50%;top:50%;z-index:-1;width:160%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-radial-gradient(circle at 50% 48%,rgba(255,244,232,.26) 0 2.5px,transparent 2.5px 12px);-webkit-mask:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.55) 62%,transparent);mask:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.55) 62%,transparent);pointer-events:none}
.hc-machine img{display:block;width:100%;height:100%;filter:drop-shadow(0 12px 14px rgba(40,27,23,.28))}
/* The share sold: translucent orange over that part of the machine, masked to its own outline */
.hc-share{position:absolute;inset:0;background:rgba(255,120,75,.5);-webkit-mask:url(assets/espresso-machine-600.webp) 0 0/100% 100% no-repeat;mask:url(assets/espresso-machine-600.webp) 0 0/100% 100% no-repeat;clip-path:inset(0 calc(100% - var(--share) * 100%) 0 0)}
/* --share is the share sold (0 to 1). It eases between steps; in step 2 someone drags the slider about and settles on 60% */
@property --share{syntax:'<number>';inherits:true;initial-value:0}
.how-visual{--share:0;transition:--share .9s var(--ease)}
.how-visual[data-step="1"],.how-visual[data-step="2"],.how-visual[data-step="3"]{--share:.6}
.how-visual[data-step="1"]{animation:share-pick 2.6s ease-in-out .25s both}
@keyframes share-pick{0%{--share:0}26%{--share:.82}50%{--share:.34}72%{--share:.7}88%{--share:.56}100%{--share:.6}}
/* Text for each step, stacked in one cell so the card keeps its height */
.hc{display:grid;align-items:start}
.hc-scene{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.how-visual[data-step="0"] .hc-value,.how-visual[data-step="1"] .hc-sell,.how-visual[data-step="2"] .hc-lease{opacity:1;transform:none;transition-delay:.15s}
.how-visual[data-step="3"] .hc-end{opacity:1;transform:none;transition-delay:.55s}
.hc-scene p{margin:0}
.hc-asset{font-size:16px;font-weight:600;color:var(--on-deep)}
.hc-big{font-size:clamp(32px,3.2vw,44px);font-weight:700;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.hc-value{text-align:center}
/* Step 2: the slider */
.hc-sell .hc-head,.hc-slider{width:var(--mw);margin-left:auto!important;margin-right:auto!important}
.hc-slider{position:relative;height:6px;border-radius:3px;background:#3a2a24;margin-top:16px!important;margin-bottom:20px!important}
.hc-slider i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--share) * 100%);border-radius:3px;background:var(--orange)}
.hc-slider b{position:absolute;top:50%;left:calc(var(--share) * 100%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#fff4e8;box-shadow:0 0 0 3px var(--orange)}
.how-visual[data-step="1"] .hc-slider b{animation:share-grab 2.6s ease-in-out .25s both}
@keyframes share-grab{0%,100%{transform:none}8%,90%{transform:scale(1.18)}}
.hc-sell .hc-big{text-align:center}
/* Lease: a payment history, filled in one month at a time */
.hc-head{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;margin-bottom:8px!important}
.hc-head span{font-weight:500;color:var(--on-deep)}
.hc-pay{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hc-pay li{position:relative;display:flex;align-items:center;padding:8px 10px 8px 36px;background:#3a2a24;border-radius:9px;font-size:15px;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.hc-pay li::before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--orange)}
.hc-pay li::after{content:"";position:absolute;left:18px;top:50%;width:4px;height:8px;margin-top:-6px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(40deg)}
.how-visual[data-step="2"] .hc-pay li{opacity:1;transform:none}
.how-visual[data-step="2"] .hc-pay li:nth-child(1){transition-delay:.3s}
.how-visual[data-step="2"] .hc-pay li:nth-child(2){transition-delay:.6s}
.how-visual[data-step="2"] .hc-pay li:nth-child(3){transition-delay:.9s}
/* End of the lease: the same chips, now the two choices; buying back is the one picked */
.hc-choice{grid-template-columns:1fr;gap:6px}
.hc-choice li{background:none;box-shadow:inset 0 0 0 1px #4a372e;font-weight:500;color:var(--on-deep);transition:opacity .35s var(--ease),transform .45s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.hc-choice li::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--on-deep);transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.hc-choice li::after{opacity:0;transition:opacity .2s var(--ease)}
.how-visual[data-step="3"] .hc-choice li{opacity:1;transform:none}
.how-visual[data-step="3"] .hc-choice li:nth-child(1){transition-delay:.3s,.3s,0s,0s}
.how-visual[data-step="3"] .hc-choice li:nth-child(2){transition-delay:.45s,.45s,0s,0s}
.how-visual[data-step="3"] .hc-choice li:nth-child(3){transition-delay:.6s,.6s,0s,0s}
/* then each choice is picked in turn (home.js sets data-pick), so none reads as the default */
.how-visual[data-pick="0"] .hc-choice li:nth-child(1),.how-visual[data-pick="1"] .hc-choice li:nth-child(2),.how-visual[data-pick="2"] .hc-choice li:nth-child(3){background-color:#3a2a24;box-shadow:none;color:#fff4e8}
.how-visual[data-pick="0"] .hc-choice li:nth-child(1)::before,.how-visual[data-pick="1"] .hc-choice li:nth-child(2)::before,.how-visual[data-pick="2"] .hc-choice li:nth-child(3)::before{background-color:var(--orange);box-shadow:none}
.how-visual[data-pick="0"] .hc-choice li:nth-child(1)::after,.how-visual[data-pick="1"] .hc-choice li:nth-child(2)::after,.how-visual[data-pick="2"] .hc-choice li:nth-child(3)::after{opacity:1;transition-delay:.1s}
/* the machine shows each choice: extending keeps 60%, buying back clears the orange, selling us your share covers the whole machine */
.how-visual[data-step="3"][data-pick="1"]{--share:0}
.how-visual[data-step="3"][data-pick="2"]{--share:1}
.how-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:40px 0 0;padding:36px 0;border-top:1px solid #4a372e;border-bottom:1px solid #4a372e}
.how-facts dt{font-size:13px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--on-deep)}
.how-facts dd{margin:8px 0 0;font-size:clamp(28px,3.3vw,46px);font-weight:680;letter-spacing:-.035em;line-height:1.05;color:var(--orange);font-variant-numeric:tabular-nums}
.how-foot{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:32px}
.how-foot p{margin:0;font-size:15px;line-height:1.6;color:var(--on-deep);max-width:38em}
.how-foot .button{flex-shrink:0;white-space:nowrap}
.how-panel :focus-visible{outline-color:#fff4e8}

.mock{width:min(360px,100%);background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:18px 20px;text-align:left;font-size:15px}
.mock-top{display:flex;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:13px;color:var(--muted)}
.mock-top b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mock-top i{font-style:normal}
.mock-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:14px}
.mock-bar i{height:6px;background:#ece6e1;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.mock ol{list-style:none;margin:0;padding:0}
.mock ol{counter-reset:s}
.mock ol li{counter-increment:s;display:flex;align-items:center;gap:12px;padding:7px 8px;border-radius:8px;color:var(--muted);font-size:15px}
.mock ol li::before{content:counter(s);display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:1px solid #b9aea6;font-size:12px;font-weight:600;flex-shrink:0}
.mock-bar i.on{background:var(--orange)}
.mock ol li.done::before{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.mock ol li.now{background:var(--soft);color:var(--ink);font-weight:650}
.mock ol li.now::before{background:var(--ink);border-color:var(--ink);color:#fff}

/* 6. Questions */
/* Why not a loan: the two routes side by side; sale and leaseback is the raised white column with orange ticks */
.versus{padding:56px var(--page) 8px}
.versus-panel{position:relative;overflow:hidden;isolation:isolate;background:var(--cream);border-radius:28px;padding:72px clamp(24px,5vw,72px) 56px}
.vs-print{position:absolute;z-index:-1;right:-180px;top:-180px;width:460px;height:460px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#ffdcc4 0 3px,transparent 3px 15px)}
.versus-head{margin-bottom:40px}
.versus-head h2{max-width:11em;margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vs-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) minmax(0,1.35fr);column-gap:clamp(20px,3vw,40px)}
.vs-row>span{padding:24px 0;font-size:17px;line-height:1.5}
.vs-topic,.vs-loan{border-top:1px solid #eadfd5}
.vs-topic{font-weight:650}
.vs-loan{position:relative;padding-left:36px!important;color:var(--muted)}
/* a quiet grey cross, the same size and shape as the orange tick it sits across from */
.vs-loan::before{content:"";position:absolute;left:0;top:26px;width:22px;height:22px;border-radius:50%;background:linear-gradient(45deg,transparent calc(50% - .9px),#8b7f77 calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) 50% 50%/9px 9px no-repeat,linear-gradient(-45deg,transparent calc(50% - .9px),#8b7f77 calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) 50% 50%/9px 9px no-repeat,#ebe2da}
.vs-us{position:relative;background:#fff;padding:24px 28px 24px 62px!important;font-weight:600}
.vs-us::before{content:"";position:absolute;left:26px;top:26px;width:22px;height:22px;border-radius:50%;background:var(--orange)}
.vs-us::after{content:"";position:absolute;left:34px;top:31px;width:5px;height:10px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(40deg)}
/* column headings; the white column opens and closes with rounded ends */
.vs-cols{align-items:end}
.vs-cols>span{padding:0 0 16px;font-size:17px;font-weight:650;border-top:0;color:var(--muted)}
.vs-cols .vs-loan{padding-left:36px!important}
.vs-cols .vs-loan::before{display:none}
.vs-cols .vs-us{padding:22px 28px 16px!important;border-radius:16px 16px 0 0;color:var(--ink);box-shadow:0 -10px 30px -18px rgba(40,27,23,.25)}
.vs-cols .vs-us::before,.vs-cols .vs-us::after{display:none}
.vs-row:last-child .vs-us{border-radius:0 0 16px 16px;box-shadow:0 18px 30px -22px rgba(40,27,23,.3)}
.vs-row:not(.vs-cols)+.vs-row .vs-us{box-shadow:inset 0 1px 0 #f3ebe4}
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,7vw,110px);padding:96px var(--page) 72px}
.faq-intro h2{margin-bottom:0}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{font-size:19px;font-weight:600;letter-spacing:-.01em;padding:24px 44px 24px 0}
.faq summary::after{top:22px;right:4px;width:28px;height:28px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-size:20px;line-height:1;transition:background .2s var(--ease),transform .3s var(--ease)}
.faq details[open] summary::after{background:var(--orange);transform:rotate(180deg)}
.faq details p{font-size:16px;line-height:1.7;max-width:36em;padding-bottom:12px}

/* 7. Closing panel */
.closing{padding:24px var(--page) 88px}
.closing-panel{position:relative;overflow:hidden;isolation:isolate;background:var(--orange);border-radius:28px;padding:88px clamp(24px,6vw,88px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(40px,6vw,96px);align-items:center}
/* The hero's print, closing the page the way it opened: cream rings centred behind the application card */
.closing-print{position:absolute;z-index:-1;right:calc(clamp(24px,6vw,88px) + 200px);top:50%;width:760px;height:760px;margin:-380px -380px 0 0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,var(--cream) 0 3px,transparent 3px 19px);-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent);opacity:.75}
.closing-copy h2{max-width:9em}
.closing-copy p{font-size:18px;line-height:1.55;max-width:25em;margin:22px 0 32px}
.closing-facts{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.closing-facts li{font-size:15px;font-weight:600;line-height:1;padding:9px 14px;border-radius:999px;background:rgba(255,244,232,.32);box-shadow:inset 0 0 0 1px rgba(40,27,23,.14)}
/* The application, stepping through on its own while the box is on screen (home.js) */
.closing-steps .mock{width:100%;padding:22px 24px 18px;box-shadow:0 30px 60px -28px rgba(40,27,23,.55)}
.closing-steps .mock ol li{padding:8px 10px;font-size:16px;transition:background-color .25s var(--ease),color .25s var(--ease)}
.closing-steps .mock-top span{color:var(--ink);font-weight:650}

/* 8. Footer */
.foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,2fr);gap:40px;padding:64px var(--page) 28px;background:var(--panel)}
.foot .brand>svg{width:164px;height:34px}
.foot-brand p{font-size:15px;line-height:1.7;color:var(--muted);margin:18px 0 0}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.foot-col h2{font-size:13px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;margin:0 0 10px}
.foot-col a,.foot-col .plain{font-size:15px;padding:7px 0;text-decoration:none}
.foot-col a:hover,.foot-col .plain:hover{text-decoration:underline;text-underline-offset:4px}

/* Motion. Everything is visible without it; these classes are only added by home.js. */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .rv.in{opacity:1;transform:none}
  .kit-row.is-moving{animation:kit-slide 46s linear infinite}
  .kit-row.rev.is-moving{animation-direction:reverse}
  .kit-rows:hover .kit-row,.kit-rows.is-paused .kit-row{animation-play-state:paused}
  @keyframes kit-slide{to{transform:translateX(calc(-50% - 8px))}}
  .collage .shape{translate:0 calc(var(--scroll,0) * var(--depth,0) * 1px);animation:drift 9s ease-in-out infinite alternate}
  .print{--depth:-40;animation-duration:10s}
  .how-visual.is-live:not(.is-in) .hc-machine{opacity:0;transform:translateY(18px) scale(.7)}
  .how-visual.is-in .hc-machine{animation:machine-pop .75s cubic-bezier(.34,1.56,.64,1) both}
  @keyframes machine-pop{from{opacity:0;transform:translateY(18px) scale(.7)}to{opacity:1;transform:none}}
  @keyframes drift{from{transform:translateY(0) rotate(0)}to{transform:translateY(-9px) rotate(2.5deg)}}
  .lead.is-paused .shape{animation-play-state:paused}
  .assets.is-auto .finance-tabs button[aria-selected=true]::after{animation:tab-fill 7s linear forwards}
  .assets.is-auto .finance-tabs:hover button::after,.assets.is-auto .finance-tabs:focus-within button::after,.assets.is-paused .finance-tabs button::after{animation-play-state:paused}
  @keyframes tab-fill{from{height:0}to{height:100%}}
  .faq details[open] p{animation:answer .3s var(--ease)}
  @keyframes answer{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* Narrower screens */
@media (max-width:960px){
  /* stacked: one card per topic. Our answer leads; the loan follows as a quieter line, labelled in words */
  .versus-head{margin-bottom:24px}
  .vs-row.vs-cols{display:none}
  .vs-row{display:flex;flex-direction:column;background:#fff;border-radius:16px;padding:20px 20px 18px;margin-top:12px;box-shadow:0 10px 26px -20px rgba(40,27,23,.35)}
  .vs-row>span{display:block;padding:0!important;border:0!important;background:none;box-shadow:none!important}
  .vs-row .vs-topic{order:0;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:6px}
  .vs-row .vs-us{order:1;font-size:19px;font-weight:650;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
  .vs-row .vs-loan{order:2;font-size:15px;line-height:1.5;color:var(--muted);margin-top:16px;padding-top:14px!important;border-top:1px solid #eee5dd!important}
  .vs-row .vs-loan::before{content:attr(data-label) ": ";position:static;display:inline;width:auto;height:auto;border-radius:0;background:none;font-weight:650;color:var(--ink)}
  .vs-row .vs-us::before,.vs-row .vs-us::after{display:none}
  .site-header nav{display:none}
  .assets-grid{grid-template-columns:1fr}
  .assets .finance-tabs{display:grid;grid-template-columns:1fr 1fr}
  .assets .finance-tabs button small{display:none}
  .how-body{grid-template-columns:1fr;gap:0}
  /* stacked: no pinned card; each step carries its own card under its text (home.js) */
  #how-visual{display:none}
  .how-visual.hc-inline{display:block;position:relative;top:auto;height:auto;width:100%;margin:22px 0 4px}
  .closing-panel{grid-template-columns:1fr;gap:44px}
  .closing-steps{max-width:440px;width:100%}
  .closing-print{right:auto;left:calc(clamp(24px,6vw,88px) + 220px);top:auto;bottom:-200px;margin:0 0 0 -380px}
  .how-steps{padding-bottom:0}
  .own-card{max-width:440px;margin:0 auto}
  /* stacked layouts keep the sticky box short: a smaller machine on a centred axis */
  /* the per-step cards don't pin, so the machine can be larger than the old pinned one */
  .own-card{--mw:62%}
  .hc-stage{margin-bottom:14px;padding-top:9%}
  .hc-print{width:132%;background:repeating-radial-gradient(circle at 50% 48%,rgba(255,244,232,.26) 0 2px,transparent 2px 10px)}
  .how-steps > li,.how-steps.is-live > li{min-height:0;padding:34px 0 10px;opacity:1}
  .faq{grid-template-columns:1fr;gap:28px}
  .foot{grid-template-columns:1fr 1fr;gap:32px 24px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:760px){
  .versus{padding:40px var(--page) 0}
  .versus-panel{padding:44px 20px 32px;border-radius:22px}
  .vs-print{right:-200px;top:-220px}
  .vs-row{padding:18px 18px 16px}
  .vs-row .vs-us{font-size:18px}
  :root{--page:20px}
  :root{--header-h:68px}
  html{scroll-padding-top:76px}
  .site-header{padding:12px var(--page)}
  .site-header .brand>svg{width:130px;height:27px}
  #main h2{font-size:33px}
  .lead{padding-top:44px;border-radius:0 0 50% 50%/0 0 28px 28px}
  .lead h1{font-size:clamp(36px,10.6vw,52px)}
  .lead-sub{font-size:16.5px;margin:18px auto 22px}
  .collage{height:300px;margin-top:36px}
  .collage-photo{width:78vw;max-width:340px;height:300px;margin-left:calc(min(78vw,340px) / -2)}
  .print{--d:min(130vw,560px);background:repeating-radial-gradient(circle at 50% 100%,var(--cream) 0 7px,transparent 7px 31px)}
  .kit{padding-top:52px}
  .kit-row li{min-width:190px;min-height:88px;padding:22px 24px;border-radius:12px}
  .assets{padding-top:64px}
  .assets-head{display:block;margin-bottom:26px}
  .assets .finance-tabs{gap:8px}
  .assets .finance-tabs button{font-size:16px;padding:14px 12px 14px 18px;min-height:0}
  .assets-card{grid-template-columns:1fr;min-height:0}
  .assets .finance-panel{padding:28px 22px}
  .assets-stage{order:-1;aspect-ratio:4/3}
  .asset-photo[data-asset-photo=machinery]{object-position:50% 52%}
  .asset-photo[data-asset-photo=catering]{object-position:50% 30%}
  .asset-photo[data-asset-photo=vehicles]{object-position:50% 64%}
  .asset-photo[data-asset-photo=other]{object-position:50% 38%}
  .how{padding-left:0;padding-right:0;padding-top:40px}
  .how-panel{border-radius:22px;padding:48px 20px 40px}
  .how-head{display:block}
  .how-visual.hc-inline{margin:20px 0 2px}
  .hc-big{font-size:30px}
  .hc-pay li{padding:6px 6px 6px 27px;font-size:13px}
  .hc-head{font-size:14px;margin-bottom:6px!important}
  .hc-choice{gap:4px}
  .hc-choice li{padding-top:5px;padding-bottom:5px}
  .hc-big{line-height:1.05}
  .hc-pay li::before{left:8px;width:14px;height:14px;margin-top:-7px}
  .hc-pay li::after{left:13px;width:3px;height:7px;margin-top:-5px}
  .how-steps > li{padding:30px 0 6px}
  .how-steps > li > p{font-size:16px}
  .how-facts{grid-template-columns:1fr;gap:20px;padding:28px 0;margin-top:34px}
  .how-foot{display:block}
  .how-foot .button{margin-top:22px;width:100%}
  .faq{padding:64px var(--page) 48px}
  .faq summary{font-size:17px;padding:20px 40px 20px 0}
  .faq summary::after{top:18px}
  .closing{padding:8px var(--page) 56px}
  .closing-panel{padding:52px 22px 28px;border-radius:22px;gap:36px}
  .closing-print{left:50%;width:600px;height:600px;margin-left:-300px;bottom:-200px}
  .closing-steps .mock{padding:16px 16px 12px}
  .closing-steps .mock ol li{padding:5px 8px;font-size:15px}
  .closing-copy p{font-size:16.5px;margin-bottom:26px}
  .closing-facts li{font-size:14px;padding:8px 12px}
  .closing-panel .button{width:100%}
  .foot{grid-template-columns:1fr 1fr;gap:32px 20px;padding:44px var(--page) 22px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:420px){
  .assets .finance-tabs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .asset-photo{transition:none}
  .how-steps.is-live > li{opacity:1}
}
@media (forced-colors:active){
  .kit-photo,.kit-row li::after{display:none}
  .kit-row li{background:Canvas;color:CanvasText}
  .kit-name{text-shadow:none}
  .kit-row li,.assets .finance-tabs button,.assets-card,.mock,.how-panel,.closing-panel,.versus-panel,.vs-us{border:1px solid CanvasText}
  .assets .finance-tabs button[aria-selected=true]{outline:2px solid Highlight}
  .shape{display:none}
  .how-steps.is-live > li{opacity:1}
}

/* The application view keeps its own layout: undo the homepage header behaviour there. */
.application-mode .site-header{position:static;box-shadow:none}
.application-mode .site-header.on-hero{background:#fff}

/* Phone and tablet menu: the links and Apply now move behind a menu button */
.menu-toggle{display:none}
.mobile-menu{display:none}
@media (max-width:960px){
  .site-header>.button{display:none}
  .menu-toggle{display:grid;place-content:center;gap:5px;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .menu-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s var(--ease)}
  .menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-open .menu-toggle span:nth-child(2){opacity:0}
  .menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;padding:6px var(--page) 24px;border-top:1px solid var(--rule);box-shadow:0 24px 40px -24px rgba(40,27,23,.45);animation:menu-in .25s var(--ease)}
  .site-header .mobile-menu nav{display:flex;flex-direction:column;gap:0;font-size:inherit}
  .mobile-menu nav a{padding:15px 0;font-size:20px;font-weight:600;letter-spacing:-.01em;border-bottom:1px solid var(--rule)}
  .mobile-menu .button{display:flex;width:100%;justify-content:center;margin-top:22px}
  .site-header.menu-open,.site-header.menu-open.on-hero{background:#fff;box-shadow:none}
  @keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}
.menu-backdrop{position:fixed;inset:0;z-index:19;background:rgba(40,27,23,.35);animation:menu-fade .25s var(--ease)}
@keyframes menu-fade{from{opacity:0}to{opacity:1}}
.application-mode .menu-toggle,.application-mode .mobile-menu{display:none}
@media (prefers-reduced-motion:reduce){.mobile-menu,.menu-backdrop{animation:none}.menu-toggle span{transition:none}}