: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. */
@property --ang{syntax:'<angle>';inherits:false;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}
/* soft engineered grid + a mouse-reactive aura */
.hero-mesh{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(11,21,38,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,21,38,.045) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(90% 70% at 50% 42%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 42%,#000 20%,transparent 78%)}
.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 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:1rem;overflow:hidden;box-shadow:var(--shadow)}
.stat{background:rgba(255,255,255,.92);padding:1.8rem 1.3rem;position:relative}
.stat::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.stat .n{font-family:var(--display);font-weight:800;font-size:clamp(1.75rem,3vw,2.5rem);
  background:linear-gradient(115deg,var(--brand-2),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat .l{font-size:.79rem;color:var(--muted);margin-top:.3rem;line-height:1.4}
@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. */
.thread{position:absolute;left:0;right:0;z-index:-1;pointer-events:none;overflow:hidden}
.thread svg{display:block;width:100%;height:100%}
.thread path{fill:none;stroke-linecap:round}
/* the whole route, barely there, so the line has somewhere to go */
.th-track{stroke:rgba(47,107,255,.10);stroke-width:1.5}
/* wide soft pass underneath does the glowing */
.th-glow{stroke:rgba(47,107,255,.30);stroke-width:12;filter:blur(10px)}
/* the crisp line itself */
.th-line{stroke:url(#thGrad);stroke-width:2.4}
.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. */
.th-head{position:absolute;left:0;top:0;width:.85rem;height:.85rem;border-radius:50%;
  margin:-.425rem 0 0 -.425rem;background:#EAF6FF;
  box-shadow:0 0 0 .28rem rgba(77,155,255,.35),
             0 0 1.6rem .3rem rgba(47,107,255,.75),
             0 0 3.2rem .7rem rgba(0,184,222,.45);
  opacity:var(--headOn,0);transform:translate3d(var(--hx,0px),var(--hy,0px),0)}
@media(prefers-reduced-motion:reduce){
  .th-glow,.th-line{stroke-dashoffset:0}
  .th-head{display:none}
}
@media(max-width:820px){.thread{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. */
.stat .n:has(.cityflip){background:none;-webkit-background-clip:border-box;background-clip:border-box}
.cityflip{display:inline-block;color:var(--blue);
  -webkit-text-fill-color:currentColor;
  will-change:transform,opacity;
  transition:opacity .5s ease,transform .5s var(--ease)}
.cityflip.out{opacity:0;transform:translateY(-42%)}      /* leaving: drift up and fade */
.cityflip.pre{transition:none;opacity:0;transform:translateY(42%)} /* 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)}
  padding:2.2rem 2.4rem;box-shadow:0 30px 70px -30px rgba(11,21,38,.4);max-width:32rem}
  border:1px solid var(--line);border-radius:.4rem;padding:.4rem .6rem;color:var(--ink-2);font-weight:700}
/* hud */
#srHud{position:absolute;left:0;right:0;bottom:1.3rem;display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
/* 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:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(233,240,252,.92);
  background:rgba(14,20,32,.42);
  border:1px solid rgba(190,214,255,.20);
  border-radius:99px;padding:.46rem .9rem;
  -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;
  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}}