/* ==========================================================================
   fm-brand.css — Future Motors EV brand layer
   --------------------------------------------------------------------------
   Loaded AFTER style.css so it retunes the inherited tokens to the exact
   colours sampled from the Future Motors logo, then defines the primitives
   the new sections are built from.

   Colour source (sampled from the official logo files, Oct 2026 —
   public/assets/imgs/brand/):
     #15254C  navy       — logo circle + "FUTURE" wordmark
     #3FC0B6  teal       — the bolt's light faces
     #0D927F  teal-mid   — the bolt's deep faces + "MOTORS" wordmark
     #0B7568  teal-deep  — the bolt's shadow tone; the text-safe teal

   The official logo is navy + teal only. The green used previously came from
   the cityscape on an old promotional poster, not the logo, so it has been
   retired: --fm-green / --fm-green-deep remain only as aliases so existing
   rules pick up the bolt teal without being rewritten.

   Gradients follow the logo itself:
     --fm-grad-bolt   light → deep teal (the bolt). Decorative fills only.
     --fm-grad-cta    deep teal → navy (bolt on the circle). Anything with
                      white text on it — buttons, active tabs, pills.
     --fm-grad-brand  navy → teal sweep. Rules, dividers, bars.
   ========================================================================== */

:root {
  /* ---- Core brand ---- */
  --fm-navy:        #15254C;   /* 15.0:1 on white */
  --fm-navy-deep:   #0C1733;
  --fm-navy-soft:   #24396E;

  --fm-teal:        #3FC0B6;
  --fm-teal-mid:    #0D927F;   /* 3.9:1 on white — icons, large text, fills */
  /* Text-safe accent. Clears WCAG AA 4.5:1 on white, on --fm-mist, and on
     the 11-12% brand tints used by the chips/badges. Do not lighten it — the
     brighter --fm-teal / --fm-teal-mid are for fills and strokes, never for
     small text. */
  --fm-teal-deep:   #0B7568;   /* 5.59:1 on white */
  --fm-teal-glow:   #84D8D1;

  /* Retired green → aliases of the bolt teal (see header). */
  --fm-green:       var(--fm-teal-mid);
  --fm-green-deep:  var(--fm-teal-deep);

  /* Channels, for inline rgba(var(--fm-teal-rgb), .08) tints. */
  --fm-teal-rgb:    13, 146, 127;
  --fm-navy-rgb:    21, 37, 76;

  --fm-grad-bolt:   linear-gradient(140deg, var(--fm-teal) 0%, var(--fm-teal-mid) 100%);
  --fm-grad-cta:    linear-gradient(120deg, var(--fm-teal-mid) 0%, var(--fm-navy) 100%);
  --fm-grad-brand:  linear-gradient(90deg, var(--fm-navy) 0%, var(--fm-teal-mid) 55%, var(--fm-teal) 100%);
  --fm-grad-glow:   linear-gradient(118deg, var(--fm-teal-glow) 0%, var(--fm-teal) 100%);

  --fm-ink:         #131824;
  --fm-slate:       #5A6478;
  --fm-mist:        #F2F5F7;
  --fm-line:        #E2E8ED;
  --fm-white:       #FFFFFF;

  /* ---- Signature geometry: the bolt angle ---- */
  --fm-bolt-cut:    18px;      /* clipped corner size on data cards */
  --fm-shear:       -3.2deg;   /* diagonal used by section dividers */

  /* ---- Radii / elevation ---- */
  --fm-r-sm: 10px;
  --fm-r:    16px;
  --fm-r-lg: 24px;
  --fm-shadow-1: 0 2px 8px rgba(19, 24, 36, .05);
  --fm-shadow-2: 0 12px 32px rgba(19, 24, 36, .09);
  --fm-shadow-3: 0 28px 64px rgba(19, 24, 36, .16);
  --fm-shadow-teal: 0 12px 34px rgba(13, 146, 127, .26);

  /* ---- Motion ---- */
  --fm-ease: cubic-bezier(.23, 1, .32, 1);
  --fm-dur: .55s;

  /* ---- Retune the tokens inherited from the compiled style.css so every
          legacy section on the other pages shifts to the real logo colours
          without touching their markup. ---- */
  --brand-navy:    222 57% 19%;   /* #15254C */
  --brand-teal:    171 84% 31%;   /* #0D927F */
  --brand-teal-lt: 175 51% 50%;   /* #3FC0B6 */
  --brand-green:   171 84% 31%;   /* retired → teal-mid */
  --primary:       171 84% 31%;
  --ring:          171 84% 31%;
  --accent:        175 51% 50%;
}

/* ==========================================================================
   Typography roles
   Display  : Plus Jakarta Sans  — headlines, tightened tracking, weight 800
   Body     : Space Grotesk      — prose
   Readout  : Space Grotesk      — data, tabular figures, wide caps labels
   ========================================================================== */

.fm-display {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.04;
  color: var(--fm-ink);
}

.fm-h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
.fm-h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.fm-h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); letter-spacing: -.018em; }

.fm-body {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  color: var(--fm-slate);
  line-height: 1.68;
  font-size: 1rem;
}

/* The "instrument readout" role — every number on the site uses this. */
.fm-readout {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
  font-weight: 700;
}

.fm-label {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fm-teal-deep);
}

.fm-label--light { color: var(--fm-teal-glow); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.fm-wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Font safety net.
   The new sections sit inside the inherited compiled stylesheet, so rather
   than relying on whatever body font that sets, every Future Motors section
   establishes the body face for its subtree. Child rules that declare their
   own font-family still win — these are single-class selectors. */
.fm-hero,
.fm-section,
.fm-sticky,
.fm-selector,
.fm-map {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
}

@media (min-width: 1024px) { .fm-wrap { padding-inline: 32px; } }

.fm-section { padding-block: clamp(64px, 8vw, 108px); position: relative; }
.fm-section--tight { padding-block: clamp(44px, 5vw, 72px); }
.fm-section--mist  { background: var(--fm-mist); }
.fm-section--navy  { background: var(--fm-navy-deep); color: #fff; }
.fm-section--navy .fm-display { color: #fff; }
.fm-section--navy .fm-body    { color: rgba(255,255,255,.66); }

/* Section head */
.fm-head { max-width: 640px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.fm-head--center { margin-inline: auto; text-align: center; }
.fm-head .fm-label { display: block; margin-bottom: 14px; }
.fm-head .fm-body  { margin-top: 16px; }

/* The bolt-cut divider: a sheared band echoing the logo's diagonal. */
.fm-shear-top,
.fm-shear-bottom { position: relative; }

.fm-shear-top::before,
.fm-shear-bottom::after {
  content: "";
  position: absolute;
  left: -5%;
  width: 110%;
  height: 64px;
  background: inherit;
  transform: rotate(var(--fm-shear));
  pointer-events: none;
}

.fm-shear-top::before    { top: -30px; }
.fm-shear-bottom::after  { bottom: -30px; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.fm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s var(--fm-ease), box-shadow .25s var(--fm-ease),
              background-color .25s var(--fm-ease), color .25s var(--fm-ease);
}

.fm-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.fm-btn--primary {
  background: var(--fm-grad-cta);
  color: #fff;
  box-shadow: var(--fm-shadow-teal);
}
.fm-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(13,146,127,.36); }

.fm-btn--navy { background: var(--fm-navy); color: #fff; box-shadow: var(--fm-shadow-2); }
.fm-btn--navy:hover { background: var(--fm-navy-deep); transform: translateY(-2px); }

.fm-btn--ghost {
  background: transparent;
  color: var(--fm-navy);
  border: 1.5px solid var(--fm-line);
}
.fm-btn--ghost:hover { border-color: var(--fm-teal); color: var(--fm-teal-deep); }

.fm-btn--on-dark {
  background: rgba(255,255,255,.07);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fm-btn--on-dark:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); }

.fm-btn:focus-visible {
  outline: 3px solid var(--fm-teal);
  outline-offset: 3px;
}

/* ==========================================================================
   Logo lockup (nav + footer)
   The official horizontal logo already carries the wordmark, so it is shown
   whole rather than as a small tile next to typed text. Two images are
   output: the colour version, and a white one for dark backgrounds. The nav
   swaps to the white one while fm-core.js has it floating over a hero.
   ========================================================================== */

.fm-brandmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
}

.fm-brandmark img { display: block; width: auto; height: 38px; }
.fm-brandmark--footer img { height: 52px; }

/* Only one of the pair is ever visible. */
.fm-brandmark__white { display: none !important; }
.fm-brandmark--on-dark .fm-brandmark__color { display: none !important; }
.fm-brandmark--on-dark .fm-brandmark__white { display: block !important; }

/* No white file uploaded → knock the colour logo out to white instead. */
.fm-brandmark__white--derived { filter: brightness(0) invert(1); }

body.fm-nav-over nav .fm-brandmark__color { display: none !important; }
body.fm-nav-over nav .fm-brandmark__white { display: block !important; }
body.fm-nav-over nav .fm-brandmark img { box-shadow: none; }

/* The light mobile panel is open → back to the colour logo. */
body.mobile-menu-locked.fm-nav-over nav .fm-brandmark__color { display: block !important; }
body.mobile-menu-locked.fm-nav-over nav .fm-brandmark__white { display: none !important; }

@media (max-width: 640px) {
  .fm-brandmark img { height: 32px; }
}

/* ==========================================================================
   Est. 2022 seal — the founding year gets its own visual moment
   (brief §4a: "'Est. 2022' badge treatment")
   ========================================================================== */

.fm-seal {
  position: relative;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
}

.fm-seal__ring {
  position: absolute;
  inset: 0;
  animation: fmSealSpin 26s linear infinite;
}

.fm-seal__ring text {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 8.4px;
  font-weight: 700;
  /* Tuned so the string wraps the 35r circle once without overlapping its
     own tail — shorten the text if you lengthen it. */
  letter-spacing: .17em;
  text-transform: uppercase;
  fill: currentColor;
  opacity: .82;
}

.fm-seal__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--fm-grad-cta);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), var(--fm-shadow-teal);
}

.fm-seal__year {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}

@keyframes fmSealSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Scroll micro-interactions (brief §4a: motion throughout, not just counters)
   ========================================================================== */

.fm-rise {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--fm-ease), transform .7s var(--fm-ease);
  transition-delay: var(--fm-delay, 0ms);
  will-change: opacity, transform;
}
.fm-rise.is-in { opacity: 1; transform: none; }

.fm-rise--left  { transform: translateX(-30px); }
.fm-rise--right { transform: translateX(30px); }
.fm-rise--scale { transform: scale(.955); }

/* ==========================================================================
   Accessibility floor
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .fm-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fm-seal__ring { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

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