/* =============================================
   Bell Equipment – Complete Stylesheet
   Pixel-faithful to live bellequipment.com
   Mobile-first: 640/768/1024/1280px
   ============================================= */

/* =============================================
   STOCK TICKER BAR
   Slim marquee bar above the main header.
   Only rendered when ShowStockTicker is enabled
   on the site settings.
   ============================================= */
.bell-stock-ticker {
  display: flex;
  align-items: stretch;
  height: 36px;
  background: #f0f0f0;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  font-family: var(--font-body, sans-serif);
  font-size: 0.72rem;
  color: #444;
  position: relative;
  z-index: 1001;
}

.bell-stock-ticker__label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--color-primary, #FFC200);
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.bell-stock-ticker__label:hover {
  opacity: 0.85;
  color: #1a1a1a;
  text-decoration: none;
}

.bell-stock-ticker__track-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.bell-stock-ticker__track {
  display: flex;
  width: max-content;
  animation: bell-ticker-scroll 30s linear infinite;
}

.bell-stock-ticker__track:hover {
  animation-play-state: paused;
}

.bell-stock-ticker__item {
  white-space: nowrap;
  padding: 0 var(--space-4);
  padding-right: max(16px, 50vw);
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 36px;
  transition: color 0.15s;
}

.bell-stock-ticker__item:hover {
  color: #000;
  text-decoration: none;
}

.bell-ticker__price {
  color: #1a1a1a;
}

.bell-ticker__up   { color: #2e7d32; }
.bell-ticker__down { color: #c62828; }
.bell-ticker__flat { color: #777;    }

.bell-ticker__pd {
  color: #999;
  font-size: 0.65rem;
}

@keyframes bell-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* On very small screens, hide high/low/volume to keep it readable */
@media (max-width: 479px) {
  .bell-stock-ticker__label { padding: 0 10px; font-size: 0.62rem; }
  .bell-stock-ticker__item  { font-size: 0.68rem; }
}

/* 1. RESET & BASE */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main { flex: 1; }

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

ul, ol { list-style: none; }

/* 2. TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: #1a1a1a;
  line-height: 1.2;
  font-weight: var(--fw-heading, 400);
}
h1 { font-size: var(--fs-h1, 2rem); }
h2 { font-size: var(--fs-h2, 2rem); }
h3 { font-size: var(--fs-h3, 1.75rem); }
body { font-size: var(--fs-body, 1rem); font-weight: var(--fw-body, 400); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

/* ---------- Shared paragraph rhythm ("bell-prose") ----------
   One consistent line-height/paragraph-spacing for body-copy text blocks
   (About, Innovation, Careers, Service detail, News/Bulletin articles,
   Contact feedback, Basic/legal pages). Add .bell-prose to any wrapper
   containing CMS-authored <p> tags instead of setting line-height/margin
   locally — keeps every text-heavy section on the same rhythm.
   !important on line-height guards against inline styles CMS content
   sometimes carries (pasted from Word/Google Docs). */
.bell-prose p {
  line-height: 1.6 !important;
  margin-bottom: var(--space-3);
}
.bell-prose p:last-child { margin-bottom: 0; }

/* 3. CONTAINER */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  width: 100%;
}

@media (min-width: 768px) { .container { padding: 0 var(--space-7); } }
@media (min-width: 1280px) { .container { padding: 0 var(--space-8); } }

/* =============================================
   4. GROUP HEADER — Flex layout
   Logo has margin-bottom: -120px to protrude into the hero below.
   Matches live site: header margin 20px top / 30px bottom.
   ============================================= */

.site-header--group {
  position: relative;
  z-index: 100;
  background: #ffffff;
  overflow: visible;
  margin: 0;
  padding: var(--space-5) 15px 0;
  /* Full-width header; 20px top padding matches live Elementor inner container margin-top */
}

/* ── Desktop: flex row, logo left + right column ── */
@media (min-width: 1024px) {
  .site-header--group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

/* ── Mobile / tablet: compact sticky header ── */
@media (max-width: 1023px) {
  .site-header--group {
    display: flex;
    align-items: center;
    min-height: 64px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 var(--space-3);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  }
}

/* Logo box — left column, 18% wide at desktop */
.header-group__logo-box {
  flex: 0 0 18%;
  max-width: 18%;
  padding-top: 5px;
  position: relative;
  z-index: 2;
}

.header-group__logo-box a {
  display: block;
  text-align: center;
}

.header-group__logo-box img {
  width: 90%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.38);
  display: block;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .header-group__logo-box img {
    margin-bottom: -120px; /* KEY: logo protrudes 120px into hero section */
  }
}

@media (max-width: 1023px) {
  .header-group__logo-box {
    flex: 0 0 auto;
    max-width: none;
    padding-top: var(--space-2);
  }
  .header-group__logo-box img {
    height: 44px;
    width: auto;
    box-shadow: none;
    margin-bottom: 0;
  }
}

/* Right side wrapper: utility row + main nav stacked */
.header-group__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 5px;
}

/* Utility bar (search + links + langs) */
.header-group__utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-5) 0 21px 0;
  gap: var(--space-4);
}

/* Search box */
.header-group__search {
  display: none;
}

@media (min-width: 768px) {
  .header-group__search { display: flex; }
}

.header-group__search form {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 25px;
  overflow: hidden;
  height: 34px;
}

.header-group__search input {
  border: none;
  outline: none;
  padding: 0 15px;
  font-size: 15px;
  width: 180px;
  font-family: var(--font-body);
  color: #333;
}

.header-group__search input::placeholder { color: #999; }

.header-group__search button {
  background: none;
  border: none;
  padding: 0 10px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
}

/* Utility top nav */
.header-group__topnav {
  display: none;
  align-items: center;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .header-group__topnav { display: flex; }
}

.header-group__topnav a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #6e6e6e;
  text-decoration: none;
  white-space: nowrap;
}

.header-group__topnav a:hover { color: var(--color-primary, #FDBA31); }

/* Language links */
.header-group__langs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-group__langs a {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: #010501;
  text-decoration: none;
}

.header-group__langs a.active,
.header-group__langs a:hover {
  color: var(--color-primary, #FDBA31);
}

/* The utility row's actual markup (BELL GROUP / CONTACT US) renders as plain
   Elementor text-editor widgets with no .header-group__topnav class, and the
   theme's ".bell-kit a" rule in group.css loads after this file with equal
   specificity, so it silently wins the base link color on that link unless
   scoped this specifically. Language links keep their original black (from
   .bell-kit a) — only the utility text links get the lighter grey. */
.bell-page.bell-header .bell-el-1ae69ea .bell-widget-text-editor a {
  color: #6e6e6e;
}

.bell-page.bell-header .header-group__langs a.active,
.bell-page.bell-header .header-group__langs a:hover {
  color: var(--color-primary, #FDBA31);
}

/* The language currently in use is shown in grey (marketing request) — declared
   after the hover rule so it wins when the active link is also hovered. */
.header-group__langs a.active,
.bell-page.bell-header .header-group__langs a.active {
  color: #8c8c8c;
}

/* Larger tap targets on touch screens — desktop keeps the tight spacing above */
@media (max-width: 767px) {
  .header-group__langs { gap: 2px; }
  .header-group__langs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: var(--space-1);
  }
}

/* MAIN NAV BAR */
.header-group__mainnav {
  background: #fff;
  padding: 10px 0 2px 0;
  margin-top: 2px; /* 2px gap after utility bar, matching live site */
  /* align-self: stretch (default) — nav spans full right-column width, items left-aligned */
}

.header-group__mainnav ul {
  display: flex;
  align-items: flex-end;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.header-group__mainnav ul li {
  position: relative;
}

.header-group__mainnav ul li a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 1em var(--space-5);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.header-group__mainnav ul li a:hover,
.header-group__mainnav ul li.active a {
  color: #FDBA31;
}

/* Mobile hamburger */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #1A1A1A;
  flex-shrink: 0;
  position: absolute;
  top: 14px;
  right: 16px;
}

.nav-toggle--white { color: #fff; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background 0.3s;
}
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s;
}
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after  { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: rotate(-45deg) translate(5px,-5px); }

/* =============================================
   5. DARK / SUB-SITE HEADER (Mining, Forestry, etc.)
   ============================================= */

.site-header--dark {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #1A1A1A;
  color: #fff;
}

/* TOP ROW */
.header-dark__top {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: var(--space-2) var(--space-5);
  gap: var(--space-3);
}

/* Logo */
.header-dark__logo {
  flex-shrink: 0;
  margin-right: auto;
}

.header-dark__logo img {
  height: 44px;
  width: auto;
}

/* Right group */
.header-dark__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Social icons */
.header-dark__social {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.7);
}

@media (min-width: 1024px) {
  .header-dark__social { display: flex; }
}

.header-dark__social a {
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.header-dark__social a:hover { color: var(--color-primary, #FFC200); }

.header-dark__social-sep {
  color: rgba(255,255,255,0.3);
  margin: 0 2px;
}

/* Search */
.header-dark__search {
  display: none;
}

@media (min-width: 768px) {
  .header-dark__search { display: flex; }
}

.header-dark__search form {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 2px;
  overflow: hidden;
  height: 28px;
}

.header-dark__search input {
  background: transparent;
  border: none;
  outline: none;
  padding: 0 10px;
  font-size: 12px;
  width: 140px;
  font-family: var(--font-body);
  color: #fff;
}

.header-dark__search input::placeholder { color: rgba(255,255,255,0.5); }

.header-dark__search button {
  background: none;
  border: none;
  padding: 0 var(--space-2);
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
}

/* Top nav links */
.header-dark__topnav {
  display: none;
  align-items: center;
  gap: 14px;
}

@media (min-width: 768px) {
  .header-dark__topnav { display: flex; }
}

.header-dark__topnav a {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.header-dark__topnav a:hover { color: var(--color-primary, #FFC200); }

/* Language links */
.header-dark__langs {
  display: flex;
  align-items: center;
  gap: 5px;
}

.header-dark__langs a {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}

.header-dark__langs a.active { color: var(--color-primary, #FFC200); font-weight: 800; }
.header-dark__langs a:hover { color: var(--color-primary, #FFC200); }

/* BOTTOM NAV BAR + REGION */
.header-dark__bottom {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: #1A1A1A;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 0 var(--space-5);
}

@media (min-width: 1024px) {
  .header-dark__bottom { display: flex; }
}

/* Main nav */
.header-dark__mainnav ul {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.header-dark__mainnav ul li {
  position: relative;
}

.header-dark__mainnav ul li a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 14px var(--space-4);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.header-dark__mainnav ul li a:hover,
.header-dark__mainnav ul li.active a {
  color: var(--nav-hover-text, #FFC200);
  border-bottom-color: var(--nav-hover-text, #FFC200);
}

/* Region dropdown */
.header-dark__region {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-primary, #FFC200);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Chevron */
.chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  flex-shrink: 0;
}

/* Dropdown menus */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  width: max-content;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-top: 3px solid var(--color-primary, #FFC200);
  border-radius: 0 0 4px 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  z-index: 200;
}

.nav-dropdown--dark {
  background: #2a2a2a;
}

.has-dropdown:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown ul { padding: var(--space-2) 0; list-style: none; }

.nav-dropdown ul li a {
  display: block;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #333;
  border-bottom: none !important;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.nav-dropdown ul li a:hover {
  background: #f5f5f5;
  color: var(--color-primary, #FFC200);
}

.nav-dropdown--dark ul li a {
  color: rgba(255,255,255,0.85);
}

.nav-dropdown--dark ul li a:hover {
  background: rgba(255,255,255,0.08);
  color: var(--color-primary, #FFC200);
}

/* Group header nav — configurable colours (overrides group.css hardcoded values) */
.bell-nav-item { color: var(--nav-text, #000000) !important; }

.bell-nav-item:hover,
.bell-nav-item:focus,
.bell-nav-item.bell-nav-item-active { color: var(--nav-hover-text, #FFC200) !important; }

/* Dropdown panel */
.bell-nav-dropdown { background-color: var(--nav-dropdown-bg, #ffffff) !important; }
.bell-nav-dropdown a { color: var(--nav-dropdown-text, #33373d) !important; }

/* Group header nav dropdown — show on hover (replaces Elementor JS) */
.bell-nav-menu .menu-item-has-children {
  position: relative;
}

.bell-nav-menu .menu-item-has-children:hover > ul {
  display: block;
  width: max-content;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-top: 3px solid var(--color-primary, #FFC200);
  border-radius: 0 0 4px 4px;
  z-index: 200;
  padding: var(--space-2) 0 !important;
}

.bell-nav-menu .menu-item-has-children > ul li a {
  display: block;
  padding: 0.6rem 1.2rem;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  background-color: var(--nav-dropdown-bg, #ffffff) !important;
  color: var(--nav-dropdown-text, #33373d) !important;
}

.bell-nav-menu .menu-item-has-children > ul li a:hover,
.bell-nav-dropdown .bell-nav-item:hover,
.bell-nav-dropdown .bell-nav-sub-item:hover {
  background-color: var(--nav-dropdown-hover-bg, #f5f5f5) !important;
  color: var(--nav-dropdown-hover-text, #FFC200) !important;
}

/* 3rd-level+ flyout — appears to the right of 2nd-level items */
.bell-nav-menu .menu-item-has-flyout {
  position: relative !important;
}
.bell-nav-menu .menu-item-has-flyout > .bell-nav-flyout {
  display: none;
  position: absolute;
  left: 100%;
  top: 0 !important;
  background-color: var(--nav-dropdown-bg, #ffffff);
  box-shadow: 4px 8px 24px rgba(0,0,0,0.15);
  border-left: 3px solid var(--color-primary, #FFC200);
  border-radius: 0 4px 4px 4px;
  z-index: 201;
  width: max-content;
  min-width: 180px;
  list-style: none;
  padding: var(--space-2) 0;
  margin: 0;
}
/* Invisible bridge to the left — keeps :hover active during diagonal mouse movement */
.bell-nav-menu .menu-item-has-flyout > .bell-nav-flyout::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 12px;
}
.bell-nav-menu .menu-item-has-flyout:hover > .bell-nav-flyout {
  display: block !important;
}
/* Right-arrow indicator on items that have a flyout */
.bell-nav-flyout-indicator {
  float: right;
  margin-left: var(--space-3);
  font-style: normal;
  opacity: 0.55;
  line-height: inherit;
}
/* Flyout items use the same link style as dropdown items */
.bell-nav-flyout li a {
  display: block;
  padding: 0.6rem 1.2rem;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  background-color: var(--nav-dropdown-bg, #ffffff) !important;
  color: var(--nav-dropdown-text, #33373d) !important;
}
.bell-nav-flyout li a:hover {
  background-color: var(--nav-dropdown-hover-bg, #f5f5f5) !important;
  color: var(--nav-dropdown-hover-text, #FFC200) !important;
}
/* Breadcrumb "trail" — keep ancestor items in the drill-down path shaded
   grey while a deeper flyout column is open, so the whole selected path
   (e.g. JCB > Construction > Excavators) stays visible while browsing.
   :not(:hover) excludes the exact item under the pointer (which still
   gets the themed hover colour above) from the plain :hover match, since
   an <li>'s :hover is also true when the mouse is on its own anchor.
   !important is needed to beat the unconditional white background set by
   ".menu-item-has-children > ul li a" above. */
.bell-nav-menu .menu-item-has-flyout:hover > a.bell-nav-sub-item:not(:hover) {
  background-color: rgba(0, 0, 0, 0.06) !important;
}
/* Mobile drawer — deeper subnav indent */
.nav-drawer .drawer-subnav--deep {
  padding-left: var(--space-4);
}
.nav-drawer .drawer-subnav--deep li a {
  font-size: 13px;
  color: #666;
}

/* Mobile nav drawer */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  overflow-y: auto;
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  /* Clears the tallest sticky header case - the group site's investor
     ticker plus the single-row header - so the drawer's first item never
     starts underneath it. Subsite pages (no ticker, shorter header) just
     get a little extra breathing room above "About Us". */
  padding-top: 112px;
}

.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer__inner { padding: var(--space-6) var(--space-5); }

.nav-drawer ul { list-style: none; padding: 0; }
.nav-drawer > .nav-drawer__inner > ul > li {
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.nav-drawer > .nav-drawer__inner > ul > li > a {
  flex: 1 1 auto;
  display: block;
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 15px;
  color: #1A1A1A;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* group.css ships a blanket `button:hover, button:focus { background: <pink>;
   color: #fff }` reset (an old Elementor theme-button default) that catches
   any plain <button> on the page, including these. It has no !important, but
   it's declared after our rules in the cascade — so every <button> added to
   the drawer needs to explicitly re-neutralise both properties on those same
   pseudo-classes, or its label goes white-on-white and its fill goes pink. */
.nav-drawer button:hover,
.nav-drawer button:focus,
.nav-drawer button:active {
  background: transparent !important;
  color: #1A1A1A !important;
}

.nav-drawer .drawer-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #1A1A1A;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.nav-drawer .drawer-toggle:focus-visible {
  outline: 2px solid var(--color-primary, #FFC200);
  outline-offset: -2px;
}
.nav-drawer .drawer-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform .2s ease;
}
.nav-drawer .drawer-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
  color: var(--color-primary, #FFC200);
}
.nav-drawer .drawer-toggle--sub {
  width: 32px;
  height: 32px;
}
.nav-drawer .drawer-toggle--sub svg {
  width: 15px;
  height: 15px;
}

.nav-drawer .drawer-subnav { flex: 1 0 100%; padding: 0 0 var(--space-2) var(--space-4); display: none; }
.nav-drawer .drawer-subnav.is-open { display: block; }
.nav-drawer .drawer-subnav li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.nav-drawer .drawer-subnav li a {
  flex: 1 1 auto;
  display: block;
  padding: var(--space-2) 0;
  color: #444;
  font-size: 14px;
  text-decoration: none;
}

/* Body top padding */
body { padding-top: 0; }

/* =============================================
   6. GROUP HERO
   ============================================= */

.bell-hero {
  position: relative;
  width: 100%;
  height: 600px;
  min-height: 600px;
  background: #111;
  overflow: hidden;
  margin-top: 0; /* header padding-top handles offset; no gap to cancel */
}

@media (max-width: 479px) {
  .bell-hero {
    height: 180px;
    min-height: 180px;
    margin-top: 0;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .bell-hero {
    height: 35vh;
    min-height: 35vh;
  }
}

.bell-hero__img,
.bell-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bell-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 1;
}

/* Default dark background (world map style) */
.bell-hero__default-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #1a2a3a 0%, #050e17 100%);
}

/* Slider arrows */
.bell-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
  border-radius: 0;
}

.bell-hero__arrow--prev { left: 12px; }
.bell-hero__arrow--next { right: 12px; }
.bell-hero__arrow:hover { background: rgba(255,255,255,0.3); }

/* Side action icons */
.bell-hero__side-icons {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bell-hero__side-icon {
  background: #FFC200;
  color: #1A1A1A;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s;
}

.bell-hero__side-icon:hover { background: #e6ae00; }

/* =============================================
   7. GROUP SUB-SITE LOGO STRIP
   Popup appears ABOVE each item on hover (matches live site)
   ============================================= */

.bell-subsite-strip {
  background: #fff;
}

.bell-subsite-strip__inner {
  max-width: 1400px;
  margin: 25px auto 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  border-top: 5px solid #FFC200;
  border-bottom: 5px solid #FFC200;
  padding: var(--space-5) 0;
  flex-wrap: nowrap;
}

/* Each item — plain link or popup wrapper */
.bell-subsite-strip__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
}

.bell-subsite-strip__item img {
  width: 80%;
  height: auto;
  display: block;
}

/* Popup-capable items */
.bell-subsite-strip__item--popup {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.bell-subsite-strip__item--popup > a {
  display: block;
  text-decoration: none;
}

.bell-subsite-strip__item--popup > a img {
  width: 76%;
  height: auto;
  display: block;
}

/* Popup panel — slides up from bottom to above on hover */
.bell-subsite-strip__popup {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(80% - 10px);
  opacity: 0;
  transition: opacity 0.3s, bottom 0.3s;
  z-index: 200;
  pointer-events: none;
  min-width: 220px;
}

.bell-subsite-strip__item--popup:hover .bell-subsite-strip__popup {
  opacity: 1;
  bottom: calc(100% + 10px);
  pointer-events: auto;
}

/* Dark description header inside popup */
.bell-subsite-strip__popup-header {
  background-color: #1A1A1A;
  color: #ffffff;
  padding: var(--space-5);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}

/* Region list area */
.bell-subsite-strip__popup-regions {
  box-shadow: 0 0 10px 5px rgba(0,0,0,0.11);
}

/* Mining = yellow background */
.bell-subsite-strip__popup--mining .bell-subsite-strip__popup-regions {
  background-color: #FFC200;
}

/* Forestry = green background */
.bell-subsite-strip__popup--forestry .bell-subsite-strip__popup-regions {
  background-color: #006537;
}

/* Description popup (BHI/BESSA/UK) = dark background */
.bell-subsite-strip__popup-desc {
  background-color: #1A1A1A;
  box-shadow: 0 0 10px 5px rgba(0,0,0,0.11);
  padding: var(--space-5) 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  transform: translate(0, 40px);
  transition: opacity 0.6s, transform 0.6s;
}

.bell-subsite-strip__item--popup:hover .bell-subsite-strip__popup-desc {
  opacity: 1;
  transform: translate(0, 0);
}

/* Wide logo images (BESSA/UK at 80%) */
.bell-subsite-strip__img--wide {
  width: 80%;
  height: auto;
  display: block;
}

/* Region list */
.bell-subsite-strip__popup-regions ul {
  list-style: none;
  padding: var(--space-5);
  margin: 0;
  opacity: 0;
  transform: translate(0, 40px);
  transition: opacity 0.6s, transform 0.6s;
}

.bell-subsite-strip__item--popup:hover .bell-subsite-strip__popup-regions ul {
  opacity: 1;
  transform: translate(0, 0);
}

.bell-subsite-strip__popup-regions ul li a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 3px 0;
  transition: color 0.3s;
}

/* Forestry links are white on green */
.bell-subsite-strip__popup--forestry .bell-subsite-strip__popup-regions ul li a {
  color: #ffffff;
}

.bell-subsite-strip__popup-regions ul li a:hover {
  color: #FDBA31;
}

@media (max-width: 767px) {
  .bell-subsite-strip__inner {
    flex-wrap: wrap;
    gap: 10px;
  }
  .bell-subsite-strip__item,
  .bell-subsite-strip__item--popup {
    width: calc(50% - 10px);
  }
}

/* =============================================
   8. MINING – REGION SELECTOR
   ============================================= */

.bell-region-section {
  padding: var(--space-9) 0 36px;
  background: #fff;
}

.bell-section-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  color: #1A1A1A;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.bell-region-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .bell-region-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bell-region-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px var(--space-3);
  border: 1px solid #ccc;
  background: #fff;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 400;
  color: #1A1A1A;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  border-radius: 0;
}

.bell-region-btn:hover {
  border-color: #FFC200;
  background: #FFC200;
  color: #1A1A1A;
}

/* Keep 2-col layout for last row if odd */
@media (min-width: 768px) {
  .bell-region-grid .bell-region-btn:nth-child(5),
  .bell-region-grid .bell-region-btn:nth-child(6) {
    /* These are in second row of 2 */
  }
  .bell-region-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
  }
}

@media (min-width: 1024px) {
  .bell-region-grid {
    /* First 4 on one row, last 2 centred below */
    grid-template-columns: repeat(4, 1fr);
    max-width: 900px;
  }
  .bell-region-grid .bell-region-btn:nth-child(5),
  .bell-region-grid .bell-region-btn:nth-child(6) {
    grid-column: auto;
  }
  /* Centre the last 2 in a 4-col grid */
  .bell-region-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
  }
  .bell-region-btn:nth-child(5) { grid-column: 2; }
  .bell-region-btn:nth-child(6) { grid-column: 3; }
}

/* =============================================
   9. MINING – INNOVATION & TECHNOLOGY
   ============================================= */

.bell-innovation-section {
  padding: var(--space-9) 0;
  background: #fff;
}

.bell-video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-2);
}

@media (min-width: 768px) {
  .bell-video-grid { grid-template-columns: repeat(2, 1fr); }
}

.bell-video-card {
  border: 1px solid #e0e0e0;
  overflow: hidden;
  background: #fff;
}

.bell-video-card__embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.bell-video-card__embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.bell-video-card__title {
  padding: var(--space-3) 14px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  color: #333;
  text-align: center;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
}

/* =============================================
   10. MINING – NEWS & TESTIMONIALS
   ============================================= */

.bell-news-section {
  padding: var(--space-9) 0 var(--space-6);
  background: #f9f9f9;
}

.bell-news-list {
  margin-top: var(--space-3);
}

.bell-news-item {
  padding: 28px 0;
  border-bottom: 1px solid #e0e0e0;
}

.bell-news-item:first-child {
  border-top: none;
}

.bell-news-item__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  color: #1A1A1A;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bell-news-item__title a {
  color: inherit;
  text-decoration: none;
}

.bell-news-item__title a:hover { color: #FFC200; }

.bell-news-item__date {
  font-size: 13px;
  color: #666;
  margin-bottom: var(--space-2);
}

.bell-news-item__excerpt {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}

.bell-news-empty {
  color: #666;
  font-size: 14px;
  padding: var(--space-5) 0;
}

/* Back to top */
.bell-back-to-top {
  text-align: center;
  padding: 28px 0;
  background: #f9f9f9;
}

.bell-back-to-top a {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  color: #333;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bell-back-to-top a:hover { color: #FFC200; }

/* Global floating back-to-top button — shown on every page once the visitor scrolls down */
.back-to-top-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary, #FFC200);
  color: #1a1a1a;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 900;
  text-decoration: none;
}

.back-to-top-fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-fab.is-dark-bg {
  color: #fff;
}

.back-to-top-fab:hover {
  background: var(--color-btn-hover, #1a1a1a);
  color: #fff;
}

.back-to-top-fab svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 767px) {
  .back-to-top-fab { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}

/* =============================================
   11. CONTACT PAGE
   ============================================= */

.bell-contact-section {
  padding: var(--space-8) 0 60px;
  background: #fff;
}

.bell-contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
}

@media (min-width: 1024px) {
  .bell-contact-layout {
    grid-template-columns: 2fr 1fr;
    gap: 60px;
  }
}

/* Form column */
.bell-contact-form-col { }

/* Info column */
.bell-contact-info-col { }

.bell-contact-info-heading {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  color: #1A1A1A;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.bell-contact-office {
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

.bell-contact-office p { margin-bottom: var(--space-2); }
.bell-contact-office a { color: #1A1A1A; text-decoration: none; }
.bell-contact-office a:hover { color: #FFC200; }
.bell-contact-office strong { font-weight: 700; }

.bell-contact-divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: var(--space-6) 0;
}

.bell-contact-follow-heading {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 400;
  color: #1A1A1A;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.bell-contact-social {
  display: flex;
  gap: 14px;
  align-items: center;
}

.bell-contact-social a {
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: color 0.2s;
}

.bell-contact-social a:hover { color: #FFC200; }

/* Contact form styles */
.bell-form-group {
  margin-bottom: var(--space-4);
}

.bell-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (max-width: 479px) {
  .bell-form-row { grid-template-columns: 1fr; }
}

.bell-form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.bell-form-required {
  font-style: normal;
  color: #e07b00;
  font-size: 12px;
  font-weight: 400;
}

.bell-form-control {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid #ccc;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 14px;
  color: #333;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}

.bell-form-control:focus {
  outline: none;
  border-color: #FFC200;
  box-shadow: 0 0 0 3px rgba(255,194,0,0.15);
}

select.bell-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.bell-form-textarea {
  min-height: 140px;
  resize: vertical;
}

.bell-form-group--checkbox {
  margin-top: var(--space-2);
}

.bell-form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}

.bell-form-checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #FFC200;
}

.bell-form-checkbox-label a { color: #FFC200; text-decoration: underline; }

.bell-form-notice {
  margin: var(--space-3) 0 var(--space-5);
  padding: 10px 14px;
  border: 1px solid #FFC200;
  border-radius: 2px;
  background: #fff8e1;
}

.bell-form-notice p {
  font-size: 12px;
  color: #666;
  margin: 0;
  line-height: 1.5;
  font-style: italic;
}

.bell-form-notice a { color: #FFC200; text-decoration: underline; }

.bell-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-7);
  background: #FFC200;
  color: #1A1A1A;
  border: none;
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s;
  min-height: 44px;
}

.bell-btn-submit:hover { background: #e6ae00; }

/* Form messages */
.bell-form-success {
  padding: var(--space-4) var(--space-5);
  background: #e8f5e9;
  border-left: 4px solid #2E7D32;
  border-radius: 2px;
  margin-bottom: var(--space-5);
}

.bell-form-success p { color: #2E7D32; font-weight: 600; margin: 0; }

.bell-form-error {
  padding: var(--space-4) var(--space-5);
  background: #ffebee;
  border-left: 4px solid #c62828;
  border-radius: 2px;
  margin-bottom: var(--space-5);
}

.bell-form-error p { color: #c62828; font-weight: 600; margin: 0; }

/* =============================================
   12. FOOTER – THEME-DRIVEN (uses --color-footer-bg / --color-footer-text)
   ============================================= */

/* The footer links row is still the legacy Elementor container (.bell-el-57a6b22, group.css) —
   its 50px top/bottom padding makes the footer far taller than the link columns need.
   !important + matching selector: needed to beat group.css's --padding-top/--padding-bottom
   custom properties, which .bell-con reads via padding-block-start/end. Covers both the
   desktop and the max-width:767px rule since both set the same 50px value. */
.bell-30964 .bell-element.bell-el-57a6b22 {
  --padding-top: var(--space-4) !important;
  --padding-bottom: var(--space-4) !important;
}

.site-footer {
  background: var(--color-footer-bg, #FFC200);
  color: var(--color-footer-text, #1A1A1A);
  margin-top: auto;
  width: 100%;
  overflow: hidden; /* clip so footer-bg doesn't bleed past footer-divider span */
}

.footer-main {
  padding: var(--space-6) 0 var(--space-5);
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  width: 100%;
}

/* 2-column: cap width so columns don't stretch full page, left-aligned with the page margin */
.footer-cols--2 {
  max-width: 720px;
}

@media (min-width: 768px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer-cols--3 { grid-template-columns: repeat(3, 1fr); }
  .footer-cols--2 { grid-template-columns: repeat(2, 1fr); }
}

.footer-col { }

.footer-col__heading {
  font-family: var(--font-heading, 'Barlow', sans-serif);
  font-size: 20px;
  font-weight: 400;
  height: 20px;
  line-height: 20px;
  color: var(--color-footer-text, #1A1A1A);
  margin: 0 0 6px 0;
  margin-block: 0 6px;
  letter-spacing: 0;
  text-transform: capitalize;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  font-size: 14px;
  line-height: 19px;
  margin-bottom: 0;
}

.footer-col ul li a {
  font-family: var(--font-body, 'Quicksand', sans-serif);
  font-size: 14px;
  font-weight: 400;
  height: 19px;
  line-height: 19px;
  color: var(--color-footer-text, #1A1A1A);
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-col ul li a:hover {
  /* overrides group.css `.bell-kit a:hover`, which turns links near-black (invisible on dark footers) */
  color: var(--color-footer-link-hover, var(--color-footer-text, #1A1A1A));
  opacity: 0.7;
  text-decoration: underline;
}

/* 19px line-height with no padding is a tight tap target — pad it out on
   mobile only, offsetting with a negative margin so desktop spacing/layout
   is unaffected. */
@media (max-width: 767px) {
  .footer-col ul li a {
    display: inline-block;
    padding: 7px 0;
    margin: -7px 0;
  }
}

/* FOOTER BOTTOM BAR — white, matching reference footer copyright area */
.footer-bottom {
  background: #fff;
  padding: 10px 0;
}

.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* When no social icons, right-align copyright to match reference text-align:end */
.footer-bottom__inner--no-social {
  justify-content: flex-end;
}

.footer-copyright {
  font-family: "Poppins", var(--font-heading, 'Barlow', sans-serif);
  font-size: 13px;
  font-weight: 400;
  color: #333; /* fixed dark — footer-bottom is always white regardless of site theme */
  margin: 0;
  margin-block: 0; /* prevent group.css p{margin-block-end} from adding space */
  line-height: 1.5;
}

/* Copyright row is always white — use site brand colour (--color-footer-bg) for text.
   Must match group.css specificity (.bell-30964 .bell-element.bell-el-fd2115e) to override
   its `color: var(--color-footer-text) !important` which can be white (e.g. UK site). */
/* Higher specificity (0,4,0) than group.css (0,3,0) so this wins despite loading first */
.bell-30964 .bell-element.bell-el-fd2115e.bell-widget {
  color: #000 !important;
}

/* =============================================
   13. HERO (legacy – used for sub-pages)
   ============================================= */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 200px;
}

.hero--sm { min-height: 160px; }

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

/* Opt-in Ken Burns zoom for hero images/backgrounds — off by default,
   applied only when a hero's ZoomEffect flag is enabled. Works on both
   background-image divs (.hero-bg) and <img> hero elements. */
.hero-zoom {
  animation: bellHeroZoom 8s ease-in-out forwards;
}
@keyframes bellHeroZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

@media (min-width: 1024px) {
  .hero { min-height: 320px; }
  .hero--sm { min-height: 220px; }
}

.hero__image { position: relative; width: 100%; }
.hero__image img { width: 100%; height: auto; object-fit: cover; min-height: 200px; display: block; }

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 100%);
}
/* Banners show the image as supplied: no darkening layer on any hero (.hero__overlay is the
   gradient scrim, .hero-overlay the flat 25% one used by the Group Products and product-family heroes). */
.hero__overlay, .hero-overlay { display: none; }

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-7);
  color: #fff;
}

.hero__eyebrow {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFC200;
  margin-bottom: var(--space-2);
}

.hero__headline {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}

.hero__subheadline {
  font-size: 1rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: var(--space-6);
  max-width: 520px;
}

.hero--video .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================
   14. SECTIONS (legacy)
   ============================================= */

.section { padding: var(--section-padding) 0; }
.section--sm { padding: var(--space-8) 0; }
.section--light { background: #f5f5f5; }
.section--dark { background: #1A1A1A; color: #fff; }

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 400;
  color: #1A1A1A;
  margin-bottom: var(--space-4);
}

.section-eyebrow {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFC200;
  margin-bottom: var(--space-2);
}

.section-subtitle {
  font-size: 15px;
  color: #555;
  max-width: 600px;
  margin-bottom: var(--space-7);
  line-height: 1.6;
}

.section-header { margin-bottom: var(--space-7); }
.section-header--center { text-align: center; }
.section-header--center .section-subtitle { margin-left: auto; margin-right: auto; }

/* =============================================
   15. BUTTONS (legacy)
   ============================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: 10px var(--space-6);
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 7px 3px rgba(0,0,0,0.15);
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.btn:hover { text-decoration: none; box-shadow: 0 0 14px 4px rgba(0,0,0,0.25); }

.btn-primary {
  background: #FFC200;
  color: #1A1A1A;
  border-color: #FFC200;
}
.btn-primary:hover { background: #e6ae00; border-color: #e6ae00; }

.btn-secondary {
  background: #1A1A1A;
  color: #fff;
  border-color: #1A1A1A;
}
.btn-secondary:hover { background: #333; border-color: #333; }

.btn-outline {
  background: transparent;
  color: #FFC200;
  border-color: #FFC200;
}
.btn-outline:hover { background: #FFC200; color: #1A1A1A; }

.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn-outline-white:hover { background: #fff; color: #1A1A1A; }

.btn-lg { min-height: 48px; padding: var(--space-3) var(--space-7); font-size: 14px; }

/* ── btn-style1 — shared "card button" skin: white by default, fills with
   the site's primary colour on hover. Add class="btn-style1" to any new
   button/link to get this look. Already wired up (via these selectors, no
   markup change needed) on: About/Innovation nav tabs, Careers nav tabs,
   Product Detail nav + Request a Quote, Bulletin download, and the Home
   news "read more" CTA.
   Note: hover uses --color-primary, not --color-btn-hover — on this site
   --color-btn-hover is configured as white, which would make a white-by-
   default button invisible on hover.
   Only the visual skin lives here — layout (padding, display, font-size
   etc.) stays in each page's own stylesheet. ── */
.btn-style1,
.bell-about-nav-btn,
.bell-about-cta-btn,
.bell-careers-nav-btn,
.bell-careers-cta-btn,
.pd-nav__btn,
.pd-quote,
.uk-news__readmore .bell-btn--primary,
.bell-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  /* !important: group.css has ".bell-kit a{color:var(--e-global-color-1c1e247)}"
     — a leftover Elementor global-colour var (class+tag selector, outranks our
     single class here) that would otherwise silently override this default text
     colour whenever one of these is an <a>. */
  color: #1a1a1a !important;
  border: none;
  border-radius: 0;
  /* !important: group.css has ".bell-page a{box-shadow:none}" — a class+tag
     selector that outranks our single class here whenever one of these is an
     <a> inside a .bell-page wrapper (e.g. Careers, Group Home). Buttons in
     the same list keep their shadow since that group.css rule only hits <a>. */
  box-shadow: 0 0 7px 3px rgba(0,0,0,0.15) !important;
  font-weight: 600 !important;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn-style1:hover, .btn-style1:focus,
.bell-about-nav-btn:hover, .bell-about-nav-btn:focus,
.bell-about-cta-btn:hover, .bell-about-cta-btn:focus,
.bell-careers-nav-btn:hover,
.bell-careers-cta-btn:hover,
.pd-nav__btn:hover,
.pd-quote:hover,
.uk-news__readmore .bell-btn--primary:hover,
.bell-contact-submit:hover,
.bell-contact-submit:focus {
  background: var(--color-primary, #FFC200);
  color: var(--color-btn-hover-text, var(--color-btn-text, #1a1a1a)) !important;
  box-shadow: 0 0 14px 4px rgba(0,0,0,0.25) !important;
  text-decoration: none;
}

/* .bell-contact-submit is a real <button type="submit">, and group.css
   (loaded after this file) has a generic [type=submit]:hover, button:hover
   reset at equal specificity that otherwise wins the cascade tie. */
.bell-contact-submit {
  background: #fff !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 0 7px 3px rgba(0,0,0,0.15) !important;
}
.bell-contact-submit:hover,
.bell-contact-submit:focus {
  background: var(--color-primary, #FFC200) !important;
  color: var(--color-btn-hover-text, var(--color-btn-text, #1a1a1a)) !important;
  box-shadow: 0 0 14px 4px rgba(0,0,0,0.25) !important;
}

/* .gp-btn-dropdown__trigger is a real <button> (the Group Products page CTA
   dropdown), unlike the other .bell-about-nav-btn links on the same row —
   same group.css button/button:hover reset problem as .bell-contact-submit. */
.gp-btn-dropdown__trigger {
  background: #fff !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 0 7px 3px rgba(0,0,0,0.15) !important;
}
.gp-btn-dropdown__trigger:hover,
.gp-btn-dropdown__trigger:focus,
.gp-btn-dropdown:hover .gp-btn-dropdown__trigger,
.gp-btn-dropdown.is-open .gp-btn-dropdown__trigger {
  background: var(--color-primary, #FFC200) !important;
  color: var(--color-btn-hover-text, var(--color-btn-text, #1a1a1a)) !important;
  box-shadow: 0 0 14px 4px rgba(0,0,0,0.25) !important;
}

/* =============================================
   16. CARDS (legacy)
   ============================================= */

.card {
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.3s, transform 0.3s;
  display: flex;
  flex-direction: column;
}

.card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.15); transform: translateY(-2px); }

.card__image img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }

.product-card__image {
  background: #fff;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
  aspect-ratio: unset;
}

.card__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-card-title, #1A1A1A);
  margin-bottom: 6px;
  display: block;
}

.card__title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-card-title, #1A1A1A);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.card__excerpt { font-size: 13px; color: #555; margin-bottom: 14px; flex: 1; }
.card__meta { font-size: 12px; color: #888; margin-bottom: var(--space-2); }
.card__footer { margin-top: auto; }

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary, #FFC200);
}

.card:hover .card__link,
.card__link:hover {
  text-decoration: none;
  color: var(--color-primary, #FFC200) !important;
}

/* News grid */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

/* News: featured article */
.news-featured {
  display: flex;
  gap: var(--space-7);
  margin-bottom: var(--space-6);
  background: #f8f8f8;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
}
.news-featured:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.12); text-decoration: none; color: inherit; }
.news-featured__img { flex: 0 0 58%; max-height: 360px; overflow: hidden; }
.news-featured__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-featured__body { flex: 1; padding: var(--space-7) var(--space-7) var(--space-7) 0; display: flex; flex-direction: column; justify-content: center; }
.news-featured__badge {
  display: inline-block;
  background: var(--color-primary, #FFC200);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: var(--space-3);
  width: fit-content;
}
.news-featured__body h2 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); font-weight: 700; margin: var(--space-2) 0 var(--space-3); line-height: 1.3; }
.news-featured__body p { font-size: 0.95rem; color: #555; line-height: 1.6; margin-bottom: var(--space-4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 767px) {
  .news-featured { flex-direction: column; }
  .news-featured__img { flex: none; max-height: 220px; }
  .news-featured__body { padding: var(--space-5); }
}

/* Narrow variant — same side-by-side layout, but the image is narrowed to
   match the width of a single card in the grid below (news-grid-2col),
   so its left/right edges line up with the row of cards underneath.
   Toggled per site via the "News Listing" page settings in admin. */
@media (min-width: 768px) {
  .news-featured--narrow .news-featured__img {
    flex: 0 0 calc(50% - 1.5rem);
  }
}

/* News: 2-column card grid */
.news-grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
}
@media (min-width: 768px) { .news-grid-2col { grid-template-columns: repeat(2, 1fr); } }

/* News card */
.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.news-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); text-decoration: none; color: inherit; }
.news-card__img { overflow: hidden; aspect-ratio: 16/9; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; gap: var(--space-2); }
.news-card__cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #FFC200);
  background: rgba(255,194,0,0.1);
  padding: 2px var(--space-2);
  border-radius: 2px;
  width: fit-content;
}
.news-card__body h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0; }
.news-card__body p { font-size: 0.875rem; color: #555; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__meta { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); }
.news-card__date { font-size: 0.8rem; color: #888; }
.news-card__author { font-size: 0.8rem; color: #888; }
.news-read-more { font-size: 0.82rem; font-weight: 700; color: var(--color-primary, #FFC200); margin-top: var(--space-1); }

/* News article detail */
.news-hero-img { width: 100%; max-height: 460px; overflow: hidden; }
.news-hero-img img { width: 100%; height: 460px; object-fit: cover; display: block; }
.news-article-body { padding: var(--space-7) 0; max-width: 860px; margin: 0 auto; }
.news-article-meta { font-size: 0.85rem; color: #888; margin-bottom: var(--space-6); }
.news-article-meta strong { color: #333; }
.news-article-excerpt { font-size: 1.05rem; font-weight: 600; color: #333; margin-bottom: var(--space-6); line-height: 1.55; }
.news-article-content { line-height: 1.75; color: #333; }
.news-article-content p { margin-bottom: var(--space-5); }
.news-article-content h2, .news-article-content h3 { font-weight: 700; margin: var(--space-7) 0 var(--space-3); }
.news-article-content img { max-width: 100%; height: auto; border-radius: 4px; }
.news-article-content a { color: var(--color-primary, #FFC200); }

/* =============================================
   17. STATS BAR (legacy)
   ============================================= */

.stats-bar {
  background: #1A1A1A;
  color: #fff;
  padding: var(--space-7) 0;
}

.stats-bar__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.stat-item {
  padding: var(--space-6) var(--space-7);
  text-align: center;
  flex: 1 1 140px;
}

.stat-item__number {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 400;
  color: #FFC200;
  line-height: 1;
  margin-bottom: var(--space-1);
}

.stat-item__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

/* =============================================
   18. CTA BANNER (legacy)
   ============================================= */

.cta-banner {
  background: #FFC200;
  padding: 60px 0;
  text-align: center;
}

.cta-banner__headline {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #1A1A1A;
  margin-bottom: var(--space-4);
}

.cta-banner__body {
  font-size: 15px;
  color: rgba(26,26,26,0.75);
  max-width: 500px;
  margin: 0 auto var(--space-7);
}

.cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }

/* =============================================
   19. CONTACT FORM (legacy)
   ============================================= */

.contact-form { max-width: 640px; }
.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.form-control {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid #ccc;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 14px;
  color: #333;
  background: #fff;
  transition: border-color 0.2s;
  appearance: none;
}

/* iOS Safari auto-zooms the viewport on focus if an input's font-size is under
   16px — bump it on mobile only so desktop's 14px look is unchanged. */
@media (max-width: 767px) {
  .form-control { font-size: 16px; }
}

.form-control:focus {
  outline: none;
  border-color: #FFC200;
  box-shadow: 0 0 0 3px rgba(255,194,0,0.15);
}

textarea.form-control { min-height: 140px; resize: vertical; }

/* =============================================
   20. SITE CARDS (legacy – Group index)
   ============================================= */

.site-selector {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) { .site-selector { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .site-selector { grid-template-columns: repeat(4, 1fr); } }

.site-card {
  border: 1px solid #e0e0e0;
  border-left: 4px solid #FFC200;
  border-radius: 2px;
  padding: var(--space-6);
  background: #fff;
  transition: box-shadow 0.3s, transform 0.3s;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.site-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); transform: translateY(-2px); }

.site-card__name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  color: #1A1A1A;
}

.site-card__desc { font-size: 13px; color: #555; flex: 1; }
.site-card__link { font-size: 13px; font-weight: 600; color: #FFC200; }

/* =============================================
   21. REGION SELECTOR (legacy)
   ============================================= */

.region-selector { padding: var(--section-padding) 0; }
.region-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .region-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .region-grid { grid-template-columns: repeat(3, 1fr); } }

.region-card {
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: var(--space-6);
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  transition: border-color 0.2s;
}

.region-card:hover { border-color: #FFC200; }
.region-card__name { font-family: var(--font-heading); font-weight: 400; font-size: 14px; color: #1A1A1A; }

/* =============================================
   22. MISC UTILITY
   ============================================= */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }
.text-center { text-align: center; }

/* Breadcrumb */
.breadcrumb { padding: var(--space-3) 0; border-bottom: 1px solid #e0e0e0; margin-bottom: var(--space-7); }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; list-style: none; }
.breadcrumb__list li { font-size: 12px; color: #888; }
.breadcrumb__list li a { color: #888; text-decoration: none; }
.breadcrumb__list li a:hover { color: #FFC200; }
.breadcrumb__list li + li::before { content: '/'; margin: 0 6px; color: #ccc; }
.breadcrumb__list li:last-child { color: #333; font-weight: 500; }

/* Lightbox */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.92);
  z-index: 2000; display: none; align-items: center; justify-content: center;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px; background: rgba(255,255,255,0.1);
  border: none; border-radius: 50%; color: #fff; font-size: 1.5rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* =============================================
   23. SITE-SPECIFIC COLOUR OVERRIDES
   ============================================= */

.site-mining { --color-primary: #FFC200; --color-secondary: #1A1A1A; }
.site-forestry { --color-primary: #2E7D32; --color-secondary: #1A1A1A; }
.site-bell-za { --color-primary: #003DA5; --color-secondary: #FFC200; }
.site-bell-uk { --color-primary: #003DA5; --color-secondary: #1A1A1A; }

/* FA sub-sites: primary is dark green so text on primary-coloured bg must be white */
.site-fa-africa-middleast,
.site-fa-asia-pacific,
.site-fa-latin-america { --btn-hover-text: #FFFFFF; --cat-card-text: #FFFFFF; }

/* Dark header colour adjustments for sub-sites */
.site-forestry .site-header--dark { background: #1A2E1A; }
.site-bell-za .site-header--dark { background: #001A5E; }
.site-bell-uk .site-header--dark { background: #001A5E; }

/* Product grid — flex + justify-content:center so a partial last row
   (e.g. a single related product) centers instead of hugging the left,
   matching the pl-cat-grid pattern on the products-landing page. */
.product-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6);
}
.product-grid > .product-card { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) { .product-grid > .product-card { flex: 0 0 calc(50% - 0.75rem); max-width: calc(50% - 0.75rem); } }
@media (min-width: 1024px) { .product-grid > .product-card { flex: 0 0 calc(33.333% - 1rem); max-width: calc(33.333% - 1rem); } }
@media (min-width: 1280px) { .product-grid > .product-card { flex: 0 0 calc(25% - 1.125rem); max-width: calc(25% - 1.125rem); } }

/* Spec table */
.spec-table-wrapper { overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { padding: 10px var(--space-3); text-align: left; border-bottom: 1px solid #e0e0e0; }
.spec-table th { background: #f5f5f5; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; color: #1A1A1A; }

/* Pagination
   !important on justify-content: group.css (loaded after this file) has a legacy
   ".pagination{justify-content:space-between}" rule at equal specificity that
   otherwise wins the cascade tie and spreads the page numbers edge-to-edge. */
.pagination { display: flex !important; align-items: center; justify-content: center !important; gap: 6px; margin-top: var(--space-9); flex-wrap: wrap; }
.pagination__item a, .pagination__item span,
.pagination__btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 6px; border: 1px solid #ddd; border-radius: 2px;
  font-size: 13px; font-weight: 500; color: #333; text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.pagination__item a:hover, .pagination__item.active span,
.pagination__btn:hover, .pagination__btn.active {
  background: var(--color-primary, #FFC200);
  border-color: var(--color-primary, #FFC200);
  color: var(--color-btn-hover-text, var(--color-btn-text, #1a1a1a));
}

/* Article content */
.article-content { max-width: 740px; margin: 0 auto; }
.article-content p { font-size: 16px; } /* line-height/margin-bottom come from .bell-prose */
.article-content h2 { margin: var(--space-8) 0 var(--space-4); }
.article-content ul, .article-content ol { padding-left: var(--space-6); margin-bottom: var(--space-6); }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }

/* Tables (quill-better-table output from the News admin editor) — wrapper
   scrolls horizontally instead of overflowing the page on narrow screens. */
.article-content .quill-better-table-wrapper {
  overflow-x: auto;
  margin: var(--space-6) 0;
}
.article-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.article-content table td,
.article-content table th {
  border: 1px solid #ddd;
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
}
.article-content table tr:nth-child(even) td {
  background: #f9f9f9;
}

/* ── Product Detail Page (pd-*) ──────────────────────────── */

/* Category heading — product pages use the about-us heading row style */

/* Hero — WHITE background */
.pd-hero {
  background: #fff;
  padding: var(--space-8) 0 0;
}
.pd-hero .container {
  max-width: var(--container-max);
}
.pd-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: flex-start;
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .pd-hero__grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
}
.pd-hero__image {
  display: flex; align-items: center; justify-content: center;
}
.pd-hero__image img {
  width: 80%; height: auto; object-fit: contain;
}
.pd-hero__image-placeholder {
  width: 100%; aspect-ratio: 16/9; background: #f0f0f0;
  display: flex; align-items: center; justify-content: center; color: #ccc;
}
.pd-hero__info {
  display: flex; flex-direction: column; gap: 0;
}
.bell-kit .pd-hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1, 2rem);
  font-weight: var(--fw-heading, 400); line-height: 1.15; margin: 0; color: #1a1a1a;
}
/* Divider below title — 3px solid dark, 20px padding */
.pd-hero__divider {
  border: none;
  border-top: 3px solid var(--color-primary, #1a1a1a);
  margin: var(--space-5) 0;
  width: 100%;
}
/* Specs + Downloads 2-column row */
.pd-hero__specs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  align-items: start;
}
.pd-hero__quickspecs { margin: 0; }
/* !important: group.css forces `p, ul li` to 16px; keep the hero specs at the Technical Data size
   so translated (longer) text wraps tidily. */
.pd-hero__quickspecs p {
  font-size: 14px !important; color: #1a1a1a; margin: 0 0 var(--space-1); line-height: 1.6;
}
.pd-hero__quickspecs p strong { color: #1a1a1a; font-weight: 700; }
.pd-hero__downloads {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.pd-hero__downloads li a {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 14px; font-weight: 600; color: #1a1a1a;
  text-decoration: none; transition: color 0.2s;
}
.pd-hero__downloads li a:hover { color: #FDBA31; }
.pd-hero__downloads li a svg { fill: var(--color-primary, #1a1a1a); flex-shrink: 0; }

/* Tab nav — 2×2 grid of white buttons (matching reference) */
.pd-nav__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: 10px;
}
/* Visual skin lives in the shared .pd-nav__btn rule near the top of this file — only layout here.
   !important on font-family/font-weight: group.css's ".bell-kit a" rule (class+tag = higher specificity
   than this class-only selector) otherwise silently overrides the font on this <a>-based button. */
.pd-nav__btn {
  flex: 1 1 calc(47% - 10px);
  display: flex; align-items: center; justify-content: center;
  padding: 15px var(--space-5);
  font-family: var(--font-heading) !important;
  font-size: 14px; font-weight: 600 !important;
  text-decoration: none;
  text-align: center;
}

/* Request a quote — centered below hero grid */
.pd-quote-wrap {
  text-align: center;
  padding: 0 0 50px;
}
.pd-quote {
  display: inline-block;
  padding: 15px var(--space-5);
  font-family: var(--font-heading) !important;
  font-size: 14px; font-weight: 600 !important;
  text-decoration: none;
}
.pd-quote--outline:hover { background: var(--color-primary, #FFC200); color: var(--color-btn-hover-text, var(--color-btn-text, #1a1a1a)) !important; box-shadow: 0 0 14px 4px rgba(0,0,0,0.25); }

/* Request a quote — pill style using the site's configured Button/Button
   Hover colours (Admin > Sites > Button Colour section), matching the admin
   preview's Button/Hover swatches. */
.pd-quote--cta {
  border-radius: 0;
  background: var(--color-btn, #fff);
  color: var(--color-btn-text, #1a1a1a) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.pd-quote--cta:hover {
  background: var(--color-btn-hover, #FFC200);
  color: var(--color-btn-hover-text, var(--color-btn-text, #1a1a1a)) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* ── Section header (careers-style) ───────────────────────── */
.pd-section-header {
  background: #EBEBEB;
  padding: var(--space-5) 0;
  margin-top: var(--space-7);
}
.pd-section-header h2 {
  font-family: var(--font-heading, sans-serif);
  font-size: var(--fs-h3, 1.75rem); font-weight: var(--fw-heading, 400);
  color: #1a1a1a; margin: 0;
  text-align: center;
}
.pd-section-header--dark {
  background: #1a1a1a;
}
.pd-section-header--dark h2 { color: #FDBA31; }
.pd-section-header#pd-overview { background: #f0f0f0; }

/* ── Shared section styles ─────────────────────────────────── */
.pd-section { padding: var(--space-9, 3.5rem) 0; }
.pd-section--light { background: #f0f0f0; }
.pd-section--white { background: #fff; }
.pd-section--gold  { background: #FDBA31; }

/* ── Back to top ───────────────────────────────────────────── */
.pd-back-top-row { display: flex; justify-content: center; padding-top: var(--space-4); }
/* !important on font-family: group.css's ".bell-kit a" rule (class+tag = higher specificity
   than this class-only selector) otherwise silently overrides the font on this <a>-based link. */
.pd-back-top {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem var(--space-5);
  background: transparent; color: #333 !important;
  font-family: var(--font-body, 'Quicksand', sans-serif) !important; font-weight: 600;
  font-size: 0.85rem; text-transform: uppercase;
  text-decoration: none !important; transition: color 0.2s;
}
.pd-back-top:hover { color: var(--color-primary, #FFC200) !important; }
.pd-back-top svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }
.pd-back-top--gold { color: #1a1a1a !important; }
.pd-back-top--gold:hover { color: var(--color-primary, #FFC200) !important; }

/* ── Overview — 2 columns ──────────────────────────────────── */
.pd-overview__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: start;
}
@media (min-width: 768px) {
  .pd-overview__grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
}
.pd-overview__text { color: #333; line-height: 1.7; }

/* ── Responsive video wrapper ──────────────────────────────── */
.pd-video-wrap {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
}
.pd-video-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}

/* ── Technical data — light bg ─────────────────────────────── */
.pd-techdata__downloads {
  list-style: none; padding: 0; margin: 0 0 var(--space-6);
  display: flex; flex-direction: column; gap: 6px;
}
.pd-techdata__downloads--dark li a {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 15px; font-weight: 600; color: #1a1a1a;
  text-decoration: none; transition: color 0.2s;
}
.pd-techdata__downloads--dark li a:hover { color: var(--color-primary, #1a1a1a); }
.pd-techdata__downloads--dark li a svg { fill: var(--color-primary, #1a1a1a); flex-shrink: 0; }
.pd-spec-table { width: 100%; border-collapse: collapse; }
.pd-spec-table tr { border-bottom: 1px solid rgba(0,0,0,0.08); }
.pd-spec-table td { padding: 10px 14px; font-size: 14px; color: #444; }
.pd-spec-table td:first-child { font-weight: 600; width: 45%; color: #1a1a1a; }
.pd-spec-table--light tr:nth-child(odd) { background: #f9f9f9; }

/* ── Innovation & Technology — video slider ────────────────── */
.pd-innovation-slider {
  display: flex; gap: var(--space-6);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-5);
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.pd-innovation-slider::-webkit-scrollbar { height: 4px; }
.pd-innovation-slider::-webkit-scrollbar-track { background: transparent; }
.pd-innovation-slider::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 2px; }
.pd-innovation-card {
  flex: 0 0 calc(50% - 0.75rem);
  scroll-snap-align: start;
  min-width: 280px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  padding: var(--space-4);
}
@media (max-width: 767px) { .pd-innovation-card { flex: 0 0 85%; } }
.pd-innovation-title {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 400;
  color: #1a1a1a; margin: var(--space-3) 0 0; text-align: center;
}

/* Gallery */
.pd-gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px)  { .pd-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .pd-gallery { grid-template-columns: repeat(4, 1fr); } }
.pd-gallery__item {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; cursor: pointer;
}
.pd-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.pd-gallery__item:hover img { transform: scale(1.05); }
.pd-gallery__overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s; color: #fff;
}
.pd-gallery__item:hover .pd-gallery__overlay { opacity: 1; }

/* CTA section */
.pd-cta { text-align: center; padding: var(--space-4) 0; }
.pd-cta__headline {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400; color: #1a1a1a; margin-bottom: var(--space-4);
}
.pd-cta__body { font-size: 15px; color: #555; max-width: 600px; margin: 0 auto var(--space-6); }
.pd-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.pd-btn {
  display: inline-block; padding: var(--space-3) var(--space-7);
  font-family: var(--font-heading); font-size: 14px; font-weight: 400;
  text-decoration: none; transition: background 0.2s, color 0.2s;
  border-radius: 0;
}
.pd-btn--dark { background: #1a1a1a; color: #FDBA31; }
.pd-btn--dark:hover { background: #FDBA31; color: #1a1a1a; }
.pd-btn--outline-dark { background: transparent; color: #1a1a1a; border: 2px solid #1a1a1a; }
.pd-btn--outline-dark:hover { background: #1a1a1a; color: #fff; }
.article-content blockquote { border-left: 4px solid #FFC200; padding: var(--space-4) var(--space-6); background: #f9f9f9; margin: var(--space-7) 0; }

/* Group header logo padding override */
#logo_main { --padding-top: 5px !important; }

/* =============================================
   MOBILE RESPONSIVE IMPROVEMENTS
   ============================================= */

/* --- Group header, mobile: a single row — logo, current site/region name,
   a tap-to-expand search icon, then the hamburger (reference layout the user
   asked to match; language links are dropped from this row entirely and
   live in the nav drawer instead — see _Header.cshtml). The legacy widget
   markup buries the search widget and hamburger a level below the logo in
   separate flex children that the vendor CSS (group.css) styles
   aggressively — rather than fight that with `display:contents` (which
   collided badly with a stray `margin-right:auto` on .bell-menu-toggle and
   scattered every element off screen), the search icon and hamburger are
   pulled out of flow with `position:absolute` against the header's own row,
   and the logo/caption are left in a plain `flex-direction:row` so they sit
   on that same row without touching the legacy wrappers' own flex rules. --- */
@media (max-width: 767px) {
  .bell-page.bell-header.bell-location-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .bell-page.bell-header .bell-el-e8fdb87 {
    padding: 0 var(--space-3) !important;
    min-height: 56px !important;
  }

  .bell-page.bell-header .bell-con-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important; /* baseline-align the caption with the bottom of the logo */
    min-height: 56px;
    padding-bottom: var(--space-2);
    position: relative;
    padding-right: 92px; /* reserve room for the absolutely-positioned search icon + hamburger */
  }

  /* Logo: small, fixed on the left */
  .bell-page.bell-header .bell-el-40a54ad {
    flex: 0 0 auto !important;
    width: auto !important; /* legacy width:%-based Elementor sizing otherwise stretches the logo column oversized, starving the caption of space */
    max-width: none !important;
    padding-top: 0 !important;
  }
  .bell-page.bell-header .bell-el-40a54ad img {
    height: 34px !important;
    width: auto !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    display: block;
  }

  /* Right column (utility): now just the site/region caption. Forced static
     so it can't become the containing block for the absolutely-positioned
     search widget below (group.css gives Elementor containers
     position:relative by default). */
  .bell-page.bell-header .bell-el-fd40901 {
    flex: 1 !important;
    min-width: 0;
    width: auto !important; /* legacy width:%-based Elementor sizing otherwise collapses this to 0 on some viewports */
    position: static !important;
    display: flex !important;
    align-items: flex-end !important;
  }
  .bell-page.bell-header .bell-el-1ae69ea {
    display: flex !important;
    align-items: flex-end !important;
    padding: 0 !important;
    min-height: 0 !important;
    position: static !important;
  }
  .mobile-header-caption {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 10px;
    line-height: 34px; /* matches the logo image height so the text sits on its baseline */
  }

  /* Language links move into the nav drawer on mobile — see
     .mobile-drawer-langs below — so drop them (and social icons, and plain
     utility text links) from this row entirely. */
  .bell-page.bell-header .header-social,
  .bell-page.bell-header .bell-el-6534fd2,
  .bell-page.bell-header .bell-el-1ae69ea .bell-widget-text-editor {
    display: none !important;
  }

  /* Search: pinned top-right, icon-only until tapped, then the input expands
     in place — tapping the label focuses the input (native `for` behaviour),
     which triggers the :focus-within expansion below. No JS needed. */
  .bell-page.bell-header .bell-widget-search {
    display: block !important;
    position: absolute !important;
    top: 4px;
    right: 56px;
    z-index: 2;
    width: auto !important;
    max-width: none !important;
  }
  .bell-page.bell-header .bell-widget-search .bell-search {
    display: flex;
    align-items: center;
  }
  .bell-page.bell-header .bell-widget-search .bell-search-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }
  .bell-page.bell-header .bell-widget-search .bell-icon-svg-search {
    width: 18px;
    height: 18px;
  }
  .bell-page.bell-header .bell-widget-search .bell-search-input-wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transition: max-width .25s ease, opacity .2s ease;
  }
  .bell-page.bell-header .bell-widget-search .bell-search:focus-within .bell-search-input-wrapper {
    max-width: 70vw;
    opacity: 1;
  }
  .bell-page.bell-header .bell-widget-search .bell-search-input {
    width: 70vw;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
    padding: var(--space-2) 10px;
    border: 1px solid #ddd;
  }

  /* Hamburger: pinned top-right, next to the logo row — no more fixed
     positioning tuned to a hand-picked pixel offset that only lined up on
     pages carrying the investor ticker. */
  .bell-page.bell-header .bell-el-85a6630 {
    position: absolute !important;
    top: 14px !important;
    left: auto !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important; /* legacy widget padding-top:35px otherwise shoves the icon out the bottom */
  }
  .bell-page.bell-header .bell-el-85a6630 .bell-widget-container {
    padding: 0 !important;
    height: auto !important;
  }

}

/* --- Mobile drawer site switcher — first item in the drawer list, lets a
   visitor jump to Group Home or a sibling regional site (e.g. Latin America)
   without leaving the menu. Reuses the same data as the desktop
   .sibling-switcher, just laid out as a labelled block instead of a hover
   dropdown. --- */
.mobile-drawer-sites {
  padding: var(--space-1) var(--space-4) 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: var(--space-1);
}
.mobile-drawer-sites__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-primary, #FFC200);
  margin: 0 0 var(--space-2);
}
.mobile-drawer-sites__link {
  display: block;
  padding: var(--space-2) 0;
  font-size: .85rem;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
}
.mobile-drawer-sites__link:hover,
.mobile-drawer-sites__link.mobile-drawer-sites__current {
  color: var(--color-primary, #FFC200);
}

/* --- Mobile drawer language links — replaces the header row's EN/DE/ES/FR
   on mobile, so switching languages is still possible without cluttering
   the compact header row. --- */
.mobile-drawer-langs { display: none; }

@media (max-width: 767px) {
  .mobile-drawer-langs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: var(--space-2);
  }
  .mobile-drawer-langs a {
    font-size: 13px;
    font-weight: 600;
    color: #494949;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 4px;
    background: rgba(0,0,0,0.04);
  }
  .mobile-drawer-langs a.active {
    background: var(--color-primary, #FFC200);
    color: #1a1a1a;
  }
  /* Text colour follows the site colour: white on dark primaries (UK, South Africa, F&A), dark on light ones */
  @supports (color: oklch(from red l c h)) {
    .mobile-drawer-langs a.active {
      color: oklch(from var(--color-primary, #FFC200) clamp(0.1, calc((0.68 - l) * 1000), 1) 0 0);
    }
  }
  .mobile-drawer-utility {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0 var(--space-4);
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  .mobile-drawer-utility a {
    display: block;
    padding: var(--space-3) 0;
    font-size: 1rem;
    letter-spacing: .05em;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
}
.mobile-drawer-utility { display: none; }
@media (max-width: 767px) { .mobile-drawer-utility { display: block; } }

/* --- Mobile header caption: shows the current site/region next to the logo,
   e.g. "AFRICA & MIDDLE EAST" — hidden on tablet/desktop where the
   sibling-switcher already conveys this next to the main nav. --- */
.mobile-header-caption { display: none; }

@media (max-width: 767px) {
  .mobile-header-caption {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #6b6b6b;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- Mobile subsite navigation --- */
.bell-mobile-subsite-nav {
  display: none;
}

@media (max-width: 767px) {
  .bell-mobile-subsite-nav {
    display: block;
    background: #fff;
    border-top: 4px solid #FFC200;
    border-bottom: 4px solid #FFC200;
    padding: var(--space-5) var(--space-4) var(--space-6);
  }

  .bell-mobile-subsite-nav__title {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    text-align: center;
    margin: 0 0 14px;
  }

  /* Row 1: 2-column grid for Mining & Forestry */
  .bell-mobile-subsite-nav__grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 10px;
  }

  /* Row 2: 3-column grid for BHI / South Africa / UK */
  .bell-mobile-subsite-nav__grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* Shared card appearance */
  .bell-mobile-subsite-expand,
  .bell-mobile-subsite-nav__direct {
    border: 1px solid #e8e8e8;
    background: #fafafa;
    transition: border-color 0.2s, background 0.2s;
  }

  /* When open, span both columns of the 2-col grid */
  .bell-mobile-subsite-expand[open] {
    grid-column: 1 / -1;
    border-color: #FFC200;
    background: #fff;
  }

  /* Summary = the logo card face */
  .bell-mobile-subsite-expand__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px var(--space-3);
    cursor: pointer;
    list-style: none;
    user-select: none;
    min-height: 80px;
  }

  /* Remove default browser marker */
  .bell-mobile-subsite-expand__summary::-webkit-details-marker { display: none; }
  .bell-mobile-subsite-expand__summary::marker { display: none; }

  .bell-mobile-subsite-expand__summary img {
    max-width: 130px;
    max-height: 58px;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Region list — appears below logo when open */
  .bell-mobile-subsite-expand__regions {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #e8e8e8;
  }

  .bell-mobile-subsite-expand__regions a {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s, color 0.15s;
  }

  .bell-mobile-subsite-expand__regions a:last-child { border-bottom: none; }

  .bell-mobile-subsite-expand__regions a:hover,
  .bell-mobile-subsite-expand__regions a:focus {
    background: #fffbf0;
    color: #1A1A1A;
  }

  /* Direct-link cards (BHI / BESSA / UK) */
  .bell-mobile-subsite-nav__direct {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    text-decoration: none;
    min-height: 80px;
  }

  .bell-mobile-subsite-nav__direct:hover,
  .bell-mobile-subsite-nav__direct:focus {
    border-color: #FFC200;
    background: #fffbf0;
  }

  .bell-mobile-subsite-nav__direct img {
    max-width: 110px;
    max-height: 52px;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* --- Group landing: highlight dealer/BHI logos on hover so they read as clickable --- */
.bell-el-9c83259 .bell-widget-image .bell-widget-container a {
  display: inline-block;
}

.bell-el-9c83259 .bell-widget-image .bell-widget-container a img {
  transition: filter 0.2s ease, transform 0.2s ease;
}

.bell-el-9c83259 .bell-widget-image .bell-widget-container a:hover img,
.bell-el-9c83259 .bell-widget-image .bell-widget-container a:focus img {
  filter: drop-shadow(0 0 10px var(--color-group-hover-glow, #FFC200));
  transform: scale(1.04);
}

/* --- Group header hamburger toggle (bell-menu-toggle acting as nav-toggle) --- */
.bell-menu-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  /* group.css keys this button's background off a legacy Elementor
     "global color" variable that isn't wired to per-site theming, so
     every division (Forestry & Agriculture green, Mining & Construction
     yellow, etc.) rendered the same yellow toggle regardless of site. */
  background-color: var(--color-primary, #FFC200) !important;
}

/* Show hamburger icon, hide close icon by default */
.bell-menu-toggle .bell-menu-toggle-close { display: none; }
.bell-menu-toggle .bell-menu-toggle-open  { display: block; }

/* When drawer is open, swap icons */
.bell-menu-toggle[aria-expanded="true"] .bell-menu-toggle-open  { display: none; }
.bell-menu-toggle[aria-expanded="true"] .bell-menu-toggle-close { display: block; }

.bell-menu-toggle .bell-icon-svg {
  width: 22px;
  height: 22px;
  fill: #1A1A1A;
}

/* --- Sub-site dark header: leave room for hamburger toggle --- */
@media (max-width: 1023px) {
  .site-header--dark .header-dark__top {
    padding-right: var(--space-10);
  }
}

/* --- Product detail: single column layout on small screens --- */
@media (max-width: 767px) {
  .pd-hero__specs-row {
    grid-template-columns: 1fr;
  }

  .pd-hero__image img {
    width: 100%;
  }

  .pd-nav__btn {
    flex: 1 1 100%;
  }

  .pd-section { padding: 1.75rem 0; }
}

/* --- Sections: reduce padding on mobile --- */
@media (max-width: 767px) {
  .bell-region-section { padding: var(--space-7) 0 var(--space-6); }
  .bell-news-section   { padding: var(--space-7) 0 var(--space-4); }
  .bell-innovation-section { padding: var(--space-7) 0; }
  .bell-contact-section { padding: 28px 0 var(--space-8); }
  .cta-banner { padding: var(--space-8) 0; }
  .section { padding: var(--space-8) 0; }
}

/* --- Hero content on small screens --- */
@media (max-width: 479px) {
  .hero__content { padding: var(--space-4) var(--space-5); }
  .hero__headline { font-size: 1.35rem; }
  .news-hero-img img { height: 200px; }
  .news-article-body { padding: var(--space-5) 0; }
}

/* --- Contact form: full-width inputs on mobile --- */
@media (max-width: 479px) {
  .bell-form-row { grid-template-columns: 1fr; }
}

/* --- Footer: keep columns side-by-side on mobile instead of stacking
   them full-width, just tighter, so both fit on one screen without a lot
   of scrolling. --- */
@media (max-width: 767px) {
  .footer-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) var(--space-5);
  }
  .footer-col__heading {
    font-size: 16px;
    height: auto;
    line-height: 1.2;
    margin-bottom: var(--space-2);
  }
  .footer-col ul li,
  .footer-col ul li a {
    font-size: 13px;
    height: auto;
    line-height: 1.4;
  }
  .footer-col ul li a {
    padding: 5px 0;
    margin: -5px 0;
  }
}

@media (max-width: 767px) {
  /* group.css bakes this specific copyright widget's text-align:end
     (right-aligned) directly into .bell-el-fd2115e - override it here
     rather than the unused .footer-bottom__inner class this markup
     doesn't actually carry. */
  .bell-30964 .bell-element.bell-el-fd2115e {
    text-align: center !important;
  }
}

/* =============================================
   BREADCRUMBS
   ============================================= */
.bell-breadcrumbs {
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  padding: .45rem 0;
}

.bell-breadcrumbs__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .2rem .35rem;
  font-family: var(--font-body, sans-serif);
  font-size: .8rem;
  color: #666;
}

.bell-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.bell-breadcrumbs__item:not(:last-child)::after {
  content: '\203A';
  color: #aaa;
  font-size: .9rem;
  line-height: 1;
}

.bell-breadcrumbs__link {
  color: #666;
  text-decoration: none;
  transition: color .15s;
}

.bell-breadcrumbs__link:hover {
  color: var(--color-primary, #FFC200);
  text-decoration: none;
}

.bell-breadcrumbs__current {
  color: #333;
  font-weight: 600;
}

/* =============================================
   Geo-Routing Popup
   ============================================= */
.geo-popup {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  pointer-events: none;
  opacity: 0;
  background: rgba(0,0,0,0);
  transition: opacity .3s ease, background .3s ease;
}

.geo-popup--visible {
  background: rgba(0,0,0,.35);
}

.geo-popup--visible {
  opacity: 1;
  pointer-events: auto;
}

.geo-popup__card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 1.75rem var(--space-7);
  max-width: 480px;
  width: 100%;
  text-align: center;
  transform: translateY(24px);
  transition: transform .3s ease;
}

.geo-popup--visible .geo-popup__card {
  transform: translateY(0);
}

/* !important below overrides group.css's legacy Elementor button reset
   ([type=button]:hover etc., background:#c36), which loads after this
   file and ties on specificity with a plain class selector. */
.geo-popup__close {
  position: absolute;
  top: .5rem;
  right: .75rem;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 1.75rem;
  line-height: 1;
  color: #666 !important;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  width: auto !important;
}

.geo-popup__close:hover,
.geo-popup__close:focus-visible {
  background: none !important;
  color: #1a1a1a !important;
}

.geo-popup__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-2);
}

.geo-popup__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: var(--space-2);
}

.geo-popup__message {
  font-size: .95rem;
  color: #555;
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

.geo-popup__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.geo-popup__btn {
  display: inline-block;
  padding: .6rem 1.4rem;
  border-radius: 0;
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  border: none;
  text-decoration: none;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: opacity .2s;
}

.geo-popup__btn:hover { opacity: .85; }

.geo-popup__btn--primary {
  background: var(--color-primary, #FFC200);
  color: var(--color-btn-text, #1A1A1A);
}

.geo-popup__btn--secondary {
  background: var(--color-primary, #FFC200);
  color: var(--color-btn-text, #1A1A1A);
}

@media (max-width: 479px) {
  .geo-popup__card { padding: var(--space-5) var(--space-4); }
  .geo-popup__actions { flex-direction: column; }
  .geo-popup__btn { width: 100%; text-align: center; }
}

/* =============================================
   GEO BANNER — slide-out globe tab (top-right)
   Toggle and panel are independently positioned
   so the toggle is always visible at the right
   edge while the panel slides in beside it.
   ============================================= */

/* Wrapper — zero-size, only used for display:none toggling via [hidden].
   All visible children use position:fixed independently. */
.geo-banner {
  display: block;
  width: 0;
  height: 0;
}

/* Globe toggle — always fixed at top-right edge */
.geo-banner__toggle {
  position: fixed;
  top: var(--geo-tab-top, 10rem);
  right: 0;
  z-index: 8501;
  width: 44px;
  height: 48px;
  background: var(--color-primary, #FFC200);
  border: none;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-btn-text, #1A1A1A);
  box-shadow: -3px 2px 10px rgba(0,0,0,.18);
  transition: background .2s, color .2s;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.geo-banner--ready .geo-banner__toggle {
  opacity: 1;
  pointer-events: auto;
}

.geo-banner__toggle:hover,
.geo-banner__toggle:active {
  background: var(--color-secondary, #1A1A1A);
  color: var(--color-primary, #FFC200);
}

.geo-banner__toggle:focus {
  /* group.css (legacy theme) sets button:focus to crimson; keep the site colour */
  background: var(--color-primary, #FFC200);
  color: var(--color-btn-text, #1A1A1A);
  outline: 2px solid var(--color-secondary, #1A1A1A);
  outline-offset: -2px;
}

.geo-banner__toggle:focus:hover {
  background: var(--color-secondary, #1A1A1A);
  color: var(--color-primary, #FFC200);
}

.geo-banner__toggle:focus:not(:focus-visible) {
  outline: none;
}

/* Panel — positioned flush to the left of the toggle */
.geo-banner__panel {
  position: fixed;
  top: var(--geo-tab-top, 10rem);
  right: 44px;   /* sits directly left of the toggle */
  z-index: 8500;
  width: 260px;
  background: #fff;
  border-radius: 8px 0 0 8px;
  box-shadow: -4px 2px 18px rgba(0,0,0,.13);
  border-top: 3px solid var(--color-primary, #FFC200);
  padding: .9rem var(--space-4);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  /* Hidden off-screen to the right by default */
  transform: translateX(calc(100% + 44px));
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}

.geo-banner--open .geo-banner__panel {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.geo-banner__text {
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-secondary, #1A1A1A);
  margin: 0;
  line-height: 1.4;
}

.geo-banner__links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.geo-banner__link {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  padding: .28rem .7rem;
  border-radius: 0;
  background: var(--color-primary, #FFC200);
  color: var(--color-btn-text, #1A1A1A);
  text-decoration: none;
  transition: opacity .2s;
}

.geo-banner__link:hover { opacity: .8; }

@media (max-width: 767px) {
  /* Clear the single-row mobile header (taller on the group site, which also
     carries the investor ticker above it) so the geo-banner toggle never
     overlaps the logo/hamburger row. */
  .geo-banner__toggle { top: var(--geo-tab-top, 70px); }
  .geo-banner__panel  { top: var(--geo-tab-top, 70px); }
}

/* Hide the floating geo-banner while the nav drawer is open — its
   z-index (8501) otherwise sits above the drawer regardless of the
   drawer's own header height, overlapping whatever the first menu row
   happens to be. */
body.nav-drawer-open .geo-banner__toggle,
body.nav-drawer-open .geo-banner__panel {
  display: none !important;
}

@media (max-width: 479px) {
  .geo-banner__panel  { width: 200px; right: 44px; }
}

/* =============================================
   KLARO COOKIE CONSENT — per-site branding
   Banner uses a white background with dark text
   so it is always readable regardless of the
   site colour scheme. Primary colour is used
   only for button fills and accents.
   ============================================= */

/* Banner and modal backgrounds — always light */
.cookie-notice,
.cookie-modal .cm-modal {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  position: relative;
}

/* Corner close (X) — Klaro's notice ships no close affordance by default;
   injected via _KlaroConfig.cshtml and wired to "I decline" so dismissing
   never counts as implicit consent. */
.cookie-notice .cn-close {
  position: absolute;
  top: .5rem;
  right: .75rem;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 1.5rem;
  line-height: 1;
  color: #666 !important;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  width: auto !important;
}

.cookie-notice .cn-close:hover,
.cookie-notice .cn-close:focus-visible {
  background: none !important;
  color: #1a1a1a !important;
}

/* Force ALL text inside the cookie UI to dark — Klaro CDN sets element-specific white */
.cookie-notice *,
.cookie-modal .cm-modal * {
  color: #1a1a1a !important;
}

/* Button colours restored below (those rules come after and take precedence) */

/* Accept / primary action button */
.cm-btn.cm-btn-success,
.cm-btn.cm-btn-accept-all,
.cm-btn.cm-btn-accept {
  background-color: var(--color-primary, #FFC200) !important;
  color: #ffffff !important;
  border-color: var(--color-primary, #FFC200) !important;
}

.cm-btn.cm-btn-success:hover,
.cm-btn.cm-btn-accept-all:hover,
.cm-btn.cm-btn-accept:hover {
  filter: brightness(0.88) !important;
  color: #ffffff !important;
}

/* Secondary / decline / info buttons */
.cm-btn.cm-btn-decline,
.cm-btn.cm-btn-close,
.cm-btn:not(.cm-btn-success):not(.cm-btn-accept-all):not(.cm-btn-accept) {
  background-color: transparent !important;
  color: var(--color-primary, #FFC200) !important;
  border-color: var(--color-primary, #FFC200) !important;
}

.cm-btn.cm-btn-decline:hover,
.cm-btn.cm-btn-close:hover,
.cm-btn:not(.cm-btn-success):not(.cm-btn-accept-all):not(.cm-btn-accept):hover {
  background-color: var(--color-primary, #FFC200) !important;
  color: #ffffff !important;
}

/* "Let me choose" link */
.cm-link,
.cm-link:visited {
  color: var(--color-primary, #FFC200) !important;
}

.cm-link:hover {
  filter: brightness(0.8) !important;
}

/* Toggle switches (on state) */
.cm-list-input:checked + .cm-list-label .slider,
.cm-toggle-all .slider {
  background-color: var(--color-primary, #FFC200) !important;
}

/* Notice/modal title bar accent */
.cookie-notice .cn-title,
.cookie-modal .cm-modal .cm-header {
  border-color: var(--color-primary, #FFC200) !important;
  color: #1a1a1a !important;
}

/* =============================================
   SIDE TABS — sticky "Message Us" + "Dealer Locator"
   Fixed to the right edge, vertically centred,
   text rotated so it reads bottom-to-top.
   ============================================= */
.bell-side-tabs {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bell-side-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  background-color: var(--color-primary, #FFC200);
  color: var(--color-btn-text, #1A1A1A);
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 4px 0 0 4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: padding-right 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  box-shadow: -2px 0 6px rgba(0,0,0,0.15);
}

.bell-side-tab:hover,
.bell-side-tab:focus {
  padding-right: 14px;
  background-color: var(--color-secondary, #1A1A1A);
  color: var(--color-primary, #FFC200);
  text-decoration: none;
}

/* Hide on very small screens where they'd cover content */
@media (max-width: 479px) {
  .bell-side-tabs {
    display: none;
  }
}

/* ============================================================
   PARTS & SERVICE PAGE — ps-* styles
   ============================================================ */

.ps-hero-subtext {
  font-size: 1rem;
  color: #555;
  margin: var(--space-2) 0 0;
}

/* ── Intro text ────────────────────────────────────────────── */
.ps-intro {
  padding: var(--space-7) 0;
  text-align: center;
}
.ps-intro__text {
  font-size: 1.15rem;
  font-weight: 400;
  color: #444;
  line-height: 1.6;
  margin: 0;
}

/* ── Service cards section ─────────────────────────────────── */
.ps-cards-section {
  padding: var(--space-9) 0;
}

.ps-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.ps-card {
  background: #fff;
  box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease;
}

.ps-card:hover {
  box-shadow: 0 0 14px 4px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: inherit;
}

.ps-card__img {
  width: 100%;
  height: 270px;
  overflow: hidden;
  background: #e0e0e0;
}

.ps-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ps-card__img--placeholder {
  background: linear-gradient(135deg, #e0e0e0 0%, #c8c8c8 100%);
}

.ps-card__body {
  padding: 0 var(--space-7) var(--space-8);
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ps-card__title {
  font-family: var(--font-heading, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-card-link, var(--color-card-title, #1a1a1a));
  margin: 1.75rem 0 var(--space-1);
  line-height: 1.3;
  transition: color 0.2s ease;
}

.ps-card:hover .ps-card__title {
  color: var(--color-card-link-hover, #FFC200);
}

.ps-card__divider {
  width: 50%;
  height: 2px;
  background: var(--color-primary, #FFC200);
  margin: var(--space-3) 0;
}

.ps-card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
  min-height: 5rem;
  margin: 0;
}

/* ── Innovation & Technology video section ─────────────────── */
.ps-video-section {
  background: #fff;
  padding: 0 0 var(--space-9);
}

.ps-video-swiper {
  overflow: hidden;
  padding: var(--space-6) var(--space-8);
  position: relative;
}
.ps-video-swiper.swiper-initialized {
  overflow-x: hidden;
  overflow-y: visible;
}
.ps-video-swiper .swiper-button-next,
.ps-video-swiper .swiper-button-prev {
  color: var(--color-secondary, #1a1a1a);
}
.ps-video-swiper .swiper-button-next::after,
.ps-video-swiper .swiper-button-prev::after {
  font-size: 22px;
}

.ps-video-section .bell-about-heading-row,
.ps-video-section__heading {
  margin-top: var(--space-9) !important;
  margin-bottom: var(--space-7);
}

/* Cancel the ceo-video bottom padding when it leads directly into the Innovation section */
.bell-about-ceo-video + .ps-video-section {
  margin-top: -1.5rem;
}

.ps-video-section__heading h2 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ps-video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.ps-video-item__embed {
  position: relative;
  padding-top: 56.25%;
  background: #000;
  overflow: hidden;
}

.ps-video-item__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.ps-video-item__thumb {
  width: 100%;
  height: auto;
  display: block;
}

.ps-video-item__title {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.9rem;
  font-weight: 400;
  color: #1a1a1a;
  margin: var(--space-3) 0 0;
}

/* ── Contact strip ─────────────────────────────────────────── */
.ps-contact-strip {
  background: #EBEBEB;
  padding: var(--space-7) 0;
}

.ps-contact-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.ps-contact-strip__inner p {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
}

.ps-contact-strip__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .ps-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .ps-cards-grid {
    grid-template-columns: 1fr;
  }

  .ps-video-grid {
    grid-template-columns: 1fr;
  }

  .ps-contact-strip__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ps-card__img {
    height: 200px;
  }
}


/* ── YouTube facade (lazy-load thumbnails, replace with iframe on click) ── */
.yt-facade {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: #000;
}
.yt-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.yt-facade:hover img { opacity: 1; }
.yt-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.15s;
}
.yt-facade:hover .yt-facade__play { transform: translate(-50%, -50%) scale(1.12); }
.yt-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Per-tag hero variants (Products Landing / Group Products) — .hero display rules would otherwise beat [hidden] */
[data-pl-hero][hidden], [data-gp-hero][hidden] { display: none !important; }

/* Products landing: main stretches to fill tall viewports; paint it the same grey as the category grid so no white strip shows above the footer */
main:has(.pl-cat-grid) { background: #f5f5f5; }