/* Inspiration Fleet page — all styles scoped to .fleet-page.
   Palette and rhythm deliberately match the Garage bundle so the two pages
   read as one family: navy #1a2839, section blue #034378, light #f5f6f8,
   pale blue #b9daf5, brand blue #057adc / #369bf1. */

.fleet-page {
  --navy: #1a2839;
  --section-blue: #034378;
  --light: #f5f6f8;
  --pale: #b9daf5;
  --blue: #057adc;
  --blue-lt: #369bf1;
  --orange: #F89756;
  --gutter: clamp(1.5rem, 4.375vw, 3.5rem);
  --maxw: 1440px;

  margin: 0;
  color: #fff;
  background: var(--navy);
  font-family: Manrope, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Manrope ships an "fl" ligature that misreads in words like "fleet".
     Matches what the Garage bundle already does. Inherited, so it covers the
     whole page. */
  font-variant-ligatures: no-common-ligatures;
}
.fleet-page :where(*) { box-sizing: border-box; }
.fleet-page :where(img) { display: block; max-width: 100%; }
.fleet-page :where(h1, h2, h3, p, ul, li) { margin: 0; padding: 0; }
.fleet-page :where(a) { color: inherit; }
.fleet-page :where(ul, ol) { list-style: none; }
.fleet-page :focus-visible { outline: 2px solid var(--blue-lt); outline-offset: 3px; }

/* ---------- buttons (same shape as the Garage bundle) ---------- */
.fleet-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42em;
  padding: .5em 1em;
  border-radius: .5em;
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s, filter .15s;
}
.fleet-page .btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.fleet-page .btn:active { transform: translateY(0); filter: brightness(.96); }
.fleet-page .btn--primary {
  color: #fff;
  background: linear-gradient(#369bf1 .4%, #057adc 166%);
  border: 3px solid var(--blue);
  filter: drop-shadow(0 4px 2px #00000040);
  text-shadow: 0 -1px #00000040;
}
.fleet-page .btn--primary:hover { filter: drop-shadow(0 6px 4px #00000040) brightness(1.08); }

.fleet-page .btn--secondary {
  /* Brand orange. Label is navy, not white: on #F89756 white text only reaches
     about 2:1 contrast, which fails WCAG AA at any size. Navy clears AA. */
  color: var(--navy);
  background: var(--orange);
  border: 3px solid var(--orange);
  text-shadow: none;
  filter: drop-shadow(0 4px 2px #0000002e);
}
.fleet-page .btn--secondary:hover { filter: drop-shadow(0 6px 4px #0000002e) brightness(1.06); }

/* ---------- 1 · hero ---------- */
.fleet-page .fhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
}
.fleet-page .fhero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url(/wp-content/themes/inspiration-mobility/assets/fleet/images/hero-highway.jpg) 60% / cover no-repeat;
}
/* Scrim so the headline keeps contrast over the photograph. */
.fleet-page .fhero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26,40,57,.92) 0%, rgba(26,40,57,.72) 46%, rgba(26,40,57,.35) 100%);
}
.fleet-page .fhero__inner {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  min-height: min(76svh, 640px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(4.5rem, 12vw, 8rem) var(--gutter);
}
.fleet-page .fhero__title {
  max-width: 14ch;
  font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.fleet-page .fhero__lead {
  max-width: 34ch;
  font-size: clamp(1.125rem, .85rem + 1vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}
.fleet-page .fhero__actions {
  margin-top: clamp(.5rem, 1.5vw, 1rem);
  font-size: clamp(1rem, .85rem + .6vw, 1.1875rem);
}

/* ---------- 2 · intro ---------- */
.fleet-page .fintro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
}
/* Dot grid echoing the Garage bundle, as static CSS gradients.

   NOTE THE INTEGER GRID. Garage draws to canvas on a 26.67px cell, but a
   fractional background-size tiles unevenly: Safari rounds each layer's tile
   independently, so the colour layers drifted off the white lattice as they
   repeated (Chrome happened to round consistently, so it only showed in
   Safari). Everything here is whole pixels: 27px cell, colour tiles at odd
   multiples of it, offsets in whole cells.

   Colour tiles must be ODD multiples: a tile centres its gradient at size/2,
   so an even multiple lands half a cell off the white lattice. */
.fleet-page .fintro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(63, 193, 201, .34) 2.5px, transparent 2.5px),
    radial-gradient(circle, rgba(232, 121, 169, .30) 2.5px, transparent 2.5px),
    radial-gradient(circle, rgba(71, 161, 78, .32) 2.5px, transparent 2.5px),
    radial-gradient(circle, rgba(157, 140, 245, .30) 2.5px, transparent 2.5px),
    radial-gradient(circle, rgba(204, 160, 48, .30) 2.5px, transparent 2.5px),
    radial-gradient(circle, rgba(193, 73, 11, .30) 2.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, .06) 2.5px, transparent 2.5px);
  background-size:
    135px 135px,
    189px 189px,
    189px 189px,
    243px 243px,
    243px 243px,
    297px 297px,
    27px 27px;
  background-position:
    0 27px,
    54px 0,
    108px 81px,
    27px 135px,
    162px 54px,
    81px 189px,
    0 0;
  /* Masked to the right-hand strip only. The copy runs to about 73% of the
     section width, so the field stays clear behind the text and fills the
     empty space beside it. Soft ramp rather than a hard edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 58%, rgba(0, 0, 0, .45) 72%, #000 84%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 58%, rgba(0, 0, 0, .45) 72%, #000 84%, #000 100%);
}
/* Wash behind the dots: one continuous left-to-right ramp. Darkest at the left
   edge where the copy begins, lightening steadily across to the right. */
.fleet-page .fintro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, #142235 0%, #1d2e43 45%, #294059 75%, #35506f 100%);
}
/* Align to the hero: same 1440px container and gutter, so the copy starts on
   the hero's left edge. The 54rem measure is kept on the children, not the
   container, so the block does not re-centre. */
.fleet-page .fintro__inner {
  position: relative;
  display: grid;
  justify-items: start;
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
  max-width: var(--maxw);
  margin: 0 auto;
}
.fleet-page .fintro__inner > * {
  max-width: 54rem;
}
.fleet-page .fintro__logo {
  width: clamp(13rem, 26vw, 19rem);
  height: auto;
  margin-bottom: clamp(.5rem, 1.5vw, 1rem);
}
.fleet-page .fintro__title {
  margin-bottom: clamp(.25rem, 1vw, .75rem);
  font-size: clamp(1.75rem, 1rem + 2.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.fleet-page .fintro__body {
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.62;
}
.fleet-page .fintro__body--lead { font-weight: 700; }

/* ---------- 3 · why ---------- */
.fleet-page .why {
  background: var(--section-blue);
  padding: clamp(2.75rem, 5vw, 4rem) var(--gutter);
}
.fleet-page .why__inner { max-width: var(--maxw); margin: 0 auto; }
.fleet-page .why__title {
  margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem);
  font-size: clamp(1.75rem, 1rem + 2.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.01em;
  text-wrap: balance;
}
@media (width >= 720px) {
    /* Five cards into a 2-up grid leaves an orphan; let the last span both
     columns so the row reads as intentional rather than broken. */
  .fleet-page .why__list > :last-child { grid-column: 1 / -1; }
}
@media (width >= 1100px) {
    .fleet-page .why__list > :last-child { grid-column: auto; }
}

/* ---------- carousel (replaces the 5-up card grid) ---------- */
.fleet-page .wcar { position: relative; }
.fleet-page .wcar__track { display: grid; }
/* All slides occupy the same grid cell, so the row is sized by the TALLEST and
   the carousel never changes height as you page through.

   Inactive slides are hidden with visibility, not display:none. Two reasons:
   display:none would drop them out of the grid (so the row would resize to each
   slide, which snapped), and it also stops their images from loading until
   revealed, which caused a blank flash on first view of each slide. visibility
   still removes them from the accessibility tree and the tab order. */
.fleet-page .wslide {
  grid-area: 1 / 1;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  transition: opacity .22s ease;
}
.fleet-page .wslide[hidden] {
  display: grid;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
@media (width >= 860px) {
  .fleet-page .wslide { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); align-items: stretch; }
}
.fleet-page .wslide__media { border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.06); }
/* Landscape crop on small screens -- a 3:4 portrait at full width pushed the
   copy most of a screen down. */
.fleet-page .wslide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  max-height: 14rem;
}
@media (width >= 860px) {
  /* No min-height: the row is sized by the copy, so the section is only as
     tall as its longest slide rather than a fixed image height. */
  .fleet-page .wslide__media img { aspect-ratio: auto; max-height: none; }
}
.fleet-page .wslide__panel {
  display: grid; align-content: center; gap: clamp(.75rem, 1.5vw, 1.125rem);
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
}
.fleet-page .wslide__title {
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -.01em; text-wrap: balance;
}
.fleet-page .wslide__body {
  max-width: 54ch;
  font-size: clamp(.9375rem, .9rem + .28vw, 1.0625rem);
  font-weight: 500; line-height: 1.55;
}

.fleet-page .wcar__controls {
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
}
.fleet-page .wcar__count {
  font-size: clamp(1rem, .9rem + .4vw, 1.125rem); font-weight: 600;
  font-variant-numeric: tabular-nums; opacity: .9;
}
.fleet-page .wcar__btns { display: flex; gap: .5rem; }
.fleet-page .wcar__btn {
  display: grid; place-items: center; width: 3rem; height: 2.5rem;
  padding: 0; cursor: pointer; color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
  transition: background .15s, border-color .15s, opacity .15s;
}
.fleet-page .wcar__btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.fleet-page .wcar__btn svg { width: 1.6rem; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fleet-page .wcar__btn[disabled] { opacity: .35; cursor: default; }
.fleet-page .wcar__btn[disabled]:hover { background: transparent; border-color: rgba(255,255,255,.28); }

.fleet-page .wcar__dots {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: clamp(.75rem, 1.5vw, 1rem); padding: 0;
  list-style: none;
}
/* The theme numbers <ol> via a counter on the li, which the list-style reset
   above does not clear. */
.fleet-page .wcar__dots > li { list-style: none; }
.fleet-page .wcar__dots > li::before,
.fleet-page .wcar__dots > li::marker { content: none; }
.fleet-page .wcar__dots button {
  width: 2.25rem; height: .3rem; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.28); border: 0; border-radius: 99px;
  transition: background .15s;
}
.fleet-page .wcar__dots button:hover { background: rgba(255,255,255,.5); }
.fleet-page .wcar__dots button[aria-selected="true"] { background: #fff; }

/* Without JS every slide is shown, stacked — the content stays reachable. */
.fleet-page .wcar:not([data-ready]) .wslide[hidden] {
  display: grid;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.fleet-page .wcar:not([data-ready]) .wcar__track { gap: clamp(1.5rem, 3vw, 2.5rem); }
.fleet-page .wcar:not([data-ready]) .wslide { grid-area: auto; }
.fleet-page .wcar:not([data-ready]) .wcar__controls,
.fleet-page .wcar:not([data-ready]) .wcar__dots { display: none; }

/* ---------- 4 · Garage promo ----------
   Echoes the Garage 2.0 hero: copy on the left, the product shot on the right
   running off the edge of the viewport rather than sitting in a neat box. */
.fleet-page .gpromo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 4.5rem) var(--gutter);
}
/* The Garage 2.0 hero photograph, so the two pages share a backdrop. */
.fleet-page .gpromo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url(/wp-content/themes/inspiration-mobility/assets/fleet/images/garage-bg.jpg) 60% / cover no-repeat;
}
/* Scrim: heavy on the left so the copy keeps contrast, clearing toward the
   right so the photograph still reads behind the screenshot. */
.fleet-page .gpromo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(26, 40, 57, .95) 0%, rgba(26, 40, 57, .86) 38%, rgba(26, 40, 57, .55) 100%);
}
.fleet-page .gpromo__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: var(--maxw);
  margin: 0 auto;
}
@media (width >= 900px) {
  .fleet-page .gpromo__inner {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}
.fleet-page .gpromo__copy {
  display: grid;
  justify-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-right: var(--gutter);
}
@media (width >= 900px) { .fleet-page .gpromo__copy { padding-right: 0; } }
.fleet-page .gpromo__title {
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.fleet-page .gpromo__body {
  max-width: 48ch;
  font-size: clamp(1rem, .93rem + .35vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.6;
}
.fleet-page .gpromo__cta {
  margin-top: clamp(.25rem, 1vw, .5rem);
  font-size: clamp(1rem, .85rem + .6vw, 1.125rem);
}
.fleet-page .gpromo__visual { min-width: 0; }
.fleet-page .gpromo__shot {
  width: 100%;
  height: auto;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}
@media (width >= 900px) {
  /* Let the shot run past the right edge, the way the Garage hero does. */
  .fleet-page .gpromo__shot {
    width: calc(100% + var(--gutter));
    max-width: none;
  }
}

/* ---------- 5 · services ---------- */
.fleet-page .svcs {
  color: var(--navy);
  background: var(--light);
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter);
}
.fleet-page .svcs__inner { max-width: var(--maxw); margin: 0 auto; }
.fleet-page .svcs__title {
  font-size: clamp(1.75rem, 1rem + 2.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.fleet-page .svcs__lead {
  max-width: 62ch;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.62;
}
.fleet-page .svcs__list {
  display: grid;
  gap: .75rem clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  /* Every row the same height, so cards match whether their label wraps to one
     line or two. Cards stretch to fill, which is the grid default. */
  grid-auto-rows: 1fr;
}
@media (width >= 600px) { .fleet-page .svcs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 1000px) { .fleet-page .svcs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fleet-page .svc {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.125rem;
  background: #fff;
  border-radius: 10px;
  font-size: clamp(1rem, .93rem + .3vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.35;
}
.fleet-page .svc__icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 6 · final CTA ---------- */
.fleet-page .fcta {
  color: var(--navy);
  text-align: center;
  background: var(--pale);
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter);
}
.fleet-page .fcta__inner {
  display: grid;
  justify-items: center;
  gap: clamp(1.25rem, 2vw, 1.667rem);
  max-width: 46rem;
  margin: 0 auto;
}
.fleet-page .fcta__title {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.875rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.fleet-page .fcta__lead {
  font-size: clamp(1.125rem, .9rem + .9vw, 1.375rem);
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}
.fleet-page .fcta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(.5rem, 1.5vw, 1rem);
  font-size: clamp(1rem, .85rem + .6vw, 1.1875rem);
}
.fleet-page .fcta__phone {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: opacity .15s;
}
.fleet-page .fcta__phone:hover { opacity: .75; }
@media (width <= 599.98px) {
  .fleet-page .fcta__btn { width: 100%; }
  .fleet-page .fcta__actions { flex-direction: column; gap: 1.25rem; }
}

/* Anchor targets clear the theme's fixed header. */
.fleet-page section[id] { scroll-margin-top: 130px; }

@media (prefers-reduced-motion: reduce) {
  .fleet-page *, .fleet-page *::before, .fleet-page *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}