/* ==========================================================================
   Novora Asset Finance — stylesheet
   Direction C "Control Room"
   ========================================================================== */

:root{
  /* The neutrals are teal-tinted rather than grey, so the whole page reads
     as one colour family instead of black with a teal accent bolted on. */
  --ink:#062B2E;
  --ink-2:#083236;
  --panel:#0B3B3E;
  --footer:#042023;
  --line:rgba(143,232,223,.16);
  --line-soft:rgba(143,232,223,.10);
  --text:#EAF4F3;
  --text-2:#D3E5E3;
  --muted:#AECAC8;
  --dim:#96B4B2;
  --faint:#82A09E;

  --teal-deep:#0F5F5C;
  --teal:#17A9A3;
  --teal-lt:#4FD1C7;
  --teal-pale:#8FE8DF;

  /* Kept for the brand mark and the odd highlight — no longer an action colour */
  --orange:#F8943B;
  --amber:#FEC568;

  --wrap:1280px;
  --gut:28px;
  --radius:5px;

  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}

/* Any author `display` rule outranks the browser's built-in [hidden] rule, so
   without this, `hidden` silently does nothing on flex or grid components.
   This caught the contact panel and the company picker. Keep it. */
[hidden]{display:none !important}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{display:block;max-width:100%}

a{color:var(--teal-lt);text-decoration:none}
a:hover{color:var(--teal-pale)}

h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(34px,5vw,60px);line-height:1.04;letter-spacing:-.035em}
h2{font-size:clamp(26px,3.2vw,34px);line-height:1.12}
h3{font-size:19px;line-height:1.3}
p{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

.eyebrow{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:var(--teal-lt);text-transform:uppercase;
}
.eyebrow--orange{color:var(--amber)}
.eyebrow--dim{color:var(--dim)}
.eyebrow a{color:inherit}

.lede{font-size:clamp(16px,1.6vw,18.5px);line-height:1.65;color:var(--muted);max-width:62ch}
.small{font-size:14.5px;line-height:1.65;color:var(--muted)}
.fine{font-size:13px;line-height:1.7;color:var(--faint)}

/* --- kite glyph -------------------------------------------------------- */
.kite{flex:0 0 auto}

/* --- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;border:1px solid transparent;border-radius:3px;
  font-family:var(--body);font-size:15px;font-weight:600;line-height:1;
  cursor:pointer;white-space:nowrap;transition:filter .15s ease,background .15s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn--primary{background:var(--teal);color:#03211F}
.btn--primary:hover{color:#03211F}
.btn--teal{background:var(--teal);color:#03211F}
.btn--teal:hover{color:#03211F}
/* the one warm button, for when two actions sit side by side */
.btn--accent{background:var(--amber);color:#2A1B08}
.btn--accent:hover{color:#2A1B08}
.btn--ghost{border-color:rgba(255,255,255,.2);color:var(--text);background:transparent}
.btn--ghost:hover{color:var(--text);background:rgba(255,255,255,.04)}
.btn--portal{
  border-color:rgba(79,209,199,.5);background:rgba(23,169,163,.1);color:var(--teal-pale);
}
.btn--lg{min-height:56px;padding:0 32px;font-size:16px}
.btn--sm{min-height:42px;padding:0 18px;font-size:14px}

.inline-link{display:inline-flex;align-items:center;gap:9px;font-weight:600}

/* --- header ------------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(6,43,46,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{display:flex;align-items:center;gap:32px;min-height:88px}

.brand{display:flex;align-items:center;gap:12px;color:var(--text);flex:0 0 auto}
.brand:hover{color:var(--text)}
.brand__name{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.02em}

.nav{display:flex;align-items:center;gap:26px;flex:1 1 auto;font-size:14.5px}
.nav a{color:#B6BEC2}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{
  color:var(--text);font-weight:600;
  border-bottom:2px solid var(--teal-lt);padding-bottom:4px;
}

.header-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}

.nav-toggle{
  display:none;width:46px;height:46px;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.16);border-radius:3px;background:transparent;cursor:pointer;
}

/* --- sections ---------------------------------------------------------- */
section{border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.section{padding:clamp(48px,6vw,76px) 0}
.section--tight{padding:clamp(40px,4.5vw,56px) 0}
.section--alt{background:var(--ink-2)}
.section--glow{background:radial-gradient(900px 420px at 78% 10%,rgba(23,169,163,.13),transparent 70%)}
.section--glow-warm{background:radial-gradient(880px 400px at 78% 10%,rgba(254,197,104,.09),transparent 70%)}

.section__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,44px);
}

.stack{display:flex;flex-direction:column}
.stack--sm{gap:12px}
.stack--md{gap:20px}
.stack--lg{gap:30px}

.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:start}
.split--even{grid-template-columns:1fr 1fr}
.split--center{align-items:center}

.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* --- hero -------------------------------------------------------------- */
.hero{padding:clamp(52px,7vw,92px) 0 clamp(48px,6vw,80px)}
.hero h1{margin-bottom:22px}
.hero .eyebrow{margin-bottom:26px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

.breadcrumb{
  display:flex;align-items:center;gap:9px;margin-bottom:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.breadcrumb a{color:var(--dim)}
.breadcrumb span{color:var(--teal-lt)}
.breadcrumb--warm span{color:var(--amber)}

/* --- cards ------------------------------------------------------------- */
.card{
  padding:28px;border:1px solid rgba(255,255,255,.11);
  border-radius:var(--radius);background:var(--panel);
}
.card h3{margin-bottom:9px}
.card__icon{margin-bottom:16px}
/* one warm panel per page at most — enough for contrast, not a theme */
.card--warm{
  border-color:rgba(254,197,104,.3);
  background:linear-gradient(140deg,#20372F 0%,var(--panel) 74%);
}
.card--teal{border-color:rgba(79,209,199,.3);background:rgba(23,169,163,.07)}
.card--top-teal{border:0;border-top:2px solid var(--teal);background:var(--panel);border-radius:0}
.card--top-orange{border:0;border-top:2px solid var(--amber);background:var(--panel);border-radius:0}

/* --- stats ------------------------------------------------------------- */
.stats{display:flex;gap:40px;flex-wrap:wrap;padding-top:28px;margin-top:44px;border-top:1px solid var(--line)}
.stat__num{font-family:var(--display);font-size:30px;font-weight:600;color:var(--amber);line-height:1}
.stat__label{font-size:13px;color:var(--dim);margin-top:5px}

/* --- flow (kite process line) ------------------------------------------ */
.flow{position:relative;display:grid;gap:28px}
.flow--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.flow--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.flow::before{
  content:"";position:absolute;left:34px;right:34px;top:12px;height:1px;
  background-image:linear-gradient(90deg,rgba(79,209,199,.75) 55%,transparent 0);
  background-size:11px 1px;
}
.flow__step{position:relative}
.flow__mark{display:block;margin-bottom:20px;background:var(--ink)}
.section--alt .flow__mark{background:var(--ink-2)}
.flow__label{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-lt);margin-bottom:10px;
}
.flow__label--orange{color:var(--amber)}
.flow__label--dim{color:var(--dim)}
.flow__step h3{margin-bottom:10px}

/* --- ticked lists ------------------------------------------------------ */
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--text-2)}
.ticks .kite{margin-top:6px}

/* --- asset chips ------------------------------------------------------- */
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.chip{
  display:flex;align-items:center;gap:11px;min-height:56px;padding:12px 16px;
  border:1px solid var(--line);border-radius:3px;font-size:14.5px;color:var(--text-2);
}
.chip--hi{border-color:rgba(79,209,199,.4);background:rgba(23,169,163,.08);color:var(--teal-pale)}

/* --- panels / mock UI --------------------------------------------------- */
.panel{border:1px solid rgba(255,255,255,.12);border-radius:6px;background:var(--panel);overflow:hidden}
.panel__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:48px;padding:0 20px;border-bottom:1px solid var(--line-soft);
}
.panel__bar span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.panel__body{padding:24px;display:flex;flex-direction:column;gap:18px}

.pill{
  display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:999px;
  background:rgba(23,169,163,.16);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--teal-lt);
}

.readout{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;border:1px solid rgba(79,209,199,.3);border-radius:4px;background:rgba(23,169,163,.1)}
.readout__val{font-family:var(--display);font-size:28px;font-weight:600;color:var(--teal-pale)}

/* --- timeline ----------------------------------------------------------- */
.timeline{display:flex;flex-direction:column}
.timeline__row{display:flex;gap:16px;align-items:flex-start}
.timeline__rail{display:flex;flex-direction:column;align-items:center;width:22px;flex:0 0 auto}
.timeline__line{width:1px;flex:1 1 auto;min-height:34px;background:rgba(79,209,199,.5)}
.timeline__line--dim{background:var(--line)}
.timeline__body{padding-bottom:18px}
.timeline__body strong{display:block;font-size:15px;font-weight:600}
.timeline__body span{display:block;font-size:13px;color:var(--dim);margin-top:3px}

/* --- spec rows (products) ----------------------------------------------- */
.specs{display:flex;flex-direction:column;gap:14px}
.specs__row{display:flex;justify-content:space-between;gap:20px;font-size:14.5px}
.specs__row dt{color:var(--dim);margin:0}
.specs__row dd{color:var(--text-2);font-weight:500;margin:0;text-align:right}
.specs hr{border:0;height:1px;background:var(--line-soft);margin:0}

/* --- comparison table ---------------------------------------------------- */
.table-wrap{border:1px solid rgba(255,255,255,.11);border-radius:6px;overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:760px}
th,td{padding:16px 20px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line-soft)}
thead th{background:var(--panel);font-size:15px;font-weight:600;color:var(--text)}
tbody th{color:var(--dim);font-weight:400}
tbody td{color:var(--text-2)}
tbody tr:nth-child(even){background:var(--ink-2)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* --- forms --------------------------------------------------------------- */
.form{padding:clamp(24px,3vw,36px);border:1px solid rgba(255,255,255,.11);border-radius:6px;background:var(--panel)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;color:#B6BEC2}
.field label .opt{color:var(--dim)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:3px;
  background:var(--ink);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.4;
}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:#6E787D}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal-lt);outline-offset:1px;border-color:transparent}
.fieldset{border:0;margin:0;padding:0}
.fieldset + .fieldset{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.fieldset legend{padding:0;margin-bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-lt)}
.fieldset legend.warm{color:var(--amber)}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:26px}
.consent input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--teal);flex:0 0 auto}
.consent label{font-size:14px;line-height:1.6;color:#B6BEC2}
.form__submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}

/* --- CTA band ------------------------------------------------------------ */
.cta{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta h2{margin-bottom:12px}

/* --- footer -------------------------------------------------------------- */
.site-footer{background:var(--footer);border-top:1px solid var(--line);padding:52px 0 44px}
.site-footer__inner{display:grid;grid-template-columns:1.2fr 2fr;gap:clamp(32px,5vw,64px)}
.footer-cols{display:flex;gap:clamp(32px,5vw,60px);flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:11px;font-size:14.5px}
.footer-col a,.footer-col span{color:#B6BEC2}
.footer-col__head{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-lt);margin-bottom:4px;
}
.legal{margin-top:36px;padding-top:24px;border-top:1px solid var(--line-soft)}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1080px){
  .split,.split--even{grid-template-columns:1fr}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chips{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:880px){
  .nav,.header-actions .btn--primary{display:none}
  .nav-toggle{display:flex}
  .site-header__inner{justify-content:space-between;gap:12px}
  .site-header.is-open .nav{
    display:flex;flex-direction:column;align-items:flex-start;gap:18px;
    position:absolute;left:0;right:0;top:100%;
    padding:24px var(--gut) 28px;background:var(--ink);border-bottom:1px solid var(--line);
  }
  .site-header.is-open .nav a[aria-current="page"]{border-bottom:0}
  .grid--3,.flow--3,.flow--4{grid-template-columns:1fr}
  .flow::before{display:none}
  .flow{gap:24px}
  .site-footer__inner{grid-template-columns:1fr}
}

@media (max-width:640px){
  :root{--gut:20px}
  .grid--2,.grid--4{grid-template-columns:1fr}
  .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{gap:24px 32px}
  .hero__actions .btn{width:100%}
  .cta{align-items:flex-start}
  .cta .btn{width:100%}
}

@media (max-width:420px){
  .chips{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ==========================================================================
   Additions — sky hero, logo, recent transactions, other products
   ========================================================================== */

/* --- brand logo ---------------------------------------------------------- */
.brand img{height:44px;width:auto}
.site-footer .brand img{height:38px}
.brand{gap:0}

/* --- sky hero ------------------------------------------------------------ */
.hero--sky{
  position:relative;isolation:isolate;
  background:#06272B url("sky.svg") center 72% / cover no-repeat;
  padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(56px,7vw,104px);
}
.hero--sky::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,16,20,.34) 0%,rgba(10,16,20,.10) 30%,rgba(15,20,23,.62) 82%,var(--ink) 100%),
    linear-gradient(90deg,rgba(10,16,20,.60) 0%,rgba(10,16,20,.10) 55%,rgba(10,16,20,.22) 100%);
}
.hero--sky .lede{color:#CFD7D9}
.hero--sky .panel{background:rgba(21,27,31,.88);backdrop-filter:blur(6px)}

/* headline with the sky cut into the letterforms */
.cutout{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(190,240,232,.9) 44%,rgba(255,220,164,.72) 100%),
    url("sky.svg");
  background-size:cover;
  background-position:center 62%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.cutout em{font-style:normal}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .cutout{color:var(--text);-webkit-text-fill-color:currentColor;background-image:none}
}

/* --- recent transactions ticker ------------------------------------------ */
.ticker{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker__track{display:flex;gap:16px;width:max-content;animation:ticker-slide 70s linear infinite}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
@keyframes ticker-slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}

.deal{
  flex:0 0 290px;padding:22px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);
}
.deal__head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.deal__sector{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-lt);
}
.deal__amount{font-family:var(--display);font-size:26px;font-weight:600;color:var(--amber);line-height:1.1}
.deal__asset{font-size:15px;font-weight:600;margin-top:8px}
.deal__meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft);font-size:13px;color:var(--dim);
}
.ticker-note{display:flex;gap:10px;align-items:center;margin-top:22px;font-size:13.5px;color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  .ticker{mask-image:none;-webkit-mask-image:none;overflow:visible}
  .ticker__track{animation:none;width:100%;flex-wrap:wrap}
  .deal{flex:1 1 260px}
}

/* --- other products ------------------------------------------------------ */
.prod-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden}
.prod-list__item{background:var(--panel);padding:26px 28px}
.prod-list__item h3{margin-bottom:8px}
.prod-list__item .tag{
  display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal-lt);
}
@media (max-width:760px){.prod-list{grid-template-columns:1fr}}


/* ==========================================================================
   Amendments — score panel, eligibility flow, kite step marks
   ========================================================================== */

.hero--short{padding-bottom:clamp(40px,5vw,64px)}
.hero--short .lede{max-width:66ch}

/* the dashed flow line must not run through the kite */
.flow__mark--masked{background:transparent}
.flow__mark{background:transparent;position:relative;z-index:1}
.flow{--mark-bg:var(--ink)}
.section--alt .flow{--mark-bg:var(--ink-2)}
.flow__step::before{
  content:"";position:absolute;left:-6px;top:0;width:36px;height:26px;
  background:var(--mark-bg);z-index:0;
}
.flow__mark{margin-left:0}

/* --- score dial ---------------------------------------------------------- */
.score-dial{position:relative;width:104px;height:104px;flex:0 0 auto}
.score-dial svg{width:100%;height:100%;display:block}
.score-dial__num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:32px;font-weight:600;color:var(--text);letter-spacing:-.02em;
}
.score-dial__num > span:last-child{font-size:14px;color:var(--dim);font-weight:500;margin-left:2px;align-self:center}
.score-dial--lg{width:150px;height:150px}
.score-dial--lg .score-dial__num{font-size:46px}
.score-dial--lg .score-dial__num > span:last-child{font-size:17px}

.panel--score .panel__body{gap:22px}
.score-preview{display:flex;gap:22px;align-items:center}
.score-preview__title{font-size:23px;margin-bottom:8px}
.ticks--tight{gap:10px}
.ticks--tight li{font-size:14.5px}

.score-result{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.score-result > div:last-child{flex:1 1 280px;min-width:0}
.score-result h2{font-size:30px;outline:none}

/* --- eligibility step rail ----------------------------------------------- */
.elig-steps{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;
}
.elig-step{
  display:flex;align-items:center;gap:11px;flex:1 1 146px;
  padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
}
.elig-step__mark{opacity:.3;transition:opacity .2s ease}
.elig-step.is-done .elig-step__mark{opacity:1}
.elig-step__label{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.elig-step.is-done .elig-step__label{color:var(--teal-lt)}
.elig-step__title{font-size:14.5px;font-weight:600;margin-top:3px}

@media (max-width:640px){
  .brand img{height:36px}
  .score-preview{gap:16px}
  .score-dial{width:84px;height:84px}
  .score-dial__num{font-size:26px}
}

/* ==========================================================================
   Customer care pages, company search, social links
   ========================================================================== */

/* --- long-form documents -------------------------------------------------- */
.prose{max-width:76ch}
.prose__block{border:0;padding:0;margin-bottom:38px}
.prose__block:last-child{margin-bottom:0}
.prose h2{font-size:clamp(21px,2.2vw,25px);margin-bottom:14px;color:var(--text)}
.prose p{margin-bottom:14px;font-size:15.5px;line-height:1.75;color:var(--muted)}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--text-2);font-weight:600}
.prose ul{margin:0 0 14px;padding:0;list-style:none}
.prose li{
  position:relative;padding-left:22px;margin-bottom:11px;
  font-size:15.5px;line-height:1.75;color:var(--muted);
}
.prose li::before{
  content:"";position:absolute;left:0;top:10px;width:9px;height:9px;
  background:var(--teal-lt);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.prose a{text-decoration:underline;text-underline-offset:3px}

/* --- company search ------------------------------------------------------- */
.results{margin-top:10px}
.results:empty{margin-top:0}
.res{
  display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  padding:13px 16px;border:1px solid var(--line);border-bottom:0;background:var(--ink);
  color:var(--text);font-family:var(--body);cursor:pointer;
}
.res:first-child{border-radius:3px 3px 0 0}
.res:last-child{border-bottom:1px solid var(--line);border-radius:0 0 3px 3px}
.res:hover,.res:focus-visible{background:rgba(23,169,163,.1);border-color:rgba(79,209,199,.4)}
.res__name{font-size:15px;font-weight:600}
.res__meta{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.res-msg{
  padding:13px 16px;border:1px solid var(--line);border-radius:3px;background:var(--ink);
  font-size:14px;color:var(--muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}

.chosen{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid rgba(79,209,199,.4);border-radius:var(--radius);background:rgba(23,169,163,.08);
}
.chosen__name{font-size:16px;font-weight:600}
.chosen__meta{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:3px}

.linkish{
  border:0;background:none;padding:0;font-family:var(--body);font-size:14.5px;
  color:var(--teal-lt);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.linkish:hover{color:var(--teal-pale)}

.spin{
  width:13px;height:13px;flex:0 0 auto;border:2px solid rgba(255,255,255,.2);
  border-top-color:var(--teal-lt);border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}

/* --- radio choice cards ---------------------------------------------------- */
.label-as-legend{display:block;font-size:13px;color:#B6BEC2;margin-bottom:10px}
.choice{display:flex;flex-direction:column;gap:10px}
.choice__opt{display:flex;align-items:flex-start;gap:13px;padding:15px 17px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--ink);cursor:pointer}
.choice__opt:hover{border-color:rgba(79,209,199,.35)}
.choice__opt input{margin:3px 0 0;accent-color:var(--teal);flex:0 0 auto;width:17px;height:17px}
.choice__opt b{display:block;font-size:15px;font-weight:600;color:var(--text)}
.choice__opt small{display:block;font-size:13.5px;color:var(--dim);margin-top:2px}
.choice__opt:has(input:checked){border-color:rgba(79,209,199,.55);background:rgba(23,169,163,.08)}

/* --- lead reference -------------------------------------------------------- */
.ref{
  display:inline-block;margin-top:22px;padding:10px 16px;border:1px solid var(--line);
  border-radius:999px;font-size:13.5px;color:var(--muted);
}
.ref b{color:var(--teal-pale);font-family:var(--mono);letter-spacing:.04em}

/* --- social ---------------------------------------------------------------- */
.social{display:flex;gap:10px;margin-top:18px}
.social__link{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:3px;color:#B6BEC2;font-size:14px;font-weight:500;
}
.social__link:hover{color:var(--text);border-color:rgba(79,209,199,.45);background:rgba(23,169,163,.08)}

/* four footer columns sit on one row once there's space */
@media (min-width:900px){
  .site-footer__inner{grid-template-columns:1fr 2.3fr}
  .footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
}

/* ==========================================================================
   Decorative background kites
   Oversized, low-contrast, bled off the edges. Ornament only — they sit
   behind everything, take no clicks, and never create horizontal scroll.
   ========================================================================== */
.has-deco{position:relative;overflow:hidden;isolation:isolate}
.has-deco > .wrap{position:relative;z-index:1}

.deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.deco span{position:absolute;display:block;line-height:0;opacity:.07}
.deco svg{display:block}

/* a shade more presence on the darker bands, where they'd otherwise vanish */
.section--alt .deco span{opacity:.085}
.site-footer .deco span{opacity:.05}

@media (max-width:900px){
  .deco span{opacity:.05}
  .deco span:nth-child(2){display:none}   /* keep the small accents off phones */
}

@media (prefers-reduced-motion:no-preference){
  .deco span{transition:opacity .4s ease}
}

/* ==========================================================================
   Chat — launcher, conversation panel
   ========================================================================== */
.chat{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;
  align-items:flex-end;gap:12px}

.chat-launch{
  display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 20px;
  border:1px solid rgba(143,232,223,.5);border-radius:999px;
  background:var(--teal-lt);color:#04211E;
  font-family:var(--body);font-size:15px;font-weight:600;cursor:pointer;
  box-shadow:0 12px 34px rgba(2,14,16,.62);
  transition:filter .15s ease,transform .15s ease;
}
.chat-launch:hover{filter:brightness(1.08);transform:translateY(-1px)}

.chat-panel{
  width:360px;max-height:min(560px,calc(100vh - 140px));display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
  box-shadow:0 22px 60px rgba(2,14,16,.62);overflow:hidden;
}
.chat-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;
  padding:14px 16px;border-bottom:1px solid var(--line-soft);background:rgba(23,169,163,.08);
}
.chat-panel__head strong{display:block;font-family:var(--display);font-size:16px;font-weight:600}
.chat-panel__sub{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.chat-panel__close{
  width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer;
}
.chat-panel__close:hover{color:var(--text);background:rgba(255,255,255,.06)}

.chat-log{
  flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  min-height:180px;
}
.chat-msg{
  max-width:86%;padding:11px 14px;border-radius:12px;font-size:14.5px;line-height:1.55;
  overflow-wrap:anywhere;
}
.chat-msg--bot{align-self:flex-start;background:var(--ink);color:var(--text-2);
  border:1px solid var(--line-soft);border-bottom-left-radius:4px}
.chat-msg--you{align-self:flex-end;background:rgba(23,169,163,.16);color:var(--text);
  border:1px solid rgba(79,209,199,.3);border-bottom-right-radius:4px}
.chat-msg--plain{background:none;border:0;padding:0;max-width:100%}
.chat-msg a{text-decoration:underline;text-underline-offset:2px}

.chat-handoff{display:flex;gap:8px;flex-wrap:wrap}

.chat-suggest{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.chat-suggest button{
  text-align:left;padding:9px 13px;border:1px solid rgba(79,209,199,.3);border-radius:999px;
  background:transparent;color:var(--teal-pale);font-family:var(--body);font-size:13.5px;cursor:pointer;
}
.chat-suggest button:hover{background:rgba(23,169,163,.1)}

.chat-dots{display:inline-flex;gap:4px;align-items:center;height:12px}
.chat-dots i{width:6px;height:6px;border-radius:50%;background:var(--dim);
  animation:chat-bounce 1.2s infinite ease-in-out}
.chat-dots i:nth-child(2){animation-delay:.15s}
.chat-dots i:nth-child(3){animation-delay:.3s}
@keyframes chat-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.chat-dots i{animation:none;opacity:.6}}

.chat-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line-soft);flex:0 0 auto}
.chat-form input{
  flex:1 1 auto;min-width:0;height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.16);
  border-radius:999px;background:var(--ink);color:var(--text);font-family:var(--body);font-size:14.5px;
}
.chat-form input:focus{outline:2px solid var(--teal-lt);outline-offset:1px;border-color:transparent}
.chat-send{
  width:44px;height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:var(--teal);color:#06201F;cursor:pointer;
}
.chat-send:disabled{opacity:.5;cursor:default}

.chat-foot{padding:0 14px 12px;font-size:11.5px;line-height:1.5;color:var(--faint);flex:0 0 auto}
.chat-foot a{color:var(--faint);text-decoration:underline;text-underline-offset:2px}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:640px){
  .chat{right:12px;bottom:12px;left:12px;align-items:stretch}
  .chat-launch{align-self:flex-end}
  .chat-panel{width:auto;max-height:calc(100vh - 120px)}
}

@media print{.chat{display:none}}

/* WhatsApp launcher — the green mark is the affordance people recognise,
   so it keeps its own colour rather than being brought into the palette. */
.chat-launch--wa{background:#25D366;border-color:rgba(37,211,102,.5);color:#06240F}
.chat-launch--wa:hover{color:#06240F}
.chat-panel--contact{width:290px}
.chat-panel--contact .chat-panel__body{padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-panel--contact .btn{width:100%}

/* --- contact panel rows --------------------------------------------------- */
.contact-list{display:flex;flex-direction:column;padding:8px}
.contact-row{
  display:flex;align-items:center;gap:13px;padding:12px 12px;border-radius:6px;color:var(--text);
}
.contact-row:hover{background:rgba(255,255,255,.05);color:var(--text)}
.contact-row__icon{
  width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;color:var(--teal-lt);
}
.contact-row b{display:block;font-size:15px;font-weight:600}
.contact-row small{display:block;font-size:12.5px;color:var(--dim);margin-top:1px}
.contact-row--wa .contact-row__icon{
  border-color:rgba(37,211,102,.45);background:rgba(37,211,102,.12);color:#25D366;
}

/* --- contact panel: closing must be unmissable ----------------------------- */
.chat-launch__shut{display:none;align-items:center;gap:9px}
.chat-launch__open{display:inline-flex;align-items:center;gap:9px}
.chat.is-open .chat-launch__open{display:none}
.chat.is-open .chat-launch__shut{display:inline-flex}
.chat.is-open .chat-launch{background:var(--panel);border-color:var(--line);color:var(--text)}

/* a 44px target, the minimum that can be tapped reliably on a phone */
.chat-panel__close{width:44px;height:44px;margin:-7px -8px -7px 0}

.chat-backdrop{position:fixed;inset:0;z-index:-1;background:rgba(4,20,23,.55)}

@media (min-width:641px){
  .chat-backdrop{background:transparent}
}


.contact-row--msgr .contact-row__icon{
  border-color:rgba(0,132,255,.45);background:rgba(0,132,255,.12);color:#0084FF;
}
/* six rows now — let the list scroll on a short screen rather than overflow */
.chat-panel--contact{max-height:min(560px,calc(100vh - 130px))}
.contact-list{overflow-y:auto}


/* ==========================================================================
   HIGH-END LAYER
   Atmosphere, glass, depth, motion. Everything below overrides what is above
   it; nothing here changes the markup or the copy.
   ========================================================================== */

:root{
  --ink:#03181B;
  --ink-2:#062226;
  --panel:rgba(143,232,223,.045);
  --footer:#021316;
  --line:rgba(143,232,223,.15);
  --line-soft:rgba(143,232,223,.085);
  --radius:12px;
  --r-sm:9px;
  --r-lg:16px;
  --lift:0 32px 84px -34px rgba(0,0,0,.92);
  --inset:inset 0 1px 0 rgba(255,255,255,.07);
}

html{background:#03181B}
body{background:transparent;position:relative}

/* a teal bloom and a fine grain, fixed behind the whole document */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1000px 680px at 16% -8%,rgba(23,169,163,.22),transparent 62%),
    radial-gradient(840px 580px at 97% 6%,rgba(79,209,199,.10),transparent 60%),
    radial-gradient(760px 520px at 52% 110%,rgba(254,197,104,.055),transparent 62%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* --- type ---------------------------------------------------------------- */
h1{font-size:clamp(36px,5.4vw,66px);letter-spacing:-.04em;line-height:1.01}
h2{font-size:clamp(27px,3.4vw,38px);letter-spacing:-.032em}
.lede{font-size:clamp(16.5px,1.75vw,18.5px);line-height:1.66}
.eyebrow{letter-spacing:.2em}

/* --- header -------------------------------------------------------------- */
.site-header{
  background:rgba(3,24,27,.66);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.nav{gap:6px}
.nav a{border-radius:99px;padding:8px 11px;white-space:nowrap;
  transition:color .16s ease,background .16s ease}
.nav a:hover{background:rgba(143,232,223,.07)}
.site-header__inner{gap:22px}

/* --- buttons ------------------------------------------------------------- */
.btn{border-radius:99px;padding:0 26px;
  transition:filter .15s ease,background .15s ease,transform .15s ease,box-shadow .2s ease}
.btn--primary,.btn--teal{box-shadow:0 14px 34px -16px rgba(23,169,163,.9)}
.btn--accent{box-shadow:0 14px 34px -16px rgba(254,197,104,.7)}
.btn--ghost,.btn--portal{background:rgba(143,232,223,.035)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}

/* --- surfaces ------------------------------------------------------------ */
.card,.panel,.deal,.table-wrap,.form,.chosen,.score-preview,.res{
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(143,232,223,.058),rgba(143,232,223,.012));
  border:1px solid var(--line);
  box-shadow:var(--lift),var(--inset);
}
.panel{border-radius:var(--r-lg)}
.panel__bar{background:rgba(143,232,223,.04);border-bottom:1px solid var(--line)}
.card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(79,209,199,.42);
  box-shadow:0 34px 70px -30px rgba(23,169,163,.42),var(--inset);
}
.card--top-teal,.card--top-orange,.card--teal,.card--warm{position:relative;overflow:hidden}

input,select,textarea{border-radius:var(--r-sm)!important;
  background:rgba(143,232,223,.05)!important;border-color:var(--line)!important}
input:focus,select:focus,textarea:focus{background:rgba(143,232,223,.085)!important}

/* --- the deal ticker ----------------------------------------------------- */
.ticker{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.deal{padding:24px;transition:border-color .2s ease}
.deal:hover{border-color:rgba(79,209,199,.38)}

/* --- figures ------------------------------------------------------------- */
.stat__num,.deal__amount,.readout__val,.score-dial__num{font-variant-numeric:tabular-nums}
.stats{border-top-color:var(--line)}

/* --- footer: grid children need min-width:0 or the tracks overflow the
       container, which was pushing the page 11px wide at every size -------- */
.site-footer__inner,.footer-cols{min-width:0}
.site-footer__inner > *,.footer-cols > *,.footer-col{min-width:0}
/* the long address is one unbreakable string and was 89px wider than its
   column, which is where the stray horizontal scroll came from */
.footer-col a,.footer-col span{overflow-wrap:anywhere}
.site-footer{background:var(--footer);border-top:1px solid var(--line-soft)}

/* --- motion -------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1)}

/* --- hero graphic: 50+ lenders converging on one application ------------- */
.hero{position:relative;overflow:hidden}
.hero > .wrap{position:relative;z-index:1}
.heroart{
  position:absolute;right:-2%;top:50%;width:min(66vw,700px);aspect-ratio:1;
  transform:translateY(-50%);pointer-events:none;z-index:0;opacity:1;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,rgba(0,0,0,.3) 92%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 70%,rgba(0,0,0,.3) 92%,transparent 100%);
}
.heroart svg{width:100%;height:100%;display:block;overflow:visible;
  animation:naFloat 21s ease-in-out infinite}
/* the score panel sits over the middle of the ring, so it is frosted:
   the artwork reads as depth behind the glass instead of competing with
   the text on it */
.hero .panel{
  background:linear-gradient(180deg,rgba(143,232,223,.07),rgba(143,232,223,.02)),rgba(3,24,27,.72);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
}
.heroart .na-ring{transform-box:view-box;transform-origin:50% 50%}
.heroart .na-ringc{transform-box:view-box}
 /* teal on a teal ground needs more contrast than green on black did, so the
    ring colours are set here rather than left on the SVG attributes */
.na-r1{stroke:#4FD1C7;stroke-width:1.25;opacity:.5;animation:naSpin 200s linear infinite}
.na-r2{stroke:#8FE8DF;stroke-width:1.8;opacity:.8;animation:naSpinR 128s linear infinite}
.na-r3{stroke:#4FD1C7;stroke-width:1.1;opacity:.46;animation:naSpin 86s linear infinite}
.na-feed{stroke-dasharray:3 7;animation:naDrift 3.4s linear infinite}
.na-kite{transform-box:view-box;transform-origin:50% 50%;animation:naSpinR 240s linear infinite}
.na-core{animation:naBeat 5.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.na-node{animation:naNode 5.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

@keyframes naSpin{to{transform:rotate(360deg)}}
@keyframes naSpinR{to{transform:rotate(-360deg)}}
@keyframes naDrift{to{stroke-dashoffset:-20}}
@keyframes naFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes naBeat{0%,100%{opacity:.42}50%{opacity:.85}}
@keyframes naNode{0%,100%{opacity:.35}50%{opacity:.9}}

@media (max-width:900px){
  .heroart{right:-30%;top:24%;width:118vw;opacity:.34}
}

@media (prefers-reduced-motion:reduce){
  .rv,.rv.in{opacity:1;transform:none;transition:none}
  .card:hover,.btn:hover{transform:none}
  .heroart svg,.na-r1,.na-r2,.na-r3,.na-feed,.na-kite,.na-core,.na-node{animation:none}
}

/* --- step rails and process marks light as you scroll past them ---------- */
.flow__mark,.elig-step__mark{transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease}
/* (the halo that used to sit here drew a square box, so it is gone) */
.timeline__row{transition:opacity .4s ease}

/* --- small screens: the header actions were 22px wider than the viewport
       at 390px, which is where the stray horizontal scroll came from ------- */
@media (max-width:640px){
  .site-header__inner{gap:12px}
  .header-actions{gap:8px}
  .btn--sm{padding:0 14px}
  .btn--portal{display:none}          /* the portal lives in the footer too */
}
@media (max-width:420px){
  .brand img{height:30px}
  .btn--sm{padding:0 12px;font-size:13.5px}
}

/* ==========================================================================
   THE KITE, ANIMATED
   The mark is twelve triangles in three concentric rings: white outside,
   amber in the middle, orange in the centre. The rings assemble as the step
   scrolls in, then a ripple runs out from the centre, over and over.
   ========================================================================== */
.flow__mark,.elig-step__mark{
  transform-box:view-box;transform-origin:50% 50%;overflow:visible;
  background:none!important;box-shadow:none!important;
}
.flow__mark polygon,.elig-step__mark polygon{
  transform-box:view-box;transform-origin:50% 50%;
}

/* --- assembly, outside in ----------------------------------------------- */
.flow__mark polygon,.elig-step__mark polygon{
  opacity:0;transform:scale(.4) rotate(-30deg);
}
.flow__step.lit .flow__mark polygon,
.elig-step.lit .elig-step__mark polygon{
  opacity:1;transform:none;
  transition:opacity .45s ease,transform .6s cubic-bezier(.18,.82,.28,1);
}
/* ring 1 (outer, white) */
.flow__step.lit .flow__mark polygon:nth-child(-n+4),
.elig-step.lit .elig-step__mark polygon:nth-child(-n+4){transition-delay:.02s}
/* ring 2 (amber) */
.flow__step.lit .flow__mark polygon:nth-child(n+5):nth-child(-n+8),
.elig-step.lit .elig-step__mark polygon:nth-child(n+5):nth-child(-n+8){transition-delay:.14s}
/* ring 3 (orange centre) */
.flow__step.lit .flow__mark polygon:nth-child(n+9),
.elig-step.lit .elig-step__mark polygon:nth-child(n+9){transition-delay:.26s}

/* --- the ripple: centre, middle, outer, repeat --------------------------- */
.flow__step.lit .flow__mark polygon,
.elig-step.lit .elig-step__mark polygon{
  animation:kiteRipple 2.8s ease-in-out infinite;
}
.flow__step.lit .flow__mark polygon:nth-child(n+9),
.elig-step.lit .elig-step__mark polygon:nth-child(n+9){animation-delay:.9s}
.flow__step.lit .flow__mark polygon:nth-child(n+5):nth-child(-n+8),
.elig-step.lit .elig-step__mark polygon:nth-child(n+5):nth-child(-n+8){animation-delay:1.2s}
.flow__step.lit .flow__mark polygon:nth-child(-n+4),
.elig-step.lit .elig-step__mark polygon:nth-child(-n+4){animation-delay:1.5s}

@keyframes kiteRipple{
  0%,55%,100%{opacity:.55;transform:scale(1)}
  20%{opacity:1;transform:scale(1.16)}
}

/* each step staggers, so the four charts read left to right */
.flow__step:nth-child(2).lit .flow__mark polygon{animation-delay:1.1s}
.flow__step:nth-child(3).lit .flow__mark polygon{animation-delay:1.3s}
.flow__step:nth-child(4).lit .flow__mark polygon{animation-delay:1.5s}

/* --- the small inline kites turn on hover -------------------------------- */
.btn .kite,.eyebrow .kite{transform-box:view-box;transform-origin:50% 50%;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.btn:hover .kite{transform:rotate(90deg)}
a:hover > .kite,.inline-link:hover .kite{transform:rotate(90deg)}

@media (prefers-reduced-motion:reduce){
  .flow__mark polygon,.elig-step__mark polygon{
    opacity:1!important;transform:none!important;animation:none!important}
  .btn:hover .kite{transform:none}
}

/* ==========================================================================
   FURTHER MOTION
   ========================================================================== */

/* --- the score dial draws itself the first time you see it --------------- */
.score-dial svg circle:nth-child(2){
  stroke-dashoffset:261;
  transition:stroke-dashoffset 1.5s cubic-bezier(.22,.75,.3,1) .15s;
}
.score-dial.drawn svg circle:nth-child(2){stroke-dashoffset:0}

/* --- the big kite watermarks drift, so every section has a slow pulse ---- */
.deco span{
  will-change:transform;
  animation:decoDrift 34s ease-in-out infinite;
}
.deco span:nth-child(2){animation-duration:44s;animation-delay:-11s}
@keyframes decoDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,-22px,0) rotate(6deg)}
}

/* --- asset chips arrive in a wave --------------------------------------- */
.chips > *{transition-delay:calc(var(--i,0) * 38ms)}

/* ==========================================================================
   PHOTOGRAPHY
   Any photo dropped into a .shot is cropped to a fixed ratio, tinted into
   the teal palette and revealed with a slow settle, so a mixed bag of
   supplier photography still reads as one set.
   ========================================================================== */
.shot{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--ink-2);
  box-shadow:var(--lift),var(--inset);
  aspect-ratio:16/10;
}
.shot--tall{aspect-ratio:3/4}
.shot--wide{aspect-ratio:21/9}
.shot--square{aspect-ratio:1}

.shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* the tint: strip most of the original colour, then push it teal */
  filter:grayscale(.72) contrast(1.06) brightness(.86);
  transform:scale(1.06);
  transition:transform 1.1s cubic-bezier(.2,.75,.3,1),filter .6s ease;
}
.shot.in img{transform:scale(1)}
.shot:hover img{transform:scale(1.04);filter:grayscale(.52) contrast(1.05) brightness(.94)}

/* the duotone wash and the bottom fade that keeps captions legible */
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,24,27,0) 42%,rgba(3,24,27,.78) 100%),
    linear-gradient(140deg,rgba(23,169,163,.30),rgba(3,24,27,.12) 55%,rgba(254,197,104,.10));
  mix-blend-mode:normal;
}
.shot__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
}
.shot__cap .t{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em}
.shot__cap .s{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-lt);margin-top:5px}
.shot__tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);background:rgba(3,24,27,.6);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:99px;padding:5px 11px;white-space:nowrap;
}

/* a photo row that stays honest at every width */
.shots{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.shots--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:880px){.shots,.shots--2{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .deco span{animation:none}
  .shot img{transform:none;transition:none}
  .score-dial svg circle:nth-child(2){transition:none;stroke-dashoffset:0}
}


/* ==========================================================================
   TYPE: Outfit for display, Plus Jakarta Sans for text
   Outfit is subset and embedded so the headlines paint immediately instead
   of flashing a fallback while the network catches up.
   ========================================================================== */
@font-face{font-family:"OutfitLocal";src:url(data:font/woff2;base64,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) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

:root{
  --display:'OutfitLocal','Outfit',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
}
h1,h2,h3{font-weight:600}
h1{letter-spacing:-.042em}
h2{letter-spacing:-.034em}
/* Plus Jakarta sets a shade large for its point size, so the body comes down
   slightly to keep the measure where it was */
body{font-size:15.6px}
.lede{letter-spacing:-.004em}
.btn{font-family:var(--body);font-weight:600;letter-spacing:-.005em}
.stat__num,.deal__amount,.score-dial__num,.readout__val{font-family:var(--display);font-weight:600}
.cutout{font-weight:600}

/* --- a full-bleed photographic band ------------------------------------- */
.photoband{position:relative;overflow:hidden;isolation:isolate}
.photoband img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  filter:grayscale(.68) contrast(1.06) brightness(.48);
  transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.75,.3,1)}
.photoband.in img{transform:scale(1)}
.photoband::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,24,27,.95) 0%,rgba(3,24,27,.78) 48%,rgba(3,24,27,.45) 100%),
    linear-gradient(180deg,rgba(3,24,27,.55),rgba(3,24,27,.2) 40%,rgba(3,24,27,.8));
}
.photoband__in{padding:clamp(64px,8vw,116px) var(--gut)}
.photoband h2{margin:14px 0 14px;max-width:18ch}
.photoband .lede{max-width:48ch}
.photoband--short .photoband__in{padding:clamp(76px,9vw,128px) var(--gut)}
.photoband--short h2{max-width:16ch}

/* ==========================================================================
   MOVING PHOTOGRAPHY
   A photograph is a still, so what moves is the frame over it: a very slow
   drift across the image, plus a parallax offset driven by scroll position.
   On the coffee band there is also real drawn motion sitting on top.
   ========================================================================== */

/* the drift. `transform` carries it; `translate` is left free for the
   parallax offset that motion.js writes, so the two never fight */
.photoband img{
  transform:scale(1.14);
  animation:photoDrift 34s ease-in-out infinite alternate;
  will-change:transform,translate;
}
@keyframes photoDrift{
  from{transform:scale(1.14) translate3d(-1.6%,0.6%,0)}
  to  {transform:scale(1.18) translate3d(1.6%,-0.8%,0)}
}
/* the sky band drifts further and slower, which is what reads as movement
   in a photograph that is mostly cloud */
.photoband--sky img{animation-duration:52s}
@keyframes photoDriftSky{
  from{transform:scale(1.16) translate3d(-3%,1%,0)}
  to  {transform:scale(1.20) translate3d(3%,-1%,0)}
}
.photoband--sky img{animation-name:photoDriftSky}

/* the key handover sits high in the frame, so this band looks upward */
.photoband--high img{object-position:center 24%}

/* the mosaic tiles get a gentler version of the same idea */
.shot img{animation:tileDrift 40s ease-in-out infinite alternate}
@keyframes tileDrift{
  from{transform:scale(1.045) translate3d(-0.8%,0.4%,0)}
  to  {transform:scale(1.075) translate3d(0.8%,-0.5%,0)}
}
.shot:hover img{animation-play-state:paused}

/* --- steam, drawn rather than photographed ------------------------------ */
.steam{
  position:absolute;z-index:1;pointer-events:none;
  left:39%;bottom:9%;width:210px;height:250px;
  transform:translateX(-50%);opacity:.9;filter:blur(2.6px);
  -webkit-mask-image:linear-gradient(0deg,#000 8%,#000 46%,transparent 96%);
  mask-image:linear-gradient(0deg,#000 8%,#000 46%,transparent 96%);
}
.steam path{
  fill:none;stroke:#FFFFFF;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:64 230;
  animation:steamRise 6.5s linear infinite;
}
.steam path:nth-child(2){animation-duration:7.8s;animation-delay:-2.2s;opacity:.7}
.steam path:nth-child(3){animation-duration:9.1s;animation-delay:-4.6s;opacity:.55}
@keyframes steamRise{
  0%{stroke-dashoffset:260;opacity:0}
  16%{opacity:.95}
  68%{opacity:.45}
  100%{stroke-dashoffset:-60;opacity:0}
}
/* the cup only sits where we think it does while the band is wider than the
   photograph, so the steam comes off on narrow screens */
@media (max-width:900px){.steam{display:none}}

@media (prefers-reduced-motion:reduce){
  .photoband img,.shot img{animation:none;transform:scale(1.02)}
  .steam{display:none}
}


/* ==========================================================================
   Personality pass
   Kite intro and page changes, rendered photography, pointer light,
   kite progress line. Everything here stops for reduced motion.
   ========================================================================== */

/* --- kite curtain -------------------------------------------------------- */
/* Drawn and animated as vectors by the small script after the overlay, so
   the mark is sharp at every size. Until that script runs the overlay is a
   plain dark screen, and if it never runs CSS clears it after 4s. */
.kv{display:none}
.kv-on .kv{display:block;position:fixed;inset:0;z-index:1000;pointer-events:none;background:var(--ink);animation:kvKill 0s 4s forwards}
.kv-on .kv.kv-live{background:none}
@keyframes kvKill{to{visibility:hidden}}
.kv-on.kv-done .kv{display:none}
.kv-leave .kv{display:block!important;position:fixed;inset:0;z-index:1000;visibility:visible;animation:none;pointer-events:auto;background:none}
.kv-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.kv-cur{fill:var(--ink)}
.kv-tag{position:absolute;left:50%;top:calc(50% + 112px);transform:translate(-50%,8px);white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--teal-pale);opacity:0;
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.kv-tagon .kv-tag{opacity:1;transform:translate(-50%,0)}

/* --- kite progress line -------------------------------------------------- */
.kprog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.kprog__fill{position:absolute;left:0;top:0;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));
  background:linear-gradient(90deg,var(--teal),var(--teal-lt) 70%,#F8943B)}
.kprog__kite{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;
  transform:translateX(calc(var(--sp,0) * 100vw));filter:drop-shadow(0 0 6px rgba(248,148,59,.8));opacity:0;transition:opacity .3s}
.kprog.on .kprog__kite{opacity:1}

/* --- hero ring, calmed down -------------------------------------------- */
.na-orbit{transform-box:view-box;transform-origin:50% 50%;animation:naSpin 90s linear infinite}

/* --- rendered photography ------------------------------------------------ */
/* hero kite on the home page: a rendered mark that floats over the score
   panel's corner and leans toward the pointer */
.hero-kite{position:absolute;z-index:0;pointer-events:none;width:clamp(170px,16vw,230px);aspect-ratio:1;
  right:calc(50% - min(var(--wrap),100vw)/2 - 6px);top:-4px;
  transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .5s cubic-bezier(.2,.7,.3,1)}
/* it sits behind the frosted score panel, so the part inside the glass
   blurs and the part above it stays sharp */
.hero-kite img{width:100%;height:100%;object-fit:contain;animation:hkFloat 8s ease-in-out infinite;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 0 60px rgba(248,148,59,.22))}
.hero-kite::after{content:"";position:absolute;left:18%;right:18%;bottom:-8%;height:14%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);animation:hkShadow 8s ease-in-out infinite}
@keyframes hkFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
@keyframes hkShadow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.82);opacity:.55}}
@media (max-width:900px){.hero-kite{width:120px;right:10px;top:10px;opacity:.4}}

/* page-top photograph on the inner pages */
.hero-shot{position:absolute;top:0;right:0;bottom:0;width:min(62%,980px);z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 22%,#000 55%),linear-gradient(0deg,transparent 0%,#000 30%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 22%,#000 55%),linear-gradient(0deg,transparent 0%,#000 30%);mask-composite:intersect}
.hero-shot img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transform:scale(1.1) translate3d(0,var(--py,0px),0);
  animation:hsDrift 24s ease-in-out infinite alternate}
@keyframes hsDrift{from{transform:scale(1.1) translate3d(0,var(--py,0px),0)}to{transform:scale(1.18) translate3d(-1.5%,var(--py,0px),0)}}
.hero-shot::after{content:"";position:absolute;inset:0;opacity:.3;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero--sky .hero-shot{z-index:-1}
@media (max-width:900px){.hero-shot{width:100%;opacity:.45;
  -webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 60%);mask-image:linear-gradient(0deg,transparent 0%,#000 60%)}}

/* existing photographs: a warmer settle and a slow drift once in view */
.shot img,.photoband img{transition:transform 1.4s cubic-bezier(.16,.84,.3,1),filter .8s ease}

/* --- headline rise ------------------------------------------------------- */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wd>span{display:inline-block;transform:translateY(106%);transition:transform 1s cubic-bezier(.16,.84,.3,1);transition-delay:calc(var(--w) * 55ms + var(--wd0,120ms))}
.words-in .wd>span{transform:none}
/* the sky-cut headline keeps its clip, so it sweeps in instead */
.cutout.sweep{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) var(--wd0,120ms)}
.cutout.sweep.words-in{clip-path:inset(0 0 -20% 0)}

/* --- pointer light on cards ---------------------------------------------- */
.card,.deal,.prod-list__item{--mx:50%;--my:50%}
.card{position:relative}
.card::after,.deal::after,.prod-list__item::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(79,209,199,.13),transparent 60%)}
.deal,.prod-list__item{position:relative}
.card:hover::after,.deal:hover::after,.prod-list__item:hover::after{opacity:1}
.card--warm::after,.card--top-orange::after{background:radial-gradient(380px circle at var(--mx) var(--my),rgba(248,148,59,.12),transparent 60%)}

/* --- button sheen -------------------------------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);transition:left .75s cubic-bezier(.2,.7,.3,1)}
.btn:hover::before{left:130%}
.btn--ghost::before,.btn--portal::before{background:linear-gradient(100deg,transparent,rgba(143,232,223,.16),transparent)}
.btn .kite{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.btn:hover .kite{transform:rotate(90deg) scale(1.15)}
.inline-link .kite{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.inline-link:hover .kite{transform:translateX(4px) rotate(90deg)}

@media (prefers-reduced-motion:reduce){
  .kv,.kprog__kite{display:none!important}
  .hero-kite img,.hero-kite::after,.hero-shot img{animation:none}
  .wd>span{transform:none;transition:none}
  .cutout.sweep{clip-path:none;transition:none}
  .btn::before{display:none}
}