/* v3 — nav, spec sheets, hover, mobile fixes */
/* Define ALL missing Webflow CSS variables (background images + form icons) */
:root {
  --image-i5cec3e91: url('');
  --image-i49ac18e9: url('/images/slider-bg_1.avif');
  --image-1aca2807: url('/images/harness-dummy_1.webp');
  --image-702792c3: url('/images/geelong-chris-footer_1.webp');
  --image-i47781826: url('/images/persons.svg');
  --image-7561074f: url('/images/geelong_1.webp');
  --image-i70869c0c: url('/images/harness-image_1.webp');
  --image-i76ad8ce7: url('/images/flowbase_wave_1.webp');
  --image-2b4ef110: url('/images/search-2-line.svg');
  --image-i43a4ed66: url('/images/edit.svg');
  --image-6e1152f5: url('/images/external/at-fill.svg');
  --image-4cfbc7db: url('/images/user.svg');
  --image-i46caa7d: url('/images/phone-line.svg');
  --image-i19fde53f: url('/images/geelong-access-servicing_1.avif');
}

/* ── GLOBAL ─────────────────────────────────────────── */
/* overflow-x: clip prevents horizontal scroll WITHOUT creating a scroll container,
   which preserves position:sticky on the desktop nav. */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  overflow-x: clip;
  max-width: 100%;
}

/* ── SEARCH BAR — match live site width ─────────────── */
.wrap-v-x-large {
  width: 100% !important;
}

.hero-search-item.is-v2 {
  width: 100% !important;
  max-width: 750px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.search-input-wrapper.is-relative {
  width: 100%;
}

.search-input-v2.w-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* ── HERO CATEGORY BUTTONS — 4-col grid, equal height ── */
/* Force 4 columns at all sizes above mobile and equal-height cells */
.hero-search-item.is-v2 .grid-three-column.is-v2 {
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: stretch !important;
  height: auto !important;
}

.hero-search-item.is-v2 .footer-icon-block {
  height: 100%;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
}

/* On very small screens (< 480px) collapse to 2 columns */
@media (max-width: 479px) {
  .hero-search-item.is-v2 .grid-three-column.is-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Fix email icon size (was 'auto' which renders full SVG size) */
.contact-field.email {
  background-size: 18px 18px !important;
}

/* Message textarea — keep icon top-aligned so it doesn't appear in the middle */
.contact-field.message {
  background-position: 14px 16px !important;
  padding-top: 16px !important;
}

/* ── VIDEO BACKGROUND ───────────────────────────────── */
.background-video {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   DESKTOP NAV — dropdown behaviour
   ═══════════════════════════════════════════════════════ */

/* All dropdown wrappers need relative positioning */
.nav-dropdown {
  position: relative;
}

/* ── Base dropdown list state (hidden) ── */
.nav-dropdown .w-dropdown-list {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  /* 150ms close delay gives cursor time to travel diagonally to dropdown */
  transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s;
  margin-top: 0;
}

/* Invisible bridge: top guard in case cursor enters via dropdown top edge */
.nav-dropdown .w-dropdown-list::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  height: 20px;
}

/* ── Open state — no delay when opening ── */
.nav-dropdown:hover .w-dropdown-list {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

/* ── Mega-menu hover bridge ──────────────────────────────────────────────
   The Services & Equipment dropdowns use position:fixed, so cursor moving
   from the toggle to the menu briefly leaves the .nav-dropdown element.
   The ::after creates a large fixed-position hit area covering the same
   footprint as the menu. pointer-events are none by default (doesn't block
   page content) and only activate while the toggle is hovered — keeping
   the dropdown open while the cursor travels down into the menu.
   ─────────────────────────────────────────────────────────────────────── */
.dropdown-3.nav-dropdown::after,
.dropdown-services.nav-dropdown::after {
  content: '';
  position: fixed;
  top: var(--nav-bottom, 90px);
  left: 50%;
  transform: translateX(-50%);
  width: min(85rem, calc(100vw - 5rem));
  height: 500px;
  pointer-events: none;
  z-index: 9998;
}
/* Activate bridge while hovered OR during the 150ms close delay */
.dropdown-3.nav-dropdown:hover::after,
.dropdown-services.nav-dropdown:hover::after,
.dropdown-3.nav-dropdown .w-dropdown-list:not([style*="display: none"]):hover ~ .nav-dropdown::after {
  pointer-events: auto;
}

/* ── Dropdown toggles: flex row so text + chevron sit inline ── */
/* Unset Webflow's padding-right (used for abs-positioned chevron) and use flex gap */
.dropdown-toggle.is-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-right: 0 !important;
}
/* Re-position the chevron as a normal flow item, not absolute */
.dropdown-toggle.is-v2 .w-icon-dropdown-toggle {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
}

/* ── Desktop nav link — roll-up text on hover ── */
/* Strategy: first span is in normal flow (sets the height),
   second span is absolutely positioned immediately below.
   clip-path:inset(0) clips children regardless of display type
   (more reliable than overflow:hidden on flex containers). */
.nav-link-roll {
  position: relative;
  display: block;
  clip-path: inset(0);
  line-height: 1;
  text-align: center;
  /* Strip site.css's 8px top/bottom padding from .nav-link — without this
     the padding area is inside the clip boundary and the second (roll-up)
     span is partially visible at rest. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.nav-link-roll > span:first-child {
  display: block;
  transition: transform 0.22s ease;
  white-space: nowrap;
  text-align: center;
}
.nav-link-roll > span:last-child {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  color: #478bcc;
  transition: transform 0.22s ease;
  white-space: nowrap;
  text-align: center;
}
/* On hover: slide both up by one full line.
   Covers: dropdown wrappers, standalone <a> links, and direct .nav-link-roll hover. */
.dropdown-3:hover .nav-link-roll > span,
.dropdown-services:hover .nav-link-roll > span,
.dropdown:hover .nav-link-roll > span,
a:hover .nav-link-roll > span,
.nav-link-roll:hover > span {
  transform: translateY(-100%);
}

/* ── Chevron rotation on hover ── */
.w-icon-dropdown-toggle {
  transition: transform 0.2s ease;
}
.nav-dropdown:hover .w-icon-dropdown-toggle {
  transform: rotate(180deg);
}

/* ── Equipment & Services mega menus ─────────────────
   Both use position:fixed so they span full container
   width regardless of where the toggle sits in the nav.
   top is driven by --nav-bottom CSS var set by useEffect
   in Nav.tsx that measures the actual rendered nav height.
   ─────────────────────────────────────────────────── */
.dropdown-3.nav-dropdown .w-dropdown-list,
.dropdown-services.nav-dropdown .w-dropdown-list {
  position: fixed !important;
  top: var(--nav-bottom, 90px) !important;
  left: 50% !important;
  right: auto !important;
  width: min(85rem, calc(100vw - 5rem)) !important;
  max-width: none !important;
  min-width: unset !important;
  transform: translateX(-50%) translateY(-4px) !important;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  margin-top: 0 !important;
  /* top must never transition — it tracks --nav-bottom which changes on scroll */
  transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s !important;
}

.dropdown-3.nav-dropdown:hover .w-dropdown-list,
.dropdown-services.nav-dropdown:hover .w-dropdown-list {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}

/* ── Useful Links — stretch to full nav height so top:100% is flush with nav bottom ── */
.dropdown.nav-dropdown {
  align-self: stretch;
  display: flex !important;
  align-items: center !important;
}

.dropdown.nav-dropdown .w-dropdown-list {
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  top: 100% !important;
  margin-top: 0 !important;
  min-width: 260px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.dropdown.nav-dropdown:hover .w-dropdown-list {
  transform: translateY(0) !important;
}

/* ── Navigation link blocks: slide "View Range" / "Learn More" on hover ── */
/* Fixed height so dropdown doesn't resize on hover */
.navigation-link-block .navigation-link-2 {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 20px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  margin-top: 6px;
  color: #478bcc !important;
}
.navigation-link-block:hover .navigation-link-2 {
  opacity: 1;
  transform: translateY(0);
}

/* ── Navigation link block hover lift ── */
.navigation-link-block {
  border-radius: 8px;
  transition: background 0.18s ease;
  padding: 10px;
  margin: -10px;
}
.navigation-link-block:hover {
  background: rgba(37, 99, 235, 0.05);
}

/* ═══════════════════════════════════════════════════════
   MOBILE MENU v2 — clean white redesign (mob2-*)
   ═══════════════════════════════════════════════════════ */

.navbar20_component .navbar20_menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #fff;
  overflow: hidden;
  padding: 20px 20px 0;
  flex-direction: column;
}

.navbar20_component.menu-open .navbar20_menu {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Scrollable body — scroll here so footer stays pinned */
.mob2-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar — Chrome/Safari/Edge */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mob2-body::-webkit-scrollbar { display: none; }

/* Sales — blue featured strip */
.mob2-featured {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  margin-bottom: 8px;
  background: #478bcc;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.2px;
}
.mob2-featured:hover { background: #3679b8; color: #fff; }

/* Accordion sections */
.mob2-section {
  border-bottom: 1px solid #e4e4ed;
}
.mob2-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: #1a1f3a;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}
.mob2-toggle svg { color: #888; flex-shrink: 0; }

/* Expanded content */
.mob2-expand {
  padding: 4px 0 12px;
}

/* Equipment links with icon */
.mob2-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: #1a1f3a;
  font-size: 14px;
  font-weight: 600;
}
.mob2-link:last-child { border-bottom: none; }
.mob2-link:hover { color: #478bcc; }
.mob2-link img { opacity: 0.7; flex-shrink: 0; }

/* Flat text links */
.mob2-flat-links {
  display: flex;
  flex-direction: column;
}
.mob2-flat-links a {
  display: block;
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
}
.mob2-flat-links a:last-child { border-bottom: none; }
.mob2-flat-links a:hover { color: #1a1f3a; }

/* Sticky footer CTA */
.mob2-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 0 20px;
  border-top: 1px solid #e4e4ed;
  flex-shrink: 0;
}
.mob2-cta-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  background: #1b2a4a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.mob2-cta-phone:hover { background: #263b5e; color: #fff; }
.mob2-cta-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 10px;
  background: #c45a23;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.mob2-cta-quote:hover { background: #d46833; color: #fff; }

/* Animated hamburger → X button */
.navbar20_menu-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: none !important;
  border: 1px solid #d0d6e2 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  padding: 10px 8px !important;
  margin-left: 0 !important;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  flex-direction: column;
  gap: 5px;
}

/* Animated hamburger bars */
.mob2-hb-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #1b2a4a;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
  pointer-events: none;
}

/* Open state — top/bottom bars rotate to form X, mid bar fades */
.mob2-hamburger.is-open .mob2-hb-top {
  transform: translateY(7px) rotate(45deg);
}
.mob2-hamburger.is-open .mob2-hb-mid {
  opacity: 0;
  transform: scaleX(0);
}
.mob2-hamburger.is-open .mob2-hb-bot {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hide legacy Webflow hamburger bars if they still appear */
.menu-icon4 { display: none !important; }

/* ═══════════════════════════════════════════════════════
   EQUIPMENT & SERVICE CARDS  (About Us, homepage cards)
   ═══════════════════════════════════════════════════════ */
.card_base {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card_base .icon_wrap {
  margin-bottom: 14px;
}

.card_base:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card_base .card_title_wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card_base .card_title_wrap h3 {
  margin-bottom: 0;
}

/* View range / Learn more hint — slide up on hover */
/* Fixed height so cards don't resize on hover */
.card_base .card_title_wrap .view-range-hint,
.navigation-link-block .view-range-hint {
  font-size: 12px;
  font-weight: 600;
  color: #478bcc;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  height: 18px;
  overflow: hidden;
  margin-top: 4px;
}

.card_base:hover .card_title_wrap .view-range-hint,
.navigation-link-block:hover .view-range-hint {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── SWIPER PAGINATION — squared dots ──────────── */
.swiper-pagination-bullet {
  border-radius: 2px !important;
  width: 8px !important;
  height: 8px !important;
  background-color: #c5cdd8 !important;
  opacity: 1 !important;
  transition: width 0.2s ease, background-color 0.2s ease !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1b2a4a !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* ── FAQ ACCORDION ICON ─────────────────────────── */
.accordian-icon-wrapper {
  position: relative;
  flex-shrink: 0;
}

.accordian-icon-wrapper .horizontal-line {
  transition: opacity 0.2s ease;
}

.accordian-icon-wrapper .vertical-line {
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.accordian-icon-wrapper .vertical-line.is-open {
  transform: rotate(90deg);
  opacity: 0;
}

/* ── LOGO CAROUSEL — prevent tall images stretching ── */
.logo-carousel-item img {
  max-width: 60px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── FORM ICON FIXES ────────────────────────────── */
.w-form-done,
.w-form-fail {
  display: none;
}

/* ── CONTACT ICON CONSISTENCY ───────────────────── */
/* All contact-icon-2 children use same sizing */
.contact-icon-2 img {
  width: 24px !important;
  height: 24px !important;
}

/* ── MACHINE FILTER RANGE SLIDER ─────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #2563eb;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  pointer-events: all;
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #2563eb;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ═══════════════════════════════════════════════════════
   STICKY NAV
   ═══════════════════════════════════════════════════════ */
/* Desktop nav sticks; top bar scrolls away */
.navbar.is-v3 {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #fff !important;
}

/* Mobile nav: site.css already sets position:fixed + display:none at correct breakpoint.
   Only override z-index so it stacks above page content. */
.navbar20_component {
  z-index: 1000 !important;
  background: #fff !important;
}
/* Vertically centre ALL items in the mobile nav bar (logo, hamburger, phone button) */
.navbar20_container {
  align-items: center !important;
}
/* Phone button wrapper — ensure it sits as a flex item, not a block-level box */
.navbar20_container .hide-mobile {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
/* Mobile: push page content below the fixed nav so images don't slide behind it */
@media (max-width: 991px) {
  .main-wrapper {
    padding-top: 72px !important;
  }
}

/* ── Hide mobile phone icon button in mobile nav ── */
.phone-mob-menu {
  display: none !important;
}

/* ── Services mega menu: vertical photo cards ── */
.dropdown-services .link-grid-large {
  gap: 2px !important;
}
.dropdown-services .navigation-link-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #fff !important;
  border: 1px solid #e0e4eb !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: none !important;
}
.dropdown-services .navigation-icon-block {
  width: 100% !important;
  height: 150px !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #dce4ef !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.dropdown-services .navigation-icon-block img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0 !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}
.dropdown-services .navigation-link-block:hover .navigation-icon-block img {
  transform: scale(1.05) !important;
}
.dropdown-services .nav-svc-text {
  padding: 12px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex: 1 !important;
}

/* ── Equipment mega menu: center + larger icons ── */
.dropdown-3 .navigation-icon-block {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.dropdown-3 .navigation-icon-block img {
  width: 52px !important;
  height: 52px !important;
}

/* ── Operator banner: center content ── */
.banner-content-wide {
  justify-content: center !important;
  gap: 24px !important;
}

/* ── Category sliders: give each slider section its own pagination ── */
.category-slider-wrap {
  position: relative;
}

/* ── Mobile about-grid: true 2×2 grid, cards at natural height ── */
@media (max-width: 767px) {
  /* Unwrap card_row / card_col_2 so all 4 cards become direct grid items */
  .about-grid .card_row,
  .about-grid .card_col_2 {
    display: contents !important;
  }
}

/* ═══════════════════════════════════════════════════════
   CATEGORY SLIDERS — arrows inline with slides
   ═══════════════════════════════════════════════════════ */
/* All swiper-circle variants absolutely positioned at vertical midpoint */
.position-relative-2 {
  position: relative;
}
/* Arrows sit outside the container in the padding-global gutter (2.5rem each side).
   Swiper fills full container width — no margin — so cards are as wide as possible. */
@media (min-width: 992px) {
  .swiper-circle {
    position: absolute !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    cursor: pointer !important;
  }
  /* prev arrows: pull into the padding-global gutter on the left */
  .swiper-circle-prev,
  .swiper-circle-boom-prev,
  .swiper-circle-scissor-prev {
    left: -2.5rem !important;
  }
  /* next arrows: pull into the padding-global gutter on the right */
  .swiper-circle-next,
  .swiper-circle-boom-next,
  .swiper-circle-scissor-next {
    right: -2.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════
   MACHINE DETAIL TABS — full-width tabs, clean active state
   ═══════════════════════════════════════════════════════ */
.layout508_tabs-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 4px;
  margin-bottom: 0;
  background: #f0f2f5;
  border-radius: 6px 6px 0 0;
  padding: 4px 4px 0;
}
/* Each tab takes equal share of the full width */
.layout508_tab-link {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding: 11px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #666 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px 4px 0 0 !important;
  text-align: center !important;
  transition: color 0.18s ease, background 0.18s ease !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}
.layout508_tab-link:hover {
  color: #1b2a4a !important;
  background: rgba(255,255,255,0.6) !important;
}
.layout508_tab-link.w--current {
  background: #1b2a4a !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.layout508_tabs-content {
  border: 1px solid #e4e4ed;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: #fff;
}
.layout508_tab-pane {
  padding: 16px;
}
/* Mobile: scale down tab buttons so 3 tabs fit on one row */
@media (max-width: 479px) {
  .layout508_tab-link {
    padding: 9px 6px !important;
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   SPEC TABLE — machine spec tables use .datalist class
   with embedded per-machine CSS. We only add a scroll
   container and leave all cell/row styling to the embedded
   <style> blocks so mobile responsiveness is preserved.
   ═══════════════════════════════════════════════════════ */
/* Scroll wrapper — all spec tables scroll horizontally on small screens */
.table-block {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Base table styles — no !important so embedded per-machine CSS can override.
   The embedded <style> blocks define colours/headers but NOT borders or padding
   for regular data cells, so we add those here as a baseline. */
.datalist {
  width: 100%;
  border-collapse: collapse;
}
.datalist td {
  position: relative;
  padding: 8px 12px;
  border: 1px solid #e4e8ef;
  font-size: 13px;
  vertical-align: middle;
}

/* ── MOBILE: LGMG-style 3-column tables (section headers present)
   These tables don't convert td to block in their embedded CSS, causing
   the ::before label to overlap the value inside display:table-cell.
   The ~ sibling combinator targets only data rows that follow a section
   header — i.e. LGMG-style tables — leaving JLG/Skyjack 2-column tables
   (which have their own working mobile CSS) completely unaffected.        */
@media (max-width: 768px) {
  .table-block .datalist tr.section-header ~ tr.data-row {
    display: block;
    border-bottom: 1px solid #e4e8ef;
  }
  .table-block .datalist tr.section-header ~ tr.data-row td {
    display: block;
    position: relative;
    border: none !important;
    border-top: 1px solid #f0f3f8 !important;
    padding: 7px 10px 7px 52% !important;
    text-align: right;
    min-height: 34px;
    line-height: 20px;
    font-size: 12px;
  }
  /* First cell = property name; shown as a compact full-width row header */
  .table-block .datalist tr.section-header ~ tr.data-row td:first-child {
    display: block !important;
    padding: 6px 10px !important;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #1b2a4a;
    background: #f0f3f8 !important;
    text-align: left !important;
    min-height: unset;
    border-top: 2px solid #d8e0ea !important;
  }
  /* Shrink the ::before label to fit in the left 52%, vertically centred */
  .table-block .datalist tr.section-header ~ tr.data-row td:not(:first-child)::before {
    width: calc(48% - 20px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1.3 !important;
  }
  /* For multi-cell section headers (e.g. Measurements | Metric | Imperial),
     hide the secondary column-label cells — only the category name is useful
     on mobile where the layout is already label-per-row.                      */
  .table-block .datalist tr.section-header td:not(:first-child) {
    display: none !important;
  }
  /* Ensure the single remaining section-header cell spans full row width */
  .table-block .datalist tr.section-header td:first-child {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 7px 10px !important;
  }
}

/* ── FOOTER LOGO ── */
.image-3 {
  max-width: 143px !important;
}

/* ═══════════════════════════════════════════════════════
   GOOGLE REVIEWS — sharp edges (no rounded corners)
   ═══════════════════════════════════════════════════════ */
.section_reviews .reviews-grid > div {
  border-radius: 0 !important;
}
.section_reviews {
  border-radius: 0 !important;
}

/* ── Sales page category card hover ── */
.sales-cat-card > div {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sales-cat-card:hover > div {
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  transform: translateY(-3px);
}

/* ═══════════════════════════════════════════════════════
   BUTTON ROLL-UP
   Apply .btn-roll-text class to the text wrapper inside
   any button. Wrap text in two <span>s — first is visible,
   second rolls in on hover with the same colour.
   ═══════════════════════════════════════════════════════ */
.btn-roll-text {
  position: relative;
  display: block;
  clip-path: inset(0);
  line-height: 1;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.btn-roll-text > span:first-child {
  display: block;
  transition: transform 0.22s ease;
  white-space: nowrap;
}
.btn-roll-text > span:last-child {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* inherit keeps colour correct for both primary (white text) and outline buttons */
  color: inherit;
  transition: transform 0.22s ease;
  white-space: nowrap;
}
a:hover .btn-roll-text > span,
button:hover .btn-roll-text > span {
  transform: translateY(-100%);
}

/* ═══════════════════════════════════════════════════════
   LEGAL PAGES — clean header + rich text typography
   ═══════════════════════════════════════════════════════ */
.legal-page-header {
  background: #1b2a4a;
  padding: 56px 0 48px;
}
.legal-page-header h1 {
  color: #fff !important;
  margin: 0 0 8px !important;
}
.legal-page-header .legal-meta {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
}
.legal-page-body {
  padding: 56px 0 80px;
}
.legal-page-body .w-richtext h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1b2a4a;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e4e4ed;
}
.legal-page-body .w-richtext h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1b2a4a;
  margin: 24px 0 8px;
}
.legal-page-body .w-richtext p {
  line-height: 1.75;
  color: #444;
  margin-bottom: 14px;
}
.legal-page-body .w-richtext ul,
.legal-page-body .w-richtext ol {
  padding-left: 24px;
  margin-bottom: 14px;
}
.legal-page-body .w-richtext li {
  line-height: 1.7;
  color: #444;
  margin-bottom: 6px;
}
.legal-page-body .w-richtext a {
  color: #478bcc;
}
.legal-page-body .w-richtext strong {
  color: #1b2a4a;
}

/* ── SALES PAGE V2 ──────────────────────────────────────── */
.sales-v2-hero {
  background: linear-gradient(135deg, #0d1e38 0%, #1b2a4a 100%);
  padding: 64px 0 72px;
  min-height: 52vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.sales-v2-hero::after { display: none; }
/* Right-side equipment image panel */
.sales-v2-hero-img-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 48%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  border-left: 3px solid rgba(71,139,204,0.7);
}
.sales-v2-hero-img-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.sales-v2-hero-img-right::before { display: none; }
.sales-v2-hero-img-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13,30,56,0.45);
  z-index: 1;
}
@media (max-width: 900px) { .sales-v2-hero-img-right { display: none; } }
.sales-v2-hero-inner {
  max-width: 560px;
  position: relative;
  z-index: 1;
  width: 100%;
}
/* Hero h1 — scales up on wider screens */
.sales-v2-hero-inner .heading-style-h1 {
  font-size: 2.6rem;
  line-height: 1.1;
}
@media (min-width: 1100px) { .sales-v2-hero-inner .heading-style-h1 { font-size: 3.1rem; } }
@media (max-width: 600px)  { .sales-v2-hero-inner .heading-style-h1 { font-size: 2rem; } }
.sales-v2-tag {
  display: inline-block;
  background: #478BCC;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 2px;
  margin-bottom: 20px;
}
.sales-v2-hero-sub {
  color: rgba(255,255,255,0.75);
  font-size: 17px;
  line-height: 1.6;
  margin-top: 14px;
  margin-bottom: 24px;
  max-width: 520px;
}
/* Hero stats row */
.sales-v2-hero-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.sales-v2-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sales-v2-hero-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: #478BCC;
  line-height: 1;
}
.sales-v2-hero-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
  letter-spacing: 0.3px;
}
.sales-v2-hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Sub-nav / anchor filter bar */
.sales-v2-subnav {
  background: #fff;
  border-bottom: 2px solid #eee;
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sales-v2-subnav-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sales-v2-subnav-inner::-webkit-scrollbar { display: none; }
.sales-v2-subnav-link {
  display: inline-block;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.sales-v2-subnav-link:hover { color: #1b2a4a; border-bottom-color: #1b2a4a; }
.sales-v2-subnav-cta {
  margin-left: auto;
  color: #478BCC;
}
.sales-v2-subnav-cta:hover { border-bottom-color: #478BCC; }

/* Machine sections */
.sales-v2-section { scroll-margin-top: 60px; }
.sales-v2-section:nth-child(odd) { background: #f8f9fc; }
.sales-v2-section:nth-child(even) { background: #fff; }
.sales-v2-section-head {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sales-v2-section-head-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Icon + title on same row, icon centred with h2 */
.sales-v2-section-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sales-v2-section-icon {
  flex-shrink: 0;
  opacity: 0.9;
}
/* Subtitle indented to clear the icon */
.sales-v2-section-subtitle {
  margin: 0 0 0 79px; /* 65px icon + 14px gap */
}
.sales-v2-viewrange {
  font-size: 13px !important;
  padding: 8px 16px !important;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Google trust badge ─────────────────────────────
   Replaces the old "GEELONG'S BEST RATES" eyebrow on
   the homepage about section.
   ──────────────────────────────────────────────────── */
.google-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #e4e4ed;
  border-radius: 100px;
  padding: 5px 12px 5px 8px;
  margin-bottom: 12px;
}
.gtb-stars {
  font-size: 13px;
  color: #f4b400;
  letter-spacing: 1px;
  line-height: 1;
}
.gtb-text {
  font-size: 12px;
  font-weight: 600;
  color: #444;
  white-space: nowrap;
}
/* Dark background variant — for hero and footer */
.google-trust-badge--dark {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}
.google-trust-badge--dark .gtb-text {
  color: rgba(255,255,255,0.88);
}

/* Footer bottom — logo + badge side by side */
.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-bottom-left .google-trust-badge {
  margin-bottom: 0;
}
.sales-v2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 960px) { .sales-v2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .sales-v2-grid { grid-template-columns: 1fr; } }

/* Machine card */
.sales-v2-card {
  background: #fff;
  border: 1px solid #e4e8ef;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s;
}
.sales-v2-card:hover {
  box-shadow: 0 8px 32px rgba(27,42,74,0.12);
  transform: translateY(-3px);
}
.sales-v2-card-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sales-v2-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  display: block;
  transition: transform 0.4s ease;
}
.sales-v2-card:hover .sales-v2-card-img { transform: scale(1.04); }
.sales-v2-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.sales-v2-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sales-v2-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
}
.sales-v2-type {
  font-size: 12px;
  color: #888;
  font-weight: 500;
}
.sales-v2-card-name {
  font-size: 16px;
  font-weight: 700;
  color: #1b2a4a;
  line-height: 1.35;
  margin: 0;
}
.sales-v2-specs {
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sales-v2-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
}
.sales-v2-spec-row:last-child { border-bottom: none; }
.sales-v2-spec-label { color: #888; font-weight: 500; }
.sales-v2-spec-value { color: #1b2a4a; font-weight: 700; }
.sales-v2-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.sales-v2-btn-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  background: #1b2a4a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
  border: 2px solid #1b2a4a;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.sales-v2-btn-primary:hover { background: #263b5e; border-color: #263b5e; }
.sales-v2-arrow { font-size: 15px; transition: transform 0.2s; }
.sales-v2-btn-primary:hover .sales-v2-arrow { transform: translateX(3px); }
.sales-v2-btn-outline {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  background: transparent;
  color: #1b2a4a;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
  border: 2px solid #1b2a4a;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.sales-v2-btn-outline:hover { background: #1b2a4a; color: #fff; }

/* Benefits */
.sales-v2-benefits { background: #f8f9fc; }
.sales-v2-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 960px) { .sales-v2-benefits-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) { .sales-v2-benefits-grid { grid-template-columns: 1fr !important; } }
.sales-v2-benefit-card {
  background: #fff;
  border: 1px solid #e4e8ef;
  border-radius: 4px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sales-v2-benefit-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(27,42,74,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1b2a4a;
}
.sales-v2-benefit-title {
  font-size: 16px;
  font-weight: 700;
  color: #1b2a4a;
}
.sales-v2-benefit-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Brands strip */
.sales-v2-brands {
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 32px 0;
}
.sales-v2-brands-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 20px;
}
.sales-v2-brands-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.sales-v2-brand-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  opacity: 0.65;
  filter: grayscale(100%);
  transition: opacity 0.2s, filter 0.2s;
}
.sales-v2-brand-logo:hover { opacity: 1; filter: none; }

/* ── LOGO CAROUSEL ANIMATIONS (site-wide) ──────────────── */
.logo-carousel-b {
  will-change: transform;
  animation: logoTopToBottom 32s linear infinite;
}
.logo-carousel-t {
  will-change: transform;
  animation: logoBottomToTop 32s linear infinite;
}
@keyframes logoTopToBottom {
  from { transform: translateY(0%); }
  to   { transform: translateY(-50%); }
}
@keyframes logoBottomToTop {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0%); }
}

/* ── SALES PAGE FAQ — condensed ───────────────────────────── */
.sales-faq .faq-block-3 {
  border-bottom: 1px solid #e8ecf0;
}
.sales-faq .faq-question-wrapper {
  padding: 13px 0 !important;
}
.sales-faq .faq-question-wrapper .heading-style-h4 {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin: 0;
}
.sales-faq .faq-paragraph-5 {
  padding-bottom: 12px;
}
.sales-faq .faq-paragraph-5 .text-size-regular {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}
/* Tighter padding on machine sections */
.sales-v2-section .padding-section-medium {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* ── HERO BUTTON OVERRIDES ─────────────────────────── */
.sales-v2-hero-btns .button-primary-m-2 {
  background: #478bcc !important;
  border-color: #478bcc !important;
  color: #fff !important;
}
.sales-v2-hero-btns .button-primary-m-2:hover {
  background: #3a7ab8 !important;
  border-color: #3a7ab8 !important;
}
.sales-v2-hero-btns .button-outline-m-3 {
  background: transparent !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: #fff !important;
}
.sales-v2-hero-btns .button-outline-m-3:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* ── FAQ MINIMAL LINE ACCORDION ───────────────────── */
/* Cap width and centre — looks better at wide viewports */
.sfaq-list {
  border-top: 1px solid #e0e4ed;
  max-width: 750px;
  margin: 0 auto;
}
.sfaq-row {
  border-bottom: 1px solid #e0e4ed;
}
.sfaq-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 28px;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.sfaq-question {
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  line-height: 1.4;
  transition: color 0.15s;
}
.sfaq-trigger:hover .sfaq-question,
.sfaq-row.is-open .sfaq-question { color: #478bcc; }
.sfaq-icon {
  justify-self: end;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #d0d6e2;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  color: #9aa3b5;
  flex-shrink: 0;
  line-height: 24px;
  user-select: none;
  /* box does NOT rotate — only the inner span does */
  transition: border-color 0.15s, color 0.15s;
}
.sfaq-trigger:hover .sfaq-icon,
.sfaq-row.is-open .sfaq-icon {
  border-color: #478bcc;
  color: #478bcc;
}
/* Only rotate the + character inside */
.sfaq-icon-plus {
  display: block;
  line-height: 1;
  transition: transform 0.25s ease;
}
.sfaq-row.is-open .sfaq-icon-plus {
  transform: rotate(45deg);
}
/* Smooth open/close animation via grid-template-rows trick */
.sfaq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.sfaq-answer-wrap.is-open {
  grid-template-rows: 1fr;
}
.sfaq-answer {
  overflow: hidden;
  padding: 0 4px 0 0;
  font-size: 13px;
  color: #666;
  line-height: 1.7;
  /* small fade-in on top of the height animation */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease 0.05s, transform 0.2s ease 0.05s;
}
.sfaq-answer-wrap.is-open .sfaq-answer {
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 16px;
}
.sfaq-answer p { margin: 0; }

/* ── HOW TO BUY STEPS ─────────────────────────────── */
.sales-steps {
  background: #f4f7fb;
  border-top: 1px solid #e4e8ef;
  border-bottom: 1px solid #e4e8ef;
  padding: 36px 0;
}
.sales-steps-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0 20px;
  align-items: start;
}
.sales-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sales-step-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #478bcc;
}
.sales-step-title {
  font-size: 15px;
  font-weight: 700;
  color: #1b2a4a;
}
.sales-step-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}
.sales-step-divider {
  font-size: 20px;
  color: #c0cad9;
  padding-top: 26px;
  font-weight: 300;
}
@media (max-width: 720px) {
  .sales-steps-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sales-step-divider { display: none; }
}

/* ── BENEFITS → FAQ spacing + divider ─────────────── */
.sales-v2-benefits { padding-bottom: 0 !important; }
/* Halve the benefits section vertical padding */
.sales-v2-benefits .padding-section-medium {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
/* ── FAQ sections — halved padding applied to ALL pages ──────────────────────
   All .section_faq blocks get a top border and 40px vertical padding
   (half of Webflow's ~80px default padding-section-medium).             */
.section_faq,
.section_faq.is-v2 {
  border-top: 1px solid #e4e8ef;
}
.section_faq .padding-global,
.section_faq .padding-section-medium,
.section_faq.is-v2 .padding-global,
.section_faq.is-v2 .padding-section-medium {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* ── Benefits grid — tighter card gap ──────────────── */
.sales-v2-benefits-grid {
  gap: 12px !important;
}

/* ── MID-PAGE CTA BREAK ────────────────────────────── */
.sales-cta-break {
  background-image: url('/images/327751738_857344031990299_2434154220334614052_n_1.avif');
  background-size: cover;
  background-position: center 30%;
  position: relative;
}
.sales-cta-break-overlay {
  background: rgba(13,30,56,0.82);
  padding: 80px 0;
}
.sales-cta-break-inner {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.sales-cta-break-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #478bcc;
  margin-bottom: 12px;
}
.sales-cta-break-heading {
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 16px;
}
.sales-cta-break-sub {
  color: rgba(255,255,255,0.75);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 32px;
}
.sales-cta-break-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.sales-cta-break .button-outline-m-3 {
  border-color: rgba(255,255,255,0.55) !important;
  color: #fff !important;
  background: transparent !important;
}
.sales-cta-break .button-outline-m-3:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
@media (max-width: 600px) {
  .sales-cta-break-heading { font-size: 2rem; }
  .sales-cta-break-btns { flex-direction: column; align-items: center; }
}

/* ── FIX: Sales nav link — dark by default, blue only on hover roll-up ──
   Global a { color: var(--steel-blue) } in site.css turns ALL bare <a> tags
   blue. The Sales link uses w-inline-block (not w-nav-link) so it inherits
   that rule. Override it here so the first (visible) span is dark navy; the
   second span is already blue via .nav-link-roll > span:last-child and only
   shows on hover via the roll-up transform. */
.nav-links-list a.w-inline-block {
  color: #1b2a4a !important;
}

/* ── FIX: Homepage service cards — bigger icons, clean card style ──
   site.css sets border: 1px solid #e4e4ed and box-shadow: 7px 7px 55px #f2f3f6
   on .card_base. Remove the border and replace the heavy shadow with a lighter
   one, but keep white background so cards stand out from the grey section bg. */
.about-grid .card_base {
  border: none !important;
  box-shadow: 0 2px 12px rgba(27,42,74,0.07) !important;
  border-radius: 0 !important;
  background-color: #fff !important;
}
.about-grid .card_base:hover {
  box-shadow: 0 8px 24px rgba(27,42,74,0.12) !important;
}
.about-grid .card_base .icon_wrap img {
  width: 80px !important;
  height: 80px !important;
}

/* ── FIX: Services & Equipment dropdown — full-height hover trigger ──
   align-self: stretch makes the dropdown wrapper span the full nav bar
   height, so hovering anywhere in that column height opens the menu.
   Without this the trigger is only as tall as the text "Services" or
   "Equipment", making it easy to accidentally close the dropdown. */
.dropdown-services.nav-dropdown,
.dropdown-3.nav-dropdown {
  align-self: stretch;
  display: flex !important;
  align-items: center !important;
}

/* ── FIX: Disable the 500px hover bridge — it kept the dropdown open
   far below the visible menu. The position:fixed dropdown is a DOM child
   of .nav-dropdown so hovering it naturally keeps the parent hover state
   active. The 150ms close delay + ::before guard on .w-dropdown-list
   handle the brief cursor-travel gap adequately. */
.dropdown-3.nav-dropdown::after,
.dropdown-services.nav-dropdown::after {
  display: none !important;
}

/* ── MACHINE GRID CARD — white image background, no rounded corners,
   grey divider below title, spacing fixes ── */
.machinecontainer .image-45 {
  background: #fff !important;
  border-radius: 0 !important;
}
/* Override Webflow .w-input height on the machine grid search bar.
   Inline styles cannot win against !important rules in stylesheets. */
.filter_search-field.w-input {
  height: 44px !important;
  min-height: 0 !important;
  line-height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}
/* Breathing room between image bottom and title */
.job-item-main-content {
  padding-top: 12px !important;
}
/* Grey divider below title — more space before stats */
.job-item-name-block {
  border-bottom: 1px solid #e4e8ef;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

/* ── FORKLIFT RICH TEXT — styled body content ── */
.forklift-richtext h2,
.white-block .w-richtext h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1b2a4a !important;
  margin: 28px 0 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #e4e8ef !important;
}
.forklift-richtext h3,
.white-block .w-richtext h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1b2a4a !important;
  margin: 20px 0 8px !important;
}
.forklift-richtext p,
.white-block .w-richtext p {
  line-height: 1.75 !important;
  color: #444 !important;
  margin-bottom: 12px !important;
}
.forklift-richtext ul,
.forklift-richtext ol,
.white-block .w-richtext ul,
.white-block .w-richtext ol {
  padding-left: 22px !important;
  margin-bottom: 12px !important;
}
.forklift-richtext li,
.white-block .w-richtext li {
  line-height: 1.7 !important;
  color: #444 !important;
  margin-bottom: 4px !important;
}
.forklift-richtext strong,
.white-block .w-richtext strong {
  color: #1b2a4a !important;
}
.white-block {
  padding: 28px !important;
  background: #fff !important;
  border: 1px solid #e4e8ef !important;
}

/* ── MOBILE FILTER DRAWER — slide-in animation ── */
@keyframes mgSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════
   STICKY SIDEBAR — machine & forklift detail pages
   ═══════════════════════════════════════════════════════ */
/* site.css sets .grid-3 { align-items: start } which collapses the
   sidebar column to the card's own height, making position:sticky
   have no room to operate. Override the sidebar column to stretch so
   it matches the main content column height. The sticky card then
   "floats" within that tall column as the user scrolls. */
.detail-sidebar-col {
  align-self: stretch !important;
}
/* The inner card stays fixed at the top while the user scrolls */
.detail-sidebar-sticky {
  position: sticky;
  top: 110px; /* nav height ~90px + 20px breathing room */
}

/* ═══════════════════════════════════════════════════════
   SPEC TABLE TAB — reduced padding, no inner white-block
   ═══════════════════════════════════════════════════════ */
/* The spec table sits directly in the tab pane — give it a modest
   inset padding so the table doesn't hard-clip at the border,
   while avoiding the old double-box (white-block inside pane). */
.spec-tab-pane {
  padding: 16px !important;
}
.spec-tab-pane .table-block {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}
/* Forklift spec tab (ForkliftDetailTabs) — tighter padding so the table fills width */
.forklift-spec-pane {
  padding: 12px !important;
}

/* ═══════════════════════════════════════════════════════
   MARKDOWN TABLES — forklift richtext body content
   Applies to the 2-column Spec/Value tables rendered from
   markdown by 'marked' inside ForkliftDetailTabs / white-block
   ═══════════════════════════════════════════════════════ */
.forklift-richtext table {
  width: 100%;
  box-sizing: border-box;
  border-collapse: collapse;
  font-size: 14px;
  margin: 12px 0 20px;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.forklift-richtext table thead th {
  background: #1b2a4a !important;
  color: #fff !important;
  padding: 10px 14px !important;
  text-align: left !important;
  font-weight: 600 !important;
  border: 1px solid #1b2a4a !important;
}
.forklift-richtext table tbody td {
  padding: 9px 14px !important;
  border: 1px solid #e4e4ed !important;
  color: #333 !important;
  vertical-align: top;
}
.forklift-richtext table tbody tr:nth-child(even) td {
  background: #f8f9fb !important;
}

/* The datalist embedded CSS handles mobile responsive display;
   no additional overrides needed here. */

/* ═══════════════════════════════════════════════════════
   MOBILE MENU v32 — 2×2 card grids, brands, newsletter
   ═══════════════════════════════════════════════════════ */

/* .mob2-hamburger — styles live in the hamburger animation block above */

/* ─── Phone icon-only button (mobile nav, left of hamburger) ─── */
.mob-tel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #d0d6e2;
  border-radius: 0;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 0;
}
/* Desktop: hide the phone icon-only btn */
@media (min-width: 992px) {
  .mob-tel-icon { display: none !important; }
}

/* Space between phone icon and hamburger on mobile */
@media (max-width: 991px) {
  .navbar20_wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
}

/* Full blue phone button: hide on mobile, show on desktop */
.mob2-desktop-only { display: none !important; }
@media (min-width: 992px) {
  .mob2-desktop-only { display: inline-flex !important; }
}

/* ── 2×2 card grid ── */
.mob2-card-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px;
  padding: 8px 0 12px;
}

/* Image card (Services) */
.mob2-card-img {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e8ef;
  text-decoration: none;
  color: #1b2a4a;
  transition: opacity 0.15s;
}
.mob2-card-img:hover { opacity: 0.85; }
.mob2-card-img span {
  display: block;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #1b2a4a;
}

/* Icon card (Equipment) */
.mob2-card-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 8px 12px;
  background: #fff;
  border: 1px solid #e4e8ef;
  text-decoration: none;
  color: #1b2a4a;
  transition: background 0.15s;
}
.mob2-card-icon:hover { background: #f0f4fa; }
.mob2-card-icon span {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  color: #1b2a4a;
}

/* ── Brands grid — colour logos on light background ── */
.mob2-brands {
  padding: 14px 0;
  border-top: 1px solid #e4e8ef;
  border-bottom: 1px solid #e4e8ef;
}
.mob2-brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 16px;
  align-items: center;
  justify-items: center;
}
.mob2-brands-grid img {
  max-width: 100%;
  height: 26px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.mob2-brands-grid img:hover { opacity: 1; }

/* ── Stay In Touch newsletter ── */
.mob2-newsletter {
  padding: 16px;
  border-top: 1px solid #e4e8ef;
  background: #f0f4fa;
}
.mob2-newsletter-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #1b2a4a;
  margin-bottom: 6px;
}
.mob2-newsletter-text {
  font-size: 12px;
  color: #6b7790;
  margin: 0 0 10px;
  line-height: 1.4;
}
.mob2-newsletter-form {
  display: flex;
  gap: 6px;
}
.mob2-newsletter-input {
  flex: 1;
  padding: 9px 12px;
  font-size: 13px;
  border: 1px solid #c5cdd8;
  border-radius: 0;
  outline: none;
  background: #fff;
  color: #1b2a4a;
  font-family: inherit;
}
.mob2-newsletter-input:focus { border-color: #478bcc; }
.mob2-newsletter-btn {
  padding: 9px 14px;
  background: #1b2a4a;
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.15s;
}
.mob2-newsletter-btn:hover { background: #243a62; }

/* ── Get In Touch contact block ── */
.mob2-contact {
  padding: 16px;
  border-top: 1px solid #e4e8ef;
}
.mob2-contact-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #6b7790;
  margin-bottom: 10px;
}
.mob2-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #1b2a4a;
  text-decoration: none;
  margin-bottom: 8px;
  line-height: 1.4;
}
.mob2-contact-row svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #478bcc;
}
a.mob2-contact-row:hover { color: #478bcc; }

/* ═══════════════════════════════════════════════════════
   MOBILE v35 — layout, overflow, card sizes, img-first
   ═══════════════════════════════════════════════════════ */

/* Prevent horizontal pan in mobile menu */
.navbar20_component .navbar20_menu {
  overflow-x: hidden !important;
}
.mob2-body {
  overflow-x: hidden !important;
}

/* No border-radius on mobile menu or its container */
.navbar20_component .navbar20_menu,
.navbar20_component .navbar20_container,
.navbar20_component { border-radius: 0 !important; }

/* Extra bottom padding so Chrome URL bar can't obscure content */
.mob2-body {
  padding-bottom: max(64px, env(safe-area-inset-bottom, 64px));
}

/* ── About-grid cards — compact layout on mobile ── */
@media (max-width: 767px) {
  /* 2-column grid; default stretch = paired cards match each other's height */
  .about-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  /* Override the 80px desktop rule with matching specificity */
  .about-grid .card_base .icon_wrap img {
    width: 45px !important;
    height: 45px !important;
  }
  .about-grid .icon_wrap {
    margin-bottom: 6px !important;
  }
  .about-grid .text-size-medium {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .about-grid .text-size-regular {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .about-grid .card_base {
    min-height: 0 !important;
    padding: 12px 10px !important;
  }
  /* Hide the hover-only "View Range →" hint — no hover on mobile */
  .about-grid .card_title_wrap .view-range-hint {
    display: none !important;
  }
}

/* ── Hero icon cards — tighter on mobile so text fits on one line ── */
@media (max-width: 767px) {
  .hero-search-item .footer-icon-block {
    padding: 10px 4px !important;
  }
  .hero-search-item .footer-icon-block div {
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }
  .hero-search-item .hero-icon {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ── USP checklist — tighter on mobile so all items fit on one line ── */
@media (max-width: 767px) {
  .c02_check {
    margin-bottom: 8px !important;
    align-items: center !important;
  }
  .c02_check .check-icon {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    flex-shrink: 0;
  }
  .c02_check_text {
    font-size: 14.5px !important;
    line-height: 1.35 !important;
  }
}

/* ── Image-first layout on mobile (Expertise, Short & Long Term) ── */
/* Image is last child in DOM — force it to row 1 on tablet/mobile */
@media (max-width: 991px) {
  .mob-img-first {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .mob-img-first > *:last-child {
    grid-row: 1 !important;
    width: 100% !important;
  }
  .mob-img-first > *:first-child {
    grid-row: 2 !important;
  }
}

/* ── Forklifts / Telehandlers page — 4-column grid on desktop ── */
/* The standard machinegridcms is 3-col at >991px. Add a variant for 4-col.   */
@media (min-width: 992px) {
  .machinegridcms--4col {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  .machinegridcms--4col {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

/* ── Remove double horizontal padding in .section_about on small mobile ── */
/* .section_about already has padding-global inside it — site.css adds an extra  */
/* padding-left/right: 1rem on the section itself at ≤479px which double-insets  */
/* the content. Zero it out so only padding-global provides the horizontal gap.   */
@media (max-width: 479px) {
  .section_about {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── FORKLIFTS PAGE — "Is Long-Term Hire Right?" dark section responsive ──
   On mobile: outer 1fr/2fr split → single column; inner 1fr/1fr list → single column */
@media (max-width: 767px) {
  .flt-usecase-outer {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .flt-usecase-inner {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}