/* ═══════════════════════════════════════════════════════════════
   FARMING HUB — HOMEPAGE + SHARED FOUNDATION
   One cohesive corporate design system (rebuilt 2026).
   Palette: deep forest green + lime accent + warm neutrals.
   Type:    Plus Jakarta Sans (display) / Inter (body).
═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --green:        #0f3b25;
  --green-mid:    #1c5a39;
  --green-deep:   #0a2719;
  --green-night:  #071811;
  --green-50:     #eef4ef;
  --green-100:    #dde8e0;
  --green-light:  #eef4ef;
  --lime:         #c6dc3c;
  --lime-soft:    #d7e86a;
  --lime-dark:    #93a82a;

  /* Neutrals (warm) */
  --ink:          #16211b;
  --body:         #44514b;
  --muted:        #6c7a72;
  --line:         #e3eae3;
  --line-strong:  #d3ddd4;
  --white:        #ffffff;
  --bg-soft:      #ffffff;
  --bg-cream:     #ffffff;

  /* Type */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radius */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadow (green-tinted, soft) */
  --sh-1: 0 1px 2px rgba(16,33,24,.05), 0 2px 8px rgba(16,33,24,.05);
  --sh-2: 0 14px 30px -12px rgba(16,46,30,.18);
  --sh-3: 0 34px 64px -22px rgba(13,40,27,.30);

  /* Motion / layout */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t:    .35s var(--ease);
  --max:  1240px;
  --pad:  clamp(20px, 5vw, 30px);
  --section-y: clamp(76px, 9vw, 122px);
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* NOTE: no `scroll-behavior: smooth` — native smooth scroll fights GSAP
   ScrollTrigger pinned sections (jank/desync when scrolling through them).
   Smooth programmatic scrolling is done JS-side, ScrollTrigger-aware. */
html { -webkit-text-size-adjust: 100%; }
/* The site is authored at 100% but signed off at 90% browser zoom (owner,
   2026-09-10: "90% is crt for our website"). Standard CSS zoom scales px,
   clamp() and vw together, so this is the same picture the owner approved,
   delivered at 100%. Desktop and tablet-landscape only: on a phone a 10%
   shrink would drop 1rem fields to 14.4px (iOS Safari zooms the page on
   focus under 16px) and 44px tap targets to 40px. Media queries still read
   the real viewport, so no breakpoint moves. */
@media (min-width: 1024px) {
  html { zoom: .9; }
  /* Chromium does NOT divide viewport units by the zoom: inside the zoomed tree
     100vh computes to the window height and is then drawn at 90% of it, so a
     "full-screen" hero, drawer or scrim stopped 10% short of the bottom edge.
     Everything that must reach the window edge is corrected here, at html+class
     specificity so it also beats the page-level <style> blocks that set them. */
  html .dsh, html .hero-slider { height: calc(100svh / .9); }
  html .eco-stage { height: calc(100vh / .9 - 88px); }
  html #mobileNav, html .mobile-nav, html .dfd-panel { height: calc(100dvh / .9); }
  html .enq-overlay, html .dfd-scrim, html .ms-modal { height: calc(100vh / .9); }
}
/* Guard: reveal animations start offset to the right (GSAP x:) — never let that
   create a sideways scroll. `clip` (not `hidden`) keeps position:sticky and
   ScrollTrigger pinning working, and leaves the vertical axis untouched. */
html, body { overflow-x: clip; }
/* Anchor-jump landing: clear the fixed header so section headings aren't hidden */
:target { scroll-margin-top: 96px; }
#brands, #industries { scroll-margin-top: 96px; }
@media (max-width: 768px) { #brands, #industries, :target { scroll-margin-top: 84px; } }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--body);
  background: var(--white);
  line-height: 1.7;
  /* NOT overflow-x: hidden — `hidden` on one axis forces the other to `auto`, which
     makes <body> a scroll container and silently kills every position:sticky on the
     page (it was breaking the sticky panel in dealer.html's How-to-Become-a-Dealer).
     The `html, body { overflow-x: clip }` guard above already stops sideways scroll. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  overflow-wrap: break-word;
}
p { color: var(--body); }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
address { font-style: normal; }
::selection { background: var(--lime); color: var(--green-deep); }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ── Section header & eyebrow ── */
.section-header {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  text-align: center;
}
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.section-tag::before {
  content: '';
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--lime);
}
.section-header.center-tag { display: flex; flex-direction: column; align-items: center; }
.section-header .section-tag { margin-inline: auto; }
.section-tag--light { color: var(--lime-soft); }

.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.12;
}
.section-title--light { color: var(--white); }
.section-desc {
  margin-top: 18px;
  max-width: 620px;
  margin-inline: auto;
  font-size: 1.02rem;
  color: var(--muted);
  line-height: 1.75;
}
.section-desc--light { color: rgba(255,255,255,.74); }
.section-footer-cta { text-align: center; margin-top: clamp(40px, 5vw, 56px); }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .005em;
  padding: 14px 26px;
  border-radius: var(--r-xs);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
  box-shadow: var(--sh-1);
}
.btn-primary:hover { background: var(--green-mid); border-color: var(--green-mid); transform: translateY(-3px); box-shadow: var(--sh-2); }

.btn-lime {
  background: var(--lime);
  color: var(--green-deep);
  border-color: var(--lime);
}
.btn-lime:hover { background: var(--lime-soft); border-color: var(--lime-soft); transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(150,170,40,.6); }

.btn-outline {
  background: transparent;
  color: var(--green);
  border-color: var(--line-strong);
}
.btn-outline:hover { background: var(--green); color: var(--white); border-color: var(--green); transform: translateY(-3px); }

.btn-white {
  background: var(--white);
  color: var(--green);
  border-color: var(--white);
}
.btn-white:hover { background: var(--lime); border-color: var(--lime); color: var(--green-deep); transform: translateY(-3px); }

.btn-outline-white {
  background: rgba(255,255,255,.06);
  color: var(--white);
  border-color: rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}
.btn-outline-white:hover { background: var(--white); color: var(--green); border-color: var(--white); transform: translateY(-3px); }

.btn-whatsapp { background: #1faf54; color: #fff; border-color: #1faf54; }
.btn-whatsapp:hover { background: #178f44; border-color: #178f44; transform: translateY(-3px); }

/* shine sweep */
.btn-primary::after, .btn-lime::after, .btn-whatsapp::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--ease);
  pointer-events: none;
}
.btn-primary:hover::after, .btn-lime:hover::after, .btn-whatsapp:hover::after { left: 130%; }

/* small header buttons */
.btn-primary-sm, .btn-outline-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--r-xs);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: var(--t);
}
.btn-primary-sm { background: var(--lime); color: var(--green-deep); border-color: var(--lime); }
.btn-primary-sm:hover { background: var(--white); border-color: var(--white); color: var(--green); }
.btn-outline-sm { background: rgba(255,255,255,.08); color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-outline-sm:hover { background: var(--white); color: var(--green); border-color: var(--white); }

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(7,18,11,.55), rgba(7,18,11,.12) 70%, transparent);
  transition: background var(--t), box-shadow var(--t), border-color var(--t);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -16px rgba(13,40,27,.4);
}
/* The home header is transparent over the hero, its nav is white, and the logo
   badge deliberately hangs 42px BELOW the header edge. Open the mega panel from
   that state and all three break at once: white links land on a white panel, the
   open link turns green on a dark gradient, and the badge drops 27px into the
   panel. So while the panel is open the header takes exactly the state it takes
   on scroll — solid, dark nav, wordmark centred. It is the same surface as the
   panel, so it has to look like it. No box-shadow: the panel casts its own, and
   two would draw a seam between them. */
.site-header.mm-open {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
}
.site-header.mm-open .nav-link { color: var(--body); }
.site-header.mm-open .nav-link:hover { color: var(--green); background: var(--green-50); }
.site-header.mm-open .nav-link.active { color: var(--green); }
.site-header.mm-open .nav-link.active::after { background: var(--lime-dark); }
.site-header.mm-open .logo-mark { opacity: 0; transform: translate(-50%, -50%); }
.site-header.mm-open .logo-full { opacity: 1; transform: translate(-50%, -50%); }
.site-header.mm-open .btn-outline-sm { color: var(--green); background: transparent; border-color: var(--line-strong); }
.site-header.mm-open .btn-primary-sm { background: var(--green); color: #fff; border-color: var(--green); }
.site-header.mm-open .hamburger span { background: var(--green); }

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  height: 88px;
}
/* centered logo: favicon badge at top → full wordmark on scroll (cross-fade) */
.logo { grid-column: 2; justify-self: center; align-self: stretch; position: relative; display: block; width: clamp(176px, 15vw, 212px); }
.logo img { position: absolute; left: 50%; top: 50%; transition: opacity .4s var(--ease), transform .45s var(--ease); }
/* TOP: favicon badge hangs half-below the header edge (over the hero) —
   SCROLL: it rises to the centre + cross-fades to the full wordmark */
.logo-mark { height: 58px; width: 58px; border-radius: 50%; background: rgba(255,255,255,.97); padding: 9px; box-sizing: border-box; object-fit: contain; box-shadow: 0 8px 24px rgba(0,0,0,.3); opacity: 1; transform: translate(-50%, calc(-50% + 42px)); }
.logo-full { height: 58px; width: auto; opacity: 0; transform: translate(-50%, -50%); }
.site-header.scrolled .logo-mark { opacity: 0; transform: translate(-50%, -50%); }
.site-header.scrolled .logo-full { opacity: 1; transform: translate(-50%, -50%); }

.main-nav { margin: 0; min-width: 0; }
.main-nav--l { grid-column: 1; }
.main-nav--r { grid-column: 3; }
.main-nav--l .nav-list { justify-content: flex-end; }
.main-nav--r .nav-list { justify-content: flex-start; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-link {
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  padding: 9px 12px;
  border-radius: var(--r-xs);
  transition: var(--t);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  white-space: nowrap;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav-link.active { color: var(--lime-soft); }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: var(--lime);
}
.nav-arrow { font-size: .55rem; opacity: .75; }

.site-header.scrolled .nav-link { color: var(--body); }
.site-header.scrolled .nav-link:hover { color: var(--green); background: var(--green-50); }
.site-header.scrolled .nav-link.active { color: var(--green); }
.site-header.scrolled .btn-outline-sm { color: var(--green); background: transparent; border-color: var(--line-strong); }
.site-header.scrolled .btn-outline-sm:hover { background: var(--green); color: #fff; border-color: var(--green); }
.site-header.scrolled .btn-primary-sm { background: var(--green); color: #fff; border-color: var(--green); }
.site-header.scrolled .btn-primary-sm:hover { background: var(--green-mid); border-color: var(--green-mid); }

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 224px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--t);
  z-index: 120;
}
.has-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  font-size: .86rem;
  font-weight: 500;
  color: var(--body);
  transition: var(--t);
}
.dropdown li a:hover { background: var(--green-50); color: var(--green); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: var(--t); }
.site-header.scrolled .hamburger span { background: var(--green); }

/* Mobile nav */
.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  width: min(330px, 88vw);
  height: 100dvh;
  background: var(--white);
  box-shadow: -20px 0 60px -30px rgba(13,40,27,.5);
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  z-index: 1200;
  overflow-y: auto;
  padding: 96px 0 24px;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav ul li a {
  display: block;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--body);
  border-bottom: 1px solid var(--line);
  transition: var(--t);
}
.mobile-nav ul li a:hover { color: var(--green); background: var(--green-50); padding-left: 34px; }
.mobile-cta { color: var(--green) !important; }

@media (min-width: 1280px) { .hamburger { display: none !important; } }

/* ═══════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════ */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--green-night);
}
.slides-wrapper { position: relative; width: 100%; height: 100%; }
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .9s var(--ease);
  pointer-events: none;
}
.slide.slide--active { opacity: 1; pointer-events: auto; }
.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 8s ease;
}
.slide--active .slide-bg { transform: scale(1); }
.slide-bg--1 { background-image: url('../assets/images/brand-promise-hero-web.jpg'); }
.slide-bg--2 { background-image: url('../assets/images/utility-division-hero-web.jpg'); }
.slide-bg--3 { background-image: url('../assets/images/lae-division-web.jpg'); }
.slide-bg--4 { background-image: url('../assets/images/implements-division-hero-web.jpg'); }

.slide-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,20,12,.9) 0%, rgba(6,20,12,.6) 46%, rgba(6,20,12,.15) 100%),
    linear-gradient(0deg, rgba(6,20,12,.55), transparent 45%);
}
.slide-content { position: relative; z-index: 2; max-width: var(--max); padding-top: 64px; }
.slide-content > .slide-label,
.slide-content > .slide-heading,
.slide-content > .slide-sub,
.slide-content > .slide-actions { max-width: 660px; }

.slide-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lime-soft);
  padding: 8px 14px;
  border: 1px solid rgba(198,220,60,.4);
  border-radius: var(--r-pill);
  background: rgba(7,24,15,.4);
  backdrop-filter: blur(8px);
  margin-bottom: 22px;
}
.slide-heading {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
  line-height: 1.04;
  margin-bottom: 20px;
  text-shadow: 0 4px 30px rgba(0,0,0,.3);
}
/* hero CTA — lime fill + dark text, matching the Home 2 hero buttons */
.hero-slider .slide-actions .btn-primary { background: var(--lime); color: var(--green-deep); border-color: var(--lime); }
.hero-slider .slide-actions .btn-primary:hover { background: var(--lime-soft); border-color: var(--lime-soft); color: var(--green-deep); }
/* hero heading accent — emphasised phrase in lime, matching the Home 2 hero headline */
.slide-heading em { color: var(--lime); font-style: normal; }
.slide-sub {
  font-size: clamp(.98rem, 1.4vw, 1.12rem);
  color: rgba(255,255,255,.82);
  line-height: 1.7;
  margin-bottom: 34px;
  max-width: 560px;
}
.slide-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.slide-content .reveal-up { opacity: 1; transform: none; } /* JS handles slide entrance */

/* Controls */
.slider-controls {
  position: absolute;
  bottom: 38px;
  right: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  background: rgba(7,20,13,.42);
  backdrop-filter: blur(10px);
}
.slider-prev, .slider-next {
  width: 42px; height: 42px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff;
  border-radius: 50%;
  font-size: 1.05rem;
  cursor: pointer;
  transition: var(--t);
  display: grid;
  place-items: center;
}
.slider-prev:hover, .slider-next:hover { background: var(--lime); border-color: var(--lime); color: var(--green-deep); }
.slider-dots { display: flex; gap: 8px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: var(--t); }
.dot.dot--active { width: 26px; border-radius: 4px; background: var(--lime); }

.slider-progress { position: absolute; inset: auto 0 0 0; height: 3px; background: rgba(255,255,255,.14); z-index: 10; }
.slider-progress-bar { height: 100%; width: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; }

/* ═══════════════════════════════════════════
   TRUST STRIP
═══════════════════════════════════════════ */
.trust-strip { padding: clamp(48px, 6vw, 70px) 0; background: var(--bg-cream); }
.trust-inner {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.trust-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  background: linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);
  color: #fff;
}
.trust-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime-soft);
  margin-bottom: 14px;
}
.trust-kicker::before { content: ''; width: 22px; height: 2px; background: var(--lime); border-radius: 2px; }
.trust-intro h2 {
  color: #fff;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  max-width: 14em;
}
.trust-item {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border-left: 1px solid var(--line);
  position: relative;
}
.trust-item::after {
  content: '';
  position: absolute;
  left: 26px; right: 26px; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--green), var(--lime));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.trust-item:hover::after { transform: scaleX(1); }
.trust-icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--green-50);
  color: var(--green);
  margin-bottom: 18px;
}
.trust-icon svg { width: 22px; height: 22px; fill: currentColor; }
.trust-number {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--green);
  line-height: 1;
  margin-bottom: 8px;
}
.trust-number--text { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
.trust-label {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.trust-desc { font-size: .82rem; color: var(--muted); line-height: 1.55; }
.trust-meta { display: none; }

/* ═══════════════════════════════════════════
   DIVISIONS
═══════════════════════════════════════════ */
.divisions-section { padding: var(--section-y) 0; background: var(--bg-soft); }
.divisions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.division-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.division-card:hover { transform: translateY(-8px); box-shadow: var(--sh-3); border-color: var(--green-100); }
.division-card-img {
  position: relative;
  height: 240px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.division-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7,21,14,.55));
}
.division-img--utility    { background-image: url('../assets/images/utility-division-hero-web.jpg'); }
.division-img--lae        { background-image: url('../assets/images/lae-division-web.jpg'); }
.division-img--implements { background-image: url('../assets/images/implements-division-hero-web.jpg'); }
.division-card-img .img-placeholder-label { display: none; }

/* ═══════════════════════════════════════════
   IN HARMONY — full-bleed divisions wall (GSAP ScrollTrigger)
   empty green → 3 EQUAL, gap-free images rise UP one-by-one into a full-width wall →
   left scrim + heading reveal. Pinned + scrubbed. Each image always fully covers its slot.
═══════════════════════════════════════════ */
.harmony-section { position: relative; overflow: hidden; min-height: 100vh; color: #fff;
  background: radial-gradient(1100px 820px at 93% -6%, rgba(198,220,60,.07), transparent 58%), #00291d; }
.harmony-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .04; z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.harmony-inner { position: relative; z-index: 1; width: 100%; height: 100vh; }

/* background watermark — same idea as about.html .story-bg-word, adapted for the dark section */
.harmony-bg-word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; text-align: center; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 13vw, 11rem); line-height: 1; letter-spacing: -.04em;
  color: var(--lime); opacity: .08; white-space: nowrap;
  pointer-events: none; user-select: none; z-index: 1; }

/* full-width wall — 3 EQUAL strips, NO gap. z-index ABOVE the text so the rising images
   overlap / cover the centred heading as they come up. */
.harmony-strips,
.division-media-stage { position: absolute; inset: 0; z-index: 3; overflow: hidden; }
.strip { position: absolute; top: 0; height: 100%; overflow: hidden; text-decoration: none;
  will-change: transform; }
/* real <img> that COMPLETELY fills its equal slot at all times — never any band or container bg */
.strip-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  min-width: 100%; min-height: 100%; object-fit: cover; object-position: center center; }
.strip--1 { left: 0;       width: 33.4%; z-index: 1; } /* Utility */
.strip--2 { left: 33.33%;  width: 33.4%; z-index: 1; } /* Light Agri Equipments */
.strip--3 { left: 66.66%;  width: 33.4%; z-index: 1; } /* Implements */

/* per-division overlay — a soft fade + short text on each image, revealed one-by-one on continued
   scroll (after the intro fades). Hidden by default; GSAP fades it in (autoAlpha + y) per strip. */
.strip-info { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 6vh, 74px) clamp(18px, 1.8vw, 34px); opacity: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,20,13,.94) 3%, rgba(0,20,13,.6) 32%, rgba(0,20,13,0) 64%); }
.strip-info-name { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: clamp(1.15rem, 1.5vw, 1.9rem); line-height: 1.12; letter-spacing: -.01em; }
.strip-info-desc { margin-top: 9px; color: rgba(255,255,255,.86); font-size: clamp(.8rem, .92vw, 1rem); line-height: 1.5; max-width: 26em; }

/* centred scrim — soft glow behind the centred heading (sits below the text & the rising wall) */
.harmony-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 66% 62% at 50% 50%, rgba(0,25,16,.82) 0%, rgba(0,25,16,.5) 46%, rgba(0,25,16,0) 76%); }

/* intro text — CENTRED in the background (horizontally + vertically); wall (z3) rises over it */
.harmony-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; width: min(94%, 820px); text-align: center; }
.harmony-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(198,220,60,.14); color: var(--lime); font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.harmony-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: 1.04; letter-spacing: -.03em; color: #fff; margin: 22px 0 22px; white-space: nowrap; }
.harmony-desc { color: rgba(255,255,255,.82); line-height: 1.8; max-width: 600px; margin: 0 auto 28px; font-size: 1.02rem; }
.harmony-cta { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; font-size: .9rem; }
.harmony-cta .cta-arrow { transition: transform var(--t); }
.harmony-cta:hover .cta-arrow { transform: translateX(5px); }

/* hover / focus: NO dark overlay, NO dim — only a very subtle brighten on the hovered image. */
.harmony-strips .strip:hover, .harmony-strips .strip:focus-visible { filter: brightness(1.05); }
.strip:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }

@media (max-width: 1024px) {
  .harmony-section { min-height: 0; padding: clamp(64px, 9vw, 110px) 0; }
  .harmony-inner { position: relative; height: auto; width: 92vw; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
  .harmony-scrim { display: none; }
  .harmony-bg-word { display: none; }
  .harmony-text { position: relative; left: auto; top: auto; transform: none; order: 2; width: auto; max-width: none; }
  .harmony-strips, .division-media-stage { position: relative; inset: auto; order: 1; height: auto; overflow: visible; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: clamp(220px, 42vw, 340px); gap: 0; }
  .strip { position: relative; height: auto; }
  .strip, .strip--1, .strip--2, .strip--3 { left: auto; top: auto; width: auto; height: auto; }
  .strip--1 { grid-column: 1; } .strip--2 { grid-column: 2; } .strip--3 { grid-column: 3; }
  .strip-info { opacity: 1; padding: 14px 12px; }                 /* mobile: division text shown statically on each image */
  .strip-info-name { font-size: clamp(.8rem, 3.4vw, 1.05rem); }
  .strip-info-desc { display: none; }                              /* keep mobile tiles clean — name only */
  .harmony-strips .strip:hover, .strip:focus-visible { filter: none; }
  .harmony-title { font-size: clamp(1.9rem, 7vw, 3rem); white-space: normal; }
}

/* phones (≤600px): the 3-col image wall is too thin — stack the division images full-width
   (one per row) and show each division's name + short description clearly. */
@media (max-width: 600px) {
  .harmony-strips, .division-media-stage { grid-template-columns: 1fr; grid-auto-rows: 234px; }
  .strip--1, .strip--2, .strip--3 { grid-column: 1; }
  .strip-info { padding: 18px; background: linear-gradient(to top, rgba(0,20,13,.93) 6%, rgba(0,20,13,.42) 46%, rgba(0,20,13,0) 72%); }
  .strip-info-name { font-size: 1.2rem; }
  .strip-info-desc { display: block; margin-top: 5px; font-size: .85rem; color: rgba(255,255,255,.9); max-width: none; }
}
.division-card-body { padding: 28px 26px; display: flex; flex-direction: column; flex: 1; }
.division-icon { display: none; }
.division-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime-dark);
  margin-bottom: 14px;
}
.division-eyebrow::before { content: ''; width: 24px; height: 1.5px; background: var(--lime); }
.division-name { font-size: 1.32rem; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.division-desc { font-size: .92rem; color: var(--muted); line-height: 1.65; margin-bottom: 22px; }
.division-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  color: var(--green);
  transition: var(--t);
}
.division-cta span { transition: transform var(--t); }
.division-cta:hover { color: var(--green-mid); }
.division-cta:hover span { transform: translateX(5px); }

/* ═══════════════════════════════════════════
   ABOUT INTRO
═══════════════════════════════════════════ */
.about-intro { padding: var(--section-y) 0; background: var(--white); }
.about-intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(44px, 6vw, 84px);
  align-items: center;
}
.about-intro-media { position: relative; }
.about-img-placeholder {
  width: 100%;
  aspect-ratio: 1.06;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(15,59,37,.04), rgba(15,59,37,.22)), url('../assets/images/brand-promise-hero-web.jpg') center/cover;
  box-shadow: var(--sh-3);
  position: relative;
  overflow: hidden;
}
.about-img-placeholder .img-placeholder-label { display: none; }
.about-intro-media::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1.5px solid var(--green-100);
  border-radius: var(--r-lg);
}
.about-badge {
  position: absolute;
  bottom: -22px;
  left: -18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 24px;
  box-shadow: var(--sh-3);
  text-align: center;
}
.badge-number { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--green); line-height: 1; }
.badge-text { display: block; font-size: .7rem; font-weight: 600; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
.about-intro-copy .section-tag { margin-bottom: 18px; }
.about-intro-copy .section-title { text-align: left; margin-bottom: 22px; }
.about-intro-copy p { color: var(--body); margin-bottom: 16px; line-height: 1.8; }
.about-intro-copy .btn { margin-top: 14px; }

/* ═══════════════════════════════════════════
   PRODUCTS (dark)
═══════════════════════════════════════════ */
.products-section {
  padding: var(--section-y) 0;
  background:
    radial-gradient(760px 460px at 92% -6%, rgba(198,220,60,.08), transparent 56%),
    #ffffff;
}
.products-section .section-title { color: var(--ink); }
.products-section .section-desc { color: var(--muted); }
.products-section .section-tag { color: var(--green); }

/* ════ Our Products — interactive category-filter grid ════ */
.prod-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(30px, 4vw, 46px); }
.prod-filter { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--green); background: #fff; border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 9px 20px; cursor: pointer; transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.prod-filter span { font-size: .7rem; font-weight: 700; opacity: .55; }
.prod-filter:hover { border-color: var(--green); transform: translateY(-2px); }
.prod-filter.is-active { background: var(--green); color: #fff; border-color: var(--green); }
.prod-filter.is-active span { opacity: .8; }

.prod-carousel-wrap { position: relative; }
.prod-grid { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 6px 2px 16px; }
.prod-grid::-webkit-scrollbar { display: none; }
.prod-card { flex: 0 0 clamp(248px, 30%, 312px); position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, #ffffff 0%, #f4f8e6 100%); border: 1px solid #e7eed5; border-radius: var(--r-lg); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.prod-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); z-index: 3; }
.prod-card:hover { transform: translateY(-8px); box-shadow: var(--sh-3); }
.prod-card:hover::before { transform: scaleX(1); }
.prod-card.is-filtering { opacity: 0; transform: scale(.95); }
.prod-card.is-hidden { display: none; }

.prod-chip { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--green); box-shadow: 0 4px 12px -6px rgba(0,0,0,.4); }
.prod-card[data-cat="lae"] .prod-chip { color: var(--lime-dark); }
.prod-card[data-cat="impl"] .prod-chip { color: var(--green-mid); }

.prod-media { height: 196px; background-size: cover; background-position: center; transition: transform .6s var(--ease); }
.prod-card:hover .prod-media { transform: scale(1.07); }
.prod-media--utility { background-image: linear-gradient(180deg, rgba(7,24,15,0) 45%, rgba(7,24,15,.45)), url('../assets/images/utility-division-hero-web.jpg'); }
.prod-media--lae { background-image: linear-gradient(180deg, rgba(7,24,15,0) 45%, rgba(7,24,15,.45)), url('../assets/images/lae-division-web.jpg'); }
.prod-media--impl { background-image: linear-gradient(180deg, rgba(7,24,15,0) 45%, rgba(7,24,15,.45)), url('../assets/images/implements-division-hero-web.jpg'); }

.prod-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 22px; }
.prod-name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; margin-bottom: 7px; }
.prod-short { font-size: .9rem; color: var(--muted); line-height: 1.6; flex: 1; }
.prod-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-family: var(--font-display); font-weight: 700; font-size: .88rem; }
.prod-link svg { width: 16px; height: 16px; fill: currentColor; transition: transform .3s var(--ease); }
.prod-card:hover .prod-link svg { transform: translateX(5px); }

.prod-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; color: var(--green); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sh-2); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease); }
.prod-arrow svg { width: 20px; height: 20px; fill: currentColor; }
.prod-arrow:hover { background: var(--lime); color: var(--green-deep); border-color: var(--lime); }
.prod-arrow--prev { left: -8px; }
.prod-arrow--next { right: -8px; }
.prod-arrow.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 760px) { .prod-media { height: 168px; } .prod-arrow { display: none; } }
@media (max-width: 600px) { .prod-card { flex: 0 0 80vw; } }
.products-carousel-wrap { position: relative; }
.products-carousel { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 8px 2px 20px; }
.products-carousel::-webkit-scrollbar { display: none; }
.product-card {
  flex: 0 0 calc(25% - 18px);
  background: var(--white);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.product-img {
  position: relative;
  height: 190px;
  background-size: cover;
  background-position: center;
}
.product-img .img-placeholder-label { display: none; }
.product-img--1, .product-img--2, .product-img--7 { background-image: linear-gradient(180deg, transparent, rgba(7,24,15,.18)), url('../assets/images/utility-division-hero-web.jpg'); }
.product-img--3, .product-img--4, .product-img--6, .product-img--8 { background-image: linear-gradient(180deg, transparent, rgba(7,24,15,.18)), url('../assets/images/lae-division-web.jpg'); }
.product-img--5 { background-image: linear-gradient(180deg, transparent, rgba(7,24,15,.18)), url('../assets/images/implements-division-hero-web.jpg'); }
.product-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--green-50);
  color: var(--green);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  margin: 18px 18px 0;
}
.product-tag--lae { background: rgba(198,220,60,.18); color: var(--lime-dark); }
.product-tag--impl { background: rgba(15,59,37,.08); color: var(--green); }
.product-name { font-family: var(--font-display); font-size: 1.02rem; font-weight: 800; color: var(--ink); padding: 12px 18px 4px; }
.product-short { font-size: .84rem; color: var(--muted); padding: 0 18px; line-height: 1.55; }
.product-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 18px 22px;
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 700;
  color: var(--green);
  transition: var(--t);
}
.product-link:hover { gap: 11px; }
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--green);
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 10;
  transition: var(--t);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-2);
}
.carousel-prev { left: -18px; }
.carousel-next { right: -18px; }
.carousel-btn:hover { background: var(--lime); color: var(--green-deep); border-color: var(--lime); }
.carousel-btn.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* ═══════════════════════════════════════════
   BRANDS
═══════════════════════════════════════════ */
.brands-section { padding: var(--section-y) 0; background: var(--bg-soft); }
.brands-showcase {
  display: grid;
  grid-template-columns: .9fr 1.25fr;
  gap: 26px;
  align-items: stretch;
}
.brands-result-panel {
  position: relative;
  overflow: hidden;
  padding: 40px;
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(150deg, rgba(10,39,25,.94), rgba(15,59,37,.9)), url('../assets/images/brand-promise-hero-web.jpg') center/cover;
  box-shadow: var(--sh-3);
}
.brands-result-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  color: var(--lime-soft);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.brands-result-kicker::before { content: ''; width: 22px; height: 2px; background: var(--lime); }
.brands-result-panel h3 { color: #fff; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.18; font-weight: 800; margin-bottom: 16px; max-width: 12em; }
.brands-result-panel p { color: rgba(255,255,255,.78); line-height: 1.7; max-width: 32em; }
.brands-result-metrics { display: grid; gap: 10px; margin-top: 30px; }
.brands-result-metrics span {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.82);
  font-size: .86rem;
}
.brands-result-metrics strong { color: var(--lime); font-size: 1.3rem; font-family: var(--font-display); }
.brands-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.brand-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.brand-card:hover { transform: translateX(6px); box-shadow: var(--sh-2); border-color: var(--green-100); }
.brand-logo-placeholder {
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--green), var(--green-deep));
  color: var(--lime);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .03em;
  box-shadow: 0 0 0 5px var(--white), 0 0 0 6px var(--line);
}
.brand-copy { min-width: 0; }
.brand-role { display: block; font-family: var(--font-display); color: var(--lime-dark); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }
.brand-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: 5px; }
.brand-desc { font-size: .84rem; color: var(--muted); line-height: 1.5; margin-bottom: 9px; }
.brand-result { display: inline-flex; padding: 5px 11px; border-radius: var(--r-pill); background: var(--green-50); color: var(--green); font-size: .7rem; font-weight: 600; }
.brand-link { align-self: center; white-space: nowrap; font-family: var(--font-display); font-size: .84rem; font-weight: 700; color: var(--green); transition: var(--t); }
.brand-link:hover { color: var(--green-mid); }

/* ═══════════════════════════════════════════
   INDUSTRIES (dark glass)
═══════════════════════════════════════════ */
.industries-section {
  padding: var(--section-y) 0;
  position: relative;
  background: linear-gradient(rgba(6,19,12,.93), rgba(6,19,12,.96)), url('../assets/images/utility-division-hero-web.jpg') center/cover fixed;
}
.industries-section .section-tag { color: var(--lime-soft); }
.industries-section .section-title { color: #fff; }
.industries-section .section-desc { color: rgba(255,255,255,.68); }
.industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: ind; }
.industry-card {
  counter-increment: ind;
  position: relative;
  overflow: hidden;
  padding: 32px 28px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  backdrop-filter: blur(8px);
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.industry-card::before {
  content: '0' counter(ind);
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.07);
  transition: color var(--t);
}
.industry-card::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--lime), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.industry-card:hover { transform: translateY(-6px); border-color: rgba(198,220,60,.4); background: linear-gradient(160deg, rgba(198,220,60,.12), rgba(255,255,255,.02)); }
.industry-card:hover::before { color: rgba(198,220,60,.26); }
.industry-card:hover::after { transform: scaleX(1); }
.industry-icon {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(198,220,60,.4);
  background: rgba(198,220,60,.08);
  color: var(--lime);
  margin-bottom: 20px;
  transition: var(--t);
}
.industry-card:hover .industry-icon { background: var(--lime); color: var(--green-deep); transform: scale(1.05) rotate(-4deg); }
.industry-name { font-family: var(--font-display); color: #fff; font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.industry-desc { color: rgba(255,255,255,.62); font-size: .86rem; line-height: 1.55; }

/* ═══════════════════════════════════════════
   DEALER BANNER (dark split)
═══════════════════════════════════════════ */
.dealer-banner { position: relative; padding: var(--section-y) 0; overflow: hidden; background: var(--green-night); }
.dealer-banner-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 340px at 8% 12%, rgba(198,220,60,.16), transparent 62%),
    radial-gradient(520px 300px at 92% 90%, rgba(28,90,57,.5), transparent 65%),
    linear-gradient(120deg, #07150d 26%, #0d2a1a 72%, #123723 100%);
}
.dealer-banner-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.dealer-banner-copy .section-tag { color: var(--lime-soft); }
.dealer-banner-copy h2 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 800; line-height: 1.12; margin: 14px 0 18px; }
.dealer-banner-copy h2::after { content: ''; display: block; width: 64px; height: 3px; margin-top: 18px; border-radius: 3px; background: linear-gradient(90deg, var(--lime), transparent); }
.dealer-banner-copy p { color: rgba(255,255,255,.74); font-size: 1rem; line-height: 1.75; margin-bottom: 32px; }
.dealer-banner-media { position: relative; display: flex; flex-direction: column; gap: 20px; }
.dealer-img-placeholder {
  width: 100%;
  min-height: 360px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, transparent, rgba(7,24,15,.34)), url('../assets/images/brand-promise-hero-web.jpg') center/cover;
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.dealer-img-placeholder .img-placeholder-label { display: none; }
.dealer-stats { display: flex; gap: 0; padding: 6px; border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(10px); }
.dealer-stat { flex: 1; padding: 16px; text-align: center; color: rgba(255,255,255,.66); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-left: 1px solid rgba(255,255,255,.1); }
.dealer-stat:first-child { border-left: 0; }
.dealer-stat span { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--lime); line-height: 1; margin-bottom: 4px; }

/* ═══════════════════════════════════════════
   WHY CHOOSE US
═══════════════════════════════════════════ */
/* ── Why Us — heading on top, then a hairline-separated numbered list below.
   No cards, no shadows; alignment does the work. ── */
.why-section { padding: var(--section-y) 0; background: var(--bg-soft); }
.why-section .section-header { text-align: center; margin: 0 auto clamp(40px, 5vw, 60px); max-width: none; }
.why-section .section-title {
  font-size: clamp(1.95rem, 3vw, 2.7rem); line-height: 1.14; margin: 0 auto;
  max-width: 20ch; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none;
}
.why-section .section-header::after {
  content: ''; display: block; width: 64px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--lime), transparent); margin: 24px auto 0;
}

.why-ledger { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; border-top: 1px solid var(--line); }
.why-row {
  position: relative;
  display: grid; grid-template-columns: 62px minmax(200px, 290px) 1fr;
  column-gap: 28px; align-items: start;
  padding: 34px 0 34px 22px; border-bottom: 1px solid var(--line);
}
/* lime-tinted round icon in place of the number */
.why-ico {
  position: relative;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-50); color: var(--green);
}
.why-ico svg { position: relative; z-index: 2; width: 27px; height: 27px; }

/* ── ALWAYS-ON icon effects (no hover, no scroll needed — visible whenever on screen) ── */
@media (prefers-reduced-motion: no-preference) {
  /* 1) dashed lime orbit ring that continuously ROTATES around the icon */
  .why-ico::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px dashed var(--lime); z-index: 1;
    animation: whySpin 9s linear infinite;
  }
  /* 2) a solid lime halo that pulses outward, forever */
  .why-ico::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--lime); z-index: 0;
    animation: whyPulse 2.6s ease-out infinite;
  }
  /* 3) the whole icon gently floats up and down */
  .why-ico { animation: whyFloat 3.6s ease-in-out infinite; }

  /* stagger each row so they move out of sync (feels alive, not mechanical) */
  .why-row:nth-child(2) .why-ico { animation-delay: .5s; }
  .why-row:nth-child(3) .why-ico { animation-delay: 1s; }
  .why-row:nth-child(4) .why-ico { animation-delay: 1.5s; }
  .why-row:nth-child(2) .why-ico::before { animation-delay: .65s; }
  .why-row:nth-child(3) .why-ico::before { animation-delay: 1.3s; }
  .why-row:nth-child(4) .why-ico::before { animation-delay: 1.95s; }
  .why-row:nth-child(2) .why-ico::after { animation-direction: reverse; }
  .why-row:nth-child(4) .why-ico::after { animation-direction: reverse; }
}
@keyframes whyFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes whyPulse {
  0%   { transform: scale(1);    opacity: .7; }
  75%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}
@keyframes whySpin { to { transform: rotate(360deg); } }
/* content entry animation — each row fades + slides up, staggered, when the section enters */
.js-ready .why-row { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-ready .why-section.wy-in .why-row { opacity: 1; transform: none; }
.why-section.wy-in .why-row:nth-child(1) { transition-delay: .05s; }
.why-section.wy-in .why-row:nth-child(2) { transition-delay: .17s; }
.why-section.wy-in .why-row:nth-child(3) { transition-delay: .29s; }
.why-section.wy-in .why-row:nth-child(4) { transition-delay: .41s; }
@media (prefers-reduced-motion: reduce) {
  .js-ready .why-row { opacity: 1; transform: none; transition: none; }
}
/* lime rule that grows in on hover — the only movement in the section */
.why-row::before {
  content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px; border-radius: 2px;
  background: var(--lime); transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease);
}
.why-row:hover::before { transform: scaleY(1); }
.why-row h4 { font-family: var(--font-display); font-size: 1.24rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; margin: 0; padding-top: 10px; }
.why-row p { font-size: .95rem; color: var(--body); line-height: 1.75; margin: 0; max-width: 46ch; padding-top: 12px; }

@media (max-width: 1180px) {
  .why-row { grid-template-columns: 52px minmax(170px, 250px) 1fr; column-gap: 22px; }
}

/* ═══════════════════════════════════════════
   BLOG
═══════════════════════════════════════════ */
.blog-section { padding: var(--section-y) 0; background: var(--white); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--green-100); }
.blog-img { height: 210px; background-size: cover; background-position: center; overflow: hidden; }
/* the tiles carry a real <img> now (was a CSS background on a placeholder div) */
.blog-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.blog-card:hover .blog-img img { transform: scale(1.04); }
.blog-card { text-decoration: none; display: block; }
@media (prefers-reduced-motion: reduce) { .blog-img img { transition: none; } .blog-card:hover .blog-img img { transform: none; } }
.blog-img .img-placeholder-label { display: none; }
.blog-img--1 { background-image: url('../assets/images/utility-division-hero-web.jpg'); }
.blog-img--2 { background-image: url('../assets/images/lae-division-web.jpg'); }
.blog-img--3 { background-image: url('../assets/images/implements-division-hero-web.jpg'); }
.blog-card--featured .blog-img { height: 240px; }
.blog-body { padding: 26px; }
.blog-tag { display: inline-block; font-family: var(--font-display); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lime-dark); background: rgba(198,220,60,.16); padding: 4px 11px; border-radius: var(--r-pill); margin-bottom: 14px; }
.blog-title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; line-height: 1.35; }
.blog-excerpt { font-size: .86rem; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
.blog-link { font-family: var(--font-display); font-size: .84rem; font-weight: 700; color: var(--green); transition: var(--t); }
.blog-link:hover { color: var(--green-mid); }

/* ═══════════════════════════════════════════
   CTA STRIP
═══════════════════════════════════════════ */
.cta-strip { padding: clamp(60px, 7vw, 84px) 0; position: relative; overflow: hidden; background: var(--bg-soft); border-top: 1px solid var(--line); }
/* (corner glow removed) */
.cta-strip-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.cta-strip-copy { flex: 1; min-width: 280px; }
.cta-strip-copy h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.cta-strip-copy p { color: var(--body); font-size: 1rem; line-height: 1.7; }
.cta-strip-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
/* curved forest-green footer — rises over the section above with a soft top shadow */
.site-footer {
  background: var(--green); color: #eef2e6;
  position: relative; z-index: 1;
  margin-top: clamp(-72px, -5vw, -40px);
  border-radius: clamp(40px, 5.5vw, 80px) clamp(40px, 5.5vw, 80px) 0 0;
  overflow: hidden;
}
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 44px; padding: clamp(70px, 7.5vw, 96px) var(--pad) 48px; max-width: var(--max); margin-inline: auto; }
/* the "Divisions" column went when the three division pages were removed; pages that still
   carry four columns (legal, blog, media) keep the rule above */
@media (min-width: 981px) {
  .footer-inner:not(:has(> :nth-child(4))) { grid-template-columns: 2fr 1fr 1.5fr; }
}
.footer-col--brand .footer-logo { display: inline-flex; margin-bottom: 22px; line-height: 0; }
.footer-logo-img { width: 180px; height: auto; object-fit: contain; }
.footer-about { font-size: .86rem; color: rgba(238,242,230,.66); line-height: 1.75; margin-bottom: 24px; max-width: 34ch; }
.footer-social { display: flex; gap: 10px; }
.social-link { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-xs); background: rgba(238,242,230,.08); border: 1px solid rgba(238,242,230,.16); color: rgba(238,242,230,.75); transition: var(--t); }
.social-link:hover { background: var(--lime); color: var(--green-deep); border-color: var(--lime); transform: translateY(-3px); }
.footer-col-title { font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-soft); margin-bottom: 22px; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { font-size: .88rem; color: rgba(238,242,230,.74); transition: var(--t); }
.footer-links a:hover { color: var(--lime); padding-left: 5px; }
.footer-address { font-size: .86rem; color: rgba(238,242,230,.66); line-height: 1.75; margin-bottom: 14px; }
.footer-contact-item { font-size: .88rem; margin-bottom: 9px; }
.footer-contact-item a { color: rgba(238,242,230,.78); transition: var(--t); }
.footer-contact-item a:hover { color: var(--lime); }
.footer-newsletter { margin-top: 24px; }
.newsletter-label { font-family: var(--font-display); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(238,242,230,.6); margin-bottom: 12px; }
.newsletter-form { display: flex; border: 1px solid rgba(238,242,230,.18); border-radius: var(--r-xs); overflow: hidden; }
.newsletter-input { flex: 1; background: rgba(238,242,230,.07); border: none; padding: 11px 14px; font-family: var(--font-body); font-size: .84rem; color: #fff; outline: none; }
.newsletter-input::placeholder { color: rgba(238,242,230,.4); }
.newsletter-btn { background: var(--lime); color: var(--green-deep); border: none; padding: 0 18px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: var(--t); }
.newsletter-btn:hover { background: var(--lime-soft); }
.newsletter-msg { margin: 8px 0 0; font: 500 .8rem/1.4 var(--font-body); color: rgba(238,242,230,.85); }
.newsletter-msg[hidden] { display: none; }
.newsletter-msg.is-error { color: #f4c3c3; }
.footer-legal { border-top: 1px solid rgba(238,242,230,.12); }
.footer-legal-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px var(--pad); max-width: var(--max); margin-inline: auto; }
.footer-legal p { font-size: .8rem; color: rgba(238,242,230,.5); }
.footer-legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal-links a { font-size: .78rem; color: rgba(238,242,230,.5); transition: var(--t); }
.footer-legal-links a:hover { color: var(--lime); }

/* ═══════════════════════════════════════════
   SCROLL TO TOP + PROGRESS
═══════════════════════════════════════════ */
.scroll-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 48px; height: 48px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: var(--r-xs);
  font-size: 1.15rem;
  cursor: pointer;
  z-index: 500;
  opacity: 0;
  transform: translateY(16px);
  transition: var(--t);
  box-shadow: var(--sh-2);
  display: grid;
  place-items: center;
}
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--lime); color: var(--green-deep); transform: translateY(-4px); }
#pageProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--green), var(--lime)); z-index: 2000; pointer-events: none; transition: width .12s linear; }

/* ═══════════════════════════════════════════
   SCROLL REVEAL (main.js IntersectionObserver)
═══════════════════════════════════════════ */
.js-ready .scroll-reveal {
  opacity: 0;
  transition: opacity .75s var(--ease) var(--reveal-delay, 0ms), transform .75s var(--ease) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-ready .scroll-reveal.reveal-up { transform: translateY(32px); }
.js-ready .scroll-reveal.reveal-left { transform: translateX(-34px); }
.js-ready .scroll-reveal.reveal-right { transform: translateX(34px); }
.js-ready .scroll-reveal.is-visible { opacity: 1; transform: none; }

/* image hover zoom */
.division-card-img, .product-img, .blog-img { transition: transform .6s var(--ease); }
.division-card:hover .division-card-img,
.product-card:hover .product-img,
.blog-card:hover .blog-img { transform: scale(1.05); }
.division-card, .product-card, .blog-card { overflow: hidden; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1180px) {
  .trust-inner { grid-template-columns: repeat(3, 1fr); }
  .trust-intro { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .brands-showcase { grid-template-columns: 1fr; }
  .product-card { flex: 0 0 calc(33.33% - 16px); }
}
@media (max-width: 1279px) {
  .main-nav, .header-actions { display: none; }
  .hamburger { display: flex; position: fixed; top: 22px; right: 22px; width: 44px; height: 44px; align-items: center; justify-content: center; background: rgba(7,18,11,.32); border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-xs); z-index: 1300; }
  .site-header.scrolled .hamburger { background: var(--green-50); border-color: var(--line-strong); }
  .header-inner { justify-content: space-between; }
}
@media (max-width: 980px) {
  .divisions-grid { grid-template-columns: 1fr 1fr; }
  .about-intro-inner { grid-template-columns: 1fr; gap: 56px; }
  .dealer-banner-inner { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .industries-section { background-attachment: scroll; }
  .trust-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --section-y: 64px; }
  .header-inner { height: 70px; }
  .site-logo-img { width: 142px; max-height: 46px; }
  .hamburger { top: 19px; }
  .hero-slider { min-height: 560px; height: 100vh; height: 100svh; }
  .slide-heading { font-size: clamp(1.55rem, 7vw, 2.15rem); }
  .slide-actions { flex-direction: column; align-items: stretch; }
  .slide-actions .btn { width: 100%; }
  .slider-controls { right: var(--pad); bottom: 22px; }
  .trust-inner { grid-template-columns: 1fr; }
  .trust-item { border-left: 0; border-top: 1px solid var(--line); }
  .divisions-grid { grid-template-columns: 1fr; }
  .about-badge { left: 50%; transform: translateX(-50%); }
  .product-card { flex: 0 0 86vw; }
  .carousel-btn { display: none; }
  .brand-card { grid-template-columns: 56px 1fr; }
  .brand-link { grid-column: 2; }
  .industries-grid { grid-template-columns: 1fr; }
  .why-row { grid-template-columns: 48px 1fr; row-gap: 6px; padding: 24px 0 24px 16px; }
  .why-row h4 { padding-top: 0; }
  .why-row p { grid-column: 2; padding-top: 6px; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-legal-inner { flex-direction: column; text-align: center; }
  /* The actions box had no width and flex-shrink:0, so at phone widths it kept its
     max-content size (three nowrap pills side by side, ~500px) and the 100%-wide buttons
     filled THAT box, not the screen; .cta-strip's overflow:hidden then clipped their right
     ends, which is why no sideways-scroll audit ever caught it. Stack them instead. */
  .cta-strip-actions { width: 100%; min-width: 0; flex-shrink: 1; flex-direction: column; }
  .cta-strip-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .scroll-reveal { opacity: 1 !important; transform: none !important; }
  .slide-bg, .division-card:hover .division-card-img, .product-card:hover .product-img, .blog-card:hover .blog-img { transform: none !important; }
}

/* ═══════════════════════════════════════════════════
   HOMEPAGE SECTION POLISH (v5.1)
   Lifts the non-hero sections to match the hero:
   more breathing room, layered depth, editorial cards,
   and a cohesive branded wash over reused imagery.
═══════════════════════════════════════════════════ */

/* Rhythm + bolder headers */
.divisions-section, .about-intro, .products-section, .brands-section,
.industries-section, .dealer-banner, .why-section, .blog-section {
  padding-block: clamp(84px, 10vw, 134px);
}
.section-header { margin-bottom: clamp(46px, 5.5vw, 68px); }
.section-title { font-size: clamp(2rem, 3.6vw, 3rem); }

/* Depth — light sections get soft branded glows instead of flat fill */
.divisions-section {
  background:
    radial-gradient(840px 480px at 88% -10%, rgba(198,220,60,.14), transparent 60%),
    radial-gradient(640px 440px at -8% 112%, rgba(15,59,37,.05), transparent 60%),
    var(--bg-soft);
}
.brands-section {
  background:
    radial-gradient(760px 480px at 4% 2%, rgba(198,220,60,.12), transparent 56%),
    var(--bg-soft);
}
.why-section {
  background:
    radial-gradient(780px 500px at 96% 6%, rgba(15,59,37,.06), transparent 58%),
    var(--bg-soft);
}
.about-intro {
  background:
    radial-gradient(700px 460px at 100% 0%, rgba(198,220,60,.09), transparent 55%),
    #fff;
}
.blog-section {
  background:
    radial-gradient(720px 460px at 6% 4%, rgba(15,59,37,.04), transparent 56%),
    #fff;
}

/* Division cards — editorial, taller imagery, circular CTA */
.division-card { border-radius: var(--r-xl); }
.division-card-img { height: 300px; }
.division-card-img::after { background: linear-gradient(180deg, rgba(7,21,14,0) 32%, rgba(7,21,14,.72)); }
.division-card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.18) 46%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.18) 54%, transparent 64%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}
.division-card:hover .division-card-img::before {
  animation: divisionShine 2.2s ease-out infinite;
}
@keyframes divisionShine {
  0%   { transform: translateX(-130%); opacity: 0; }
  6%   { opacity: 1; }
  40%  { transform: translateX(130%); opacity: 0; }
  100% { transform: translateX(130%); opacity: 0; }
}
.division-card-body { padding: 30px 30px 26px; }
.division-name { font-size: 1.45rem; margin-bottom: 12px; }
.division-desc { font-size: .94rem; margin-bottom: 24px; }
.division-cta { padding-top: 18px; align-items: center; }
.division-cta span {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-50); color: var(--green);
  font-size: .9rem;
  transition: background var(--t), color var(--t), transform var(--t);
}
.division-cta:hover span { background: var(--lime); color: var(--green-deep); transform: translateX(4px); }

/* Cohesive imagery — unify reused photos with a branded green wash
   so repetition reads as a deliberate set, not placeholders */
.product-img, .blog-img { position: relative; }
.product-img::after, .blog-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,39,25,.10), rgba(10,39,25,.46));
}

/* Trust numbers a touch larger */
.trust-number { font-size: clamp(1.45rem, 2vw, 1.85rem); }
.trust-number--text { font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.15; }

/* ═══════════════════════════════════════════════════
   SECTION UPGRADES (v5.2) — About / Brands / Partnership / Blog
═══════════════════════════════════════════════════ */

/* About Farming Hub — richer copy column */
.about-highlights { list-style: none; display: grid; gap: 13px; margin: 8px 0 30px; }
.about-highlights li { display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; font-weight: 500; color: var(--ink); line-height: 1.45; }
.about-highlights .ah-ico { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: var(--green-deep); display: grid; place-items: center; font-size: .72rem; font-weight: 800; margin-top: 2px; }

/* Our Brands — designed monogram marks + crisper cards */
.brands-showcase .brand-card { grid-template-columns: 60px 1fr auto; padding: 24px; border-radius: var(--r); }
.brands-showcase .brand-card:hover { border-color: var(--lime); transform: translateX(6px); }
.brand-logo-placeholder {
  width: 60px; height: 60px;
  border-radius: 17px;
  background: linear-gradient(150deg, var(--green-mid), var(--green-deep));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 22px -10px rgba(10,39,25,.6);
  color: var(--lime);
  font-size: 1rem;
  position: relative;
}
.brand-logo-placeholder::after { content: ''; position: absolute; right: 9px; bottom: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(198,220,60,.85); }
.brand-name { font-size: 1.12rem; }

/* Partnership — benefits checklist + corner accents */
.dealer-benefits { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 8px 0 32px; }
.dealer-benefits li { position: relative; padding-left: 32px; color: rgba(255,255,255,.84); font-size: .93rem; line-height: 1.45; }
.dealer-benefits li::before { content: ''; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: rgba(198,220,60,.16); border: 1px solid rgba(198,220,60,.5); }
.dealer-benefits li::after { content: '\2713'; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; display: grid; place-items: center; color: var(--lime); font-size: .68rem; font-weight: 800; }
.dealer-banner-media::before { content: ''; position: absolute; top: -12px; right: -12px; width: 120px; height: 120px; border-top: 2px solid rgba(198,220,60,.5); border-right: 2px solid rgba(198,220,60,.5); border-radius: 0 var(--r-lg) 0 0; pointer-events: none; }
.dealer-banner-media::after { content: ''; position: absolute; bottom: 46px; left: -12px; width: 84px; height: 84px; border-bottom: 2px solid rgba(198,220,60,.32); border-left: 2px solid rgba(198,220,60,.32); border-radius: 0 0 0 var(--r-lg); pointer-events: none; }

/* Blog — editorial featured row + post meta */
.blog-grid { grid-template-columns: repeat(2, 1fr); }
.blog-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
.blog-card--featured .blog-img { height: auto; min-height: 320px; }
.blog-card--featured .blog-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 48px); }
.blog-card--featured .blog-title { font-size: 1.6rem; }
.blog-meta { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }

@media (max-width: 760px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card--featured { grid-template-columns: 1fr; }
  .blog-card--featured .blog-img { min-height: 220px; }
  .dealer-benefits { grid-template-columns: 1fr; }
  .dealer-banner-media::before, .dealer-banner-media::after { display: none; }
  /* tighter vertical rhythm on phones (the desktop 84–134px block padding is too tall here) */
  .about-intro, .products-section, .brands-section, .industries-section,
  .dealer-banner, .why-section, .blog-section { padding-block: clamp(52px, 13vw, 80px); }
  .section-header { margin-bottom: clamp(30px, 7vw, 44px); }
  /* keep the ghost number comfortably inside the card on phones */
}

/* ═══════════════════════════════════════════════════
   OUR BRANDS — tile deck redesign (v5.3)
═══════════════════════════════════════════════════ */
.brands-section .container { max-width: 1420px; }
.brand-deck { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.brand-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 220px;
  max-width: 272px;
  padding: 28px 24px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.brand-tile::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--lime));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.brand-tile:hover { transform: translateY(-8px); box-shadow: var(--sh-3); border-color: var(--green-100); }
.brand-tile:hover::before { transform: scaleX(1); }
.brand-logo-plate {
  height: 104px;
  display: grid;
  place-items: center;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 18px;
}
.brand-logo-plate img { max-height: 70px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.brand-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: var(--green-50);
  color: var(--green);
  white-space: nowrap;
  margin-bottom: 12px;
}
.brand-pill--owned { background: rgba(198,220,60,.22); color: var(--lime-dark); }
.brand-tile-name { position: relative; z-index: 1; font-family: var(--font-display); font-size: 1.18rem; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.brand-tile-desc { position: relative; z-index: 1; font-size: .88rem; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }
.brand-tile-link { position: relative; z-index: 1; margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: .85rem; font-weight: 700; color: var(--green); transition: color var(--t); }
.brand-tile-link span { transition: transform var(--t); }
.brand-tile-link:hover { color: var(--green-mid); }
.brand-tile-link:hover span { transform: translateX(5px); }

@media (max-width: 560px) {
  .brand-tile { max-width: none; flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════
   OUR PRODUCTS — image card with overlapping info panel (v5.4)
═══════════════════════════════════════════════════ */
.product-card {
  position: relative;
  height: 380px;
  border: none;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--green-deep);
  box-shadow: var(--sh-2);
}
.product-img {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: var(--r-lg);
}
.product-img::after {
  inset: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(7,21,14,.12) 0%, rgba(7,21,14,.04) 36%, rgba(7,21,14,.4) 100%);
}
.product-card:hover { box-shadow: var(--sh-3); transform: none; }
.product-card:hover .product-img { transform: scale(1.06); }

.product-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  margin: 0;
  padding: 8px 16px;
  border-radius: var(--r-xs);
  background: var(--green);
  color: #fff;
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.55);
}
.product-tag--lae { background: var(--lime-dark); color: #fff; }
.product-tag--impl { background: var(--green-mid); color: #fff; }

.product-body {
  position: absolute;
  left: 0;
  right: 13%;
  bottom: 0;
  z-index: 3;
  min-height: 116px;
  padding: 22px 22px 22px 24px;
  border-radius: 0 32px 0 0;
  background: linear-gradient(150deg, #2b8c45 0%, #14592e 100%);
  box-shadow: 0 -10px 26px -12px rgba(0,0,0,.45);
}
.product-name {
  padding: 0;
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.2;
}
.product-short {
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: .85rem;
  line-height: 1.55;
}
.product-link {
  margin: 14px 0 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
}
.product-link:hover { color: var(--lime-soft); gap: 10px; }

/* ═══════════════════════════════════════════════════
   BLOG — full-bleed editorial overlay cards (redesign)
   image fills the card · gradient · category pill · title over the image ·
   excerpt reveals on hover · image zoom on hover
═══════════════════════════════════════════════════ */
.blog-section { background: var(--bg-soft); }   /* wash removed: it darkened the beige by 10 levels */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card, .blog-card--featured {
  position: relative; display: block; grid-column: auto; grid-template-columns: none;
  height: clamp(380px, 33vw, 470px); border: none; border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-2); background: var(--green-deep);
  transition: transform var(--t), box-shadow var(--t); }
.blog-card:hover { transform: translateY(-7px); box-shadow: var(--sh-3); }
.blog-img, .blog-card--featured .blog-img {
  position: absolute; inset: 0; height: 100%; min-height: 0;
  background-size: cover; background-position: center; }
.blog-img::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,20,13,.12) 0%, rgba(6,20,13,.04) 30%, rgba(6,20,13,.5) 60%, rgba(6,20,13,.93) 100%); }
.blog-card:hover .blog-img { transform: scale(1.06); }
.blog-body, .blog-card--featured .blog-body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px 26px 28px; }
.blog-tag { display: inline-block; margin: 0 0 12px; font-family: var(--font-display);
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 5px 12px; border-radius: var(--r-pill); }
.blog-title, .blog-card--featured .blog-title { color: #fff; font-size: 1.22rem; line-height: 1.32; margin: 0; }
.blog-meta { color: rgba(255,255,255,.68); margin: 8px 0 0; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.blog-excerpt { color: rgba(255,255,255,.82); font-size: .88rem; line-height: 1.6;
  max-height: 0; opacity: 0; margin: 0; overflow: hidden;
  transition: max-height .55s var(--ease), opacity .45s var(--ease), margin .45s var(--ease); }
.blog-card:hover .blog-excerpt { max-height: 130px; opacity: 1; margin: 12px 0 0; }
.blog-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-family: var(--font-display); font-size: .85rem; font-weight: 700; color: var(--lime);
  transition: gap var(--t), color var(--t); }
.blog-link:hover { gap: 11px; color: #fff; }
@media (max-width: 980px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } .blog-card, .blog-card--featured { height: 340px; } }

/* CTA strip — light corporate: recolor the dark-theme buttons */
.cta-strip .btn-white { background: var(--green); color: #fff; border-color: var(--green); }
.cta-strip .btn-white:hover { background: var(--green-mid); border-color: var(--green-mid); }
.cta-strip .btn-outline-white { color: var(--green); background: transparent; border-color: var(--line-strong); }
.cta-strip .btn-outline-white:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ═══ CTA buttons — refined pill style (all CTA sections, every page) ═══ */
.cta-strip .btn, .inner-cta .btn {
  border-radius: 999px;
  padding: 16px 32px;
  font-size: .95rem;
  letter-spacing: .012em;
  border-width: 1.5px;
  box-shadow: none;
  transition: background .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease),
              transform .32s var(--ease), box-shadow .32s var(--ease);
}
.cta-strip .btn::after, .inner-cta .btn::after { display: none; }   /* calmer: no shine sweep */
.cta-strip .btn:hover, .inner-cta .btn:hover { transform: translateY(-3px); }
/* filled */
.cta-strip .btn-white, .cta-strip .btn-primary { box-shadow: 0 14px 30px -14px rgba(15,59,37,.45); }
.cta-strip .btn-white:hover, .cta-strip .btn-primary:hover { box-shadow: 0 20px 40px -14px rgba(15,59,37,.5); }
.inner-cta .btn-lime { box-shadow: 0 14px 30px -14px rgba(150,170,40,.55); }
.inner-cta .btn-lime:hover { box-shadow: 0 20px 40px -14px rgba(150,170,40,.65); }
/* outline — hairline that fills on hover */
.cta-strip .btn-outline-white { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.inner-cta .btn-outline-white { background: transparent; border-color: rgba(255,255,255,.45);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.inner-cta .btn-outline-white:hover { background: #fff; color: var(--green-deep); border-color: #fff; }
.cta-strip .btn-whatsapp { box-shadow: 0 14px 30px -14px rgba(31,175,84,.5); }
@media (max-width: 560px) { .cta-strip .btn, .inner-cta .btn { padding: 15px 26px; } }

/* ════════════════════════════════════════════════
   "What We Make" mega menu — injected by js/megamenu.js
   Desktop only: below 1280px the header collapses to the drawer.
════════════════════════════════════════════════ */
.mm-host { position: static; }
.mm-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 26px 48px -30px rgba(13,40,27,.42);
  padding: clamp(18px,1.8vw,26px) 0 0;
  z-index: 999;
}
.mm-panel[hidden] { display: none; }
/* v3 (2026-10-04): the whole panel is three panes - Utility | Light Agri | Implements. A pane's
   products show when it is hovered or focused; the other two bodies stay laid out but hidden, so
   the panel never changes height. Utility and Implements are plain lists; Light Agri alone has
   the Customer / Dealer switch and the family columns. */
.mm-tri { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.9fr) minmax(0, 1fr); }
.mm-pane { min-width: 0; padding: 0 clamp(16px, 1.8vw, 28px) clamp(20px, 2vw, 28px); border-left: 1px solid var(--line); }
.mm-pane:first-child { border-left: 0; padding-left: 0; }
.mm-pane:last-child { padding-right: 0; }
.mm-pane-top { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.mm-pane-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex: 1 1 auto; min-width: 0; padding: 12px 14px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  text-align: left; color: var(--ink); transition: background var(--t), color var(--t);
}
.mm-pane-h > span { display: block; min-width: 0; }
.mm-pane-h b { display: block; font: 700 1.02rem/1.2 var(--font-display); }
.mm-pane-h small { display: block; margin-top: 3px; font: 500 .76rem/1.3 var(--font-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-pane-h svg { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform var(--t), color var(--t); }
.mm-pane-h:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.mm-pane.is-on .mm-pane-h { background: var(--green-50); color: var(--green); }
.mm-pane.is-on .mm-pane-h svg { color: var(--green); transform: rotate(90deg); }
.mm-pane-b, .mm-pane .mm-seg {
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.mm-pane-b { padding: 0 14px; transform: translateY(6px); }
.mm-pane.is-on .mm-pane-b, .mm-pane.is-on .mm-seg {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.mm-pane-b ul { list-style: none; margin: 0; padding: 0; }
.mm-pane-b li { margin-bottom: 11px; }
.mm-pane-b li:last-child { margin-bottom: 0; }
.mm-pane-b ul a { font: 500 .9rem/1.35 var(--font-body); color: var(--body); text-decoration: none; white-space: nowrap; transition: color var(--t); }
.mm-pane-b ul a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
/* Light Agri only: the Customer / Dealer switch sits beside the pane title */
.mm-seg { display: inline-flex; flex: none; gap: 4px; padding: 4px; border-radius: 12px; background: var(--green-50); }
.mm-seg button { display: block; padding: 7px 18px 8px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left;
  font: 700 .84rem/1.2 var(--font-body); color: var(--body); transition: background var(--t), color var(--t), box-shadow var(--t); }
.mm-seg button small { display: block; margin-top: 2px; font: 500 .7rem/1.25 var(--font-body); color: var(--muted); white-space: nowrap; }
.mm-seg button[aria-selected="true"] { background: #fff; color: var(--green); box-shadow: 0 3px 10px -4px rgba(13,40,27,.35); }
.mm-seg button[aria-selected="true"] small { color: var(--body); }
.mm-seg button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* both ranges are stacked in one cell, so the pane is as tall as the taller one */
.mm-ranges { display: grid; }
.mm-range { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.mm-range.is-on { opacity: 1; visibility: inherit; }
.mm-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; }
.mm-g ul a { font-size: .88rem; }
.mm-gh { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 700 .68rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.mm-dealer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px clamp(20px, 3vw, 44px); align-items: center;
  padding: 20px 24px; border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--green-50); }
.mm-dealer h4 { margin: 0 0 6px; font: 700 1.02rem/1.2 var(--font-display); color: var(--ink); }
.mm-dealer p { margin: 0; max-width: 480px; font: 500 .88rem/1.55 var(--font-body); color: var(--body); }
.mm-dealer p.mm-dealer-tel { margin-top: 10px; font: 600 .82rem/1.3 var(--font-body); color: var(--muted); }
.mm-dealer-tel a { color: var(--green); text-decoration: none; }
.mm-dealer-tel a:hover { text-decoration: underline; }
.mm-dealer-actions { display: flex; flex-direction: column; gap: 8px; }
.mm-dealer-actions .btn-primary-sm, .mm-dealer-actions .btn-outline-sm { justify-content: center; text-decoration: none; }
/* Light Agri only: the one "All products" link - it opens the Light Agri catalogue alone */
.mm-all { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font: 600 .86rem/1.2 var(--font-body); color: var(--green); text-decoration: none; }
.mm-all svg { width: 15px; height: 15px; flex: none; transition: transform var(--t); }
.mm-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.mm-all:hover svg { transform: translateX(3px); }
/* keep the trigger underlined while its panel is open */
.mm-open .mm-host > .nav-link { color: var(--green); }
@media (max-width: 1279px) { .mm-panel { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .mm-pane-h, .mm-pane-h svg, .mm-pane-b, .mm-pane .mm-seg, .mm-pane.is-on .mm-pane-b, .mm-pane.is-on .mm-seg,
  .mm-range, .mm-seg button, .mm-pane-b ul a, .mm-all svg { transition: none; }
  .mm-pane-b { transform: none; }
}

/* ════════════════════════════════════════════════
   TOUCH TARGETS — measured, not guessed
   A device sweep (14 profiles x 11 pages) found the footer links sitting at
   350x24 and the legal row at 21px: at or under the WCAG 2.2 minimum of 24px,
   and far under the 44px Apple asks for. Text links are the whole problem —
   their hit box is the line box. Padding is applied only on coarse pointers so
   the desktop footer keeps exactly the rhythm it was designed with, and the
   list gap shrinks by the same amount so nothing grows taller.
════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .footer-links { gap: 0; }
  .footer-links a { display: block; padding: 11px 0; }
  .footer-links a:hover { padding-left: 5px; }
  .footer-legal { gap: 4px 18px; }
  .footer-legal a { display: inline-block; padding: 12px 0; }
  .footer-contact-item a { display: inline-block; padding: 6px 0; }
}