/* ==========================================================================
   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 logo.jpg):
     #2F3857  navy      — logo circle + "FUTURE" wordmark
     #4DBEB8  teal      — the lightning bolt (the brand's signature form)
     #45B455  green     — the cityscape hills
   ========================================================================== */

:root {
  /* ---- Core brand ---- */
  --fm-navy:        #2F3857;
  --fm-navy-deep:   #1C2238;
  --fm-navy-soft:   #3D4870;

  --fm-teal:        #4DBEB8;
  /* Text-safe accents. Tuned so small text 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 these — the brighter --fm-teal / --fm-green are for fills
     and strokes only, never for small text. */
  --fm-teal-deep:   #25706B;   /* 5.82:1 on white */
  --fm-teal-glow:   #7FD6D1;

  --fm-green:       #45B455;
  --fm-green-deep:  #24702E;   /* 6.12:1 on white */

  --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(77, 190, 184, .28);

  /* ---- 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:    226 30% 26%;   /* #2F3857 */
  --brand-teal:    177 45% 36%;   /* #2E8B84 */
  --brand-teal-lt: 177 45% 52%;   /* #4DBEB8 */
  --brand-green:   128 45% 49%;   /* #45B455 */
  --primary:       177 45% 40%;
  --ring:          177 45% 40%;
  --accent:        177 45% 52%;
}

/* ==========================================================================
   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: linear-gradient(118deg, var(--fm-teal) 0%, var(--fm-green) 100%);
  color: #fff;
  box-shadow: var(--fm-shadow-teal);
}
.fm-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(77,190,184,.38); }

.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;
}

/* ==========================================================================
   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: linear-gradient(140deg, var(--fm-teal), var(--fm-green));
  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;
}