/* NordBus Homepage v2 - operator-style redesign
   Less templated, more characterful. Scope all selectors with .h2-* to avoid
   colliding with the existing homepage-styles.css.
   ------------------------------------------------------------------ */

:root { --h2-bar-h: 88px; }

/* Latvian/EN tabular numbers everywhere.
   white-space: nowrap so figures like "5 000+" or "+371 67 464 620"
   never break across lines on narrow viewports (the regular ASCII
   space between the thousands group would otherwise allow a wrap). */
.h2-tnum { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ───────────────────────────────────────────────────────────────────
   TOP BAR · single row, transparent over hero, glossy on scroll
   ─────────────────────────────────────────────────────────────────── */
.h2-top {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 80;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out),
              box-shadow .25s var(--ease-out), backdrop-filter .25s var(--ease-out);
}

/* Sticky-nav scroll offset. Any anchor scrolled into view (hash
   navigation, scrollIntoView, or the nav-click handlers) lands with
   this much breathing room below the 84px sticky top bar. Targets
   include section anchors (#services, #fleet, #why, #karjera,
   #contact, #citi, #news) and the per-service editorial panels
   (#svc-panel-emp, ..., #svc-panel-vip) so dropdown clicks land
   ON the picked service, not on the section header. */
/* No :where() wrapper here: that gives the rule zero specificity and
   any later rule targeting the same element wins. Plain selector list
   has selector-specific specificity (0,1,0 for ids; 0,1,1 for the
   svc-panel- attribute selector with element type implied), which
   beats most accidental overrides. */
#services, #fleet, #why, #karjera, #karjera-banner, #contact, #contact-mobile,
#citi, #news, #rekviziti, #testimonials,
[id^="svc-panel-"] {
  scroll-margin-top: 100px;
}
.h2-top-inner {
  display: flex; align-items: center; gap: 24px;
  /* 68 → 84 to give the bumped 60px logo (step 1) breathing room. */
  height: 84px;
}

/* Logo - inverse (white-out) while on hero, color once scrolled */
.h2-top-logo { display: flex; align-items: center; height: 100%; }
/* Per client feedback (step 1): make the top-bar logo more
   expressive and bigger. 38px → 60px on desktop. The mobile
   override below scales it down a touch so it still fits the
   compact 70px-tall top bar. */
.h2-top-logo img { height: 60px; width: auto; display: block; }
.h2-top-logo .lg-color   { display: none; }
.h2-top-logo .lg-inverse { display: block; }
.h2-top.is-scrolled .h2-top-logo .lg-color   { display: block; }
.h2-top.is-scrolled .h2-top-logo .lg-inverse { display: none; }

/* Nav - sits in the middle, takes remaining space */
.h2-top-nav { flex: 1; }
.h2-top-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 2px; align-items: center;
}
.h2-top-nav li { position: relative; }
.h2-top-nav a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 12px; border-radius: 6px;
  font: 500 14px/1 var(--font-body);
  color: rgba(237,235,224,.92);
  transition: background .15s, color .15s;
}
.h2-top-nav a:hover { background: rgba(237,235,224,.10); color: var(--nb-sugar); }
.h2-top-nav .caret { opacity: .55; font-size: 9px; margin-top: 1px; }
.h2-top.is-scrolled .h2-top-nav a       { color: var(--nb-navy); }
.h2-top.is-scrolled .h2-top-nav a:hover { background: rgba(23,18,28,.05); }

.h2-top-dd {
  position: absolute; top: 100%; left: 0;
  /* 4px visual gap to the trigger is rendered via padding-top so the
     hit area extends from the trigger's bottom edge into the dropdown
     surface, no dead zone for the cursor to leave through. The
     background-clip + visible background apply only to the inner
     padded box so the gap appears blank. */
  padding: 4px 0 0 0;
  background: transparent;
  background-clip: padding-box;
  min-width: 260px;
  z-index: 90;
}
.h2-top-dd::before {
  /* The actual visible dropdown surface, separated from the .h2-top-dd
     hit box so the 4px hover bridge stays transparent. */
  content: "";
  position: absolute; inset: 4px 0 0 0;
  background: var(--bg-surface);
  border-radius: 10px;
  box-shadow: 0 18px 48px -20px rgba(41,0,89,.32), 0 0 0 1px rgba(23,18,28,.06);
  z-index: -1;
}
.h2-top-dd > * { position: relative; }
.h2-top-dd a {
  display: block;
  margin: 0 8px;
  padding: 9px 12px; border-radius: 6px;
  font: 500 13.5px/1.25 var(--font-body); color: var(--nb-navy);
}
.h2-top-dd a:first-child { margin-top: 12px; }
.h2-top-dd a:last-child  { margin-bottom: 8px; }
.h2-top-dd a:hover { background: var(--nb-sugar-2); color: var(--nb-navy); }

/* Right column - phone, language, primary CTA */
.h2-top-r { display: flex; align-items: center; gap: 14px; }
.h2-top-tel {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13.5px/1 var(--font-body);
  color: rgba(237,235,224,.92);
  padding: 8px 4px;
  transition: color .18s var(--ease-out);
  white-space: nowrap;
}
/* Number wrapped at narrow widths because spaces between groups
   were natural break points. nowrap keeps '+371 67 464 620' on a
   single tappable line on mobile (a single tel: link). */
.h2-top-tel .num { white-space: nowrap; }
.h2-top-tel .icn { font-size: 14px; opacity: .85; }
.h2-top-tel img.icn { width: 14px; height: 14px; }
/* Phone icon flips between white-ish (over dark hero) and brand-violet
   (once the top bar gets the scrolled sugar surface) via filter so the
   single design-system file works in both states. */
.h2-top.is-onhero .h2-top-tel img.icn { filter: brightness(0) invert(1); opacity: .88; }
.h2-top-tel:hover { color: var(--nb-sugar); }
.h2-top.is-scrolled .h2-top-tel { color: var(--nb-navy); }
.h2-top.is-scrolled .h2-top-tel img.icn { filter: none; }

.h2-top-lang {
  display: inline-flex; gap: 2px; padding: 3px;
  background: rgba(237,235,224,.10);
  border-radius: 999px;
}
.h2-top-lang button {
  background: transparent; border: 0; cursor: pointer;
  color: rgba(237,235,224,.6);
  font: 600 11.5px/1 var(--font-body); letter-spacing: .06em;
  padding: 6px 10px; border-radius: 999px;
}
.h2-top-lang button[aria-pressed="true"] {
  color: var(--nb-navy); background: var(--nb-sugar);
}
.h2-top.is-scrolled .h2-top-lang { background: rgba(23,18,28,.06); }
.h2-top.is-scrolled .h2-top-lang button { color: var(--fg-2); }
.h2-top.is-scrolled .h2-top-lang button[aria-pressed="true"] {
  color: var(--nb-sugar); background: var(--nb-navy);
}

.h2-top-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--nb-violet); color: var(--nb-sugar);
  padding: 11px 18px; border-radius: 999px;
  font: 700 13.5px/1 var(--font-body); letter-spacing: .02em;
  transition: background .18s var(--ease-out);
}
.h2-top-cta:hover { background: var(--nb-violet-light); color: var(--nb-navy); }

/* Scrolled state - glossy sugar sheet with hairline */
.h2-top.is-scrolled {
  background: rgba(237,235,224,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--border-1);
  box-shadow: 0 6px 24px -20px rgba(41,0,89,.25);
}

@media (max-width: 1100px) {
  .h2-top-nav { display: none; }
  .h2-top-inner { height: 70px; gap: 16px; }
  .h2-top-logo img { height: 50px; }
}
/* Narrowest phones rules consolidated lower in the file alongside
   the <=900px mobile block (see the second @media 640px rule
   below the mobile top-bar block). */

/* ───────────────────────────────────────────────────────────────────
   HERO · full-bleed photo, quote-card on right (OsaBus reference)
   ─────────────────────────────────────────────────────────────────── */
.h2-hero { position: relative; background: var(--nb-ink); overflow: hidden; isolation: isolate; color: var(--nb-sugar); }
.h2-hero-bg { position: absolute; inset: 0; z-index: 0; }
/* Slideshow - all frames stacked, only the .is-on one is visible, the
   others fade out underneath. The full-frame transition gives a slow
   crossfade rather than a hard cut. */
.h2-hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  display: block;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  will-change: opacity;
}
.h2-hero-bg img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .h2-hero-bg img { transition: none; }
}
.h2-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,26,51,.55) 0%, rgba(14,26,51,.18) 38%, rgba(14,26,51,.45) 100%),
    linear-gradient(90deg, rgba(14,26,51,.78) 0%, rgba(14,26,51,.28) 55%, rgba(14,26,51,.0) 100%);
}

.h2-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 420px);
  gap: 48px;
  /* Top/bottom only - keep .container's horizontal gutter intact.
     v8 doc item 7: dropped top padding from 152px to 108px so the H1
     starts near the form's top edge on desktop. Left column also
     switched to top-align (align-items: start) so the eyebrow +
     headline sit at the same y as the form's PAKALPOJUMA VEIDS row,
     instead of being centered with empty space above. */
  padding-top: 108px;
  padding-bottom: 88px;
  /* Take ~88% of the viewport on first paint so the hero dominates
     before the user scrolls. Falls back to a generous 700px minimum
     so it never gets cramped on tall narrow viewports either. */
  min-height: clamp(700px, 88vh, 960px);
  align-items: start;
}
.h2-hero-text { max-width: 560px; color: var(--nb-sugar); }
.h2-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 12px/1 var(--font-body); letter-spacing: .14em;
  text-transform: uppercase; color: rgba(237,235,224,.78);
}
/* (removed em-dash decoration that used to sit before the eyebrow text) */

.h2-hero-h1 {
  margin-top: 16px;
  /* Reduced from clamp(36, 4.2vw, 60) to clamp(30, 3.4vw, 48) so the
     longer new copy (step 2) doesn't read as a wall of text. */
  font: 800 clamp(30px, 3.4vw, 48px)/1.08 var(--font-display);
  letter-spacing: -.018em;
  color: var(--nb-sugar);
  text-wrap: balance;
}
.h2-hero-h1 .accent { color: var(--nb-violet-light); display: inline-block; }
.h2-hero-sub {
  margin-top: 16px;
  font: 400 15.5px/1.55 var(--font-body);
  color: rgba(237,235,224,.78);
  max-width: 480px;
}
/* Hero CTAs (Saņemt piedāvājumu / Apskatīt autoparku) are hidden
   on desktop because the H2HeroCard form sits to the right of the
   text and already carries the primary CTA, making the buttons
   redundant. Mobile keeps them visible because the form card
   stacks BELOW the text there, so the buttons act as
   skip-to-form anchors. */
.h2-hero-cta { margin-top: 24px; display: none; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) {
  .h2-hero-cta { display: flex; }
}
.h2-hero-cta .h2-btn--prim {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--nb-violet); color: var(--nb-sugar);
  font: 700 13.5px/1 var(--font-body); padding: 12px 20px;
  border-radius: 4px; transition: background .18s var(--ease-out);
}
.h2-hero-cta .h2-btn--prim:hover { background: var(--nb-violet-light); color: var(--nb-navy); }
.h2-hero-cta .h2-btn--prim img.icn,
.h2-hero-cta .h2-btn--ghost img.icn { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.h2-hero-cta .h2-btn--ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--nb-sugar);
  font: 600 13.5px/1 var(--font-body); padding: 12px 18px;
  border: 1px solid rgba(237,235,224,.30); border-radius: 4px;
  transition: border-color .18s, background .18s;
}
.h2-hero-cta .h2-btn--ghost:hover { border-color: var(--nb-sugar); background: rgba(237,235,224,.08); }

.h2-hero-trust {
  margin-top: 28px;
  display: grid; grid-template-columns: repeat(2, max-content);
  gap: 8px 32px; list-style: none; padding: 0;
}
.h2-hero-trust li {
  display: flex; align-items: center; gap: 9px;
  font: 500 13px/1.4 var(--font-body); color: rgba(237,235,224,.82);
}
.h2-hero-trust .icn {
  /* Outer chip stays compact - the icon glyph itself grows to fill more
     of it so the EURO VI / shield / globe read clearly from a distance. */
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(196,149,229,.18); border-radius: 50%;
  font-size: 11px; color: var(--nb-violet-light);
}
.h2-hero-trust .icn img.icn { width: 18px; height: 18px; filter: brightness(0) saturate(100%) invert(81%) sepia(20%) saturate(680%) hue-rotate(229deg) brightness(94%) contrast(95%); }

/* Right column: quote card with tabs ------------------------------------- */
.h2-hero-card {
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 22px 22px 20px;
  box-shadow: 0 24px 64px -28px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.12);
  color: var(--nb-navy);
  align-self: center;
  transition: box-shadow .3s var(--ease-out);
}
/* Pulse applied when the visitor clicks the header CTA while the
   form is already on screen. Brief violet halo + slight scale so
   the eye lands on the form. Class is added then removed by the
   click handler, so the animation re-fires on every click. */
.h2-hero-card.is-pulsing {
  animation: h2-hero-card-pulse 1.4s var(--ease-out) 1;
}
@keyframes h2-hero-card-pulse {
  0%   { box-shadow: 0 24px 64px -28px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.12), 0 0 0 0   rgba(110, 34, 151, .55); }
  35%  { box-shadow: 0 24px 64px -28px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.12), 0 0 0 14px rgba(110, 34, 151, 0); }
  100% { box-shadow: 0 24px 64px -28px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.12), 0 0 0 0   rgba(110, 34, 151, 0); }
}
.h2-hero-card h3 {
  font: 700 18px/1.2 var(--font-display);
  letter-spacing: -.008em;
  color: var(--nb-navy);
  margin: 0 0 14px;
}
/* v8 doc item 8: Privatpersona / Uznemums pill toggle above the hero
   form. Uses the same accent-on-active pattern as the top-bar lang
   toggle so both surfaces read as one design language. */
.h2-hero-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px;
  background: rgba(15, 4, 41, .06);
  border-radius: 999px;
  margin: 0 0 14px;
}
.h2-hero-tab {
  background: transparent; border: 0; cursor: pointer;
  font: 600 12.5px/1 var(--font-body); letter-spacing: .02em;
  color: var(--fg-2);
  padding: 9px 12px; border-radius: 999px;
  transition: color .18s var(--ease-out), background .18s var(--ease-out);
}
.h2-hero-tab:hover { color: var(--nb-navy); }
.h2-hero-tab.is-on {
  color: var(--nb-sugar);
  background: var(--nb-violet);
}
.h2-hero-card .field-group { margin-bottom: 18px; }
.h2-hero-card .field-group-label {
  display: block;
  font: 600 11px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.h2-hero-card .tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-bottom: 0;
  border: 1px solid var(--border-1); border-radius: 8px; padding: 4px;
  background: var(--nb-sugar);
}
.h2-hero-card .tabs button {
  background: transparent; border: 0; cursor: pointer;
  padding: 11px 12px; border-radius: 6px;
  font: 600 13px/1.2 var(--font-body); color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .18s, color .18s, box-shadow .18s;
}
.h2-hero-card .tabs button[aria-pressed="true"] {
  background: var(--bg-surface); color: var(--nb-navy);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--border-1);
}
.h2-hero-card .tabs .icn { font-size: 14px; color: var(--nb-violet); }
.h2-hero-card .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.h2-hero-card .field > span { font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.h2-hero-card .field input,
.h2-hero-card .field textarea,
.h2-hero-card .field select {
  border: 0; border-bottom: 1px solid var(--border-2);
  background: transparent; outline: none;
  padding: 6px 0; font: 500 14px/1.3 var(--font-body); color: var(--nb-navy);
  border-radius: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.h2-hero-card .field input:focus,
.h2-hero-card .field textarea:focus,
.h2-hero-card .field select:focus { border-bottom-color: var(--nb-violet); }

/* Hybrid date field: a visible readonly text input forced into the
   LV "dd.mm.gggg" format + a hidden native <input type="date"> that
   we open with showPicker() on any click. The native input renders
   its DISPLAY in the user's OS locale (US Chrome -> mm/dd/yyyy),
   which the client explicitly does not want; the readonly text
   sibling gives us full control of the visible format while the
   native control still drives the real calendar popover.

   The hidden input must stay in the DOM (display:none breaks
   showPicker), so it's positioned offscreen but with size>0 so
   browsers consider it interactive. pointer-events:none keeps it
   from stealing clicks from the visible input. */
.h2-datefield { position: relative; cursor: pointer; }
.h2-datefield .h2-datefield-visible { cursor: pointer; }
/* Use !important on the geometry rules so the parent context's
   field styles (.h2-hero-card .field input width:100%/padding) and
   the quote-bar .row input rules cannot bring the hidden picker
   back into the layout. showPicker() still works on a 1px input. */
.h2-datefield .h2-datefield-native,
.h2-datefield-native {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Leading-icon variant - icon sits left of the input on the same baseline.
   Mirrors the reference site's contact form per CEO feedback (#8). */
.h2-hero-card .field--icon { position: relative; }
.h2-hero-card .field--icon > .icn {
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 17px; height: 17px;
  color: var(--nb-violet);
  pointer-events: none;
}
.h2-hero-card .field--icon img.icn { width: 17px; height: 17px; }
.h2-hero-card .field--icon input,
.h2-hero-card .field--icon select { padding-left: 26px; }
.h2-hero-card .field--icon textarea { padding-left: 26px; padding-top: 4px; }
/* Multi-line textarea: anchor the icon to the first text line instead of
   the field bottom (which would sit way below the visible input area). */
.h2-hero-card .field--icon:has(textarea) > .icn {
  bottom: auto; top: 28px;
}
.h2-hero-card .field textarea { resize: none; min-height: 60px; font-size: 14.5px; line-height: 1.5; }
.h2-hero-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.h2-hero-card .submit-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.h2-hero-card .h2-form-microcopy {
  margin: 10px 0 0;
  text-align: right;
  font: 500 12px/1.4 var(--font-body);
  color: var(--fg-3);
}
.h2-hero-card .submit-row label.consent {
  display: flex; align-items: center; gap: 8px;
  font: 500 12px/1.4 var(--font-body); color: var(--fg-2); flex: 1;
}
.h2-hero-card .submit-row label.consent a { color: var(--nb-violet); text-decoration: underline; }

/* Global consent checkbox style (re-used by every form on the site
   so the GDPR opt-in looks identical everywhere). Always renders
   unchecked - copy and link are owned by H2Consent in
   home2-shell.jsx. Form-specific wrappers below tweak spacing and
   alignment without redefining the inner type. */
label.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 500 13px/1.45 var(--font-body);
  color: var(--fg-2);
  cursor: pointer;
}
label.consent input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--nb-violet);
  cursor: pointer;
}
label.consent a { color: var(--nb-violet); text-decoration: underline; }
label.consent.consent--dense { font-size: 12px; gap: 8px; }
label.consent.consent--dense input[type="checkbox"] { width: 14px; height: 14px; }

.h2-qbar-consent { margin: 10px 0 6px; }
.h2-partner-form-consent,
.h2-atsauksmes-consent,
.h2-karjera-form-consent { margin-top: 18px; }
.h2-hero-card .submit-row button {
  background: var(--nb-violet); color: var(--nb-sugar); border: 0;
  font: 700 14px/1 var(--font-body); letter-spacing: .04em;
  padding: 14px 24px; border-radius: 6px; cursor: pointer;
  text-transform: uppercase;
  transition: background .18s var(--ease-out);
}
.h2-hero-card .submit-row button:hover { background: var(--nb-navy); }

@media (max-width: 980px) {
  .h2-hero-inner { grid-template-columns: 1fr; gap: 28px; padding-top: 92px; padding-bottom: 56px; min-height: 0; }
  .h2-hero-card { padding: 22px 20px; }
}
@media (max-width: 640px) {
  /* Form submit-row wraps on narrow mobiles: consent text on top
     full-width, submit button below full-width. Previously the
     button (with its uppercase letter-spacing + 24px horizontal
     padding) was being squeezed by the consent label's flex:1 and
     overflowing the form card on the right. */
  .h2-hero-card .submit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .h2-hero-card .submit-row label.consent { flex: 0 0 auto; }
  .h2-hero-card .submit-row button { width: 100%; padding: 16px 18px; }
}

/* ───────────────────────────────────────────────────────────────────
   QUICK-QUOTE BAR · straddles hero / next section · the "search bar"
   ─────────────────────────────────────────────────────────────────── */
.h2-qbar-wrap { position: relative; z-index: 5; margin-top: calc(var(--h2-bar-h) * -1 - 16px); }
.h2-qbar {
  background: var(--bg-surface);
  border-radius: 6px;
  padding: 8px;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr .9fr 1.4fr auto;
  align-items: stretch;
  gap: 1px;
  box-shadow: 0 24px 60px -28px rgba(41,0,89,.32), 0 2px 6px rgba(23,18,28,.06);
  border: 1px solid var(--border-1);
}
.h2-qbar .qf { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; background: var(--bg-surface); border-right: 1px solid var(--border-1); }
.h2-qbar .qf:last-of-type { border-right: 0; }
.h2-qbar .qf .lbl { font: 600 10.5px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.h2-qbar .qf .val { font: 500 15px/1.2 var(--font-body); color: var(--fg-1); border: 0; outline: none; background: transparent; padding: 0; width: 100%; }
.h2-qbar .qf .val::placeholder { color: var(--fg-3); }
.h2-qbar .qf .icn-pre { color: var(--nb-violet); font-size: 14px; }
.h2-qbar .qf .row { display: flex; gap: 8px; align-items: center; }
.h2-qbar .qsubmit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--nb-violet); color: var(--nb-sugar); border: 0;
  font: 700 15px/1 var(--font-body); letter-spacing: .01em;
  padding: 0 28px; cursor: pointer; border-radius: 4px;
  transition: background .18s var(--ease-out);
}
.h2-qbar .qsubmit:hover { background: var(--nb-violet-deep); }
.h2-qbar .qsubmit .arr { transition: transform .18s var(--ease-out); }
.h2-qbar .qsubmit:hover .arr { transform: translateX(3px); }
.h2-qbar-foot { margin-top: 14px; display: flex; gap: 24px; align-items: center; font: 500 12.5px/1.4 var(--font-body); color: var(--fg-2); }
.h2-qbar-foot b { color: var(--fg-1); font-weight: 600; }
@media (max-width: 1100px) {
  .h2-qbar { grid-template-columns: 1fr 1fr; }
  .h2-qbar .qf, .h2-qbar .qsubmit { border-right: 0; border-bottom: 1px solid var(--border-1); }
  .h2-qbar .qsubmit { padding: 16px 28px; grid-column: 1 / -1; border-bottom: 0; }
}

/* ───────────────────────────────────────────────────────────────────
   KAROGA · bent vertical-bar pattern band - section spacer
   ─────────────────────────────────────────────────────────────────── */
.h2-karoga {
  height: 8px;
  background:
    repeating-linear-gradient(
      100deg,
      var(--nb-violet) 0 5px,
      transparent 5px 9px,
      var(--nb-violet-deep) 9px 14px,
      transparent 14px 18px,
      var(--nb-lavender) 18px 23px,
      transparent 23px 36px
    );
}
.h2-karoga--lg { height: 14px; }

/* ───────────────────────────────────────────────────────────────────
   SERVICE STRIP · six B2B domains immediately under hero
   ─────────────────────────────────────────────────────────────────── */
/* The wrapper sits with negative top-margin so the strip overlaps the hero
   bottom edge by ~28px - it reads as "popping out" of the hero rather than
   as a separate section. The card row uses an explicit grid so all six
   columns are equal width regardless of label length. */
.h2-strip-wrap {
  position: relative;
  z-index: 5;
  margin-top: -36px;
  padding-bottom: 24px;
  pointer-events: none; /* let container reactivate, so the negative
                           margin doesn't swallow hero clicks */
}
.h2-strip-wrap .container { pointer-events: auto; }
.h2-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border-2, rgba(15,4,41,.08));
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 14px 40px rgba(15, 4, 41, .14), 0 2px 6px rgba(15, 4, 41, .06);
}
.h2-strip-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--nb-navy);
  font: 600 12.5px/1.2 var(--font-body);
  transition: background .18s ease, color .18s ease, transform .18s ease;
  min-width: 0;
}
.h2-strip-card:hover,
.h2-strip-card:focus-visible {
  background: rgba(110, 34, 151, .08);
  color: var(--nb-violet);
  transform: translateY(-1px);
  outline: none;
}
.h2-strip-icn {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--nb-violet);
}
.h2-strip-icn svg { width: 26px; height: 26px; }
.h2-strip-icn img.icn { width: 28px; height: 28px; }
/* Two-line strip card content: bold title + muted subline. The copy block
   takes remaining horizontal space next to the icon; title can wrap to
   two lines but the subline is single-line ellipsised so the card height
   stays predictable. */
.h2-strip-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.h2-strip-lbl {
  font: 600 13px/1.2 var(--font-body);
  color: var(--nb-navy);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.h2-strip-sub {
  font: 500 11.5px/1.25 var(--font-body);
  color: var(--fg-3, #6f6783);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.h2-strip-card:hover .h2-strip-sub,
.h2-strip-card:focus-visible .h2-strip-sub { color: var(--nb-violet); opacity: .78; }
/* Tablet / narrow viewports - wrap to 3 columns x 2 rows */
@media (max-width: 980px) {
  .h2-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h2-strip-lbl { font-size: 12.5px; }
}
@media (max-width: 640px) {
  .h2-strip-wrap { margin-top: -24px; padding-bottom: 18px; }
  .h2-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 6px; }
  .h2-strip-card { padding: 10px; gap: 10px; }
  .h2-strip-icn { width: 32px; height: 32px; }
  .h2-strip-icn svg { width: 18px; height: 18px; }
}

/* ───────────────────────────────────────────────────────────────────
   SERVICES · expanding photo accordion (6 panels, hover/click to grow)
   ─────────────────────────────────────────────────────────────────── */
.h2-services { padding: 88px 0 72px; background: var(--nb-sugar); }
.h2-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; flex-wrap: wrap; }
.h2-section-head .l { max-width: 600px; }
.h2-section-head .eb { font: 700 11.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--nb-violet); }
.h2-section-head h2 { margin-top: 12px; font: 700 clamp(26px, 3vw, 40px)/1.08 var(--font-display); letter-spacing: -.015em; color: var(--nb-navy); }
.h2-section-head h2 em { font-style: normal; color: var(--nb-violet); }
.h2-section-head p { margin-top: 12px; font: 400 15px/1.55 var(--font-body); color: var(--fg-2); }
.h2-section-head .r { font: 500 12.5px/1.4 var(--font-body); color: var(--fg-2); text-align: right; }
.h2-section-head .r b { display: block; font: 800 22px/1 var(--font-display); color: var(--nb-navy); margin-bottom: 4px; }

.h2-svc-acc {
  display: flex; gap: 8px;
  height: 460px;
  margin-top: 8px;
  border-top: 1px solid var(--border-1);
  padding-top: 24px;
}

.h2-svc-pan {
  position: relative;
  flex: 1 1 0;
  min-width: 72px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--nb-ink);
  color: var(--nb-sugar);
  outline: none;
  transition: flex-grow 520ms var(--ease-out), flex-basis 520ms var(--ease-out);
}
.h2-svc-pan.is-active { flex-grow: 7; }
.h2-svc-pan:focus-visible { box-shadow: 0 0 0 3px rgba(110,34,151,.45); }

/* Background photo - slightly desaturated when collapsed, full when active */
.h2-svc-pan-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: 50% 50%;
  transform: scale(1.02);
  filter: saturate(.55) brightness(.78);
  transition: filter 520ms var(--ease-out), transform 720ms var(--ease-out);
}
.h2-svc-pan.is-active .h2-svc-pan-bg {
  filter: saturate(1) brightness(.92);
  transform: scale(1.06);
}

/* Gradient shade - heavier when collapsed; lighter when active so the
   photo can breathe behind the open content panel */
.h2-svc-pan-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,26,51,.10) 0%, rgba(14,26,51,.70) 65%, rgba(14,26,51,.92) 100%),
    linear-gradient(90deg,  rgba(41,0,89,.45)  0%, rgba(41,0,89,.0)   60%);
  transition: background 520ms var(--ease-out);
}
.h2-svc-pan.is-active .h2-svc-pan-shade {
  background:
    linear-gradient(180deg, rgba(14,26,51,.10) 0%, rgba(14,26,51,.55) 55%, rgba(14,26,51,.88) 100%),
    linear-gradient(90deg,  rgba(14,26,51,.78) 0%, rgba(14,26,51,.20) 60%, rgba(14,26,51,0) 100%);
}

/* Collapsed: number top, rotated label running up the panel */
.h2-svc-pan-collapsed {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px 18px;
  opacity: 1; transition: opacity 220ms var(--ease-out);
  pointer-events: none;
}
.h2-svc-pan.is-active .h2-svc-pan-collapsed { opacity: 0; }
.h2-svc-pan-collapsed .num {
  font: 700 12px/1 var(--font-mono); letter-spacing: .04em;
  color: var(--nb-violet-light);
}
.h2-svc-pan-collapsed .vlbl {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 700 16px/1 var(--font-display); letter-spacing: -.005em;
  color: var(--nb-sugar);
  align-self: flex-start;
  white-space: nowrap;
}

/* Expanded: full content panel, anchored bottom-left */
.h2-svc-pan-open {
  position: absolute; inset: auto 0 0 0;
  padding: 28px 30px 30px;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms var(--ease-out) 180ms, transform 320ms var(--ease-out) 180ms;
  pointer-events: none;
  max-width: 640px;
}
.h2-svc-pan.is-active .h2-svc-pan-open {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.h2-svc-pan-open .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.h2-svc-pan-open .head .num {
  font: 700 12px/1 var(--font-mono); letter-spacing: .04em;
  color: var(--nb-violet-light); font-variant-numeric: tabular-nums;
}
.h2-svc-pan-open h3 {
  font: 700 clamp(20px, 2vw, 26px)/1.12 var(--font-display);
  letter-spacing: -.01em;
  color: var(--nb-sugar);
  margin: 0;
}
.h2-svc-pan-open p {
  font: 400 14px/1.55 var(--font-body);
  color: rgba(237,235,224,.85);
  max-width: 480px;
  margin: 0;
}
.h2-svc-pan-open .amen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.h2-svc-pan-open .amen-i {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 11px;
  background: rgba(237,235,224,.10);
  border-radius: 999px;
  font: 600 13px/1 var(--font-body); letter-spacing: .02em;
  color: rgba(237,235,224,.92);
  backdrop-filter: blur(6px);
}
.h2-svc-pan-open .amen-i img.icn,
.h2-svc-pan-open .amen-i .icn {
  width: 26px; height: 26px; font-size: 26px;
  /* Light pink / lavender (--nb-lavender ≈ #C495E5) for a softer
     contrast against the dark photo overlay. */
  filter: brightness(0) saturate(100%) invert(80%) sepia(15%) saturate(715%) hue-rotate(232deg) brightness(98%) contrast(91%);
}
.h2-svc-pan-open .amen-i .amen-lbl { text-transform: capitalize; }
.h2-svc-pan-open .cta {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font: 700 14px/1 var(--font-body);
  color: var(--nb-sugar);
  padding: 12px 18px;
  background: var(--nb-violet);
  border-radius: 4px;
  margin-top: 4px;
  transition: background .18s var(--ease-out);
}
.h2-svc-pan-open .cta:hover { background: var(--nb-violet-light); color: var(--nb-navy); }
.h2-svc-pan-open .cta .icn { width: 14px; height: 14px; }

.h2-svc-acc-hint {
  margin-top: 22px;
  font: 500 12.5px/1.4 var(--font-body); color: var(--fg-3);
  letter-spacing: .02em;
  text-align: right;
}

/* Shared "viens telefona numurs" CTA at the bottom of the services section.
   Two-column band: messaging left, contact stack right. Brand violet bg so
   it stands out against the surrounding sugar/white panels. */
.h2-svc-cta {
  margin-top: 40px;
  padding: 32px 36px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--nb-violet) 0%, var(--nb-violet-deep, #290059) 100%);
  color: #fff;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
}
.h2-svc-cta-l .eb {
  font: 700 11.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.h2-svc-cta-l h3 {
  margin-top: 10px;
  font: 700 clamp(22px, 2.2vw, 30px)/1.15 var(--font-display);
  letter-spacing: -.012em;
}
.h2-svc-cta-l h3 em {
  /* Match the printed flyer's emphasis pattern: same colour as the
     surrounding title, emphasis carried by an under-text accent bar
     instead of a hue shift (the lavender tint was reading as grey on
     the violet bg). */
  font-style: normal;
  color: #fff;
  background-image: linear-gradient(var(--nb-violet-light) 0%, var(--nb-violet-light) 100%);
  background-repeat: no-repeat;
  background-size: 100% 5px;
  background-position: 0 100%;
  padding-bottom: 4px;
}
.h2-svc-cta-l p {
  margin-top: 12px;
  font: 400 14.5px/1.55 var(--font-body);
  color: rgba(255, 255, 255, .82);
  max-width: 540px;
}
.h2-svc-cta-r { display: flex; flex-direction: column; gap: 12px; }
.h2-svc-cta-tel {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
  background: #fff;
  color: var(--nb-violet);
  padding: 16px 20px;
  border-radius: 12px;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.h2-svc-cta-tel:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
/* No chip behind the phone icon - just the glyph on the white pill, per
   CEO feedback (the violet-on-violet chip read as an "AI icon" mistake). */
.h2-svc-cta-tel .ico {
  display: grid; place-items: center;
  color: var(--nb-violet);
}
.h2-svc-cta-tel .ico svg { width: 22px; height: 22px; }
.h2-svc-cta-tel .ico img.icn { width: 22px; height: 22px; }
.h2-svc-cta-tel .num {
  font: 800 22px/1 var(--font-display);
  letter-spacing: -.005em;
}
.h2-svc-cta-mail {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 var(--font-body);
  color: #fff;
  text-decoration: none;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  width: fit-content;
}
.h2-svc-cta-mail:hover { color: var(--nb-violet-light); }
/* CTA mail + cal use inline SVGs with stroke=currentColor (see JSX). Force
   pure white explicitly so they don't inherit the parent link's underline-
   border tint or any reduced-opacity meta colour. The stroke-width override
   is critical: site.css sets a base .icn { stroke-width: 1.5 } which beats
   the SVG's own strokeWidth="7" attribute, so without this override the
   icons render at a 0.3px hairline and look invisible against violet. */
.h2-svc-cta-mail svg.icn,
.h2-svc-cta-meta svg.icn {
  width: 22px; height: 22px;
  color: #fff;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 8;
}
.h2-svc-cta-mail svg.icn circle,
.h2-svc-cta-meta svg.icn circle { fill: currentColor; stroke: none; }
.h2-svc-cta-mail img.icn { width: 28px; height: 28px; filter: brightness(0) invert(1); }
.h2-svc-cta-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12.5px/1.4 var(--font-body);
  color: rgba(255, 255, 255, .68);
  margin-top: 2px;
}
.h2-svc-cta-meta svg { width: 14px; height: 14px; }
.h2-svc-cta-meta img.icn { width: 22px; height: 22px; filter: brightness(0) invert(1); }
@media (max-width: 760px) {
  .h2-svc-cta { grid-template-columns: 1fr; padding: 26px 22px; gap: 22px; }
  .h2-svc-cta-tel .num { font-size: 19px; }
}

/* Why-points icon badge (leading the title) */
.h2-why-points li { display: grid; grid-template-columns: 36px 1fr; gap: 6px 14px; }
.h2-why-points .h2-why-point-i {
  grid-row: 1 / span 2;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(110,34,151,.10);
  color: var(--nb-violet);
  font-size: 18px;
  border-radius: 8px;
  margin-top: 8px;
}
.h2-why-points .h2-why-point-i img.icn { width: 20px; height: 20px; }
.h2-why-points h4 { grid-column: 2; margin: 0; }
.h2-why-points p  { grid-column: 2; margin: 0; }

@media (max-width: 1024px) { .h2-svc-acc { height: 480px; } }
@media (max-width: 720px) {
  .h2-svc-acc {
    flex-direction: column;
    height: auto;
    gap: 10px;
  }
  .h2-svc-pan { min-width: 0; min-height: 76px; }
  .h2-svc-pan.is-active { flex-grow: 0; min-height: 420px; }
  .h2-svc-pan-collapsed { flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px; }
  .h2-svc-pan-collapsed .vlbl { writing-mode: horizontal-tb; transform: none; }
}

/* ───────────────────────────────────────────────────────────────────
   FLEET CATALOGUE · tabs by tier + horizontal scroller with unit numbers
   ─────────────────────────────────────────────────────────────────── */
.h2-fleet {
  padding: 80px 0;
  background: var(--bg-surface);
  /* Hairline borders only render usefully on light (sugar) themes; on
     dark/ink themes the same rgba turns into a faint near-black line
     against a near-black background that reads as a seam between
     Autoparks and the following section (Karjera). The .h2-themed
     overrides below restore the borders for sugar themes only. */
  border-top: 0;
  border-bottom: 0;
}
.h2-fleet.h2-themed[data-theme="sugar"],
.h2-fleet.h2-themed[data-theme="sugar2"],
.h2-fleet.h2-themed[data-theme="white"] {
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.h2-fleet-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-1); margin-bottom: 32px; overflow-x: auto; scrollbar-width: none; }
.h2-fleet-tabs::-webkit-scrollbar { display: none; }
.h2-fleet-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 16px 4px; margin-right: 32px;
  font: 600 14px/1.2 var(--font-body); color: var(--fg-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.h2-fleet-tab:hover { color: var(--fg-1); }
.h2-fleet-tab[aria-selected="true"] { color: var(--nb-navy); border-bottom-color: var(--nb-violet); }
.h2-fleet-tab .cnt { font: 700 12px/1 var(--font-mono); color: var(--nb-violet); padding: 3px 6px; background: rgba(110,34,151,.1); border-radius: 4px; font-variant-numeric: tabular-nums; }
.h2-fleet-tab[aria-selected="true"] .cnt { background: var(--nb-violet); color: var(--nb-sugar); }

.h2-fleet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.h2-unit { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s, border-color .18s; cursor: pointer; }
.h2-unit:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -16px rgba(41,0,89,.3); border-color: var(--nb-lavender); }
.h2-unit-img { aspect-ratio: 16/10; background: var(--nb-sugar-2) center/cover no-repeat; position: relative; }
.h2-unit-no {
  position: absolute; left: 14px; top: 14px;
  background: var(--nb-ink); color: var(--nb-sugar);
  padding: 7px 10px;
  font: 700 12px/1 var(--font-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 6px;
}
.h2-unit-no .pre { color: var(--nb-lavender); font-weight: 500; }
/* Per-model availability badge (replaces per-unit Nr. NNN now that the
   fleet displays one card per model with a count). */
.h2-unit-count {
  position: absolute; left: 14px; top: 14px;
  background: var(--nb-ink); color: var(--nb-sugar);
  padding: 7px 10px;
  font: 700 12px/1 var(--font-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 6px;
}
.h2-unit-count .num { color: var(--nb-sugar); font-weight: 700; }
.h2-unit-count .pre { color: var(--nb-lavender); font-weight: 500; text-transform: lowercase; letter-spacing: .04em; }
.h2-unit-tier { position: absolute; right: 14px; top: 14px; background: var(--nb-sugar); padding: 6px 10px; font: 600 10.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--nb-navy); }
.h2-unit-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 4px; }
.h2-unit-make { font: 500 12.5px/1 var(--font-body); color: var(--fg-2); }
.h2-unit-model { font: 700 18px/1.15 var(--font-display); letter-spacing: -.005em; color: var(--nb-navy); }
.h2-unit-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-1); }
.h2-unit-row > div .v { font: 700 15px/1 var(--font-display); color: var(--nb-navy); font-variant-numeric: tabular-nums; }
.h2-unit-row > div .l { font: 600 10px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-top: 4px; }
.h2-unit-feats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; }
.h2-unit-feats > span { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px/1.4 var(--font-body); color: var(--fg-2); }
.h2-unit-feats .icn,
.h2-unit-feats img.icn { font-size: 22px; width: 22px; height: 22px; color: var(--nb-violet); }
.h2-unit-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-1); display: flex; align-items: center; justify-content: space-between; }
.h2-unit-foot a { font: 600 13px/1 var(--font-body); color: var(--nb-violet); display: inline-flex; align-items: center; gap: 6px; }
.h2-unit-foot .price { font: 500 12px/1.3 var(--font-body); color: var(--fg-3); }
.h2-unit-foot .price b { color: var(--fg-1); font-weight: 700; font-variant-numeric: tabular-nums; }

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

/* ───────────────────────────────────────────────────────────────────
   MAP · coverage strip with Latvia/Baltics + city list
   ─────────────────────────────────────────────────────────────────── */
.h2-map { padding: 80px 0; background: var(--nb-sugar); }
.h2-map-grid { display: grid; grid-template-columns: .9fr 1.3fr; gap: 56px; align-items: stretch; }
.h2-map-l { display: flex; flex-direction: column; }
/* v2 doc: 'Teksts Regular. Burti visur taisni, var violetā iezīmēt
   Baltijā / Eiropā.' Map heading uses <em> for Baltijā / Eiropā;
   neutralise the browser-default italic but keep the violet accent. */
.h2-map-l h2 em { font-style: normal; color: var(--nb-violet); }
/* City list (Variant A · Overview) - sits on the left next to the SVG map.
   Uses theme tokens so navy on sugar / sugar on ink reads at the right
   contrast on every theme. */
.h2-map-cities {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px;
  margin-bottom: 28px;
}
.h2-map-city {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--t-border, var(--border-1));
}
.h2-map-city .city {
  font: 600 13.5px/1.2 var(--font-display);
  letter-spacing: -.005em;
  color: var(--t-fg, var(--nb-navy));
}
.h2-map-city.is-home .city { color: var(--t-accent, var(--nb-violet)); }
.h2-map-city.is-long .city { color: var(--t-fg-muted, var(--fg-2)); }
.h2-map-city .freq {
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: .02em;
  color: var(--t-fg-muted, var(--fg-2));
}

/* LV regional cities chip row - sits between the main city table and the
   stat block. Lighter visual weight than the routes so the long-haul
   corridors still read first. */
.h2-map-regional {
  margin: -10px 0 22px;
  padding: 14px 0 0;
  border-top: 1px solid var(--t-border, var(--border-1));
}
.h2-map-regional-lbl {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-fg-muted, var(--fg-3, #6f6783));
  margin-bottom: 10px;
}
.h2-map-regional-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.h2-map-regional-chips span {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--t-chip-bg, rgba(110, 34, 151, .08));
  color: var(--t-fg, var(--nb-violet-deep, #290059));
  font: 600 12px/1 var(--font-body);
  letter-spacing: .005em;
  border: 1px solid var(--t-chip-bd, rgba(110, 34, 151, .14));
}

.h2-map-stats { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border-1); padding-top: 24px; }
.h2-map-stats > div { padding: 12px 16px 4px 0; }
.h2-map-stats .v { font: 800 24px/1 var(--font-display); color: var(--nb-navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.h2-map-stats .l { font: 500 12px/1.4 var(--font-body); color: var(--fg-2); margin-top: 6px; }
.h2-map-canvas { position: relative; background: var(--bg-surface); border: 1px solid var(--border-1); aspect-ratio: 7/5; overflow: hidden; }
.h2-map-canvas svg { display: block; width: 100%; height: 100%; }
.h2-map-canvas .country { fill: var(--nb-sugar-2); stroke: var(--border-1); stroke-width: 1; }
.h2-map-canvas .country.home { fill: var(--bg-surface); stroke: var(--nb-violet); stroke-width: 1.5; }
.h2-map-canvas .route { fill: none; stroke: var(--nb-violet); stroke-width: 1.5; stroke-dasharray: 3 5; stroke-linecap: round; animation: h2-route-march 12s linear infinite; }
.h2-map-canvas .route.long { stroke: var(--nb-violet-deep); stroke-dasharray: 2 6; opacity: .7; animation-duration: 18s; }
.h2-map-canvas .route.regional { stroke: var(--nb-violet-light, #C495E5); stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; animation-duration: 15s; }
@keyframes h2-route-march { to { stroke-dashoffset: -120; } }
@media (prefers-reduced-motion: reduce) {
  .h2-map-canvas .route { animation: none; }
}
.h2-map-canvas .city-ring { stroke: var(--nb-violet-deep); }
.h2-map-canvas .city { fill: var(--nb-violet); }
.h2-map-canvas .city.origin { fill: var(--nb-violet-deep); }
.h2-map-canvas .city-label { font: 600 11px/1 var(--font-body); fill: var(--nb-violet-deep); }
.h2-map-canvas .city-label.sm { font-size: 10px; fill: var(--fg-2); font-weight: 500; }
.h2-map-canvas .city.regional { fill: var(--nb-violet-light, #C495E5); opacity: .85; }
.h2-map-canvas .city-label.xs { font-size: 8.5px; fill: var(--fg-3, #6f6783); font-weight: 500; }
.h2-map-legend { position: absolute; left: 16px; top: 16px; background: rgba(237,235,224,.92); padding: 12px 14px; font: 500 11.5px/1.3 var(--font-body); border: 1px solid var(--border-1); }
.h2-map-legend > div { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.h2-map-legend > div:last-child { margin-bottom: 0; }
.h2-map-legend .sw { width: 16px; height: 2px; background: var(--nb-violet); }
.h2-map-legend .sw.dash { background-image: linear-gradient(90deg, var(--nb-violet) 50%, transparent 50%); background-size: 4px 100%; height: 2px; background-color: transparent; }
@media (max-width: 900px) { .h2-map-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ───────────────────────────────────────────────────────────────────
   STATS BAND · big typographic, no cards
   ─────────────────────────────────────────────────────────────────── */
.h2-stats { background: var(--nb-ink); color: var(--nb-sugar); padding: 64px 0; }
.h2-stats-inner { display: grid; grid-template-columns: .8fr 1.4fr; gap: 48px; align-items: end; }
.h2-stats-l { max-width: 400px; }
.h2-stats-l .eb { font: 700 11.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--nb-violet-light); }
.h2-stats-l h2 { margin-top: 12px; font: 700 clamp(24px, 2.6vw, 32px)/1.15 var(--font-display); letter-spacing: -.01em; color: var(--nb-sugar); }
.h2-stats-l p { margin-top: 12px; font: 400 14.5px/1.55 var(--font-body); color: rgba(237,235,224,.72); }
.h2-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
/* Each stat centers its number + label horizontally so the gap
   from number to number reads identical regardless of how wide
   the value is (v3 doc 'sakārtot skaitļos līdzīgām atstarpēm').
   Left aligning at equal cell width made the short '29' sit far
   from the wide '5 000+' while '5 000+' hugged '24 h'. Same cell
   width, very different perceived rhythm. Centering anchors each
   stat at its cell midpoint so center to center spacing across
   the three stats is uniform. */
.h2-stat { border-left: 1px solid rgba(237,235,224,.14); padding: 0 24px; text-align: center; }
.h2-stat:first-child { border-left: 0; }
.h2-stat .v { font: 800 clamp(36px, 4vw, 52px)/.95 var(--font-display); color: var(--nb-sugar); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h2-stat .v .accent { color: var(--nb-violet-light); }
.h2-stat .l { font: 600 11px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--nb-lavender); margin-top: 12px; }
@media (max-width: 900px) {
  .h2-stats-inner { grid-template-columns: 1fr; gap: 32px; }
  /* Center heading + description so they match the centered stat
     numbers below. .h2-stats-l has max-width: 400px from desktop;
     auto horizontal margins center the whole 400px box within
     the grid cell (otherwise it hugs the left edge and text-align
     center only centers text WITHIN that left-hugged 400px box). */
  .h2-stats-l { text-align: center; margin-left: auto; margin-right: auto; }
  .h2-stats-l p { margin-left: auto; margin-right: auto; }
  /* 3 stats in a 2-col grid left a dead half-cell on the second
     row. Switching to 1 col on mobile so each stat gets its own
     row at full width, separated by a thin top divider line. No
     dead space, label has room to breathe. */
  .h2-stats-row { grid-template-columns: 1fr; gap: 0; }
  .h2-stat { border-left: 0; padding: 18px 0; }
  .h2-stat + .h2-stat { border-top: 1px solid rgba(237, 235, 224, .14); }
}

/* ───────────────────────────────────────────────────────────────────
   PAR MUMS · why us · large copy + interior photo
   ─────────────────────────────────────────────────────────────────── */
.h2-why { padding: 96px 0; background: var(--nb-sugar); position: relative; }
.h2-why-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.h2-why-l { max-width: 540px; }
.h2-why-l .eb { font: 700 11.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--nb-violet); }
.h2-why-l h2 { margin-top: 14px; font: 700 clamp(28px, 3.4vw, 44px)/1.1 var(--font-display); letter-spacing: -.015em; color: var(--nb-navy); }
.h2-why-l h2 em { font-style: normal; color: var(--nb-violet); }
.h2-why-l h2 .pause { color: var(--nb-violet); font-style: normal; }
.h2-why-l .lead { margin-top: 18px; font: 400 15px/1.55 var(--font-body); color: var(--fg-2); }
.h2-why-points { margin-top: 32px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.h2-why-points li { padding-top: 14px; border-top: 1px solid var(--border-1); }
.h2-why-points h4 { font: 700 15px/1.25 var(--font-display); color: var(--nb-navy); margin: 0 0 4px; }
.h2-why-points p { font: 400 13.5px/1.55 var(--font-body); color: var(--fg-2); }
.h2-why-r { position: relative; }
.h2-why-photo { aspect-ratio: 4/5; overflow: hidden; background: var(--nb-ink); }
.h2-why-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-why-overlay {
  position: absolute; left: 0; bottom: 28px;
  background: var(--nb-sugar);
  padding: 16px 20px;
  font: 700 18px/1.18 var(--font-display);
  letter-spacing: -.005em;
  color: var(--nb-navy);
  max-width: 80%;
  border-left: 3px solid var(--nb-violet);
}
.h2-why-overlay .sub { font: 500 13px/1.4 var(--font-body); letter-spacing: 0; color: var(--fg-2); margin-top: 4px; }
@media (max-width: 900px) { .h2-why-grid { grid-template-columns: 1fr; gap: 32px; } .h2-why-points { grid-template-columns: 1fr; } }

/* ───────────────────────────────────────────────────────────────────
   CITI PAKALPOJUMI · ATD / Bus rental / B2B
   ─────────────────────────────────────────────────────────────────── */
.h2-citi { padding: 80px 0; background: var(--bg-surface); border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); }
.h2-citi-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.h2-citi-row { display: grid; grid-template-columns: 60px 1fr 1.4fr minmax(200px, max-content); gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--border-1); align-items: center; }
.h2-citi-row:last-child { border-bottom: 0; }
.h2-citi-row .num { font: 700 13px/1 var(--font-mono); color: var(--nb-violet); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.h2-citi-row h3 { font: 700 22px/1.12 var(--font-display); letter-spacing: -.008em; color: var(--nb-navy); }
.h2-citi-row .desc { font: 400 14.5px/1.55 var(--font-body); color: var(--fg-2); max-width: 540px; }
.h2-citi-row .partners { margin-top: 8px; font: 500 12.5px/1.4 var(--font-body); color: var(--fg-3); }
.h2-citi-row .partners b { color: var(--fg-1); font-weight: 600; }
.h2-citi-row .cta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 var(--font-body); color: var(--nb-violet);
  padding: 10px 16px; border: 1px solid var(--border-2); border-radius: 4px;
  transition: background .18s, border-color .18s;
}
.h2-citi-row .cta:hover { background: var(--nb-violet); color: var(--nb-sugar); border-color: var(--nb-violet); }
/* Row buttons (e.g. Pieteikt sadarbibu) reset native button chrome
   so they look identical to the anchor-styled .cta links. */
.h2-citi-row button.cta {
  background: transparent;
  cursor: pointer;
  appearance: none;
  font-family: inherit;
}
@media (max-width: 900px) { .h2-citi-row { grid-template-columns: 1fr; gap: 12px; } }

/* Pieteikt sadarbibu, inline B2B partnership form revealed when row 02
   button is clicked. Sits below the row list within the same section. */
.h2-partner-form-wrap {
  margin-top: 36px;
  border-top: 1px solid var(--border-1);
  padding-top: 32px;
}
.h2-partner-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 28px 32px 32px;
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
.h2-partner-form h3 {
  font: 700 22px/1.2 var(--font-display);
  color: var(--nb-navy);
  margin: 0 0 8px;
}
.h2-partner-form-intro {
  font: 400 14px/1.55 var(--font-body);
  color: var(--fg-2);
  margin: 0 0 22px;
}
.h2-partner-form-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  font: 400 24px/1 var(--font-body);
  color: var(--fg-3);
  cursor: pointer;
  border-radius: 4px;
}
.h2-partner-form-close:hover { background: rgba(0,0,0,.06); color: var(--nb-navy); }
.h2-partner-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.h2-partner-form .field { display: flex; flex-direction: column; gap: 6px; }
.h2-partner-form .field > span {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.h2-partner-form .field input,
.h2-partner-form .field textarea,
.h2-partner-form .field select {
  border: 0;
  border-bottom: 1px solid var(--border-2);
  background: transparent;
  outline: none;
  padding: 6px 0;
  font: 500 14px/1.3 var(--font-body);
  color: var(--nb-navy);
  border-radius: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.h2-partner-form .field input:focus,
.h2-partner-form .field textarea:focus,
.h2-partner-form .field select:focus { border-bottom-color: var(--nb-violet); }
.h2-partner-form .field textarea { resize: none; }
.h2-partner-form-full { grid-column: 1 / -1; }
.h2-partner-form-submit { margin-top: 22px; display: flex; justify-content: flex-end; }
.h2-partner-form-submit button {
  background: var(--nb-violet);
  color: var(--nb-sugar);
  border: 0;
  padding: 13px 26px;
  font: 700 13px/1 var(--font-body);
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background .18s;
}
.h2-partner-form-submit button:hover { background: var(--nb-navy); }
.h2-partner-form-thanks {
  padding: 24px 0 8px;
  font: 400 15px/1.55 var(--font-body);
  color: var(--fg-1);
}
.h2-partner-form-thanks strong {
  display: block;
  font: 700 20px/1.2 var(--font-display);
  color: var(--nb-navy);
  margin-bottom: 8px;
}
.h2-partner-form-thanks button {
  margin-top: 14px;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--nb-navy);
  font: 600 13px/1 var(--font-body);
  padding: 10px 18px;
  border-radius: 4px;
  cursor: pointer;
}
@media (max-width: 720px) {
  .h2-partner-form { padding: 24px 20px; }
  .h2-partner-form-grid { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────
   NEWS · scroller (tighter, less card-y)
   ─────────────────────────────────────────────────────────────────── */
.h2-news { padding: 80px 0; background: var(--nb-sugar); }
/* 1 featured (full-width hero) + 5 cards (3-col grid below). The
   featured card is itself a 2-col image/body grid. */
.h2-news-feat { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; align-items: stretch; margin-bottom: 24px; }
.h2-news-feat .h2-news-img { aspect-ratio: 16/10; min-height: 320px; }
.h2-news-feat .h2-news-body { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
/* News grid sized for 5 cards (after the featured hero) on a 3-col
   desktop layout, collapses progressively for smaller viewports. */
/* align-items: stretch (default) + flex card + flex body so every
   card matches the tallest sibling in its row. Without this, an
   excerpt that runs 3 lines stretches its card past a 2-line
   neighbour and the row looks uneven (user-reported: FlixBus card
   taller than the concert card). */
.h2-news-grid-4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.h2-news-card { background: var(--bg-surface); border: 1px solid var(--border-1); overflow: hidden; display: flex; flex-direction: column; transition: border-color .18s, transform .18s; }
.h2-news-card:hover { transform: translateY(-2px); border-color: var(--nb-lavender); }
.h2-news-card .h2-news-body { flex: 1; }
.h2-news-card.h2-news-feat .h2-news-body { padding: 22px 24px 26px; }
/* News CARD image (the thumbnail on each card in the news list):
   covers the 16/10 frame, cropping if needed. Card layout depends
   on a uniform aspect so cards line up; cropping is acceptable
   here. The expanded-article gallery below uses contain so the
   ACTUAL photos the client uploaded aren't cropped when viewed
   in full. */
.h2-news-card .h2-news-img { aspect-ratio: 16/10; background: var(--nb-sugar-2) center/cover no-repeat; }
.h2-news-card .h2-news-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.h2-news-card .h2-news-meta { font: 600 11.5px/1 var(--font-body); letter-spacing: .04em; color: var(--fg-3); }
.h2-news-card .h2-news-meta b { color: var(--nb-violet); }
.h2-news-card h3 { font: 700 16px/1.28 var(--font-display); letter-spacing: -.005em; color: var(--nb-navy); }
.h2-news-card.h2-news-feat h3 { font-size: 22px; }
.h2-news-card .h2-news-excerpt { font: 400 14px/1.55 var(--font-body); color: var(--fg-2); }

/* Skatit vairak inline expand. Toggle button reveals the full article
   body + photo gallery below the excerpt. Hidden block ships in the
   DOM at load (SEO safe), gated by [hidden]. When .is-open is on, the
   card grows in place; the grid reflows to make room. */
.h2-news-card .h2-news-toggle {
  align-self: flex-start;
  /* margin-top: auto pushes the toggle to the bottom of the body so
     cards in the same row line up at the bottom even when their
     excerpt copy is different lengths. Pair with .h2-news-card
     .h2-news-body { flex: 1 } and align-items: stretch on the grid. */
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 6px 0;
  font: 700 13px/1 var(--font-body);
  letter-spacing: .02em;
  color: var(--nb-violet);
  cursor: pointer;
}
.h2-news-card .h2-news-toggle:hover { color: var(--nb-violet-deep); }
.h2-news-card .h2-news-toggle svg {
  width: 14px; height: 14px;
  transition: transform .25s var(--ease-out);
}
.h2-news-card.is-open .h2-news-toggle svg { transform: rotate(90deg); }

/* Full-width drawer rendered after the row containing the open
   card (parcelsanas24 pattern). Inside the grid it spans all 3
   columns; below the featured card it just sits as a sibling
   block and takes the full container width by default. */
/* Drawer inherits the parent grid columns via subgrid so the white
   bridge (placed as a grid item on the source card's column) matches
   the card width pixel-for-pixel with zero manual math. Body copy and
   gallery span all columns and sit in normal flow inside the drawer
   via .h2-news-drawer-inner. */
.h2-news-drawer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  margin-top: 0;
}
.h2-news-drawer-inner {
  grid-column: 1 / -1;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-top: 0;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* White "bridge" that fills the gap between the source card and the
   drawer, spanning exactly the source card's grid column so the card
   visually bleeds into the drawer (v9 client feedback iteration 3).
   As a subgrid item its left/right edges match the card's grid track
   exactly, so no subpixel misalignment. */
.h2-news-drawer-notch {
  grid-row: 1;
  height: 25px;
  align-self: start;
  margin-top: -25px;
  background: var(--bg-surface);
  /* The source card has a 1px border, so its visible WHITE body is
     inset 1px from its outer edge. Without matching borders here, the
     bridge (which has grid-column matching the card's outer edges)
     would extend 1px past the card's white body on each side, showing
     as a visible overshoot. Matching L/R borders + box-sizing:
     border-box makes the bridge's white fill align with the card's
     white body. */
  border-left: 1px solid var(--border-1);
  border-right: 1px solid var(--border-1);
  box-sizing: border-box;
  pointer-events: none;
  display: none;
  z-index: 1;
}
.h2-news-drawer--col-0 .h2-news-drawer-notch { display: block; grid-column: 1; }
.h2-news-drawer--col-1 .h2-news-drawer-notch { display: block; grid-column: 2; }
.h2-news-drawer--col-2 .h2-news-drawer-notch { display: block; grid-column: 3; }
/* Mobile: 1-col grid so the bridge spans the single column
   regardless of colIdx (JSX passes -1). */
@media (max-width: 900px) {
  .h2-news-drawer .h2-news-drawer-notch { display: block; grid-column: 1 / -1; }
}
.h2-news-drawer p {
  margin: 0;
  font: 400 14.5px/1.65 var(--font-body);
  color: var(--fg-2);
  max-width: 70ch;
}
.h2-news-drawer .h2-news-gallery {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* Gallery cells inside the expanded article drawer: contain so
   no cropping. The client uploaded these full-resolution; we want
   them shown intact even if it means letterbox bands. */
.h2-news-drawer .h2-news-gallery-cell {
  aspect-ratio: 4/3;
  background: var(--nb-sugar-2) center/contain no-repeat;
  border-radius: 4px;
}
/* Featured-card drawer sits below the hero, full container width. */
.h2-news-feat + .h2-news-drawer {
  margin-top: -20px;
  margin-bottom: 24px;
}
/* Highlight the active card so the user can see which one the drawer
   belongs to. Subtle violet border bump. */
.h2-news-card.is-open { border-color: var(--nb-violet); }

@media (max-width: 900px) {
  .h2-news-feat { grid-template-columns: 1fr; }
  .h2-news-feat .h2-news-body { padding: 20px 22px 24px; }
  .h2-news-grid-4 { grid-template-columns: 1fr; }
  .h2-news-card .h2-news-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ───────────────────────────────────────────────────────────────────
   REKVIZITI · legal-entity info panel (docx lines 347 to 356)
   ─────────────────────────────────────────────────────────────────── */
.h2-rekviziti { padding: 64px 0; }
.h2-rekviziti-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 14px 28px;
  margin: 24px 0 0;
  max-width: 720px;
  font: 500 15px/1.4 var(--font-body);
}
.h2-rekviziti-list dt {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-fg-muted, var(--fg-3));
  align-self: center;
}
.h2-rekviziti-list dd { margin: 0; color: var(--t-fg, var(--nb-navy)); }
@media (max-width: 720px) {
  .h2-rekviziti-list { grid-template-columns: 1fr; gap: 4px 0; }
  .h2-rekviziti-list dt { margin-top: 14px; }
}

/* ───────────────────────────────────────────────────────────────────
   ATSAUKSMES UN SUDZIBAS · feedback-and-complaints form (docx 402+)
   ─────────────────────────────────────────────────────────────────── */
.h2-atsauksmes { padding: 80px 0; }
.h2-atsauksmes-form { max-width: 820px; margin: 32px 0 0; }
.h2-atsauksmes-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
}
.h2-atsauksmes-form legend {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-fg-muted, var(--fg-3));
  margin-bottom: 12px;
}
.h2-atsauksmes-form fieldset .radios {
  display: flex; flex-wrap: wrap; gap: 18px 24px;
}
.h2-atsauksmes-form fieldset .radios label {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 14px/1 var(--font-body);
  color: var(--t-fg, var(--nb-navy));
  cursor: pointer;
}
.h2-atsauksmes-form fieldset .radios input { accent-color: var(--nb-violet); }

.h2-atsauksmes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.h2-atsauksmes-full { grid-column: 1 / -1; }
.h2-atsauksmes-form .field { display: flex; flex-direction: column; gap: 6px; }
.h2-atsauksmes-form .field > span {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-fg-muted, var(--fg-3));
}
.h2-atsauksmes-form .field input,
.h2-atsauksmes-form .field textarea,
.h2-atsauksmes-form .field select {
  border: 0;
  border-bottom: 1px solid var(--t-border, var(--border-2));
  background: transparent;
  outline: none;
  padding: 6px 0;
  font: 500 14.5px/1.3 var(--font-body);
  color: var(--t-fg, var(--nb-navy));
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.h2-atsauksmes-form .field input:focus,
.h2-atsauksmes-form .field textarea:focus,
.h2-atsauksmes-form .field select:focus { border-bottom-color: var(--nb-violet); }
.h2-atsauksmes-form .field textarea { resize: vertical; min-height: 96px; }
.h2-atsauksmes-form .field input[type="file"] { padding: 8px 0; font-size: 13px; }
.h2-atsauksmes-submit { margin-top: 28px; display: flex; justify-content: flex-end; }
.h2-atsauksmes-submit button {
  background: var(--nb-violet);
  color: var(--nb-sugar);
  border: 0;
  padding: 14px 28px;
  font: 700 13px/1 var(--font-body);
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background .18s;
}
.h2-atsauksmes-submit button:hover { background: var(--nb-navy); }
.h2-atsauksmes-thanks {
  margin-top: 32px;
  padding: 32px;
  background: var(--bg-surface, white);
  border: 1px solid var(--t-border, var(--border-1));
  border-radius: 8px;
  max-width: 600px;
  font: 400 15px/1.55 var(--font-body);
}
.h2-atsauksmes-thanks strong {
  display: block;
  font: 700 22px/1.2 var(--font-display);
  color: var(--t-fg, var(--nb-navy));
  margin-bottom: 8px;
}
.h2-atsauksmes-thanks button {
  margin-top: 14px;
  background: transparent;
  border: 1px solid var(--t-border, var(--border-2));
  color: var(--t-fg, var(--nb-navy));
  font: 600 13px/1 var(--font-body);
  padding: 10px 18px;
  border-radius: 4px;
  cursor: pointer;
}
@media (max-width: 720px) {
  .h2-atsauksmes-grid { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────
   PARTNERS · 5x2 logo strip between Why us and Citi pakalpojumi
   Logos render desaturated until hover for a calm row that doesn't
   compete with the surrounding sections.
   ─────────────────────────────────────────────────────────────────── */
.h2-partners { padding: 64px 0 56px; }
.h2-partners-head { max-width: 640px; margin-bottom: 32px; }
.h2-partners-head .eb {
  font: 700 11px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-accent, var(--nb-violet));
}
.h2-partners-head h2 {
  margin-top: 10px;
  font: 700 clamp(22px, 2.6vw, 32px)/1.15 var(--font-display);
  letter-spacing: -.012em;
  color: var(--t-fg, var(--nb-navy));
}
.h2-partners-head h2 em {
  font-style: normal;
  color: var(--t-accent, var(--nb-violet));
}

/* Marquee track. Container is full-bleed; the inner track is wider
   than the viewport (10 logos x 2 = 20 cells) and animates left at a
   constant speed. translateX -50% lands exactly on the second copy
   of the same logo, so the loop reads as continuous. */
.h2-partners-marquee {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  padding: 8px 0;
  overflow: hidden;
  /* Soft fade on the left + right edges so logos enter / exit the
     viewport rather than abruptly clipping. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
}
.h2-partners-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: h2-partners-marquee 50s linear infinite;
}
.h2-partners-marquee:hover .h2-partners-track { animation-play-state: paused; }
@keyframes h2-partners-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.h2-partner-cell {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  height: 110px;
  min-width: 180px;
  padding: 0 32px;
  background: transparent;
}
/* Logos render directly on the dark band. brightness(0) invert(1)
   maps every non-transparent pixel to white, which works for the
   text-mark logos (RIX, airBaltic, MAXIMA, Balticovo, eugesta, VEF,
   ISR). Shield-only logos (FC Riga, Rigas Zelli, JDFS Alberts) come
   from sources with a filled silhouette so they show as solid white
   shapes; their source files need clean white-on-transparent
   replacements for full detail. */
.h2-partner-cell img {
  max-height: 72px;
  max-width: 200px;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  opacity: .82;
  transition: opacity .18s;
}
.h2-partner-cell:hover img { opacity: 1; }
/* Sport-team shield / filled-silhouette logos: desaturate so they
   sit in the same monochrome tonal range as the white text-marks,
   but skip the brightness/invert recipe that would flatten them
   into solid white blobs. Slight brightness lift + reduced
   contrast keeps internal detail readable on the navy band. */
.h2-partner-cell--solid img {
  filter: grayscale(1) brightness(1.4) contrast(.95);
  opacity: .88;
}
.h2-partner-cell--solid:hover img { opacity: 1; }
/* Square / badge logos (1:1 aspect) hit max-height before max-width
   and therefore render visually smaller than the wide text-mark
   logos at the same nominal size. Oversize their max-height + cell
   so they match the visual weight of the text marks. */
.h2-partner-cell--large img {
  max-height: 110px;
  max-width: 200px;
}
.h2-partner-cell--large { min-width: 200px; padding: 0 20px; }

/* Partner testimonials row (v4 doc, scaffolded). Renders only when
   TESTIMONIALS_LV / _EN have entries. Each figure is a card-ish
   quote block with optional logo + author info beneath. */
.h2-partners-quotes {
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.h2-partners-quote {
  margin: 0;
  padding: 24px 26px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  color: var(--t-fg, var(--nb-sugar));
}
.h2-partners-quote blockquote {
  margin: 0 0 18px;
}
.h2-partners-quote blockquote p {
  margin: 0;
  font: 400 14.5px/1.55 var(--font-body);
  color: var(--t-fg, var(--nb-sugar));
}
.h2-partners-quote blockquote p::before { content: '\201C'; margin-right: 2px; opacity: .7; }
.h2-partners-quote blockquote p::after  { content: '\201D'; margin-left: 2px;  opacity: .7; }
.h2-partners-quote figcaption {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 14px;
}
.h2-partners-quote-logo {
  width: 36px; height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .85;
}
.h2-partners-quote-author {
  font: 600 13.5px/1.2 var(--font-body);
  color: var(--t-fg, var(--nb-sugar));
}
.h2-partners-quote-role {
  font: 500 12px/1.3 var(--font-body);
  color: var(--t-fg-muted, rgba(237, 235, 224, .55));
  margin-top: 2px;
}
@media (max-width: 720px) {
  .h2-partners-quotes { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .h2-partners-quote { padding: 20px 22px; }
}

.h2-partners-foot {
  margin: 24px 0 0;
  font: 500 13px/1.4 var(--font-body);
  letter-spacing: .04em;
  color: var(--t-fg-muted, var(--fg-3));
  text-align: right;
}
@media (max-width: 720px) {
  .h2-partner-cell { height: 86px; min-width: 140px; padding: 0 20px; }
  .h2-partner-cell img { max-height: 54px; max-width: 150px; }
  .h2-partner-cell--large img { max-height: 80px; max-width: 150px; }
  .h2-partners-track { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .h2-partners-track { animation: none; }
}

/* ───────────────────────────────────────────────────────────────────
   PRIVACY POLICY · long-form GDPR-shaped draft in footer modal
   ─────────────────────────────────────────────────────────────────── */
.h2-privacy { padding: 8px 0; }
.h2-privacy-draft {
  margin-top: 16px !important;
  padding: 14px 16px;
  background: rgba(110, 34, 151, .08);
  border-left: 3px solid var(--nb-violet);
  border-radius: 4px;
  font: 500 13.5px/1.55 var(--font-body) !important;
  color: var(--nb-violet-deep) !important;
}
.h2-privacy-meta {
  margin: 8px 0 18px !important;
  font: 600 12.5px/1.3 var(--font-body) !important;
  color: var(--fg-3) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Cookie declaration table on the /sikdatnu-politika page. Wrapper
   gives horizontal scroll on narrow viewports so the 5-column table
   never pushes the page wider than it should be. */
.h2-cookie-table-wrap {
  margin: 16px 0 24px;
  overflow-x: auto;
  border: 1px solid var(--border-1);
  border-radius: 4px;
}
.h2-cookie-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font: 400 13.5px/1.4 var(--font-body);
  color: var(--fg-2);
}
.h2-cookie-table thead th {
  background: var(--nb-sugar-2);
  color: var(--nb-navy);
  font: 700 11.5px/1.2 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-1);
}
.h2-cookie-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-1);
  vertical-align: top;
}
.h2-cookie-table tbody tr:last-child td { border-bottom: 0; }
.h2-cookie-table tbody td:first-child {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12.5px;
  color: var(--nb-violet);
  white-space: nowrap;
}
.h2-privacy-body { margin-top: 22px; max-width: 760px; }
.h2-privacy-body h3 {
  font: 700 20px/1.3 var(--font-display);
  color: var(--t-fg, var(--nb-navy));
  margin: 32px 0 10px;
  letter-spacing: -.005em;
}
.h2-privacy-body h3:first-of-type { margin-top: 0; }
/* Subsection headings (1.1, 1.2, ...) sit clearly under the numbered
   section h3. Without an explicit rule the browser's user-agent
   stylesheet was rendering <h4> at ~1em bold, which visually dwarfed
   the tighter 16px h3 above it. Now: h3 > h4 > body copy. */
.h2-privacy-body h4 {
  font: 700 14.5px/1.35 var(--font-display);
  color: var(--t-fg, var(--nb-navy));
  margin: 20px 0 6px;
  letter-spacing: .01em;
}
.h2-privacy-body p {
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
  margin: 0 0 8px;
}
.h2-privacy-body ul {
  margin: 4px 0 12px;
  padding-left: 22px;
  font: 400 14.5px/1.55 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
}
.h2-privacy-body ul li { margin-bottom: 4px; }

.h2-modal-panel .h2-privacy { padding: 8px 0; }
.h2-modal-panel .h2-privacy .container { padding: 0 32px; }
@media (max-width: 720px) {
  .h2-modal-panel .h2-privacy .container { padding: 0 18px; }
}

/* ───────────────────────────────────────────────────────────────────
   FOOTER REKVIZITI · compact legal-entity block in brand column
   ─────────────────────────────────────────────────────────────────── */
.h2-footer-rekviziti {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(237,235,224,.12);
  display: grid;
  gap: 4px 14px;
  font: 500 12.5px/1.45 var(--font-body);
}
.h2-footer-rekviziti-head {
  font: 700 11px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nb-violet-light);
  margin-bottom: 8px;
}
.h2-footer-rekviziti-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 0 12px;
}
.h2-footer-rekviziti-row dt {
  color: rgba(237,235,224,.55);
  margin: 0;
}
.h2-footer-rekviziti-row dd {
  color: var(--nb-sugar);
  margin: 0;
}

/* Social media icons. Used in two places: the footer brand block
   (tone="sugar" on the navy footer) and the Par mums section
   (tone="navy" on the sugar background). Single-color line-art
   glyphs so they sit on any background without clashing with the
   brand palette. */
.h2-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.h2-social li { margin: 0; padding: 0; }
.h2-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid currentColor;
  transition: background .18s, color .18s, border-color .18s;
}
.h2-social .icn { width: 18px; height: 18px; display: block; }
.h2-social--sm a { width: 32px; height: 32px; }
.h2-social--sm .icn { width: 16px; height: 16px; }
.h2-social--lg a { width: 44px; height: 44px; }
.h2-social--lg .icn { width: 22px; height: 22px; }

/* Tones: navy (default, on light bg), sugar (on dark bg), violet
   (accent on light bg). Hover always lifts to brand violet. */
.h2-social--navy   a { color: var(--nb-navy); border-color: rgba(14,26,51,.25); }
.h2-social--navy   a:hover { background: var(--nb-violet); color: var(--nb-sugar); border-color: var(--nb-violet); }
.h2-social--sugar  a { color: var(--nb-sugar); border-color: rgba(237,235,224,.32); }
.h2-social--sugar  a:hover { background: var(--nb-violet-light, var(--nb-violet)); color: var(--nb-navy); border-color: var(--nb-violet-light, var(--nb-violet)); }
.h2-social--violet a { color: var(--nb-violet); border-color: var(--nb-violet); }
.h2-social--violet a:hover { background: var(--nb-violet); color: var(--nb-sugar); }

.h2-footer-social {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(237,235,224,.12);
}
.h2-footer-social-label {
  font: 700 11px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nb-violet-light);
  margin: 0 0 10px;
}

/* Par mums social row: inline below the bullet list, label + icons
   in a single line that wraps on narrow widths. */
.h2-why-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}
.h2-why-social-label {
  font: 700 11px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ───────────────────────────────────────────────────────────────────
   KARJERA · docx 357 to 396, rendered inside the footer modal.
   Two-step layout: overview (hero photo + 3 cards) -> driver-form.
   ─────────────────────────────────────────────────────────────────── */
.h2-karjera { padding: 0; }
.h2-karjera-hero {
  position: relative;
  margin: -40px -8px 0;
  height: clamp(220px, 26vw, 320px);
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.h2-karjera-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.h2-karjera-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,4,41,.25) 0%, rgba(15,4,41,.78) 100%);
}
.h2-karjera-hero-overlay {
  position: absolute;
  inset: 0;
  padding: clamp(20px, 3.5vw, 36px);
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 8px;
  color: var(--nb-sugar);
  z-index: 1;
}
.h2-karjera-hero-overlay .eb {
  font: 700 11px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nb-violet-light);
}
.h2-karjera-hero-overlay h2 {
  font: 700 clamp(22px, 2.8vw, 32px)/1.12 var(--font-display);
  letter-spacing: -.012em;
  color: var(--nb-sugar);
  margin: 0;
}
.h2-karjera-hero-overlay p {
  font: 400 14.5px/1.55 var(--font-body);
  color: rgba(237,235,224,.86);
  margin: 0;
  max-width: 560px;
}
/* 2-up grid: the "Nosūtīt CV" overview card was removed per client
   request (the cv-form view itself stays reachable from the empty
   vacancies state). With only two cards left we run a centred,
   slightly wider pair so they read deliberate, not orphaned. */
.h2-karjera-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px auto 12px;
  max-width: 880px;
}
.h2-karjera-card {
  padding: 24px;
  background: var(--bg-surface, white);
  border: 1px solid var(--t-border, var(--border-1));
  border-radius: 8px;
  display: flex; flex-direction: column;
  gap: 10px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.h2-karjera-card:hover {
  border-color: var(--nb-violet);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(110,34,151,.08);
}
.h2-karjera-card--prim {
  background: var(--nb-violet);
  border-color: var(--nb-violet);
}
.h2-karjera-card--prim:hover {
  background: var(--nb-violet-deep);
  border-color: var(--nb-violet-deep);
  box-shadow: 0 8px 24px rgba(110,34,151,.25);
}
.h2-karjera-card h3 {
  font: 700 17px/1.25 var(--font-display);
  color: var(--t-fg, var(--nb-navy));
  margin: 0;
  min-height: 2.5em;
}
.h2-karjera-card--prim h3 { color: var(--nb-sugar); }
.h2-karjera-card p {
  font: 400 13.5px/1.55 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
  margin: 0;
  flex: 1 1 auto;
}
.h2-karjera-card--prim p { color: rgba(237,235,224,.86); }
/* CTA button inside cards: identical box shape regardless of label
   length. Override base .h2-karjera-cta inline-flex with full-width
   flex so all three buttons fill their card column. min-height fits
   2 lines so long labels like 'Apskatit aktualas vakances' wrap
   without breaking row alignment. cursor and reset for native button
   element on the primary card. */
.h2-karjera-card .h2-karjera-cta {
  margin-top: 16px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  padding: 0 18px;
  font: 700 12px/1.25 var(--font-body);
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 4px;
  height: 56px;             /* fixed, identical for all 3 cards */
  cursor: pointer;
  font-family: inherit;
}
/* The text label clamps to 2 lines so a long label like
   'Apskatit aktualas vakances' doesn't blow up the button height. */
.h2-karjera-cta-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}
.h2-karjera-card--prim .h2-karjera-cta {
  background: var(--nb-sugar);
  color: var(--nb-violet-deep);
  border-color: var(--nb-sugar);
}
.h2-karjera-card--prim .h2-karjera-cta:hover {
  background: transparent;
  color: var(--nb-sugar);
  border-color: var(--nb-sugar);
}

/* Form view */
.h2-karjera--form { padding: 8px 0; }
.h2-karjera-back {
  background: transparent;
  border: 0;
  color: var(--t-fg-muted, var(--fg-2));
  font: 600 13px/1 var(--font-body);
  padding: 8px 0;
  margin-bottom: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.h2-karjera-back:hover { color: var(--nb-violet); }
.h2-karjera-back span { font-size: 18px; }

.h2-karjera-block {
  padding: 28px 0 8px;
  border-top: 1px solid var(--t-border, var(--border-1));
}
.h2-karjera-block:first-of-type { border-top: 0; padding-top: 12px; }
.h2-karjera-block h3 {
  font: 700 18px/1.2 var(--font-display);
  color: var(--t-fg, var(--nb-navy));
  margin: 0 0 8px;
}
.h2-karjera-block > p {
  font: 400 14.5px/1.55 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
  margin: 0 0 14px;
  max-width: 640px;
}
.h2-karjera-form { max-width: 720px; }
.h2-karjera-form-intro {
  font: 400 13.5px/1.55 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
  margin: 0 0 18px;
}
.h2-karjera-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 20px;
}
.h2-karjera-form .field { display: flex; flex-direction: column; gap: 6px; }
.h2-karjera-form .field > span {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-fg-muted, var(--fg-3));
}
.h2-karjera-form .field input,
.h2-karjera-form .field textarea,
.h2-karjera-form .field select {
  border: 0;
  border-bottom: 1px solid var(--t-border, var(--border-2));
  background: transparent;
  outline: none;
  padding: 6px 0;
  font: 500 14.5px/1.3 var(--font-body);
  color: var(--t-fg, var(--nb-navy));
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.h2-karjera-form .field input:focus { border-bottom-color: var(--nb-violet); }
/* File input: style the native "Choose File" button so it doesn't
   look like a stock OS chrome control plonked into the design. The
   ::file-selector-button pseudo styles the picker button itself
   (modern browsers); .h2-karjera-form .field input[type="file"]
   covers the row container. Hides the redundant "No file chosen"
   default text by using the field's own typography. */
.h2-karjera-form .field input[type="file"] {
  padding: 10px 0;
  font: 500 13px/1.4 var(--font-body);
  color: var(--fg-2);
  cursor: pointer;
}
.h2-karjera-form .field input[type="file"]::file-selector-button {
  appearance: none;
  background: var(--nb-violet);
  color: var(--nb-sugar);
  border: 0;
  border-radius: 4px;
  padding: 10px 16px;
  font: 700 12px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: 12px;
  transition: filter .18s;
}
.h2-karjera-form .field input[type="file"]::file-selector-button:hover {
  filter: brightness(1.08);
}
/* Same treatment for the atsauksmes form's file input. */
.h2-atsauksmes-form .field input[type="file"]::file-selector-button {
  appearance: none;
  background: var(--nb-violet);
  color: var(--nb-sugar);
  border: 0;
  border-radius: 4px;
  padding: 10px 16px;
  font: 700 12px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: 12px;
  transition: filter .18s;
}
.h2-atsauksmes-form .field input[type="file"]::file-selector-button:hover {
  filter: brightness(1.08);
}
.h2-karjera-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}
.h2-karjera-form legend {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-fg-muted, var(--fg-3));
  margin-bottom: 10px;
}
.h2-karjera-form .radios {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
}
.h2-karjera-form .radios label {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 14px/1 var(--font-body);
  color: var(--t-fg, var(--nb-navy));
  cursor: pointer;
}
.h2-karjera-form .radios input { accent-color: var(--nb-violet); }
.h2-karjera-form-submit { margin-top: 20px; display: flex; justify-content: flex-end; }
.h2-karjera-form-submit button {
  background: var(--nb-violet);
  color: var(--nb-sugar);
  border: 0;
  padding: 14px 28px;
  font: 700 13px/1 var(--font-body);
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background .18s;
}
.h2-karjera-form-submit button:hover { background: var(--nb-navy); }
.h2-karjera-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 var(--font-body);
  color: var(--nb-violet);
  padding: 10px 16px;
  border: 1px solid var(--t-border, var(--border-2));
  border-radius: 4px;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.h2-karjera-cta:hover { background: var(--nb-violet); color: var(--nb-sugar); border-color: var(--nb-violet); }
.h2-karjera-thanks {
  margin-top: 12px;
  padding: 24px;
  background: var(--bg-surface, white);
  border: 1px solid var(--t-border, var(--border-1));
  border-radius: 8px;
  font: 400 15px/1.55 var(--font-body);
}
.h2-karjera-thanks strong {
  display: block;
  font: 700 20px/1.2 var(--font-display);
  color: var(--t-fg, var(--nb-navy));
  margin-bottom: 8px;
}
.h2-karjera-thanks button {
  margin-top: 14px;
  background: transparent;
  border: 1px solid var(--t-border, var(--border-2));
  color: var(--t-fg, var(--nb-navy));
  font: 600 13px/1 var(--font-body);
  padding: 10px 18px;
  border-radius: 4px;
  cursor: pointer;
}

/* Vacancies view: empty-state + vacancy list cards (v3 doc). */
.h2-karjera-empty {
  max-width: 640px;
  padding: 12px 0 8px;
}
.h2-karjera-empty p {
  margin: 0 0 14px;
  font: 400 15px/1.6 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
}
.h2-karjera-empty p:first-child {
  font-weight: 600;
  color: var(--t-fg, var(--nb-navy));
}
.h2-karjera-empty-cta { margin-top: 22px; }
.h2-karjera-vacancy-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.h2-karjera-vacancy {
  padding: 24px 28px;
  border: 1px solid var(--t-border, var(--border-1));
  background: var(--bg-surface, white);
  border-radius: 8px;
}
.h2-karjera-vacancy-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.h2-karjera-vacancy h3 {
  margin: 0;
  font: 700 18px/1.25 var(--font-display);
  color: var(--t-fg, var(--nb-navy));
}
.h2-karjera-vacancy-loc {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nb-violet);
}
.h2-karjera-vacancy-sum {
  margin: 0 0 14px;
  font: 400 14.5px/1.55 var(--font-body);
  color: var(--t-fg-muted, var(--fg-2));
}
/* Shared primary CTA used in the empty-state + per-vacancy CTA. */
.h2-karjera-cta-prim {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--nb-violet);
  color: var(--nb-sugar);
  border: 0;
  padding: 12px 22px;
  font: 700 13px/1 var(--font-body);
  letter-spacing: .02em;
  border-radius: 4px;
  cursor: pointer;
  transition: background .18s;
}
.h2-karjera-cta-prim:hover { background: var(--nb-violet-deep); }

@media (max-width: 720px) {
  .h2-karjera-form-grid { grid-template-columns: 1fr; }
  .h2-karjera-cards { grid-template-columns: 1fr; }
  .h2-karjera-hero { height: clamp(180px, 38vw, 240px); }
}
/* No 720..900 special-case any more: the 2-up overview already fits
   that width fine. Stacking is reserved for sub-720 mobile. */

/* Karjera hero inside the modal panel sits flush at the top edge. */
.h2-modal-panel .h2-karjera-hero {
  margin: -40px -8px 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.h2-modal-panel .h2-karjera-cards .h2-karjera-cta { margin-top: auto; }

/* ───────────────────────────────────────────────────────────────────
   ATSAUKSMES MODAL · centered overlay popup from Klientiem link
   ─────────────────────────────────────────────────────────────────── */
.h2-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 4, 41, .72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 24px;
  z-index: 1000;
  overflow-y: auto;
  animation: h2-modal-fade .18s var(--ease-out);
}
@keyframes h2-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.h2-modal-panel {
  position: relative;
  background: var(--nb-sugar);
  border-radius: 10px;
  width: 100%;
  max-width: 760px;
  margin: auto;
  padding: 40px 8px 24px;
  box-shadow: 0 20px 80px rgba(0,0,0,.35);
}
.h2-modal-panel .h2-atsauksmes { padding: 8px 0; }
/* Karjera modal: remove the 8px top padding on the inner section so
   the hero photo (which already negates the 40px modal padding via
   margin: -40px -8px 0) sits flush against the modal's top edge,
   not floating below an 8px gap. */
.h2-modal-panel .h2-karjera { padding: 0 0 8px; }
.h2-modal-panel .h2-atsauksmes .container,
.h2-modal-panel .h2-karjera .container { padding: 0 32px; }
/* H2PartnershipForm was originally designed for inline use under the
   Citi row; when mounted inside the modal panel it duplicated the
   wrapper border + close button. Neutralize the inline chrome so the
   modal-panel chrome alone provides the framing. */
.h2-modal-panel .h2-partner-form-wrap {
  margin-top: 0;
  border-top: 0;
  padding: 0 24px;
}
.h2-modal-panel .h2-partner-form {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}
.h2-modal-panel .h2-partner-form-close { display: none; }
/* Close button: highly visible by default so first-time visitors
   (and older users) can spot the X without hunting for it. Solid
   sugar circle on a violet-tinted shadow, large click target. */
.h2-modal-close {
  /* !important on the position properties because earlier iterations
     of this rule + a later override + sticky-positioning tweaks had
     stacked specificity surprises; users still saw the X stuck at
     the left edge on stale caches. !important locks the top-right
     placement so cache invalidation doesn't matter. */
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  width: 44px; height: 44px;
  background: var(--nb-sugar);
  border: 1px solid var(--border-1);
  font: 600 26px/1 var(--font-body);
  color: var(--nb-navy);
  cursor: pointer;
  border-radius: 999px;
  z-index: 10;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(41, 0, 89, .25);
  transition: background .18s, color .18s, transform .18s;
}
.h2-modal-close:hover {
  background: var(--nb-violet);
  color: var(--nb-sugar);
  border-color: var(--nb-violet);
  transform: scale(1.05);
}
@media (max-width: 720px) {
  .h2-modal-backdrop { padding: 16px 8px; }
  .h2-modal-panel { padding: 36px 4px 16px; }
  .h2-modal-panel .h2-atsauksmes .container,
  .h2-modal-panel .h2-karjera .container { padding: 0 18px; }
}

/* ───────────────────────────────────────────────────────────────────
   CTA BANNER · full-width photo + tagline + form CTA
   ─────────────────────────────────────────────────────────────────── */
.h2-cta { position: relative; background: var(--nb-violet-deep); color: var(--nb-sugar); }
.h2-cta-inner { padding-top: 72px; padding-bottom: 72px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.h2-cta-l h2 { font: 700 clamp(28px, 3.4vw, 44px)/1.08 var(--font-display); letter-spacing: -.015em; color: var(--nb-sugar); }
.h2-cta-l h2 em { font-style: normal; color: var(--nb-violet-light); }
.h2-cta-l p { margin-top: 14px; font: 400 15px/1.55 var(--font-body); color: rgba(237,235,224,.78); max-width: 540px; }
.h2-cta-r { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.h2-cta-r .big-tel { font: 800 28px/1 var(--font-display); color: var(--nb-sugar); letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.h2-cta-r .em { font: 500 14.5px/1.4 var(--font-body); color: rgba(237,235,224,.78); }
.h2-cta-r .em a { color: var(--nb-violet-light); }
.h2-cta-r .btn-row { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.h2-cta-r .h2-btn--prim { background: var(--nb-violet); color: var(--nb-sugar); padding: 14px 22px; font: 700 15px/1 var(--font-body); display: inline-flex; gap: 10px; align-items: center; border-radius: 4px; }
.h2-cta-r .h2-btn--prim:hover { background: var(--nb-sugar); color: var(--nb-violet-deep); }
.h2-cta-r .h2-btn--ghost { background: transparent; color: var(--nb-sugar); padding: 14px 22px; font: 600 15px/1 var(--font-body); display: inline-flex; gap: 10px; align-items: center; border: 1px solid rgba(237,235,224,.3); border-radius: 4px; }
.h2-cta-r .h2-btn--ghost:hover { border-color: var(--nb-sugar); }
@media (max-width: 900px) { .h2-cta-inner { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; padding-bottom: 56px; } }

/* ───────────────────────────────────────────────────────────────────
   FOOTER · real sitemap, not a card
   ─────────────────────────────────────────────────────────────────── */
.h2-footer { background: var(--nb-ink); color: var(--nb-sugar); padding: 72px 0 32px; }
.h2-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; gap: 48px; }
.h2-footer-brand { text-align: left; }
.h2-footer-brand img {
  height: 38px;
  display: block;
  /* Negative margin-left compensates for the transparent left padding
     baked into the PNG, so the visible "N" glyph aligns with the
     SIA NordBus text below at the same x-coordinate instead of
     appearing indented. */
  margin-left: -6px;
}
.h2-footer-brand p { margin-top: 16px; font: 400 14px/1.6 var(--font-body); color: rgba(237,235,224,.55); max-width: 280px; }
.h2-footer-brand .addr { margin-top: 18px; font: 500 13.5px/1.5 var(--font-body); color: rgba(237,235,224,.72); }
.h2-footer-brand .addr b { color: var(--nb-sugar); font-weight: 600; }
.h2-footer-col h5 { font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--nb-violet-light); margin: 0 0 18px; }
.h2-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.h2-footer-col a { font: 500 14px/1.4 var(--font-body); color: rgba(237,235,224,.72); }
.h2-footer-col a:hover { color: var(--nb-sugar); }

/* Klientiem column: rich Kontakti block per v2 doc. Inline subhead +
   intro + phone + email + form links, in place of the simple link
   list the other footer columns use. */
.h2-footer-kontakti-head {
  font: 600 14.5px/1.3 var(--font-body);
  color: var(--nb-sugar);
  margin: 0 0 8px;
}
.h2-footer-kontakti-intro {
  margin: 0 0 18px;
  font: 400 13px/1.55 var(--font-body);
  color: rgba(237, 235, 224, .65);
}
.h2-footer-kontakti-rows {
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.h2-footer-kontakti-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.h2-footer-kontakti-row dt {
  font: 600 11px/1.2 var(--font-body);
  letter-spacing: .04em;
  color: rgba(237, 235, 224, .5);
  text-transform: uppercase;
}
.h2-footer-kontakti-row dd {
  margin: 0;
  font: 500 14px/1.4 var(--font-body);
}
.h2-footer-kontakti-row dd a {
  color: var(--nb-violet-light);
}
.h2-footer-kontakti-row dd a:hover {
  color: var(--nb-sugar);
}
/* Form links rendered as plain footer links, matching the other
   nav columns' visual treatment (not the dt/dd pair pattern). */
.h2-footer-kontakti-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.h2-footer-kontakti-links a {
  font: 500 14px/1.4 var(--font-body);
  color: rgba(237, 235, 224, .72);
}
.h2-footer-kontakti-links a:hover {
  color: var(--nb-sugar);
}
.h2-footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(237,235,224,.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font: 500 12.5px/1 var(--font-body); color: rgba(237,235,224,.5); }
.h2-footer-bottom .wm { letter-spacing: .42em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 900px) {
  /* Mobile footer overhaul. Previously sprawling with multiple
     stacked full-width blocks; now compact: 2-col nav + brand grid,
     tighter padding, smaller headings, marketing intro paragraphs
     dropped (visitor already read the page). */
  .h2-footer { padding: 40px 0 24px; }
  .h2-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .h2-footer-brand {
    /* Brand block fills row 2 col 2 next to Uznemums (col 1). */
    grid-column: 2;
    grid-row: 2;
  }
  .h2-footer-brand img { height: 32px; }
  .h2-footer-brand p {
    /* Drop the long company description on mobile, it duplicates
       what the visitor already saw at the top of the page. */
    display: none;
  }
  .h2-footer-brand .addr { font-size: 12.5px; margin-top: 12px; }
  .h2-footer-col h5 { margin-bottom: 12px; font-size: 10.5px; }
  .h2-footer-col ul { gap: 8px; }
  .h2-footer-col a { font-size: 13.5px; }
  .h2-footer-kontakti-intro {
    /* Drop the wall, of, text "Jautajumiem par autobusa nomu..." on
       mobile; the visitor can tap one of the action links below
       (Sanemt piedavajumu / Atsauksmes / Rekviziti) without needing
       a paragraph explanation. */
    display: none;
  }
  .h2-footer-kontakti-head { font-size: 13.5px; margin-bottom: 12px; }
  .h2-footer-kontakti-links { gap: 8px; }
  .h2-footer-kontakti-links a { font-size: 13.5px; }
  /* Rekviziti rows: render as inline label/value pairs (dt: value)
     to halve the vertical height. Was stacking dt above dd. */
  .h2-footer-rekviziti-row { flex-direction: row; gap: 8px; align-items: baseline; }
  .h2-footer-rekviziti-row dt { font-size: 10.5px; min-width: 64px; }
  .h2-footer-rekviziti-row dd { font-size: 12.5px; word-break: break-all; }
  .h2-footer-bottom { margin-top: 32px; padding-top: 18px; font-size: 11.5px; gap: 12px; }
}
@media (max-width: 480px) {
  /* Very narrow phones: single column. Brand + Klientiem move
     under the nav columns; Rekviziti collapsed inline. */
  .h2-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .h2-footer-brand { grid-column: 1; grid-row: auto; }
}

/* ─── Scroll-triggered reveal animations (home2-anim.jsx) ─────────────
   The JS adds `.h2-reveal-target` to every section once it's been
   measured, then either `.is-in-view` immediately (above the fold) or
   when the IntersectionObserver fires (scroll-triggered). The whole
   stack is gated on html.h2-anim-ready so that, until the JS has
   classified the sections, they render normally - no flash. */
html.h2-anim-ready .h2-reveal-target:not(.is-in-view) {
  opacity: 0 !important;
  transform: translateY(80px) !important;
}
html.h2-anim-ready .h2-reveal-target {
  transition: opacity 1.1s cubic-bezier(.22,.7,.32,1),
              transform 1.1s cubic-bezier(.22,.7,.32,1);
  will-change: opacity, transform;
}
html.h2-anim-ready .h2-reveal-target.is-in-view {
  opacity: 1;
  transform: none;
}

/* JS bailout - reveal everything immediately. */
html.h2-no-anim .h2-reveal-target,
html.h2-no-anim .h2-reveal-target:not(.is-in-view) {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
/* Reduced-motion preference - skip the entrance entirely. */
@media (prefers-reduced-motion: reduce) {
  html.h2-anim-ready .h2-reveal-target,
  html.h2-anim-ready .h2-reveal-target:not(.is-in-view) {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ─── Brand SVG icons stay at their default color across themes ─────── */
/* Same logic as the bus illustrations: only the section background flips
   with the theme; the icons themselves keep their hardcoded brand
   violet (#6E2297). No filter, no theme-conditional swap. */

/* ───────────────────────────────────────────────────────────────────
   BUS DETAIL MODAL · flyer-style sales-sheet overlay
   Opens on unit-card click. Layout mirrors the operator's printed PDF
   flyers: violet header band, stat strip, photo gallery, two-column
   comfort + spec table, trust band, contact footer.
   ─────────────────────────────────────────────────────────────────── */
.h2-bus-modal {
  position: fixed; inset: 0;
  background: rgba(15, 4, 41, .72);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 32px 16px;
  overflow-y: auto;
  animation: h2-bus-fade .2s ease-out;
}
@keyframes h2-bus-fade { from { opacity: 0; } to { opacity: 1; } }
.h2-bus-modal-inner {
  background: #fff;
  width: 100%;
  max-width: 1040px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .42);
  position: relative;
  font: 400 14.5px/1.55 var(--font-body);
  color: var(--nb-navy);
}
.h2-bus-modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  cursor: pointer;
  z-index: 4;
  transition: background .15s ease;
}
.h2-bus-modal-close:hover { background: rgba(255, 255, 255, .22); }
.h2-bus-modal-close svg { width: 16px; height: 16px; }

/* ── Header band ───────────────────────────────────────────────── */
.h2-bus-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  /* Match the flyer's deep navy-violet header rather than the brand-violet
     gradient. The lavender accent diagonal mirrors the printed sheet. */
  background: linear-gradient(135deg, #1f0a4a 0%, var(--nb-violet-deep, #290059) 100%);
  color: #fff;
  padding: 40px 44px 44px;
  align-items: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.h2-bus-head::after {
  content: '';
  position: absolute;
  top: -20%; bottom: -20%;
  left: 40%;
  width: 60%;
  background: linear-gradient(115deg, transparent 0%, transparent 22%, rgba(110, 34, 151, .35) 23%, rgba(110, 34, 151, .35) 32%, transparent 33%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.h2-bus-head > * { position: relative; z-index: 1; }
.h2-bus-head-logo {
  width: 130px; height: auto;
  margin-bottom: 6px;
  filter: brightness(0) invert(1);
}
.h2-bus-head-tag {
  font: 500 11.5px/1 var(--font-body);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 22px;
}
.h2-bus-head-make {
  font: 500 clamp(20px, 1.9vw, 28px)/1 var(--font-display);
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 2px;
}
.h2-bus-head-model {
  font: 700 clamp(40px, 5.2vw, 72px)/1.02 var(--font-display);
  letter-spacing: -.022em;
  color: #fff;
  margin: 0 0 16px;
}
.h2-bus-head-tagline {
  font: 400 15px/1.45 var(--font-body);
  color: rgba(255, 255, 255, .85);
  max-width: 320px;
  margin: 0;
}
.h2-bus-head-r {
  position: relative;
  z-index: 2;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 8px;
  background: var(--nb-violet-deep, #290059);
}
/* Blurred cover-filled duplicate of the current photo. Sits behind
   the sharp image so tall/portrait shots don't render with hard
   letterbox bars, the "empty" area is a soft, dark blur of the
   photo itself. Extended past the container edges + scaled up so
   the blur doesn't leave a visible hard border. */
.h2-bus-head-r-blurbg {
  position: absolute;
  inset: -32px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(28px) brightness(.55) saturate(.9);
  transform: scale(1.08);
  z-index: 0;
  pointer-events: none;
}
.h2-bus-head-r picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
.h2-bus-head-r img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Stat strip ────────────────────────────────────────────────── */
.h2-bus-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--nb-violet-deep, #290059);
  color: #fff;
  padding: 18px 40px;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.h2-bus-stat {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
}
.h2-bus-stat .ico {
  grid-row: 1 / span 2;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.h2-bus-stat .ico svg { width: 18px; height: 18px; }
.h2-bus-stat .ico img.icn { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.h2-bus-stat .v {
  font: 800 17px/1 var(--font-display);
  letter-spacing: -.005em;
}
.h2-bus-stat .l {
  font: 500 11.5px/1.2 var(--font-body);
  color: rgba(255, 255, 255, .65);
}

/* ── Gallery ───────────────────────────────────────────────────── */
.h2-bus-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  padding: 20px 40px;
  background: #fff;
}
.h2-bus-thumb {
  appearance: none;
  border: 0;
  padding: 0;
  background: #f2f0f7;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  position: relative;
  transition: transform .15s ease;
}
.h2-bus-thumb:hover { transform: translateY(-1px); }
.h2-bus-thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .15s ease;
}
.h2-bus-thumb.is-active {
  outline: 2px solid var(--nb-violet);
  outline-offset: 1px;
}
.h2-bus-thumb:not(.is-active) img { opacity: .82; }

/* ── Two-column body ───────────────────────────────────────────── */
.h2-bus-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 28px 40px 32px;
}
.h2-bus-body h3 {
  font: 700 13px/1 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--nb-violet);
  margin: 0 0 18px;
}
.h2-bus-amen ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
}
.h2-bus-amen li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.h2-bus-amen .ico {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--nb-violet);
}
.h2-bus-amen .ico svg { width: 22px; height: 22px; }
.h2-bus-amen .ico img.icn { width: 22px; height: 22px; }
.h2-bus-amen .copy { display: grid; gap: 2px; }
.h2-bus-amen .copy strong {
  font: 600 14.5px/1.3 var(--font-body);
  color: var(--nb-navy);
}
.h2-bus-amen .copy em {
  font-style: normal;
  font: 400 13px/1.35 var(--font-body);
  color: var(--fg-2);
}
.h2-bus-specs table {
  width: 100%;
  border-collapse: collapse;
}
.h2-bus-specs tr {
  border-bottom: 1px solid var(--border-1, rgba(15, 4, 41, .08));
}
.h2-bus-specs tr:last-child { border-bottom: 0; }
.h2-bus-specs th {
  text-align: left;
  padding: 9px 8px 9px 0;
  font: 500 13px/1.4 var(--font-body);
  color: var(--fg-2);
  width: 56%;
  vertical-align: top;
}
.h2-bus-specs td {
  padding: 9px 0;
  font: 600 13.5px/1.4 var(--font-body);
  color: var(--nb-navy);
  text-align: right;
  vertical-align: top;
}

/* ── Trust band ────────────────────────────────────────────────── */
.h2-bus-trust {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 22px 40px;
  background: linear-gradient(135deg, rgba(110, 34, 151, .04) 0%, rgba(196, 149, 229, .08) 100%);
  border-top: 1px solid var(--border-1, rgba(15, 4, 41, .08));
}
.h2-bus-trust .ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #fff;
  color: var(--nb-violet);
  box-shadow: 0 4px 14px rgba(110, 34, 151, .14);
}
.h2-bus-trust .ico svg { width: 24px; height: 24px; }
.h2-bus-trust .ico img.icn { width: 24px; height: 24px; }
.h2-bus-trust .h {
  font: 700 12.5px/1 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--nb-violet);
  margin-bottom: 8px;
}
.h2-bus-trust .p {
  font: 400 14px/1.5 var(--font-body);
  color: var(--fg-2);
}

/* ── Footer · contact strip ────────────────────────────────────── */
.h2-bus-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
  background: var(--nb-violet);
}
.h2-bus-foot a {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 18px;
  color: #fff;
  text-decoration: none;
  font: 600 14px/1 var(--font-body);
  border-right: 1px solid rgba(255, 255, 255, .12);
  transition: background .15s ease;
}
.h2-bus-foot a:last-child { border-right: 0; }
.h2-bus-foot a:hover { background: var(--nb-violet-deep, #290059); }
.h2-bus-foot a svg { width: 16px; height: 16px; }
.h2-bus-foot a img.icn { width: 16px; height: 16px; filter: brightness(0) invert(1); }

/* ── Clickable unit cards in the gallery slider ───────────────── */
.h2-unit.is-clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.h2-unit.is-clickable:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 4, 41, .12); }
.h2-unit.is-clickable:focus-visible {
  outline: 2px solid var(--nb-violet);
  outline-offset: 2px;
}
.h2-unit .spec-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--nb-violet);
  font: 600 13px/1 var(--font-body);
}

/* ── Responsive — collapse to single column under tablet width ── */
@media (max-width: 820px) {
  .h2-bus-head { grid-template-columns: 1fr; padding: 28px 24px; }
  .h2-bus-head::after { display: none; }
  .h2-bus-head-r { aspect-ratio: 16/9; }
  .h2-bus-stat-row { grid-template-columns: 1fr 1fr; padding: 16px 24px; gap: 14px; }
  .h2-bus-gallery { grid-template-columns: repeat(4, 1fr); padding: 16px 24px; }
  .h2-bus-body { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .h2-bus-trust { padding: 20px 24px; }
  .h2-bus-foot { grid-template-columns: 1fr; }
  .h2-bus-foot a { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .h2-bus-foot a:last-child { border-bottom: 0; }
}
@media (max-width: 480px) {
  .h2-bus-modal { padding: 12px 8px; }
  .h2-bus-head-model { font-size: 32px; }
  .h2-bus-stat-row { grid-template-columns: 1fr 1fr; }
  .h2-bus-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL viewport-safety - applies at all sizes
   ═══════════════════════════════════════════════════════════════════════ */
/* No individual element should push the page wider than the viewport.
   `overflow-x: clip` (not `hidden`) is essential: `hidden` would turn
   html+body into scroll-containing blocks, which silently breaks
   `position: sticky` on every descendant (the services-aside image,
   anything else). `clip` clips overflow without creating a scroll
   container. Supported in Chrome 90+, Firefox 81+, Safari 16+. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
/* The hero h1 .accent was display:inline-block which prevented "autobusu
   noma" from wrapping at narrow widths; allow normal inline wrapping. */
.h2-hero-h1 { overflow-wrap: break-word; word-wrap: break-word; }
.h2-hero-h1 .accent { display: inline; }
/* Form card width safety - prevent push past viewport on mobile. */
.h2-hero-card { width: 100%; box-sizing: border-box; max-width: 100%; }
/* The inline service photo - default hidden, only revealed on mobile when
   that service is the active one (replaces the right-aside photo). */
.h2-svc-edit-list-photo { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE PASS · ≤ 900 px tablet, ≤ 560 px phone
   Single block covering every section that needs to stack or shrink on
   narrow viewports. Burger menu drawer replaces the desktop top nav.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Burger toggle · hidden on desktop, visible ≤ 900 px ───────────── */
.h2-top-burger {
  display: none;
  width: 44px; height: 44px;
  padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  position: relative;
  z-index: 105;
}
.h2-top-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--nb-sugar);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, background .25s ease;
}
.h2-top.is-scrolled .h2-top-burger span { background: var(--nb-navy); }
.h2-top-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.h2-top-burger.is-open span:nth-child(2) { opacity: 0; }
.h2-top-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Drawer overlay + slide-in panel ───────────────────────────────── */
.h2-top-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 4, 41, .56);
  backdrop-filter: blur(4px);
  z-index: 100;
  animation: h2-drawer-fade .22s ease-out;
}
@keyframes h2-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
.h2-top-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(86vw, 360px);
  height: 100%;
  background: var(--nb-sugar);
  color: var(--nb-navy);
  box-shadow: -16px 0 48px rgba(0, 0, 0, .26);
  padding: 88px 28px 28px;
  display: flex; flex-direction: column;
  gap: 28px;
  overflow-y: auto;
  animation: h2-drawer-slide .28s cubic-bezier(.22, .7, .32, 1);
}
/* Explicit close button: the burger that opens the drawer is now
   hidden behind the drawer panel and the visible backdrop strip on
   the left is too narrow to be an obvious tap target. */
.h2-top-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(15, 4, 41, .12);
  border-radius: 999px;
  font: 600 26px/1 var(--font-body);
  color: var(--nb-navy);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.h2-top-drawer-close:hover,
.h2-top-drawer-close:focus-visible {
  background: var(--nb-navy);
  color: var(--nb-sugar);
  border-color: var(--nb-navy);
}
.h2-top-drawer-close:active { transform: scale(.96); }
@keyframes h2-drawer-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.h2-top-drawer-nav ul {
  list-style: none; margin: 0; padding: 0;
}
.h2-top-drawer-nav > ul > li {
  border-bottom: 1px solid rgba(15, 4, 41, .08);
}
.h2-top-drawer-nav > ul > li > a {
  display: block;
  padding: 14px 0;
  font: 600 17px/1 var(--font-display);
  letter-spacing: -.005em;
  color: var(--nb-navy);
  text-decoration: none;
}
.h2-top-drawer-nav .sub {
  padding: 4px 0 12px 12px;
}
.h2-top-drawer-nav .sub li a {
  display: block;
  /* 14px-vertical padding + 15px font-size + 1.3 line-height keeps each
     row well above the 44px minimum tap target without making the
     overall drawer feel cramped. */
  padding: 14px 0;
  min-height: 44px;
  box-sizing: border-box;
  font: 500 15px/1.3 var(--font-body);
  color: var(--fg-2);
  text-decoration: none;
}
.h2-top-drawer-foot {
  margin-top: auto;
  display: flex; flex-direction: column;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(15, 4, 41, .08);
}
.h2-top-drawer-tel {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 18px/1 var(--font-display);
  color: var(--nb-violet);
  text-decoration: none;
}
.h2-top-drawer-tel .icn { width: 18px; height: 18px; }
.h2-top-drawer-cta {
  display: block;
  background: var(--nb-violet); color: #fff;
  text-align: center;
  padding: 14px 18px;
  font: 700 14px/1 var(--font-body);
  border-radius: 6px;
  text-decoration: none;
}
.h2-top-drawer-lang {
  display: flex; gap: 8px;
}
.h2-top-drawer-lang button {
  flex: 1;
  padding: 10px 0;
  border: 1px solid rgba(15, 4, 41, .12);
  background: transparent;
  color: var(--nb-navy);
  font: 600 13px/1 var(--font-body);
  border-radius: 6px;
  cursor: pointer;
}
.h2-top-drawer-lang button[aria-pressed="true"] {
  background: var(--nb-navy); color: var(--nb-sugar); border-color: var(--nb-navy);
}

/* ─── Karjera CTA banner ────────────────────────────────────────────────
   Mounted between Citi pakalpojumi and Jaunumi to surface the driver
   recruitment CTA (v2 doc, 05/06 round). Uses the same color tokens as
   H2Cta (deep-violet bg, violet-light accent, --nb-violet button) so
   the two CTA sections read as a family, but keeps a banner layout
   with the CTA under the body copy and a driver photo on the right. */
.h2-karjera-banner {
  position: relative;
  /* Switched from --nb-violet-deep (#290059) to --nb-ink (#17121C)
     so Karjera reads as a near-black panel; the new H2Testimonials
     section below uses navy (#0E1A33) for visual progression. */
  background: var(--nb-ink);
  color: var(--nb-sugar);
  padding: 72px 0;
}

/* Partner testimonials section, sits between ink-black Karjera above
   and sugar Par-mums below. Background is --nb-violet-deep (the old
   Karjera color) so the section reads as a brand-accent panel
   between the near-black Karjera and the cream Par mums. Compact
   star+quote+author+logo cards (3 across on desktop, stacked on mobile). */
.h2-testimonials {
  background: var(--nb-violet-deep);
  color: var(--nb-sugar);
  padding: 72px 0;
  position: relative; /* needed for the wave pseudo-elements */
}
.h2-testimonials-head { max-width: 720px; margin-bottom: 40px; }
.h2-testimonials-head .eb {
  font: 700 11.5px/1 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--nb-lavender, #C495E5);
  margin-bottom: 14px;
}
.h2-testimonials-head h2 {
  font: 700 clamp(26px, 3vw, 36px)/1.15 var(--font-display, var(--font-body));
  letter-spacing: -.01em;
  color: var(--nb-sugar);
  margin: 0;
}
/* Two-card slider (replaces the 3-across grid). Desktop shows two
   reviews side by side inside .h2-testimonials-track; mobile drops
   to one via the media query below. Prev/next side buttons + dots
   step through PAGES so with 4 testimonials you get 2 pages of 2
   on desktop or 4 pages of 1 on mobile. */
.h2-testimonials-slider {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
  outline: none;
}
.h2-testimonials-track {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 20px;
  animation: h2TestimonialFade .28s ease-out;
}
.h2-testimonials-track--per-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h2-testimonials-track--per-1 { grid-template-columns: 1fr; }
.h2-testimonials-slider:focus-visible {
  outline: 2px solid var(--nb-lavender, #C495E5);
  outline-offset: 6px;
  border-radius: 12px;
}
/* Kept for back-compat if anyone still references the old class. */
.h2-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 780px;
  margin: 0 auto;
}
.h2-testimonial {
  margin: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 24px 24px 22px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.h2-testimonial--slide {
  min-width: 0;
  padding: 28px 30px 24px;
}
@keyframes h2TestimonialFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.h2-testimonials-nav {
  flex: 0 0 auto;
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--nb-sugar);
  font: 400 22px/1 var(--font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.h2-testimonials-nav:hover:not(:disabled) {
  background: var(--nb-violet);
  border-color: var(--nb-violet);
  color: var(--nb-sugar);
  transform: translateY(-1px);
}
.h2-testimonials-nav:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.h2-testimonials-nav span { line-height: 1; margin-top: -2px; }
.h2-testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.h2-testimonials-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.22);
  cursor: pointer;
  transition: background .18s, transform .18s, width .18s;
}
.h2-testimonials-dot:hover { background: rgba(255,255,255,.45); }
.h2-testimonials-dot.is-active {
  background: var(--nb-lavender, #C495E5);
  width: 22px;
}
.h2-testimonial-stars {
  display: flex; gap: 3px;
  font-size: 16px;
  color: rgba(255,255,255,.18);
}
.h2-testimonial-star.is-on { color: var(--nb-lavender, #C495E5); }
.h2-testimonial-quote {
  margin: 0;
  font: 400 14.5px/1.55 var(--font-body);
  color: rgba(237,235,224,.92);
}
/* Multi-paragraph quotes: each <p> is its own visual paragraph with
   a proper gap between them so long testimonials (ATELPA) read as a
   letter, not a wall of text. First/last strip vertical margins so
   the blockquote's own outer margin still governs card spacing. */
.h2-testimonial-quote p {
  margin: 0 0 12px;
}
.h2-testimonial-quote p:last-child {
  margin-bottom: 0;
}
.h2-testimonial-meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.h2-testimonial-author {
  font: 700 14px/1.2 var(--font-body);
  color: var(--nb-sugar);
}
.h2-testimonial-role {
  margin-top: 4px;
  font: 400 12.5px/1.3 var(--font-body);
  color: rgba(237,235,224,.62);
}
.h2-testimonial-logo {
  margin-top: 14px;
}
.h2-testimonial-logo img {
  max-height: 44px; max-width: 180px;
  object-fit: contain;
  /* Colored brand logos (airBaltic bright-green mark) render as-is
     on the dark violet card. If we ever ship a pure-black mark that
     disappears against dark, add a per-item logoTint field and gate
     the invert filter on it, rather than tinting everything by
     default. */
}
@media (max-width: 900px) {
  .h2-testimonials-grid { grid-template-columns: 1fr; }
  .h2-testimonials { padding: 56px 0; }
  .h2-testimonial { padding: 20px 20px 18px; }
  .h2-testimonial--slide { padding: 24px 22px 22px; }
  /* Slider on mobile: arrows shrink and sit tighter to the card so
     the quote itself keeps most of the horizontal room. Swipe still
     works via keyboard; dots + tap-arrows are the primary controls. */
  .h2-testimonials-slider { gap: 8px; }
  .h2-testimonials-nav { width: 36px; height: 36px; font-size: 18px; }
}
.h2-karjera-banner-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.h2-karjera-banner-l .eb {
  font: 600 11px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--nb-violet-light);
  margin-bottom: 14px;
}
.h2-karjera-banner-l h2 {
  font: 700 clamp(28px, 3.4vw, 44px)/1.08 var(--font-display);
  letter-spacing: -.015em;
  color: var(--nb-sugar);
  margin: 0;
}
.h2-karjera-banner-l h2 em {
  font-style: normal;
  color: var(--nb-violet-light);
}
.h2-karjera-banner-l p {
  margin-top: 14px;
  font: 400 15px/1.55 var(--font-body);
  color: rgba(237, 235, 224, .78);
  max-width: 540px;
}
.h2-karjera-banner-cta {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.h2-karjera-banner-cta .h2-btn--prim {
  background: var(--nb-violet);
  color: var(--nb-sugar);
  padding: 14px 22px;
  font: 700 15px/1 var(--font-body);
  display: inline-flex;
  gap: 10px;
  align-items: center;
  border-radius: 4px;
}
.h2-karjera-banner-cta .h2-btn--prim:hover {
  background: var(--nb-sugar);
  color: var(--nb-violet-deep);
}
.h2-karjera-banner-r {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
}
.h2-karjera-banner-r img {
  width: 100%; height: 100%; object-fit: cover;
  /* Anchor the crop near the top of the image so the driver's head
     stays in frame across aspect-ratio changes (4:3 on desktop,
     16:9 on mobile). Without this the default 50% 50% center crop
     lopped the head off on the wider mobile aspect. */
  object-position: 50% 22%;
  display: block;
}

/* ─── ≤ 900 px (tablet portrait) ─────────────────────────────────────── */
@media (max-width: 900px) {
  /* Top bar: logo + phone + burger on mobile. Phone is kept tappable
     in the header per user request; the bottom-right floating FAB
     gives a second always-visible call surface. Sizes tightened so
     the whole row fits on 320-375px phones. */
  .h2-top-burger { display: inline-flex; }
  .h2-top-r { margin-left: auto; gap: 6px; }
  .h2-top-nav,
  .h2-top-cta { display: none; }
  .h2-top-inner { gap: 8px; }
  /* Shrink logo on narrow phones so logo + phone + toggle + burger fit. */
  .h2-top-logo img { height: 44px; }
  /* Phone in header: keep visible but compact. Padding tight + size
     small enough that "+371 67 464 620" fits next to the logo + burger. */
  .h2-top-tel { padding: 6px 8px; }
  .h2-top-tel .num { display: inline; font-size: 12.5px; letter-spacing: 0; }
  /* v8 doc item 5: LV/EN toggle now visible on mobile (was hidden).
     Sits between the phone and the burger, sized down so all four
     elements (logo + phone + toggle + burger) fit on a 375px phone. */
  .h2-top-lang { padding: 2px; }
  .h2-top-lang button { padding: 5px 7px; font-size: 10.5px; }
}
/* Narrow phones (<=560px, covers every current Android/iPhone): the
   phone-number text was pushing the LV/EN toggle + burger off the
   right edge of the viewport (client screenshot 2026-08-03: EN was
   cut off, burger not visible at all). The FAB call bubble bottom-
   right already provides an always-visible tap-to-call surface, so
   we drop the header phone TEXT and keep only the icon here. */
@media (max-width: 560px) {
  .h2-top-tel .num { display: none; }
  .h2-top-tel { padding: 6px; }
}
/* Very narrow phones (<360px iPhone SE 1st gen, older Androids):
   shrink logo further so LV/EN + burger keep their tap targets. */
@media (max-width: 360px) {
  .h2-top-logo img { height: 40px; }
}

@media (max-width: 900px) {

  /* Hero: stack text + quote card vertically */
  .h2-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 28px;
    padding-top: 100px;
    padding-bottom: 56px;
    min-height: auto;
  }
  .h2-hero-text { max-width: 100%; }
  /* v8 doc item 6: hide the AUTOBUSA NOMA AR VADITAJU eyebrow on
     mobile only. Per client: too much text stacked above the H1 on
     phone. Desktop keeps the eyebrow. */
  .h2-hero-eyebrow { display: none; }
  .h2-hero-h1 { font-size: clamp(26px, 5.6vw, 42px); }
  .h2-hero-sub { font-size: 15px; }
  .h2-hero-trust { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .h2-hero-card { padding: 18px 16px; }

  /* Service strip: 2 columns on mobile (per user request) */
  .h2-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; }
  .h2-strip-card { padding: 10px 8px; gap: 8px; }
  .h2-strip-lbl { font-size: 12px; }

  /* Services editorial: stack list + aside (rules existed at 900, keep them) */

  /* Services CTA: stack copy + phone column (existing 760 rule covers this,
     but bump the breakpoint to 900 here too for consistency) */
  .h2-svc-cta { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }

  /* Map: stack the city list / map grid */
  .h2-map-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .h2-map-canvas { aspect-ratio: 4/3; }

  /* Stats band: 1 stat per row (matches the 900px rule, no
     half-empty trailing cell). */
  .h2-stats-inner { grid-template-columns: 1fr !important; gap: 28px; }
  .h2-stats-l h2 { font-size: clamp(24px, 4.2vw, 32px); }

  /* Why section: stack copy + photo */
  .h2-why-grid { grid-template-columns: 1fr !important; gap: 28px; }
  .h2-why-photo { aspect-ratio: 4/3; }
  .h2-why-points { grid-template-columns: 1fr 1fr; gap: 18px; }

  /* News section: 1 column */
  .h2-news-feat,
  .h2-news-grid-4 { grid-template-columns: 1fr !important; gap: 18px; }

  /* CTA banner (H2Cta): stack vertically and center the right
     column children. The default .h2-cta-r flex column has
     align-items: flex-start, which keeps the phone + email +
     button row left-aligned even when text-align: center is on
     the parent. Switch to center alignment on mobile so the
     phone number, email line, and CTA button match the centered
     heading + description above. */
  .h2-cta-inner { grid-template-columns: 1fr !important; gap: 24px; text-align: center; }
  .h2-cta-l p { margin-left: auto; margin-right: auto; }
  .h2-cta-r { align-items: center; justify-content: center; }
  .h2-cta-r .btn-row { justify-content: center; }

  /* Footer: stack columns */
  .h2-footer-top { grid-template-columns: 1fr 1fr !important; gap: 28px; }
  .h2-footer-bottom { grid-template-columns: 1fr !important; gap: 8px; text-align: center; }

  /* Hide Tweaks FAB + panel on mobile - it's a dev/preview tool, not for visitors */
  .h2-tweaks-fab,
  .h2-tweaks-fab + .nb-tweaks { display: none !important; }

  /* Hero form: stack the from/to + date/passengers two-column rows into
     single column so wide labels don't get clipped. */
  .h2-hero-card .row2 { grid-template-columns: 1fr !important; gap: 10px; }
  .h2-hero-card { padding: 16px 14px 14px; }

  /* Services editorial - inline service photo. Sits between the short
     description and the long paragraph. Hidden on desktop (the right
     aside covers it), visible on mobile only when this row is active.
     IMPORTANT: grid-column must be set on the <picture> wrapper, not
     the <img>, because the picture is the direct grid child of the
     li grid container. Targeting only the img left the picture in
     whatever auto-placement slot it landed in (column 1 / column 3)
     and the img rendered inline at the wrong position. */
  .h2-svc-edit-list li picture { grid-column: 2; }
  .h2-svc-edit-list li:not(.is-on) picture { display: none; }
  .h2-svc-edit-list li.is-on picture {
    display: block;
    margin-top: 12px;
  }
  .h2-svc-edit-list li.is-on .h2-svc-edit-list-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 8px;
  }
  /* Hide the right-aside on mobile - the inline photo above replaces it.
     !important because home2-variants.css loads later and could otherwise
     win the cascade if any future rule sets display on this selector. */
  .h2-svc-edit-aside { display: none !important; }
  .h2-svc-edit { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* ────────────────────────────────────────────────────────────────
     AUTOPARKS · mobile stacked-card layout
     Each class is its own card: violet image panel on top, label below
     on neutral, and (when active) the unit slider stacks under that
     card so units open directly beneath the chosen bus.
     ──────────────────────────────────────────────────────────────── */
  .h2-fleet-band-mobile {
    display: flex; flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }
  .h2-fleet-band-mobile-card {
    background: transparent;
    border: 1px solid var(--border-1);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .h2-fleet-band-mobile-card.is-active {
    border-color: var(--nb-violet);
    box-shadow: 0 12px 32px -16px rgba(41, 0, 89, .28);
  }
  .h2-fleet-band-mobile-card .h2-fleet-band-cell {
    /* Override desktop band-cell sizing for the mobile card layout */
    appearance: none; border: 0; padding: 18px 16px 12px;
    background: linear-gradient(135deg, var(--nb-violet) 0%, var(--nb-violet-deep, #290059) 100%);
    width: 100%; height: 140px;
    display: flex; align-items: flex-end; justify-content: center;
    cursor: pointer;
  }
  .h2-fleet-band-mobile-card[data-id="mini"] .h2-fleet-band-cell img { height: 70px; }
  .h2-fleet-band-mobile-card[data-id="midi"] .h2-fleet-band-cell img { height: 85px; }
  .h2-fleet-band-mobile-card[data-id="max"]  .h2-fleet-band-cell img { height: 96px; }
  .h2-fleet-band-mobile-card .h2-fleet-band-cell img {
    width: auto;
    max-width: 92%;
  }
  .h2-fleet-band-mobile-card .h2-fleet-band-cell.is-active {
    background: linear-gradient(135deg, var(--nb-violet-deep, #290059) 0%, #1a0040 100%);
  }
  .h2-fleet-band-mobile-card .h2-fleet-band-cell.is-active::after { display: none; }
  .h2-fleet-band-mobile-card .h2-fleet-band-label {
    width: 100%;
    text-align: left;
    padding: 14px 18px 16px;
    background: var(--bg-surface);
    border: 0;
    cursor: pointer;
    display: grid; grid-template-columns: 1fr auto; align-items: baseline;
    gap: 4px 12px;
  }
  .h2-fleet-band-mobile-card .h2-fleet-band-label .title {
    grid-column: 1; font: 700 16px/1.2 var(--font-display);
    color: var(--t-fg, var(--nb-navy));
  }
  .h2-fleet-band-mobile-card .h2-fleet-band-label.is-active .title { color: var(--nb-violet); }
  .h2-fleet-band-mobile-card .h2-fleet-band-label .cap {
    grid-column: 1; font: 500 12.5px/1.3 var(--font-body);
    color: var(--t-fg-muted, var(--fg-2));
  }
  .h2-fleet-band-mobile-card .h2-fleet-band-label .cnt {
    grid-column: 2; grid-row: 1 / span 2; align-self: center;
    font: 500 10.5px/1 var(--font-body);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--t-accent, var(--nb-violet));
  }
  /* Mobile slider lives inside the active card */
  .h2-fleet-slider-wrap--mobile {
    background: var(--bg-surface);
    padding: 0 0 14px;
    border-top: 1px solid var(--border-1);
  }
  .h2-fleet-slider-wrap--mobile .h2-fleet-slider-nav {
    padding: 10px 16px 8px;
    margin-bottom: 0;
  }
  .h2-fleet-slider-wrap--mobile .h2-fleet-slider {
    padding-left: 16px;
    padding-right: 16px;
  }
  .h2-fleet-slider-wrap--mobile .h2-fleet-slider > .h2-unit {
    flex: 0 0 calc(100% - 8px);
  }

  /* Karjera banner: stack on tablet portrait + below */
  .h2-karjera-banner { padding: 56px 0; }
  .h2-karjera-banner-inner { grid-template-columns: 1fr; gap: 28px; }
  .h2-karjera-banner-r { aspect-ratio: 16 / 9; max-height: 320px; }
}

/* ─── ≤ 560 px (phone) ───────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Hero trust list: keep 2 columns on phone per user request */
  .h2-hero-trust { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .h2-hero-cta { flex-direction: column; align-items: stretch; gap: 8px; }
  .h2-hero-cta .h2-btn--prim,
  .h2-hero-cta .h2-btn--ghost { justify-content: center; }

  /* Service strip: 2 columns */
  .h2-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Stats: 1 stat per row stacking handled at the 900px rule */

  /* Why points: 1 column on phone */
  .h2-why-points { grid-template-columns: 1fr; }

  /* Footer: 1 column on phone */
  .h2-footer-top { grid-template-columns: 1fr !important; }

  /* Section heading + body padding tighter */
  .h2-services,
  .h2-fleet,
  .h2-map,
  .h2-stats,
  .h2-why,
  .h2-citi,
  .h2-news { padding-top: 56px; padding-bottom: 56px; }
  .h2-section-head h2 { font-size: clamp(22px, 6.5vw, 28px); }

  /* Drawer takes the full screen on phone */
  .h2-top-drawer { width: 100vw; max-width: 100vw; }
}

/* ─── GDPR cookie banner (home2-cookies.jsx) ──────────────────────────
   Fixed at the bottom of the viewport, ink background + sugar copy
   so it reads on both the light and dark sections it overlaps. Mounts
   into its own React root (#cookie-banner-root) so the main app
   tree does not control its lifecycle. */
.nb-site-notice {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1200;
  background: var(--nb-ink, #17121C);
  color: var(--nb-sugar, #EDEBE0);
  border-top: 1px solid rgba(196,149,229,.28);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  /* animation-fill-mode: forwards so the final translateY(0) sticks
     after the .28s rise; without it the element returns to its
     computed transform between the end-of-animation and the
     browser's repaint, briefly snapping back to translateY(100%)
     (which on some engines persisted, leaving the banner off-screen). */
  animation: nb-notice-rise .28s var(--ease-out, ease) forwards;
}
@keyframes nb-notice-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
.nb-notice-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px; align-items: start;
}
.nb-notice-text { min-width: 0; }
.nb-notice-text strong {
  display: block;
  font: 700 15px/1.2 var(--font-display, var(--font-body));
  margin-bottom: 4px;
}
.nb-notice-text p {
  margin: 0;
  font: 400 13px/1.5 var(--font-body);
  color: rgba(237,235,224,.82);
}
.nb-notice-text a { color: var(--nb-lavender, #C495E5); text-underline-offset: 2px; }
.nb-notice-prefs {
  margin-top: 12px;
  display: grid; gap: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border-radius: 6px;
}
.nb-notice-pref {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  align-items: flex-start;
  font: 400 12.5px/1.45 var(--font-body);
  color: rgba(237,235,224,.78);
  cursor: pointer;
}
.nb-notice-pref input[type="checkbox"] {
  margin: 2px 0 0;
  accent-color: var(--nb-violet, #6E2297);
}
.nb-notice-pref input[disabled] { opacity: .5; cursor: not-allowed; }
.nb-notice-pref b { color: var(--nb-sugar, #EDEBE0); font-weight: 700; }
.nb-notice-actions {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: flex-end;
}
.nb-notice-link {
  appearance: none; background: transparent; border: 0;
  color: var(--nb-lavender, #C495E5);
  font: 600 12px/1 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 10px 12px; cursor: pointer;
}
.nb-notice-link:hover { color: var(--nb-sugar, #EDEBE0); }
.nb-notice-ghost, .nb-notice-primary {
  appearance: none;
  font: 700 12px/1 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.nb-notice-ghost {
  background: transparent;
  color: var(--nb-sugar, #EDEBE0);
  border: 1px solid rgba(237,235,224,.32);
}
.nb-notice-ghost:hover { border-color: var(--nb-sugar, #EDEBE0); }
.nb-notice-primary {
  background: var(--nb-violet, #6E2297);
  color: var(--nb-sugar, #EDEBE0);
  border: 1px solid var(--nb-violet, #6E2297);
}
.nb-notice-primary:hover { filter: brightness(1.08); }
@media (max-width: 760px) {
  .nb-notice-inner { grid-template-columns: 1fr; gap: 14px; }
  .nb-notice-actions { justify-content: stretch; }
  .nb-notice-actions .nb-notice-ghost,
  .nb-notice-actions .nb-notice-primary { flex: 1 1 0; min-width: 0; }
  .nb-notice-link { width: 100%; text-align: left; padding-left: 0; }
}

/* ─── Mobile UX polish (v5 client report: hard to navigate / when to scroll) */

/* Hero scroll-cue chevron, visible only on mobile. Tells visitors
   the page continues below the form card. */
.h2-hero-scroll {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(237,235,224,.92);
  color: var(--nb-navy, #290059);
  align-items: center; justify-content: center;
  font: 700 22px/1 var(--font-display, var(--font-body));
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  animation: h2-hero-bob 1.6s ease-in-out infinite;
  z-index: 2;
}
@keyframes h2-hero-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
@media (max-width: 900px) {
  /* Hero-scroll arrow stays hidden on mobile now that the in-hero
     form is removed; without the form taking the whole first viewport
     the user already sees the page continues below and the arrow
     read as redundant/awkward floating UI per user feedback. */
  .h2-hero-scroll { display: none; }
}

/* Mobile contact-form section. Hidden on desktop (hero card serves
   as the form). On mobile the in-hero form is hidden via .h2-hero
   .h2-hero-card rules below, and this section becomes the
   reachable form. Sits between H2Cta and H2Footer near the
   bottom of the page so users have read the business pitch
   before the form appears. */
.h2-contact-mobile-section { display: none; }
@media (max-width: 900px) {
  .h2-contact-mobile-section {
    display: block;
    background: var(--nb-sugar);
    padding: 48px 0 56px;
  }
  .h2-contact-mobile-section .h2-hero-card { margin: 0 auto; max-width: 540px; }
  /* Hide the in-hero form on mobile (it was the first 5+ seconds
     of scroll, blocking the user from seeing any business content). */
  .h2-hero .h2-hero-card { display: none; }
}

/* Mobile floating call bubble (FAB). Replaces the previous sticky
   bottom bar per user feedback ("make a phone toggle that would be
   easier to see as you scroll"). Sits opposite the cookie-prefs
   toggle (bottom-left), so the two action surfaces stay symmetric.
   Hidden on desktop (the top-bar phone link covers the need there). */
.h2-mob-call-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 78;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nb-violet, #6E2297);
  color: var(--nb-sugar, #EDEBE0);
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 10px 24px -6px rgba(110, 34, 151, .55),
              0 4px 10px rgba(0,0,0,.2);
  transition: filter .18s, transform .12s;
}
.h2-mob-call-fab:hover,
.h2-mob-call-fab:focus-visible { filter: brightness(1.08); }
.h2-mob-call-fab:active { transform: translateY(1px); }
.h2-mob-call-fab .icn { width: 22px; height: 22px; }
.h2-mob-call-fab img.icn { filter: brightness(0) invert(1); }

@media (max-width: 900px) {
  .h2-mob-call-fab { display: flex; }
  /* No full-width bar at the bottom anymore = no body padding needed
     to clear it. FAB sits on top of content; the page no longer
     reserves bottom space for a sticky bar. */
  body { padding-bottom: 0; }
  /* Both bottom-corner buttons (cookie toggle bottom-left, call FAB
     bottom-right) live independently at fixed bottom: 16px, so the
     cookie toggle no longer needs to offset above a bottom bar. */
  :root { --nb-mobile-bar-h: 0px; }
}

/* v8 doc item 5: LV/EN toggle stays visible in the top bar at every
   viewport (was previously hidden below 1100px, forcing users into
   the burger drawer to switch language). Compact sizing applied via
   the <=900px block above. */

/* Section head hierarchy on phones: bigger eyebrow + bigger h2 so
   visitors can tell when they have moved from one section to the
   next. */
@media (max-width: 560px) {
  .h2-section-head { gap: 8px; margin-bottom: 24px; }
  .h2-section-head .eb { font-size: 12.5px; }
  .h2-section-head h2 { font-size: clamp(26px, 7.5vw, 34px); line-height: 1.1; margin-top: 8px; }
  .h2-section-head p { font-size: 14.5px; line-height: 1.5; }
}

/* Bus detail modal close: 44x44 on small phones. */
@media (max-width: 480px) {
  .h2-bus-modal-close { width: 44px; height: 44px; top: 8px; right: 8px; }
}

/* Modal panel kept position:relative so the close button (absolutely
   positioned above) anchors correctly. Position properties for the
   close itself are set on the main .h2-modal-close rule above with
   !important so no override can move it. */
.h2-modal-panel { position: relative; }

/* Karjera banner: photo first on mobile, capped height so the CTA
   sits above the fold and the section reads as a focal banner. */
@media (max-width: 900px) {
  .h2-karjera-banner-inner { grid-template-columns: 1fr; gap: 24px; }
  .h2-karjera-banner-r { order: -1; aspect-ratio: 21 / 9; max-height: 200px; }
  .h2-karjera-banner-l h2 { font-size: clamp(24px, 6vw, 32px); }
}

/* Hero CTA pill on the contact card pulses when targeted from the
   top-bar or the sticky mobile CTA. Adds a brief lavender ring so
   the visitor knows where to look once the scroll lands. */
.h2-hero-card.is-pulsing {
  box-shadow: 0 0 0 0 rgba(196, 149, 229, .55);
  animation: h2-card-pulse 1.6s ease-out;
}
@keyframes h2-card-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(196, 149, 229, .55); }
  60%  { box-shadow: 0 0 0 18px rgba(196, 149, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 149, 229, 0); }
}

/* ====================================================================
   MOBILE BROAD-PASS POLISH
   Section-agnostic patterns that fix many components at once. Lives
   at the END of home2.css so it overrides earlier rules where needed.
   ==================================================================== */

/* iOS Safari zooms in on input focus if the input font-size is
   under 16px. Annoying jump that resets when blurred. Force 16px on
   every form control under 760px so first-tap stays in place. */
@media (max-width: 760px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="search"], input[type="password"],
  input[type="date"], input[type="datetime-local"], input[type="time"],
  select, textarea {
    font-size: 16px;
  }
}

/* Tap-target safety net. WCAG + Apple HIG both call for 44x44px
   minimum tap targets. Scope to touch-capable devices (coarse
   pointer) so desktop hover surfaces stay compact. Excludes inline
   anchors inside paragraphs (where 44px would force enormous
   line-height). */
@media (hover: none) and (pointer: coarse) {
  .h2-top-nav a,
  .h2-top-drawer-nav a,
  .h2-top-drawer-cta,
  .h2-top-drawer-tel,
  .h2-top-drawer-lang button,
  .h2-mobile-bar a,
  .h2-mobile-bar button,
  .h2-top-burger,
  .h2-top-tel,
  .h2-svc-edit-cta,
  .h2-svc-cta-tel,
  .h2-citi .cta,
  .h2-citi-cta-btn,
  .h2-fleet-tab,
  .h2-fleet-band-label,
  .h2-fleet-band-cell,
  .h2-fleet-band-mobile-card,
  .h2-cta button,
  .h2-cta a,
  .h2-footer a,
  .nb-notice-link,
  .nb-notice-ghost,
  .nb-notice-primary,
  .h2-btn,
  .h2-btn--prim,
  .h2-btn--ghost {
    min-height: 44px;
  }
  button[type="submit"], .h2-form button, .h2-form input[type="submit"] {
    min-height: 48px;
  }
}

/* Hover-only affordances broken on touch. The editorial accordion +
   the bus modal both rely on hover for active state on desktop; the
   click handlers already work on touch, but the elevation/lift on
   hover can stick after a tap on iOS (no mouseout fires); reset on
   touch so cards return to rest state. */
@media (hover: none) and (pointer: coarse) {
  .h2-strip-card:hover,
  .h2-unit:hover,
  .h2-partner-cell:hover img,
  .h2-partner-cell--solid:hover img {
    transform: none;
  }
}

/* News cards on phones: keep the 16/10 aspect from desktop since
   we are back to background-size: cover (no letterbox). Removing
   the per-breakpoint override avoids portrait phone photos getting
   over-zoomed by the tighter 4/3 frame. */