:root{
  --ease-m1:cubic-bezier(.39,.66,.51,1);
  /* light, finance-grade base */
  --paper:#FFFFFF; --paper-2:#F5F8FD; --paper-3:#EDF3FB;
  --ink:#0B1526; --ink-2:#2E3E5C; --muted:#5E6E8A; --muted-2:#8493AC;
  --line:rgba(11,21,38,.10); --line-2:rgba(11,21,38,.16);
  /* brand */
  --brand-1:#2A3A5C; --brand-2:#1E2D4A; --brand-3:#141E32; --silver:#8E95A0;
  --blue:#2F6BFF; --blue-2:#4D9BFF; --blue-deep:#16337C; --cyan:#00B8DE;
  --display:'Sora',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --shell:78rem;
  --shadow:0 24px 60px -28px rgba(11,21,38,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:rgba(47,107,255,.18)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- drifting blue field (lusion-style motion, CSS only) ---------- */
.field{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--paper)}
.field b{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.5;will-change:transform;
  transform:translate3d(var(--tx,0px),var(--ty,0px),0)}
.field-wrap{position:absolute;inset:0;transition:transform .5s cubic-bezier(.22,.8,.24,1);will-change:transform}
.field .b1{width:52vw;height:52vw;left:-10vw;top:-8vw;background:radial-gradient(circle at 35% 35%,rgba(47,107,255,.42),rgba(47,107,255,0) 68%)}
.field .b2{width:46vw;height:46vw;right:-12vw;top:14vh;background:radial-gradient(circle at 50% 50%,rgba(0,184,222,.34),rgba(0,184,222,0) 68%)}
.field .b3{width:60vw;height:60vw;left:12vw;bottom:-24vw;background:radial-gradient(circle at 45% 40%,rgba(22,51,124,.26),rgba(22,51,124,0) 66%)}
.field .b4{width:34vw;height:34vw;right:6vw;bottom:8vh;background:radial-gradient(circle at 50% 50%,rgba(77,155,255,.34),rgba(77,155,255,0) 66%)}
@media(prefers-reduced-motion:no-preference){
  .field .b1{animation:fl1 26s ease-in-out infinite alternate}
  .field .b2{animation:fl2 32s ease-in-out infinite alternate}
  .field .b3{animation:fl3 38s ease-in-out infinite alternate}
  .field .b4{animation:fl2 29s ease-in-out infinite alternate-reverse}
}
/* the animation drives its own drift; --tx/--ty layer pointer + scroll reaction on top */
@keyframes fl1{to{transform:translate3d(calc(var(--tx,0px) + 14vw),calc(var(--ty,0px) + 10vh),0) scale(1.16)}}
@keyframes fl2{to{transform:translate3d(calc(var(--tx,0px) - 13vw),calc(var(--ty,0px) + 12vh),0) scale(1.12)}}
@keyframes fl3{to{transform:translate3d(calc(var(--tx,0px) + 10vw),calc(var(--ty,0px) - 12vh),0) scale(1.2)}}
/* a faint reactive spotlight that tracks the pointer across the whole page */
.field .spot{position:absolute;inset:0;border-radius:0;filter:none;opacity:.85;
  background:radial-gradient(24rem 24rem at var(--sx,50%) var(--sy,40%),rgba(47,107,255,.13),transparent 68%)}
/* a whisper of grain so the gradients never band */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.05;color:var(--ink)}
.h-sec{font-size:clamp(2rem,4.4vw,3.4rem)}
.grad{background:linear-gradient(100deg,var(--brand-2),var(--blue) 48%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:.95rem}
.lead{color:var(--muted);font-size:1.05rem;max-width:44rem}
.shell{max-width:var(--shell);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
section{position:relative;padding:clamp(4.5rem,9vw,7.5rem) 0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.95rem 1.7rem;border-radius:.6rem;
  font-family:var(--body);font-weight:650;font-size:.94rem;border:0;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .3s,background .25s,border-color .25s}
.btn-primary{color:#fff;background:linear-gradient(120deg,var(--blue-deep),var(--blue) 48%,var(--blue-2));
  box-shadow:0 12px 28px -10px rgba(47,107,255,.7), inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(47,107,255,.85)}
.btn-ghost{color:var(--ink);border:1px solid var(--line-2);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn-sm{padding:.62rem 1.15rem;font-size:.85rem}

/* ---------- "Enter the showroom" ----------
   Same rotating electric border as the quote widget, so the two things worth
   clicking are the same visual family.

   The border is painted with the two-background trick rather than a pseudo
   element: an ::before at z-index:-1 paints ABOVE its own element's background
   (negative-z children come after the background in the paint order), which is
   why the gradient was washing across the button face instead of ringing it.
   Here the conic gradient fills the border-box and a solid fill covers the
   padding-box on top of it, leaving only the border showing. */
.nav-cta{display:flex;align-items:center;gap:.7rem}
.btn-shine{position:relative;color:var(--ink);border:2px solid transparent;border-radius:.62rem;
  background:
    linear-gradient(168deg,#FFFFFF,#F3F7FE) padding-box,
    conic-gradient(from var(--ang,0deg),
      rgba(47,107,255,.14) 0deg, var(--blue) 34deg, var(--cyan) 70deg,
      rgba(47,107,255,.14) 130deg, rgba(47,107,255,.14) 232deg,
      var(--blue-2) 288deg, #7FE9FF 316deg, rgba(47,107,255,.14) 350deg) border-box;
  box-shadow:0 8px 22px -14px rgba(11,21,38,.5)}
.btn-shine svg{width:1rem;height:1rem;flex:none;stroke:var(--blue);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* the bloom. No isolation on the button, so this sits behind it rather than on it. */
.btn-shine::after{content:'';position:absolute;inset:-8px;border-radius:1rem;z-index:-1;
  filter:blur(12px);opacity:.85;pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),transparent 0deg,rgba(47,107,255,.85) 34deg,
    rgba(0,184,222,.75) 70deg,transparent 132deg,transparent 232deg,
    rgba(77,155,255,.8) 288deg,rgba(127,233,255,.7) 316deg,transparent 352deg)}
.btn-shine:hover{transform:translateY(-2px);color:var(--blue)}
@media(prefers-reduced-motion:reduce){
  .btn-shine{background:linear-gradient(168deg,#FFFFFF,#F3F7FE) padding-box,
             linear-gradient(120deg,var(--blue),var(--cyan)) border-box}
  .btn-shine::after{background:linear-gradient(120deg,var(--blue),var(--cyan))}
}
@media(max-width:1100px){.btn-shine{display:none}}

/* ---------- the electric border ----------
   --ang is registered so the browser treats it as a real angle it can
   interpolate, which means the rotation runs in the animation engine instead of
   JavaScript writing a custom property onto two elements every frame. That
   per-frame write forced a full re-rasterise of both conic gradients on the main
   thread; Chrome hid the cost, Safari did not, and the borders visibly crawled
   there. Unregistered, --ang is just a token substitution and cannot animate at
   all, so browsers without @property simply get a static gradient rim.

   inherits MUST be true. The animation runs on .widget-wrap and .btn-shine, but
   the conic gradients that actually read --ang live on their ::before/::after.
   A pseudo-element does not receive a non-inherited custom property from the
   element it hangs off, so with inherits:false those layers sat frozen at the
   0deg initial value while the element's own --ang swept 0..360. The result was
   a completely static glow that still cost a running animation. Verified by
   seeking the animation and reading --ang on the pseudo-elements. */
@property --ang{syntax:'<angle>';inherits:true;initial-value:0deg}
@media(prefers-reduced-motion:no-preference){
  .widget-wrap,.btn-shine{animation:angSpin 11s linear infinite}
}
@keyframes angSpin{to{--ang:360deg}}

/* ---------- nav ---------- */
/* Scoped to the site header. As a bare element rule this captured every other
 * <nav> on the page, including the breadcrumb, which then rendered fixed and
 * full width: 'Home' landed on the logo and the separator floated mid-header. */
/* Three columns rather than space-between: with the brand and the CTA group at
   different widths, space-between left the links visibly off-centre. The 1fr
   side columns force the middle one to the true centre of the header. */
#nav{position:fixed;inset:0 0 auto 0;z-index:60;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1rem;padding:.85rem clamp(1.1rem,4vw,2.5rem);border-bottom:1px solid transparent;transition:background .35s,border-color .35s,box-shadow .35s}
#nav .brand{justify-self:start}
/* Any right-hand child, whether it is the button group on the home page or a
   bare button on the inner pages. Without this a lone <a class="btn"> stretches
   to fill its grid column and reads as an enormous banner. */
#nav .nav-cta,#nav>.btn{justify-self:end}
@media(max-width:900px){#nav{grid-template-columns:1fr auto}}
/* The inner pages have no hero for the nav to float over, so it carries its
   solid treatment from the top. Otherwise the page content scrolls underneath
   it and the links land on top of the copy. */
body.doc-page #nav{background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(11,21,38,.5)}
#nav.stuck{background:rgba(255,255,255,.94);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(11,21,38,.5)}
#nav .brand img{height:26px;width:auto}
nav .lg-dark{display:none}
.nav-links{display:flex;gap:1.6rem;list-style:none}
.nav-links a{font-size:.86rem;font-weight:550;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:70;background:linear-gradient(90deg,var(--blue),var(--cyan))}
@media(max-width:900px){.nav-links{display:none}}

/* ---------- hero (light, continuous with the rest of the site) ---------- */
/* Top padding used to clear a 40rem logo lockup. That is gone, so the hero only
   needs to clear the fixed nav. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:6rem 0 3rem;overflow:hidden;isolation:isolate}
/* mouse-reactive aura. The 74px grid that used to sit under it was removed:
   a faint repeating rule is the most tired shorthand for "technology" and it
   was doing nothing the aura and the ribbon were not already doing better. */
.hero-aura{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(28rem 28rem at var(--px,50%) var(--py,38%),rgba(47,107,255,.16),transparent 70%);
  transition:background .18s linear}
.hero-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.9rem;position:relative;z-index:1}

/* ---------- rolling "just financed" proof ----------
   Four slots sitting in the hero gutters, either side of the headline and quote
   widget. Each one cycles independently on its own stagger so cards appear and
   leave around the edges of the hero rather than in one fixed corner. */
.deals{position:absolute;inset:0;z-index:2;pointer-events:none}
.deal-slot{position:absolute;width:13.5rem;pointer-events:auto}
/* kept clear of the centre column: the widget is min(46rem,...) wide */
.deal-slot.s1{left:2.2vw;  top:17%}
.deal-slot.s2{right:2.2vw; top:26%}
.deal-slot.s3{left:4.4vw;  bottom:13%}
.deal-slot.s4{right:4.4vw; bottom:20%}
/* A card is about 220px tall. The right-hand pair sits at top:26% and
   bottom:20%, so they only clear each other above ~815px of hero:
   0.80h - 220 > 0.26h + 220  ->  h > 815. Below that they collided and the
   stack read as broken, so anything shorter drops to one card per side. */
@media(max-height:860px){
  .deal-slot.s3,.deal-slot.s4{display:none}
  .deal-slot.s1{top:22%}
  .deal-slot.s2{top:38%}
}
@media(max-height:560px){.deals{display:none}}

.deal-card{position:relative;border-radius:.9rem;
  background:rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 26px 56px -28px rgba(11,21,38,.55),0 1px 0 rgba(255,255,255,.75) inset;
  opacity:0;transform:translate3d(0,18px,0) scale(.94);
  will-change:transform,opacity}
.deal-card.in{opacity:1;transform:translate3d(0,0,0) scale(1);
  transition:opacity .5s var(--ease),transform .72s var(--ease)}
.deal-card.out{opacity:0;transform:translate3d(0,-14px,0) scale(.96);
  transition:opacity .5s ease,transform .55s var(--ease)}
/* slots on the right arrive from the right, so the motion reads as coming from
   off the edge of the page rather than everything drifting the same way */
.deal-slot.s2 .deal-card,.deal-slot.s4 .deal-card{transform:translate3d(16px,14px,0) scale(.94)}
.deal-slot.s2 .deal-card.out,.deal-slot.s4 .deal-card.out{transform:translate3d(14px,-10px,0) scale(.96)}
.deal-slot.s2 .deal-card.in,.deal-slot.s4 .deal-card.in{transform:translate3d(0,0,0) scale(1)}

.deal-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(150deg,#E9F0FC,#DCE8F8)}
.deal-media img{width:100%;height:100%;object-fit:cover;display:block}
.deal-card.is-win .deal-media{background:linear-gradient(140deg,var(--brand-2),var(--blue) 60%,var(--cyan))}
.deal-glyph{position:absolute;inset:0;display:grid;place-items:center}
.deal-glyph svg{width:2.5rem;height:2.5rem;stroke:rgba(255,255,255,.92);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* The stamp sits over the corner of the card, half on the photo and half on the
   white, with its own disc behind it so the type stays readable either way.
   .deal-card therefore cannot clip: the media clips itself instead. */
.deal-stamp{position:absolute;top:-1.15rem;right:-1.15rem;width:4rem;height:4rem;
  pointer-events:none;z-index:3;
  filter:drop-shadow(0 2px 5px rgba(11,21,38,.22))}
.deal-stamp svg{width:100%;height:100%;display:block;overflow:visible}
.deal-stamp .s-disc{fill:rgba(255,255,255,.93)}
.deal-stamp .s-ring{fill:none;stroke:#C0302B}
.deal-stamp .s-ring.o{stroke-width:3.4}
.deal-stamp .s-ring.i{stroke-width:1.3}
.deal-stamp text{fill:#C0302B;font-family:var(--display);font-weight:800;
  text-anchor:middle;letter-spacing:.06em}
.deal-stamp .s-arc{font-size:10.5px}
.deal-stamp .s-mid{font-size:16.5px;letter-spacing:0}
.deal-stamp .s-stars path{fill:#C0302B}
/* older settlements: same stamp, off-duty colour */
.deal-stamp.is-past .s-ring{stroke:#54617A}
.deal-stamp.is-past text{fill:#54617A}
.deal-stamp.is-past .s-stars path{fill:#54617A}
@media(max-width:1240px){.deal-stamp{width:3.4rem;height:3.4rem;top:-.9rem;right:-.9rem}}

.deal-info{display:block;padding:.6rem .7rem .68rem;text-align:left}
.deal-name{display:block;font-family:var(--display);font-size:.76rem;font-weight:700;
  line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-amt{display:block;font-family:var(--display);font-weight:800;font-size:1.12rem;
  line-height:1.25;letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--brand-2),var(--blue) 60%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.deal-tags{display:flex;flex-wrap:wrap;gap:.26rem;margin-top:.3rem}
.deal-tags b{font-size:.58rem;font-weight:650;color:var(--ink-2);
  padding:.16rem .38rem;border-radius:.28rem;background:rgba(47,107,255,.09);
  border:1px solid rgba(47,107,255,.14);white-space:nowrap}

/* narrower viewports: the gutters disappear, so drop to two cards tucked into
   the top corners where they cannot collide with the widget */
@media(max-width:1440px){.deal-slot{width:12rem}}
@media(max-width:1240px){
  .deal-slot{width:10.5rem}
  .deal-slot.s1{left:1rem;top:16%}
  .deal-slot.s2{right:1rem;top:16%}
  .deal-slot.s3,.deal-slot.s4{display:none}
}
@media(max-width:1040px){.deals{display:none}}
.logo-stage{position:relative;width:min(40rem,80vw)}
.logo-stage img{width:100%;
  /* The source is a true cutout now, so drop-shadow follows the LETTERFORMS rather
   * than the old opaque white rectangle. Two shadows: a tight contact shadow that
   * gives the mark weight, and a wide ambient one that lifts it off the page.
   * Nothing here alters the artwork itself. */
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.9))
    drop-shadow(0 2px 3px rgba(11,21,38,.28))
    drop-shadow(0 16px 34px rgba(11,21,38,.20));
  transition:filter .5s var(--ease),transform .5s var(--ease)}
.logo-stage:hover img{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.95))
    drop-shadow(0 3px 5px rgba(11,21,38,.34))
    drop-shadow(0 22px 44px rgba(47,107,255,.26));
  transform:translateY(-2px)}

/* The wordmark is now a Blender render (scripts/logo3d.py): real extruded
 * geometry with the same clearcoat material the cars use, lit by the studio HDRI.
 * The CSS glass attempt is gone because a gradient cannot produce a bevel
 * highlight, which is the thing that actually reads as gloss. */

.logo-stage{opacity:0;filter:blur(16px);transform:translateY(14px) scale(.985)}
.hero.lit .logo-stage{opacity:1;filter:blur(0);transform:none;transition:opacity 1.05s ease,filter 1.15s var(--ease),transform 1.15s var(--ease)}
.hero h1{font-size:clamp(1.55rem,3.1vw,2.5rem);font-weight:700;max-width:24ch;color:var(--ink)}
.hero .hgrad{background:linear-gradient(100deg,var(--brand-2),var(--blue) 48%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{color:var(--muted);max-width:52ch;font-size:1.02rem}
/* trust line under the widget */
.hero-trust{display:flex;align-items:center;justify-content:center;gap:1.6rem;flex-wrap:wrap;margin-top:1.5rem;
  font-size:.78rem;color:var(--muted-2);font-weight:550}
.hero-trust span{display:inline-flex;align-items:center;gap:.45rem}
.hero-trust svg{width:.95rem;height:.95rem;stroke:var(--blue);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-fade{opacity:0;transform:translateY(16px)}
.hero.lit .hero-fade{opacity:1;transform:none;transition:opacity .9s ease var(--d,.5s),transform .9s var(--ease) var(--d,.5s)}
@media(prefers-reduced-motion:reduce){
  .logo-stage,.hero-fade{opacity:1!important;filter:none!important;transform:none!important}

}

/* ---------- quote widget ---------- */
/* Brand scrim: keeps the copy legible and pulls the footage toward the palette */
/* The wordmark is punched OUT of a dark plate, so the footage plays through the
   letters at full strength while everything around them stays calm. One video. */
.logo-stage{position:relative;width:min(40rem,80vw)}
.widget-wrap{position:relative;width:min(58rem,100%);margin-top:.5rem}
.widget{position:relative;border-radius:1.15rem;padding:1.5rem clamp(1rem,2.4vw,1.9rem) 1.35rem;
  background:linear-gradient(168deg,rgba(255,255,255,.98),rgba(244,248,254,.97));
  border:1px solid rgba(255,255,255,.5);box-shadow:0 40px 90px -34px rgba(0,0,0,.85)}
/* Without backdrop-filter the glass would read as a washed-out box, so fall back to solid */
.widget-wrap::before{content:'';position:absolute;inset:-2.5px;border-radius:1.26rem;z-index:-1;
  background:conic-gradient(from var(--ang,0deg),rgba(47,107,255,.12) 0deg,var(--blue) 34deg,var(--cyan) 70deg,rgba(47,107,255,.12) 130deg,rgba(47,107,255,.12) 232deg,var(--blue-2) 288deg,#7FE9FF 316deg,rgba(47,107,255,.12) 350deg)}
.widget-wrap::after{content:'';position:absolute;inset:-20px;border-radius:1.7rem;z-index:-2;filter:blur(26px);opacity:.95;
  background:conic-gradient(from var(--ang,0deg),transparent 0deg,rgba(47,107,255,.85) 34deg,rgba(0,184,222,.75) 70deg,transparent 132deg,transparent 232deg,rgba(77,155,255,.8) 288deg,rgba(127,233,255,.7) 316deg,transparent 352deg)}
@media(prefers-reduced-motion:reduce){.widget-wrap::before,.widget-wrap::after{background:linear-gradient(120deg,var(--blue),var(--cyan))}}
.widget-head{margin-bottom:1rem}
.widget-head h2{font-size:1.14rem;font-weight:750;color:var(--ink);text-align:left}
.w-label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.5rem;text-align:left}
.asset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.asset{position:relative;display:flex;flex-direction:column;align-items:center;gap:.42rem;padding:.8rem .4rem;
  border-radius:.7rem;border:1px solid var(--line);background:#fff;cursor:pointer;
  transition:border-color .25s,background .25s,transform .25s var(--ease),box-shadow .25s;text-align:center}
.asset svg{width:1.3rem;height:1.3rem;stroke:var(--muted);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.asset span{font-size:.76rem;font-weight:650;color:var(--muted);transition:color .25s;line-height:1.25}
.asset:hover{transform:translateY(-2px);border-color:rgba(47,107,255,.5);box-shadow:0 10px 22px -14px rgba(47,107,255,.9)}
.asset.on{border-color:var(--blue);background:linear-gradient(170deg,rgba(47,107,255,.12),rgba(47,107,255,.03));
  box-shadow:0 0 0 1px rgba(47,107,255,.4), 0 12px 26px -16px rgba(47,107,255,.9)}
.asset.on svg{stroke:var(--blue)}.asset.on span{color:var(--blue-deep)}
@media(max-width:760px){.asset-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){.asset-grid{grid-template-columns:repeat(2,1fr)}}
.w-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem;margin-top:1rem}
@media(max-width:760px){.w-row{grid-template-columns:1fr}}
.field-c select{width:100%;padding:.8rem .85rem;border-radius:.55rem;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-family:var(--body);font-size:.92rem;transition:border-color .2s,box-shadow .2s}
.field-c select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.16)}
.widget-cta{display:flex;align-items:center;gap:.75rem;margin-top:1.1rem;flex-wrap:wrap}
.widget-cta .btn{flex:1 1 15rem}
.widget-note{font-size:.72rem;color:var(--muted-2);margin-top:.75rem;line-height:1.5;text-align:center;max-width:52ch;margin-inline:auto}

/* ---------- lender belt ---------- */
/* Deliberately tall: at 2.15rem the wordmarks with small taglines turned to mush.
   The logo art is trimmed to a common cap height so raw px height is now a fair
   measure of optical weight and they can all sit on one baseline. */
.belt{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:2.8rem 0 3rem;overflow:hidden}
.belt::before,.belt::after{content:'';position:absolute;top:0;bottom:0;width:16%;z-index:2;pointer-events:none}
.belt::before{left:0;background:linear-gradient(90deg,#fff 12%,rgba(255,255,255,0))}
.belt::after{right:0;background:linear-gradient(270deg,#fff 12%,rgba(255,255,255,0))}
.belt-label{text-align:center;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:2rem}
/* The source logo art is only 84-96px tall. Two rows at a size the art can
   actually carry gives the section its height without a wall of soft, blown-up
   wordmarks, which is what a single oversized row produced. */
.belt-rows{display:grid;gap:2.2rem}
.belt-track{display:flex;align-items:center;gap:4rem;width:max-content;will-change:transform}
.belt-track img{height:2.4rem;width:auto;flex:none;opacity:.9;
  transition:transform .3s var(--ease),opacity .3s}
.belt-track img:hover{transform:scale(1.08);opacity:1}
@media(max-width:640px){.belt{padding:1.9rem 0 2.1rem}.belt-rows{gap:1.5rem}
  .belt-track img{height:1.85rem}.belt-track{gap:2.8rem}.belt-label{margin-bottom:1.3rem}}

/* ---------- dark band (breaks up the page between white sections) ---------- */
.band-dark{background:linear-gradient(165deg,#101B31 0%,#16233D 46%,#0D1626 100%);
  padding:clamp(3.6rem,7vw,5.6rem) 0;overflow:hidden;isolation:isolate}
/* Sydney Harbour at dusk, graded toward the brand navy so it reads as part of
   the palette rather than a photo dropped on top of it. The tiles sit over the
   sky, which is the flattest part of the frame, so the type stays legible. */
.band-dark .band-photo{position:absolute;inset:-14% 0;z-index:-1;pointer-events:none;
  background:url('../images/band-harbour.webp') center 42%/cover no-repeat;
  transform:translate3d(0,var(--band-shift,0px),0) scale(1.05);will-change:transform;
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.band-dark .band-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52rem 26rem at 18% 0%,rgba(47,107,255,.30),transparent 62%),
    radial-gradient(40rem 22rem at 88% 105%,rgba(0,184,222,.24),transparent 64%),
    linear-gradient(180deg,rgba(11,20,36,.46),rgba(11,20,36,.12) 42%,rgba(11,20,36,.58))}
.band-dark::before,.band-dark::after{content:'';position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(120,170,255,.42),transparent)}
.band-dark::before{top:0}
.band-dark::after{bottom:0}

/* ---------- stats ---------- */
.stat::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}

/* stats sitting on the dark band: glass tiles instead of white cards.
   The blur is deliberately light so the photograph reads through the glass. */
/* Deliberately thin glass: the harbour behind it should be clearly readable
   through the tiles. The type keeps its contrast from a soft dark scrim on each
   tile rather than from an opaque fill. */
.band-dark .stats{background:rgba(150,190,255,.10);border-color:rgba(175,210,255,.30);
  box-shadow:0 34px 80px -40px rgba(0,0,0,.85)}
.band-dark .stat{
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  backdrop-filter:blur(5px) saturate(1.25);-webkit-backdrop-filter:blur(5px) saturate(1.25);
  padding:2.1rem 1.4rem}
/* the scrim: strongest behind the text, gone by the edges, so the glass still
   reads as transparent while the numbers stay legible */
.band-dark .stat::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 22% 55%,rgba(6,14,28,.42),transparent 72%)}
.band-dark .stat>*{position:relative}
.band-dark .stat .n{background:linear-gradient(115deg,#FFFFFF,#9FD4FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.band-dark .stat .l{color:rgba(233,243,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.band-dark .cityflip{color:#8FCBFF;-webkit-text-fill-color:#8FCBFF}
.band-dark .stat .l{color:rgba(214,228,250,.72)}

/* ---------- products ---------- */
.prod-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:980px){.prod-groups{grid-template-columns:1fr}}
/* These were near-white with only a whisper of tint, which read as unfinished.
   Real ground now: a navy-to-ice wash, a lit top edge, and a large ghosted
   version of the card's own icon sitting in the corner. */
.pgroup{position:relative;border-radius:1.1rem;padding:1.7rem 1.5rem 1.5rem;border:1px solid rgba(47,107,255,.16);
  background:
    radial-gradient(130% 100% at 0% 0%,rgba(47,107,255,.22),transparent 58%),
    radial-gradient(110% 90% at 100% 100%,rgba(0,184,222,.18),transparent 62%),
    linear-gradient(168deg,#FFFFFF 0%,#F2F7FE 46%,#EAF3FD 100%);
  background-size:200% 200%,200% 200%,100% 100%;background-position:0% 0%,100% 100%,0 0;
  overflow:hidden;box-shadow:var(--shadow);
  transition:border-color .35s,transform .4s var(--ease),box-shadow .4s,background-position 1.2s var(--ease)}
.pgroup:hover{transform:translateY(-5px);border-color:rgba(47,107,255,.35);
  box-shadow:0 34px 70px -30px rgba(47,107,255,.55);background-position:35% 25%,65% 70%,0 0}
/* a hairline of brand colour along the top, like the stat tiles */
.pgroup::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--blue),var(--cyan));opacity:.9}
.pgroup .pic{position:relative;z-index:1}
.pgroup h3,.pgroup .pd,.pgroup .plist{position:relative;z-index:1}
/* the oversized watermark: the card's own glyph, ghosted into the bottom corner */
.pgroup .pic svg{}
.pgroup::after{content:'';position:absolute;inset:-40%;pointer-events:none;opacity:.75;
  background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(47,107,255,.09) 60deg,transparent 130deg,transparent 240deg,rgba(0,184,222,.08) 300deg,transparent 360deg)}
@media(prefers-reduced-motion:no-preference){.pgroup::after{animation:drift 20s linear infinite}}
@keyframes drift{to{transform:rotate(360deg)}}
.pgroup>*{position:relative;z-index:2}
.pgroup .pic{width:2.6rem;height:2.6rem;border-radius:.7rem;display:grid;place-items:center;margin-bottom:1rem;
  background:linear-gradient(150deg,var(--blue),var(--blue-deep));box-shadow:0 10px 22px -12px rgba(47,107,255,.9)}
.pgroup .pic svg{width:1.35rem;height:1.35rem;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pgroup h3{font-size:1.16rem;margin-bottom:.2rem}
.pgroup .pd{font-size:.85rem;color:var(--muted-2);margin-bottom:1rem}
.plist{list-style:none;display:grid;gap:.1rem}
.plist a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.52rem .6rem;
  border-radius:.45rem;font-size:.88rem;color:var(--ink-2);font-weight:500;transition:background .2s,color .2s,padding-left .25s}
.plist a:hover{background:rgba(47,107,255,.09);color:var(--blue-deep);padding-left:.85rem}
.plist a::after{content:'→';font-size:.85rem;color:var(--blue);opacity:0;transform:translateX(-5px);transition:opacity .25s,transform .25s}
.plist a:hover::after{opacity:1;transform:none}

/* ---------- the thread ----------
   One continuous line running the length of the page, drawn as the reader
   scrolls, with a glowing head at the leading edge. This replaces the floating
   orbs and rings: a single deliberate gesture instead of scattered shapes.
   JS positions the container and drives --draw (0..1). */
/* Back down the middle of the page, sweeping across it. The fragmenting was
   never about where it sat: at z-index:-1 every section background painted over
   it. Keeping it above them fixes that, and a line passing in front of the
   content is the look we were after anyway. */
/* Sits behind everything, so it passes under the cards rather than over them. */
/* the whole route, barely there, so the line has somewhere to go */
/* wide soft pass underneath does the glowing */
/* the crisp line itself */
.th-glow,.th-line{stroke-dasharray:var(--len,0) var(--len,0);
  stroke-dashoffset:calc(var(--len,0) * (1 - var(--draw,0)))}
/* The leading edge is a bright RUN of the line rather than a dot: same path,
   dashed so only --seg of it is painted, positioned so that dash ends exactly
   where the draw has got to. A dot read as a cursor and pulled the eye off the
   content; a glowing section reads as the line itself being alive. */
/* The bright run sits at the leading edge of the draw, so it advances only as
   the reader scrolls. It was on a 6s timer before, which meant it crawled down
   the page on its own regardless of where anyone was. */
/* The head: a hot point of light riding the leading edge of the drawn line,
   positioned from getPointAtLength each scroll frame. */
@media(prefers-reduced-motion:reduce){
  .th-glow,.th-line{stroke-dashoffset:0}
  .th-head{display:none}
}

/* ---------- broker vs bank benefits ----------
   Twelve of these. As cards it read as a card dump, so it is set as a ruled
   editorial list instead: hairlines, one repeated tick, no boxes. */
.whyb{list-style:none;display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(2rem,5vw,4rem);margin-top:clamp(2.6rem,5vw,3.8rem);
  border-top:1px solid var(--line)}
@media(max-width:820px){.whyb{grid-template-columns:1fr}}
/* Collapsed to headings only; the body opens on hover, or on focus and tap where
   there is no hover. Twelve open rows made the section enormous and static. */
.whyb li{position:relative;padding:.95rem 0 .95rem 2.2rem;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease);cursor:default}
.whyb li p{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .45s var(--ease),opacity .3s ease,margin-top .45s var(--ease);
  margin-top:0}
.whyb li p>span{overflow:hidden;min-height:0}
.whyb li:hover p,.whyb li:focus-within p,.whyb li.open p{grid-template-rows:1fr;opacity:1;margin-top:.3rem}
.whyb h3::after{content:'';position:absolute;right:.2rem;top:1.35rem;width:.5rem;height:.5rem;
  border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);
  transform:rotate(45deg);transition:transform .4s var(--ease),border-color .3s}
.whyb li:hover h3::after,.whyb li.open h3::after{transform:rotate(225deg);border-color:var(--blue)}
@media(hover:none){
  .whyb li p{transition:grid-template-rows .35s var(--ease),opacity .25s ease}
  .whyb li:hover p{grid-template-rows:0fr;opacity:0;margin-top:0}
  .whyb li.open p{grid-template-rows:1fr;opacity:1;margin-top:.3rem}
}
/* each row arrives on its own, sliding in behind a hairline that draws itself */
.whyb li::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.whyb li.in::after{transform:scaleX(1)}
.whyb li::before{content:'';position:absolute;left:.15rem;top:1.55rem;width:.72rem;height:.4rem;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);transition:border-color .3s}
.whyb li:hover{padding-left:2.55rem}
.whyb li:hover::before{border-color:var(--cyan)}
.whyb h3{font-family:var(--display);font-size:1rem;font-weight:700;line-height:1.35;margin-bottom:.28rem}
.whyb p{color:var(--muted);font-size:.9rem;line-height:1.62;max-width:46ch}

/* ---------- 3D brand card ---------- */
#cardband{overflow:hidden}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,4.5rem);align-items:center}
@media(max-width:900px){.card-grid{grid-template-columns:1fr}}
.card-stage{perspective:1150px;perspective-origin:50% 50%;display:grid;place-items:center;min-height:24rem}
.card3d{position:relative;width:min(27rem,86vw);aspect-ratio:1.586/1;transform-style:preserve-3d;
  transform:rotateX(var(--rx,12deg)) rotateY(var(--ry,-22deg)) rotateZ(var(--rz,-4deg)) translateZ(0);
  transition:transform .12s linear;will-change:transform}
.card-face{position:absolute;inset:0;border-radius:1.15rem;overflow:hidden;backface-visibility:hidden;
  box-shadow:0 40px 80px -34px rgba(11,21,38,.7), 0 8px 20px -10px rgba(11,21,38,.35)}
.card-front{background:
  radial-gradient(120% 100% at 12% 8%, rgba(77,155,255,.55), transparent 55%),
  radial-gradient(100% 90% at 92% 92%, rgba(0,184,222,.4), transparent 58%),
  linear-gradient(140deg,var(--brand-1),var(--brand-3) 55%,#080E1C)}
.card-back{transform:rotateY(180deg);background:linear-gradient(140deg,#0C1526,#060A14)}
/* moving specular band */
.card-front::after{content:'';position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(102deg,transparent 40%,rgba(255,255,255,.20) 48%,rgba(210,235,255,.42) 51%,transparent 60%);
  transform:translateX(var(--sheen,-40%))}
.card-grain{position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.09) 0 1px,transparent 1px 4px)}
.card-inner{position:absolute;inset:0;padding:clamp(1.1rem,2.6vw,1.7rem);display:flex;flex-direction:column;justify-content:space-between;z-index:2}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.card-logo{height:clamp(1.5rem,3.4vw,2.1rem);width:auto;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.card-chip{width:clamp(2.2rem,5vw,2.9rem);height:clamp(1.7rem,3.8vw,2.2rem);border-radius:.38rem;
  background:linear-gradient(140deg,#E9D9A6,#B99B54 45%,#F2E7C2 70%,#A98C48);position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.card-chip::before,.card-chip::after{content:'';position:absolute;left:12%;right:12%;height:1px;background:rgba(80,60,20,.5)}
.card-chip::before{top:34%}.card-chip::after{top:64%}
.card-mid{font-family:var(--display);font-weight:700;color:#DCE7FA;letter-spacing:.14em;
  font-size:clamp(.78rem,1.9vw,1.02rem);text-shadow:0 2px 10px rgba(0,0,0,.5)}
.card-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.card-bot .ck{font-size:clamp(.5rem,1.1vw,.58rem);letter-spacing:.2em;text-transform:uppercase;color:#8FA6C8}
.card-bot .cv{font-family:var(--display);font-weight:650;color:#EAF1FC;font-size:clamp(.7rem,1.6vw,.86rem);letter-spacing:.05em}
.card-back .cb-strip{position:absolute;top:12%;left:0;right:0;height:20%;background:#05080F}
.card-back .cb-note{position:absolute;left:8%;right:8%;bottom:14%;color:#8FA6C8;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.card-shadow{position:absolute;left:50%;bottom:-8%;width:70%;height:12%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(11,21,38,.42),transparent 70%);filter:blur(12px)}
@media(prefers-reduced-motion:reduce){.card3d{transform:rotateX(8deg) rotateY(-16deg)}}

/* ---------- calculator ---------- */
#calc{background:linear-gradient(180deg,rgba(237,243,251,0),rgba(237,243,251,.85) 30%,rgba(237,243,251,.85) 70%,rgba(237,243,251,0))}
.calc-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:1.1rem;margin-top:2.4rem;align-items:start}
@media(max-width:980px){.calc-shell{grid-template-columns:1fr}}
.calc-card{border-radius:1.1rem;border:1px solid var(--line);padding:1.6rem clamp(1.1rem,2.2vw,1.7rem);
  background:rgba(255,255,255,.95);box-shadow:var(--shadow)}
.crow{margin-bottom:1.15rem}.crow:last-child{margin-bottom:0}
.crow .top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.55rem}
.crow label{font-size:.74rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.crow .val{font-family:var(--display);font-weight:750;font-size:1.02rem;color:var(--ink);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;outline:none;
  background:linear-gradient(90deg,var(--blue) var(--fill,40%),rgba(11,21,38,.1) var(--fill,40%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;cursor:grab;
  background:radial-gradient(circle at 34% 30%,#fff,#BFD8FF 45%,var(--blue));
  box-shadow:0 0 0 4px rgba(47,107,255,.16),0 3px 10px rgba(11,21,38,.3)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;cursor:grab;
  background:radial-gradient(circle at 34% 30%,#fff,#BFD8FF 45%,var(--blue));box-shadow:0 0 0 4px rgba(47,107,255,.16)}
.seg{display:flex;gap:.3rem;background:var(--paper-3);border:1px solid var(--line);border-radius:.6rem;padding:.25rem}
.seg button{flex:1;padding:.5rem .3rem;border:0;border-radius:.42rem;background:transparent;color:var(--muted);
  font-family:var(--body);font-size:.82rem;font-weight:650;cursor:pointer;transition:background .25s,color .25s}
.seg button.on{color:#fff;background:linear-gradient(120deg,var(--blue-deep),var(--blue))}
.readout{position:relative;border-radius:1.1rem;padding:1.8rem 1.6rem;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,var(--brand-2),#0C1730 55%,var(--blue-deep));
  box-shadow:0 34px 70px -30px rgba(22,51,124,.9)}
.readout::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 15% 0%,rgba(0,184,222,.3),transparent 68%)}
.readout .rl{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#9FB6DA}
.readout .big{font-family:var(--display);font-weight:800;font-size:clamp(2.5rem,6vw,3.6rem);line-height:1;margin:.35rem 0 .1rem;
  background:linear-gradient(115deg,#fff,#BFE0FF 45%,#7FE9FF);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.readout .per{font-size:.9rem;color:#A9BBD8}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.3rem 0 1.2rem}
.rbox{border:1px solid rgba(255,255,255,.14);border-radius:.7rem;padding:.75rem .85rem;background:rgba(255,255,255,.06)}
.rbox .k{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#9FB6DA}
.rbox .v{font-family:var(--display);font-weight:750;font-size:1.06rem;margin-top:.15rem;font-variant-numeric:tabular-nums;color:#fff}
.disclaim{font-size:.7rem;color:#8FA3C4;line-height:1.55;margin-top:.9rem}

/* ---------- dealers ---------- */
.dealer-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.dealer-grid{grid-template-columns:1fr}}
.dpoints{list-style:none;display:grid;gap:.9rem;margin-top:1.8rem}
.dpoints li{display:flex;gap:.85rem;align-items:flex-start}
.dpoints .tick{flex:none;width:1.45rem;height:1.45rem;border-radius:50%;display:grid;place-items:center;margin-top:.15rem;
  background:linear-gradient(140deg,var(--blue),var(--blue-deep));box-shadow:0 6px 14px -6px rgba(47,107,255,.9)}
.dpoints .tick svg{width:.8rem;height:.8rem;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dpoints b{display:block;font-weight:700;font-size:.98rem;margin-bottom:.1rem}
.dpoints p{color:var(--muted);font-size:.9rem}
.dealer-panel{position:relative;border-radius:1.1rem;overflow:hidden;padding:1.7rem 1.6rem;
  border:1px solid var(--line);box-shadow:var(--shadow);
  background:radial-gradient(100% 80% at 100% 0%,rgba(47,107,255,.1),transparent 60%),rgba(255,255,255,.94)}
.dp-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.dp-k{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.dp-v{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--ink);text-align:right}
.dp-cta{margin-top:1.4rem}
.dp-cta .btn{width:100%}
/* city flip */
/* The parent .n also uses background-clip:text. While this span is mid-transform
   the parent kept painting an untransformed copy through its own clip, so the
   city showed twice, offset and ghosted. Opting this one out of the gradient
   entirely leaves a single painted element and the ghost is gone. */
      /* leaving: drift up and fade */
 /* arriving: start below, invisible */

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:1.7rem 1.4rem;border-radius:1rem;border:1px solid var(--line);
  background:rgba(255,255,255,.9);box-shadow:var(--shadow);transition:border-color .35s,transform .4s var(--ease)}
.step:hover{border-color:rgba(47,107,255,.35);transform:translateY(-3px)}
.step .num{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.14em;color:var(--blue)}
.step h3{font-size:1.1rem;margin:.7rem 0 .45rem}
.step p{color:var(--muted);font-size:.9rem}

/* --- step artwork: small looping scenes, pure SVG + CSS, no JS and no images --- */
.sart{position:relative;margin:-.4rem -.4rem 1.15rem;border-radius:.8rem;overflow:hidden;
  background:linear-gradient(155deg,#EEF4FF 0%,#E4EEFC 52%,#E9F6FA 100%)}
.sart::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 22% 8%,rgba(255,255,255,.85),transparent 62%)}
.sart svg{display:block;width:100%;height:auto;
  fill:none;stroke:var(--brand-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* step 1: form filling itself in */
.sa-card{fill:#fff;stroke:rgba(30,45,74,.28);stroke-width:2}
.sa-line{fill:rgba(30,45,74,.20);stroke:none;transform-origin:68px 50%}
.sa-tick{stroke:var(--blue);stroke-width:2.6}
.sa-tick circle{fill:rgba(47,107,255,.12);stroke:var(--blue)}
.sa-pen{stroke:var(--brand-2);stroke-width:2.6}
.sa-pop{fill:var(--cyan);stroke:none;opacity:0}

/* step 2: three quotes on the table, the right one picked out */
.sa-opt{fill:#fff;stroke:rgba(30,45,74,.26);stroke-width:2}
.sa-best{stroke:var(--blue);stroke-width:2.6}
.sa-star{fill:#FFC24D;stroke:none}
.sa-glass circle{stroke:var(--blue);stroke-width:2.6;fill:rgba(47,107,255,.07)}
.sa-glass path{stroke:var(--blue);stroke-width:3.2}
.sa-bar{fill:rgba(47,107,255,.32);stroke:none;transform-origin:center}

/* step 3: approved and settled */
.sa-doc{fill:#fff;stroke:rgba(30,45,74,.28);stroke-width:2}
.sa-dline{fill:rgba(30,45,74,.18);stroke:none}
.sa-seal circle{fill:var(--blue);stroke:none}
.sa-seal path{stroke:#fff;stroke-width:3.2}
.sa-ring circle{stroke:var(--cyan);stroke-width:2.4;opacity:0;fill:none}
.sa-conf *{fill:var(--blue);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center}
.sa-conf .c2,.sa-conf .c4{fill:var(--cyan)}
.sa-conf .c3,.sa-conf .c5{fill:#FFC24D}

@media(prefers-reduced-motion:no-preference){
  .sa-line{animation:saGrow 5s var(--ease) infinite}
  .sa-line.l2{animation-delay:.35s}
  .sa-line.l3{animation-delay:.7s}
  .sa-tick{animation:saTick 5s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
  .sa-tick.t2{animation-delay:.4s}
  .sa-tick.t3{animation-delay:.8s}
  .sa-pen{animation:saPen 5s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
  .sa-pop{animation:saPop 5s ease-in-out infinite}
  .sa-pop.p2{animation-delay:1.1s}
  .sa-pop.p3{animation-delay:2.2s}

  .sa-opt{animation:saRise 5s var(--ease) infinite;transform-box:fill-box;transform-origin:50% 100%}
  .sa-opt.o3{animation-delay:.12s}
  .sa-best{animation-name:saPick;animation-delay:.24s}
  .sa-star{animation:saStar 5s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
  .sa-glass{animation:saSweep 5s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
  .sa-bar{animation:saBar 5s var(--ease) infinite;transform-box:fill-box}
  .sa-bar.b2{animation-delay:.18s}
  .sa-bar.b3{animation-delay:.36s}

  .sa-doc{animation:saRise 5s var(--ease) infinite;transform-box:fill-box;transform-origin:50% 100%}
  .sa-dline{animation:saGrow 5s var(--ease) infinite;transform-box:fill-box;transform-origin:0 50%}
  .sa-dline.d2{animation-delay:.2s}
  .sa-dline.d3{animation-delay:.4s}
  .sa-seal{animation:saStamp 5s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
  .sa-ring circle{animation:saRing 5s var(--ease) infinite;transform-origin:126px 82px}
  .sa-conf *{animation:saConf 5s var(--ease) infinite}
  .sa-conf .c2{animation-delay:.12s}
  .sa-conf .c3{animation-delay:.22s}
  .sa-conf .c4{animation-delay:.32s}
  .sa-conf .c5{animation-delay:.42s}
  .sa-conf .c6{animation-delay:.52s}
}
@keyframes saGrow{0%,4%{transform:scaleX(.1);opacity:.25}20%,100%{transform:scaleX(1);opacity:1}}
@keyframes saTick{0%,16%{opacity:0;transform:scale(.4)}26%{opacity:1;transform:scale(1.18)}
  32%,100%{opacity:1;transform:scale(1)}}
@keyframes saPen{0%,100%{transform:translate(0,0) rotate(0)}
  18%{transform:translate(9px,-7px) rotate(-6deg)}
  36%{transform:translate(17px,-15px) rotate(-3deg)}
  55%{transform:translate(4px,-3px) rotate(2deg)}}
@keyframes saPop{0%,72%{opacity:0;transform:translateY(4px) scale(.6)}
  80%{opacity:.95;transform:translateY(-2px) scale(1)}
  92%,100%{opacity:0;transform:translateY(-8px) scale(.7)}}

@keyframes saRise{0%,8%{transform:translateY(10px) scaleY(.86);opacity:0}
  28%,100%{transform:translateY(0) scaleY(1);opacity:1}}
@keyframes saPick{0%,14%{transform:translateY(10px) scaleY(.86);opacity:0}
  34%{transform:translateY(-3px) scaleY(1.03);opacity:1}
  44%,100%{transform:translateY(0) scaleY(1);opacity:1}}
@keyframes saSweep{0%,20%{transform:translateX(-42px);opacity:0}
  38%{transform:translateX(-42px);opacity:1}
  58%{transform:translateX(0);opacity:1}
  92%,100%{transform:translateX(0);opacity:1}}
@keyframes saStar{0%,52%{opacity:0;transform:scale(.3) rotate(-25deg)}
  64%{opacity:1;transform:scale(1.25) rotate(6deg)}
  72%,100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes saBar{0%,24%{transform:scaleX(0);opacity:0}44%,100%{transform:scaleX(1);opacity:1}}

@keyframes saStamp{0%,46%{opacity:0;transform:scale(1.9) rotate(-14deg)}
  58%{opacity:1;transform:scale(.92) rotate(0)}
  66%,100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes saRing{0%,54%{opacity:0;transform:scale(.55)}
  62%{opacity:.85;transform:scale(1.1)}
  82%,100%{opacity:0;transform:scale(1.55)}}
@keyframes saConf{0%,48%{opacity:0;transform:translateY(10px) rotate(0)}
  60%{opacity:1;transform:translateY(-4px) rotate(38deg)}
  86%,100%{opacity:0;transform:translateY(-16px) rotate(96deg)}}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}
.about-card{border-radius:1.1rem;overflow:hidden;position:relative;aspect-ratio:1/1;border:1px solid var(--line);box-shadow:var(--shadow)}
.about-card img{width:100%;height:100%;object-fit:cover}
.about-card::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(47,107,255,.12),transparent 55%)}

/* ---------- contact ----------
   Single centred column: the form is the point of the section, and in a two-up
   grid it sat off to one side with the supporting copy competing beside it. */
#contact .shell>.rv:first-child{text-align:center}
#contact .h-sec{margin-inline:auto}
.cgrid{display:grid;grid-template-columns:1fr;justify-items:center;
  gap:clamp(1.6rem,3vw,2.4rem);margin-top:2.4rem}
.cgrid>*{width:100%;max-width:36rem}
.cform{display:grid;gap:.8rem;background:rgba(255,255,255,.95);border:1px solid var(--line);
  border-radius:1.1rem;padding:1.6rem;box-shadow:var(--shadow)}
.cform label{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.cform input,.cform select,.cform textarea{width:100%;padding:.85rem .9rem;border-radius:.55rem;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-family:var(--body);font-size:.94rem;margin-top:.35rem}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.16)}
.cchan{display:grid;gap:.7rem;margin-top:1.4rem}
.cchan a{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border-radius:.8rem;border:1px solid var(--line);
  background:rgba(255,255,255,.9);transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.cchan a:hover{border-color:rgba(47,107,255,.4);transform:translateX(3px);box-shadow:0 14px 30px -20px rgba(47,107,255,.8)}
.cchan .ci{width:2.2rem;height:2.2rem;border-radius:.55rem;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--blue),var(--blue-deep))}
.cchan .ci svg{width:1.05rem;height:1.05rem;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cchan b{font-size:.94rem;font-weight:650}
.cchan small{display:block;color:var(--muted-2);font-size:.78rem}
.cnote{list-style:none;display:grid;gap:.75rem;margin-top:1.6rem}
.cnote li{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--ink-2)}
.cnote svg{width:1.05rem;height:1.05rem;flex:none;stroke:var(--blue);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
/* honeypot: off-screen rather than display:none so bots still see a real field */
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform{position:relative}
.cform.bad #fName:invalid,.cform.bad #fEmail:invalid{border-color:#D4483F;box-shadow:0 0 0 3px rgba(212,72,63,.14)}
.cform.sent .btn{pointer-events:none;filter:saturate(.55) brightness(1.04)}
#fSend:disabled{opacity:.75;cursor:default}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:2.6rem 0 2rem;background:rgba(245,248,253,.9)}
.fgrid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
footer img.flogo{height:24px;margin-bottom:.9rem;transition:opacity .3s var(--ease-m1)}
footer small{color:var(--muted-2);font-size:.74rem;line-height:1.65;display:block;max-width:46rem}
.fnav{display:flex;gap:1.4rem;flex-wrap:wrap}
.fnav a{font-size:.82rem;color:var(--muted)}
.fnav a:hover{color:var(--blue)}

/* ---------- reveal + wipe ---------- */
.rv{opacity:0;transform:translateY(30px)}
.rv.in{opacity:1;transform:none;transition:opacity .85s ease var(--d,0s),transform .9s var(--ease) var(--d,0s)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
.wipe{position:absolute;left:0;right:0;top:0;height:1px;z-index:5;pointer-events:none}
.wipe span{position:absolute;left:0;right:0;top:0;height:2px;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,var(--blue) 22%,var(--cyan) 50%,var(--blue) 78%,transparent)}
.wipe.on span{transform:scaleX(1);transition:transform 1.15s var(--ease)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- showroom gate ---------- */
body.sr-on{overflow:hidden}
#showroom{position:fixed;inset:0;z-index:200;background:#EEF3FA;opacity:1;transition:opacity .9s ease}
#showroom.gone{opacity:0;pointer-events:none}
#srCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#srVeil{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.sr-ui{position:absolute;inset:0;pointer-events:none;font-family:var(--body)}
.sr-ui > *{pointer-events:auto}
/* loader */
#srLoad{position:absolute;inset:0;display:grid;place-items:center;background:#EEF3FA;transition:opacity .7s ease}
#srLoad.gone{opacity:0;pointer-events:none}
#srLoad .box{text-align:center;width:min(26rem,80vw)}
#srLoad img{width:14rem;margin:0 auto 1.6rem;display:block}
#srLoad .bar{height:3px;border-radius:99px;background:rgba(11,21,38,.12);overflow:hidden}
#srLoad .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .3s ease}
#srLoad p{margin-top:.9rem;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
/* hud */
/* Controls sit top-left, mirroring the skip button top-right, and both are pinned
   to the same --sr-chip-h so their heights cannot drift apart when the font
   metrics change. Matching the top offset is what makes the pair read as one row. */
.sr-ui{--sr-chip-h:2.9rem}
#srHud{position:absolute;top:1.1rem;left:1.2rem;display:flex;justify-content:flex-start;gap:.5rem;flex-wrap:wrap;max-width:calc(100% - 12rem)}
/* Frosted glass, tinted dark: the showroom is a dark room now, so white chips
   glared. Light text on smoked glass reads as premium and stays legible against
   both the dark floor and a bright light shaft passing behind it. */
#srHud span{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  min-height:var(--sr-chip-h);display:inline-flex;align-items:center;
  color:rgba(233,240,252,.92);
  background:rgba(14,20,32,.42);
  border:1px solid rgba(190,214,255,.20);
  border-radius:.55rem;padding:0 1.15rem;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 6px 22px -12px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.10)}
#srSkip{position:absolute;top:1.1rem;right:1.2rem;
  min-height:var(--sr-chip-h);padding-top:0;padding-bottom:0;
  color:rgba(233,240,252,.95)!important;
  background:rgba(14,20,32,.42)!important;
  border:1px solid rgba(190,214,255,.22)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 6px 22px -12px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .28s ease,border-color .28s ease}
#srSkip:hover{background:rgba(30,44,70,.62)!important;border-color:rgba(0,184,222,.55)!important}
#srPrompt{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;
  background:rgba(14,20,32,.55);border:1px solid rgba(0,184,222,.45);border-radius:99px;padding:.7rem 1.3rem;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  font-size:.82rem;font-weight:650;color:rgba(233,240,252,.95);box-shadow:0 12px 34px -14px rgba(0,184,222,.75)}
#srPrompt.on{opacity:1}
#srDot{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:rgba(11,21,38,.5);box-shadow:0 0 0 1.5px rgba(255,255,255,.75)}
@media(max-width:1099px){#showroom{display:none}}

/* agency credit: the footer is a light surface, so this reads in ink not white */
.fcredit{margin-top:1.9rem;padding-top:1.15rem;border-top:1px solid var(--line);
  display:flex;justify-content:center;align-items:center;gap:.42rem;
  font-size:.76rem;letter-spacing:.04em;color:var(--muted-2)}
.fcredit a{color:var(--ink-2);text-decoration:none;font-weight:650;
  position:relative;transition:color .28s ease}
.fcredit a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease)}
.fcredit a:hover{color:var(--blue)}
.fcredit a:hover::after{transform:scaleX(1);transform-origin:left}

/* This is the hero headline now that the logo lockup and the old h1 are gone,
   so it carries the whole top of the page and is sized as display type.
   Overrides `.hero h1` above, which is more specific, hence the doubled class. */
.hero-line{font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.3rem,3.1vw,2.15rem);line-height:1.15;color:var(--ink);
  margin:.35rem 0 0;text-wrap:balance}
.hero h1.hero-line{font-size:clamp(2.5rem,6.2vw,4.75rem);line-height:1.02;
  font-weight:800;max-width:17ch;margin:0}

/* Legal row: sits above the agency credit, separated from the marketing links
   so the policies are easy to find rather than buried among nav items. */
/* One footer bar instead of three stacked rows: policies, the agency credit and
   the photo attribution all sit on a single line, wrapping to two on mobile. */
.fbar{margin-top:1.9rem;padding-top:1.2rem;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.fbar-links{display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap}
.fbar-links a{font-size:.8rem;font-weight:600;color:var(--ink-2);position:relative;
  transition:color .25s}
.fbar-links a:hover{color:var(--blue)}
.fbar-links a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease)}
.fbar-links a:hover::after{transform:scaleX(1);transform-origin:left}
.fbar-credit{color:var(--muted)!important;font-weight:500!important}
.fbar-credit:hover{color:var(--blue)!important}
/* CC BY on the harbour photograph requires a visible credit. Quiet but present:
   if this line goes, the image has to go with it. */
.fbar-attr{font-size:.68rem;color:var(--muted-2);line-height:1.5;margin:0}
.fbar-attr a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.fbar-attr a:hover{color:var(--blue)}
@media(max-width:720px){.fbar{flex-direction:column;align-items:flex-start;gap:.9rem}}

/* ============================================================================
   DEALT FAN — stats band for #creds
   Append to assets/css/site.css (bump the ?v= query on the <link> when you do).

   Everything is namespaced .df-* so nothing collides with existing site rules.
   Uses the existing tokens: --display, --blue, --cyan, --ink, --ease.
   The old .stats / .stat / .cityflip rules can be deleted once this ships —
   they are not used anywhere else on the page.
============================================================================ */

.df-grid{
  display:grid;
  grid-template-columns:minmax(240px,330px) 1fr;
  gap:clamp(1.6rem,4vw,3rem);
  align-items:center;
}
@media(max-width:880px){
  .df-grid{grid-template-columns:1fr;gap:2rem}
}

/* ---------- left: the running total ---------- */

/* position/z-index matter: during a fly-in or sweep-off a card travels outside
   the stage and would otherwise cross over the number. */
.df-tally{position:relative;z-index:2}

.df-big{
  display:block;
  font-family:var(--display);
  font-weight:800;
  /* 1.04 not 0.95 — Sora's digits overflow a line box tighter than 1 and the
     band clips with overflow:hidden */
  line-height:1.04;
  font-size:clamp(2.8rem,6.4vw,4.6rem);
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:#fff;
}
.df-big.is-tick{animation:df-tick .4s ease}
@keyframes df-tick{
  40%{transform:translateY(-4px);text-shadow:0 0 22px rgba(127,231,184,.7)}
}

.df-cap{margin:.55rem 0 0;color:rgba(214,228,250,.75);font-size:.88rem}

.df-meta{margin-top:1.4rem;display:flex;gap:1.9rem;flex-wrap:wrap}
.df-meta .df-n{
  display:block;font-family:var(--display);font-weight:700;
  font-size:1.28rem;color:#9FD4FF;font-variant-numeric:tabular-nums;
}
.df-meta .df-t{display:block;font-size:.72rem;color:rgba(214,228,250,.62);margin-top:.1rem}

/* ---------- right: the stage ---------- */

/* 250px fitted the old 104px photo. The hero's 16/10 crop makes the card
   252px tall before it is even rotated, so the stage needs the headroom.
   place() only ever reads stage.clientWidth, so height is free to change. */
.df-stage{position:relative;height:284px}
@media(max-width:560px){.df-stage{height:200px}}

/* The fan is laid out at full size and then scaled to fit the stage, so a phone
   gets the same three-card spread as desktop rather than one card at a time.
   JS writes the scale() onto this element. */
.df-fan{position:absolute;inset:0;transform-origin:left center}

/* ---------- the approval card ---------- */

/* 236px wide is deliberate: in the fan only the left ~176px of each card stays
   uncovered by the next one, so every field has to sit inside that strip.
   Widening the card, or moving amount/kind to the right, hides them. */
.df-card{
  position:absolute;left:0;top:0;width:236px;
  border-radius:11px;overflow:hidden;color:var(--ink);
  background:linear-gradient(158deg,#FFFFFF 0%,#F4F7FD 62%,#EDF2FB 100%);
  box-shadow:0 20px 42px -20px rgba(0,0,0,.8), 0 2px 5px rgba(0,0,0,.28);
  will-change:transform,opacity;
}

.df-photo{display:block;width:100%;height:104px;object-fit:cover;background:#D7DFEE}

.df-body{padding:.7rem .95rem .95rem}

.df-veh{
  display:block;font-family:var(--display);font-weight:700;
  font-size:.86rem;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.df-row{display:flex;justify-content:flex-start;align-items:baseline;gap:.5rem;margin-top:.55rem}
.df-amt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.df-rate{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;
  color:#0F7A4C;background:rgba(15,122,76,.11);padding:.14rem .4rem;border-radius:5px;
}

/* now holds the loan type AND the rate, so it needs to space them */
.df-kindwrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.3rem;margin-top:.5rem}
.df-kind{
  font-weight:600;font-size:.63rem;letter-spacing:.07em;text-transform:uppercase;
  color:#33559C;background:rgba(47,107,255,.10);
  border:1px solid rgba(47,107,255,.22);
  padding:.16rem .45rem;border-radius:5px;
}

/* ---------- the FUNDED stamp ---------- */

/* Sits over the vehicle photo and carries its own translucent disc. A multiply
   blend looks better on paper but disappears against a dark car. */
/* The fan stamp is now the hero's SVG stamp: it carries .deal-stamp too and
   inherits every ring, arc and colour from there. This rule only places it,
   rotates it and drives the deal-in animation, so the two panels can never
   drift apart again. The old circle-and-text styling lived here and is exactly
   what made it a different object. */
.df-stamp{
  position:absolute;left:14px;top:18px;width:72px;height:72px;
  right:auto;pointer-events:none;
  opacity:0;transform:rotate(-14deg) scale(1.9);
}
.df-card.is-stamped .df-stamp{animation:df-thump .3s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes df-thump{to{transform:rotate(-14deg) scale(1);opacity:.8}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .df-card,.df-stamp{transition:none!important;animation:none!important}
  .df-stamp{opacity:.8;transform:rotate(-14deg) scale(1)}
}

/* ---- showroom scroll-nudge. Scrolling does nothing inside the gate, which
   reads as "the site is stuck". When someone tries it anyway, the control
   chips and the skip button shimmer once so the two ways forward announce
   themselves. The class lands on #showroom from the wheel/touch listener. */
#srHud span{position:relative}
#srHud span,#srSkip{overflow:hidden}
#srHud span::before,#srSkip::before{content:'';position:absolute;inset:0;z-index:1;
  pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%)}
#showroom.sr-nudge #srHud span::before,
#showroom.sr-nudge #srSkip::before{animation:srSheen 1.1s ease-out 2}
@keyframes srSheen{to{transform:translateX(130%)}}
/* a soft breathing pulse alongside the sheen, so it registers in peripheral
   vision. Transform, not border: the skip button's border is !important and
   would beat a keyframe. */
#showroom.sr-nudge #srHud span,
#showroom.sr-nudge #srSkip{animation:srNudgePulse 1.1s ease-in-out 2}
@keyframes srNudgePulse{50%{transform:scale(1.045)}}

/* ---- scroll ribbon background (assets/js/fifty-ribbon.js) ----
   The canvas sits at z-index:-1 so in-flow content paints above it without
   every section needing its own stacking rule, which would break the moment
   someone adds a new block. The catch with z-index:-1 is that it also paints
   below body's own background, so the paper colour moves to html and body
   goes transparent. Verified in-browser, not assumed. */
html{background:var(--paper)}
body{background:transparent}
/* .field is a fixed opaque-white z-index:-1 sheet; the ribbon has to sit
   behind it, and .field must stop being opaque or it hides the ribbon. */
.ff-ribbon{z-index:-3!important}
.field{background-color:transparent!important;z-index:-2!important}
/* nothing should render under the full-screen showroom */
body.sr-on .ff-ribbon{display:none}

/* ---- mobile nav ----
   Below 900px the link list was simply display:none with no replacement, so on
   a phone the only route to any page was scrolling to the footer. Become a
   Partner was unreachable from the top of the site entirely. This adds the
   missing menu: a button in the bar, a full-height sheet, and the same links. */
.nav-burger{display:none;width:2.6rem;height:2.6rem;padding:0;border-radius:.55rem;
  align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.7);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nav-burger span{display:block;position:relative;width:1.05rem;height:2px;border-radius:2px;
  background:var(--ink);transition:background .2s}
.nav-burger span::before,.nav-burger span::after{content:'';position:absolute;left:0;
  width:100%;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .32s var(--ease),top .32s var(--ease)}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
/* over the dark partner hero the bars need to be light */
body.bp-on-dark #nav:not(.stuck) .nav-burger{background:rgba(255,255,255,.10);border-color:rgba(190,214,255,.25)}
body.bp-on-dark #nav:not(.stuck) .nav-burger span,
body.bp-on-dark #nav:not(.stuck) .nav-burger span::before,
body.bp-on-dark #nav:not(.stuck) .nav-burger span::after{background:#EAF1FC}
/* open state: the bars become a cross */
body.nav-open .nav-burger span{background:transparent}
body.nav-open .nav-burger span::before{top:0;transform:rotate(45deg)}
body.nav-open .nav-burger span::after{top:0;transform:rotate(-45deg)}

/* The closed sheet must be INERT, not merely invisible. It is fixed at inset:0
   over the whole viewport, so if it is only opacity:0 it still swallows every
   tap on the page and its own links catch some of them and scroll you to a
   random section. display:none would fix that but kills the fade, so the sheet
   stays rendered and is switched off with visibility + pointer-events. The
   delayed visibility transition lets the fade-out finish before it goes away. */
.nav-sheet{position:fixed;inset:0;z-index:59;display:none;
  background:rgba(247,250,254,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  padding:8.6rem 1.6rem 2.4rem;overflow-y:auto;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),visibility 0s linear .3s}
body.nav-open .nav-sheet{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .3s var(--ease),visibility 0s}
.nav-sheet a{display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem .2rem;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ink);
  text-decoration:none;letter-spacing:-.02em}
.nav-sheet a::after{content:'';width:.55rem;height:.55rem;flex:none;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(-45deg)}
.nav-sheet a:active{color:var(--blue)}
.nav-sheet .sheet-cta{margin-top:1.8rem;display:grid;gap:.7rem}
/* .nav-sheet a sets ink for the menu links and outranks .btn-primary, which
   repainted the CTA's label black on its blue fill. Put white back. */
.nav-sheet .sheet-cta .btn{width:100%;justify-content:center;color:#fff}
.nav-sheet .sheet-cta .btn::after{display:none}

@media(max-width:900px){
  .nav-burger{display:inline-flex}
  .nav-sheet{display:block}
  /* the sheet scrolls, the page behind it must not */
  body.nav-open{overflow:hidden}
  /* One control in the bar, not two. The burger replaces the CTA on phones:
     Start an application still sits at the bottom of the sheet, so nothing is
     lost and the bar stops feeling crowded. */
  #nav .nav-cta,#nav>.btn{display:none}
  #nav{grid-template-columns:1fr auto}
}
@media(min-width:901px){
  body.nav-open{overflow:auto}
}

/* The ribbon replaces the old scroll thread, which ran from "What we can help
   with" down to the contact form rather than from the very top. Gated the same
   way: hidden above #finance, fading in as that section arrives. Only the
   homepage carries .ff-gate, so inner pages show the ribbon throughout. */
body.ff-gate .ff-ribbon{transition:opacity .55s ease}

/* On a phone the quote widget is a tall narrow box, and a conic gradient on a
   tall box stretches its angular stops into long vertical bands: the rim read
   as a hard cyan line down one edge rather than a sweep. Conic suits the wide
   desktop box, not this one. Soft vertical wash on small screens, and a lighter
   bloom so the edge stops competing with the card. */
@media(max-width:760px){
  .widget-wrap::before{inset:-1.5px;
    background:linear-gradient(170deg,rgba(47,107,255,.50),rgba(0,184,222,.30) 45%,rgba(47,107,255,.22))}
  /* The bloom has to lose the conic too. Dropping its opacity was not enough:
     it is the WIDE layer (inset -20px, blur 30px), so on a tall narrow box its
     angular stops still smeared into a long vertical band down one edge. That
     band, not the 1.5px rim, was the line showing on phones. */
  .widget-wrap::after{opacity:.45;filter:blur(28px);
    background:linear-gradient(180deg,rgba(47,107,255,.55),rgba(0,184,222,.28) 50%,rgba(47,107,255,.42))}
}

/* ---- fan cards adopt the hero deal-card language --------------------------
   They were a separate design: 11px radius, no border, a much heavier black
   shadow, a fixed 104px photo, a monospace amount and green/blue chips. The
   hero uses .9rem, a white hairline border, a 16/10 photo, the brand gradient
   on the amount and neutral chips. Same object, so same treatment.

   The one thing NOT copied is the hero's translucent fill: these sit on the
   dark harbour band, where 86% white would drop the ink contrast. They stay
   opaque and keep a deeper shadow to hold off that background. */
.df-card{
  border-radius:.9rem;
  background:linear-gradient(168deg,#FFFFFF,#F4F8FE);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 26px 56px -24px rgba(0,0,0,.72), 0 1px 0 rgba(255,255,255,.75) inset;
}
.df-photo{height:auto;aspect-ratio:16/10}
.df-veh{font-size:.76rem;color:var(--ink)}
/* the hero's amount is Sora 800 with the brand gradient clipped to the text */
.df-amt{
  font-family:var(--display);font-weight:800;font-size:1.12rem;line-height:1.25;
  letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--brand-2),var(--blue) 60%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* hero tags are neutral chips, not a green rate and a blue kind */
.df-rate,.df-kind{
  font-family:var(--body);font-size:.58rem;font-weight:650;color:var(--ink-2);
  letter-spacing:0;text-transform:none;
  padding:.16rem .38rem;border-radius:.28rem;
  background:rgba(11,21,38,.06);border:1px solid rgba(11,21,38,.08);
}
.df-row{align-items:center}