/* ============================================================
   Future Hails — public site
   Electric Green #40EA70 · Trust Blue #0A2463
   Premium Black #121212 · White #FFFFFF

   The green is a fill and a glow. On black it reads 11.8:1 and on the navy
   11.9:1, so it carries text on either. On white it is 1.6:1 — never do that.
   Every other colour on this site is derived from the tokens below; there are
   no one-off values.
   ============================================================ */

:root{
  /* ---- brand ---- */
  --green:#40EA70;            /* Electric Green — the one accent */
  --green-hi:#7CFFA6;         /* lighter, for gradients and glows only */
  --green-dk:#23C25A;         /* hover and pressed */
  --green-ink:#08210F;        /* text that sits on green (14.9:1) */
  --navy:#0A2463;             /* Trust Blue — the colour band */
  --navy-hi:#143A9E;
  --blue-soft:#7FB0FF;        /* secondary markers only */
  --black:#121212;            /* Premium Black */
  --white:#FFFFFF;

  /* ---- surfaces, all derived from navy ---- */
  --bg:#061026;               /* the page */
  --surface:#0C1B3F;          /* cards and panels */
  --surface-2:#12244F;        /* a panel on a panel */
  --deep:#040B1C;             /* footer and the darkest bands */
  --scrim:4,10,28;            /* the one dark used for every overlay */

  /* ---- ink ---- */
  --ink:#FFFFFF;
  --ink-2:rgba(255,255,255,.72);
  --ink-muted:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);

  /* ---- aliases kept so older rules keep working ---- */
  --lime:var(--green);
  --lime-dark:var(--green-dk);
  --ink-900:var(--deep);
  --blue:var(--navy);
  --blue-2:var(--navy-hi);
  --grey:var(--surface);
  --grey-2:var(--surface-2);

  --r:10px;
  --r-card:16px;
  --r-xl:26px;
  --shell:1200px;
  --nav-h:76px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.62; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--lime); color:var(--black); }

h1,h2,h3,h4,.display{
  font-family:"Montserrat","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:800; letter-spacing:-0.03em; line-height:1.03; margin:0; text-wrap:balance;
}
h1{ font-size:clamp(42px,6.4vw,78px); }
h2{ font-size:clamp(30px,4.2vw,52px); }
h3{ font-size:clamp(19px,1.7vw,23px); font-weight:700; letter-spacing:-0.02em; line-height:1.2; }
p{ margin:0; }

.shell{ max-width:var(--shell); margin:0 auto; padding:0 24px; position:relative; }
.section{ padding:clamp(72px,9vw,132px) 0; position:relative; }
.section.tight{ padding:clamp(54px,6.5vw,88px) 0; }
.section.grey{ background:var(--surface); }
.section.navy{ background:var(--surface-2); }
.section.dark{ background:var(--ink-900); color:var(--white); }
.section.blue{ background:var(--blue); color:var(--white); }

/* film grain — stops big flat blocks looking like a template */
.section::before, .hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.section > .shell{ z-index:1; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue); margin-bottom:20px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--lime); }
.eyebrow{ color:var(--lime); }

.lead{ font-size:clamp(16.5px,1.5vw,19.5px); color:var(--ink-2); max-width:60ch; line-height:1.65; }
.muted{ color:var(--ink-muted); font-size:14px; }

/* ---------------- buttons ---------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border-radius:var(--r); overflow:hidden;
  font-family:inherit; font-size:15px; font-weight:700; line-height:1; letter-spacing:-0.01em;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-lime{ background:var(--lime); color:var(--black); border-color:var(--lime); box-shadow:0 0 0 0 rgba(64,234,112,.45); }
.btn-lime:hover{ background:var(--lime-dark); border-color:var(--lime-dark); transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(64,234,112,.75); }
.btn-outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.4); }
.btn-outline:hover{ background:var(--white); color:var(--black); border-color:var(--white); transform:translateY(-2px); }
.btn-ghost{ background:rgba(255,255,255,.06); color:var(--white); border-color:rgba(255,255,255,.34); backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:var(--white); color:var(--black); border-color:var(--white); transform:translateY(-2px); }
.btn-sm{ padding:11px 20px; font-size:14px; }
.btn-block{ width:100%; }
.btn-row{ display:flex; gap:13px; flex-wrap:wrap; margin-top:34px; }

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(var(--scrim),.82); backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s, box-shadow .3s;
}
.nav.scrolled{ border-bottom-color:var(--line); box-shadow:0 14px 34px -24px rgba(0,0,0,.9); }
.nav.on-dark:not(.scrolled){ background:transparent; }
.nav-logo .dark-logo{ display:none; }
.nav-logo .light-logo{ display:block; }

.nav-in{ max-width:var(--shell); margin:0 auto; padding:0 24px; height:var(--nav-h); display:flex; align-items:center; gap:18px; }
.nav-logo{ display:flex; align-items:center; text-decoration:none; }
.nav-logo img{ height:34px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav-links a{
  position:relative; padding:9px 15px; border-radius:var(--r);
  font-size:14.5px; font-weight:600; text-decoration:none; color:rgba(255,255,255,.86);
  transition:background .18s, color .18s;
}
.nav-links a:hover{ background:rgba(255,255,255,.1); color:var(--white); }
.nav-links a.current{ color:var(--lime); }
.nav-cta{ margin-left:12px; }
.nav-toggle{
  display:none; margin-left:auto; width:46px; height:46px;
  border:1.5px solid rgba(255,255,255,.4); border-radius:var(--r); background:transparent;
  cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--white); position:relative; transition:background .2s; }
.nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--white);
  transition:transform .28s var(--ease), top .28s var(--ease);
}
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent !important; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:960px){
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none; position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:14px 18px 22px; margin-left:0;
    box-shadow:0 26px 50px -30px rgba(0,0,0,.9);
  }
  .nav-links.open{ display:flex; animation:menuIn .32s var(--ease); }
  .nav-links a{ padding:14px 12px; font-size:16.5px; }
  .nav-cta{ margin:10px 0 0; }
  @keyframes menuIn{ from{ opacity:0; transform:translateY(-10px);} to{ opacity:1; transform:none; } }
}

/* ---------------- hero ---------------- */
.hero{
  position:relative; overflow:hidden; color:var(--white);
  background:
    radial-gradient(1200px 620px at 78% 8%, rgba(20,58,158,.62), transparent 62%),
    radial-gradient(900px 500px at 8% 92%, rgba(64,234,112,.10), transparent 60%),
    linear-gradient(175deg,#030814 0%, #071634 46%, var(--navy) 100%);
  margin-top:calc(var(--nav-h) * -1); padding-top:var(--nav-h);
}
.hero-in{ padding-top:clamp(48px,5.5vw,84px); padding-bottom:clamp(10px,2vw,24px); }
.hero-grid{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(24px,4vw,52px); align-items:center; }
.hero h1{ font-size:clamp(44px,6.8vw,86px); }
.hero h1 .accent{
  background:linear-gradient(100deg,var(--green) 0%, var(--green-hi) 48%, var(--green) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{ margin-top:24px; max-width:50ch; }
.trustline{
  margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  font-size:13px; font-weight:600; letter-spacing:.01em; color:rgba(255,255,255,.7);
}
.trustline b{ font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.trustline i{ width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px var(--lime); display:inline-block; }
.hero-stage{ position:relative; }
.hero-stage svg{ width:100%; height:auto; display:block; overflow:visible; }
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-stage{ order:-1; margin:0 -10px 6px; }
}

/* the ticker under the hero.
   Restraint is the whole point here: a near-black band, hairline edges,
   light letterspaced type and no accent colour at all. Green is reserved
   for the one thing on a page worth tapping, so it does not appear in a
   passive strip of claims. */
.ticker{
  background:var(--deep); color:rgba(255,255,255,.62); overflow:hidden; padding:17px 0;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker-track{ display:flex; width:max-content; animation:slide 72s linear infinite; }
.ticker span{
  font-family:"Inter",sans-serif; font-weight:500; font-size:11.5px;
  letter-spacing:.26em; text-transform:uppercase; padding:0 30px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:30px;
}
/* a hairline, not a jewel */
.ticker span::after{ content:""; width:1px; height:13px; background:rgba(255,255,255,.17); }
@keyframes slide{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------------- layout bits ---------------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:960px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
@media (max-width:960px){ .split{ grid-template-columns:1fr; } }
.head-wide{ max-width:44ch; }

.card{
  position:relative; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-card); padding:34px 30px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.card.lift:hover{ transform:translateY(-6px); border-color:var(--lime); box-shadow:0 30px 60px -34px rgba(64,234,112,.35); }
.card h3{ margin-bottom:13px; }
.card p{ color:var(--ink-2); font-size:15.5px; }
.section.dark .card, .section.blue .card, .hero .card{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
}

/* the lime hairline that draws in on hover */
.card.rule-top::after{
  content:""; position:absolute; left:30px; right:30px; top:-1px; height:2px;
  background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.card.rule-top:hover::after{ transform:scaleX(1); }

.icon-badge{
  width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  background:var(--lime); color:var(--black); margin-bottom:22px;
  box-shadow:0 10px 28px -12px rgba(64,234,112,.9);
}
.icon-badge svg{ width:26px; height:26px; }
.section.dark .icon-badge{ box-shadow:0 10px 30px -10px rgba(64,234,112,.55); }

/* stat band */
.stat .num{
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:clamp(46px,6vw,74px);
  line-height:.95; letter-spacing:-0.045em; color:var(--lime);
  text-shadow:0 0 44px rgba(64,234,112,.32);
}
.stat .num small{ font-size:.52em; letter-spacing:-0.02em; margin-left:2px; }
.stat .lbl{ margin-top:14px; font-weight:700; font-size:16.5px; }
.stat .sub{ margin-top:7px; font-size:14.5px; color:rgba(255,255,255,.62); max-width:32ch; }
.stat-sep{ border-top:1px solid rgba(255,255,255,.16); padding-top:30px; }

/* steps */
.step .n{
  width:50px; height:50px; border-radius:50%; background:var(--lime); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:19px; margin-bottom:22px;
  box-shadow:0 12px 30px -12px rgba(64,234,112,.9);
}

.ticks{ list-style:none; padding:0; margin:22px 0 0; }
.ticks li{ position:relative; padding-left:32px; margin-bottom:13px; font-size:15.5px; color:var(--ink-2); }
.ticks li::before{ content:""; position:absolute; left:0; top:6px; width:19px; height:19px; border-radius:50%; background:var(--lime); }
.ticks li::after{
  content:""; position:absolute; left:5.5px; top:11.5px; width:8px; height:4px;
  border-left:2.2px solid var(--black); border-bottom:2.2px solid var(--black); transform:rotate(-45deg);
}


.frame{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:var(--ink-900); box-shadow:0 40px 90px -46px rgba(var(--scrim),.70);
}
.frame svg, .frame img{ display:block; width:100%; height:auto; }

/* pull-quote band */
.quote{ font-family:"Montserrat",sans-serif; font-weight:700; font-size:clamp(24px,3.4vw,42px); line-height:1.18; letter-spacing:-0.03em; }
.quote em{ font-style:normal; color:var(--lime); }

/* ---------------- forms ---------------- */
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:34px 30px; box-shadow:0 30px 70px -40px rgba(0,0,0,.85); }
.form-card form{ margin-top:24px; }
.field{ margin-bottom:17px; }
.field label{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.02em; margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 15px; border:1.5px solid var(--line-2); border-radius:var(--r);
  font-family:inherit; font-size:15px; color:var(--ink); background:rgba(255,255,255,.05);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.42); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--lime); background:rgba(255,255,255,.08);
  box-shadow:0 0 0 4px rgba(64,234,112,.18);
}
.field select option{ background:var(--surface); color:var(--white); }
input[type=file]::file-selector-button{
  background:var(--lime); color:var(--black); border:0; border-radius:6px;
  padding:8px 14px; font-family:inherit; font-weight:700; font-size:13px; margin-right:12px; cursor:pointer;
}
.field textarea{ min-height:112px; resize:vertical; }
.field .help{ margin-top:7px; font-size:12.5px; color:var(--ink-muted); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:620px){ .field-row{ grid-template-columns:1fr; } }
input[type=file]{ padding:12px; font-size:14px; }
.benefits{ background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; margin:8px 0 4px; }
.benefits .ttl{ font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); }
.benefits .ticks{ margin-top:14px; }
.benefits .ticks li{ margin-bottom:9px; font-size:14.5px; }

/* module rows */
.module{ display:flex; align-items:flex-start; gap:15px; padding:18px 0; border-bottom:1px solid var(--line); }
.module:last-child{ border-bottom:0; }
.module .box{ width:21px; height:21px; flex:0 0 auto; margin-top:2px; border:1.6px solid rgba(255,255,255,.35); border-radius:6px; background:transparent; }
.module .box.done{ background:var(--lime); border-color:var(--lime); }
.module .name{ font-weight:700; font-size:15.5px; }
.module .meta{ margin-top:4px; font-size:13px; color:var(--ink-muted); }
.pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.1); color:var(--ink-2); margin-left:8px; vertical-align:middle; }
.pill.live{ background:var(--lime); color:var(--black); }
.bar{ height:6px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; margin-top:10px; }
.bar > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lime-dark),var(--lime)); transition:width 1.4s var(--ease); }

/* tiers */
.tier{ display:flex; flex-direction:column; }
.tier .tier-tag{
  align-self:flex-start; padding:6px 13px; border-radius:999px; background:var(--lime); color:var(--black);
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px;
}
.tier .btn{ margin-top:auto; }
.tier .ticks{ margin-bottom:30px; }

/* ---------------- footer ---------------- */
.footer{ background:var(--deep); color:var(--white); padding:80px 0 32px; position:relative; overflow:hidden; }
.footer::after{
  content:""; position:absolute; left:0; right:0; bottom:-140px; height:280px;
  background:radial-gradient(600px 180px at 18% 0%, rgba(64,234,112,.16), transparent 70%);
  pointer-events:none;
}
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:38px; position:relative; z-index:1; }
@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer img.mark{ height:36px; width:auto; }
.footer h4{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); margin-bottom:18px; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin-bottom:11px; }
.footer a{ color:rgba(255,255,255,.74); text-decoration:none; font-size:15px; transition:color .2s, padding-left .25s var(--ease); }
.footer a:hover{ color:var(--lime); padding-left:4px; }
.footer .blurb{ color:rgba(255,255,255,.6); font-size:15px; margin-top:18px; max-width:34ch; }
.footer-base{
  margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13.5px; color:rgba(255,255,255,.55); position:relative; z-index:1;
}

.rule{ height:3px; background:linear-gradient(90deg,var(--blue),var(--lime)); }
.center{ text-align:center; }
.center .lead{ margin-left:auto; margin-right:auto; }
.center .eyebrow{ justify-content:center; }
.mt-l{ margin-top:52px; } .mt-m{ margin-top:30px; } .mt-s{ margin-top:16px; }
.anchor{ scroll-margin-top:100px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:14px; top:14px; z-index:99; background:var(--lime); color:var(--black); padding:11px 18px; border-radius:var(--r); font-weight:700; }

/* ============================================================
   MOTION
   Everything below is disabled wholesale for anyone who asks
   their device for less motion — see the last block.
   ============================================================ */

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .85s var(--ease), transform .85s var(--ease); transition-delay:var(--d,0ms); }
.reveal.in{ opacity:1; transform:none; }
.reveal-l{ opacity:0; transform:translateX(-30px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms); }
.reveal-l.in{ opacity:1; transform:none; }
.reveal-r{ opacity:0; transform:translateX(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms); }
.reveal-r.in{ opacity:1; transform:none; }
.reveal-s{ opacity:0; transform:scale(.94); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms); }
.reveal-s.in{ opacity:1; transform:none; }

/* headline that rises line by line */
.rise{ display:block; overflow:hidden; }
.rise > span{ display:block; transform:translateY(105%); transition:transform 1s var(--ease); transition-delay:var(--d,0ms); }
.loaded .rise > span, .rise.in > span{ transform:none; }

/* hero fades that run on load rather than on scroll */
.load-fade{ opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms); }
.loaded .load-fade{ opacity:1; transform:none; }

/* the animated scene */
.dashes{ animation:dashRun 1.1s linear infinite; }
@keyframes dashRun{ to{ stroke-dashoffset:-96; } }
.wheel-spin{ transform-box:fill-box; transform-origin:center; animation:spin .55s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.bob{ animation:bob 3.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
.pulse-glow{ animation:pulseGlow 2.6s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{ opacity:.55;} 50%{ opacity:1;} }
.drift-slow{ animation:drift 46s linear infinite; }
.drift-fast{ animation:drift 26s linear infinite; }
@keyframes drift{ to{ transform:translateX(-50%); } }
.twinkle{ animation:twinkle 4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.25;} 50%{ opacity:.9;} }
.trail{ animation:trail 1.8s ease-out infinite; }
@keyframes trail{ 0%{ opacity:0; transform:translateX(0) scaleX(.5);} 20%{ opacity:.85;} 100%{ opacity:0; transform:translateX(-230px) scaleX(1.5);} }

/* a stroke that draws itself when it scrolls into view */
.draw{ stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); transition:stroke-dashoffset 2.4s var(--ease); }
.draw.in{ stroke-dashoffset:0; }

/* map pins that pop in sequence */
.pin-pop{ opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center bottom; transition:opacity .5s var(--ease), transform .6s cubic-bezier(.2,1.5,.4,1); transition-delay:var(--d,0ms); }
.pin-pop.in{ opacity:1; transform:none; }

.parallax{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition-duration:.01ms !important; }
  .reveal,.reveal-l,.reveal-r,.reveal-s,.load-fade{ opacity:1 !important; transform:none !important; }
  .rise > span{ transform:none !important; }
  .draw{ stroke-dashoffset:0 !important; }
  .pin-pop{ opacity:1 !important; transform:none !important; }
  .parallax{ transform:none !important; }
}

/* ---- seamless scene drift (two copies of each layer, 760 units apart) ---- */
@keyframes driftLayer{ from{ transform:translateX(0);} to{ transform:translateX(-760px);} }
.sky-far{ animation:driftLayer 78s linear infinite; }
.sky-near{ animation:driftLayer 44s linear infinite; }
.ground-run{ animation:driftLayer 9s linear infinite; }

/* ---- the vision / mission spread ---- */
.vm{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); }
@media (max-width:960px){ .vm{ grid-template-columns:1fr; } }
.vm-block{ position:relative; padding-left:26px; }
.vm-block::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--lime),rgba(64,234,112,0));
}
.vm-label{
  font-family:"Montserrat",sans-serif; font-size:11.5px; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase; color:var(--lime); margin-bottom:18px;
}
.vm-text{
  font-family:"Montserrat",sans-serif; font-weight:700; letter-spacing:-0.028em; line-height:1.18;
  font-size:clamp(22px,2.5vw,32px); color:var(--white);
}
.vm-text b{ color:var(--lime); font-weight:700; }

/* ---- map of the expansion ---- */
.map-wrap{ position:relative; }
.map-wrap svg{ width:100%; height:auto; display:block; overflow:visible; }
.map-legend{ display:flex; gap:22px; flex-wrap:wrap; margin-top:26px; font-size:14px; color:rgba(255,255,255,.72); }
.map-legend span{ display:inline-flex; align-items:center; gap:9px; }
.map-legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ---- marquee of the promise ---- */
.promise{ background:var(--deep); }
.promise .ticker-track{ animation-duration:88s; }

/* ---- the usual hail, next to a Future Hails ride ---- */
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
@media (max-width:820px){ .vs{ grid-template-columns:1fr; } }
.vs-col{ padding:0; }
.vs-col + .vs-col{ border-left:1px solid var(--line); }
@media (max-width:820px){ .vs-col + .vs-col{ border-left:0; border-top:1px solid var(--line); } }
.vs-head{
  padding:22px 26px; font-family:"Montserrat",sans-serif; font-weight:800;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.vs-col.them .vs-head{ color:var(--ink-muted); background:rgba(255,255,255,.02); }
.vs-col.us .vs-head{ color:var(--black); background:var(--lime); }
.vs-row{
  padding:20px 26px; font-size:15.5px; line-height:1.55;
  border-bottom:1px solid var(--line); min-height:96px;
  display:flex; align-items:center; gap:13px;
}
.vs-row:last-child{ border-bottom:0; }
.vs-col.them .vs-row{ color:var(--ink-muted); }
.vs-col.us .vs-row{ color:var(--ink); font-weight:500; }
.vs-row .m{ flex:0 0 auto; width:20px; height:20px; }
.vs-col.them .m{ color:rgba(255,255,255,.28); }
.vs-col.us .m{ color:var(--lime); }
@media (max-width:820px){ .vs-row{ min-height:0; } }

/* ---- photography: framed, graded, and kept alive ---- */
.shot{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--r-xl); border:1px solid rgba(255,255,255,.14);
  background:var(--ink-900);
  box-shadow:0 46px 100px -48px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04) inset;
  isolation:isolate;
}
.shot img{ display:block; width:100%; height:auto; transform-origin:52% 58%; animation:kenburns 34s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.004);} to{ transform:scale(1.045);} }

/* the light that travels across the paint */
.shot-sweep{
  position:absolute; inset:-10% -30%; pointer-events:none; z-index:2;
  background:linear-gradient(104deg, transparent 40%, rgba(255,255,255,.13) 47%, rgba(64,234,112,.10) 50%, transparent 58%);
  transform:translateX(-115%); animation:sweep 9s ease-in-out infinite;
}
@keyframes sweep{ 0%,58%{ transform:translateX(-115%);} 100%{ transform:translateX(115%);} }

/* the roof sign breathing */
.shot-glow{
  position:absolute; left:56%; top:16%; width:24%; height:13%; z-index:1; pointer-events:none;
  border-radius:50%; filter:blur(18px);
  background:radial-gradient(closest-side, rgba(64,234,112,.55), rgba(64,234,112,0));
  animation:pulseGlow 3.4s ease-in-out infinite; mix-blend-mode:screen;
}
/* a floor so the photo sits into the page rather than on it */
.shot::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(var(--scrim),.62), rgba(var(--scrim),0));
}
.frame.shot{ box-shadow:0 46px 100px -52px rgba(0,0,0,.9); }
@media (prefers-reduced-motion: reduce){
  .shot img{ animation:none !important; transform:none !important; }
  .shot-sweep, .shot-glow{ display:none; }
}

/* ---- the hero: copy first, then the car across the full width ---- */
.hero-copy{ max-width:62ch; }
.hero-band{
  position:relative; overflow:hidden; margin-top:clamp(20px,3vw,40px);
}
.hero-band img{
  width:100%; height:auto; display:block;
  animation:kenburns 38s ease-in-out infinite alternate; transform-origin:50% 62%;
}
.hero-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(var(--scrim),.55) 0%, rgba(var(--scrim),0) 22%),
    linear-gradient(to top, rgba(var(--scrim),.85) 0%, rgba(var(--scrim),0) 30%);
}

@media (prefers-reduced-motion: reduce){ .hero-band img{ animation:none !important; } }

/* ============================================================
   HERO — the photograph sits behind the words
   ============================================================ */
.hero{ display:flex; align-items:flex-end; min-height:min(74vh, 720px); }
.hero > .shell{ width:100%; }
.hero-in{ padding-top:clamp(104px,12vw,168px); padding-bottom:clamp(56px,6vw,88px); }
.hero-copy{ max-width:60ch; }
.hero-copy .lead{ max-width:44ch; }

.hero-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero-bg picture, .hero-bg img{ display:block; width:100%; height:100%; }
.hero-bg img{
  object-fit:cover; object-position:58% 60%;
  transform-origin:58% 60%;
  animation:tracking 26s ease-in-out infinite alternate;
}
/* a slow tracking move, so the streaked street keeps travelling */
@keyframes tracking{
  from{ transform:scale(1.035) translate3d(0.9%,0,0); }
  to{   transform:scale(1.035) translate3d(-0.9%,0,0); }
}
/* light skimming down the road, the way it does at speed */
.hero-bg::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:22%; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.06) 42%, rgba(64,234,112,.07) 50%, transparent 72%);
  transform:translateX(-60%); animation:roadRush 3.6s linear infinite;
}
@keyframes roadRush{ from{ transform:translateX(-60%);} to{ transform:translateX(60%);} }
/* the scrim: heavy on the left where the words are, light over the car */
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(96deg, rgba(var(--scrim),.96) 0%, rgba(var(--scrim),.92) 24%, rgba(var(--scrim),.72) 40%, rgba(10,36,99,.34) 62%, rgba(10,36,99,.20) 80%, rgba(var(--scrim),.55) 100%),
    linear-gradient(to top, rgba(var(--scrim),.97) 0%, rgba(var(--scrim),.38) 24%, rgba(var(--scrim),0) 50%),
    linear-gradient(to bottom, rgba(var(--scrim),.78) 0%, rgba(var(--scrim),0) 20%);
}
.hero .shot-sweep{ z-index:1; }
.hero::before{ z-index:1; }

@media (max-width:920px){
  .hero{ min-height:min(92vh, 760px); }
  .hero-bg img{ object-position:58% 62%; }
  .hero-scrim{
    background:
      linear-gradient(to top, rgba(var(--scrim),.97) 0%, rgba(var(--scrim),.84) 34%, rgba(var(--scrim),.44) 62%, rgba(var(--scrim),.58) 100%),
      linear-gradient(to bottom, rgba(var(--scrim),.80) 0%, rgba(var(--scrim),0) 26%);
  }
  .hero-in{ padding-top:clamp(92px,20vw,140px); padding-bottom:clamp(38px,8vw,64px); }
}
@media (prefers-reduced-motion: reduce){ .hero-bg img{ animation:none !important; } .hero-bg::after{ display:none; } }

/* ---- the hero asks you to keep going, instead of asking for a click ---- */
.scrollcue{
  position:absolute; left:24px; bottom:clamp(22px,3vw,34px); z-index:2;
  display:inline-flex; align-items:center; gap:14px; text-decoration:none;
  color:rgba(255,255,255,.72); font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; transition:color .25s;
}
.scrollcue:hover{ color:var(--lime); }
.scrollcue-line{ position:relative; display:block; width:2px; height:46px; background:rgba(255,255,255,.22); overflow:hidden; border-radius:2px; }
.scrollcue-line i{ position:absolute; left:0; top:0; width:2px; height:18px; background:var(--lime); animation:cueRun 2.1s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes cueRun{ 0%{ transform:translateY(-20px); opacity:0; } 25%{ opacity:1; } 100%{ transform:translateY(46px); opacity:0; } }
@media (max-width:920px){ .scrollcue{ left:20px; bottom:18px; font-size:11px; gap:11px; } .scrollcue-line{ height:36px; } }
@media (prefers-reduced-motion: reduce){ .scrollcue-line i{ animation:none; height:46px; } }

/* ---- a full-width photograph between sections ---- */
.team-band{ padding:0; background:var(--bg); }
.team-band .shot{ border-radius:0; border-left:0; border-right:0; box-shadow:none; }
.team-band img{ width:100%; height:auto; display:block; }

/* ---------- WhatsApp ---------- */
.wa-fab{
  position:fixed; right:clamp(16px,2.4vw,26px); bottom:clamp(16px,2.4vw,26px);
  z-index:70; display:flex; align-items:center; gap:0;
  height:56px; padding:0 16px; border-radius:999px;
  background:#25D366; color:#06220F; text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), gap .3s var(--ease);
}
.wa-fab svg{ width:26px; height:26px; flex:none; }
.wa-fab-label{
  font-weight:700; font-size:15px; white-space:nowrap;
  max-width:0; overflow:hidden; opacity:0;
  transition:max-width .34s var(--ease), opacity .24s var(--ease);
}
.wa-fab.is-open{ gap:10px; }
.wa-fab.is-open .wa-fab-label{ max-width:140px; opacity:1; }
.wa-fab:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.18) inset; gap:10px; }
.wa-fab:hover .wa-fab-label{ max-width:140px; opacity:1; }
.wa-fab:focus-visible{ outline:3px solid var(--white); outline-offset:3px; }

/* Beside a form: an alternative, not a competitor to the submit button. */
.btn-wa{ background:transparent; color:var(--white); border-color:rgba(37,211,102,.55); }
.btn-wa svg{ width:17px; height:17px; color:#25D366; transition:transform .3s var(--ease); }
.btn-wa:hover{ background:#25D366; color:#06220F; border-color:#25D366; transform:translateY(-2px); }
.btn-wa:hover svg{ color:#06220F; transform:none; }
.wa-or{ margin-top:14px; font-size:14px; color:rgba(255,255,255,.55); }

@media (max-width:640px){
  .wa-fab{ height:52px; padding:0 14px; }
  .wa-fab svg{ width:24px; height:24px; }
}
@media (prefers-reduced-motion:reduce){
  .wa-fab, .wa-fab-label, .btn-wa, .btn-wa svg{ transition:none; }
}
.wa-fab.is-tucked{ opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .wa-fab.is-tucked{ transform:none; } }