/* NordBus v2 - Section variant styles
   Layered on top of home2.css. Each variant ships its own block of
   scoped rules so the original (variant A) stays untouched.
   ----------------------------------------------------------------- */


/* ─── SERVICES: Editorial (variant B) ─────────────────────────────── */
.h2-svc-edit {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 48px;
  border-top: 1px solid var(--t-border, var(--border-1));
  padding-top: 4px;
}
.h2-svc-edit-list { list-style: none; margin: 0; padding: 0; }
.h2-svc-edit-list li {
  display: grid;
  grid-template-columns: 44px 1fr 18px;
  align-items: baseline;
  column-gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--t-border, var(--border-1));
  cursor: pointer;
  transition: padding-left .32s var(--ease-out);
}
/* Active panel gets extra bottom padding so the CTA button at the
   bottom of the expanded content doesn't sit flush against the NEXT
   panel's title row. On mobile users tap the next service's title
   to switch panels; without buffer their finger often hits the
   active panel's CTA instead (which then scrolls to the contact
   form), making it look like the panel-switch UI is broken. */
.h2-svc-edit-list li.is-on { padding-left: 10px; padding-bottom: 28px; }
.h2-svc-edit-list .num {
  font: 600 11px/1 var(--font-mono); letter-spacing: .04em;
  color: var(--t-fg-faint, var(--fg-3)); font-variant-numeric: tabular-nums;
  align-self: start; margin-top: 6px;
}
.h2-svc-edit-list li.is-on .num { color: var(--t-accent, var(--nb-violet)); }
.h2-svc-edit-list .t {
  font: 700 clamp(20px, 2.2vw, 28px)/1.12 var(--font-display);
  letter-spacing: -.012em;
  color: var(--t-fg, var(--nb-navy));
  transition: color .25s var(--ease-out);
}
.h2-svc-edit-list li.is-on .t { color: var(--t-accent, var(--nb-violet)); }
/* Description, paragraph, benefit list + amenity row collapse into a
   hover-to-expand reveal. Only the active row shows its full content; the
   others stay collapsed at title height. */
.h2-svc-edit-list .d {
  grid-column: 2;
  font: 400 13.5px/1.55 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
  max-width: 460px;
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height .38s var(--ease-out), margin-top .25s, opacity .35s var(--ease-out) .05s;
}
.h2-svc-edit-list li.is-on .d { max-height: 60px; margin-top: 6px; opacity: 1; }

.h2-svc-edit-list .p {
  grid-column: 2;
  font: 400 14px/1.6 var(--font-body);
  color: var(--t-fg, var(--nb-navy));
  max-width: 520px;
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height .42s var(--ease-out), margin-top .25s, opacity .35s var(--ease-out) .08s;
  margin: 0;
}
.h2-svc-edit-list li.is-on .p { max-height: 180px; margin-top: 14px; opacity: 1; }

/* Tiny uppercase eyebrow label above each sub-block (Benefits, Equipment),
   with a hairline above it so the three blocks read as separate sections
   instead of one run-on under the service title. */
.h2-svc-edit-list .block-head {
  grid-column: 2;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Use the theme-aware accent so the label lifts to violet-light on
     ink/violet sections instead of disappearing into a dark bg. */
  color: var(--t-accent, var(--nb-violet));
  padding-top: 14px;
  border-top: 1px solid var(--t-border, var(--border-1, rgba(15, 4, 41, .08)));
  max-height: 0; overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: max-height .38s var(--ease-out), margin-top .25s, opacity .35s var(--ease-out) .09s;
}
.h2-svc-edit-list li.is-on .block-head { max-height: 36px; margin-top: 18px; opacity: 1; }

.h2-svc-edit-list .benefits {
  grid-column: 2;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Row gap of 14px keeps every row equally spaced even when one
     column's item wraps to two lines while the neighbour stays
     single-line (Korporativie + VIP per v5 LABOJUMI NR.2). */
  gap: 14px 18px;
  align-items: start;
  max-height: 0; overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: max-height .42s var(--ease-out), margin-top .25s, opacity .35s var(--ease-out) .11s;
}
.h2-svc-edit-list li.is-on .benefits { max-height: 220px; margin-top: 10px; opacity: 1; }
.h2-svc-edit-list .benefits li {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px;
  align-items: start;
  padding: 0;
  border: 0;
  font: 500 13px/1.4 var(--font-body);
  color: var(--t-fg, var(--nb-navy));
  /* v5 LABOJUMI NR.2 "Atstarpes vienadas": the previous
     min-height: 2.8em padded single-line items to 2.8em but left
     two-line items at their natural height, so 2-col grids
     (Korporativie + VIP) had visibly uneven row spacing between a
     1-line entry on the left next to a 2-line entry on the right.
     A consistent row-gap on the parent + content-height rows
     keeps every row visually equidistant regardless of wrap. */
}
.h2-svc-edit-list .benefits .icn {
  width: 16px; height: 16px;
  color: var(--t-accent, var(--nb-violet));
  margin-top: 1px;
  flex: 0 0 auto;
}

.h2-svc-edit-list .amen {
  grid-column: 2;
  display: flex; flex-wrap: wrap;
  gap: 12px 18px;
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height .38s var(--ease-out), margin-top .25s, opacity .35s var(--ease-out) .14s;
}
.h2-svc-edit-list li.is-on .amen { max-height: 140px; margin-top: 14px; opacity: 1; }
.h2-svc-edit-cta {
  grid-column: 2;
  align-self: start;
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--t-accent, var(--nb-violet));
  color: var(--nb-sugar);
  border-radius: 999px;
  font: 700 13px/1 var(--font-body);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  max-height: 0; overflow: hidden; opacity: 0;
  padding-top: 0; padding-bottom: 0; margin-top: 0;
  /* pointer-events:none while collapsed. Without this, taps in the
     collapsed panel area (the CTA is opacity:0 but still in the DOM
     at padding-height 0) could bubble to the anchor and fire the
     'jump to bottom form' scroll before the panel visibly opened,
     which matched the client bug report: 'pressing on the accordion
     scrolls to the bottom form instead of opening it'. Re-enabled
     the moment the panel becomes .is-on. */
  pointer-events: none;
  /* pointer-events transition uses a 550ms delay: matches when opacity
     finishes its .35s from .18s (=530ms). Prevents the initial tap
     that OPENS the panel from being interpreted as a click on the
     just-revealed CTA (which would immediately scroll to the bottom
     contact form). The delay is 0 when going the other way (closing)
     so the CTA becomes untappable instantly. */
  transition: max-height .38s var(--ease-out), margin-top .25s, padding .25s, opacity .35s var(--ease-out) .18s, pointer-events 0s .55s;
}
.h2-svc-edit-list li.is-on .h2-svc-edit-cta {
  max-height: 48px;
  padding-top: 11px; padding-bottom: 11px;
  margin-top: 18px;
  opacity: 1;
  pointer-events: auto;
}
.h2-svc-edit-cta:hover {
  filter: brightness(1.08);
  /* Hold the sugar text color on hover: global `a:hover` in
     colors_and_type.css flips every anchor's color to the violet
     hover token, which made the <a> service CTAs ("Sanemt
     piedavajumu") darken to violet on hover while the <button>
     variant ("Pieteikt sadarbibu") stayed sugar (buttons are immune
     to a:hover). Force the sugar color here so both variants behave
     identically: bg brightens, text stays white-ish. */
  color: var(--nb-sugar);
}
/* When the CTA is a <button> instead of an <a> (Darbinieku
   parvadajumi card uses a button to open the partnership form
   modal), reset native button chrome so it visually matches the
   anchor variant. */
.h2-svc-edit-cta--btn { border: 0; cursor: pointer; font-family: inherit; }
.h2-svc-edit-list .amen-i {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--t-fg, var(--nb-navy));
  font: 500 12px/1 var(--font-body);
}
.h2-svc-edit-list .amen-i .icn { width: 16px; height: 16px; }
.h2-svc-edit-list .amen-i svg.icn { color: var(--t-accent, var(--nb-violet)); }
.h2-svc-edit-list .amen-lbl { letter-spacing: .005em; }
.h2-svc-edit-list .arr {
  grid-row: 1;
  grid-column: 3;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3); align-self: start; margin-top: 4px;
  font-size: 13px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .22s var(--ease-out), color .22s var(--ease-out), transform .22s var(--ease-out);
}
.h2-svc-edit-list li.is-on .arr {
  opacity: 1; color: var(--t-accent, var(--nb-violet)); transform: translateX(0);
}

.h2-svc-edit-aside {
  /* No sticky on the aside itself: the aside fills its grid cell
     (which stretches to match the list column height) so the inner
     .ph below has the FULL list scroll range to stick within. The
     earlier 'position: sticky' on the aside released early because
     the aside's own height ate into the available sticky distance,
     leaving the image invisible by the time the user reached the
     last service panel (Sporta + VIP at bottom of the list). */
  position: relative;
  display: block;
  align-self: stretch;
}
.h2-svc-edit-aside .ph {
  /* THIS is the sticky element. Lives inside the aside which is as
     tall as the list, so the .ph sticks for the entire list-scroll
     range, staying visible alongside every service panel including
     the last one. max-height caps at viewport so the image always
     fits fully on screen below the 84px sticky nav. */
  position: sticky;
  top: 100px;
  aspect-ratio: 4/5;
  max-height: calc(100vh - 200px);
  background: var(--nb-ink);
  overflow: hidden;
  border-radius: 8px;
}
.h2-svc-edit-aside .ph img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity .52s var(--ease-out), transform .9s var(--ease-out);
}
.h2-svc-edit-aside .ph img.is-on {
  opacity: 1; transform: scale(1);
}
.h2-svc-edit-aside .amen { display: flex; flex-wrap: wrap; gap: 10px; }
.h2-svc-edit-aside .amen span {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 13px/1 var(--font-body); letter-spacing: .02em;
  padding: 10px 16px 10px 13px;
  border: 1px solid var(--border-1);
  border-radius: 999px;
  color: var(--fg-1);
  text-transform: capitalize;
  background: var(--bg-surface);
}
.h2-svc-edit-aside .amen img.icn,
.h2-svc-edit-aside .amen .icn { width: 22px; height: 22px; font-size: 22px; }
.h2-svc-edit-aside .cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--nb-violet); color: var(--nb-sugar);
  padding: 13px 20px; font: 700 14px/1 var(--font-body);
  border-radius: 4px;
  transition: background .18s var(--ease-out);
}
.h2-svc-edit-aside .cta:hover { background: var(--nb-navy); }
.h2-svc-edit-aside .cta .icn { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .h2-svc-edit { grid-template-columns: 1fr; gap: 32px; }
  .h2-svc-edit-aside { position: static; }
  .h2-svc-edit-aside .ph { aspect-ratio: 16/10; }
}

/* ─── FLEET: Spotlight (variant B) ────────────────────────────────── */
.h2-fleet-spot {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  margin: 8px 0 32px;
}
.h2-fleet-spot .hero {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--t-surface-2, var(--nb-sugar-2));
  border-radius: 8px;
  overflow: hidden;
}
.h2-fleet-spot .hero .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: 50% 50%;
  transition: transform .6s var(--ease-out);
}
.h2-fleet-spot .hero:hover .img { transform: scale(1.04); }
.h2-fleet-spot .hero .num {
  position: absolute; left: 16px; top: 16px;
  background: var(--nb-ink); color: var(--nb-sugar);
  padding: 8px 11px; font: 700 13px/1 var(--font-mono); letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.h2-fleet-spot .hero .tierbadge {
  position: absolute; right: 16px; top: 16px;
  background: var(--nb-sugar); color: var(--nb-navy);
  padding: 8px 11px; font: 700 11px/1 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
}
.h2-fleet-spot .info { display: flex; flex-direction: column; gap: 14px; }
.h2-fleet-spot .info .make { font: 500 13px/1 var(--font-body); color: var(--t-fg-muted, var(--fg-2)); }
.h2-fleet-spot .info .model {
  font: 800 clamp(28px, 3vw, 40px)/1.05 var(--font-display);
  letter-spacing: -.01em;
  color: var(--t-fg, var(--nb-navy));
  margin: 0;
}
.h2-fleet-spot .info .stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--t-border, var(--border-1));
  border-bottom: 1px solid var(--t-border, var(--border-1));
}
.h2-fleet-spot .info .stats .v {
  font: 800 28px/1 var(--font-display);
  color: var(--t-fg, var(--nb-navy));
  font-variant-numeric: tabular-nums;
}
.h2-fleet-spot .info .stats .l {
  font: 600 10px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--t-fg-faint, var(--fg-3)); margin-top: 6px;
}
.h2-fleet-spot .info .feats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.h2-fleet-spot .info .feats > span {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 13px/1 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
}
.h2-fleet-spot .info .feats img.icn,
.h2-fleet-spot .info .feats .icn { width: 22px; height: 22px; font-size: 22px; }
.h2-themed[data-theme="ink"]    .h2-fleet-spot .info .feats img.icn,
.h2-themed[data-theme="violet"] .h2-fleet-spot .info .feats img.icn {
  filter: brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(740%) hue-rotate(229deg) brightness(95%) contrast(92%);
}
.h2-fleet-spot .info .foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; gap: 16px; flex-wrap: wrap;
}
.h2-fleet-spot .info .foot .price { font: 500 13px/1.4 var(--font-body); color: var(--t-fg-faint, var(--fg-3)); }
.h2-fleet-spot .info .foot .price b { color: var(--t-fg, var(--nb-navy)); font-variant-numeric: tabular-nums; }
.h2-fleet-spot .info .foot .spec {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 14px/1 var(--font-body);
  background: var(--nb-violet); color: var(--nb-sugar);
  padding: 13px 20px; border-radius: 4px;
  transition: background .18s var(--ease-out);
}
.h2-fleet-spot .info .foot .spec:hover { background: var(--nb-violet-light); color: var(--nb-navy); }
.h2-fleet-spot .info .foot .spec .icn { width: 14px; height: 14px; }

.h2-fleet-strip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.h2-fleet-strip .thumb {
  background: transparent;
  border: 1px solid var(--t-border, var(--border-1));
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .18s, background .18s, transform .18s;
  font-family: var(--font-body);
}
.h2-fleet-strip .thumb:hover { border-color: var(--t-accent, var(--nb-violet)); transform: translateY(-2px); }
.h2-fleet-strip .thumb.is-active {
  border-color: var(--nb-violet);
  background: var(--t-surface, var(--bg-surface));
}
.h2-fleet-strip .t-img {
  aspect-ratio: 16/10;
  background-size: cover; background-position: center;
  border-radius: 4px;
}
.h2-fleet-strip .t-no    { font: 700 11px/1 var(--font-mono); color: var(--t-accent, var(--nb-violet)); letter-spacing: .04em; }
.h2-fleet-strip .t-model { font: 700 12.5px/1.2 var(--font-display); color: var(--t-fg, var(--nb-navy)); }

@media (max-width: 900px) {
  .h2-fleet-spot   { grid-template-columns: 1fr; }
  .h2-fleet-strip  { grid-template-columns: repeat(3, 1fr); }
}

/* ─── MAP: Directory (variant B) ──────────────────────────────────── */
.h2-map-dir {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 32px;
  margin-top: 8px;
}
.h2-map-dir .card {
  background: var(--t-surface, var(--bg-surface));
  border: 1px solid var(--t-border, var(--border-1));
  padding: 18px 20px;
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .18s, transform .18s;
}
.h2-map-dir .card:hover {
  border-color: var(--t-accent, var(--nb-violet));
  transform: translateY(-2px);
}
.h2-map-dir .card .hd { display: flex; align-items: center; justify-content: space-between; }
.h2-map-dir .card .co {
  font: 700 10px/1 var(--font-body); letter-spacing: .14em;
  padding: 5px 8px;
  background: var(--t-surface-2, var(--nb-sugar-2));
  color: var(--t-fg-muted, var(--fg-2));
  border-radius: 3px;
}
.h2-map-dir .card .freq {
  font: 600 12px/1 var(--font-mono);
  color: var(--t-accent, var(--nb-violet));
  letter-spacing: .02em;
}
.h2-map-dir .card.is-long .freq { color: var(--t-fg-faint, var(--fg-3)); }
.h2-map-dir .card .route {
  display: grid; grid-template-columns: auto auto 1fr;
  align-items: baseline; column-gap: 10px;
}
.h2-map-dir .card .route .from {
  font: 600 13px/1.1 var(--font-display);
  color: var(--t-fg-muted, var(--fg-2));
  letter-spacing: -.005em;
}
.h2-map-dir .card .route .line {
  color: var(--t-accent, var(--nb-violet));
  font: 700 14px/1 var(--font-body);
}
.h2-map-dir .card .route .to {
  font: 800 22px/1.05 var(--font-display);
  color: var(--t-fg, var(--nb-navy));
  letter-spacing: -.01em;
}
.h2-map-dir .card .meta {
  display: flex; gap: 16px;
  padding-top: 12px; border-top: 1px solid var(--t-border, var(--border-1));
  font: 500 12px/1 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
  font-variant-numeric: tabular-nums;
}
.h2-map-dir .card .meta span { display: inline-flex; align-items: center; gap: 6px; }
.h2-map-dir .card .meta .icn {
  color: var(--t-accent, var(--nb-violet));
  font-size: 13px;
  width: 13px; height: 13px;
}

.h2-map-dir-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--t-border, var(--border-1));
}
.h2-map-dir-foot .stats { display: flex; gap: 36px; flex-wrap: wrap; }
.h2-map-dir-foot .stats > div {
  font: 500 13px/1.4 var(--font-body); color: var(--t-fg-muted, var(--fg-2));
  display: inline-flex; align-items: baseline; gap: 8px;
}
.h2-map-dir-foot .stats b {
  font: 800 26px/1 var(--font-display); color: var(--t-fg, var(--nb-navy));
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.h2-map-dir-foot .cta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 14px/1 var(--font-body); color: var(--nb-sugar);
  background: var(--nb-violet);
  padding: 13px 20px; border-radius: 4px;
  transition: background .18s var(--ease-out);
}
.h2-map-dir-foot .cta:hover { background: var(--nb-violet-light); color: var(--nb-navy); }
.h2-map-dir-foot .cta .icn { width: 14px; height: 14px; }

@media (max-width: 1024px) { .h2-map-dir { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .h2-map-dir { grid-template-columns: 1fr; } }

/* ─── Fleet · Variant C · Gallery menu (illustrated category strip) ─── */
/* CEO direction: single continuous violet band running edge-to-edge through
   the section, all four bus illustrations aligned on a shared baseline. The
   labels sit below in container-width grid. Active state is a lavender
   underline at the band's bottom edge + violet label. */
.h2-fleet-band-section {
  /* Top margin must clear the TL gradient wave on .h2-fleet-band::before
     (up to 48px tall, positioned above the band). 32px was too tight and
     let the wave silhouette overlap the section-head lead paragraph
     ('No 20 līdz 55 vietām...'). clamp gives 72px floor + viewport-aware
     headroom so the wave breathes on every desktop size. */
  margin: clamp(72px, 7vw, 96px) 0 0;
}
/* Mobile spacing lives on .h2-fleet-mobile (the mobile-only strip
   element). The desktop .h2-fleet-band-section is display:none at
   <=760px so a margin rule on it would have no visible effect. */
/* Outer band - full-bleed bg only. Width = viewport, breaks out of the
   container padding so the violet reaches edge-to-edge. No grid here; the
   4 cells live in the inner wrapper below. */
.h2-fleet-band {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  /* Bright violet to ink gradient, doc image14 reference.
     Earlier step-6 demote (violet-deep to ink) read as a flat
     navy block; doc expects the autoparks band to keep brand
     violet presence. */
  /* Navy-based gradient (NordBus tumsi zilais 30%) instead of bright
     violet, so the band stops being a large violet surface and the
     10%-accent rule holds across the page. */
  background: linear-gradient(135deg, var(--nb-violet-deep, #290059) 0%, var(--nb-ink, #17121C) 100%);
  padding: 24px 0 10px;
}
/* Inner grid - container-width, but columns proportional to real-world
   bus LENGTH. v4 consolidated to 3 categories: Mini (Sprinter ~7.4m),
   Midi (Otokar Navigo ~8.5m), Max (50+ tourist coaches, ~13m avg of
   Setra/Temsa/MAN/Tourismo). Real-world length ratios preserve the
   visual size ladder for the 3 remaining categories. */
.h2-fleet-band-inner {
  display: grid;
  grid-template-columns: 7.4fr 8.5fr 13fr;
  gap: 0;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  /* Reserve space at the bottom of the grid container so the BL cream
     wave silhouette (.h2-fleet-band-inner::after) sits in a dedicated
     band below the cells instead of cutting into the bus illustration.
     Clamp follows the wave's own height clamp (32px..48px) so at narrow
     viewports the reserved gap shrinks together with the wave; the buses
     are always lifted out of the wave's silhouette range. */
  padding-bottom: clamp(36px, 3.2vw, 52px);
  box-sizing: border-box;
}
.h2-fleet-band-cell {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 8px;
  display: flex; align-items: flex-end; justify-content: center;
  height: 180px;
  cursor: pointer;
  position: relative;
  /* Explicit z-index so the bus illustrations always paint above the
     BL/TR cream waves on .h2-fleet-band-inner::before/after (which use
     z-index: -1). Without this, on some browsers the cell + wave end up
     in the same stacking layer and the wave silhouette covers the bus
     bottom (the "bus image overlapping with the bottom-left wave" report). */
  z-index: 1;
  transition: background .18s var(--ease-out);
}
.h2-fleet-band-cell:hover { background: rgba(255, 255, 255, .04); }
.h2-fleet-band-cell:focus-visible { outline: 2px solid var(--nb-lavender, #C495E5); outline-offset: -2px; }
.h2-fleet-band-cell.is-active { background: rgba(255, 255, 255, .07); }
.h2-fleet-band-cell.is-active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 84px; height: 3px;
  background: var(--nb-lavender, #C495E5);
  border-radius: 2px;
}

/* Per-class explicit heights based on real-world bus height (Sprinter 2.8m
   / Navigo 3.3m / Setra+Temsa+Tourismo 3.65m). At length-proportional
   column widths, each cell is wide enough that HEIGHT becomes the binding
   constraint - so these heights actually take effect instead of getting
   clamped by max-width: 100%. */
.h2-fleet-band-cell img {
  width: auto;
  max-width: 100%;
  display: block;
  user-select: none;
  transition: transform .18s var(--ease-out);
}
.h2-fleet-band-cell[data-id="mini"] img { height: clamp(58px, 6.5vw, 90px); }
.h2-fleet-band-cell[data-id="midi"] img { height: clamp(68px, 7.6vw, 106px); }
.h2-fleet-band-cell[data-id="max"]  img { height: clamp(75px, 8.4vw, 117px); }
.h2-fleet-band-cell:hover img { transform: translateY(-2px); }

/* Labels row - same length-proportional columns so each label sits under
   its bus column. */
.h2-fleet-band-labels {
  display: grid;
  grid-template-columns: 7.4fr 8.5fr 13fr;
  gap: 0;
  margin-top: 18px;
}
.h2-fleet-band-label {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 12px 8px;
  cursor: pointer;
  text-align: center;
  font: inherit; color: inherit;
}
.h2-fleet-band-label .title {
  font: 700 17px/1.2 var(--font-display);
  color: var(--t-fg, var(--nb-navy));
  transition: color .18s var(--ease-out);
}
.h2-fleet-band-label .cap {
  margin-top: 4px;
  font: 500 13px/1.3 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
}
.h2-fleet-band-label .desc {
  margin-top: 6px;
  font: 500 12px/1.35 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
  opacity: .9;
}
/* Model lineup line under the description (Mini = Sprinter + Mercus
   etc.) per v5 doc. Slightly smaller + uppercase + violet accent so
   it reads as a "models in this category" subtitle. */
.h2-fleet-band-label .meta {
  margin-top: 6px;
  font: 600 10px/1.4 var(--font-body);
  letter-spacing: .04em;
  color: var(--t-accent, var(--nb-violet));
  opacity: .85;
}
.h2-fleet-band-label .cnt {
  margin-top: 6px;
  font: 500 11px/1 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
  /* Theme-aware: violet on light grounds, violet-light on ink/violet so
     the "Pieejami" label stays visible regardless of section theme. */
  color: var(--t-accent, var(--nb-violet));
}
.h2-fleet-band-label .cnt .h2-tnum { font-weight: 700; }
.h2-fleet-band-label.is-active .title { color: var(--t-accent, var(--nb-violet)); }
.h2-fleet-band-label:focus-visible {
  outline: 2px solid var(--t-accent, var(--nb-violet));
  outline-offset: 2px;
}

/* Tablet - 3 categories now (Mini / Midi / Max). Stay in one row with
   the same length-proportional widths; cell height shrinks. */
@media (max-width: 760px) {
  .h2-fleet-band-inner { grid-template-rows: 150px; }
  .h2-fleet-band-cell { height: 150px; }
  .h2-fleet-band-cell[data-id="mini"] img { height: clamp(58px, 12vw, 80px); }
  .h2-fleet-band-cell[data-id="midi"] img { height: clamp(68px, 14vw, 95px); }
  .h2-fleet-band-cell[data-id="max"]  img { height: clamp(75px, 15.5vw, 105px); }
}
/* Gap between the strip and the (conditionally rendered) slider */
.h2-fleet-gallery .h2-fleet-grid { margin-top: 40px; }

/* When the gallery is open, units render as a horizontal slider rather
   than a 3-column grid. Snap-scrolling on touch, arrow buttons drive
   programmatic scroll on desktop. */
.h2-fleet-gallery .h2-fleet-slider-wrap {
  position: relative;
  margin-top: 40px;
}
.h2-fleet-gallery .h2-fleet-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 4px 18px;
  scroll-padding: 4px;
  -ms-overflow-style: none;
}
.h2-fleet-gallery .h2-fleet-slider::-webkit-scrollbar { display: none; }
.h2-fleet-gallery .h2-fleet-slider > .h2-unit {
  flex: 0 0 360px;
  scroll-snap-align: start;
}
@media (max-width: 720px) {
  .h2-fleet-gallery .h2-fleet-slider > .h2-unit { flex: 0 0 84%; }
}

/* Slider nav arrows - sit above the slider, top-right of the section */
.h2-fleet-slider-nav { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 14px; }
.h2-fleet-slider-nav button {
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--t-surface, var(--bg-surface));
  border: 1px solid var(--t-border, var(--border-1));
  color: var(--t-fg, var(--nb-navy));
  cursor: pointer;
  transition: background .15s var(--ease-out), border-color .15s, color .15s, transform .15s;
}
.h2-fleet-slider-nav button:hover {
  background: var(--nb-violet); color: var(--nb-sugar); border-color: var(--nb-violet);
  transform: translateY(-1px);
}
.h2-fleet-slider-nav button[disabled] { opacity: .35; cursor: default; transform: none; }
.h2-fleet-slider-nav button[disabled]:hover {
  background: var(--t-surface, var(--bg-surface)); color: var(--t-fg, var(--nb-navy));
  border-color: var(--t-border, var(--border-1));
}
.h2-fleet-slider-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1024px) {
  .h2-fleet-band-cell { height: 160px; }
  /* Heights already use clamp() with viewport-based middle term so they
     adapt automatically. No override needed here. */
}
@media (max-width: 560px) {
  .h2-fleet-gallery .h2-fleet-gallery-menu { grid-template-columns: 1fr 1fr; }
}


/* ─── Fleet gallery · MOBILE layout (stacked class cards) ────────────────
   On mobile the full-bleed band + below-menu pattern is too cramped. We
   render a second set of markup (.h2-fleet-mobile) with the 4 classes as
   stacked cards. Each card has the bus illustration on the left, class
   title / cap / available-count on the right, and an arrow. Click a card
   → its own editorial-style model menu opens directly beneath that card.

   On desktop the .h2-fleet-mobile is hidden and .h2-fleet-band-section +
   .h2-fleet-menu show. The opposite on mobile. */
.h2-fleet-mobile { display: none; }

@media (max-width: 760px) {
  /* Swap visibility: hide desktop band + below-menu, show mobile cards. */
  .h2-fleet-gallery .h2-fleet-band-section { display: none; }
  .h2-fleet-gallery .h2-fleet-menu { display: none; }
  .h2-fleet-mobile {
    display: flex;
    flex-direction: column;
    gap: 0;             /* cards butt against each other, no separation */
    /* Generous top margin so the strip doesn't crowd the heading +
       description text above it on mobile. */
    margin-top: 80px;
    /* Padding so the corner waves (TL+TR+BL+BR) have a clean band to
       sit against without crowding the first/last class card. */
    padding: 44px 0;
    width: 100vw;       /* full-bleed (same as desktop band) */
    position: relative;
    left: 50%;
    margin-left: -50vw;
    box-sizing: border-box;
    /* 60/30/10 (feedback step 6): navy gradient (violet-deep → ink)
       instead of violet → violet-deep. Bright violet is now accent-only.
       The TR + BL cream "eating-in" waves live on the
       .h2-fleet-mobile-card:first/last-child pseudos (defined below). */
    background: linear-gradient(135deg, var(--nb-violet-deep, #290059) 0%, var(--nb-ink, #17121C) 100%);
  }

  [data-brand="med"] .h2-fleet-mobile {
    background: linear-gradient(135deg, var(--nb-navy-soft, #1B264A) 0%, var(--nb-navy, #0E1A33) 100%);
  }
  [data-brand="min"] .h2-fleet-mobile {
    background: var(--nb-ink, #17121C);
  }

  /* Outgoing waves at TL + BR. The strip has a 135° violet→ink
     gradient; the waves should read as that gradient's far
     endpoints (TL = pure violet, BR = pure ink). To achieve this
     we stretch the wave's bg to 500vw and anchor it on the
     correct side (left for TL, right for BR). The wave element
     is ~200px wide; with bg-size 500vw the visible slice covers
     ~11% of the gradient at the violet end (TL) and ~11% at the
     ink end (BR) - basically pure corner colors with the smallest
     hint of transition. Earlier 100vw was reading at 0-55% for TL
     and 44-100% for BR which felt washed out / too mid-gradient. */
  html[data-wave="subtle"] .h2-fleet-mobile::before,
  html[data-wave="bold"]   .h2-fleet-mobile::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: clamp(140px, 36vw, 200px);
    height: clamp(28px, 5vw, 40px);
    pointer-events: none;
    z-index: 4;
    background: linear-gradient(135deg, var(--nb-violet-deep, #290059) 0%, var(--nb-ink, #17121C) 100%);
    background-size: 500vw 100%;
    background-position: left top;
    -webkit-mask-image: var(--wv-stamp);
            mask-image: var(--wv-stamp);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    transform: translateY(calc(-100% + 1px));
  }
  html[data-wave="subtle"] .h2-fleet-mobile::after,
  html[data-wave="bold"]   .h2-fleet-mobile::after {
    content: "";
    position: absolute;
    right: 0; bottom: 0;
    width: clamp(140px, 36vw, 200px);
    height: clamp(28px, 5vw, 40px);
    pointer-events: none;
    z-index: 4;
    background: linear-gradient(135deg, var(--nb-violet-deep, #290059) 0%, var(--nb-ink, #17121C) 100%);
    background-size: 500vw 100%;
    background-position: right top;
    -webkit-mask-image: var(--wv-stamp-rd);
            mask-image: var(--wv-stamp-rd);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    transform: translateY(calc(100% - 1px));
  }

  .h2-fleet-mobile-card {
    position: relative; /* anchor for the first/last-child wave pseudos below */
    transition: background .2s var(--ease-out);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .h2-fleet-mobile-card:last-child { border-bottom: 0; }

  /* TR cream wave — eats DOWN-LEFT into the strip from the top-right.
     Pseudo lives on the FIRST card (top of the strip), positioned
     -44px above the card's top so its bbox reaches the strip's outer
     top edge (compensating for the strip's padding-top:44px). */
  html[data-wave="subtle"] .h2-fleet-mobile-card:first-child::before,
  html[data-wave="bold"]   .h2-fleet-mobile-card:first-child::before {
    content: "";
    position: absolute;
    right: 0;
    top: -44px;
    width: clamp(140px, 36vw, 200px);
    height: clamp(28px, 5vw, 40px);
    pointer-events: none;
    z-index: 3;
    background: var(--t-bg, var(--nb-sugar, #EDEBE0));
    -webkit-mask-image: var(--wv-stamp-rd);
            mask-image: var(--wv-stamp-rd);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }

  /* BL cream wave — eats UP-RIGHT into the strip from the bottom-left.
     Pseudo lives on the LAST card (bottom of the strip), positioned
     -44px below the card's bottom so its bbox reaches the strip's outer
     bottom edge. */
  html[data-wave="subtle"] .h2-fleet-mobile-card:last-child::after,
  html[data-wave="bold"]   .h2-fleet-mobile-card:last-child::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -44px;
    width: clamp(140px, 36vw, 200px);
    height: clamp(28px, 5vw, 40px);
    pointer-events: none;
    z-index: 3;
    background: var(--t-bg, var(--nb-sugar, #EDEBE0));
    -webkit-mask-image: var(--wv-stamp);
            mask-image: var(--wv-stamp);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
  /* Class trigger — centered layout: bigger bus image, name to its right,
     both vertically centered. No right-side arrow. */
  .h2-fleet-mobile-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--nb-sugar);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 22px 16px;
    cursor: pointer;
    text-align: left;
    transition: background .18s var(--ease-out);
  }
  .h2-fleet-mobile-card.is-active .h2-fleet-mobile-trigger {
    background: rgba(255, 255, 255, .08);
  }
  /* Bus illustration — bigger, with per-class heights mirroring the
     desktop band's real-world size ladder. */
  .h2-fleet-mobile-cell {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 160px;
    height: 100px;
  }
  .h2-fleet-mobile-cell img {
    width: auto; height: auto;
    max-width: 100%;
    object-fit: contain;
    user-select: none;
  }
  .h2-fleet-mobile-cell[data-id="mini"] img { max-height: 64px; }
  .h2-fleet-mobile-cell[data-id="midi"] img { max-height: 78px; }
  .h2-fleet-mobile-cell[data-id="max"]  img { max-height: 92px; }

  .h2-fleet-mobile-meta {
    display: flex; flex-direction: column;
    gap: 4px;
    flex: 0 1 auto;
    max-width: 50%;
  }
  .h2-fleet-mobile-meta .title {
    font: 700 22px/1.1 var(--font-display);
    color: var(--nb-sugar);
    letter-spacing: -.008em;
  }
  .h2-fleet-mobile-meta .cap {
    font: 500 13px/1.3 var(--font-body);
    color: rgba(237,235,224,.82);
  }
  .h2-fleet-mobile-meta .desc {
    margin-top: 4px;
    font: 500 12.5px/1.35 var(--font-body);
    color: rgba(237,235,224,.74);
  }
  /* Models line on mobile, mirror of desktop .meta. */
  .h2-fleet-mobile-meta .meta {
    margin-top: 4px;
    font: 600 10.5px/1.4 var(--font-body);
    letter-spacing: .04em;
    color: var(--nb-lavender, #C495E5);
  }
  .h2-fleet-mobile-meta .cnt {
    font: 600 10.5px/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nb-lavender, #C495E5);
    margin-top: 6px;
  }

  /* The inline editorial menu inside an active mobile card. White panel
     under the trigger; pushes the next class card down when open. */
  .h2-fleet-mobile-menu {
    max-height: 0;
    overflow: hidden;
    background: var(--bg-surface, #fff);
    color: var(--nb-navy);
    opacity: 0;
    position: relative;
    transition: max-height .42s var(--ease-out),
                opacity .3s var(--ease-out);
  }
  .h2-fleet-mobile-menu.is-open {
    max-height: 8000px;
    opacity: 1;
  }

  .h2-fleet-mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 8px 16px 14px;
  }

  /* Each model row — collapsed by default. Centered, bigger text,
     no arrow on the right. */
  .h2-fleet-mobile-model {
    border-bottom: 1px solid var(--border-1, rgba(15, 4, 41, .08));
  }
  .h2-fleet-mobile-model:last-child {
    border-bottom: 0;
  }
  .h2-fleet-mobile-model-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 12px;
    cursor: pointer;
    text-align: center;
    color: var(--nb-navy);
    transition: color .18s var(--ease-out);
  }
  .h2-fleet-mobile-model.is-expanded .h2-fleet-mobile-model-trigger {
    color: var(--nb-violet);
  }
  .h2-fleet-mobile-model-trigger .num {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .04em;
    color: var(--fg-3);
    align-self: center;
    margin-top: 6px;
  }
  .h2-fleet-mobile-model.is-expanded .h2-fleet-mobile-model-trigger .num {
    color: var(--nb-violet);
  }
  .h2-fleet-mobile-model-trigger .lbl {
    display: inline-flex; align-items: baseline; gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .h2-fleet-mobile-model-trigger .lbl .mk {
    font: 700 11px/1 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .h2-fleet-mobile-model.is-expanded .h2-fleet-mobile-model-trigger .lbl .mk {
    color: var(--nb-violet);
  }
  .h2-fleet-mobile-model-trigger .lbl .sep {
    font: 700 22px/1 var(--font-display);
    color: var(--fg-3);
  }
  .h2-fleet-mobile-model-trigger .lbl .md {
    font: 700 clamp(20px, 5.5vw, 26px)/1.15 var(--font-display);
    letter-spacing: -.012em;
  }

  /* Details reveal — closed by default, opens when .is-expanded. */
  .h2-fleet-mobile-model-reveal {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 12px;
    transition: max-height .48s var(--ease-out),
                opacity .35s var(--ease-out),
                padding .25s var(--ease-out);
  }
  .h2-fleet-mobile-model.is-expanded .h2-fleet-mobile-model-reveal {
    max-height: 1400px;
    opacity: 1;
    padding: 4px 12px 22px;
  }
  .h2-fleet-mobile-model-reveal .reveal-img {
    width: 100%;
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: var(--nb-ink);
    border-radius: 8px;
    margin-bottom: 16px;
  }
  .h2-fleet-mobile-model-reveal .badges {
    display: flex; gap: 8px;
    font: 700 10px/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .h2-fleet-mobile-model-reveal .b-tier {
    padding: 6px 10px;
    border: 1px solid var(--border-1);
    border-radius: 3px;
    color: var(--fg-2);
  }
  .h2-fleet-mobile-model-reveal .b-cnt {
    padding: 6px 10px;
    background: var(--nb-violet);
    color: var(--nb-sugar);
    border-radius: 3px;
  }
  .h2-fleet-mobile-model-reveal .stats {
    display: flex; gap: 20px;
    margin-bottom: 16px;
  }
  .h2-fleet-mobile-model-reveal .stats > div {
    display: flex; flex-direction: column; gap: 4px;
  }
  .h2-fleet-mobile-model-reveal .stats .v {
    font: 700 22px/1 var(--font-display);
    color: var(--nb-navy);
  }
  .h2-fleet-mobile-model-reveal .stats .l {
    font: 500 11px/1 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .h2-fleet-mobile-model-reveal .feats {
    display: flex; flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 16px;
  }
  .h2-fleet-mobile-model-reveal .feats > span {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 12.5px/1 var(--font-body);
    color: var(--nb-navy);
  }
  .h2-fleet-mobile-model-reveal .feats .icn {
    width: 14px; height: 14px;
    color: var(--nb-violet);
    flex: 0 0 auto;
  }
  .h2-fleet-mobile-model-cta {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--nb-violet);
    font: 600 13px/1 var(--font-body);
    letter-spacing: .02em;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
    padding: 4px 0;
  }
  .h2-fleet-mobile-model-cta .icn { width: 14px; height: 14px; }
}

/* Brand-intensity cascade for the mobile fleet wrapper. Mirrors the
   home2-brand.css overrides for the desktop .h2-fleet-band. */
@media (max-width: 760px) {
  [data-brand="med"] .h2-fleet-mobile {
    background: linear-gradient(135deg, var(--nb-navy-soft, #1B264A) 0%, var(--nb-navy, #0E1A33) 100%);
  }
  [data-brand="min"] .h2-fleet-mobile {
    background: var(--nb-ink);
  }
}

/* ─── Fleet · Variant C · Editorial model menu (below band) ───────────────
   Hidden by default. Opens with a max-height + opacity transition when a
   class chip is clicked. Each row is collapsed to "01 Make · Model" + arrow;
   hover (desktop) or always-open (touch) reveals the full card content with
   text on the left and a bus photo on the right. Click any row → flyer. */
.h2-fleet-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  border-top: 1px solid transparent;
  transition: max-height .42s var(--ease-out),
              opacity .3s var(--ease-out),
              margin-top .3s var(--ease-out),
              border-top-color .3s var(--ease-out);
}
.h2-fleet-menu.is-open {
  max-height: 4400px;
  opacity: 1;
  margin-top: 32px;
  border-top-color: var(--t-border, var(--border-1));
}
.h2-fleet-menu-list { list-style: none; margin: 0; padding: 0; }
.h2-fleet-menu-row {
  display: grid;
  grid-template-columns: 44px 1fr 18px;
  align-items: baseline;
  column-gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--t-border, var(--border-1));
  cursor: pointer;
  transition: padding-left .32s var(--ease-out);
}
.h2-fleet-menu-row:hover,
.h2-fleet-menu-row:focus-visible { padding-left: 10px; outline: none; }
.h2-fleet-menu-row .num {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--t-fg-faint, var(--fg-3));
  font-variant-numeric: tabular-nums;
  align-self: start; margin-top: 10px;
}
.h2-fleet-menu-row:hover .num,
.h2-fleet-menu-row:focus-visible .num { color: var(--t-accent, var(--nb-violet)); }
.h2-fleet-menu-row .lbl {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 10px; row-gap: 2px;
  color: var(--t-fg, var(--nb-navy));
  transition: color .25s var(--ease-out);
}
.h2-fleet-menu-row:hover .lbl,
.h2-fleet-menu-row:focus-visible .lbl { color: var(--t-accent, var(--nb-violet)); }
.h2-fleet-menu-row .lbl .mk {
  font: 700 11px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-fg-muted, var(--fg-2));
  align-self: center;
}
.h2-fleet-menu-row:hover .lbl .mk,
.h2-fleet-menu-row:focus-visible .lbl .mk { color: var(--t-accent, var(--nb-violet)); }
.h2-fleet-menu-row .lbl .sep {
  font: 700 22px/1 var(--font-display);
  color: var(--t-fg-faint, var(--fg-3));
}
.h2-fleet-menu-row .lbl .md {
  font: 700 clamp(22px, 2.3vw, 30px)/1.12 var(--font-display);
  letter-spacing: -.012em;
}
.h2-fleet-menu-row .arr {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3); align-self: start; margin-top: 12px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .22s var(--ease-out),
              color .22s var(--ease-out),
              transform .22s var(--ease-out);
}
.h2-fleet-menu-row:hover .arr,
.h2-fleet-menu-row:focus-visible .arr {
  opacity: 1; color: var(--t-accent, var(--nb-violet)); transform: translateX(0);
}

/* Reveal area - text left, image right. Animated max-height on hover */
.h2-fleet-menu-row .reveal {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 38%, 420px);
  gap: 32px;
  align-items: start;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: max-height .48s var(--ease-out),
              opacity .35s var(--ease-out) .05s,
              margin-top .25s var(--ease-out);
}
.h2-fleet-menu-row:hover .reveal,
.h2-fleet-menu-row:focus-visible .reveal {
  max-height: 360px;
  opacity: 1;
  margin-top: 18px;
}
.h2-fleet-menu-row .reveal-text {
  display: flex; flex-direction: column; gap: 16px;
}
.h2-fleet-menu-row .badges {
  display: flex; gap: 8px;
  font: 700 10px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.h2-fleet-menu-row .b-tier {
  padding: 6px 10px;
  border: 1px solid var(--t-border, var(--border-1));
  border-radius: 3px;
  color: var(--t-fg-muted, var(--fg-2));
  background: var(--t-surface, var(--bg-surface));
}
.h2-fleet-menu-row .b-cnt {
  padding: 6px 10px;
  background: var(--t-accent, var(--nb-violet));
  color: var(--nb-sugar, #fff);
  border-radius: 3px;
  letter-spacing: .08em;
}
.h2-fleet-menu-row .stats {
  display: flex; flex-wrap: wrap;
  gap: 18px 28px;
}
.h2-fleet-menu-row .stats > div {
  display: flex; flex-direction: column; gap: 4px;
}
.h2-fleet-menu-row .stats .v {
  font: 700 22px/1 var(--font-display);
  color: var(--t-fg, var(--nb-navy));
  letter-spacing: -.005em;
}
.h2-fleet-menu-row .stats .l {
  font: 500 11px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-fg-muted, var(--fg-2));
}
.h2-fleet-menu-row .feats {
  display: flex; flex-wrap: wrap;
  gap: 10px 16px;
}
.h2-fleet-menu-row .feats > span {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12.5px/1 var(--font-body);
  color: var(--t-fg, var(--nb-navy));
}
.h2-fleet-menu-row .feats .icn {
  width: 14px; height: 14px;
  color: var(--t-accent, var(--nb-violet));
  flex: 0 0 auto;
}
/* On dark themes the SVGs (hard-coded violet fill) read as a dim blob
   against the ink bg. Filter to near-sugar so the Monitori / USB / WC
   glyphs are clearly visible. Same brightness/invert recipe used for
   why-points and svc-amen on dark themes in home2-brand.css. */
.h2-themed[data-theme="ink"]    .h2-fleet-menu-row .feats img.icn,
.h2-themed[data-theme="violet"] .h2-fleet-menu-row .feats img.icn {
  filter: brightness(0) saturate(100%) invert(95%);
}
.h2-fleet-menu-row .cta {
  display: inline-flex; align-items: center;
}
.h2-fleet-menu-row .cta .spec-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 var(--font-body);
  color: var(--t-accent, var(--nb-violet));
  letter-spacing: .02em;
}
.h2-fleet-menu-row .cta .spec-link .icn { width: 14px; height: 14px; }
.h2-fleet-menu-row .reveal-img {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--nb-ink);
  border-radius: 6px;
}

/* Touch devices - no hover, so the reveal is always shown for any row that
   exists in the menu. User taps a row → flyer modal opens. */
@media (hover: none) {
  .h2-fleet-menu-row .reveal {
    max-height: 800px;
    opacity: 1;
    margin-top: 16px;
  }
  .h2-fleet-menu-row .arr {
    opacity: 1; color: var(--t-accent, var(--nb-violet)); transform: none;
  }
  .h2-fleet-menu-row { padding-left: 0; }
}

/* Mobile - stack the reveal (image first, then text below) */
@media (max-width: 760px) {
  .h2-fleet-menu-row .reveal {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .h2-fleet-menu-row .reveal-img {
    order: -1;
    aspect-ratio: 16/10;
    max-height: 220px;
  }
  .h2-fleet-menu.is-open { max-height: 8000px; }
}

/* ─── Mobile UX polish (v5 audit) ────────────────────────────────── */

/* Services editorial: chevron always visible on mobile so rows
   read as tappable; was opacity:0 until hover, which never fires
   on touch. */
@media (max-width: 900px) {
  .h2-svc-edit-list .arr {
    opacity: .55 !important;
    transform: none !important;
    font-size: 20px;
  }
  .h2-svc-edit-list li { min-height: 56px; }
}

/* Fleet mobile category meta: drop the 50% width cap so long
   lineups (Setra · MB Tourismo · Temza HD 12 · MAN Lion's Coach)
   don't wrap to 4-5 lines. */
@media (max-width: 560px) {
  .h2-fleet-mobile-meta { max-width: none !important; flex: 1 1 auto; }
  .h2-fleet-mobile-meta .meta { font-size: 11px; line-height: 1.4; }
}

/* Service strip: bigger label + drop sub-label on phones so the
   6-card grid reads with clear hierarchy. */
@media (max-width: 560px) {
  .h2-strip-lbl { font: 700 13px/1.2 var(--font-body); }
  .h2-strip-sub { display: none; }
  .h2-strip-card { padding: 12px 10px; min-height: 64px; }
}

/* Services accordion, mobile fit.
   Client 2026-08-03: on mobile the priekšrocības (benefits) list
   was clipped and half the panel width was empty padding on the left.
   Root causes:
   - 44px number column ate 12% of the mobile viewport width for a
     tiny "01" that could sit inline with the title instead.
   - 2-column benefits grid inside a ~300px content column left each
     benefit ~130px wide, so "Pieredzējuši vadītāji starptautiskajiem
     maršrutiem" wrapped to 4+ lines.
   - .p / .benefits / .amen had fixed max-height caps (180/220/140px)
     tuned for desktop 2-col grids; mobile 1-col stacks exceed those
     and get clipped.
   Fix (mobile only): narrower number column, benefits become 1 col,
   max-height caps generous enough to hold every service's content
   without clipping. */
@media (max-width: 560px) {
  .h2-svc-edit-list li {
    grid-template-columns: 26px 1fr 16px;
    column-gap: 12px;
    padding: 12px 0;
  }
  .h2-svc-edit-list li.is-on {
    padding-left: 0;
    padding-bottom: 24px;
  }
  .h2-svc-edit-list .num { font-size: 10.5px; margin-top: 4px; }
  .h2-svc-edit-list .t { font-size: clamp(19px, 5.2vw, 24px); line-height: 1.16; }
  .h2-svc-edit-list li.is-on .d { max-height: 120px; }
  .h2-svc-edit-list li.is-on .p { max-height: 600px; }
  .h2-svc-edit-list .benefits { grid-template-columns: 1fr; gap: 6px 0; }
  .h2-svc-edit-list li.is-on .benefits { max-height: 600px; }
  .h2-svc-edit-list li.is-on .amen { max-height: 360px; }
  /* Client 2026-08-03 screenshot 2: benefits rows had ~55px of
     visual whitespace between items on mobile (a stretched-out list).
     Tightened the parent gap to 6px, killed any inherited min-height,
     and reduced font/line-height so single-line items sit compact
     without cramping the wrapping two-line ones. */
  .h2-svc-edit-list .benefits li {
    grid-template-columns: 18px 1fr;
    column-gap: 10px;
    font: 500 13.5px/1.32 var(--font-body);
    padding: 0;
    min-height: 0;
  }
  .h2-svc-edit-list .benefits .icn { margin-top: 3px; }
  .h2-svc-edit-list .amen-i {
    font-size: 13px;
    padding: 4px 0;
  }
}