/* ==========================================================================
   fm-sections.css — new Future Motors sections
   Every class is hand-authored (no Tailwind utilities) because style.css is a
   frozen compiled artifact — see README. Load AFTER fm-brand.css.
   ========================================================================== */

/* ==========================================================================
   1. VIDEO HERO
   ========================================================================== */

.fm-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--fm-navy-deep);
  isolation: isolate;
}

.fm-hero__media { position: absolute; inset: 0; z-index: 0; }

.fm-hero__media video,
.fm-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Poster shows first; the video fades over it once it can actually play. */
.fm-hero__video { opacity: 0; transition: opacity 1.1s ease; position: absolute; inset: 0; }
.fm-hero__video.is-playing { opacity: 1; }

.fm-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(28,34,56,.72) 0%, rgba(28,34,56,.28) 34%, rgba(28,34,56,.88) 100%),
    linear-gradient(102deg, rgba(28,34,56,.76) 0%, rgba(28,34,56,0) 62%);
}

/* A faint bolt-angle light sweep — the logo's diagonal, used once. */
.fm-hero__sweep {
  position: absolute; inset: -20% -10%; z-index: 2; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(77,190,184,.16) 50%, transparent 62%);
  animation: fmSweep 9s var(--fm-ease) infinite;
}

@keyframes fmSweep {
  0%, 100% { transform: translateX(-16%); opacity: .35; }
  50%      { transform: translateX(16%);  opacity: .85; }
}

.fm-hero__inner {
  position: relative; z-index: 3;
  width: 100%;
  padding-top: 140px;
  padding-bottom: clamp(56px, 7vw, 96px);
}

.fm-hero__grid {
  display: grid;
  gap: 40px;
  align-items: end;
}

@media (min-width: 900px) {
  .fm-hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; }
}

.fm-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
}

.fm-hero__eyebrow-rule {
  width: 44px; height: 2px;
  background: linear-gradient(90deg, var(--fm-teal), transparent);
}

.fm-hero__title {
  color: #fff;
  margin: 0 0 20px;
  text-wrap: balance;
}

.fm-hero__title em {
  font-style: normal;
  background: linear-gradient(118deg, var(--fm-teal-glow), var(--fm-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fm-hero__sub {
  color: rgba(255,255,255,.74);
  max-width: 34rem;
  font-size: 1.05rem;
  margin: 0 0 30px;
}

.fm-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.fm-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

@media (min-width: 900px) { .fm-hero__aside { align-items: flex-end; } }

/* Momentum ticker — animates on every page load, not once on scroll. */
.fm-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
}

.fm-ticker__pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--fm-green);
  box-shadow: 0 0 0 0 rgba(69,180,85,.7);
  animation: fmPulse 2.1s infinite;
  flex-shrink: 0;
}

@keyframes fmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(69,180,85,.65); }
  70%  { box-shadow: 0 0 0 12px rgba(69,180,85,0); }
  100% { box-shadow: 0 0 0 0 rgba(69,180,85,0); }
}

.fm-ticker__num { font-size: 1.15rem; color: #fff; }
.fm-ticker__txt {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 12.5px; color: rgba(255,255,255,.72); line-height: 1.35;
}

.fm-hero__scroll {
  position: absolute; bottom: 22px; left: 50%; z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,.45);
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
}

.fm-hero__scroll svg { width: 16px; height: 16px; animation: fmNudge 2.2s var(--fm-ease) infinite; }

/* On narrow screens the aside (seal + ticker) stacks under the copy and runs
   into the scroll cue, which is purely decorative — drop it. */
@media (max-width: 900px) {
  .fm-hero__scroll { display: none; }
}

@keyframes fmNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ==========================================================================
   2. STAT COUNTERS — bolt-cut cards
   ========================================================================== */

.fm-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 860px) {
  .fm-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

.fm-stat {
  position: relative;
  background: #fff;
  border: 1px solid var(--fm-line);
  padding: 28px 22px 24px;
  overflow: hidden;
  /* The bolt cut: top-right corner sliced on the logo's diagonal. */
  clip-path: polygon(0 0, calc(100% - var(--fm-bolt-cut)) 0, 100% var(--fm-bolt-cut), 100% 100%, 0 100%);
  border-radius: var(--fm-r-sm);
  transition: transform .35s var(--fm-ease), box-shadow .35s var(--fm-ease);
}

.fm-stat::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: var(--fm-bolt-cut); height: var(--fm-bolt-cut);
  background: linear-gradient(225deg, var(--fm-teal), var(--fm-green));
}

.fm-stat:hover { transform: translateY(-5px); box-shadow: var(--fm-shadow-2); }

.fm-stat__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(77,190,184,.12);
  color: var(--fm-teal-deep);
  margin-bottom: 16px;
}

.fm-stat__icon svg,
.fm-stat__icon i { width: 18px; height: 18px; }

.fm-stat__value {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  color: var(--fm-navy);
  line-height: 1;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.fm-stat__label {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 12px;
  color: var(--fm-slate);
  letter-spacing: .01em;
}

.fm-stat__note {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fm-green-deep);
}

/* Supporting line tying momentum + youth + expansion into one message. */
.fm-stats__tie {
  margin-top: 26px;
  text-align: center;
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 14.5px;
  color: var(--fm-slate);
}

.fm-stats__tie strong { color: var(--fm-navy); font-weight: 700; }

/* ==========================================================================
   3. MD / FOUNDER TRUST MESSAGE
   ========================================================================== */

.fm-md__grid {
  display: grid;
  gap: 36px;
  align-items: center;
}

@media (min-width: 900px) {
  .fm-md__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; }
}

.fm-md__portrait {
  position: relative;
  border-radius: var(--fm-r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--fm-navy);
  box-shadow: var(--fm-shadow-3);
  max-width: 380px;
}

.fm-md__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Layered-paper offset plate, echoing the logo's cut-paper cityscape. */
.fm-md__plate {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border-radius: var(--fm-r-lg);
  background: linear-gradient(140deg, var(--fm-teal), var(--fm-green));
  z-index: -1;
}

.fm-md__portrait-wrap { position: relative; z-index: 1; isolation: isolate; }

.fm-md__quote {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--fm-ink);
  margin: 18px 0 22px;
  text-wrap: pretty;
}

.fm-md__quote-mark {
  display: block;
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 56px;
  font-weight: 800;
  line-height: .6;
  color: var(--fm-teal);
  opacity: .38;
}

.fm-md__sign {
  display: flex; align-items: center; gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--fm-line);
}

.fm-md__sign-name {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-weight: 700; font-size: 15px; color: var(--fm-navy);
}

.fm-md__sign-role {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 12px; color: var(--fm-slate);
}

/* ==========================================================================
   4. FLEET LINEUP
   ========================================================================== */

.fm-fleet__grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.fm-vehicle {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-r-lg);
  overflow: hidden;
  transition: transform .4s var(--fm-ease), box-shadow .4s var(--fm-ease), border-color .4s var(--fm-ease);
}

.fm-vehicle:hover {
  transform: translateY(-7px);
  box-shadow: var(--fm-shadow-3);
  border-color: rgba(77,190,184,.5);
}

/* Highlighted by the fleet selector */
.fm-vehicle.is-matched {
  border-color: var(--fm-teal);
  box-shadow: 0 0 0 3px rgba(77,190,184,.22), var(--fm-shadow-3);
}

.fm-vehicle__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fm-mist); }

.fm-vehicle__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--fm-ease);
}

.fm-vehicle:hover .fm-vehicle__media img { transform: scale(1.06); }

.fm-vehicle__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,34,56,.42), transparent 55%);
}

/* Seat count is the primary differentiator — two models share a name. */
.fm-vehicle__seats {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: flex; align-items: baseline; gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(28,34,56,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
}

.fm-vehicle__seats-n { font-size: 17px; line-height: 1; }
.fm-vehicle__seats-l {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .78; font-weight: 600;
}

.fm-vehicle__badge {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: #fff;
  background: var(--fm-teal-deep);
}

.fm-vehicle__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }

.fm-vehicle__name {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--fm-ink); margin: 0 0 8px;
}

/* One-line use-case tag so visitors don't mix the 16 and 14 up at a glance. */
.fm-vehicle__usecase {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(69,180,85,.11);
  color: var(--fm-green-deep);
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 11.5px; font-weight: 600;
  margin-bottom: 16px;
}

.fm-vehicle__usecase svg { width: 13px; height: 13px; }

.fm-vehicle__specs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}

.fm-spec {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: 7px;
  background: var(--fm-mist);
  border: 1px solid var(--fm-line);
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 11.5px; font-weight: 600; color: var(--fm-navy);
  font-variant-numeric: tabular-nums;
}

.fm-spec svg { width: 12px; height: 12px; color: var(--fm-teal-deep); }

.fm-vehicle__foot { margin-top: auto; }
.fm-vehicle__foot .fm-btn { width: 100%; }

/* ==========================================================================
   5. FLEET SELECTOR — the charge-track control
   ========================================================================== */

.fm-selector {
  background: linear-gradient(150deg, var(--fm-navy-deep) 0%, var(--fm-navy) 100%);
  border-radius: var(--fm-r-lg);
  padding: clamp(28px, 4vw, 48px);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.fm-selector::before {
  content: "";
  position: absolute; top: -40%; right: -12%;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(77,190,184,.24), transparent 68%);
  pointer-events: none;
}

.fm-selector__inner { position: relative; z-index: 1; }

.fm-selector__q {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800; letter-spacing: -.025em;
  color: #fff; margin: 10px 0 6px;
}

.fm-selector__hint {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 13.5px; color: rgba(255,255,255,.6);
  margin-bottom: 36px;
}

/* No bottom padding here: .fm-track__stops is inset:0, so padding would push
   the stops off the rail. The captions hang below absolutely, so the clearance
   they need comes from margin-bottom instead. */
.fm-track { position: relative; padding: 0 4px; margin-bottom: 74px; }

.fm-track__rail {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}

.fm-track__fill {
  position: absolute; inset-block: 0; left: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fm-teal), var(--fm-green));
  box-shadow: 0 0 18px rgba(77,190,184,.6);
  transition: width .45s var(--fm-ease);
  width: 0;
}

.fm-track__stops {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between; align-items: center;
}

.fm-stop {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.26);
  background: var(--fm-navy-deep);
  color: rgba(255,255,255,.7);
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  display: grid; place-items: center;
  /* Explicit property list, never `all` — `all` would animate outline-width,
     which delays the focus ring and makes keyboard focus feel lost. */
  transition: background-color .35s var(--fm-ease), border-color .35s var(--fm-ease),
              color .35s var(--fm-ease), transform .35s var(--fm-ease),
              box-shadow .35s var(--fm-ease);
}

.fm-stop:hover { border-color: rgba(255,255,255,.6); color: #fff; transform: scale(1.06); }

.fm-stop.is-active {
  background: linear-gradient(140deg, var(--fm-teal), var(--fm-green));
  border-color: #fff;
  color: #fff;
  transform: scale(1.14);
  box-shadow: 0 0 0 6px rgba(77,190,184,.2), var(--fm-shadow-teal);
}

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

.fm-stop__cap {
  position: absolute; top: calc(100% + 12px);
  left: 50%; transform: translateX(-50%);
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  /* Wrap instead of running off the panel — a long caption on the last stop
     was being clipped at the right edge. */
  max-width: 108px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

/* Pin the end captions inside the track so they can't overflow the panel. */
.fm-stop:first-child .fm-stop__cap {
  left: 0; transform: none; text-align: left;
}
.fm-stop:last-child .fm-stop__cap {
  left: auto; right: 0; transform: none; text-align: right;
}

.fm-stop.is-active .fm-stop__cap { color: var(--fm-teal-glow); }

.fm-selector__result {
  display: grid; gap: 20px;
  align-items: center;
  padding: 24px;
  border-radius: var(--fm-r);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  margin-top: 0;
}

@media (min-width: 720px) {
  .fm-selector__result { grid-template-columns: 78px 1fr auto; }
}

.fm-selector__result-thumb {
  width: 78px; height: 62px; border-radius: 10px;
  object-fit: cover; background: rgba(255,255,255,.1);
}

.fm-selector__result-name {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 4px;
}

.fm-selector__result-why {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 13px; color: rgba(255,255,255,.66);
}

.fm-selector__result.is-swapping { animation: fmSwap .4s var(--fm-ease); }

@keyframes fmSwap {
  0%   { opacity: .3; transform: translateY(7px); }
  100% { opacity: 1;  transform: none; }
}

/* ==========================================================================
   6. COST COMPARISON WIDGET
   ========================================================================== */

.fm-calc__grid { display: grid; gap: 32px; align-items: start; }

@media (min-width: 940px) {
  .fm-calc__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 52px; }
}

.fm-calc__controls {
  background: #fff;
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-r-lg);
  padding: 28px;
  box-shadow: var(--fm-shadow-1);
}

.fm-field { margin-bottom: 24px; }
.fm-field:last-child { margin-bottom: 0; }

.fm-field__top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}

.fm-field__label {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fm-slate);
}

.fm-field__val {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 700; color: var(--fm-navy);
}

.fm-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--fm-line);
  outline: none; cursor: pointer;
}

.fm-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(140deg, var(--fm-teal), var(--fm-green));
  border: 3px solid #fff;
  box-shadow: var(--fm-shadow-teal);
  cursor: pointer;
  transition: transform .2s var(--fm-ease);
}

.fm-range::-webkit-slider-thumb:hover { transform: scale(1.14); }

.fm-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(140deg, var(--fm-teal), var(--fm-green));
  border: 3px solid #fff;
  box-shadow: var(--fm-shadow-teal);
  cursor: pointer;
}

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

/* Result bars */
.fm-calc__out {
  background: linear-gradient(150deg, var(--fm-navy-deep), var(--fm-navy));
  border-radius: var(--fm-r-lg);
  padding: 30px;
  color: #fff;
}

.fm-bar { margin-bottom: 26px; }

.fm-bar__top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}

.fm-bar__name {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.66);
}

.fm-bar__amt {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem; font-weight: 700; color: #fff;
}

.fm-bar__rail { height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }

.fm-bar__fill {
  height: 100%; border-radius: 999px; width: 0;
  transition: width .7s var(--fm-ease);
}

.fm-bar--diesel .fm-bar__fill { background: linear-gradient(90deg, #7A8296, #A6AEC2); }
.fm-bar--ev     .fm-bar__fill { background: linear-gradient(90deg, var(--fm-teal), var(--fm-green)); box-shadow: 0 0 16px rgba(77,190,184,.5); }

.fm-calc__saving {
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
  text-align: center;
}

.fm-calc__saving-label {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--fm-teal-glow);
  display: block; margin-bottom: 10px;
}

.fm-calc__saving-amt {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(118deg, var(--fm-teal-glow), var(--fm-green));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fm-calc__saving-sub {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 10px;
}

.fm-calc__disclaimer {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 11.5px; color: var(--fm-slate);
  margin-top: 16px; line-height: 1.6;
}

/* ==========================================================================
   7. TESTIMONIALS
   ========================================================================== */

.fm-quotes__grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.fm-quote {
  position: relative;
  background: #fff;
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-r-lg);
  padding: 30px 26px 26px;
  display: flex; flex-direction: column;
  transition: transform .35s var(--fm-ease), box-shadow .35s var(--fm-ease);
}

.fm-quote:hover { transform: translateY(-5px); box-shadow: var(--fm-shadow-2); }

.fm-quote::before {
  content: "";
  position: absolute; top: 0; left: 26px;
  width: 42px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--fm-teal), var(--fm-green));
}

.fm-quote__text {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 14.5px; line-height: 1.7; color: var(--fm-ink);
  margin-bottom: 22px; flex: 1;
}

.fm-quote__who { display: flex; align-items: center; gap: 13px; padding-top: 18px; border-top: 1px solid var(--fm-line); }

.fm-quote__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: linear-gradient(140deg, var(--fm-teal), var(--fm-green));
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-weight: 800; font-size: 15px;
}

.fm-quote__name {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 13.5px; font-weight: 700; color: var(--fm-navy);
}

.fm-quote__org {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 11.5px; color: var(--fm-slate);
}

.fm-quote__fleet {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fm-teal-deep);
  background: rgba(77,190,184,.12);
  padding: 5px 10px; border-radius: 6px;
}

/* ==========================================================================
   8. NETWORK TABS + NEPAL EXPANSION MAP
   ========================================================================== */

.fm-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--fm-mist);
  border: 1px solid var(--fm-line);
  margin-bottom: 34px;
  flex-wrap: wrap;
}

.fm-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border: none; border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 13px; font-weight: 700; color: var(--fm-slate);
  transition: background .3s var(--fm-ease), color .3s var(--fm-ease),
              box-shadow .3s var(--fm-ease);
}

.fm-tab svg { width: 15px; height: 15px; }

.fm-tab:hover { color: var(--fm-navy); }

.fm-tab.is-active {
  background: linear-gradient(118deg, var(--fm-teal), var(--fm-green));
  color: #fff;
  box-shadow: var(--fm-shadow-teal);
}

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

.fm-tab__count {
  font-variant-numeric: tabular-nums;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(0,0,0,.07);
}

.fm-tab.is-active .fm-tab__count { background: rgba(255,255,255,.24); }

.fm-panel { display: none; }
.fm-panel.is-active { display: block; animation: fmFadeIn .45s var(--fm-ease); }

@keyframes fmFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fm-net__grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.fm-net-card {
  background: #fff;
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-r);
  padding: 22px;
  transition: border-color .3s var(--fm-ease), transform .3s var(--fm-ease), box-shadow .3s var(--fm-ease);
}

.fm-net-card:hover { border-color: var(--fm-teal); transform: translateY(-4px); box-shadow: var(--fm-shadow-2); }

.fm-net-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

.fm-net-card__name {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 15px; font-weight: 700; color: var(--fm-navy);
}

.fm-net-card__city {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 11.5px; color: var(--fm-slate); margin-top: 2px;
}

.fm-net-card__hq {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--fm-navy);
  padding: 4px 9px; border-radius: 5px; flex-shrink: 0;
}

.fm-net-card__row {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 12.5px; color: var(--fm-slate);
  margin-bottom: 8px;
}

.fm-net-card__row svg { width: 14px; height: 14px; color: var(--fm-teal-deep); flex-shrink: 0; }

.fm-net-card__actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

.fm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--fm-mist);
  border: 1px solid var(--fm-line);
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 11.5px; font-weight: 600; color: var(--fm-navy);
  text-decoration: none;
  transition: background .25s var(--fm-ease), color .25s var(--fm-ease),
              border-color .25s var(--fm-ease);
}

.fm-chip:hover { background: var(--fm-navy); color: #fff; border-color: var(--fm-navy); }
.fm-chip svg { width: 13px; height: 13px; }

/* ---- Nepal expansion map ---- */

.fm-map {
  position: relative;
  background: linear-gradient(160deg, var(--fm-navy-deep), var(--fm-navy));
  border-radius: var(--fm-r-lg);
  padding: clamp(24px, 3.5vw, 40px);
  overflow: hidden;
}

.fm-map__svg { width: 100%; height: auto; display: block; overflow: visible; }

.fm-map__outline {
  fill: rgba(255,255,255,.045);
  stroke: rgba(127,214,209,.42);
  stroke-width: 2;
  stroke-linejoin: round;
}

.fm-map__pin { opacity: 0; transform-box: fill-box; transform-origin: center; }
.fm-map.is-live .fm-map__pin { animation: fmPinDrop .55s var(--fm-ease) forwards; }

@keyframes fmPinDrop {
  0%   { opacity: 0; transform: translateY(-14px) scale(.4); }
  70%  { opacity: 1; transform: translateY(2px) scale(1.12); }
  100% { opacity: 1; transform: none; }
}

.fm-map__pin-dot { fill: var(--fm-teal); }
.fm-map__pin-halo { fill: rgba(77,190,184,.26); }

.fm-map__pin--next .fm-map__pin-dot { fill: var(--fm-green); }
.fm-map__pin--next .fm-map__pin-halo {
  fill: rgba(69,180,85,.3);
  animation: fmHalo 2.4s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}

@keyframes fmHalo {
  0%, 100% { transform: scale(1);   opacity: .55; }
  50%      { transform: scale(1.9); opacity: .05; }
}

.fm-map__label {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 13px; font-weight: 600;
  fill: rgba(255,255,255,.82);
}

.fm-map__label--next { fill: var(--fm-green); font-weight: 700; }

.fm-map__legend {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.fm-map__legend-item {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 12.5px; color: rgba(255,255,255,.66);
}

.fm-map__legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ==========================================================================
   9. NEWS & BLOGS
   ========================================================================== */

.fm-news__grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.fm-post {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform .35s var(--fm-ease), box-shadow .35s var(--fm-ease);
}

.fm-post:hover { transform: translateY(-6px); box-shadow: var(--fm-shadow-2); }

.fm-post__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--fm-mist); }
.fm-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--fm-ease); }
.fm-post:hover .fm-post__media img { transform: scale(1.06); }

.fm-post__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }

.fm-post__date {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fm-teal-deep);
  margin-bottom: 10px;
}

.fm-post__title {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.018em;
  color: var(--fm-ink); line-height: 1.35; margin-bottom: 10px;
}

.fm-post__excerpt {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 13px; color: var(--fm-slate); line-height: 1.62;
  margin-bottom: 16px; flex: 1;
}

.fm-post__more {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 12.5px; font-weight: 700; color: var(--fm-teal-deep);
  margin-top: auto;
}

.fm-post__more svg { width: 14px; height: 14px; transition: transform .3s var(--fm-ease); }
.fm-post:hover .fm-post__more svg { transform: translateX(4px); }

/* ==========================================================================
   10. STICKY INQUIRY BAR (brief §4.7 — prominent inquiry throughout)
   ========================================================================== */

.fm-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px;
  background: rgba(28,34,56,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: translateY(110%);
  transition: transform .45s var(--fm-ease);
}

.fm-sticky.is-up { transform: none; }

.fm-sticky__txt {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.4;
}

.fm-sticky__txt strong { color: #fff; font-weight: 700; }

.fm-sticky .fm-btn { padding: 11px 20px; font-size: 13px; flex-shrink: 0; }

/* ==========================================================================
   11. NAV OVERLAY — transparent nav over a full-bleed hero
   --------------------------------------------------------------------------
   partials/nav.blade.php hardcodes a white bar via INLINE styles and has no
   scroll behaviour, so on a full-bleed hero it sits there as an opaque slab.

   Rather than edit the shared nav partial (all 17 pages use it), fm-core.js
   adds .fm-nav-over to <body> only on pages that contain .fm-hero, and only
   while scrolled near the top. Inline styles need !important to beat.
   ========================================================================== */

body.fm-nav-over nav {
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Whiten nav text. Safe to apply broadly: the active pill and the "Inquire
   Now" button already carry their own gradient background and white text. */
body.fm-nav-over nav a,
body.fm-nav-over nav button,
body.fm-nav-over nav span {
  color: #fff !important;
}

/* The small tagline under the wordmark stays secondary. */
body.fm-nav-over nav .text-gray-600 { color: rgba(255, 255, 255, .62) !important; }

/* Lift the logo tile off a dark background. */
body.fm-nav-over nav img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }

/* Never run the overlay while the mobile menu panel is open — the panel is
   light and its links would go white-on-white. */
body.mobile-menu-locked.fm-nav-over nav {
  background: rgba(255, 255, 255, .97) !important;
  border-bottom-color: rgba(0, 0, 0, .07) !important;
}
body.mobile-menu-locked.fm-nav-over nav a,
body.mobile-menu-locked.fm-nav-over nav button,
body.mobile-menu-locked.fm-nav-over nav span { color: inherit !important; }

/* sticky bar, small screens */
@media (max-width: 620px) {
  .fm-sticky__txt { font-size: 11.5px; }
  .fm-sticky .fm-btn { padding: 10px 16px; font-size: 12px; }
}

/* ==========================================================================
   12. PRODUCTS PAGE — filters, gallery, spec grid
   Rebuilt from the database; the old page was a static React dump whose
   filter buttons and thumbnails had no handlers at all.
   ========================================================================== */

.fm-filters { display: flex; flex-wrap: wrap; gap: 10px; }

.fm-filter {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 13px; font-weight: 700;
  padding: 11px 20px;
  border-radius: 12px;
  cursor: pointer;
  color: rgba(255,255,255,.62);
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  transition: color .25s var(--fm-ease), border-color .25s var(--fm-ease),
              background .25s var(--fm-ease), box-shadow .25s var(--fm-ease);
}

.fm-filter:hover { color: #fff; border-color: rgba(255,255,255,.45); }

.fm-filter.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--fm-teal), var(--fm-green));
  box-shadow: var(--fm-shadow-teal);
}

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

/* ---- product block ---- */

.fm-product { margin-bottom: clamp(56px, 7vw, 92px); scroll-margin-top: 90px; }
.fm-product:last-child { margin-bottom: 0; }
.fm-product[hidden] { display: none; }

.fm-product__banner {
  position: relative;
  border-radius: var(--fm-r-lg);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  margin-bottom: 30px;
  background: var(--fm-mist);
}

@media (max-width: 700px) { .fm-product__banner { aspect-ratio: 16 / 10; } }

.fm-product__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-product__banner-wash { position: absolute; inset: 0; }

.fm-product__banner-copy { position: absolute; left: 0; bottom: 0; padding: clamp(20px, 3vw, 40px); }

.fm-product__kicker {
  display: block;
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 8px;
}

.fm-product__name {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -.03em; color: #fff; margin: 0 0 4px;
}

.fm-product__tagline {
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: .95rem; color: rgba(255,255,255,.78); margin: 0;
}

.fm-product__price {
  position: absolute; top: clamp(16px, 2.4vw, 26px); right: clamp(16px, 2.4vw, 26px);
  text-align: right; color: #fff;
}
.fm-product__price span {
  display: block;
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 11px; color: rgba(255,255,255,.66); margin-bottom: 2px;
}
.fm-product__price strong { font-size: 1.15rem; }

.fm-product__grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .fm-product__grid { grid-template-columns: 1fr 1fr; gap: 44px; } }

/* ---- gallery ---- */

.fm-product__main {
  border-radius: var(--fm-r); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--fm-mist); margin-bottom: 12px;
}
.fm-product__main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fm-product__thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }

.fm-thumb {
  flex: 0 0 auto;
  width: 72px; height: 54px;
  padding: 0; cursor: pointer;
  border-radius: 10px; overflow: hidden;
  border: 2px solid transparent;
  background: none; opacity: .6;
  transition: opacity .25s var(--fm-ease), border-color .25s var(--fm-ease),
              transform .25s var(--fm-ease);
}
.fm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-thumb:hover { opacity: .95; }
.fm-thumb.is-active {
  opacity: 1;
  border-color: var(--fm-thumb-accent, var(--fm-teal));
  transform: scale(1.05);
}
.fm-thumb:focus-visible { outline: 3px solid var(--fm-teal); outline-offset: 3px; }

/* ---- specs ---- */

.fm-product__specs {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px; margin-bottom: 24px;
}

.fm-product__spec {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--fm-line);
  background: var(--fm-mist);
}

.fm-product__spec-label {
  display: block;
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fm-slate); margin-bottom: 5px;
}

.fm-product__spec-value { font-size: 1.05rem; color: var(--fm-navy); }

.fm-product__feat-head {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fm-slate); margin: 0 0 12px;
}

.fm-product__feats { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
.fm-product__feats li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 14px; color: var(--fm-ink);
}
.fm-product__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.fm-product__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   13. WHY-EV — fuel calculator extras + knowledge hub links
   ========================================================================== */

.fm-fuel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.16);
}

@media (max-width: 560px) { .fm-fuel__grid { grid-template-columns: 1fr; } }

.fm-fuel__cell { text-align: center; }

.fm-fuel__label {
  display: block;
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}

.fm-fuel__value { font-size: 1.05rem; color: #fff; }

/* ---- Knowledge hub ---- */

.fm-hub { display: grid; gap: 12px; }

.fm-hub__item {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  border-radius: var(--fm-r);
  background: #fff;
  border: 1px solid var(--fm-line);
  text-decoration: none;
  transition: transform .3s var(--fm-ease), box-shadow .3s var(--fm-ease),
              border-color .3s var(--fm-ease);
}

.fm-hub__item:hover {
  transform: translateY(-3px);
  border-color: var(--fm-teal);
  box-shadow: var(--fm-shadow-2);
}

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

.fm-hub__icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(77,190,184,.12);
  color: var(--fm-teal-deep);
}
.fm-hub__icon svg { width: 19px; height: 19px; }

.fm-hub__body { flex: 1; min-width: 0; }

.fm-hub__title {
  display: block;
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 15px; font-weight: 700; letter-spacing: -.015em;
  color: var(--fm-ink);
}

.fm-hub__blurb {
  display: block;
  font-family: var(--font-body, "Space Grotesk", sans-serif);
  font-size: 12.5px; color: var(--fm-slate);
  margin-top: 3px; line-height: 1.5;
}

.fm-hub__arrow {
  flex-shrink: 0;
  color: var(--fm-slate);
  transition: transform .3s var(--fm-ease), color .3s var(--fm-ease);
}
.fm-hub__arrow svg { width: 18px; height: 18px; display: block; }
.fm-hub__item:hover .fm-hub__arrow { color: var(--fm-teal-deep); transform: translateX(4px); }