.hero-slider h2,
.hero-slider h1,
.hero-slider h3,
.hero-slider h4,
.hero-slider p {
  margin: 0
}
.hero-slider .uk-light {
  color: #fff
}
.hero-panel {
  z-index: 2;
}

/*
  Navigation: Suzuki's horizontal rail rather than round dots.

  Their values, from suzuki.com.au's .slick-scroll-bar--flex-dots — 38x3px
  bars, 13px apart, centred, inactive in #b8b8b8 and the current one in the
  deep green-black #0e2c29 they use for it.

  These rules cannot be scoped: UIkit's `uk-slider-nav` builds its own
  <li><a> markup at runtime, and those nodes never receive a scoped
  component's data attribute.
*/
.hero-slider .uk-slider-nav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 13px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 5;
}
.hero-slider .uk-slider-nav > * {
  padding-left: 0;
}

/*
  Written against `.uk-dotnav > * > *` as well as the element, because that is
  the selector UIkit uses to make these round — 10px, 50% radius, 1px border.
  Matching its shape and beating its specificity is what keeps the bars square.
*/
.hero-slider .uk-slider-nav li a,
.hero-slider .uk-slider-nav.uk-dotnav > * > * {
  display: block;
  width: 38px;
  height: 5px;
  border: none;
  border-radius: 0;
  background-color: #b8b8b8;
  transition: background-color 0.2s ease-in-out;
}
.hero-slider .uk-slider-nav li a:hover,
.hero-slider .uk-slider-nav li a:focus {
  background-color: #8f8f8f;
}
.hero-slider .uk-slider-nav li.uk-active a,
.hero-slider .uk-slider-nav.uk-dotnav > .uk-active > * {
  background-color: #0e2c29;
  transform: none;
}


/* Slider item styling */
.uk-slider-items[data-v-788f743a] {
  margin-left: 0;
}

/* Full-bleed: one slide spans the whole viewport, edge to edge, the way the
   OEM runs its own campaign banners. The card treatment this replaced — 4/5
   width, 10px gutter, rounded corners, drop shadow, hover lift — only made
   sense while neighbouring slides were peeking in beside the active one. */
.uk-slider-items > div[data-v-788f743a] {
  padding: 0;
}
.uk-panel[data-v-788f743a] {
  overflow: hidden;
  /* The copy block below positions against this. */
  position: relative;
}

/* Slide content styling */
/*
  Full width at the artwork's own 2280x1600 (1.425:1) would make the hero
  ~1350px tall on a 1920 screen — taller than the viewport, which would put
  the CTA we just moved to the bottom below the fold on load. So desktop
  crops to a 2:1 letterbox (media query below).

  How 2:1 was chosen rather than guessed: Suzuki burns campaign copy into
  several of these banners, and on those the artwork is only used between
  19.8% and 81.2% of frame height — roughly a fifth of clear margin top and
  bottom. That tolerates a symmetric crop down to about 2.3:1 before the
  copy starts getting clipped. 2:1 keeps ~5% in hand, which leaves room for
  next month's campaign to be composed a little tighter without breaking.
  The photography-only slides carry no text and crop freely.

  Go past ~2.2:1 and you start cutting into Suzuki's own headlines —
  re-measure the artwork first.
*/
.slide-image[data-v-788f743a] {
  display: block;
  width: 100%;
  height: auto;
}

/* Keyed off vw, not vh, so the hero keeps one predictable shape instead of
   changing ratio with window height. Mobile is left uncropped: that artwork
   is a separate near-square asset (1280x1380) meant to be seen whole. */
@media (min-width: 960px) {
.slide-image[data-v-788f743a] {
    max-height: 50vw; /* 2:1 — read the note above before changing */
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
}

/* Copy, sub-copy and CTA sit at the FOOT of the slide. On the banners that
   carry burned-in copy this also stops the overlaid button landing on top of
   the OEM's own headline, which is what the previous top placement did. */
.slide-copy[data-v-788f743a] {
  padding: 2rem;
  width: 100%;
  z-index: 5;
  /*
    Legibility scrim. The overlay is white text on a white button, and the
    artwork underneath is not reliably dark: the Hybrid banner fades to a pale
    beige band exactly where this block sits, and next month's campaign is
    somebody else's photograph. A gentle bottom-up gradient keeps the copy
    readable over anything without flattening the image.
    Per-slide escape hatch: the `contrast` override (uk-dark over light art).
  */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    rgba(0, 0, 0, 0) 100%
  );
}
.ford-btn[data-v-788f743a] {
  background-color: #066fef;
  color: white;
  transition: background-color 0.3s;
}
.ford-btn[data-v-788f743a]:hover {
  background-color: #0142BE;
  color: white;
}
.white-btn[data-v-788f743a] {
  background-color: white;
  color: #333;
  border: 2px solid transparent;
  padding: 8px 30px;
  font-family: 'SuzukiSlider', sans-serif !important;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  border-radius: 0;
  transition: all 0.3s ease;
  box-shadow: none;
}
.white-btn[data-v-788f743a]:hover {
  background-color: #333;
  color: white;
  border: 2px solid #333;
  transform: none;
  box-shadow: none;
}

/* Suzuki slider text styling */
.uk-heading-medium[data-v-788f743a] {
  font-family: 'SuzukiSlider', sans-serif !important;
  font-weight: 700 !important;
  font-size: 4rem !important;
  letter-spacing: 0.1rem !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
.uk-heading-small[data-v-788f743a] {
  font-family: 'SuzukiSlider', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.85rem !important;
  letter-spacing: 0.05rem !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

/* Override for heading weight */
.uk-text-normal[data-v-788f743a] {
  font-weight: 700 !important;
  font-family: 'SuzukiSlider', sans-serif !important;
}
@media (max-width: 960px) {
.slide-copy[data-v-788f743a] {
    padding: 1rem;
    width: 100%;
}
  
  /*
    No forced height on mobile. The mobile artwork is near-square (1280x1380)
    and designed to be seen whole; the old 600px floor plus object-fit:cover
    cropped the sides off it, which on the banners with burned-in copy meant
    cropping the words. At full width it stands up at its own ratio.
  */
  
  /* Better mobile button styling */
.white-btn[data-v-788f743a] {
    padding: 12px 24px;
    font-size: 0.85rem;
    min-height: 44px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    max-width: 90%;
    margin: 0 auto;
}
  
  /* Responsive Suzuki text styling */
.uk-heading-medium[data-v-788f743a] {
    font-size: 2.5rem !important;
    letter-spacing: 0.05rem !important;
}
.uk-heading-small[data-v-788f743a] {
    font-size: 1.3rem !important;
    letter-spacing: 0.03rem !important;
}
}

/* The circular prev/next buttons these styled are gone — the OEM hero is
   navigated by the bar rail alone. */


/* Overlay styles for non-active slides */
.slide-overlay[data-v-788f743a] {
  opacity: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 10; /* Ensure it's above other elements */
  text-decoration: none;
  display: block;
}

/*
  The dimming and click-to-advance treatment for neighbouring slides is gone
  with the card layout: at full width exactly one slide is on screen, so there
  is no inactive slide to darken, lift or click. The overlay anchor itself is
  left in the markup — it is inert on the active slide (pointer-events: none
  below) and would come back to life if the deck were ever shown multi-up.
*/

/* Hide overlay on active slides */
.uk-slider-items > div.uk-active .slide-overlay[data-v-788f743a] {
  opacity: 0;
  pointer-events: none;
}
.slide-link[data-v-788f743a] {
  z-index: 1;
}


.multi-form .trading-title{
  display: none;
}