/* ==========================================================================
   FiEV Electric Mobility — Design System (Light)
   Tokens are the source of truth. Change a value here, it changes everywhere.

   Colour rules that matter:
   - Volt (#B4FF39) is a FILL only. As text on white it is 1.25:1 — unreadable.
     Buttons use ink text on volt (16.2:1).
   - Volt-deep (#3F6B00) carries volt as text/eyebrows/icons (6.3:1).
   - Ion-deep (#2951C8) is the secondary accent as text (6.8:1).
   - One continuous colour field sits behind <main>; sections are transparent.
   - The Fleet Partner section is barely tinted; its weight comes from the one
     dark object on the page, the ROI calculator card.
   ========================================================================== */

:root{
  /* Surfaces */
  --canvas:#FFFFFF; --paper:#FAFBFC; --mist:#F1F3F5; --mist2:#E9ECF0;
  --line:#E4E7EB; --line-2:#D3D8DF; --line-ctl:#8E95A1;

  /* Text */
  --ink:#0A0B0D; --text:#0A0B0D; --muted:#454B57; --faint:#656B77;

  /* Volt — primary action, energy, "this number matters" */
  --volt:#B4FF39; --volt-glow:#C9FF6B; --volt-deep:#3F6B00; --volt-wash:#F2FFD9;

  /* Ion — secondary data, never on a primary button */
  --ion:#4D7CFF; --ion-deep:#2951C8; --ion-wash:#EEF3FF;

  /* Inverted surface — footer only */
  --dark:#07080B; --dark-2:#0E1015; --dark-line:#1C1F26;
  --dark-text:#F5F6F7; --dark-muted:#8B909B; --dark-faint:#7C818E;

  --wa:#25D366;
  --warn:#B4820A; --warn-bg:#FFF8E6; --warn-line:#F0DCA8; --warn-ink:#6B5307;
  --err:#B42318;

  /* Elevation — cool-tinted, never neutral grey */
  --e1:0 1px 2px rgba(16,24,40,.05);
  --e2:0 4px 14px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.04);
  --e3:0 18px 44px rgba(16,24,40,.10),0 2px 6px rgba(16,24,40,.05);

  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);-webkit-text-size-adjust:100%}
body{
  background:#F7F8FB;color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
@media(min-width:768px){body{font-size:17px}}
h1,h2,h3,h4{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.022em;font-weight:600;line-height:1.08;color:var(--ink)}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--volt);color:var(--ink)}
:focus-visible{outline:2px solid var(--volt-deep);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--volt);color:var(--ink);padding:12px 20px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 40px}}
.sec{padding:44px 0}
@media(min-width:768px){.sec{padding:72px 0}}
.sec-sm{padding:32px 0}
@media(min-width:768px){.sec-sm{padding:52px 0}}
.prose{max-width:68ch}
.prose p{margin-bottom:1.1em;color:var(--muted)}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);margin:2em 0 .6em}
.prose h3{font-size:1.2rem;margin:1.6em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.2em 1.2em;color:var(--muted)}
.prose li{margin-bottom:.5em}
.prose a{color:var(--ion-deep);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink)}



/* ==========================================================================
   CONTINUOUS COLOUR FIELD
   One background for the whole page — and deliberately restrained.

   Colour is spent, not sprinkled. It is allowed to be VISIBLE in exactly two
   places: the hero, and the closing call to action. Everything between them
   is near-neutral — a drift you feel rather than see. That restraint is most
   of the difference between a page that reads as a template and one that
   reads as a brand.

   Measured: peak chroma 7/255 at the hero, 0.3/255 average through the body
   (started at 22/255 and 2.9/255, which is what read as "too much colour").

   Blobs are sized in PERCENTAGES so they scale with page length, and overlap
   their neighbours so no edge can form.
   ========================================================================== */
main{position:relative;isolation:isolate}
main::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* hero — the one place the brand colour is actually seen */
    radial-gradient(62%  9% at 84%  1%, rgba(180,255,57,.14), transparent 72%),
    radial-gradient(56%  8% at 10%  8%, rgba(77,124,255,.05), transparent 72%),
    /* body — barely there, just enough to stop it going flat */
    radial-gradient(72% 15% at 97% 33%, rgba(77,124,255,.028), transparent 74%),
    radial-gradient(72% 15% at  1% 60%, rgba(180,255,57,.030), transparent 74%),
    /* closing CTA — a whisper, to lift the final ask */
    radial-gradient(82% 12% at 50% 95%, rgba(180,255,57,.09), transparent 74%),
    /* The page base is a hair off-white so white cards have something to sit on.
       Card #FFFFFF against page #F7F8FB is a ~3% lightness step: visible as
       separation, invisible as "grey". Kept flat so it cannot band. */
    linear-gradient(180deg,#F7F8FB,#F6F7FA 50%,#F7F8FB);
}

/* Surface classes are kept as semantic markers — they document which sections
   are explanatory vs. conversion, and make it trivial to reintroduce banding.
   Visually they now contribute nothing: the field does all the work. */
.s-white,.s-tint-b,.s-tint-g,.s-mesh,.bg-panel{background:none;border-top:0;border-bottom:0}

/* ---------- Type ---------- */
.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--volt-deep);font-weight:500;display:block}
.eyebrow.i{color:var(--ion-deep)}
h1.hh{font-size:clamp(2.35rem,5.8vw,4.3rem);line-height:1.02;max-width:15ch}
h2.sh{font-size:clamp(1.85rem,4.2vw,3.1rem);margin-block:14px 16px;max-width:20ch}
h2.sh.wide{max-width:26ch}
.lede{color:var(--muted);font-size:17px;max-width:62ch}
@media(min-width:768px){.lede{font-size:18.5px}}
.vt{color:var(--volt-deep)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.center{text-align:center}
.center h1,.center h2,.center .lede,.center .prose,
.center .plans,.center .acc,.center .note,.center .flag{margin-left:auto;margin-right:auto}
.center .eyebrow{text-align:center}
.center .btns{justify-content:center}
/* Was a two-colour gradient across the headline. Gradient text is one of the
   clearest "new startup" signals — established brands emphasise with a single
   solid colour. Revert by restoring the background-clip version if you prefer. */
.grad{color:var(--volt-deep)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.nav.stuck{border-bottom-color:var(--line);background:rgba(255,255,255,.9);box-shadow:0 1px 20px rgba(16,24,40,.05)}
.nav-in{max-width:1400px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:20px}
@media(min-width:768px){.nav-in{padding:12px 32px}}
.logo{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:21px;letter-spacing:-.035em;color:var(--ink);flex:none}
.logo .mark{width:32px;height:32px;border-radius:9px;background:var(--volt);display:grid;place-items:center;flex:none;box-shadow:0 2px 10px rgba(63,107,0,.22)}
.logo .mark svg{width:18px;height:18px}
.nav-links{display:none;gap:26px;font-size:15px;color:var(--muted);margin:0 auto;align-items:center}
@media(min-width:1080px){.nav-links{display:flex}}
.nav-links a{transition:color .2s var(--ease);position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--volt-deep);transition:right .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.nav-links a.on{color:var(--ink);font-weight:600}
.nav-links a.on::after{right:0}
.nav-actions{display:none;gap:10px;margin-left:auto;align-items:center}
@media(min-width:1080px){.nav-actions{display:flex}}
.burger{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line-2);border-radius:10px;background:#fff;cursor:pointer;margin-left:auto}
@media(min-width:1080px){.burger{display:none}}
.burger span{display:block;width:17px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
.mobile-menu{display:none;border-top:1px solid var(--line);background:#fff;max-height:calc(100vh - var(--nav-h));overflow-y:auto;box-shadow:var(--e2)}
.mobile-menu.open{display:block}
@media(min-width:1080px){.mobile-menu,.mobile-menu.open{display:none}}
.mobile-menu ul{list-style:none;padding:8px 20px 4px}
.mobile-menu li a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:500}
.mobile-menu .mm-cta{padding:18px 20px 22px;display:grid;gap:10px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;padding:13px 24px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .1s var(--ease),border-color .25s var(--ease),color .25s var(--ease);text-align:center;min-height:46px;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--volt);color:var(--ink)}
.btn-primary:hover{background:var(--volt-glow);box-shadow:0 8px 22px rgba(63,107,0,.24)}
.btn-secondary{background:#fff;border-color:var(--line-2);color:var(--ink);box-shadow:var(--e1)}
.btn-secondary:hover{border-color:var(--ink);background:var(--mist)}
.btn-ghost{color:var(--ion-deep);padding:13px 2px}
.btn-ghost:hover{color:var(--volt-deep)}
.btn-sm{padding:9px 17px;font-size:14px;border-radius:10px;min-height:38px}
.btn-block{width:100%}
.btn-wa{background:var(--wa);color:var(--ink)}
.btn-wa:hover{background:#1EBE5B;box-shadow:0 8px 22px rgba(37,211,102,.3)}
.btn-green{background:var(--volt);color:var(--ink)}
.btn-green:hover{background:var(--volt-glow);box-shadow:0 8px 22px rgba(63,107,0,.24)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- Pill ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--volt-wash);border:1px solid #D9F2AE;color:var(--volt-deep);font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.07em;padding:6px 14px;border-radius:999px;text-transform:uppercase}
.dot{width:6px;height:6px;border-radius:50%;background:var(--volt-deep);animation:pulse 2s ease-in-out infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:32px 0 0;background:none}
@media(min-width:900px){.hero{padding:52px 0 0}}
.hero-in{position:relative;display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
@media(min-width:900px){.hero-in{grid-template-columns:1.12fr .88fr;gap:44px;align-items:center}}
.hero-img{position:relative;justify-self:center;max-width:320px;width:100%}
@media(min-width:900px){.hero-img{max-width:410px}}
.hero-img::before{content:"";position:absolute;inset:4% 0 6%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 66%);filter:blur(26px)}
.hero-img::after{content:"";position:absolute;left:11%;right:11%;bottom:14px;height:22px;border-radius:50%;background:radial-gradient(ellipse,rgba(16,24,40,.24),transparent 72%)}
.hero-img img{position:relative;z-index:1;filter:drop-shadow(0 28px 44px rgba(16,24,40,.16))}

/* Rider photograph — pre-cut with transparency, slightly taller than wide.
   Sized so the full frame sits within the hero without overpowering the
   headline: the type column stays the dominant element, the photo supports it. */
/* Height-capped, not width-capped. The photo is taller than it is wide, so
   sizing by width let it run 575px tall and dominate the fold. Capping height
   keeps the hero compact; width follows the 1126:1200 ratio automatically. */
.hero-img.wide{max-width:290px}
@media(min-width:900px){.hero-img.wide{max-width:345px}}
@media(min-width:1200px){.hero-img.wide{max-width:390px}}
.hero-img.wide img{max-height:420px;width:auto;margin:0 auto}
.hero-img.wide::before{content:"";position:absolute;inset:6% 4% 10%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.75),transparent 68%);filter:blur(30px);display:block}
.hero-img.wide::after{content:"";position:absolute;left:14%;right:14%;bottom:4%;height:20px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(16,24,40,.18),transparent 72%);display:block}
.hero-img.wide img{filter:drop-shadow(0 22px 38px rgba(16,24,40,.14))}
.hero-stats{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px;padding:22px 0 28px;border-top:1px solid var(--line)}
@media(min-width:600px){.hero-stats{grid-template-columns:repeat(4,1fr)}}
.stat-n{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.6rem,3.3vw,2.2rem);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.stat-n .u{font-size:.5em;color:var(--faint)}
.stat-l{font-family:"JetBrains Mono",monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--faint);margin-top:5px;line-height:1.45}

/* Page header */
.phead{position:relative;padding:40px 0 28px;background:none}
@media(min-width:768px){.phead{padding:72px 0 44px}}
.phead .wrap{position:relative}
/* margin-block, not margin: a shorthand here would reset the auto side
   margins that .center relies on, and silently un-centre the heading. */
.phead h1{font-size:clamp(2.05rem,4.8vw,3.5rem);max-width:19ch;margin-block:14px 16px}

/* Plain page header — no bloom. Used where the section immediately below is
   already an accented surface, so the page doesn't stack two accents. */
.phead.plain{background:none}

/* ---------- Marquee ---------- */
.marq{padding:24px 0;overflow:hidden;background:none}
.marq-h{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-align:center;margin-bottom:20px}
.marq-track{display:flex;width:max-content;animation:marq 38s linear infinite;will-change:transform}
.marq:hover .marq-track{animation-play-state:paused}
.marq-set{display:flex;align-items:center;gap:52px;padding-right:52px}
@media(min-width:768px){.marq-set{gap:70px;padding-right:70px}}
/* #6C7482 clears 4.5:1 on --paper. A lighter grey looks more "logo strip" but
   fails AA at this size, and these are real words, not vector logos. */
.marq-set span{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:19px;color:#6C7482;letter-spacing:-.02em;white-space:nowrap;transition:color .3s var(--ease)}
@media(min-width:768px){.marq-set span{font-size:23px}}
.marq-set span:hover{color:var(--muted)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq-mask{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* ---------- Grid + cards ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr}.g4{grid-template-columns:1fr}
@media(min-width:640px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:760px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.g4{grid-template-columns:repeat(4,1fr)}}

.card{border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--e1);transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.card:hover{box-shadow:var(--e2);transform:translateY(-3px);border-color:var(--line-2)}
.card h3{font-size:19px;margin-bottom:9px}
.card p{font-size:15px;color:var(--faint);line-height:1.56}
.ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;flex:none}
.ico-v{background:var(--volt-wash);color:var(--volt-deep)}
.ico-b{background:var(--ion-wash);color:var(--ion-deep)}
.ico svg{width:21px;height:21px}

/* Doors */
.door{position:relative;border:1px solid var(--line);border-radius:20px;padding:30px 24px 26px;box-shadow:var(--e1);transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease);overflow:hidden;display:flex;flex-direction:column}
.door:hover{box-shadow:var(--e3);transform:translateY(-5px);border-color:var(--line-2)}
.door::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--ion)}
.door.g::before{background:var(--volt)}
.door .num{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--faint);letter-spacing:.14em}
.door h3{font-size:22px;margin:12px 0 10px}
.door>p{font-size:15px;color:var(--faint);line-height:1.55}
.door .btn{margin-top:auto;align-self:flex-start}

.ticks{list-style:none;display:grid;gap:10px;font-size:14.5px;color:var(--muted);margin:18px 0 22px}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.tick{flex:none;width:16px;height:16px;margin-top:4px}

/* ---------- Why ride (split feature) ---------- */
.split{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:940px){.split{grid-template-columns:1fr 1fr;gap:64px}}
.feat-list{list-style:none;display:grid;gap:4px;margin-top:30px}
.feat-list li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.feat-list li:last-child{border-bottom:0}
.feat-ico{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--volt-wash);color:var(--volt-deep);transition:transform .3s var(--ease),background .3s var(--ease)}
.feat-list li:hover .feat-ico{transform:scale(1.08);background:var(--volt)}
.feat-ico svg{width:21px;height:21px}
.feat-list h3{font-size:17px;margin-bottom:4px}
.feat-list p{font-size:14.5px;color:var(--faint);line-height:1.55}
.showcase{position:relative;border-radius:24px;border:1px solid var(--line);overflow:hidden;min-height:340px;display:grid;place-items:center;padding:34px 24px;
  background:
    radial-gradient(circle at 50% 34%, rgba(180,255,57,.16), transparent 62%),
    linear-gradient(165deg,#fff,var(--mist));
  box-shadow:var(--e1);
}
.showcase img{position:relative;z-index:1;max-width:250px;filter:drop-shadow(0 22px 34px rgba(16,24,40,.16))}

/* Video showcase — the clip carries its own studio background, so it sits as a
   framed panel rather than a floating cut-out. Portrait source, height-capped
   so it can't run away with the section. */
.showcase.vframe{padding:22px;min-height:0}
/* Portrait source. Constrain by HEIGHT and let width follow, otherwise a
   width:100% + max-height combination crops the top and bottom off the scooter. */
.veh-video{position:relative;z-index:1;display:block;
  height:auto;max-height:400px;width:auto;max-width:100%;margin:0 auto;
  border-radius:16px;background:var(--mist);box-shadow:var(--e2)}
@media(min-width:940px){.veh-video{max-height:440px}}
.badge{position:absolute;z-index:3;background:rgba(255,255,255,.82);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:14px;padding:11px 15px;box-shadow:var(--e2)}
.badge .bv{font-family:"Space Grotesk",sans-serif;font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.badge .bl{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.badge.b1{top:22px;right:16px;animation:float 5s ease-in-out infinite}
.badge.b2{bottom:56px;left:14px;animation:float 5s ease-in-out .9s infinite}
.badge.b3{bottom:18px;right:26px;animation:float 5s ease-in-out 1.8s infinite}
@media(min-width:600px){.badge.b1{right:30px}.badge.b2{left:26px}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chip{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 14px;box-shadow:var(--e1)}
.chip b{color:var(--volt-deep);font-weight:600}


/* ==========================================================================
   BENEFIT GRID — "Why ride with FiEV"
   Four numbered cards, each with a coloured header and a small data visual.
   Green cards = money/energy, blue cards = logistics/structure, matching the
   surface system. Every visual is CSS+SVG, so there are no images to load.
   ========================================================================== */
.bgrid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:48px}
@media(min-width:860px){.bgrid{grid-template-columns:1fr 1fr;gap:20px}}
.bcard{border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--e1);transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease);
  display:flex;flex-direction:column}
.bcard:hover{box-shadow:var(--e3);transform:translateY(-4px);border-color:var(--line-2)}
.bhead{display:flex;align-items:center;gap:13px;padding:16px 20px;border-bottom:1px solid var(--line)}
.bcard.g .bhead{background:linear-gradient(100deg,#F7FCEC,#FCFEF8)}
.bcard.b .bhead{background:linear-gradient(100deg,#F4F7FE,#FAFCFF)}
.bnum{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;letter-spacing:-.02em}
.bcard.g .bnum{background:var(--volt);color:var(--ink)}
.bcard.b .bnum{background:var(--ion-deep);color:#fff}
.bico{flex:none;width:26px;height:26px}
.bcard.g .bico{color:var(--volt-deep)}
.bcard.b .bico{color:var(--ion-deep)}
.bico svg{width:100%;height:100%}
.bhead h3{font-size:19px;letter-spacing:-.02em;margin:0}
.bbody{padding:20px;display:flex;flex-direction:column;gap:16px;flex:1}
.bbody>p{font-size:15px;color:var(--muted);line-height:1.55;margin:0}
.bnote{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin-top:auto;padding-top:4px}
.bcard.g .bnote strong{color:var(--volt-deep)}
.bcard.b .bnote strong{color:var(--ion-deep)}

/* --- viz 1: cost-per-km comparison bars --- */
.viz{border:1px solid var(--line);border-radius:14px;padding:16px}
.vrow{display:flex;align-items:center;gap:12px}
.vrow+.vrow{margin-top:12px}
.vlab{flex:none;width:74px;font-size:12px;color:var(--muted);font-weight:500}
.vtrack{flex:1;height:22px;border-radius:6px;background:#E8EBEF;overflow:hidden}
.vfill{height:100%;border-radius:6px;width:var(--w);transition:width 1.1s var(--ease) .2s}
.js .vfill{width:0;transition:width 1.1s var(--ease) .2s}
.reveal.in .vfill{width:var(--w)}
.vfill.petrol{background:repeating-linear-gradient(135deg,#C9CED6,#C9CED6 5px,#DDE1E6 5px,#DDE1E6 10px)}
.vfill.volt{background:linear-gradient(90deg,var(--volt-deep),var(--volt))}
.vval{flex:none;width:62px;text-align:right;font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--ink)}

/* --- viz 2: battery swap flow --- */
.vflow{display:flex;align-items:center;justify-content:space-between;gap:6px}
.vstep{flex:1;text-align:center}
.vstep .vs-ico{width:34px;height:34px;margin:0 auto 7px;color:var(--ion-deep)}
.vstep .vs-ico svg{width:100%;height:100%}
.vstep b{display:block;font-size:12px;font-weight:600;color:var(--ink);line-height:1.3}
.vstep span{display:block;font-size:11px;color:var(--faint);margin-top:2px}
.varrow{flex:none;width:22px;color:var(--line-2)}
.varrow svg{width:100%;height:100%}

/* --- viz 3: guarantee shields --- */
.vshields{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.vsh{text-align:center;border:1px solid var(--line);border-radius:12px;padding:13px 7px;transition:border-color .3s var(--ease),background .3s var(--ease)}
.vsh:hover{border-color:#CFE59B;background:var(--volt-wash)}
.vsh .vsh-i{width:26px;height:26px;margin:0 auto 7px;color:var(--volt-deep)}
.vsh .vsh-i svg{width:100%;height:100%}
.vsh b{display:block;font-size:11px;font-weight:600;color:var(--ink);line-height:1.35}

/* --- viz 4: city rollout --- */
.vmap{padding:2px}
.vpins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vpin{text-align:center;padding:4px 2px}
.vpin .vp-dot{width:13px;height:13px;border-radius:50%;margin:0 auto 9px;background:#fff;
  border:2px solid var(--line-2);transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.vpin.live .vp-dot{border-color:var(--volt-deep);background:var(--volt);box-shadow:0 0 0 4px rgba(180,255,57,.30)}
.vpin b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.vpin span{display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-top:3px}
.vpin.live b{color:var(--volt-deep)}

/* --- bottom guarantee bar --- */
.bfoot{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px;
  border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:var(--e1)}
@media(min-width:760px){.bfoot{grid-template-columns:repeat(3,1fr);gap:8px;padding:20px 24px}}
.bfoot div{display:flex;align-items:center;gap:11px;justify-content:flex-start}
@media(min-width:760px){.bfoot div{justify-content:center}}
.bfoot .bf-i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--volt);color:var(--ink)}
.bfoot .bf-i svg{width:14px;height:14px}
.bfoot b{font-family:"Space Grotesk",sans-serif;font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}

/* ---------- Advantage grid ---------- */
.adv{position:relative;overflow:hidden}
.adv::before{content:"ADVANTAGE";position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(5rem,17vw,15rem);letter-spacing:-.05em;color:rgba(10,11,13,.035);pointer-events:none;white-space:nowrap;line-height:1}
.adv .wrap{position:relative;z-index:1}
.adv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:44px}
@media(min-width:700px){.adv-grid{grid-template-columns:repeat(4,1fr);gap:16px}}
.adv-item{text-align:center;padding:26px 14px;border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.adv-item:hover{border-color:#CFE59B;transform:translateY(-4px);box-shadow:var(--e2)}
.adv-item .ai{width:46px;height:46px;margin:0 auto 14px;color:var(--volt-deep);transition:transform .35s var(--ease)}
.adv-item:hover .ai{transform:scale(1.1) rotate(-4deg)}
.adv-item .ai svg{width:100%;height:100%}
.adv-item h3{font-size:15px;line-height:1.32;margin-bottom:5px}
.adv-item p{font-size:12.5px;color:var(--faint);line-height:1.45}

/* ---------- Steps: animated timeline ---------- */
.tl{position:relative;margin-top:56px}
.tl-line{position:absolute;top:26px;left:0;right:0;height:1px;background:var(--line);display:none}
@media(min-width:820px){.tl-line{display:block}}
.tl-line i{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--volt-deep),var(--volt));transition:right 1.6s var(--ease)}
.tl.in .tl-line i{right:0}
.tl-items{display:grid;grid-template-columns:1fr;gap:34px;position:relative}
@media(min-width:820px){.tl-items{grid-template-columns:repeat(var(--cols,3),1fr);gap:26px;text-align:center}}
.tl-item{position:relative;padding-left:66px}
@media(min-width:820px){.tl-item{padding-left:0}}
.tl-num{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:#fff;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--volt-deep);transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease),background .4s var(--ease)}
@media(min-width:820px){.tl-num{position:relative;margin:0 auto 22px}}
.tl.in .tl-item .tl-num{border-color:#CFE59B;box-shadow:0 0 0 5px rgba(180,255,57,.16)}
.tl-item:hover .tl-num{transform:scale(1.08);background:var(--volt);border-color:var(--volt);color:var(--ink);box-shadow:0 8px 22px rgba(63,107,0,.22)}
.tl-item::before{content:"";position:absolute;left:26px;top:52px;bottom:-34px;width:1px;background:var(--line)}
.tl-item:last-child::before{display:none}
@media(min-width:820px){.tl-item::before{display:none}}
.tl-item h3{font-size:18px;margin-bottom:8px}
.tl-item p{font-size:14.5px;color:var(--faint);line-height:1.58;max-width:34ch}
@media(min-width:820px){.tl-item p{margin:0 auto}}
.js .tl-item{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.tl.in .tl-item{opacity:1;transform:none}
.tl.in .tl-item:nth-child(1){transition-delay:.10s}
.tl.in .tl-item:nth-child(2){transition-delay:.26s}
.tl.in .tl-item:nth-child(3){transition-delay:.42s}
.tl.in .tl-item:nth-child(4){transition-delay:.58s}

/* A 5-step timeline gives each step ~219px at 1280px, which is too narrow for
   the body copy. Below 1150px a five-step run falls back to the vertical
   layout rather than squeezing five columns onto a laptop. */
@media(min-width:820px) and (max-width:1149px){
  .tl-5 .tl-items{grid-template-columns:1fr;gap:34px;text-align:left}
  .tl-5 .tl-item{padding-left:66px}
  .tl-5 .tl-num{position:absolute;left:0;top:0;margin:0}
  .tl-5 .tl-item::before{display:block}
  .tl-5 .tl-line{display:none}
  .tl-5 .tl-item p{margin:0;max-width:60ch}
}

/* ---------- Vehicle section ---------- */
.veh{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:940px){.veh{grid-template-columns:.95fr 1.05fr;gap:56px}}
.specs{width:100%;border-collapse:collapse;font-size:15px}
.specs tr{border-bottom:1px solid var(--line)}
.specs tr:hover{background:rgba(16,24,40,.025)}
.specs td{padding:13px 12px 13px 0;color:var(--muted)}
.specs td:first-child{color:var(--ink);font-weight:500;width:48%}
.specs td:last-child{font-family:"JetBrains Mono",monospace;font-size:13.5px;color:var(--volt-deep);text-align:right;padding-right:0}

/* ---------- Plans ---------- */
/* Plan cards are the SAME object as .card — same radius, border, shadow and
   hover. They previously had a green wash and a green border on the featured
   one, which made the pricing block look like it came from another site. */
.plans{display:grid;grid-template-columns:1fr;gap:20px;max-width:860px;
  margin-block:36px 0;margin-inline:auto}
@media(min-width:740px){.plans{grid-template-columns:repeat(2,1fr)}}
.plan{border:1px solid var(--line);border-radius:20px;padding:28px;
  box-shadow:var(--e1);transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
  display:flex;flex-direction:column;position:relative}
.plan:hover{box-shadow:var(--e2);transform:translateY(-3px);border-color:var(--line-2)}
.plan.feat{border-color:var(--line-2);box-shadow:var(--e2)}
.plan.feat:hover{box-shadow:var(--e3)}
/* Badge text comes from data-badge, so a plan's label can change without a
   CSS edit — the old hard-coded "Best value" outlived the pricing it described. */
.plan[data-badge]::after{content:attr(data-badge);position:absolute;top:-11px;right:22px;
  background:var(--mist);color:var(--muted);border:1px solid var(--line-2);
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;padding:4px 11px;border-radius:999px;font-weight:500}
.plan.feat[data-badge]::after{background:var(--volt);color:var(--ink);border-color:transparent}
.plan .pn{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.plan .pp{font-family:"Space Grotesk",sans-serif;font-size:42px;font-weight:600;letter-spacing:-.03em;margin:10px 0 2px;color:var(--ink)}
.plan .pd{font-size:14px;color:var(--faint);margin-bottom:20px}
.plan .btn{margin-top:auto}

/* ---------- Balanced page rhythm ----------
   Constrained blocks used to sit hard against the left edge of a 1280px wrap,
   leaving a large void on the other side. They are centred now, so the page
   reads as a column rather than as content pushed to one side. */
.wrap.narrow{max-width:900px}
.acc{margin-left:auto;margin-right:auto}
.center .flag,.center .note{margin-left:auto;margin-right:auto}

/* ---------- Testimonials ---------- */
.tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;margin-top:26px;box-shadow:var(--e1)}
.tab{padding:9px 20px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--faint);background:none;border:0;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.tab[aria-selected="true"]{background:var(--volt);color:var(--ink)}
.tpanel{display:none;margin-top:36px}
.tpanel.on{display:block;animation:fadeup .5s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tgrid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:680px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.tgrid{grid-template-columns:repeat(3,1fr)}}
.quote{border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--e1);transition:box-shadow .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);display:flex;flex-direction:column}
.quote:hover{box-shadow:var(--e2);border-color:var(--line-2);transform:translateY(-3px)}
.quote .qm{color:var(--volt-deep);font-family:"Space Grotesk",sans-serif;font-size:34px;line-height:.8;opacity:.4;margin-bottom:12px}
.quote p{font-size:15px;color:var(--muted);line-height:1.62;flex:1}
.qwho{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.qav{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;color:var(--ink);background:var(--volt);flex:none}
.qav.i{background:var(--ion-wash);color:var(--ion-deep)}
.qn{font-weight:600;font-size:14.5px;color:var(--ink)}
.qr{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-top:2px}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:1fr;gap:22px;margin-top:48px;max-width:820px;margin-left:auto;margin-right:auto}
@media(min-width:600px){.team{grid-template-columns:repeat(2,1fr)}}
.member{text-align:center;border:1px solid var(--line);border-radius:22px;padding:34px 24px 28px;box-shadow:var(--e1);transition:box-shadow .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.member:hover{box-shadow:var(--e3);border-color:#CFE59B;transform:translateY(-5px)}
.mphoto{width:132px;height:132px;margin:0 auto 20px;border-radius:50%;position:relative;display:grid;place-items:center;background:var(--mist);border:1px solid var(--line);overflow:hidden}
.mphoto::before{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,var(--volt),var(--ion),var(--volt));opacity:0;transition:opacity .4s var(--ease);z-index:0}
.member:hover .mphoto::before{opacity:1;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mphoto span{position:relative;z-index:2;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:50%;background:var(--mist);display:grid;place-items:center;font-family:"Space Grotesk",sans-serif;font-size:34px;font-weight:600;color:var(--volt-deep)}
.mphoto img{position:relative;z-index:2;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:50%;object-fit:cover}
.member .mrole{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.member h3{font-size:21px;margin-bottom:10px}
.member .mbio{font-size:14.5px;color:var(--faint);line-height:1.55}
.mlink{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);margin-top:18px;color:var(--faint);transition:background .25s,border-color .25s,color .25s}
.mlink:hover{background:var(--volt);border-color:var(--volt);color:var(--ink)}
.mlink svg{width:15px;height:15px;fill:currentColor}

/* ==========================================================================
   DEEP BLOCK — Fleet Partner economics
   Was a full ink inversion, which cut the scroll in half. It is now a deeper
   blue tint that FADES TO TRANSPARENT at both ends, so it reads as a weightier
   stretch of the same page rather than a different page. No edge top or bottom.
   ========================================================================== */
.deep{position:relative;
  background:linear-gradient(180deg,
    rgba(41,81,200,0)    0%,
    rgba(41,81,200,.018) 13%,
    rgba(41,81,200,.032) 48%,
    rgba(41,81,200,.018) 87%,
    rgba(41,81,200,0)  100%);
}
.deep .wrap{position:relative;z-index:1}


/* ==========================================================================
   WHO DOES WHAT — two columns joined by an animated flow
   Five obligations each side, so the columns are the same height and the
   curves meet the middle of every card. The partner's fifth entry is "Relax"
   — that is not filler, it is the product.

   The centre is an SVG: five curves converge from the left into a node, five
   fan out to the right. Blue pulses travel inward (the partner's capital),
   green pulses travel outward (FiEV's work). Nothing crosses to a specific
   card, because no such pairing exists.
   ========================================================================== */
.wdw{margin-top:38px;text-align:left}
.wdw-heads{display:none}
@media(min-width:900px){
  .wdw-heads{display:grid;grid-template-columns:1fr 132px 1fr;align-items:end;margin-bottom:22px}
  .wdw-heads b{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.25rem,2vw,1.6rem);
    font-weight:600;letter-spacing:-.025em;text-align:center;position:relative;padding-bottom:12px}
  /* short rule beneath each heading, in that column's accent */
  .wdw-heads b::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:42px;height:3px;border-radius:2px}
  .wdw-heads .h-you{color:var(--ion-deep)}
  .wdw-heads .h-you::after{background:var(--ion-deep)}
  .wdw-heads .h-fiev{color:var(--volt-deep)}
  .wdw-heads .h-fiev::after{background:var(--volt-deep)}
}
.wdw-body{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.wdw-body{grid-template-columns:1fr 132px 1fr;gap:0;align-items:stretch}}
.wdw-col{display:grid;gap:14px;align-content:start}

/* Each side carries its own tint. The gradient runs WHITE -> tint, top to
   bottom: the top edge stays brighter than the page (so the card still reads
   as raised) while the colour lives in the lower half. Tinting from the top
   instead would make the card look recessed — it would be darker than the
   page it sits on. */
.wdw-item{display:flex;align-items:center;gap:14px;padding:14px 17px;min-height:78px;
  border-radius:16px;border:1px solid var(--line);
  box-shadow:var(--card-sheen),var(--e2);font-size:15px;color:var(--muted);line-height:1.4;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.wdw-you  .wdw-item{background:linear-gradient(180deg,#FFFFFF 0%,#EDF3FE 100%);border-color:#DDE7FA}
.wdw-fiev .wdw-item{background:linear-gradient(180deg,#FFFFFF 0%,#F3FBE2 100%);border-color:#E2F0C6}
.wdw-item:hover{box-shadow:var(--card-sheen),var(--e3);transform:translateY(-3px)}
.wdw-you  .wdw-item:hover{border-color:#BFD1F6}
.wdw-fiev .wdw-item:hover{border-color:#CDE4A2}
.wdw-i{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.wdw-i svg{width:20px;height:20px}
.wdw-you  .wdw-i{background:#E0E9FC;color:var(--ion-deep)}
.wdw-fiev .wdw-i{background:#E7F7CB;color:var(--volt-deep)}
@media(min-width:900px){
  .wdw-you{margin-right:16px}
  .wdw-fiev{margin-left:16px}
  .wdw-you .wdw-item{flex-direction:row-reverse;text-align:right}
}
/* the punchline row */
/* The punchline sits in its own column's blue so the side stays coherent —
   it just runs deeper, and keeps a volt icon chip so it still reads as the
   payoff rather than a fifth obligation. */
.wdw-you .wdw-item.rest{background:linear-gradient(180deg,#FFFFFF 0%,#E2ECFD 100%);border-color:#C9D9F8}
.wdw-item.rest .wdw-i{background:var(--volt);color:var(--ink)}
.wdw-item.rest b{display:block;font-family:"Space Grotesk",sans-serif;font-size:17px;
  font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-bottom:2px}
.wdw-item.rest span{color:var(--volt-deep)}

/* ---- the flow ---- */
.wdw-flow{display:none}
@media(min-width:900px){.wdw-flow{display:block;position:relative}}
.wdw-flow svg{width:100%;height:100%;display:block}
.flow-base{fill:none;stroke:var(--line-2);stroke-width:1;opacity:.75;vector-effect:non-scaling-stroke}
.flow-pulse{fill:none;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:16 210;animation:flowpulse 3.4s linear infinite}
.flow-in .flow-pulse{stroke:var(--ion)}
.flow-out .flow-pulse{stroke:var(--volt-deep)}
@keyframes flowpulse{from{stroke-dashoffset:226}to{stroke-dashoffset:0}}
.flow-node{fill:var(--canvas);stroke:var(--line-2);stroke-width:1.4;vector-effect:non-scaling-stroke}
.flow-node-in{fill:none;stroke:var(--volt-deep);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.55}
.flow-label{font-family:"JetBrains Mono",monospace;font-size:7px;letter-spacing:.14em;
  fill:var(--faint);text-transform:uppercase}

/* mobile divider between the two stacks */
.wdw-split{display:flex;align-items:center;gap:12px;margin:4px 0 2px}
@media(min-width:900px){.wdw-split{display:none}}
.wdw-split span{flex:1;height:1px;background:var(--line)}
.wdw-split b{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--volt-deep)}
.wdw-tag{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;margin-right:8px}
.wdw-you  .wdw-tag{color:var(--ion-deep)}
.wdw-fiev .wdw-tag{color:var(--volt-deep)}
@media(min-width:900px){.wdw-tag{display:none}}

/* cards rise in on scroll, staggered outward from the middle */
.js .wdw-item{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),
  box-shadow .3s var(--ease),border-color .3s var(--ease)}
.reveal.in .wdw-item{opacity:1;transform:none}
.reveal.in .wdw-item:nth-child(1){transition-delay:.05s}
.reveal.in .wdw-item:nth-child(2){transition-delay:.13s}
.reveal.in .wdw-item:nth-child(3){transition-delay:.21s}
.reveal.in .wdw-item:nth-child(4){transition-delay:.29s}
.reveal.in .wdw-item:nth-child(5){transition-delay:.37s}
.js .wdw-flow{opacity:0;transition:opacity .8s var(--ease) .35s}
.reveal.in .wdw-flow{opacity:1}

@media (prefers-reduced-motion: reduce){
  .flow-pulse{animation:none;stroke-dasharray:none;opacity:.30}
  .wdw-item{opacity:1;transform:none}
  .wdw-flow{opacity:1}
}

/* ==========================================================================
   SCROLL-SCRUBBED SHOWROOM
   A tall section with a sticky viewport inside it. Scroll position drives the
   video's currentTime, so the scooter turns as you move down the page, and
   each caption takes over at its own point in the scrub.

   Desktop only. Seeking a video during scroll is unreliable on mobile Safari
   and expensive on low-end Android, so small screens get a plain autoplay
   loop instead — same footage, no scrubbing.
   ========================================================================== */
.scrub{position:relative}
@media(min-width:900px){.scrub{height:320vh}}
.scrub-stick{position:relative;padding:44px 0}
@media(min-width:900px){
  .scrub-stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding:0}
}
.scrub-in{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;width:100%}
@media(min-width:900px){.scrub-in{grid-template-columns:1fr 1fr;gap:56px}}

.scrub-media{position:relative;justify-self:center;width:100%;max-width:300px;
  border-radius:22px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--card-sheen),var(--e3);background:var(--mist)}
@media(min-width:900px){.scrub-media{max-width:340px}}
.scrub-media video{width:100%;height:auto;display:block}

.scrub-copy h2{margin-bottom:22px}
.scrub-steps{list-style:none;display:grid;gap:2px;counter-reset:sc}
.scrub-step{display:flex;gap:15px;padding:15px 0;border-top:1px solid var(--line);
  opacity:.32;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.scrub-step:last-child{border-bottom:1px solid var(--line)}
.scrub-step.on{opacity:1}
.scrub-step b{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:500;
  background:var(--mist);color:var(--faint);transition:background .45s var(--ease),color .45s var(--ease)}
.scrub-step.on b{background:var(--volt);color:var(--ink)}
.scrub-step h3{font-size:17px;margin-bottom:3px}
.scrub-step p{font-size:14.5px;color:var(--faint);line-height:1.5}
.scrub-step.on p{color:var(--muted)}

/* progress rail beside the captions */
.scrub-rail{display:none}
@media(min-width:900px){
  .scrub-rail{display:block;position:absolute;left:-22px;top:0;bottom:0;width:2px;
    background:var(--line);border-radius:2px}
  .scrub-rail i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
    background:linear-gradient(180deg,var(--ion),var(--volt-deep))}
  .scrub-copy{position:relative}
}

@media (prefers-reduced-motion: reduce){
  .scrub{height:auto}
  .scrub-stick{position:relative;height:auto}
  .scrub-step{opacity:1}
}

/* ==========================================================================
   PLATFORM STACK — the Franchise Partner's role
   Not a left/right split like the Fleet page. Franchising is a LAYER
   relationship: the franchisee runs a hub that stands on infrastructure they
   did not have to build. So it is drawn as two slabs — your hub raised on top,
   the FiEV platform bearing it underneath, joined by load-bearing legs.

   Green above (the active, on-the-ground layer), blue below (structure), the
   same reading the rest of the site uses.
   ========================================================================== */
.stack{position:relative;margin-top:44px;max-width:960px;margin-inline:auto;text-align:left}

.slab{position:relative;border-radius:22px;border:1px solid var(--line);padding:24px}
.slab-head{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.slab-head i{width:10px;height:10px;border-radius:50%;flex:none}
.slab-head b{font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:600;letter-spacing:-.02em}
.slab-head span{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-left:auto}

/* top slab — your hub. Inset and lifted so it reads as resting on the base. */
.slab-top{background:linear-gradient(180deg,#FFFFFF 0%,#F3FBE2 100%);border-color:#E2F0C6;
  box-shadow:var(--card-sheen),var(--e3);z-index:2}
@media(min-width:760px){.slab-top{margin-inline:38px}}
.slab-top .slab-head i{background:var(--volt-deep)}
.slab-top .slab-head b{color:var(--volt-deep)}

/* base slab — the platform. Wider and flatter: it is the foundation. */
.slab-base{background:linear-gradient(180deg,#FFFFFF 0%,#EDF3FE 100%);border-color:#DDE7FA;
  box-shadow:var(--card-sheen),var(--e1);z-index:1}
.slab-base .slab-head i{background:var(--ion-deep)}
.slab-base .slab-head b{color:var(--ion-deep)}

/* load-bearing legs between the two slabs */
/* flex, not a fixed 5-column grid: the leg count can change without the extras
   wrapping onto a second row, which is what a grid was doing on mobile. */
.stack-legs{position:relative;height:44px;display:flex;justify-content:space-between;
  align-items:stretch;padding:0 52px;z-index:0}
@media(max-width:759px){
  .stack-legs{height:34px;padding:0 26px}
  /* thin them out rather than crowd six into a phone width */
  .stack-legs i:nth-child(2),.stack-legs i:nth-child(5){display:none}
}
.stack-legs i{position:relative;flex:none;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--volt-deep),var(--ion-deep));
  transform-origin:top;transition:transform .55s var(--ease)}
.js .stack-legs i{transform:scaleY(0)}
.reveal.in .stack-legs i{transform:scaleY(1)}
.reveal.in .stack-legs i:nth-child(1){transition-delay:.22s}
.reveal.in .stack-legs i:nth-child(2){transition-delay:.28s}
.reveal.in .stack-legs i:nth-child(3){transition-delay:.34s}
.reveal.in .stack-legs i:nth-child(4){transition-delay:.40s}
.reveal.in .stack-legs i:nth-child(5){transition-delay:.46s}
.reveal.in .stack-legs i:nth-child(6){transition-delay:.52s}
.stack-legs i::after{content:"";position:absolute;left:50%;bottom:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--ion-deep);transform:translateX(-50%)}

/* the top slab settles down onto the base on scroll */
.js .slab-top{transform:translateY(-16px);opacity:0;
  transition:transform .7s var(--ease),opacity .5s var(--ease)}
.reveal.in .slab-top{transform:translateY(0);opacity:1}
.js .slab-base{opacity:0;transition:opacity .5s var(--ease) .12s}
.reveal.in .slab-base{opacity:1}

/* items */
.slab-grid{display:grid;grid-template-columns:1fr;gap:9px}
/* 9 items divide evenly into the 3-column desktop grid. At the 2-column
   breakpoint the ninth would sit alone, so it spans the full width instead. */
@media(min-width:560px) and (max-width:899px){
  .slab-grid{grid-template-columns:repeat(2,1fr)}
  .slab-grid>:last-child{grid-column:1/-1}
}
@media(min-width:900px){
  .slab-grid{grid-template-columns:repeat(3,1fr)}
  /* 4 and 8 both divide evenly into four columns — one full row and two full
     rows — so neither slab is left with a ragged last line. */
  .slab-grid.c4{grid-template-columns:repeat(4,1fr)}
}
.slab-item{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.72);
  font-size:13.5px;color:var(--muted);line-height:1.35;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.slab-item:hover{transform:translateY(-2px);background:#fff}
.slab-top .slab-item:hover{border-color:#CDE4A2}
.slab-base .slab-item:hover{border-color:#BFD1F6}
.slab-item svg{flex:none;width:16px;height:16px}
.slab-top .slab-item svg{color:var(--volt-deep)}
.slab-base .slab-item svg{color:var(--ion-deep)}

/* the one-line summary under the whole thing */
.stack-note{margin-top:22px;text-align:center;font-size:15px;color:var(--muted)}
.stack-note b{color:var(--ink);font-weight:600}

@media (prefers-reduced-motion: reduce){
  .slab-top,.slab-base{opacity:1;transform:none}
  .stack-legs i{transform:scaleY(1)}
}

/* ==========================================================================
   SUBSCRIPTION CYCLE — the rhythm a hub actually runs on
   FiEV is weekly and monthly subscriptions, not daily rental: the vehicle
   leaves with the rider and stays there for the whole term. So a hub's
   calendar is driven by the subscription cycle, not by a working day.

   The bar is drawn to scale. On the monthly plan the vehicle is out for 25 of
   28 days, and that proportion is the argument — the hub's work sits at the
   two ends while the middle is the asset earning.
   ========================================================================== */
.cycle{margin-top:36px;text-align:left}
.cycle-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;
  background:var(--card-bg);box-shadow:var(--card-sheen);margin-bottom:30px}
.cycle-switch button{padding:9px 20px;border:0;border-radius:10px;cursor:pointer;background:none;
  font-size:14.5px;font-weight:600;color:var(--faint);transition:background .25s var(--ease),color .25s var(--ease)}
.cycle-switch button[aria-pressed="true"]{background:var(--volt);color:var(--ink)}

.cycle-track{position:relative;height:64px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(180deg,#FFFFFF,#F4F7FC)}
.cyc-deployed{position:absolute;top:0;bottom:0;left:0;width:89.3%;
  background:linear-gradient(180deg,#F7FCEE,#E9F7CF);border-right:1px solid #D6E9B0;
  transition:width .9s var(--ease)}
.cyc-renew{position:absolute;top:0;bottom:0;right:0;left:89.3%;
  background:linear-gradient(180deg,#F4F8FF,#E4EDFD);transition:left .9s var(--ease)}
.cyc-label{position:absolute;top:50%;transform:translateY(-50%);font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;z-index:3}
.cyc-label.a{left:16px;color:var(--volt-deep)}
.cyc-label.b{right:16px;color:var(--ion-deep)}
/* a pulse running the deployed stretch — the asset out earning */
.cyc-pulse{position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(180,255,57,.55),transparent);
  animation:cycrun 4.5s linear infinite}
@keyframes cycrun{from{left:-70px}to{left:100%}}

.cycle-scale{display:flex;justify-content:space-between;margin-top:9px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--faint)}
.cycle-loop{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13.5px;color:var(--muted)}
.cycle-loop svg{width:18px;height:18px;color:var(--volt-deep);flex:none}

.cycle-steps{display:grid;grid-template-columns:1fr;gap:14px;margin-top:30px}
@media(min-width:700px){.cycle-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1050px){.cycle-steps{grid-template-columns:repeat(4,1fr)}}
.cyc-step{padding:20px;border-radius:16px;border:1px solid var(--line);background:var(--card-bg);
  box-shadow:var(--card-sheen),var(--e1);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.cyc-step:hover{box-shadow:var(--card-sheen),var(--e2);transform:translateY(-2px)}
.cyc-step .cs-when{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:9px}
.cyc-step.you .cs-when{color:var(--volt-deep)}
.cyc-step.auto .cs-when{color:var(--ion-deep)}
.cyc-step h3{font-size:16.5px;margin-bottom:6px}
.cyc-step p{font-size:14px;color:var(--faint);line-height:1.5}
.cyc-step .cs-tag{display:inline-block;margin-top:12px;font-family:"JetBrains Mono",monospace;
  font-size:9px;letter-spacing:.13em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.cyc-step.you  .cs-tag{background:var(--volt-wash);color:var(--volt-deep)}
.cyc-step.auto .cs-tag{background:var(--ion-wash);color:var(--ion-deep)}

@media (prefers-reduced-motion: reduce){.cyc-pulse{animation:none;opacity:0}}

/* ==========================================================================
   DEMAND CURVE — "Scale with demand"
   The enterprise objection is not whether the vehicles are good, it is whether
   buying them is the right shape of commitment. Delivery demand is seasonal;
   a bought fleet is not. This chart draws the gap between the two.

   The curve is illustrative seasonality, labelled as such. Every figure quoted
   beside it is derived from that same curve, so the chart and the numbers can
   never disagree.
   ========================================================================== */
.fx{margin-top:38px}
.fx-chart{position:relative;border-radius:20px;border:1px solid var(--line);
  background:var(--card-bg);box-shadow:var(--card-sheen),var(--e2);padding:22px 18px 14px}
.fx-chart svg{width:100%;height:auto;display:block;overflow:visible}
.fx-grid{stroke:var(--line);stroke-width:1}
.fx-area{fill:url(#fxg)}
.fx-line{fill:none;stroke:var(--volt-deep);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.fx-idle{fill:url(#fxh);stroke:none}
.fx-peak{stroke:var(--ion-deep);stroke-width:2;stroke-dasharray:6 5;fill:none}
.fx-tick{font-family:"JetBrains Mono",monospace;font-size:10px;fill:var(--faint)}
.fx-note{font-family:"JetBrains Mono",monospace;font-size:10px;fill:var(--ion-deep);letter-spacing:.06em}
.fx-note-g{font-family:"JetBrains Mono",monospace;font-size:10px;fill:var(--volt-deep);letter-spacing:.06em}

/* wipe the whole plot in from the left */
.js .fx-plot{clip-path:inset(0 100% 0 0)}
.reveal.in .fx-plot{clip-path:inset(0 0 0 0);transition:clip-path 1.7s var(--ease) .1s}

.fx-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.fx-legend span{display:flex;align-items:center;gap:8px}
.fx-key{width:15px;height:3px;border-radius:2px;flex:none}
.fx-key.g{background:var(--volt-deep)}
.fx-key.b{background:var(--ion-deep)}
.fx-key.h{height:11px;width:15px;border-radius:3px;background:var(--ion-wash);
  border:1px solid #C6D4F6}

.fx-stats{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
@media(min-width:700px){.fx-stats{grid-template-columns:repeat(3,1fr)}}
.fx-stat{padding:20px;border-radius:16px;border:1px solid var(--line);background:var(--card-bg);
  box-shadow:var(--card-sheen),var(--e1);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.fx-stat:hover{box-shadow:var(--card-sheen),var(--e2);transform:translateY(-2px)}
.fx-stat b{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(2.2rem,4.6vw,3.2rem);
  font-weight:600;letter-spacing:-.03em;line-height:1;margin-bottom:9px}
.fx-stat.g b{color:var(--volt-deep)}
.fx-stat.b b{color:var(--ion-deep)}
.fx-stat p{font-size:14px;color:var(--faint);line-height:1.5}

@media (prefers-reduced-motion: reduce){
  .js .fx-plot{clip-path:none}
}

/* ==========================================================================
   BUSINESS PAGE COMPONENTS
   The page tells one story: problem -> new way -> platform -> services ->
   process -> trust -> results -> CTA. Each block below is one beat of it.
   ========================================================================== */

/* --- §2 the chaos: scattered concerns funnelling onto one team ------------ */
.chaos{margin-top:38px}
.chaos-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:820px;margin-inline:auto}
.chaos-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--card-bg);box-shadow:var(--card-sheen),var(--e1);
  font-size:14px;color:var(--muted);white-space:nowrap}
.chaos-chip svg{width:15px;height:15px;color:var(--ion-deep);flex:none}
.js .chaos-chip{opacity:0;transform:translateY(-10px) scale(.96)}
.reveal.in .chaos-chip{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chaos-funnel{position:relative;height:66px;display:grid;place-items:center;margin-top:6px}
.chaos-funnel svg{width:26px;height:40px;color:var(--line-2)}
.js .chaos-funnel svg{opacity:0}
.reveal.in .chaos-funnel svg{opacity:1;transition:opacity .4s var(--ease) .9s;
  animation:chaosdrop 1.8s ease-in-out 1.3s infinite}
@keyframes chaosdrop{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
.chaos-team{max-width:400px;margin-inline:auto;padding:22px;border-radius:18px;text-align:center;
  border:1px solid #E7C9C9;background:linear-gradient(180deg,#FFFFFF,#FCEFEF)}
.chaos-team b{display:block;font-family:"Space Grotesk",sans-serif;font-size:19px;letter-spacing:-.02em}
.chaos-team span{display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:#9C5252;margin-top:6px}
.chaos-line{margin-top:26px;font-size:17px;color:var(--ink);max-width:52ch;margin-inline:auto}
.chaos-line b{color:var(--volt-deep)}

/* --- §3 the funnel: business -> FiEV -> reliable deliveries -------------- */
.fun{display:grid;gap:0;justify-items:center;margin-top:38px}
.fun-node{padding:16px 30px;border-radius:16px;border:1px solid var(--line);background:var(--card-bg);
  box-shadow:var(--card-sheen),var(--e1);font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:17px;letter-spacing:-.02em}
/* named .fun-out, not .out — .out is the ROI calculator's results grid, and the
   generic name was landing a 3-column dark-bordered grid on this node. */
.fun-node.fun-out{background:linear-gradient(180deg,#FFFFFF,#F3FBE2);
  border-color:#DDEEBE;color:var(--volt-deep)}
.fun-pipe{width:2px;height:34px;background:linear-gradient(180deg,var(--ion-deep),var(--volt-deep));
  border-radius:2px;position:relative;overflow:hidden}
.fun-pipe i{position:absolute;left:0;width:100%;height:12px;border-radius:2px;background:var(--volt);
  animation:funflow 2.2s linear infinite}
@keyframes funflow{from{top:-14px}to{top:100%}}
.fun-core{width:100%;max-width:760px;border-radius:22px;border:1px solid #CFE0FA;padding:22px;
  background:linear-gradient(180deg,#FFFFFF,#EDF3FE);box-shadow:var(--card-sheen),var(--e3)}
.fun-core .fc-t{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:16px;
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:18px;color:var(--ion-deep)}
.fun-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(min-width:620px){.fun-grid{grid-template-columns:repeat(4,1fr)}}
.fun-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:11px;
  border:1px solid rgba(41,81,200,.14);background:rgba(255,255,255,.75);font-size:13px;color:var(--muted)}
.fun-item svg{width:15px;height:15px;color:var(--ion-deep);flex:none}
.js .fun-item{opacity:0;transform:translateY(8px)}
.reveal.in .fun-item{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* --- §4 what we manage: cards that open on hover ------------------------- */
.mgrid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:38px;text-align:left}
@media(min-width:640px){.mgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.mgrid{grid-template-columns:repeat(4,1fr)}}
.mcard{position:relative;padding:22px;border-radius:18px;border:1px solid var(--line);
  background:var(--card-bg);box-shadow:var(--card-sheen),var(--e1);overflow:hidden;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease)}
.mcard:hover{box-shadow:var(--card-sheen),var(--e3);transform:translateY(-4px);border-color:#CFE59B}
.mcard::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--volt);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.mcard:hover::after{transform:scaleX(1)}
.mcard .mc-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--volt-wash);color:var(--volt-deep);margin-bottom:15px;
  transition:background .35s var(--ease),transform .35s var(--ease)}
.mcard:hover .mc-i{background:var(--volt);color:var(--ink);transform:scale(1.06)}
.mcard .mc-i svg{width:20px;height:20px}
.mcard h3{font-size:16.5px;margin-bottom:6px}
.mcard p{font-size:14px;color:var(--faint);line-height:1.5}

/* --- §7 industries ------------------------------------------------------- */
.ind{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:34px}
@media(min-width:760px){.ind{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1060px){.ind{grid-template-columns:repeat(6,1fr)}}
.ind-item{text-align:center;padding:22px 12px;border-radius:16px;border:1px solid var(--line);
  background:var(--card-bg);box-shadow:var(--card-sheen),var(--e1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.ind-item:hover{transform:translateY(-4px);box-shadow:var(--card-sheen),var(--e2);border-color:#CFE59B}
.ind-item .ii{width:36px;height:36px;margin:0 auto 11px;color:var(--volt-deep);
  transition:transform .35s var(--ease)}
.ind-item:hover .ii{transform:scale(1.12)}
.ind-item .ii svg{width:100%;height:100%}
.ind-item b{font-size:14px;font-family:"Space Grotesk",sans-serif;letter-spacing:-.01em}

/* --- §9 before vs after -------------------------------------------------- */
.baft{max-width:880px;margin:36px auto 0;text-align:left}
.baft-head{display:grid;grid-template-columns:1fr 44px 1fr;gap:0;align-items:center;margin-bottom:12px}
.baft-head b{font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:600;letter-spacing:-.02em}
.baft-head .bh-a{text-align:right;color:#9C5252;padding-right:16px}
.baft-head .bh-b{text-align:left;color:var(--volt-deep);padding-left:16px}
.baft-row{display:grid;grid-template-columns:1fr 44px 1fr;align-items:stretch;
  border-top:1px solid var(--line)}
.baft-row:last-child{border-bottom:1px solid var(--line)}
.baft-a,.baft-b{padding:15px 16px;font-size:14.5px;display:flex;align-items:center}
.baft-a{justify-content:flex-end;text-align:right;color:var(--faint);text-decoration:line-through;
  text-decoration-color:rgba(156,82,82,.5)}
.baft-b{color:var(--muted)}
.baft-mid{display:grid;place-items:center}
.baft-mid svg{width:16px;height:16px;color:var(--volt-deep)}
.js .baft-row{opacity:0;transform:translateX(-10px)}
.reveal.in .baft-row{opacity:1;transform:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* --- §12 numbers --------------------------------------------------------- */
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
@media(min-width:900px){.nums{grid-template-columns:repeat(4,1fr)}}
.num{text-align:center;padding:26px 16px;border-radius:18px;border:1px solid var(--line);
  background:var(--card-bg);box-shadow:var(--card-sheen),var(--e1)}
/* The section heading is 50px. A "numbers" section where the heading beats the
   numbers has its hierarchy inverted — these have to dominate. */
.num b{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(2.6rem,5.4vw,3.9rem);
  font-weight:600;letter-spacing:-.03em;color:var(--volt-deep);line-height:1}
/* CHILD selector, not descendant. The figure is markup'd as
   <b><span data-count>99.2</span>%</b>, and a plain `.num span` also matched
   that inner span — shrinking the digits to label size and block-breaking the
   unit onto its own line. Only the label is a direct child of .num. */
.num > span{display:block;font-size:13.5px;color:var(--faint);margin-top:9px;line-height:1.45}
.num b span{display:inline;font:inherit;color:inherit}
.nums-note{margin-top:16px;font-size:13px;color:var(--faint);max-width:60ch;margin-inline:auto}

/* --- §13 trust ----------------------------------------------------------- */
.trust{display:grid;grid-template-columns:1fr;gap:16px;margin-top:34px;text-align:left}
@media(min-width:820px){.trust{grid-template-columns:repeat(3,1fr)}}
.trust-item{padding:22px;border-radius:18px;border:1px solid var(--line);background:var(--card-bg);
  box-shadow:var(--card-sheen),var(--e1)}
.trust-item .ti{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--ion-wash);color:var(--ion-deep);margin-bottom:14px}
.trust-item .ti svg{width:19px;height:19px}
.trust-item h3{font-size:16.5px;margin-bottom:6px}
.trust-item p{font-size:14px;color:var(--faint);line-height:1.5}

/* --- savings calculator -------------------------------------------------- */
.sav{max-width:620px;margin:32px auto 0;padding:26px;border-radius:20px;
  border:1px solid var(--line);background:var(--card-bg);box-shadow:var(--card-sheen),var(--e2);text-align:left}
.sav input[type=range]{background:#E7EBF1;border:1px solid #878E9B}
.sav input[type=range]::-webkit-slider-thumb{border-color:#fff;box-shadow:0 3px 10px rgba(16,24,40,.22)}
.sav input[type=range]::-moz-range-thumb{border-color:#fff;box-shadow:0 3px 10px rgba(16,24,40,.22)}
.sav label{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.sav .sv-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.sav .sv-n{font-family:"Space Grotesk",sans-serif;font-size:24px;font-weight:600;color:var(--ink)}
.sav-out{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:center}
.sav-out b{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(2.4rem,5vw,3.4rem);
  font-weight:600;color:var(--volt-deep);letter-spacing:-.03em;line-height:1}
.sav-out span{display:block;font-size:13.5px;color:var(--faint);margin-top:8px}
.sav-fine{font-size:11.5px;color:var(--faint);margin-top:14px;line-height:1.6}

@media (prefers-reduced-motion: reduce){
  .js .chaos-chip,.js .fun-item,.js .baft-row{opacity:1;transform:none}
  .fun-pipe i,.chaos-funnel svg{animation:none}
}

/* ---------- ROI calculator ---------- */
.roi{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
@media(min-width:940px){.roi{grid-template-columns:1fr 1.02fr;gap:56px}}
/* The calculator is the one dark object on the page. Giving it weight this way
   — rather than tinting the whole section — is what lets the surrounding page
   stay near-white while the numbers still land hard. Volt returns to full
   strength here (15:1) because it finally has a dark ground to sit on. */
.calc{background:#12151C;border:1px solid #262B36;border-radius:22px;padding:24px;
  box-shadow:0 24px 60px rgba(10,16,32,.22),0 2px 6px rgba(10,16,32,.10);color:#F5F6F7}
@media(min-width:600px){.calc{padding:30px}}
.calc label{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8891A3;margin-bottom:12px}
.calc .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.calc .val{font-family:"Space Grotesk",sans-serif;font-size:26px;font-weight:600;color:#fff;letter-spacing:-.02em}
.calc .sub{font-family:"JetBrains Mono",monospace;font-size:12px;color:#A2A9B8}
/* Track boundary carried by a 1px border (#5C6472 = 3.06:1 on the card). A
   track dark enough to clear 3:1 alone would kill the volt fill's contrast. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:5px;
  background:#2A2F3A;border:1px solid #5C6472;outline:none;margin:6px 0 22px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--volt);border:3px solid #12151C;cursor:pointer;box-shadow:0 0 0 1px #5C6472,0 2px 10px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--volt);
  border:3px solid #12151C;cursor:pointer;box-shadow:0 0 0 1px #5C6472,0 2px 10px rgba(0,0,0,.5)}
input[type=range]:focus-visible{outline:2px solid var(--volt);outline-offset:4px}
/* One hero figure, then the supporting three. Four equal-weight numbers gave
   the reader nothing to anchor on; the monthly rental is the whole pitch. */
.out-hero{padding-top:22px;border-top:1px solid #262B36}
.out-hero .oh-v{font-family:"Space Grotesk",sans-serif;font-size:clamp(2.4rem,6vw,3.2rem);
  font-weight:600;color:var(--volt);letter-spacing:-.03em;line-height:1}
.out-hero .oh-l{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.15em;color:#A2A9B8;margin-top:8px}
.out{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:20px;margin-top:20px;border-top:1px solid #262B36}
.out .ov{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.4rem,3.2vw,1.9rem);font-weight:600;
  color:var(--volt);letter-spacing:-.02em}
.out .ol{font-family:"JetBrains Mono",monospace;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.14em;color:#8891A3;margin-top:5px;line-height:1.5}
.resid{margin-top:22px;padding-top:18px;border-top:1px solid #262B36;display:grid;gap:11px}
.resid-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14px;color:#A2A9B8}
.resid-row i{font-style:normal;color:#8891A3;font-size:12.5px;display:block}
.resid-row b{font-family:"JetBrains Mono",monospace;font-size:15px;color:#fff;font-weight:500;white-space:nowrap}
.resid-row.tot{padding-top:11px;border-top:1px dashed #333945;color:#fff;font-weight:600}
.resid-row.tot b{font-family:"Space Grotesk",sans-serif;font-size:21px;font-weight:600;color:var(--volt)}
.disc{font-size:12px;color:#8891A3;margin-top:18px;line-height:1.65}

.steps{list-style:none;display:grid;gap:0;margin:26px 0 0}
.steps li{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid var(--line);
  font-size:15px;color:var(--muted);align-items:flex-start}
.steps b{display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:9px;
  background:var(--volt-wash);color:var(--volt-deep);font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:500}
.steps strong{color:var(--ink);font-weight:600}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid var(--line);max-width:820px}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{width:100%;background:none;border:0;text-align:left;padding:20px 44px 20px 0;font-size:16.5px;font-weight:600;font-family:"Space Grotesk",sans-serif;letter-spacing:-.01em;cursor:pointer;position:relative;color:var(--ink);line-height:1.4;transition:color .25s}
.acc-q::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--volt-deep);border-bottom:2px solid var(--volt-deep);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.acc-q[aria-expanded="true"]::after{transform:translateY(-20%) rotate(-135deg)}
.acc-q:hover{color:var(--volt-deep)}
.acc-a{display:none;padding:0 0 22px;color:var(--muted);font-size:15.5px;max-width:66ch}
.acc-a.open{display:block;animation:fadeup .4s var(--ease)}
.acc-a p+p{margin-top:.8em}

/* ---------- Forms ---------- */
.form{display:grid;gap:16px;max-width:560px}
.field label{display:block;font-size:13.5px;font-weight:500;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid var(--line-ctl);border-radius:4px;padding:12px 14px;font-size:16px;color:var(--ink);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--volt-deep);box-shadow:0 0 0 3px rgba(63,107,0,.18)}
.field input::placeholder,.field textarea::placeholder{color:#9AA0AC}
.field .err{color:var(--err);font-size:13px;margin-top:5px;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--err)}
.field.invalid .err{display:block}
.f2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.f2{grid-template-columns:1fr 1fr}}
.hp{position:absolute!important;left:-9999px}
/* .form-ok is defined in the CONTACT block below — the old two-line volt-wash
   strip is gone, every one of its declarations was being overridden there and
   leaving it here only invited someone to reorder the file and resurrect it. */

/* ---------- Band ---------- */
.band{position:relative;background:none}
/* padding-block, NOT the `padding: 44px 0` shorthand this used to be. .band-in
   sits on the same element as .wrap, and the shorthand was resetting .wrap's
   20px side padding to zero — so the CTA heading and both buttons ran flush
   into the edge of the phone screen. Invisible on a wide desktop, where the
   1280px max-width leaves whitespace outside the box anyway. */
.band-in{position:relative;display:grid;grid-template-columns:1fr;gap:22px;align-items:center;padding-block:44px}
@media(min-width:820px){.band-in{grid-template-columns:1.4fr auto;padding-block:58px}}
.band h2{font-size:clamp(1.55rem,3.1vw,2.25rem);margin-bottom:10px}
.band p{color:var(--muted);font-size:16.5px;max-width:52ch}

/* ---------- Notes ---------- */
.note{background:var(--ion-wash);border:1px solid #D6E2FF;border-left:3px solid var(--ion-deep);border-radius:12px;padding:16px 18px;font-size:14.5px;color:var(--muted)}
.note b{color:var(--ion-deep)}
.flag{background:var(--warn-bg);border:1px solid var(--warn-line);border-left:3px solid var(--warn);border-radius:10px;padding:14px 17px;font-size:13.5px;color:var(--warn-ink);margin-top:22px;line-height:1.6}
.flag b{color:#8A6708}

/* ---------- Footer ---------- */
.footer{background:var(--dark);border-top:1px solid var(--dark-line);color:var(--dark-muted);padding:56px 0 34px;font-size:14px}
.footer .logo{color:#fff}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
@media(min-width:820px){.fgrid{grid-template-columns:2fr 1fr 1fr 1fr}}
.fh{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#fff;margin-bottom:14px}
.fgrid ul{list-style:none;display:grid;gap:9px}
.fgrid a:hover{color:var(--volt)}
.fbot{margin-top:40px;padding-top:20px;border-top:1px solid var(--dark-line);font-size:12.5px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:var(--dark-faint)}

/* ---------- WhatsApp FAB ---------- */
.fab{position:fixed;right:16px;bottom:16px;z-index:90;width:56px;height:56px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.36);border:none;cursor:pointer;transition:transform .3s var(--ease)}
@media(min-width:768px){.fab{right:24px;bottom:24px;width:58px;height:58px}}
.fab:hover{transform:scale(1.08)}
.fab::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:ring 2.6s ease-out infinite;pointer-events:none}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.fab svg{width:29px;height:29px;fill:#fff}
body.has-sticky .fab{bottom:84px}
@media(min-width:768px){body.has-sticky .fab{bottom:24px}}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:85;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:10px 16px;display:flex;gap:10px;box-shadow:0 -4px 24px rgba(16,24,40,.08)}
.sticky-cta .btn{flex:1;padding:12px 14px;font-size:14.5px}
@media(min-width:768px){.sticky-cta{display:none}}


/* ==========================================================================
   SHARED CARD SURFACE
   Every card-like object on the site draws from the same two values: a soft
   top-to-bottom sheen and a 1px inner highlight along the top edge. That inner
   highlight is what reads as "glass" — it catches light the way a real raised
   surface would, without any element needing its own bespoke gradient.

   Declared once, after the component rules, so nothing can quietly diverge.
   ========================================================================== */
:root{
  --card-bg:linear-gradient(180deg,#FFFFFF 0%,#FCFDFE 100%);
  --card-sheen:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.35);
}
.card,.plan,.door,.quote,.member,.bcard,.adv-item,.viz,.vsh,.chip,.tabs,.bfoot{
  background:var(--card-bg);
}
.card,.plan,.door,.quote,.member,.bcard,.adv-item{
  box-shadow:var(--card-sheen),var(--e1);
}
.card:hover,.quote:hover,.bcard:hover{box-shadow:var(--card-sheen),var(--e2)}
.door:hover,.member:hover,.adv-item:hover{box-shadow:var(--card-sheen),var(--e3)}
.plan{box-shadow:var(--card-sheen),var(--e1)}
.plan:hover{box-shadow:var(--card-sheen),var(--e2)}
.plan.feat{box-shadow:var(--card-sheen),var(--e2)}
.plan.feat:hover{box-shadow:var(--card-sheen),var(--e3)}
/* the calculator is the one dark object and keeps its own treatment */
.calc{background:#12151C}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.tl-item{opacity:1;transform:none}
  .marq-track{animation:none}
  .tl-line i{right:0}
}


/* ==========================================================================
   ABOUT — ONE CONTINUOUS SCROLL
   The whole page is threaded by a single line that is drawn as you scroll.
   It is one absolutely-positioned element behind <main>'s sections, not a
   per-section decoration, which is the only way the draw can be continuous:
   a line restarted at every section reads as eight animations, not one.

   Sections sit above it (z-index) and are transparent, so the line passes
   BEHIND each block of content and re-emerges in the gap below it. Each
   section is pinned to the line by a knot that lights up when it enters.
   ========================================================================== */
.story{position:relative}

/* The thread. A single full-height line down the centre was the obvious build
   and the wrong one: every centred h2, lede and knot on this page sits on that
   axis, so a 2px rule would have run straight through the middle of the type.
   Instead the thread runs through the GAPS — it emerges below each section,
   crosses the padding, and enters the next section's knot.

   It is still ONE animation, which is the part that matters: every segment on
   the page is filled from the same sight-line in the same rAF pass (see the
   story thread block in site.js), so the draw sweeps down the page in one
   unbroken movement instead of eight sections each starting their own. */
.knot-line{position:absolute;width:2px;margin-left:-1px;border-radius:2px;
  background:var(--line-2);overflow:hidden;pointer-events:none}
.knot-line>i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--ion) 0,var(--volt) 100%);
  box-shadow:0 0 9px rgba(77,124,255,.30)}

/* the knot: a section's attachment point on the thread */
.knot{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;
  margin:0 auto 24px;display:grid;place-items:center;background:var(--card-bg);
  border:1px solid var(--line);box-shadow:var(--card-sheen),var(--e1);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.04em;color:var(--faint);
  transition:border-color .55s var(--ease),color .55s var(--ease),box-shadow .55s var(--ease)}
.reveal.in .knot{border-color:var(--volt);color:var(--volt-deep);
  box-shadow:0 0 0 7px var(--volt-wash),var(--e1)}
/* The segment above a knot reaches up through the section padding. The tightest
   gap on the page is the one under the page header — 28+44=72px on mobile and
   44+72=116px on desktop — so the segment is sized against THAT, not against
   the roomier 88/144px gap between two sections. Sized against the average it
   would have poked into the header's fact chips. */
.knot .knot-line{left:50%;bottom:100%;height:64px}
@media(min-width:768px){.knot .knot-line{height:104px}}

/* hero fact chips */
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.center .facts{justify-content:center}
/* the label is wrapped in its own span so the 9px flex gap falls between the
   dot and the text ONCE — with a bare text node plus <b> they become two flex
   items and the gap opens up mid-sentence */
.fact{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--card-bg);box-shadow:var(--card-sheen),var(--e1);
  font-size:13px;color:var(--muted)}
.fact b{color:var(--ink);font-weight:600}
.fact i{width:6px;height:6px;border-radius:50%;background:var(--volt);flex:none;
  box-shadow:0 0 0 3px var(--volt-wash)}

/* --------------------------------------------------------------- 01 eco --
   The shape of the company: one source, one platform, three participants. */
.eco{margin-top:34px;display:flex;flex-direction:column;align-items:center}
.eco-src{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:999px;
  border:1px dashed var(--line-2);font-size:14px;color:var(--muted)}
.eco-src svg{width:17px;height:17px;color:var(--faint)}
.eco-drop{width:2px;height:40px;border-radius:2px;background:var(--line-2);
  position:relative;overflow:hidden}
.eco-drop i{position:absolute;left:0;width:100%;height:45%;top:-45%;border-radius:2px;
  background:linear-gradient(180deg,rgba(77,124,255,0),var(--ion))}
.js .eco-drop i{animation:ecoDrop 2.6s var(--ease) infinite}
@keyframes ecoDrop{0%{top:-45%}65%,100%{top:100%}}
.eco-core{width:100%;max-width:520px;text-align:center;padding:26px 28px;border-radius:20px;
  border:1px solid var(--line);background:var(--card-bg);box-shadow:var(--card-sheen),var(--e2)}
.eco-badge{display:inline-block;font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--volt-deep);
  background:var(--volt-wash);padding:5px 12px;border-radius:999px}
.eco-core b{display:block;font-family:"Space Grotesk",sans-serif;font-weight:600;
  letter-spacing:-.022em;font-size:clamp(1.2rem,2.6vw,1.55rem);margin:13px 0 9px}
.eco-core p{font-size:13.5px;color:var(--faint);margin:0;line-height:1.55}
.eco-fan{width:100%;max-width:780px;height:60px}
.eco-fan svg{width:100%;height:100%}
.eco-fan path{fill:none;stroke:var(--line-2);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:520}
.js .eco-fan path{stroke-dashoffset:520}
.reveal.in .eco-fan path{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease) .3s}
.eco-outs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:780px}
.eco-out{text-align:center;padding:20px 14px;border-radius:16px;border:1px solid var(--line);
  background:var(--card-bg);box-shadow:var(--card-sheen),var(--e1)}
.eco-out svg{width:20px;height:20px;margin:0 auto 11px;color:var(--ion-deep)}
.eco-out b{display:block;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px}
.eco-out span{display:block;font-size:12.5px;color:var(--faint);margin-top:5px}
.eco-note{margin:24px auto 0;font-size:15.5px;color:var(--muted);max-width:56ch;text-align:center}
@media(max-width:699px){
  .eco-fan{width:2px;height:36px;background:var(--line-2);border-radius:2px}
  .eco-fan svg{display:none}
  .eco-outs{grid-template-columns:1fr;max-width:420px}
}

/* --------------------------------------------------------------- 02 problem --
   Two columns with a 96px gutter, so the story line runs down the gap and
   becomes the divider rather than colliding with either column. */
.psplit{display:grid;gap:26px;margin-top:34px;text-align:left}
@media(min-width:900px){.psplit{grid-template-columns:1fr 1fr;gap:96px;align-items:center}}
.ps-a,.ps-b{min-width:0}
.ps-h{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--faint);margin-bottom:16px}
.ps-list{list-style:none;display:grid;gap:9px;margin:0}
.ps-list li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);background:var(--card-bg);box-shadow:var(--card-sheen),var(--e1);
  font-size:14.5px;color:var(--muted);line-height:1.5}
.ps-list li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--faint)}
.js .ps-list li{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in .ps-list li{opacity:1;transform:none}
.reveal.in .ps-list li:nth-child(1){transition-delay:.05s}
.reveal.in .ps-list li:nth-child(2){transition-delay:.13s}
.reveal.in .ps-list li:nth-child(3){transition-delay:.21s}
.reveal.in .ps-list li:nth-child(4){transition-delay:.29s}
.reveal.in .ps-list li:nth-child(5){transition-delay:.37s}
.ps-big{font-family:"Space Grotesk",sans-serif;font-weight:600;letter-spacing:-.024em;
  line-height:1.14;font-size:clamp(1.45rem,3.4vw,2.15rem);color:var(--faint)}
.ps-big b{display:block;color:var(--ink);margin-top:10px}
.ps-rule{display:block;width:64px;height:3px;border-radius:3px;background:var(--volt);margin-top:24px}
.ps-foot{margin-top:18px;font-size:14.5px;color:var(--muted);max-width:38ch}

/* --------------------------------------------------------------- 03 insight -- */
.bigstate{margin-top:26px}
.bs-line{font-family:"Space Grotesk",sans-serif;font-weight:600;letter-spacing:-.03em;
  line-height:1.05;font-size:clamp(2rem,6.2vw,4.2rem);max-width:15ch;margin:0 auto;color:var(--ink)}
.bs-u,.bs-s{position:relative;display:inline-block}
.bs-u i{position:absolute;left:0;right:0;bottom:-.02em;height:.095em;border-radius:99px;
  background:var(--volt);transform-origin:left}
.bs-s{color:var(--faint)}
.bs-s i{position:absolute;left:-.03em;right:-.03em;top:.53em;height:.06em;border-radius:99px;
  background:var(--faint);transform-origin:left}
.js .bs-u i,.js .bs-s i{transform:scaleX(0)}
.reveal.in .bs-u i{transform:scaleX(1);transition:transform .85s var(--ease) .3s}
.reveal.in .bs-s i{transform:scaleX(1);transition:transform .6s var(--ease) 1.05s}
.bs-sub{max-width:60ch;margin:34px auto 0}
.bs-sub p{color:var(--muted);font-size:16.5px}
.bs-sub p+p{margin-top:14px}

/* --------------------------------------------------------------- 04 orbit --
   Mobile is a plain stack; the ring only assembles where there is room for it.
   Every node's detail line is in the markup at all times — the hover is polish
   on top, never the only way to read the content (touch has no hover). */
.orb{position:relative;display:grid;gap:14px;max-width:560px;margin:36px auto 0}
.orb-web{display:none}
.orb-core{order:-1;text-align:center;padding:24px 22px;border-radius:20px;
  border:1px solid var(--line);background:var(--card-bg);box-shadow:var(--card-sheen),var(--e2)}
.orb-core b{display:block;font-family:"Space Grotesk",sans-serif;font-weight:600;
  letter-spacing:-.022em;font-size:1.45rem}
.orb-core span{display:block;font-size:13px;color:var(--faint);margin-top:9px;line-height:1.55}
.orb-node{text-align:center;padding:20px 16px;border-radius:18px;border:1px solid var(--line);
  background:var(--card-bg);box-shadow:var(--card-sheen),var(--e1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.orb-node:hover,.orb-node:focus-visible{border-color:var(--volt);
  box-shadow:var(--card-sheen),var(--e3)}
.orb-i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  margin:0 auto 12px;background:var(--ion-wash);color:var(--ion-deep)}
.orb-i svg{width:19px;height:19px}
.orb-node b{display:block;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:16px}
.orb-role{display:block;font-size:13.5px;color:var(--muted);margin-top:6px}
.orb-more{display:block;font-size:12.5px;color:var(--faint);margin-top:9px;line-height:1.5}
.orb-note{margin:26px auto 0;font-size:15px;color:var(--muted);max-width:52ch;text-align:center}
/* 980px, not 900: .orb needs its full fixed 860px box for the SVG to map 1:1
   onto the fixed-width cards. .wrap gives 1280-80=1200px of room at that point,
   so the box is never squeezed and the spokes can never drift off the cards. */
@media(min-width:980px){
  .orb{display:block;height:640px;width:860px;max-width:100%}
  .orb-web{display:block;position:absolute;inset:0;width:100%;height:100%}
  .orb-web path{fill:none;stroke:var(--line-2);stroke-width:2;stroke-linecap:round}
  .orb-ring{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:2 9;
    stroke-linecap:round;opacity:.85}
  .orb-web .orb-pulse{stroke:var(--ion);stroke-width:2.5;stroke-dasharray:13 999}
  .js .orb-web .orb-pulse{animation:orbFlow 3s linear infinite}
  .orb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:300px;margin:0}
  .orb-node{position:absolute;width:236px}
  .orb-node.n1{left:50%;top:0;transform:translateX(-50%)}
  .orb-node.n2{left:0;bottom:26px}
  .orb-node.n3{right:0;bottom:26px}
  .orb-node:hover,.orb-node:focus-visible{transform:translateY(-5px)}
  .orb-node.n1:hover,.orb-node.n1:focus-visible{transform:translateX(-50%) translateY(-5px)}
  .js .orb-more{opacity:0;max-height:0;margin-top:0;overflow:hidden;
    transition:opacity .35s var(--ease),max-height .45s var(--ease),margin-top .45s var(--ease)}
  .orb-node:hover .orb-more,.orb-node:focus-visible .orb-more{opacity:1;max-height:90px;margin-top:9px}
}
@keyframes orbFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--len,300) * -1px)}}

/* --------------------------------------------------------------- 05 wins -- */
.wins{display:grid;margin-top:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:820px){.wins{grid-template-columns:repeat(3,1fr)}}
.win{padding:32px 22px;text-align:center;border-bottom:1px solid var(--line)}
.win:last-child{border-bottom:0}
@media(min-width:820px){
  .win{border-bottom:0;border-right:1px solid var(--line)}
  .win:last-child{border-right:0}
}
.w-n{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.16em;color:var(--volt-deep)}
.win b{display:block;font-family:"Space Grotesk",sans-serif;font-weight:600;letter-spacing:-.024em;
  font-size:clamp(1.3rem,2.8vw,1.7rem);margin:12px 0 10px}
.win p{font-size:14.5px;color:var(--muted);max-width:34ch;margin:0 auto}
.js .win{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in .win{opacity:1;transform:none}
.reveal.in .win:nth-child(2){transition-delay:.12s}
.reveal.in .win:nth-child(3){transition-delay:.24s}

/* --------------------------------------------------------------- 06 road --
   The last section hands the story line its job: the spine IS the roadmap,
   with the steps alternating either side of it. */
.road{position:relative;margin-top:38px;display:grid;gap:16px;padding-left:34px;text-align:left}
/* No viewBox on the SVG, so one user unit is one CSS pixel and site.js can
   write measured coordinates straight into the path. */
.road-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:0}
.road-track{fill:none;stroke:var(--line-2);stroke-width:2;stroke-linecap:round}
.road-draw{fill:none;stroke:url(#roadGrad);stroke-width:2.5;stroke-linecap:round}
.road-step{position:relative;z-index:1;padding:22px 20px;border-radius:18px;
  border:1px solid var(--line);background:var(--card-bg);box-shadow:var(--card-sheen),var(--e1);
  margin:0}
.rs-dot{position:absolute;left:-34px;top:30px;width:12px;height:12px;border-radius:50%;
  background:var(--volt);box-shadow:0 0 0 5px var(--volt-wash);z-index:2}
.rs-when{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--volt-deep)}
.road-step h3{font-size:1.15rem;margin:9px 0 7px}
.road-step p{font-size:14px;color:var(--muted);margin:0;line-height:1.55}
.js .road-step{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in .road-step{opacity:1;transform:none}
.reveal.in .road-step:nth-child(2){transition-delay:.13s}
.reveal.in .road-step:nth-child(3){transition-delay:.26s}
.reveal.in .road-step:nth-child(4){transition-delay:.39s}

/* Desktop: the steps alternate either side and the road weaves between them.
   margin-left:auto is the fix for a real misalignment — with only margin-right
   set, a card narrower than the space available hugged the left edge of the
   wrap instead of ending at the centre gutter, so on a wide screen its dot sat
   some 200px away from the line it was supposed to be on. It only looked right
   on windows narrow enough for max-width not to bite. */
@media(min-width:900px){
  .road{gap:30px;padding-left:0}
  .road-step{max-width:394px}
  .rs-l{margin-right:calc(50% + 64px);margin-left:auto;text-align:right}
  .rs-r{margin-left:calc(50% + 64px)}
  /* dots sit 44px either side of centre, which is the amplitude the curve
     swings through — far enough to read as a weave, not so far it wanders */
  .rs-l .rs-dot{left:auto;right:-26px}
  .rs-r .rs-dot{left:-26px}
}
.road-say{margin:30px auto 0;text-align:center;font-family:"Space Grotesk",sans-serif;
  font-weight:600;letter-spacing:-.022em;font-size:clamp(1.15rem,2.4vw,1.5rem);max-width:26ch}


/* ==========================================================================
   CONTACT
   What was wrong with the old page, and what each rule here fixes:

   1. Two unbounded stacks side by side in a 1fr 1fr grid. The form ran to
      roughly twice the height of the four little cards beside it, so the right
      column just stopped mid-page and left a large ragged hole. Two columns of
      free-floating content will always do this — the fix is to make both sides
      BOUNDED objects (a panel and a rail of cards) and to let the shorter one
      stick, so the imbalance never reads as an accident.
   2. Three links were painted var(--volt) — 1.21:1 on white. Not "low
      contrast": invisible. Leftovers from the dark theme.
   3. The four contact cards were spaced with inline margin-bottom, so the last
      one differed from the rest and none of their buttons lined up.
   4. The email card used the phone-app icon.
   ========================================================================== */

/* ---- channel row: three equal cards, buttons locked to a common baseline -- */
.chans{display:grid;grid-template-columns:1fr;gap:14px;margin-top:6px}
@media(min-width:760px){.chans{grid-template-columns:repeat(3,1fr);gap:16px}}
.chan{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:30px 22px;border-radius:20px;border:1px solid var(--line);
  background:var(--card-bg);box-shadow:var(--card-sheen),var(--e1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.chan:hover{transform:translateY(-3px);box-shadow:var(--card-sheen),var(--e2);
  border-color:var(--line-2)}
.chan.pri{border-color:#D9F2AE}
.chan-i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:15px;flex:none}
.chan-i svg{width:22px;height:22px}
.chan h3{font-size:18px;margin-bottom:8px}
.chan p{font-size:14px;color:var(--faint);line-height:1.55;margin-bottom:14px;max-width:28ch}
.chan-v{display:block;font-size:13.5px;color:var(--ink);margin-bottom:18px;
  word-break:break-word;letter-spacing:-.01em}
/* the auto margin is the whole trick: whatever the description wraps to, every
   button in the row still sits on the same line */
.chan .btn{margin-top:auto;width:100%}

/* ---- form panel + rail ---------------------------------------------------
   The rail used to be align-items:start and free to run past the bottom of the
   form. Trimming its copy would have hidden that for one viewport width and
   one font — the moment a description wrapped to an extra line it would have
   overshot again. So the alignment is now STRUCTURAL rather than estimated:

     .cgrid  stretches both columns to the same row height
     .crail  is a 3-row grid whose MIDDLE row is 1fr
     .rflex  hands that spare height to the link list, which spreads to take it

   Whatever the form ends up measuring, the rail's bottom edge lands on it
   exactly, and the slack is absorbed by the one element that looks natural
   with extra breathing room. Nothing here depends on a guessed height. */
.cgrid{display:grid;gap:22px;align-items:stretch}
@media(min-width:980px){.cgrid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px}}
.fpanel{padding:28px 24px;border-radius:22px;border:1px solid var(--line);
  background:var(--card-bg);box-shadow:var(--card-sheen),var(--e2)}
@media(min-width:768px){.fpanel{padding:36px 34px}}
.fh{font-size:clamp(1.4rem,2.6vw,1.85rem);margin:12px 0 8px}
.fsub{font-size:15px;color:var(--faint);margin-bottom:26px}
/* the panel supplies the measure now, so the form must not also cap itself —
   a 560px cap inside a ~660px column left a dead strip down one edge */
.fpanel .form{max-width:none}

.crail{display:grid;gap:16px}
/* minmax(auto,1fr), not minmax(0,1fr): the row may only ever GROW into spare
   height. With a 0 floor an unexpectedly tall form — or a description that
   wraps one line further — would have crushed the card and spilled the list
   out of it, trading one alignment bug for a worse one. */
@media(min-width:980px){.crail{grid-template-rows:auto minmax(auto,1fr) auto}}
.rcard{padding:24px;border-radius:20px;border:1px solid var(--line);
  background:var(--card-bg);box-shadow:var(--card-sheen),var(--e1)}
.rcard h3{font-size:16.5px;margin-bottom:16px}
.rsteps{list-style:none;display:grid;gap:14px;margin:0}
.rsteps li{display:flex;gap:12px;align-items:flex-start}
.rn{width:23px;height:23px;flex:none;border-radius:50%;display:grid;place-items:center;
  margin-top:1px;background:var(--volt-wash);color:var(--volt-deep);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px}
.rsteps strong{display:block;font-size:14.5px;color:var(--ink);font-weight:600}
.rsteps p{font-size:13.5px;color:var(--faint);line-height:1.5;margin-top:3px}
/* the flexible card: its list stretches into whatever height the row gives it,
   and space-between turns that surplus into even gaps rather than a void */
.rflex{display:flex;flex-direction:column;min-height:0}
.rflex .rlinks{flex:1;align-content:space-between}
/* the list is pulled out to the card's padding edge so the hover fill reaches
   it, and the hairlines between rows span that same width */
.rlinks{list-style:none;display:grid;margin:0 -12px}
.rlinks li+li{border-top:1px solid var(--line)}
.rlinks a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px;border-radius:10px;font-size:14.5px;color:var(--muted);
  transition:background .2s var(--ease),color .2s var(--ease)}
.rlinks a:hover{background:var(--mist);color:var(--ink)}
.rlinks svg{width:15px;height:15px;flex:none;color:var(--faint)}
.rwhere h3{margin-bottom:8px}
.rwhere p{font-size:14px;color:var(--faint);line-height:1.55;margin-bottom:15px}
/* two classes, so this beats the `.rwhere p` above it — .rloc alone is (0,1,0)
   against that rule's (0,1,1) and would have lost every declaration it shares */
.rcard .rloc{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding-top:15px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.rloc svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ion-deep)}
.rfine{font-size:12px;color:var(--faint)}

/* ---- interest chips ------------------------------------------------------
   Radios, not a <select>: one tap instead of three, and the four programmes
   are legible at a glance. The input is clipped rather than opacity:0 so it
   stays focusable and keyboard users still get a visible ring on the chip. */
.fchips{border:0;padding:0;margin:0;min-width:0}
.fchips legend{font-size:13.5px;font-weight:500;color:var(--muted);
  margin-bottom:11px;padding:0}
.chipset{display:flex;flex-wrap:wrap;gap:8px}
.field .chip-r{display:inline-flex;margin:0}
.field .chip-r input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;background:none}
.chip-r span{display:inline-block;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--card-bg);font-size:14px;
  color:var(--muted);cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.chip-r span:hover{border-color:var(--line-ctl);color:var(--ink)}
.chip-r input:checked+span{background:var(--volt);border-color:var(--volt);
  color:var(--ink);font-weight:500}
.chip-r input:focus-visible+span{outline:2px solid var(--volt-deep);outline-offset:2px}
.fchips.invalid .chip-r span{border-color:var(--err)}

/* ---- enquiry form ------------------------------------------------------- */
.form{gap:18px}
/* 4px corners on the inputs against 20-22px on every card around them was the
   one detail that made the form look bolted on rather than designed. */
.field input,.field select,.field textarea{border-radius:10px;padding:13px 15px}
.field textarea{min-height:128px}
.field label{display:flex;align-items:baseline;gap:6px}
.req{color:var(--err);font-weight:600;line-height:1}
/* the honeypot: clipped as well as thrown off-canvas, and aria-hidden in the
   markup, so it cannot surface in a reader, a print sheet or a narrow layout */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Two real ways to finish. Stacked, not side by side: the panel is only about
   500px wide at the point the two-column layout kicks in, so a 1fr 1fr row
   would have given each button ~245px and wrapped the WhatsApp label onto a
   second line. A media query on VIEWPORT width cannot see that — the panel is
   at its narrowest exactly where the viewport is widest enough to trigger it. */
.fsend{display:grid;gap:10px;margin-top:2px}
.fsend .btn{width:100%}
.fsend .btn svg{width:17px;height:17px}

.fpriv{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--faint);
  line-height:1.55;padding-top:16px;border-top:1px solid var(--line)}
.fpriv svg{width:15px;height:15px;flex:none;margin-top:2px}
/* --ion-deep is 6.8:1 on this surface. The volt this used to be was 1.21:1. */
.fpriv a{color:var(--ion-deep);text-decoration:underline;text-underline-offset:2px}
/* equal specificity to .chan.pri, so it has to come after it to win — without
   this the primary card was the one card in the row that ignored hover */
.chan.pri:hover{border-color:#BFE07A}

/* ---- success state -------------------------------------------------------
   The panel is a stretched grid item matched to the rail beside it, so simply
   hiding the form used to leave a full-height column with a two-line strip
   floating at the top of it. The panel is a flex column now and the success
   block takes flex:1, so it occupies exactly the space the form vacated. */
.fpanel{display:flex;flex-direction:column}
/* the form itself must NOT grow: .form is a grid, and a grid that is given
   surplus height stretches its auto rows, which would push the fields apart by
   an amount that changes with every viewport. Only the success block grows. */
.fhead{flex:none}
.fpanel.sent .fhead{display:none}
.form-ok{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px 8px;background:none;border:0;border-radius:0;color:inherit;
  font-size:inherit}
.form-ok.show{display:flex}
.form-ok h3{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:24px 0 10px}
.form-ok>p{font-size:16px;color:var(--muted);max-width:40ch;line-height:1.6}
/* one of these two lines is a lie depending on how the enquiry left the page,
   so exactly one of them is ever shown */
.ok-mail{display:none}
.form-ok.via-mail .ok-sent{display:none}
.form-ok.via-mail .ok-mail{display:block}

.ok-mark{position:relative;width:96px;height:96px;flex:none}
.ok-mark svg{width:100%;height:100%;position:relative;z-index:1;overflow:visible}
.ok-ring{fill:none;stroke:var(--volt);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:246;transform:rotate(-90deg);transform-origin:50% 50%}
.ok-tick{fill:none;stroke:var(--volt-deep);stroke-width:6.5;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:60}
.show .ok-ring{animation:okRing .75s var(--ease) both}
.show .ok-tick{animation:okTick .45s var(--ease) .55s both}
@keyframes okRing{from{stroke-dashoffset:246}to{stroke-dashoffset:0}}
@keyframes okTick{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
/* a single ring expanding out from under the mark once the tick lands */
.ok-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--volt)}
.show .ok-pulse{animation:okPulse 1.5s var(--ease) .85s}
@keyframes okPulse{from{transform:scale(1);opacity:.75}to{transform:scale(2.1);opacity:0}}

/* the three steps, reused from the rail but laid out as a row here */
.ok-steps{list-style:none;display:grid;gap:14px;margin:28px 0 0;text-align:left;
  width:100%;max-width:420px;padding:22px 0 0;border-top:1px solid var(--line)}
.ok-steps li{display:flex;gap:12px;align-items:flex-start}
.ok-steps strong{display:block;font-size:14.5px;color:var(--ink);font-weight:600}
.ok-steps p{font-size:13.5px;color:var(--faint);line-height:1.5;margin-top:3px}
.form-ok .btn{margin-top:26px}
/* everything below the mark arrives after the tick has drawn */
.show .ok-mark~*{animation:okRise .6s var(--ease) .7s both}
@keyframes okRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}


/* ==========================================================================
   HEADER DROPDOWN — "Partner with us"
   Works with JavaScript switched off. The panel is revealed by :hover for a
   mouse and by :focus-within for a keyboard or a tap, both pure CSS; the
   script only adds click-to-toggle and outside-click-to-close on top.

   It is hidden with `visibility`, deliberately NOT `opacity:0`. The build
   checker rejects a base state that hides content behind opacity because a
   blocked script would leave it permanently invisible — and rather than carve
   out an exception, the open/close reads perfectly well as a slide.
   ========================================================================== */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-dt{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 0;
  font-size:15px;color:var(--muted);cursor:pointer;position:relative;
  transition:color .2s var(--ease)}
.nav-dt::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--volt-deep);transition:right .3s var(--ease)}
.nav-drop:hover .nav-dt,.nav-dt:hover{color:var(--ink)}
.nav-drop:hover .nav-dt::after{right:0}
.nav-dt.on{color:var(--ink);font-weight:600}
.nav-dt.on::after{right:0}
.chev{width:11px;height:11px;flex:none;transition:transform .25s var(--ease)}
.nav-drop:hover .chev,.nav-dt[aria-expanded="true"] .chev{transform:rotate(180deg)}

.nav-dm{position:absolute;top:calc(100% + 12px);left:50%;margin-left:-158px;width:316px;
  padding:8px;border-radius:16px;border:1px solid var(--line);background:var(--card-bg);
  box-shadow:var(--card-sheen),var(--e3);z-index:60;
  visibility:hidden;transform:translateY(-7px);
  transition:transform .22s var(--ease),visibility 0s .22s}
/* a hit area bridging the 12px gap, so the pointer can travel from the trigger
   to the panel without passing over dead space and closing it */
.nav-dm::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-drop:hover>.nav-dm,
html:not(.js) .nav-drop:focus-within>.nav-dm,
.nav-drop.open>.nav-dm{visibility:visible;transform:none;
  transition:transform .22s var(--ease),visibility 0s}
.nav-dm a{display:block;padding:11px 13px;border-radius:11px;
  transition:background .2s var(--ease)}
.nav-dm a::after{content:none}
.nav-dm a:hover{background:var(--mist)}
.nav-dm b{display:block;font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;
  font-size:15px;color:var(--ink);letter-spacing:-.015em}
.nav-dm span{display:block;font-size:13px;color:var(--faint);margin-top:3px;line-height:1.45}

/* ---- the same group in the burger menu: no accordion, just a labelled block.
        One fewer piece of state to get wrong on the surface where a mis-tap
        costs the most. ---- */
.mm-group{padding:12px 0 4px}
.mm-gh{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--faint);padding-bottom:4px}
.mm-sub{list-style:none;padding:0!important}
.mm-sub li a{padding-left:14px;border-left:2px solid var(--line);border-bottom:0;
  margin-bottom:2px}
.mm-group+li a{border-top:1px solid var(--line)}


/* ==========================================================================
   MOBILE FIXES
   Found by measuring rather than by looking — each of these is invisible on a
   desktop browser window narrowed to phone width, because the two things that
   cause them (a browser chrome that resizes, and a touch pointer) do not exist
   there.
   ========================================================================== */

/* The sticky bottom CTA is position:fixed and mobile-only, and nothing was
   reserving space for it. The last ~64px of the page sat underneath it
   permanently — which on every page with the bar meant the copyright line and
   the Privacy and Terms links could not be scrolled into view at all. */
@media(max-width:767px){
  body.has-sticky{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}

/* env(safe-area-inset-bottom) is the home indicator strip on notched iPhones.
   Without it the two buttons in the bar sit under the indicator and take a
   deliberate second tap. */
.sticky-cta{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.fab{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
body.has-sticky .fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media(min-width:768px){
  .fab,body.has-sticky .fab{bottom:24px}
}

/* 100vh on a phone is the viewport with the address bar HIDDEN, so a menu
   sized to it overflows while the bar is showing and the last item — the
   WhatsApp button — falls off the bottom. dvh tracks the real height; the vh
   line stays as the fallback for older browsers. */
.mobile-menu{max-height:calc(100dvh - var(--nav-h))}

/* Touch targets. 38px and 35px are comfortable with a mouse and fiddly with a
   thumb; 44px is the documented minimum on both iOS and Android. Scoped to
   coarse pointers so desktop keeps its tighter proportions. */
@media(pointer:coarse){
  .btn-sm{min-height:44px}
  .tab{padding:12px 20px}
  .rlinks a,.nav-dm a{padding-top:13px;padding-bottom:13px}
}

/* The ROI calculator's three summary stats. At 1.4rem, "₹4,50,000" needs
   117px and the column is 81px wide at 360px — and because a 1fr track will
   not shrink below its content, the grid pushed wider than the dark card
   instead of wrapping. Below 520px they become rows, which also makes the
   figures readable rather than merely fitting. */
@media(max-width:519px){
  .out{grid-template-columns:1fr;gap:9px}
  .out>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
  .out .ol{margin-top:0;text-align:right}
}
/* belt and braces: a grid child defaults to min-width:auto, which is what let
   an unbreakable number widen its own column in the first place */
.out>div,.nums>div,.eco-outs>div{min-width:0}