html[data-starting-charging-systems-page] #truck-repair-hero #main-banner.banner__image {
  background-image: url('../img/banner/starting-charging-systems/starting-charging-systems-banner.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* starting-charging-systems.html ONLY — home-matching banner dimensions (index.css §4.1) */

/* Hero height: exact home port (NOT --home-banner-height breadcrumb token) */
html[data-starting-charging-systems-page] #truck-repair-hero {
  min-height: clamp(560px, 78vh, 980px) !important;
  height: clamp(560px, 78vh, 980px) !important;
  max-height: none !important;
}

@media (max-width: 980px) {
  html[data-starting-charging-systems-page] #truck-repair-hero {
    min-height: clamp(320px, 56vh, 520px) !important;
    height: clamp(320px, 56vh, 520px) !important;
  }
}

/* Glass card box: home index lock (400×720) */
html[data-starting-charging-systems-page] #truck-repair-hero .banner-glass-card {
  height: 400px;
  min-height: 400px;
  max-width: 720px;
}

@media (max-width: 980px) {
  html[data-starting-charging-systems-page] #truck-repair-hero .banner-glass-card {
    height: auto;
    min-height: 360px;
  }
}
/* === v3 responsive: image always fully visible, glass card drops below === */
@media (max-width: 1760px) {
  html[data-starting-charging-systems-page] #truck-repair-hero {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  html[data-starting-charging-systems-page] #truck-repair-hero #main-banner.banner__image {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-top: calc(100% / 1.83) !important;
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    inset: auto !important;
  }

  html[data-starting-charging-systems-page] #truck-repair-hero .banner__content-shell--fixed {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    padding: 18px 16px 0 !important;
  }
}
/* === v3 desktop-to-980 containment: image stays fully visible while viewport shrinks === */
/* === v3 desktop scaling: cover fills banner above 1544px (smooth, no jump) === */
@media (min-width: 1545px) {
  html[data-starting-charging-systems-page] #truck-repair-hero #main-banner.banner__image {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}