/* Jamaica Coach Sales & Services - targeted fixes on top of the Boxcar template.
   The v6 header variant ships with white text/border on a transparent light
   header (invisible here) - other header variants (v10, five) correct this
   the same way; v6 just doesn't, so we do it ourselves.

   Standing rule: no border or outline anywhere on the page may render
   thinner than 2px. The vendor stylesheet uses 1px throughout - any time a
   new component from it gets used/styled here, check its computed border
   width and bump it (border-width / border-<side>-width / outline-width)
   if it's under 2px. */

.hheader-style-v4.v6 .header-inner .right-box .box-account {
  color: var(--theme-color-dark);
}

.hheader-style-v4.v6 .btn .header-btn-two {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 28px;
  color: #fff;
  background-color: #094ec5;
  border-color: #094ec5;
  border-radius: 0;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}

.hheader-style-v4.v6 .btn .header-btn-two:hover {
  background-color: #050B20;
  border-color: #050B20;
  color: #fff;
}

/* Sticky nav bar - vendor ships this as position:absolute (only ever
   overlaps whatever's at the very top of the page, then scrolls away
   normally). The floating pill below is already a semi-transparent
   frosted-glass panel designed to sit over arbitrary content, so pinning
   the whole header to the viewport just keeps that same look while
   scrolling instead of only at the top. */
.hheader-style-v4 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* Frosted-glass floating nav bar */
.hheader-style-v4.v6 .header-inner .boxcar-container .c-box {
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  padding: 14px 24px;
  box-shadow: 0 16px 40px rgba(5, 11, 32, 0.28), 0 4px 14px rgba(5, 11, 32, 0.16);
}

/* The vendor's shared --container-width (1430px) is fine for body content,
   but it leaves the header's frosted nav bar visibly stranded in the
   middle of the screen on wide monitors - the gap on either side grows
   past ~1600px into real dead space. Only widen it for the header (not
   --container-width itself, which every other section also uses and is
   tuned around) so this doesn't reflow the hero image math, fleet cards,
   etc. Scales with viewport instead of jumping straight to one fixed
   width, capped so it never gets so wide the nav items themselves look
   sparse/disconnected on ultra-wide monitors. Cap raised from an earlier
   1800px - that was still being hit (and leaving dead space again) on
   ordinary 2000px+ screens, not just exotic ultra-wides. */
@media (min-width: 1600px) {
  .hheader-style-v4.v6 .header-inner .boxcar-container {
    max-width: min(96vw, 2200px);
  }
}

/* Reclaim horizontal space so the full nav fits at ordinary laptop widths
   (1366-1536px) instead of dropping to the hamburger there. The vendor's
   defaults were sized for a much narrower header (small logo mark, no
   phone number, plain nav-out-bar margin) - our header carries more
   content, so the generous default gaps were the actual bottleneck, not
   the available viewport width itself.
   18px margin per side on 5 nav items + 60px nav-out-bar margin was
   ~200px of pure whitespace before a single letter of content. */
.hheader-style-v4.v6 .nav-out-bar {
  margin-right: 24px !important;
}

.hheader-style-v4.v6 .main-menu .navigation > li {
  margin: 0 10px;
}

.hheader-style-v4.v6 .main-menu .navigation > li > a,
.hheader-style-v4.v6 .main-menu .navigation > li > span {
  font-weight: 600;
}

/* Vendor default shadow is barely visible (5% opacity) against the page's
   own white background, so the Yutong submenu reads as floating with no
   real edge. A visible border plus a stronger shadow gives it a defined
   boundary. */
.hheader-style-v4 .header-inner .c-box .nav-out-bar .nav .navigation .current-dropdown .dropdown {
  border: 1px solid #e4e4e4;
  box-shadow: 0 16px 32px rgba(5, 11, 32, 0.16);
}

.hheader-style-v4.v6 .btn .header-btn-two {
  padding: 11px 20px;
}

.hheader-style-v4.v6 .header-inner .right-box .box-account {
  margin-right: 14px;
}

/* The vendor stylesheet independently hides .nav-out-bar (display:none)
   for ANY width <= 1520px (see boxcar/css/style.css ~line 25097 and its
   redundant ~1399px copy), regardless of our own mobile-menu breakpoint
   below. That left a broken gap between our breakpoint and 1520px where
   the nav was hidden but our custom hamburger/mobile-menu styling wasn't
   active yet either - nothing rendered at all. Force the desktop nav back
   on above our real breakpoint so our own @media (max-width: ...) block
   further down is the single source of truth for when the hamburger takes
   over. Keep this min-width in sync with the max-width used below. */
@media (min-width: 1200px) {
  .hheader-style-v4.v6 .header-inner .c-box .nav-out-bar {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .hheader-style-v4.v6 .header-inner .mobile-navigation {
    display: none !important;
  }
}

/* Site-wide: no hairline 1px borders - 2px minimum everywhere one shows up.
   The vendor template uses 1px throughout; these are every instance that
   actually appears on this page. */
.hheader-style-v4 .btn .header-btn-two {
  border-width: 2px;
}

.boxcar-banner-section-six .content-column .inner-column .btn-box .read-more {
  border-width: 2px;
}

.boxcar-banner-section-six .content-column .inner-column .right-box .service-list li a {
  border-width: 2px;
  background-color: #094ec5;
  border-color: #094ec5;
  color: #fff;
  border-radius: 0;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  padding-left: 34px;
  padding-right: 34px;
}

.boxcar-banner-section-six .content-column .inner-column .right-box .service-list li a i {
  color: #fff;
}

.dealership-block .inner-box {
  border-width: 2px;
}

.car-block-three .inner-box .content-box {
  border-width: 2px;
  border-top-width: 0;
}

.car-block-three .inner-box .content-box .text,
.car-block-three .inner-box .content-box ul {
  border-bottom-width: 2px;
}

.hheader-style-v4.v6 .btn {
  border-width: 2px;
}

.footer-style-five.v6 .footer-bottom {
  border-top-width: 2px;
}

/* Developer credit badge - a light rounded pill against the dark footer
   bar, instead of a plain text link, so the logo has somewhere to sit. */
.jcs-dtl-credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 10px;
  background-color: #fff;
  border-radius: 15px;
  color: var(--jcs-navy);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 3px solid #094ec5;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.jcs-dtl-credit img {
  display: block;
  height: 28px;
  width: auto;
}

.jcs-dtl-credit:hover {
  color: var(--jcs-blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

@media (max-width: 575.98px) {
  .jcs-dtl-credit span {
    display: block;
    max-width: 220px;
  }
}

/* Visual separation between homepage sections via alternating background
   tone instead of a literal dividing line. */
/* "How Can We Help" - full-bleed gradient instead of a pale tint. Flat top
   and bottom edges (no clip-path/diagonal) per request. Blue/near-black
   keeps the section aligned with the bus brand direction. */
.dealership-section {
  background: linear-gradient(135deg, #094EC5 0%, #0B3A94 45%, #050B20 100%);
  position: relative;
  z-index: 2;
  padding-top: 112px !important;
  padding-bottom: 132px !important;
}

@media (max-width: 767.98px) {
  .dealership-section {
    padding-top: 82px !important;
    padding-bottom: 96px !important;
  }
}

/* "View" buttons in this section: swapped the shared diagonal-arrow SVG
   for a distinct long horizontal arrow, and it nudges right on hover
   instead of sitting static. */
.jcs-read-more {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.dealership-block .inner-box .content-box .jcs-read-more {
  border-width: 2px;
}

.jcs-read-more i {
  transition: transform 0.25s ease, color 0.25s ease;
  color: #fff;
}

.jcs-read-more:hover i {
  transform: translateX(6px);
  color: #050B20;
}

/* Heading/subtitle switch to light text now that the section sits on a
   dark, saturated gradient instead of a pale off-white tint. */
.dealership-section .boxcar-title h2 {
  color: #fff;
}

.dealership-section .jcs-eyebrow {
  color: #FFD873;
}

.dealership-section .jcs-section-subtitle {
  color: rgba(255, 255, 255, 0.85);
}

.boxcar-pricing-section-four {
  background: #fff;
  padding: 110px 0;
  overflow: hidden;
}

.boxcar-pricing-section-four.style-bg::before {
  content: none;
}

.boxcar-pricing-section-four .boxcar-container > .row {
  align-items: center;
  background: #fff;
  border: 3px solid #094ec5;
  border-radius: 18px;
  box-shadow: none;
  padding: 28px;
}

.boxcar-pricing-section-four .image-column .inner-column .image-box {
  height: 100%;
}

.boxcar-pricing-section-four .image-column .inner-column .image-box .image {
  position: relative;
  height: 100%;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background-color: transparent;
}

.boxcar-pricing-section-four .image-column .inner-column .image-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.boxcar-pricing-section-four .content-column .inner-column {
  padding: 44px 28px 44px 54px;
}

.boxcar-pricing-section-four .content-column .inner-column .boxcar-title {
  margin-bottom: 28px;
}

.boxcar-pricing-section-four .content-column .inner-column .boxcar-title h2 {
  color: var(--jcs-navy);
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.12;
  margin-bottom: 14px;
}

.boxcar-pricing-section-four .content-column .inner-column .boxcar-title .text {
  max-width: 560px;
  color: #4F5F70;
  font-size: 17px;
  line-height: 1.7;
}

.boxcar-pricing-section-four .content-column .inner-column .list-style-one {
  display: grid;
  gap: 12px;
  margin-bottom: 34px;
}

.boxcar-pricing-section-four .content-column .inner-column .list-style-one li {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 13px 34px 13px 62px;
  border: 0;
  border-radius: 0;
  background-color: #094ec5;
  color: #fff;
  font-weight: 600;
  line-height: 1.45;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  box-shadow: 0 12px 24px rgba(9, 78, 197, 0.16);
}

.boxcar-pricing-section-four .content-column .inner-column .list-style-one li::before,
.boxcar-pricing-section-four .content-column .inner-column .list-style-one li::after {
  content: none;
}

.boxcar-pricing-section-four .content-column .inner-column .list-style-one li i {
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  background: transparent;
  color: #fff;
  font-size: 15px;
}

.boxcar-pricing-section-four .content-column .inner-column .read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 34px;
  border: 0;
  border-radius: 0;
  background-color: var(--jcs-blue);
  color: #fff;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  box-shadow: 0 14px 28px rgba(9, 78, 197, 0.22);
}

.boxcar-pricing-section-four .content-column .inner-column .read-more:hover {
  background-color: var(--jcs-navy);
  color: #fff;
}

.boxcar-pricing-section-four .content-column .inner-column .read-more svg {
  top: 0;
  margin-left: 0;
}

.boxcar-pricing-section-four .content-column .inner-column .read-more svg path {
  fill: #fff;
}

/* The vendor stylesheet has a blanket rule - @media (max-width: 767px)
   { .boxcar-title .text { display: none; } } - that hides ANY ".text"
   inside a ".boxcar-title" on mobile, regardless of section. That's fine
   for sections using it as decorative filler copy, but here it's the real
   Company Overview paragraphs - it was silently deleting them on every
   phone-width screen. Restore it specifically for this section. */
@media (max-width: 767px) {
  .boxcar-pricing-section-four .boxcar-title .text {
    display: block;
  }
}

@media (max-width: 991.98px) {
  .boxcar-pricing-section-four {
    padding: 80px 0;
  }

  .boxcar-pricing-section-four .boxcar-container > .row {
    padding: 18px;
  }

  .boxcar-pricing-section-four .image-column .inner-column .image-box .image {
    min-height: 320px;
  }

  .boxcar-pricing-section-four .content-column .inner-column {
    padding: 34px 8px 12px;
    margin-top: 0;
  }
}

@media (max-width: 575.98px) {
  .boxcar-pricing-section-four .boxcar-container > .row {
    border-radius: 14px;
    padding: 12px;
  }

  .boxcar-pricing-section-four .image-column .inner-column .image-box .image {
    min-height: 240px;
  }

  .boxcar-pricing-section-four .content-column .inner-column .list-style-one li {
    align-items: flex-start;
    padding-right: 12px;
  }

  .boxcar-pricing-section-four .content-column .inner-column .read-more {
    width: 100%;
  }
}

.cars-section-three {
  position: relative;
  overflow: hidden;
  background-color: var(--jcs-navy);
  padding: 112px 0 132px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  margin: 0;
}

.cars-section-three .boxcar-container {
  position: relative;
  z-index: 1;
}

.cars-section-three .boxcar-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.cars-section-three .boxcar-title h2 {
  position: relative;
  color: #fff;
  margin-bottom: 0;
  padding-bottom: 14px;
}

.cars-section-three .boxcar-title h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 86px;
  height: 5px;
  background-color: #fff;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.cars-section-three .boxcar-title .btn-title {
  position: relative;
  top: auto;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 28px;
  border: 2px solid var(--jcs-blue);
  border-radius: 0;
  background-color: #fff;
  color: var(--jcs-blue);
  font-weight: 700;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}

.cars-section-three .boxcar-title .btn-title:hover {
  background-color: var(--jcs-blue);
  color: #fff;
}

.cars-section-three .boxcar-title .btn-title svg {
  margin-left: 0;
}

.cars-section-three .boxcar-title .btn-title svg path {
  transition: fill 0.25s ease;
  fill: var(--jcs-blue);
}

.cars-section-three .boxcar-title .btn-title:hover svg path {
  fill: #fff;
}

.cars-section-three .nav-tabs {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 42px;
  border: 0;
}

.cars-section-three .nav-tabs::before {
  content: "";
  position: absolute;
  left: 52px;
  right: 52px;
  top: 50%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-50%);
  z-index: 0;
}

.cars-section-three .nav-tabs .nav-link {
  position: relative;
  z-index: 1;
  min-height: 46px;
  padding: 11px 28px;
  border: 2px solid rgba(9, 78, 197, 0.3);
  border-radius: 0;
  background-color: #fff;
  color: var(--jcs-blue);
  font-weight: 700;
  line-height: 1.2;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}

.cars-section-three .nav-tabs .nav-link::before {
  content: none;
}

.cars-section-three .nav-tabs .nav-link:hover,
.cars-section-three .nav-tabs .nav-link.active {
  border-color: var(--jcs-blue);
  background-color: var(--jcs-blue);
  color: #fff;
}

.cars-section-three .tab-pane .row {
  row-gap: 34px;
}

.cars-section-three .car-block-three {
  display: flex;
  margin: 0;
}

.cars-section-three .car-block-three.style-2 .inner-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 2px solid rgba(9, 78, 197, 0.16);
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 18px 42px rgba(5, 11, 32, 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.cars-section-three .car-block-three.style-2 .inner-box:hover {
  transform: translateY(-6px);
  border-color: var(--jcs-blue);
  box-shadow: 0 22px 48px rgba(5, 11, 32, 0.13);
}

.cars-section-three .car-block-three.style-2 .inner-box .image-box {
  padding: 12px 12px 0;
}

.cars-section-three .car-block-three .inner-box .image-box .slider-thumb {
  overflow: hidden;
  border-radius: 6px;
  background-color: rgba(9, 78, 197, 0.06);
}

.cars-section-three .car-block-three .inner-box .image-box .slider-thumb::before {
  content: none;
}

.cars-section-three .car-block-three .inner-box .image-box .image {
  aspect-ratio: 16 / 10;
}

.cars-section-three .car-block-three .inner-box .image-box .image a,
.cars-section-three .car-block-three .inner-box .image-box .image img {
  display: block;
  width: 100%;
  height: 100%;
}

.cars-section-three .car-block-three .inner-box .image-box .image img {
  object-fit: cover;
  transition: transform 0.35s ease;
}

.cars-section-three .car-block-three.style-2 .inner-box:hover .image-box .image img {
  transform: scale(1.04);
}

.cars-section-three .car-block-three.style-2 .inner-box .content-box {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 24px 22px;
  border: 0;
}

.cars-section-three .car-block-three .inner-box .content-box .title {
  margin-bottom: 10px;
  color: var(--jcs-navy);
}

.cars-section-three .car-block-three .inner-box .content-box .text {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 7px 18px;
  background-color: var(--jcs-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.cars-section-three .car-block-three .inner-box .content-box ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.cars-section-three .car-block-three .inner-box .content-box ul li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid rgba(9, 78, 197, 0.12);
  background-color: #fff;
  color: #405061;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  box-sizing: border-box;
}

.cars-section-three .car-block-three .inner-box .content-box ul li i {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: rgba(9, 78, 197, 0.1);
  color: var(--jcs-blue);
  font-size: 13px;
}

.cars-section-three .car-block-three .inner-box .content-box .btn-box {
  margin-top: auto;
}

.cars-section-three .car-block-three .inner-box .content-box .btn-box .details {
  position: relative;
  right: auto;
  bottom: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 24px;
  border: 2px solid var(--jcs-blue);
  background-color: var(--jcs-blue);
  color: #fff;
  font-weight: 700;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.cars-section-three .car-block-three .inner-box .content-box .btn-box .details:hover {
  background-color: var(--jcs-navy);
  border-color: var(--jcs-navy);
  color: #fff;
}

.cars-section-three .car-block-three .inner-box .content-box .btn-box .details svg {
  margin-left: 0;
}

.cars-section-three .car-block-three .inner-box .content-box .btn-box .details svg path {
  transition: fill 0.25s ease;
  fill: #fff;
}

.cars-section-three .car-block-three .inner-box .content-box .btn-box .details:hover svg path {
  fill: #fff;
}

@media (max-width: 767.98px) {
  .cars-section-three {
    padding: 82px 0 96px;
  }

  .cars-section-three .boxcar-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .cars-section-three .boxcar-title .btn-title,
  .cars-section-three .nav-tabs .nav-link {
    width: 100%;
  }

  .cars-section-three .nav-tabs {
    display: flex;
    width: 100%;
    gap: 10px;
  }

  .cars-section-three .nav-tabs::before {
    content: none;
  }
}

@media (max-width: 575.98px) {
  .cars-section-three .car-block-three.style-2 .inner-box .content-box {
    padding: 22px 18px 20px;
  }

  .cars-section-three .car-block-three .inner-box .content-box ul {
    grid-template-columns: 1fr;
  }

  .cars-section-three .car-block-three .inner-box .content-box ul li {
    min-height: 46px;
  }

  .cars-section-three .car-block-three .inner-box .content-box .btn-box .details {
    width: 100%;
  }
}

.why-choose-us-section {
  background-color: #fff;
}

.why-choose-us-section.v2.pt-0 {
  padding: 104px 0 72px !important;
}

.why-choose-us-section.v2 .boxcar-container {
  max-width: 1120px;
}

.why-choose-us-section .boxcar-title {
  margin-bottom: 46px;
}

.why-choose-us-section .boxcar-title .title {
  position: relative;
  display: inline-block;
  color: var(--jcs-navy);
  padding-bottom: 16px;
}

.why-choose-us-section .boxcar-title .title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 112px;
  height: 5px;
  background-color: var(--jcs-blue);
  transform: translateX(-50%);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.why-choose-us-section .row {
  align-items: stretch;
  row-gap: 24px;
}

.why-choose-us-section .choose-us-block {
  display: flex;
  margin-bottom: 0;
}

.why-choose-us-section .choose-us-block .inner-box {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  min-height: 188px;
  padding: 30px 30px 28px;
  overflow: hidden;
  border: 3px solid rgba(9, 78, 197, 0.22);
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 18px 38px rgba(5, 11, 32, 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.why-choose-us-section .choose-us-block .inner-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 6px;
  background-color: var(--jcs-blue);
}

.why-choose-us-section .choose-us-block .inner-box::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 118px;
  height: 118px;
  border: 3px solid rgba(9, 78, 197, 0.1);
  border-radius: 8px;
  transform: rotate(45deg);
}

.why-choose-us-section .choose-us-block .inner-box:hover {
  transform: translateY(-6px);
  border-color: var(--jcs-blue);
  box-shadow: 0 24px 48px rgba(5, 11, 32, 0.14);
}

.why-choose-us-section .choose-us-block .inner-box .icon-box {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  margin-bottom: 0;
  background-color: var(--jcs-blue);
  color: #fff;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  box-shadow: 0 12px 24px rgba(9, 78, 197, 0.18);
}

.why-choose-us-section .choose-us-block .inner-box .icon-box i {
  color: #fff !important;
  font-size: 32px !important;
}

.why-choose-us-section .choose-us-block .inner-box .content-box {
  position: relative;
  z-index: 1;
}

.why-choose-us-section .choose-us-block .inner-box .content-box .title {
  color: var(--jcs-navy);
  font-weight: 700;
  margin-bottom: 12px;
}

.why-choose-us-section .choose-us-block .inner-box .content-box .text {
  padding-right: 0;
  color: #4F5F70;
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 767.98px) {
  .why-choose-us-section.v2.pt-0 {
    padding: 82px 0 56px !important;
  }

  .why-choose-us-section .boxcar-title {
    margin-bottom: 34px;
  }

  .why-choose-us-section .choose-us-block .inner-box {
    gap: 18px;
    padding: 26px 22px 24px;
  }
}

@media (max-width: 575.98px) {
  .why-choose-us-section .choose-us-block .inner-box {
    flex-direction: column;
    min-height: 0;
  }
}

/* "How Can We Help" cards - equal height regardless of description text
   length differing between the three, with the "View" link pinned to the
   same bottom position on every card instead of trailing right after a
   shorter paragraph. Bootstrap's row/col already stretches the columns to
   equal height by default; the card itself just wasn't set up to fill
   that height. */
.dealership-section .row {
  align-items: stretch;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .dealership-section .row {
    row-gap: 46px;
  }

  .dealership-section .dealership-block {
    margin-bottom: 0;
  }
}

.dealership-block {
  display: flex;
}

.dealership-block .inner-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* "How Can We Help" polish pass: eyebrow + subtitle on the section title,
   a colored icon badge overlapping each card's image, softer/larger card
   corners, a lift-and-shadow hover instead of a static flat box, and the
   "View" button styled to stay consistent with the rest of the page. */
.jcs-section-title {
  max-width: 640px;
}

.jcs-eyebrow {
  display: inline-block;
  font-family: var(--title-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--jcs-gold);
  margin-bottom: 10px;
}

.jcs-section-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: #616670;
  margin-top: 10px;
  margin-bottom: 0;
}

/* Solid service cards avoid backdrop-filter compositing artifacts in the
   three-column layout, where hover transforms could show a pale vertical strip
   on neighboring cards in some browsers. */
.dealership-block .inner-box {
  background-color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(5, 11, 32, 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.dealership-block .inner-box:hover {
  transform: translateY(-8px);
  border-color: #fff;
  box-shadow: 0 26px 58px rgba(5, 11, 32, 0.36);
}

.dealership-block .image-box {
  position: relative;
  padding: 12px 12px 0;
}

.dealership-section .jcs-square-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  outline: 10px solid #D7DCE5;
  border-radius: 8px;
  background-color: rgba(9, 78, 197, 0.08);
}

.dealership-section .jcs-square-image a {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.dealership-section .jcs-square-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.dealership-section .jcs-square-image .jcs-image-fill {
  object-fit: cover;
  filter: blur(24px);
  opacity: 0.72;
  transform: scale(1.14);
}

.dealership-section .jcs-square-image .jcs-image-main {
  z-index: 1;
  object-fit: contain;
}

.dealership-section .jcs-coach-sales-image .jcs-image-fill {
  opacity: 0.42;
  filter: blur(28px) brightness(0.72) saturate(1.2);
}

.dealership-section .jcs-coach-sales-image .jcs-image-main {
  object-fit: contain;
  object-position: center center;
  transform: none;
}

.dealership-block .inner-box:hover .image-box .jcs-square-image .jcs-image-fill {
  transform: scale(1.2);
}

.dealership-block .inner-box:hover .image-box .jcs-square-image .jcs-image-main {
  transform: scale(1.04);
}

.dealership-block .inner-box:hover .image-box .jcs-coach-sales-image .jcs-image-main {
  transform: none;
}

.dealership-block .inner-box .content-box .title,
.dealership-block .inner-box .content-box .title a {
  color: var(--jcs-navy);
}

.dealership-block .inner-box .content-box .text {
  color: #4F5F70;
  line-height: 1.65;
}

.jcs-icon-badge {
  position: absolute;
  right: 26px;
  bottom: -18px;
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background-color: var(--jcs-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 3px solid #fff;
  box-shadow: 0 10px 22px rgba(5, 11, 32, 0.22);
}

.dealership-block .inner-box .content-box .read-more {
  min-height: 50px;
  border-color: var(--jcs-blue);
  color: #fff;
  background-color: var(--jcs-blue);
  border-radius: 0;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}

.dealership-block .inner-box:hover .content-box .read-more {
  background-color: var(--jcs-navy);
  border-color: var(--jcs-navy);
  color: #fff;
}

.dealership-block .inner-box .content-box .read-more i {
  color: #fff !important;
}

.dealership-block .inner-box:hover .content-box .read-more svg path {
  fill: #fff !important;
}

.dealership-block .inner-box .content-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 32px 28px 28px;
}

.dealership-block .inner-box .content-box .read-more {
  margin-top: auto;
}

.jcs-nav-icon {
  display: none;
}

.mm-panels > .mm-panel .mm-listitem__text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
  line-height: 1.25;
}

.mm-panels > .mm-panel li > a .jcs-nav-icon,
.mm-panels > .mm-panel li > span .jcs-nav-icon,
#navbar.mm-panel li > a .jcs-nav-icon,
#navbar.mm-panel li > span .jcs-nav-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background-color: rgba(18, 130, 214, 0.1);
  color: #094EC5;
  font-size: 15px;
  transform: none !important;
}

.mm-panels > .mm-panel .dropdown .jcs-nav-icon,
#navbar.mm-panel .dropdown .jcs-nav-icon {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background-color: rgba(9, 78, 197, 0.1);
  color: #094EC5;
  font-size: 12px;
}

/* "Get a Quote" is a standalone button on desktop (outside the nav list,
   hidden below 1200px alongside the rest of .right-box - see the
   min-width:1200px rule below that hides its mobile-menu counterpart in
   turn). The mobile menu itself is this mm-menu panel (cloned from
   #navbar and initialized by the "Mobile Navigation" block appended to
   the bottom of assets/boxcar/js/mmenu.js - the custom .jcs-mobile-open
   toggle elsewhere in this file targets the original, still-hidden
   #navbar and has no visible effect once this clone takes over). Give
   its list entry the same solid-blue CTA treatment as the desktop
   button instead of leaving it styled as a plain nav link. */
.mm-panels > .mm-panel .jcs-mobile-quote-item,
#navbar.mm-panel .jcs-mobile-quote-item {
  margin-top: 10px;
  border-top: 2px solid #eee;
  padding-top: 10px;
}

.mm-panels > .mm-panel .jcs-mobile-quote-item > .mm-listitem__text,
#navbar.mm-panel .jcs-mobile-quote-item > .mm-listitem__text {
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #094EC5;
  color: #fff;
  font-weight: 700;
}

.mm-panels > .mm-panel .jcs-mobile-quote-item .jcs-nav-icon,
#navbar.mm-panel .jcs-mobile-quote-item .jcs-nav-icon {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* .logo-inner and its parent .nav-list are both display:flex with no
   align-items set (defaults to stretch), so .logo-inner stretches to
   match the taller nav-out-bar next to it. .logo itself is a plain block,
   so the text inside just sat at the top of that stretched height instead
   of using the extra space - centering it here. */
.hheader-style-v4.v6 .header-inner .c-box .logo-inner {
  align-items: center;
}

/* Text wordmark logo (img/logo.png is a 469x34px flat raster - too low-res
   and too extreme an aspect ratio to size up cleanly in the header, so this
   renders it as real text instead: crisp at any size/zoom, no blur). */
.jcs-text-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

.jcs-text-logo .line1 {
  font-family: var(--title-font);
  font-size: 21px;
  font-weight: 700;
  color: var(--theme-color-dark);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.jcs-text-logo .line2 {
  font-family: var(--title-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--theme-color1);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* Homepage hero decorative graphic -> real JCSS banner image.
   Source image is 1354x1161; the template's box is 946x820 with no
   background-size set, so without this it renders at natural size and
   gets hard-clipped from the top-left corner instead of scaling to fit.
   background-size:contain (not cover) so the full image is always shown,
   never cropped, regardless of how the box gets resized below. */
.boxcar-banner-section-six::before {
  background-image: url(../img/banner/homepagebanner.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
}

/* Hero text/buttons pull from the bus livery in homepagebanner.png instead
   of the template's plain black/white default, so the copy reads as designed
   to sit next to that photo rather than a flat monochrome block beside it. */
:root {
  --jcs-gold: #F2B705;
  --jcs-blue: #094EC5;
  --jcs-navy: #050B20;
}

/* The vendor's h2 default (--h2-font-size, and .boxcar-title h2's own
   hardcoded copy of the same value) is a flat 40px with no responsive
   sizing at any breakpoint. Fine on desktop/tablet, but every section/
   panel heading on the site inherits it as-is - on a phone, a longer one
   like "Yutong, the Leader of China's Bus Industry" wraps to 3 cramped
   lines and dominates its panel. Scoped to the variable (and the one
   selector that bypasses it) so it fixes every heading that relies on
   the default at once, not just the ones already spot-checked. */
@media (max-width: 575.98px) {
  :root {
    --h2-font-size: 28px;
  }

  .boxcar-title h2 {
    font-size: 28px;
  }
}

/* Gold reads fine against the bus photo on narrower breakpoints (see the
   max-width:1199px override below, which keeps it there against that
   layout's dark background), but on desktop this section's own background
   is plain white behind the text column - gold-on-white fails contrast
   badly. Brand blue instead, matching the h1 accent right below it. */
.boxcar-banner-section-six .content-column .inner-column > h1 {
  color: var(--jcs-blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 30px;
  margin-bottom: 20px;
}

@media (max-width: 575.98px) {
  .boxcar-banner-section-six .content-column .inner-column > h1 {
    font-size: 22px;
    margin-bottom: 16px;
  }
}

.boxcar-banner-section-six .content-column .inner-column .jcs-hero-text {
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--theme-color-dark);
}

@media (max-width: 1199px) {
  .boxcar-banner-section-six .content-column .inner-column .jcs-hero-text {
    color: #fff;
  }
}

/* Primary CTA: solid blue fill instead of a plain dark outline */
.boxcar-banner-section-six .content-column .inner-column .btn-box .read-more:first-child {
  background-color: var(--jcs-blue);
  border-color: var(--jcs-blue);
  color: #fff;
}

.boxcar-banner-section-six .content-column .inner-column .btn-box .read-more:first-child svg path {
  fill: #fff;
}

.boxcar-banner-section-six .content-column .inner-column .btn-box .read-more:first-child:hover {
  background-color: var(--jcs-navy);
  border-color: var(--jcs-navy);
}

/* Secondary CTA: gold outline instead of a plain dark outline */
.boxcar-banner-section-six .content-column .inner-column .btn-box .read-more:last-child {
  color: var(--jcs-navy);
  border-color: var(--jcs-gold);
}

.boxcar-banner-section-six .content-column .inner-column .btn-box .read-more:last-child svg path {
  fill: var(--jcs-navy);
}

.boxcar-banner-section-six .content-column .inner-column .btn-box .read-more:last-child:hover {
  background-color: var(--jcs-gold);
  border-color: var(--jcs-gold);
  color: var(--jcs-navy);
}

.boxcar-banner-section-six .content-column .inner-column .btn-box .read-more:last-child:hover svg path {
  fill: var(--jcs-navy);
}

/* "Browse by Bus Type" controls: blue icons/border instead of plain black/grey. */
.boxcar-banner-section-six .content-column .inner-column .right-box .service-list li a {
  border-color: #094ec5;
}

.boxcar-banner-section-six .content-column .inner-column .right-box .service-list li a i {
  color: #fff;
}

.boxcar-banner-section-six .content-column .inner-column .right-box .service-list li a:hover {
  background: var(--jcs-gold);
  border-color: var(--jcs-gold);
  color: var(--jcs-navy);
}

.boxcar-banner-section-six .content-column .inner-column .right-box .service-list li a:hover i {
  color: var(--jcs-navy);
}

/* .inner-column's own width is capped (not just the heading's font-size)
   to keep the text and "browse by bus type" pills clear of the fixed,
   unscaled (946px) hero photo pinned to the section's right edge - the
   gap between the text column and the image's left/diagonal edge shrinks
   as the viewport narrows and disappears by ~1500-1508px without this.
   flex-wrap on the pill list is a second line of defence - if it still
   runs out of room for any reason, pills wrap to a second row instead of
   overlapping the image.

   Scaled with viewport instead of a fixed px value - a fixed max-width
   that was safe at 1725px was still too wide at 1501px, since the gap to
   the (unscaled, fixed-width) image shrinks continuously as the viewport
   narrows. calc() keeps a consistent safety margin from the image at
   every width in this range instead of only the two ends. max(420px, ...)
   floors it so it can never collapse to near-zero/negative even right at
   the 1400px edge. */
@media (min-width: 1400px) {
  .boxcar-banner-section-six .content-column .inner-column {
    max-width: max(420px, calc(100vw - 1000px));
    /* Vendor default is 254px - was the actual source of the leftover
       gap below the hero even after min-height was trimmed, since the
       text column's own flow height (padding + content) already exceeds
       that min-height, making it a no-op. Shrunk to close the gap as much
       as possible per request. */
    padding-bottom: 40px;
  }

  .boxcar-banner-section-six .content-column .inner-column .right-box .service-list {
    flex-wrap: wrap;
    row-gap: 12px;
  }
}

/* Same dead-space problem as the header (see above): --container-width
   (1430px) strands the hero's text column with a growing empty gutter on
   its left as the viewport widens past ~1600px, while the bus photo (which
   isn't container-bound - it's pinned to the section's own right edge)
   already reaches the far right edge. Widening the container here shifts
   the text left, closing that gutter. This is exactly why the max-width
   cap on .inner-column right above was extended past 1725px too - it's
   the only thing standing between the now-wider text column and the
   image's fixed-distance-from-the-right position; without it, a wider
   container would let the column stretch straight into the photo. */
@media (min-width: 1600px) {
  .boxcar-banner-section-six .boxcar-container {
    max-width: min(96vw, 2200px);
  }
}



@media (min-width: 1200px) and (max-width: 1399px) {
  .boxcar-banner-section-six::before {
    transform: scale(0.66);
    transform-origin: top right;
  }

  .boxcar-banner-section-six .content-column .inner-column {
    padding: 160px 0 40px;
    max-width: 540px;
  }

  .boxcar-banner-section-six .content-column .inner-column .right-box .service-list {
    flex-wrap: wrap;
    row-gap: 12px;
  }
}

/* The hero image is position:absolute, so it doesn't add to the section's
   own (in-flow, text-driven) height. Whenever the text stack happens to be
   short enough for a given width/wrap combination, the section's real
   height falls short of the image's bottom edge and the next section
   (opaque background, starts right where this one ends) covers the bottom
   of the photo. Giving the section an explicit min-height that's always >=
   the image's own bottom edge + a small safety margin fixes that
   regardless of exactly how the heading wraps.
   Margin is deliberately thin (a few px, not a real gap) - just enough to
   absorb sub-pixel rounding so the image never gets clipped, per request
   to close this gap as much as possible.
   1200-1399px: image is scaled 0.66-0.85x depending on viewport height
   (823px * 0.85 tallest case = ~697px) -> 701px.
   >=1400px: image is unscaled, 820px tall -> 824px. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .boxcar-banner-section-six {
    min-height: 701px;
  }
}

@media (min-width: 1400px) {
  .boxcar-banner-section-six {
    min-height: 824px;
  }
}

/* The text column's natural (content-driven) height is now well short of
   the section's min-height above - without this, it just sits at the top
   of that taller box (position:relative + a normal block child does not
   stretch or center), dumping all the leftover room as dead space below
   the pills. Centering the row within the section splits that space
   evenly above/below instead, which reads as intentional rather than a
   layout bug. The absolutely-positioned ::before bus photo is unaffected -
   absolutely-positioned pseudo-elements are taken out of flow and aren't
   flex items, so it keeps anchoring to the section's own top-right corner
   exactly as before. */
@media (min-width: 1200px) {
  .boxcar-banner-section-six {
    display: flex;
    align-items: center;
  }

  .boxcar-banner-section-six .boxcar-container {
    width: 100%;
  }
}

/* Hero CTA buttons ("View Our Coaches" / "Contact Us") - the vendor only
   stacks these at max-width:416px. Between there and roughly 500px
   they're still forced side-by-side with not enough room, so the arrow
   icon inside a button wraps onto its own line instead of the whole
   button moving to a new row. Stacking earlier (full width, one per row)
   avoids that squeeze entirely instead of trying to fit two buttons in a
   space that isn't wide enough for both. */
@media (max-width: 991px) {
  .boxcar-banner-section-six .content-column .inner-column .btn-box {
    display: block;
  }

  .boxcar-banner-section-six .content-column .inner-column .btn-box .read-more {
    display: block;
    width: 100%;
    text-align: center;
    margin-right: 0;
    margin-bottom: 15px;
    box-sizing: border-box;
  }
}

/* On shorter viewports (short browser window / laptop screen height) the
   hero image reads as too small at the width-only scale above - bump it
   back up closer to full size there. Scoped to 1200-1399px only - the
   1400-1599px tier no longer scales the image at all (see above), so
   there's nothing to override there any more. */
@media (min-width: 1200px) and (max-width: 1399px) and (max-height: 1600px) {
  .boxcar-banner-section-six::before {
    transform: scale(0.85);
    transform-origin: top right;
  }
}

/* Below 1200px the layout already stacks (text column goes full-width and
   the decorative corner shape has nowhere sensible to sit), so instead of
   just hiding the image, use it as a real full-width background behind
   the hero content, with a dark overlay for legible white text - a
   standard mobile hero-background treatment rather than a shrunk-down
   version of the desktop corner graphic. Boundary is 1199px, not the more
   usual 991px - the image is unscaled between 992-1199px (the scale-down
   tier below only starts at 1200px), so it was dominating almost the
   entire viewport there with no safe room for text at any width. Rather
   than patch that gap in the desktop treatment, this proven mobile
   treatment (which already handles arbitrary widths correctly) now
   covers it too. */
@media (max-width: 1199px) {
  .boxcar-banner-section-six::before {
    display: none;
  }

  .boxcar-banner-section-six {
    background-image: linear-gradient(180deg, rgba(5, 11, 32, 0.42), rgba(5, 11, 32, 0.6)), url(../img/banner/homepagebanner_mobile.png);
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
  }

  /* Bootstrap's own col-lg-7 (58.3% width) only reverts to 100% below its
     992px breakpoint - it has no awareness of our 1199px boundary above.
     So from 992-1199px the text column was still stuck at 58.3% width
     (half-empty, wrapping pill labels early) even though the background
     photo behind it visually spans the full viewport, making it look
     like there was plenty of room going unused. */
  .boxcar-banner-section-six .content-column {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .boxcar-banner-section-six .content-column .inner-column > h1 {
    color: var(--jcs-gold);
  }

  .boxcar-banner-section-six .content-column .inner-column .right-box .boxcar-title.light h6 {
    color: #fff;
  }

  .boxcar-banner-section-six .content-column .inner-column .right-box .service-list li a {
    background-color: #094ec5;
  }
}

/* Fixed 2x2 grid for the 4 bus-type pills instead of letting them
   flex-wrap wherever they happen to fit. Natural flex-wrap only reliably
   lands all 4 in a single row once the column is comfortably wide
   (verified via screenshots: clean single row from ~1900px up) - below
   that it produces different uneven splits depending on the exact width
   (2+1+1 right at 1400px, 3+1 at 1700-1800px, etc, because it's fighting
   the .inner-column max-width cap that protects the text/pills from the
   hero photo). Rather than chase each of those breakpoints individually,
   force the same reliable 2x2 across the whole range where that cap is in
   play, and only let it go to one row once there's genuinely enough room.
   Holds 2 columns down to 325px, below which even two pills side by side
   get too cramped, so it drops to a single stacked column (see further
   down). */
@media (max-width: 1899px) {
  .boxcar-banner-section-six .content-column .inner-column .right-box .service-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .boxcar-banner-section-six .content-column .inner-column .right-box .service-list li {
    margin-right: 0;
  }

  .boxcar-banner-section-six .content-column .inner-column .right-box .service-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
    text-align: center;
  }
}

@media (max-width: 325px) {
  .boxcar-banner-section-six .content-column .inner-column .right-box .service-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1199px) {
  /* The secondary CTA is just a gold outline with dark text - fine on
     the white desktop background, invisible against this dark photo
     overlay. Border stays gold (already reads fine); text/icon go white. */
  .boxcar-banner-section-six .content-column .inner-column .btn-box .read-more:last-child {
    color: #fff;
  }

  .boxcar-banner-section-six .content-column .inner-column .btn-box .read-more:last-child svg path {
    fill: #fff;
  }
}

/* ------------------------------------------------------------------------
   Working mobile nav.
   The vendor template ships mmenu.js but never actually initializes it
   anywhere (no init call in main.js or the original HTML) - clicking the
   hamburger only toggled a class on itself, nothing opened. Separately,
   the template's own "narrow header" treatment (hide decorative hero
   image, hide secondary header items) already kicks in at max-width:1199px.
   Empirically (bisected via headless screenshots), that's also the exact
   point our header content (longer text logo, phone number, CTA button -
   all wider than the original demo's) genuinely stops fitting: below
   1200px the nav-out-bar flex item collapses to 0 width instead of
   wrapping, because the sibling content no longer leaves it room. So we
   reuse the vendor's own 1199px boundary here instead of inventing a new
   one, and add a real click-to-open panel for the nav (the vendor's own
   mmenu.js is never actually initialized anywhere in this template export).
   ------------------------------------------------------------------------ */
@media (max-width: 1199px) {
  .hheader-style-v4.v6 .header-inner .right-box .box-account,
  .hheader-style-v4.v6 .btn {
    display: none !important;
  }

  .hheader-style-v4.v6 .mobile-navigation {
    display: inline-block !important;
  }

  .hheader-style-v4.v6 .nav-out-bar {
    margin-left: auto;
  }

  .hheader-style-v4.v6 .nav-out-bar .navigation {
    display: none;
  }

  .hheader-style-v4.v6 .nav-out-bar .navigation.jcs-mobile-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 12px 24px rgba(5, 11, 32, 0.15);
    padding: 10px 20px 20px;
    margin: 0;
    z-index: 9999;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .hheader-style-v4.v6 .nav-out-bar .navigation.jcs-mobile-open > li {
    float: none;
    display: block;
    margin: 0;
    border-bottom: 2px solid #eee;
  }

  .hheader-style-v4.v6 .nav-out-bar .navigation.jcs-mobile-open > li > a,
  .hheader-style-v4.v6 .nav-out-bar .navigation.jcs-mobile-open > li > span {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    cursor: pointer;
  }

  .hheader-style-v4.v6 .nav-out-bar .navigation.jcs-mobile-open .jcs-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background-color: rgba(18, 130, 214, 0.1);
    color: #094EC5;
    font-size: 15px;
    transform: none !important;
  }

  .hheader-style-v4.v6 .nav-out-bar .navigation.jcs-mobile-open .jcs-nav-chevron {
    margin-left: auto;
    font-size: 12px;
  }

  .hheader-style-v4.v6 .nav-out-bar .navigation.jcs-mobile-open .current-dropdown .dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    margin: 0 0 10px;
    padding: 0 0 0 16px;
    min-width: 0;
    border-radius: 0;
  }

  .hheader-style-v4.v6 .nav-out-bar .navigation.jcs-mobile-open .current-dropdown .dropdown li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }

  .hheader-style-v4.v6 .nav-out-bar .navigation.jcs-mobile-open .current-dropdown .dropdown .jcs-nav-icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 12px;
    background-color: rgba(9, 78, 197, 0.1);
    color: #094EC5;
  }

  .hheader-style-v4.v6 .nav-out-bar .navigation.jcs-mobile-open li.jcs-dropdown-open > .dropdown {
    display: block;
  }
}

@media (min-width: 1200px) {
  .hheader-style-v4.v6 .nav-out-bar .navigation .jcs-mobile-quote-item {
    display: none;
  }
}

@media (min-width: 950px) and (max-width: 1199px) {
  .hheader-style-v4.v6 .header-inner .mobile-navigation svg rect {
    fill: #050B20;
  }
}

/* Footer - the vendor colors ".user-links li a" (an actual link) light
   against the dark v6 footer background, but never touches plain "li"
   text with no <a> - that's the "Get In Touch" widget's street address,
   which was rendering in the browser's dark default text color and was
   essentially invisible against this footer's near-black background. */
.footer-style-five.v6 .links-widget .user-links li {
  color: var(--theme-color-light);
}

/* Icons for the footer link lists. ".style-two" strips the vendor's
   default padding-left/bullet (meant for a plain text list), so each icon
   is laid out inline via flex instead of the vendor's icon variant (which
   assumes a fixed-indent li, not present on style-two). */
.jcs-footer-links li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.jcs-footer-links li a {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}

.jcs-footer-links .fa-solid {
  position: static !important;
  flex: 0 0 16px;
  margin-top: 3px;
  color: var(--jcs-blue);
  font-size: 14px;
  text-align: center;
}

.jcs-footer-links li a .fa-solid {
  margin-top: 0;
}

.jcs-footer-links li a:hover .fa-solid {
  color: inherit;
}

.jcs-footer-address .fa-solid {
  margin-top: 4px;
}

/* The address wraps to three lines, so centering the icon against the
   whole link (the ".jcs-footer-links li a" default) would drift it away
   from the first line - keep it pinned to the top like it was before this
   became a clickable link. */
li.jcs-footer-address a {
  align-items: flex-start;
}

/* Interior-page header band (About Us, and reusable for the other interior
   pages still to come - Yutong, Coaches, Contact). Same flat blue/navy
   gradient as the homepage's "How Can We Help" band, for a consistent
   "blue band" visual language across the site. The header itself is
   position:absolute (see .hheader-style-v4 in the vendor stylesheet) and
   floats over whatever comes first on the page, so padding-top here has
   to clear it the same way the homepage hero's does. */
.jcs-page-header {
  background: linear-gradient(135deg, #094EC5 0%, #0B3A94 45%, #050B20 100%);
  padding: 210px 0 64px;
}

/* Interior-page header hero photo - a real Yutong coach on the right side
   of the .jcs-page-header band, used sitewide on every interior page (About
   Us, Coaches, Contact, Yutong info pages, Presentation, fleet detail
   pages). The homepage hero's bus photo needs an elaborate multi-breakpoint
   scaling system because its section height is text-driven and varies;
   this band's padding is fixed regardless of content, so the image can
   just be absolutely positioned within it without any of that. */
.jcs-page-header-hero {
  position: relative;
  overflow: hidden;
}

.jcs-page-header-hero .boxcar-container {
  position: relative;
  z-index: 1;
}

.jcs-page-header-hero .jcs-page-header-hero-image {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 440px;
  max-width: 30vw;
  height: auto;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .jcs-page-header-hero .jcs-page-header-hero-image {
    display: none;
  }
}

.jcs-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
}

.jcs-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
}

.jcs-breadcrumb li:not(:last-child)::after {
  content: "/";
  color: rgba(255, 255, 255, 0.35);
}

.jcs-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

.jcs-breadcrumb a:hover {
  color: #fff;
}

/* Floor lowered from 34px - fine for short titles ("About Us", "Contact
   Us"), but 34px is a hard floor on every phone regardless of how narrow
   (4vw doesn't overtake it until ~850px viewport width), so a longer
   title like "Advantages Compared With Chinese Competitors" was wrapping
   to 4 cramped lines and dominating the whole header band on a phone. */
.jcs-page-header h1 {
  color: #fff;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  margin: 0 0 12px;
}

.jcs-page-header-text {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.6;
}

/* .cars-section-three already carries rounded corners + a border (reused
   from the homepage's "Our Fleet" band) - on the homepage that reads fine
   because natural section spacing sits above/below it. Here it was
   sitting flush against .jcs-page-header above and .jcs-cta-band below,
   and full-bleed to the viewport edges on the sides, so the rounding had
   no breathing room to actually read as "rounded" - it just looked like
   the corner was getting cut off. Constraining the width and adding
   margin on all sides turns it into an actual floating card. */
.jcs-catalog-section {
  width: min(1560px, calc(100% - 48px));
  margin: 32px auto 64px;
}

@media (max-width: 767.98px) {
  .jcs-catalog-section {
    width: calc(100% - 32px);
    margin: 24px auto 40px;
  }
}

.jcs-catalog-grid {
  display: grid;
  gap: 34px;
}

.jcs-catalog-grid .row {
  row-gap: 34px;
}

/* Group heading (City Buses / Coaches / Mini Coaches) so it's clear which
   category a row of cards belongs to now that they're all shown at once
   instead of behind tabs. */
.jcs-catalog-group-title {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  margin: 0 0 26px;
}

.jcs-catalog-group-title::before {
  content: "";
  flex: 0 0 34px;
  width: 34px;
  height: 6px;
  background-color: var(--jcs-blue);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* Modern vehicle detail pages */
.jcs-vehicle-page-header {
  padding-bottom: 78px;
}

.jcs-vehicle-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 24px;
  margin-bottom: 18px;
  background-color: #fff;
  color: var(--jcs-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.jcs-vehicle-detail {
  background-color: #fff;
  padding: 76px 0 104px;
}

.jcs-vehicle-shell {
  display: grid;
  gap: 34px;
}

.jcs-vehicle-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  gap: 28px;
  align-items: stretch;
}

.jcs-vehicle-gallery,
.jcs-vehicle-summary,
.jcs-vehicle-panel,
.jcs-vehicle-final-cta {
  border: 3px solid rgba(9, 78, 197, 0.2);
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 18px 42px rgba(5, 11, 32, 0.08);
}

.jcs-vehicle-gallery {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px;
}

.jcs-vehicle-main-image {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 2px solid #D7DCE5;
  border-radius: 6px;
  background-color: #F7F9FC;
}

.jcs-vehicle-main-image img,
.jcs-vehicle-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jcs-vehicle-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.jcs-vehicle-thumbs a {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 2px solid #D7DCE5;
  border-radius: 6px;
  background-color: #F7F9FC;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.jcs-vehicle-thumbs a:hover {
  border-color: var(--jcs-blue);
  transform: translateY(-2px);
}

.jcs-vehicle-summary {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background-color: var(--jcs-navy);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.jcs-vehicle-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
  margin-bottom: 26px;
}

.jcs-vehicle-back:hover {
  color: #fff;
}

.jcs-vehicle-summary h2,
.jcs-vehicle-panel h2,
.jcs-vehicle-final-cta h2 {
  color: var(--jcs-navy);
  font-weight: 800;
  margin-bottom: 22px;
}

.jcs-vehicle-summary h2 {
  color: #fff;
}

.jcs-vehicle-stat-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.jcs-vehicle-stat {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 2px 14px;
  align-items: center;
  padding: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.06);
}

.jcs-vehicle-stat i {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: var(--jcs-blue);
  color: #fff;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.jcs-vehicle-stat span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.jcs-vehicle-stat strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.35;
}

.jcs-vehicle-quote,
.jcs-vehicle-final-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 34px;
  border: 2px solid var(--jcs-blue);
  background-color: var(--jcs-blue);
  color: #fff;
  font-weight: 800;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.jcs-vehicle-quote {
  width: 100%;
  margin-top: auto;
}

/* Full-width horizontal bar (Next Vehicle + Browse by Bus Type), sitting
   between the spec table and the final CTA - previously crammed into the
   narrow dark sidebar, moved here so it has room to lay out inline and
   wraps naturally as the viewport narrows instead of always stacking.
   Border/radius and button treatment match the homepage's "Get a Quote"
   card (.boxcar-pricing-section-four .row / .list-style-one) for a
   consistent look sitewide. */
.jcs-vehicle-navigator {
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 28px 34px;
  margin-bottom: 28px;
  background-color: #fff;
  border: 3px solid var(--jcs-blue);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(5, 11, 32, 0.06);
}

.jcs-vehicle-next {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  width: min(100%, 280px);
  padding: 12px 26px;
  border: 0;
  background-color: var(--jcs-blue);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  box-shadow: 0 14px 28px rgba(9, 78, 197, 0.22);
}

.jcs-vehicle-next small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 2px;
}

.jcs-vehicle-next:hover {
  background-color: var(--jcs-navy);
}

.jcs-vehicle-browse-types {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  justify-self: end;
  width: min(100%, 560px);
  gap: 18px;
}

.jcs-vehicle-browse-types h3 {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--jcs-navy);
  margin: 0;
}

/* Grid (not flex-wrap) so every pill in a row is forced to equal width -
   flex-wrap let "Mini Coach"/"School Bus" (longer labels) size wider than
   "City Bus"/"Coach", so the two columns never lined up and, at some
   widths, only the short-label pair fit per row while the long-label ones
   each dropped to a solo row of their own. Collapses straight to a single
   column below 576px instead of allowing that lopsided in-between state. */
.jcs-vehicle-type-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jcs-vehicle-type-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  background-color: var(--jcs-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  box-shadow: 0 10px 20px rgba(9, 78, 197, 0.16);
}

.jcs-vehicle-type-list a i {
  color: #fff;
  font-size: 14px;
}

.jcs-vehicle-type-list a:hover {
  background-color: var(--jcs-navy);
}

@media (max-width: 575.98px) {
  .jcs-vehicle-navigator {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .jcs-vehicle-next {
    width: 100%;
    justify-content: space-between;
  }

  .jcs-vehicle-browse-types {
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-self: stretch;
    width: 100%;
    gap: 12px;
  }

  .jcs-vehicle-browse-types h3 {
    text-align: left;
  }

  .jcs-vehicle-type-list {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .jcs-vehicle-navigator {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px;
  }

  .jcs-vehicle-next {
    width: 100%;
    max-width: 360px;
  }

  .jcs-vehicle-browse-types {
    grid-template-columns: 1fr;
    justify-self: stretch;
    width: 100%;
    gap: 12px;
  }

  .jcs-vehicle-browse-types h3 {
    text-align: left;
  }

  .jcs-vehicle-type-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .jcs-vehicle-type-list a {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 12px;
  }
}

.jcs-vehicle-quote:hover,
.jcs-vehicle-final-cta a:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--jcs-navy);
}

.jcs-vehicle-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.jcs-vehicle-panel {
  padding: 32px;
}

.jcs-vehicle-feature-list {
  display: grid;
  gap: 13px;
  margin: 0;
}

.jcs-vehicle-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #4F5F70;
  line-height: 1.6;
}

.jcs-vehicle-feature-list i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  background-color: var(--jcs-blue);
  color: #fff;
  font-size: 12px;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.jcs-vehicle-glance {
  display: grid;
  gap: 12px;
  margin: 0;
}

.jcs-vehicle-glance div {
  display: grid;
  grid-template-columns: minmax(120px, 0.5fr) 1fr;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #EEF1FB;
}

.jcs-vehicle-glance div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.jcs-vehicle-glance dt {
  color: var(--jcs-navy);
  font-weight: 800;
}

.jcs-vehicle-glance dd {
  margin: 0;
  color: #4F5F70;
  line-height: 1.5;
}

.jcs-vehicle-spec-panel {
  overflow: hidden;
}

.jcs-vehicle-table-wrap {
  overflow-x: auto;
}

.jcs-vehicle-spec-table {
  width: 100%;
  border-collapse: collapse;
}

.jcs-vehicle-spec-table th,
.jcs-vehicle-spec-table td {
  padding: 16px 18px;
  border-bottom: 2px solid #EEF1FB;
  vertical-align: top;
  line-height: 1.55;
}

.jcs-vehicle-spec-table th {
  width: 34%;
  color: var(--jcs-navy);
  font-weight: 800;
  text-align: left;
  background-color: rgba(9, 78, 197, 0.05);
}

.jcs-vehicle-spec-table td {
  color: #4F5F70;
}

.jcs-vehicle-note {
  margin: 18px 0 0;
  color: #6B7785;
  font-size: 14px;
  line-height: 1.6;
}

.jcs-vehicle-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px;
  background: linear-gradient(135deg, #094EC5 0%, #0B3A94 45%, #050B20 100%);
  border-color: rgba(255, 255, 255, 0.18);
}

.jcs-vehicle-final-cta span {
  display: inline-block;
  color: #FFD873;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.jcs-vehicle-final-cta h2 {
  color: #fff;
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .jcs-vehicle-hero-grid,
  .jcs-vehicle-info-grid {
    grid-template-columns: 1fr;
  }

  .jcs-vehicle-summary {
    order: -1;
  }

  .jcs-vehicle-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .jcs-vehicle-detail {
    padding: 52px 0 72px;
  }

  .jcs-vehicle-gallery,
  .jcs-vehicle-summary,
  .jcs-vehicle-panel,
  .jcs-vehicle-final-cta {
    padding: 20px;
  }

  .jcs-vehicle-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jcs-vehicle-glance div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .jcs-vehicle-spec-table th,
  .jcs-vehicle-spec-table td {
    display: block;
    width: 100%;
  }

  .jcs-vehicle-final-cta {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .jcs-page-header {
    padding: 150px 0 48px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  .jcs-vehicle-hero-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.8fr);
    align-items: stretch;
  }

  .jcs-vehicle-summary {
    order: 0;
    height: 100%;
    padding: 22px;
  }

  .jcs-vehicle-gallery {
    height: 100%;
  }

  .jcs-vehicle-summary h2 {
    font-size: 24px;
    margin-bottom: 18px;
  }

  .jcs-vehicle-back {
    margin-bottom: 18px;
  }

  .jcs-vehicle-stat-grid {
    gap: 10px;
    margin-bottom: 20px;
  }

  .jcs-vehicle-stat {
    padding: 12px;
  }

  .jcs-vehicle-quote {
    min-height: 50px;
  }
}

/* Closing CTA band - flat blue/navy gradient, same family as
   .jcs-page-header and .dealership-section, for a page that opens and
   closes on the same "blue band" note. */
.jcs-cta-band {
  background: linear-gradient(135deg, #094EC5 0%, #0B3A94 45%, #050B20 100%);
  padding: 96px 0;
  text-align: center;
}

.jcs-cta-band h2 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  margin: 0 0 16px;
}

.jcs-cta-band p {
  max-width: 620px;
  margin: 0 auto 34px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.6;
}

.jcs-cta-band-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* No unscoped base ".read-more" style exists in the vendor stylesheet -
   every use of that class is styled entirely by its parent section
   selector, so these buttons need their own complete geometry, not just
   color tweaks, to match the site's established button language (angled
   corners via clip-path, 2px border, icon + label). */
.jcs-cta-band-buttons .read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 34px;
  border: 2px solid var(--jcs-blue);
  border-radius: 0;
  background-color: var(--jcs-blue);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.jcs-cta-band-buttons .read-more:hover {
  background-color: var(--jcs-navy);
  border-color: var(--jcs-navy);
  color: #fff;
}

.jcs-cta-band-buttons .read-more svg path {
  fill: #fff;
}

/* Border + clip-path is a bad combination: clip-path only keeps the
   straight (originally-rectangular) segments of the border, so an angled
   trapezoid with a visible outline on all sides isn't possible this way -
   it rendered as a stray horizontal line top and bottom with no visible
   sides at all. Dropping the clip-path here and using a plain rounded
   border instead - the same fallback already used for the homepage
   hero's own secondary/outline button, for the same reason. */
.jcs-cta-band-outline {
  clip-path: none !important;
  border-radius: 12px !important;
  background-color: transparent !important;
  border-color: var(--jcs-gold) !important;
  color: #fff !important;
}

.jcs-cta-band-outline svg path {
  fill: #fff !important;
}

.jcs-cta-band-outline:hover {
  background-color: var(--jcs-gold) !important;
  border-color: var(--jcs-gold) !important;
  color: var(--jcs-navy) !important;
}

.jcs-cta-band-outline:hover svg path {
  fill: var(--jcs-navy) !important;
}

@media (max-width: 575.98px) {
  .jcs-cta-band-buttons {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ------------------------------------------------------------------------
   Contact page. The form itself (#contact-form and everything inside it)
   is the original legacy markup/behavior verbatim - a jQuery plugin
   (js/forms.js) auto-wires validation and the fake-placeholder-via-value
   trick to those exact classes on load, and the submit button calls a
   hand-written AJAX handler that posts straight to
   includes/sendContactEmail.php. None of that was touched; this block
   only gives it a visual skin, since dropping the legacy stylesheet
   (css/style.css etc, replaced by the Boxcar one) left it completely
   unstyled.
   ------------------------------------------------------------------------ */
.jcs-contact-section {
  background-color: #fff;
  padding: 110px 0;
}

.jcs-contact-card {
  background-color: #fff;
  border: 3px solid #094ec5;
  border-radius: 18px;
  padding: 48px;
}

.jcs-contact-info h2,
.jcs-contact-form-wrap h2 {
  color: var(--jcs-navy);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  margin-bottom: 12px;
}

.jcs-contact-info > p,
.jcs-contact-form-wrap > p {
  color: #4F5F70;
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 30px;
}

.jcs-contact-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
}

.jcs-contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.jcs-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background-color: var(--jcs-blue);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 10px 22px rgba(9, 78, 197, 0.24);
}

.jcs-contact-info-list h6 {
  color: var(--jcs-navy);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}

.jcs-contact-info-list .text {
  color: #4F5F70;
  font-size: 15px;
  line-height: 1.6;
}

.jcs-contact-info-list .text a {
  color: #4F5F70;
  text-decoration: none;
}

.jcs-contact-info-list .text a:hover {
  color: var(--jcs-blue);
}

/* Two email addresses used to sit on separate lines with no other visual
   cue that they're distinct entries. A small dot per line makes that
   unambiguous. Built with a manual ::before dot instead of a native
   list-style marker - the surrounding ".jcs-contact-info-list li" rule
   sets display:flex on every <li> including these nested ones, and native
   markers don't reliably render on a flex/list-item element once other
   list-style-position rules are layered on top, so a manual dot is the
   more predictable choice here. */
.jcs-contact-info-list .jcs-email-list {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

.jcs-contact-info-list .jcs-email-list li {
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.jcs-contact-info-list .jcs-email-list li:last-child {
  margin-bottom: 0;
}

.jcs-contact-info-list .jcs-email-list li::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--jcs-blue);
}

@media (min-width: 992px) {
  .jcs-contact-form-wrap {
    padding-left: 48px;
    border-left: 2px solid #EEF1FB;
  }
}

/* Field wrappers - the legacy markup relies on the fake-placeholder trick
   (input value="Name:" etc, swapped for real input on focus by
   forms.js), so there's no separate visible <label> text to style - the
   input itself IS the visible label until focused. */
#contact-form .form-div-1,
#contact-form .form-div-2,
#contact-form .form-div-3,
#contact-form .form-div-4,
#contact-form .form-div-5,
#contact-form > fieldset > div > label.message {
  margin-bottom: 18px;
}

#contact-form label {
  display: block;
  width: 100%;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form select,
#contact-form textarea {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid #E1E1E1;
  border-radius: 8px;
  background-color: #fff;
  color: var(--jcs-navy);
  font-size: 15px;
  font-family: var(--text-font);
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

#contact-form select {
  cursor: pointer;
}

/* The placeholder option is disabled/selected by default (see
   get-a-quote.php) so it behaves like the fake-placeholder text used by
   the other fields here, but a real <select> renders its current value
   in the same text color regardless of whether it's the placeholder or a
   real choice - dim it while the placeholder is still selected so it
   reads the same way the other empty fields do. */
#contact-form select:has(option:checked[value=""]) {
  color: #6c757d;
}

#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: var(--jcs-blue);
}

#contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

#contact-form .error,
#contact-form .empty {
  display: none;
  margin-top: 6px;
  color: #E4483C;
  font-size: 13px;
}

#contact-form .success {
  display: none;
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 8px;
  background-color: rgba(46, 184, 92, 0.12);
  color: #1E8C42;
  font-size: 15px;
}

.jcs-captcha-row {
  margin-bottom: 26px;
}

.jcs-contact-submit .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 40px;
  border: 2px solid var(--jcs-blue);
  background-color: var(--jcs-blue);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.jcs-contact-submit .link:hover {
  background-color: var(--jcs-navy);
  border-color: var(--jcs-navy);
  color: #fff;
}

.jcs-contact-submit .link {
  font-family: inherit;
  font-size: inherit;
}

.jcs-contact-submit .link:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.jcs-contact-submit .link:disabled:hover {
  background-color: var(--jcs-blue);
  border-color: var(--jcs-blue);
}

@media (max-width: 575.98px) {
  .jcs-contact-card {
    padding: 24px;
  }
}

/* Yutong info pages (Introduction, Advantages, Line of Coaches, Vehicle
   Sale, Maintenance, Parts, After Sales Services) - reuses .jcs-vehicle-panel
   card styling from the fleet detail pages for a consistent look. */
.jcs-yutong-section {
  background-color: #fff;
  padding: 76px 0 104px;
}

.jcs-yutong-panel-title {
  color: var(--jcs-navy);
  font-weight: 800;
  margin-bottom: 18px;
}

.jcs-yutong-image {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 2px solid #D7DCE5;
  border-radius: 6px;
  margin-bottom: 18px;
  background-color: #F7F9FC;
}

.jcs-yutong-image img {
  display: block;
  width: 100%;
  height: auto;
}

.jcs-yutong-image-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.jcs-yutong-image-row .jcs-yutong-image {
  margin-bottom: 0;
}

.jcs-yutong-text {
  color: #4F5F70;
  line-height: 1.75;
  margin-bottom: 16px;
}

.jcs-yutong-text:last-child {
  margin-bottom: 0;
}

.jcs-yutong-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--jcs-blue);
  font-weight: 800;
  text-decoration: none;
}

.jcs-yutong-cta:hover {
  color: var(--jcs-navy);
}

@media (max-width: 767.98px) {
  .jcs-yutong-image-row {
    grid-template-columns: 1fr;
  }
}

/* Presentation slide gallery - deliberately its own grid rather than
   reusing .jcs-vehicle-thumbs, which is a small square thumbnail strip
   (1:1 + object-fit:cover) meant to sit under a vehicle hero image. Slides
   are text-heavy 4:3 images, so cropping them to squares made the text
   unreadable until you clicked through one by one. Larger cells, the
   slides' real aspect ratio, and object-fit:contain keep every slide
   fully legible directly in the grid. */
.jcs-presentation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}

.jcs-presentation-grid a {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 2px solid #D7DCE5;
  border-radius: 8px;
  background-color: #fff;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.jcs-presentation-grid a:hover {
  border-color: var(--jcs-blue);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(5, 11, 32, 0.14);
}

.jcs-presentation-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jcs-yutong-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background-color: #f2f6fd;
  border: 1px solid #dbe6fa;
  border-radius: 10px;
  font-size: 15px;
  color: var(--jcs-navy);
}

.jcs-yutong-filter-bar a {
  color: var(--jcs-blue);
  font-weight: 600;
  text-decoration: underline;
}

.jcs-yutong-filter-bar a:hover {
  color: var(--jcs-navy);
}